:root {
  --obsidian: #0B0A08;
  --obsidian-2: #15120E;
  --obsidian-3: #211C16;
  --parchment: #EDE3CC;
  --parchment-mute: #A99E84;
  --parchment-glow: #F5EDD7;
  --gold: #C8A653;
  --gold-deep: #8E7330;
  --oxblood: #5B1A1E;
  --vesper: #3A2A55;
  --ember: #E8723C;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78  0 0 0 0 0.65  0 0 0 0 0.32  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--obsidian); color: var(--parchment); }
html { scroll-behavior: smooth; }
body {
  font-family: "Newsreader", Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  background-image: var(--grain);
  background-attachment: fixed;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--obsidian); }

/* Text legibility — body copy carries a soft dark halo so it reads cleanly
   over the lit floor and warm stone of the chamber behind it. Display text
   (Cinzel) gets a heavier shadow because at large sizes the halo is barely
   visible without it. */
.hero .sub,
.hero .meta,
.hero .tagline,
section .lead,
section h2,
section .eyebrow,
.card p,
.card h3,
.card .sub,
.ward-card p,
.ward-card h4,
.ward-card .sub,
.ward-card .ladder,
.pledge p,
.pledge .quote,
.flywheel .closer,
.faq .q,
.faq .a,
.inscriptions td,
.inscriptions th,
.stats .cell .lbl,
.stats .cell .val,
.stats .cell .meta,
.doctrine .lines .line,
.invocation h2,
.invocation p {
  text-shadow: 0 1px 2px rgba(11, 10, 8, 0.95), 0 0 14px rgba(11, 10, 8, 0.7);
}
.hero h1,
.invocation h1 {
  text-shadow: 0 2px 4px rgba(11, 10, 8, 0.95), 0 0 24px rgba(11, 10, 8, 0.6);
}

/* Tablet scrim — a subtle dark substrate behind paragraph-heavy sections.
   Floor stays visible around the tablet; the text reads on dark stone. */
.scrim {
  background: rgba(11, 10, 8, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(142, 115, 48, 0.25);
  padding: 36px 40px;
}

.font-display { font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif; font-weight: 600; letter-spacing: 0.08em; }
.font-body    { font-family: "Newsreader", Georgia, serif; }
.font-ui      { font-family: "Inter", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.font-mono    { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-deep); padding-bottom: 1px; transition: border-color .2s, color .2s; }
a:hover { color: var(--parchment-glow); border-bottom-color: var(--gold); }
button { cursor: pointer; font: inherit; }

/* Three.js canvas — fills viewport, sits behind content */
#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
}

/* Content layer */
#content {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* NAV */
nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  background: linear-gradient(to bottom, rgba(11,10,8,0.92), rgba(11,10,8,0));
  pointer-events: none;
}
nav.top .brand-mini { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
nav.top .brand-mini svg { height: 28px; width: auto; }
nav.top .brand-mini .wm { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.18em; font-size: 15px; color: var(--parchment); }
nav.top .links { display: flex; gap: 28px; pointer-events: auto; font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
nav.top .links a { color: var(--parchment-mute); border: none; padding: 0; }
nav.top .links a:hover { color: var(--gold); }

/* Generic section frame */
section {
  position: relative;
  padding: 140px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
section .eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
section h2 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 44px;
  letter-spacing: 0.05em;
  color: var(--parchment);
  margin: 0 0 16px;
  line-height: 1.1;
}
section .lead {
  color: var(--parchment-mute);
  max-width: 720px;
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 56px;
}

/* HERO — sits over the 3D scene; tall so the chamber animates while user reads */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  text-align: center;
  padding: 120px 40px 72px;
  max-width: none;
}
.hero .arch-mark { width: 96px; height: 96px; margin-bottom: 28px; }
.hero h1 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: clamp(40px, 9vw, 96px);
  color: var(--parchment);
  margin: 0;
  line-height: 1;
}
.hero .floor-rule {
  height: 2px;
  background: var(--gold);
  width: 240px;
  margin: 18px 0 36px;
  box-shadow: 0 0 24px rgba(200,166,83,0.5);
}
.hero .tagline {
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: clamp(18px, 2.6vw, 26px);
  letter-spacing: 0.06em;
  color: var(--gold);
  margin: 0 0 28px;
}
.hero .sub {
  font-family: "Newsreader", serif;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.55;
  color: var(--parchment);
  max-width: 540px;
  margin: 0 0 36px;
}
.hero .floor-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 36px;
  border: 1px solid var(--gold-deep);
  background: rgba(21, 18, 14, 0.65);
  backdrop-filter: blur(2px);
  margin-bottom: 14px;
}
.hero .floor-counter .lbl {
  font-family: "Inter", sans-serif;
  letter-spacing: 0.22em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--parchment-mute);
}
.hero .floor-counter .val {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(28px, 5vw, 44px);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.hero .floor-counter .arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
  color: var(--gold);
}
.hero .meta {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  margin: 0 0 36px;
}
.hero .ctas { display: flex; gap: 20px; }
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 16px 32px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  text-decoration: none;
  transition: all .2s;
}

