/* ————————————————————————————————————————————————————————————————
   SOMUN '26 — STYLES
   Ink / crimson / beige editorial system. Plain CSS, no framework.
   Palette and type exactly match the original design:
     ink #0d0a08 · panel #16110d · panel-2 #1e1712
     beige #ece1cb · beige-dim #b3a487
     crimson #c8102e · crimson-deep #8e0b21 · line #2a211a
     Display: Playfair Display · Text: Inter
   ———————————————————————————————————————————————————————— */

/* the hidden attribute always wins — author display rules
   (e.g. .btn { display:inline-flex }) would otherwise defeat it */
[hidden] { display: none !important; }

:root {
  color-scheme: dark;
  --ink: #0d0a08;
  --panel: #16110d;
  --panel-2: #1e1712;
  --beige: #ece1cb;
  --beige-dim: #b3a487;
  --crimson: #c8102e;
  --crimson-deep: #8e0b21;
  --line: #2a211a;
  --primary-fg: #f4ecdb;
  --popover: #171310;
  --accent: #241b14;
  --border: rgba(236, 225, 203, 0.13);
  --input: rgba(236, 225, 203, 0.18);
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-door: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ————— Base ————— */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip; /* full-bleed ticker overflows the page-wrap; clip it at the viewport, no scroll container */
}

body {
  background: var(--ink);
  color: var(--beige);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

em {
  font-style: italic;
}

em.accent {
  color: var(--crimson);
}

::selection {
  background: var(--crimson);
  color: var(--primary-fg);
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d0a08; }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid #0d0a08; }
::-webkit-scrollbar-thumb:hover { background: var(--crimson-deep); }

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

/* ————— Film grain (sits above content, under nav/gate) ————— */
.grain::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 35;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ————— Utilities ————— */
.text-hollow {
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 225, 203, 0.14);
}

.container {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  position: relative;
}

@media (min-width: 640px) {
  .container { padding-inline: 2rem; }
}

.page-wrap {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-top: 8rem;
  padding-bottom: 5rem;
}

@media (min-width: 640px) {
  .page-wrap { padding-inline: 2rem; padding-top: 10rem; padding-bottom: 7rem; }
}

/* ————— Buttons ————— */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding: 1rem 2rem;
  cursor: pointer;
  border: none;
  background: none;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.btn--crimson {
  background: var(--crimson);
  color: var(--primary-fg);
}
.btn--crimson:hover { background: var(--crimson-deep); }

.btn--outline {
  border: 1px solid rgba(236, 225, 203, 0.25);
  color: var(--beige);
}
.btn--outline:hover { border-color: rgba(236, 225, 203, 0.6); }

.btn-arrow-icon,
.link-arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}
.btn--arrow:hover .btn-arrow-icon { transform: translateX(4px); }

/* ————— "Releasing Soon" stamp ————— */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  transform: rotate(-1.5deg);
  border: 1px solid rgba(200, 16, 46, 0.7);
  background: rgba(200, 16, 46, 0.1);
  padding: 0.5rem 1rem;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--crimson);
  white-space: nowrap;
}
.stamp-diamond {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: rgba(200, 16, 46, 0.8);
}

/* ————— Section head (editorial header) ————— */
.section-head { max-width: 48rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .section-head-row { justify-content: center; }

.section-head-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.section-head-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--crimson);
}
.section-head-rule {
  display: inline-block;
  height: 1px;
  width: 2.5rem;
  background: rgba(200, 16, 46, 0.7);
}
.section-head-kicker {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  color: var(--beige-dim);
}
.section-head-title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--beige);
  line-height: 1.05;
  font-size: 2.25rem;
}
.section-head-intro {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--beige-dim);
}
@media (min-width: 640px) {
  .section-head-title { font-size: 3rem; }
  .section-head-intro { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  .section-head-title { font-size: 3.75rem; }
}

.mini-kicker {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  color: var(--beige-dim);
}
.mini-kicker--crimson { color: var(--crimson); }

/* ————— Scroll reveals ————— */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--rv-delay, 0s);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* load-time animations (hero + gate) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpSm {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUpBig {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim--meta { animation: fadeIn 1s ease 0.15s both; }
.anim--t1 { animation: fadeUpBig 0.9s var(--ease-out) 0.25s both; }
.anim--t2 { animation: fadeUpBig 0.9s var(--ease-out) 0.4s both; }
.anim--sub { animation: fadeUpSm 0.9s var(--ease-out) 0.55s both; }
.anim--rollcall { animation: fadeUpSm 0.9s var(--ease-out) 1.3s both; }

/* ————— Shared keyframes ————— */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes ping-soft {
  0% { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ———————————————— NAVIGATION ———————————————— */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition:
    transform 0.6s var(--ease-out),
    opacity 0.5s ease,
    background-color 0.5s,
    border-color 0.5s,
    backdrop-filter 0.5s;
  border-bottom: 1px solid transparent;
}
/* the nav is veiled while the hero holds the stage — it slides back
   in once the hero scrolls away (JS toggles this on an IntersectionObserver) */
.nav.nav--veil {
  transform: translateY(-102%);
  opacity: 0;
  pointer-events: none;
}
.nav.scrolled {
  background: rgba(13, 10, 8, 0.9);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
/* desktop: nav stays a translucent glass strip over content — reads as
   transparent, keeps links legible over long pages */
@media (min-width: 1024px) {
  .nav.scrolled {
    background: rgba(13, 10, 8, 0.52);
    backdrop-filter: blur(10px) saturate(1.15);
    border-bottom-color: rgba(236, 225, 203, 0.07);
  }
}
.nav-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) { .nav-inner { padding-inline: 2rem; } }
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
@media (min-width: 640px) { .nav-row { height: 76px; } }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-mark {
  width: 44px;
  height: 44px;
  mix-blend-mode: screen;
  transition: transform 0.5s;
}
@media (min-width: 640px) { .nav-mark { width: 48px; height: 48px; } }
.nav-brand:hover .nav-mark { transform: scale(1.05); }
.nav-brand-tag {
  font-size: 9px;
  letter-spacing: 0.42em;
  color: var(--beige-dim);
  transition: color 0.3s;
  text-align: left;
}
@media (min-width: 640px) { .nav-brand-tag { font-size: 10px; } }
.nav-brand:hover .nav-brand-tag { color: var(--beige); }

.nav-links { display: none; margin-left: auto; }
@media (min-width: 1024px) {
  .nav-links { display: flex; align-items: center; gap: 1.5rem; margin-right: 1.75rem; }
}
@media (min-width: 1280px) {
  .nav-links { gap: 2.25rem; }
}
.nav-link {
  position: relative;
  padding-block: 0.5rem;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--beige-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s;
}
.nav-link:hover { color: var(--beige); }
.nav-link.active { color: var(--beige); }
.nav-link-underline {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 0;
  background: var(--crimson);
  transition: width 0.3s;
}
.nav-link.active .nav-link-underline { width: 100%; }
.nav-link-diamond {
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--crimson);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.3s;
}
.nav-link.active .nav-link-diamond { opacity: 1; }

.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.nav-cta {
  display: none;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  font-size: 11px;
  letter-spacing: 0.22em;
}
@media (min-width: 1024px) { .nav-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: none;
  color: var(--beige);
  cursor: pointer;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle-icon { width: 20px; height: 20px; }
.nav-toggle-icon--close { display: none; }
.nav-toggle.open .nav-toggle-icon--menu { display: none; }
.nav-toggle.open .nav-toggle-icon--close { display: block; }

/* drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
@media (min-width: 1024px) { .drawer { display: none; } }
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 10, 8, 0.95);
  backdrop-filter: blur(4px);
}
.drawer-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.drawer-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  text-align: left;
  color: var(--beige-dim);
}
.drawer-link:last-of-type { border-bottom: 0; }
.drawer-link.active { color: var(--beige); }
.drawer-link-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.875rem;
}
.drawer-link-num { font-size: 10px; letter-spacing: 0.3em; }
.drawer-cta {
  margin-top: 1.5rem;
  width: 100%;
  justify-content: center;
  padding-block: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
}

/* ———————————————— ENTRY GATE ———————————————— */
.gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  user-select: none;
}
.gate-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  background: var(--ink);
  z-index: 10;
  transition: transform 1.15s var(--ease-door) 0.2s;
}
.gate-door--left { left: 0; }
.gate-door--right { right: 0; }
.gate.open .gate-door--left { transform: translateX(-102%); }
.gate.open .gate-door--right { transform: translateX(102%); }

.door-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100vw;
  overflow: hidden;
}
.gate-door--left .door-backdrop { left: 0; }
.gate-door--right .door-backdrop { right: 0; }
.door-backdrop-img {
  position: absolute;
  inset: 0;
  animation: doorBreath 22s ease-in-out infinite;
}
.gate.open .door-backdrop-img { animation-play-state: paused; }
.door-backdrop-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  mix-blend-mode: screen;
  filter: grayscale(35%) sepia(25%);
}
@keyframes doorBreath {
  0%, 100% { transform: scale(1.04); }
  50% { transform: scale(1.12); }
}
.door-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(13, 10, 8, 0.78) 72%, rgba(13, 10, 8, 0.97) 100%);
}
.door-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7rem;
}
.gate-door--left .door-seam--right {
  right: 0;
  background: linear-gradient(to right, rgba(13, 10, 8, 0.7), transparent);
}
.gate-door--right .door-seam--left {
  left: 0;
  background: linear-gradient(to left, rgba(13, 10, 8, 0.7), transparent);
}

.gate-sheen {
  pointer-events: none;
  position: absolute;
  top: -24px;
  bottom: -24px;
  z-index: 12;
  width: 38vw;
  left: -40vw;
  background: linear-gradient(105deg, transparent 0%, rgba(236, 225, 203, 0.05) 45%, rgba(236, 225, 203, 0.085) 50%, rgba(236, 225, 203, 0.05) 55%, transparent 100%);
  animation: sheenMove 7.5s linear infinite;
}
@keyframes sheenMove {
  from { transform: translateX(0); }
  to { transform: translateX(185vw); }
}
.gate.open .gate-sheen { display: none; }

.gate-beam {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 30;
  width: 3px;
  left: calc(50% - 1.5px);
}
.gate-beam-core {
  height: 100%;
  width: 100%;
  background: var(--crimson);
  transform-origin: center;
  transform: scaleY(0);
  opacity: 0;
}
.gate.open .gate-beam-core { animation: beamFire 1.15s ease-in-out both; }
@keyframes beamFire {
  0% { transform: scaleY(0); opacity: 0; box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
  30% { transform: scaleY(1); opacity: 1; box-shadow: 0 0 90px 26px rgba(200, 16, 46, 0.65); }
  55% { transform: scaleY(1); opacity: 0.9; box-shadow: 0 0 140px 40px rgba(200, 16, 46, 0.45); }
  100% { transform: scaleY(1); opacity: 0; box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
}

.gate-flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--beige);
  opacity: 0;
}
.gate.open .gate-flash { animation: shutterFlash 0.32s linear both; }
@keyframes shutterFlash {
  0% { opacity: 0; }
  30% { opacity: 0.07; }
  100% { opacity: 0; }
}

.gate-content {
  position: relative;
  z-index: 20;
  height: 100%;
  display: grid;
  place-items: center;
  padding-inline: 1.25rem;
  transition:
    opacity 0.42s cubic-bezier(0.64, 0, 0.78, 0),
    transform 0.42s cubic-bezier(0.64, 0, 0.78, 0),
    filter 0.42s cubic-bezier(0.64, 0, 0.78, 0);
}
.gate.open .gate-content {
  opacity: 0;
  transform: scale(1.09);
  filter: blur(10px);
}

.gate-frame {
  pointer-events: none;
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 3.5rem;
  bottom: 3.5rem;
  border: 1px solid rgba(42, 33, 26, 0.9);
  opacity: 0;
  animation: fadeIn 1.4s ease 0.55s forwards;
}
@media (min-width: 640px) {
  .gate-frame { left: 1.75rem; right: 1.75rem; top: 4rem; bottom: 4rem; }
}
.gate-frame-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(200, 16, 46, 0.7);
  transform: translate(-50%, -50%) rotate(45deg);
}

.gate-corner {
  pointer-events: none;
  position: absolute;
  display: none;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(179, 164, 135, 0.9);
  opacity: 0;
  animation: cornerIn 0.8s ease forwards;
}
@media (min-width: 640px) { .gate-corner { display: block; } }
.gate-corner--right { text-align: right; }
.gate-content > .gate-corner:nth-of-type(1) { animation-delay: 0.75s; }
.gate-content > .gate-corner:nth-of-type(2) { animation-delay: 0.84s; }
.gate-content > .gate-corner:nth-of-type(3) { animation-delay: 0.93s; }
.gate-content > .gate-corner:nth-of-type(4) { animation-delay: 1.02s; }
@keyframes cornerIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.gate-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.5rem;
}
.gate-kicker {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.55em;
  color: var(--crimson);
  text-align: center;
  animation: kickerIn 1.3s ease-out 0.2s both;
}
@media (min-width: 640px) { .gate-kicker { font-size: 10px; } }
@keyframes kickerIn {
  from { letter-spacing: 1.1em; opacity: 0; }
  to { letter-spacing: 0.55em; opacity: 1; }
}

