/*
 * ============================================================================
 * ASSEMBLY — built like a roof.
 * ============================================================================
 *
 * Cut from `comp/cordray-direction-a-built-like-a-roof`, the direction Michael picked on
 * 2026-09-06 ("Cordray - http://localhost:5190/ we will make a few adjustments once it is
 * up"). The comp's own thesis, unchanged:
 *
 *   The site is constructed the way a roof is: structure first, materials honest, every
 *   line load-bearing. ONE ANGLE governs the whole site — a 6:12 pitch, 26.565° — and it
 *   is the rake on every photograph, the tick on every list, the gable each face stands
 *   on, and the offset behind every button. Nothing here is drawn at another angle.
 *
 * THE ONE RISK, NAMED: a near-monochrome, hard-edged, industrial page in a category that
 * expects a warm photo hero with white centred type and a red pill. If it reads cold
 * rather than exact, that is the failure mode, and the fix is to warm the ground and let
 * the photography breathe — never to soften the geometry.
 *
 * ----------------------------------------------------------------------------
 * WHAT THIS PACK OBEYS
 *
 * It OVERRIDES ONLY (ADR-0021 decision 3). `site.css` is complete on its own and loads
 * first; a section this file never mentions still renders sanely, and every section that
 * exists is answered here — including the ones nobody designed.
 *
 * It CREATES NO CONTENT. Two `content:` strings exist below and both are drafting
 * furniture on `aria-hidden` pseudo-elements; not one word a reader needs is invented in
 * CSS. Every drawing is a background image, so a browser with no support shows a page
 * that is plainer and complete.
 *
 * IT IS NOT SCRIPTED. ADR-0021 decision 2 gives a pack everything CSS can do and keeps
 * script in shared sections. The material picker and the guided flow below are radio
 * groups the base stylesheet already wires with `:checked`; this file only redraws them.
 *
 * ----------------------------------------------------------------------------
 * IT CARRIES ITS OWN PALETTE, WHICH `civic.css` AND `marquee.css` DO NOT.
 *
 * `main-street.css` is the precedent and the reason is the same: a signature pack's
 * palette IS the design. Two of these values also could not come from the tenant's theme
 * without breaking the floor — Cordray's stored primary is a deep #900000, which measures
 * 2.6:1 on the asphalt ground and fails as eyebrow ink; the oxide below is their own logo
 * red lifted to 4.56:1 on the same ground. A pack that followed the picker here would
 * ship an unreadable eyebrow to whoever chose a dark accent.
 *
 * THE ONE THING THE TENANT STILL DECIDES is their logo, which is drawn as supplied and is
 * never recoloured, masked or redrawn anywhere in this file.
 * ----------------------------------------------------------------------------
 */

.site {
  /* --- Materials --------------------------------------------------------- */
  --asphalt: #131518; /* granule black — the ground */
  --asphalt-deep: #0b0d0f; /* under-eave shadow — masthead, hero, footer */
  --slate: #1c2025; /* raised panel */
  --steel: #2c3238; /* hairline rules on dark */
  --steel-hi: #3a424a; /* hairline, hovered */
  --galv-dim: #868d95; /* tick marks, tertiary — 5.45:1 on asphalt */
  --galv: #9ba2a9; /* spec labels, secondary — 7.09:1 on asphalt */
  --chalk-dim: #c6c2b9; /* prose on dark — 10.29:1 */
  --chalk: #efece5; /* snapped chalk line — primary ink on dark, 15.50:1 */
  --oxide: #9d3030; /* the datum. Sampled from Cordray-Logo.png. */
  --oxide-lit: #cf5a52; /* the same red, lifted for small text on dark — 4.56:1 */
  --oxide-warn: #e0705c; /* a refusal on dark — 5.78:1 */
  --paper: #e7e3da; /* drawing sheet — the light ground */
  --paper-2: #dcd7cc;
  --paper-rule: #b9b2a5;
  --paper-ink: #14171a; /* 14.05:1 on paper */
  --paper-ink-2: #4c5259; /* prose on paper — 6.17:1 */

  /* --- Geometry ---------------------------------------------------------- */
  /* 6:12 pitch = atan(0.5) = 26.565°. Nothing in this file uses another angle. */
  --pitch: 26.565deg;
  --sheet: 1560px;
  --edge: clamp(1.25rem, 4vw, 4.5rem);
  --course: clamp(3.5rem, 7vw, 7.5rem);

  /* --- Type -------------------------------------------------------------- */
  --stamp: var(--face-archivo), 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --read: var(--face-barlow), 'Helvetica Neue', Arial, sans-serif;
  /*
   * The comp set every spec label in IBM Plex Mono. This build ships no mono face and
   * adding one is a font file plus a declaration in the layout, which is a decision
   * rather than a stylesheet. The platform stack is what a drawing sheet's lettering
   * wants anyway — fixed pitch, no personality — and it costs nothing to load.
   */
  --spec: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono',
    monospace;

  --t-mega: clamp(2.35rem, 5vw, 4.5rem);
  --t-xxl: clamp(2.5rem, 6.4vw, 5.5rem);
  --t-xl: clamp(2rem, 4.2vw, 3.5rem);
  --t-lg: clamp(1.4rem, 2.6vw, 2.1rem);
  --t-md: clamp(1.1rem, 1.4vw, 1.35rem);
  --t-spec: 0.6875rem;
  --t-spec-lg: 0.8125rem;

  --ease: cubic-bezier(0.16, 0.84, 0.28, 1);

  color-scheme: dark;
  background: var(--asphalt);
  color: var(--chalk);
  font-family: var(--read);
  font-size: clamp(1rem, 0.95vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/*
 * A snapped chalk line with the oxide datum outside it.
 *
 * Oxide alone measures 2.53:1 on the asphalt ground, under the 3:1 floor a focus
 * indicator has to clear, so the chalk carries the contrast and the oxide carries the
 * brand. The comp found this by measuring and this pack inherits the finding.
 */
.site :focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--oxide);
}

.site .split[data-emphasis='even'][data-side='left'] :focus-visible,
.site .sponsors :focus-visible,
.site .faq :focus-visible,
.site .material-picker :focus-visible {
  outline-color: var(--paper-ink);
}

.site ::selection {
  background: var(--oxide);
  color: var(--chalk);
}

/* ===========================================================================
   THE STORY POLE — a measure down the left edge of the sheet.
   ===========================================================================

   The comp frames every page in a ruled rail, and it is the device that says "drawing"
   before a single word is read. It carries NO words: a `content: ''` rule that drew text
   would be this stylesheet inventing content, which the head of this file forbids. What
   it carries is a tick every 44 pixels and a hairline against the page.

   Wide windows only. Below 1180 the sheet needs its whole width for the words, and a rail
   that ate 68 of a phone's 390 would be furniture charging rent. */

@media (min-width: 1180px) {
  .site {
    padding-left: 68px;
  }

  .site::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 68px;
    z-index: 40;
    pointer-events: none;
    background:
      repeating-linear-gradient(to bottom, var(--steel) 0 1px, transparent 1px 44px)
        var(--asphalt-deep);
    border-right: 1px solid var(--steel);
  }
}

/* ===========================================================================
   TYPE — one stamped face, one reading face, one drafting face.
   =========================================================================== */

.site h1,
.site h2,
.site h3,
.site h4 {
  font-family: var(--stamp);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--chalk);
}

.site p,
.site li,
.site dd,
.site dt {
  font-family: var(--read);
}

/* ===========================================================================
   MASTHEAD — a title bar, not a navigation. Hairline under it, nothing above.
   =========================================================================== */

.site .site-header {
  background: var(--asphalt-deep);
  border-bottom: 1px solid var(--steel);
  box-shadow: none;
  padding: 0 var(--edge);
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: 74px;
  align-items: center;
  backdrop-filter: none;
}

.site .site-brand {
  padding: 0;
  flex: 0 0 auto;
}

.site .site-logo {
  height: 34px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.site .site-header .site-name {
  font-family: var(--stamp);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--chalk);
  font-size: 1.35rem;
}

.site .site-header .menu {
  gap: clamp(0.4rem, 1.3vw, 1.4rem);
  align-items: center;
}

.site .site-header .menu-item > a {
  font-family: var(--spec);
  font-size: var(--t-spec);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--galv);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0.55rem 0;
  position: relative;
  white-space: nowrap;
  transition: color 160ms var(--ease);
}

