/* ASHEN RIFT, design dossier stylesheet
   Ground: charcoal with ash. Ink: bone. One accent per domain. */

@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url('fonts/BodoniModa-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/BodoniModa-500-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Spectral-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Spectral-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/Spectral-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --ground:#171412; --well:#100E0C; --plate:#201B17; --plate-2:#241f1a;
  --bone:#EDE4D6; --ash:#9A9083; --ash-dim:#6f675d;
  --hair:rgba(237,228,214,0.14); --hair-strong:rgba(237,228,214,0.24);
  --rubric:#A32A1E; --rubric-live:#D2492E;
  --amber:#DA8C3E; --amber-deep:#8a5522;
  --corpse:#A8C0B4; --corpse-deep:#7E9A90;
  --display:'Bodoni Moda',Didot,'Playfair Display',Georgia,serif;
  --body:'Spectral',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --rail:76px; --gutter:180px; --measure:68ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--bone);
  font-family:var(--body); font-size:18px; line-height:1.7;
  font-weight:400; letter-spacing:0.002em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* paper grain, a real noise tile, plus a soft global vignette */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url('grain.png'); background-size:200px 200px;
  opacity:var(--grain-op,0.05); mix-blend-mode:soft-light;
}
body::after{
  content:""; position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:radial-gradient(130% 90% at 50% 40%,transparent 55%,rgba(0,0,0,0.45) 100%);
  opacity:var(--vignette-op,1);
}
.voidspinslow{transform-box:fill-box; transform-origin:center; animation:voidspin 90s linear infinite}
@keyframes voidspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
body.no-motion .voidspinslow,body.no-motion .tear .glow{animation:none}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:#3b2b20; color:var(--bone)}
::-moz-selection{background:#3b2b20; color:var(--bone)}

/* ---------- typography helpers ---------- */
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ash); font-weight:500}
.mono{font-family:var(--mono); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ash)}
.mono-sm{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ash-dim)}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; line-height:0.98; margin:0; text-shadow:0 1px 0 rgba(0,0,0,0.85)}
.cover h1{-webkit-user-select:none; user-select:none}
p{margin:0 0 1.1em}
strong{font-weight:600; color:var(--bone)}
em{font-style:italic}
.rubric{color:var(--rubric-live)}
.amber{color:var(--amber)}
.corpse{color:var(--corpse)}

/* ---------- the rail ---------- */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail); z-index:100;
  border-right:1px solid var(--hair); background:linear-gradient(180deg,#191512,#141110);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
}
.rail .mark{position:absolute; top:22px; left:0; right:0; text-align:center; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:0.18em; color:var(--bone)}
.rail .mark span{display:block; font-family:var(--mono); font-size:8px; letter-spacing:0.3em; color:var(--rubric-live); margin-top:4px}
.rail nav{display:flex; flex-direction:column; align-items:center; gap:0.9rem}
.rail a{
  font-family:var(--display); font-weight:600; font-size:16px; color:var(--ash-dim);
  width:38px; height:38px; display:grid; place-items:center; position:relative;
  border:1px solid transparent; transition:color .3s,border-color .3s;
}
.rail a::after{content:attr(data-name); position:absolute; left:52px; white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ash); opacity:0; transform:translateX(-6px); transition:.3s; pointer-events:none;
  background:var(--well); padding:4px 8px; border:1px solid var(--hair)}
.rail a:hover{color:var(--bone); border-color:var(--hair)}
.rail a:hover::after{opacity:1; transform:none}
.rail a.active{color:var(--rubric-live)}
.rail a.active::before{content:""; position:absolute; inset:-1px; border:1px solid var(--rubric); opacity:.5}

/* mobile scroll progress */
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--rubric),var(--amber)); z-index:200; transition:width .12s linear}

