/* =========================================================================
   Dr. Mistoria Brown — Convergence atlas
   GOYE Warm Scholar tokens. Paper ground, Midnight at the convergence and
   the close. One accent hue (Plum), two lightnesses keyed to the ground.
   Gold is a brand-specified highlight material, used only on Midnight and
   only inside the Intersection Map.
   ========================================================================= */

:root {
  /* brand */
  --paper:    #FBF6EF;
  --midnight: #07002E;
  --plum:     #640171;
  --crimson:  #C6273A;
  --ember:    #DA552F;
  --gold:     #EFA130;
  --stone:    #625B6E;
  --sand:     #E8DCC8;

  /* light-ground accent, and its dark-ground sibling (same hue, lighter) */
  --plum-lit: #D9A6E4;

  /* engine tokens */
  --sc-canvas:     var(--paper);
  --sc-surface:    #FFFFFF;
  --sc-ink:        var(--midnight);
  --sc-ink-soft:   var(--stone);
  --sc-accent:     var(--plum);
  --sc-accent-ink: var(--paper);

  --sc-font-display: "Merriweather", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Lato", "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono:    "Lato", Arial, sans-serif;

  --sc-measure: 60ch;
  --sc-maxw:    78rem;
  --sc-shadow-color: 268 60% 8%;

  --bar-h: 4.25rem;
}

/* Merriweather is a text face. At display sizes it needs tighter tracking and
   a little more leading than the engine's sans defaults assume. */
.sc-display {
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.021em;
}
.sc-display--xl { font-size: clamp(2.1rem, 1.25rem + 2.7vw, 3.1rem); }
.sc-display--lg { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem); letter-spacing: -0.018em; }
.sc-display--md { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem); letter-spacing: -0.012em; }

body {
  font-family: var(--sc-font-text);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.62;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--plum); color: var(--paper); }

/* A label used sparingly: three on the whole page, never above every heading. */
.label {
  font-family: var(--sc-font-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0;
}

.lede { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); line-height: 1.5; max-width: 34ch; margin: 0; }
.prose { max-width: 58ch; color: var(--stone); margin: 0; }
.prose + .prose { margin-top: var(--sc-4); }
.prose strong { color: var(--midnight); font-weight: 700; }

.rule { height: 1px; border: 0; background: color-mix(in oklab, var(--midnight) 14%, transparent); margin: 0; }

/* ----------------------------------------------------------- dark ground --
   Restating `color` is required: `color` inherits as a computed value, so
   redefining --sc-ink alone leaves the text at the body's ink. */
