/* ══════════════════════════════════════════════════════════
   ABYRITH — The Fracturing of Light
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:      #06060a;
  --ink-2:    #0a0a10;
  --ink-3:    #101018;
  --bone:     #e9e5dc;
  --bone-dim: #b3ada1;
  --ash:      #7d7a74;
  --rift:     #d8202c;
  --rift-hot: #ff4a3d;
  --light:    #e0a94f;
  --light-dim:#8a6a33;
  --line:     rgba(233,229,220,.13);
  --line-hot: rgba(216,32,44,.42);

  --display: "Cinzel", Georgia, serif;
  --body:    "Cormorant Garamond", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --gut: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--body); font-size:clamp(17px,1.15vw,19px);
  line-height:1.72; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:700; line-height:1.06; }
p{ margin:0 0 1.15em; }
a{ color:inherit; }
::selection{ background:var(--rift); color:#fff; }

/* ── Atmosphere ─────────────────────────────────────────── */
#ash{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.5; }
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)}
}

/* ── Layout ─────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:5; }
.wrap--narrow{ max-width:820px; }
section{ position:relative; z-index:4; }

/* ── Type primitives ────────────────────────────────────── */
.kicker{
  font-family:var(--mono); font-size:.68rem; font-weight:400; letter-spacing:.32em;
  text-transform:uppercase; color:var(--light); opacity:.8; margin-bottom:1.4rem;
}
.kicker::before{
  content:""; display:inline-block; width:26px; height:1px; background:var(--light);
  vertical-align:middle; margin-right:.9em; opacity:.6;
}
.display{
  font-size:clamp(2.3rem,5.6vw,4.4rem); letter-spacing:.005em;
  margin-bottom:1.6rem; text-wrap:balance;
}
.display .dim{ color:var(--ash); font-style:italic; font-family:var(--body); font-weight:300; }
.lede{ font-size:1.18em; color:#f2eee6; }
.und{ color:var(--bone); border-bottom:1px dashed var(--ash); }
strong{ font-weight:600; color:#f6f2ea; }
em{ font-style:italic; }

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--bone); --bd:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.9em; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:.72rem; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:all .4s var(--ease); position:relative; overflow:hidden; border-radius:1px;
}
.btn::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn--solid{ --bg:var(--rift); --fg:#fff; --bd:var(--rift); box-shadow:0 0 0 rgba(216,32,44,0); }
.btn--solid:hover{ --bg:var(--rift-hot); --bd:var(--rift-hot); box-shadow:0 8px 40px -8px rgba(216,32,44,.75); }
.btn--ghost:hover{ --bd:rgba(233,229,220,.42); background:rgba(233,229,220,.05); }
.btn--wide{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn__play{
  width:0; height:0; border-left:7px solid currentColor;
  border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
}
.linkish{
  background:none; border:0; padding:0; color:var(--ash); cursor:pointer;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  border-bottom:1px solid transparent; transition:.3s;
}
.linkish:hover{ color:var(--bone); border-bottom-color:var(--line-hot); }

/* ── Magnetic CTA ───────────────────────────────────────── */
.magnet{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.15em 2.4em; border:1px solid var(--rift); border-radius:2px;
  background:linear-gradient(135deg,#c4121f,#e0242f 45%,#a50f1a); color:#fff;
  cursor:pointer; overflow:hidden; isolation:isolate;
  box-shadow:0 14px 44px -14px rgba(216,32,44,.7), inset 0 1px 0 rgba(255,255,255,.18);
  transition:box-shadow .45s var(--ease), border-color .45s;
  will-change:transform;
}
.magnet:hover{ box-shadow:0 22px 66px -12px rgba(255,74,61,.85), inset 0 1px 0 rgba(255,255,255,.28); border-color:var(--rift-hot); }
.magnet__pull{ display:flex; flex-direction:column; align-items:center; gap:.35em; pointer-events:none; will-change:transform; }
.magnet__label{
  font-family:var(--mono); font-size:.82rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; white-space:nowrap;
}
.magnet__sub{
  font-family:var(--body); font-size:.86rem; letter-spacing:.02em;
  color:rgba(255,255,255,.72); white-space:nowrap;
}
.magnet__glow{
  position:absolute; top:0; left:0; width:190px; height:190px; margin:-95px 0 0 -95px;
  border-radius:50%; pointer-events:none; opacity:0; z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.42),transparent 62%);
  transition:opacity .4s;
}
.magnet:hover .magnet__glow{ opacity:1; }
.magnet--lg{ padding:1.35em 3.1em; }
.magnet--lg .magnet__label{ font-size:.95rem; }
@media (max-width:520px){
  .magnet{ padding:1.05em 1.5em; width:100%; }
  .magnet__label{ font-size:.72rem; letter-spacing:.1em; white-space:normal; text-align:center; }
  .magnet__sub{ font-size:.78rem; }
}

/* ── Recognition chip ───────────────────────────────────── */
.nav__right{ display:flex; align-items:center; gap:.9rem; }
.welcome{
  display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  padding:.55em 1em; border:1px solid rgba(224,169,79,.32); border-radius:100px;
  background:rgba(224,169,79,.07); color:var(--light);
  font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .35s,background .35s; white-space:nowrap;
}
.welcome:hover{ border-color:rgba(224,169,79,.6); background:rgba(224,169,79,.13); }
.welcome__dot{ width:5px; height:5px; border-radius:50%; background:var(--light); box-shadow:0 0 8px var(--light); flex:none; }
/* display:inline-flex above would otherwise beat the [hidden] default. */
.welcome[hidden]{ display:none; }
@media (max-width:760px){ .welcome{ display:none; } }

/* ── Tally ──────────────────────────────────────────────── */
.tally{ margin:2.6rem 0 0; text-align:center; }
.tally__n{
  display:block; font-family:var(--display); font-size:clamp(2rem,5vw,3.2rem); font-weight:700;
  color:var(--light); text-shadow:0 0 40px rgba(224,169,79,.45); line-height:1;
}
.tally__l{
  display:block; margin-top:.6rem; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ash);
}

