/* ════════════════════════════════════════════════════════════════════
   GODS & GODDESSES — design tokens
   Transformative · orbital motion identity. See PLAN.md §3, §6.
   ════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* ground — graphite-violet near-black */
  --ground:        #100E16;
  --ground-raised: #1C1926;

  /* mortal state — cool unlit marble */
  --marble:     #B9B6C2;
  --marble-dim: rgb(199 197 208 / .8);

  /* divine state — electrum */
  --electrum:      #D8C79A;
  --electrum-deep: #A68F5C;

  /* hover-only accent — ichor. Appears nowhere else. */
  --ichor: #7C5CFF;

  --text:        #F1ECE3;
  --text-strong: #FFFFFF;

  /* per-court accents */
  --olympian-1: #E8A9C4; --olympian-2: #A6AC85;
  --duat-1:     #C7A76B; --duat-2:     #2C6E9E;
  --untamed-1:  #2E8B6B; --untamed-2:  #C9873F;
  --duality-1:  #E8974A; --duality-2:  #B8C6DE;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --text-2xs: .625rem;  --text-xs: .75rem;   --text-sm: .875rem;  --text-base: 1rem;
  --text-lg:  1.125rem; --text-xl: 1.5rem;   --text-2xl: 2.25rem; --text-3xl: 3rem;
  --text-4xl: 4.5rem;   --text-hero: clamp(2.75rem, 11vw, 8rem);

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;
  --sp-24: 6rem;  --sp-32: 8rem;

  --r-xs: 6px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 48px;
  --r-round: 50%; --r-pill: 9999px;

  --shadow-sm: 0 2px 10px rgb(0 0 0 / .45);
  --shadow-md: 0 10px 30px -10px rgb(0 0 0 / .35);
  --shadow-lg: 0 25px 70px rgb(0 0 0 / .8);
  --glow: 0 0 20px transparent;

  --dur-instant: 120ms; --dur-fast: 200ms;  --dur-base: 300ms;  --dur-slow: 500ms;
  --dur-slower:  700ms; --dur-entrance: 900ms; --dur-ambient: 2200ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-in-out:   cubic-bezier(.65,0,.35,1);
  --ease-soft:     cubic-bezier(.445,.05,.55,.95);
  --ease-quart:    cubic-bezier(.76,0,.24,1);

  /* this theme's new vocabulary — PLAN.md §6 */
  --dur-fracture:    1000ms;
  --dur-focus-pull:  600ms;
  --dur-sweep:       24s;
  --dur-scintillate: 2400ms;

  --z-base: 0;    --z-content: 1;   --z-atmosphere: 5; --z-nav: 60;
  --z-branding: 300; --z-frame: 490; --z-modal: 1000;  --z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: .01ms; --dur-fast: .01ms; --dur-base: .01ms; --dur-slow: .01ms;
    --dur-slower: .01ms; --dur-entrance: .01ms; --dur-fracture: .01ms; --dur-focus-pull: .01ms;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Reset & base
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* height:auto is required alongside width/height sizing attributes for the
   attr-based aspect-ratio to auto-compute — without it, any image whose CSS
   sets only a width keeps its literal height attribute and distorts. */
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 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;
}

.skip-link {
  position: absolute; top: -100%; left: var(--sp-4); z-index: var(--z-toast);
  background: var(--electrum); color: var(--ground); padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-sm); font-weight: 600; transition: top var(--dur-base) var(--ease-standard);
}
.skip-link:focus { top: var(--sp-4); }

:focus-visible { outline: 2px solid var(--electrum); outline-offset: 3px; }

.eyebrow {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .3em;
  color: var(--electrum); font-weight: 500; text-align: center;
}
.section-title {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, var(--text-4xl));
  line-height: .95; letter-spacing: -.01em; text-align: center; margin-block: var(--sp-4) var(--sp-6);
}

