/* ============================================================================
   BROWN ROOF CITY — Ibadan Descendants Union, Houston Chapter
   ----------------------------------------------------------------------------
   Two structural ideas carry this whole stylesheet:

   1. THE COMPOUND (agbo-ile). One gate, then courtyards. Every page-to-page
      move and every Council bio-open uses ONE transition: an arch-shaped
      clip-path rising from the ground, the shape of a compound doorway.

   2. THE DAY CYCLE. One registered custom property, --daylight (0 to 1),
      drives the palette across one day over Ibadan:
          Adire Night -> Cowrie Brass -> Parchment -> Roof Rust -> Adire Night

      CONTRAST CONTRACT: the ramp is confined to the SKY STRIPS (the hero sky
      at the top of Home, and the dusk sky above every footer). No body copy
      ever sits on an animating colour. Text that does sit on the ramp
      (the hero headline) sits in the ZENITH band, which never lightens past
      rgb(49,38,30) => 11.7:1 against Parchment. Everything else is on the
      fixed Parchment ground at 14.6:1. AA holds at every frame of the ramp,
      not just at the endpoints.
   ========================================================================== */

/* --- The one animatable property the whole palette hangs from -------------- */
@property --daylight {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* ============================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Ibadan palette. Every one of these is a real, named thing. */
  --roof-rust: #b5502c;      /* the zinc roofs, seen from Bower's Tower */
  --adire-night: #171320;    /* adire indigo at its deepest */
  --cowrie-brass: #8c6a17;   /* cowrie and brass regalia */
  --agodi-green: #52623f;    /* Agodi gardens, used sparingly */
  --parchment: #ede4d2;      /* midday light on a wall */

  /* Text-safe derivatives (verified against Parchment ground) */
  --ink: #171320;            /* 14.6:1 on parchment */
  --ink-muted: #5a4e3f;      /*  6.4:1 on parchment */
  --rust-ink: #8f3a1e;       /*  6.0:1 on parchment — rust for TEXT */
  --rule: #cdbb9d;           /* hairlines, borders */
  --rule-soft: #ddd0b8;

  /* Surfaces */
  --ground: var(--parchment);
  --ground-tint: #f4ecdd;
  --ground-panel: #f8f2e6;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --chrome: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Reading measure for an older audience: 17-18px base, generous leading */
  --step--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.9rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.18vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.18rem + 0.34vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.36rem + 0.7vw, 1.95rem);
  --step-3: clamp(1.9rem, 1.62rem + 1.4vw, 2.7rem);
  --step-4: clamp(2.35rem, 1.85rem + 2.5vw, 3.9rem);
  --step-5: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);

  /* Rhythm */
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --measure: 62ch;
  --shell: 74rem;

  /* Motion */
  --arch-out: 380ms;
  --arch-in: 560ms;
  --ease-door: cubic-bezier(0.22, 0.61, 0.24, 1);
}

/* ============================================================================
   2. THE DAY CYCLE — one property, a piecewise ramp
   --------------------------------------------------------------------------
   --daylight runs 0 -> 1. Three clamped segments walk it through the four
   stops without ever needing abs() or a JS colour library.
   ========================================================================== */

.sky {
  /* segment weights */
  --t1: clamp(0, calc(var(--daylight) * 3), 1);                 /* night -> brass     */
  --t2: clamp(0, calc((var(--daylight) - 0.333) * 3), 1);       /* brass -> parchment */
  --t3: clamp(0, calc((var(--daylight) - 0.667) * 3), 1);       /* parchment -> rust  */

  --mix-1: color-mix(in oklab, var(--adire-night), var(--cowrie-brass) calc(var(--t1) * 100%));
  --mix-2: color-mix(in oklab, var(--mix-1), var(--parchment) calc(var(--t2) * 100%));

  /* HORIZON runs the full ramp. This is where dawn actually happens. */
  --horizon: color-mix(in oklab, var(--mix-2), var(--roof-rust) calc(var(--t3) * 100%));

  /* EXPERIMENT (reference-style, bolder): zenith warms much further, toward
     a fuller saturated block rather than staying atmospheric. Original value
     was 22% — see git-free note in chat: revert to 22% to restore the
     moodier gradient version. */
  --zenith: color-mix(
    in oklab,
    var(--adire-night),
    var(--cowrie-brass) calc(var(--daylight) * 55%)
  );

  background: linear-gradient(
    to bottom,
    var(--zenith) 0%,
    var(--zenith) 34%,
    color-mix(in oklab, var(--zenith), var(--horizon) 55%) 68%,
    var(--horizon) 100%
  );
}