/* ---------- shell ---------- */
main{margin-left:var(--rail); padding:0 clamp(20px,4vw,64px)}
.wrap{max-width:1180px; margin:0 auto}
.spread{display:grid; grid-template-columns:var(--gutter) minmax(0,1fr); gap:clamp(24px,3vw,52px); align-items:start}
.spread > .content{grid-column:2; min-width:0}
/* body copy keeps a readable measure while tables, plates and diagrams fill the column */
.content > p, .content > .lead-p, .content .prose p, .content .ability p, .content .identity{max-width:var(--measure)}
.margin{grid-column:1; font-family:var(--mono); font-size:11.5px; line-height:1.6; letter-spacing:0.06em; color:var(--ash-dim); text-transform:none; padding-top:6px; position:relative}
.margin .tag{display:block; text-transform:uppercase; letter-spacing:0.18em; color:var(--rubric-live); font-size:9.5px; margin-bottom:6px}
.margin::before{content:""; position:absolute; left:-18px; top:8px; width:10px; height:1px; background:var(--rubric)}
.margin strong{color:var(--ash); font-weight:500}
.margin.amber .tag{color:var(--amber)}
.margin.amber::before{background:var(--amber)}
.margin.corpse .tag{color:var(--corpse-deep)}
.margin.corpse::before{background:var(--corpse-deep)}
.reveal{opacity:0; transform:translateY(10px)}
.reveal.in{opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease}

/* ---------- section headers ---------- */
section{padding:clamp(46px,6.5vh,96px) 0}
.sec-head{
  display:grid; grid-template-columns:var(--gutter) minmax(0,1fr); column-gap:clamp(20px,3vw,44px);
  border-top:1px solid var(--hair-strong); padding-top:24px; margin-bottom:40px; position:relative;
}
.sec-head .idx{grid-column:1; grid-row:1 / span 3; align-self:start; font-family:var(--display); font-weight:600; font-size:clamp(46px,6.5vw,78px); color:var(--rubric); line-height:0.9; opacity:.92}
.sec-head .lead{grid-column:2; font-family:var(--mono); font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--ash)}
.sec-head h2{grid-column:2; font-size:clamp(34px,4.6vw,60px); margin:8px 0 10px}
.sec-head .dek{grid-column:2; font-family:var(--body); font-style:italic; color:var(--ash); max-width:58ch; font-size:18px}
h3.sub{font-size:clamp(20px,2.4vw,27px); margin:2.4rem 0 1rem; letter-spacing:0.05em}
.sub-label{font-family:var(--mono); font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--rubric-live); margin:2.2rem 0 .8rem; display:flex; align-items:center; gap:12px}
.sub-label::after{content:""; height:1px; flex:1; background:var(--hair)}
.prose{max-width:var(--measure)}
.prose p{color:#cfc6b8}
.lead-p{font-size:20px; color:var(--bone)}

/* ---------- cover ---------- */
.cover{min-height:auto; display:flex; flex-direction:column; justify-content:flex-start; position:relative; padding-top:clamp(64px,11vh,120px); padding-bottom:clamp(34px,6vh,64px)}
.cover .plate-tag{position:absolute; top:34px; right:0; text-align:right}
.cover h1{font-size:clamp(64px,17vw,220px); font-weight:700; letter-spacing:0.02em; line-height:0.86; margin:0}
.cover h1 .rift-i{color:var(--rubric)}
.cover .title-tag{position:relative; display:inline-flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.cover .title-tag .wt{font-family:var(--mono); font-size:11px; letter-spacing:0.3em; color:var(--ash); border:1px solid var(--hair); padding:4px 9px; text-transform:uppercase}
.cover .subtitle{font-family:var(--mono); font-size:clamp(11px,1.4vw,13px); letter-spacing:0.22em; text-transform:uppercase; color:var(--ash); margin-top:22px; max-width:70ch}
.cover .byline{margin-top:26px; color:var(--ash); font-style:italic; max-width:60ch}
/* the one engraved rift tear, hairlines with amber inside */
.tear{position:absolute; right:clamp(0px,6vw,90px); top:44%; transform:translateY(-50%); width:110px; height:min(58vh,520px); pointer-events:none; opacity:.9}
.tear svg{width:100%; height:100%; overflow:visible}
.tear .line{fill:none; stroke:var(--hair-strong); stroke-width:1}
.tear .wisp{fill:none; stroke:var(--hair); stroke-width:0.7}
.tear .glow{stroke:var(--amber); stroke-width:1.1; fill:none; opacity:.9; animation:flicker 7s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.85}45%{opacity:.55}70%{opacity:.95}}
@media(max-width:1100px){.tear{display:none}}

/* ledger on cover */
.ledger{margin-top:clamp(34px,6vh,72px); border-top:1px solid var(--hair-strong); padding-top:0}
.ledger a{display:flex; align-items:baseline; gap:20px; padding:13px 4px; border-bottom:1px solid var(--hair); transition:background .25s, padding .25s}
.ledger a:hover{background:rgba(237,228,214,0.03); padding-left:12px}
.ledger .n{font-family:var(--display); font-weight:600; font-size:19px; color:var(--rubric); width:34px}
.ledger .t{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; font-size:clamp(16px,2.2vw,22px)}
.ledger .d{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ash-dim); text-align:right}