.cta {
  display: inline-block; padding: var(--sp-3) var(--sp-8); border-radius: var(--r-pill);
  border: 1px solid var(--electrum); color: var(--text-strong);
  font-size: var(--text-sm); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  background: rgb(216 199 154 / .08);
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
  box-shadow: var(--glow);
}
.cta:hover, .cta:focus-visible {
  background: var(--electrum); color: var(--ground); border-color: var(--electrum);
  box-shadow: 0 0 24px rgb(124 92 255 / .35); transform: translateY(-2px);
}

.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }

/* ════════════════════════════════════════════════════════════════════
   Fixed decorative frame — pointer-events: none is the single most
   consequential rule in the whole library (master.md §7.1)
   ════════════════════════════════════════════════════════════════════ */
.site-frame {
  --corner-img: url('../../img/decorative-corner-filigree-01-768.webp');
  position: fixed; inset: 0; z-index: var(--z-frame); pointer-events: none;
  border: 1px solid rgb(216 199 154 / .14);
  margin: 10px;
}
.site-frame::before, .site-frame::after,
.site-frame i::before, .site-frame i::after {
  content: ''; position: absolute; width: clamp(64px, 9vw, 128px); aspect-ratio: 1;
  background: var(--corner-img, none); background-size: contain; background-repeat: no-repeat;
  opacity: .55;
}
.site-frame::before { top: -1px; left: -1px; }
.site-frame::after   { top: -1px; right: -1px; transform: scaleX(-1); }
.site-frame i { position: absolute; inset: 0; }
.site-frame i::before { bottom: -1px; left: -1px; transform: scaleY(-1); }
.site-frame i::after  { bottom: -1px; right: -1px; transform: scale(-1, -1); }

/* ════════════════════════════════════════════════════════════════════
   Header / icon cluster / fullscreen nav overlay
   ════════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-branding);
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(16px, 3vw, 28px);
  pointer-events: none;
}
.site-header__brand {
  display: flex; align-items: center; gap: var(--sp-3); text-decoration: none;
  pointer-events: auto; min-height: 44px; min-width: 44px;
}
.site-header__brand img { width: 40px; height: 40px; }
.site-header__brandname {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .2em; color: var(--text);
  display: none;
}
@media (min-width: 640px) { .site-header__brandname { display: inline; } }

.icon-cluster { display: flex; gap: 10px; pointer-events: auto; }
.icon-btn {
  display: grid; place-items: center; width: 44px; aspect-ratio: 1;
  border-radius: var(--r-round); background: rgb(241 236 227 / .08);
  border: 1px solid rgb(216 199 154 / .25); color: var(--text-strong);
  transition: transform var(--dur-base) var(--ease-standard), filter var(--dur-slow) var(--ease-standard);
}
.icon-btn:hover, .icon-btn:focus-visible { transform: scale(1.12); filter: saturate(1.4) brightness(1.15); }
.icon-btn--menu { background: var(--electrum); color: var(--ground); border-color: var(--electrum); }

.burger { position: relative; width: 18px; height: 12px; display: block; }
.burger i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), top var(--dur-base) var(--ease-standard);
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 50%; margin-top: -.75px; }
.burger i:nth-child(3) { top: 100%; margin-top: -1.5px; }
[aria-expanded="true"] .burger i:nth-child(1) { top: 50%; transform: rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { top: 50%; transform: rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 500; display: grid; place-content: center;
  background: var(--ground-raised);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s var(--ease-quart);
  visibility: hidden;
  text-align: center;
}
.nav-overlay[data-open="true"] { clip-path: inset(0 0 0 0); visibility: visible; }
.nav-overlay ul { display: grid; gap: clamp(.5rem, 2vw, 1rem); }
.nav-overlay a {
  display: inline-block; padding-block: .3em; min-height: 44px;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.75rem, 6vw, 3.5rem); text-decoration: none; color: var(--marble);
  opacity: 0; transform: translateY(30px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), color var(--dur-base) var(--ease-standard);
}
.nav-overlay a:hover, .nav-overlay a:focus-visible { color: var(--electrum); }
.nav-overlay[data-open="true"] a { opacity: 1; transform: none; transition-delay: calc(200ms + var(--i) * 70ms); }
.nav-overlay__foot { margin-top: var(--sp-8); font-size: var(--text-2xs); letter-spacing: .3em; text-transform: uppercase; color: var(--marble-dim); opacity: 0; transition: opacity .4s ease; }
.nav-overlay[data-open="true"] .nav-overlay__foot { opacity: 1; transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .nav-overlay, .nav-overlay a { transition: none; }
  .nav-overlay[data-open="true"] a { transition-delay: 0s; }
}

/* ════════════════════════════════════════════════════════════════════
   The Fracture Mask — hand-authored (PLAN.md §5.1)
   Two families of jagged clip-path keyframes: a left-to-right "sweep"
   (petrify-to-gold text, static reveals) and a radial "shatter" grown
   from a centre point (hero bust, beat-to-beat wipes). Uneven keyframe
   offsets + a stepped timing function is what gives the crack its
   lurch-and-stall character instead of a smooth continuous wipe.
   ════════════════════════════════════════════════════════════════════ */