/* ── Nav ────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.1rem var(--gut); transition:background .5s,backdrop-filter .5s,border-color .5s,padding .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,6,10,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line); padding-block:.72rem;
}
.nav__mark{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.nav__glyph{
  width:9px; height:9px; background:var(--rift); transform:rotate(45deg);
  box-shadow:0 0 14px var(--rift); animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.nav__word{ font-family:var(--display); font-weight:700; letter-spacing:.34em; font-size:.92rem; }
.nav__links{ display:flex; gap:2.1rem; }
.nav__links a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ash); text-decoration:none; transition:color .3s; white-space:nowrap;
}
.nav__links a:hover{ color:var(--bone); }
.nav__cta{ padding:.7em 1.35em; font-size:.66rem; }
@media (max-width:1000px){ .nav__links{ display:none; } }
@media (max-width:560px){ .nav__cta{ display:none; } }

/* ── Hero ───────────────────────────────────────────────── */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:8rem 0 5rem; overflow:hidden; }
.hero__rift{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.rift__glow{
  position:absolute; left:50%; top:50%; width:min(1100px,120vw); height:min(1100px,120vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(216,32,44,.22) 0%,rgba(216,32,44,.07) 32%,transparent 62%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.75; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.12)} }

.hero__inner{
  position:relative; z-index:5; width:100%; max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gut); display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,6vw,5.5rem); align-items:center;
}
/* Without this the unbreakable title sets col 1's min-content width and
   starves the cover column. */
.hero__copy,.hero__cover{ min-width:0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--light); border:1px solid rgba(224,169,79,.28); padding:.5em 1.1em;
  border-radius:100px; background:rgba(224,169,79,.05); margin-bottom:1.8rem;
}
.eyebrow__dot{ width:5px; height:5px; border-radius:50%; background:var(--light); box-shadow:0 0 8px var(--light); animation:pulse 2.6s infinite; }

.hero__title{
  font-size:clamp(3.2rem,8.8vw,6.8rem); font-weight:900; letter-spacing:.02em; line-height:.92;
  display:flex; align-items:center; margin-bottom:.6rem;
  /* The gradient is clipped to the glyphs, so it only paints inside this
     box. max-content keeps the box exactly as wide as the word, otherwise
     the tail of the H falls outside it and renders invisible. */
  width:max-content;
  background:linear-gradient(175deg,#fff 0%,#ded8cc 38%,#8d867a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 34px rgba(0,0,0,.9));
}
.hero__seam{
  width:3px; align-self:stretch; margin:.06em .045em; flex:none;
  background:linear-gradient(180deg,transparent,var(--rift-hot),#fff,var(--rift),transparent);
  box-shadow:0 0 22px var(--rift),0 0 46px rgba(216,32,44,.55);
  animation:seam 4.5s ease-in-out infinite;
}
@keyframes seam{ 0%,100%{opacity:.85; filter:blur(0)} 50%{opacity:1; filter:blur(1.5px)} }
/* Offset the second seam so the two do not pulse in lockstep. */
.hero__seam ~ .hero__seam{ animation-delay:-1.9s; }

.hero__sub{
  font-family:var(--display); font-size:clamp(.82rem,2vw,1.22rem); font-weight:500;
  letter-spacing:.44em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:2rem;
}
.hero__line{ font-size:1.16em; color:#d8d3c9; max-width:54ch; margin-bottom:2rem; text-wrap:balance; }
.hero__line em{ color:var(--bone); }

/* Primary conversion point: preorder-list capture, right in the hero. */
.hero__form{ max-width:520px; margin-bottom:1.6rem; }
.hero__form-label{
  display:flex; align-items:center; gap:.6em; margin-bottom:.8rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--light);
}
.hero__form-dot{
  width:5px; height:5px; border-radius:50%; background:var(--light);
  box-shadow:0 0 8px var(--light); animation:pulse 2.6s infinite; flex:none;
}
.hero__form .form-msg{ text-align:left; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; align-items:center; margin-bottom:2.4rem; }
.hero__alt{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash); text-decoration:none; border:0; border-bottom:1px solid transparent;
  background:none; padding:0; cursor:pointer; transition:.3s;
}
.hero__alt:hover{ color:var(--bone); border-bottom-color:var(--line-hot); }
@media (max-width:900px){
  .hero__form{ margin-inline:auto; }
  .hero__form-label{ justify-content:center; }
  .hero__form .form-msg{ text-align:center; }
}
.hero__author{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ash); margin:0;
}
.hero__author strong{ color:var(--bone); font-weight:400; }

/* Perspective lives on the wrapper so the pointer-parallax can own
   .cover's transform outright. */
.hero__cover{ perspective:1400px; }
.cover{ position:relative; transform:rotateY(-11deg) rotateX(2.5deg); will-change:transform; }
.cover img{
  width:100%; border-radius:2px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.95), 0 0 70px -18px rgba(216,32,44,.5),
             0 0 0 1px rgba(233,229,220,.09);
}
.cover__sheen{
  position:absolute; inset:0; border-radius:2px; pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,transparent 34%,transparent 66%,rgba(255,255,255,.06) 100%);
  mix-blend-mode:overlay;
}
@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ order:2; }
  .hero__cover{ order:1; max-width:280px; margin-inline:auto; }
  .hero__title{ justify-content:center; margin-inline:auto; }
  .hero__line{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .cover{ transform:none; }
}

.scroll-hint{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:6; }
.scroll-hint__line{ display:block; width:1px; height:56px; background:linear-gradient(180deg,transparent,var(--bone-dim)); animation:drop 2.4s ease-in-out infinite; }
@keyframes drop{ 0%{opacity:0; transform:scaleY(.3); transform-origin:top} 45%{opacity:.9} 100%{opacity:0; transform:scaleY(1); transform-origin:top} }
@media (max-width:900px){ .scroll-hint{ display:none; } }

