/* ============================================================
   Accord VI — Immersive
   Page-specific styles only. Never touches .sc-* engine classes
   or [data-sc-*] selectors — those are the mechanism.
   Grammar: chaptered editorial. Aesthetic: maximalist.
   ============================================================ */

@font-face {
  font-family: 'Sora';
  src: url('assets/fonts/Sora-Variable.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Third face, deliberately scoped to one word: "Accord" in the hero gets
   its own wordmark treatment rather than sharing the two-font system used
   everywhere else on the page — a signature/logotype exception, not a
   general third typeface. */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces-Variable.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sc-canvas:     #0e0f12;
  --sc-surface:    #17181d;
  --sc-ink:        #efece6;
  --sc-ink-soft:   #a9a6a0;
  --sc-accent:     #e0b455;
  --sc-accent-ink: #211a05;
  --sc-font-display: 'Sora', system-ui, sans-serif;
  --sc-font-text:    'Inter', system-ui, sans-serif;

  /* page-specific tokens, not engine tokens */
  --av-scroll-p: 0;

  /* Event-planner rank colourways, from the brand handoff's approved
     five-key system. k1 (Bone) and k4 (Brass) reuse the page's own default
     ink/canvas tokens by design — only k2, k3, k5 need their own pair. */
  --av-k2-ink: #f3d9d2; --av-k2-ground: #5c1119;   /* Red — Directors, Module Heads */
  --av-k3-ink: #7fe3d0; --av-k3-ground: #101820;   /* Mint — DG, SG */
  --av-k5-ink: #0e0f12; --av-k5-ground: #efece6;   /* Invert — President */
}

html { background: var(--sc-canvas); }
body { font-family: var(--sc-font-text); }

/* ---------- Skip link (keyboard/screen-reader users only; invisible otherwise) ---------- */
.av-skip-link {
  position: absolute;
  top: -100px;
  left: var(--sc-4);
  z-index: 99999;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-family: var(--sc-font-display);
  font-weight: 600;
  transition: top 0.15s ease;
}
.av-skip-link:focus { top: var(--sc-4); }

/* ---------- Folio nav (chaptered editorial's own chrome) ---------- */
/* Right-aligned, opposite every left-anchored copy block on the page, so it
   can never collide with a chapter's own content regardless of how tall
   that content runs. */
.av-folio {
  position: fixed;
  right: var(--sc-4);
  bottom: var(--sc-4);
  z-index: var(--sc-z-chrome);
  font-family: var(--sc-font-display);
  mix-blend-mode: difference;
}
.av-folio__link {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  text-decoration: none;
  padding: var(--sc-2);
  margin: calc(var(--sc-2) * -1);
}
.av-folio__link:focus-visible {
  outline: 1px solid var(--sc-ink);
  outline-offset: 2px;
}
.av-folio__num {
  font-size: var(--sc-t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sc-ink);
  letter-spacing: var(--sc-track-wide);
}
.av-folio__title {
  font-size: var(--sc-t-xs);
  color: var(--sc-ink);
  text-transform: uppercase;
  letter-spacing: var(--sc-track-wide);
  opacity: 0.72;
}

/* ---------- Custom cursor: brass ring + dot, fine-pointer only ---------- */
/* Hiding the native cursor is its own condition, gated on no-preference:
   without this, a mouse user with reduced-motion on got NO cursor at all —
   native hidden here, and the custom one never shows because app.js exits
   early for reduced motion and style.css hides .av-cursor outright below.
   A real accessibility regression, not just a missed decoration. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body, a, button { cursor: none; }
}
@media (hover: hover) and (pointer: fine) {
  .av-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
    opacity: 0;
    transition: opacity 200ms var(--sc-ease-out);
  }
  .av-cursor__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--sc-accent);
  }
  /* JS sets this element's full transform every frame (translate3d, with
     scale baked into the same string — see app.js) rather than splitting
     position (JS) and hover-scale (a CSS transition on a child) across two
     elements: a child transform fighting a parent transform that's
     rewritten on every animation frame never actually committed in
     testing, so scale is folded into the one JS-driven transform instead.
     Only opacity/border-color are left to a CSS transition here, since
     those don't share the transform property. */
  .av-cursor__ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    border: 1px solid var(--sc-accent);
    opacity: 0.7;
    transition: opacity 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
  }
  .av-cursor.is-active .av-cursor__ring {
    opacity: 1;
    border-color: var(--sc-ink);
  }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .av-cursor { display: none; }
}
/* Windows High Contrast Mode and similar: never fight a user's own forced
   cursor/colour settings with a decorative replacement. */