.gate-crest-wrap {
  margin-top: 2.25rem;
  perspective: 650px;
}
@media (min-width: 640px) { .gate-crest-wrap { margin-top: 2.75rem; } }
.gate-crest {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.gate-glow {
  position: absolute;
  inset: -3rem;
  border-radius: 9999px;
  background: rgba(200, 16, 46, 0.2);
  filter: blur(48px);
  opacity: 0;
  animation: glowBreath 4.2s ease-in-out 0.6s infinite;
}
@keyframes glowBreath {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.62; }
}
.gate-mark {
  position: relative;
  width: 9rem;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
  animation: markIn 1.15s var(--ease-out) 0.4s both;
}
@media (min-width: 640px) { .gate-mark { width: 11rem; } }
@media (min-width: 1024px) { .gate-mark { width: 12rem; } }
@keyframes markIn {
  from { opacity: 0; transform: translateY(34px) scale(0.94); filter: blur(14px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.gate-fleuron {
  position: relative;
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.95s forwards;
}
.fleuron-line { height: 1px; width: 3.5rem; }
@media (min-width: 640px) { .fleuron-line { width: 5rem; } }
.fleuron-line--l { background: linear-gradient(to left, transparent, rgba(200, 16, 46, 0.7) 30%, rgba(200, 16, 46, 0.7)); }
.fleuron-line--r { background: linear-gradient(to right, transparent, rgba(200, 16, 46, 0.7) 30%, rgba(200, 16, 46, 0.7)); }
.fleuron-diamond {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--crimson);
}
.gate-h1 {
  position: relative;
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.48em;
  color: var(--beige);
  opacity: 0;
  animation: fadeUp 0.9s ease 1.08s forwards;
}
@media (min-width: 640px) {
  .gate-h1 { font-size: 0.875rem; letter-spacing: 0.56em; }
}
.gate-h1-sub {
  display: block;
  margin-top: 0.5rem;
  font-size: 9px;
  letter-spacing: 0.52em;
  color: var(--beige-dim);
}
@media (min-width: 640px) {
  .gate-h1-sub { font-size: 10px; letter-spacing: 0.6em; }
}

.gate-enter {
  position: relative;
  margin-top: 2.5rem;
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  cursor: pointer;
  background: none;
  border: none;
  /* kill the browser's stock focus ring (green/blue square) — keyboard users
     still get a clear affordance: the disc fills crimson + arrow nudges right */
  outline: none;
  opacity: 0;
  animation: fadeUpBig 0.85s var(--ease-out) 1.35s both;
}
@media (min-width: 640px) { .gate-enter { width: 9rem; height: 9rem; } }
.gate-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 8rem;
  height: 8rem;
  border-radius: 9999px;
  background: rgba(200, 16, 46, 0.3);
  filter: blur(40px);
  transition: transform 0.7s;
}
.gate-enter:hover .gate-bloom { transform: translate(-50%, -50%) scale(1.9); }
.gate-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin-slow 22s linear infinite;
}
.gate-enter:hover .gate-ring { animation-duration: 7s; }
.gate-ring-text {
  fill: var(--beige-dim);
  font-family: var(--font-sans);
  text-transform: uppercase;
}
.gate-dashed {
  position: absolute;
  inset: 20px;
  border-radius: 9999px;
  border: 1px dashed rgba(200, 16, 46, 0.45);
  animation: spin-rev 34s linear infinite;
}
@media (min-width: 640px) { .gate-dashed { inset: 24px; } }
.gate-disc {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 9999px;
  border: 1px solid rgba(236, 225, 203, 0.2);
  background: var(--panel);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55);
  transition: all 0.5s;
}
@media (min-width: 640px) { .gate-disc { width: 86px; height: 86px; } }
.gate-enter:hover .gate-disc,
.gate-enter:focus-visible .gate-disc {
  border-color: var(--crimson);
  background: var(--crimson);
}
.gate-disc-arrow {
  width: 24px;
  height: 24px;
  color: var(--beige);
  transition: all 0.5s;
}
@media (min-width: 640px) { .gate-disc-arrow { width: 28px; height: 28px; } }
.gate-enter:hover .gate-disc-arrow,
.gate-enter:focus-visible .gate-disc-arrow {
  transform: translateX(4px);
  color: #fff;
}
.gate-enter-word {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--beige);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeIn 0.8s ease 1.55s forwards;
}
@media (min-width: 640px) { .gate-enter-word { font-size: 1.25rem; } }
.gate-cursor {
  color: var(--crimson);
  animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.gate-hint {
  margin-top: 0.75rem;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: rgba(179, 164, 135, 0.7);
  opacity: 0;
  animation: fadeIn 0.8s ease 1.8s forwards;
}

/* ———————————————— VIEWS / SITE ———————————————— */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}
.view { display: none; }
.view.active { display: block; flex: 1 0 auto; }
.view.active.view-enter { animation: viewIn 0.45s var(--ease-out) both; }
/* success screen rises in when the form clears (matches the original) */
#reg-success:not([hidden]) { animation: fadeUpSm 0.6s var(--ease-out) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ———————————————— HOME ————————————————
   Hero = "the monolith chamber": graded gavel backdrop (matte, no glow),
   drifting dust on canvas, split-flap roll call, pointer parallax. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh; /* fallback */
  min-height: 100svh;
  padding-top: 6.5rem;
}

/* ————— scene layers (behind everything) —————
   Full-bleed cinematic stage: the banknote-plate engraving covers the
   whole hero; ink grades carve out the corners, the left definition
   column and the bottom wordmark zone; film grain sits on top. */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  animation: sceneIn 1.6s ease 0.1s both;
}
@keyframes sceneIn { from { opacity: 0; } to { opacity: 1; } }
.hero-scene-frame {
  position: absolute;
  inset: -4%; /* bleed for parallax + drift, so edges never show */
  will-change: transform;
}
.hero-scene-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 30%; /* gavel head right of centre, dark plate upper-left for the type */
  transform: scale(1.04);
  filter: brightness(0.94) contrast(1.04);
  animation:
    monolithSettle 3.4s var(--ease-out) both,
    monolithDrift 30s ease-in-out 3.4s infinite alternate;
}
@keyframes monolithSettle {
  from { opacity: 0.25; transform: scale(1.17) translateY(-1.6%); }
  to   { opacity: 1;    transform: scale(1.04) translateY(0); }
}
@keyframes monolithDrift {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.1) translateY(-1.8%); }
}
/* dust motes drifting through the gavel light (canvas, screen-blended) */
.hero-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: 0.9;
}
/* ink grades above the plate: corners, left column, bottom melt, vignette */
.hero-scene-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 10, 8, 0.74) 0%, rgba(13, 10, 8, 0.18) 20%, rgba(13, 10, 8, 0) 42%),
    linear-gradient(0deg, #0d0a08 3%, rgba(13, 10, 8, 0.88) 15%, rgba(13, 10, 8, 0.44) 33%, rgba(13, 10, 8, 0) 55%),
    linear-gradient(90deg, rgba(13, 10, 8, 0.62) 0%, rgba(13, 10, 8, 0.24) 30%, rgba(13, 10, 8, 0) 56%),
    radial-gradient(125% 95% at 50% 40%, rgba(13, 10, 8, 0) 52%, rgba(13, 10, 8, 0.42) 86%, rgba(13, 10, 8, 0.68) 100%);
}
/* cinematic film grain — a tiled turbulence plate, jittered in steps */
.hero-grain {
  position: absolute;
  inset: -120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grainJitter 1.1s steps(2) infinite;
}
@keyframes grainJitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-42px, 16px); }
  50%  { transform: translate(24px, -34px); }
  75%  { transform: translate(-16px, -44px); }
  100% { transform: translate(34px, 26px); }
}
.hero .container { position: relative; z-index: 1; width: 100%; margin-top: auto; padding-bottom: 1.4rem; }

/* ————— the plate's front run (mobile): the entry sinks behind the hammer —————
   A twin of the scene img (inherits cover crop, object-position, scale and
   the settle/drift animations, so its pixels track the backdrop exactly),
   masked by the gavel's own baked silhouette (plate-alpha.png: bright
   engraving -> opaque, ink -> transparent, hard zero below the definition
   so the wordmark can never be caught). mask-size/position mirror
   object-fit/object-position, and the img's own transform carries both —
   the occlusion stays welded to the hammer through the drift. */
.hero-scene-front { display: none; }
@media (max-width: 767px) {
  .hero-scene-front {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2; /* above .container (z-1) — under the chrome (z-3+) */
    pointer-events: none;
    animation: sceneIn 1.6s ease 0.1s both; /* stay in sync with the base scene */
  }
  .hero-scene-img.hero-scene-front-img {
    -webkit-mask-image: url("../images/textures/plate-alpha.png");
    mask-image: url("../images/textures/plate-alpha.png");
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: 50% 30%; /* mirrors object-position */
    mask-position: 50% 30%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* dimmer than the base plate — it rides above the text and must
       repay the ink shade (pocket + bottom melt) it doesn't carry */
    filter: brightness(0.5) contrast(1.05);
  }
}

/* ————— corner chrome (the nav is veiled inside the hero) ————— */
.hero-corner {
  position: absolute;
  top: 2.2rem;
  left: max(1.5rem, calc((100% - 80rem) / 2 + 1.5rem));
  z-index: 2;
  pointer-events: none;
}
.hero-corner-brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--beige);
}
.hero-corner-sub {
  margin-top: 0.5rem;
  font-size: 8.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
.hero-menu-wrap {
  position: absolute;
  top: 2.2rem;
  right: max(1.5rem, calc((100% - 80rem) / 2 + 1.5rem));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 0.55rem;
}
.hero-menu-edition {
  font-size: 8px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
.hero-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--beige);
  transition: color 0.3s;
}
.hero-menu:hover { color: #fff; }
.hero-menu-plus {
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  color: var(--crimson);
  transition: transform 0.4s var(--ease-out);
}
.hero-menu:hover .hero-menu-plus { transform: rotate(90deg); }

/* left edge — vertical whisper */
.hero-edge {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: 8.5px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(236, 225, 203, 0.38);
  pointer-events: none;
  user-select: none;
}
/* right edge — boxed chamber count, the ref's 12/15 slot */
.hero-pag {
  position: absolute;
  right: 1.7rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  pointer-events: none;
  user-select: none;
}
.hero-pag-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--beige);
  border: 1px solid rgba(236, 225, 203, 0.22);
  padding: 0.6rem 0.5rem;
}
.hero-pag-cap {
  font-size: 7.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 2;
  text-align: center;
  color: var(--beige-dim);
}
@media (max-width: 1023px) {
  .hero-edge, .hero-pag { display: none; }
}

.hero-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  margin-top: 0;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--beige);
  line-height: 0.86;
  letter-spacing: -0.015em;
  white-space: nowrap;
  /* the MONOCHROME slot — one giant line riding the bottom third */
  font-size: clamp(3.1rem, 13.6vw, 15.5rem);
  perspective: 900px;
  /* letterpress depth — dark drop only, matte (never a coloured glow) */
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 18px 44px rgba(0, 0, 0, 0.55);
}
@media (min-width: 768px) {
  .hero-title { font-size: clamp(4rem, 15.6vw, 15.5rem); }
}
.hero-title-line { display: inline-block; }
/* JS splits "SOMUN" into .ht-l letters; the cascade replaces the parent fade */
.hero-title--live .hero-title-line.anim--t1 { animation: none; }
.ht-l {
  display: inline-block;
  background: linear-gradient(180deg, #f7efdf 6%, #ecdfc0 55%, #c9b988 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none; /* parent letterpress bleeds through a clipped fill — drop-shadow instead */
  filter: drop-shadow(0 0.04em 0.05em rgba(0, 0, 0, 0.55)) drop-shadow(0 0.1em 0.22em rgba(0, 0, 0, 0.4));
  animation: heroLetter 0.85s var(--ease-out) both;
  animation-delay: calc(0.55s + var(--i) * 0.07s);
  will-change: transform;
}
@keyframes heroLetter {
  from { opacity: 0; transform: translateY(0.42em) rotateX(48deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0deg); }
}
.hero-title-year {
  font-size: 0.84em;
  color: var(--crimson);
  font-weight: 700;
  font-style: italic;
  margin-left: 0.04em;
}
/* the year slams in flap-style once the letters have landed */
.hero-title--live .hero-title-year {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: yearFlip 0.6s var(--ease-out) 1.15s both;
}
@keyframes yearFlip {
  from { opacity: 0; transform: rotateX(-92deg); }
  to   { opacity: 1; transform: rotateX(0); }
}

/* ————— Roll call · split-flap board cycling the XII chambers ————— */
.hero .rollcall {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .flap-row { margin-inline: auto; }
.rollcall-kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--beige-dim);
}
.rollcall-kicker-rule { position: relative; width: 44px; height: 1px; background: var(--line); }
.rollcall-kicker-rule::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--crimson);
}
.rollcall-kicker-rule:first-child::after { right: 0; }
.rollcall-kicker-rule:last-child::after { left: 0; }
.flap-row {
  display: flex;
  gap: 3px;
  perspective: 620px;
  width: max-content;
  max-width: 100%;
}
.flap {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(23px, 3vw, 38px);
  height: clamp(34px, 4.4vw, 54px);
  background: linear-gradient(180deg, #201913 0%, #14100b 52%, #0f0b08 100%);
  border: 1px solid #2b2219;
  border-radius: 3.5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 25px);
  line-height: 1;
  color: var(--beige);
  transform-style: preserve-3d;
  /* the centre seam every flap leaf hinges on */
}
.flap::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.72);
}
.flap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
.flap--blank { background: none; border-color: transparent; box-shadow: none; }
.flap--blank::before, .flap--blank::after { display: none; }
.flap-out { animation: flapOut 95ms cubic-bezier(0.55, 0, 1, 0.45) both; }
.flap-in  { animation: flapIn  95ms cubic-bezier(0, 0, 0.2, 1) both; }
@keyframes flapOut { from { transform: rotateX(0); } to { transform: rotateX(-88deg); } }
@keyframes flapIn  { from { transform: rotateX(88deg); } to { transform: rotateX(0); } }

/* optical centring: big tracking leaves a ghost gap after the last
   letter — pull the text back half a track so the rules sit evenly */
.rollcall-kicker-text { margin-right: -0.42em; }

/* ————— committees under seal — the board flips behind a blur ————— */
.flap-row { transition: filter 0.8s ease; }
.flap-row--sealed {
  filter: blur(9px) saturate(0.65) brightness(0.85);
  user-select: none;
}
.rollcall-seal-note {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  text-indent: 0.38em; /* balance the trailing track */
  color: var(--beige-dim);
}
.rollcall-seal-note::before, .rollcall-seal-note::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--line);
}

/* ————— hero choreography overrides once the letter cascade takes over ————— */
.hero-title--live + .rollcall { animation-delay: 1.5s; }
.hero-title--live .anim--t2 { animation-delay: 1.05s; }

/* ————— mobile scene tuning: zoom toward the gavel head, protect the type ————— */
@media (max-width: 767px) {
  .hero-scene-img {
    object-position: 50% 30%; /* centred — the gavel owns the middle of the stage */
    transform: scale(1.3);
    filter: brightness(0.78) contrast(1.05);
  }
  @keyframes monolithSettle {
    from { opacity: 0.25; transform: scale(1.48) translateY(-1.6%); }
    to   { opacity: 1;    transform: scale(1.3) translateY(0); }
  }
  @keyframes monolithDrift {
    from { transform: scale(1.3) translateY(0); }
    to   { transform: scale(1.38) translateY(-1.4%); }
  }
  .hero-scene-shade {
    /* def pocket: an ink well behind the dictionary entry so the type
       stays readable over the bright plate — no text sits behind the
       gavel; it just needs shade to read against it */
    background:
      radial-gradient(52% 16% at 30% 49.5%, rgba(13, 10, 8, 0.85) 0%, rgba(13, 10, 8, 0) 72%),
      linear-gradient(180deg, rgba(13, 10, 8, 0.8) 0%, rgba(13, 10, 8, 0.24) 24%, rgba(13, 10, 8, 0) 46%),
      linear-gradient(0deg, #0d0a08 3%, rgba(13, 10, 8, 0.92) 18%, rgba(13, 10, 8, 0.5) 40%, rgba(13, 10, 8, 0) 60%),
      linear-gradient(90deg, rgba(13, 10, 8, 0.55) 0%, rgba(13, 10, 8, 0.2) 45%, rgba(13, 10, 8, 0) 70%),
      radial-gradient(150% 90% at 50% 36%, rgba(13, 10, 8, 0) 46%, rgba(13, 10, 8, 0.5) 86%, rgba(13, 10, 8, 0.75) 100%);
  }
  .hero-corner { top: 1.6rem; left: 1.15rem; }
  .hero-menu-wrap { top: 1.6rem; right: 1.15rem; }
  .hero-menu-edition { display: none; }
  .hero-def { margin-bottom: 2.1rem; }
  .hero .rollcall { margin-top: 1.7rem; }
  .rollcall-kicker-rule { width: 26px; }
  /* mobile: give the board real presence — bigger tiles, softer seam */
  .flap { width: 26px; height: 38px; font-size: 17px; border-radius: 4px; }
  .flap-row { gap: 3.5px; }
  /* smaller tiles need a lighter blur — the board must still read as a
        sealed board, not vanish; letters stay fully unreadable */
  .flap-row--sealed { filter: blur(6px) saturate(0.7) brightness(0.95); }
  .rollcall-seal-note { letter-spacing: 0.3em; text-indent: 0.3em; }
}

/* ————— reduced motion: matte still frame, no canvas, instant flaps ————— */
@media (prefers-reduced-motion: reduce) {
  .hero-scene,
  .hero-grain { animation: none; }
  .hero-scene-img { animation: none; transform: none; }
  .ht-l,
  .hero-title--live .hero-title-year { animation: none; }
  .flap-out, .flap-in { animation: none; }
  .anim--rollcall { animation-duration: 0.01s; animation-delay: 0s; }
}

/* ————— the definition — a quiet dictionary entry, mid-left ————— */
.hero-def { max-width: 30rem; margin-bottom: 3rem; }
.hero-def-word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(240, 230, 208, 0.95);
}
.hero-def-phon {
  margin-left: 0.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--beige-dim);
}
.hero-def-body {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--beige-dim);
}
@media (max-width: 767px) {
  .hero-def-word { font-size: 1.15rem; }
  .hero-def-body { font-size: 0.875rem; }
}