/* The oxide rule sweeps in from the left. It is a width change, so a browser with no
   transition support simply shows it on the current page and nothing is lost. */
.site .site-header .menu-item > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.15rem;
  height: 2px;
  background: var(--oxide);
  transition: right 220ms var(--ease);
}

.site .site-header .menu-item > a:hover,
.site .site-header .menu-item > a:focus-visible,
.site .site-header .menu-item > a[aria-current='page'] {
  color: var(--chalk);
  background: none;
}

.site .site-header .menu-item > a:hover::after,
.site .site-header .menu-item > a:focus-visible::after,
.site .site-header .menu-item > a[aria-current='page']::after {
  right: 0;
}

/*
 * THE LAST ENTRY IS THE ACT, and it is a layout decision rather than a piece of content.
 *
 * The comp's masthead ends on a call to action and this markup has no slot for one. What
 * it has is a menu whose last entry is where a site puts the thing it wants pressed —
 * "Contact" here, whatever a tenant puts last elsewhere. The rule reads the position, so
 * nothing is hardcoded and nothing is invented; a tenant who reorders the menu moves the
 * plate with it.
 */
.site .site-header .menu > .menu-item:last-child > a {
  background: var(--chalk);
  color: var(--paper-ink);
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.site .site-header .menu > .menu-item:last-child > a::after {
  display: none;
}

.site .site-header .menu > .menu-item:last-child > a:hover,
.site .site-header .menu > .menu-item:last-child > a:focus-visible {
  background: var(--oxide);
  color: var(--chalk);
}

.site .burger {
  border: 1px solid var(--steel);
  border-radius: 0;
  background: none;
  color: var(--chalk);
}

.site .site-menu[open] .site-nav,
.site .site-menu + .site-nav {
  background: var(--asphalt-deep);
}

/* ===========================================================================
   THE PAGE — courses of content on one sheet.
   =========================================================================== */

.site .site-main > * {
  padding-inline: max(var(--edge), calc(50% - var(--sheet) / 2));
}

.site .site-main > * + * {
  margin-block-start: 0;
}

.site .card-list,
.site .split,
.site .sponsors,
.site .faq,
.site .gallery,
.site .board,
.site .material-picker,
.site .guided-flow,
.site .contact {
  padding-block: var(--course);
  margin-block: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/*
 * The stamped heading over a drafting eyebrow. Every body section gets the same head:
 * an oxide rule, then the heading at sheet size.
 */
.site .card-list > h2,
.site .sponsors > h2,
.site .faq > h2,
.site .gallery > h2,
.site .board > h2,
.site .material-picker > h2,
.site .guided-flow > h2,
.site .contact > h2 {
  font-size: var(--t-xl);
  max-width: 16ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.4rem;
  position: relative;
  color: var(--chalk);
}

.site .card-list > h2::before,
.site .sponsors > h2::before,
.site .faq > h2::before,
.site .gallery > h2::before,
.site .board > h2::before,
.site .material-picker > h2::before,
.site .guided-flow > h2::before,
.site .contact > h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(40px, 6vw, 96px);
  height: 2px;
  background: var(--oxide);
}

/* ===========================================================================
   HERO — the assembly sheet.
   ===========================================================================

   TWO ARRANGEMENTS AND THEY ARE DIFFERENT DRAWINGS. `left` is the home page's working
   sheet: words on the left, the roof drawn on the right with the tenant's own
   photograph clipped into the roof plane. `full-bleed` is an interior page head: the
   photograph desaturated behind the words with the same 6:12 datum cut across it. */

.site .hero {
  background: var(--asphalt-deep);
  border-bottom: 1px solid var(--steel);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--chalk);
  position: relative;
  overflow: hidden;
}

.site .hero-words h1 {
  font-size: var(--t-mega);
  font-weight: 900;
  font-stretch: 116%;
  line-height: 0.84;
  letter-spacing: -0.03em;
  max-width: 13ch;
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.85rem);
  padding-top: 1.6rem;
  position: relative;
  overflow-wrap: break-word;
}

.site .hero-words h1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(40px, 6vw, 96px);
  height: 2px;
  background: var(--oxide);
}

/*
 * THE HEADLINE COOLS INTO THE DATUM.
 *
 * The comp sets the second half of its headline in oxide, which needs the words split
 * into two elements — this heading is one slot somebody typed, and a renderer that cut it
 * in half would be inventing where the sentence turns. So the colour turns instead of the
 * markup: chalk down to just past half, then into the same red the datum is drawn in.
 *
 * Guarded, and the guard is not decoration: `color: transparent` with no clip support is
 * an invisible headline. A browser that cannot clip a background to text keeps the plain
 * chalk set above and loses nothing but the fade.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site .hero-words h1 {
    background-image: linear-gradient(
      180deg,
      var(--chalk) 0%,
      var(--chalk) 54%,
      var(--oxide-lit) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.site .hero-sub {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--chalk);
  max-width: 46ch;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

/* --- the plate: a pressed steel button with the datum behind it ----------- */

/*
 * The full-bleed hero's own action is named as well as the general one: `site.css` styles
 * that arrangement's button separately and at the same specificity, so a rule that only
 * said `.hero-action a` lost the background on every interior page. Found by measuring
 * the computed colour rather than by looking.
 */
.site .hero-action a,
.site .hero[data-align='full-bleed'] .hero-action a,
.site .cta-band-action a,
.site .split-action a,
.site .card-action a,
.site .flow-action a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--chalk);
  color: var(--paper-ink);
  border: 0;
  border-radius: 0;
  font-family: var(--spec);
  font-size: var(--t-spec-lg);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  position: relative;
  transition:
    background 180ms var(--ease),
    color 180ms var(--ease);
}

/* The offset outline behind the plate is at the pitch: 8 across, 4 down. */
.site .hero-action a::after,
.site .hero[data-align='full-bleed'] .hero-action a::after,
.site .cta-band-action a::after,
.site .split-action a::after,
.site .flow-action a::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--oxide);
  transform: translate(8px, 4px);
  transition: transform 180ms var(--ease);
  pointer-events: none;
}

.site .hero-action a:hover,
.site .hero[data-align='full-bleed'] .hero-action a:hover,
.site .hero[data-align='full-bleed'] .hero-action a:focus-visible,
.site .cta-band-action a:hover,
.site .split-action a:hover,
.site .card-action a:hover,
.site .flow-action a:hover,
.site .hero-action a:focus-visible,
.site .cta-band-action a:focus-visible,
.site .split-action a:focus-visible,
.site .card-action a:focus-visible,
.site .flow-action a:focus-visible {
  background: var(--oxide);
  color: var(--chalk);
}

.site .hero-action a:hover::after,
.site .cta-band-action a:hover::after,
.site .split-action a:hover::after,
.site .flow-action a:hover::after {
  transform: translate(0, 0);
}

/* A card's own link is quieter: an underlined spec line with a rule that lights. */
.site .card-action a {
  background: none;
  color: var(--chalk);
  padding: 0 0 0.3rem;
  border-bottom: 1px solid var(--steel-hi);
  transition: border-color 180ms var(--ease);
}

.site .card-action a:hover,
.site .card-action a:focus-visible {
  background: none;
  color: var(--chalk);
  border-bottom-color: var(--oxide);
}

/* --- the working sheet ---------------------------------------------------- */

.site .hero[data-align='left'] {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .site .hero[data-align='left'] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .site .hero[data-align='left'] .hero-words {
    order: 1;
  }

  .site .hero[data-align='left'] .hero-picture {
    order: 2;
  }
}

/*
 * THE ROOF ASSEMBLY, DRAWN.
 *
 * The box is a drawing sheet: a hairline frame, a faint vertical ruling behind, and the
 * tenant's own photograph clipped to a 6:12 gable inside it. Everything drafted — the
 * oxide datum along the rake, the three leader lines with their layer names, the pitch
 * triangle and the two sheet captions — is ONE background image on `::after`, drawn in
 * the same 500x400 coordinates the clip below is solved for.
 *
 * THE ARITHMETIC, because on a site whose whole thesis is one angle a clip that is nearly
 * 6:12 is the defect that matters most and passes every automated check. The box is 5:4,
 * so 500 wide by 400 tall. The apex sits at y=40 (10%) and each eave at y=165 (41.25%);
 * the run from centre to edge is 250 and the rise is 125, which is 0.5 exactly.
 */
