/* ============================================================
   Bonemark, Traveller's Handbook. Tallow Games.
   v6: modern sourcebook layout in dark-pixel RPG dress.
   The page is laid out like a tabletop rulebook: table of
   contents rail, chapter frontispieces with roman numerals and
   tapered rules, a read-aloud quote box, stat blocks for the
   Crew, illuminated drop caps. One panel style, candle gold as
   the only primary accent, teal for the living world, coral
   only for negation. Pixel font = structure, EB Garamond =
   reading.
   ============================================================ */

@font-face{font-family:"BonemarkPixel";src:url("../assets/fonts/bonemark.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:"EB Garamond";src:url("../assets/fonts/ebgaramond.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;}

:root{
  --bg:#0e0a06;
  --panel:#181209;
  --panel-deep:#100c07;
  --edge:#070402;
  --brass:#6e5630;
  --brass-hi:#8a6c3c;
  --bevel:#2e2414;
  --stone:#1d160d;
  --ink:#ddcfae;
  --ink-soft:#a2947a;
  --read:#e7dab8;
  --gold:#d2a35f;
  --gold-deep:#9a7638;
  --teal:#7fa98a;
  --coral:#b5433a;
  --parch:#e6d9b8;
  --mono:"BonemarkPixel","Cascadia Mono",ui-monospace,"DejaVu Sans Mono",monospace;
  --serif:"EB Garamond","Crimson Pro",Georgia,serif;
  --shadow:6px 6px 0 rgba(0,0,0,.45);
}

/* ---------------- base ---------------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;}
*{overflow-wrap:break-word;}
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 50% -8%, #30220f 0%, rgba(48,34,15,0) 62%),
    radial-gradient(900px 600px at 85% 108%, rgba(37,58,48,.20) 0%, rgba(37,58,48,0) 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 3px, rgba(255,255,255,.012) 3px 6px),
    var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:17px;
  line-height:1.7;
  letter-spacing:.01em;
}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges;}

/* fluid page frame: 15% gutter each side on wide screens */
.book{width:70%;margin:0 auto;padding:0 0 4rem;}
.book>section{margin-bottom:3.4rem;scroll-margin-top:4.6rem;}

h1,h2,h3{font-family:var(--mono);font-weight:700;margin:0;text-transform:uppercase;letter-spacing:.04em;line-height:1.12;}
h2{font-size:clamp(1.5rem,2.2vw,1.9rem);color:var(--gold);text-shadow:3px 3px 0 #000;margin-bottom:.45rem;}
h3{font-size:1.02rem;color:var(--teal);text-shadow:2px 2px 0 #000;}
h3.mt{margin-top:1.7rem;}
p{margin:0 0 .85rem;}
p:last-child{margin-bottom:0;}
b,strong{color:var(--gold);}
.soft{color:var(--ink-soft);}
.big{font-size:1.15rem;}

/* ---------------- chapter frontispiece ---------------- */
.eyebrow{
  display:table;margin:0 auto .85rem;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);background:var(--panel-deep);
  border:2px solid var(--brass);box-shadow:0 0 0 2px var(--edge),inset 0 0 0 1px rgba(210,163,95,.12);
  padding:.34rem .95rem .3rem;
}
.win>h2,.chead h2{text-align:center;}
.win>h2{margin-bottom:.5rem;}
/* tapered rule under every chapter title, sourcebook style */
.win>h2::after,.chead h2::after{
  content:"";display:block;width:min(300px,64%);height:5px;margin:.8rem auto 1rem;
  background:linear-gradient(90deg,transparent 0%,var(--gold-deep) 20%,var(--gold) 50%,var(--gold-deep) 80%,transparent 100%);
  clip-path:polygon(0 45%,20% 0,50% 0,80% 0,100% 45%,100% 55%,80% 100%,50% 100%,20% 100%,0 55%);
}
.chead{text-align:center;margin:0 0 1.15rem;}
.chead h2{font-size:clamp(1.7rem,2.6vw,2.2rem);letter-spacing:.12em;}
.chead .note{font-size:.8rem;letter-spacing:.05em;margin:.1rem 0 0;}
.win>.soft:first-of-type{text-align:center;}

/* illuminated drop cap on chapter openers */
.drop::first-letter{
  float:left;font-family:var(--serif);font-size:3.3em;line-height:.82;
  color:var(--gold);padding:.04em .14em 0 0;text-shadow:2px 2px 0 #000;
}

/* ---------------- contents rail (sourcebook TOC) ---------------- */
.toc{display:none;}
@media (min-width:1400px){
  /* the rail waits under the key-art header; no-JS still gets it */
  html.js:not(.pasthero) .toc{display:none;}
  .toc{display:flex;flex-direction:column;gap:.6rem;position:fixed;left:1.6vw;top:50%;transform:translateY(-50%);z-index:40;max-width:calc(15vw - 2.4vw);}
  .toc .tlab{font-family:var(--mono);font-size:.58rem;letter-spacing:.3em;color:var(--gold-deep);text-transform:uppercase;margin-bottom:.2rem;}
  .toc a{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;opacity:.8;transition:color .15s,opacity .15s;}
  .toc a::before{content:"";flex:none;width:8px;height:8px;background:var(--bevel);box-shadow:0 0 0 1px #000;transform:rotate(45deg);transition:background .15s;}
  .toc a:hover{color:var(--ink);opacity:1;}
  .toc a.on{color:var(--gold);opacity:1;}
  .toc a.on::before{background:var(--gold);}
}

/* ---------------- the one panel ---------------- */
.win{
  position:relative;
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-deep) 100%);
  border:3px solid var(--brass);
  box-shadow:0 0 0 3px var(--edge),inset 0 0 0 2px rgba(0,0,0,.35),inset 0 2px 0 2px rgba(138,108,60,.08),var(--shadow);
  padding:1.9rem 1.9rem 1.7rem;
  margin:1.5rem 0;
}
.win.flat{
  background:var(--stone);
  border:2px solid var(--bevel);
  box-shadow:0 0 0 2px var(--edge);
  padding:1.15rem 1.3rem;
}
.win.center{text-align:center;}
.win.narrow{max-width:56em;margin-left:auto;margin-right:auto;}
.win.flat.closer{margin-top:1.3rem;background:rgba(0,0,0,.18);}
.win.flat.closer p{color:var(--ink-soft);font-style:italic;text-align:center;max-width:44em;margin-left:auto;margin-right:auto;}

/* brass corner caps: every main panel gets four riveted L-corners, the
   kind of fitting a travelling chest would have */
.win:not(.flat)::after{
  content:"";position:absolute;inset:6px;pointer-events:none;opacity:.9;
  background:
    linear-gradient(var(--gold-deep),var(--gold-deep)) left 0 top 0/18px 3px,
    linear-gradient(var(--gold-deep),var(--gold-deep)) left 0 top 0/3px 18px,
    linear-gradient(var(--gold-deep),var(--gold-deep)) right 0 top 0/18px 3px,
    linear-gradient(var(--gold-deep),var(--gold-deep)) right 0 top 0/3px 18px,
    linear-gradient(var(--gold-deep),var(--gold-deep)) left 0 bottom 0/18px 3px,
    linear-gradient(var(--gold-deep),var(--gold-deep)) left 0 bottom 0/3px 18px,
    linear-gradient(var(--gold-deep),var(--gold-deep)) right 0 bottom 0/18px 3px,
    linear-gradient(var(--gold-deep),var(--gold-deep)) right 0 bottom 0/3px 18px,
    linear-gradient(var(--gold),var(--gold)) left 0 top 0/6px 6px,
    linear-gradient(var(--gold),var(--gold)) right 0 top 0/6px 6px,
    linear-gradient(var(--gold),var(--gold)) left 0 bottom 0/6px 6px,
    linear-gradient(var(--gold),var(--gold)) right 0 bottom 0/6px 6px;
  background-repeat:no-repeat;
}

/* chips (outside stat blocks) */
.chip{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem .16rem;border:2px solid currentColor;background:rgba(0,0,0,.25);margin:.18rem .18rem 0 0;}
.chip.can{color:var(--teal);}
.chip.cant{color:var(--coral);}

/* ---------------- reading text: serif ---------------- */
.win p:not(.eyebrow),
.tile .d,.tiercard .d,
.step p,
.scroll li,
.writers-desk p,
.later p,
.runtext p{font-family:var(--serif);letter-spacing:0;color:var(--read);}
.win p:not(.eyebrow){font-size:1.18rem;line-height:1.64;max-width:37em;margin-left:auto;margin-right:auto;}
.win p.big{font-size:1.34rem;line-height:1.55;}
.win p.soft,.win .grow p.soft{color:var(--ink-soft);}
.tile .d,.tiercard .d{font-size:.98rem;line-height:1.5;color:#d0c19e;}
.step p{font-size:1.02rem;line-height:1.52;color:var(--read);}

/* ---------------- shared chrome bits (no topbar: the hero carries the brand) ---------------- */
.tflame{animation:flick 2.2s ease-in-out infinite;}
@keyframes flick{50%{filter:drop-shadow(0 0 9px rgba(232,169,56,.6));}}
.socials{display:flex;gap:8px;}
.sbtn{width:38px;height:38px;border:2px solid var(--brass);background:var(--panel);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 var(--edge);}
.sbtn svg{width:22px;height:22px;}
.sbtn.disabled{opacity:.38;filter:grayscale(.7);cursor:not-allowed;}

/* mobile contents: a floating hamburger once past the hero (the side
   rail is hidden below 1400px, so this is the only way in) */
.navtoggle{display:none;position:fixed;top:.9rem;right:.9rem;z-index:60;width:42px;height:42px;padding:0;
  border:2px solid var(--gold);background:rgba(14,10,6,.85);align-items:center;justify-content:center;
  box-shadow:0 0 0 1px var(--edge),0 2px 8px rgba(0,0,0,.5);cursor:pointer;}
.navtoggle svg{width:24px;height:24px;}
.navtoggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
@media (max-width:1399px){html.js.pasthero .navtoggle{display:flex;}}

.navscrim{position:fixed;inset:0;z-index:94;background:rgba(6,4,2,.62);opacity:0;pointer-events:none;transition:opacity .25s ease;}
.navscrim.open{opacity:1;pointer-events:auto;}
.navdrawer{position:fixed;top:0;right:0;z-index:95;height:100%;width:min(320px,84vw);
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-deep) 100%);
  border-left:3px solid var(--brass);box-shadow:-8px 0 0 rgba(0,0,0,.4),inset 3px 0 0 var(--edge);
  transform:translateX(106%);transition:transform .28s ease;overflow-y:auto;
  display:flex;flex-direction:column;}
