/*
 * ============================================================================
 * EDITORIAL — the main-street paper. ADR-0021's second pack.
 * ============================================================================
 *
 * Chosen by Michael on 2026-08-24 from a three-direction deck, in his words:
 * "I would take A with the existing hero and I will choose a different background image."
 *
 * So this pack is Direction A — Main Street Editorial — carried off the comp branch
 * (`comp/gardner-direction-a-editorial`, which occupied `civic.css` because a comp writes
 * nothing to the production database) and into a pack of its own, WITH the one
 * modification he named: the photographic hero stays. Civic is untouched on `main` and the
 * tenants carrying it are unaffected by every line below.
 *
 * ----------------------------------------------------------------------------
 * THE THESIS
 *
 * A proud small-town paper's special section, art-directed. Typography leads; the page is
 * light-ground almost everywhere; the accent is EDITORIAL INK — rules, eyebrows, figures,
 * links — and almost never a box fill. The grid is asymmetric: a narrow rail carries each
 * section's head under a rust rule, the wide column carries the work.
 *
 * THE SIGNATURE, said once and then repeated everywhere: a 3px accent rule caps a section
 * head or a card; a 6px accent rule caps the page's structural moments — the opening, the
 * call to action, the foot. Nothing else is allowed to be the loud thing.
 *
 * ----------------------------------------------------------------------------
 * THE ONE MODIFICATION TO THE COMP: THE HERO IS STILL A PHOTOGRAPH.
 *
 * Direction A replaced the opening picture with a light nameplate. That half is declined.
 * `data-align='full-bleed'` therefore keeps the base's photographic hero whole — the
 * picture, the two-axis scrim, the words at the lower left, the load moment — and takes
 * from this direction only what can be applied AROUND it: the 6px rule across its top, the
 * one band rhythm, and the display type it already wanted.
 *
 * The hero's other two arrangements — `left` and `centred`, which six of Gardner's ten menu
 * pages carry — take A's nameplate in full. That is where "every header is a dark box with
 * an image and text" is answered: on those pages the header becomes type, a rail and a
 * rule, with the photograph as a hard-cropped column beside the words rather than a
 * backdrop behind them.
 *
 * ----------------------------------------------------------------------------
 * WHAT THIS PACK OBEYS, WHICH IS CIVIC'S OWN LAW UNCHANGED
 *
 * It OVERRIDES ONLY (ADR-0021 decision 3). `site.css` is loaded first and is complete on
 * its own; a section this pack never mentions still renders sanely.
 *
 * It CONTAINS NO COLOURS OF ITS OWN. Every value below is a theme token the tenant fills —
 * `--accent`, `--accent-teal`, `--accent-gold`, `--ground-dark` (the fourth palette slot),
 * `--accent-strong` (the accent darkened 25%, computed on `.site` by the base) — or one of
 * the base's own neutrals. There is not one hex in this file.
 *
 * THE DISPLAY FACE STOPS AT `h2`. Michael's ruling of 2026-08-24, and this pack does not
 * reopen it: nothing below a level-two heading is set in the tenant's display face. Every
 * other typographic voice here is the body face worked hard — weight, tracking, case, size
 * and rule-work.
 *
 * NOTHING HERE IS SCRIPTED, and this pack ships NO scroll-driven timeline. Civic's
 * `animation-timeline: view()` reveals are deliberately absent: they paint a section at
 * opacity 0 in any capture that does not scroll, and this direction's rhythm does not need
 * a section to arrive to be understood. The base's own `InView` treatment is switched off
 * below for the same reason. The one orchestrated moment on the site is the hero's load,
 * which is the base's and is already behind `prefers-reduced-motion: no-preference`.
 * ----------------------------------------------------------------------------
 */

/*
 * ---------------------------------------------------------------------------
 * THE SPACING SCALE. Gripe two's whole answer: "sections are not spaced consistently".
 *
 * ONE rhythm, stated once, on an 8px base: 8 / 12 / 16 / 24 / 32 / 48 / 72 / 96. Nothing in
 * this file uses a length that is not one of these eight steps or the band token derived
 * from them, and there is no `calc()` on a step anywhere below — a multiplier is how a
 * scale stops being a scale.
 *
 * `--e-band` is the band rhythm and it is SYMMETRIC. The base gives most sections
 * `padding-block: var(--band) 0` — air above, none below — which is why two neighbouring
 * bands sit at different distances depending on which of them paints a ground. Every
 * top-level section below takes the same top and bottom, so the gap between any two bands
 * is the same gap everywhere on the site.
 * ---------------------------------------------------------------------------
 */
.site {
  --e1: 0.5rem;
  --e2: 0.75rem;
  --e3: 1rem;
  --e4: 1.5rem;
  --e5: 2rem;
  --e6: 3rem;
  --e7: 4.5rem;
  --e8: 6rem;

  /* The one band rhythm. Between --e7 and --e8, so a phone is not all air. */
  --e-band: clamp(4.5rem, 6vw, 6rem);

  /* The editorial rail: where a section's head hangs. */
  --rail: 13rem;

  /* The frame's own centring, restated for the bands that paint to the window edge. */
  --e-frame: max(var(--gutter), calc(50% - var(--page) / 2));
}

/*
 * THE PAGE CLOSES ON A SECTION, NOT ON A STRIP OF PAPER.
 *
 * The base gives `.site-main` a closing `padding-bottom: var(--band)` because most of its
 * sections are padded above and not below — and it already has to take that band away
 * again for the two section types that DO close their own (`.cta-band`, `.sponsors`). In
 * this direction every top-level band below is symmetric, so the frame's band is always
 * the second gap: measured on /board-and-staff, 96px of `--paper` between a white text
 * section and the footer, which reads as a seam rather than as air.
 */
.site-main {
  padding-bottom: 0;
}

/*
 * EVERY top-level band, on the one rhythm. Listed rather than wildcarded so a section that
 * paints its own ground and a section that does not are unmistakably on the same clock —
 * and so the exceptions below have something to be exceptions to.
 */