/* Secondary button at rest: opaque dark stone tablet so it reads cleanly
   over the warm corridor lighting behind it, instead of disappearing
   into the gold light pools. */
.btn-secondary {
  background: rgba(15, 12, 9, 0.85);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.btn-primary { background: var(--gold); color: var(--obsidian); }
/* Explicit color on hover: the global a:hover rule sets color: parchment-glow,
   which would match the button's hover background and make the label invisible.
   We win the cascade here by re-asserting the dark text. */
.btn-primary:hover {
  background: var(--parchment-glow);
  border-color: var(--parchment-glow);
  color: var(--obsidian);
  box-shadow: 0 0 24px rgba(245, 237, 215, 0.25);
}
/* Secondary hover: stone tablet "lifts" — text + border brighten to
   parchment-glow, deeper opaque fill, gold glow ring around it. */
.btn-secondary:hover {
  background: rgba(20, 16, 11, 0.95);
  color: var(--parchment-glow);
  border-color: var(--parchment-glow);
  box-shadow: 0 0 26px rgba(200, 166, 83, 0.32);
}
.btn-primary, .btn-secondary { border-radius: 0; }

.hero .scroll-cue {
  margin-top: 56px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero .scroll-cue .line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--gold-deep), transparent);
}

/* DOCTRINE — large declarative inscription */
.doctrine {
  text-align: center;
  padding: 200px 40px;
}
.doctrine .lines {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.doctrine .lines .line {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 38px;
  color: var(--gold);
  line-height: 1.2;
}
.doctrine .lines .rule {
  height: 1px;
  background: var(--gold-deep);
  width: 280px;
  margin: 0 auto;
}

/* TWO MARKETS */
.two-markets .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.card {
  background: rgba(21, 18, 14, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gold-deep);
  padding: 40px;
  position: relative;
}
.card h3 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 28px;
  color: var(--gold);
  margin: 0 0 8px;
}
.card .sub {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  margin: 0 0 24px;
}
.card p { color: var(--parchment); margin: 0 0 16px; }
.card .stats { font-family: "JetBrains Mono", monospace; color: var(--gold); font-size: 14px; line-height: 1.9; }

/* WARDS */
.wards .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ward-card {
  background: rgba(21, 18, 14, 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gold-deep);
  padding: 36px 32px;
  text-align: left;
}
.ward-card .sigil {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}
.ward-card h4 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 22px;
  color: var(--parchment);
  margin: 0 0 6px;
}
.ward-card .sub {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.ward-card p { color: var(--parchment-mute); margin: 0 0 18px; font-size: 15px; }
.ward-card .ladder { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--gold); line-height: 1.9; }

/* PLEDGE */
.pledge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.pledge h2 { margin-bottom: 24px; }
.pledge .quote {
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--gold);
  line-height: 1.4;
  border-left: 2px solid var(--gold);
  padding-left: 24px;
}

/* FLYWHEEL */
.flywheel {
  text-align: center;
}
.flywheel .ring {
  width: 100%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 24px auto 0;
  display: block;
  overflow: visible;
}
.flywheel .closer {
  font-family: "Cinzel", serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 24px;
  color: var(--gold);
  margin-top: 32px;
}