.navdrawer.open{transform:none;}
.ndhead{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .8rem;border-bottom:2px solid var(--brass);}
.ndhead span{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
.ndclose{font-family:var(--mono);font-size:.95rem;line-height:1;color:var(--ink);background:none;border:2px solid var(--bevel);width:34px;height:34px;cursor:pointer;}
.ndclose:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.ndlinks{display:flex;flex-direction:column;padding:.4rem 0 1.2rem;}
.ndlinks a{display:block;padding:.9rem 1.2rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid rgba(110,86,48,.22);}
.ndlinks a:hover,.ndlinks a:focus-visible{color:var(--gold);background:rgba(210,163,95,.06);outline:none;}
@media (prefers-reduced-motion:reduce){.navscrim,.navdrawer{transition:none;}}

/* ---------------- key art header ----------------
   The landing view is one painted night, generated in the game's
   palette: the Old Seat on its broken tor, teal falls, a sleeping
   village, one traveller on the road. A single image, so every
   screen just crops and scales it (cover), Ethra-style chrome on top. */
.hero{position:relative;width:100vw;margin:0 0 0 calc(50% - 50vw);min-height:100vh;min-height:100svh;overflow:hidden;background:#070a12;}
.heroart{position:absolute;inset:0;z-index:1;}
.heroart>div{position:absolute;}
.hero .paint{inset:-9% -1.4% 0 -1.4%;
  background:url("../assets/img/keyart_night.jpg?v=18") no-repeat;
  background-size:cover;background-position:50% 64%;}
.hero .keyanim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.hero .vign{inset:0;background:radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(4,2,1,.55) 100%);}
.hero .embers{z-index:2;}
@media (max-aspect-ratio:0.8){
  .hero .paint{background-position:44% 64%;}
}

/* chrome proportions follow the reference: logo ~12vw top-left,
   socials in a row top-right */
.hero-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.1vw,2.4rem) clamp(1.2rem,3.2vw,3.6rem);}
.hero-logo{width:clamp(160px,12vw,320px);height:auto;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6));}
.hero-top .socials{padding-top:.4rem;gap:14px;}
/* round medallion socials over the painting */
.hero-top .sbtn,.footpan .sbtn{width:50px;height:50px;border-radius:50%;background:rgba(14,10,6,.55);
  border:2px solid rgba(110,86,48,.9);box-shadow:0 0 0 1px rgba(7,4,2,.5),0 2px 8px rgba(0,0,0,.45);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease,filter .15s ease;}
.hero-top .sbtn svg,.footpan .sbtn svg{width:32px;height:32px;}
.hero-top .sbtn.disabled,.footpan .sbtn.disabled{opacity:.62;}
.hero-top .sbtn:hover,.footpan .sbtn:hover{transform:translateY(-2px) scale(1.08);border-color:var(--gold);opacity:1;filter:none;
  box-shadow:0 0 0 1px rgba(7,4,2,.5),0 0 20px rgba(232,169,56,.4);}

.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  background:none;border:none;padding:0;cursor:pointer;font-family:var(--mono);}
.playbtn .pring{position:relative;display:grid;place-items:center;width:clamp(58px,4.6vw,84px);aspect-ratio:1;border-radius:50%;
  background:rgba(10,8,5,.44);border:2px solid rgba(210,163,95,.92);
  box-shadow:0 0 0 1px rgba(7,4,2,.55),0 0 22px rgba(232,169,56,.22),inset 0 0 14px rgba(0,0,0,.5);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
  animation:playpulse 3.2s ease-in-out infinite;}
@supports (backdrop-filter:blur(3px)){.playbtn .pring{backdrop-filter:blur(3px);}}
/* double ring, like the reference: a second circle just inside the rim */
.playbtn .pring::before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid rgba(210,163,95,.55);}
/* and a fine outer halo ring, like a struck coin */
.playbtn .pring::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(210,163,95,.34);}
.playbtn:hover .pring{transform:scale(1.08);background:rgba(210,163,95,.2);
  box-shadow:0 0 0 1px rgba(7,4,2,.55),0 0 40px rgba(232,169,56,.5),inset 0 0 14px rgba(0,0,0,.35);}