@keyframes fracture-sweep-reveal {
  0%   { clip-path: polygon(0% 0%, -1.7% 0%, -1.7% 12.5%, 1.7% 25%, 0.8% 37.5%, -0.4% 50%, -0.6% 62.5%, 0.1% 75%, 0.3% 87.5%, 0.2% 100%, 0% 100%); }
  12%  { clip-path: polygon(0% 0%, 22.8% 0%, 24.9% 12.5%, 16.4% 25%, 21.2% 37.5%, 20.1% 50%, 16.6% 62.5%, 27.4% 75%, 23.2% 87.5%, 29.7% 100%, 0% 100%); }
  34%  { clip-path: polygon(0% 0%, 48.4% 0%, 38.5% 12.5%, 40.6% 25%, 40.8% 37.5%, 45.1% 50%, 42.2% 62.5%, 44.4% 75%, 50.2% 87.5%, 50.1% 100%, 0% 100%); }
  56%  { clip-path: polygon(0% 0%, 62.4% 0%, 61.2% 12.5%, 71.1% 25%, 62.3% 37.5%, 72.4% 50%, 62.6% 62.5%, 73.4% 75%, 59.6% 87.5%, 69.2% 100%, 0% 100%); }
  78%  { clip-path: polygon(0% 0%, 84.8% 0%, 84% 12.5%, 81.9% 25%, 77.2% 37.5%, 79.6% 50%, 81.5% 62.5%, 82.9% 75%, 87.3% 87.5%, 82.3% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, 100.4% 0%, 99.7% 12.5%, 99.8% 25%, 101.9% 37.5%, 102% 50%, 101% 62.5%, 97.5% 75%, 98.2% 87.5%, 98.7% 100%, 0% 100%); }
}
@keyframes fracture-shatter-reveal {
  0%   { clip-path: polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%); }
  10%  { clip-path: polygon(59.3% 50%,60% 55.1%,57.2% 59.5%,51.9% 58.9%,47.6% 60.9%,44.8% 56.8%,42.2% 53.9%,41.2% 50%,42.5% 46.2%,44.6% 42.8%,48.1% 41.5%,51.9% 41.1%,56.1% 42%,58.7% 45.6%); }
  28%  { clip-path: polygon(72.6% 50%,69.8% 60%,66.3% 71.4%,54.6% 71.1%,45.9% 68.8%,34.1% 70.9%,33.8% 58.2%,26.5% 50%,28.6% 39.2%,37.4% 33.4%,44.4% 24%,53.9% 32.2%,66.7% 28%,66.3% 41.7%); }
  50%  { clip-path: polygon(87.8% 50%,85.8% 68.1%,76.6% 85%,58.4% 88.5%,40.7% 92.6%,25.1% 82.7%,9.1% 70.7%,16.6% 50%,9.4% 29.5%,21.2% 12%,43.1% 18.2%,58% 13.4%,76.5% 15.1%,79.5% 35.1%); }
  74%  { clip-path: polygon(119.1% 50%,106.5% 78.6%,88.4% 100.5%,61.2% 101.6%,35.4% 117.3%,8.1% 105.2%,-8.1% 79.4%,-13.3% 50%,6.7% 28.1%,9.5% -3.4%,35.2% -18.3%,62.5% -7.3%,91.9% -5.2%,113.4% 17.9%); }
  100% { clip-path: polygon(118.6% 50%,117.6% 84.2%,96.8% 111.6%,66.7% 126.8%,33.3% 126.8%,3.2% 111.6%,-17.6% 84.2%,-25% 50%,-7% 21.2%,3.8% -10.9%,33.3% -26.8%,66.7% -26.8%,92.6% -6.1%,117.6% 15.8%); }
}