/* ============================================================================
   3. RESET / BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Parchment is the name of the ground colour, not just its hex value: a
     faint grain gives every plain field the tooth of paper rather than a
     flat digital fill. This is texture, not decoration — no cultural motif,
     just noise, and quiet enough to disappear at reading distance. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.14'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

img, svg { display: block; max-width: 100%; }
svg { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

/* Fraunces' optical-size axis worked deliberately, not just scaled.
   Big sizes get opsz 144 (high contrast, tight joins); small caps get opsz 9
   (sturdy, open, built to survive at 11px).
   EXPERIMENT (reference-style, bolder): h1 dropped to opsz 32 + weight 640,
   WONK off — trades the delicate high-contrast read for a sturdier, more
   uniform stroke closer to the reference footage. Original was
   "opsz" 144, "SOFT" 0, "WONK" 1 with weight 500 (inherited above). */
h1 { font-size: var(--step-5); font-weight: 640; font-variation-settings: "opsz" 32, "SOFT" 0, "WONK" 0; }
h2 { font-size: var(--step-4); font-variation-settings: "opsz" 96, "WONK" 1; }
h3 { font-size: var(--step-2); font-variation-settings: "opsz" 48; }
h4 { font-size: var(--step-1); font-variation-settings: "opsz" 24; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--rust-ink); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--rust-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--adire-night);
  color: var(--parchment);
  padding: 0.9rem 1.3rem;
  z-index: 999;
  font-family: var(--chrome);
  font-size: var(--step--1);
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   4. SHARED PRIMITIVES
   ========================================================================== */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--narrow { --shell: 52rem; }

.eyebrow {
  font-family: var(--display);
  font-variation-settings: "opsz" 9;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust-ink);
  margin: 0 0 0.9rem;
  display: block;
}
.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
}

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

section { padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }

/* --- Buttons: three garments, each with its own identity ------------------ */

.door {                       /* PRIMARY — the way in */
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.9rem 1.05rem 1.75rem;
  background: var(--roof-rust);
  color: #fff8ee;
  font-family: var(--chrome);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 999px 999px 4px 4px;   /* an arch, standing up */
  cursor: pointer;
  transition: background 220ms var(--ease-door), transform 220ms var(--ease-door);
}
.door:hover { background: #9c421f; transform: translateY(-2px); }
.door:active { transform: translateY(0); }
.door__arch {
  width: 0.85rem; height: 0.85rem;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  flex: none;
}

.lintel {                     /* SECONDARY — outlined, on dark */
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid color-mix(in oklab, var(--parchment), transparent 55%);
  color: var(--parchment);
  font-family: var(--chrome);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px 999px 4px 4px;
  transition: border-color 200ms, background 200ms;
}
.lintel:hover {
  border-color: var(--parchment);
  background: color-mix(in oklab, var(--parchment), transparent 88%);
}

.thread {                     /* TERTIARY — an inline pull, not a button */
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--chrome);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rust-ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--rust-ink), transparent 60%);
  padding-bottom: 0.25rem;
  transition: border-color 200ms, gap 200ms;
}
.thread:hover { border-color: var(--rust-ink); gap: 0.85rem; }
.thread::after { content: "\2192"; }

/* ============================================================================
   5. THE GATE (header)
   ========================================================================== */

.gate {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in oklab, var(--parchment), transparent 6%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.gate__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
}
.mark__glyph { width: 30px; height: 30px; flex: none; }
.mark__text {
  font-family: var(--display);
  font-variation-settings: "opsz" 9;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.15;
}
.mark__text span { display: block; color: var(--ink-muted); letter-spacing: 0.09em; }