.site .hero[data-align='left'] .hero-picture {
  position: relative;
  aspect-ratio: 5 / 4;
  min-width: 0;
  background:
    repeating-linear-gradient(to right, var(--steel) 0 1px, transparent 1px 25px)
      var(--asphalt);
  border: 1px solid var(--steel);
  overflow: hidden;
}

.site .hero[data-align='left'] .hero-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  clip-path: polygon(0 41.25%, 50% 10%, 100% 41.25%, 100% 100%, 0 100%);
}

.site .hero[data-align='left'] .hero-picture::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400' preserveAspectRatio='none'%3E%3Cpath d='M0 189 L250 64 L500 189' fill='none' stroke='%233a424a' stroke-width='1' stroke-dasharray='3 7' vector-effect='non-scaling-stroke'/%3E%3Cg fill='none' stroke='%23868d95' stroke-width='0.8' stroke-dasharray='2 4' vector-effect='non-scaling-stroke'%3E%3Cpath d='M250 40 L190 10 L178 10'/%3E%3Cpath d='M370 105 L430 75 L442 75'/%3E%3C/g%3E%3Cg fill='%239d3030'%3E%3Ccircle cx='250' cy='40' r='2.6'/%3E%3Ccircle cx='370' cy='105' r='2.6'/%3E%3C/g%3E%3Cpath d='M0 165 L250 40 L500 165' fill='none' stroke='%239d3030' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M60 135 L60 85 L160 85 Z' fill='none' stroke='%239d3030' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3Cg font-family='monospace' font-size='11' letter-spacing='1.6' fill='%23efece5'%3E%3Ctext x='174' y='14' text-anchor='end'%3ERIDGE%3C/text%3E%3Ctext x='446' y='79'%3ERAKE%3C/text%3E%3C/g%3E%3Cg font-family='monospace' font-size='10' letter-spacing='1.2' fill='%23efece5'%3E%3Ctext x='104' y='78'%3E12%3C/text%3E%3Ctext x='52' y='116' text-anchor='end'%3E6%3C/text%3E%3C/g%3E%3Crect x='0' y='372' width='500' height='28' fill='%230b0d0f'/%3E%3Cg font-family='monospace' font-size='10' letter-spacing='1.2' fill='%239ba2a9'%3E%3Ctext x='10' y='390'%3EROOF ASSEMBLY %E2%80%94 SCHEMATIC%3C/text%3E%3Ctext x='490' y='390' text-anchor='end'%3EPITCH 6:12%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- the interior page head ---------------------------------------------- */

.site .hero[data-align='full-bleed'] {
  display: grid;
  align-items: center;
  min-height: clamp(360px, 46vw, 560px);
  padding-block: clamp(3rem, 7vw, 6.5rem);
}

.site .hero[data-align='full-bleed'] .hero-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border-radius: 0;
}

.site .hero[data-align='full-bleed'] .hero-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.5) contrast(1.1);
}

/* The ink that makes the words readable is a gradient on the ground, never a change to
   the photograph's own contrast — Michael's standing rule about ink and floors. */
.site .hero[data-align='full-bleed'] .hero-picture::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--asphalt-deep) 0%,
    color-mix(in srgb, var(--asphalt-deep) 90%, transparent) 42%,
    color-mix(in srgb, var(--asphalt-deep) 40%, transparent) 100%
  );
}

/*
 * The datum cut across the page head, at the pitch and nowhere else.
 *
 * Drawn on the section itself so it survives a head with NO photograph — which the
 * Commercial page is, deliberately, until Cordray's own multifamily pictures arrive.
 *
 * ---------------------------------------------------------------------------
 * `slice`, NOT `none`, AND THAT IS THE WHOLE POINT OF THE RULE.
 *
 * A stretched SVG draws whatever angle the box happens to make. The first version of this
 * used `preserveAspectRatio='none'` over a page head whose shape changes with the window,
 * so the "6:12 datum" was a different angle at every width — the exact defect the comp
 * found in four of its own clip-paths, and one that passes every automated check.
 *
 * The drawing keeps its own aspect and is cropped by the box instead: the viewBox is
 * 1000x500, both rakes rise exactly half their run, and `background-size: cover` scales
 * the whole thing uniformly. What the reader loses at an extreme window is a little of
 * the line's ends. What they never see is a wrong angle.
 * ---------------------------------------------------------------------------
 */
.site .hero[data-align='full-bleed']::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M0 500 L760 120 L1000 240' fill='none' stroke='%233a424a' stroke-width='1' stroke-dasharray='3 7' vector-effect='non-scaling-stroke' transform='translate(0 26)'/%3E%3Cpath d='M0 500 L760 120 L1000 240' fill='none' stroke='%239d3030' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='760' cy='120' r='4' fill='%239d3030'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.site .hero[data-align='full-bleed'] .hero-words {
  position: relative;
  z-index: 2;
}

.site .hero[data-align='full-bleed'] .hero-words h1 {
  font-size: var(--t-xxl);
  line-height: 0.86;
  letter-spacing: -0.026em;
  max-width: 15ch;
}

/* A page head with no photograph is a bare sheet, and it has to look deliberate. */
.site .hero[data-align='full-bleed']:not(:has(.hero-picture)) {
  background:
    repeating-linear-gradient(to right, var(--steel) 0 1px, transparent 1px 44px)
      var(--asphalt-deep);
}

/* ===========================================================================
   DATUM BAR — the measured facts, hairline-separated.
   =========================================================================== */

.site .stat-band {
  background: var(--asphalt);
  border-bottom: 1px solid var(--steel);
  padding: 0;
  margin: 0;
}

.site .stat-band-list {
  max-width: var(--sheet);
  margin: 0 auto;
  /* The datum row lines up with everything else on the sheet rather than running to the
     window, so the first number sits under the first word of the headline above it. */
  padding-inline: max(var(--edge), calc(50% - var(--sheet) / 2));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

@media (min-width: 860px) {
  .site .stat-band-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site .stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.55rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  position: relative;
  text-align: left;
  background: none;
}

@media (min-width: 860px) {
  .site .stat {
    border-bottom: 0;
  }
}

/* The oxide tick at the head of every measured cell. */
.site .stat::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 18px;
  background: var(--oxide);
}

.site .stat-number {
  font-family: var(--stamp);
  font-weight: 900;
  font-stretch: 114%;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--chalk);
}

.site .stat-label {
  font-family: var(--spec);
  font-size: var(--t-spec);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--galv);
}

/* ===========================================================================
   COURSES — a card list in rows, stacked the way shingle courses go on.
   =========================================================================== */

.site .card-list[data-align='rows'] .cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site .card-list[data-align='rows'] .card {
  display: grid;
  row-gap: 0;
  column-gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.75rem, 3.2vw, 3rem);
  border-top: 1px solid var(--steel);
  background: none;
  border-radius: 0;
  box-shadow: none;
  counter-increment: course;
  position: relative;
}

.site .card-list[data-align='rows'] .cards {
  counter-reset: course;
}

@media (min-width: 900px) {
  /*
   * Three columns and the words stack in the middle one. The key and the photograph each
   * span every row the words make, so a long body does not stretch the index or the
   * picture away from what they belong to.
   */
  /*
   * THREE NAMED ROWS, AND THE LAST ONE ABSORBS THE PHOTOGRAPH.
   *
   * The heading, the paragraph and the link are the three rows; the picture spans all
   * three and is taller than they are. Sizing the first two to their content and letting
   * the third take the rest is what keeps a heading against its own paragraph — every
   * other arrangement measured put the picture's spare height between them.
   */
  .site .card-list[data-align='rows'] .card {
    grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 0.85fr);
    grid-template-rows: min-content min-content 1fr;
    align-items: start;
    align-content: stretch;
  }

  .site .card-list[data-align='rows'] .card > .card-action {
    align-self: start;
  }

  /*
   * The course key. A drafting index rather than a decoration: these ARE a sequence —
   * the first course goes on before the second — and the number says so. Generated,
   * `aria-hidden` by construction (a `::before` on a list item is not read as content by
   * anything a reader relies on), and no word a visitor needs is in it.
   */
  .site .card-list[data-align='rows'] .card::before {
    content: 'Course ' counter(course);
    /*
     * A SPAN, NOT `1 / -1`. With no explicit row template the explicit grid has no rows,
     * so `-1` resolves back to line 1 and the item sat in row one alone — which made that
     * row as tall as the photograph beside it and dropped 142 measured pixels of air
     * between a heading and its own paragraph. A span reaches into the implicit rows the
     * words actually make.
     */
    grid-row: 1 / span 3;
    grid-column: 1;
    align-self: start;
    font-family: var(--spec);
    font-size: var(--t-spec);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--galv-dim);
    padding-top: 0.4rem;
  }

  .site .card-list[data-align='rows'] .card > .card-picture {
    grid-row: 1 / span 3;
    grid-column: 3;
    align-self: center;
  }

  .site .card-list[data-align='rows'] .card > h2,
  .site .card-list[data-align='rows'] .card > h3,
  .site .card-list[data-align='rows'] .card > .card-body,
  .site .card-list[data-align='rows'] .card > .card-action {
    grid-column: 2;
  }

  /* A row with no photograph — a claim step, a system with no picture yet — takes the
     width the picture would have had rather than leaving a third of the sheet blank. */
  .site .card-list[data-align='rows'] .card:not(:has(.card-picture)) > h2,
  .site .card-list[data-align='rows'] .card:not(:has(.card-picture)) > h3,
  .site .card-list[data-align='rows'] .card:not(:has(.card-picture)) > .card-body,
  .site .card-list[data-align='rows'] .card:not(:has(.card-picture)) > .card-action {
    grid-column: 2 / -1;
  }
}