.fracture-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fracture-svg path {
  fill: none; stroke: var(--electrum); stroke-width: .6; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgb(216 199 154 / .9));
  stroke-dasharray: 340; stroke-dashoffset: 340;
}
.is-cracked .fracture-svg path {
  animation: crack-draw var(--dur-fracture) steps(7, jump-end) forwards;
}
.fracture-svg path:nth-child(2) { animation-delay: 40ms; }
.fracture-svg path:nth-child(3) { animation-delay: 90ms; }
.fracture-svg path:nth-child(4) { animation-delay: 20ms; }
.fracture-svg path:nth-child(5) { animation-delay: 130ms; }
.fracture-svg path:nth-child(n+6) { animation-delay: 70ms; }
@keyframes crack-draw { to { stroke-dashoffset: 0; } }

/* Petrify-to-gold — reused for the wordmark, every section title, beat
   titles and nav links: one text mechanic everywhere (§5.2.3 / six-
   keyframe philosophy). Resting state is a plausible static value
   (unlit marble grey), never invisible — rule §7.3. */
.petrify { position: relative; display: inline-block; }
.petrify__base { color: var(--marble); display: block; }
.petrify__gold {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(100deg, var(--electrum-deep), var(--electrum) 40%, var(--text-strong) 52%, var(--electrum) 64%, var(--electrum-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: polygon(0% 0%, -1.7% 0%, -1.7% 100%, 0% 100%);
}
.petrify.is-revealed .petrify__gold {
  animation: fracture-sweep-reveal var(--dur-fracture) steps(5, jump-none) forwards;
}
.petrify--img .petrify__base,
.petrify--img .petrify__gold { position: absolute; inset: 0; }
.petrify--img .petrify__base { filter: grayscale(1) brightness(.6) contrast(1.05); }
.petrify--img { position: relative; display: block; }

@media (prefers-reduced-motion: reduce) {
  .petrify__gold { clip-path: none !important; animation: none !important; }
  .is-cracked .fracture-svg path { stroke-dashoffset: 0; animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Hero — The Apotheosis
   ════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; height: 100svh; min-height: 560px; overflow: clip;
  /* lockup and cue are laid out in-flow, in this order, with an explicit
     gap between them — guarantees the cue can never overlap the CTA
     regardless of viewport aspect ratio. The 2fr/1fr spacers keep the
     lockup in the lower-middle of the frame (below the bust) without
     hard-coding a vh offset that broke on wide/short viewports. */
  display: grid; grid-template-rows: 2fr auto auto 1fr; justify-items: center;
  background: var(--ground);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }

.hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgb(16 14 22 / .55) 100%),
    linear-gradient(to top, rgb(16 14 22 / .9) 0%, rgb(16 14 22 / .15) 40%, transparent 60%);
}

.hero__stardust {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen; opacity: .55; pointer-events: none;
}

.hero__starfield { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--text-strong); box-shadow: 0 0 6px 1px rgb(216 199 154 / .8);
  left: var(--x); top: var(--y);
  animation: scintillate var(--dur, var(--dur-scintillate)) ease-in-out infinite;
  animation-delay: var(--delay, 0ms);
}
@keyframes scintillate {
  0%   { opacity: .15; }
  18%  { opacity: .85; }
  32%  { opacity: .3; }
  47%  { opacity: 1; }
  61%  { opacity: .2; }
  80%  { opacity: .7; }
  100% { opacity: .15; }
}