@media (forced-colors: active) {
  .av-cursor { display: none; }
  body, a, button { cursor: auto; }
}

/* ---------- Page-wide mouse light: a soft accent glow that follows the
   pointer everywhere, not just one section. Every chapter paints its own
   opaque background, so a plain overlay would either sit hidden behind
   each section's background or wash out over text — soft-light blends
   into whatever is underneath instead of covering it, the same trick
   .sc-grain already uses for a page-wide effect that never fights
   legibility. Fixed, full-viewport, fine-pointer only, off under reduced
   motion (the engine gates data-sc-spotlight itself; the media query is
   belt-and-suspenders for the background paint). ---------- */
@media (hover: hover) and (pointer: fine) {
  .av-glow {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: radial-gradient(13rem circle at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), color-mix(in oklab, var(--sc-accent) 55%, transparent), transparent 70%);
  }
}

/* ---------- Signature move: the mark draws itself across the whole page ---------- */
.av-mark {
  position: fixed;
  top: var(--sc-4);
  right: var(--sc-4);
  z-index: var(--sc-z-chrome);
  width: clamp(36px, 5vw, 52px);
  height: clamp(36px, 5vw, 52px);
  color: var(--sc-accent);
  pointer-events: none;
  transition: transform 420ms var(--sc-ease-out);
}
.av-mark[data-complete="true"] { transform: scale(1.12); }
.av-mark path, .av-mark line {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--av-scroll-p));
}
.av-mark circle {
  opacity: var(--av-scroll-p);
  transition: opacity 200ms linear;
}

/* ---------- Chapter 1: Countdown (title page, no media above the fold) ---------- */
.av-hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: var(--sc-section) var(--sc-gutter) var(--sc-9);
  background: var(--sc-canvas);
}
.av-hero__inner { max-width: 46rem; }
.av-hero__eyebrow {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0 0 var(--sc-4);
}
.av-hero__title {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-4xl);
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink);
  margin: 0;
  text-wrap: balance;
}
.av-hero__title em {
  /* Signature wordmark treatment: the one place on the page that steps
     outside the two-font system, on purpose — a serif built for exactly
     this kind of display moment, set apart from the bold grotesque
     headline around it. */
  font-family: 'Fraunces', var(--sc-font-display);
  font-style: normal;
  font-weight: 480;
  /* Fallback for engines that don't support text-stroke: a solid brass fill
     beats invisible (transparent-with-no-visible-stroke) text — @supports
     only swaps to the outlined treatment where the stroke will actually
     paint. */
  color: var(--sc-accent);
}
@supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black) {
  .av-hero__title em {
    color: transparent;
    -webkit-text-stroke: 2px var(--sc-accent);
  }
}
.av-hero__sub {
  font-size: var(--sc-t-lg);
  color: var(--sc-ink-soft);
  max-width: var(--sc-measure);
  margin: var(--sc-5) 0 0;
  text-wrap: pretty;
}
.av-countdown {
  display: flex;
  gap: var(--sc-4);
  margin-top: var(--sc-7);
}
.av-flip {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.av-flip__card {
  position: relative;
  /* Above .av-glow's z-index:4, same reasoning as .av-team-card: the
     page-wide mouse light shouldn't be able to repeat the contrast dip an
     audit caught there, over any other opaque text-bearing UI. */
  z-index: 5;
  width: clamp(3.4rem, 8vw, 4.2rem);
  height: clamp(3.4rem, 8vw, 4.2rem);
  perspective: 400px;
}
.av-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 550ms cubic-bezier(0.4, 0, 0.2, 1);
}
.av-flip__card.is-flipped .av-flip__inner {
  transform: rotateX(180deg);
}
.av-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-e1);
}
.av-flip__face--back { transform: rotateX(180deg); }
/* A crease line across the middle sells the "hinged card" read even at
   rest, before the first flip ever fires. */