.hero-ctas {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ————— bottom utility bar — Explore · countdown · Register ————— */
.hero-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 2rem;
  margin-top: 2.6rem;
  padding: 1rem max(1.5rem, calc((100% - 80rem) / 2 + 1.5rem)) calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 10, 8, 0.42), rgba(13, 10, 8, 0.78));
  backdrop-filter: blur(8px);
}
.hero-bar-explore {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--beige);
  transition: color 0.3s;
}
.hero-bar-arrow { width: 15px; height: 15px; color: var(--crimson); transition: transform 0.35s var(--ease-out); }
.hero-bar-explore:hover { color: #fff; }
.hero-bar-explore:hover .hero-bar-arrow { transform: translateX(5px); }

/* register — word + crimson disc, the ref's circular NEXT button */
.hero-bar-reg {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hero-bar-reg-word {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--beige);
  transition: color 0.3s;
}
.hero-bar-reg-disc {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: var(--crimson);
  box-shadow: 0 10px 26px rgba(200, 16, 46, 0.24);
  transition: transform 0.35s var(--ease-out), background-color 0.3s;
}
.hero-bar-reg-arrow { width: 16px; height: 16px; color: #f6eedd; }
.hero-bar-reg:hover .hero-bar-reg-disc { transform: scale(1.07); background: var(--crimson-deep, #b00e2e); }
.hero-bar-reg:hover .hero-bar-reg-word { color: #fff; }

/* countdown — compact inline readout inside the bar */
.countdown { display: flex; align-items: center; gap: 1.4rem; }
.countdown-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--crimson);
  white-space: nowrap;
}
.countdown-kicker-diamond { width: 5px; height: 5px; background: var(--crimson); transform: rotate(45deg); flex-shrink: 0; }
.countdown-grid { display: flex; align-items: baseline; gap: 1.1rem; }
.countdown-cell { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.countdown-cell + .countdown-cell { border-left: 0; }
.countdown-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--beige);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown-label {
  margin-top: 0;
  font-size: 7.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
@media (max-width: 1023px) {
  .hero-bar { grid-template-columns: 1fr auto; }
  .hero-bar .countdown { display: none; }
}

/* ————— index band — the dossier in four columns, straight off the hero ————— */
.hero-index { background: transparent; }
.hero-index .stats-strip { margin-top: 0; border-top: 0; border-left: 0; }

/* ————— Stats strip · three editorial figures ————— */
.stats-strip {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 640px) {
  .stats-strip { margin-top: 5rem; grid-template-columns: repeat(4, 1fr); }
}
.stats-cell {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--line); /* all widths: below 640px the strip is 1-col and still needs its right edge */
  border-bottom: 1px solid var(--line);
  padding: 1.9rem 1.6rem 2.1rem;
  transition: background-color 0.35s;
  animation: statsRise 0.8s var(--ease-out) both;
}
.stats-cell:nth-child(1) { animation-delay: 0.7s; }
.stats-cell:nth-child(2) { animation-delay: 0.84s; }
.stats-cell:nth-child(3) { animation-delay: 0.98s; }
.stats-cell:hover { background: rgba(22, 17, 13, 0.65); }
/* crimson sweep across the cell's top hairline on hover */
.stats-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--crimson), rgba(200, 16, 46, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.stats-cell:hover::before { transform: scaleX(1); }
/* oversized ghost figure bleeding off the corner — fills the dead space */
.stats-ghost {
  position: absolute;
  right: -0.4rem;
  bottom: -1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(5.5rem, 9vw, 8.5rem);
  line-height: 1;
  color: rgba(236, 225, 203, 0.07);
  pointer-events: none;
  user-select: none;
  transition: color 0.45s;
}
.stats-cell:hover .stats-ghost { color: rgba(200, 16, 46, 0.12); }
/* index kicker + hairline rule header row */
.stats-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.stats-index {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--beige-dim);
  transition: color 0.35s;
}
.stats-cell:hover .stats-index { color: var(--crimson); }
.stats-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  transition: background 0.4s;
}
.stats-cell:hover .stats-rule { background: linear-gradient(90deg, var(--crimson-deep), rgba(142, 11, 33, 0)); }
.stats-num {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.1rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #f6eedd 12%, #d6c5a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 0.45s var(--ease-out), filter 0.45s;
}
.stats-cell:hover .stats-num {
  transform: translateY(-3px);
  filter: brightness(1.08) drop-shadow(0 8px 20px rgba(200, 16, 46, 0.16));
}
/* the ??? delegates figure — count still unrevealed, so it shimmers */
.stats-num--mystery {
  background: linear-gradient(
    110deg,
    var(--beige-dim) 22%,
    #f6eedd 38%,
    var(--crimson) 50%,
    #f6eedd 62%,
    var(--beige-dim) 78%
  );
  background-size: 220% auto;
  /* background shorthand above resets clip — re-assert gradient text */
  -webkit-background-clip: text;
  background-clip: text;
  animation: statsShimmer 4.5s linear infinite;
}
.stats-label {
  margin-top: 0.65rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  line-height: 1.9;
  color: var(--beige-dim);
  transition: color 0.3s;
}
.stats-cell:hover .stats-label { color: var(--crimson); }
@keyframes statsRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes statsShimmer {
  0% { background-position: 220% center; }
  100% { background-position: -220% center; }
}

/* ticker */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding-block: 1rem;
  user-select: none;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
  align-items: center;
  gap: 2.5rem;
}
.ticker:hover .marquee-track { animation-play-state: paused; }
.ticker-half {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
}
.ticker-word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: rgba(236, 225, 203, 0.8);
  white-space: nowrap;
}
.ticker-diamond {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--crimson);
  display: inline-block;
  flex-shrink: 0;
}

/* about */
.about-grid {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 5rem;
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 640px) {
  .about-grid { padding-inline: 2rem; padding-block: 7rem; }
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: auto 1fr; gap: 5rem; }
}
.about-body { max-width: 42rem; }
@media (min-width: 1024px) { .about-body { padding-top: 6rem; } }
.about-p {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--beige-dim);
}
@media (min-width: 640px) { .about-p { font-size: 1.125rem; } }
.about-p--mt { margin-top: 1.25rem; }
.about-list {
  margin-top: 2rem;
  display: grid;
  row-gap: 1rem;
  list-style: none;
}
.about-item {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.about-icon { width: 16px; height: 16px; margin-top: 4px; flex-shrink: 0; color: var(--crimson); }
.about-item-text { font-size: 0.875rem; line-height: 1.625; color: var(--beige-dim); }
.about-item-strong { color: var(--beige); font-weight: 500; }

/* ————— Scroll-lit text (The Conference section) —————
   main.js splits each paragraph into word + char spans and toggles .on
   in reading order as the section travels through the viewport: every
   character starts grey + translucent and types back to its own colour
   (beige / crimson / strong — nothing is hardcoded here, .on simply
   removes the override so the natural cascade shows through). */
.stt-w { display: inline-block; }
.stt-char { transition: color 0.22s linear, opacity 0.22s linear; }
.stt-char:not(.on) { color: #8a8175 !important; opacity: 0.5; }

/* pillars */
.pillars {
  border-top: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.4);
}
.pillars .container { padding-block: 5rem; }
@media (min-width: 640px) { .pillars .container { padding-block: 7rem; } }
.pillars-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
@media (min-width: 640px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); } }
.pillar-cell { background: var(--ink); }
.pillar-box { height: 100%; padding: 2rem; transition: background-color 0.3s; }
.pillar-box:hover { background: var(--panel); }
.pillar-top { display: flex; align-items: center; justify-content: space-between; }
.pillar-icon { width: 28px; height: 28px; color: var(--crimson); }
.pillar-num {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(179, 164, 135, 0.5);
  font-size: 1.25rem;
}
.pillar-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--beige);
}
.pillar-body { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--beige-dim); }

/* committees preview */
.preview .container { padding-block: 5rem; }
@media (min-width: 640px) { .preview .container { padding-block: 7rem; } }
.preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--beige-dim);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(236, 225, 203, 0.2);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.link-arrow:hover { color: var(--beige); border-bottom-color: var(--crimson); }
.link-arrow:hover .link-arrow-icon { transform: translateX(4px); }
.preview-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
@media (min-width: 768px) { .preview-grid { grid-template-columns: repeat(2, 1fr); } }
.preview-card {
  width: 100%;
  height: 100%;
  text-align: left;
  background: var(--ink);
  padding: 1.75rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
@media (min-width: 640px) { .preview-card { padding: 2.25rem; } }
.preview-card:hover { background: var(--panel); }
.preview-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.preview-acronym {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--beige);
  transition: color 0.3s;
}
@media (min-width: 640px) { .preview-acronym { font-size: 2.25rem; } }
.preview-card:hover .preview-acronym { color: var(--crimson); }
.preview-diff {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--beige-dim);
  border: 1px solid var(--line);
  padding: 0.375rem 0.75rem;
  margin-top: 0.25rem;
  white-space: nowrap;
}
.preview-name {
  margin-top: 0.75rem;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--beige-dim);
  line-height: 1.625;
}
.preview-desc {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--beige-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preview-foot {
  margin-top: 1.25rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--crimson);
}

/* quote band */
.quote-band { position: relative; overflow: hidden; background: var(--crimson-deep); }
.quote-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--crimson), var(--crimson-deep), rgba(200, 16, 46, 0.8));
}
.quote-texture { position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: multiply; }
.quote-texture img { width: 100%; height: 100%; object-fit: cover; }
.quote-mark {
  position: absolute;
  bottom: -7rem;
  left: -7rem;
  opacity: 0.14;
  mix-blend-mode: screen;
  pointer-events: none;
}
.quote-mark img { width: 420px; max-width: none; }
.quote-quote-icon { position: absolute; top: -6rem; left: 50%; transform: translateX(-50%); opacity: 0.08; }
.quote-quote-svg { width: 384px; height: 384px; color: var(--primary-fg); }
.quote-center {
  position: relative;
  max-width: 64rem;
  margin-inline: auto;
  padding: 6rem 1.25rem;
  text-align: center;
}
@media (min-width: 640px) { .quote-center { padding: 8rem 2rem; } }
.quote-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: rgba(244, 236, 219, 0.7);
}
.quote-blockquote {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
  color: var(--primary-fg);
}
@media (min-width: 640px) { .quote-blockquote { font-size: 3rem; } }
@media (min-width: 1024px) { .quote-blockquote { font-size: 3.75rem; } }
.quote-br { display: none; }
@media (min-width: 640px) { .quote-br { display: block; } }
.quote-attrib {
  margin-top: 2rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(244, 236, 219, 0.7);
}

/* cta */
.cta {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px) {
  .cta { padding-inline: 2rem; padding-block: 8rem; }
}
.cta-watermark {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38vw;
  line-height: 1;
}
@media (min-width: 640px) { .cta-watermark { font-size: 22vw; } }
.cta-inner { position: relative; }
.cta-landmark {
  width: 32px;
  height: 32px;
  margin-inline: auto;
  display: block;
  color: var(--crimson);
}
.cta-title {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--beige);
  font-size: 2.25rem;
  line-height: 1.02;
}
@media (min-width: 640px) { .cta-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .cta-title { font-size: 4.5rem; } }
.cta-copy {
  margin-top: 1.5rem;
  margin-inline: auto;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--beige-dim);
}
@media (min-width: 640px) { .cta-copy { font-size: 1.125rem; } }
.cta-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.cta-actions .btn { padding: 1.25rem 2.5rem; }

/* ———————————————— COMMITTEES PAGE ———————————————— */
.scroll-hint {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--beige-dim);
}
.scroll-hint-icon { width: 16px; height: 16px; color: var(--crimson); }
.scroll-hint-rule { height: 1px; width: 2.5rem; background: var(--line); }

.deck { position: relative; }
.deck-sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.deck-backdrop { position: absolute; inset: 0; }
.deck-backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.07;
  filter: grayscale(1) blur(2px);
  transform: scale(1.05);
}
.deck-backdrop-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--ink), rgba(13, 10, 8, 0.85), var(--ink));
}

.deck-rail {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  margin-inline: auto;
  width: 100%;
  max-width: 80rem;
  padding: 56px 1.25rem 12px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 640px) { .deck-rail { padding: 80px 2rem 16px; } }
