:root {
  --ink: #070304;
  --oxblood: #2b0509;
  --blood: #8a0a14;
  --crimson: #d8142a;
  --rose: #d9a69b;
  --bone: #f6e9e2;
  --gothic: "Grenze Gotisch", "Times New Roman", serif;
  --serif: "EB Garamond", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --track: 9.8;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); color: var(--bone); -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { background: var(--ink); font-family: var(--serif); overflow-x: hidden; }
img { display: block; }
a { color: inherit; text-decoration: none; }
i { font-style: normal; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

#gl {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh;
  display: block; background: var(--ink);
}

#track { position: relative; height: calc((var(--track) + 1) * 100vh); }
#view { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.scene.on { pointer-events: auto; will-change: opacity; }
.scene--sr { opacity: 1; }
.scene > * { position: absolute; }
/* Chrome type is drawn by WebGL; these images only show without it. */
.chrome { display: none; }

/* ---------- small type ---------- */
.eyebrow, .hero-micro, .rank-venue, .foot, .nav a, .sound, .facts dt, .epigraph cite, .hero-scroll, .loader-line {
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
  letter-spacing: .22em; font-size: clamp(10.5px, .76vw, 13.5px);
}
.eyebrow { color: var(--rose); }
.eyebrow i, .hero-micro i, .foot i { color: var(--crimson); margin: 0 .55em; }
.eyebrow--c { left: 0; right: 0; text-align: center; }

.body {
  font-size: clamp(19px, 1.42vw, 25px); line-height: 1.34; color: var(--bone);
  text-shadow: 0 0 22px rgba(7, 3, 4, .95), 0 0 3px rgba(7, 3, 4, .9);
}
.body--c { text-align: center; }

/* ---------- nav ---------- */
.nav {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding: clamp(14px, 1.7vw, 28px) clamp(16px, 2.2vw, 40px);
  opacity: 0; transition: opacity .8s; pointer-events: none;
}
.is-live .nav { opacity: 1; pointer-events: auto; }
.nav nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 36px); }
.nav a { color: var(--bone); transition: color .2s; position: relative; }
.nav a:hover { color: var(--crimson); }
/* top left, lined up with the page margin (the file has room around the mark for its glow).
   .nav .nav-mark, not .nav-mark: ".nav a" would make it relative and push it off the right edge. */
.nav .nav-mark { position: absolute; left: calc(clamp(16px, 2.2vw, 40px) - 13px); top: clamp(4px, .7vw, 14px); opacity: 0; transition: opacity .5s; }
.nav-mark img { width: 64px; height: 64px; }
.past-hero .nav-mark { opacity: 1; }
.nav-enter {
  padding: .78em 1.3em .78em 1.4em; color: var(--ink) !important; background: var(--bone);
  clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - 12px) 100%, 0 100%);
  transition: background .2s, color .2s;
}
.nav-enter:hover { background: var(--crimson); color: var(--bone) !important; }