/* STATS — the Roll of Keepers */
.stats .tablet {
  background: rgba(21, 18, 14, 0.85);
  border: 1px solid var(--gold-deep);
  padding: 12px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats .cell {
  padding: 28px 32px;
  border-right: 1px solid var(--obsidian-3);
  border-bottom: 1px solid var(--obsidian-3);
}
.stats .cell:nth-child(4n) { border-right: none; }
.stats .cell:nth-last-child(-n+4) { border-bottom: none; }
.stats .cell .lbl {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  margin-bottom: 10px;
}
.stats .cell .val {
  font-family: "JetBrains Mono", monospace;
  font-size: 26px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stats .cell .meta {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  margin-top: 8px;
}
.stats .preview-tag {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  margin-top: 12px;
}

/* INSCRIPTIONS (tokenomics table) */
.inscriptions table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Newsreader", serif;
}
.inscriptions th, .inscriptions td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--obsidian-3);
  font-weight: 400;
}
.inscriptions th {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  width: 240px;
}
.inscriptions td { color: var(--parchment); }
.inscriptions td.mono { font-family: "JetBrains Mono", monospace; color: var(--gold); }

/* FAQ */
.faq .qa { border-bottom: 1px solid var(--obsidian-3); padding: 28px 0; }
.faq .qa:first-child { border-top: 1px solid var(--obsidian-3); }
.faq .q {
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--parchment);
  margin: 0 0 12px;
}
.faq .a { color: var(--parchment-mute); margin: 0; max-width: 760px; }

/* CLOSING INVOCATION — the final CTA before the footer */
.invocation {
  text-align: center;
  padding: 180px 40px;
}
.invocation .arch-final {
  width: 88px;
  height: 88px;
  margin: 0 auto 32px;
}
.invocation h2 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: clamp(40px, 6vw, 72px);
  color: var(--parchment);
  margin: 0 0 16px;
  line-height: 1.05;
}
.invocation .blessing {
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.05em;
  color: var(--gold);
  margin: 0 0 36px;
}
.invocation .sub {
  font-family: "Newsreader", serif;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--parchment-mute);
  max-width: 560px;
  margin: 0 auto 48px;
}
.invocation .floor-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 36px 0 0;
}
.invocation .ctas {
  display: inline-flex;
  gap: 20px;
}
.btn-primary.btn-large,
.btn-secondary.btn-large {
  padding: 22px 44px;
  font-size: 13px;
  letter-spacing: 0.28em;
}

/* Mobile — stack the closing CTAs and stretch each to full container width
   so the labels stay on one line instead of wrapping into three. */
@media (max-width: 600px) {
  .invocation .ctas {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .invocation .btn-primary.btn-large,
  .invocation .btn-secondary.btn-large {
    width: 100%;
    padding: 18px 24px;
    letter-spacing: 0.22em;
    font-size: 12px;
  }

  /* Same treatment for the hero CTAs so they don't go to three lines either. */
  .hero .ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
  }
  .hero .btn-primary,
  .hero .btn-secondary {
    width: 100%;
    padding: 12px 22px;
    letter-spacing: 0.20em;
  }

  /* Compress the hero so the entire lockup + CTAs fit on a phone in one
     viewport without forcing the user to scroll past a half-cropped button. */
  .hero {
    padding: 84px 24px 28px;
    min-height: 100svh; /* small-viewport-height: handles iOS toolbar */
  }
  .hero .arch-mark { width: 52px; height: 52px; margin-bottom: 14px; }
  .hero .floor-rule { width: 200px; margin: 12px 0 18px; }
  .hero .tagline { margin-bottom: 16px; }
  .hero .sub { margin-bottom: 22px; font-size: 14px; }
  .hero .floor-counter { padding: 14px 24px; gap: 12px; margin-bottom: 8px; }
  .hero .floor-counter .val { font-size: 28px; }
  .hero .meta { margin-bottom: 22px; }
  /* Scroll cue tightened so it sits visibly inside the viewport rather than
     pushed off the bottom by everything above it. */
  .hero .scroll-cue {
    margin-top: 22px;
    font-size: 9px;
    letter-spacing: 0.28em;
  }
  .hero .scroll-cue .line { height: 24px; }
}