.deck-rail-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--beige);
  font-variant-numeric: tabular-nums;
  width: 2.5rem;
  text-align: left;
}
.deck-rail-track { position: relative; flex: 1 1 0; height: 1px; background: var(--line); }
.deck-rail-bar {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  background: var(--crimson);
  transform-origin: left;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.deck-rail-count {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--beige-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.deck-viewport { position: relative; z-index: 10; flex: 1 1 0; overflow: hidden; }
.deck-track { display: flex; height: 100%; will-change: transform; }
.deck-slide {
  position: relative;
  height: 100%;
  width: 100%;
  flex-shrink: 0;
  padding-inline: 0.875rem;
}
@media (min-width: 640px) { .deck-slide { padding-inline: 2rem; } }
@media (min-width: 1024px) { .deck-slide { padding-inline: 3rem; } }

.watermark-wrap {
  pointer-events: none;
  user-select: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
  opacity: 0.14;
}
.deck-slide.on-stage .watermark-wrap { opacity: 1; }
.watermark {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  font-size: 34vw;
}
@media (min-width: 1024px) { .watermark { font-size: 24rem; } }

.seam { pointer-events: none; position: absolute; top: 0; bottom: 0; width: 4rem; z-index: 5; }
@media (min-width: 640px) { .seam { width: 9rem; } }
.seam--left { left: 0; background: linear-gradient(to right, var(--ink), rgba(13, 10, 8, 0.6), transparent); }
.seam--right { right: 0; background: linear-gradient(to left, var(--ink), rgba(13, 10, 8, 0.6), transparent); }

.dossier-wrap {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  display: flex;
  height: 100%;
  max-width: 72rem;
  align-items: center;
  width: 100%;
}
.dossier {
  position: relative;
  width: 100%;
  border: 1px solid rgba(236, 225, 203, 0.2);
  background: linear-gradient(160deg, rgba(30, 23, 18, 0.96), rgba(13, 10, 8, 0.97));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(64px) rotateY(7deg) rotateZ(-0.6deg);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
@media (min-width: 1024px) { .dossier { height: min(66vh, 620px); } }
.deck-slide.on-stage .dossier { opacity: 1; transform: none; }

.wax-seal {
  position: absolute;
  top: -1.75rem;
  left: 1.75rem;
  z-index: 20;
  transform: rotate(-7deg);
}
@media (min-width: 640px) { .wax-seal { left: 2.5rem; } }
.wax-disc {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: radial-gradient(circle at 32% 28%, #e2485c, #c8102e 52%, #75091c 100%);
  box-shadow: 0 12px 28px rgba(200, 16, 46, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) { .wax-disc { width: 64px; height: 64px; } }
.wax-ring-1 { position: absolute; inset: 6px; border-radius: 9999px; border: 1px solid rgba(244, 236, 219, 0.3); }
.wax-ring-2 { position: absolute; inset: 12px; border-radius: 9999px; border: 1px solid rgba(244, 236, 219, 0.15); }
.wax-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--primary-fg);
  font-size: 1.125rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
@media (min-width: 640px) { .wax-num { font-size: 1.25rem; } }

.corner-frame {
  pointer-events: none;
  position: absolute;
  width: 36px;
  height: 36px;
  color: rgba(236, 225, 203, 0.3);
}
.corner-frame svg { width: 100%; height: 100%; }
.corner--tl { top: -8px; left: -8px; }
.corner--tr { top: -8px; right: -8px; transform: scaleX(-1); }
.corner--bl { bottom: -8px; left: -8px; transform: scaleY(-1); }
.corner--br { bottom: -8px; right: -8px; transform: scale(-1); }

.dossier-inner-frame {
  pointer-events: none;
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(200, 16, 46, 0.2);
}

.dossier-grid {
  display: grid;
  grid-template-rows: auto auto;
}
@media (min-width: 1024px) {
  .dossier-grid { height: 100%; grid-template-columns: 0.95fr 1.05fr; grid-template-rows: 1fr; }
}
.plate {
  position: relative;
  height: 11rem;
  overflow: hidden;
  border-bottom: 1px dashed rgba(236, 225, 203, 0.2);
  min-height: 0;
}
@media (min-width: 640px) { .plate { height: 13rem; } }
@media (min-width: 1024px) {
  .plate { height: auto; border-bottom: 0; border-right: 2px dashed rgba(236, 225, 203, 0.2); }
}
.plate-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.05s var(--ease-out);
}
.deck-slide.on-stage .plate-art { transform: scale(1); }
.plate-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 10, 8, 0.6), transparent 32%);
  pointer-events: none;
}
.plate-empty {
  position: absolute;
  inset: 1rem;
  border: 1px dashed rgba(236, 225, 203, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(236, 225, 203, 0.02) 14px 15px);
}
.plate-empty-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.875rem;
  color: rgba(236, 225, 203, 0.15);
  user-select: none;
}
.plate-empty-text {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(179, 164, 135, 0.6);
  text-align: center;
  padding-inline: 1rem;
}
.plate-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem;
}
@media (min-width: 640px) { .plate-caption { padding: 1rem; } }
/* deck plates carry only the numeral now — keep it anchored right */
.deck-slide .plate-caption { justify-content: flex-end; }
.plate-credit {
  max-width: 75%;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1.625;
  color: rgba(236, 225, 203, 0.7);
}
@media (min-width: 640px) { .plate-credit { font-size: 9px; } }
.plate-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: rgba(236, 225, 203, 0.3);
  user-select: none;
}
@media (min-width: 640px) { .plate-num { font-size: 1.875rem; } }

.dossier-body {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}
@media (min-width: 640px) { .dossier-body { padding: 1.75rem; } }
@media (min-width: 1024px) { .dossier-body { padding: 2.25rem; } }
.dossier-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
@media (min-width: 1024px) { .dossier-content { max-width: 36rem; } }

.dossier-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.5rem;
}
.diff-chip {
  transform: rotate(-2deg);
  border: 1px solid;
  padding: 2px 8px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.diff-chip--Beginner { border-color: rgba(236, 225, 203, 0.25); color: var(--beige-dim); }
.diff-chip--Intermediate { border-color: rgba(236, 225, 203, 0.5); color: var(--beige); }
.diff-chip--Advanced { border-color: var(--crimson); color: var(--crimson); background: rgba(200, 16, 46, 0.1); }
.diff-chip--Mixed { border-color: rgba(236, 225, 203, 0.38); color: var(--beige); background: rgba(236, 225, 203, 0.04); }

.dossier-acronym {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: var(--beige);
  font-size: 2.25rem;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) { .dossier-acronym { font-size: 3.75rem; } }
@media (min-width: 1024px) { .dossier-acronym { font-size: 4.5rem; } }
.dossier-name {
  margin-top: 0.625rem;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.625;
  color: var(--beige-dim);
}
@media (min-width: 640px) { .dossier-name { font-size: 11px; } }
.fleuron-rule {
  margin-top: 1rem;
  display: none;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 640px) { .fleuron-rule { display: flex; } }
.fleuron-rule-l { height: 1px; flex: 1 1 0; background: linear-gradient(to right, transparent, rgba(236, 225, 203, 0.25)); }
.fleuron-rule-d { width: 6px; height: 6px; transform: rotate(45deg); background: var(--crimson); flex-shrink: 0; }
.fleuron-rule-r { height: 1px; flex: 1 1 0; background: linear-gradient(to left, transparent, rgba(236, 225, 203, 0.25)); }
.dossier-desc {
  margin-top: 0.75rem;
  font-size: 13px;
  line-height: 1.625;
  color: var(--beige-dim);
  flex-shrink: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) { .dossier-desc { font-size: 0.875rem; } }
@media (min-width: 1024px) { .dossier-desc { -webkit-line-clamp: 4; } }
.agendas { margin-top: 0.875rem; display: grid; row-gap: 0.375rem; }
@media (min-width: 640px) { .agendas { margin-top: 1rem; row-gap: 0.625rem; } }
.agendas-kicker {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--crimson);
}
@media (min-width: 640px) { .agendas-kicker { font-size: 9px; } }
.agenda {
  display: flex;
  gap: 0.75rem;
  font-size: 13px;
  line-height: 1.625;
  color: rgba(236, 225, 203, 0.9);
}
@media (min-width: 640px) { .agenda { font-size: 0.875rem; } }
.agenda-diamond {
  margin-top: 7px;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: rgba(200, 16, 46, 0.8);
  flex-shrink: 0;
}
.dossier-foot { margin-top: auto; padding-top: 0.875rem; }
@media (min-width: 640px) { .dossier-foot { padding-top: 1.5rem; } }
.dossier-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  row-gap: 0.625rem;
  column-gap: 0.75rem;
}
.take-seat {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(236, 225, 203, 0.25);
  padding: 0.625rem 1rem;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--beige);
  background: none;
  cursor: pointer;
  transition: border-color 0.5s;
}
@media (min-width: 640px) { .take-seat { padding: 0.75rem 1.25rem; font-size: 10px; } }
.take-seat:hover { border-color: var(--crimson); }
.take-seat-fill {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: var(--crimson);
  transition: transform 0.5s ease-out;
}
.take-seat:hover .take-seat-fill { transform: translateX(0); }
.take-seat-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.take-seat-label svg { width: 14px; height: 14px; transition: transform 0.3s; }
.take-seat:hover .take-seat-label svg { transform: translateX(4px); }

/* stagger entrance (transition-delay set inline per element) */
.stagger-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.deck-slide.on-stage .stagger-item { opacity: 1; transform: none; }

.deck-nav {
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  padding: 4px 0 16px;
}
@media (min-width: 640px) { .deck-nav { padding-bottom: 24px; } }
.deck-nav-inner {
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline: 0.75rem;
  width: fit-content;
}
@media (min-width: 640px) { .deck-nav-inner { gap: 6px; } }
.deck-nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  color: var(--beige-dim);
  background: none;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.deck-nav-chevron svg { width: 16px; height: 16px; }
@media (min-width: 640px) { .deck-nav-chevron { width: 40px; height: 40px; } }
.deck-nav-chevron:hover { color: var(--beige); border-color: rgba(236, 225, 203, 0.4); }
.deck-nav-chevron:disabled { opacity: 0.3; pointer-events: none; }
.deck-nav-numerals { display: flex; }
.deck-num {
  position: relative;
  min-width: 26px;
  min-height: 38px;
  padding-inline: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 10px;
  color: rgba(179, 164, 135, 0.5);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
@media (min-width: 640px) { .deck-num { min-width: 38px; min-height: 44px; font-size: 14px; } }
.deck-num:hover { color: var(--beige); }
.deck-num.active { color: var(--crimson); transform: scale(1.1); }
.deck-num-diamond {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  bottom: 4px;
  width: 4px;
  height: 4px;
  background: var(--crimson);
  transition: opacity 0.3s;
  opacity: 0;
}
.deck-num.active .deck-num-diamond { opacity: 1; }

.edge-fade {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  z-index: 10;
}
.edge-fade--left { left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.edge-fade--right { right: 0; background: linear-gradient(to left, var(--ink), transparent); }

/* executive boards */
.exec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}
.exec-title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--beige);
  font-size: 1.875rem;
  line-height: 1.05;
}
@media (min-width: 640px) { .exec-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .exec-title { font-size: 3rem; } }
.exec-intro {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--beige-dim);
}
@media (min-width: 640px) { .exec-intro { font-size: 1rem; } }
.exec-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .exec-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .exec-grid { grid-template-columns: repeat(3, 1fr); } }
.exec-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.6);
  padding: 1.5rem;
  transition: border-color 0.5s;
}
.exec-card:hover { border-color: rgba(236, 225, 203, 0.3); }
.exec-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.exec-acronym { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--beige); }
.exec-name {
  margin-top: 0.375rem;
  max-width: 26ch;
  font-size: 9px;
  text-transform: uppercase;
  line-height: 1.625;
  letter-spacing: 0.18em;
  color: var(--beige-dim);
}
.exec-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: rgba(236, 225, 203, 0.15);
  user-select: none;
}
.exec-divider { margin-top: 1.25rem; height: 1px; background: var(--line); }
.exec-roles { margin-top: 1.25rem; display: grid; row-gap: 0.75rem; list-style: none; }
.exec-role { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.exec-role-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(236, 225, 203, 0.8); }
.exec-role-tba {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(179, 164, 135, 0.7);
}
.exec-role-tba svg { width: 12px; height: 12px; color: rgba(200, 16, 46, 0.7); }

/* note panel (shared) */
.note-panel {
  position: relative;
  display: grid;
  gap: 1.5rem;
  align-items: start;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.6);
  padding: 1.75rem;
}
@media (min-width: 640px) {
  .note-panel { grid-template-columns: auto 1fr; padding: 2.25rem; }
}
.note-texture { position: absolute; inset: 0; opacity: 0.08; }
.note-texture img { width: 100%; height: 100%; object-fit: cover; }
.note-para {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3rem;
  color: var(--crimson);
  line-height: 1;
}
.note-body { position: relative; }
.note-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--beige); }
.note-copy { margin-top: 0.5rem; max-width: 48rem; font-size: 0.875rem; line-height: 1.625; color: var(--beige-dim); }

/* ———————————————— SECRETARIAT ———————————————— */
.stamp-row {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.stamp-note { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--beige-dim); }
/* ————— Secretariat wire · FAQ dispatch panel —————
   The old outline mailto button, upgraded: a wired direct-line card
   that types the address out and copies it on click. */
.faq-cta { margin: 3.5rem 0 5rem; }
.dispatch {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.9rem;
  padding: 2.1rem 1.9rem 2.3rem;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(26, 20, 15, 0.88) 0%, rgba(13, 10, 8, 0.95) 68%);
}
/* crimson pulse line across the top, wired-panel style */
.dispatch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--crimson) 0%, rgba(200, 16, 46, 0.25) 38%, rgba(200, 16, 46, 0) 70%);
}
.dispatch-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--crimson);
}
.dispatch-kicker-diamond {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--crimson);
  animation: pulse-soft 2.2s ease-in-out infinite;
}
.dispatch-title {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--beige);
}
.dispatch-copy {
  margin-top: 0.85rem;
  max-width: 46ch;
  font-size: 0.925rem;
  line-height: 1.7;
  color: var(--beige-dim);
}
.dispatch-right { display: grid; gap: 0.9rem; align-content: center; }
.dispatch-card {
  width: 100%;
  text-align: left;
  cursor: copy;
  padding: 1.05rem 1.2rem 1.1rem;
  border: 1px solid #2b2219;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #191309 0%, #100c08 100%);
  box-shadow: inset 0 1px 0 rgba(236, 225, 203, 0.05), 0 12px 28px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s, transform 0.3s var(--ease-out);
}
.dispatch-card:hover,
.dispatch-card:focus-visible {
  border-color: var(--crimson-deep);
  transform: translateY(-2px);
}
.dispatch-card.is-copied { border-color: var(--crimson); }
.dispatch-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dispatch-card-tag,
.dispatch-card-sub {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--beige-dim);
}
.dispatch-card-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  opacity: 0.75;
  transition: opacity 0.25s;
}
.dispatch-card:hover .dispatch-card-hint { opacity: 1; }
.dispatch-card-hint-ic { width: 12px; height: 12px; }
.dispatch-type-row {
  display: flex;
  align-items: center;
  min-height: 1.5em;
  margin-top: 0.75rem;
  font-size: clamp(1.02rem, 2.1vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--beige);
  word-break: break-all;
}
.dispatch-caret {
  flex-shrink: 0;
  width: 8px;
  height: 1.1em;
  margin-left: 3px;
  background: var(--crimson);
  animation: caretBlink 1.05s steps(2, start) infinite;
}
@keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.dispatch-card-sub { display: block; margin-top: 0.7rem; letter-spacing: 0.24em; }
@media (min-width: 900px) {
  .dispatch { grid-template-columns: 1.05fr 0.95fr; align-items: center; padding: 2.4rem 2.3rem 2.6rem; }
}
@media (max-width: 899px) {
  .dispatch { padding: 1.7rem 1.4rem 1.9rem; }
}