.site .card-list[data-align='rows'] .card > h2,
.site .card-list[data-align='rows'] .card > h3 {
  font-size: var(--t-lg);
  font-weight: 800;
  font-stretch: 108%;
  margin: 0 0 0.9rem;
  color: var(--chalk);
}

.site .card-list[data-align='rows'] .card-body,
.site .card-list[data-align='rows'] .card-body p {
  color: var(--chalk-dim);
}

.site .card-list[data-align='rows'] .card-body {
  max-width: 56ch;
}

.site .card-list[data-align='rows'] .card-body p {
  margin: 0 0 1em;
}

.site .card-list[data-align='rows'] .card-body p:last-child {
  margin-bottom: 0;
}

/* A roster row — the About page's crew — sets its first line as a spec label. */
.site .card-list[data-align='rows'] .card-body p:first-child:not(:last-child) {
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxide-lit);
}

.site .card-list[data-align='rows'] .card-action {
  margin-top: 1.4rem;
}

/* The photograph, raked at 6:12. On a 5:3 box the half-run rise is 0.25w = 41.67%. */
.site .card-list[data-align='rows'] .card-picture {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--slate);
  clip-path: polygon(0 41.67%, 50% 0, 100% 41.67%, 100% 100%, 0 100%);
  border-radius: 0;
}

.site .card-list[data-align='rows'] .card-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

.site .card-list[data-align='rows'] .card:hover .card-picture img {
  transform: scale(1.045);
}

/* ===========================================================================
   THE GRID CARD LIST — a checklist, or a wall of quotes. One treatment, and the
   tick is the same 6:12 angle every other mark on the site is drawn at.
   =========================================================================== */

.site .card-list[data-align='grid'] .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--steel);
  border: 1px solid var(--steel);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site .card-list[data-align='grid'] .card {
  background: var(--asphalt);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site .card-list[data-align='grid'] .card > h2,
.site .card-list[data-align='grid'] .card > h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.15;
  margin: 0;
  padding-left: 1.75rem;
  position: relative;
  color: var(--chalk);
}

/* The tick: two strokes of a right angle, rotated to the pitch. */
.site .card-list[data-align='grid'] .card > h2::before,
.site .card-list[data-align='grid'] .card > h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--oxide);
  border-bottom: 2px solid var(--oxide);
  transform: rotate(calc(-1 * var(--pitch)));
}

.site .card-list[data-align='grid'] .card-body,
.site .card-list[data-align='grid'] .card-body p {
  color: var(--chalk-dim);
}

.site .card-list[data-align='grid'] .card-body {
  font-size: 0.9375rem;
  line-height: 1.55;
  order: -1;
}

.site .card-list[data-align='grid'] .card-body p {
  margin: 0 0 1em;
}

.site .card-list[data-align='grid'] .card-body p:last-child {
  margin: 0;
}

/*
 * A card carrying words above its name is a quotation, and the mark says so. Two strokes
 * at the pitch, drawn once at the head of the card.
 */
.site .card-list[data-align='grid'] .card:has(.card-body) > h2,
.site .card-list[data-align='grid'] .card:has(.card-body) > h3 {
  font-family: var(--spec);
  font-size: var(--t-spec);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--galv);
  margin-top: auto;
  padding-left: 0;
}

.site .card-list[data-align='grid'] .card:has(.card-body) > h2::before,
.site .card-list[data-align='grid'] .card:has(.card-body) > h3::before {
  display: none;
}

.site .card-list[data-align='grid'] .card:has(.card-body)::before {
  content: '';
  display: block;
  width: 34px;
  height: 17px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 17'%3E%3Cpath d='M1 16 9 1M13 16 21 1' fill='none' stroke='%239d3030' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* ===========================================================================
   SPLIT — the band a secondary page is made of. Two arrangements: even is a
   drawing sheet on paper, image-led is a photograph the words sit on.
   =========================================================================== */

.site .split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
}

@media (min-width: 900px) {
  .site .split[data-emphasis='even'] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site .split[data-emphasis='even'][data-side='left'] .split-picture {
    order: -1;
  }
}

.site .split-words h2 {
  font-size: var(--t-xl);
  max-width: 15ch;
  margin: 0 0 1.5rem;
  padding-top: 1.4rem;
  position: relative;
}

.site .split-words h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(40px, 6vw, 96px);
  height: 2px;
  background: var(--oxide);
}

.site .split-body {
  color: var(--chalk-dim);
  max-width: 60ch;
}

/*
 * THE INK GOES ON THE PARAGRAPH, NOT ONLY ON ITS BOX.
 *
 * `site.css` colours `.split-body p` directly, so a colour set on the container was
 * inherited by nothing — the paragraph kept the base's `--ink-soft`, which is a dark grey
 * meant for white paper. On the asphalt ground that measured 2.07:1 against a floor of
 * 4.5, on seven pages, and it passed every check that is not a pair of eyes or an axe
 * scan. Found by scanning, not by looking.
 */
.site .split-body p,
.site .split-body {
  color: var(--chalk-dim);
}

.site .split[data-emphasis='even'][data-side='left'] .split-body p {
  color: var(--paper-ink-2);
}

.site .split-body p {
  margin: 0 0 1.15em;
}

.site .split-body p:last-child {
  margin-bottom: 0;
}

.site .split-action {
  margin-top: 1.75rem;
}

/* The photograph, cut to a 6:12 gable. On a 4:5 box the rake rise is 0.25w = 20%. */
.site .split[data-emphasis='even'] .split-picture {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--slate);
  clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%);
  border-radius: 0;
  /* A 4:5 panel at half a wide window is 660px of one photograph, which turns a detail
     shot into wallpaper. Capped, and placed on the side the editor asked for. */
  max-width: 30rem;
  width: 100%;
  justify-self: start;
}

.site .split[data-emphasis='even'][data-side='right'] .split-picture {
  justify-self: end;
}

.site .split[data-emphasis='even'] .split-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * PAPER, AND THE EDITOR ALREADY CHOOSES IT.
 *
 * A page of these reads as a rhythm when consecutive bands alternate, which is what the
 * `side` setting is FOR — the declaration's own note says an editor placing the fourth
 * one has to be able to say "this one the other way". So this pack turns the sheet over
 * on the same switch: a picture on the left is ink on drawing paper, a picture on the
 * right is chalk on asphalt. One choice, made in PageStudio, moves both.
 *
 * `:nth-of-type` was the obvious alternative and does not work: a `.split` is wrapped in
 * its own arrival `div`, so every one of them is the first `section` among its siblings
 * and an even/odd rule never fires. Measured, not assumed.
 */
.site .split[data-emphasis='even'][data-side='left'] {
  background: var(--paper);
  color: var(--paper-ink);
}

.site .split[data-emphasis='even'][data-side='left'] h2 {
  color: var(--paper-ink);
}

.site .split[data-emphasis='even'][data-side='left'] .split-body {
  color: var(--paper-ink-2);
}

.site .split[data-emphasis='even'][data-side='left'] .split-picture {
  background: var(--paper-2);
}

.site .split[data-emphasis='even'][data-side='left'] .split-action a {
  background: var(--paper-ink);
  color: var(--paper);
}

.site .split[data-emphasis='even'][data-side='left'] .split-action a:hover,
.site .split[data-emphasis='even'][data-side='left'] .split-action a:focus-visible {
  background: var(--oxide);
  color: var(--chalk);
}