/* ---------- plates (full-bleed bands) ---------- */
.plate{position:relative; margin:clamp(60px,9vh,120px) calc(-1*clamp(20px,4vw,64px)); padding:clamp(40px,6vh,80px) clamp(20px,4vw,64px) 76px; background:var(--well); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.plate.no-bleed{margin-left:0; margin-right:0; border-left:1px solid var(--hair); border-right:1px solid var(--hair)}
.plate::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 120px rgba(0,0,0,0.6)}
.plate-cap{position:absolute; left:clamp(20px,4vw,64px); bottom:20px; font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ash)}
.plate-cap b{color:var(--bone); font-weight:500}
.plate-head{font-family:var(--mono); font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--rubric-live); margin-bottom:8px}
.plate-title{font-size:clamp(24px,3vw,38px); margin-bottom:6px}
.plate-note{color:var(--ash); font-style:italic; max-width:60ch; margin-bottom:30px}

/* ---------- generic components ---------- */
.rule{height:1px; background:var(--hair); margin:30px 0}
.pull{border-left:2px solid var(--rubric); padding:6px 0 6px 22px; margin:30px 0; font-family:var(--display); font-weight:500; text-transform:none; letter-spacing:0.01em; font-size:clamp(19px,2.4vw,26px); line-height:1.35; color:var(--bone)}
.pull.amber{border-color:var(--amber)}
.pull.corpse{border-color:var(--corpse)}
.note{border:1px solid var(--hair); background:var(--plate); padding:16px 18px; font-family:var(--mono); font-size:12px; line-height:1.7; letter-spacing:0.04em; text-transform:none; color:var(--ash)}
.note b{color:var(--bone); font-weight:500; text-transform:uppercase; letter-spacing:0.12em; font-size:11px; display:block; margin-bottom:6px}
.tbc{color:var(--rubric-live); font-style:italic}
.flag{color:var(--amber); border-bottom:1px dotted var(--amber)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); min-width:0}
.grid2 > *,.grid3 > *{min-width:0}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; min-width:0}
.stat{display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid var(--hair); font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase}
.stat .k{color:var(--ash)}
.stat .v{color:var(--bone); font-weight:500; text-align:right}
.chip{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; border:1px solid var(--hair); padding:3px 8px; color:var(--ash); margin:0 6px 6px 0}
.chip.amber{color:var(--amber); border-color:rgba(218,140,62,.4)}
.chip.corpse{color:var(--corpse); border-color:rgba(168,192,180,.4)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto; max-width:100%; border:1px solid var(--hair); background:var(--well); -webkit-overflow-scrolling:touch}
/* scroll cue: edge fade plus a swipe hint, added by script.js to wide tables */
.table-outer{position:relative}
.table-outer::before,.table-outer::after{content:""; position:absolute; top:0; bottom:0; width:46px; pointer-events:none; z-index:4; transition:opacity .25s}
.table-outer::after{right:0; background:linear-gradient(to left,var(--well) 20%,rgba(16,14,12,0))}
.table-outer::before{left:0; background:linear-gradient(to right,var(--well) 20%,rgba(16,14,12,0)); opacity:0}
.table-outer.at-end::after{opacity:0}
.table-outer:not(.at-start)::before{opacity:1}
.scroll-hint{position:absolute; right:8px; top:12px; z-index:5; pointer-events:none; font-family:var(--mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ash); background:var(--well); border:1px solid var(--hair); padding:3px 7px; transition:opacity .25s}
.scroll-hint::after{content:"››"; margin-left:6px; color:var(--rubric-live)}
.scroll-hint.hide{opacity:0}
table{border-collapse:collapse; width:100%; min-width:560px; font-family:var(--mono); font-size:12px; letter-spacing:0.04em}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--hair); vertical-align:top; text-transform:none}
thead th{font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ash); background:var(--plate); position:sticky; top:0; border-bottom:1px solid var(--hair-strong)}
tbody tr:hover{background:rgba(237,228,214,0.025)}
td.n,th.n{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
td.k{color:var(--bone); text-transform:uppercase; letter-spacing:0.08em}
td.amber{color:var(--amber)}
td.corpse{color:var(--corpse)}
caption{caption-side:top; text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rubric-live); padding:0 0 10px}
/* pinned first column for wide tables */
.pin td:first-child,.pin th:first-child{position:sticky; left:0; background:var(--well); z-index:2; box-shadow:1px 0 0 var(--hair)}
.pin thead th:first-child{background:var(--plate)}

