/* ==========================================================================
   GodsDog — Comic × Branded
   The comic page structure (panel grids, real black gutters, cream narration
   boxes, speech balloons, folio numbers) carrying the brand system from the
   printed books: charcoal boards, gold foil rules, deep crimson grounds,
   and the serif display face used on the covers.
   --------------------------------------------------------------------------
   Two display faces do two jobs:
     .font-display  serif  — headings, the editorial voice
     .font-stencil  Bebas  — caption boxes, badges, buttons, folios, nav
   ========================================================================== */

@font-face { font-family:'Beaufort'; src:url('../fonts/Beaufort-Regular.woff2') format('woff2'),url('../fonts/Beaufort-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Beaufort'; src:url('../fonts/Beaufort-Bold.woff2') format('woff2'),url('../fonts/Beaufort-Bold.woff') format('woff'); font-weight:700; font-display:swap; }

:root{
  --gutter-black:#0b0a0d;      /* the black between panels */
  --board:#1c1a21;             /* charcoal panel, from the printed case */
  --board-lit:#262430;
  --paper:#efe8db;             /* interior page stock, for reading panels */
  --caption:#e6d9b8;           /* narration box cream */

  --ink:#131217;
  --ink-soft:#332f38;
  --muted:#6f6a63;
  --muted-dark:#9a9086;

  --crimson:#7c1f2c;
  --crimson-deep:#4c1018;
  --crimson-lit:#a12b3c;
  --plum:#5c2455;
  --rust:#b8420e;
  --gold:#e9b14b;
  --gold-deep:#b7842a;
  --gold-line:rgba(233,177,75,.42);
  --bone:#f4efe6;
  --bone-dim:#c9c0b3;

  --rule:2px solid #000;
  --rule-thick:3px solid #000;
  --halo:0 0 0 1px var(--gold-line);        /* the gold hairline outside every panel */

  --font-display:'Beaufort','Cinzel','Trajan Pro',Georgia,serif;
  --font-stencil:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,sans-serif;

  --w-page:1280px;
  --pad:clamp(1rem,3.5vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .18vw,1.06rem);line-height:1.65;
  color:var(--ink-soft);background:var(--gutter-black);overflow-x:hidden;
  background-image:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(124,31,44,.28),transparent 70%);
  background-repeat:no-repeat;background-attachment:fixed;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--crimson);text-underline-offset:.18em;font-weight:600}
