:root{
  --ivory:#FFFAF3;
  --ivory-dim:rgba(255,250,243,.66);
  --ivory-faint:rgba(255,250,243,.40);
  --hair:rgba(255,250,243,.24);
  --gold:#F4D33A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#DF502D;
  color:var(--ivory);
  font-family:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  overflow-x:hidden;
  min-height:100vh;
}
#field{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60vmin 44vmin at 50% 46%,rgba(12,8,24,.42),transparent 70%),
    linear-gradient(to bottom,rgba(12,8,24,.20),transparent 32%,transparent 60%,rgba(8,4,16,.40));
}
/* fixed chrome */
.topbar,.botbar{
  position:fixed;left:0;right:0;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  font-size:11.5px;letter-spacing:.22em;
}
.topbar{top:0;border-bottom:1px solid var(--hair)}
.botbar{bottom:0;border-top:1px solid var(--hair)}
.topbar a,.botbar a{color:var(--ivory);text-decoration:none}
.tb-brand{display:flex;align-items:center;gap:10px}
.tb-right{display:flex;gap:18px;color:var(--ivory-dim)}
.tb-phase{color:var(--ivory)}
.bb-links{display:flex;gap:20px;flex-wrap:wrap}
.bb-links a{color:var(--ivory-dim)}
.bb-links a b{color:var(--ivory);font-weight:700}
.bb-links a:hover{color:var(--ivory)}
.bb-stat{color:var(--ivory-dim);white-space:nowrap}
/* hero */
main{position:relative;z-index:2}
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 16px}
.hero-in{will-change:transform,opacity}
.eye{width:clamp(72px,8vw,104px);height:auto;margin:0 auto 1vh;opacity:.95}
.wordmark{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;
  font-size:clamp(88px,21vw,330px);line-height:.94;letter-spacing:-.015em;margin:0;
  color:var(--ivory);text-shadow:0 2px 70px rgba(110,24,3,.55);white-space:nowrap;
}
.serif-sub{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(22px,3.2vw,38px);
  margin:1.6vh 0 0;color:var(--ivory);
}
.serif-sub em{font-style:italic}
.tagline{margin:2vh 0 0;font-size:clamp(9px,1.2vw,12.5px);letter-spacing:.42em;text-indent:.42em;color:var(--ivory-dim)}
.cue{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px;font-size:10px;letter-spacing:.4em;text-indent:.4em;color:var(--ivory-dim);
  animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,7px)}}
/* chapters */
.chap{min-height:135vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 20px}
.chap-num{font-size:clamp(11px,1.4vw,14px);letter-spacing:.4em;text-indent:.4em;color:var(--gold);margin:0 0 3vh}
.statement{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(46px,7.4vw,118px);line-height:1.0;letter-spacing:-.015em;margin:0;
  text-shadow:0 2px 60px rgba(8,3,2,.5);
}
.mono-line{margin:2.4vh 0 0;font-size:clamp(10px,1.4vw,13.5px);letter-spacing:.3em;text-indent:.3em}
.mono-line.dim{color:var(--ivory-dim);margin-top:1.2vh}
.rev{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s ease}
.rev.in{opacity:1;transform:none}
/* coda */
.links{display:flex;gap:12px;margin-top:4vh;flex-wrap:wrap;justify-content:center}
.pill{color:#2A0E02;background:var(--ivory);text-decoration:none;font-size:12px;letter-spacing:.2em;text-indent:.2em;
  padding:14px 26px;border-radius:999px;font-weight:700;font-family:"Space Mono",ui-monospace,monospace}
.pill.ghost{background:transparent;color:var(--ivory);border:1px solid var(--ivory-faint);font-weight:400}
.pill:hover{transform:translateY(-1px)}
.pill.ghost:hover{border-color:var(--ivory)}
.foot{display:flex;gap:26px;justify-content:center;margin-top:9vh;font-size:11px;letter-spacing:.22em;color:var(--ivory-dim);flex-wrap:wrap}
.foot a{color:var(--ivory-dim);text-decoration:none}
.foot a:hover{color:var(--ivory)}
a:focus-visible{outline:2px solid var(--ivory);outline-offset:4px;border-radius:6px}
@media(max-width:640px){
  .bb-links{gap:12px}
  .bb-links a b{font-weight:400}
  .tb-path{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cue{animation:none}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
}