.av-flip__card::after {
  content: "";
  position: absolute;
  left: var(--sc-3);
  right: var(--sc-3);
  top: 50%;
  height: 1px;
  background: color-mix(in oklab, var(--sc-canvas) 60%, transparent);
  z-index: 1;
  pointer-events: none;
}
.av-flip__num {
  display: block;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-2xl);
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.av-countdown__label {
  display: block;
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--sc-track-wide);
  margin-top: var(--sc-2);
}
@media (prefers-reduced-motion: reduce) {
  .av-flip__inner { transition: none; }
}
.av-hero__meta {
  margin-top: var(--sc-6);
  font-size: var(--sc-t-base);
  color: var(--sc-ink-soft);
}
.av-hero__meta strong { color: var(--sc-ink); font-weight: 600; }

/* ---------- Chapter 2: The Two Nights (the peak) ---------- */
/* No position/height here: this element becomes .sc-stage at mount time
   (sticky, 100vh), and setting either would silently override the engine's
   own mechanism at equal specificity. Only decorate, never position. */
.av-split-stage {
  overflow: clip;
  background: var(--sc-canvas);
}
.av-split-intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-align: center;
  padding: 0 var(--sc-gutter);
}
/* Sibling scrim (see index.html comment): a fixed, opaque backing sized to
   roughly cover the heading, positioned independently of the cued copy
   element so the verification harness's hide-and-measure pass still sees it.
   A fixed size beats measuring the text at runtime — simpler, and this
   heading's length is known and constant. */
.av-split-intro__scrim {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 42rem);
  height: min(60vh, 20rem);
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  border-radius: var(--sc-r-lg);
}
.av-split-intro h2 {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-3xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink);
  max-width: 26ch;
  text-wrap: balance;
  margin: 0;
}
.av-panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  overflow: hidden;
}
/* Initial clip-path matches the engine's own t=0 computation for each
   direction (inset(0 0 0 100%) for dir=right, inset(0 100% 0 0) for
   dir=left) so there is no jump when data-sc-reveal takes over the frame. */
.av-panel--left  { left: 0; clip-path: inset(0 0 0 100%); }
.av-panel--right { right: 0; clip-path: inset(0 100% 0 0); }
.av-panel img {
  position: absolute;
  inset: -5% -5%;
  width: 110%;
  height: 110%;
  /* The engine's global reset (img{max-width:100%}) otherwise clamps this
     back down to 100%, eating the overhang and leaving a bare gap of the
     stage's own background down one edge of the image — exactly the trap
     devices.md warns about for absolutely positioned "planes". */
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.av-panel--left  img { filter: saturate(1.05) contrast(1.05) sepia(0.14) hue-rotate(-8deg); }
.av-panel--right img { filter: saturate(0.95) contrast(1.08) hue-rotate(150deg) brightness(0.85); }
.av-panel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%);
}
.av-panel__label {
  position: absolute;
  left: var(--sc-gutter);
  right: var(--sc-gutter);
  bottom: var(--sc-7);
  color: #fff;
}
/* Both labels stay left-aligned: a typewriter reveal that grows from a
   fixed right edge would type its characters in reverse. */
.av-panel__name {
  display: inline-block;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-2xl);
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
  width: 0;
  border-right: 2px solid currentColor;
}
.av-panel__name.av-type-in {
  animation: av-type steps(var(--chars, 12), end) 1.1s forwards;
}
.av-panel__name.av-type-done { border-right: 0; border-left: 0; }
@keyframes av-type { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .av-panel__name { width: auto; border: 0; }
}
/* ---------- Chapter 3: Proof (pan rail + real stats) ---------- */
/* Not a [data-sc-stage] position/height override — background only, and
   only to guarantee this act's own ground is opaque so nothing from the
   previous pinned act can ever show through during the hand-off. */
.av-rail-stage { background: var(--sc-canvas); }
.av-rail-heading {
  max-width: 22rem;
  flex: 0 0 auto;
  /* Chapter 02's panels are still clearing the top of the viewport when this
     chapter's pinned stage first appears — nudging the heading down gives it
     breathing room instead of butting straight up against them. */
  margin-top: var(--sc-8);
}
.av-rail-heading h2 {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-3xl);
  color: var(--sc-ink);
}
.av-rail-heading p { color: var(--sc-ink-soft); }
/* A closing item, same idea as the heading: guarantees the rail keeps real
   overflow (and a resolution beat) even on very wide screens, where a
   90%-viewport clip.md warning covers exactly this — four cards capped by
   width can fit inside the viewport with zero travel left over. */