.hero__sweep {
  position: absolute; inset: -20% -30%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgb(216 199 154 / .22) 49%, rgb(241 236 227 / .3) 50%, rgb(216 199 154 / .22) 51%, transparent 58%);
  mix-blend-mode: overlay;
  animation: sweep-across var(--dur-sweep) linear infinite;
}
@keyframes sweep-across {
  0%   { transform: translateX(-60%) rotate(8deg); }
  100% { transform: translateX(60%) rotate(8deg); }
}

.hero__frag { position: absolute; z-index: 3; bottom: -2%; width: min(46vw, 620px); mix-blend-mode: screen; opacity: .85; pointer-events: none; }
.hero__frag--left  { left: -4%; }
.hero__frag--right { right: -4%; transform: scaleX(-1); }
.hero__starveil { position: absolute; top: 0; inset-inline: 0; z-index: 3; width: 100%; mix-blend-mode: screen; opacity: .7; pointer-events: none; }

.hero__stage { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; }
.hero__bust-wrap { position: relative; width: min(52vmin, 480px); aspect-ratio: 1; }
.hero__bust {
  width: 100%; height: 100%; object-fit: contain; transition: filter var(--dur-focus-pull) var(--ease-standard);
  /* the source plate is matted to a flat #100E16 square; the hero's own
     background is a lit hall, so a hard, dissolve the matte's edge into
     it with a radial mask rather than showing a visible seam. */
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 42%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 46%, #000 42%, transparent 72%);
}
.hero__flash {
  position: absolute; inset: -10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(216 199 154 / .55), transparent 65%);
  opacity: 0; transition: opacity 320ms var(--ease-out);
}
.is-cracked .hero__flash { opacity: 1; animation: flash-pulse 1.4s var(--ease-out) forwards; }
@keyframes flash-pulse { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .35; } }

.hero__lockup { grid-row: 2; position: relative; z-index: 5; display: grid; justify-items: center; gap: var(--sp-4); text-align: center; padding-inline: var(--sp-4); }
/* Resting state is always visible — no opacity:0 gate on critical hero
   text (PLAN.md §7 rule 3). The entrance is a quick translateY settle
   only, timed to the measured 80-200ms hero stagger (motion-tokens.md),
   not the multi-second cinematic delay the fracture/petrify pair uses. */
.hero__eyebrow { transform: translateY(16px); animation: settle 500ms var(--ease-out) forwards; animation-delay: 1.3s; }
.hero__mark {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-hero); line-height: .92; letter-spacing: -.01em;
  margin: 0;
}
.hero__mark .petrify__base, .hero__mark .petrify__gold { text-align: center; }
.hero__cta { transform: translateY(16px); animation: settle 500ms var(--ease-out) forwards; animation-delay: 1.42s; }
@keyframes settle { to { transform: none; } }

.hero__cue {
  grid-row: 3; position: relative; z-index: 5; margin-top: var(--sp-6);
  width: 44px; height: 44px; display: grid; place-items: center;
}
.hero__cue::before {
  content: ''; width: 26px; height: 42px; border: 1px solid var(--marble); border-radius: var(--r-pill);
}
.hero__cue span {
  position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 4px; height: 8px;
  background: var(--electrum); border-radius: var(--r-pill);
  animation: cue-drop 1.8s var(--ease-standard) infinite;
}
@keyframes cue-drop { 0% { opacity: 1; top: 8px; } 70% { opacity: 0; top: 22px; } 100% { opacity: 0; top: 8px; } }