/* ── The World ──────────────────────────────────────────── */
.world{ padding:clamp(6rem,13vw,11rem) 0 0; background:linear-gradient(180deg,var(--ink),var(--ink-2) 40%,var(--ink)); }
.world__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); margin-bottom:clamp(3.5rem,7vw,6rem); }
.world__col p{ color:var(--bone-dim); }
.world__col .lede{ color:#efebe3; }
.warn{ border-left:2px solid var(--line-hot); padding-left:1.4rem; color:#cfc9be !important; }
@media (max-width:800px){ .world__grid{ grid-template-columns:1fr; } }

.quote{ margin:0 0 clamp(3.5rem,7vw,6rem); text-align:center; padding:clamp(2rem,5vw,3.5rem) 0; border-block:1px solid var(--line); }
.quote blockquote{
  margin:0 0 1rem; font-family:var(--display); font-weight:400; font-style:normal;
  font-size:clamp(1.15rem,2.9vw,1.95rem); line-height:1.5; color:#f2eee6; text-wrap:balance;
}
.quote figcaption{ font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ash); }

.world__close{ max-width:66ch; margin-inline:auto; text-align:center; color:var(--bone-dim); }
.turn{
  font-family:var(--display); font-size:clamp(1.05rem,2.4vw,1.5rem); color:var(--bone);
  margin-top:2rem; text-wrap:balance;
}

.word-drop{ text-align:center; padding:clamp(4rem,10vw,8rem) var(--gut) clamp(5rem,11vw,9rem); position:relative; }
.word-drop__text{
  display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(2.6rem,13vw,10rem); letter-spacing:.09em; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(233,229,220,.24);
  text-shadow:0 0 70px rgba(216,32,44,.32);
}
/* Letters still in Erythaic stay hollow; resolved ones fill and catch light.
   A shared min-width keeps the word from reflowing as glyphs swap in. */
.word-drop__text span{
  display:inline-block; min-width:.68em; text-align:center;
}
.wd-off{
  color:transparent; -webkit-text-stroke:1px rgba(233,229,220,.16);
  opacity:.5; font-size:.88em;
  font-family:"Segoe UI Historic","Noto Sans Old Italic",var(--display),serif;
}
.wd-on{
  color:transparent; -webkit-text-stroke:1px rgba(233,229,220,.62);
  text-shadow:0 0 46px rgba(216,32,44,.6);
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.word-drop__sub{
  display:block; margin-top:1.3rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.5em; text-transform:uppercase; color:var(--rift-hot);
}

/* ── The Ring (map) ─────────────────────────────────────── */
.ring{ padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,9vw,7rem); }
.ring__intro{ color:var(--bone-dim); max-width:62ch; margin-bottom:2.8rem; }
.ringmap{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(1.4rem,3.5vw,2.8rem); align-items:start; }
@media (max-width:900px){ .ringmap{ grid-template-columns:1fr; } }

.ringmap__stage{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:2px;
  background:#0a0a10; line-height:0;
}
.ringmap__img{ width:100%; height:auto; display:block; }

/* The sun is fixed and the world turns, so the light crosses it like a tide.
   Anchored on the sun in the artwork and rotated about its own centre. */
.ringmap__sweep{
  position:absolute; left:49%; top:36%; width:210%; height:210%;
  transform:translate(-50%,-50%); pointer-events:none;
  mix-blend-mode:soft-light; opacity:.75;
  background:conic-gradient(from 0deg,
    rgba(255,226,160,0) 0deg, rgba(255,226,160,.55) 18deg,
    rgba(255,226,160,.18) 42deg, rgba(255,226,160,0) 74deg, rgba(255,226,160,0) 360deg);
  animation:sweep 28s linear infinite;
}
@keyframes sweep{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
@media (prefers-reduced-motion:reduce){ .ringmap__sweep{ animation:none; opacity:.35; } }

.ringmap__pins{ position:absolute; inset:0; }
/* A fixed-size hit box centred on the coordinate, so the dot lands exactly
   on the point and the label can never drag the anchor sideways. */
.pin{
  position:absolute; width:32px; height:32px; transform:translate(-50%,-50%);
  background:none; border:0; padding:0; cursor:pointer; line-height:1;
}
.pin__dot{
  position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%; background:var(--rift-hot);
  box-shadow:0 0 0 3px rgba(216,32,44,.25), 0 0 16px rgba(255,74,61,.9);
  transition:transform .35s var(--ease), box-shadow .35s;
}
.pin__dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--rift-hot); animation:ping 2.6s ease-out infinite;
}
@keyframes ping{ 0%{transform:scale(1);opacity:.9} 100%{transform:scale(3.4);opacity:0} }
.pin__name{
  position:absolute; left:calc(50% + 13px); top:50%; white-space:nowrap;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone); opacity:0; transform:translateY(-50%) translateX(-6px);
  transition:opacity .35s, transform .35s; text-shadow:0 2px 10px #000, 0 0 18px #000;
}
.pin:hover .pin__dot,.pin:focus-visible .pin__dot,.pin.is-on .pin__dot{ transform:scale(1.35); }
.pin:hover .pin__name,.pin:focus-visible .pin__name,.pin.is-on .pin__name{ opacity:1; transform:translateY(-50%); }
.pin--left .pin__name{ left:auto; right:calc(50% + 13px); transform:translateY(-50%) translateX(6px); }
.pin--left:hover .pin__name,.pin--left:focus-visible .pin__name,.pin--left.is-on .pin__name{ transform:translateY(-50%); }
.pin.is-on .pin__dot{ background:var(--light); box-shadow:0 0 0 3px rgba(224,169,79,.28), 0 0 20px rgba(224,169,79,.95); }
@media (max-width:640px){ .pin__name{ display:none; } .pin{ padding:10px; } }

.ringmap__panel{
  border:1px solid var(--line); border-radius:2px; padding:clamp(1.4rem,3vw,2rem);
  background:linear-gradient(180deg,rgba(16,16,24,.85),rgba(6,6,10,.85));
  position:sticky; top:6rem; min-height:220px;
}
@media (max-width:900px){ .ringmap__panel{ position:static; } }
.mp__tag{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--light); margin:0 0 .6rem;
}
.mp__name{ font-family:var(--display); font-size:clamp(1.25rem,3vw,1.7rem); font-weight:700; margin:0 0 .9rem; }
.mp__text{ color:var(--bone-dim); margin:0; }
.mp--empty .mp__name{ color:var(--ash); }

