/* Bethlehem317 theme: "Codex" (mockup B, chosen by the owner on 2026-11-02).
   The parchment scroll becomes the page: every page is a tome of chapters with framed screenshot
   "plates", next to a stone sidebar that always offers the download.
   Artwork by the original site's artist (stone nav, logo, scroll, buttons, dungeon footer).
   Breakpoints: 980px (sidebar moves above the tome) and 820px (phone). */

:root {
  --bg: #0c0a08;
  --gold: #f0b93a;
  --gold-hi: #ffe08a;
  --ink: #2b1b0b;
  --rust: #8a3b10;
  --text: #e9e1d2;
  --muted: #b3a690;
  --display: "Cinzel", "Spectral SC", Georgia, serif;
  --smallcaps: "Spectral SC", "Cinzel", Georgia, serif;
  --serif: "Alegreya", Georgia, serif;
  --body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 19px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .01em; }
p { margin: 0 0 1em; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: #000; color: #fff; padding: 8px 14px; }

/* ---------- Top bar ---------- */
.topbar { background: #050403; font-size: 15px; color: var(--muted); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.topbar__count { margin: 0; }
.topbar__count b { color: var(--gold); }
.topbar__count .live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #43d16b; box-shadow: 0 0 8px #43d16b; margin-right: 8px; vertical-align: 1px; }
.topbar ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.topbar a { color: #d8ccb6; text-decoration: none; }
.topbar a:hover, .topbar a[aria-current], .topbar__hot a { color: var(--gold); }

/* ---------- Stone nav with the logo breaking out of it ---------- */
.stone { position: relative; z-index: 20; background: url(/core/images/nav.png) repeat-x center / auto 100%; box-shadow: 0 10px 30px #000a; border-block: 1px solid #000; }
.stone__in { position: relative; height: 92px; display: grid; grid-template-columns: 1fr 340px 1fr; grid-template-rows: 100%; align-items: center; }
.stone__links { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; }
.stone__links a { font: 400 19px/1 var(--smallcaps); letter-spacing: .08em; color: #d9d2c4; text-decoration: none; text-shadow: 0 2px 2px #000; padding: 10px 4px; }
.stone__links a:hover, .stone__links a[aria-current] { color: var(--gold-hi); }
/* The row stays the bar's height; the logo is centred on the bar and breaks out above and below it. */
.stone__home { justify-self: center; align-self: center; position: relative; top: 0; }
.stone__logo { display: block; width: 340px; filter: drop-shadow(0 12px 18px #000c); }
.stone__burger, .stone__play { display: none !important; }
.drawer { position: absolute; left: 0; right: 0; top: 100%; background: url(/core/images/noise.png), linear-gradient(#24211d, #141210); border-bottom: 3px solid #000; box-shadow: 0 20px 40px #000c; }
.drawer[hidden] { display: none; }
.drawer ul { list-style: none; margin: 0; padding: 40px 20px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.drawer a { display: block; padding: 13px 4px; font: 400 19px/1.2 var(--smallcaps); letter-spacing: .06em; color: #e2d8c4; text-decoration: none; border-bottom: 1px solid #ffffff14; }
.drawer a[aria-current] { color: var(--gold-hi); }

/* ---------- Gold and iron buttons ---------- */
.btn-gold, .btn-iron {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: 700 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center;
  padding: 18px 34px; min-height: 58px; color: #fff; text-shadow: 0 2px 3px #0009;
  border: 3px solid #1a1a1a; outline: 2px solid #6d6a63; outline-offset: -6px;
  box-shadow: 0 0 0 2px #8f8b82, 0 8px 22px #000b, inset 0 0 18px #0007;
  transition: filter .15s, transform .15s;
}
.btn-gold { background: url(/core/images/btn.png) center / cover, linear-gradient(#f6c650, #b8790f); }
.btn-iron { background: linear-gradient(#5b5650, #2b2824 55%, #3a3631); }
.btn-gold:hover, .btn-iron:hover { color: #fff; filter: brightness(1.15); transform: translateY(-1px); }
.btn-gold:focus-visible, .btn-iron:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.btn-gold small, .btn-iron small { display: block; font: 600 13px/1.2 var(--body); letter-spacing: .02em; text-transform: none; opacity: .92; }
.tome .btn-gold, .tome .btn-iron { color: #fff; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 26px 0 8px; }
.art-btn { display: inline-block; }
.art-btn img { width: 300px; filter: drop-shadow(0 10px 20px #000); }

/* ---------- Hero ---------- */
.hero { position: relative; margin-top: -92px; padding: 220px 0 90px; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, var(--bg) 75%), linear-gradient(#0c0a0866, #0c0a0833 50%, var(--bg)), url(/core/images/background.jpg) center 25% / cover; }
.hero h1 { font-size: clamp(40px, 5.2vw, 74px); font-weight: 900; max-width: 15em; margin: 0 auto 20px; color: #f1e7d3; text-shadow: 0 4px 24px #000; }
.hero p { font-size: 23px; max-width: 34em; margin: 0 auto 30px; color: #f1e7d3; text-shadow: 0 2px 8px #000; }
.hero p a { color: var(--gold-hi); }
.hero__cta { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.hero--page { padding: 180px 0 70px; }
.hero--page h1 { font-size: clamp(36px, 4.4vw, 62px); }
.hero--page p { font-size: 21px; margin-bottom: 0; }
.eyebrow { font: 700 14px/1.3 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: block; }

/* ---------- The parchment scroll (Royal Minigun offer) ---------- */
.scroll { width: min(1180px, 100% - 20px); margin: -20px auto 90px; aspect-ratio: 1327 / 283; display: grid; grid-template-columns: 31% 1fr; align-items: center;
  color: var(--ink); background: url(img/media.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 18px 30px #000c); }
.scroll__play { justify-self: center; width: 100px; height: 100px; background: url(/core/images/play-video.png) center / contain no-repeat; }
.scroll h2 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 900; color: #23170a; margin: 0 0 6px; text-transform: uppercase; }
.scroll p { font: 500 18px/1.45 var(--serif); margin: 0; padding-right: 60px; }

/* ---------- Book: the tome and the stone sidebar ---------- */
.book { width: min(1280px, 100% - 40px); margin: 0 auto 120px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; }
.hero--page + .book { margin-top: 10px; }

.tome { position: relative; padding: 70px 80px 80px; color: var(--ink); font: 400 21px/1.65 var(--serif);
  background: var(--grain), radial-gradient(ellipse at 50% 30%, #f3e7c6, #e0cb98 65%, #c9a96e); box-shadow: inset 0 0 110px #6d3e10b0, inset 0 0 18px #4a2a0a, 0 30px 60px #000; }
.tome::before, .tome::after { content: ""; position: absolute; left: -22px; right: -22px; height: 30px; border-radius: 15px;
  background: linear-gradient(#5c3a1c, #2f1c0b 50%, #6a4524); box-shadow: 0 6px 14px #000c; }
.tome::before { top: -15px; } .tome::after { bottom: -15px; }
.tome a { color: #7a2e0b; font-weight: 700; }
.tome a:hover { color: #a23d0e; }
.tome :focus-visible { outline-color: #7a2e0b; }
.tome b, .tome strong { color: #24160a; }
.tome ul, .tome ol { padding-left: 1.3em; margin: 0 0 1em; }
.tome li { margin-bottom: .35em; }
.tome ul li::marker { content: "✦  "; color: var(--rust); }
.tome ol li::marker { font: 700 .9em var(--display); color: var(--rust); }
.tome .lede { font-size: 23px; line-height: 1.55; }
.chapter { margin-bottom: 70px; }
.chapter:last-child { margin-bottom: 0; }
.chapter::after { content: ""; display: table; clear: both; }
.chapter__num { font: 900 18px/1.2 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--rust); display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.chapter__num::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, #8a3b1088, transparent); }
.tome h2 { font-size: clamp(30px, 3.2vw, 46px); color: #24160a; margin-bottom: 22px; }
.tome h3 { font-size: 24px; color: #3a220c; margin: 30px 0 10px; }
.drop::first-letter { float: left; font: 900 92px/0.8 "Cinzel Decorative", "Cinzel", serif; color: #8a2a0a; padding: 10px 16px 2px 0; text-shadow: 2px 2px 0 #e8c46a; }
.drop { display: flow-root; }
.tome > .lede { margin-bottom: 64px; }
.answer { font-size: 24px; line-height: 1.55; }
.tome code { font: 700 .82em/1 ui-monospace, Menlo, Consolas, monospace; background: var(--ink); color: #ffd982; padding: 3px 7px; border-radius: 3px; white-space: nowrap; }
.list2 { columns: 2; column-gap: 40px; }
.list2 li { break-inside: avoid; }
.note { float: right; width: 250px; margin: 6px -150px 16px 30px; padding: 18px 20px; font: italic 400 18px/1.45 var(--serif); color: #3d270f;
  background: #f6ebcc; border: 1px solid #b98a4a; box-shadow: 0 10px 20px #0005; transform: rotate(1.5deg); }
.note b { font: 700 13px/1 var(--display); font-style: normal; letter-spacing: .15em; text-transform: uppercase; color: var(--rust); display: block; margin-bottom: 8px; }
.tome .more { font: 700 17px/1.4 var(--display); letter-spacing: .04em; margin-top: 18px; }
.tome .more a::after { content: " →"; }
.end { text-align: center; padding-top: 30px; border-top: 2px solid #8a3b1033; }
.end h2 { margin-bottom: 8px; }
.end .art-btn { margin-top: 10px; }

/* Plates: screenshots in the metal frame */
.frame { margin: 0; position: relative; background: #0b0b0b; padding: 6px; border: 8px solid transparent;
  border-image: linear-gradient(140deg, #d6d6d6, #4c4c4c 22%, #a8a8a8 45%, #2f2f2f 70%, #c8c8c8) 1; box-shadow: 0 18px 40px #000c, inset 0 0 0 1px #000; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.plate { margin: 34px -30px; }
.plate .frame { aspect-ratio: 16 / 9; }
.cap { font: italic 400 18px/1.4 var(--serif); color: #4a2f14; text-align: center; margin-top: 14px; }
.cap b { font: 700 14px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--rust); margin-right: 8px; font-style: normal; }
.plates2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 30px 0; align-items: start; }
.plates2 .plate { margin: 0; }
.plates2 .frame, .plates2 .slot { aspect-ratio: 4 / 3; margin: 0; }
/* Dashed slots: screenshots and videos from the Discord archive go here (BET-11). */
.slot { aspect-ratio: 5 / 2; margin: 30px 0; border: 2px dashed #8a3b1088; display: grid; place-items: center; text-align: center; font: italic 17px/1.4 var(--serif); color: #6b4520; padding: 14px; background: #ffffff22; }

/* Click-to-load YouTube video inside a plate */
.yt { position: relative; width: 100%; height: 100%; background: #000 center / cover no-repeat; }
.yt button { position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; background: #0003 url(/core/images/play-video.png) center / 84px no-repeat; }
.yt button:hover { background-color: #0001; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Wax-seal timeline */
.seals { list-style: none; padding: 0 !important; margin: 26px 0 0 33px !important; border-left: 3px solid #8a3b1055; }
.seals > li { position: relative; padding: 0 0 30px 52px; margin: 0; }
.seals > li::marker { content: none; }
.seals > li:last-child { padding-bottom: 0; }
.seals h3 { position: absolute; left: -33px; top: -6px; width: 62px; height: 62px; margin: 0; display: grid; place-items: center;
  font: 900 15px/1 var(--display); color: #f6d9a8; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c33a22, #7a150b 70%);
  box-shadow: 0 4px 10px #0006, inset 0 0 0 4px #9a2614, inset 0 0 0 6px #5a0d06; }
.seals ul { list-style: none; padding: 0; margin: 0; min-height: 56px; }
.seals ul li { margin: 0 0 4px; }
.seals ul li::marker { content: none; }
.seals a { color: var(--ink); font-weight: 400; text-decoration: none; }
.seals a:hover { color: #7a2e0b; text-decoration: underline; }
.seals em { font-style: normal; font-weight: 700; color: var(--rust); margin-right: 6px; }

/* Three steps to start */
.steps { counter-reset: s; list-style: none; padding: 0 !important; margin: 24px 0 0 !important; display: grid; gap: 22px; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 0 70px; margin: 0; }
.steps > li::marker { content: none; }
.steps > li::before { content: counter(s, upper-roman); position: absolute; left: 0; top: 0; width: 50px; height: 50px; display: grid; place-items: center;
  font: 900 18px/1 var(--display); color: var(--gold-hi); background: radial-gradient(circle at 35% 30%, #4a4540, #1b1916 70%); border-radius: 50%; box-shadow: 0 0 0 2px #6e6961, 0 4px 10px #0006; }
.steps h3 { margin: 6px 0 6px; }

/* Commands table */
.cmds { width: 100%; border-collapse: collapse; font-size: 19px; }
.cmds th, .cmds td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #8a5a2a44; vertical-align: top; }
.cmds th { white-space: nowrap; font-weight: 400; }

/* FAQ on parchment */
.faq details { border-bottom: 1px solid #8a5a2a55; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font: 700 21px/1.3 var(--display); color: #24160a; margin: 0; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font: 400 30px/1 var(--display); color: var(--rust); }
.faq details[open] summary::after { content: "–"; }
.faq__a { color: #3a2610; padding-bottom: 8px; }

/* News posts on parchment */
.post__head { display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; align-items: center; margin-bottom: 16px; }
.post__avatar { grid-row: span 2; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #8a5a2a; background: #c9a96e; }
.tome .post__title { margin: 0; font-size: clamp(24px, 2.4vw, 32px); }
.tome .post__title a { color: #24160a; text-decoration: none; }
.tome .post__title a:hover { text-decoration: underline; }
.post__meta { margin: 0; font: italic 17px/1.3 var(--serif); color: #5a3a18; }
.tome .post__meta a { font-weight: 400; color: #5a3a18; }
.post__meta span[style] { color: inherit !important; }
.post__summary { margin-bottom: 8px; }
.post__body { overflow-wrap: anywhere; }
.post__body img { margin: 16px auto; border: 6px solid #2b1b0b; box-shadow: 0 10px 24px #0006; }
.post__body iframe, .post__body video { max-width: 100%; }
.tome .post__body h1, .tome .post__body h2, .tome .post__body h3, .tome .post__body h4 { font-size: 24px; color: #3a220c; margin: 26px 0 10px; }
.post__body span[style*="color"], .post__body font[color] { color: inherit !important; }
.post__body span[style*="background"] { background: none !important; }
.post__body p[style*="text-align"] { text-align: left !important; }
.post + .post { margin-top: 44px; padding-top: 44px; border-top: 2px solid #8a3b1033; }

/* ---------- Stone sidebar ---------- */
.side { position: sticky; top: 20px; display: grid; gap: 22px; }
.side__play img { width: 100%; filter: drop-shadow(0 10px 20px #000); }
.slab { background: url(/core/images/noise.png), linear-gradient(#34302b, #1b1916); border: 3px solid #0c0c0c; box-shadow: 0 0 0 2px #6e6961, 0 20px 40px #000b; }
.slab h2 { margin: 0; padding: 16px 20px; font: 700 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  background: url(/core/images/nav.png) center / cover; border-bottom: 2px solid #000; text-shadow: 0 2px 2px #000; }
.slab__body { padding: 18px 20px 20px; }
.toc { list-style: none; padding: 0; margin: 0; counter-reset: c; }
.toc a { display: flex; gap: 12px; padding: 9px 0; color: #e2d8c4; text-decoration: none; border-bottom: 1px solid #ffffff12; font-size: 17px; line-height: 1.35; }
.toc a::before { counter-increment: c; content: counter(c, upper-roman); flex: 0 0 38px; color: var(--gold); font: 700 15px/1.5 var(--display); }
.toc a:hover { color: var(--gold-hi); }
.facts { margin: 0; display: grid; gap: 10px; font-size: 16px; }
.facts div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #ffffff12; padding-bottom: 8px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; color: #f0e6d2; font-weight: 700; }
.dc { text-align: center; }
.dc b { display: block; font: 900 56px/1 var(--display); color: var(--gold-hi); }
.dc span { color: var(--muted); font-size: 16px; display: block; margin-bottom: 14px; }
.dc p { color: #e2d8c4; font-size: 17px; }
.dc .btn-gold { width: 100%; }
.mobilebar { display: none; }

/* ---------- Dungeon footer ---------- */
.dungeon { position: relative; background: #070605 url(/core/images/footer-rpt.png) repeat-x top; }
.dungeon::before { content: ""; display: block; height: 385px; background: url(img/footer-mid.webp) no-repeat center top; }
.dungeon__in { position: absolute; inset: 70px 0 auto; }
.dungeon__grid { display: grid; grid-template-columns: 300px repeat(3, 1fr); gap: 40px; align-items: start; }
.dungeon__logo { width: 240px; }
.dungeon h2 { font: 700 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 6px 0 14px; }
.dungeon a { display: block; color: #d6ccb9; text-decoration: none; padding: 4px 0; font-size: 17px; text-shadow: 0 1px 3px #000; }
.dungeon a:hover { color: var(--gold-hi); }
.dungeon__legal { position: relative; text-align: center; color: #8a7f6c; font-size: 14px; padding: 18px 20px 26px; margin: 0; background: #070605; }

/* ---------- Tablet: sidebar moves above the tome ---------- */
@media (max-width: 980px) {
  .book { grid-template-columns: 1fr; gap: 40px; }
  .side { position: static; order: -1; grid-template-columns: 1fr 1fr; }
  .side__play, .side .slab--toc { display: none; }
  .note { float: none; width: auto; margin: 20px 0; transform: none; }
  .tome::before, .tome::after { left: -16px; right: -16px; }
}

/* ---------- Small laptops and tablets: shrink the nav so all 8 links fit ---------- */
@media (max-width: 1180px) and (min-width: 821px) {
  .stone__in { grid-template-columns: 1fr 240px 1fr; width: calc(100% - 24px); }
  .stone__logo { width: 240px; }
  .stone__links a { font-size: 16px; letter-spacing: .04em; padding-inline: 2px; }
}
@media (max-width: 980px) and (min-width: 821px) {
  .stone__in { grid-template-columns: 1fr 200px 1fr; }
  .stone__logo { width: 200px; }
  .stone__links a { font-size: 15px; letter-spacing: .03em; }
}

/* ---------- Phone ---------- */
@media (max-width: 820px) {
  body { font-size: 17px; padding-bottom: 70px; }
  .topbar { display: none; }
  .stone__in { height: 64px; grid-template-columns: 56px 1fr 84px; width: calc(100% - 24px); }
  .stone__links { display: none; }
  .stone__home { top: 10px; }
  .stone__logo { width: 190px; }
  .stone__burger { display: grid !important; place-items: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
  .stone__burger span, .stone__burger span::before, .stone__burger span::after { content: ""; display: block; width: 24px; height: 3px; background: #ddd2bc; position: relative; box-shadow: 0 1px 2px #000; }
  .stone__burger span::before { position: absolute; top: -8px; } .stone__burger span::after { position: absolute; top: 8px; }
  .stone__burger[aria-expanded="true"] span { background: transparent; box-shadow: none; }
  .stone__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .stone__burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
  .stone__play { display: inline-flex !important; justify-self: end; padding: 10px 14px; min-height: 0; font-size: 14px; outline: 0; }
  .btn-gold, .btn-iron { padding: 16px 22px; font-size: 16px; }

  .hero { margin-top: -64px; padding: 150px 0 50px; background-position: 25% 0; }
  .hero p { font-size: 18px; }
  .hero--page { padding: 156px 0 40px; }
  .hero--page p { font-size: 18px; }
  .art-btn img { width: 240px; }

  .scroll { aspect-ratio: auto; display: block; background: var(--grain), linear-gradient(#e6d6ad, #cdb787); padding: 22px; margin: 0 auto 60px; box-shadow: inset 0 0 40px #7a4f1c88; width: calc(100% - 24px); }
  .scroll__play { float: left; width: 60px; height: 60px; margin: 0 12px 6px 0; }
  .scroll p { padding: 0; font-size: 16px; }

  .book { width: calc(100% - 24px); margin-bottom: 80px; }
  .side { grid-template-columns: 1fr; }
  .side .slab--facts { display: none; }
  .tome { padding: 44px 22px 50px; font-size: 18px; }
  .tome::before, .tome::after { left: -8px; right: -8px; height: 22px; }
  .tome .lede { font-size: 19px; }
  .tome h3 { font-size: 21px; }
  .chapter { margin-bottom: 54px; }
  .chapter__num { font-size: 15px; letter-spacing: .24em; }
  .answer { font-size: 19px; }
  .drop::first-letter { font-size: 64px; }
  .plate { margin: 24px -10px; }
  .plates2 { grid-template-columns: 1fr; }
  .list2 { columns: 1; }
  .btn-row > * { flex: 1 1 100%; }
  .cmds { font-size: 16px; }
  .cmds th, .cmds td { padding: 8px 6px; }
  .cmds th { white-space: normal; }
  .faq summary h3 { font-size: 18px; }
  .post__head { grid-template-columns: 48px 1fr; }
  .post__avatar { width: 48px; height: 48px; }

  .mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #0c0a08f0; border-top: 1px solid #ffffff22; }
  .mobilebar a { flex: 1; min-height: 48px; padding: 10px; font-size: 15px; }

  .dungeon::before { height: 240px; background-size: auto 240px; }
  .dungeon__in { position: relative; inset: auto; padding: 0 0 10px; margin-top: -170px; }
  .dungeon__grid { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .dungeon__grid > :first-child { grid-column: 1 / -1; justify-self: center; }
  .dungeon__logo { width: 200px; }
}

/* ---------- Updates from Discord #updates (BET-38) ---------- */
.post__head--plain { grid-template-columns: 1fr; }
.page-update .post__head { grid-template-columns: 48px 1fr; margin-bottom: 26px; }
.page-update .post__avatar { width: 48px; height: 48px; grid-row: auto; }
.post__body hr { border: 0; height: 2px; margin: 24px 0; background: linear-gradient(90deg, transparent, #8a3b1066, transparent); }
.post__body blockquote { margin: 0 0 1em; padding: 4px 0 4px 18px; border-left: 4px solid #8a3b1066; font-style: italic; }
.post__body pre { margin: 0 0 1em; padding: 14px 16px; background: var(--ink); color: #ffd982; border-radius: 4px; overflow-x: auto; font: 700 15px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.post__body pre code { background: none; padding: 0; white-space: pre; }
.post__body code { white-space: normal; overflow-wrap: anywhere; }
.post__body .sub { font-size: .85em; color: #5a3a18; }
.post__body .spoiler { background: var(--ink); color: var(--ink); border-radius: 3px; padding: 0 3px; cursor: pointer; }
.post__body .spoiler:hover, .post__body .spoiler:focus { color: #ffd982; }
.post__body img.emoji { display: inline-block; width: auto; height: 1.15em; margin: 0 .1em; border: 0; box-shadow: none; vertical-align: -.2em; }
.tome .post__body h3 { font-size: 23px; margin: 30px 0 10px; }
.tome .post__body h4 { font-size: 20px; margin: 22px 0 8px; }
.post__body > :first-child { margin-top: 0; }
.post__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0 8px; }
.post__media--one { grid-template-columns: minmax(0, 1fr); }
.post__media .frame { display: grid; place-items: center; }
.post__media img, .post__media video { display: block; width: auto; max-width: 100%; height: auto; max-height: 640px; }
.post__media video { width: 100%; }
.post__links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.tome .more a.ext::after { content: " ↗"; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin: 0 0 70px; padding-top: 30px; border-top: 2px solid #8a3b1033; }
.pager__at { font: 700 16px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.tome .pager .btn-iron { color: #fff; }
.peeks { list-style: none; padding: 0 !important; margin: 26px 0 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.peeks li { margin: 0; }
.tome .peeks li::marker { content: none; }
.peeks figure { margin: 0; }
.peeks .frame { display: block; aspect-ratio: 4 / 3; padding: 4px; border-width: 6px; }
.peeks img, .peeks video { width: 100%; height: 100%; object-fit: cover; display: block; }
.peeks figcaption { font: italic 16px/1.35 var(--serif); color: #4a2f14; margin-top: 10px; }
.peeks figcaption img.emoji { height: 1.1em; width: auto; vertical-align: -.2em; }
.neighbours { list-style: none; padding: 0 !important; }
.tome .neighbours li::marker { content: none; }
.neighbours span { display: inline-block; min-width: 4.5em; font: 700 14px/1 var(--display); letter-spacing: .15em; text-transform: uppercase; color: var(--rust); }
@media (max-width: 980px) {
  .peeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .post__media { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .peeks { gap: 14px; }
  .peeks figcaption { font-size: 14px; }
  .post__body pre { font-size: 13px; }
  .tome .post__body h3 { font-size: 20px; }
  .pager { gap: 12px; }
}