@media (pointer: fine) and (min-width: 900px) {
  .hero[data-focus-x] .hero__frag--left  { filter: blur(var(--blur-left, 0px)); }
  .hero[data-focus-x] .hero__frag--right { filter: blur(var(--blur-right, 0px)); }
  .hero[data-focus-x] .hero__bust        { filter: blur(var(--blur-center, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sweep, .star, .hero__cue span { animation: none; }
  .hero__eyebrow, .hero__mark, .hero__cta, .hero__cue { opacity: 1; transform: none; animation: none; }
  .hero__flash { opacity: .35; }
}
@media (max-width: 640px) {
  .hero__frag { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   The Convocation — pinned orbital scroll story
   ════════════════════════════════════════════════════════════════════ */
/* Base layout is a progressive-enhancement fallback: four beats stacked
   in normal flow, all genuinely visible — correct with no JS, and it's
   also the reduced-motion presentation (never invisible content per
   PLAN.md §7 rule 3). JS opts into the pinned/orbital/fracture-wipe
   presentation only once it actually runs, via the .js-convocation
   class — see landing.js. */
.convocation { position: relative; background: var(--ground); }
.convocation__pin { display: grid; place-items: center; }
.convocation__ring { display: none; }
.convocation__beats { position: relative; }
.beat { position: relative; min-height: 100svh; display: grid; place-items: center; opacity: 1; visibility: visible; overflow: clip; }

.js-convocation { height: 400vh; }
.js-convocation .convocation__pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.js-convocation .convocation__ring {
  /* sits ABOVE the (opaque, full-bleed) beats and screen-blends in — a ring
     behind the photo layer would simply never be seen. Fine gold linework
     over near-black contributes almost nothing to a screen blend, so the
     beat photo and its text stay legible while the ring's rotation still
     reads clearly as an atmospheric overlay. */
  display: block; position: absolute; z-index: 3; width: min(120vmin, 1400px);
  opacity: .3; mix-blend-mode: screen; pointer-events: none;
  will-change: transform;
}
.js-convocation .convocation__beats { position: absolute; inset: 0; z-index: 2; }
.js-convocation .beat {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  clip-path: polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%);
}
.js-convocation .beat[data-active] {
  opacity: 1; visibility: visible;
  animation: fracture-shatter-reveal var(--dur-fracture) steps(5, jump-none) forwards;
}
.beat__bg { position: absolute; inset: 0; z-index: 0; }
.beat__bg img { width: 100%; height: 100%; object-fit: cover; }
.beat__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .beat__video { display: none; } }
.beat__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(16 14 22 / .92) 0%, rgb(16 14 22 / .35) 45%, rgb(16 14 22 / .55) 100%);
}
.beat__figures { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding-inline: clamp(1rem, 8vw, 8rem); pointer-events: none; }
.beat__attribute { width: min(20vw, 210px); filter: drop-shadow(0 8px 30px rgb(0 0 0 / .5)); }
.beat__attribute:nth-child(1) { animation: attr-in-left var(--dur-entrance) var(--ease-out) both; }
.beat__attribute:nth-child(2) { animation: attr-in-right var(--dur-entrance) var(--ease-out) both; }
.beat[data-active] .beat__attribute { animation-play-state: running; }
@keyframes attr-in-left  { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes attr-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

.beat__content { position: relative; z-index: 3; text-align: center; display: grid; gap: var(--sp-3); justify-items: center; max-width: 44ch; padding-inline: var(--sp-4); }
.beat__eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .3em; color: var(--court-a, var(--electrum)); }
.beat__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.5rem); line-height: .95; }
.beat__names { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--marble); }
.beat__copy { color: var(--marble-dim); font-size: var(--text-sm); line-height: 1.7; }

