@font-face { font-family: "Instrument Serif"; src: url(fonts/InstrumentSerif-Regular.ttf); }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url(fonts/InstrumentSerif-Italic.ttf); }
@font-face { font-family: "Geist"; src: url(fonts/Geist-VariableFont_wght.ttf); font-weight: 100 900; }
@font-face { font-family: "Geist Mono"; src: url(fonts/GeistMono-VariableFont_wght.ttf); font-weight: 100 900; }
:root { --paper: #f1ede4; --ink: #1c1b19; --mute: #6d685e; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: Geist, system-ui, sans-serif; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.track { height: 2500vh; } /* main.js resets this from T_END */
.sheet-frame { position: fixed; inset: 14px; border: 1px solid rgba(28,27,25,.55); pointer-events: none; z-index: 2; }
.hero { position: fixed; left: 5.2vw; top: 50%; transform: translateY(-50%); width: 36vw; z-index: 3; pointer-events: none; }
.kicker { font: 500 11px/1 "Geist Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 2.2vw; }
.kicker span { margin: 0 .5em; }
.title { font: 400 clamp(48px, 6.6vw, 120px)/.92 "Instrument Serif", serif; letter-spacing: -.01em; }
.title span { display: block; }
.lede { margin-top: 2vw; max-width: 25em; font: 300 clamp(14px, 1.05vw, 18px)/1.5 Geist, sans-serif; color: #3b3832; }
.titleblock { position: fixed; left: 5.2vw; bottom: 46px; z-index: 3; display: grid; grid-template-columns: repeat(4, auto);
  border: 1px solid rgba(28,27,25,.6); background: rgba(241,237,228,.85); font-family: "Geist Mono", monospace; }
.titleblock div { padding: 9px 14px; border-left: 1px solid rgba(28,27,25,.35); }
.titleblock div:first-child { border-left: 0; }
.titleblock span { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; }
.titleblock b { font-weight: 500; font-size: 12px; }
.caption { position: fixed; left: 5.2vw; bottom: 8vh; z-index: 3; opacity: 0; color: var(--ink); background: rgba(241,237,228,.9); padding: 16px 22px 14px; border: 1px solid rgba(28,27,25,.5);
  display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: baseline; pointer-events: none; }
.caption .no { font: 500 11px "Geist Mono", monospace; letter-spacing: .12em; grid-row: span 2; }
.caption b { font: 400 clamp(34px, 3.6vw, 64px)/1 "Instrument Serif", serif; }
.caption i { font: 400 12px/1.6 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; font-style: normal; }
.caption.dark { color: var(--ink); text-shadow: none; }
.hint { position: fixed; right: 60px; bottom: 34px; z-index: 3; display: flex; align-items: center; gap: 12px;
  font: 500 10px "Geist Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.hint i { display: block; width: 46px; height: 1px; background: var(--ink); opacity: .5; }
.ruler { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); height: 34vh; width: 1px; background: rgba(28,27,25,.25); z-index: 3; }
.ruler i { position: absolute; left: -1px; top: 0; width: 3px; height: 0%; background: var(--ink); }
.wip { position: fixed; left: 38px; top: 34px; z-index: 3; font: 500 10px "Geist Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.titleblock { grid-template-columns: repeat(6, auto); }
.levelnote { position: fixed; right: 70px; top: 40px; z-index: 3; font: 500 10px "Geist Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.caption.right { left: auto; right: 5.2vw; }
.loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; font: 500 10px "Geist Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); transition: opacity .6s; }
.loading.done { opacity: 0; pointer-events: none; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .sheet-frame { inset: 8px; }
  .hero { left: 6vw; right: 6vw; top: 11vh; transform: none; width: auto; }
  .kicker { margin-bottom: 14px; font-size: 10px; }
  .title { font-size: clamp(44px, 13vw, 84px); }
  .lede { margin-top: 14px; font-size: 14px; max-width: none; }
  .titleblock { left: 6vw; right: 6vw; bottom: 22px; grid-template-columns: repeat(3, 1fr); }
  .titleblock div { padding: 6px 8px; border-top: 1px solid rgba(28,27,25,.35); }
  .titleblock div:nth-child(-n+3) { border-top: 0; }
  .titleblock div:nth-child(3n+1) { border-left: 0; }
  .titleblock b { font-size: 10px; }
  .titleblock span { font-size: 8px; margin-bottom: 3px; }
  .caption, .caption.right { left: 6vw; right: 6vw; bottom: 5vh; padding: 12px 14px 10px; column-gap: 10px; }
  .caption b { font-size: 34px; }
  .caption i { font-size: 10px; }
  .hint { right: 26px; bottom: auto; top: 30px; }
  .ruler { right: 16px; height: 24vh; }
}