/* ── Word roots (Ab · Yr · Ith) ─────────────────────────── */
.roots{ text-align:center; padding:0 0 clamp(3rem,7vw,5rem); }
.roots__verse{
  font-family:var(--display); font-size:clamp(1.1rem,2.9vw,1.75rem); font-weight:400;
  font-style:italic; letter-spacing:.03em; line-height:1.5; color:#f2eee6;
  max-width:26ch; margin:0 auto 1rem; text-wrap:balance;
}
.roots__note{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--ash);
  margin:0 0 2.2rem;
}
.roots__text{
  font-family:var(--display); font-size:clamp(1rem,2.3vw,1.35rem); letter-spacing:.04em;
  color:var(--bone-dim); max-width:34ch; margin:0 auto; text-wrap:balance;
}

/* ── Trailer ────────────────────────────────────────────── */
.trailer{ padding:clamp(4rem,9vw,7rem) 0; }
.player{
  position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line);
  background:#000; cursor:pointer; border-radius:2px;
}
.player__poster{ width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .7s var(--ease),transform 1.1s var(--ease); }
.player:hover .player__poster{ opacity:.72; transform:scale(1.035); }
.player.is-empty{ cursor:default; }
.player.is-empty .player__btn{ opacity:.28; cursor:not-allowed; }
.player.is-empty .player__soon{ opacity:1; }
.player__btn{
  position:absolute; inset:0; margin:auto; width:96px; height:96px; border:0; background:none;
  cursor:pointer; display:grid; place-items:center; transition:transform .45s var(--ease);
}
.player:hover .player__btn{ transform:scale(1.09); }
.player__ring{
  position:absolute; inset:0; border:1px solid rgba(233,229,220,.55); border-radius:50%;
  transition:border-color .4s,box-shadow .4s;
}
.player:hover .player__ring{ border-color:var(--rift-hot); box-shadow:0 0 48px rgba(216,32,44,.6); }
.player__tri{
  width:0; height:0; margin-left:6px; border-left:19px solid var(--bone);
  border-top:12px solid transparent; border-bottom:12px solid transparent; transition:border-left-color .4s;
}
.player:hover .player__tri{ border-left-color:#fff; }
.player__soon{
  position:absolute; left:0; right:0; bottom:2.2rem; margin:0; text-align:center; opacity:0;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ash);
  transition:opacity .5s;
}
.player__bars{ position:absolute; inset:0; pointer-events:none; }
.player__bars i{ position:absolute; left:0; right:0; height:clamp(22px,4.6vw,52px); background:#000; }
.player__bars i:first-child{ top:0; transform-origin:top; }
.player__bars i:last-child{ bottom:0; transform-origin:bottom; }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:9; }

/* ── The Census ─────────────────────────────────────────── */
.census{ padding:clamp(4rem,9vw,7rem) 0; background:linear-gradient(180deg,transparent,rgba(216,32,44,.045),transparent); }
.census__intro{ color:var(--bone-dim); max-width:56ch; margin-bottom:2.8rem; }
.table{
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(16,16,24,.9),rgba(6,6,10,.9));
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(233,229,220,.05);
  position:relative; overflow:hidden;
}
.table::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(233,229,220,.022) 3px 4px);
}
.table__chrome{
  display:flex; justify-content:space-between; align-items:center; padding:.85rem 1.3rem;
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ash);
}
.table__stat--live{ color:var(--light); animation:pulse 1.3s infinite; }
.stage{ --pad:clamp(1.8rem,4vw,3rem); padding:var(--pad); position:relative; z-index:2; }
/* Pull the chrome bar out to the panel edges, past the stage padding. */
.stage .table__chrome{ margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); }

.field{ display:block; margin-bottom:1.4rem; }
.field__label{
  display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ash); margin-bottom:.75rem;
}
input[type=text],input[type=email]{
  width:100%; padding:1em 1.15em; background:rgba(0,0,0,.55); color:var(--bone);
  border:1px solid var(--line); font-family:var(--body); font-size:1.05rem; border-radius:1px;
  transition:border-color .35s,box-shadow .35s,background .35s;
}
input::placeholder{ color:#54514c; }
input:focus{ outline:0; border-color:var(--line-hot); background:rgba(0,0,0,.7); box-shadow:0 0 0 3px rgba(216,32,44,.13); }
input.is-bad{ border-color:var(--rift); }
.field-row{ display:flex; gap:.7rem; }
.field-row input{ flex:1; min-width:0; }
@media (max-width:560px){ .field-row{ flex-direction:column; } }

.scan{ display:flex; flex-direction:column; align-items:center; gap:2rem; padding:1.5rem 0; }
.scan__rings{ position:relative; width:130px; height:130px; }
.scan__rings i{
  position:absolute; inset:0; border:1px solid var(--line-hot); border-radius:50%;
  animation:ring 2.1s var(--ease) infinite;
}
.scan__rings i:nth-child(2){ animation-delay:.7s; } .scan__rings i:nth-child(3){ animation-delay:1.4s; }
@keyframes ring{ 0%{transform:scale(.24); opacity:0} 22%{opacity:1} 100%{transform:scale(1); opacity:0} }
.scan__log{
  list-style:none; margin:0; padding:0; width:100%; max-width:430px; min-height:120px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ash);
}
.scan__log li{ padding:.32rem 0; opacity:0; animation:logIn .4s var(--ease) forwards; display:flex; justify-content:space-between; gap:1rem; }
.scan__log li span{ color:var(--light); }
@keyframes logIn{ from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none} }