.av-rail-note { flex: 0 0 auto; max-width: 16rem; }
.av-rail-note p { color: var(--sc-ink-soft); }
.av-rail {
  display: flex;
  align-items: center;
  gap: var(--sc-6);
  height: 100%;
  padding-inline: var(--sc-gutter);
}
.av-frame {
  flex: 0 0 auto;
  width: clamp(16rem, 30vw, 24rem);
  aspect-ratio: 4 / 5;
  border-radius: var(--sc-r-lg);
  overflow: hidden;
  box-shadow: var(--sc-e2);
  position: relative;
}
/* The runtime spacer (app.js) that guarantees pan overflow on any monitor
   width is created fully in JS, inline styles only — see the comment there
   for why (a real, repro'd Chromium quirk: resizing an existing flex
   child's width, once already laid out inside a will-change:transform
   flex container, does not reliably invalidate the container's own
   scrollWidth; a freshly-created element with its width already set does). */
.av-frame img { width: 100%; height: 100%; object-fit: cover; }
.av-frame__tag {
  position: absolute;
  left: var(--sc-3);
  bottom: var(--sc-3);
  font-size: var(--sc-t-xs);
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 0.2rem 0.6rem;
  border-radius: var(--sc-r-pill);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
}
.av-credit {
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
}
.av-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sc-5);
  max-width: var(--sc-maxw);
}
.av-stat { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.av-stat__num {
  display: block;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-3xl);
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
}
.av-stat__label { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* ---------- Chapter 4: The Accord Team (teaser + expand) ---------- */
/* Not a [data-sc-stage] (this act is flow, not pinned), so position/overflow
   here are ordinary CSS, not a conflict with the engine's own mechanism. */
.av-team-section { position: relative; overflow: clip; }

/* Flash #1: an oversized, near-transparent copy of the Resonance mark,
   turning slowly behind the cards. Purely decorative (aria-hidden, no
   dash-draw scroll wiring like the fixed signature mark) — this one just
   spins, a quiet nod to the brand rather than a repeat of the real device. */
.av-team__mark {
  position: absolute;
  top: 50%;
  right: -6rem;
  width: clamp(22rem, 42vw, 36rem);
  height: clamp(22rem, 42vw, 36rem);
  color: var(--sc-accent);
  opacity: 0.08;
  transform: translateY(-50%);
  animation: av-team-mark-spin 90s linear infinite;
  pointer-events: none;
}
@keyframes av-team-mark-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .av-team__mark { animation: none; }
}

.av-team__title {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-3xl);
  color: var(--sc-ink);
  max-width: 26ch;
  text-wrap: balance;
  margin: var(--sc-3) 0;
}
/* Four equal-size cards. Positioned above the ghost mark (z-index 0). */
.av-team {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-4);
  margin-bottom: var(--sc-6);
}
.av-team-card {
  position: relative;
  /* Above .av-glow's z-index:4, so the page-wide mouse light never blends
     over card text — an impeccable audit caught a real contrast dip where
     it did (2.9:1 on the President card at the glow's brightest point). */
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--sc-5);
  border-radius: var(--sc-r-lg);
  padding: var(--sc-6) var(--sc-5);
  box-shadow: var(--sc-e1);
  will-change: transform;
  transition: box-shadow 220ms var(--sc-ease-out);
}
/* Border beam (ported from magicui's React/Framer Motion component as
   plain CSS): a short arc of light continuously circling each card's
   edge. content-box/border-box mask-composite carves out everything but
   a hairline ring, so it never covers the card's own text — a
   conic-gradient behind a mask, not a box-shadow or an extra element. */