/* --- image-led: the photograph is the band ------------------------------- */

/*
 * THE BAND REACHES THE WINDOW, AND THE GUTTER MOVES TO GET OUT OF ITS WAY.
 *
 * `site.css` puts the page gutter on every top-level child of `.site-main`, and an
 * arrival-wrapped split's top-level child is its `div.reveal` — so a photograph inside it
 * can never reach the window from where it sits. The wrapper takes the numbers band's own
 * exemption and the section re-applies the centring itself, which is exactly the trick
 * `.stat-band` already uses and for the same reason.
 *
 * Two selectors, `civic.css`'s stated reason: on an ordinary visit the wrapper is
 * `div.reveal`, and in edit mode `EditableSection` puts another `div` around that, so a
 * rule keyed on one alone lays the page out differently for the person editing it.
 */
.site .site-main > .reveal:has(.split[data-emphasis='image-led']),
.site .site-main > [data-cf-edit-section]:has(.split[data-emphasis='image-led']) {
  padding-inline: 0;
}

.site .split[data-emphasis='image-led'] {
  min-height: clamp(360px, 40vw, 520px);
  align-content: center;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  padding-inline: max(var(--edge), calc(50% - var(--sheet) / 2));
  /*
   * One column, and the picture placed across it. An absolutely-positioned child of a
   * grid container is laid out against its GRID AREA, so with the base's two columns the
   * photograph filled the right-hand one and stopped — measured at x=677 in a 1440 window.
   */
  grid-template-columns: minmax(0, 1fr);
}

/*
 * THE PLACEMENT HAS TO BE UNDONE, not just the template.
 *
 * `site.css` puts the picture in a named column (`grid-column: 2` for a right-side
 * split), and a definite grid position makes the GRID AREA the containing block for an
 * absolutely positioned child — so `inset: 0` filled that one column and the photograph
 * came out as a strip down the right edge. Measured, twice: 705px of 1440, then a sliver.
 * Auto placement puts the containing block back to the section's padding box, which is
 * the whole band including the gutter the words are inset by.
 */
.site .split[data-emphasis='image-led'] .split-picture {
  position: absolute;
  grid-column: auto;
  grid-row: auto;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  clip-path: none;
  border-radius: 0;
  max-width: none;
}

.site .split[data-emphasis='image-led'] .split-words {
  grid-column: 1;
  grid-row: 1;
}

.site .split[data-emphasis='image-led'] .split-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.62) contrast(1.12);
}

/*
 * Ink over the photograph, never a change to the photograph itself — Michael's standing
 * rule. The scrim is opaque where the words are and clears by the middle, so the picture
 * is legible as a picture over most of the band rather than a dark texture.
 */
.site .split[data-emphasis='image-led'] .split-picture::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--asphalt-deep) 0%,
    color-mix(in srgb, var(--asphalt-deep) 82%, transparent) 30%,
    color-mix(in srgb, var(--asphalt-deep) 8%, transparent) 62%
  );
}

.site .split[data-emphasis='image-led'][data-side='left'] .split-picture::after {
  background: linear-gradient(
    to left,
    var(--asphalt-deep) 0%,
    color-mix(in srgb, var(--asphalt-deep) 82%, transparent) 30%,
    color-mix(in srgb, var(--asphalt-deep) 8%, transparent) 62%
  );
}

.site .split[data-emphasis='image-led'][data-side='left'] {
  justify-items: end;
  text-align: right;
}

.site .split[data-emphasis='image-led'][data-side='left'] .split-words h2::before {
  left: auto;
  right: 0;
}

.site .split[data-emphasis='image-led'] .split-words {
  position: relative;
  z-index: 2;
  max-width: 46ch;
}

.site .split[data-emphasis='image-led'] .split-words h2 {
  font-size: var(--t-xl);
  color: var(--chalk);
}

.site .split[data-emphasis='image-led'] .split-body {
  color: var(--chalk-dim);
}

/* ===========================================================================
   THE CREW LINE — four faces, each standing on its own gable.
   =========================================================================== */

.site .board-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--steel);
  border: 1px solid var(--steel);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .site .board-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site .board-member {
  background: var(--asphalt);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 1.35rem;
  display: block;
  overflow: hidden;
  text-align: left;
}

.site .board-art {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: var(--slate);
  overflow: hidden;
  margin: 0 0 1.1rem;
  font-family: var(--stamp);
  font-size: 2rem;
  color: var(--galv-dim);
  display: grid;
  place-items: center;
}

.site .board-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 0;
  filter: grayscale(1) contrast(1.08) brightness(0.86);
  transition:
    filter 520ms var(--ease),
    transform 900ms var(--ease);
}

.site .board-member:hover .board-art img,
.site .board-member:focus-within .board-art img {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.04);
}

/*
 * The ridge each person stands on.
 *
 * The strip is 24% of a 4:5 card, so a 6:12 rake rises 0.25w = 83.33% of the strip. The
 * inner shape is the same gable dropped 3%, which keeps the slope exact and leaves an
 * oxide edge behind it.
 */
.site .board-art::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: var(--oxide);
  clip-path: polygon(0 100%, 0 83.33%, 50% 0, 100% 83.33%, 100% 100%);
}

.site .board-art::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  z-index: 1;
  background: var(--asphalt);
  clip-path: polygon(0 100%, 0 86.33%, 50% 3%, 100% 86.33%, 100% 100%);
}

.site .board-name {
  font-family: var(--stamp);
  font-weight: 800;
  font-stretch: 108%;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  padding-inline: 1.15rem;
  color: var(--chalk);
}

.site .board-position {
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--galv);
  margin: 0;
  padding-inline: 1.15rem;
  line-height: 1.5;
}

.site .board-group + .board-group {
  margin-top: 2rem;
}

/* ===========================================================================
   THE SCHEDULE — the certifications, as a materials schedule on paper.
   ===========================================================================

   These marks are supplied on white. Brightened on the asphalt ground they collapse into
   grey rectangles — the exact failure the design-fidelity skill names, found in the comp
   and fixed there the same way: each mark sits on paper and multiplies into it. */

.site .sponsors[data-scale='even'],
.site .sponsors[data-scale='quiet'] {
  background: var(--paper);
  color: var(--paper-ink);
}

.site .sponsors > h2 {
  color: var(--paper-ink);
}

.site .sponsors[data-scale='even'] .sponsor-list {
  display: block;
  border-top: 1px solid var(--paper-rule);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The mark comes FIRST in the markup and reads LAST on a schedule row, so the two are
 * placed rather than left to flow — `Sponsors` renders the logo before the name because
 * a strip of logos is what the section usually is, and a materials schedule is the other
 * way round. Nothing about the document order changes; a screen reader still hears the
 * name it always heard.
 */
.site .sponsors[data-scale='even'] .sponsor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--paper-rule);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.site .sponsors[data-scale='even'] .sponsor-name {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  text-align: left;
}

.site .sponsors[data-scale='even'] .sponsor-mark {
  grid-column: 2;
  grid-row: 1;
}

.site .sponsors[data-scale='even'] .sponsor-name {
  font-family: var(--stamp);
  font-weight: 700;
  font-stretch: 106%;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  color: var(--paper-ink);
}

.site .sponsors[data-scale='even'] .sponsor-mark {
  justify-self: end;
  display: block;
}

.site .sponsors[data-scale='even'] .sponsor-mark img {
  height: 42px;
  width: auto;
  max-width: 8rem;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.82;
  mix-blend-mode: multiply;
}

/* --- quiet: a strip of license plates ------------------------------------ */

.site .sponsors[data-scale='quiet'] .sponsor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--paper-rule);
  border: 1px solid var(--paper-rule);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site .sponsors[data-scale='quiet'] .sponsor {
  background: var(--paper-2);
  padding: 0.85rem 1.1rem;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 8rem;
  border-radius: 0;
  box-shadow: none;
}

.site .sponsors[data-scale='quiet'] .sponsor-mark img {
  height: clamp(34px, 3.4vw, 46px);
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.05);
  transition: filter 320ms var(--ease);
}

.site .sponsors[data-scale='quiet'] .sponsor:hover .sponsor-mark img {
  filter: none;
}

.site .sponsors[data-scale='quiet'] .sponsor-name {
  font-family: var(--spec);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-ink-2);
  text-align: center;
  line-height: 1.35;
}

/* ===========================================================================
   THE CLOSING BAND — one act, and the number set as large as it will go.
   =========================================================================== */