.on-dark {
  --sc-canvas: var(--midnight);
  --sc-ink: #F4EFE6;
  --sc-ink-soft: #A79DB5;
  --sc-accent: var(--plum-lit);
  --sc-accent-ink: var(--midnight);
  background: var(--midnight);
  color: #F4EFE6;
}
.on-dark .prose { color: #A79DB5; }
.on-dark .prose strong { color: #F4EFE6; }
.on-dark .label { color: var(--gold); }
.on-dark .rule { background: color-mix(in oklab, #F4EFE6 20%, transparent); }

/* ------------------------------------------------------------------ bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sc-5);
  padding-inline: clamp(1rem, 4vw, 2.75rem);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--midnight) 10%, transparent);
  transition: background 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
.bar--dark {
  background: color-mix(in oklab, var(--midnight) 88%, transparent);
  border-bottom-color: color-mix(in oklab, #F4EFE6 16%, transparent);
  color: #F4EFE6;
}
.bar__mark {
  font-family: var(--sc-font-display);
  font-weight: 900; font-size: 1.0625rem; letter-spacing: -0.015em;
  text-decoration: none; color: inherit; white-space: nowrap;
}
.bar__mark span { color: var(--plum); }
.bar--dark .bar__mark span { color: var(--plum-lit); }
.bar__spacer { flex: 1; }

/* At 390px the wordmark, the readout and the CTA together overrun the bar and
   clip the button. The honorific is the part that can go. */
@media (max-width: 480px) {
  .bar { gap: var(--sc-3); padding-inline: 0.85rem; }
  .bar__mark { font-size: 0.95rem; }
  .bar__mark span { display: none; }
}

/* compact compass carried in the bar on narrow screens */
.bar__dots { display: flex; gap: 6px; align-items: center; }
.bar__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in oklab, currentColor 26%, transparent);
  transition: background 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out);
}
.bar__dot[data-on="1"] { background: var(--plum); transform: scale(1.25); }
.bar--dark .bar__dot[data-on="1"] { background: var(--gold); }

/* ---------------------------------------------------------------- button -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; white-space: nowrap;
  font-family: var(--sc-font-text); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.005em;
  padding: 0.72rem 1.25rem;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out),
              border-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--plum); color: var(--paper); }
.btn--primary:hover { background: #4E0159; }
.btn--ghost { border-color: color-mix(in oklab, var(--midnight) 26%, transparent); color: var(--midnight); }
.btn--ghost:hover { border-color: var(--midnight); background: color-mix(in oklab, var(--midnight) 5%, transparent); }
.on-dark .btn--primary, .bar--dark .btn--primary { background: var(--paper); color: var(--midnight); }
.on-dark .btn--primary:hover, .bar--dark .btn--primary:hover { background: #FFFFFF; }
.on-dark .btn--ghost { border-color: color-mix(in oklab, #F4EFE6 36%, transparent); color: #F4EFE6; }
.on-dark .btn--ghost:hover { border-color: #F4EFE6; background: color-mix(in oklab, #F4EFE6 8%, transparent); }
.btn--sm { padding: 0.5rem 0.95rem; font-size: 0.875rem; }

/* ================================================================= 1 HERO ==
   Four planes. Back city, mid wordmarks, the portrait plate, a foreground
   page edge. The plate overlaps the headline on desktop: occlusion is what
   makes the depth read, not the travel on its own. */
/* `on-dark` paints the section Midnight; the stage covers it, but 100svh can
   resolve a hair short of the viewport, and a Midnight seam under a Paper
   fade reads as a bug. Paper here makes any seam match the edge. */
.hero { position: relative; background: var(--paper); }
.hero__stage { position: relative; background: var(--midnight); }
.hero__plane { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

.hero__sky {
  background:
    radial-gradient(120% 90% at 72% 18%, #5A0D6B 0%, #2A0442 42%, var(--midnight) 78%);
}
.hero__city { display: block; width: 100%; height: 100%; }
.hero__city svg { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 140%; max-width: none; height: auto; }

.hero__inner {
  position: relative; z-index: 6;
  height: 100%;
  max-width: var(--sc-maxw); margin-inline: auto;
  padding: calc(var(--bar-h) + 1.5rem) var(--sc-gutter) 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center; gap: clamp(1rem, 4vw, 3.5rem);
}

/* A short viewport is the hero's real constraint, not a narrow one: the
   headline, the subtext and both buttons have to clear the fold together. */
@media (min-width: 901px) and (max-height: 660px) {
  .hero__inner { padding-block: calc(var(--bar-h) + 0.75rem) 1.5rem; }
  .hero__h1 { font-size: clamp(1.9rem, 1rem + 2.4vw, 2.7rem); }
  .hero__sub { margin-top: var(--sc-4); font-size: 1rem; }
  .hero__acts { margin-top: var(--sc-5); }
  .hero__plate { width: min(100%, 16rem); }
  .hero__cap { margin-top: 1rem; font-size: 0.72rem; }
}
/* No `ch` cap here: `ch` resolves against this element's own Lato metrics,
   not the display face inside it, which silently crushed the column to 313px
   and wrapped the headline to four lines. The grid column is the measure. */
.hero__copy { position: relative; z-index: 10; }
.hero__h1 { color: #FFFFFF; }
.hero__h1 em { font-style: normal; color: var(--gold); }
.hero__sub { margin-top: var(--sc-5); color: #CFC4DA; font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem); max-width: 40ch; line-height: 1.55; }
.hero__acts { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The subject plane: a circular portrait on a solid Gold disc, sitting in
   FRONT of every city plane rather than behind them, so she reads as part of
   the design instead of a photograph parked in the skyline. Depth still comes
   from the four city planes travelling at different rates behind her. */
.hero__plate { position: relative; z-index: 12; justify-self: center; width: min(100%, 23rem); }
/* Gold IS the background now: the photograph's foliage was cut away, so she
   stands on the brand colour rather than in a park. `contain` plus a bottom
   anchor keeps her whole and leaves headroom above her instead of cropping
   the top of her hair. */
.hero__disc {
  position: relative;
  width: 100%; aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gold);
  box-shadow: 0 0 0 7px var(--paper), 0 26px 54px -20px hsl(268 70% 4% / 0.72);
}
/* Faint concentric rings in the gold, echoing the circles of the Intersection
   Map so the hero and the peak read as the same system. */
.hero__disc-art {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 56%,
              transparent 0 19px,
              color-mix(in oklab, var(--midnight) 8%, transparent) 19px 20px);
  opacity: 0.55; pointer-events: none;
}

/* The matte was cut from pixels, not from a studio key, so its edge is
   slightly ragged. Three stacked drop-shadows trace the alpha silhouette and
   bury that edge under a keyline: a tight Paper outline, a Crimson rim, then
   a soft Plum halo. Repeating the first shadow compounds its alpha into a
   solid line rather than a blur. */
.hero__disc img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  /* the outlined asset carries 30px of transparent padding for the keylines,
     so it needs a little more scale than the bare cutout did to fill the disc */
  transform: scale(1.22); transform-origin: 50% 100%;
  /* The White 1pt and Plum 3pt keylines are baked into the asset by
     lab/outline.mjs. Doing it at runtime takes one zero-blur drop-shadow per
     compass point per line, and sixteen chained filters made Chrome fail to
     rasterise the element outright. Only the Ember cast shadow stays here,
     because one blurred shadow is cheap and wants to read as a shadow. */
  filter: drop-shadow(4px 6px 8px color-mix(in oklab, var(--ember) 88%, transparent));
}
/* The caption now sits on the dark ground, so it is set in light type. */
/* One role per line rather than a run-on sentence. A centred block under a
   circle has no good ragged edge, so the line breaks are authored instead of
   left to the wrap, and the block is held to the width of the disc so it
   reads as belonging to it. */
.hero__cap {
  margin: 1.9rem auto 0;
  width: min(100%, 20rem);
  text-align: center;
  font-size: 0.8rem; line-height: 1.25; color: #C6BAD2;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 10px hsl(268 80% 4% / 0.9);
}
.hero__cap span { display: block; }
.hero__cap span + span { margin-top: 0.32rem; }
/* a short centred rule, not a full-width border: the caption is a stack, and
   a rule as wide as the block makes it read as a table header */
.hero__cap span:first-of-type { margin-top: 1.1rem; position: relative; }
.hero__cap span:first-of-type::before {
  content: ""; position: absolute; left: 50%; top: -0.6rem;
  width: 2.4rem; height: 1px; translate: -50% 0;
  background: color-mix(in oklab, var(--gold) 70%, transparent);
}
.hero__cap b {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--sc-font-display); font-weight: 700;
  color: #FFFFFF; font-size: 1.05rem; letter-spacing: -0.005em;
  text-shadow: 0 1px 12px hsl(268 80% 4% / 0.95);
}

/* foreground plane: near towers that overtake the plate as the hero travels.
   Weighted right, so the headline column stays clear. */
.hero__fore { z-index: 7; }
.hero__fore svg { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 128%; max-width: none; height: auto; }

/* the Paper the rest of the site is printed on, resolving the hero into it */
.hero__edge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 11vh;
  background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--paper) 50%, transparent) 52%, var(--paper) 97%);
  z-index: 9; pointer-events: none;
}