.playbtn:focus-visible{outline:2px solid var(--teal);outline-offset:6px;}
@keyframes playpulse{50%{box-shadow:0 0 0 1px rgba(7,4,2,.55),0 0 36px rgba(232,169,56,.45),inset 0 0 14px rgba(0,0,0,.5);}}
.playbtn .pring svg{width:38%;height:38%;margin-left:4%;}
.playbtn .pring svg polygon{fill:var(--gold);stroke:var(--gold);stroke-width:3;stroke-linejoin:round;}
.playbtn .plab{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);text-shadow:2px 2px 0 #000;}
.hero-ctas{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);z-index:6;white-space:nowrap;}
.hero-scroll{position:absolute;left:50%;bottom:7.5%;transform:translateX(-50%);z-index:6;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;text-shadow:2px 2px 0 #000;white-space:nowrap;}
.hero-scroll:hover{color:var(--gold);}
.herowave{position:absolute;left:0;right:0;bottom:-1px;z-index:5;line-height:0;pointer-events:none;}
.herowave svg{display:block;width:100%;height:clamp(56px,7vw,120px);}
.herowave .hw2{fill:rgba(7,4,2,.55);}
.herowave .hw1{fill:var(--bg);}

/* the trailer opens as a lightbox over the darkened page */
.videoshell{position:fixed;inset:0;z-index:120;background:rgba(4,2,1,.88);display:grid;place-items:center;}
.videoshell iframe{display:block;width:min(1200px,86vw);aspect-ratio:16/9;max-height:82vh;border:3px solid var(--brass);
  box-shadow:0 0 0 3px var(--edge),0 0 60px rgba(0,0,0,.8);background:#000;}
.vclose{position:absolute;top:1.1rem;right:1.3rem;width:46px;height:46px;
  font-family:var(--mono);font-size:1.15rem;color:var(--ink);background:rgba(14,10,6,.8);
  border:2px solid var(--brass);cursor:pointer;}
.vclose:hover{color:var(--gold);border-color:var(--gold);}
.vsoon{position:absolute;left:50%;top:63%;transform:translateX(-50%);z-index:7;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.22em;color:var(--gold);
  background:var(--panel-deep);border:2px solid var(--brass);box-shadow:0 0 0 2px var(--edge),4px 4px 0 rgba(0,0,0,.5);
  padding:.6rem 1.1rem .5rem;white-space:nowrap;}

@media (max-width:640px){
  /* a shorter hero shows far more of the painting on a phone */
  .hero{min-height:min(100svh,140vw);}
  .hero-logo{width:min(42vw,200px);}
  .hero-top .socials{gap:8px;}
  .hero-top .sbtn,.footpan .sbtn{width:42px;height:42px;}
  .hero-top .sbtn svg,.footpan .sbtn svg{width:27px;height:27px;}
  .hero-ctas{bottom:19%;}
  .playbtn .pring{width:56px;}
  .playbtn .plab{font-size:.68rem;letter-spacing:.22em;}
}

/* ---------------- community band over the sleeping Old Seat ---------------- */
.footpan{position:relative;width:100vw;margin:2rem 0 0 calc(50% - 50vw);min-height:58vh;overflow:hidden;
  background:#0a0d14;display:flex;align-items:center;}
.footpan::before{content:"";position:absolute;inset:0;
  background:url("../assets/img/keyart_oldseat.jpg") no-repeat;background-size:cover;background-position:50% 32%;
  filter:brightness(1.14) saturate(1.05);}
/* the soft dark tide that hands the page over to the last words */
.footpan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,10,6,0) 0%,rgba(14,10,6,.85) 64%,var(--bg) 100%);}
.fp-topfade{position:absolute;left:0;right:0;top:0;height:24%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--bg),rgba(14,10,6,0));}
.fp-anim,.footpan .embers{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.fp-grid{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:4vw;width:100%;
  padding:12vh 9vw 16vh;align-items:center;}
.fp-col{display:flex;flex-direction:column;align-items:center;text-align:center;}
.fp-col h2{font-size:clamp(1.25rem,1.7vw,1.65rem);text-shadow:2px 2px 0 #000;}
.fp-col p{font-family:var(--serif);color:var(--read);font-size:1.16rem;line-height:1.6;max-width:30em;
  margin:.75rem auto 1.25rem;text-shadow:1px 1px 0 rgba(0,0,0,.7);}
.fp-col .socials{display:flex;gap:14px;justify-content:center;}
.fp-col .wishlist-wrap{text-align:center;margin:0;}
@media (max-width:820px){
  .fp-grid{grid-template-columns:1fr;gap:2.4rem;padding:12vh 9vw 18vh;}
}
@media (max-width:640px){
  /* phones get the whole city as a strip across the top of the band */
  .footpan{min-height:0;}
  .footpan::before{background-size:100% auto;background-position:top center;
    -webkit-mask-image:linear-gradient(180deg,#000 30vw,transparent 46vw);
    mask-image:linear-gradient(180deg,#000 30vw,transparent 46vw);}
  .fp-topfade{height:8%;}
  .fp-grid{padding:48vw 9vw 14vh;}
}

/* ---------------- studio signature, the book's last page ---------------- */
.studio-out{text-align:center;padding:3.2rem 1rem .5rem;}
.bookfoot{padding-bottom:1rem;}
.studio-word{font-family:var(--mono);font-weight:700;text-transform:uppercase;font-size:clamp(2.3rem,10vw,4.4rem);line-height:.9;letter-spacing:.05em;color:var(--gold);text-shadow:4px 4px 0 #000;}
.studio-tag{color:var(--teal);text-transform:uppercase;letter-spacing:.16em;font-size:1rem;margin-top:.75rem;text-shadow:2px 2px 0 #000;}
.studio-copy{font-family:var(--serif);max-width:44em;margin:1.2rem auto 0;color:var(--ink-soft);font-size:1.16rem;line-height:1.7;}

/* ---------------- cover: full-bleed hero ---------------- */
.cover{
  position:relative;text-align:center;
  width:100vw;margin-left:calc(50% - 50vw);
  padding:3.6rem 15vw 3rem;
  background:
    radial-gradient(1000px 520px at 50% 18%, rgba(210,163,95,.10) 0%, rgba(210,163,95,0) 65%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 100%);
}
.cover .plate{font-size:.7rem;letter-spacing:.35em;color:var(--gold-deep);}
.logo{display:block;margin:.4rem auto .5rem;width:min(620px,84%);height:auto;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.55));}
/* The stage IS the logo box. As an inline-block it used to shrink-wrap
   to the PNG's intrinsic 1502px on wide screens, so the percent-sized
   dragons grew past the rendered wordmark and covered it. */
.logostage{position:relative;display:block;width:min(620px,84%);margin:.4rem auto .5rem;line-height:0;}
.logostage .logo{display:block;width:100%;margin:0;}
.dragon-big{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:3;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.55));}
.dragon-l{position:absolute;left:24%;top:27%;transform:translate(-50%,-50%);z-index:3;}
.dragon-r{position:absolute;left:76%;top:27%;transform:translate(-50%,-50%) scaleX(-1);z-index:3;}
.subtitle{color:var(--teal);text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;text-shadow:2px 2px 0 #000;}
.party{display:flex;gap:.55rem;justify-content:center;align-items:flex-end;flex-wrap:wrap;margin-top:1.4rem;}
.press{margin-top:1.6rem;color:var(--ink);font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;}
.press .blink{color:var(--gold);}

/* from a run: the read-aloud box */
.runwrap{max-width:42em;margin:2.6rem auto .4rem;padding:0 1.1rem;text-align:left;}
.runblock{
  position:relative;
  background:linear-gradient(180deg,rgba(230,217,184,.075),rgba(230,217,184,.028));
  border:1px solid rgba(210,163,95,.38);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 4px 0 rgba(0,0,0,.3);
  padding:1.35rem 1.7rem 1.35rem;
}
.runblock::before,.runblock::after{
  content:"✦";position:absolute;font-family:var(--mono);font-size:.8rem;color:var(--gold);
  background:var(--bg);padding:0 .35rem;line-height:1;
}
.runblock::before{top:-.5rem;left:1rem;}
.runblock::after{bottom:-.5rem;right:1rem;}
.runlabel{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;color:var(--gold-deep);text-transform:uppercase;margin-bottom:.85rem;}
.runtext p{font-size:1.24rem;line-height:1.64;margin:0 0 .85rem;}
.runtext p:last-child{margin-bottom:0;}
.runfoot{font-family:var(--mono);font-size:.8rem;line-height:1.5;letter-spacing:.03em;color:var(--ink-soft);margin-top:1rem;border-top:1px dashed rgba(110,86,48,.4);padding-top:.85rem;}

/* ---------------- scenes / portraits ---------------- */
.scene{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;justify-content:center;}
.portrait{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:96px;}
.portrait .nm{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;text-align:center;}
.portrait .frame,.pframe{border:3px solid var(--edge);background:#0f0b06;padding:6px;box-shadow:inset 0 0 0 2px var(--bevel);}
.grow{flex:1 1 240px;min-width:240px;}
.grow p{margin-left:0 !important;margin-right:0 !important;}
.castle-img{display:block;width:150px;height:auto;image-rendering:auto;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5));}
.pnpc{display:block;width:92px;height:92px;image-rendering:auto;}
.bella-intro{margin-bottom:.5rem;}
.center-note{text-align:center;margin-top:1.1rem;}

/* ch3 background npc */
.ch3win{position:relative;overflow:hidden;}
.ch3win>*{position:relative;z-index:1;}
.chbg{position:absolute;right:-14px;bottom:-24px;width:238px;height:auto;opacity:.14;z-index:0;filter:saturate(.85);pointer-events:none;image-rendering:auto;}

/* ---------------- feature tiles ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-top:1.15rem;}
.tile{border:2px solid var(--bevel);background:var(--stone);box-shadow:0 0 0 2px var(--edge);padding:.95rem .85rem;text-align:center;transition:transform .1s,border-color .1s;}
.tile:hover{transform:translateY(-2px);border-color:var(--brass);}
.tile canvas,.tile div.px{margin-bottom:.45rem;}
.tile .t{font-family:var(--mono);color:var(--gold);text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;}
.tile .d{margin-top:.25rem;}

/* ---------------- ch4: stat blocks ---------------- */
.roles{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:1.4rem;}
.roles>.win.flat{
  margin:0;position:relative;
  background:linear-gradient(180deg,#20180c 0%,#161008 100%);
  border-left:2px solid var(--bevel);border-right:2px solid var(--bevel);
  border-top:none;border-bottom:none;
  box-shadow:0 0 0 2px var(--edge);
  padding:1.3rem 1.5rem 1.2rem;
}
/* tapered gold rules top + bottom: the stat-block signature */
.roles>.win.flat::before,.roles>.win.flat::after{
  content:"";position:absolute;left:-2px;right:-2px;height:5px;
  background:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold) 50%,var(--gold-deep) 100%);
  clip-path:polygon(0 0,100% 0,97% 100%,3% 100%);
}
.roles>.win.flat::before{top:-3px;}
.roles>.win.flat::after{bottom:-3px;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);}
.roles .scene{justify-content:flex-start;align-items:flex-start;}
.roles .grow{flex:1 1 240px;}
.roles h3{
  font-family:var(--serif);font-variant:small-caps;text-transform:none;
  font-size:1.6rem;letter-spacing:.02em;color:var(--gold);text-shadow:1px 1px 0 #000;
  border-bottom:1px solid rgba(110,86,48,.5);padding-bottom:.35rem;margin-bottom:.5rem;
}
.roles .grow p.soft{font-style:italic;color:var(--ink-soft);font-size:1.08rem;margin-bottom:.7rem;}
.roles .chip{
  display:block;border:none;background:none;padding:.14rem 0 0;margin:0;
  font-family:var(--serif);font-size:1.05rem;text-transform:none;letter-spacing:0;
}
.roles .chip.can{color:var(--teal);border-top:1px solid rgba(110,86,48,.5);padding-top:.55rem;margin-top:.35rem;}
.roles .chip.cant{color:var(--coral);}
@media(min-width:1000px){.roles{grid-template-columns:1fr 1fr;}}

.bardjoke{max-width:44em;margin:2.1rem auto .3rem;text-align:center;border:3px solid var(--gold);background:linear-gradient(180deg,rgba(210,163,95,.10),rgba(0,0,0,.18));box-shadow:0 0 0 3px var(--edge),var(--shadow);padding:1.7rem 1.9rem;}
.bardjoke .jlabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:.8rem;}
.bardjoke p{font-family:var(--serif);font-size:1.5rem;line-height:1.5;color:var(--read);margin:0;max-width:none;}
/* coral is the palette's negation colour, and italic carries the weight
   without shouting: capitals belonged to the old arcaic dress, the page
   is sober now */