.site .cta-band {
  background: var(--asphalt-deep);
  border-top: 1px solid var(--steel);
  border-radius: 0;
  color: var(--chalk);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  display: grid;
  /* One column, not the base's two: the act below the words is the whole point of the
     band, and beside them it is a button in a corner. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
  justify-items: start;
}

.site .cta-band h2 {
  font-size: var(--t-xl);
  max-width: 16ch;
  margin: 0 0 1rem;
  color: var(--chalk);
}

.site .cta-band-body {
  font-family: var(--spec);
  font-size: var(--t-spec-lg);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--galv);
  margin: 0;
  max-width: 60ch;
}

/*
 * A BOLD BAND SETS ITS OWN ACT AT MARQUEE SIZE.
 *
 * The comp closes every page on the phone number drawn as big as the sheet allows. Here
 * the act is whatever the tenant put in the band's one link slot — a number on Cordray's
 * pages, "Join the chamber" on somebody else's — and the treatment follows the tone they
 * chose rather than the words they typed.
 */
.site .cta-band[data-tone='bold'] {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.site .cta-band[data-tone='bold'] .cta-band-action a {
  background: none;
  color: var(--chalk);
  padding: 0;
  font-family: var(--stamp);
  font-weight: 900;
  font-stretch: 122%;
  /*
   * Big, and NOT `nowrap`. The comp's own band held a phone number and could afford to
   * refuse to wrap; this one holds whatever a tenant typed, and "Free roof inspection"
   * set at the same size on one line is a page with a horizontal scrollbar. Wrapping is
   * what makes the treatment survive a label nobody has seen yet.
   */
  font-size: clamp(1.9rem, 6vw, 5rem);
  line-height: 0.84;
  letter-spacing: -0.04em;
  max-width: 100%;
  text-wrap: balance;
  transition: color 220ms var(--ease);
}

.site .cta-band[data-tone='bold'] .cta-band-action a::after {
  display: none;
}

.site .cta-band[data-tone='bold'] .cta-band-action a:hover,
.site .cta-band[data-tone='bold'] .cta-band-action a:focus-visible {
  background: none;
  color: var(--oxide-lit);
}

/* ===========================================================================
   QUESTIONS — folds on a paper sheet, the chevron drawn at the pitch.
   =========================================================================== */

.site .faq {
  background: var(--paper);
  color: var(--paper-ink);
}

.site .faq > h2 {
  color: var(--paper-ink);
}

.site .faq-list {
  border-top: 1px solid var(--paper-rule);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site .faq-item {
  border-bottom: 1px solid var(--paper-rule);
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.site .faq-question {
  padding: 1.35rem 3rem 1.35rem 0;
  position: relative;
  font-family: var(--stamp);
  font-weight: 700;
  font-stretch: 106%;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.2;
  color: var(--paper-ink);
  list-style: none;
  background: none;
}

.site .faq-question::-webkit-details-marker {
  display: none;
}

.site .faq-question::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 13px;
  height: 7px;
  margin-top: -3px;
  border-left: 2px solid var(--oxide);
  border-bottom: 2px solid var(--oxide);
  transform: rotate(calc(-1 * var(--pitch)));
  transform-origin: center;
  transition: transform 260ms var(--ease);
}

.site .faq-details[open] .faq-question::after {
  transform: rotate(calc(-1 * var(--pitch))) scaleY(-1);
}

.site .faq-answer {
  padding: 0 3rem 1.6rem 0;
  max-width: 62ch;
  background: none;
}

.site .faq-answer,
.site .faq-answer p,
.site .faq-answer li {
  color: var(--paper-ink-2);
}

.site .faq-answer p {
  margin: 0 0 1em;
}

.site .faq-answer p:last-child {
  margin-bottom: 0;
}

/* ===========================================================================
   THE GALLERY — a wall of what the inspector photographs.
   =========================================================================== */

.site .gallery-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--steel);
  border: 1px solid var(--steel);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 760px) {
  .site .gallery[data-columns='four'] .gallery-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site .gallery[data-columns='three'] .gallery-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site .gallery-item {
  background: var(--asphalt);
  border-radius: 0;
  box-shadow: none;
}

.site .gallery-figure {
  margin: 0;
}

.site .gallery-picture {
  border-radius: 0;
  overflow: hidden;
}

.site .gallery-picture img {
  filter: grayscale(0.55) contrast(1.05);
  transition: filter 480ms var(--ease);
}

.site .gallery-item:hover .gallery-picture img {
  filter: grayscale(0) contrast(1);
}

.site .gallery-caption {
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--galv);
  padding: 0.8rem 1rem 1rem;
  margin: 0;
  background: none;
}

/* ===========================================================================
   CONTACT — the enquiry, on the sheet.
   =========================================================================== */

.site .contact {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .site .contact {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }

  .site .contact > h2 {
    grid-column: 1;
  }

  .site .contact-intro,
  .site .contact-details {
    grid-column: 1;
  }

  .site .contact-form,
  .site .contact-form-sent {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
}

.site .contact-intro {
  font-size: var(--t-md);
  color: var(--chalk);
  max-width: 42ch;
  margin: 0 0 1.5rem;
}

/*
 * THE SECTIONS NOBODY PUT ON THIS SITE, ANSWERED ANYWAY.
 *
 * `text`, the showcase drag, the video, and the four pulled sections are not on any of
 * Cordray's nine pages — and a pack that only dressed what one tenant happened to place
 * would break on the day somebody added a paragraph in PageStudio. Every one of them
 * gets the sheet's ground, ink and hairlines here.
 */
.site .text,
.site .showcase,
.site .video,
.site .plans,
.site .post-list,
.site .jobs-board,
.site .events-list,
.site .member-directory,
.site .featured-members {
  padding-block: var(--course);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.site .text h2,
.site .showcase h2,
.site .video h2,
.site .plans h2,
.site .events-list h2,
.site .jobs-board h2 {
  font-size: var(--t-xl);
  max-width: 16ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.4rem;
  position: relative;
  color: var(--chalk);
}

.site .text h2::before,
.site .showcase h2::before,
.site .video h2::before,
.site .plans h2::before,
.site .events-list h2::before,
.site .jobs-board h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(40px, 6vw, 96px);
  height: 2px;
  background: var(--oxide);
}

.site .text .prose,
.site .text .prose p,
.site .prose,
.site .prose p {
  color: var(--chalk-dim);
  max-width: 62ch;
}

.site .showcase-kicker,
.site .showcase-caption {
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site .showcase-frame,
.site .video-frame {
  border-radius: 0;
  border: 1px solid var(--steel);
}

.site .contact-details {
  color: var(--chalk-dim);
  border-left: 2px solid var(--oxide);
  padding-left: 1.25rem;
}

/* `.split-body p`'s finding, one section along: the base colours these directly too. */
.site .contact-details p {
  margin: 0 0 0.9em;
  color: var(--chalk-dim);
}

.site .contact-details p:first-child {
  font-family: var(--stamp);
  font-weight: 700;
  font-stretch: 106%;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--chalk);
  line-height: 1.15;
}

.site .contact-form {
  display: grid;
  gap: 1.35rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.site .contact-form-field {
  display: grid;
  gap: 0.55rem;
}

.site .contact-form-field label {
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--galv);
}

.site .contact-form-field input,
.site .contact-form-field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--steel-hi);
  border-radius: 0;
  color: var(--chalk);
  font-family: var(--read);
  font-size: 1.0625rem;
  padding: 0.65rem 0;
  transition: border-color 180ms var(--ease);
}

.site .contact-form-field textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.55;
}

.site .contact-form-field input:focus,
.site .contact-form-field textarea:focus {
  border-bottom-color: var(--oxide);
}

.site .contact-form-field input::placeholder,
.site .contact-form-field textarea::placeholder {
  color: var(--galv-dim);
}

/*
 * A FIELD THE BROWSER HAS ALREADY REFUSED.
 *
 * The form's required fields are enforced by the browser, so an empty submit never
 * reaches the server and the refusal list below never draws — measured: the list came
 * back empty and the first input read `validity.valid === false`. `:user-invalid` is the
 * state that actually happens, and until this rule it looked exactly like a field nobody
 * had touched. It fires only after a person has tried, which is why it is not `:invalid`.
 */
.site .contact-form-field input:user-invalid,
.site .contact-form-field textarea:user-invalid {
  border-bottom-color: var(--oxide-warn);
  border-bottom-width: 2px;
}