/* ———————————————— ITINERARY ———————————————— */
.soon-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.6);
  padding: 3rem 1.75rem;
  text-align: center;
  margin-top: 2.5rem;
}
@media (min-width: 640px) { .soon-panel { padding: 4rem 3rem; } }
.soon-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.soon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  border: 1px solid rgba(200, 16, 46, 0.5);
  background: rgba(200, 16, 46, 0.1);
  color: var(--crimson);
}
.soon-badge svg { width: 24px; height: 24px; }
.soon-kicker {
  margin-top: 1.75rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  color: var(--beige-dim);
}
.soon-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.25rem;
  color: var(--beige);
}
@media (min-width: 640px) { .soon-title { font-size: 3rem; } }
.soon-copy {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--beige-dim);
}
.soon-stamp { margin-top: 2rem; }

/* full itinerary (shown when SHOW_ITINERARY = true) */
.itin-tabs {
  margin-top: 3rem;
  display: grid;
  border: 1px solid var(--line);
}
@media (min-width: 640px) { .itin-tabs { grid-template-columns: repeat(3, 1fr); } }
.itin-tab {
  position: relative;
  text-align: left;
  padding: 1.25rem 1.5rem;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  border-top: 1px solid var(--line);
}
.itin-tab:first-child, .itin-tab:nth-child(2) { border-top: 0; }
@media (min-width: 640px) {
  .itin-tab { border-top: 0; }
  .itin-tab + .itin-tab { border-left: 1px solid var(--line); }
}
.itin-tab:hover { background: var(--panel); }
.itin-tab.active { background: var(--crimson); }
.itin-tab-day { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.125rem; line-height: 1; color: var(--beige); }
.itin-tab.active .itin-tab-day { color: var(--primary-fg); }
.itin-tab-meta {
  margin-top: 0.5rem;
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--beige-dim);
}
.itin-tab.active .itin-tab-meta { color: rgba(244, 236, 219, 0.75); }

.itin-body {
  margin-top: 3rem;
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) { .itin-body { grid-template-columns: 1fr 320px; } }
.itin-timeline {
  position: relative;
  border-left: 1px solid var(--line);
  margin-left: 0.5rem;
  row-gap: 2rem;
  padding-bottom: 1rem;
  display: grid;
  list-style: none;
}
.itin-event { position: relative; padding-left: 2.5rem; }
.itin-event::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: 1px solid var(--crimson);
  background: var(--ink);
  transition: background-color 0.3s;
}
.itin-event:hover::before { background: var(--crimson); }
.event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
}
.event-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--beige);
  font-variant-numeric: tabular-nums;
}
.event-time svg { width: 16px; height: 16px; color: var(--crimson); }
.event-chip {
  padding: 6px 12px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
}
.event-chip--ceremony { background: var(--crimson); color: var(--primary-fg); }
.event-chip--session { border: 1px solid rgba(236, 225, 203, 0.35); color: var(--beige); }
.event-chip--break { border: 1px solid var(--line); color: var(--beige-dim); }
.event-chip--social { background: var(--panel-2); color: var(--beige); border: 1px solid rgba(200, 16, 46, 0.4); }
.event-title {
  margin-top: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(236, 225, 203, 0.95);
}
@media (min-width: 640px) { .event-title { font-size: 1.5rem; } }
.event-detail { margin-top: 0.375rem; max-width: 42rem; font-size: 0.875rem; line-height: 1.625; color: var(--beige-dim); }

.itin-side { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .itin-side { position: sticky; top: 7rem; } }
.protocol-card { border: 1px solid var(--line); background: rgba(22, 17, 13, 0.6); padding: 1.75rem; }
.protocol-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--beige-dim);
}
.protocol-icon { width: 16px; height: 16px; color: var(--crimson); }
.protocol-list {
  margin-top: 1.25rem;
  display: grid;
  row-gap: 1rem;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--beige-dim);
}
.protocol-list li { display: flex; gap: 0.75rem; }
.protocol-diamond {
  margin-top: 8px;
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: var(--crimson);
  flex-shrink: 0;
}
.doors-card { border: 1px solid rgba(200, 16, 46, 0.5); background: rgba(142, 11, 33, 0.2); padding: 1.75rem; }
.doors-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--beige);
  line-height: 1.375;
}
.doors-attrib {
  margin-top: 0.75rem;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--beige-dim);
}

/* ———————————————— RESOURCES ———————————————— */

/* archive shelf — three cards, adjusted 3-up on desktop */
.res-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) { .res-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .res-grid { grid-template-columns: repeat(3, 1fr); } }
.res-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.6);
  padding: 1.5rem;
  transition: border-color 0.5s;
}
.res-card:hover { border-color: rgba(236, 225, 203, 0.3); }
.res-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.res-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: rgba(236, 225, 203, 0.15);
  user-select: none;
}
.res-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  color: var(--crimson);
  transition: border-color 0.5s;
}
.res-card:hover .res-icon { border-color: rgba(200, 16, 46, 0.5); }
.res-icon svg { width: 16px; height: 16px; }
.res-title { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--beige); }
.res-desc { margin-top: 0.625rem; flex-grow: 1; font-size: 12px; line-height: 1.625; color: var(--beige-dim); }
.res-foot {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px dashed var(--line);
  padding-top: 1rem;
}
.res-foot-label {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(179, 164, 135, 0.7);
}
.stamp--sm { padding: 0.25rem 0.625rem; font-size: 8px; gap: 0.4rem; letter-spacing: 0.28em; }
.res-dl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(200, 16, 46, 0.6);
  color: var(--crimson);
  padding: 0.375rem 0.75rem;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  transition: background-color 0.3s, color 0.3s;
}
.res-dl:hover { background: var(--crimson); color: var(--primary-fg); }

.guides-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.6);
  padding: 1.75rem;
  margin-top: 3.5rem;
}
@media (min-width: 640px) { .guides-panel { padding: 2.25rem; } }
.guides-body { position: relative; }
.guides-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.guides-title { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--beige); }
.guides-list {
  margin-top: 1.75rem;
  display: grid;
  column-gap: 2rem;
  row-gap: 0.75rem;
}
@media (min-width: 640px) { .guides-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .guides-list { grid-template-columns: repeat(3, 1fr); } }
.guide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(42, 33, 26, 0.7);
  padding-bottom: 0.625rem;
}
.guide-acronym { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; color: rgba(236, 225, 203, 0.9); }
.guide-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: rgba(179, 164, 135, 0.7);
}
.guide-status .guide-diamond { width: 4px; height: 4px; transform: rotate(45deg); background: rgba(200, 16, 46, 0.7); flex-shrink: 0; }
.guide-dl {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--crimson);
  border-bottom: 1px solid rgba(200, 16, 46, 0.5);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.guide-dl:hover { color: var(--beige); border-color: var(--beige); }
.guides-note {
  margin-top: 1.75rem;
  max-width: 42rem;
  font-size: 12px;
  line-height: 1.625;
  color: var(--beige-dim);
}

/* ———————————————— REGISTER ———————————————— */
.reg-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) { .reg-grid { grid-template-columns: 1fr 360px; } }
.reg-form {
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.5);
  padding: 1.5rem;
  display: grid;
  row-gap: 2rem;
}
@media (min-width: 640px) { .reg-form { padding: 2.5rem; } }
.reg-fieldset { border: 0; padding: 0; margin: 0; display: grid; row-gap: 1.25rem; }
.reg-legend { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 0; }
.reg-legend-index { font-family: var(--font-display); font-style: italic; color: var(--crimson); font-size: 1.125rem; }
.reg-legend-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4em; color: var(--beige-dim); }
.reg-fields { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .reg-fields { grid-template-columns: repeat(2, 1fr); } }
.field { display: grid; row-gap: 0.5rem; }
.field--wide { grid-column: span 1; }
@media (min-width: 640px) { .field--wide { grid-column: span 2; } }
.field-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--beige-dim); }
.req { color: var(--crimson); }
.input {
  min-height: 44px;
  width: 100%;
  background: rgba(13, 10, 8, 0.7);
  border: 1px solid var(--input);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--beige);
  font-family: inherit;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: rgba(179, 164, 135, 0.5); }
.input:focus-visible {
  border-color: rgba(236, 225, 203, 0.4);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.35);
}
.textarea { resize: none; padding: 0.75rem; }
.select-wrap { position: relative; }
.select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 44px;
  background: rgba(13, 10, 8, 0.7);
  border: 1px solid var(--input);
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--beige);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.select:hover { border-color: rgba(236, 225, 203, 0.4); }
.select:focus-visible {
  border-color: rgba(236, 225, 203, 0.4);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.35);
}
.select-chevron {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(236, 225, 203, 0.5);
  pointer-events: none;
}
.field--exp { max-width: 28rem; }
.reg-prefs { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .reg-prefs { grid-template-columns: repeat(3, 1fr); } }
/* ————— Registration wizard (4 stages) ————— */
.stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.25rem;
}
.stage-step { position: relative; padding-top: 0.875rem; display: grid; row-gap: 0.55rem; justify-items: start; }
.stage-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
  transition: background 0.4s var(--ease-out);
}
.stage-step.is-current::before,
.stage-step.is-done::before { background: var(--crimson); }
.stage-num {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--beige-dim);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.stage-step.is-current .stage-num { border-color: var(--crimson); background: rgba(200, 16, 46, 0.16); color: var(--beige); }
.stage-step.is-done .stage-num { border-color: var(--crimson); background: var(--crimson); color: #fff; }
.stage-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--beige-dim); line-height: 1.5; }
.stage-step.is-current .stage-label { color: var(--beige); }
@media (max-width: 640px) {
  .stages { grid-template-columns: repeat(4, auto); gap: 0.75rem; justify-content: space-between; }
  .stage-label { display: none; }
}
.reg-stage { display: none; }
.reg-stage.is-active {
  display: grid;
  row-gap: 1.25rem;
  animation: stage-in 0.55s var(--ease-out) both;
}
@keyframes stage-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.stage-count { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--beige-dim); }
.stage-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beige-dim);
  transition: color 0.3s;
}
.stage-back:hover { color: var(--beige); }
.stage-back-icon { width: 14px; height: 14px; }
.field-note { font-size: 12px; line-height: 1.6; color: var(--beige-dim); }
.field-note strong { color: var(--crimson); font-weight: 600; }
.confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px dashed rgba(200, 16, 46, 0.45);
  background: rgba(200, 16, 46, 0.06);
  padding: 1rem 1.1rem;
}
.checkbox { width: 1rem; height: 1rem; margin-top: 2px; accent-color: var(--crimson); cursor: pointer; flex-shrink: 0; }
.confirm-label { font-size: 0.8125rem; line-height: 1.6; color: var(--beige); cursor: pointer; }
/* allocation matrix viewer */
.matrix-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1rem 1.25rem;
  cursor: pointer;
  color: var(--beige);
  font-family: inherit;
  transition: border-color 0.3s, background 0.3s;
}
.matrix-btn:hover { border-color: rgba(200, 16, 46, 0.55); background: var(--panel-2); }
.matrix-btn-icon { width: 18px; height: 18px; color: var(--crimson); flex-shrink: 0; }
.matrix-btn-text { display: grid; row-gap: 0.2rem; flex: 1; font-size: 0.9375rem; }
.matrix-btn-sub { font-size: 12px; color: var(--beige-dim); }
.matrix-btn .btn-arrow-icon { width: 16px; height: 16px; color: var(--beige-dim); transition: transform 0.3s var(--ease-out), color 0.3s; }
.matrix-btn:hover .btn-arrow-icon { transform: translateX(4px); color: var(--crimson); }
.matrix-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(13, 10, 8, 0.82);
  backdrop-filter: blur(6px);
}
.matrix-overlay[hidden] { display: none; } /* author display beats the UA [hidden] rule otherwise */
.matrix-modal {
  width: min(720px, 100%);
  max-height: min(84vh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.75rem;
  animation: stage-in 0.4s var(--ease-out) both;
}
.matrix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.matrix-kicker { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--crimson); }
.matrix-title { font-family: var(--font-display); font-size: 1.5rem; margin-top: 0.4rem; color: var(--beige); }
.matrix-close {
  background: none;
  border: 1px solid var(--line);
  color: var(--beige-dim);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.3s, color 0.3s;
}
.matrix-close:hover { border-color: var(--crimson); color: var(--beige); }
.matrix-close-icon { width: 16px; height: 16px; }
.matrix-intro { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--beige-dim); }
.matrix-body { margin-top: 1.25rem; overflow-y: auto; display: grid; row-gap: 0.75rem; padding-right: 0.25rem; }
.matrix-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1rem;
  align-items: start;
  border: 1px solid var(--line);
  background: rgba(13, 10, 8, 0.4);
  padding: 0.9rem 1rem;
}
.matrix-row-name { font-size: 12px; color: var(--beige-dim); margin-bottom: 0.45rem; }
.matrix-acronym { font-family: var(--font-display); font-size: 1.05rem; color: var(--beige); line-height: 1.2; }
.matrix-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.matrix-chip {
  font-size: 11px;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  background: rgba(236, 225, 203, 0.03);
  color: var(--beige-dim);
  padding: 0.25rem 0.55rem;
}
.matrix-releasing {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  border: 1px dashed rgba(200, 16, 46, 0.5);
  padding: 0.35rem 0.65rem;
}
/* payment placeholder */
.pay-panel {
  display: grid;
  justify-items: center;
  text-align: center;
  row-gap: 0.6rem;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 2.5rem 1.5rem;
}
.pay-icon { width: 28px; height: 28px; color: var(--crimson); }
.pay-amount { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; color: var(--beige); }
.pay-badge {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crimson);
  border: 1px dashed rgba(200, 16, 46, 0.5);
  padding: 0.35rem 0.8rem;
}
.pay-copy { margin-top: 0.75rem; max-width: 34rem; font-size: 0.875rem; line-height: 1.7; color: var(--beige-dim); }
@media (max-width: 640px) {
  .matrix-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .matrix-modal { padding: 1.25rem; }
  .pay-amount { font-size: 2.25rem; }
  .stage-foot { flex-wrap: wrap; }
}
.btn--submit {
  min-height: 52px;
  padding-inline: 2.5rem;
  width: 100%;
  justify-content: center;
  letter-spacing: 0.3em;
}
@media (min-width: 640px) { .btn--submit { width: auto; } }
.submit-spinner { width: 16px; height: 16px; display: none; animation: spin-slow 1s linear infinite; }
.btn--submit.submitting .submit-spinner { display: block; }
.btn--submit:disabled { opacity: 0.7; cursor: wait; }