@media (max-width: 900px) {
  /* Art-directed, not shrunk: type sits above the subject, the plate loses
     its rotation and gains width, and nothing passes behind anything. */
  .hero__inner {
    grid-template-columns: 1fr;
    align-content: center;
    gap: var(--sc-6);
    padding-top: calc(var(--bar-h) + 1rem);
  }
  .hero__copy { max-width: none; }
  .hero__plate { justify-self: center; width: min(62vw, 15rem); order: 2; }
  .hero__cap { margin-top: 1.1rem; font-size: 0.74rem; }
  .hero__cap b { font-size: 0.92rem; }
  /* the Paper fade has to stay clear of the caption: light type over the
     lightening gradient loses its contrast exactly where the name sits */
  .hero__edge { height: 8vh; }
}

/* ================================================================ 2 PROOF ==
   The quietest act on the page, and the silence the peak arrives from. */
/* Directly after a pinned act. The hero stage needs a full viewport to slide
   off, so normal section padding on top of that buys a second blank screen.
   The top padding is cut right down and the first reveal starts immediately. */
.proof { padding-block: clamp(1.25rem, 2.5vw, 2.25rem) clamp(3.5rem, 6vw, 5.5rem); }

/* Same rule for every flow section that follows a pinned stage. */
.after-pin { padding-block-start: clamp(1.25rem, 2.5vw, 2.5rem); }
.proof__grid {
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: var(--sc-7);
}
.stat__n {
  font-family: var(--sc-font-display); font-weight: 900;
  font-size: clamp(2.6rem, 1.9rem + 2.6vw, 4rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--plum);
  display: block;
}
.stat__n sup { font-size: 0.42em; vertical-align: super; font-weight: 700; margin-left: 0.04em; }

/* Odometer. Each digit is a reel clipped to one cell high; the reel rolls up
   and stops on its final digit. `1em` cells keep the slot height locked to
   the type size so nothing reflows while it runs. */