.courtyards { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.courtyards a {
  font-family: var(--chrome);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 180ms, border-color 180ms;
  white-space: nowrap;
}
.courtyards a:hover { color: var(--ink); }
.courtyards a[aria-current="page"] { color: var(--rust-ink); border-bottom-color: var(--roof-rust); }

.gate__toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px 999px 4px 4px;
  padding: 0.6rem 1rem;
  font-family: var(--chrome);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 60rem) {
  .gate__toggle { display: inline-flex; }
  .courtyards {
    position: fixed;
    inset: 3.9rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground-panel);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.5rem;
    /* the same doorway, opening downward */
    clip-path: ellipse(150% 0% at 50% 0%);
    transition: clip-path 460ms var(--ease-door);
    box-shadow: 0 24px 40px -28px rgba(23, 19, 32, 0.5);
  }
  .courtyards[data-open="true"] { clip-path: ellipse(180% 160% at 50% 0%); }
  .courtyards a {
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 0.86rem;
  }
  .courtyards a[aria-current="page"] { border-bottom-color: var(--roof-rust); }
}

/* ============================================================================
   6. HERO — the sky does the day cycle, the ground holds the words
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(88svh, 46rem);
  display: grid;
  grid-template-rows: 1fr auto;
  /* Dawn: 2.75 seconds, once, on arrival. Measured against reference footage
     frame by frame (0.25s steps): indigo settles into brass by ~0.5s in,
     holds there briefly, then resolves to rust by ~2.5-3s. This timing
     matches that pace rather than an assumed one. */
  animation: daybreak 2.75s var(--ease-door) forwards;
}

@keyframes daybreak {
  from { --daylight: 0; }
  to   { --daylight: 0.94; }
}

/* CONTRAST SCRIM — EXPERIMENT (lighter, reference-style). Original veil was
   58% opaque (transparent 42%); lightened here to let more saturation read
   through, closer to a solid block. Re-verify contrast before shipping this;
   revert the three "transparent NN%" values to 42/42/100 to restore the
   original safety margin. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--adire-night), transparent 78%) 0%,
    color-mix(in srgb, var(--adire-night), transparent 78%) 74%,
    color-mix(in srgb, var(--adire-night), transparent 100%) 92%
  );
}

.hero__copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding-block: clamp(3rem, 2.2rem + 5vw, 5rem) clamp(6rem, 4rem + 9vw, 9.5rem);
}

.hero h1 {
  color: var(--parchment);
  max-width: 17ch;
  margin-bottom: 1.6rem;
}

.hero__sub {
  color: color-mix(in oklab, var(--parchment), transparent 12%);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 40ch;
  margin-bottom: 2.4rem;
}

/* ONE call to action above the fold. */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.hero__aside {
  font-family: var(--chrome);
  font-size: var(--step--1);
  color: color-mix(in oklab, var(--parchment), transparent 34%);
}
.hero__aside a { color: inherit; }