.site .contact-form-field:has(:user-invalid) label {
  color: var(--oxide-warn);
}

.site .contact-form-submit {
  justify-self: start;
  padding: 1rem 1.5rem;
  background: var(--chalk);
  color: var(--paper-ink);
  border: 0;
  border-radius: 0;
  font-family: var(--spec);
  font-size: var(--t-spec-lg);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  position: relative;
  transition:
    background 180ms var(--ease),
    color 180ms var(--ease);
}

.site .contact-form-submit:hover:not(:disabled),
.site .contact-form-submit:focus-visible {
  background: var(--oxide);
  color: var(--chalk);
}

.site .contact-form-submit:disabled {
  opacity: 0.55;
}

.site .contact-form-refusal {
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxide-warn);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

/* The sent state: a tick at the pitch, and the sentence beside it. */
.site .contact-form-sent {
  border: 1px solid var(--oxide);
  border-radius: 0;
  background: none;
  color: var(--chalk);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem)
    4.25rem;
  position: relative;
  font-family: var(--spec);
  font-size: var(--t-spec-lg);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
}

.site .contact-form-sent::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 1.9rem;
  width: 22px;
  height: 11px;
  border-left: 3px solid var(--oxide);
  border-bottom: 3px solid var(--oxide);
  transform: rotate(calc(-1 * var(--pitch)));
}

/* ===========================================================================
   THE MATERIAL PICKER — a drawn house, and the chosen shingle on its roof.
   ===========================================================================

   THE STAGE IS A DRAWING AND THE SAMPLE IS THE MATERIAL. `site.css` stacks every sample
   in one grid cell and reveals the chosen one; this pack cuts that cell to the roof plane
   of a house drawn in the background, so choosing a shingle re-roofs the drawing.

   THE ARITHMETIC. The stage is 5:3 — 500 by 300 in the drawing's own coordinates. The
   main roof runs from an eave at y=186 to a ridge at y=96, rising 90 over a run of 180,
   which is 0.5 exactly. Percentages below are those numbers over 500 and 300. */

.site .material-picker {
  background: var(--paper);
  color: var(--paper-ink);
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.site .material-picker > h2 {
  color: var(--paper-ink);
}

@media (min-width: 980px) {
  .site .material-picker {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }

  .site .material-picker > h2,
  .site .material-intro {
    grid-column: 1 / -1;
  }

  .site .material-stage {
    grid-column: 1;
    position: sticky;
    top: 96px;
  }

  .site .material-options,
  .site .material-note {
    grid-column: 2;
  }
}

.site .material-intro,
.site .material-intro p {
  color: var(--paper-ink-2);
}

.site .material-intro {
  max-width: 62ch;
}

/*
 * The picker sits on paper, so its focus ring is ink. The base file's ring is twelve
 * positional selectors deep and no rule here could out-specify it, so it reads
 * `--pack-focus-ring` and this is where the pack answers — measured first: the ring was
 * coming out as the base accent, a dark red on a light ground.
 */
.site .material-picker {
  --pack-focus-ring: var(--paper-ink);
}

.site .guided-flow {
  --pack-focus-ring: var(--chalk);
}

.site .material-stage {
  position: relative;
  aspect-ratio: 5 / 3;
  background: var(--paper-2);
  border: 1px solid var(--paper-rule);
  border-radius: 0;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 300' preserveAspectRatio='none'%3E%3Cg stroke='%238b8474' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'%3E%3Cpath d='M70 186 H430 V282 H70 Z' fill='%23d7d1c4'/%3E%3Cpath d='M100 210 h56 v46 h-56 Z M128 210 v46 M100 233 h56'/%3E%3Cpath d='M344 210 h56 v46 h-56 Z M372 210 v46 M344 233 h56'/%3E%3Cpath d='M232 224 h36 v58 h-36 Z' fill='%237d7466'/%3E%3Cpath d='M20 186 H480 M20 192 H480'/%3E%3Cpath d='M74 192 V282 M426 192 V282'/%3E%3Cpath d='M0 282 H500'/%3E%3C/g%3E%3Cpath d='M20 186 L200 96 L300 96 L480 186' fill='none' stroke='%238b8474' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 96 L300 96' fill='none' stroke='%239d3030' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3Cg font-family='monospace' font-size='10' letter-spacing='1.4' fill='%234c5259'%3E%3Ctext x='308' y='92'%3ERIDGE%3C/text%3E%3Ctext x='10' y='20'%3EROOF PLANE %E2%80%94 6:12%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/*
 * The plane's own outline, drawn OVER the material.
 *
 * The ridge and both rakes are in the background drawing, and the sample covers them the
 * moment one is chosen — a roof with no edges. The same three lines are drawn again on
 * top, so the drawing stays a drawing whatever material is on it.
 */
.site .material-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 300' preserveAspectRatio='none'%3E%3Cpath d='M20 186 L200 96 L300 96 L480 186' fill='none' stroke='%238b8474' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M200 96 L300 96' fill='none' stroke='%239d3030' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/*
 * The roof plane, in the stage's own percentages:
 *   (20,186) -> (4%, 62%)      (200,96) -> (40%, 32%)
 *   (300,96) -> (60%, 32%)     (480,186) -> (96%, 62%)
 * Both rakes rise 90 over 180. The sample fills the plane and is cut to it.
 */
.site .material-sample {
  position: absolute;
  inset: 0;
  clip-path: polygon(4% 62%, 40% 32%, 60% 32%, 96% 62%);
}

/*
 * THE SAMPLE IS SHOWN AS MATERIAL, NOT AS A PHOTOGRAPH OF A HOUSE.
 *
 * A manufacturer's own picture of a shingle line is a picture of a roof on a building,
 * and dropped whole into the drawn roof plane it reads as a house inside a house. Scaled
 * in, the same file is a field of granules at roughly the scale the drawing is at — which
 * is what a sample is for. The origin is high because a roof is in the upper part of
 * every one of these photographs.
 */
.site .material-sample-art {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  transform: scale(2.4);
  transform-origin: 50% 26%;
}

.site .material-showing {
  right: auto;
}

.site .material-showing-item {
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--paper-ink);
  color: var(--paper);
  border-radius: 0;
  padding: 0.5rem 0.9rem;
}

.site .material-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--paper-rule);
}

.site .material-option {
  border-right: 1px solid var(--paper-rule);
  border-bottom: 1px solid var(--paper-rule);
  gap: 0;
}

.site .material-option:nth-child(2n) {
  border-right: 0;
}

.site .material-choice {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: 0;
}

.site .material-chip {
  border-radius: 0;
  position: relative;
}

.site .material-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  transition: border-color 160ms var(--ease);
}

.site .material-name {
  display: block;
  font-family: var(--stamp);
  font-weight: 700;
  font-stretch: 106%;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.1;
  color: var(--paper-ink);
  padding: 0.7rem 0.75rem 0.2rem;
}

.site .material-body {
  display: block;
  font-family: var(--spec);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-ink-2);
  padding: 0 0.75rem 0.7rem;
}

.site .material-link {
  display: inline-block;
  font-family: var(--spec);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxide);
  font-weight: 600;
  padding: 0 0.75rem 0.85rem;
}

.site .material-note {
  color: var(--paper-ink-2);
  font-size: 0.875rem;
}

/*
 * The chosen sample's own swatch, marked. Twelve rules, matching the twelve `site.css`
 * writes for the same twelve positions — the base file's own note says why there is no
 * way to write this once.
 */
.site .material-input:nth-of-type(1):checked ~ .material-options .material-option:nth-child(1) .material-chip::after,
.site .material-input:nth-of-type(2):checked ~ .material-options .material-option:nth-child(2) .material-chip::after,
.site .material-input:nth-of-type(3):checked ~ .material-options .material-option:nth-child(3) .material-chip::after,
.site .material-input:nth-of-type(4):checked ~ .material-options .material-option:nth-child(4) .material-chip::after,
.site .material-input:nth-of-type(5):checked ~ .material-options .material-option:nth-child(5) .material-chip::after,
.site .material-input:nth-of-type(6):checked ~ .material-options .material-option:nth-child(6) .material-chip::after,
.site .material-input:nth-of-type(7):checked ~ .material-options .material-option:nth-child(7) .material-chip::after,
.site .material-input:nth-of-type(8):checked ~ .material-options .material-option:nth-child(8) .material-chip::after,
.site .material-input:nth-of-type(9):checked ~ .material-options .material-option:nth-child(9) .material-chip::after,
.site .material-input:nth-of-type(10):checked ~ .material-options .material-option:nth-child(10) .material-chip::after,
.site .material-input:nth-of-type(11):checked ~ .material-options .material-option:nth-child(11) .material-chip::after,
.site .material-input:nth-of-type(12):checked ~ .material-options .material-option:nth-child(12) .material-chip::after {
  border-color: var(--oxide);
}