/* ---------- blade button ---------- */
.blade {
  display: inline-flex; align-items: center; padding: 1.12em 3.4em 1.12em 1.7em;
  font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .26em;
  font-size: clamp(11px, .78vw, 14px); color: var(--ink); background: var(--bone); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 10px 50%);
  transition: background .18s, color .18s, translate .3s cubic-bezier(.2, .9, .2, 1);
}
.blade span { position: relative; z-index: 1; }
.blade::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 22%; left: -35%;
  background: linear-gradient(100deg, transparent, rgba(216, 20, 42, .55), transparent);
  transform: skewX(-18deg); transition: left .55s cubic-bezier(.2, .8, .2, 1);
}
.blade:hover { background: #fff; translate: 6px 0; }
.blade:hover::after { left: 115%; }
.blade:active { background: var(--crimson); color: var(--bone); }
.blade--big { font-size: clamp(12px, .95vw, 16px); padding: 1.35em 4.2em 1.35em 2em; }

:focus-visible { outline: 2px solid var(--crimson); outline-offset: 4px; }

/* ---------- hero ---------- */
.hero-copy { left: 3.1vw; top: 36.5vh; max-width: 30vw; }
#s-hero .eyebrow, .hero-micro { text-shadow: 0 0 5px var(--ink), 0 0 12px var(--ink), 0 0 22px var(--ink); }
.hero-line {
  font-family: var(--gothic); font-weight: 500; line-height: .96; color: var(--bone);
  font-size: clamp(38px, 4.1vw, 84px); margin: .24em 0 .28em;
  text-shadow: 0 0 34px rgba(7, 3, 4, .9), 0 0 2px rgba(7, 3, 4, .8);
}
.hero-micro { color: var(--rose); }
#s-hero .blade { left: 3.1vw; bottom: clamp(26px, 5vh, 56px); }
.hero-scroll {
  left: calc(3.1vw + clamp(236px, 18.6vw, 340px)); bottom: clamp(26px, 5vh, 56px); height: clamp(36px, 2.9vw, 50px);
  display: flex; align-items: center; gap: 1.2em; color: var(--bone); text-shadow: 0 0 6px var(--ink), 0 0 14px var(--ink), 0 0 26px var(--ink);
}
.hero-scroll em { font-style: normal; color: var(--rose); }
.hero-copy { will-change: transform; }
@media (pointer: coarse) { .hero-scroll em { display: none; } }
.hero-scroll b { display: block; width: 54px; height: 1px; background: var(--bone); transform-origin: left; }
#s-hero.on .hero-scroll b { animation: scrollcue 2.4s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes scrollcue { 0% { transform: translateX(0) scaleX(0); } 45%, 55% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(54px) scaleX(0); } }

/* ---------- elysium ---------- */
#s-elysium .eyebrow { top: 21vh; }
.facts {
  left: 50%; translate: -50% 0; bottom: clamp(26px, 6vh, 64px); width: min(1180px, 88vw);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(246, 233, 226, .32);
}
.facts > div { padding: 1em 1.2em 0 0; }
.facts dt { color: var(--crimson); margin-bottom: .55em; }
.facts dd { margin: 0; font-size: clamp(16px, 1.16vw, 21px); line-height: 1.2; text-shadow: 0 0 16px rgba(7, 3, 4, .95); }

/* ---------- oath ---------- */
#s-oath .eyebrow { left: 7vw; top: 17vh; }
#s-oath .body { left: 7vw; top: 66vh; width: min(32em, 40vw); }

/* ---------- ascent ---------- */
#s-ascent .eyebrow { top: 17vh; }
#s-ascent .body { left: 0; right: 0; bottom: 17vh; }

/* ---------- ranks ---------- */
.rank-no {
  left: 6.8vw; top: 15vh; font-family: var(--serif); font-weight: 400; color: var(--crimson);
  font-size: clamp(26px, 2.2vw, 42px); line-height: 1; letter-spacing: .08em;
}
.rank-text { left: 7vw; top: 62vh; width: min(30em, 38vw); }
.rank-venue { color: var(--rose); margin-bottom: 1em; }

/* ---------- gate ---------- */
#s-gate .eyebrow { left: 7vw; top: 15vh; }
.epigraph { left: 7vw; top: 58vh; width: min(32em, 42vw); }
.epigraph p { font-size: clamp(19px, 1.42vw, 25px); line-height: 1.3; text-shadow: 0 0 20px rgba(7, 3, 4, .95); }
.epigraph p[lang] { font-style: italic; color: var(--rose); margin-bottom: .3em; }
.epigraph cite { display: block; margin-top: 1em; font-style: normal; color: var(--rose); }
#s-gate .blade { left: 7vw; top: 78vh; }
.foot {
  left: 7vw; right: clamp(16px, 2.2vw, 40px); bottom: clamp(16px, 2.6vh, 28px);
  display: flex; justify-content: space-between; gap: 2em; color: var(--rose); font-size: 10px; letter-spacing: .2em;
}
.foot a:hover { color: var(--bone); }

/* ---------- rail ---------- */
.rail {
  position: fixed; z-index: 20; right: clamp(16px, 2.2vw, 40px); top: 50%; translate: 0 -50%;
  width: 16px; height: 36vh; opacity: 0; transition: opacity .6s; pointer-events: none;
}
.is-live.past-hero .rail { opacity: 1; }
.rail-line { position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: rgba(246, 233, 226, .24); }
.rail-line b { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--bone); transform-origin: top; transform: scaleY(0); }
.rail-star { position: absolute; left: 0; top: -7px; width: 16px; text-align: center; font-size: 13px; line-height: 1; color: var(--bone); text-shadow: 0 0 10px var(--crimson); will-change: transform; }