.result{ text-align:center; padding-bottom:2rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
.result__sigil{ width:132px; height:132px; margin:0 auto 1.6rem; }
.result__sigil svg{ width:100%; height:100%; }
.result__verdict{
  font-family:var(--display); font-size:clamp(1.7rem,5.5vw,2.7rem); font-weight:800;
  letter-spacing:.13em; margin-bottom:.5rem;
}
.is-defined .result__verdict{ color:var(--light); text-shadow:0 0 46px rgba(224,169,79,.5); }
.is-undefined .result__verdict{ color:var(--bone); text-shadow:0 0 46px rgba(216,32,44,.45); }
.result__desig{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:.5rem;
}
.result__id{ font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; color:var(--ash); margin-bottom:1.5rem; }
.result__body{ max-width:48ch; margin-inline:auto; color:var(--bone-dim); margin-bottom:0; }
.is-undefined .result__body em{ color:var(--rift-hot); font-style:normal; }

.signup__pitch{ text-align:center; max-width:46ch; margin:0 auto 1.4rem; color:#e2ddd4; }
.signup__note{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; color:var(--ash); margin:.9rem 0 0; text-align:center; }
.form-msg{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; margin:.9rem 0 0; text-align:center; min-height:1.2em; }
.form-msg.ok{ color:var(--light); } .form-msg.err{ color:var(--rift-hot); }
.result__actions{ display:flex; justify-content:center; gap:2rem; margin-top:1.8rem; }
.signup.is-done{ display:none; }

/* ── Archive ────────────────────────────────────────────── */
.archive{ padding:clamp(4rem,9vw,7rem) 0; }
.archive__intro{ color:var(--bone-dim); max-width:58ch; margin-bottom:3rem; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.1rem; }
.card{
  position:relative; aspect-ratio:2/3; overflow:hidden; border:1px solid var(--line);
  background:#000; cursor:pointer; padding:0; text-align:left; border-radius:2px;
  transition:border-color .45s,transform .55s var(--ease),box-shadow .55s;
}
.card:hover,.card:focus-visible{
  border-color:var(--line-hot); transform:translateY(-6px);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.95),0 0 44px -14px rgba(216,32,44,.5); outline:none;
}
.card img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(.55) contrast(1.06) brightness(.72);
  transition:filter .6s var(--ease),transform .9s var(--ease);
}
.card:hover img,.card:focus-visible img{ filter:grayscale(0) contrast(1.04) brightness(.92); transform:scale(1.045); }
.card__veil{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 32%,rgba(6,6,10,.94) 88%); }
.card__meta{ position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.15rem; }
.card__meta > span{ display:block; }
.card__file{ font-family:var(--mono); font-size:.55rem; letter-spacing:.24em; color:var(--ash); margin:0 0 .45rem; }
.card__name{ font-family:var(--display); font-size:1.02rem; font-weight:700; letter-spacing:.07em; margin:0 0 .3rem; color:var(--bone); }
.card__role{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--light); opacity:.85; margin:0; }
.card--sealed img{ filter:grayscale(1) brightness(.3) contrast(1.3); }
.card--sealed:hover img{ filter:grayscale(.9) brightness(.42) contrast(1.25); transform:scale(1.01); }
.card--sealed .card__role{ color:var(--rift-hot); }
.card__seal{
  position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:.52rem;
  letter-spacing:.2em; color:var(--rift-hot); border:1px solid var(--line-hot);
  padding:.32em .6em; background:rgba(216,32,44,.09);
}

/* ── Places ─────────────────────────────────────────────── */
.places-head{ margin:clamp(4rem,8vw,6.5rem) 0 2.6rem; max-width:62ch; }
.places-title{
  font-family:var(--display); font-size:clamp(1.7rem,4vw,2.7rem);
  font-weight:700; margin-bottom:1rem;
}
.places-intro{ color:var(--bone-dim); margin:0; }
.places{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.1rem; grid-auto-flow:dense;
}
.place{
  display:flex; flex-direction:column; margin:0; overflow:hidden;
  border:1px solid var(--line); background:rgba(16,16,24,.5); border-radius:2px;
  transition:border-color .45s,transform .55s var(--ease),box-shadow .55s;
}
.place:hover{
  border-color:var(--line-hot); transform:translateY(-4px);
  box-shadow:0 22px 54px -24px rgba(0,0,0,.95),0 0 38px -16px rgba(216,32,44,.42);
}
.place--wide{ grid-column:span 2; }
.place__frame{ overflow:hidden; }
.place img{
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  filter:grayscale(.35) brightness(.8) contrast(1.04);
  transition:filter .6s var(--ease),transform .9s var(--ease);
}
.place--wide img{ aspect-ratio:24/7; }
.place:hover img{ filter:grayscale(0) brightness(1) contrast(1.02); transform:scale(1.04); }
.place figcaption{ padding:1.25rem 1.3rem 1.4rem; border-top:1px solid var(--line); }
.place__tag{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--light); opacity:.9; margin:0 0 .4rem;
}
.place__name{ font-family:var(--display); font-size:1.25rem; font-weight:700; letter-spacing:.06em; margin:0 0 .5rem; }
.place__text{ font-size:.94rem; line-height:1.6; color:var(--bone-dim); margin:0; }
@media (max-width:700px){ .place--wide{ grid-column:span 1; } .place--wide img{ aspect-ratio:4/3; } }