.site .material-input:nth-of-type(1):checked ~ .material-options .material-option:nth-child(1) .material-choice,
.site .material-input:nth-of-type(2):checked ~ .material-options .material-option:nth-child(2) .material-choice,
.site .material-input:nth-of-type(3):checked ~ .material-options .material-option:nth-child(3) .material-choice,
.site .material-input:nth-of-type(4):checked ~ .material-options .material-option:nth-child(4) .material-choice,
.site .material-input:nth-of-type(5):checked ~ .material-options .material-option:nth-child(5) .material-choice,
.site .material-input:nth-of-type(6):checked ~ .material-options .material-option:nth-child(6) .material-choice,
.site .material-input:nth-of-type(7):checked ~ .material-options .material-option:nth-child(7) .material-choice,
.site .material-input:nth-of-type(8):checked ~ .material-options .material-option:nth-child(8) .material-choice,
.site .material-input:nth-of-type(9):checked ~ .material-options .material-option:nth-child(9) .material-choice,
.site .material-input:nth-of-type(10):checked ~ .material-options .material-option:nth-child(10) .material-choice,
.site .material-input:nth-of-type(11):checked ~ .material-options .material-option:nth-child(11) .material-choice,
.site .material-input:nth-of-type(12):checked ~ .material-options .material-option:nth-child(12) .material-choice {
  border: 0;
  box-shadow: none;
  background: var(--paper-2);
}

/* ===========================================================================
   THE GUIDED FLOW — pick what happened, read what follows.
   =========================================================================== */

.site .guided-flow {
  display: grid;
  gap: 0;
}

.site .guided-flow > h2 {
  margin-bottom: 1rem;
}

.site .flow-intro,
.site .flow-intro p {
  color: var(--chalk-dim);
}

.site .flow-intro {
  max-width: 52ch;
  margin: 0 0 2rem;
}

.site .flow-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  background: var(--steel);
  border: 1px solid var(--steel);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site .flow-choice {
  background: var(--asphalt);
}

.site .flow-choice-label {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 1.35rem 1.25rem 1.5rem;
  gap: 0.55rem;
  position: relative;
  height: 100%;
  transition: background 180ms var(--ease);
}

.site .flow-choice-label:hover {
  background: var(--slate);
}

.site .flow-choice-title {
  font-family: var(--stamp);
  font-weight: 800;
  font-stretch: 108%;
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--chalk);
}

.site .flow-choice-prompt {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--galv);
}

.site .flow-answers {
  border: 1px solid var(--steel);
  border-top: 0;
}

.site .flow-answer {
  background: var(--slate);
  border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  gap: 0;
}

@media (min-width: 860px) {
  .site .flow-answer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }

  .site .flow-answer-title,
  .site .flow-answer-body,
  .site .flow-checks {
    grid-column: 1;
  }

  .site .flow-steps,
  .site .flow-action {
    grid-column: 2;
  }

  .site .flow-steps {
    grid-row: 1 / span 3;
  }
}

.site .flow-answer-title {
  font-family: var(--spec);
  font-size: var(--t-spec);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxide-lit);
  margin: 0 0 0.85rem;
  line-height: 1.5;
}

.site .flow-answer-body {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--chalk);
  margin: 0;
  max-width: 46ch;
}

.site .flow-checks,
.site .flow-steps {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--steel);
  display: block;
  counter-reset: step;
}

.site .flow-checks li,
.site .flow-steps li {
  padding: 0.7rem 0 0.7rem 1.9rem;
  border-bottom: 1px solid var(--steel);
  position: relative;
  font-size: 0.9375rem;
  color: var(--chalk-dim);
}

/* The tick, at the pitch, on every checked line. */
.site .flow-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--oxide);
  border-bottom: 2px solid var(--oxide);
  transform: rotate(calc(-1 * var(--pitch)));
}

/*
 * A numbered step, because these ARE a sequence — you file before the adjuster comes out
 * — and the number carries information the reader needs. A counter rather than a marker
 * so the drafting face and the oxide can be set on it.
 */
.site .flow-steps li {
  counter-increment: step;
}

.site .flow-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-family: var(--spec);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--oxide-lit);
  border: 1px solid currentColor;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.site .flow-action {
  margin-top: 1.75rem;
}

/* ===========================================================================
   THE FOOT OF THE SHEET — and the number, on every page.
   =========================================================================== */

.site .site-footer {
  background: var(--asphalt-deep);
  border-top: 1px solid var(--steel);
  color: var(--galv);
  padding: clamp(2.5rem, 5vw, 4rem) var(--edge) 1.5rem;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.site .site-footer .site-name {
  font-family: var(--stamp);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--chalk);
}

.site .site-footer .menu-item > a {
  font-family: var(--read);
  font-size: 0.9375rem;
  color: var(--chalk-dim);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0.2rem 0;
  transition: color 160ms var(--ease);
}

.site .site-footer .menu-item > a:hover {
  color: var(--chalk);
  background: none;
}

.site .site-footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  margin: 0;
}

.site .site-footer-contact-item {
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--galv);
}

/*
 * THE NUMBER, ON EVERY PAGE, FROM THE TENANT'S OWN CONTACT ROW.
 *
 * The comp closes every page on the phone number set enormous, and it did that in its own
 * footer markup. Here the same number is already in the footer as a `tel:` link, put
 * there by `os:site-contact` — so the treatment is a rule about that link rather than a
 * band somebody has to remember to place on nine pages. A tenant who sets no phone
 * simply has a footer without it.
 */
.site .site-footer-contact-link[href^='tel:'] {
  font-family: var(--stamp);
  font-weight: 900;
  font-stretch: 122%;
  font-size: clamp(1.9rem, 7vw, 5.5rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: none;
  color: var(--chalk);
  flex-basis: 100%;
  transition: color 220ms var(--ease);
}

.site .site-footer-contact-link[href^='tel:']:hover,
.site .site-footer-contact-link[href^='tel:']:focus-visible {
  color: var(--oxide-lit);
}

.site .site-footer-legal {
  border-top: 1px solid var(--steel);
  padding-top: 1.5rem;
  font-family: var(--spec);
  font-size: var(--t-spec);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--galv-dim);
}

/* ===========================================================================
   ARRIVAL — a band goes on the way a course does, and stops entirely for anyone
   who has asked it to.
   =========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .site .reveal[data-watch] {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 620ms var(--ease),
      transform 620ms var(--ease);
  }

  .site .reveal[data-watch][data-in] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site *,
  .site *::before,
  .site *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .site .reveal[data-watch] {
    opacity: 1;
    transform: none;
  }
}

/* ===========================================================================
   NARROW — the sheet folds, nothing is taken off it.
   =========================================================================== */

@media (max-width: 899px) {
  .site .contact-details {
    padding-left: 1rem;
  }

  /*
   * The scrim turns with the layout. A left-to-right wash puts the words over the clear
   * end of the photograph the moment the band stops being two columns — measured on a
   * phone, where the paragraph sat on a lit stone wall and could not be read.
   */
  .site .split[data-emphasis='image-led'] .split-picture::after,
  .site .split[data-emphasis='image-led'][data-side='left'] .split-picture::after {
    background: linear-gradient(
      to top,
      var(--asphalt-deep) 0%,
      color-mix(in srgb, var(--asphalt-deep) 86%, transparent) 55%,
      color-mix(in srgb, var(--asphalt-deep) 45%, transparent) 100%
    );
  }

  .site .split[data-emphasis='image-led'][data-side='left'] {
    justify-items: start;
    text-align: left;
  }

  .site .split[data-emphasis='image-led'][data-side='left'] .split-words h2::before {
    left: 0;
    right: auto;
  }

  .site .cta-band[data-tone='bold'] .cta-band-action a {
    font-size: clamp(1.7rem, 11vw, 3rem);
  }

  .site .site-footer-contact-link[href^='tel:'] {
    font-size: clamp(1.7rem, 11vw, 3rem);
  }
}

@media (max-width: 519px) {
  .site .material-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .site .material-option {
    border-right: 0;
  }
}