.odo { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.odo__slot { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odo__reel {
  display: flex; flex-direction: column;
  transform: translateY(0);
  transition: transform 1500ms cubic-bezier(0.17, 0.84, 0.28, 1);
  will-change: transform;
}
.odo__d { display: block; height: 1em; line-height: 1; }
.odo__sep { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .odo__reel { transition: none; }
}
.stat p { margin: var(--sc-3) 0 0; color: var(--stone); font-size: 0.97rem; line-height: 1.5; max-width: 26ch; }

.names { margin-top: clamp(3rem, 6vw, 4.5rem); }
.names__list {
  list-style: none; margin: var(--sc-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  font-size: 0.95rem; color: var(--midnight);
}
.names__list li { display: flex; align-items: center; gap: 1.75rem; }
.names__list li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sand); }
.names__list li:last-child::after { display: none; }

/* ============================================================ 3 THE TURN ==
   The Intersection Map. Peak act, largest span, Midnight ground.
   The four circles are plain elements; mix-blend-mode does the overlap
   lighting for free, which is also what makes it legible on a phone. */
.map__stage { display: grid; place-items: center; padding: calc(var(--bar-h) + 0.5rem) var(--sc-gutter) 1.25rem; }
.map__inner { width: 100%; max-width: 64rem; display: grid; gap: clamp(0.5rem, 1.4vh, 1.25rem); justify-items: center; }

.map__head { text-align: center; max-width: 34ch; }
.map__head h2 { color: #FFFFFF; }
.map__hint {
  margin: var(--sc-3) 0 0; font-size: 0.9rem; color: #A79DB5;
  min-height: 1.5em;
}

.map__field {
  position: relative;
  width: min(74vh, 42rem, 100%);
  aspect-ratio: 1 / 1;
  isolation: isolate;
  touch-action: manipulation;
}

/* Geometry, all in field percentages. Circle radius is 22%. The centres sit
   at distance d from the middle, where d travels 34% to 20% as the act runs.
   At d = 20 adjacent circles overlap by a clean lens and all four cover the
   exact centre, which is the whole argument of the section. */
.map__circle {
  position: absolute;
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle at 50% 50%,
              color-mix(in oklab, var(--role) 62%, transparent) 0%,
              color-mix(in oklab, var(--role) 44%, transparent) 70%,
              color-mix(in oklab, var(--role) 30%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--role) 90%, transparent);
  mix-blend-mode: screen;
}
.map__circle[data-pos="n"] { left: 50%; top:  calc(16% + var(--conv, 0) * 14%); --role: #8A2FA0; }
.map__circle[data-pos="e"] { top: 50%;  left: calc(84% - var(--conv, 0) * 14%); --role: #B2365C; }
.map__circle[data-pos="s"] { left: 50%; top:  calc(84% - var(--conv, 0) * 14%); --role: #A8442C; }
.map__circle[data-pos="w"] { top: 50%;  left: calc(16% + var(--conv, 0) * 14%); --role: #5B3BA8; }

/* Labels ride above the blended layer so they stay crisp, and they sit in the
   outer third of their own circle, clear of every overlap. */
.map__role {
  position: absolute; z-index: 3; margin: 0;
  translate: -50% -50%;
  width: 9em; text-align: center;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(0.7rem, 0.52rem + 0.55vw, 0.92rem);
  line-height: 1.28; letter-spacing: -0.004em;
  color: #FFFFFF;
  text-shadow: 0 1px 10px hsl(268 80% 4% / 0.95);
  pointer-events: none;
}
.map__role[data-pos="n"] { left: 50%; top:  calc(3%  + var(--conv, 0) * 14%); }
.map__role[data-pos="e"] { top: 50%;  left: calc(97% - var(--conv, 0) * 14%); }
.map__role[data-pos="s"] { left: 50%; top:  calc(97% - var(--conv, 0) * 14%); }
.map__role[data-pos="w"] { top: 50%;  left: calc(3%  + var(--conv, 0) * 14%); }

/* the pointer light */
.map__light {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(10rem 10rem at var(--lx, -999px) var(--ly, -999px),
              hsl(38 85% 60% / 0.5) 0%, hsl(38 85% 60% / 0.16) 38%, transparent 70%);
  opacity: 0; transition: opacity 260ms var(--sc-ease-out);
}
.map__field[data-lit="1"] .map__light { opacity: 1; }

/* overlap hit targets, real buttons so they are tappable and focusable */
.map__lens {
  position: absolute; z-index: 6;
  width: 19%; aspect-ratio: 1;
  translate: -50% -50%;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 420ms var(--sc-ease-out);
}
.map__field[data-ready="1"] .map__lens { opacity: 1; pointer-events: auto; }
.map__lens[data-at="ne"] { left: 62%; top: 38%; }
.map__lens[data-at="se"] { left: 62%; top: 62%; }
.map__lens[data-at="sw"] { left: 38%; top: 62%; }
.map__lens[data-at="nw"] { left: 38%; top: 38%; }

.map__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in oklab, var(--gold) 55%, transparent);
  box-shadow: 0 0 0 0 hsl(38 85% 60% / 0.5);
  transition: transform 260ms var(--sc-ease-out), background-color 260ms var(--sc-ease-out), box-shadow 420ms var(--sc-ease-out);
}
.map__lens:is(:hover, :focus-visible) .map__dot { transform: scale(1.5); }
.map__lens[aria-pressed="true"] .map__dot {
  background: var(--gold); transform: scale(1.1);
  box-shadow: 0 0 0 10px hsl(38 85% 60% / 0.12);
}
.map__lens:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* The labels that arrive as overlaps are found. They are anchored to the four
   corners of the field, not to their lens: the circle diamond leaves those
   corners empty at every convergence value, so a label can never sit on a lit
   circle or run into its neighbour. Each corner gets the same width and the
   same inset, which is what makes the four read as balanced. */
.map__tags { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.map__tag {
  position: absolute;
  width: 11.5rem;
  font-size: 0.78rem; line-height: 1.38; color: var(--gold);
  font-weight: 700; letter-spacing: 0.01em;
  margin: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity 460ms var(--sc-ease-out), transform 460ms var(--sc-ease-out);
  text-shadow: 0 1px 8px hsl(268 80% 4% / 0.95);
}
.map__tag b { display: block; font-weight: 400; color: #CFC4DA; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 2px; }
.map__tag[data-found="1"] { opacity: 1; transform: translateY(0); }

/* All four are TOP-anchored, including the lower pair, so the labels start on
   two shared baselines instead of drifting with their own line counts. That
   shared start is what makes the set read as balanced rather than scattered. */
.map__tag[data-side="nw"] { left: -7%;  top: 0;   text-align: left; }
.map__tag[data-side="ne"] { right: -7%; top: 0;   text-align: right; }
.map__tag[data-side="sw"] { left: -7%;  top: 84%; text-align: left; }
.map__tag[data-side="se"] { right: -7%; top: 84%; text-align: right; }

/* the center: a thin ring that fills a quarter at a time, then resolves */
.map__core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  z-index: 8;
  width: 23%; aspect-ratio: 1;
  display: grid; place-items: center;
  pointer-events: none;
  border-radius: 50%;
}
/* The centre is the payoff, and Gold is only legible on Midnight, so the core
   punches a solid Midnight disc through the lit overlap rather than floating
   gold type on the brightest part of the field. */
.map__core::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--midnight) 58%, color-mix(in oklab, var(--midnight) 72%, transparent) 100%);
  box-shadow: 0 0 34px 10px hsl(268 80% 4% / 0.75);
  opacity: 0; transform: scale(0.82);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
.map__field[data-complete="1"] .map__core::before { opacity: 1; transform: scale(1); }
.map__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map__ring circle { fill: none; stroke-width: 1.5; }
.map__ring .track { stroke: color-mix(in oklab, #F4EFE6 22%, transparent); stroke-dasharray: 3 5; }
.map__ring .arc {
  stroke: var(--gold); stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: calc(283 - 283 * var(--found, 0) / 4);
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 620ms var(--sc-ease-out);
}
.map__core span {
  position: relative; z-index: 2;
  font-family: var(--sc-font-display); font-weight: 900;
  font-size: clamp(1.05rem, 0.75rem + 1.15vw, 1.75rem);
  letter-spacing: 0.01em; color: var(--gold);
  opacity: 0; transform: scale(0.95);
  transition: opacity 620ms var(--sc-ease-out) 180ms, transform 620ms var(--sc-ease-out) 180ms;
  text-shadow: 0 0 22px hsl(38 85% 55% / 0.55);
}
.map__field[data-complete="1"] .map__core span { opacity: 1; transform: scale(1); }

/* gold spokes, drawn when the map completes */
.map__spokes { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
.map__spokes line {
  stroke: var(--gold); stroke-width: 0.7; opacity: 0.8;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--sc-ease-out);
}
.map__field[data-complete="1"] .map__spokes line { stroke-dashoffset: 0; }
.map__spokes line:nth-child(2) { transition-delay: 110ms; }
.map__spokes line:nth-child(3) { transition-delay: 220ms; }
.map__spokes line:nth-child(4) { transition-delay: 330ms; }

/* On a phone the field fills the gutters, so a tag set beside its lens would
   be clipped by the stage. The hint line carries each find instead. */
@media (max-width: 760px) {
  .map__tag { display: none; }
  .map__field { width: min(100%, 22rem); }
  .map__hint { min-height: 3.2em; }
  /* the east and west labels reach the field edge at this size, so pull them
     in and tighten the measure rather than letting them clip */
  .map__role { width: 7.4em; font-size: 0.64rem; }
  .map__role[data-pos="e"] { left: calc(92% - var(--conv, 0) * 14%); }
  .map__role[data-pos="w"] { left: calc(8%  + var(--conv, 0) * 14%); }
}

/* ============================================================ 4 SUBSTANCE ==
   A register, not a grid of cards. Hairlines and type do the work. */
.work__head { display: grid; gap: var(--sc-4); max-width: 46ch; }
.files { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent); }
.file {
  display: grid;
  grid-template-columns: minmax(9rem, 0.9fr) minmax(0, 2fr) minmax(7rem, 0.55fr);
  gap: clamp(0.75rem, 2.5vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(0.5rem, 1.5vw, 1rem);
  border-bottom: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent);
  transition: background-color 150ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .file:hover { background: color-mix(in oklab, var(--sand) 46%, transparent); } }
.file__name { font-family: var(--sc-font-display); font-weight: 900; font-size: 1.22rem; letter-spacing: -0.012em; margin: 0; color: var(--midnight); }
.file__role { display: block; margin-top: 0.3rem; font-family: var(--sc-font-text); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--stone); text-transform: none; }
.file__what { margin: 0; color: var(--stone); font-size: 0.97rem; line-height: 1.55; }
.file__status { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum); }
@media (max-width: 760px) {
  .file { grid-template-columns: 1fr; gap: 0.55rem; }
  .file__status { order: 3; }
}

/* the films: four posters, distinct art, real <video> on demand */
.films { margin-top: clamp(3.5rem, 7vw, 6rem); }
.films__grid {
  margin-top: var(--sc-6);
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.film { margin: 0; }
.film__frame { position: relative; display: block; width: 100%; border: 0; padding: 0; background: var(--midnight); border-radius: 4px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; }
.film__frame img, .film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__frame video { position: absolute; inset: 0; }
.film__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  display: grid; place-items: center;
  transition: transform 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.film__play svg { width: 1rem; height: 1rem; fill: var(--midnight); margin-left: 2px; }
.film__frame:is(:hover, :focus-visible) .film__play { transform: translate(-50%, -50%) scale(1.09); background: #FFFFFF; }
.film__frame[data-playing="1"] .film__play { display: none; }
.film figcaption { margin-top: 0.7rem; }
.film__t { font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; margin: 0; color: var(--midnight); }
.film__m { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--stone); line-height: 1.5; }

/* ------------------------------------------ Before We Automate, coming --
   A Midnight plate set into the Paper section. Its own brand (Gold kicker,
   white display type) sits inside this page's palette without fighting it,
   because both are drawn from the same Warm Scholar tokens. */
.bwa {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--midnight);
  color: #F4EFE6;
  border-radius: 6px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  position: relative; overflow: hidden;
}
.bwa::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 86% 8%, color-mix(in oklab, var(--plum) 55%, transparent) 0%, transparent 62%);
}
.bwa > * { position: relative; }