/* ---------- loop rings diagram ---------- */
.loop{display:grid; grid-template-columns:minmax(300px,440px) 1fr; gap:44px; align-items:center}
.loop svg{width:100%; height:auto}
.ring-label{font-family:var(--mono); font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase}

/* ---------- class plates ---------- */
.class-plate{display:grid; grid-template-columns:56px minmax(0,1fr) minmax(240px,340px); gap:clamp(18px,3vw,40px); border-top:1px solid var(--hair-strong); padding:38px 0; align-items:stretch}
.class-plate .vname{writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--display); font-weight:600; letter-spacing:0.14em; text-transform:uppercase; font-size:clamp(22px,2.6vw,32px); color:var(--ink,var(--bone)); display:flex; align-items:center; justify-content:center}
.class-body{max-width:60ch}
.class-art{position:relative; border:1px solid var(--hair); background:var(--well); min-height:320px; overflow:hidden}
.class-art img{width:100%; height:100%; object-fit:cover; filter:saturate(0.92) contrast(1.03)}
.class-art::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,14,12,0.15),rgba(16,14,12,0.55)); mix-blend-mode:multiply}
.class-art .badge{position:absolute; left:0; bottom:0; right:0; z-index:2; font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ash); padding:8px 10px; background:linear-gradient(0deg,rgba(16,14,12,.85),transparent)}
.class-art .idx{position:absolute; top:8px; left:10px; z-index:2; font-family:var(--display); font-weight:600; font-size:30px; color:var(--ink,var(--bone))}
.identity{font-family:var(--display); font-weight:500; text-transform:none; font-size:clamp(17px,2vw,21px); line-height:1.4; margin:4px 0 20px; color:var(--bone)}
.ability{border-top:1px solid var(--hair); padding:12px 0}
.ability .an{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--bone)}
.ability .ak{font-family:var(--mono); font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink,var(--rubric-live)); margin-left:10px}
.ability p{font-size:15px; color:#c6bdb0; margin:5px 0 0}
/* resource meter */
.meter{margin:16px 0}
.meter .bar{height:12px; border:1px solid var(--hair-strong); position:relative; background:var(--well); overflow:hidden}
.meter .fill{position:absolute; inset:0 auto 0 0; background:var(--ink,var(--rubric)); opacity:.8}
.meter .decay{position:absolute; inset:0 0 0 auto; width:38%; background:repeating-linear-gradient(45deg,transparent 0 5px,var(--hair) 5px 6px)}
.meter .cap{display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ash-dim); margin-top:6px}