/* ── Archive plates ─────────────────────────────────────── */
.plates{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.1rem; grid-auto-flow:dense; margin-bottom:1rem;
}
.plate{
  display:flex; flex-direction:column; text-align:left; padding:0; cursor:zoom-in;
  border:1px solid var(--line); background:rgba(16,16,24,.5); border-radius:2px;
  overflow:hidden; transition:border-color .45s,transform .55s var(--ease),box-shadow .55s;
  color:inherit; font:inherit;
}
.plate:hover,.plate:focus-visible{
  border-color:var(--line-hot); transform:translateY(-4px); outline:none;
  box-shadow:0 22px 54px -24px rgba(0,0,0,.95),0 0 38px -16px rgba(216,32,44,.42);
}
.plate--wide{ grid-column:span 2; }
.plate__frame{ position:relative; overflow:hidden; display:block; }
.plate img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  filter:grayscale(.3) brightness(.82) contrast(1.03);
  transition:filter .6s var(--ease),transform .9s var(--ease);
}
.plate--wide img{ aspect-ratio:16/9; }
.plate:hover img,.plate:focus-visible img{ filter:none; transform:scale(1.045); }
/* The magnifier hint that appears on hover */
.plate__lens{
  position:absolute; right:12px; bottom:12px; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(233,229,220,.5); background:rgba(6,6,10,.6); backdrop-filter:blur(4px);
  opacity:0; transform:scale(.8); transition:opacity .35s,transform .35s;
}
.plate__lens::before,.plate__lens::after{ content:""; position:absolute; background:var(--bone); }
.plate__lens::before{ left:9px; top:16px; width:16px; height:1px; }
.plate__lens::after{ left:16px; top:9px; width:1px; height:16px; }
.plate:hover .plate__lens,.plate:focus-visible .plate__lens{ opacity:1; transform:scale(1); }
.plate__cap{ display:block; padding:1.15rem 1.25rem 1.35rem; border-top:1px solid var(--line); }
.plate__tag{
  display:block; font-family:var(--mono); font-size:.55rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--light); opacity:.9; margin-bottom:.45rem;
}
.plate__name{
  display:block; font-family:var(--display); font-size:1.18rem; font-weight:700;
  letter-spacing:.05em; margin-bottom:.55rem; color:var(--bone);
}
.plate__text{ display:block; font-size:.93rem; line-height:1.6; color:var(--bone-dim); }
@media (max-width:700px){ .plate--wide{ grid-column:span 1; } .plate--wide img{ aspect-ratio:4/3; } }

/* ── Plate viewer ───────────────────────────────────────── */
.zoom{
  position:fixed; inset:0; z-index:240; background:#040407;
  display:flex; flex-direction:column; touch-action:none;
}
.zoom[hidden]{ display:none; }
.zoom__stage{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
  cursor:grab; touch-action:none;
}
.zoom.is-zoomed .zoom__stage:active{ cursor:grabbing; }
/* Absolutely centred rather than grid-centred: a percentage max-height
   needs a definite container height, and an auto grid row is not one —
   it grows to the image and the constraint is silently dropped. */
.zoom__img{
  position:absolute; inset:0; margin:auto;
  max-width:100%; max-height:100%; width:auto; height:auto;
  will-change:transform; transform-origin:center center;
  user-select:none; -webkit-user-drag:none;
}

/* A close control that is genuinely tappable: 52px, above everything,
   and clear of notches and rounded corners on phones. */
.zoom__close{
  position:fixed; z-index:250;
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  right:calc(env(safe-area-inset-right, 0px) + 10px);
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid rgba(233,229,220,.28); border-radius:50%;
  background:rgba(10,10,16,.82); backdrop-filter:blur(8px);
  color:var(--bone); font-size:1.8rem; line-height:1; cursor:pointer;
  transition:border-color .3s,background .3s,transform .3s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.zoom__close span{ pointer-events:none; margin-top:-3px; }
.zoom__close:hover,.zoom__close:focus-visible{
  border-color:var(--rift-hot); background:rgba(216,32,44,.22); transform:scale(1.06);
}

.zoom__bar{
  flex:none; display:flex; align-items:flex-end; gap:1.4rem; flex-wrap:wrap;
  padding:1rem var(--gut) calc(env(safe-area-inset-bottom, 0px) + 1rem);
  border-top:1px solid var(--line); background:rgba(6,6,10,.9);
}
.zoom__meta{ flex:1 1 320px; min-width:0; }
.zoom__name{
  font-family:var(--display); font-size:1.15rem; font-weight:700; letter-spacing:.05em;
  margin:0 0 .4rem; color:var(--bone);
}
.zoom__text{ margin:0; font-size:.92rem; line-height:1.55; color:var(--bone-dim); max-width:70ch; }
.zoom__ctrl{ display:flex; align-items:center; gap:.5rem; flex:none; }
.zoom__ctrl button{
  min-width:44px; height:44px; padding:0 .8rem; border:1px solid var(--line);
  background:rgba(16,16,24,.8); color:var(--bone); cursor:pointer; border-radius:1px;
  font-family:var(--mono); font-size:1rem; line-height:1; transition:border-color .3s,background .3s;
  touch-action:manipulation;
}
.zoom__ctrl button:hover{ border-color:var(--line-hot); background:rgba(216,32,44,.16); }
.zoom__reset{ font-size:.62rem !important; letter-spacing:.16em; text-transform:uppercase; }
.zoom__lvl{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--ash);
  min-width:52px; text-align:center;
}
.zoom__hint{
  position:absolute; left:0; right:0; bottom:auto;
  top:calc(env(safe-area-inset-top, 0px) + 22px);
  margin:0; text-align:center; pointer-events:none;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash); opacity:.75; transition:opacity .4s;
}
.zoom.is-zoomed .zoom__hint{ opacity:0; }
@media (max-width:640px){
  .zoom__bar{ gap:.9rem; padding-inline:1rem; }
  .zoom__name{ font-size:1rem; }
  .zoom__text{ font-size:.86rem; max-height:5.2em; overflow-y:auto; }
  .zoom__hint{ font-size:.52rem; left:70px; right:70px; }
}