/* FOOTER */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--gold-deep);
  margin-top: 40px;
  padding: 28px 40px 26px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-mute);
  background: rgba(11, 10, 8, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
footer .glyph { display: none; }
footer .gates { display: flex; gap: 24px; justify-content: center; margin: 0 0 14px; flex-wrap: wrap; }
footer .gates a { color: var(--parchment-mute); border: none; padding: 0; }
footer .gates a:hover { color: var(--gold); }
footer .meta { color: var(--parchment-mute); margin: 0; font-size: 10px; letter-spacing: 0.18em; }
footer .addr { font-family: "JetBrains Mono", monospace; color: var(--gold-deep); margin-top: 6px; font-size: 9px; letter-spacing: 0.06em; word-break: break-all; }

@media (max-width: 600px) {
  footer { padding: 22px 18px 20px; margin-top: 32px; }
  footer .gates { gap: 14px 18px; margin-bottom: 10px; font-size: 10px; }
  footer .meta { font-size: 9px; }
  footer .addr { display: none; }
}

/* RISK DISCLAIMER MODAL — gates the page on first visit. Persists ack to
   localStorage so it doesn't reappear. Locks scroll while open.
   The backdrop allows internal scrolling when the modal is taller than the
   viewport (small phones), and aligns to the top so nothing gets clipped. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 4, 3, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  transition: opacity 0.4s;
}
@media (min-height: 720px) {
  .modal-backdrop { align-items: center; }
}
.modal {
  background: var(--obsidian-2);
  border: 1px solid var(--gold-deep);
  max-width: 560px;
  width: 100%;
  padding: 44px 44px 36px;
  margin: auto 0;
  position: relative;
  box-shadow: 0 0 60px rgba(200, 166, 83, 0.08);
  text-shadow: none;
}
.modal .modal-arch {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: block;
}
.modal h2 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 28px;
  color: var(--parchment);
  margin: 0 0 8px;
  text-align: center;
}
.modal .modal-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: 0 0 28px;
}
.modal p.intro {
  font-family: "Newsreader", serif;
  color: var(--parchment);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.modal ul {
  margin: 0 0 24px;
  padding: 0 0 0 18px;
  color: var(--parchment-mute);
  font-family: "Newsreader", serif;
  font-size: 14.5px;
  line-height: 1.55;
}
.modal ul li { margin-bottom: 8px; }
.modal label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0 24px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--parchment);
  cursor: pointer;
  user-select: none;
}
.modal input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gold);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: background 0.15s;
}
.modal input[type="checkbox"]:checked {
  background: var(--gold);
}
.modal input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 11px;
  border: solid var(--obsidian);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.modal #acceptBtn {
  width: 100%;
  padding: 16px 24px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--obsidian);
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}
.modal #acceptBtn:disabled {
  background: transparent;
  color: var(--parchment-mute);
  border-color: var(--gold-deep);
  cursor: not-allowed;
  opacity: 0.6;
}
.modal #acceptBtn:not(:disabled):hover {
  background: var(--parchment-glow);
  border-color: var(--parchment-glow);
}

body.disclaimer-open { overflow: hidden; }

@media (max-width: 600px) {
  .modal-backdrop { padding: 12px; }
  .modal {
    padding: 28px 22px 22px;
    margin: 0 auto;
  }
  .modal .modal-arch { width: 52px; height: 52px; margin-bottom: 14px; }
  .modal .modal-eyebrow { font-size: 10px; margin-bottom: 18px; }
  .modal h2 { font-size: 20px; }
  .modal p.intro { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
  .modal ul { font-size: 13px; line-height: 1.5; padding-left: 16px; }
  .modal ul li { margin-bottom: 6px; }
  .modal label { font-size: 12px; margin: 18px 0; }
  .modal #acceptBtn { padding: 14px 20px; font-size: 11px; letter-spacing: 0.22em; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #scene { display: none; }
}

/* Layout-only breakpoint — keep the 3D scene running everywhere, just stack columns on narrow viewports */
@media (max-width: 900px) {
  .hero .arch-mark { width: 72px; height: 72px; }
  section { padding: 96px 24px; }
  section h2 { font-size: 32px; }
  .doctrine .lines .line { font-size: 26px; }
  .two-markets .pair, .pledge, .stats .tablet { grid-template-columns: 1fr; }
  .wards .grid { grid-template-columns: 1fr; }
  .stats .cell { border-right: none !important; }
  nav.top { padding: 16px 20px; }
  nav.top .links { display: none; }
}

/* The 3D corridor stays on for mobile too — perf is tuned in scene.js
   (lower bloom + fewer lights) when the viewport is small. */