/* --- The skyline: seven hills, zinc roofs, two towers -------------------- */
.hero__city {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  width: 100%;
  min-width: 60rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
/* Atmospheric perspective. The roofs nearest the horizon take the dawn full
   in the face; each band forward falls further toward silhouette, until the
   roofs under your feet are almost pure adire night. */
.hills--far   { fill: color-mix(in oklab, var(--adire-night), var(--cowrie-brass) calc(16% + var(--daylight) * 26%)); }
.roofs--h3    { fill: color-mix(in oklab, var(--roof-rust), var(--cowrie-brass) calc(18% + var(--daylight) * 30%)); }
.roofs--h2    { fill: color-mix(in oklab, var(--roof-rust), var(--adire-night) calc(32% - var(--daylight) * 12%)); }
.roofs--h1    { fill: color-mix(in oklab, var(--roof-rust), var(--adire-night) calc(54% - var(--daylight) * 14%)); }
.roofs--near  { fill: color-mix(in oklab, var(--roof-rust), var(--adire-night) calc(78% - var(--daylight) * 12%)); }
.tower        { fill: color-mix(in oklab, var(--adire-night), var(--roof-rust) calc(var(--daylight) * 10%)); }
.window-lit   { fill: color-mix(in oklab, var(--cowrie-brass), var(--parchment) 25%); opacity: calc(1 - var(--daylight) * 0.55); }
.roofs--near .pane {
  fill: color-mix(in oklab, var(--cowrie-brass), var(--parchment) 40%);
  opacity: calc(0.85 - var(--daylight) * 0.6);
}

/* A single sun, low, rising with the ramp. */
.sun {
  fill: color-mix(in oklab, var(--cowrie-brass), var(--parchment) calc(var(--daylight) * 60%));
  opacity: calc(0.3 + var(--daylight) * 0.7);
  transform: translateY(calc((1 - var(--daylight)) * 44px));
  transform-box: fill-box;
}

/* --- Drum cadence: dundun phrasing, 80 / 80 / 220 ------------------------- */
.beat {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.36em) rotate(0.4deg);
  animation: strike 620ms var(--ease-door) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes strike {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ============================================================================
   7. BODY COURTYARDS — fixed ground, 14.6:1, nothing animating behind text
   ========================================================================== */

.courtyard--tint { background: var(--ground-tint); border-block: 1px solid var(--rule-soft); }

.pair {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 54rem) {
  .pair { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .pair--even { grid-template-columns: 1fr 1fr; }
}

/* A hairline tile grid: four plain facts, side by side, no ranking implied
   by a leading number. Used for the Home teaser, where each item is a single
   line; the full record on What We Do stays a ledger, because paragraph-length
   text wants a row, not a tile. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 54rem) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tile {
  background: var(--ground-panel);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.1rem) clamp(1.25rem, 1rem + 1vw, 1.6rem);
}
.tile__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "WONK" 1;
  font-size: var(--step-2);
  line-height: 1.12;
  margin-bottom: 0.6rem;
}
.tile__note { color: var(--ink-muted); font-size: var(--step--1); line-height: 1.55; margin: 0; }

/* Programme list: a ledger, not a card grid */
.ledger { border-top: 1px solid var(--rule); }
.ledger__row {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding-block: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .ledger__row { grid-template-columns: 4rem minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; }
}
.ledger__no {
  font-family: var(--chrome);
  font-size: var(--step--1);
  color: var(--roof-rust);
}
.ledger__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 36;
  font-size: var(--step-2);
  line-height: 1.15;
}
.ledger__note { color: var(--ink-muted); margin: 0; }

/* A pull-quote sized like it matters */
.welcome {
  border-left: 3px solid var(--roof-rust);
  padding-left: clamp(1.25rem, 0.6rem + 2vw, 2.5rem);
}
.welcome p {
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 20;
  font-size: var(--step-2);
  line-height: 1.32;
  color: var(--ink);
  max-width: 34ch;
}
/* The left column of a quote section: who is speaking, not just a label
   floating over empty parchment. */
.speaker__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "WONK" 1;
  font-size: var(--step-4);
  line-height: 1.02;
  color: var(--ink);
  margin-top: 0.6rem;
}
.speaker__honorific {
  display: block;
  font-size: 0.4em;
  color: var(--rust-ink);
  font-variation-settings: "opsz" 24;
  margin-bottom: 0.15em;
}
.speaker__role {
  font-family: var(--chrome);
  font-size: var(--step--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 1rem;
}

/* ============================================================================
   8. THE COUNCIL — the room where the elders sit
   ========================================================================== */

.council {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 44rem) { .council { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .council { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.seat {
  background: var(--ground-panel);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Until photographs arrive, each officer is drawn as what they actually are in
   the concept: a doorway in the compound, with their initials cut into it. */
.seat__portrait {
  aspect-ratio: 4 / 5;
  background: var(--ground-tint);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.seat__portrait img { width: 100%; height: 100%; object-fit: cover; }
.seat__portrait:not(.seat__portrait--empty) {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--roof-rust), transparent 78%);
}

/* The doorway decoration belongs ONLY to the empty placeholder. A seat that
   has a real photograph gets none of it: the arch was painting straight over
   real faces, which is a real defect, not a style choice. */
.seat__portrait--empty::before {  /* the doorway itself */
  content: "";
  position: absolute;
  inset: 12% 14% 0 14%;
  border: 1.5px solid color-mix(in oklab, var(--roof-rust), transparent 62%);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--roof-rust), var(--ground-panel) 88%),
    var(--ground-panel) 72%
  );
}
.seat__portrait--empty::after {   /* the threshold */
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: 8%;
  height: 1.5px;
  background: color-mix(in oklab, var(--roof-rust), transparent 62%);
}
.seat__initials {
  position: relative;
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "WONK" 1;
  font-size: clamp(3.4rem, 7vw, 5rem);
  font-weight: 400;
  color: color-mix(in oklab, var(--roof-rust), transparent 28%);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 8%;
}

/* Honorifics in Fraunces display, never flattened. */
.seat__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "WONK" 1;
  font-size: var(--step-2);
  line-height: 1.1;
  margin: 0;
}
.seat__honorific { display: block; font-size: 0.62em; color: var(--rust-ink); letter-spacing: 0.02em; }
.seat__role {
  font-family: var(--chrome);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.seat__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.seat__since { font-family: var(--chrome); font-size: 0.75rem; color: var(--ink-muted); }

/* The arch-wipe again: a bio does not "slide open", it is a door you pass. */
.room {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--arch-in) var(--ease-door);
}
.room > div {
  overflow: hidden;
  clip-path: ellipse(72% 0% at 50% 100%);
  transition: clip-path var(--arch-in) var(--ease-door);
}
.seat[data-open="true"] .room { grid-template-rows: 1fr; }
.seat[data-open="true"] .room > div { clip-path: ellipse(180% 180% at 50% 100%); }
.room p {
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-muted);
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  margin-top: 0.25rem;
}