@property --av-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.av-team-card::after,
.av-director-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  /* --av-beam-c1/c2 default to bone+brass but every card below overrides
     them to its OWN ink colour — on the President card (Invert: bone
     ground) the un-overridden bone beam was the same colour as the card
     itself and effectively invisible. Each card now beams in a colour
     that actually shows against its own background. */
  background: conic-gradient(from var(--av-beam-angle), transparent 0deg, transparent 270deg, var(--av-beam-c1, var(--sc-ink)) 315deg, var(--av-beam-c2, var(--sc-accent)) 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: av-beam-spin 7s linear infinite;
}
.av-team-card:nth-child(2)::after { animation-delay: -1.75s; }
.av-team-card:nth-child(3)::after { animation-delay: -3.5s; }
.av-team-card:nth-child(4)::after { animation-delay: -5.25s; }
/* Directors/Module Heads rank below the four cards above, and the beam
   should read that way: a shorter, dimmer, plain-gold arc (no ink-to-gold
   two-tone flourish) that spins slower — a lesser device for a lesser
   rank, not the same finish as Secretary General et al. */
.av-director-card::after {
  opacity: 0.55;
  background: conic-gradient(from var(--av-beam-angle), transparent 0deg, transparent 300deg, var(--sc-accent) 340deg, transparent 360deg);
  animation-duration: 9s;
}
.av-director-card:nth-child(3n+2)::after { animation-delay: -3s; }
.av-director-card:nth-child(3n)::after { animation-delay: -6s; }
@keyframes av-beam-spin {
  to { --av-beam-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .av-team-card::after, .av-director-card::after { animation: none; display: none; }
}
/* Every card gets the same lift on hover/focus, regardless of colourway —
   interactivity should read as a property of the card, not of the one
   that happens to have the most contrast against the page. */
.av-team-card:hover, .av-team-card:focus-within {
  box-shadow: var(--sc-e2), 0 0 0 1px color-mix(in oklab, var(--sc-accent) 45%, transparent);
}
.av-team-card__photo {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.16;
}
.av-team-card__role {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-lg);
}
/* President: the beam runs ink-dark to gold instead of the bone default
   (bone-on-bone was invisible against this card's own light ground), plus
   an exclusive extra — a shimmer sweeps across the card every few
   seconds, like light catching foil. The one rank that gets a second
   effect on top of the shared beam. */
.av-team-card--president {
  background: var(--av-k5-ground);
  color: var(--av-k5-ink);
  border: 2px solid var(--sc-accent);
  --av-beam-c1: var(--av-k5-ink);
  --av-beam-c2: var(--sc-accent);
  overflow: hidden;
}
.av-team-card--president::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  /* Wider, denser, more saturated than the first pass — the original band
     was too thin and too close to the card's own cream tone to read as a
     flash. */
  background: linear-gradient(100deg, transparent 38%, color-mix(in oklab, var(--sc-accent) 55%, transparent) 46%, color-mix(in oklab, var(--sc-accent) 90%, white) 50%, color-mix(in oklab, var(--sc-accent) 55%, transparent) 54%, transparent 62%);
  transform: translateX(-130%);
  /* Slower transit than the first pass (was 22% of 3.6s ≈ 0.8s — read as a
     quick blink, not light catching foil): now ~2.4s to cross the card,
     inside a longer 6.5s cycle. */
  animation: av-shimmer 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes av-shimmer {
  0% { transform: translateX(-130%); }
  37% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .av-team-card--president::before { animation: none; display: none; }
}
.av-team-card--vp {
  background: var(--sc-canvas);
  color: var(--sc-accent);
  border: 1px solid var(--sc-accent);
}
.av-team-card--dg, .av-team-card--sg { background: var(--av-k3-ground); color: var(--av-k3-ink); }

.av-team__group-label {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xs);
  text-transform: uppercase;
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
  margin-bottom: var(--sc-3);
}

/* Faint by design — a secondary action that shouldn't compete with the
   role label, matching every other "reveal more" affordance on this page. */