.bardjoke b{color:var(--coral);font-style:italic;}
.bardjoke em{color:var(--gold);font-style:italic;}

/* ---------------- ch5 timeline ---------------- */
.steps{max-width:56em;margin:1.9rem auto .4rem;position:relative;}
.steps::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,var(--brass) 0 7px,transparent 7px 15px);}
.step{position:relative;width:calc(50% - 2.7rem);margin:0 0 1.05rem;padding:.8rem 1rem;border:2px solid var(--bevel);background:var(--stone);box-shadow:0 0 0 2px var(--edge);}
.step:nth-child(even){margin-left:calc(50% + 2.7rem);}
.step .num{position:absolute;top:.75rem;background:var(--gold);color:#1a1300;font-weight:700;width:27px;height:27px;display:grid;place-items:center;border:3px solid #000;font-size:.9rem;}
.step:nth-child(odd) .num{right:-2.7rem;}
.step:nth-child(even) .num{left:-2.7rem;}
.step h4{font-family:var(--mono);margin:.1rem 0 .4rem;color:var(--teal);text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;}
.step p{margin:0;}
.loopnote{text-align:center;color:var(--gold);margin-top:1.4rem;text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;}

/* ---------------- ch6 council diorama ---------------- */
.council{
  background:repeating-linear-gradient(0deg,#0f0b06 0 2px,#161009 2px 4px),var(--panel-deep);
  border:3px solid var(--brass);box-shadow:0 0 0 3px var(--edge),var(--shadow);
  padding:2rem 1.4rem 1.8rem;margin:1.5rem 0;
}
.council .lead{text-align:center;font-family:var(--mono);color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;margin-bottom:.7rem;}
.council .sub{text-align:center;font-family:var(--mono);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;margin-top:.55rem;}
.council .row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;}
.thinker{display:flex;flex-direction:column;align-items:center;}
.stamps{text-align:center;margin:1rem 0 .2rem;}
.stamp{display:inline-block;transform:rotate(-7deg);color:var(--teal);border:3px solid var(--teal);padding:.15rem .6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;margin:0 .35rem;}
.stamp.no{color:var(--coral);border-color:var(--coral);transform:rotate(5deg);}
.divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem;margin:2.4rem 0;color:var(--coral);}
.divider .bar{height:0;border-top:4px dashed var(--coral);}
.divider .lab{font-size:1.02rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;font-weight:700;}