.seat__toggle {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px 999px 4px 4px;
  padding: 0.5rem 1rem;
  font-family: var(--chrome);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust-ink);
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.seat__toggle:hover { background: var(--roof-rust); color: #fff8ee; border-color: var(--roof-rust); }

/* ============================================================================
   9. OUR STORY — a timeline built like a wall, course by course
   ========================================================================== */

/* A wall built course by course wants a plumb line running through it: one
   rail down the left edge, one peg dropped at each course. */
.courses {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.course {
  display: grid;
  gap: 0.4rem 2.5rem;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.2rem);
  border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
.course::before {
  content: "";
  position: absolute;
  top: clamp(1.5rem, 1rem + 1.5vw, 2.2rem);
  left: -1.86rem;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--roof-rust);
}
@media (min-width: 48rem) {
  .course { grid-template-columns: 9rem minmax(0, 1fr); }
}
.course__year {
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "WONK" 1;
  font-size: var(--step-2);
  color: var(--roof-rust);
  line-height: 1;
}
.course__body p { margin-bottom: 0.6rem; }
.course__body p:last-child { margin-bottom: 0; }
.course__tag {
  font-family: var(--chrome);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ============================================================================
   10. GIVING + FORMS
   ========================================================================== */

.tiers {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  margin-bottom: 1.75rem;
}
.tier {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--ground-panel);
  border-radius: 4px;
  padding: 1.1rem 1rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-variation-settings: "opsz" 48;
  font-size: var(--step-2);
  color: var(--ink);
  transition: border-color 180ms, background 180ms, transform 180ms;
}
.tier small {
  display: block;
  font-family: var(--chrome);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.35rem;
}
.tier:hover { transform: translateY(-2px); }
.tier[aria-pressed="true"] {
  border-color: var(--roof-rust);
  background: color-mix(in oklab, var(--roof-rust), var(--ground-panel) 90%);
  box-shadow: inset 0 0 0 1px var(--roof-rust);
}

.cadence { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 4px; margin-bottom: 1.5rem; }
.cadence button {
  border: 0;
  background: none;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  font-family: var(--chrome);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 180ms, color 180ms;
}
.cadence button[aria-pressed="true"] { background: var(--adire-night); color: var(--parchment); }

.field { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; }
.field > label {
  font-family: var(--chrome);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--ground-panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.85rem 0.95rem;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--roof-rust); }

.check { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1.5rem; }
.check input { margin-top: 0.35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--roof-rust); flex: none; }
.check label { font-size: var(--step--1); color: var(--ink-muted); max-width: 52ch; }