/* ---------- controls overlays ---------- */
.overlay-wrap{display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:clamp(24px,4vw,60px); align-items:center}
.phone{position:relative; width:100%; max-width:340px; margin:0 auto; aspect-ratio:9/19; border:1.5px solid var(--hair-strong); border-radius:34px; background:linear-gradient(180deg,#0d0b0a,#131110); padding:12px; box-shadow:0 30px 60px rgba(0,0,0,.5)}
.phone .screen{position:absolute; inset:12px; border-radius:24px; overflow:hidden; border:1px solid var(--hair)}
.phone .notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px; height:6px; border-radius:6px; background:#000; z-index:4; border:1px solid rgba(237,228,214,.1)}
.hotspot{position:absolute; border:1px solid var(--amber); border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:8.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); background:radial-gradient(circle,rgba(218,140,62,.12),transparent 70%); text-align:center; line-height:1.2}
.hotspot.soft{border-style:dashed; color:var(--ash); border-color:var(--hair-strong); background:radial-gradient(circle,rgba(237,228,214,.05),transparent 70%)}
.keycaps{display:flex; flex-direction:column; gap:18px}
.keyrow{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.keyrow .verb{font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ash); width:110px; flex:0 0 auto}
.key{display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--hair-strong); border-bottom-width:3px; border-radius:6px; background:linear-gradient(180deg,#272119,#1b1613); font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--bone); text-transform:uppercase; box-shadow:0 2px 0 rgba(0,0,0,.5)}
.key.wide{min-width:auto}
.key.gp{color:var(--amber); border-color:rgba(218,140,62,.45)}

/* ---------- faction map ---------- */
.map{position:relative}
.map svg{width:100%; height:auto}

/* ---------- ladder ---------- */
.ladder{position:relative; border-left:1px solid var(--hair-strong); margin:20px 0 20px 6px}
.band{position:relative; padding:14px 0 14px 26px; border-bottom:1px solid var(--hair)}
.band::before{content:""; position:absolute; left:-5px; top:22px; width:9px; height:9px; background:var(--corpse); transform:rotate(45deg)}
.band .pct{font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--corpse)}
.band .rw{color:var(--ash); font-size:14px; margin-top:2px}
.band .rw b{color:var(--bone); font-weight:500}
.reset-cut{position:absolute; left:-14px; right:0; border-top:1px dashed var(--corpse-deep); padding-top:4px}
.reset-cut span{position:relative; top:-22px; font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--corpse-deep); background:var(--ground); padding:0 8px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair-strong); margin-top:80px; padding:60px 0 80px; color:var(--ash)}
footer .colophon{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; line-height:2.2}
footer .colophon b{color:var(--bone); font-weight:500}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  :root{--gutter:150px}
  .class-plate{grid-template-columns:48px minmax(0,1fr) minmax(200px,280px)}
}
@media(max-width:900px){
  :root{--measure:100%}
  .spread{grid-template-columns:minmax(0,1fr); gap:10px}
  .spread > .content{grid-column:1}
  .sec-head{grid-template-columns:1fr; column-gap:0}
  .sec-head .idx{grid-column:1; grid-row:auto; font-size:56px; margin-bottom:4px}
  .sec-head .lead,.sec-head h2,.sec-head .dek{grid-column:1}
  .margin{grid-column:1; order:-1; border-left:2px solid var(--rubric); padding:8px 0 8px 14px; background:rgba(237,228,214,.02); max-width:none}
  .margin::before{display:none}
  .loop,.overlay-wrap{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .class-plate{grid-template-columns:1fr; gap:20px}
  .class-plate .vname{writing-mode:horizontal-tb; transform:none; font-size:26px; justify-content:flex-start}
  .class-art{min-height:300px; order:2}
  .rail{width:0; border:0; overflow:hidden}
  .rail .mark,.rail nav,.rail .progress{display:none}
  main{margin-left:0}
  .progress{display:block}
}
@media(max-width:640px){
  body{font-size:17px}
  .cover{padding-top:90px}
  .cover .plate-tag{position:static; text-align:left; margin-bottom:26px}
  .plate{margin-left:calc(-1*20px); margin-right:calc(-1*20px); padding-left:20px; padding-right:20px}
  .ledger .d{display:none}
  .cover h1{letter-spacing:0.01em}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}