.hero,
.text,
.feature-row,
.split,
.card-list,
.gallery,
.video,
.faq,
.contact,
.join,
.directory,
.events,
.posts,
.plans,
.board,
.sponsors,
.showcase,
.stat-band,
.cta-band,
.event-detail,
.post-detail,
.member-detail,
.empty-state {
  padding-block: var(--e-band);
}

/*
 * ---------------------------------------------------------------------------
 * TYPE. The paper's voice.
 *
 * The display face (Bebas Neue on Gardner) carries h1 and h2 and stops there. Below that
 * the body face does every job, and the jobs are told apart by weight, tracking and case
 * rather than by a second family: an eyebrow is 11px/800 at .18em uppercase, a card title
 * is 21px/800 at -0.01em sentence case, a date is 17px/800 tabular. Three unmistakable
 * voices, one face.
 * ---------------------------------------------------------------------------
 */
.site h1 {
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.site h2 {
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/*
 * THE SECTION HEAD, at the top of the rail, under its own 3px rust rule.
 *
 * Every section that has a head of its own, not only the four the comp's one page carried.
 * A reader who clicks from the home page to /membership or /board-and-staff has to land on
 * the same paper — the comp proved two pages, and a direction that stops at two pages is a
 * page design rather than a site design.
 */
.card-list > h2,
.sponsors > h2,
.plans > h2,
.gallery > h2,
.faq > h2,
.video > h2,
.board > h2,
.posts > h2,
.contact > h2,
.text > h2,
.feature-row > h2,
.directory > h2 {
  margin: 0;
  padding-top: var(--e2);
  border-top: 3px solid var(--accent);
  font-size: clamp(1.75rem, 3.4cqi, 2.5rem);
}

/*
 * ---------------------------------------------------------------------------
 * THE MASTHEAD. Light, thin, and set as an index rather than as navigation furniture.
 *
 * Part of gripe five's answer at the other end of the page: the masthead and the footer are
 * the same index in two registers, so the foot of the page reads as the head of it repeated
 * rather than as a menu that fell down there.
 * ---------------------------------------------------------------------------
 */
.site-header {
  background: var(--card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--rule);
  padding-block: var(--e2);
}

.site-header .menu > li > a,
.site-header .menu > .menu-heading > span {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header .menu > li > a::after {
  height: 3px;
  bottom: 0.45rem;
}

/* Where the reader is, said in ink rather than in a tint. */
.site-header .menu > li > a[aria-current='page'] {
  color: var(--accent-strong);
}

.site-header .menu > li > a[aria-current='page']::after {
  transform: scaleX(1);
}

.site-header .menu-children a {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

/*
 * ---------------------------------------------------------------------------
 * THE OPENING PICTURE. Kept, on Michael's word, and given the paper's rule.
 *
 * `full-bleed` is the base's photographic hero and stays exactly that: the picture behind
 * the words, the two-axis scrim that carries them at AA over any photograph, the button at
 * the lower left, the settle-and-rise on load. The comp's argument for replacing it went
 * with the decision not to.
 *
 * What this direction adds is the frame around it. The 6px rust rule across the top is the
 * paper's nameplate rule — it comes back twice, at the top of the call-to-action band and
 * at the top of the foot, and the three bracket the page. And the band joins the one
 * rhythm: the base sets `calc(var(--band) * 1.2)` on this exact selector, which is a ninth
 * clock on a page with eight bands.
 *
 * The height and the display size are Civic's, carried over unchanged, because "the
 * existing hero" is the hero as it renders today and those two rules are part of it.
 * ---------------------------------------------------------------------------
 */
.hero[data-align='full-bleed'] {
  border-top: 6px solid var(--accent);
  min-height: min(78vh, 46rem);
  padding-block: var(--e-band);
}

.hero[data-align='full-bleed'] .hero-words {
  max-width: 46rem;
}

/*
 * The heading answers to the space the SECTION has, not the window (ADR-0021 decision 7).
 * Civic's rule and Civic's reason: a hero inside a narrow column and a hero across the page
 * are different problems.
 */
@container (min-width: 40rem) {
  .hero[data-align='full-bleed'] h1 {
    font-size: clamp(2.75rem, 7cqi, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE NAMEPLATE, on every other arrangement. Gripe four-and-a-half: "every header is a
 * dark box with an image and text".
 *
 * So these are not. The band is the page's own paper, the headline is INK at nameplate
 * size, and the photograph is a hard-cropped column beside the words rather than a backdrop
 * behind them — which is the whole argument of this direction in one section: the picture
 * illustrates the claim, it does not host it.
 *
 * Six of Gardner's ten menu pages open this way. Restyling only the arrangement the home
 * page uses would have answered the gripe on one page and left the rest opening on a
 * coloured box — which is exactly what the comp lane found by walking /events after the
 * home page was done.
 * ---------------------------------------------------------------------------
 */
.hero:not([data-align='full-bleed']) {
  background-color: var(--card);
  background-image: none;
  color: var(--ink);
  border-top: 6px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  gap: var(--e5);
}

.hero:not([data-align='full-bleed']) h1 {
  color: var(--ink);
  font-size: clamp(2.5rem, 6.5cqi, 4.5rem);
  margin-bottom: var(--e4);
  max-width: 12em;
}

.hero:not([data-align='full-bleed']) .hero-sub {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 34rem;
}

/* Hard-cropped and square-cornered. Nothing in this direction has a radius. */
.hero:not([data-align='full-bleed']) .hero-picture img {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* The nameplate rule, above the headline. */
.hero:not([data-align='full-bleed']) .hero-words::before {
  content: '';
  display: block;
  width: 5rem;
  height: 3px;
  background: var(--accent);
  margin-bottom: var(--e4);
}

.hero[data-align='centred'] .hero-words::before {
  margin-inline: auto;
}

/*
 * THE PRIMARY ACTION IS THE DARK GROUND, NOT THE RUST.
 *
 * White on the raw accent measures 4.02:1, which Michael has accepted for the photographic
 * hero on his own brand and which this file does not reopen — that hero is above and keeps
 * its own button. On paper the strongest block available is the fourth palette slot: white
 * on `--ground-dark` measures 10.13:1 on Gardner's `#244652`, and it keeps the rust for ink
 * where the rust reads best.
 */
.hero:not([data-align='full-bleed']) .hero-action a {
  display: inline-block;
  background: var(--ground-dark);
  color: var(--on-ink);
  border-radius: 0;
  padding: var(--e3) var(--e5);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 3px solid var(--accent);
  box-shadow: none;
}

.hero:not([data-align='full-bleed']) .hero-action a:hover {
  background: var(--accent-strong);
  color: var(--on-ink);
  transform: none;
  box-shadow: none;
}

/*
 * THE RING GOES BACK TO INK on the light nameplate. The base points every focus ring inside
 * `.hero` at `--on-ink`, because the hero has always been a dark band — on a light one that
 * is a near-white ring on white paper, which is a ring only the accessibility tree can see.
 *
 * Only where the ground actually changed. The photographic hero above is still dark and
 * still wants the base's ring, so it is not touched.
 */
.hero:not([data-align='full-bleed']) :focus-visible {
  outline-color: var(--accent-strong);
}

/*
 * ON A PHONE THE HEADLINE LEADS AND THE PHOTOGRAPH FOLLOWS IT.
 *
 * The renderer emits the picture before the words, which is right for the side-by-side
 * arrangement below and wrong stacked: a nameplate whose name is under the picture is not
 * a nameplate. Measured at 390 on /events, the headline sat 300px down the page.
 */
@media (max-width: 61.99rem) {
  .hero:not([data-align='full-bleed']) .hero-words {
    order: 1;
  }

  .hero:not([data-align='full-bleed']) .hero-picture {
    order: 2;
  }
}

/* Words left, picture right, at the width where both can breathe. */
@media (min-width: 62rem) {
  .hero[data-align='left']:has(.hero-picture) {
    grid-template-columns: 7fr 5fr;
    column-gap: var(--e8);
    align-items: center;
  }

  .hero[data-align='left'] .hero-words {
    grid-column: 1;
    grid-row: 1;
  }

  .hero[data-align='left'] .hero-picture {
    grid-column: 2;
    grid-row: 1;
  }

  .hero[data-align='left'] .hero-picture img {
    aspect-ratio: 4 / 3;
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE CARD LISTS. Gripe one: "Text is hard to read in the 3 CTA boxes".
 *
 * They stop being boxes. Three coloured panels with ink derived from whichever of the
 * tenant's accents landed on them is a mechanism for producing text that is legible by
 * arithmetic and unpleasant by eye — and on a gold panel it is neither.
 *
 * Here they are columns of a printed index on the page's own paper, each capped by a rust
 * rule. Every value is measured on Gardner's palette against `--card` (#ffffff):
 *
 *   heading      --ink        #141828   17.63 : 1
 *   body         --ink-soft   #404a63    8.83 : 1
 *   action       --accent-strong        6.44 : 1   (the accent darkened 25%)
 *
 * The lowest number on the band is 6.44:1 against a 4.5:1 bar. The rust is still the
 * loudest thing in each column — it is just the rule and the link rather than the ground.
 *
 * EVERY card list, not only the one under the hero. Membership carries a card list in the
 * middle of the page, and a door that reads one way on the home page and another way two
 * clicks in is the inconsistency this direction exists to remove. The edit-mode twin of
 * each selector is written out for `site.css`'s own stated reason: `EditableSection` wraps
 * every declared block, so a rule keyed on `+` silently stops matching in the editor.
 * ---------------------------------------------------------------------------
 */
.card-list,
[data-cf-edit-section] > .card-list {
  background: var(--card);
  display: grid;
  gap: var(--e5);
  align-items: start;
}

.card-list > h2 {
  align-self: start;
}

.card-list .cards {
  display: grid;
  gap: 0;
  margin: 0;
  border-radius: 0;
}

.card-list .card {
  background: none;
  border: 0;
  border-top: 3px solid var(--accent);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  padding: var(--e3) var(--e4) var(--e4) 0;
}

.card-list .card h2,
.card-list .card h3 {
  color: var(--ink);
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--e2);
}

.card-list .card .card-body,
.card-list .card .card-body p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.card-list .card .card-picture img {
  border-radius: 0;
}

.card-list .card .card-action {
  margin-top: var(--e3);
}

/*
 * A DOOR'S LINK IS A FINGER'S TARGET, and the padding is what makes it one — measured at
 * 390px, the label alone came back 21px tall. `inline-block` so the vertical padding counts
 * toward the line box rather than only toward the hit box, and the rule under it moves down
 * with it, which is where an editorial underline wants to sit anyway.
 */
.card-list .card .card-action a {
  display: inline-block;
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-block: var(--e2);
}

.card-list .card .card-action a:hover {
  color: var(--ink);
  border-bottom-width: 4px;
  text-decoration: none;
}

/*
 * The whole column answers the pointer, not just the link — a door is the thing being
 * pointed at. It is the cap rule that thickens, so nothing moves and no neighbour shifts.
 */
.card-list .card:hover,
.card-list .card:focus-within {
  transform: none;
  box-shadow: none;
  border-top-width: 6px;
  border-top-color: var(--accent-strong);
  padding-top: calc(var(--e3) - 3px);
}

@media (min-width: 48rem) {
  .card-list[data-align='grid'] .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--e5);
  }

  /* `rows` stays one column — the setting exists to say so. It gets air instead. */
  .card-list[data-align='rows'] .cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--e5);
  }
}

@media (min-width: 62rem) {
  .card-list,
  [data-cf-edit-section] > .card-list {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
  }

  /* A list with no head of its own takes the whole measure rather than an empty rail. */
  .card-list:not(:has(> h2)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE SPLIT. The photograph is a photograph again.
 *
 * Civic masked it into the tenant's own letterform, which is a good effect and the wrong
 * one for a page whose argument is that the pictures are of the town. The mark still
 * appears on this page — once, on the events plate below — and appearing twice is what made
 * it decoration.
 * ---------------------------------------------------------------------------
 */
.split .split-picture img {
  mask-image: none;
  -webkit-mask-image: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.split .split-picture {
  border-top: 6px solid var(--accent);
  background: none;
  overflow: hidden;
}

/*
 * The split band takes the card's white rather than the page's paper.
 *
 * `--paper` and `--tint` are two greys three units apart, and with a numbers band under it
 * the two read as one long grey region with a photograph in it. The page alternates
 * white / white / white / tint / white / tint down to the dark foot, and the hairline is
 * what separates two whites — which is how a printed page does it.
 */
.site-main > .reveal:has(> .split),
.site-main > [data-cf-edit-section]:has(> .reveal > .split) {
  padding-inline: 0;
}

.split {
  background: var(--card);
  border-top: 1px solid var(--rule);
  padding-inline: var(--e-frame);
}

/* A rule rather than a box, which is Civic's own instinct and is kept. Rust, not a wash. */
.split[data-emphasis='image-led'] .split-words {
  border-left: 0;
  padding-left: 0;
}

.split-words > h2 {
  margin-bottom: var(--e4);
  font-size: clamp(1.75rem, 4cqi, 2.75rem);
}

.split-body p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.split-action a {
  display: inline-block;
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-block: var(--e2);
}

.split-action a:hover {
  color: var(--ink);
  border-bottom-width: 4px;
  text-decoration: none;
}

@media (min-width: 62rem) {
  .split[data-emphasis='image-led'][data-side='left'] {
    grid-template-columns: 6fr 5fr;
    column-gap: var(--e8);
    align-items: center;
  }

  .split[data-emphasis='even'] {
    column-gap: var(--e8);
    align-items: center;
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE TEXT BAND. A column of prose, given the rail so it agrees with everything above it.
 * ---------------------------------------------------------------------------
 */
.text {
  display: grid;
  gap: var(--e5);
  align-items: start;
  background: var(--card);
  border-top: 1px solid var(--rule);
}

.text .prose p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

@media (min-width: 62rem) {
  .text:has(> h2) {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE FEATURE ROW. Three claims with a picture each — the same index the card list is, at
 * a different size, so the two read as one family rather than two components.
 * ---------------------------------------------------------------------------
 */
.feature-row {
  display: grid;
  gap: var(--e5);
  align-items: start;
  background: var(--tint);
  border-block: 1px solid var(--rule);
  padding-inline: var(--e-frame);
}

.feature-row .features {
  gap: var(--e5);
}

.feature-row .feature {
  background: none;
  border: 0;
  border-top: 3px solid var(--accent);
  border-radius: 0;
  box-shadow: none;
  padding: var(--e3) 0 0 0;
}

.feature-row .feature h3 {
  font-size: 1.3125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--e2);
}

.feature-row .feature p {
  color: var(--ink-soft);
  line-height: 1.6;
}

.feature-row .feature img {
  border-radius: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.feature-row .feature:hover {
  transform: none;
  box-shadow: none;
  border-top-width: 6px;
  border-top-color: var(--accent-strong);
  padding-top: calc(var(--e3) - 3px);
}

@media (min-width: 62rem) {
  .feature-row:has(> h2) {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE NUMBERS. Off the dark ground and onto the paper.
 *
 * On paper the figure can be the rust at full editorial weight — `--accent-strong` measures
 * 5.54:1 on `--tint`, and the label under it 7.59:1 — and the band stops competing with the
 * call to action below it. Left-aligned in three columns divided by hairlines: three
 * centred numbers floating in a band is the arrangement every template ships.
 * ---------------------------------------------------------------------------
 */
.stat-band {
  background: var(--tint);
  color: var(--ink);
  padding-inline: var(--e-frame);
  border-block: 1px solid var(--rule);
}

.stat-band-list {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--e5);
}

.stat {
  justify-items: start;
  text-align: left;
  gap: var(--e2);
  padding-top: var(--e2);
  border-top: 3px solid var(--accent);
}

.stat-number {
  color: var(--accent-strong);
  font-size: clamp(2.75rem, 6.5cqi, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.stat-label {
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

/*
 * ---------------------------------------------------------------------------
 * WHAT IS COMING UP. Gripe three, and it is the client's own instruction: "a condensed tool
 * split with an Image on one half the page".
 *
 * So the band is a split. One half is a plate; the other is the diary, and the diary is a
 * TOOL — hairline rows, a stacked date-and-venue column at a fixed width, the title on one
 * line and the summary clamped to two. Four events came to 900px of boxed cards with a
 * shadow each; they now come to roughly a quarter of that, and the eye reads down one date
 * column instead of across four tiles.
 *
 * THE PLATE IS NOW A REAL ELEMENT, and that is the one product change this pack rides in
 * on. `EventCard.imageUrl` threads the events contract's own picture through the media
 * contract to the list, so `.events-plate` holds the soonest event's photograph when there
 * is one. The comp could only draw a pseudo-element, because the view model dropped the
 * picture the contract had always answered.
 *
 * WHEN THERE IS NO PHOTOGRAPH — which is every one of Gardner's five events today — the
 * plate is the comp's own answer, unchanged: the chamber's mark on the fourth palette slot
 * under a rust rule, a printed seal beside the diary. `:empty` is exactly the right hook:
 * the renderer emits the element either way, so the layout never changes shape for a reason
 * a visitor cannot see, and the fallback is a rule rather than a second arrangement.
 * ---------------------------------------------------------------------------
 */
.events {
  background: var(--card);
  display: grid;
  gap: var(--e5);
  align-items: start;
}

.events .events-plate {
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-top: 6px solid var(--accent);
}

.events .events-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/*
 * The seal, for the ordinary case. The mark sits low and left, not dead centre — a centred
 * logo on a coloured square is a placeholder, an off-centre seal with the ground working
 * around it is a plate. The wash behind it is the tenant's second accent, which is the only
 * other colour this plate is allowed to know about.
 */
.events .events-plate:empty {
  background-color: var(--ground-dark);
  background-image:
    var(--site-mark),
    radial-gradient(
      70% 55% at 78% 14%,
      color-mix(in srgb, var(--accent-teal) 42%, transparent),
      transparent 72%
    );
  background-repeat: no-repeat, no-repeat;
  background-position:
    14% 80%,
    center;
  background-size:
    38% auto,
    cover;
}

.events .event-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

/*
 * A row, not a card. The date column is `.event-when` turned on its side: the base lays the
 * time and the venue out as a wrapped row separated by a middot, and stacking them makes a
 * plate the eye can run down. The middot goes with the row it separated.
 */
.events .event {
  display: grid;
  grid-template-columns: minmax(6rem, 7rem) minmax(0, 1fr);
  column-gap: var(--e4);
  row-gap: var(--e1);
  padding: var(--e3);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  margin-left: calc(var(--e3) * -1);
}

.events .event > * {
  grid-column: 2;
}

.events .event > .event-when {
  grid-column: 1;
  grid-row: 1 / span 2;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e1);
  font-size: 0.9375rem;
}

.events .event .event-when time,
.events .event .event-when-tbd {
  color: var(--accent-strong);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.events .event .event-venue {
  color: var(--ink-mute);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.events .event .event-venue::before {
  content: none;
}

.events .event h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

/*
 * The whole column is the target, not the three words in it. A diary row's only focusable
 * thing is this link, and on a phone a 22px strip is a thing you miss.
 */
.events .event h3 a {
  display: block;
  padding-block: var(--e1);
  color: var(--ink);
}

.events .event h3 a:hover {
  color: var(--accent-strong);
}

/* Condensed: two lines of summary, and the row keeps its height whatever was typed. */
.events .event .event-summary {
  margin: 0;
  color: var(--ink-mute);
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/*
 * The row answers the pointer AND the keyboard. `:focus-within` is not decoration here —
 * the only focusable thing in a row is the title link, and a 2px ring around three words on
 * a hairline list is easy to lose.
 */
.events .event:hover,
.events .event:focus-within {
  transform: none;
  box-shadow: none;
  background: var(--tint);
  border-bottom-color: var(--rule);
  border-left-color: var(--accent);
}

.events .events-empty {
  margin: 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--rule);
}

@media (prefers-reduced-motion: no-preference) {
  .events .event {
    transition:
      background-color 160ms ease,
      border-left-color 160ms ease;
  }
}

/*
 * The split itself. Plate left, diary right, at the width where both can breathe.
 *
 * THE PLATE TAKES THE DIARY'S HEIGHT rather than an aspect of its own. Given `4/5` it stood
 * 625px beside 300px of rows and re-opened the hole the condensed list had just closed —
 * the plate has to answer to the tool beside it, not to a ratio.
 */
@media (min-width: 62rem) {
  .events {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e8);
    align-items: stretch;
  }

  .events .events-plate {
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 20rem;
  }
}

/* On a phone the plate is a short band above the diary rather than half a screen of mark. */
@media (max-width: 61.99rem) {
  .events .events-plate {
    aspect-ratio: 16 / 7;
  }

  .events .events-plate:empty {
    background-size:
      auto 52%,
      cover;
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE PARTNERS. Gripe four: "another area that feels like it just got thrown on the page
 * with no thought and the section isn't spaced".
 *
 * It was a centred flex row of five marks at 13rem apiece, wrapping wherever it ran out,
 * with a heading floating above the middle of it. Nothing about that arrangement is a
 * decision.
 *
 * Here it is a printed plate: the heading in the rail under its rust rule, and the marks in
 * a ruled grid — one cell per partner, equal cells, hairlines between them drawn by a 1px
 * gap over the rule colour. Five partners fill one row exactly; four or six would still
 * fill their row, because the cells divide the space rather than claiming a width. The name
 * under each mark is set as small print, which is what it is.
 * ---------------------------------------------------------------------------
 */
.sponsors {
  background: var(--tint);
  display: grid;
  gap: var(--e5);
  align-items: start;
  border-block: 1px solid var(--rule);
}

/* Adjacent to the events list or not, the partners band is the same band. */
.events + .sponsors,
[data-cf-edit-section]:has(> .events) + [data-cf-edit-section] > .sponsors {
  padding-top: var(--e-band);
  background: var(--tint);
}

/*
 * AND THE SAME BAND WHEN IT CLOSES THE PAGE, which has to be said again here.
 *
 * The base gives a sponsors strip that ends a page `padding-bottom: var(--band)` at a
 * specificity the one rhythm rule cannot reach, and `--band` is not `--e-band` — measured
 * on /events, the strip came back 86.4px above the logos and 80px below them at 1440, and
 * 72/52 at 390. One band in two on a different clock is exactly the "sections are not
 * spaced consistently" this direction is answering, so the base's own selector is restated
 * with this pack's value. Both halves, for the edit-mode reason the base states itself.
 */
.site-main > .sponsors:last-child,
.site-main > [data-cf-edit-section]:last-child > .sponsors {
  padding-bottom: var(--e-band);
}

.sponsors .sponsor-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  justify-content: stretch;
}

.sponsors .sponsor,
.sponsors .sponsor-link {
  background: var(--card);
  padding: var(--e4) var(--e3);
  min-height: 8rem;
  justify-content: center;
  gap: var(--e2);
}

.sponsors .sponsor-mark {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
}

.sponsors .sponsor-mark img {
  width: auto;
  max-width: 100%;
  max-height: 3.5rem;
  object-fit: contain;
}

.sponsors .sponsor-name {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/*
 * A mark that leads somewhere is quiet until it is pointed at; one that does not is simply
 * shown. Civic's rule, and its reason holds here — the grey is half of a gesture whose
 * other half is a hover, so it is scoped to the anchor the renderer only emits when there
 * is somewhere to go.
 */
.sponsors .sponsor-link .sponsor-mark img {
  filter: grayscale(1);
  opacity: 0.8;
}

.sponsors .sponsor-link:hover .sponsor-mark img,
.sponsors .sponsor-link:focus-visible .sponsor-mark img {
  filter: grayscale(0);
  opacity: 1;
}

.sponsors .sponsor-link:hover .sponsor-name {
  color: var(--accent-strong);
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sponsors .sponsor-link .sponsor-mark img {
    transition:
      filter 200ms ease,
      opacity 200ms ease;
  }
}

@media (min-width: 40rem) {
  .sponsors .sponsor-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .sponsors {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
  }

  .sponsors .sponsor-list {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE BOARD. A staff list set as a masthead column, which is what a paper calls it.
 *
 * Each person is an entry under a hairline rather than a card: a chamber's board is one
 * body, and nine boxes make it nine.
 * ---------------------------------------------------------------------------
 */
.board {
  display: grid;
  gap: var(--e5);
  align-items: start;
  background: var(--card);
}

.board .board-group-title {
  padding-top: var(--e2);
  border-top: 3px solid var(--accent);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--e4);
}

.board .board-list {
  gap: 0;
  border-top: 1px solid var(--rule);
}

.board .board-member {
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: var(--e4) 0;
  /* An entry in a masthead column is set to the left margin, like every other line here.
     The base centres it, which is a card's arrangement and this is no longer a card. */
  text-align: left;
  align-items: start;
}

.board .board-name {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.board .board-position {
  color: var(--accent-strong);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.board .board-employer {
  color: var(--ink-mute);
  font-size: 0.9375rem;
}

.board .board-art {
  border-radius: 0;
}

.board .board-member:hover {
  transform: none;
  box-shadow: none;
}

@media (min-width: 62rem) {
  .board:has(> h2) {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE QUESTIONS. A printed Q&A: the question in the wide column under a hairline, the
 * answer set as prose beneath it. No boxes, no chevron furniture, no tinted panel.
 * ---------------------------------------------------------------------------
 */
.faq {
  display: grid;
  gap: var(--e5);
  align-items: start;
  background: var(--card);
}

.faq .faq-list {
  gap: 0;
  border-top: 1px solid var(--rule);
}

/* The box is on the `details`, not on the `li` — the boxes go from where they are. */
.faq .faq-item,
.faq .faq-details {
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.faq .faq-item {
  border-bottom: 0;
}

.faq .faq-question {
  padding: var(--e4) 0;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.faq .faq-details[open] .faq-question {
  color: var(--accent-strong);
}

.faq .faq-answer {
  padding: 0 0 var(--e4) 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

@media (min-width: 62rem) {
  .faq:has(> h2) {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE PICTURE PAGE. Hard-cropped cells on a hairline grid — the ribbon-cutting gallery is
 * a contact sheet, and a contact sheet has no rounded corners and no gaps.
 * ---------------------------------------------------------------------------
 */
.gallery {
  display: grid;
  gap: var(--e5);
  align-items: start;
  background: var(--card);
}

.gallery .gallery-items {
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.gallery .gallery-item,
.gallery .gallery-figure,
.gallery .gallery-picture {
  border-radius: 0;
  background: var(--card);
}

.gallery .gallery-picture img {
  border-radius: 0;
}

.gallery .gallery-caption {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: var(--e2) var(--e3);
}

@media (min-width: 62rem) {
  .gallery:has(> h2) {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE CONTACT BAND, and the form in it. Square, ruled, and on the paper.
 * ---------------------------------------------------------------------------
 */
.contact {
  background: var(--tint);
  display: grid;
  gap: var(--e5);
  align-items: start;
  border-block: 1px solid var(--rule);
}

.contact .contact-intro {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.contact .contact-details p {
  color: var(--ink-soft);
}

/* The form is a coupon on the page, not a floating card: a rule at the top, no corners. */
.contact-form,
.join-form {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-top: 3px solid var(--accent);
  padding-inline: 0;
}

.contact input,
.contact textarea,
.contact select,
.join input,
.join textarea,
.join select {
  border-radius: 0;
  border-color: var(--rule);
}

.contact-form-submit,
.join-form-submit,
.contact button,
.contact [type='submit'] {
  border-radius: 0;
  box-shadow: none;
  background: var(--ground-dark);
  color: var(--on-ink);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 3px solid var(--accent);
}

.contact-form-submit:hover,
.join-form-submit:hover,
.contact button:hover,
.contact [type='submit']:hover {
  background: var(--accent-strong);
  transform: none;
  box-shadow: none;
}

@media (min-width: 62rem) {
  .contact:has(> h2) {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE MEMBER DIRECTORY, in the variant Gardner chose.
 *
 * The directory declares six card designs and the tenant picks one. A pack does not get to
 * overrule that choice — an option id is the tenant's — but what the chosen id MEANS
 * visually is the pack's, in the section law's own words. Gardner is on
 * `storefront-showcase`, so that is the one this pack states; `compact-row` is stated too
 * because the comp did and a tenant may hold it. The other four keep the base's treatment
 * and still render sanely, which is ADR-0021 decision 3 working rather than a gap.
 * ---------------------------------------------------------------------------
 */
.directory[data-variant='storefront-showcase'] .listing {
  border-radius: 0;
  border-color: var(--rule);
  box-shadow: none;
  border-top: 3px solid var(--accent);
  padding: var(--e4);
}

.directory[data-variant='storefront-showcase'] .listing:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--rule);
  border-top-width: 6px;
  border-top-color: var(--accent-strong);
  padding-top: calc(var(--e4) - 3px);
}

.directory[data-variant='storefront-showcase'] .listing-art,
.directory[data-variant='storefront-showcase'] .listing-act {
  border-radius: 0;
}

.directory[data-variant='storefront-showcase'] .listing h3 {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.directory[data-variant='compact-row'] .listings {
  gap: 0;
  border-top: 1px solid var(--rule);
}

.directory[data-variant='compact-row'] .listing {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding-inline: var(--e3);
}

.directory[data-variant='compact-row'] .listing:hover {
  transform: none;
  background: var(--tint);
  border-left-color: var(--accent);
  border-bottom-color: var(--rule);
}

.directory[data-variant='compact-row'] .listing-art,
.directory[data-variant='compact-row'] .listing-act {
  border-radius: 0;
}

/*
 * AN EMPTY RAIL IS NOT A COLUMN.
 *
 * The base gives the directory a 15rem filter rail from 1000px up, laid out as a grid area
 * whether or not the tenant has any categories to put in it. Gardner has none, so the page
 * opened with 240px of blank paper down its left edge and the whole list pushed off centre
 * — measured at 1440. A pack decides what a section looks like, and what this one looks
 * like when the rail has nothing in it is one column.
 *
 * Keyed on the filters rather than on the aside, because the aside is emitted either way.
 */
@media (min-width: 1000px) {
  .directory .directory-layout:not(:has(.directory-rail .directory-filter)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'search'
      'results';
  }
}

/* The controls above the list are a toolbar, not a form: square, ruled, small caps. */
.directory .directory-controls input,
.directory .directory-controls select,
.directory .directory-search input {
  border-radius: 0;
  border-color: var(--rule);
}

.directory .directory-search-submit {
  border-radius: 0;
  box-shadow: none;
  background: var(--ground-dark);
  color: var(--on-ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 3px solid var(--accent);
}

.directory .directory-search-submit:hover {
  background: var(--accent-strong);
  transform: none;
  box-shadow: none;
}

.directory .directory-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.directory .directory-filter,
.directory .directory-tag,
.directory .directory-page,
.directory .directory-page-step,
.directory .directory-view,
.directory .directory-view-choice {
  border-radius: 0;
}

/*
 * The chosen arrangement, on the dark ground rather than on the raw accent.
 *
 * The base fills the current choice with `--accent` and writes `--on-ink` on it, which on
 * Gardner's rust is 4.02:1 behind an 8-pixel label. The fourth slot carries the same label
 * at 8.74:1 and is the block this direction already uses for every other filled control.
 */
.directory .directory-view-choice[aria-current='true'] {
  background: var(--ground-dark);
  color: var(--on-ink);
}

/*
 * ---------------------------------------------------------------------------
 * THE TIERS. A price list is a table in a paper, so the plans are ruled columns rather than
 * floating cards, and the one that is featured is marked by its rule rather than by a tint.
 * ---------------------------------------------------------------------------
 */
.plans .plan,
.join .plan {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-top: 3px solid var(--rule);
  background: none;
  padding: var(--e3) var(--e4) var(--e4) 0;
}

.plans .plan[data-featured='true'],
.join .plan[data-featured='true'] {
  border-top-color: var(--accent);
  background: none;
  color: var(--ink);
}

.plans .plan:hover,
.join .plan:hover {
  transform: none;
  box-shadow: none;
  border-top-width: 6px;
  border-top-color: var(--accent-strong);
  padding-top: calc(var(--e3) - 3px);
}

@media (min-width: 62rem) {
  .plans:has(> h2) {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e6);
    align-items: start;
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE DETAIL PAGES — an event, a member, a post. One article in a reading column, opened by
 * the same rust rule every section head carries.
 * ---------------------------------------------------------------------------
 */
.event-detail,
.member-detail,
.post-detail {
  background: var(--card);
}

.event-detail > h1,
.member-detail > h1,
.post-detail h1 {
  padding-top: var(--e2);
  border-top: 3px solid var(--accent);
}

.event-detail-image,
.member-detail-image,
.event-detail-body img,
.post-detail img {
  border-radius: 0;
}

.event-detail-summary,
.member-detail-summary,
.post-detail-summary {
  color: var(--ink-soft);
  line-height: 1.7;
}

/* The facts are a standfirst under a rule, not a boxed sidebar in the middle of the read. */
.event-facts,
.member-facts {
  background: none;
  border: 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  padding: var(--e4) 0;
}

.event-fact dt,
.member-fact dt {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.event-tickets,
.event-catalogue,
.event-detail-cancelled,
.event-detail-rescheduled {
  border-radius: 0;
}

.event-tickets-door,
.member-detail .member-categories li {
  border-radius: 0;
}

/*
 * ---------------------------------------------------------------------------
 * THE CALL TO ACTION. The page's second dark band, and the second appearance of the 6px
 * nameplate rule.
 *
 * The button is paper on ink rather than gold on ink: `--accent-strong` on `--card`
 * measures 6.44:1, where the base's gold tile relies on a dark label whose ratio moves with
 * whatever the tenant's third slot happens to be.
 *
 * `quiet` is the other tone the CMS offers and two Gardner pages carry it. It stays a light
 * band and takes the rule and the dark-ground button, so a page that closes quietly still
 * closes in this direction's voice.
 * ---------------------------------------------------------------------------
 */
.cta-band[data-tone='bold'] {
  background: var(--ground-dark);
  border-block: 0;
  border-top: 6px solid var(--accent);
  gap: var(--e5);
}

.cta-band[data-tone='bold'] h2 {
  color: var(--on-ink);
  font-size: clamp(2rem, 5cqi, 3.25rem);
  margin-bottom: var(--e3);
}

.cta-band[data-tone='bold'] .cta-band-body {
  color: var(--on-ink-mute);
  font-size: 1.0625rem;
}

.cta-band[data-tone='bold'] .cta-band-action a {
  background: var(--card);
  color: var(--accent-strong);
  border-radius: 0;
  box-shadow: none;
  padding: var(--e3) var(--e5);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--accent);
}

.cta-band[data-tone='bold'] .cta-band-action a:hover {
  background: var(--accent-gold);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

/* The rust ring measures 2.52:1 on the fourth slot. On this band the ring is the paper. */
.cta-band[data-tone='bold'] :focus-visible {
  outline-color: var(--on-ink);
}

.cta-band[data-tone='quiet'] {
  background: var(--tint);
  border-block: 1px solid var(--rule);
  border-top: 6px solid var(--accent);
  gap: var(--e5);
}

.cta-band[data-tone='quiet'] h2 {
  font-size: clamp(1.75rem, 4cqi, 2.75rem);
  margin-bottom: var(--e3);
}

.cta-band[data-tone='quiet'] .cta-band-action a {
  background: var(--ground-dark);
  color: var(--on-ink);
  border-radius: 0;
  box-shadow: none;
  padding: var(--e3) var(--e5);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--accent);
}

.cta-band[data-tone='quiet'] .cta-band-action a:hover {
  background: var(--accent-strong);
  color: var(--on-ink);
  transform: none;
  box-shadow: none;
}

@media (min-width: 62rem) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--e8);
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE FOOTER. Gripe five: "just a menu thrown into the bottom with about us open... it
 * lacks life and imagination".
 *
 * NOTHING IS OPEN, because nothing is a disclosure and nothing is privileged. The base lays
 * the tree out as a flex row, so a branch with children grows a tall column in the middle of
 * a line of single words and "About us" reads as a thing somebody left hanging open. Here
 * every top-level entry is a column of the same index with the same head treatment, under
 * its own hairline: a branch with three children is a column with three lines in it, and a
 * branch with none is a column with none. Nothing opened; the shape is just the shape of
 * the site.
 *
 * THE LIFE is the colophon. The chamber's name is set as a wordmark against the rust rule at
 * the top of the foot, the index sits beside it, and the small print closes the page under a
 * second rule.
 *
 * Measured on Gardner's fourth slot (`#244652`): the name and column heads in `--on-ink` at
 * 10.13:1, the entries in `--on-ink-mute` at 4.78:1, the gold hover at 5.95:1.
 * ---------------------------------------------------------------------------
 */
.site-footer {
  padding-block: var(--e-band);
  gap: var(--e6);
  border-top: 6px solid var(--accent);
}

.site-footer .site-name {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}

.site-footer .site-nav {
  width: 100%;
}

/*
 * THE INDEX IS SET IN COLUMNS, NOT IN A GRID, and that is what stops the branch reading as a
 * thing left open.
 *
 * A grid puts every entry in a row, so one branch three children deep sets the height of the
 * whole first row and the four entries beside it each open a hole under themselves —
 * measured on Gardner, 130px of empty ground under HOME, MEMBERSHIP, MEMBER DIRECTORY and
 * EVENTS while ABOUT US filled its cell. That is the same lopsidedness the base had, wearing
 * a tidier arrangement.
 *
 * Multi-column flows top to bottom and then across, so a tall branch simply takes more of
 * its own column and the next entry starts underneath it. `break-inside: avoid` keeps a
 * branch and its children together, which a printed index does and a grid cannot.
 */
.site-footer .menu {
  display: block;
  columns: 5 9.5rem;
  column-gap: var(--e5);
}

.site-footer .menu > li,
.site-footer .menu > li:has(.menu-children) {
  display: grid;
  gap: var(--e2);
  align-content: start;
  break-inside: avoid;
  margin-bottom: var(--e5);
  padding-top: var(--e2);
  border-top: 1px solid color-mix(in srgb, var(--on-ink) 18%, transparent);
}

.site-footer .menu > li > a,
.site-footer .menu > .menu-heading > span {
  min-height: 0;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--on-ink);
}

.site-footer .menu > li > a:hover {
  color: var(--accent-gold);
}

.site-footer .menu-children {
  display: grid;
  gap: var(--e1);
  padding: 0;
  border-left: 0;
  margin: 0;
}

.site-footer .menu-children a {
  min-height: 0;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-ink-mute);
}

.site-footer .menu-children a:hover {
  color: var(--accent-gold);
  text-decoration: none;
}

.site-footer .site-footer-legal {
  padding-top: var(--e4);
  border-top: 1px solid color-mix(in srgb, var(--on-ink) 18%, transparent);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/*
 * ON A PHONE THE INDEX IS TAPPED, NOT POINTED AT.
 *
 * The base gives every footer entry a 44px floor, mobile-first, and the tight setting above
 * takes it away — measured at 390px, a column head came back 15px and an entry 19px. The
 * floor comes back below the width where a pointer takes over.
 */
@media (max-width: 61.99rem) {
  .site-footer .menu > li > a,
  .site-footer .menu > .menu-heading > span,
  .site-footer .menu-children a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

@media (min-width: 62rem) {
  .site-footer {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--e8);
    row-gap: var(--e6);
    align-items: start;
  }

  .site-footer .site-name {
    grid-column: 1;
    grid-row: 1;
    padding-top: var(--e2);
    border-top: 3px solid var(--accent);
  }

  .site-footer .site-nav {
    grid-column: 2;
    grid-row: 1;
  }

  .site-footer .site-footer-contact {
    grid-column: 1 / -1;
  }

  .site-footer .site-footer-legal {
    grid-column: 1 / -1;
  }
}

/*
 * ---------------------------------------------------------------------------
 * THE SQUARE CORNER, everywhere else. The base's `--radius` is the tenant's and is simply
 * not consulted by this direction: a paper has no rounded corners.
 * ---------------------------------------------------------------------------
 */
.feature,
.card,
.listing,
.plan,
.video-frame,
.showcase-frame {
  border-radius: 0;
  box-shadow: none;
  border-color: var(--rule);
}

.feature:hover,
.card:hover,
.listing:hover,
.plan:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--accent);
}

/*
 * ---------------------------------------------------------------------------
 * NOTHING ARRIVES. TWO BANDS IN EIGHT DOING IT IS WORSE THAN NONE.
 *
 * The base wraps the split, the numbers band and the showcase in `InView`, which hides them
 * at `opacity: 0` until a script says they are on screen. This pack ships no timeline of its
 * own, so leaving the base's alone would animate exactly the two sections that happen to
 * render inside `InView` and hold every other band still — an inconsistency a reader notices
 * without being able to name.
 *
 * A printed page does not arrive. The one orchestrated moment on this site is the hero's own
 * load, at the top, where a reader is already looking.
 * ---------------------------------------------------------------------------
 */
.reveal[data-watch] {
  opacity: 1;
  transform: none;
  transition: none;
}

/*
 * ---------------------------------------------------------------------------
 * SOMEBODY WHO HAS ASKED THEIR MACHINE TO STOP MOVING THINGS HAS ASKED THIS PACK TOO.
 *
 * Every transition this file adds is already inside `no-preference`, and the base's shared
 * card transition is guarded at source as of this change. This block is the belt: nothing
 * this pack restyles moves on hover anyway, so there is nothing here to lose.
 * ---------------------------------------------------------------------------
 */
@media (prefers-reduced-motion: reduce) {
  .feature,
  .card,
  .listing,
  .event,
  .plan,
  .events .event,
  .card-list .card,
  .feature-row .feature,
  .sponsors .sponsor-link .sponsor-mark img,
  .directory .listing {
    transition: none;
  }
}