.note {
  font-size: var(--step--1);
  color: var(--ink-muted);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
}

.status { font-family: var(--chrome); font-size: var(--step--1); margin-top: 1rem; }
.status[data-tone="ok"] { color: var(--agodi-green); }
.status[data-tone="bad"] { color: var(--rust-ink); }

/* A visible marker for anything awaiting a real value from the Union. */
.seam {
  display: inline-block;
  font-family: var(--chrome);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
}

/* ============================================================================
   11. DUSK + FOOTER — every page sets on the same sky
   --------------------------------------------------------------------------
   The ramp runs in the strip ABOVE the footer, where no copy sits. The footer
   panel itself is Adire Night from the first frame: parchment on night, 14.6:1,
   never in transit.
   ========================================================================== */

.dusk {
  height: clamp(7rem, 5rem + 8vw, 12rem);
  position: relative;
  overflow: hidden;
  --daylight: 0.62;
  animation: nightfall 1s linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 62%;
}
@keyframes nightfall {
  from { --daylight: 0.62; }
  to   { --daylight: 0; }
}
/* IntersectionObserver fallback for engines without scroll-driven animation */
.dusk[data-fallback] { animation: none; transition: --daylight 1600ms linear; }
.dusk[data-fallback][data-set="true"] { --daylight: 0; }

.dusk__city { position: absolute; inset: auto 0 -1px 0; width: 100%; min-width: 60rem; left: 50%; transform: translateX(-50%); }

.hearth {
  background: var(--adire-night);
  color: var(--parchment);
  padding-block: clamp(3rem, 2rem + 5vw, 5rem);
}
.hearth a { color: color-mix(in oklab, var(--parchment), var(--cowrie-brass) 30%); }
.hearth__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 50rem) { .hearth__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.hearth h2 {
  font-size: var(--step-2);
  font-variation-settings: "opsz" 48, "WONK" 1;
  margin-bottom: 0.75rem;
}
.hearth p { color: color-mix(in oklab, var(--parchment), transparent 22%); font-size: var(--step--1); line-height: 1.7; }
.hearth__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 9;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--parchment), var(--cowrie-brass) 45%);
  margin-bottom: 1rem;
}
.hearth ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.hearth ul a { font-size: var(--step--1); text-decoration: none; }
.hearth ul a:hover { text-decoration: underline; }
.colophon {
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in oklab, var(--parchment), transparent 82%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-family: var(--chrome);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: color-mix(in oklab, var(--parchment), transparent 45%);
}

/* ============================================================================
   12. THE ARCH-WIPE — one transition, every page-to-page move
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: arch-close var(--arch-out) var(--ease-door) both;
}
::view-transition-new(root) {
  animation: arch-open var(--arch-in) var(--ease-door) both;
}

@keyframes arch-open {
  from { clip-path: ellipse(62% 0% at 50% 100%); opacity: 0.55; }
  to   { clip-path: ellipse(170% 175% at 50% 100%); opacity: 1; }
}
@keyframes arch-close {
  from { clip-path: ellipse(170% 175% at 50% 100%); opacity: 1; }
  to   { clip-path: ellipse(72% 4% at 50% 100%); opacity: 0.4; }
}

/* ============================================================================
   13. REDUCED MOTION — content is never gated by motion
   --------------------------------------------------------------------------
   Day cycle freezes at its resting state. Arch-wipe becomes an instant cut.
   Drum stagger becomes a plain, immediate fade.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero { animation: none; --daylight: 0.94; }
  .dusk { animation: none; transition: none; --daylight: 0.18; }

  .beat { animation: none; opacity: 1; transform: none; }

  .room, .room > div, .courtyards { transition: none; }
  .seat[data-open="true"] .room > div { clip-path: none; }
  .room > div { clip-path: none; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Print: give them a clean roster to carry into a meeting. */
@media print {
  .gate, .dusk, .hero__city, .seat__toggle, .door, .lintel { display: none !important; }
  body { background: #fff; color: #000; }
  .hearth { background: #fff; color: #000; }
  .room { grid-template-rows: 1fr !important; }
  .room > div { clip-path: none !important; }
}