/* Conquest of Aldemere, the site as one old book.
   Pages are plain <section class="page"> blocks. Without script they simply stack down the screen;
   with script (html.js) book.js binds them into sheets that turn. */

@font-face { font-family: 'Pixelify Sans'; font-weight: 400; font-display: swap; src: url('../fonts/pixelify-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-weight: 600; font-display: swap; src: url('../fonts/pixelify-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-weight: 700; font-display: swap; src: url('../fonts/pixelify-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  --wood: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='300'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .26  0 0 0 0 .13  0 0 0 1.1 -.42'/></filter><rect width='100%' height='100%' filter='url(%23w)' opacity='.55'/></svg>");
  --paper: #efe2c2;
  --paper-2: #e4d3a8;
  --paper-edge: #c9b27c;
  --leather: #4a1a12;
  --leather-2: #2d0f0a;
  --foil: #d9ac45;
  --foil-2: #f1d27a;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .24  0 0 0 0 .1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --pw: min(calc((100vw - 190px) / 2), calc((100dvh - 128px) * .74), 600px);
  --ph: calc(var(--pw) / .74);
  --turn: 1000ms;
}

/* ── Fallback: no script, the pages stack ──────────────────────────────── */
body.bookpage main { padding: 24px 0 60px; }
.book { display: grid; gap: 22px; width: min(640px, calc(100% - 28px)); margin: 0 auto; }
.page { position: relative; container-type: inline-size; color: var(--ink); background: var(--paper); background-image: var(--grain), radial-gradient(ellipse at 50% 0%, #fff7e0 0%, transparent 60%); box-shadow: 0 0 0 1px var(--paper-edge), 0 14px 30px #0009; font-family: var(--serif); line-height: 1.42; }
.page .pg { padding: 5.6cqw 7.5cqw 8cqw; }
.page.cover, .page.endpaper { padding: 8cqw; }

/* ── The book, when script binds it ────────────────────────────────────── */
html.js body.bookpage { overflow: hidden; height: 100dvh; background: radial-gradient(ellipse at 50% 40%, #3a2417 0%, #1a110b 55%, #0c0705 100%); }
/* the desk: wood grain, a lamp's warm pool, a dark vignette and drifting dust */
html.js body.bookpage::before { content: ''; position: fixed; inset: 53px 0 0 0; z-index: 0; pointer-events: none; background:
  radial-gradient(ellipse 60% 55% at 50% 48%, #0006 0%, #0003 55%, transparent 80%),
  radial-gradient(ellipse at 50% 50%, transparent 55%, #000a 100%),
  url(../img/dungeon-wide.webp) center / cover no-repeat, #120b07; }
@media (max-aspect-ratio: 4/5), (max-width: 860px) { html.js body.bookpage::before { background:
  radial-gradient(ellipse 80% 60% at 50% 50%, #0006 0%, #0003 60%, transparent 85%),
  radial-gradient(ellipse at 50% 50%, transparent 55%, #000a 100%),
  url(../img/dungeon-tall.webp) center / cover no-repeat, #120b07; } }
/* the torches breathe a little */
html.js body.bookpage .torchlight { position: fixed; inset: 53px 0 0 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 22% 30% at 8% 6%, #ff9a3a33, transparent 70%), radial-gradient(ellipse 22% 30% at 92% 6%, #ff9a3a33, transparent 70%); animation: flick 3.2s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes flick { 0% { opacity: .55; } 30% { opacity: .95; } 55% { opacity: .7; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .torchlight { animation: none !important; } }
html.js body.bookpage::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 22vh; z-index: 0; pointer-events: none; background: linear-gradient(to top, #000a, transparent); }
html.js body.bookpage .bar, html.js body.bookpage main { position: relative; z-index: 1; }
.motes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; bottom: -10px; width: 3px; height: 3px; background: #ffd58a; border-radius: 50%; opacity: 0; box-shadow: 0 0 6px 1px #f4b95a88; animation: mote linear infinite; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .75; } 70% { opacity: .5; } 100% { transform: translate(var(--dx, 30px), -105vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .motes { display: none; } }
html.js body.bookpage main { padding: 0; height: calc(100dvh - 53px); display: grid; place-items: center; position: relative; }
html.js .stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; perspective: 2600px; }
html.js .book { display: block; position: relative; width: calc(var(--pw) * 2); height: var(--ph); margin: 0; gap: 0; transform-style: preserve-3d; transition: transform var(--turn) cubic-bezier(.45,.05,.2,1); transform: translateX(calc(var(--pw) * -.5)); }
html.js .book[data-state="open"] { transform: translateX(0); }
html.js .book[data-state="end"] { transform: translateX(calc(var(--pw) * .5)); }
html.js .book.single { width: var(--pw); transform: none !important; }

/* a desk shadow and the leather boards that peek out around the pages */
html.js .book::before { content: ''; position: absolute; left: -10px; right: -10px; top: 8px; bottom: -14px; background: #0008; filter: blur(18px); transform: translateZ(-30px); border-radius: 6px; transition: opacity var(--turn); }
html.js .board { position: absolute; top: -9px; width: calc(var(--pw) + 9px); height: calc(var(--ph) + 18px); background: var(--grain), linear-gradient(135deg, #5b2217, #2d0f0a); border: 1px solid #1a0805; border-radius: 3px; box-shadow: inset 0 0 0 3px #3a140c, inset 0 0 0 4px #7b3a1c88; transition: opacity var(--turn); }
html.js .board.l { left: -9px; border-radius: 6px 0 0 6px; }
html.js .board.r { right: -9px; border-radius: 0 6px 6px 0; }
html.js .book[data-state="start"] .board.l, html.js .book[data-state="start"]::before { opacity: 0; }
html.js .book[data-state="end"] .board.r { opacity: 0; }
html.js .book.single .board { display: none; }

/* the stacks of page edges under each side */
html.js .edge { position: absolute; top: 0; height: var(--ph); width: calc(var(--pw) - 3px); background: repeating-linear-gradient(to bottom, #f3e8cc 0 1px, #d8c595 1px 2px); box-shadow: 0 1px 0 #0006; transition: opacity var(--turn); }
html.js .edge.l { left: 3px; transform: translate(-5px, 3px); }
html.js .edge.r { right: 3px; transform: translate(5px, 3px); }
html.js .book[data-state="start"] .edge.l { opacity: 0; }
html.js .book[data-state="end"] .edge.r { opacity: 0; }
html.js .book.single .edge { display: none; }

html.js .sheet { position: absolute; top: 0; left: 50%; width: var(--pw); height: var(--ph); transform-origin: left center; transform-style: preserve-3d; transition: transform var(--turn) cubic-bezier(.5,.02,.18,1); }
html.js .book.single .sheet { left: 0; transition-duration: calc(var(--turn) * .8); }
html.js .sheet.flipped { transform: rotateY(-180deg); }
html.js .book.single .sheet.flipped { transform: rotateY(-115deg); opacity: 0; transition: transform calc(var(--turn) * .8) cubic-bezier(.5,.02,.18,1), opacity .25s ease .55s; pointer-events: none; }
html.js .sheet.flying .face { box-shadow: 0 0 26px #000b; }
html.js .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
html.js .face.back { transform: rotateY(180deg); }
html.js .book.instant, html.js .book.instant .sheet { transition: none !important; }

html.js .page { position: absolute; inset: 0; margin: 0; height: 100%; box-shadow: none; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
html.js .page .pg { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--paper-edge) transparent; padding-bottom: 12cqw; }

/* the gutter: a soft shadow where each page sinks into the spine */
html.js .face.front::after, html.js .face.back::after { content: ''; position: absolute; top: 0; bottom: 0; width: 11%; pointer-events: none; }
html.js .face.front::after { left: 0; background: linear-gradient(to right, #3a24106e, transparent); }
html.js .face.back::after { right: 0; background: linear-gradient(to left, #3a24106e, transparent); }
html.js .face.front { border-radius: 0 3px 3px 0; box-shadow: inset -1px 0 0 #fff6, inset 0 0 40px #8a6a2c26; }
html.js .face.back { border-radius: 3px 0 0 3px; box-shadow: inset 1px 0 0 #fff6, inset 0 0 40px #8a6a2c26; }
html.js .book.single .face.back { display: none; }
html.js .book.single .face.front::after { width: 7%; }

/* page furniture */
.page .run { display: flex; justify-content: space-between; gap: 12px; font-family: var(--caps); font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid #a3311f44; padding-bottom: .4em; margin-bottom: 1.1em; }
.page .rubric { margin: 0; font-size: .74em; }
.page h1, .page h2 { font-family: var(--caps); color: var(--rubric-dark); font-weight: 400; line-height: 1.12; letter-spacing: .01em; }
.page h2 { font-size: 2.1em; margin: .1em 0 0; }
.page h3 { font-family: var(--caps); font-weight: 400; color: var(--ink); font-size: 1.15em; line-height: 1.2; }
.page p { margin: .7em 0 0; }
.page .sub { color: var(--ink-soft); margin-top: .5em; }
.page .fine { font-size: .82em; color: var(--ink-faint); font-style: italic; }
.page .rule { height: 1px; margin: .8em 0 .9em; background: linear-gradient(to right, transparent, var(--gold), transparent); position: relative; }
.page .rule::after { content: ''; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; background: var(--rubric); transform: translateX(-50%) rotate(45deg); }
.page a { color: var(--rubric-dark); }
.page a:hover { color: var(--rubric); }
.page :focus-visible { outline: 3px solid var(--lapis); outline-offset: 2px; }
.page .drop .initial { float: left; width: 2.5em; height: 2.5em; margin: .12em .5em 0 0; display: grid; place-items: center; font-family: var(--caps); font-size: 1.5em; color: var(--gold-light); background: var(--lapis); border: 2px solid var(--rubric); box-shadow: inset 0 0 0 2px var(--gold); }
.page.center .pg, .pg.center { text-align: center; }
.page .orn { height: 1.6em; margin: 1.2em auto; width: 60%; background: linear-gradient(to right, transparent, var(--gold)), linear-gradient(to left, transparent, var(--gold)); background-size: 50% 1px; background-repeat: no-repeat; background-position: left center, right center; position: relative; }
.page .orn::after { content: ''; position: absolute; left: 50%; top: 50%; width: .8em; height: .8em; background: var(--rubric); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 .22em var(--paper), 0 0 0 .3em var(--gold); }

/* page numbers are drawn by script into data-n */
html.js .page[data-n]:not(.cover):not(.endpaper)::before { content: attr(data-n); position: absolute; bottom: 3.6cqw; left: 0; right: 0; text-align: center; font-family: var(--caps); font-size: .85em; color: var(--ink-faint); letter-spacing: .1em; z-index: 2; }

/* cover */
.page.cover { padding: 0; background: none; box-shadow: 0 14px 30px #000a; }
.leather { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 9cqw 8cqw 7cqw; background: var(--grain), radial-gradient(ellipse at 30% 20%, #6e2a1b 0%, transparent 60%), linear-gradient(135deg, #581f14, #2a0e09); border-radius: 3px 8px 8px 3px; color: var(--foil-2); text-align: center; overflow: hidden; }
body:not(.x) .page.cover { aspect-ratio: 1 / 1.35; }
html.js .page.cover { aspect-ratio: auto; }
.page img { height: auto; }
.leather::before { content: ''; position: absolute; inset: 3.5cqw; border: 2px solid var(--foil); box-shadow: inset 0 0 0 4px #00000040, inset 0 0 0 5px var(--foil); opacity: .85; pointer-events: none; }
.gilt i { position: absolute; width: 9cqw; height: 9cqw; border: 2px solid var(--foil); pointer-events: none; }
.gilt i:nth-child(1) { top: 3.5cqw; left: 3.5cqw; border-width: 0 2px 2px 0; border-radius: 0 0 6cqw 0; }
.gilt i:nth-child(2) { top: 3.5cqw; right: 3.5cqw; border-width: 0 0 2px 2px; border-radius: 0 0 0 6cqw; }
.gilt i:nth-child(3) { bottom: 3.5cqw; left: 3.5cqw; border-width: 2px 2px 0 0; border-radius: 0 6cqw 0 0; }
.gilt i:nth-child(4) { bottom: 3.5cqw; right: 3.5cqw; border-width: 2px 0 0 2px; border-radius: 6cqw 0 0 0; }
.cover-logo { width: 84%; height: auto; filter: drop-shadow(0 3px 5px #000b); position: relative; }
.cover-art { margin: 4cqw 0 0; width: 82%; border: 2px solid var(--foil); box-shadow: 0 0 0 4px #1a0805, 0 0 0 5px var(--foil), 0 8px 18px #000a; position: relative; }
.cover-art img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cover-tag { font-style: italic; font-size: 1.2em; margin: 5cqw 0 0 !important; color: var(--foil-2); text-shadow: 0 1px 0 #000; }
.open-book { display: none; margin-top: auto; font-family: var(--pixel); font-size: .95em; letter-spacing: .1em; text-transform: uppercase; color: var(--leather-2); background: linear-gradient(var(--foil-2), var(--foil)); border: 0; padding: .55em 1.4em; cursor: pointer; box-shadow: 0 0 0 2px #1a0805, 0 0 0 3px var(--foil); animation: nudge 1.6s ease-in-out infinite; position: relative; }
.open-book:hover { filter: brightness(1.12); }
html.js .open-book { display: block; }
@keyframes nudge { 50% { transform: translateX(4px); } }

/* endpapers: marbled */
.page.endpaper { background: var(--grain), repeating-radial-gradient(ellipse at 30% 40%, #7a2f21 0 6px, #a64a2c 6px 12px, #d8b266 12px 17px, #284a63 17px 22px, #7a2f21 22px 26px); background-blend-mode: normal; padding: 0; }
.page.endpaper::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #efe2c2f0 0 52%, transparent 78%); pointer-events: none; }
.page.endpaper .plate-ex { position: absolute; inset: 11% 9%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: auto; }
.plate-ex { color: var(--ink); }
.plate-ex .exl { font-family: var(--caps); letter-spacing: .4em; text-transform: uppercase; font-size: .8em; color: var(--rubric); margin: 0; }
.plate-ex h1 { font-size: 2.5em; margin: .35em 0 0; }
.plate-ex .lede { font-style: italic; margin-top: .4em; max-width: 30ch; }
.status { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em .9em; margin-top: 1.1em; padding: .5em .9em; border: 1px solid var(--rubric); background: #fff8e666; font-family: var(--pixel); font-size: .8em; letter-spacing: .04em; color: var(--rubric-dark); }
.status span { color: var(--rubric); text-transform: uppercase; }
.status b { font-weight: 400; color: var(--ink); }
.sigil { width: 6em; height: 6em; background: var(--rubric); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); position: relative; }
.sigil::after { content: ''; position: absolute; inset: 14%; background: var(--paper); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* contents */
.toc { list-style: none; padding: 0; margin: .6em 0 0; }
.toc a { display: flex; align-items: baseline; gap: .5em; padding: .14em 0; text-decoration: none; color: var(--ink); font-size: 1.04em; }
.toc a:hover span { color: var(--rubric); }
.toc i { flex: 1; border-bottom: 2px dotted #8d7a5655; transform: translateY(-.25em); }
.toc b { font-weight: 400; font-family: var(--caps); color: var(--rubric-dark); }
.hint { font-style: italic; color: var(--ink-faint); font-size: .86em; margin-top: 1.4em !important; }

/* the game */
.plateimg { margin: 0; border: 1px solid var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--rubric); }
.plateimg img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.plateimg figcaption { font-style: italic; font-size: .8em; padding: .3em .6em; color: var(--ink-soft); background: #ffffff55; }
.pillars { display: grid; gap: .6em; margin-top: 1.1em; }
.pillars > div { border-left: 3px solid var(--rubric); padding-left: .8em; }
.pillars p { margin-top: .15em; font-size: .93em; color: var(--ink-soft); }
.facts { margin-top: 1.6em !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: 1em; padding-top: .8em; border-top: 1px solid #a3311f44; font-family: var(--pixel); font-size: .74em; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.facts b { display: block; font-size: 2em; line-height: 1; color: var(--rubric-dark); font-weight: 400; }

/* map */
.mapfig { margin: .9em 0 0; border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold), 0 6px 14px #0005; cursor: zoom-in; background: #000; position: relative; }
.mapfig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mapfig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .3em .6em; font-size: .78em; color: var(--light); background: linear-gradient(transparent, #000b); font-style: italic; }
.regions { margin: 0; display: grid; gap: .36em; }
.regions > div { border-left: 3px solid var(--rubric); padding-left: .8em; }
.regions dt { font-family: var(--caps); color: var(--rubric-dark); font-size: 1.05em; }
.regions dd { margin: 0; font-size: .88em; color: var(--ink-soft); line-height: 1.3; }

/* bestiary */
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55em; margin-top: .9em; }
.plates.tall { margin-top: 0; }
.plate { font: inherit; text-align: center; cursor: pointer; padding: .3em .3em .4em; background: #fff8e655; border: 1px solid #8d7a5688; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px #a3311f66; color: var(--ink); transition: transform .15s, box-shadow .15s; display: grid; gap: .25em; }
.plate:hover, .plate:focus-visible { transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--rubric), 0 6px 10px #0004; }
.plate .art { display: block; overflow: hidden; height: 5.4em; background: radial-gradient(ellipse at 50% 90%, #3a2417 0%, #1d130c 70%); }
.plate .art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.plate b { font-family: var(--caps); font-weight: 400; font-size: .84em; line-height: 1.12; min-height: 2.25em; display: grid; align-items: center; }
.pips { display: inline-flex; gap: 3px; justify-content: center; }
.pips i { width: .6em; height: .6em; background: #8d7a5640; border: 1px solid #8d7a56aa; transform: rotate(45deg); }
.pips i.on { background: var(--rubric); border-color: var(--rubric-dark); box-shadow: 0 0 .4em #a3311f88; }

/* armoury */
.shelf { display: grid; gap: .75em; margin-top: .6em; }
.page .item { display: grid; grid-template-columns: 4em 1fr; gap: .8em; align-items: start; padding: .55em; background: #fff8e655; border: 1px solid #8d7a5666; transition: transform .15s, box-shadow .15s; }
.page .item:hover { transform: translateX(3px); box-shadow: -3px 0 0 var(--rubric); }
.page .item .slot { width: 4em; height: 4em; display: grid; place-items: center; background: #231810; border: 2px solid var(--gold); box-shadow: inset 0 0 0 1px #000; }
.page .item .slot img { width: 3.1em; height: 3.1em; object-fit: contain; }
.page .item h3 { margin: 0; }
.page .item p { margin: .15em 0 0; font-size: .88em; font-style: italic; color: var(--ink-soft); line-height: 1.35; }
.page .item .meta { font-family: var(--pixel); font-size: .72em; letter-spacing: .08em; text-transform: uppercase; color: var(--common); }
.r-rare { color: var(--rare) !important; text-shadow: 0 0 .6em #27457f33; }
.r-epic { color: var(--epic) !important; text-shadow: 0 0 .6em #7c3f9a44; }
.r-legendary { color: var(--legendary) !important; }

/* heroes */
.facegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6em; margin-top: 1em; }
.face-btn { font: inherit; padding: 0; cursor: pointer; background: #231810; border: 2px solid #8d7a56; color: var(--light); display: grid; transition: transform .15s, border-color .15s, box-shadow .15s; }
.face-btn img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.75) brightness(.8); transition: filter .2s; }
.face-btn span { font-family: var(--caps); font-size: .85em; padding: .15em 0 .2em; background: #17100a; }
.face-btn:hover img { filter: none; }
.face-btn[aria-pressed="true"] { border-color: var(--rubric); box-shadow: 0 0 0 2px var(--gold), 0 0 .9em #d9ac4577; transform: translateY(-3px); }
.face-btn[aria-pressed="true"] img { filter: none; }
.hsheet .sheet-top { display: grid; grid-template-columns: 7.2em 1fr; gap: .9em; align-items: start; }
.hsheet .sheet-top img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 0 0 3px #231810; }
.hsheet h3 { font-size: 1.6em; color: var(--rubric-dark); }
.hsheet .ep { margin: 0; font-style: italic; color: var(--ink-soft); }
.hsheet .bl { font-size: .92em; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 1em; }
.tabs button { font-family: var(--caps); font-size: .9em; padding: .35em 0; cursor: pointer; background: #00000012; border: 1px solid #8d7a56aa; border-bottom: 0; color: var(--ink-soft); }
.tabs button[aria-selected="true"] { background: var(--rubric-dark); color: var(--gold-light); border-color: var(--rubric-dark); }
.cdesc { margin-top: .8em; font-style: italic; }
.stats { margin: .8em 0 0; display: grid; gap: .35em; }
.stats > div { display: grid; grid-template-columns: 5.2em 1fr 1.5em; align-items: center; gap: .6em; font-family: var(--pixel); font-size: .88em; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.stats dt { margin: 0; }
.stats dd { margin: 0; display: flex; gap: 3px; }
.stats dd i { flex: 1; height: .85em; background: #8d7a5638; border: 1px solid #8d7a5688; transition: background .25s, box-shadow .25s; }
.stats dd i.on { background: linear-gradient(var(--rubric), var(--rubric-dark)); border-color: var(--rubric-dark); }
.stats span { text-align: right; color: var(--rubric-dark); }

/* scenes */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-top: .8em; }
.gallery .more { display: grid; place-items: center; text-align: center; padding: .5em; border: 2px dashed #8d7a56; font-style: italic; font-size: .8em; color: var(--ink-faint); aspect-ratio: 3 / 2; }
.page .shot { position: relative; padding: 0; cursor: zoom-in; border: 2px solid var(--ink); background: #000; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); aspect-ratio: 3 / 2; overflow: hidden; }
.page .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.page .shot:hover img { transform: scale(1.06); }
.page .shot span { position: absolute; left: 0; right: 0; bottom: 0; padding: .2em .4em; font-family: var(--caps); font-size: .66em; line-height: 1.15; color: #fff3d0; background: linear-gradient(transparent, #000c); text-align: left; }

/* dice */
.dice-wrap { display: grid; justify-items: center; gap: .6em; margin-top: .6em; }
.d20 { position: relative; width: 6.6em; height: 7.3em; padding: 0; background: none; border: 0; cursor: pointer; filter: drop-shadow(0 6px 6px #0006); transition: transform .2s; }
.d20:hover { transform: scale(1.05) rotate(-3deg); }
.d20 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.d20 polygon { fill: #8c2417; stroke: #2a0a05; stroke-width: 3; }
.d20 path { fill: none; stroke: #e8b56a88; stroke-width: 1.6; stroke-linejoin: round; }
.d20 span { position: absolute; inset: 0; display: grid; place-items: center; padding-top: .3em; font-family: var(--pixel); font-weight: 700; font-size: 2.5em; color: #fff3d0; text-shadow: 0 2px 0 #2a0a05; }
.d20.rolling { animation: tumble .5s linear infinite; }
.d20.nat20 polygon { fill: #b8861b; }
.d20.nat1 polygon { fill: #3a3a3a; }
@keyframes tumble { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(12deg) scale(1.08); } 50% { transform: rotate(0) scale(.95); } 75% { transform: rotate(-12deg) scale(1.08); } 100% { transform: rotate(0) scale(1); } }
.dice-ui { width: 100%; display: grid; gap: .5em; }
.chips { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; justify-content: center; }
.chips > span { font-family: var(--caps); font-size: .8em; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); width: 3.4em; text-align: right; }
.chips button { font-family: var(--pixel); font-size: .8em; padding: .3em .7em; cursor: pointer; background: #00000010; border: 1px solid #8d7a56; color: var(--ink-soft); }
.chips button[aria-pressed="true"] { background: var(--rubric-dark); color: var(--gold-light); border-color: var(--rubric-dark); }
.verdict { text-align: center; font-family: var(--caps); font-size: 1.15em; min-height: 2.4em; color: var(--ink); margin: .3em 0 0 !important; }
.verdict.win { color: var(--verdigris); }
.verdict.lose { color: var(--rubric); }
.roll-log { list-style: none; margin: .6em 0 0; padding: 0; display: grid; gap: 2px; font-family: var(--pixel); font-size: .78em; color: var(--ink-soft); }
.roll-log li { display: flex; justify-content: space-between; padding: .15em .6em; background: #00000009; border-left: 3px solid #8d7a56; }
.roll-log li.win { border-left-color: var(--verdigris); }
.roll-log li.lose { border-left-color: var(--rubric); }

/* progress */
.acts { list-style: none; margin: .7em 0 0; padding: 0; display: grid; gap: .7em; }
.acts li { display: grid; grid-template-columns: 2.8em 1fr; gap: .8em; align-items: start; }
.acts em { font-family: var(--pixel); font-style: normal; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.acts p { font-size: .92em; color: var(--ink-soft); margin-top: .2em; }
.seal { width: 2.7em; height: 2.7em; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 .22em #0003; }
.seal::after { content: ''; position: absolute; inset: 22%; border: 2px solid #ffffff55; border-radius: 50%; }
.acts .done .seal { background: radial-gradient(circle at 35% 30%, #5ea37a, #2b5a3e); }
.acts .done .seal::after { border: 0; inset: 0; background: linear-gradient(to bottom right, transparent 44%, #fff8 45% 55%, transparent 56%) 0 0 / 0 0; content: 'ok'; display: grid; place-items: center; font-family: var(--pixel); color: #fff; font-size: .9em; }
.acts .work .seal { background: radial-gradient(circle at 35% 30%, #d64a38, #7a1d12); animation: pulse 2.2s ease-in-out infinite; }
.acts .later .seal { background: none; box-shadow: none; border: 2px dashed #8d7a56; }
.acts .later .seal::after { border: 0; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 .22em #0003, 0 0 1.2em #d64a38aa; } }
.acts .later h3, .acts .later p { opacity: .6; }

/* chronicle */
.posts { list-style: none; margin: .4em 0 0; padding: 0; display: grid; gap: .5em; }
.posts a { display: block; padding: .55em .8em; text-decoration: none; background: #fff8e655; border-left: 3px solid var(--rubric); color: var(--ink); transition: transform .15s; }
.posts a:hover { transform: translateX(4px); background: #fff8e699; }
.posts time { font-family: var(--pixel); font-size: .72em; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.posts h3 { margin: .1em 0 0; color: var(--rubric-dark); }
.posts p { margin: .1em 0 0; font-size: .88em; color: var(--ink-soft); }
.more-link { text-align: right; }

/* forms (inside the book) */
.page form.scroll { gap: .65em; margin-top: .7em; }
.page label { font-size: .88em; }
.page input, .page select, .page textarea { font-size: 1em; padding: .4em .55em; }
.page textarea { min-height: 5.5em; }
.page .btn { font-size: 1em; justify-self: start; }
.page .mailline code { font-size: .88em; }
.page .form-note { min-height: 1.3em; font-size: .88em; }

/* colophon */
.page .mark { font-family: var(--caps); font-size: 1.7em; letter-spacing: .08em; color: var(--rubric-dark); }
.page .unwritten { font-style: italic; color: var(--ink-faint); margin-top: 38% !important; font-size: 1.1em; opacity: .75; }

/* controls under the book */
.controls { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 8px; z-index: 50; font-family: var(--pixel); font-size: 14px; }
.controls button { white-space: nowrap; font: inherit; color: var(--foil-2); background: #1d0f0acc; border: 1px solid #7b5a2a; padding: 6px 12px; cursor: pointer; letter-spacing: .06em; }
.controls button:hover:not([disabled]) { background: #3a1a10; color: #fff3d0; }
.controls button[disabled] { opacity: .35; cursor: default; }
.controls .where { color: var(--light-dim); min-width: 11ch; text-align: center; }
.ribbons { position: absolute; top: 5%; display: grid; gap: 5px; z-index: 150; }
html.js .book[data-state="end"] .ribbons { display: none; }
.ribbons button { font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #fff3d0; border: 0; padding: 7px 10px 7px 8px; cursor: pointer; text-align: left; width: 74px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8% 50%); background: var(--c, #8c2417); transform: translateX(-6px); transition: transform .15s, width .15s; box-shadow: 2px 2px 0 #0006; }
.ribbons button:hover, .ribbons button[aria-current="true"] { transform: translateX(0); width: 84px; }
.ribbons button[aria-current="true"] { filter: brightness(1.25); }
.corner { position: absolute; bottom: 0; width: 56px; height: 56px; z-index: 200; border: 0; padding: 0; background: none; cursor: pointer; }
.corner::after { content: ''; position: absolute; bottom: 0; width: 20px; height: 20px; transition: width .2s, height .2s; background: linear-gradient(var(--a), #a88a4e 48%, #f3e8cc 50%); box-shadow: -2px -2px 5px #0005; }
.corner.r { right: 0; --a: 135deg; }
.corner.r::after { right: 0; background: linear-gradient(135deg, #a88a4e 46%, #f7ecd0 50%, #d9c694); border-radius: 100% 0 0 0; }
.corner.l { left: 0; }
.corner.l::after { left: 0; background: linear-gradient(225deg, #a88a4e 46%, #f7ecd0 50%, #d9c694); border-radius: 0 100% 0 0; box-shadow: 2px -2px 5px #0005; }
.corner:hover::after, .corner:focus-visible::after { width: 44px; height: 44px; }
.corner[disabled] { display: none; }
html.js .book.single .corner.l, html.js .book.single .ribbons { display: none; }

/* dialogs */
dialog.foebox { padding: 0; border: 2px solid var(--gold); background: #17100a; color: var(--light); max-width: min(560px, 92vw); box-shadow: 0 0 0 4px #2a1d14, 0 30px 80px #000; }
dialog.foebox::backdrop { background: #000c; }
.foebox .fb { display: grid; grid-template-columns: 11em 1fr; gap: 18px; padding: 18px; align-items: end; }
.foebox .fb > img:first-child { background: radial-gradient(ellipse at 50% 90%, #3a2417, #1d130c 75%); width: 100%; aspect-ratio: 1; object-fit: contain; object-position: bottom; }
.foebox h3 { font-family: var(--caps); font-weight: 400; color: var(--gold-light); font-size: 1.5rem; margin: 0; }
.foebox .pips { margin-top: 6px; }
.foebox .vig { font-family: var(--pixel); font-size: 15px; color: var(--light-dim); margin: 6px 0 0; }
.foebox .lore { font-style: italic; margin: 10px 0 0; }
.foebox form { display: flex; justify-content: flex-end; padding: 6px 14px 12px; }
.foebox button { font: inherit; color: #fff3d0; background: #5a1a0f; border: 1px solid var(--gold); padding: 4px 14px; cursor: pointer; }

/* narrow screens: one page at a time */
@media (max-width: 860px) {
  .controls { gap: 5px; font-size: 12px; }
  .controls button { padding: 6px 8px; }
  .controls .where { min-width: 0; padding: 0 2px; }
  :root { --pw: min(calc(100vw - 20px), 560px); --ph: min(calc(100dvh - 142px), calc(var(--pw) * 1.5)); }
  .foebox .fb { grid-template-columns: 1fr; }
  .controls { bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { html.js .book, html.js .sheet, html.js .book * { transition: none !important; } .open-book, .d20.rolling, .acts .work .seal { animation: none !important; } }

/* ═══ Age: foxed paper, worn leather, brass ═══════════════════════════════ */
:root {
  --paper: #e8d6a6; --paper-2: #dcc58f; --paper-edge: #b8984f;
  /* large soft mottling, like paper that has lived in a damp room */
  --mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .52  0 0 0 0 .34  0 0 0 0 .12  .9 .9 0 0 -.68'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  /* foxing: small brown freckles */
  --fox: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.34' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .27  0 0 0 0 .08  0 0 0 9 -6.1'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  /* crazing in old leather */
  --crack: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.05 .045' numOctaves='3' seed='2'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .02  0 0 0 0 .01  1 0 0 0 0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .0 .75 .0 0 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  --scuff: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='9'/><feColorMatrix values='0 0 0 0 .70  0 0 0 0 .42  0 0 0 0 .25  0 0 0 1.7 -1.12'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  /* marbled endpapers: banded noise mapped to a handful of old inks */
  --marble: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='700'><filter id='b' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.004 .014' numOctaves='3' seed='5'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/><feComponentTransfer><feFuncR type='discrete' tableValues='.43 .78 .91 .17 .55 .80 .43 .91 .17'/><feFuncG type='discrete' tableValues='.16 .60 .85 .30 .29 .55 .16 .85 .30'/><feFuncB type='discrete' tableValues='.13 .27 .66 .35 .17 .27 .13 .66 .35'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
}

/* paper */
.page { background-color: #e5d2a0; background-image: var(--fox), var(--mottle), var(--grain), radial-gradient(ellipse at 50% 0%, #f4e5b8 0%, transparent 62%), linear-gradient(to bottom, transparent 60%, #8a5f2814); background-size: 360px 360px, 420px 420px, 160px 160px, auto, auto; text-shadow: 0 0 .5px #2a1d1455; }
.page .run { border-bottom-color: #8a4a2a55; }
.page .item, .plate, .posts a { background: #fff4d233; }
/* a couple of water rings and a thumb of grease, different on each leaf */
.page[data-n$="3"] { background-image: radial-gradient(circle at 78% 70%, transparent 0 52px, #8a5a2a1c 54px 60px, transparent 66px), var(--fox), var(--mottle), var(--grain), radial-gradient(ellipse at 50% 0%, #f4e5b8 0%, transparent 62%); }
.page[data-n$="6"] { background-image: radial-gradient(circle at 22% 84%, transparent 0 40px, #7a4a2422 42px 46px, transparent 52px), radial-gradient(ellipse at 90% 12%, #8a5a2a30 0, transparent 70px), var(--fox), var(--mottle), var(--grain), radial-gradient(ellipse at 50% 0%, #f4e5b8 0%, transparent 62%); }
.page[data-n$="9"] { background-image: radial-gradient(circle at 30% 30%, transparent 0 70px, #8a5a2a18 72px 78px, transparent 86px), radial-gradient(ellipse at 10% 95%, #6a3a1a33 0, transparent 90px), var(--fox), var(--mottle), var(--grain), radial-gradient(ellipse at 50% 0%, #f4e5b8 0%, transparent 62%); }
.page[data-n$="1"] { background-image: radial-gradient(ellipse at 96% 50%, #7a4a2438 0, transparent 110px), var(--fox), var(--mottle), var(--grain), radial-gradient(ellipse at 50% 0%, #f4e5b8 0%, transparent 62%); }
html.js .face.front { box-shadow: inset -1px 0 0 #fff4, inset 0 0 70px #7a4f1a66, inset -14px 0 30px #6a40154d, inset 0 -10px 24px #6a40153d; }
html.js .face.back { box-shadow: inset 1px 0 0 #fff4, inset 0 0 70px #7a4f1a66, inset 14px 0 30px #6a40154d, inset 0 -10px 24px #6a40153d; }
/* thumbed outer corners */
html.js .face.front::before, html.js .face.back::before { content: ''; position: absolute; bottom: 0; width: 15%; height: 11%; pointer-events: none; z-index: 3; }
html.js .face.front::before { right: 0; background: radial-gradient(ellipse at 100% 100%, #5a38136e, transparent 70%); }
html.js .face.back::before { left: 0; background: radial-gradient(ellipse at 0 100%, #5a38136e, transparent 70%); }

/* the page block: yellowed, uneven, a little sprinkled at the edge */
html.js .edge { background: repeating-linear-gradient(to bottom, #f0e2b8 0 1px, #cdb27a 1px 2px, #e0cc98 2px 3px, #b99a5e 3px 4px); box-shadow: 0 1px 0 #0008, inset 0 0 6px #5a3a1488; }
html.js .edge.r { background: repeating-linear-gradient(to bottom, #f0e2b8 0 1px, #cdb27a 1px 2px, #e0cc98 2px 3px, #b99a5e 3px 4px); }

/* endpapers */
.page.endpaper { background: var(--grain), var(--marble); background-size: 160px 160px, cover; background-color: #7a2f21; }
.page.endpaper::after { background: radial-gradient(ellipse at 50% 50%, #e7d4a2f2 0 50%, #e7d4a2aa 62%, transparent 82%), var(--mottle); background-size: auto, 420px 420px; }

/* the leather: dark, crazed, rubbed pale at the edges */
.leather { background-color: #4a1a10; background-image:
    radial-gradient(ellipse at 6% 4%, #c0805a99 0, transparent 14%), radial-gradient(ellipse at 96% 3%, #c0805a77 0, transparent 12%),
    radial-gradient(ellipse at 4% 97%, #c0805a88 0, transparent 13%), radial-gradient(ellipse at 97% 96%, #c0805a99 0, transparent 15%),
    var(--scuff), var(--crack), var(--grain),
    radial-gradient(ellipse at 38% 30%, #7a301c 0%, transparent 62%), linear-gradient(135deg, #5a2012, #2a0d07);
  background-size: auto, auto, auto, auto, 260px 260px, 300px 300px, 120px 120px, auto, auto;
  box-shadow: inset 0 0 0 1px #00000070, inset 0 0 40px #0009, inset 0 0 6px #d4986a66; }
.page.cover { box-shadow: 0 18px 34px #000b, 0 0 0 1px #1a0805; }
/* raised bands on the spine edge */
.leather::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7.5cqw; pointer-events: none; z-index: 0;
  background: linear-gradient(to right, #0000009a, #0000001a 70%, transparent),
    linear-gradient(to bottom, transparent 9%, #00000088 9% 9.6%, #e0a86a55 9.6% 10.3%, #00000066 10.3% 11%, transparent 11%, transparent 31%, #00000088 31% 31.6%, #e0a86a55 31.6% 32.3%, #00000066 32.3% 33%, transparent 33%, transparent 53%, #00000088 53% 53.6%, #e0a86a55 53.6% 54.3%, #00000066 54.3% 55%, transparent 55%, transparent 75%, #00000088 75% 75.6%, #e0a86a55 75.6% 76.3%, #00000066 76.3% 77%, transparent 77%, transparent 91%, #00000088 91% 91.6%, #e0a86a55 91.6% 92.3%, #00000066 92.3% 93%, transparent 93%); }
.leather::before { border-color: #c9962f; opacity: .8; box-shadow: inset 0 0 0 3px #00000050, inset 0 0 0 4px #c9962f99; inset: 4.5cqw 4.5cqw 4.5cqw 8.5cqw; outline: 1.5px dashed #d8b45e88; outline-offset: 2.6cqw; }
/* hand stitching just inside the frame */
.gilt { position: absolute; inset: 0; pointer-events: none; }
/* brass corner pieces */
.gilt i { position: absolute; width: 11cqw; height: 11cqw; border: 0 !important; border-radius: 0 !important; background: linear-gradient(135deg, #f6e08e 0%, #c9962f 38%, #7a5214 52%, #dcb04c 70%, #f1d27a 100%); filter: drop-shadow(0 1.5px 1.5px #000c); }
.gilt i::after { content: ''; position: absolute; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #8a5f16 70%); box-shadow: 0 0 0 .4cqw #4a2e0a; }
.gilt i:nth-child(1) { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 18% 18%, 0 100%); } .gilt i:nth-child(1)::after { top: 2.4cqw; left: 2.4cqw; }
.gilt i:nth-child(2) { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 18%); } .gilt i:nth-child(2)::after { top: 2.4cqw; right: 2.4cqw; }
.gilt i:nth-child(3) { bottom: 0; left: 0; clip-path: polygon(0 0, 18% 82%, 100% 100%, 0 100%); } .gilt i:nth-child(3)::after { bottom: 2.4cqw; left: 2.4cqw; }
.gilt i:nth-child(4) { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%, 82% 82%); } .gilt i:nth-child(4)::after { bottom: 2.4cqw; right: 2.4cqw; }
.cover-logo { margin-left: 4cqw; }
.cover-art { margin-left: 4cqw; width: 78%; border-color: #c9962f; filter: sepia(.25) saturate(.9) contrast(1.02); }
.cover-tag { margin-left: 4cqw; color: #e8c872; }
.open-book { margin-left: 4cqw; background: linear-gradient(#f1d27a, #b98a2a 55%, #8a6016); color: #2a0d07; text-shadow: 0 1px 0 #ffe9a8aa; }

/* the boards: the same hide, seen from the edge */
html.js .board { background-color: #4a1a10; background-image: var(--scuff), var(--crack), var(--grain), linear-gradient(135deg, #5a2012, #2a0d07); background-size: 260px 260px, 300px 300px, 120px 120px, auto; box-shadow: inset 0 0 0 2px #1e0905, inset 0 0 0 3px #b8844a55, inset 0 0 14px #000c; }


.plateimg img { aspect-ratio: 2 / 1; }
.pillars { gap: .45em; margin-top: .8em; }
.pillars p { font-size: .88em; line-height: 1.38; }
.facts { margin-top: 1.1em !important; padding-top: .6em; gap: .4em; font-size: .7em; }
.facts b { font-size: 1.6em; }
.page .drop { margin-top: .6em; }

.page p { margin-top: .55em; }
.page h2 { font-size: 1.95em; }
.page .run { margin-bottom: .8em; }
.page .rule { margin: .55em 0 .65em; }
.page .item { grid-template-columns: 3.4em 1fr; gap: .65em; padding: .4em .5em; }
.page .item .slot { width: 3.4em; height: 3.4em; }
.page .item .slot img { width: 2.6em; height: 2.6em; }
.page .item h3 { font-size: 1.05em; }
.page .item p { font-size: .84em; line-height: 1.28; }
.shelf { gap: .5em; }
.page form.scroll { gap: .4em; margin-top: .4em; }
.page label { font-size: .84em; gap: 2px; }
.page label small { font-size: .9em; }
.page input, .page select, .page textarea { padding: .3em .5em; }
.page textarea { min-height: 4em; }
.page .form-note { min-height: 1em; }
.page .btn { padding: .35em 1.2em; }
.toc a { padding: .1em 0; }
.hint { margin-top: .8em !important; }
.page .mailline { margin-top: .5em; }
.plate .art { height: 4.9em; }
.regions { gap: .3em; }
.acts { gap: .55em; }

/* sizes come from the page's own width (a container query unit only works on its children) */
.page > .pg, .page > .plate-ex, .page > .leather { font-size: clamp(10.5px, 3.1cqw, 20px); }

@media (max-width: 860px) { .page > .pg, .page > .plate-ex { font-size: clamp(12px, 3.5cqw, 17px); } }
.plate .art { height: 6.6em; } .plate b { font-size: .9em; }

/* ── the cast ──────────────────────────────────────────────────────────── */
.castgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em .6em; margin-top: 1em; }
.cast-btn { font: inherit; padding: .3em; cursor: pointer; display: grid; align-content: start; justify-items: center; text-align: center; background: transparent; border: 0; color: var(--ink); }
.cast-btn .frame { display: block; width: 100%; padding: .22em; background: linear-gradient(135deg, #e6c36a, #8a6422 55%, #d9ac45); box-shadow: 0 3px 8px #0006, inset 0 0 0 1px #3a2610; transition: transform .15s, box-shadow .15s; }
.cast-btn .frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border: 1px solid #2a1a0c; background: #231810; filter: sepia(.28) saturate(.85) contrast(1.02); transition: filter .2s; }
.cast-btn:hover .frame, .cast-btn:focus-visible .frame { transform: translateY(-3px); box-shadow: 0 7px 14px #0007, 0 0 .9em #d9ac4566, inset 0 0 0 1px #3a2610; }
.cast-btn:hover img, .cast-btn:focus-visible img { filter: none; }
.cast-btn b { font-family: var(--caps); font-weight: 400; font-size: .86em; margin-top: .45em; line-height: 1.1; }
.cast-btn i { font-size: .72em; color: var(--ink-soft); line-height: 1.15; }
.foebox .cimg { background: radial-gradient(ellipse at 50% 90%, #3a2417, #1d130c 75%); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border: 2px solid var(--gold); }
.castgrid.four { grid-template-columns: repeat(4, 1fr); gap: .8em .5em; }
.castgrid.four .cast-btn { padding: .15em; }
.castgrid.four .cast-btn b { font-size: .78em; }
.castgrid.four .cast-btn i { font-size: .66em; }
.foebox .fb > img.cimg { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }

/* the back cover: the book closes on it, mirroring the front */
.back-logo { width: 62%; }
.back-sigil { width: 5.4em; height: 5.4em; margin: auto 0; background: linear-gradient(135deg, var(--foil-2), var(--foil)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); position: relative; filter: drop-shadow(0 2px 3px #000b); }
.back-sigil::after { content: ''; position: absolute; inset: 13%; background: radial-gradient(ellipse at 40% 30%, #6e2a1b, #2a0e08); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.page.backcover .cover-tag { margin-top: 0 !important; margin-bottom: 4cqw !important; }

/* ═══ Book art: rendered paper, leather and ink ornaments ═══════════════════ */
.page:not(.cover):not(.endpaper) { background: #e9d3a0 url(../img/page-r.webp) center / 100% 100% no-repeat; text-shadow: none; }
.page.lp:not(.cover):not(.endpaper) { background-image: url(../img/page-l.webp); }
.page .pg { padding: 10cqw 13cqw 10cqw; }
html.js .page .pg { padding: 10cqw 13cqw 12cqw; }
html.js .face.front { box-shadow: inset -1px 0 0 #fff3; }
html.js .face.back { box-shadow: inset 1px 0 0 #fff3; }
html.js .face.front::before, html.js .face.back::before { display: none; }
.page[data-n]:not(.cover):not(.endpaper)::before { bottom: 3.9cqw; }
/* leather boards */
.leather { background: url(../img/cover-front.webp) center / 100% 100% no-repeat, #3a1209; padding: 15cqw 15cqw 14cqw 21cqw; border-radius: 2px; }
.page.backcover .leather { background-image: url(../img/cover-back.webp); padding: 15cqw 21cqw 14cqw 15cqw; }
.leather::before, .leather .gilt { display: none; }
.page.cover .cover-logo { width: 100%; }
.page.cover .cover-art { width: 100%; }
.back-logo { width: 78%; }
.back-seal { width: 30%; height: auto; margin: auto 0; filter: drop-shadow(0 3px 5px #000b); }
/* ink dividers */
.page .rule { height: 1.9em; margin: .2em auto .35em; background: url(../img/orn/div-a.webp) center / contain no-repeat; }
.page .rule::after { display: none; }
.page[data-id^="bestiary"] .rule { background-image: url(../img/orn/div-c.webp); }
.page[data-id^="armoury"] .rule { background-image: url(../img/orn/div-b.webp); }
/* the wax seal, and small still lifes */
.page .seal { display: block; width: 20cqw; height: auto; margin: 0 auto 3cqw; filter: drop-shadow(0 2px 3px #3a1d0e88); }
.page.endpaper .seal { width: 26cqw; margin-bottom: 4cqw; }
.still { display: flex; align-items: flex-end; justify-content: center; gap: 3cqw; pointer-events: none; }
.still img { display: block; height: auto; filter: drop-shadow(0 2px 2px #3a1d0e66); }
.s-contents { margin-top: 4cqw; }
.s-contents .o-key { width: 25cqw; transform: rotate(-6deg); }
.s-contents .o-dagger { width: 14cqw; transform: rotate(8deg); }
.s-colophon { margin-top: 8cqw; flex-wrap: nowrap; gap: 2cqw; }
.s-colophon .o-candle { width: 11cqw; } .s-colophon .o-goblet { width: 9cqw; } .s-colophon .o-quill { width: 19cqw; } .s-colophon .o-scroll { width: 22cqw; }

.shelf { gap: .5em; }
.page .item { padding: .4em .5em; gap: .65em; }
.page .item p { font-size: .84em; line-height: 1.3; }
@media (max-width: 860px) { .page .item { grid-template-columns: 3.2em 1fr; } .page .item .slot { width: 3.2em; height: 3.2em; } .page .item .slot img { width: 2.5em; height: 2.5em; } .page .item p { font-size: .8em; } }
@media (max-width: 860px) { html.js .page .pg { padding: 9.5cqw 11.5cqw 10cqw; } .page > .pg { font-size: clamp(11.5px, 3.3cqw, 16px); } .page .item p { font-size: .78em; } .shelf { gap: .4em; } }

/* the game's own painted die */
.d20 { width: 8.4em; height: 8.4em; filter: drop-shadow(0 8px 8px #0007); }
.d20 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.d20 span { padding-top: 1.1em; font-size: 2.3em; color: #ffe08a; text-shadow: 0 0 8px #ffb23a, 2px 0 0 #1a0605, -2px 0 0 #1a0605, 0 2px 0 #1a0605, 0 -2px 0 #1a0605, 2px 2px 0 #1a0605, -2px -2px 0 #1a0605, 2px -2px 0 #1a0605, -2px 2px 0 #1a0605; }
.d20.rolling { animation: hop .22s ease-in-out infinite alternate; }
@keyframes hop { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-.5em) rotate(7deg); } }
.d20.landed { animation: land .35s ease-out; }
@keyframes land { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.d20.nat20 { filter: drop-shadow(0 0 14px #ffc94a) drop-shadow(0 8px 8px #0007); }
.d20.nat1 img { filter: grayscale(.85) brightness(.7); }
/* inside covers: their own rendered pages */
.page.endpaper[data-id="endpaper"] { background: url(../img/endpaper-front.webp) center / 100% 100% no-repeat; background-blend-mode: normal; }
.page.endpaper[data-id="endpaper2"] { background: url(../img/endpaper-back.webp) center / 100% 100% no-repeat; background-blend-mode: normal; }
.page.endpaper::after { display: none; }
.page.endpaper .plate-ex { position: absolute; inset: 0; padding: 36cqw 17cqw 20cqw; justify-content: flex-start; overflow: hidden; }
.page.endpaper[data-id="endpaper"] .plate-ex { padding-top: 33cqw; justify-content: center; padding-bottom: 20cqw; }
.page.endpaper[data-id="endpaper"] .exl { position: absolute; top: 15.4cqw; left: 0; right: 0; font-size: .66em; letter-spacing: .2em; margin: 0; }
.page.endpaper[data-id="endpaper2"] .plate-ex { padding-top: 54cqw; }
.page.endpaper[data-id="endpaper2"] .seal { position: absolute; left: 50%; top: 70.6%; width: 23cqw; margin: 0; transform: translate(-50%, -50%); }
.page.endpaper[data-id="endpaper"] .orn { display: none; }
/* the number sits on the face of the die, as in the game */
.d20 span { padding: 12% 0 0; font-size: 2.8em; }

/* legibility: darker, crisp small text */
:root { --ink-soft: #4a3724; --ink-faint: #5b4630; }
.page .fine, .hint, .page .run, .page .unwritten { color: #4f3a25; opacity: 1; }
.page .unwritten { opacity: 1; }
html.js .page[data-n]:not(.cover):not(.endpaper)::before { color: #4f3a25; }
html.js .page[data-n]:not(.cover):not(.endpaper)::before { color: #3a2816 !important; font-weight: 700; bottom: 4.6cqw; }
.page.endpaper[data-id="endpaper"] .exl { display: none; }