.reg-side { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .reg-side { position: sticky; top: 7rem; } }
.fees-card { border: 1px solid var(--line); background: rgba(22, 17, 13, 0.6); padding: 1.75rem; }
.fees-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4em; color: var(--beige-dim); }
.fees-list { margin-top: 1.5rem; display: grid; row-gap: 1.5rem; list-style: none; }
.fee-item { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
.fee-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fee-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fee-label { font-size: 0.875rem; font-weight: 500; color: var(--beige); }
.fee-price { font-family: var(--font-display); font-size: 1.25rem; color: var(--beige); }
.fee-strike {
  font-size: 0.875rem;
  color: rgba(179, 164, 135, 0.6);
  margin-right: 0.5rem;
  text-decoration: line-through;
  text-decoration-color: rgba(200, 16, 46, 0.6);
}
.fee-note { margin-top: 0.375rem; font-size: 11px; line-height: 1.625; color: var(--beige-dim); }
.fees-note {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.625rem;
  font-size: 11px;
  line-height: 1.625;
  color: var(--beige-dim);
}
.fees-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--crimson); }
.deadlines-card {
  border: 1px solid rgba(200, 16, 46, 0.5);
  background: rgba(142, 11, 33, 0.2);
  padding: 1.75rem;
}
.deadlines-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgba(244, 236, 219, 0.8);
}
.deadlines-list {
  margin-top: 1rem;
  display: grid;
  row-gap: 0.75rem;
  list-style: none;
  font-size: 0.875rem;
  color: var(--beige-dim);
}
.deadlines-list li { display: flex; justify-content: space-between; gap: 1rem; }
.dl-strong { color: var(--beige); }

/* success view */
.success-box {
  max-width: 42rem;
  margin-inline: auto;
  margin-top: 2rem;
  text-align: center;
}
@media (min-width: 640px) { .success-box { margin-top: 4rem; } }
.success-icon { width: 40px; height: 40px; margin-inline: auto; display: block; color: var(--crimson); }
.success-title {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--beige);
  font-size: 2.25rem;
  line-height: 1.25;
}
@media (min-width: 640px) { .success-title { font-size: 3.75rem; } }
.success-copy { margin-top: 1.25rem; font-size: 1rem; line-height: 1.625; color: var(--beige-dim); }
.refcode-box {
  margin-top: 2.5rem;
  border: 1px solid rgba(200, 16, 46, 0.5);
  background: rgba(22, 17, 13, 0.7);
  padding: 2.25rem 2rem;
  display: inline-block;
}
.refcode-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4em; color: var(--beige-dim); }
.refcode {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--beige);
}
@media (min-width: 640px) { .refcode { font-size: 3rem; } }
.refcode-note { margin-top: 0.75rem; font-size: 12px; color: rgba(179, 164, 135, 0.8); }
/* ——— online payment box on the success screen (dormant until Cashfree is wired) ——— */
.pay-now-box {
  margin-top: 1.5rem;
  border: 1px solid rgba(200, 16, 46, 0.35);
  background: rgba(22, 17, 13, 0.55);
  padding: 1.75rem 2rem;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  max-width: 26rem;
  margin-inline: auto;
}
.pay-now-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4em; color: var(--beige-dim); }
.pay-now-amount {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--beige);
}
.pay-now-sub { font-size: 11px; color: rgba(179, 164, 135, 0.75); }
.pay-now-box.is-paid { border-color: rgba(179, 164, 135, 0.5); }
.pay-now-box.is-paid .pay-now-sub { display: none; }
.success-next {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
  text-align: left;
  max-width: 28rem;
  margin-inline: auto;
}

/* ———————————————— FOOTER ———————————————— */
.footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.footer-top { border-bottom: 1px solid var(--line); }
.footer-grid {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 3.5rem;
  display: grid;
  gap: 3rem;
}
@media (min-width: 640px) { .footer-grid { padding-inline: 2rem; padding-block: 4rem; } }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand-row { display: flex; align-items: center; gap: 1rem; }
.footer-mark { width: 64px; height: 64px; mix-blend-mode: screen; }
.footer-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--beige);
  line-height: 1;
}
.footer-est { font-size: 10px; letter-spacing: 0.45em; color: var(--crimson); margin-top: 0.5rem; }
.footer-about { margin-top: 1.5rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.625; color: var(--beige-dim); }
.footer-socials { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  color: var(--beige-dim);
  transition: color 0.3s, border-color 0.3s;
}
.social-btn:hover { color: var(--beige); border-color: var(--crimson); }
.social-icon { width: 16px; height: 16px; }
.footer-heading {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--beige-dim);
}
.footer-links { margin-top: 1.25rem; display: grid; row-gap: 0.875rem; list-style: none; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--beige-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s;
}
.footer-link:hover { color: var(--beige); }
.footer-link-diamond {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: var(--crimson);
  opacity: 0;
  transition: opacity 0.3s;
}
.footer-link:hover .footer-link-diamond { opacity: 1; }
.footer-contact-list { margin-top: 1.25rem; display: grid; row-gap: 1rem; list-style: none; font-size: 0.875rem; color: var(--beige-dim); }
.footer-contact-item { display: flex; gap: 0.75rem; }
.footer-contact-icon { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; color: var(--crimson); }
/* click-to-copy secretariat address */
.footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  background: none;
  border: none;
  cursor: copy;
  font-size: inherit;
  line-height: inherit;
  color: var(--beige-dim);
  transition: color 0.3s;
  text-align: left;
}
.footer-mail-text {
  border-bottom: 1px dashed transparent;
  transition: border-color 0.3s, color 0.3s;
}
.footer-mail:hover { color: var(--beige); }
.footer-mail:hover .footer-mail-text { border-bottom-color: var(--line); }
.footer-mail-copy {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--crimson);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
}
.footer-mail:hover .footer-mail-copy,
.footer-mail:focus-visible .footer-mail-copy { opacity: 1; transform: none; }
.footer-bottom { position: relative; border-top: 1px solid var(--line); overflow: hidden; }
.footer-bottom-texture { position: absolute; inset: 0; opacity: 0.13; }
.footer-bottom-texture img { width: 100%; height: 100%; object-fit: cover; }
.footer-bottom-row {
  position: relative;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(179, 164, 135, 0.7);
}
@media (min-width: 640px) {
  .footer-bottom-row { flex-direction: row; padding-inline: 2rem; }
}

/* ———————————————— TOAST ———————————————— */
.toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 100;
  max-width: 24rem;
  background: var(--panel-2);
  border: 1px solid rgba(200, 16, 46, 0.5);
  color: var(--beige);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { border-color: rgba(200, 16, 46, 0.8); background: rgba(142, 11, 33, 0.4); }
.toast strong { color: var(--beige); display: block; margin-bottom: 0.25rem; font-size: 0.9375rem; }


/* ———————————————— COMMITTEE DETAIL PAGE ———————————————— */
.crumb {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 2rem; padding: 0;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--beige-dim); background: none; border: 0; cursor: pointer;
  transition: color 0.3s;
}
.crumb svg { width: 14px; height: 14px; }
.crumb:hover { color: var(--crimson); }

.committee-head { margin-top: 1.25rem; }
.committee-kicker-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.committee-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--beige-dim); }
.committee-acronym {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 8.5rem);
  font-weight: 800; line-height: 0.95; letter-spacing: 0.02em;
}
.committee-name { margin-top: 0.875rem; font-size: 1.05rem; color: var(--beige-dim); }
.committee-head .fleuron-rule { margin-top: 1.75rem; }

.committee-grid { margin-top: 3rem; padding-bottom: 4rem; display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .committee-grid { grid-template-columns: 380px 1fr; gap: 3.5rem; } }
.committee-plate { height: 16rem; }
@media (min-width: 900px) { .committee-plate { height: 22rem; } }
.committee-plate-note { margin-top: 1rem; display: flex; gap: 0.6rem; font-size: 11px; line-height: 1.7; color: var(--beige-dim); }
.committee-plate-note svg { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; color: var(--crimson); }

/* ————————————————————————————————————————————————————————————————————
   COMMITTEE PAGE — v2 · dossier reader (content.pages build-out)
   Reading-progress hairline · scroll-spy section rail · numbered
   dossier sections · focus chips · closing kicker line. All cv-
   prefixed; nothing above is touched.
   ———————————————————————————————————————————————————————————————————— */

.cv-progress {
  position: fixed;
  top: 63px;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: rgba(236, 225, 203, 0.06);
}
@media (min-width: 640px) { .cv-progress { top: 76px; } }
.cv-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--crimson-deep), var(--crimson));
  transform: scaleX(0);
  transform-origin: left;
}

/* dossier fact strip under the plate */
.cv-facts {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.5);
}
.cv-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
}
.cv-fact + .cv-fact { border-top: 1px solid var(--line); }
.cv-fact span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
.cv-fact strong {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--beige);
  text-align: right;
}

/* body layout — rail + content */
.cv-body { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.cv-rail {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 65px;
  z-index: 55;
  background: rgba(13, 10, 8, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
  padding: 0.55rem 0.25rem;
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
}
.cv-rail::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .cv-rail { top: 77px; margin-inline: -2rem; padding-inline: 2rem; }
}
.cv-rail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  background: none;
  border: 1px solid transparent;
  color: var(--beige-dim);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.cv-rail-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 10px;
  color: var(--crimson);
  opacity: 0.65;
  transition: opacity 0.3s;
}
.cv-rail-link:hover { color: var(--beige); }
.cv-rail-link.on {
  color: var(--beige);
  border-color: rgba(200, 16, 46, 0.55);
  background: rgba(200, 16, 46, 0.08);
}
.cv-rail-link.on .cv-rail-num { opacity: 1; }

@media (min-width: 1024px) {
  .cv-body { grid-template-columns: 12rem 1fr; gap: 3.5rem; align-items: start; }
  .cv-rail {
    position: sticky;
    top: 7.5rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    overflow: visible;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-left: 1px solid var(--line);
    padding: 0.25rem 0 0.25rem 0;
    margin-inline: 0;
    padding-inline: 0;
  }
  .cv-rail-link { border: none; border-left: 2px solid transparent; padding: 0.65rem 0 0.65rem 1.1rem; margin-left: -1px; }
  .cv-rail-link.on { border-left-color: var(--crimson); background: none; }
}

/* numbered dossier sections */
.cv-content { min-width: 0; }
.cv-sec { padding-block: 2.6rem; scroll-margin-top: 8.5rem; }
.cv-sec + .cv-sec { border-top: 1px solid var(--line); }
.cv-sec-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.cv-sec-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--crimson);
  flex-shrink: 0;
}
.cv-sec-rule { flex: 1; height: 1px; background: var(--line); align-self: center; }
.cv-sec-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  color: var(--beige);
}
.cv-sec-body p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--beige-dim);
}
.cv-sec-body p + p { margin-top: 1rem; }

/* focus chips */
.cv-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.cv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.5);
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--beige);
  cursor: default;
  transition: border-color 0.35s, background-color 0.35s, transform 0.35s var(--ease-out);
}
.cv-chip:hover {
  border-color: rgba(200, 16, 46, 0.6);
  background: rgba(200, 16, 46, 0.07);
  transform: translateY(-2px);
}
.cv-chip-diamond {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--crimson);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-out);
}
.cv-chip:hover .cv-chip-diamond { transform: rotate(45deg) scale(1.35); }

/* closing kicker line */
.cv-kicker-line {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-top: 2.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.4;
  color: var(--beige);
}
.cv-quote-ic { width: 16px; height: 16px; color: var(--crimson); flex-shrink: 0; align-self: center; }

/* agendas panel inside the dossier */
.cv-agendas { margin-top: 0; }
.agenda-roman { font-family: var(--font-display); font-style: italic; color: var(--crimson); margin-right: 0.25rem; }
.committee-cta { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ———————————————— FAQS ———————————————— */
.faq-list { margin-top: 3rem; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.5rem 0.25rem; cursor: pointer; list-style: none;
  font-size: 1.05rem; font-weight: 500; color: var(--beige);
  transition: color 0.3s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--crimson); }
.faq-num { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--crimson); min-width: 2rem; }
.faq-q-text { flex: 1; }
.faq-chev { width: 16px; height: 16px; color: var(--beige-dim); transition: transform 0.3s var(--ease-out); flex-shrink: 0; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a { padding: 0 0.25rem 1.5rem 3.25rem; }
.faq-a p { max-width: 62ch; font-size: 0.95rem; line-height: 1.85; color: var(--beige-dim); }

/* ————— Registrations veiled (Opening Soon) ————— */
#reg-box { position: relative; }
#reg-box.is-veiled > *:not(.reg-veil) {
  filter: blur(7px) saturate(0.6);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.reg-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: center;
  padding: 2rem;
  background: rgba(20, 15, 12, 0.22);
}
.reg-veil-stamp {
  display: inline-block;
  padding: 10px 20px 9px;
  border: 1px solid rgba(236, 225, 203, 0.3);
  outline: 1px solid rgba(200, 16, 46, 0.4);
  outline-offset: 4px;
  border-radius: 2px;
  background: rgb(200, 16, 46);
  color: rgb(236, 225, 203);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 0 6px 24px rgba(200, 16, 46, 0.35);
}
.reg-veil-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(179, 164, 135, 0.9);
  max-width: 44ch;
  line-height: 1.8;
}
.hero-regens.is-idle .live-dot-ping { display: none; }
.hero-regens.is-idle .live-dot-core { background: rgba(179, 164, 135, 0.55); }

/* ————— Committees veiled (CONFIG.COMMITTEES_REVEALED = false) —————
   Same treatment as the register veil: the real deck renders in place,
   blurred + inert under a centered "Coming Soon" stamp. The deck is capped
   to a single screen (no pin run) so the section passes like any other.
   Flip the flag in config.js and every rule below stops applying. */
.view.is-veiled .scroll-hint { display: none; }
#deck.is-veiled .deck-sticky > *:not(.reg-veil) {
  filter: blur(16px) saturate(0.35);
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}
#deck.is-veiled .reg-veil { z-index: 30; }  /* above rail z-20 / viewport z-10 */

/* deep-link dossier pages: veil everything except the crumb */
#committee-view .page-wrap { position: relative; }
#committee-view .page-wrap.is-veiled > *:not(.crumb):not(.reg-veil) {
  filter: blur(14px) saturate(0.4);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
#committee-view .page-wrap.is-veiled .reg-veil {
  bottom: auto;
  height: 100vh;  /* stamp centered in the first screen */
  z-index: 30;    /* below the fixed nav (z-80) */
}

/* sealed-season veil panel (committees deck) + hidden sections */
.committee-veil { gap: 0.9rem; background: rgba(20, 15, 12, 0.4); }
.veil-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(179, 164, 135, 0.85);
}
.veil-line {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 600;
  color: rgba(236, 225, 203, 0.95);
  line-height: 1.1;
}
.veil-line em { font-style: italic; color: var(--crimson); }
.veil-ticks { display: flex; gap: 10px; margin-top: 0.4rem; }
.veil-ticks i {
  width: 5px;
  height: 5px;
  background: rgba(200, 16, 46, 0.75);
  transform: rotate(45deg);
}
.veil-ticks i:nth-child(odd) { background: rgba(236, 225, 203, 0.35); }
#exec-strip[hidden],
#chamber-note[hidden] { display: none; }
.soon-panel {
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.6);
  padding: 4.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.soon-panel-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: rgba(236, 225, 203, 0.92);
}
.soon-panel-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(179, 164, 135, 0.9);
  max-width: 52ch;
  line-height: 1.9;
}