.convocation__progress { display: none; }
.js-convocation .convocation__progress { position: absolute; bottom: var(--sp-8); left: 50%; translate: -50% 0; z-index: 3; display: flex; gap: 10px; }
.convocation__progress i { width: 8px; height: 8px; border-radius: 50%; background: rgb(216 199 154 / .3); transition: background-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); }
.convocation__progress i[data-active] { background: var(--electrum); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  /* belt-and-braces: if JS already opted into the pinned system before the
     user toggled reduced motion mid-session, force the fallback presentation. */
  .js-convocation .beat { position: relative; inset: auto; opacity: 1 !important; visibility: visible !important; animation: none !important; clip-path: none !important; }
  .js-convocation .convocation__pin { position: static; height: auto; overflow: visible; }
  .js-convocation .convocation__ring { display: none; }
  .beat__attribute { animation: none !important; opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .beat__figures { padding-inline: var(--sp-4); }
  .beat__attribute { width: 26vw; }
}

/* ════════════════════════════════════════════════════════════════════
   The Pantheon — a plain, restrained grid, by design (§5.4)
   ════════════════════════════════════════════════════════════════════ */
.pantheon__head { display: grid; justify-items: center; margin-bottom: var(--sp-16); }
.pantheon__sub { color: var(--marble-dim); text-align: center; max-width: 46ch; margin-top: var(--sp-2); }

/* Full-bleed, edge-to-edge, zero-gap mosaic — three columns, two rows of
   six. Deliberately not the viewport-capped single-row formula this section
   used before: that formula optimised for "fits in one view without
   scrolling," this one optimises for large, tightly-packed imagery instead. */
.pantheon__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  width: 100%;
}
.fig-card { min-inline-size: 0; }
.fig-card__btn {
  display: block; width: 100%; height: 100%; text-align: left; position: relative;
  overflow: clip; z-index: 1;
}
.fig-card__btn img { width: 100%; height: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: top center;
  filter: grayscale(.85) sepia(.1); transition: filter var(--dur-slow) var(--ease-standard); }
.fig-card__btn:hover img, .fig-card__btn:focus-visible img { filter: none; }
.fig-card__btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(216 199 154 / .18), inset 0 -120px 90px -20px rgb(16 14 22 / .85);
  transition: box-shadow var(--dur-slow) var(--ease-standard);
}
.fig-card__btn:hover::after, .fig-card__btn:focus-visible::after {
  box-shadow: inset 0 0 0 1.5px var(--court-a, var(--electrum)), 0 0 40px -4px var(--court-a, var(--electrum)), inset 0 -120px 90px -20px rgb(16 14 22 / .65);
}
.fig-card__btn:hover, .fig-card__btn:focus-visible { transform: scale(1.05); z-index: 2; }
.fig-card__btn { transition: transform var(--dur-slow) var(--ease-out); }
.fig-card__label { position: absolute; left: var(--sp-4); bottom: var(--sp-4); z-index: 2; pointer-events: none; }
.fig-card__label strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); color: var(--text-strong); }
.fig-card__label em { font-style: normal; font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--court-a, var(--marble)); }

@media (max-width: 700px) {
  .pantheon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig-card__label strong { font-size: var(--text-xl); }
}

/* ════════════════════════════════════════════════════════════════════
   The Reliquary — figure detail dialog
   ════════════════════════════════════════════════════════════════════ */