a:hover{color:var(--crimson-lit)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
::selection{background:var(--gold);color:var(--ink)}
.skip-link{position:absolute;left:0;top:0;transform:translateY(-120%);background:var(--gold);color:var(--ink);padding:.7rem 1.15rem;z-index:999;font-family:var(--font-stencil);letter-spacing:.1em}
.skip-link:focus{transform:translateY(0)}

.wrap{width:min(100% - 2rem,var(--w-page));margin-inline:auto}
.wrap--narrow{width:min(100% - 2rem,820px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* -------------------------------------------------------- the page ----- */
/* Every section is a strip of panels. Gutters are real black gaps, and every
   panel carries a gold hairline outside its black rule. */
.strip{padding-block:clamp(.75rem,1.6vw,1.15rem)}
.strip:first-of-type{padding-top:clamp(1rem,2vw,1.5rem)}
.panels{display:grid;gap:clamp(.7rem,1.5vw,1.15rem)}
.panels--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.panels--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.panels--auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.panels--wide-left{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.panels--wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr)}

.panel{
  background:var(--paper);border:var(--rule);position:relative;overflow:hidden;
  padding:var(--pad);box-shadow:var(--halo);
}
.panel--flush{padding:0}
.panel--tight{--pad:clamp(.5rem,1.75vw,1.25rem)}
.panel--dark{background:var(--board);color:var(--bone-dim)}
.panel--dark h2,.panel--dark h3{color:var(--gold)}
.panel--dark h4{color:var(--gold)}
.panel--crimson{background:linear-gradient(150deg,var(--crimson),var(--crimson-deep));color:#f0dcd8}
.panel--crimson h2,.panel--crimson h3{color:var(--bone)}
.panel--rust{background:linear-gradient(150deg,#a5390c,#6d2408);color:#ffeee3}
.panel--rust h2,.panel--rust h3{color:#fff}
.panel--plum{background:linear-gradient(150deg,var(--plum),#33122f);color:#eddcea}
.panel--plum h2,.panel--plum h3{color:#fff}
.panel--gold{background:linear-gradient(150deg,#f0bd60,var(--gold-deep));color:var(--ink)}
.panel--gold h2,.panel--gold h3{color:var(--ink)}
.panel--tall{grid-row:span 2}

/* Halftone wash */
.panel--dots::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,.14) 1px,transparent 1.6px);
  background-size:7px 7px;mix-blend-mode:multiply;opacity:.6}
.panel--dots-light::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(233,177,75,.16) 1px,transparent 1.6px);
  background-size:7px 7px;opacity:.7}
.panel>*{position:relative;z-index:1}

/* Folio, like a comic page number */
.folio{position:absolute;right:.75rem;bottom:.5rem;font-family:var(--font-stencil);font-size:.9rem;letter-spacing:.14em;color:rgba(19,18,23,.32);z-index:2}
.panel--dark .folio,.panel--crimson .folio,.panel--rust .folio,.panel--plum .folio{color:rgba(233,177,75,.4)}

/* --------------------------------------------------------- lettering --- */
/* Headings take the serif display face from the covers. */
h1,h2,h3{font-family:var(--font-display);color:var(--ink);font-weight:700;line-height:1.08;margin:0 0 .45em;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(2.3rem,1.5rem + 4.2vw,4.4rem)}
h2{font-size:clamp(1.75rem,1.3rem + 2.2vw,2.85rem)}
h3{font-size:clamp(1.22rem,1.05rem + .85vw,1.62rem)}
h4{font-family:var(--font-stencil);font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);margin:0 0 .35em;font-weight:400}
p{margin:0 0 1rem}p:last-child{margin-bottom:0}
.stack>*+*{margin-top:1rem}

/* Narration caption box — the signature device from the books */
.caption-box{
  display:inline-block;background:var(--caption);border:2px solid var(--ink);
  padding:.5rem .85rem;font-family:var(--font-stencil);
  font-size:1rem;line-height:1.2;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.caption-box--block{display:block;margin-bottom:1.05rem}

.eyebrow{font-family:var(--font-stencil);font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crimson);margin:0 0 .6rem;display:block}
.panel--dark .eyebrow,.panel--crimson .eyebrow,.panel--rust .eyebrow,.panel--plum .eyebrow{color:var(--gold)}
.lede{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);line-height:1.55;color:var(--ink);font-weight:500}
.panel--dark .lede{color:var(--bone)}
.panel--crimson .lede,.panel--rust .lede,.panel--plum .lede{color:#fff}
.small{font-size:.86rem}
.muted{color:var(--muted)}
.panel--dark .muted{color:var(--muted-dark)}
.panel--crimson .muted,.panel--rust .muted,.panel--plum .muted{color:rgba(255,255,255,.72)}
.caption{font-size:.76rem;color:var(--muted);margin-top:.5rem;line-height:1.4;font-style:italic}
.panel--dark .caption,.panel--crimson .caption,.panel--plum .caption,.panel--rust .caption{color:var(--muted-dark)}
.center{text-align:center}
.center .btn-row,.center .rule-orn{justify-content:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:1.75rem}.mt-3{margin-top:2.5rem}

/* Gold ornamental rule, from the branded system */
.rule-orn{display:flex;align-items:center;gap:.85rem;margin:0 0 1.6rem}
.rule-orn::before,.rule-orn::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.rule-orn__mark{width:8px;height:8px;transform:rotate(45deg);background:var(--gold);flex:none}
.panel:not(.panel--dark):not(.panel--crimson):not(.panel--plum):not(.panel--rust) .rule-orn::before,
.panel:not(.panel--dark):not(.panel--crimson):not(.panel--plum):not(.panel--rust) .rule-orn::after{background:linear-gradient(90deg,transparent,rgba(19,18,23,.28),transparent)}
.panel:not(.panel--dark):not(.panel--crimson):not(.panel--plum):not(.panel--rust) .rule-orn__mark{background:var(--crimson)}

/* ---------------------------------------------------------- header ----- */
.site-header{position:sticky;top:0;z-index:100;background:var(--ink);border-bottom:1px solid var(--gold);box-shadow:0 3px 0 rgba(233,177,75,.22)}
.site-header__inner{display:flex;align-items:center;gap:1.25rem;min-height:4.1rem}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{width:clamp(118px,15vw,162px)}
.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav a{display:block;font-family:var(--font-stencil);font-size:1.05rem;letter-spacing:.13em;text-transform:uppercase;color:#cfc7ba;text-decoration:none;padding:.5rem .85rem;font-weight:400;position:relative}
.nav a:hover{color:var(--gold)}
.nav a[aria-current="page"]{color:var(--gold)}
.nav a[aria-current="page"]::after{content:'';position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;background:var(--gold)}
.nav .btn{margin-left:.75rem;color:var(--ink)}
.nav .btn:hover{color:var(--ink)}
.nav-toggle{display:none;margin-left:auto;background:var(--gold);border:2px solid #000;color:var(--ink);padding:.45rem .8rem;cursor:pointer;font-family:var(--font-stencil);font-size:1rem;letter-spacing:.12em;text-transform:uppercase}
.nav-toggle::after{content:'Menu'}
.nav-toggle[data-label="close"]::after{content:'Close'}

/* ------------------------------------------------------------ hero ----- */
.hero{padding-block:clamp(1rem,2vw,1.5rem) 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(.7rem,1.5vw,1.15rem);align-items:stretch}
.hero__main{min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(160deg,#2a1018,#140b11 58%,#1e1220);
  border:var(--rule-thick);box-shadow:var(--halo);padding:clamp(1.75rem,4vw,3.25rem)}
.hero__main::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 72% 62% at 28% 42%,rgba(161,43,60,.62),transparent 70%)}
.hero__h1{margin:0 0 1.15rem;position:relative}
.hero__logo{width:min(100%,470px)}
.hero__tagline{font-family:var(--font-display);font-size:clamp(1.12rem,.95rem + .95vw,1.7rem);color:var(--gold);letter-spacing:.02em;line-height:1.25;margin:0 0 1.05rem;position:relative;font-weight:700}
.hero__main p{color:#cfc5bb;position:relative}

/* The fanned cover stack, carried over from the branded direction */
.hero__stack{position:relative;display:grid;place-items:center;background:linear-gradient(165deg,#241019,#120b10);border:var(--rule-thick);box-shadow:var(--halo);overflow:hidden;min-height:clamp(320px,40vw,520px)}
.hero__stack::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 66% 58% at 50% 48%,rgba(233,177,75,.22),transparent 70%)}
.hero__stack img{position:absolute;box-shadow:0 26px 52px -18px rgba(0,0,0,.95);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.hero__stack img:nth-child(1){width:42%;transform:translate(-54%,-3%) rotate(-9deg);z-index:1}
.hero__stack img:nth-child(2){width:47%;transform:translate(0,3%);z-index:3}
.hero__stack img:nth-child(3){width:42%;transform:translate(54%,-3%) rotate(9deg);z-index:1}
.hero__stack:hover img:nth-child(1){transform:translate(-64%,-6%) rotate(-12deg)}
.hero__stack:hover img:nth-child(3){transform:translate(64%,-6%) rotate(12deg)}

.pagehead{padding-block:clamp(1rem,2vw,1.5rem) 0}
.pagehead__panel{background:linear-gradient(150deg,#25121c,#130c12);border:var(--rule-thick);box-shadow:var(--halo);padding:clamp(1.75rem,4vw,3.25rem);position:relative;overflow:hidden}
.pagehead__panel::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 58% 82% at 14% 46%,rgba(161,43,60,.5),transparent 68%)}
.pagehead h1{color:var(--gold);position:relative}
.pagehead .lede{color:#ded5ca;max-width:62ch;position:relative}

/* --------------------------------------------------------- controls ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-stencil);font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;padding:.58rem 1.35rem;border:2px solid #000;background:var(--gold);color:var(--ink);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 rgba(0,0,0,.85);transition:transform .1s ease,box-shadow .1s ease,background .15s ease}
.btn:hover{color:var(--ink);background:#f3c976;transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.85)}
.btn--crimson{background:var(--crimson);color:#fff;border-color:#000}
.btn--crimson:hover{background:var(--crimson-lit);color:#fff}
.btn--outline{background:var(--paper);color:var(--ink)}
.btn--outline:hover{background:#fff;color:var(--ink)}
.btn--onink{background:transparent;color:var(--gold);border-color:var(--gold);box-shadow:3px 3px 0 rgba(233,177,75,.3)}
.btn--onink:hover{background:var(--gold);color:var(--ink);box-shadow:1px 1px 0 rgba(233,177,75,.3)}
.btn--sm{padding:.42rem 1rem;font-size:.92rem;box-shadow:2px 2px 0 rgba(0,0,0,.85)}
.btn--block{display:flex;width:100%}
.btn[aria-disabled="true"]{background:transparent;color:var(--muted);border-style:dashed;box-shadow:none;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}

.badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-stencil);font-size:.88rem;letter-spacing:.13em;text-transform:uppercase;padding:.16rem .6rem;border:2px solid #000;background:var(--caption);color:var(--ink);white-space:nowrap}
.badge--out{background:#9ccfae}.badge--soon{background:var(--gold)}.badge--future{background:#cdc5b7}
.badge--dot::before{content:'●';font-size:.5em}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.chip{font-family:var(--font-stencil);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .65rem;border:2px solid #000;background:var(--caption);color:var(--ink);text-decoration:none}
a.chip:hover{background:var(--gold)}
.panel--dark .chip,.panel--crimson .chip{border-color:var(--gold-line);background:rgba(233,177,75,.12);color:var(--gold)}
.panel--dark a.chip:hover,.panel--crimson a.chip:hover{background:var(--gold);color:var(--ink)}

.note{border:2px solid #000;background:var(--caption);padding:1rem 1.2rem;box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.note h4{margin-bottom:.3rem;color:var(--crimson)}
.note p{color:var(--ink)}
.panel--dark .note,.panel--crimson .note,.panel--plum .note{background:rgba(233,177,75,.1);border-color:var(--gold-line);box-shadow:none}
.panel--dark .note p,.panel--crimson .note p,.panel--plum .note p{color:var(--bone)}
.panel--dark .note h4,.panel--crimson .note h4,.panel--plum .note h4{color:var(--gold)}

/* --------------------------------------------------- character sheet --- */
.infobox{background:var(--caption);border:var(--rule);align-self:start;font-size:.88rem;box-shadow:5px 5px 0 rgba(0,0,0,.5),var(--halo)}
.infobox__title{background:linear-gradient(150deg,var(--crimson),var(--crimson-deep));color:var(--gold);font-family:var(--font-display);font-size:1.2rem;letter-spacing:.04em;padding:.6rem 1rem;margin:0;text-align:center;border-bottom:1px solid var(--gold)}
.infobox__figure{margin:0;padding:1rem 1rem 0;background:var(--paper);border-bottom:2px solid var(--ink)}
.infobox__figure img{margin-inline:auto;max-height:290px;width:auto}
.infobox__figure figcaption{font-size:.7rem;color:var(--muted);text-align:center;padding:.5rem 0 .85rem;font-style:italic}
.infobox__section{background:var(--ink);color:var(--gold);font-family:var(--font-stencil);font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;padding:.3rem 1rem;text-align:center}
.infobox dl{margin:0}
.infobox dl>div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.7rem;padding:.5rem 1rem;border-bottom:1px solid rgba(19,18,23,.16)}
.infobox dl>div:last-child{border-bottom:0}
.infobox dt{font-family:var(--font-stencil);font-size:1rem;letter-spacing:.06em;color:var(--crimson);text-transform:uppercase;line-height:1.25}
.infobox dd{margin:0;color:var(--ink);line-height:1.45}

.wiki-layout{display:grid;grid-template-columns:minmax(0,1fr) 20.5rem;gap:clamp(1.25rem,2.5vw,2.25rem);align-items:start}
.wiki-layout--flip{grid-template-columns:20.5rem minmax(0,1fr)}
.wiki-layout--flip>.infobox{order:-1}

.toc h2{font-family:var(--font-stencil);font-size:1.2rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .55rem;color:var(--crimson);border:0}
.toc ol{margin:0;padding-left:1.25rem;font-size:.92rem}
.toc li{margin-bottom:.28rem}
.toc a{color:var(--ink);text-decoration:none;font-weight:600}
.toc a:hover,.toc a[aria-current]{color:var(--crimson);text-decoration:underline}

.spoiler{border:2px dashed rgba(19,18,23,.45);background:rgba(124,31,44,.08);margin-top:1.2rem}
.spoiler>summary{cursor:pointer;list-style:none;font-family:var(--font-stencil);font-size:1.02rem;letter-spacing:.13em;text-transform:uppercase;color:var(--crimson);padding:.68rem 1rem;display:flex;align-items:center;gap:.5rem;user-select:none}
.spoiler>summary::-webkit-details-marker{display:none}
.spoiler>summary::before{content:'▶';font-size:.72em;transition:transform .2s ease;flex:none}
.spoiler[open]>summary::before{transform:rotate(90deg)}
.spoiler[open]>summary{border-bottom:2px dashed rgba(19,18,23,.35)}
.spoiler>summary:hover{background:rgba(124,31,44,.16)}
.spoiler__body{padding:1rem 1.15rem 1.15rem;font-size:.94rem;color:var(--ink)}
.panel--dark .spoiler,.panel--crimson .spoiler{border-color:var(--gold-line);background:rgba(233,177,75,.07)}
.panel--dark .spoiler>summary,.panel--crimson .spoiler>summary{color:var(--gold)}
.panel--dark .spoiler[open]>summary,.panel--crimson .spoiler[open]>summary{border-bottom-color:var(--gold-line)}
.panel--dark .spoiler>summary:hover,.panel--crimson .spoiler>summary:hover{background:rgba(233,177,75,.14)}
.panel--dark .spoiler__body,.panel--crimson .spoiler__body{color:var(--bone-dim)}

/* ------------------------------------------------------------ books ---- */
.books-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(.7rem,1.5vw,1.15rem)}
.book{display:flex;flex-direction:column;background:var(--board);border:var(--rule);overflow:hidden;box-shadow:var(--halo);transition:transform .12s ease,box-shadow .12s ease}
.book:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--gold),var(--halo)}
.book--future{background:#191820;border-style:dashed}
.book__cover{position:relative;aspect-ratio:2/3;overflow:hidden;background:#0d0c10;display:grid;place-items:center;border-bottom:2px solid #000}
.book__cover img{width:100%;height:100%;object-fit:cover}
.book__plate{text-align:center;padding:1.4rem 1rem;display:grid;gap:.45rem;place-items:center}
.book__plate-num{font-family:var(--font-stencil);font-size:.9rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,177,75,.72)}
.book__plate-title{font-family:var(--font-display);font-size:clamp(1.45rem,4vw,2rem);color:var(--bone);letter-spacing:.03em;line-height:1.05}
.book__plate-rule{width:34px;height:1px;background:var(--gold)}
.book__plate-note{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,177,75,.55);font-family:var(--font-stencil)}
.book__badge{position:absolute;top:.55rem;left:.55rem;font-size:.76rem;letter-spacing:.1em;padding:.14rem .48rem}
.book__body{padding:.95rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1;color:var(--bone-dim)}
.book__title{font-size:1.35rem;margin:0;color:var(--bone)}
.book__meta{font-size:.8rem;color:var(--muted-dark);font-family:var(--font-stencil);letter-spacing:.11em;text-transform:uppercase}
.book__blurb{font-size:.87rem;margin:0;flex:1}
.book__price{font-family:var(--font-display);font-size:1.15rem;color:var(--gold);font-weight:700}
.book__price s{color:var(--muted-dark);font-size:.72em;margin-left:.35rem;font-weight:400}
.book__actions{margin-top:.25rem;display:grid;gap:.4rem}

.volume{display:grid;grid-template-columns:18rem minmax(0,1fr);gap:clamp(1.25rem,2.5vw,2.25rem);align-items:start}
.volume__cover img{border:2px solid #000;box-shadow:6px 6px 0 rgba(0,0,0,.6),var(--halo)}
.volume__num{font-family:var(--font-stencil);font-size:1.05rem;letter-spacing:.24em;text-transform:uppercase;color:var(--crimson);margin-bottom:.25rem;display:block}
.panel--dark .volume__num{color:var(--gold)}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.1rem 2rem;list-style:none;padding:0;margin:0;font-size:.87rem}
.spec li{padding:.35rem 0;border-bottom:1px solid rgba(19,18,23,.14)}
.spec b{font-family:var(--font-stencil);color:var(--crimson);font-size:1rem;letter-spacing:.07em;display:block;text-transform:uppercase;font-weight:400}
.panel--dark .spec li{border-bottom-color:rgba(233,177,75,.16)}
.panel--dark .spec b{color:var(--gold)}

/* ------------------------------------------------------- characters ---- */
.char-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:clamp(.5rem,1.1vw,.85rem)}
.char-nav a{display:grid;gap:.45rem;justify-items:center;text-align:center;padding:.9rem .6rem 1rem;background:var(--paper);border:2px solid #000;text-decoration:none;color:var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.char-nav a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--gold)}
.char-nav img{width:70px;height:70px;object-fit:cover;border:1px solid rgba(19,18,23,.5);background:#fff;border-radius:50%}
.char-nav span{font-family:var(--font-display);font-size:1.02rem;letter-spacing:.02em;line-height:1.15;font-weight:700}
.char-nav small{font-family:var(--font-stencil);font-size:.8rem;color:var(--crimson);letter-spacing:.12em;text-transform:uppercase}

.rivers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;max-width:520px;margin-inline:auto}
.rivers__cell{background:var(--paper);border:2px solid #000;padding:.7rem .5rem;text-align:center}
.rivers__cell img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:.4rem;border:1px solid rgba(19,18,23,.35)}
.rivers__name{font-family:var(--font-display);font-size:1rem;color:var(--ink);display:block;font-weight:700}
.rivers__humor{font-family:var(--font-stencil);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson)}
.rivers__cell--n{grid-column:2;grid-row:1}.rivers__cell--w{grid-column:1;grid-row:2}
.rivers__cell--c{grid-column:2;grid-row:2;display:grid;place-items:center;background:linear-gradient(150deg,var(--crimson),var(--crimson-deep));color:var(--gold);font-family:var(--font-stencil);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.rivers__cell--e{grid-column:3;grid-row:2}.rivers__cell--s{grid-column:2;grid-row:3}

/* ----------------------------------------------------------- quotes ---- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.balloon{background:var(--caption);border:2px solid #000;border-radius:20px;padding:1.25rem 1.3rem 1.05rem;position:relative;margin-bottom:1.4rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.balloon::after{content:'';position:absolute;left:2.2rem;bottom:-17px;width:0;height:0;border:9px solid transparent;border-top:17px solid #000;border-bottom:0}
.balloon::before{content:'';position:absolute;left:2.35rem;bottom:-11px;width:0;height:0;border:7px solid transparent;border-top:12px solid var(--caption);border-bottom:0;z-index:2}
.balloon blockquote{margin:0;font-size:1rem;line-height:1.55;color:var(--ink);font-weight:500}
.balloon figcaption{font-size:.79rem;color:var(--muted);margin-top:auto}
.balloon figcaption strong{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--crimson);letter-spacing:.01em;font-weight:700}
.quote__book{font-family:var(--font-stencil);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.22rem}
.balloon--shout{background:linear-gradient(150deg,#f0bd60,var(--gold-deep));border-width:3px;border-radius:0;clip-path:polygon(0 5%,4% 0,96% 3%,100% 0,98% 95%,94% 100%,4% 97%,0 100%)}
.balloon--shout::before,.balloon--shout::after{display:none}
.balloon--shout blockquote{font-family:var(--font-display);font-size:clamp(1.25rem,1.05rem + .95vw,1.85rem);line-height:1.25;font-weight:700}
.balloon--shout figcaption{color:rgba(19,18,23,.78)}
.balloon--shout figcaption strong{color:var(--crimson-deep)}
.balloon--shout .quote__book{color:rgba(19,18,23,.62)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(.7rem,1.5vw,1.15rem)}
.stat{background:var(--board);border:2px solid #000;box-shadow:var(--halo);padding:1.25rem .75rem;text-align:center;color:var(--bone-dim)}
.stat__num{font-family:var(--font-display);font-size:clamp(2rem,1.5rem + 2vw,3.1rem);line-height:1;display:block;margin-bottom:.4rem;color:var(--gold);font-weight:700}
.stat__label{font-family:var(--font-stencil);font-size:.85rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.3}

/* ---------------------------------------------------------- process ---- */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.timeline>li{background:var(--paper);border:2px solid #000;padding:.85rem 1rem;display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;align-items:baseline}
.timeline__year{font-family:var(--font-stencil);font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;color:var(--crimson)}
.timeline h3{font-size:1.12rem;margin-bottom:.2rem}
.timeline p{font-size:.9rem;margin:0}
.panel--dark .timeline>li{background:rgba(233,177,75,.07);border-color:var(--gold-line);color:var(--bone-dim)}
.panel--dark .timeline__year{color:var(--gold)}
.panel--dark .timeline h3{color:var(--bone)}

.evolution{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(.7rem,1.5vw,1.15rem)}
.evolution figure{margin:0;background:var(--paper);border:2px solid #000;padding:1rem;display:flex;flex-direction:column;color:var(--ink-soft)}
.evolution img{margin:0 0 .75rem;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;background:#fff;border:1px solid rgba(19,18,23,.35)}
.evolution figcaption{margin-top:auto}
.evolution__step{font-family:var(--font-stencil);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);display:block;margin-bottom:.2rem}

.interiors{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(.7rem,1.5vw,1.15rem)}
.interiors figure{margin:0;border:2px solid #000;background:#000;overflow:hidden;box-shadow:var(--halo)}

/* --------------------------------------------------------- creators ---- */
.author{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:clamp(1.25rem,2.5vw,2.25rem);align-items:start}
.author--flip{grid-template-columns:minmax(0,1fr) 16rem}
.author--flip .author__media{order:2}
.author__photo{aspect-ratio:1;overflow:hidden;border:2px solid #000;box-shadow:6px 6px 0 var(--crimson),var(--halo);display:grid;place-items:center;background:var(--caption)}
.author__photo img{width:100%;height:100%;object-fit:cover}
.author__photo--empty{background:repeating-linear-gradient(45deg,rgba(19,18,23,.09) 0 10px,transparent 10px 20px),var(--caption)}
.author__photo-note{text-align:center;padding:1.3rem 1rem;color:var(--muted);font-family:var(--font-stencil);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.author__role{font-family:var(--font-stencil);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson);display:block;margin-bottom:.2rem}
.panel--dark .author__role{color:var(--gold)}
.credit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(.7rem,1.5vw,1.15rem)}
.credit{background:var(--paper);border:2px solid #000;padding:1.1rem;color:var(--ink-soft)}
.panel--crimson .credit h3,.panel--dark .credit h3,.credit h3{color:var(--ink);font-size:1.2rem;margin-bottom:.1rem}
.panel--crimson .credit p,.panel--dark .credit p,.credit p{color:var(--ink-soft)}
.panel--crimson .credit em,.panel--dark .credit em,.credit em{color:var(--ink)}
.credit__role{font-family:var(--font-stencil);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);display:block;margin-bottom:.6rem}
.credit p{font-size:.86rem;margin:0}

/* ----------------------------------------------------------- signup ---- */
.signup{text-align:center}
.signup__inner{max-width:620px;margin-inline:auto}
.signup__form{margin-top:1.35rem}
.form-row{display:flex;gap:.55rem;flex-wrap:wrap}
.form-row .field{flex:1 1 200px}
.field input{width:100%;font-family:var(--font-body);font-size:1rem;padding:.78rem 1rem;border:2px solid #000;background:var(--caption);color:var(--ink)}
.field input::placeholder{color:var(--muted)}
.field input:focus{border-color:var(--gold);outline-offset:0}
.form-note{font-size:.78rem;margin-top:.85rem;color:var(--muted-dark)}
.form-status{margin-top:.9rem;font-size:1rem;min-height:1.4em;font-family:var(--font-stencil);letter-spacing:.08em;text-transform:uppercase}
.form-status[data-state="ok"]{color:#7fd8a2}
.form-status[data-state="err"]{color:#ff9d8f}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ----------------------------------------------------------- footer ---- */
.site-footer{background:var(--ink);border-top:1px solid var(--gold);box-shadow:0 -3px 0 rgba(233,177,75,.22);padding-block:clamp(2.25rem,4vw,3.25rem) 1.75rem;font-size:.9rem;color:#9a9086;margin-top:clamp(.75rem,1.6vw,1.15rem)}
.site-footer__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem;margin-bottom:2.25rem}
.site-footer img.footer-logo{width:150px;margin-bottom:1rem}
.site-footer__roundel{width:60px;opacity:.6;margin-top:1.1rem}
.site-footer h3{color:var(--gold);font-family:var(--font-stencil);font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.7rem;font-weight:400}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.4rem}
.site-footer a{color:#cbc2b6;text-decoration:none;font-weight:400}
.site-footer a:hover{color:var(--gold);text-decoration:underline}
.site-footer__bar{border-top:1px solid rgba(233,177,75,.2);padding-top:1.35rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.79rem}

/* --------------------------------------------- home page, revised ------ */
/* Hero is one panel: copy left, art right, inside the same frame. */
.hero__panel{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  background:linear-gradient(160deg,#2a1018,#140b11 58%,#1e1220);border:var(--rule-thick);box-shadow:var(--halo);
  padding:clamp(1.75rem,4vw,3.25rem);position:relative;overflow:hidden}
.hero__panel::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 68% 60% at 26% 44%,rgba(161,43,60,.6),transparent 70%)}
.hero__copy{position:relative;z-index:1}
.hero__copy p{color:#cfc5bb}
.hero__art{position:relative;z-index:1;display:grid;place-items:center;min-height:clamp(280px,32vw,430px)}
.hero__art img{position:absolute;box-shadow:0 26px 52px -18px rgba(0,0,0,.95);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.hero__art img:nth-child(1){width:44%;transform:translate(-54%,-3%) rotate(-9deg);z-index:1}
.hero__art img:nth-child(2){width:49%;transform:translate(0,3%);z-index:3}
.hero__art img:nth-child(3){width:44%;transform:translate(54%,-3%) rotate(9deg);z-index:1}
.hero__art:hover img:nth-child(1){transform:translate(-64%,-6%) rotate(-12deg)}
.hero__art:hover img:nth-child(3){transform:translate(64%,-6%) rotate(12deg)}

/* Full-width feature panel: copy on one side, a plate of art on the other. */
.feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.35rem,3vw,2.75rem);align-items:center}
.feature__art{border:2px solid #000;overflow:hidden;background:#0d0c10;aspect-ratio:4/5}
.feature__art img{width:100%;height:100%;object-fit:cover}
.feature__art figcaption{display:none}

/* Thinned book card: volume, title, price, one button. */
.book__vol{font-family:var(--font-stencil);font-size:.92rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block}
.book__body{gap:.35rem}
.book__title{font-size:1.5rem;margin:0 0 .1rem}
.book__actions{margin-top:auto;padding-top:.55rem}
.book__actions .btn{font-size:.88rem;letter-spacing:.07em;padding-inline:.7rem;white-space:nowrap}

/* Volumes 1-3 bundle callout */
.bundle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.bundle__covers{display:flex;justify-content:center;align-items:flex-end;gap:0}
.bundle__covers img{width:33%;border:2px solid #000;box-shadow:0 18px 34px -14px rgba(0,0,0,.9)}
.bundle__covers img:nth-child(1){transform:rotate(-6deg) translateY(6px)}
.bundle__covers img:nth-child(2){position:relative;z-index:2;width:37%;margin-inline:-3%}
.bundle__covers img:nth-child(3){transform:rotate(6deg) translateY(6px)}
.bundle__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.65rem;margin:.35rem 0 .2rem}
.bundle__now{font-family:var(--font-display);font-size:clamp(2rem,1.5rem + 2vw,3rem);color:var(--crimson-deep);font-weight:700;line-height:1}
.panel--dark .bundle__now,.panel--crimson .bundle__now{color:var(--gold)}
.bundle__was{font-family:var(--font-display);font-size:1.25rem;color:rgba(19,18,23,.55);text-decoration:line-through}
.bundle__flags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 1.1rem}

/* Interiors full width */
.interiors--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.interiors--wide{grid-template-columns:minmax(0,1fr)}}

/* The scroll quote sits on the page with no frame around it. */
.strip--bare{padding-block:clamp(1.15rem,2.4vw,1.9rem)}

@media (max-width:900px){
  .hero__panel{grid-template-columns:minmax(0,1fr)}
  .hero__art{order:-1;min-height:250px}
  .feature{grid-template-columns:minmax(0,1fr)}
  .feature__art{max-width:22rem;margin-inline:auto;aspect-ratio:3/2}
  .bundle{grid-template-columns:minmax(0,1fr)}
  .bundle__covers{order:-1}
}

/* Character-entry figures: cap the tall ones so they do not leave a long gap. */
.char-figure{margin:0;max-width:290px;border:2px solid #000;background:var(--paper);padding:.6rem;box-shadow:var(--halo)}
.char-figure img{max-height:360px;width:auto;margin-inline:auto;object-fit:contain}
.panel--dark .char-figure{background:var(--paper)}
.panel--dark .char-figure .caption{color:var(--muted)}

.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}
.glance div{background:rgba(19,18,23,.06);border:2px solid rgba(19,18,23,.5);padding:.7rem .6rem;text-align:center}
.glance b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--crimson);line-height:1;font-weight:700}
.glance span{font-family:var(--font-stencil);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.3rem}

/* ------------------------------------------------------- responsive ---- */
@media (max-width:1080px){
  .wiki-layout,.wiki-layout--flip{grid-template-columns:minmax(0,1fr)}
  .wiki-layout--flip>.infobox{order:0}
  .infobox{max-width:29rem;margin-inline:auto;width:100%}
  .volume,.author,.author--flip{grid-template-columns:minmax(0,1fr)}
  .author--flip .author__media{order:0}
  .author__photo{max-width:18rem}
  .volume__cover img{max-width:18rem}
  .panels--wide-left,.panels--wide-right{grid-template-columns:minmax(0,1fr)}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__stack{order:-1;min-height:300px}
  .nav-toggle{display:block}
  .nav{position:fixed;inset:4.1rem 0 auto 0;background:var(--ink);border-bottom:1px solid var(--gold);padding:.6rem 1rem 1.1rem;display:none;max-height:calc(100dvh - 4.1rem);overflow-y:auto}
  .nav[data-open="true"]{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{padding:.8rem .5rem;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav a[aria-current="page"]::after{display:none}
  .nav .btn{margin:.85rem 0 0}
  .panels--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline>li{grid-template-columns:minmax(0,1fr);gap:.2rem}
}
@media (max-width:620px){
  .panels--2,.panels--3{grid-template-columns:minmax(0,1fr)}
  .infobox dl>div{grid-template-columns:6.5rem minmax(0,1fr);gap:.5rem}
  .site-footer__grid{grid-template-columns:1fr;gap:1.6rem}
  .rivers{grid-template-columns:minmax(0,1fr)}
  .rivers__cell{grid-column:1!important;grid-row:auto!important}
  .rivers__cell--c{display:none}
  .hero__stack img:nth-child(1),.hero__stack img:nth-child(3){opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .site-header,.site-footer,.signup,.nav-toggle,.skip-link{display:none!important}
  body{background:#fff}
  .panel{break-inside:avoid;box-shadow:none}
  .spoiler__body{display:block!important}
}


/* Process figures set beside body copy (George's sword, Daniel's candle) */
.aside-fig{float:right;width:clamp(120px,26%,168px);max-width:42%;margin:.2rem 0 1rem 1.4rem;border:3px solid var(--ink);background:#fff;padding:.55rem;box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.aside-fig img{display:block;width:100%;height:auto;margin:0}
.aside-fig figcaption{margin-top:.45rem;font-size:.7rem;line-height:1.3;color:var(--muted);text-align:center;font-style:italic}
.stack .spoiler{clear:both}
@media (max-width:720px){
  .aside-fig{float:none;width:min(220px,70%);margin:1.25rem auto}
}


/* Artist credit cards carrying a work sample */
.credit-grid--samples{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.credit-grid--samples{grid-template-columns:minmax(0,1fr)}}
.credit--sample{padding:0;display:flex;flex-direction:column;overflow:hidden}
.credit__sample{margin:0;background:var(--ink);border-bottom:2px solid #000}
.credit__sample img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.credit__body{padding:1.1rem}
.credit--sample .credit__body{flex:1}


.site-footer__roundel-link{display:inline-block;line-height:0;margin-top:1.1rem}
.site-footer__roundel-link .site-footer__roundel{margin-top:0;transition:opacity .15s ease}
.site-footer__roundel-link:hover .site-footer__roundel,.site-footer__roundel-link:focus-visible .site-footer__roundel{opacity:1}

/* Feature art shown whole and bled flush to the panel edges, no crop.
   Negative margins cancel the panel's own padding on three sides; the
   image keeps its natural ratio, so it sets the panel height. */
.feature__art--bleed{
  aspect-ratio:auto;overflow:visible;border:0;
  align-self:center;
  margin-block:calc(var(--pad) * -1);
  margin-right:calc(var(--pad) * -1);
}
.feature__art--bleed img{width:100%;height:auto;object-fit:contain;display:block}
@media (max-width:900px){
  .feature__art--bleed{margin:0;max-width:none}
}