/* ---------- sound ---------- */
.sound {
  position: fixed; z-index: 30; right: clamp(16px, 2.2vw, 40px); bottom: clamp(16px, 2.6vh, 28px);
  display: none; align-items: center; gap: .9em; padding: .4em 0;
  background: none; border: 0; color: var(--bone); cursor: pointer; font-size: 10px; letter-spacing: .2em;
  opacity: 0; transition: opacity .8s;
}
.is-live .sound { display: inline-flex; opacity: 1; }
.at-gate .sound { bottom: clamp(44px, 6vh, 62px); }
.sound-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; }
.sound-bars b { width: 2px; height: 2px; background: var(--bone); opacity: .55; }
.sound[aria-pressed="true"] .sound-bars b { background: var(--crimson); opacity: 1; }
.sound[aria-pressed="true"] .sound-bars b:nth-child(1) { height: 5px; }
.sound[aria-pressed="true"] .sound-bars b:nth-child(2) { height: 11px; }
.sound[aria-pressed="true"] .sound-bars b:nth-child(3) { height: 7px; }

/* ---------- loader ---------- */
#loader {
  position: fixed; z-index: 50; inset: 0; background: var(--ink); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px; transition: opacity .12s;
}
#loader.gone { opacity: 0; pointer-events: none; }
/* the mark's file has room around it for its glow; the negative margin takes most of it back */
.loader-logo { --lg: clamp(220px, 34vmin, 320px); width: var(--lg); height: var(--lg); margin-bottom: calc(var(--lg) * -0.16); }
.loader-bar { width: 132px; height: 2px; overflow: visible; margin-top: -10px; }
.ring-bg, .ring-fg { fill: none; stroke-width: 1; }
.ring-bg { stroke: rgba(246, 233, 226, .16); }
.ring-fg { stroke: var(--bone); stroke-dasharray: 0 100; filter: drop-shadow(0 0 6px var(--crimson)); }
.loader-count { font-family: var(--mono); font-size: 13px; letter-spacing: .3em; color: var(--bone); padding-left: .3em; }
.loader-line { color: var(--rose); font-size: 10px; }

/* ---------- cursor: an OS cursor image, so it can never lag behind the hand ---------- */
@media (pointer: fine) {
  html {
    cursor: url(../assets/img/cursor.png) 16 16, auto;
    cursor: image-set(url(../assets/img/cursor.png) 1x, url(../assets/img/cursor@2x.png) 2x) 16 16, auto;
  }
  a, button, .blade {
    cursor: url(../assets/img/cursor_hot.png) 16 16, pointer;
    cursor: image-set(url(../assets/img/cursor_hot.png) 1x, url(../assets/img/cursor_hot@2x.png) 2x) 16 16, pointer;
  }
}

/* ---------- narrow screens ---------- */
@media (max-aspect-ratio: 1/1) {
  #s-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56vh; background: linear-gradient(to top, rgba(7, 3, 4, .96) 28%, rgba(7, 3, 4, .72) 58%, transparent); }
  .hero-copy { left: 6vw; right: 6vw; top: auto; bottom: 19vh; max-width: none; }
  .hero-line { font-size: clamp(36px, 11vw, 64px); }
  #s-hero .blade { left: 6vw; bottom: 8vh; }
  .hero-scroll { display: none; }
  .nav nav a:not(.nav-enter) { display: none; }
  .nav-mark { display: none; }
  .facts { grid-template-columns: repeat(2, 1fr); bottom: 13vh; }
  .facts > div { padding-bottom: .8em; }
  #s-oath .eyebrow { left: 6vw; top: 12vh; }
  #s-oath .body { left: 6vw; top: auto; bottom: 12vh; width: 88vw; }
  .rank-no { left: 6vw; top: 10vh; }
  .rank-text { left: 6vw; top: auto; bottom: 11vh; width: 88vw; }
  #s-gate .eyebrow { left: 6vw; top: 12vh; }
  .epigraph { left: 6vw; top: auto; bottom: 27vh; width: 88vw; }
  #s-gate .blade { left: 6vw; top: auto; bottom: 14vh; }
  .foot { left: 6vw; right: 6vw; flex-wrap: wrap; row-gap: .6em; bottom: 3vh; }
  .sound { top: clamp(16px, 2vw, 28px); right: auto; left: 6vw; bottom: auto; }
  .at-gate .sound { bottom: auto; }
  .rail { display: none; }
}