/* ---------------- ch7 tiers ---------------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.85rem;margin-top:1.15rem;}
.tiercard{border:2px solid var(--bevel);background:var(--stone);box-shadow:0 0 0 2px var(--edge);padding:1.05rem;text-align:center;}
.tiercard .lvl{font-family:var(--mono);color:var(--gold);text-transform:uppercase;letter-spacing:.06em;font-size:.84rem;margin-bottom:.3rem;}
.tiercard .bar{display:flex;gap:3px;justify-content:center;margin:.5rem 0;}
.tiercard .pip{width:12px;height:12px;background:#2f2717;box-shadow:inset 0 0 0 1px #000;}
.tiercard .pip.on{background:var(--teal);}

/* ---------------- media ---------------- */
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:1.2rem;}
.mtile{position:relative;aspect-ratio:16/10;border:3px solid var(--edge);box-shadow:inset 0 0 0 2px var(--bevel);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;}
.mtile.big{grid-column:span 2;grid-row:span 2;}
.mtile .cap{position:absolute;left:6px;bottom:5px;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:#f0ead8;text-shadow:1px 1px 0 #000;background:rgba(0,0,0,.45);padding:1px 5px;}
.mtile{cursor:pointer;}
.mtile canvas,.mtile>div{margin-bottom:7px;transition:transform .15s;}
.mtile:hover canvas,.mtile:hover>div{transform:translateY(-3px);}

/* media lightbox: the vignette steps forward on a dark overlay */
.mlight{position:fixed;inset:0;z-index:130;background:rgba(4,2,1,.88);display:grid;place-items:center;
  opacity:0;transition:opacity .3s ease;}
.mlight.in{opacity:1;}
.mview{position:relative;width:min(1080px,86vw);aspect-ratio:16/10;max-height:80vh;
  border:3px solid var(--brass);box-shadow:0 0 0 3px var(--edge),0 0 70px rgba(0,0,0,.85);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  transform:scale(.94);transition:transform .3s ease;}
.mlight.in .mview{transform:none;}
.mview canvas,.mview>div.px{margin-bottom:16px;}
.mview .cap{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:.95rem;letter-spacing:.05em;
  color:#f0ead8;text-shadow:1px 1px 0 #000;background:rgba(0,0,0,.5);padding:3px 9px;}

/* ---------------- golden rules parchment ---------------- */
.scroll{background:linear-gradient(#efe6cb,#e2d6b2);color:#35301f;border:3px solid #7a5a2a;box-shadow:0 0 0 3px #4a3417,var(--shadow);padding:1.6rem 1.8rem;margin:1.5rem 0;}
.scroll h2{color:#7a3f13;text-shadow:2px 2px 0 #d8c79c;margin:0;}
.scroll h2::after{display:none;}
.kicker-row{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:.3rem;}
.scroll ol{margin:.8rem auto 0;padding-left:1.4rem;max-width:58rem;}
.scroll li{margin-bottom:.6rem;font-size:1.14rem;line-height:1.6;color:#3a3322;}
.scroll li b{color:#8a4a12;}

/* ---------------- co-op aside + writers desk ---------------- */
.later{max-width:44em;margin:2.2rem auto 0;padding-top:1.6rem;border-top:2px dashed var(--brass);text-align:center;}
.later h3{font-family:var(--mono);color:var(--gold);font-size:1.02rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.85rem;}
.later p{font-size:1.08rem;line-height:1.62;color:var(--ink-soft);max-width:38em;margin:0 auto .85rem;text-align:left;}
.later p:last-child{margin-bottom:0;}

.copyline{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-family:var(--mono);color:var(--ink-soft);font-size:.84rem;letter-spacing:.05em;margin-top:1.6rem;padding:0 .2rem;}
.copyline a{color:var(--teal);text-decoration:none;}

/* ---------------- wishlist ---------------- */
.wishlist{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;color:#1a1300;background:var(--gold);border:3px solid #000;box-shadow:5px 5px 0 rgba(0,0,0,.5);padding:.8rem 1.6rem;text-decoration:none;}
.wishlist svg{width:24px;height:24px;}
.wishlist-wrap{text-align:center;margin:1.7rem 0 .4rem;}
.wishlist.disabled{opacity:.5;filter:grayscale(.5);cursor:not-allowed;box-shadow:3px 3px 0 rgba(0,0,0,.4);}

/* ---------------- wave divider ----------------
   Sections part like hills against the night, not like ruled lines:
   a full-bleed dark ribbon with a wavy crest and a wavy underside,
   backed by a faint brass echo. Same silhouette closes the hero. */
.wavesep{width:100vw;margin:3.2rem 0 3.2rem calc(50% - 50vw);line-height:0;pointer-events:none;user-select:none;}
.wavesep svg{display:block;width:100%;height:clamp(40px,4.6vw,74px);}
.wavesep .wa{fill:rgba(110,86,48,.22);}
.wavesep .wb{fill:#070402;}

/* ---------------- motion ----------------
   The gentle ambient animations run unconditionally: OS-level "animations
   off" (very common on desktop PCs) reports prefers-reduced-motion and
   used to strip the page's identity on desktop while phones kept it.
   The reduce block below still calms hovers, smooth scroll and the
   torch flame for explicit reduced-motion users. */
.blink{animation:bl 1.1s steps(1) infinite;}
@keyframes bl{50%{opacity:.15;}}
/* scroll reveal: only when JS is live, so no-JS never hides content */
html.js .book>section{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
html.js .book>section.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .tflame{animation:none;}
  /* the sign stops blinking but stays LIT: whoever asked for less motion
     still deserves to notice the one link that matters */
  .handbook-cta a{animation:none;border-color:var(--gold);
    box-shadow:3px 3px 0 rgba(0,0,0,.4),0 0 24px rgba(232,169,56,.5),
      inset 0 0 14px rgba(232,169,56,.16);
    text-shadow:0 0 10px rgba(232,169,56,.8);}
  .tile:hover{transform:none;}
  .mtile:hover canvas,.mtile:hover>div{transform:none;}
  html{scroll-behavior:auto;}
}

/* ---------------- wide screens ---------------- */
@media (min-width:1500px){.grid{grid-template-columns:repeat(6,1fr);}}
@media (min-width:1100px){
  .grow{flex:0 1 44em;min-width:0;}
  .roles .grow{flex:1 1 240px;}
  .win.narrow{max-width:58em;}
}

/* ---------------- tablets / phones ---------------- */
@media (max-width:900px){.book{width:auto;padding:0 1.4rem 3.5rem;}.cover{padding-left:1.4rem;padding-right:1.4rem;}}
@media (max-width:820px){
  .steps{max-width:34em;}
  .steps::before{left:14px;}
  .step{width:auto;margin-left:2.4rem;}
  .step:nth-child(even){margin-left:2.4rem;}
  .step .num{left:-2.4rem !important;right:auto !important;}
}
@media (max-width:640px){
  .book{padding:0 .9rem 3rem;}
  .cover{padding-left:.9rem;padding-right:.9rem;}
  .grow{min-width:0;flex-basis:100%;}
  .scene{flex-wrap:wrap;}
  .win{padding:1.3rem 1rem 1.2rem;}
  .win.narrow{max-width:100%;}
  .runwrap{padding-left:0;padding-right:0;}
  .bardjoke{padding:1.3rem 1rem;}
  .council{padding:1.4rem .8rem;}
  .media-grid{grid-template-columns:repeat(2,1fr);}
  .mtile.big{grid-column:span 2;grid-row:auto;}
  .win p:not(.eyebrow){font-size:1.12rem;}
  .tile .d,.tiercard .d,.step p{font-size:1rem;}
  .runtext p{font-size:1.14rem;}
  .bardjoke p{font-size:1.28rem;}
  .drop::first-letter{font-size:2.6em;}
}

/* ---------------- print ---------------- */
@media print{
  body{background:var(--bg);font-size:12.5px;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .book{width:auto;max-width:none;padding:0;}
  .toc,.navtoggle,.navdrawer,.navscrim,.hero,.wavesep,.footpan{display:none !important;}
  .blink{animation:none;}
  .handbook-cta a{animation:none;text-shadow:none;box-shadow:none;}
  html.js .book>section{opacity:1;transform:none;}
  .sbtn{box-shadow:none;}
  .cover{width:auto;margin-left:0;padding:1.5rem 0;}
  section{break-inside:avoid;}
  .win,.council,.scroll,.step,.tile,.tiercard,.portrait{break-inside:avoid;}
  .page-break{break-before:page;}
  .steps::before{display:none;}
  .step{width:auto;margin-left:0;}
  .step:nth-child(even){margin-left:0;}
  .chbg{opacity:.12;}
  @page{margin:12mm;size:A4;}
}

/* ============================================================
   v6.1 WOW layer: candlelight, embers, ghost numerals, living
   council, the Bard's dragon. All motion behind reduced-motion.
   ============================================================ */

/* ghost roman numeral behind each chapter frontispiece */
.book>section{position:relative;}
@media (min-width:900px){
  section[data-num]::before{
    content:attr(data-num);position:absolute;left:50%;top:-2.6rem;transform:translateX(-50%);
    font-family:var(--serif);font-size:10rem;line-height:1;font-weight:700;
    color:var(--gold);opacity:.06;pointer-events:none;user-select:none;
  }
}

/* hero atmosphere */
.cover{overflow:hidden;}
.cover>*{position:relative;z-index:3;}
.embers{position:absolute;inset:0;z-index:2;pointer-events:none;image-rendering:pixelated;}
.cover .candleglow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(760px 420px at 50% 22%,rgba(244,213,128,.11),transparent 70%);}

/* torch: soft candlelight that follows the pointer */
.torch{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:35;mix-blend-mode:screen;opacity:0;transition:opacity .7s ease;
  background:radial-gradient(circle,rgba(244,213,128,.15) 0%,rgba(210,163,95,.07) 42%,transparent 68%);}

/* council thinking bubble */
.thinker{position:relative;}
.pxbubble{position:absolute;top:-16px;right:-8px;z-index:5;
  font-family:var(--mono);font-size:.74rem;line-height:1.25;color:var(--gold);
  background:var(--panel-deep);border:2px solid var(--brass);padding:.05rem .34rem 0;
  box-shadow:2px 2px 0 rgba(0,0,0,.55);}

/* the bard's dragon flight */
/* wall sconces: pixel torches down the wide-screen gutters, so the empty
   margins read as the stone wall the handbook is pinned to */
.sconce{display:none;position:absolute;z-index:5;pointer-events:none;}
@media (min-width:1500px){.sconce{display:block;}}
.sconce canvas{display:block;width:60px;height:100px;image-rendering:pixelated;filter:drop-shadow(0 0 12px rgba(232,169,56,.3));}
.sconce::after{content:"";position:absolute;left:50%;top:30%;width:240px;height:240px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(232,169,56,.12) 0%,rgba(232,169,56,0) 62%);}
@media print{.sconce{display:none !important;}}

.dragonfly{position:fixed;top:22vh;left:100vw;z-index:70;pointer-events:none;
  image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.5));transform:scaleX(-1);}

@media (min-width:0px){ /* always on: see the motion note above */
  .cover .candleglow{animation:candle 4.6s ease-in-out infinite;}
  @keyframes candle{0%,100%{opacity:.55}34%{opacity:.85}52%{opacity:.6}74%{opacity:.95}}

  .council .row:first-of-type .thinker{animation:bob 3.4s ease-in-out infinite;}
  .council .row:first-of-type .thinker:nth-child(2){animation-delay:.7s;}
  .council .row:first-of-type .thinker:nth-child(3){animation-delay:1.3s;}
  .council .row:first-of-type .thinker:nth-child(4){animation-delay:1.9s;}
  @keyframes bob{50%{transform:translateY(-3px);}}

  .pxbubble{animation:bubblein .18s steps(2) both;}
  @keyframes bubblein{from{transform:translateY(4px);opacity:0;}}

  .dragonfly{animation:dragonfly 7s linear forwards;}
  @keyframes dragonfly{
    0%{left:100vw;top:22vh;transform:scaleX(-1) translateY(0);}
    25%{transform:scaleX(-1) translateY(3vh);}
    50%{transform:scaleX(-1) translateY(-2vh);}
    75%{transform:scaleX(-1) translateY(2.5vh);}
    100%{left:-280px;top:22vh;transform:scaleX(-1) translateY(0);}
  }

  /* staggered cascades inside a revealed section */
  html.js .steps .step,
  html.js .grid .tile{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;}
  html.js section.in .steps .step,
  html.js section.in .grid .tile{opacity:1;transform:none;}
  html.js section.in .steps .step:nth-child(1),html.js section.in .grid .tile:nth-child(1){transition-delay:.05s;}
  html.js section.in .steps .step:nth-child(2),html.js section.in .grid .tile:nth-child(2){transition-delay:.1s;}
  html.js section.in .steps .step:nth-child(3),html.js section.in .grid .tile:nth-child(3){transition-delay:.15s;}
  html.js section.in .steps .step:nth-child(4),html.js section.in .grid .tile:nth-child(4){transition-delay:.2s;}
  html.js section.in .steps .step:nth-child(5),html.js section.in .grid .tile:nth-child(5){transition-delay:.25s;}
  html.js section.in .steps .step:nth-child(6),html.js section.in .grid .tile:nth-child(6){transition-delay:.3s;}
  html.js section.in .steps .step:nth-child(7),html.js section.in .grid .tile:nth-child(7){transition-delay:.35s;}
  html.js section.in .steps .step:nth-child(8),html.js section.in .grid .tile:nth-child(8){transition-delay:.4s;}
  html.js section.in .steps .step:nth-child(9),html.js section.in .grid .tile:nth-child(9){transition-delay:.45s;}
  html.js section.in .steps .step:nth-child(10),html.js section.in .grid .tile:nth-child(10){transition-delay:.5s;}
  html.js section.in .grid .tile:nth-child(n+11){transition-delay:.55s;}
}

/* ambient air, ported from the game's AmbientAirDrift2D: a full-page fbm fog
   veil (broad cotton puffs + fine wisps on the wind) with drifting cool dust
   specks above it. Both fixed, pointer-transparent, under the torch light. */
.airfog{position:fixed;inset:0;width:100%;height:100%;z-index:33;pointer-events:none;}
.airdust{position:fixed;inset:0;width:100%;height:100%;z-index:34;pointer-events:none;mix-blend-mode:screen;}

@media print{.torch,.embers,.pxbubble,.dragonfly,.cover .candleglow,.airfog,.airdust{display:none !important;}}

/* ============================================================
   v8: two pages. The front page is for players and reads in one
   order (what it is, one run, the land, what you do, the claim
   and its guarantees, chronicles). The handbook keeps the long
   explanations for anyone who wants the machinery.
   ============================================================ */

/* ---------------- title block, under the painted header ----------------
   The header stays what it was: the painting, the wordmark in its
   corner, the socials, the trailer ring. The name at full size, the
   tagline, what kind of game this is and the two buttons all sit
   directly BELOW it, in that reading order, on the page's own ground.
   The block reuses .cover, so it keeps the candle glow and the embers
   that section has always had. */
/* ---------------- one transition, not two ----------------
   The painting stopped on a hard line and the block below it stopped on
   another, and neither read as the wave the rest of the page uses.

   Measured, the step at the foot of the header was rgb(10,7,5) above and
   rgb(16,12,8) below: the page carries a warm radial glow near the top
   plus fine scanlines, and the opaque header was covering both. No fade
   to a flat colour closes that, it only moves the step somewhere else.
   So the painting is MASKED out instead. It dissolves, and the page's
   own ground, glow and grain and all, is simply revealed underneath.
   There is no second surface left to make a seam with. */
.hero{background:transparent;}
.heroart{-webkit-mask-image:linear-gradient(180deg,#000 0 84%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0 84%,rgba(0,0,0,0) 100%);}
/* the hero's ribbon IS the section ribbon: same geometry, same two
   fills, so nothing at the foot of the painting is a floor block that
   has to butt against the page's grain */
.herowave{bottom:0;}
.herowave svg{height:clamp(40px,4.6vw,74px);}
.herowave .wa{fill:rgba(110,86,48,.22);}
.herowave .wb{fill:#070402;}

/* The title block used to be the page's opening panel, so it carried its
   own dark slab. Sitting between the painting and the page that slab made
   TWO straight seams, one at each of its edges, and it hid the hero's wave
   as well: the wave is filled with the page background, so against a
   lighter panel it read as a ruled line instead of a crest. The block now
   shares the page's ground and keeps only the candle glow, which fades to
   nothing and cannot draw an edge. One transition is left, the wave. */
#intro.cover{background:radial-gradient(1000px 520px at 50% 18%,
  rgba(210,163,95,.10) 0%, rgba(210,163,95,0) 65%);}
.cover .hero-genre{margin:.9rem auto 0;font-family:var(--serif);
  font-size:clamp(1.14rem,1.9vw,1.62rem);line-height:1.4;color:var(--read);
  max-width:30em;text-wrap:balance;}
.cover .party{margin-top:2.4rem;}
.ctarow{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:center;margin-top:1.7rem;}

/* three weights, not three equals: a gold slab, an outlined pill, and a
   quiet one that waits at the foot of the page. The primary stays
   visibly primary even while the Steam page is not up, because a greyed
   out slab would hand the hierarchy to the secondary button. */
.wishlist.cta-primary{font-size:1.02rem;padding:.85rem 1.7rem;}
.wishlist.cta-primary.disabled{opacity:.86;filter:none;background:var(--gold-deep);
  box-shadow:5px 5px 0 rgba(0,0,0,.5);}
.ctarow .playbtn{position:static;transform:none;flex-direction:row;gap:.6rem;
  align-items:center;padding:.75rem 1.3rem;color:var(--ink);
  border:2px solid rgba(210,163,95,.85);background:rgba(14,10,6,.55);
  box-shadow:0 0 0 1px rgba(7,4,2,.5);transition:border-color .15s,background .15s;}
.ctarow .playbtn .pmark{display:grid;place-items:center;width:20px;height:20px;}
.ctarow .playbtn .pmark svg{width:100%;height:100%;}
.ctarow .playbtn .pmark polygon{fill:var(--gold);stroke:var(--gold);stroke-width:2.4;}
.ctarow .playbtn .plab{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  text-shadow:2px 2px 0 #000;}
.ctarow .playbtn:hover{border-color:var(--gold);background:rgba(210,163,95,.16);}
.ctarow .playbtn:focus-visible{outline:2px solid var(--teal);outline-offset:4px;}
.wishlist.cta-tertiary{background:none;color:var(--gold);border:2px solid var(--brass);
  box-shadow:3px 3px 0 rgba(0,0,0,.4);font-size:.88rem;}
.wishlist.cta-tertiary:hover{border-color:var(--gold);background:rgba(210,163,95,.1);}
.handbook-cta{margin-top:1.6rem;}
/* ---------------- the lit sign ----------------
   This is the one link on the page that has to be caught out of the corner
   of the eye, so it is lit like a shop sign rather than styled like a
   button: the light is struck ON and OFF in hard steps, never eased, on a
   steady beat, half a cycle each way. The LETTERS never dim, only the lamp
   behind them goes out, so the label stays legible in every single frame,
   which is what keeps a hard blink from turning into a strobe. */
.handbook-cta a{position:relative;animation:signlit 1.4s steps(1) infinite;}
@keyframes signlit{
  0%{border-color:var(--gold);
    box-shadow:3px 3px 0 rgba(0,0,0,.4),0 0 24px rgba(232,169,56,.5),
      inset 0 0 14px rgba(232,169,56,.16);
    text-shadow:0 0 10px rgba(232,169,56,.8);}
  50%{border-color:var(--brass);
    box-shadow:3px 3px 0 rgba(0,0,0,.4);text-shadow:none;}
}
/* Pointing at it is already attention: hold the lamp on so the blink does
   not fight the hover. This kills the animation outright instead of pausing
   it, because a paused keyframe still WINS over ordinary declarations:
   pausing on a dark beat left the sign dead under the cursor. */
.handbook-cta a:hover,.handbook-cta a:focus-visible{animation:none;
  border-color:var(--gold);
  box-shadow:3px 3px 0 rgba(0,0,0,.4),0 0 30px rgba(232,169,56,.6),
    inset 0 0 14px rgba(232,169,56,.2);
  text-shadow:0 0 10px rgba(232,169,56,.8);}
/* the socials are placeholders, and a tooltip is not a disclosure: say it
   in the open so nobody clicks four dead doors to find out */
.notopen{font-family:var(--mono)!important;font-size:.68rem!important;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep)!important;
  border:2px solid var(--brass);padding:.3rem .8rem .26rem;display:inline-block;
  margin:0 auto 1.1rem!important;}
.hero-scroll{font-size:1rem;letter-spacing:0;}

@media (max-width:640px){
  /* the painting gives way, not the text: a shorter header on a phone so
     the name, the genre line and the wishlist button are all reached
     within the first screen and a half instead of after a full one. */
  .hero{min-height:min(62svh,94vw);}
  /* the corner wordmark and four medallions have to fit one 375px line
     together, so the mark yields: the big one is right below anyway */
  .hero-logo{width:min(32vw,150px);}
  .hero-top{padding-left:1rem;padding-right:1rem;}
  .hero-top .socials{gap:6px;}
  /* every gap in the title block is trimmed so the primary button
     lands inside the first screen on a 667px phone. The painting is
     NOT shortened for this: it is the one thing mobile sees more of. */
  .cover{padding-top:1.2rem;}
  .cover .logostage{width:min(620px,74%);}
  .cover .subtitle{margin-top:.5rem;}
  .cover .hero-genre{font-size:1.1rem;margin-top:.6rem;}
  .ctarow{flex-direction:column;gap:.5rem;width:100%;margin-top:.9rem;}
  .ctarow>*{width:100%;justify-content:center;}
  .wishlist.cta-primary{font-size:.9rem;padding:.75rem 1rem;}
}

/* the party rows are art, so they keep their own air */
.win.center .party{margin-bottom:1.4rem;}

/* six tiles carrying real sentences, not eighteen carrying labels: they
   need width to read, so they never go to the six-across wide layout */
.grid.wide{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
@media (min-width:1200px){.grid.wide{grid-template-columns:repeat(3,1fr);gap:1rem;}}
.grid.wide .t{margin-bottom:.15rem;}

/* ---------------- the guarantees under the big claim ----------------
   These sit directly beneath "everyone is awake" on purpose. The
   claim is what makes a reader wary; this is the answer, and a fast
   scroller must meet both in the same breath. */
.promises{list-style:none;max-width:40em;margin:1.5rem auto .3rem;padding:0;display:grid;gap:.55rem;}
.promises li{font-family:var(--serif);font-size:1.06rem;line-height:1.5;color:var(--read);
  border-left:3px solid var(--teal);background:rgba(0,0,0,.22);padding:.65rem .95rem .6rem;}
.promises li b{color:var(--gold);}

/* ---------------- the way down to the handbook ---------------- */
.deeper{text-align:center;margin:1.8rem auto 0;}
.win p.deeper{max-width:none;}
.deeper a{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(127,169,138,.42);padding-bottom:.15rem;}
.deeper a:hover{color:var(--gold);border-bottom-color:var(--gold);}
.deeper.backhome{margin-top:2.6rem;}

/* ---------------- chronicles ----------------
   Same read-aloud block as the granary clerk, because they are the
   same kind of thing: one run's residue. Content lives in
   js/chronicles.js and is rendered in. */
/* Two cards, side by side from tablet up, equal width and equal height:
   the grid stretches the rows and the block fills its cell, so the two
   bottoms line up even though the prose is not the same length. Two is
   also the only count that never leaves an orphan on the last row. */
.chronlist{display:grid;gap:2.3rem;margin-top:1.7rem;}
@media (min-width:768px){.chronlist{grid-template-columns:1fr 1fr;gap:2.5rem 2rem;}}
.chron{scroll-margin-top:5rem;}
.chron .runblock{height:100%;display:flex;flex-direction:column;}
.chronmeta{color:var(--ink-soft);letter-spacing:.14em;}

/* The payload, promoted from the foot of the card to its title. Serif,
   because it is a sentence and not a label: bigger than the prose, smaller
   than the CHRONICLES heading, and never shouted. It is a statement of
   fact about the world, so it does not get caps, weight or a shadow. */
.chron .chrontitle{font-family:var(--serif);font-weight:500;
  font-size:clamp(1.34rem,1.9vw,1.6rem);line-height:1.32;letter-spacing:0;
  color:var(--gold);text-transform:none;text-wrap:balance;
  margin:0 0 .7rem;max-width:24em;
  /* two lines' worth even when it only needs one, so the eyebrow and the
     first line of prose sit at the same height in both cards */
  min-height:2.64em;}
.chron .runlabel{margin-bottom:1rem;}
.chron .runtext{flex:1 1 auto;}

/* ---------------- screenshots, when there are real ones ---------------- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;margin-top:1.2rem;}
.shot{margin:0;border:3px solid var(--edge);background:#0f0b06;box-shadow:inset 0 0 0 2px var(--bevel);}
.shot img{display:block;width:100%;height:auto;image-rendering:auto;}
.shot figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--ink-soft);padding:.55rem .7rem;}

/* ---------------- handbook header ----------------
   No key art on page two: whoever got here is past the pitch. */
.hbhead{text-align:center;padding:3.2rem 1rem 2.2rem;}
.hbhead .backlink{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;margin-bottom:1.7rem;}
.hbhead .backlink:hover{color:var(--gold);}
.hblogo{display:block;width:min(320px,54%);height:auto;margin:0 auto 1.5rem;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6));}
.hbhead h1{font-size:clamp(1.45rem,2.6vw,2.05rem);color:var(--gold);text-shadow:3px 3px 0 #000;letter-spacing:.06em;}
.hbsub{font-family:var(--serif);color:var(--ink-soft);font-size:1.14rem;line-height:1.62;
  max-width:38em;margin:1.1rem auto 0;}
@media print{.hbhead .backlink,.deeper{display:none !important;}}


/* ============================================================
   2026-07-30 pass: the closing sequence, the seventh feature,
   the run lengths, and the gate pulled out of the flat list.
   ============================================================ */

/* ---------------- a writer's desk ----------------
   The tonal anchor. It sits under the studio wordmark and hands the
   page to the community band. */
.writers-desk{text-align:center;padding:2.2rem 1rem .5rem;border-top:2px dashed var(--brass);
  max-width:44em;margin:1.8rem auto 0;}
.writers-desk h3{font-family:var(--mono);color:var(--gold);font-size:1.02rem;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:.7rem;}
.writers-desk p{max-width:40em;margin:0 auto;font-size:1.16rem;line-height:1.66;color:#cdbe9a;}

/* ---------------- languages, under the last wishlist ----------------
   Deliberately quiet: it is information for the one reader who needs
   it, not a claim, and it carries no date. */
.fp-col p.langline{font-family:var(--mono);font-size:.72rem;line-height:1.7;letter-spacing:.06em;
  color:var(--ink-soft);max-width:26em;margin:1.1rem auto 0;text-shadow:1px 1px 0 #000;}

/* ---------------- run lengths ----------------
   One line under the feature grid. Same weight as a caption, because
   it answers a question rather than making a promise. */
.win p.runlen{font-family:var(--mono);font-size:.76rem;line-height:1.75;letter-spacing:.05em;
  color:var(--ink-soft);text-align:center;max-width:44em;margin:1.3rem auto 0;
  padding-top:1rem;border-top:1px dashed rgba(110,86,48,.4);}

/* ---------------- the seventh tile ----------------
   Seven items in three columns leaves one orphan on the last row, so
   the orphan takes the whole row on purpose and its text stays at a
   readable measure instead of stretching to the full width. */
.grid.wide .tile.span{grid-column:1/-1;}
.grid.wide .tile.span .d{max-width:46em;margin-left:auto;margin-right:auto;}

/* ---------------- trailer button, while there is no trailer ----------------
   Same treatment as the Steam button: visibly not yet, rather than a
   live-looking ring on a page that says "soon" everywhere else. */
.playbtn.disabled{opacity:.55;cursor:not-allowed;}
.playbtn.disabled .pring{filter:grayscale(.45);}
.playbtn.disabled:hover .pring{transform:none;background:rgba(14,10,6,.5);}
.ctarow .playbtn.disabled:hover{border-color:var(--brass);background:transparent;}

/* ---------------- proposers, then the gate ----------------
   The gate is the point of the handbook, so it does not sit at the
   same visual weight as the seventh item of a flat list. */
.grouplab{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin-top:1.7rem;text-align:center;}
.grouplab.gate{color:var(--gold);font-size:.8rem;letter-spacing:.24em;margin-top:0;}
/* Seven in one row ONLY where a column is still wider than its words.
   At 1500px the book column is ~1050px and seven columns turned "The
   Ledger" into one word per line. */
.grid.proposers{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
@media (min-width:1000px) and (max-width:2199px){.grid.proposers{grid-template-columns:repeat(4,1fr);}}
@media (min-width:2200px){.grid.proposers{grid-template-columns:repeat(7,1fr);}}
.gatewrap{margin-top:2.6rem;padding:1.7rem 1.1rem .4rem;border-top:2px solid var(--brass);
  background:linear-gradient(180deg,rgba(210,163,95,.07),rgba(210,163,95,0) 70%);}
.grid.gate{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:1.3rem;}
@media (min-width:1000px){.grid.gate{grid-template-columns:repeat(3,1fr);}}
.grid.gate .tile{padding:1.5rem 1.15rem;border-color:var(--brass-hi);
  box-shadow:0 0 0 2px var(--edge),0 0 24px rgba(210,163,95,.09);}
.grid.gate .tile .t{color:var(--gold);font-size:.88rem;}
.grid.gate .tile .d{font-size:1.02rem;}

/* ---------------- helper card chips ----------------
   The rewritten chips are sentences, not two words. Inline-block made
   them wrap into ragged boxes, so in the role cards each one takes its
   own line and keeps its border honest. */
.roles .chip{display:block;width:fit-content;max-width:100%;line-height:1.5;
  padding:.28rem .55rem .24rem;margin:.3rem 0 0;text-align:left;}