.reliquary { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; color: var(--text); }
.reliquary::backdrop { background: rgb(16 14 22 / .92); }
.reliquary[open] { animation: fracture-shatter-reveal var(--dur-fracture) steps(5, jump-none) both; }
.reliquary__panel {
  display: grid; grid-template-columns: minmax(0,42%) 1fr; gap: var(--sp-8);
  width: min(96vw, 1080px); max-height: 90svh; overflow-y: auto; background: var(--ground-raised);
  border-radius: var(--r-lg); border: 1px solid rgb(216 199 154 / .18); padding: var(--sp-8);
  position: relative;
}
.reliquary__media img { width: 100%; border-radius: var(--r-md); aspect-ratio: 2/3; object-fit: cover; }
.reliquary__body { display: grid; align-content: start; gap: var(--sp-3); }
.reliquary__name { font-family: var(--font-display); font-weight: 300; font-size: var(--text-3xl); }
.reliquary__desc { color: var(--marble-dim); line-height: 1.7; }
.reliquary__incl { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }
.reliquary__incl li { font-size: var(--text-sm); color: var(--marble); padding-left: 1.2em; position: relative; }
.reliquary__incl li::before { content: '—'; position: absolute; left: 0; color: var(--electrum); }
.reliquary__price { font-size: var(--text-xs); color: var(--marble-dim); margin-top: var(--sp-2); }
.reliquary__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 3;
}
.reliquary__nav { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.reliquary__nav span { font-size: var(--text-xs); color: var(--marble-dim); letter-spacing: .1em; }

@media (max-width: 820px) {
  .reliquary__panel { grid-template-columns: 1fr; width: 94vw; padding: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) {
  .reliquary[open] { animation: none; clip-path: none; }
}

/* ════════════════════════════════════════════════════════════════════
   The Prophecy — countdown
   ════════════════════════════════════════════════════════════════════ */
.prophecy { display: grid; justify-items: center; text-align: center; }
.prophecy__frame {
  border: 1px solid rgb(216 199 154 / .22); border-radius: var(--r-lg);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4rem); position: relative;
  clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%);
}
.prophecy__date { color: var(--marble-dim); font-size: var(--text-sm); letter-spacing: .05em; margin-bottom: var(--sp-8); }

.countdown__row { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, 1rem); }
.unit { display: grid; justify-items: center; gap: .4rem; }
.unit__n {
  min-inline-size: 3ch; padding: .6rem 1rem; background: rgb(28 25 38 / .8);
  border: 1px solid rgb(216 199 154 / .3); border-radius: var(--r-sm);
  color: var(--electrum); font-size: clamp(1.25rem, 4vw, 2.25rem); font-weight: 600;
  font-variant-numeric: tabular-nums; font-family: var(--font-display); text-align: center;
}
.unit__c { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .2em; color: var(--marble-dim); }
.sep { color: var(--marble-dim); font-size: 1.5rem; margin-top: -1.2em; }

/* ════════════════════════════════════════════════════════════════════
   The Invocation — registration CTA
   ════════════════════════════════════════════════════════════════════ */
.invocation { position: relative; overflow: clip; display: grid; place-items: center; min-height: 70svh; }
.invocation__bg { position: absolute; inset: 0; z-index: 0; }
.invocation__bg img { width: 100%; height: 100%; object-fit: cover; }
.invocation__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgb(16 14 22 / .4), rgb(16 14 22 / .88)); }
.invocation__content { position: relative; z-index: 2; text-align: center; display: grid; gap: var(--sp-4); justify-items: center; max-width: 50ch; padding-inline: var(--sp-4); }
.invocation__copy { color: var(--marble-dim); line-height: 1.7; }

/* ════════════════════════════════════════════════════════════════════
   Footer
   ════════════════════════════════════════════════════════════════════ */
.site-footer { padding-block: var(--sp-16); display: grid; justify-items: center; gap: var(--sp-4); text-align: center; }
.site-footer__emblem { width: 44px; opacity: .8; }
.site-footer nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.site-footer nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--sp-2);
  text-decoration: none; font-size: var(--text-xs); letter-spacing: .15em; text-transform: uppercase;
  color: var(--marble); transition: color var(--dur-base) var(--ease-standard);
}
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--electrum); }
.site-footer__divider { width: min(90%, 480px); height: auto; opacity: .5; margin-block: var(--sp-4); }
.site-footer__credit { color: var(--marble-dim); font-size: var(--text-sm); max-width: 50ch; }
.site-footer__legal { color: var(--marble-dim); font-size: var(--text-xs); opacity: .6; }

/* ════════════════════════════════════════════════════════════════════
   Utility: blend-screen foreground overlays, mirrored file reuse
   ════════════════════════════════════════════════════════════════════ */
.blend-screen { mix-blend-mode: screen; }