:root{
  --obsidian:#0B0D10;
  --ivory:#E8E0CF;
  --ivory-dim:#b9b2a2;
  --gold:#C6923B;
  --crimson:#8F2638;
  --cyan:#44C7D9;
  --line:rgba(232,224,207,.16);
  --display:'Unbounded',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--obsidian);color:var(--ivory);font:16px/1.7 var(--body);overflow-x:hidden}
::selection{background:var(--crimson);color:var(--ivory)}

/* progress bar */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:50;box-shadow:0 0 12px rgba(198,146,59,.7)}

/* plate rail */
#rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px;align-items:center}
#rail .rail-label{writing-mode:vertical-rl;font:500 9px var(--mono);letter-spacing:4px;color:var(--ivory-dim);margin-bottom:6px}
#rail a{font:500 11px var(--mono);color:var(--ivory-dim);text-decoration:none;border:1px solid var(--line);width:30px;height:30px;display:grid;place-items:center;transition:.2s;background:rgba(11,13,16,.55)}
#rail a:hover{color:var(--gold);border-color:var(--gold);transform:translateX(-3px)}
#rail a.active{background:var(--gold);color:var(--obsidian);border-color:var(--gold);font-weight:600}
@media(max-width:900px){#rail{display:none}}

/* plates */
.plate{position:relative;min-height:100vh;background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:center;padding:14vh 0}
@supports not (background-attachment:fixed){.plate{background-attachment:scroll}}
.scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,13,16,.94) 0%,rgba(11,13,16,.86) 42%,rgba(11,13,16,.45) 100%)}
.scrim-deep{background:linear-gradient(180deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,.88) 60%,var(--obsidian) 100%)}
.content{position:relative;z-index:2;width:min(720px,88vw);margin-left:max(6vw,calc((100vw - 1200px)/2))}

.pnum{position:absolute;z-index:1;right:2vw;bottom:-.12em;font:900 clamp(160px,30vw,420px)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(232,224,207,.14);user-select:none;pointer-events:none}

.kicker{font:500 11px var(--mono);letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold)}

h1{font:900 clamp(44px,7.5vw,96px)/1.02 var(--display);letter-spacing:-.01em;text-transform:uppercase}
h1 .hollow{color:transparent;-webkit-text-stroke:2px var(--gold)}
h2{font:700 clamp(30px,4.6vw,54px)/1.1 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:26px}
h2::after{content:"";display:block;width:64px;height:4px;background:var(--crimson);margin-top:18px}
h3{font:600 12px var(--mono);letter-spacing:4px;text-transform:uppercase;color:var(--cyan);margin:34px 0 12px;display:flex;align-items:center;gap:12px}
h3::before{content:"▸";color:var(--gold)}
.lede{font-size:clamp(17px,2vw,21px);line-height:1.65;color:var(--ivory);font-weight:400;max-width:56ch}
.lede em{color:var(--gold);font-style:italic}
p{margin:14px 0;color:var(--ivory-dim)}
.content>p,.content .lede{color:var(--ivory)}
ul{list-style:none;padding:0;margin:10px 0}
ul li{position:relative;padding:7px 0 7px 30px;color:var(--ivory-dim);border-bottom:1px dashed var(--line)}
ul li:last-child{border-bottom:none}
ul li::before{content:"◆";position:absolute;left:2px;top:9px;font-size:9px;color:var(--crimson)}
ul li b{color:var(--ivory);font-weight:600}
em{color:var(--gold)}

.check{margin-top:38px;border-left:3px solid var(--gold);background:rgba(198,146,59,.07);padding:18px 22px;font-size:15px;color:var(--ivory)}
.check span{display:block;font:600 10px var(--mono);letter-spacing:4px;color:var(--gold);margin-bottom:8px}

/* title plate extras */
.title-block{padding-top:4vh}
.manifest{display:grid;grid-template-columns:repeat(3,auto);gap:10px 44px;margin:44px 0 10px;font-family:var(--mono)}
.manifest div{border-top:1px solid var(--line);padding-top:10px}
.manifest dt{font-size:10px;letter-spacing:3px;color:var(--ivory-dim)}
.manifest dd{font-size:13px;color:var(--gold);margin-top:4px}
@media(max-width:640px){.manifest{grid-template-columns:repeat(2,auto)}}
.scroll-cue{font:500 11px var(--mono);letter-spacing:5px;color:var(--ivory-dim);margin-top:52px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}

/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* colophon */
.colophon{background:var(--obsidian);padding:16vh 6vw 12vh;max-width:860px;margin:auto;border-top:1px solid var(--line)}
.colophon h2::after{background:var(--gold)}
.colophon p{max-width:60ch}
.colophon-meta{font:400 11px var(--mono);letter-spacing:2px;color:var(--ivory-dim);margin-top:40px}
.top-link{display:inline-block;margin-top:44px;font:600 12px var(--mono);letter-spacing:4px;color:var(--gold);text-decoration:none;border:1px solid var(--gold);padding:14px 26px;transition:.2s}
.top-link:hover{background:var(--gold);color:var(--obsidian)}