/* ── Lightbox ───────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(4,4,7,.95);
  backdrop-filter:blur(10px); display:grid; place-items:center; padding:var(--gut);
  animation:fade .35s var(--ease);
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.lb[hidden]{ display:none; }
.lb__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem); max-width:1000px; width:100%;
  max-height:86vh; align-items:center;
}
.lb__inner img{ width:100%; max-height:86vh; object-fit:contain; border:1px solid var(--line); }
.lb__file{ font-family:var(--mono); font-size:.6rem; letter-spacing:.24em; color:var(--ash); margin-bottom:.8rem; }
.lb__meta h3{ font-size:clamp(1.5rem,4vw,2.3rem); letter-spacing:.05em; margin-bottom:.5rem; }
.lb__role{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--light); margin-bottom:1.3rem; }
.lb__text{ color:var(--bone-dim); margin:0; }

/* Corrupted record: the Table returns only Erythaic, and it will not hold still. */
.lb.is-corrupt .lb__meta h3,
.lb.is-corrupt .lb__text{
  font-family:"Segoe UI Historic","Noto Sans Old Italic","Apple Symbols",var(--mono),serif;
  color:var(--rift-hot); text-shadow:0 0 18px rgba(216,32,44,.55);
  word-break:break-word;
}
.lb.is-corrupt .lb__meta h3{ font-size:clamp(1.2rem,3.4vw,1.9rem); letter-spacing:.12em; }
.lb.is-corrupt .lb__text{ font-size:.98rem; line-height:1.85; opacity:.92; }
.lb.is-corrupt .lb__role{ color:var(--rift-hot); }
.lb.is-corrupt .lb__inner img{ filter:grayscale(1) brightness(.5) contrast(1.35); }
.lb.is-corrupt .lb__meta{ position:relative; }
.lb.is-corrupt .lb__meta::after{
  content:"TRANSLATION FAILED"; display:block; margin-top:1.4rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.28em; color:var(--ash);
}
/* Branched record: the same letters, drawn more than once, each copy a
   little out of step with the others. */
.lb__branch{ margin:1.6rem 0 0; }
.lb__branch[hidden]{ display:none; }
.branchtext{
  position:relative; display:inline-block; isolation:isolate;
  font-family:var(--display); font-size:clamp(1.1rem,2.8vw,1.5rem);
  letter-spacing:.1em; color:var(--bone);
}
.branchtext::before,.branchtext::after{
  content:attr(data-t); position:absolute; inset:0; pointer-events:none; z-index:-1;
}
.branchtext::before{
  color:var(--rift-hot); opacity:.62;
  animation:branchA 4.6s ease-in-out infinite alternate;
}
.branchtext::after{
  color:var(--light); opacity:.5;
  animation:branchB 5.9s ease-in-out infinite alternate;
}
/* The copies never sit flush with the original — the split is always
   visible, it only drifts. */
@keyframes branchA{
  from{ transform:translate(-5px,-2px) skewX(-1deg); }
  to  { transform:translate(-11px,-5px) skewX(-4deg); }
}
@keyframes branchB{
  from{ transform:translate(4px,2px) skewX(1deg); }
  to  { transform:translate(10px,6px) skewX(4deg); }
}
@media (prefers-reduced-motion:reduce){
  .branchtext::before{ transform:translate(-5px,-2px); animation:none; }
  .branchtext::after{ transform:translate(5px,3px); animation:none; }
}

/* Fixed, not absolute: on a phone the panel scrolls, and an absolutely
   positioned close scrolls away with it. 52px, above the content, and
   clear of the notch. */
.lb__close{
  position:fixed; z-index:210;
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  right:calc(env(safe-area-inset-right, 0px) + 10px);
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid rgba(233,229,220,.28); border-radius:50%;
  background:rgba(10,10,16,.82); backdrop-filter:blur(8px);
  color:var(--bone); font-size:1.7rem; line-height:1; cursor:pointer;
  transition:border-color .3s,background .3s,transform .3s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.lb__close:hover,.lb__close:focus-visible{
  border-color:var(--rift-hot); background:rgba(216,32,44,.22); transform:scale(1.06);
}
@media (max-width:760px){
  .lb__inner{ grid-template-columns:1fr; max-height:none; overflow-y:auto; align-content:start; }
  .lb__inner img{ max-height:48vh; }
  /* Keep the first line of the record out from under the close button. */
  .lb{ padding-top:calc(env(safe-area-inset-top, 0px) + 74px); }
}

/* ── The Screening (modal) ──────────────────────────────── */
.screen{
  position:fixed; inset:0; z-index:220; display:grid; place-items:center;
  padding:var(--gut); background:rgba(4,4,7,.9); backdrop-filter:blur(12px);
  overflow-y:auto;
}
.screen[hidden]{ display:none; }
.screen__panel{
  position:relative; width:100%; max-width:620px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,18,26,.98),rgba(6,6,10,.98));
  box-shadow:0 50px 130px -40px #000, 0 0 90px -50px rgba(216,32,44,.6);
  border-radius:2px; overflow:hidden; will-change:transform,opacity;
}
.screen__panel::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(233,229,220,.02) 3px 4px);
}
/* Keep the status text clear of the close button. */
.screen__panel .table__chrome{ padding-right:3.4rem; }
.screen__close{
  position:absolute; top:.35rem; right:.5rem; z-index:5; width:38px; height:38px;
  background:none; border:1px solid transparent; color:var(--ash); font-size:1.4rem;
  line-height:1; cursor:pointer; transition:color .3s,border-color .3s;
}
.screen__close:hover{ color:var(--bone); border-color:var(--line-hot); }
.scr-step{ padding:clamp(1.6rem,4vw,2.6rem); position:relative; z-index:2; }
.scr-title{ font-family:var(--display); font-size:clamp(1.6rem,4.4vw,2.3rem); font-weight:700; margin-bottom:1rem; }
.scr-lede{ color:var(--bone-dim); margin-bottom:1.8rem; }
.scr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:520px){ .scr-grid{ grid-template-columns:1fr; } }
.field__label i{ font-style:normal; color:var(--ash); text-transform:none; letter-spacing:.06em; }
.scr-alt{ display:block; margin:1.5rem auto 0; }
.scr-or{
  display:flex; align-items:center; gap:1rem; margin:1.4rem 0;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ash);
}
.scr-or::before,.scr-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.scr-enrolled{
  text-align:center; color:var(--light); font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; margin:1.6rem 0 0; line-height:1.9;
}
.screen .btn--wide{ margin-top:.4rem; }
.screen .scan{ padding:2.5rem 0; }