.av-team-card__info-toggle {
  align-self: flex-start;
  background: none;
  border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
  color: inherit;
  opacity: 0.6;
  font-family: var(--sc-font-body);
  font-size: var(--sc-t-xs);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.av-team-card__info-toggle:hover,
.av-team-card__info-toggle:focus-visible,
.av-team-card__info-toggle[aria-expanded="true"] {
  opacity: 1;
  border-color: currentColor;
}
.av-team-card__info {
  font-size: var(--sc-t-sm);
  opacity: 0.85;
  margin: 0;
}

.av-team__toggle-icon {
  width: 0.9em;
  height: 0.9em;
  transition: transform 220ms var(--sc-ease-out);
}
.av-team__toggle[aria-expanded="true"] .av-team__toggle-icon { transform: rotate(180deg); }

.av-team__toggle {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink);
  background: none;
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-pill);
  padding: var(--sc-3) var(--sc-5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sc-2);
  margin-top: var(--sc-4);
}
.av-team__toggle:hover,
.av-team__toggle[aria-expanded="true"] { border-color: var(--sc-accent); color: var(--sc-accent); }
.av-team__toggle:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }

.av-team__more {
  margin-top: var(--sc-6);
  display: flex;
  flex-direction: column;
  gap: var(--sc-6);
  max-width: none;
}
/* [hidden] and .av-team__more are equal specificity, so without this the
   author display:flex above silently wins over the browser's own
   [hidden]{display:none} and the toggle never visually does anything. */
.av-team__more[hidden] { display: none; }
.av-team__group h3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  color: var(--sc-ink);
  margin: 0 0 var(--sc-2);
}
/* This modifier was carrying no rule at all — Module Heads & Directors
   rendered with no colour distinction despite the copy promising
   "colour-coded by rank". Members stays plain on purpose (no --bone rule
   needed): only this group gets the tint. */
.av-team__group--red h3 { color: var(--av-k2-ink); }
.av-director-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--sc-3);
  margin: var(--sc-4) 0 0;
  max-width: var(--sc-measure);
}
.av-director-card {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--sc-3);
  background: var(--av-k2-ground);
  color: var(--av-k2-ink);
  border-radius: var(--sc-r-md);
  padding: var(--sc-4);
  /* Same border-beam motif as the four rank cards above, in this group's
     own red colourway — Module Heads & Directors get the shared device,
     Members (deliberately) stays plain. */
  --av-beam-c1: var(--av-k2-ink);
  --av-beam-c2: var(--sc-accent);
}
.av-director-card__photo {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
}
.av-director-card__role {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-sm);
}

/* ---------- Chapter 5: Register (colophon close) ---------- */
/* This element also becomes .sc-stage at mount time — no height here for
   the same reason as .av-split-stage above. It already gets 100vh from the
   engine, so the flex column centers within that automatically. */
.av-close {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--sc-gutter) var(--sc-9);
  max-width: 34rem;
}
.av-close__title {
  font-family: var(--sc-font-display);
  font-weight: 300;
  font-size: var(--sc-t-2xl);
  line-height: var(--sc-leading-tight);
  color: var(--sc-ink);
  margin: 0 0 var(--sc-3);
  text-wrap: balance;
}
/* Static, no data-sc-cue: always rendered, no animation to wait on. */
.av-close__sub {
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-lg);
  margin: 0 0 var(--sc-6);
}
.av-close__links {
  display: flex;
  flex-direction: column;
  gap: var(--sc-2);
  font-size: var(--sc-t-lg);
}
.av-close__links a {
  color: var(--sc-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--sc-accent);
}
.av-close__links a:hover { color: var(--sc-accent); }
.av-close__links a:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 4px;
}
.av-close__meta {
  margin-top: var(--sc-7);
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-sm);
}

/* ---------- Responsive: step the hero down below ~700px, per taste.md ---------- */
@media (max-width: 700px) {
  .av-hero__title { font-size: var(--sc-t-2xl); }
  .av-close__title, .av-split-intro h2 { font-size: var(--sc-t-2xl); }
  .av-countdown { flex-wrap: wrap; }
  .av-stats { grid-template-columns: 1fr; }
  .av-panel__name { font-size: var(--sc-t-xl); }
  .av-team { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .av-team { grid-template-columns: 1fr; }
  /* Below ~480px each .av-panel is under 200px wide; the 700px-step size
     still overflows "Qawwali Night" past the panel's own overflow:hidden
     and gets truncated. Shrink further and claw back gutter space. */
  .av-panel__label { left: var(--sc-4); right: var(--sc-4); }
  .av-panel__name { font-size: clamp(1rem, 4.5vw, 1.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .av-mark { transition: none; }
}