/* ---------- no WebGL: a plain, readable page ---------- */
.nogl-note { display: none; }
.no-gl .nogl-note {
  display: block; position: fixed; z-index: 40; left: 50%; bottom: 16px; translate: -50% 0; padding: .8em 1.2em; width: max-content; max-width: 92vw;
  background: var(--ink); border: 1px solid var(--blood); color: var(--rose); font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
}
.no-gl #track { height: auto; }
.no-gl #view { position: static; height: auto; overflow: visible; }
.no-gl #gl, .no-gl .rail, .no-gl .sound { display: none; }
.no-gl .scene { position: relative; inset: auto; opacity: 1; pointer-events: auto; min-height: 100vh; padding: 12vh 6vw; display: flex; flex-direction: column; align-items: flex-start; gap: 3vh; justify-content: center; background: var(--ink); }
.no-gl .hero-scroll, .no-gl .nav-mark { display: none; }
.no-gl .facts { width: 100%; }
.no-gl #s-oath { background: linear-gradient(90deg, var(--ink) 30%, rgba(7, 3, 4, .3)), right center / cover url(../assets/img/portrait_wide.webp); }
.no-gl #s-rank-0 { background: linear-gradient(90deg, var(--ink) 30%, rgba(7, 3, 4, .3)), right center / cover url(../assets/img/scene_squire.webp); }
.no-gl #s-rank-1 { background: linear-gradient(90deg, var(--ink) 30%, rgba(7, 3, 4, .3)), right center / cover url(../assets/img/scene_knight.webp); }
.no-gl #s-rank-2 { background: linear-gradient(90deg, var(--ink) 30%, rgba(7, 3, 4, .3)), right center / cover url(../assets/img/scene_lord.webp); }
.no-gl #s-rank-3 { background: linear-gradient(90deg, var(--ink) 30%, rgba(7, 3, 4, .3)), right center / cover url(../assets/img/scene_king.webp); }
.no-gl #s-gate { background: linear-gradient(90deg, var(--ink) 20%, rgba(7, 3, 4, .3)), center / cover url(../assets/img/gauntlet.webp); }
.no-gl #s-elysium { background: linear-gradient(rgba(7, 3, 4, .5), rgba(7, 3, 4, .5)), center / cover url(../assets/img/orbit.webp); }
.no-gl .scene > * { position: static; translate: none; }
.no-gl .chrome { display: block; width: min(860px, 88vw); height: auto; }
.no-gl #s-hero { background: linear-gradient(90deg, rgba(7, 3, 4, .8), transparent 62%), center / cover url(../assets/img/master.webp); }
.no-gl #s-ring { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-scroll b { animation: none; }
  .blade, .blade::after { transition: none; }
}

/* narrow: small type sits on bright art, nothing else holds it apart from the picture */
@media (max-aspect-ratio: 1/1) {
  .rank::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46vh; background: linear-gradient(to top, rgba(7, 3, 4, .94) 34%, rgba(7, 3, 4, 0)); pointer-events: none; }
}
@media (max-width: 760px) {
  .eyebrow, .facts dt, .foot, .epigraph cite, .epigraph p { text-shadow: 0 0 6px var(--ink), 0 1px 3px var(--ink), 0 0 16px var(--ink); }
  .facts dt { color: var(--rose); }
  .eyebrow { color: var(--bone); }
  #s-gate::after { content: ""; position: absolute; inset: auto 0 0; height: 16vh; background: linear-gradient(transparent, var(--ink)); pointer-events: none; z-index: -1; }
}

/* ---------- leaving for the app: everything goes dark with the picture ---------- */
.leaving .nav, .leaving .rail, .leaving .sound { opacity: 0; pointer-events: none; transition: opacity .44s linear .18s; }

/* ---------- contract address and X in the nav (values come from the admin, see src/site.js) ---------- */
.nav-ca {
  display: inline-flex; align-items: center; gap: .75em; padding: .66em .95em .66em 1em; cursor: pointer;
  font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; font-size: clamp(10.5px, .76vw, 13.5px);
  color: var(--bone); background: rgba(7, 3, 4, .52); border: 1px solid rgba(246, 233, 226, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .2s, color .2s;
}
.nav-ca b { color: var(--crimson); font-weight: 500; }
.nav-ca span { text-transform: none; letter-spacing: .04em; }
.nav-ca span.is-soon { text-transform: uppercase; letter-spacing: .22em; color: var(--rose); }
.nav-ca svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .65; transition: opacity .2s; }
.nav-ca:hover:not(:disabled) { border-color: var(--crimson); }
.nav-ca:hover:not(:disabled) svg { opacity: 1; }
.nav-ca.is-copied { border-color: var(--crimson); color: var(--crimson); }
.nav-ca:disabled { cursor: default; }
.nav-ca:disabled svg { display: none; }
.nav .nav-x { display: inline-flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; }
.nav-x svg { width: 1.3em; height: 1.3em; fill: currentColor; }
@media (max-aspect-ratio: 1/1) {
  .nav nav a.nav-x { display: inline-flex; }
  .nav-ca { position: absolute; right: clamp(16px, 2.2vw, 40px); top: calc(100% - 4px); font-size: 10.5px; }
}