.bwa__kicker {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.bwa__logo { display: block; width: min(100%, 26rem); height: auto; }
.bwa__tag {
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem); line-height: 1.4;
  color: #CFC4DA; max-width: 34ch;
}

.bwa__grid {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}
@media (max-width: 760px) { .bwa__grid { grid-template-columns: 1fr; } }

.bwa__date {
  margin: 0 0 var(--sc-5);
  display: inline-flex; flex-direction: column; gap: 0.25rem;
  padding: 0.8rem 1.3rem; border-radius: 5px;
  background: var(--plum);
}
.bwa__date span { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: #E2D2E8; }
.bwa__date b { font-family: var(--sc-font-display); font-weight: 900; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem); color: #FFFFFF; letter-spacing: -0.01em; }

.bwa__desc { margin: 0; color: #BBAFC8; font-size: 0.98rem; line-height: 1.6; max-width: 54ch; }
.bwa__desc strong { color: #F4EFE6; font-weight: 700; }
.bwa__host { margin: var(--sc-4) 0 0; font-size: 0.86rem; color: #A79DB5; }

.bwa__listen-label { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); }
.bwa__platforms {
  list-style: none; margin: var(--sc-4) 0 0; padding: 0;
  display: grid; gap: 0;
}
.bwa__platforms li {
  padding: 0.6rem 0; font-size: 0.95rem; color: #F4EFE6;
  border-bottom: 1px solid color-mix(in oklab, #F4EFE6 16%, transparent);
}
.bwa__platforms li:first-child { border-top: 1px solid color-mix(in oklab, #F4EFE6 16%, transparent); }
.bwa__follow { margin: var(--sc-5) 0 0; font-size: 0.86rem; line-height: 1.55; color: #A79DB5; }
.bwa__follow b { color: var(--gold); font-weight: 700; }

/* producer credit: the Redline lockup set inline at cap height */
.bwa__by {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid color-mix(in oklab, #F4EFE6 16%, transparent);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.8rem; color: #A79DB5; line-height: 1.5;
}
.bwa__by img { width: 7.5rem; height: auto; display: block; }

/* ================================================================ 5 RANGE ==
   Lateral travel reads as breadth. The rail carries its own heading and a
   closing note, which is also how it earns enough overflow to travel. */
.rail__stage { display: flex; align-items: center; overflow: hidden; }
.rail {
  display: flex; align-items: stretch; gap: clamp(1rem, 2.4vw, 2rem);
  padding-inline: var(--sc-gutter);
  will-change: transform;
}
.rail__lead, .rail__end { flex: 0 0 auto; width: min(80vw, 24rem); display: grid; align-content: center; gap: var(--sc-4); }
.room { flex: 0 0 auto; width: min(80vw, 28rem); display: grid; align-content: center; gap: 1rem; }
.room img { display: block; width: 100%; height: clamp(12rem, 31vh, 20rem); object-fit: cover; border-radius: 4px; box-shadow: var(--sc-e2); }
.room__n { font-family: var(--sc-font-display); font-weight: 900; font-size: 1.25rem; margin: 0; letter-spacing: -0.012em; }
.room__d { margin: 0; color: var(--stone); font-size: 0.93rem; line-height: 1.5; max-width: 32ch; }
.room__pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.6rem; align-items: start; }
.room__pair img:last-child { height: clamp(14rem, 37vh, 24rem); }

/* On a phone two neighbouring items sit side by side for most of their life
   and their cropped captions read as one run-on paragraph. Wider items mean
   one room dominates the frame at a time. */
@media (max-width: 760px) {
  .room { width: 86vw; }
  .rail__lead, .rail__end { width: 86vw; }
  .room__d { max-width: none; }
}

/* arrival stagger, so the rail reads as a drawer being pulled rather than a
   slideshow. First item exempt: a pan act needs its opening content present. */
@media (prefers-reduced-motion: no-preference) {
  .rail > * + * {
    opacity: clamp(0.55, calc(0.55 + 0.6 * (var(--sc-p, 1) * 8 - var(--i, 0) + 0.7)), 1);
  }
}

/* =============================================================== 6 VOICES == */
.voices__stage { display: grid; place-items: center; padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 3rem; background: var(--paper); }
.voices__inner { width: 100%; max-width: 54rem; text-align: center; position: relative; }
.voices__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.voices__slot { position: relative; min-height: clamp(13rem, 30vh, 17rem); }
.quote {
  position: absolute; inset: 0;
  display: grid; align-content: center; gap: var(--sc-5);
  margin: 0;
}
.quote p {
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.3rem);
  line-height: 1.3; letter-spacing: -0.014em;
  color: var(--midnight); margin: 0;
  text-wrap: balance;
}
.quote figcaption { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }

/* ============================================================ 7 FOUNDATION == */
.faith__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: start;
}
@media (max-width: 860px) { .faith__grid { grid-template-columns: 1fr; } }
.faith__fig { margin: 0; }
.faith__fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.faith__fig figcaption { margin-top: 0.6rem; font-size: 0.8rem; color: var(--stone); }
.pull {
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: clamp(1.25rem, 3vw, 2rem) 0 0;
  border-top: 2px solid var(--ember);
}
.pull p { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem); line-height: 1.32; margin: 0; letter-spacing: -0.012em; color: var(--midnight); max-width: 24ch; }
.pull cite { display: block; margin-top: 0.65rem; font-style: normal; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.roles { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 0; }
.roles li { padding: 1.05rem 0; border-top: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent); }
.roles li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent); }

/* Two items, side by side, each carrying its own rule. */
.roles--pair { grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem, 3vw, 2.75rem); }
.roles--pair li { border-bottom: 1px solid color-mix(in oklab, var(--midnight) 14%, transparent); }
@media (max-width: 620px) {
  .roles--pair { grid-template-columns: 1fr; }
  .roles--pair li + li { border-top: 0; }
}
.roles b { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.02rem; color: var(--midnight); }
.roles span { display: block; margin-top: 0.2rem; font-size: 0.92rem; color: var(--stone); line-height: 1.5; }

/* ============================================================ 8 COMMITMENT == */
.close__stage { position: relative; display: grid; align-content: center; overflow: hidden; padding: calc(var(--bar-h) + 2rem) var(--sc-gutter) 0; }
.close__city { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 150%; max-width: none; height: auto; opacity: 0.5; pointer-events: none; }
.close__inner { position: relative; z-index: 2; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .close__inner { grid-template-columns: 1fr; gap: var(--sc-6); } }
.close__h { color: #FFFFFF; }
.close__p { margin-top: var(--sc-5); color: #CFC4DA; max-width: 40ch; font-size: 1.05rem; line-height: 1.55; }
.close__acts { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.close__note { margin-top: var(--sc-5); font-size: 0.86rem; color: #A79DB5; }
.close__note a { color: var(--plum-lit); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.9rem; align-items: baseline;
  padding: 0.85rem 0; border-top: 1px solid color-mix(in oklab, #F4EFE6 18%, transparent);
  color: #CFC4DA; font-size: 0.95rem; line-height: 1.5;
}
.steps li:last-child { border-bottom: 1px solid color-mix(in oklab, #F4EFE6 18%, transparent); }
.steps li::before { content: counter(s); font-family: var(--sc-font-display); font-weight: 700; color: var(--gold); font-size: 0.85rem; }

.foot {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--sc-maxw); margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  padding: var(--sc-5) 0 var(--sc-6);
  border-top: 1px solid color-mix(in oklab, #F4EFE6 18%, transparent);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center;
  font-size: 0.82rem; color: #A79DB5;
}
.foot a { color: #CFC4DA; text-decoration: none; }
.foot a:hover { color: #FFFFFF; text-decoration: underline; }
.foot__legal { flex-basis: 100%; color: #8E85A0; }

/* ----------------------------------------------------- the role compass --
   The page chrome is a readout of convergence, not of position. */
.compass {
  position: fixed; z-index: 70;
  left: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  width: 5.5rem; height: 5.5rem;
  display: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.compass[data-show="1"] { opacity: 1; transform: translateY(0); }
@media (min-width: 1040px) and (hover: hover) and (pointer: fine) { .compass { display: block; } }
.compass__btn {
  position: absolute; width: 1.45rem; height: 1.45rem; translate: -50% -50%;
  border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center;
}
.compass__btn::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in oklab, var(--midnight) 24%, transparent);
  transition: background-color 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.compass__btn[data-on="1"]::after { background: var(--plum); transform: scale(1.45); }
.compass__btn:is(:hover, :focus-visible)::after { transform: scale(1.7); }
.compass__btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.compass__btn[data-at="n"] { left: 50%; top: 8%; }
.compass__btn[data-at="e"] { left: 92%; top: 50%; }
.compass__btn[data-at="s"] { left: 50%; top: 92%; }
.compass__btn[data-at="w"] { left: 8%; top: 50%; }
.compass__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.compass__svg circle.ring { fill: none; stroke: color-mix(in oklab, var(--midnight) 14%, transparent); stroke-width: 1; }
.compass__svg circle.core { fill: color-mix(in oklab, var(--midnight) 16%, transparent); transition: fill 420ms var(--sc-ease-out); }
.compass[data-complete="1"] .compass__svg circle.core { fill: var(--gold); }
.compass__lbl {
  position: absolute; left: 50%; top: 108%; translate: -50% 0;
  white-space: nowrap; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stone); opacity: 0; transition: opacity 200ms var(--sc-ease-out);
}
.compass:hover .compass__lbl { opacity: 1; }
/* over a Midnight section the compass inverts */
.compass--dark .compass__btn::after { background: color-mix(in oklab, #F4EFE6 30%, transparent); }
.compass--dark .compass__btn[data-on="1"]::after { background: var(--gold); }
.compass--dark .compass__svg circle.ring { stroke: color-mix(in oklab, #F4EFE6 22%, transparent); }
.compass--dark .compass__svg circle.core { fill: color-mix(in oklab, #F4EFE6 22%, transparent); }
.compass--dark .compass__lbl { color: #A79DB5; }

/* --------------------------------------------------------- skip + a11y -- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--plum); color: var(--paper); padding: 0.7rem 1.1rem; border-radius: 0 0 6px 0;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.on-dark a:focus-visible, .on-dark button:focus-visible { outline-color: var(--gold); }

/* ------------------------------------------------------- reduced motion --
   Fewer and gentler, not zero. The map arrives already complete so its
   meaning survives without the pointer. */
@media (prefers-reduced-motion: reduce) {
  .hero__plane { transform: none !important; }
  .map__lens { opacity: 1 !important; pointer-events: auto; }
  .map__tag[data-found="1"] { opacity: 1 !important; transform: none !important; }
  .map__spokes line { stroke-dashoffset: 0 !important; }
  .map__core span { opacity: 1 !important; transform: none !important; }
  .rail > * + * { opacity: 1 !important; }
  .quote { position: relative; inset: auto; opacity: 1 !important; margin-bottom: var(--sc-7); }
  .voices__slot { min-height: 0; }
}

/* the one case file that is a link out of the register */
.file--link .file__name a { color: var(--midnight); text-decoration: none; }
.file--link .file__name a:hover { color: var(--plum); text-decoration: underline; text-underline-offset: 0.18em; }
.file--link .file__name a::after { content: " \2197"; font-size: 0.8em; color: var(--plum); }

/* The one outbound link on her name, on the hero card. Underlined on a dark
   ground so it reads as a link without a colour change fighting the gold. */
.hero__namelink {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  padding-bottom: 1px;
  transition: border-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out);
}
.hero__namelink:hover { color: var(--gold); border-bottom-color: var(--gold); }