/* ————— Easter egg — invisible hitbox on the footer "Eighth Edition" tag ————— */
.egg-hit {
  background: none;
  border: 0;
  padding: 0.55em 0.9em;      /* enlarges the hitbox past the glyphs… */
  margin: -0.55em -0.9em;     /* …without shifting the surrounding text */
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: default;            /* deliberately not pointer — it's a secret */
  -webkit-tap-highlight-color: transparent;
}
.egg-hit:focus-visible { outline: 1px dashed var(--crimson); outline-offset: 3px; } /* keyboard users only */

.egg-modal {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  outline: 1px dashed rgba(200, 16, 46, 0.35); /* ticket-style inset frame */
  outline-offset: -0.65rem;
  padding: 2.5rem 2.25rem 2.25rem;
  text-align: center;
  animation: egg-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; /* overshoot stamp-in */
}
/* confetti canvas paints over the modal, never eats clicks */
.egg-confetti {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@keyframes egg-pop {
  0% { opacity: 0; transform: scale(0.7) rotate(-3deg); }
  60% { opacity: 1; transform: scale(1.045) rotate(1.2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.egg-close { position: absolute; top: 0.9rem; right: 0.9rem; }
.egg-icon {
  width: 38px;
  height: 38px;
  color: var(--crimson);
  display: block;
  margin-inline: auto;
  animation: egg-wiggle 1.5s ease-in-out infinite;
}
@keyframes egg-wiggle {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(9deg) scale(1.08); }
}
.egg-kicker {
  margin-top: 1.1rem;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
.egg-title {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--beige);
}
.egg-caution {
  margin-top: 1.2rem;
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crimson);
  border: 1px solid rgba(200, 16, 46, 0.4);
  padding: 0.55em 1.1em;
}
.egg-copy { margin-top: 1.05rem; font-size: 0.9rem; line-height: 1.65; color: var(--beige-dim); }
.egg-rarity {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--beige-dim);
}
.egg-rarity em { font-style: normal; color: var(--beige); font-weight: 600; }
.egg-badge {
  margin-top: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
.egg-badge::before,
.egg-badge::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--line);
}
.egg-badge b { color: var(--crimson); font-weight: 700; letter-spacing: 0.18em; }
.egg-seal {
  margin-top: 1.45rem;
  background: none;
  border: 1px solid var(--line);
  color: var(--beige-dim);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 1em 1.7em;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.egg-seal:hover { border-color: var(--crimson); color: var(--beige); }
.egg-sign {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--beige);
}
.egg-sign span {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
@media (prefers-reduced-motion: reduce) {
  .egg-modal, .egg-icon { animation: none; }
}

/* ————————————————————————————————————————————————————————————————
   ABOUT PAGE — v2 dossier redesign
   A six-chapter scroll narrative: hero → crimson ticker →
   scroll-lit origin → count-up stat wall → scroll-filled timeline →
   cursor-spotlight Hyderabad panel → arrive/leave exchange →
   live venue map → take-your-seat close.
   All ab- prefixed; nothing above is touched.
   ———————————————————————————————————————————————————————— */

.ab-main {
  position: relative;
}

/* oversized ghost edition year behind the hero head */
.ab-hero-watermark {
  position: absolute;
  top: 2.5rem;
  right: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(6rem, 16vw, 14rem);
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ab-main .section-head,
.ab-scroll-cue { position: relative; z-index: 1; }

/* hero fact chips */
.ab-hero-meta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ab-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.5);
  padding: 0.55rem 0.95rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--beige-dim);
  transition: border-color 0.3s, color 0.3s;
}
.ab-hero-chip:hover { border-color: rgba(200, 16, 46, 0.55); color: var(--beige); }
.ab-chip-icon { width: 13px; height: 13px; color: var(--crimson); flex-shrink: 0; }

/* scroll cue — label over a breathing hairline */
.ab-scroll-cue {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ab-scroll-cue-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--beige-dim);
}
.ab-scroll-cue-line {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--crimson), rgba(200, 16, 46, 0));
  transform-origin: left;
  animation: abCue 2.4s var(--ease-out) infinite;
}
@keyframes abCue {
  0% { transform: scaleX(0.2); opacity: 0.4; }
  45% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0.2); opacity: 0.4; }
}

/* ————— crimson ticker band (full-bleed over the page padding) ————— */
.ab-ticker {
  margin-block: 4.5rem 1rem;
  margin-inline: calc(50% - 50vw); /* full bleed — end to end on every screen */
  overflow: hidden;
  background: linear-gradient(90deg, var(--crimson-deep), var(--crimson) 18%, var(--crimson) 82%, var(--crimson-deep));
  border-block: 1px solid rgba(246, 238, 221, 0.16);
  padding-block: 0.85rem;
  user-select: none;
}
.ab-ticker-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
  align-items: center;
  gap: 2.25rem;
}
.ab-ticker:hover .ab-ticker-track { animation-play-state: paused; }
.ab-ticker-half {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding-right: 2.25rem;
}
.ab-ticker-word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #f6eedd;
  white-space: nowrap;
}
.ab-ticker-diamond {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: rgba(246, 238, 221, 0.75);
  display: inline-block;
  flex-shrink: 0;
}

/* ————— chapter scaffolding ————— */
.ab-section { padding-top: 5rem; position: relative; }
.ab-section:last-child { padding-bottom: 1rem; }
.ab-kicker-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}
.ab-kicker-diamond {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--crimson);
  flex-shrink: 0;
}
.ab-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  color: var(--beige);
  max-width: 56rem;
}
.ab-h2-sub {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--beige-dim);
  max-width: 42rem;
}

/* ————— chapter I · the origin (scroll-lit manifesto) ————— */
.ab-lit-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.06;
  color: var(--beige);
  max-width: 60rem;
}
.ab-lit-lead {
  margin-top: 1.75rem;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.6;
  color: var(--beige);
  max-width: 52rem;
  font-weight: 300;
}
.ab-origin-cols {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 72rem;
}
@media (min-width: 900px) {
  .ab-origin-cols { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
.ab-origin-p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--beige-dim);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  position: relative;
}
/* small crimson tick on each column's hairline */
.ab-origin-p::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.25rem;
  height: 1px;
  background: var(--crimson);
}

/* ————— chapter II · stat wall (count-up) ————— */
.ab-stat-wall {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  max-width: 72rem;
}
@media (min-width: 900px) {
  .ab-stat-wall { grid-template-columns: repeat(4, 1fr); }
}
.ab-stat {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 1.5rem 2.25rem;
  transition: background-color 0.35s;
}
.ab-stat:hover { background: rgba(22, 17, 13, 0.65); }
.ab-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--crimson), rgba(200, 16, 46, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.ab-stat:hover::before { transform: scaleX(1); }
.ab-stat-top { display: flex; align-items: center; gap: 0.85rem; }
.ab-stat-index {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--beige-dim);
  transition: color 0.35s;
}
.ab-stat:hover .ab-stat-index { color: var(--crimson); }
.ab-stat-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  transition: background 0.4s;
}
.ab-stat:hover .ab-stat-rule { background: linear-gradient(90deg, var(--crimson-deep), rgba(142, 11, 33, 0)); }
.ab-stat-num {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #f6eedd 12%, #d6c5a3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 0.45s var(--ease-out), filter 0.45s;
}
.ab-stat:hover .ab-stat-num {
  transform: translateY(-3px);
  filter: brightness(1.08) drop-shadow(0 8px 20px rgba(200, 16, 46, 0.16));
}
/* the roman VIII — nothing to count, so it shimmers instead */
.ab-stat-num--roman span {
  background: linear-gradient(
    110deg,
    var(--beige-dim) 22%,
    #f6eedd 38%,
    var(--crimson) 50%,
    #f6eedd 62%,
    var(--beige-dim) 78%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: statsShimmer 4.5s linear infinite;
}
.ab-stat-label {
  margin-top: 0.7rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  line-height: 1.9;
  color: var(--beige-dim);
  transition: color 0.3s;
}
.ab-stat:hover .ab-stat-label { color: var(--crimson); }
.ab-stat-ghost {
  position: absolute;
  right: -0.4rem;
  bottom: -1.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(5rem, 8vw, 7.5rem);
  line-height: 1;
  color: rgba(236, 225, 203, 0.06);
  pointer-events: none;
  user-select: none;
  transition: color 0.45s;
}
.ab-stat:hover .ab-stat-ghost { color: rgba(200, 16, 46, 0.12); }

/* ————— chapter III · charter accordion ————— */
.ab-charter {
  margin-top: 2.75rem;
  border-top: 1px solid var(--line);
  max-width: 52rem;
}
.ab-article { border-bottom: 1px solid var(--line); }
.ab-article-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.4rem 0.25rem;
  transition: background-color 0.3s;
}
.ab-article-head:hover { background: rgba(22, 17, 13, 0.5); }
.ab-article-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--beige-dim);
  width: 3.4rem;
  flex-shrink: 0;
  transition: color 0.3s;
}
.ab-article.open .ab-article-num,
.ab-article-head:hover .ab-article-num { color: var(--crimson); }
.ab-article-title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  color: var(--beige);
  line-height: 1.25;
}
.ab-article-chev {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--beige-dim);
  flex-shrink: 0;
  transition: transform 0.45s var(--ease-out), border-color 0.3s, color 0.3s;
}
.ab-article-chev svg { width: 14px; height: 14px; }
.ab-article.open .ab-article-chev {
  transform: rotate(180deg);
  border-color: rgba(200, 16, 46, 0.55);
  color: var(--crimson);
}
/* animated open/close via the grid-rows trick (no height measuring) */
.ab-article-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.ab-article.open .ab-article-body { grid-template-rows: 1fr; }
.ab-article-inner { overflow: hidden; }
.ab-article-inner p {
  padding: 0 0.25rem 1.5rem 4.65rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--beige-dim);
  max-width: 40rem;
}
/* crimson tick on the opened article's left edge */
.ab-article.open { box-shadow: inset 2px 0 0 var(--crimson); }
@media (max-width: 640px) {
  .ab-article-inner p { padding-left: 0.25rem; }
}

/* ————— chapter IV · the road to the gavel (scroll-filled spine) ————— */
.ab-timeline {
  margin-top: 3rem;
  position: relative;
  max-width: 64rem;
}
.ab-tl-spine {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 15px; /* centred under the 32px mobile node column */
  width: 2px;
  background: var(--line);
}
.ab-tl-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%; /* driven by scroll in main.js */
  background: linear-gradient(180deg, var(--crimson), var(--crimson-deep));
  box-shadow: 0 0 12px rgba(200, 16, 46, 0.45);
}
.ab-tl-list {
  list-style: none;
  display: grid;
  gap: 2.4rem;
}
.ab-tl-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
}
.ab-tl-node {
  grid-column: 1;
  justify-self: start;
  margin-left: 9px; /* centred on the spine (15px − half node) */
  margin-top: 0.35rem;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: var(--ink);
  border: 1px solid rgba(236, 225, 203, 0.25);
  transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
  position: relative;
}
.ab-tl-card {
  grid-column: 2;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.45);
  padding: 1.35rem 1.5rem 1.45rem;
  transition: border-color 0.4s, background-color 0.4s, transform 0.4s var(--ease-out);
}
.ab-tl-when {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--beige-dim);
  transition: color 0.4s;
}
.ab-tl-badge {
  display: inline-block;
  border: 1px solid rgba(200, 16, 46, 0.5);
  color: var(--crimson);
  font-size: 8px;
  letter-spacing: 0.24em;
  padding: 0.3em 0.7em;
  line-height: 1;
}
.ab-tl-badge--tba { border-color: var(--line); color: var(--beige-dim); }
.ab-tl-title {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--beige);
  line-height: 1.2;
  transition: color 0.4s;
}
.ab-tl-desc {
  margin-top: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--beige-dim);
  max-width: 34rem;
}
/* done node: filled crimson */
.ab-tl-item.is-done .ab-tl-node,
.ab-tl-item.lit .ab-tl-node {
  background: var(--crimson);
  border-color: var(--crimson);
  box-shadow: 0 0 14px rgba(200, 16, 46, 0.55);
}
/* live node: hollow crimson + pinging halo */
.ab-tl-item.is-live .ab-tl-node { border-color: var(--crimson); }
.ab-tl-item.is-live .ab-tl-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--crimson);
  animation: ping-soft 2.2s var(--ease-out) infinite;
}
/* pinned nodes: beige — light up crimson as the spine reaches them */
.ab-tl-item.is-pinned .ab-tl-node { border-color: rgba(236, 225, 203, 0.45); }
.ab-tl-item.lit .ab-tl-card {
  border-color: rgba(200, 16, 46, 0.4);
  background: rgba(30, 23, 18, 0.75);
  transform: translateY(-2px);
}
.ab-tl-item.lit .ab-tl-when { color: var(--beige); }
.ab-tl-item.is-done .ab-tl-when { color: var(--crimson); }

/* desktop: spine centred, cards alternating sides */
@media (min-width: 900px) {
  .ab-tl-spine { left: 50%; margin-left: -1px; }
  .ab-tl-item { grid-template-columns: 1fr 72px 1fr; }
  .ab-tl-node {
    grid-column: 2;
    justify-self: center;
    margin-left: 0;
    margin-top: 1.6rem;
  }
  .ab-tl-card { grid-row: 1; }
  .ab-tl-item:nth-child(odd) .ab-tl-card {
    grid-column: 1;
    justify-self: end;
    text-align: right;
  }
  .ab-tl-item:nth-child(odd) .ab-tl-when { justify-content: flex-end; }
  .ab-tl-item:nth-child(odd) .ab-tl-desc { margin-left: auto; }
  .ab-tl-item:nth-child(even) .ab-tl-card { grid-column: 3; justify-self: start; }
  /* cards keep hairlines only — no inset ticks */
}

/* ————— chapter V · meet the secretariat (Instagram CTA, config-gated) ————— */
.ab-secretariat {
  margin-top: 3rem;
  position: relative;
  max-width: 54rem;
}
.ab-sec-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.72);
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}
.ab-sec-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5.5rem;
  height: 2px;
  background: var(--crimson);
}
.ab-sec-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(236, 225, 203, 0.07);
  pointer-events: none;
}
.ab-sec-ghost {
  position: absolute;
  right: -0.5rem;
  bottom: -3.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11rem;
  line-height: 1;
  color: rgba(200, 16, 46, 0.07);
  user-select: none;
  pointer-events: none;
  transition: color 0.5s;
}
.ab-sec-card:hover .ab-sec-ghost { color: rgba(200, 16, 46, 0.12); }
.ab-sec-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.ab-sec-ic { width: 15px; height: 15px; color: var(--crimson); }
.ab-sec-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  color: var(--beige);
}
.ab-sec-copy {
  max-width: 34rem;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--beige-dim);
}
.ab-sec-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.ab-sec-hint {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(179, 164, 135, 0.7);
}
.ab-sec-handle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--beige-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.2rem;
  transition: color 0.3s, border-color 0.3s;
}
.ab-sec-handle:hover { color: var(--crimson); border-color: rgba(200, 16, 46, 0.6); }
.ab-sec-handle-ic { width: 13px; height: 13px; }
/* the Coming Soon seal — same treatment as the committees deck;
   CONFIG.SECRETARIAT_REVEALED = true retires every rule below */