/* ── Close + Footer ─────────────────────────────────────── */
.close{ padding:clamp(5rem,11vw,9rem) 0; text-align:center; border-top:1px solid var(--line); background:linear-gradient(180deg,transparent,rgba(216,32,44,.05)); }
.close__copy{ color:var(--bone-dim); max-width:52ch; margin:0 auto 2.4rem; }
.close__cta{ display:flex; justify-content:center; }
/* ── Book facts ─────────────────────────────────────────── */
.facts{ margin-top:3.2rem; padding-top:2.2rem; border-top:1px solid var(--line); }
.facts__row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem 1.6rem; margin:0 0 1.4rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash);
}
.facts__row span{ position:relative; }
.facts__row span + span::before{
  content:"·"; position:absolute; left:-.9rem; color:var(--line-hot);
}
.facts__note{
  max-width:58ch; margin:0 auto; font-size:.92rem; line-height:1.65; color:var(--ash);
}
.facts__note strong{ color:var(--bone-dim); font-weight:600; }

.foot{ padding:2.6rem 0 3rem; border-top:1px solid var(--line); }
.foot .wrap{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; }
.foot__title{ font-family:var(--display); font-weight:700; letter-spacing:.24em; font-size:.82rem; margin:0; }
.foot__title span{ color:var(--ash); font-family:var(--body); letter-spacing:.06em; font-weight:400; }
.foot__by{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--ash); margin:0; }

/* ── Scroll rift (progress) ─────────────────────────────── */
.riftline{
  position:fixed; top:0; left:0; width:2px; height:100vh; z-index:70; pointer-events:none;
  background:linear-gradient(180deg,var(--rift-hot),var(--rift) 55%,transparent);
  transform:scaleY(0); transform-origin:top;
  box-shadow:0 0 14px rgba(216,32,44,.75);
}
@media (prefers-reduced-motion:reduce){ .riftline{ display:none; } }

/* Split-text wrappers must not clip the descenders. */
.display .line, .places-title .line{ overflow:hidden; }

/* ── Data notice ────────────────────────────────────────── */
/* Bottom-right: the hero CTA sits bottom-left, and this must never cover it. */
.gdpr{
  position:fixed; right:var(--gut); bottom:var(--gut); z-index:180; width:min(370px,calc(100vw - 2*var(--gut)));
  padding:1.3rem 1.4rem; border:1px solid var(--line); border-radius:2px;
  background:rgba(10,10,16,.96); backdrop-filter:blur(14px);
  box-shadow:0 28px 70px -26px #000, inset 0 1px 0 rgba(233,229,220,.06);
}
.gdpr[hidden]{ display:none; }
.gdpr__title{
  display:flex; align-items:center; gap:.6em; margin:0 0 .7rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--light);
}
.gdpr__dot{ width:5px; height:5px; border-radius:50%; background:var(--light); box-shadow:0 0 8px var(--light); flex:none; }
.gdpr__body{ font-size:.92rem; line-height:1.6; color:var(--bone-dim); margin:0 0 1.1rem; }
.gdpr__row{ display:flex; gap:.6rem; }
.gdpr__btn{ flex:1; padding:.72em 1em; font-size:.62rem; letter-spacing:.14em; }
.gdpr__more{
  display:inline-block; margin-top:.9rem; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash);
  border-bottom:1px solid transparent; text-decoration:none; transition:.3s;
}
.gdpr__more:hover{ color:var(--bone); border-bottom-color:var(--line-hot); }
@media (max-width:520px){ .gdpr{ left:12px; right:12px; bottom:12px; width:auto; padding:1.1rem; } }

.consent{
  font-size:.82rem; line-height:1.55; color:var(--ash); margin:1rem 0 0; text-align:center;
}
.consent a{ color:var(--bone-dim); }
.foot__link{ margin-left:1.2rem; color:var(--ash); text-decoration:none; border-bottom:1px solid var(--line); }
.foot__link:hover{ color:var(--bone); }

/* ── Legal page ─────────────────────────────────────────── */
.legal{ padding:9rem 0 5rem; }
.legal h1{ margin-bottom:1.6rem; }
.legal h2{
  font-family:var(--display); font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:700;
  margin:2.8rem 0 .9rem; color:var(--bone);
}
.legal p,.legal li{ color:var(--bone-dim); }
.legal ul{ margin:0 0 1.15em; padding-left:1.3em; }
.legal li{ margin-bottom:.6em; }
.legal a{ color:var(--light); }
.legal code{ font-family:var(--mono); font-size:.86em; color:var(--bone); }
.legal__foot{
  margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash);
}

/* ── Reveal ─────────────────────────────────────────────────
   Scoped to .js so the page renders fully even if the script
   never runs (blocked, errored, or an ancient browser).       */
/* Anime.js drives the motion, so no CSS transition here to fight it.
   .in is the failsafe that shows content instantly if the script never runs. */
.js .reveal{ opacity:0; }
.js .reveal.in{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  #ash,.grain{ display:none; }
}
:focus-visible{ outline:2px solid var(--rift-hot); outline-offset:3px; }

/* The full atlas opens as its own immersive, accessible map. */
.atlas-invitation{display:flex;align-items:center;gap:24px;margin:28px 0 40px;padding:25px 28px;border:1px solid #b79a6455;background:linear-gradient(110deg,#b49a7014,#1d231610);color:#d3be91;transition:border-color .2s,background .2s;text-decoration:none}
.atlas-invitation:hover{border-color:#dbc694;background:linear-gradient(110deg,#b49a7026,#1d231618)}
.atlas-invitation__sigil{font-size:44px;font-weight:300}.atlas-invitation small{display:block;font:9px 'JetBrains Mono',monospace;letter-spacing:2px;color:#a5977d}.atlas-invitation strong{display:block;font:400 26px 'Cinzel',Georgia,serif;margin:8px 0}.atlas-invitation em{display:block;font:16px 'Cormorant Garamond',Georgia,serif;color:#a6a797}.atlas-invitation__arrow{margin-left:auto;font-size:30px}
@media(max-width:640px){.atlas-invitation{padding:20px 17px;gap:14px}.atlas-invitation__sigil{font-size:30px}.atlas-invitation strong{font-size:19px}.atlas-invitation em{font-size:13px;line-height:1.5}.atlas-invitation__arrow{font-size:23px}}