.ab-secretariat.is-veiled > *:not(.reg-veil) {
  filter: blur(10px) saturate(0.45);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.ab-secretariat.is-veiled .reg-veil { z-index: 6; }
.ab-sec-veil { background: rgba(20, 15, 12, 0.32); }
.reg-veil.ab-sec-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  padding: 2rem;
}

/* ————— chapter VI · the exchange (arrive → leave) ————— */
.ab-exchange {
  margin-top: 3rem;
  display: grid;
  gap: 1.1rem;
  max-width: 72rem;
}
.ab-ex-row {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: stretch;
}
.ab-ex-cell {
  border: 1px solid var(--line);
  background: rgba(22, 17, 13, 0.4);
  padding: 1.2rem 1.4rem 1.3rem;
  transition: border-color 0.4s, background-color 0.4s;
}
.ab-ex-tag {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--beige-dim);
  transition: color 0.35s;
}
.ab-ex-text {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.3;
  color: var(--beige);
}
.ab-ex-cell--out { border-color: rgba(200, 16, 46, 0.28); }
.ab-ex-cell--out .ab-ex-tag { color: var(--crimson); }
.ab-ex-arrow {
  display: grid;
  place-items: center;
  color: var(--beige-dim);
  transition: color 0.35s, transform 0.45s var(--ease-out);
}
.ab-ex-arrow svg { width: 20px; height: 20px; }
.ab-ex-row:hover .ab-ex-cell { border-color: rgba(200, 16, 46, 0.4); background: rgba(30, 23, 18, 0.65); }
.ab-ex-row:hover .ab-ex-cell .ab-ex-tag { color: var(--crimson); }
.ab-ex-row:hover .ab-ex-arrow { color: var(--crimson); transform: translateX(6px); }
@media (max-width: 700px) {
  .ab-ex-row { grid-template-columns: 1fr; }
  .ab-ex-arrow { padding: 0.35rem 0; transform: rotate(90deg); }
  .ab-ex-row:hover .ab-ex-arrow { transform: rotate(90deg) translateX(6px); }
}

/* ————— final · take your seat ————— */
.ab-final { display: flex; justify-content: center; }
.ab-final-box {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  max-width: 56rem;
  width: 100%;
}
/* crimson wash rising from the bottom edge */
.ab-final-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at 50% 115%, rgba(200, 16, 46, 0.16), transparent 65%);
  pointer-events: none;
}
.ab-final-watermark {
  position: absolute;
  right: -0.75rem;
  bottom: -2.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(7rem, 14vw, 12rem);
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
}
.ab-final-title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1.02;
  color: var(--beige);
}
.ab-final-sub {
  margin-top: 1.25rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--beige-dim);
  max-width: 32rem;
  margin-inline: auto;
}
.ab-final .hero-ctas {
  margin-top: 2.25rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ab-final-box > * { position: relative; z-index: 1; }
.ab-final-watermark { z-index: 0; }

/* ————— about v2 · reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  .ab-ticker-track,
  .ab-scroll-cue-line,
  .ab-stat-num--roman span,
  .ab-tl-item.is-live .ab-tl-node::after { animation: none; }
  .ab-article-body { transition: none; }
}

/* ————————————————————————————————————————————————————————————————————
   ABOUT PAGE — v2.1 · CHAPTER VII, THE GROUNDS (live venue map)
   Dossier "live exhibit": sealed panel that loads the Google Maps
   embed only when it scrolls near, then fades the veil away.
   ———————————————————————————————————————————————————————————————————— */

.ab-map-intro {
  max-width: 66ch;
  margin: 1.1rem 0 2.2rem;
  color: var(--beige-dim);
  font-size: 1.02rem;
  line-height: 1.75;
}

/* the exhibit frame */
.ab-map {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
}
.ab-map::before,
.ab-map::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--crimson);
  transform: rotate(45deg);
  z-index: 3;
}
.ab-map::before { top: -4px; left: -4px; }
.ab-map::after { bottom: -4px; right: -4px; }

/* instrument strips */
.ab-map-top,
.ab-map-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.15rem;
}
.ab-map-top { border-bottom: 1px solid var(--line); }
.ab-map-bottom { border-top: 1px solid var(--line); flex-wrap: wrap; }

.ab-map-live {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
  white-space: nowrap;
}
.ab-map-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crimson);
  animation: ping-soft 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.ab-map-coords {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--beige-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the stage: veil above, frame below */
.ab-map-stage {
  position: relative;
  aspect-ratio: 16 / 8.2;
  background: var(--panel-2);
}
.ab-map-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  color: var(--beige-dim);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(200, 16, 46, 0.055) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(200, 16, 46, 0.055) 23px 24px);
  transition: opacity 0.7s var(--ease-out);
}
.ab-map-veil-ic {
  width: 26px;
  height: 26px;
  color: var(--crimson);
}
.ab-map.is-loaded .ab-map-veil {
  opacity: 0;
  pointer-events: none;
}
.ab-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.ab-map.is-loaded .ab-map-frame { opacity: 1; }

/* bottom strip: address + deep link */
.ab-map-addr {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 62ch;
  color: var(--beige-dim);
  font-size: 0.78rem;
  line-height: 1.55;
}
.ab-map-ic {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--crimson);
}
.ab-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--beige);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--crimson);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}
.ab-map-link:hover { color: var(--crimson); }
.ab-map-link .ab-map-ic {
  width: 13px;
  height: 13px;
  margin: 0;
  transition: transform 0.35s var(--ease-out);
}
.ab-map-link:hover .ab-map-ic { transform: translateX(4px); }

/* facts under the exhibit */
.ab-map-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--line);
}
.ab-map-note {
  display: flex;
  gap: 0.85rem;
  padding: 1.15rem 1.3rem;
  background: var(--panel);
}
.ab-map-note-ic {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--crimson);
}
.ab-map-note strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--beige);
}
.ab-map-note span {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--beige-dim);
}

@media (max-width: 860px) {
  .ab-map-stage { aspect-ratio: 4 / 3.6; }
  .ab-map-coords { display: none; }
  .ab-map-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .ab-map-link { white-space: normal; }
  .ab-map-notes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-map-dot { animation: none; }
  .ab-map-frame,
  .ab-map-veil { transition: none; }
}

/* ————————————————————————————————————————————————————————————————————
   HOME — v2 · THE SUMMIT FILE
   Crimson ticker band, lit manifesto (reveals at viewport centre),
   count-up file wall, dossier pillars, ghost-numbered preview cards,
   grounds strip, hero scroll cue. Overrides the v1 blocks above —
   this section wins the cascade.
   ———————————————————————————————————————————————————————————————————— */

/* ticker → crimson band */
.ticker {
  background: var(--crimson-deep);
  border-block: 1px solid rgba(10, 7, 5, 0.45);
  padding-block: 0.85rem;
}
.ticker-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.42em;
  color: var(--beige);
  opacity: 0.94;
}
.ticker-diamond {
  width: 6px;
  height: 6px;
  background: rgba(236, 225, 203, 0.75);
  transform: rotate(45deg);
}

/* hero stats — fourth (roman) cell + count-up cells */
.stats-num--roman { font-style: italic; }
.stats-cell:nth-child(4) { animation-delay: 1.12s; }

/* the conference — manifesto type, lit at viewport centre */
.about .section-head-title { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.about .about-grid { align-items: start; }
.about-p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  line-height: 1.52;
  color: var(--beige);
  text-wrap: pretty;
}
.about-p--mt { margin-top: 1.6rem; }
/* standing orders — numbered dossier rows (icons retire, numerals speak) */
.about-list { counter-reset: hmx-order; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.about-list .about-item { counter-increment: hmx-order; border-bottom: 1px solid var(--line); padding: 1.05rem 0.25rem; }
.about-list .about-item::before {
  content: "0" counter(hmx-order);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--crimson);
  width: 2.2rem;
  flex-shrink: 0;
}
.about-list .about-icon { display: none; }
.about-list .about-item-text { font-size: 0.925rem; }

/* by the numbers — count-up file wall */
.hmx-file { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(200, 16, 46, 0.045), rgba(22, 17, 13, 0) 70%); }
.hmx-file .container { padding-block: 4.25rem; }
.hmx-file-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hmx-stat { position: relative; padding: 1.4rem 1.4rem 1.7rem; border-left: 1px solid var(--line); overflow: hidden; }
.hmx-stat:first-child { border-left: none; }
.hmx-stat-top { display: flex; align-items: center; gap: 0.75rem; }
.hmx-stat-index { font-size: 10px; font-weight: 600; letter-spacing: 0.3em; color: var(--crimson); }
.hmx-stat-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200, 16, 46, 0.55), rgba(200, 16, 46, 0)); }
.hmx-stat-num {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.7rem, 5vw, 4.3rem);
  line-height: 1;
  color: var(--beige);
}
.hmx-stat-num--roman span { font-style: italic; color: var(--crimson); }
.hmx-stat-label { margin-top: 0.55rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--beige-dim); }
.hmx-stat-ghost {
  position: absolute;
  right: -0.4rem;
  bottom: -1.7rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 6.25rem;
  line-height: 1;
  color: rgba(236, 225, 203, 0.045);
  pointer-events: none;
  transition: color 0.45s;
}
.hmx-stat:hover .hmx-stat-ghost { color: rgba(200, 16, 46, 0.12); }
@media (max-width: 900px) {
  .hmx-file-grid { grid-template-columns: repeat(2, 1fr); }
  .hmx-stat { border-top: 1px solid var(--line); border-left: none; }
  .hmx-stat:nth-child(even) { border-left: 1px solid var(--line); }
  .hmx-stat:nth-child(-n + 2) { border-top: none; }
}

/* pillars — crimson sweep + numeral burn */
.pillar-box { position: relative; overflow: hidden; }
.pillar-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.pillar-box:hover::after { transform: scaleX(1); }
.pillar-num { font-size: 1.35rem; color: rgba(236, 225, 203, 0.16); transition: color 0.3s; }
.pillar-box:hover .pillar-num { color: rgba(200, 16, 46, 0.6); }

/* preview cards — ghost numerals + lift */
.preview-card { position: relative; overflow: hidden; transition: background-color 0.3s, transform 0.45s var(--ease-out); }
.preview-card:hover { transform: translateY(-3px); }
.preview-ghost {
  position: absolute;
  right: 0.6rem;
  bottom: -1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 5.75rem;
  line-height: 1;
  color: rgba(236, 225, 203, 0.05);
  pointer-events: none;
  transition: color 0.4s;
}
.preview-card:hover .preview-ghost { color: rgba(200, 16, 46, 0.16); }

/* grounds strip */
.hmx-venue {
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(200, 16, 46, 0.08), rgba(200, 16, 46, 0.015) 55%, rgba(22, 17, 13, 0));
}
.hmx-venue-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 1.75rem; padding-block: 2.1rem; }
.hmx-venue-icon { width: 34px; height: 34px; color: var(--crimson); flex-shrink: 0; }
.hmx-venue-text { flex: 1; min-width: 17rem; }
.hmx-venue-title {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  line-height: 1.15;
  color: var(--beige);
}
.hmx-venue-sub { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.6; color: var(--beige-dim); max-width: 34rem; }

/* v2 reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .pillar-box::after, .preview-card, .preview-ghost, .hmx-stat-ghost { transition: none; }
}

/* ————————————————————————————————————————————————————————————————
   r23 · config-gated seals + countdown focus (desktop)
   1 · home four-card committees preview under the deck's veil
   2 · venue redaction — every grounds mention blurs until
       CONFIG.VENUE_REVEALED flips; the map exhibit swaps its
       plotting veil for the "Coming Soon" seal and never arms
   3 · countdown hover — apple-style lift + focus, desktop only
   ———————————————————————————————————————————————————————————————— */

/* — 1 · home preview sealed (COMMITTEES_REVEALED = false) — */
.preview-grid.is-sealed { position: relative; }
.preview-grid.is-sealed > *:not(.reg-veil) {
  filter: blur(13px) saturate(0.35);
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}
.preview-veil {
  border: 1px solid var(--line);
  background: rgba(20, 15, 12, 0.42);
}

/* — 2 · venue redaction (VENUE_REVEALED = false) —
   the spans live in the markup permanently; without #site.venue-sealed
   they are inert wrappers, so reveal day needs zero HTML edits */
.venue-redact { transition: filter 0.7s var(--ease-out), opacity 0.7s var(--ease-out); }
.venue-sealed .venue-redact {
  filter: blur(9px);
  opacity: 0.8;
  user-select: none;
  pointer-events: none;
  cursor: default;
}
/* the map exhibit under seal: instrument strip goes quiet, the plotting
   veil swaps for the stamp, the frame never loads (js skips arming) */
.ab-map-sealed {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1.5rem;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(200, 16, 46, 0.055) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(200, 16, 46, 0.055) 23px 24px);
  background-color: rgba(20, 15, 12, 0.55);
}
.venue-sealed .ab-map-sealed { display: flex; }
.venue-sealed .ab-map-top { visibility: hidden; }
.venue-sealed .ab-map-veil { display: none; }
.venue-sealed .ab-map-live-note { display: none; }

/* — 3 · countdown focus mode (desktop pointers only) —
   hover = apple spotlight: the page drops behind a frosted veil and the
   readout detaches as a fixed ghost clone that springs up ~2x, floating
   above the blur — the only thing in focus. leave = everything settles
   back. JS (main.js · countdown focus) owns the clone lifecycle. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .countdown {
    padding: 0.55rem 0.95rem;
    margin: -0.55rem -0.95rem;  /* hotbox grows, layout untouched */
    cursor: default;
  }
  .cd-veil {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(10, 7, 5, 0.38);
    -webkit-backdrop-filter: blur(16px) saturate(0.65) brightness(0.62);
    backdrop-filter: blur(16px) saturate(0.65) brightness(0.62);
    opacity: 0;
    transition: opacity 0.38s var(--ease-out);
    pointer-events: none;
  }
  .cd-veil.is-on { opacity: 1; }
  .cd-ghost {
    position: fixed;
    z-index: 91;
    margin: 0;  /* inline left/top/width must land exactly on the original */
    pointer-events: auto;
    cursor: default;
    transform: translateY(0) scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.55s cubic-bezier(0.32, 1.18, 0.35, 1);
  }
  .cd-ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(236, 225, 203, 0.16);
    background: rgba(15, 11, 9, 0.74);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6);
  }
  .cd-ghost > * { position: relative; z-index: 1; }
  .cd-ghost.is-on { transform: translateY(-0.75rem) scale(2); }
  /* spring containment: the lift (12px) must stay below the scale's
     downward growth (~18px on the 36px readout) so the box only ever
     grows around the parked cursor — the ghost can never drift out
     from under the mouse mid-hover (that churn was the r24 bug). */
}
@media (prefers-reduced-motion: reduce) {
  .venue-redact { transition: none; }
}