@charset "UTF-8";

/* ==========================================================================
   Christopher's Corner
   ========================================================================== */

/* Theme: "the field journal" - Gravity Falls Journal 3 / Indiana Jones.
   The desktop site is a St.PageFlip journal: cream paper, dark umber
   ink, leather binding, faint stars on the desk. Each section reads as a
   two-page spread; a red-and-gold ribbon bookmark (roll it down, it lies in
   the page, gets buried by turns) and paper index tabs navigate the book.
   The accent names (--ember/--brass) are historical - the whole site
   references them, so they stay. */
:root {
  --paper:   #241a10;   /* the leather desk behind the journal */
  --sheet:   #ece1c6;   /* dirty cream paper */
  --sheet-glass: rgba(236, 225, 198, 0.94);
  --panel:   #e2d5b4;   /* card / taped-note paper */
  --panel-2: #d5c6a0;
  --ink:     #2b2216;   /* dark umber ink */
  --ink-2:   #51452e;
  --ink-3:   #7d6d4e;
  --ember:   #8a5a14;   /* PRIMARY - browned gold ink (links, rules) */
  --ember-2: #a97a22;   /* hover */
  --brass:   #2e6e55;   /* verdigris green */
  --red:     #a33327;   /* red pencil */
  --blue:    #2f5f96;   /* blue ink */
  --leaf:    #517f36;
  --violet:  #6f56b8;
  --line:    #c6b68c;
  --line-2:  #d9cca9;
  --good:    #2e6e55;
  --sheet-shadow: rgba(0, 0, 0, 0.55);
  --glow-a:  rgba(140, 100, 40, 0.22);
  --glow-b:  rgba(60, 110, 90, 0.14);
  --star:    rgba(255, 250, 236, 0.9);
  --bookmark:   #7e1f18;   /* the red bookmark ribbon */
  --bookmark-2: #5c130e;
  --gilt:       #e8c878;   /* bookmark gold filigree */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", Consolas, monospace;
  --hand:  "Segoe Script", "Bradley Hand", "Segoe Print", cursive;

  --col: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Lamplight version: the paper dims to old-lamp warmth, the desk goes
       near-black. Still cream paper + dark ink - that IS the journal look. */
    --paper:   #120c07;
    --sheet:   #d8cba7;
    --sheet-glass: rgba(216, 203, 167, 0.94);
    --panel:   #ccbd94;
    --panel-2: #bfae83;
    --ink:     #251c10;
    --ink-2:   #4a3e28;
    --ink-3:   #6e5f42;
    --ember:   #7c5210;
    --ember-2: #99671d;
    --brass:   #275f4a;
    --red:     #99291e;
    --blue:    #2b5788;
    --leaf:    #48722f;
    --violet:  #63499f;
    --line:    #b0a077;
    --line-2:  #c3b48d;
    --good:    #275f4a;
    --sheet-shadow: rgba(0, 0, 0, 0.8);
    --glow-a:  rgba(140, 100, 40, 0.2);
    --glow-b:  rgba(60, 110, 90, 0.12);
    --star:    rgba(255, 250, 236, 0.95);
    --bookmark:   #741c15;
    --bookmark-2: #52100b;
    --gilt:       #dfbd6b;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; }

html {
  -webkit-text-size-adjust: 100%;
  /* The tome floats in SPACE: a near-black sky full of pin-prick stars with
     the faintest breath of nebula colour. The leather lives only on the book
     itself (.book-box::before) - never on the sky. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='23' cy='41' r='1' opacity='.8'/%3E%3Ccircle cx='97' cy='188' r='.7' opacity='.5'/%3E%3Ccircle cx='151' cy='72' r='1.2' opacity='.9'/%3E%3Ccircle cx='210' cy='139' r='.6' opacity='.4'/%3E%3Ccircle cx='268' cy='34' r='.9' opacity='.65'/%3E%3Ccircle cx='334' cy='103' r='.6' opacity='.45'/%3E%3Ccircle cx='391' cy='57' r='1.1' opacity='.85'/%3E%3Ccircle cx='459' cy='150' r='.7' opacity='.5'/%3E%3Ccircle cx='58' cy='276' r='.8' opacity='.6'/%3E%3Ccircle cx='140' cy='331' r='1.1' opacity='.75'/%3E%3Ccircle cx='229' cy='247' r='.6' opacity='.4'/%3E%3Ccircle cx='305' cy='314' r='.9' opacity='.7'/%3E%3Ccircle cx='377' cy='259' r='.6' opacity='.45'/%3E%3Ccircle cx='452' cy='329' r='1.2' opacity='.9'/%3E%3Ccircle cx='36' cy='412' r='.9' opacity='.6'/%3E%3Ccircle cx='118' cy='470' r='.6' opacity='.4'/%3E%3Ccircle cx='197' cy='401' r='1' opacity='.8'/%3E%3Ccircle cx='284' cy='463' r='.7' opacity='.5'/%3E%3Ccircle cx='356' cy='417' r='.9' opacity='.65'/%3E%3Ccircle cx='434' cy='476' r='.6' opacity='.4'/%3E%3Ccircle cx='489' cy='237' r='.8' opacity='.55'/%3E%3Ccircle cx='72' cy='118' r='.5' opacity='.35'/%3E%3Ccircle cx='250' cy='186' r='.5' opacity='.3'/%3E%3Ccircle cx='413' cy='192' r='.5' opacity='.35'/%3E%3Ccircle cx='166' cy='233' r='.5' opacity='.3'/%3E%3Ccircle cx='320' cy='377' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(90% 70% at 18% 12%, rgba(66, 74, 128, 0.14), transparent 60%),
    radial-gradient(80% 60% at 84% 78%, rgba(42, 96, 82, 0.10), transparent 60%),
    radial-gradient(140% 110% at 50% 42%, #100e18 0%, #0a0910 55%, #040406 100%);
  background-attachment: fixed;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  min-height: 100vh;
  background: transparent;
}

/* ---- Starfield: two drifting parallax layers behind the tome ------------- */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%23fff8e6'%3E%3Ccircle cx='20' cy='30' r='1'/%3E%3Ccircle cx='60' cy='80' r='.7' opacity='.6'/%3E%3Ccircle cx='110' cy='40' r='1.3'/%3E%3Ccircle cx='150' cy='110' r='.6' opacity='.5'/%3E%3Ccircle cx='200' cy='60' r='1'/%3E%3Ccircle cx='245' cy='30' r='.7' opacity='.6'/%3E%3Ccircle cx='30' cy='150' r='.8' opacity='.7'/%3E%3Ccircle cx='90' cy='180' r='1.2'/%3E%3Ccircle cx='140' cy='210' r='.7' opacity='.55'/%3E%3Ccircle cx='195' cy='155' r='.9' opacity='.75'/%3E%3Ccircle cx='235' cy='195' r='1'/%3E%3Ccircle cx='50' cy='245' r='.7' opacity='.6'/%3E%3Ccircle cx='115' cy='260' r='1'/%3E%3Ccircle cx='175' cy='245' r='.6' opacity='.5'/%3E%3Ccircle cx='215' cy='265' r='.8' opacity='.7'/%3E%3Ccircle cx='255' cy='125' r='.9'/%3E%3Ccircle cx='15' cy='205' r='.7' opacity='.6'/%3E%3Ccircle cx='130' cy='20' r='.6' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}
body::before {   /* near layer - gentle twinkle, kept faint over the leather */
  z-index: -2;
  opacity: 0.5;
  background-size: 300px 300px;
  animation: driftA 240s linear infinite, twinkle 7s ease-in-out infinite alternate;
}
body::after {    /* far layer - dimmer, denser, slower, opposite drift */
  z-index: -3;
  opacity: 0.28;
  background-size: 165px 165px;
  animation: driftB 420s linear infinite;
}

@keyframes driftA {
  from { background-position: 0 0; }
  to   { background-position: 600px 360px; }
}
@keyframes driftB {
  from { background-position: 0 0; }
  to   { background-position: -420px 300px; }
}
@keyframes twinkle {
  from { opacity: 0.3; }
  to   { opacity: 0.6; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* ---- The book (St.PageFlip) -------------------------------------------------
   The site is one paired-spread flipbook between hard leather boards.
   Interactive content rests over prepainted DOM page faces that carry the
   same ink through every turn. */
body.book-mode {
  overflow: hidden;
  height: 100dvh;
  /* The turn canvas includes a transparent tail below the visible paper.
     Buried leaves can expose their real tabs there without a floating copy. */
  --bookw: min(90vw, 1480px);
  --tab-overhang: 38px;
  --bookh: min(calc(100dvh - 74px), 1000px);
  --turnh: calc(var(--bookh) + var(--tab-overhang));
  --booktop: calc((100dvh - var(--turnh)) / 2);
  /* the book never slides: the spine is always the centre of the screen */
  --spinex: 50vw;
}
body.book-mode.book-single {
  --spinex: calc(50vw - var(--bookw) / 2);
}
body.book-mode .shell { display: none; }

.book-cover {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  /* the overlay itself must not eat clicks - the rolled bookmark lives
     behind/above the book edge and has to stay pressable */
  pointer-events: none;
}
.book-box { position: relative; pointer-events: auto; }
/* the leather binding behind the paper block */
.book-box::before {
  content: "";
  pointer-events: none;   /* it reaches above the book edge - never eat the roll's clicks */
  position: absolute;
  top: -18px;
  left: -16px;
  right: -16px;
  height: calc(var(--bookh) + 30px);
  border-radius: 10px 10px 12px 12px;   /* gentle corners: the square paper
                                           block must sit fully inside them */
  background:
    /* the spine ridge: leather pinched down the centre where the boards hinge */
    linear-gradient(90deg,
      transparent calc(50% - 30px),
      rgba(0, 0, 0, 0.22) calc(50% - 8px),
      rgba(0, 0, 0, 0.42) 50%,
      rgba(0, 0, 0, 0.22) calc(50% + 8px),
      transparent calc(50% + 30px)),
    radial-gradient(120% 100% at 50% 0%, rgba(150, 105, 50, 0.20), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='5'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #3f2d19, #261b0f 60%, #180f08);
  box-shadow:
    /* floats in space: deep drop shadow plus a whisper of warm rim light */
    0 60px 130px -36px rgba(0, 0, 0, 0.95),
    0 0 90px -10px rgba(140, 100, 45, 0.22),
    0 1px 0 1px rgba(90, 62, 28, 0.8),          /* visible board edge */
    inset 0 1px 0 rgba(255, 230, 180, 0.14),
    inset 0 0 0 3px rgba(0, 0, 0, 0.4),
    inset 0 0 0 5px rgba(212, 170, 90, 0.20),   /* embossed gilt frame */
    inset 0 0 0 6px rgba(0, 0, 0, 0.25),
    inset 0 0 44px rgba(0, 0, 0, 0.55);
}
/* The fold's depth is painted INTO each page (see .tpage.odd/.even::after),
   so it rides the paper during turns instead of floating above it. */
/* the closed block of pages beneath the open spread: stacked sheet edges
   peeking out along the outer sides and the bottom */
.book-box::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -7px;
  right: -7px;
  height: calc(var(--bookh) + 13px);
  border-radius: 5px;   /* hugs the square paper block - the big rounding
                           belongs to the leather cover behind it */
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg,  var(--panel-2) 0 1px, var(--line-2) 1px 2.5px) left / 7px 100% no-repeat,
    repeating-linear-gradient(270deg, var(--panel-2) 0 1px, var(--line-2) 1px 2.5px) right / 7px 100% no-repeat,
    repeating-linear-gradient(0deg,   var(--panel-2) 0 1px, var(--line-2) 1px 2.5px) top / 100% 5px no-repeat,
    repeating-linear-gradient(180deg, var(--panel-2) 0 1px, var(--line-2) 1px 2.5px) bottom / 100% 9px no-repeat;
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.85);
}

.tpage {
  background: transparent;
  box-shadow: none;
}
.tpage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--bookh);
  pointer-events: none;
  background: var(--sheet);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.11'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.11' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='90' filter='url(%23f)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(26% 15% at 78% 8%,  rgba(150, 110, 50, 0.09), transparent 70%),
    radial-gradient(22% 12% at 16% 52%, rgba(140, 100, 45, 0.08), transparent 70%),
    radial-gradient(24% 13% at 60% 88%, rgba(150, 105, 45, 0.09), transparent 70%),
    radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(125, 92, 40, 0.13) 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tpage-inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 40px 36px;
}
body.book-mode:not(.book-single) .tpage-inner {
  inset: auto;
  top: 0;
  left: 0;
  width: calc(var(--bookw) / 2);
  height: var(--turnh);
  overflow: visible;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.tpage-inner::-webkit-scrollbar { width: 8px; }
.tpage-inner::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
/* the written content sits centred on its page like a set text block
   (the C&C ledger keeps its own full-width layout) */
.tpage-inner > .mast,
.tpage-inner > #banner,
.tpage-inner > main:not(.cc-root),
.tpage-inner > footer.foot {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

/* The C&C ledger IS its page: no letterhead above it, no second sheet under
   it - the ledger writes directly on the book's paper, edge to edge.
   (.cc-host is set by book.js on the page that carries cc.html, so the
   letterhead stays hidden even while the ledger is lifted onto the spread.) */
body.book-mode .tpage-inner.cc-host { padding: 10px 16px 16px; }
body.book-mode .tpage-inner.cc-host > .mast,
body.book-mode .tpage-inner.cc-host > #banner,
body.book-mode .tpage-inner.cc-host > footer.foot { display: none; }
body.book-mode .tpage-inner > main.cc-root {
  max-width: none;
  margin: 0;
  padding: 0;
}
body.book-mode .tpage-inner .cc-sheet {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
body.book-mode .tpage-inner .cc-sheet::before { display: none; }

/* the overlay that carries EVERY page's reading view across BOTH pages of
   the open book - z 60 so text sits above the gutter shading (z 50), which
   still shows through between the columns */
.cc-spread {
  display: none;
  position: absolute;
  /* End above the visible paper edge; the transparent tail starts below. */
  inset: 8px 18px calc(var(--tab-overhang) + 14px);
  z-index: 60;
  flex-direction: column;
  overflow: hidden;
}
/* pinned letterhead: identical at the top of every page, never scrolls */
.spread-top { flex: none; padding: 2px 42px 0; }
/* only the middle scrolls */
.spread-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* NO visible scrollbar: real books don't have one, and its track ran
     straight through the thumb-index notches on the fore-edge. Wheel and
     touch still scroll. Bonus: with no gutter the overlay and the prints
     are the same width with nothing to compensate. */
  scrollbar-width: none;
}
.spread-scroll::-webkit-scrollbar { display: none; }
/* pinned footer: always at the book's bottom edge, even on short pages */
.spread-bottom { flex: none; padding: 0 42px; }
.spread-bottom footer.foot { padding: 10px 0 8px; }
/* NO fade-in: the overlay pixel-matches the prints beneath it, so an
   instant swap is invisible - a fade makes the whole page flash blank */
body.spread-on .cc-spread { display: flex; }
/* the ledger's fold-out paper hangs out over the book's edge like real
   paper: the ledger manages its own scrolling (#cc-page), so its spread can
   drop every overflow clip - .spread-scroll's overflow-x:hidden was
   beheading the unfolded trifold at the page edge */
.cc-spread:has(main.cc-root),
.cc-spread:has(main.cc-root) .spread-scroll { overflow: visible; }
@keyframes spreadIn { from { opacity: 0; } }

/* folio page numbers at the top outer corners, like a printed book */
.folio {
  position: absolute;
  top: 12px;
  z-index: 61;
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.15s ease;
}
.folio.left  { left: 28px; }
.folio.right { right: 28px; }
body.turning .folio { opacity: 0; }
body.book-single .folio.left { display: none; }

/* every section flows as two page-columns: down the left page, then the
   right, letterhead and footer running across the top and bottom */
.spread-flow {
  columns: 2;
  column-gap: 116px;
  column-fill: balance;
  padding: 4px 42px 20px;
}
.spread-flow > #banner,
.spread-flow > main.cc-root { column-span: all; }
/* the ledger is its own page: no letterhead or footer around it */
.cc-spread:has(main.cc-root) .spread-top,
.cc-spread:has(main.cc-root) .spread-bottom,
.cc-spread:has(main.cc-root) .spread-flow > #banner { display: none; }
.spread-flow > main:not(.cc-root) { max-width: none; margin: 0; }
.spread-flow .hubcard,
.spread-flow .panel,
.spread-flow .board,
.spread-flow .reply,
.spread-flow .post,
.spread-flow .list li { break-inside: avoid; }
.cc-spread main.cc-root {
  max-width: none; margin: 0; padding: 0;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
/* the ledger fills the book: the flex chain hands the book's height down to
   the split, so each page scrolls its own column of rows */
.cc-spread:has(main.cc-root) .spread-scroll { display: flex; flex-direction: column; }
.cc-spread:has(main.cc-root) .spread-flow {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  columns: unset;              /* the .cc-split IS the two pages */
}
/* the split's gutter must sit exactly on the spine, like the book's columns */
.cc-spread .cc-split { column-gap: 116px; }
/* TWO real pages, permanently: LEFT = header + tabs + open section,
   RIGHT = the guest list (structural .cc-split, not CSS columns) */
.cc-spread .cc-sheet {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  flex: 1; min-height: 0;
  display: flex;
  flex-direction: column;
}
.cc-spread .cc-sheet::before { display: none; }
/* charts and party columns flow page by page instead of squeezing */
.cc-spread .cc-charts { display: block; }
.cc-spread .cc-chart { break-inside: avoid; margin-bottom: 18px; }
/* the party board keeps its TWO side-by-side columns (Claire's | Chris's)
   in the book too - same layout at rest and mid-flip */
.cc-spread .cc-pcard { break-inside: avoid; }
.cc-spread .cc-tile { break-inside: avoid; }
.cc-spread .cc-locked, .cc-spread .cc-loading { break-inside: avoid; }
/* no entrance animations inside the book - the turn IS the transition.
   The page engine re-attaches faces as they come into range, restarting CSS
   animation on them; every animated element must be silenced here or its
   text visibly jumps in right after the flip. */
body.book-mode main,
body.book-mode main h1,
body.book-mode .hub .hubcard,
body.book-mode .tpage-inner .standfirst { animation: none !important; }
/* Promote the actual St.PageFlip layers only while paper is moving. */
body.turning #book .stf__item { will-change: transform, clip-path; }
body.turning #book .stf__outerShadow,
body.turning #book .stf__innerShadow,
body.turning #book .stf__hardShadow,
body.turning #book .stf__hardInnerShadow { will-change: transform, opacity; }

/* shading that leans each page into the gutter */
.tpage::after {
  content: "";
  position: absolute;
  top: 0;
  height: var(--bookh);
  width: 44px;
  pointer-events: none;
}
.tpage.odd::after  { left: 0;  width: 60px; background: linear-gradient(90deg,  rgba(45, 30, 10, 0.32), rgba(60, 40, 15, 0.10) 55%, transparent); }
.tpage.even::after { right: 0; width: 60px; background: linear-gradient(270deg, rgba(45, 30, 10, 0.32), rgba(60, 40, 15, 0.10) 55%, transparent); }

/* leather covers, front and back */
.tpage.tcover::before, .tpage.tback::before {
  background: linear-gradient(135deg, #4a3520, #2b1d10 55%, #1a1109);
  box-shadow: inset 0 0 0 1px #6b4f2c, inset 0 0 70px rgba(0, 0, 0, 0.55);
}
.tcover .tpage-inner, .tback .tpage-inner {
  display: grid;
  place-items: center;
  height: var(--bookh) !important;
  overflow: hidden !important;
}
.cover-frame {
  border: 2px solid var(--gilt);
  outline: 1px dotted rgba(232, 200, 120, 0.5);
  outline-offset: 5px;
  padding: 46px 34px;
  text-align: center;
  color: var(--gilt);
  max-width: 80%;
}
.cover-frame h1 { font-size: 1.7rem; margin: 0 0 10px; color: var(--gilt); }
.cover-frame p {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  margin: 0 0 18px;
  opacity: 0.85;
}
.cover-frame .orn { font-size: 1.2rem; }

/* ---- the printed spread halves --------------------------------------------
   Each section is PRINTED onto its pair of pages: verso shows the left half
   of the two-column spread, recto the right half - so a turning leaf carries
   real text on both faces. The live nodes render only in single mode (or in
   the reading overlay); on the pages of the open book, the print is king. */
.spread-win {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--bookw) / 2);
  height: var(--turnh);
  overflow: visible;
  pointer-events: none;
}
/* the print is the overlay's TWIN: same flex column (pinned letterhead,
   clipped scrolling flow, pinned footer), same visible-paper inset, same
   paddings - the live/printed swap never moves a pixel */
.spread-win .pwrap {
  position: absolute;
  top: 8px;
  left: 18px;
  width: calc(var(--bookw) - 36px);
  height: calc(var(--bookh) - 22px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.spread-win.right .pwrap { left: calc(18px - (var(--bookw) / 2)); }
.pwrap .pmast { flex: none; padding: 2px 42px 0; }
.pwrap .pclip { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pwrap .pflow {
  columns: 2;
  column-gap: 116px;
  column-fill: balance;
  padding: 4px 42px 20px;
}
.pwrap .pfoot { flex: none; padding: 0 42px; }
.pwrap .pfoot footer.foot { padding: 10px 0 8px; }
.pwrap .pflow > .pbanner,
.pwrap .pflow > main.cc-root { column-span: all; }
.pwrap .pflow > main:not(.cc-root) { max-width: none; margin: 0; }
/* same column-break rules as the overlay, or cards land in different spots */
.pwrap .pflow .hubcard,
.pwrap .pflow .panel,
.pwrap .pflow .board,
.pwrap .pflow .reply,
.pwrap .pflow .post,
.pwrap .pflow .list li { break-inside: avoid; }
/* the folio printed on the paper - twin of the external .folio */
.pfolio {
  position: absolute;
  top: 12px;
  z-index: 3;
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  pointer-events: none;
}
.spread-win.left  .pfolio { left: 28px; }
.spread-win.right .pfolio { right: 28px; }
/* in the double-page book, pages show only their prints; the live nodes
   stay for the overlay and for single-page mode */
body.book-mode:not(.book-single)
  .tpage-inner > :not(.spread-win):not(.cover-frame):not(.filler-orn) { display: none; }
body.book-single .spread-win { display: none; }

/* THE SECTION'S BOTTOM TAB is the real control and part of this page face.
   PageFlip transforms this exact element with the leaf—there is no detached
   stand-in to hide, reposition, or reveal after a turn. */
.page-tab {
  position: absolute;
  top: calc(var(--bookh) - 5px);
  width: 10%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 2px;
  color: rgba(255, 246, 228, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.14)),
    var(--rb);
  border: 0;
  border-radius: 3px 3px 8px 8px;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 5px 9px -4px rgba(0, 0, 0, 0.7);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.page-tab:hover { filter: brightness(1.2); }
.page-tab:focus-visible { outline: 2px solid rgba(255, 244, 204, 0.95); outline-offset: -3px; }
body.turning .page-tab { pointer-events: none; }
/* During a fold both visible pieces remain the native front/back prints. */
.page-tab.tab-turn-moving,
.page-tab.tab-turn-stationary { pointer-events: none !important; }
/* Keep the faces laid out under the live spread. Their printed ink hides at
   rest, while the real page tab remains visible in its reserved paper strip. */
body.spread-on .spread-win .pwrap,
body.spread-on .spread-win .pfolio { opacity: 0; }

/* no text selection while a leaf is folding - dragging a corner across the
   page must never start highlighting words */
body.turning, body.turning * { user-select: none !important; }

/* while a leaf is in the air the open nav ribbon dives UNDER the book -
   the turning page buries it, it never floats over the fold */
body.turning .ribbon-clip,
body.turning.nav-open .bkroll { z-index: 3; }

/* the book closed on a cover board (front or back): no folios, the outer
   flip strip hides, and the board invites a click to open */
body.at-cover .folio, body.at-back .folio { opacity: 0; }
body.at-cover .flip-zone.left { display: none; }
body.at-back .flip-zone.right { display: none; }
body.at-cover .tpage.tcover, body.at-back .tpage.tback { cursor: pointer; }

/* invisible grab pads over the four page corners: they sit ABOVE the reading
   overlay so a corner is always grabbable, even where overlay text lies
   underneath (book.js forwards plain clicks through to controls below) */
.corner-pad {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 70;
  cursor: grab;
}
.corner-pad::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.corner-pad:hover::after { opacity: .42; }
.corner-pad.tl::after { top: 7px; left: 7px; border-top: 1px solid var(--ink-3); border-left: 1px solid var(--ink-3); }
.corner-pad.tr::after { top: 7px; right: 7px; border-top: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3); }
.corner-pad.bl::after { bottom: 7px; left: 7px; border-bottom: 1px solid var(--ink-3); border-left: 1px solid var(--ink-3); }
.corner-pad.br::after { bottom: 7px; right: 7px; border-bottom: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3); }
.corner-pad:active { cursor: grabbing; }
.corner-pad.tl { top: 0; left: 0; }
.corner-pad.tr { top: 0; right: 0; }
.corner-pad.bl { bottom: var(--tab-overhang); left: 0; }
.corner-pad.br { bottom: var(--tab-overhang); right: 0; }
body.book-single .corner-pad { display: none; }   /* touch uses swipe */

/* the blank verso pages: a big faded sign, nothing else */
.tpage-inner.tfiller { display: grid; place-items: center; }
.filler-orn {
  font-size: clamp(80px, 14vw, 150px);
  color: var(--ink);
  opacity: 0.05;
  user-select: none;
}

/* PageFlip's canvas sits above the surrounding desk. Buried page faces are
   not duplicated: their real DOM leaf is clipped down to its own tab. The
   selector stops matching as soon as PageFlip activates that leaf, which
   releases the whole page into the fold with the same tab still attached. */
#book { z-index: 5; }
#book .tab-face.tab-peek:not(.--left):not(.--right) {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  width: calc(var(--bookw) / 2) !important;
  height: var(--turnh) !important;
  z-index: 2 !important;
  pointer-events: none;
  /* PageFlip rewrites the page's inline style while it works. This crop is
     based only on inherited book geometry, so the engine cannot erase it. */
  clip-path: inset(calc(var(--bookh) - 8px) 0 0 0) !important;
}
#book .tab-face.tab-peek.odd:not(.--left):not(.--right) { left: 50% !important; }
#book .tab-face.tab-peek.even:not(.--left):not(.--right) { left: 0 !important; }
#book .tab-face.tab-peek:not(.--left):not(.--right) .page-tab { pointer-events: auto; }

/* narrow click strips on the outer page margins, BETWEEN the grab corners -
   they never cover turn.js's corner zones, so you can always grab and hold
   the page from any corner like a real magazine. */
.flip-zone {
  position: absolute;
  top: 130px;
  bottom: 130px;
  width: 26px;
  z-index: 55;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 1.1rem;
  user-select: none;
}
.flip-zone.left  { left: 0; }
.flip-zone.right { right: 0; }
.flip-zone:hover { color: rgba(120, 95, 50, 0.55); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, main, main > h1, .mast::before,
  .hub .hubcard, .hubcard::before { animation: none !important; }
}

/* ------------------------------------------------------------------ chrome */

/* The content is a page of the tome - aged dark paper, lifted off the starfield
   with a dark "spine" gradient down the left edge and a deep drop shadow. */
.shell {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 56px;
  background: var(--sheet);
  /* Dirty paper: grain noise over faded foxing blotches and edge-yellowing. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E"),
    radial-gradient(26% 15% at 82% 6%,  rgba(150, 110, 50, 0.10), transparent 70%),
    radial-gradient(20% 11% at 12% 38%, rgba(140, 100, 45, 0.08), transparent 70%),
    radial-gradient(30% 16% at 68% 74%, rgba(150, 105, 45, 0.09), transparent 70%),
    radial-gradient(16% 9%  at 30% 92%, rgba(130, 95, 40, 0.10), transparent 70%),
    radial-gradient(130% 100% at 50% 50%, transparent 62%, rgba(125, 92, 40, 0.14) 100%);
  border-radius: 3px 9px 9px 3px;
  box-shadow:
    0 0 0 1px var(--line),
    inset 16px 0 26px -16px rgba(60, 40, 15, 0.5),
    inset -1px 0 0 rgba(255, 240, 210, 0.25),
    0 34px 100px -34px var(--sheet-shadow);
}

/* The book's leather cover peeking out along the spine (left) and the stack
   of page edges along the fore-edge (right). */
.shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14px;
  top: -8px;
  bottom: -8px;
  width: 28px;
  border-radius: 9px 0 0 9px;
  background: linear-gradient(90deg, #0a070f, #2a1f12 75%);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.85);
}
.shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -9px;
  top: 5px;
  bottom: 5px;
  width: 12px;
  border-radius: 0 5px 5px 0;
  background: repeating-linear-gradient(to bottom,
    var(--panel-2) 0 1px,
    var(--line-2) 1px 3px);
  box-shadow: 6px 14px 34px -14px rgba(0, 0, 0, 0.8);
}

.mast {
  padding-top: 30px;
  padding-bottom: 20px;
  position: relative;
  border-bottom: 2px solid var(--line);
  margin-bottom: 4px;
}
.mast-row { position: relative; z-index: 1; }

/* A lintel of ancient signs across the head of the page - Hebrew letters
   interleaved with planetary and zodiac marks, breathing a faint gold glow. */
.mast::before {
  content: "א ☉︎ ב ☽︎ ג ☿︎ ד ♀︎ ה ♂︎ ו ♃︎ ז ♄︎ ח ♅︎ ט ♆︎ י ✦︎ כ ♈︎ ל ♉︎ מ ♊︎ נ ♋︎ ס ♌︎ ע ♍︎ פ ♎︎ צ ♏︎ ק ♐︎ ר ♑︎ ש ♒︎ ת ♓︎";
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.76rem;
  letter-spacing: 0.5em;
  color: var(--ink-3);
  padding: 0 0 13px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  animation: glyphglow 9s ease-in-out infinite alternate;
}
@keyframes glyphglow {
  from { opacity: 0.4;  text-shadow: 0 0 5px rgba(120, 95, 50, 0.15); }
  to   { opacity: 0.62; text-shadow: 0 0 12px rgba(120, 95, 50, 0.35); }
}

.mast-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

.wordmark small {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 9px;
}

/* COMPACT letterhead inside the book: the page is for content, not chrome.
   Class-scoped, so the overlay and the prints shrink identically. The full
   letterhead stays for the standalone / no-JS pages. */
body.book-mode .mast {
  padding-top: 5px;
  padding-bottom: 7px;
  margin-bottom: 2px;
}
body.book-mode .mast::before {
  font-size: 0.6rem;
  letter-spacing: 0.42em;
  padding: 0 0 6px;
  margin-bottom: 7px;
}
body.book-mode .wordmark { font-size: 1.12rem; }
body.book-mode .wordmark small { display: none; }   /* subtitle: gone in the book */
body.book-mode .mast-row { align-items: center; }
body.book-mode .acct { font-size: 0.66rem; gap: 6px; }
body.book-mode .acct .who { display: none; }        /* the badge says who you are */
body.book-mode .acct .badge { font-size: 0.58rem; padding: 2px 7px; }
body.book-mode .acct .ghost,
body.book-mode .acct .btn { font-size: 0.6rem; padding: 4px 10px; }

/* Navigation = ONE long red-and-gold bookmark ribbon (Paperblanks style) that
   drops down over the page from a hamburger clasp at the top right. book.js
   injects the clasp and toggles body.nav-open; without JS the ribbon just
   hangs open. */
/* The unrolled ribbon: a flat sheet hanging from under the clasp down the
   page. The reveal is a HEIGHT animation (material unwinding), never a
   scale - the sheet's content stays true-size while the roll below it
   (.bkroll) travels down, leaving flat ribbon behind. */
/* The clip window the ribbon unrolls inside. book.js wraps the nav in it and
   parks it on <body>. The reveal is ONE linear height animation, and the roll
   below rides the SAME linear clock over the same distance - sheet and roll
   move as a single piece of fabric, no drift, no seam. */
.ribbon-clip {
  position: fixed;
  top: 0;
  left: max(18px, calc(50% - 520px + 30px));
  z-index: 100;
  width: 148px;
  height: calc(100dvh - 40px);
  overflow: hidden;
  pointer-events: none;
}
body.nav-anim .ribbon-clip { transition: height 0.95s linear; }
body.book-nav:not(.nav-open) .ribbon-clip { height: 0; }

nav.tabs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100dvh - 40px);   /* fixed length: only the clip window moves */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 58px 10px 52px;
  background:
    /* gilt stitching down both edges */
    repeating-linear-gradient(0deg,
      rgba(212, 170, 90, 0.55) 0 5px, transparent 5px 11px) 5px 0 / 1px 100% no-repeat,
    repeating-linear-gradient(0deg,
      rgba(212, 170, 90, 0.55) 0 5px, transparent 5px 11px) calc(100% - 5px) 0 / 1px 100% no-repeat,
    /* woven satin threads */
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 5px),
    /* velvet sheen down the middle */
    linear-gradient(90deg, var(--bookmark-2), var(--bookmark) 22%, #8f2a20 50%, var(--bookmark) 78%, var(--bookmark-2)),
    var(--bookmark);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, 0.45),
    14px 10px 30px -10px rgba(0, 0, 0, 0.75);
}
/* while the clip window is shut, nothing inside it can be clicked */
body.book-nav:not(.nav-open) nav.tabs { pointer-events: none; }

/* The roll itself: a fat cylinder of wound ribbon hanging under the clasp
   when closed. Opening sends it travelling down the page, thinning as the
   material unwinds, then it fades away leaving the tail. Closing reverses. */
.bkroll {
  position: fixed;
  top: -4px;                     /* tucked over the top edge, clear of the title */
  left: max(18px, calc(50% - 520px + 30px));   /* flush with the ribbon edges */
  z-index: 101;
  width: 148px;
  height: 26px;
  cursor: pointer;
  border-radius: 13px;
  overflow: hidden;
  /* gold edge lines continuing the ribbon's filigree border */
  border-left: 2px solid var(--gilt);
  border-right: 2px solid var(--gilt);
  background:
    linear-gradient(180deg, #bb4a3a 0%, #93392c 30%, var(--bookmark-2) 76%, #3f0c08 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 220, 170, 0.35),
    inset 0 -3px 5px rgba(0, 0, 0, 0.5),
    0 8px 18px -6px rgba(0, 0, 0, 0.8);
}
/* the fabric surface winding through the roll while it moves */
.bkroll::before {
  content: "";
  position: absolute;
  inset: 1px 6px;
  background: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0.24) 0 2px, transparent 2px 6px);
  opacity: 0.55;
}
body.rolling .bkroll::before { animation: rollspin 0.32s linear infinite; }
body.rolling:not(.nav-open) .bkroll::before { animation-direction: reverse; }
@keyframes rollspin {
  from { background-position: 0 0; }
  to   { background-position: 0 6px; }
}
/* the roll travels on the SAME linear clock as the clip window */
body.nav-anim .bkroll {
  transition:
    transform 0.95s linear,
    height 0.95s linear,
    opacity 0.2s linear 0.78s;
}
/* open: it has ridden down the whole page, unwound thin, and slipped away */
body.nav-open .bkroll {
  transform: translateY(calc(100dvh - 60px));
  height: 12px;
  opacity: 0;
  pointer-events: none;
}
/* closing: reappear at once and wind back up */
body.book-nav:not(.nav-open) .bkroll { transition-delay: 0s, 0s, 0s; }

/* buried: a page has turned over the lying ribbon. It drops beneath the
   paper - only its two ends, sticking out above and below the book, stay
   visible (and clickable, to pull it back out). */
body.nav-buried .ribbon-clip { z-index: 0; }

/* pulling a buried ribbon out: a quick continuous slide up, then the fast
   reroll takes over - no vanishing acts */
body.nav-anim.nav-lift .ribbon-clip { transition-duration: 0.32s; }
body.nav-anim.nav-lift .bkroll {
  transition-duration: 0.32s, 0.32s, 0.12s;
  transition-delay: 0s, 0s, 0s;
}

/* fast roll-up/unroll: used when a turning page pushes the bookmark out and
   when recalling it afterwards */
body.nav-fast .ribbon-clip { transition-duration: 0.45s; }
body.nav-fast .bkroll { transition-duration: 0.45s, 0.45s, 0.15s; }
body.nav-fast.nav-open .bkroll { transition-delay: 0s, 0s, 0.32s; }

/* In the book, the bookmark hangs just LEFT of the spine like a real ribbon -
   its right edge on the gutter - and hangs from just under the book's top
   edge, running the book's height (not the whole window). */
body.book-mode .ribbon-clip {
  left: calc(var(--spinex) - 186px);
  top: calc(var(--booktop) - 34px);
  height: calc(var(--bookh) + 62px);   /* out the top AND past the bottom edge */
}
body.book-mode nav.tabs {
  height: calc(var(--bookh) + 62px);
  padding: 96px 10px 60px;             /* menu entries stay on the page itself */
}
/* At rest the roll pokes out ABOVE the book's top edge, tucked behind the
   pages (below their z), so turning leaves sweep past without touching it.
   The moment it's used it rises above the pages and rolls down to you. */
body.book-mode .bkroll {
  left: calc(var(--spinex) - 186px);
  /* the whole roll perches ON the leather above the book's top edge, like the
     ribbon flipped over from behind the book and is lying there, pressable */
  top: calc(var(--booktop) - 27px);
  z-index: 0;              /* under .book-cover (z 1): tucked behind the book */
}
body.book-mode.nav-open .bkroll,
body.book-mode.rolling .bkroll { z-index: 101; }
body.book-mode.nav-open .bkroll {
  transform: translateY(calc(var(--bookh) + 11px));
}
body.book-mode.book-single .ribbon-clip { left: calc(var(--spinex) + 14px); }
body.book-mode.book-single .bkroll      { left: calc(var(--spinex) + 14px); }
/* gold filigree border inside the ribbon edge */
nav.tabs::before {
  content: "";
  position: absolute;
  inset: 7px 7px 38px;
  pointer-events: none;
  border: 1px solid var(--gilt);
  outline: 1px dotted rgba(232, 200, 120, 0.55);
  outline-offset: 3px;
  opacity: 0.85;
}
/* gold ornament at the ribbon tail */
nav.tabs::after {
  content: "✦";
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--gilt);
  font-size: 0.8rem;
  opacity: 0.9;
}

nav.tabs a {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gilt);
  text-decoration: none;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(232, 200, 120, 0.28);
  transition: color .15s ease, background .15s ease, letter-spacing .2s ease;
}
nav.tabs a:last-of-type { border-bottom: 0; }
nav.tabs a:hover {
  color: #fff3d8;
  background: rgba(232, 200, 120, 0.10);
  letter-spacing: 0.22em;
}
nav.tabs a[aria-current] {
  color: #fff3d8;
  background: rgba(232, 200, 120, 0.16);
  text-shadow: 0 0 10px rgba(232, 200, 120, 0.6);
}
nav.tabs a[aria-current]::before { content: "❧ "; font-size: 0.85em; }

/* One control only: the rolled bookmark itself is the menu button. A small
   gold ✦ sits on the barrel so it reads as pressable. */
.bkroll::after {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gilt);
  font-size: 0.85rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.bkroll:hover { filter: brightness(1.15); }


/* ----------------------------------------------------------------- account */

.acct { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 0.8rem; }
.acct .who { color: var(--ink-2); }
.acct .who b { color: var(--ink); font-weight: 600; }

.badge {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  background: var(--ember);
  color: #fff;
}

.badge.guest { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }

/* ------------------------------------------------------------------ banner */

.banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--brass);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 10px 18px;
  margin-top: 18px;
  border-radius: 3px;
}

.banner a { color: #fff; font-weight: 600; }
.banner .x { margin-left: auto; cursor: pointer; opacity: 0.7; background: none; border: 0; color: #fff; font-size: 1.1rem; line-height: 1; }
.banner .x:hover { opacity: 1; }

/* ------------------------------------------------------------------- main */

main { padding: 42px 0 70px; animation: fadeUp 0.55s ease both; }

.col { max-width: var(--col); }

h1, h2, h3 { font-family: var(--serif); line-height: 1.22; font-weight: 600; }

h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  margin: 0 0 22px;
  letter-spacing: -0.015em;
  text-shadow: 0 0 34px var(--glow-a);
  animation: fadeUp 0.6s ease 0.04s both;
}

h2 {
  font-size: 1.4rem;
  margin: 2.8rem 0 1.15rem;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ember);
  position: relative;
}
/* A thin second rule below the heavy one - a plate/ledger double rule. */
h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  border-top: 1px solid var(--line);
}
/* Ancient glyph mark before section titles. */
h2::before {
  content: "\2726";
  color: var(--ember);
  font-size: 0.72em;
  vertical-align: 0.06em;
  margin-right: 0.5em;
  text-shadow: 0 0 10px var(--glow-a);
}

h3 { font-size: 1.1rem; margin: 1.8rem 0 0.4rem; }

p { margin: 0 0 1.1em; }
a { color: var(--ember); text-underline-offset: 3px; }
a:hover { color: var(--ember-2); }

/* The standfirst reads like a handwritten margin note under the heading. */
.standfirst {
  font-family: var(--hand);
  font-size: 1.02rem;
  color: var(--ink-2);
  margin-bottom: 2em;
  transform: rotate(-0.35deg);
}

.muted { color: var(--ink-3); }
.small { font-size: 0.88rem; }
.book-loading {
  color: var(--ink-3);
  font-family: var(--hand);
  font-size: .92rem;
  letter-spacing: .02em;
  opacity: .75;
}

/* ------------------------------------------------------------ blog entries */

.post { display: grid; grid-template-columns: 108px 1fr; gap: 24px; margin-bottom: 44px; }
.post > time {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 9px;
  border-top: 2px solid var(--line);
}
.post-body > h2 { margin: 0 0 0.5rem; border: 0; padding: 0; font-size: 1.45rem; }
.post-body > h2::before, .post-body > h2::after { content: none; }
.post-body > h2 a { color: var(--ink); text-decoration: none; }
.post-body > h2 a:hover { color: var(--ember); }
.post-body { max-width: var(--col); }
.post-meta { font-family: var(--sans); font-size: 0.76rem; color: var(--ink-3); margin-bottom: 1em; }

@media (max-width: 700px) {
  .post { grid-template-columns: 1fr; gap: 8px; }
  .post > time { border-top: 0; padding-top: 0; }
}

/* ----------------------------------------------------------------- forums */

.board { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 26px; }

.board > header {
  background: var(--panel-2);
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.board > header h3 { margin: 0; font-size: 1.05rem; }
.board > header p { margin: 2px 0 0; font-size: 0.85rem; color: var(--ink-3); }

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-2);
  background: var(--panel);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--panel-2); }
.row .t { flex: 1; min-width: 0; }
.row .t a { font-size: 1.02rem; text-decoration: none; color: var(--ink); }
.row .t a:hover { color: var(--ember); }
.row .t .by { display: block; font-family: var(--sans); font-size: 0.74rem; color: var(--ink-3); }
.row .n { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; }

.reply {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 3px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: var(--panel);
}
.reply.op { border-left-color: var(--ember); }
.reply header { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-3); margin-bottom: 8px; }
.reply header b { color: var(--ink); }
.reply p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ forms */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 22px 24px;
  margin-bottom: 26px;
}
.panel h3 { margin-top: 0; }

label { display: block; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }

input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 12px;
  margin-bottom: 15px;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.65; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brass); outline-offset: 1px; }

button, .btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ember);
  border: 0;
  border-radius: 3px;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: var(--ember-2); color: #fff; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
button.ghost:hover, .btn.ghost:hover { background: var(--line-2); color: var(--ink); }
button.link { background: none; color: var(--ember); padding: 0; text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

.msg { font-family: var(--sans); font-size: 0.85rem; padding: 10px 14px; border-radius: 3px; margin-bottom: 16px; }
.msg.err { background: rgba(236,106,92,0.12); color: var(--red); border: 1px solid var(--red); }
.msg.ok  { background: rgba(79,195,141,0.12); color: var(--good); border: 1px solid var(--good); }

/* --------------------------------------------------------------- listings */

.list { list-style: none; margin: 0 0 2em; padding: 0; max-width: var(--col); }
.list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.list li > a { text-decoration: none; font-size: 1rem; }
.list li > a:hover { text-decoration: underline; }
.list .d { color: var(--ink-3); font-size: 0.88rem; flex: 1; min-width: 170px; }

.pill { font-family: var(--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 2px; padding: 2px 7px; }
.pill.on { color: var(--good); border-color: var(--good); }
.pill.off { color: var(--ink-3); }

code { font-family: var(--mono); font-size: 0.86em; background: var(--line-2); padding: 1px 5px; border-radius: 2px; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }

/* ---- forums: landing split, board scroll box, board toolbar --------------- */
.fx-split { display: grid; grid-template-columns: 1fr; gap: 0 116px; }
/* HARD-ANCHORED to the two pages, in the overlay AND the prints: latest
   threads on the left page, all boards on the right - identical rules on
   both, or content lands in one spot mid-flip and another after landing */
.spread-flow .fx-split,
.pwrap .pflow .fx-split { column-span: all; grid-template-columns: 1fr 1fr; }

/* WIDE TABLES (the land ledger etc): in the book they cross the whole
   spread like a taped-in fold-out sheet instead of being crushed into one
   column - and a book never shows a scrollbar on its paper. Identical in
   overlay and prints. */
.spread-flow .tablewrap,
.pwrap .pflow .tablewrap {
  column-span: all;
  overflow: visible;
  margin: 10px 0 18px;
}
.spread-flow .tablewrap table,
.pwrap .pflow .tablewrap table { min-width: 0; width: 100%; }
.spread-flow .tablewrap,
.pwrap .pflow .tablewrap { border: none; background: none; }
/* the spine gutter inside a spread-crossing table: left columns live on the
   left page, right columns on the right, empty paper over the spine */
.spread-flow .tablewrap td.gut,  .pwrap .pflow .tablewrap td.gut,
.spread-flow .tablewrap th.gut,  .pwrap .pflow .tablewrap th.gut { width: 116px; }
/* the text between the tables: whole blocks on the LEFT page, never
   sentences sliced over the spine */
body.book-mode main.landpage .col,
body.book-mode main.landpage > p {
  column-span: all;
  max-width: calc(50% - 58px);
  margin-left: 0;
}
.fx-boards {
  max-height: min(58vh, 560px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.fx-boards::-webkit-scrollbar { width: 8px; }
.fx-boards::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.fx-board {
  display: block;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: var(--ink);
}
.fx-board:last-child { border-bottom: 0; }
.fx-board:hover { background: var(--panel-2); }
.fx-board b { display: block; }
.fx-board .d { display: block; font-family: var(--sans); font-size: 0.82rem; color: var(--ink-2); }
.fx-board .n { display: block; font-family: var(--sans); font-size: 0.72rem; color: var(--ink-3); margin-top: 2px; }
.fx-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 14px; }
.fx-toolbar input[type=search] { flex: 1 1 200px; width: auto; margin: 0; }
.fx-toolbar select { width: auto; margin: 0; }
.fx-toolbar button { margin: 0; }

/* ----------------------------------------------------------------- footer */

footer.foot {
  border-top: 2px solid var(--ember);
  padding: 22px 0 50px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
footer.foot a { color: var(--ink-2); text-decoration: none; }
footer.foot a:hover { color: var(--ember); }

.hidden { display: none !important; }

/* Hub cards (Games / Elsewhere landing grids) */
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin: 1.6em 0 2.4em; }
/* Hub cards read as notes taped into the journal: slightly crooked paper
   scraps with a strip of yellowed tape across the top edge. */
.hubcard {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px 26px 22px;
  box-shadow: 0 3px 12px -5px rgba(40, 25, 8, 0.5);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: fadeUp 0.6s ease both;
}
.hub .hubcard:nth-child(odd)  { transform: rotate(-0.6deg); }
.hub .hubcard:nth-child(even) { transform: rotate(0.5deg); }
.hub .hubcard:nth-child(2) { animation-delay: 0.09s; }
.hub .hubcard:nth-child(3) { animation-delay: 0.18s; }
.hub .hubcard:nth-child(4) { animation-delay: 0.27s; }
/* the tape */
.hubcard::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 96px;
  height: 24px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: linear-gradient(180deg, rgba(228, 214, 168, 0.55), rgba(214, 198, 150, 0.45));
  border-left: 1px dashed rgba(120, 95, 50, 0.25);
  border-right: 1px dashed rgba(120, 95, 50, 0.25);
  box-shadow: 0 1px 3px rgba(40, 25, 8, 0.25);
}
.hubcard:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 0 14px 30px -12px rgba(40, 25, 8, 0.6);
}
.hubcard h2 { margin: .15em 0 .35em; padding: 0; border: 0; font-size: 1.5rem; }
.hubcard h2::before, .hubcard h2::after { content: none; }
.hubcard .d { font-family: var(--sans); font-size: .9rem; color: var(--ink-2); line-height: 1.55; }
.hubcard .go { font-family: var(--sans); font-size: .82rem; color: var(--ember); margin-top: .95em;
  display: inline-block; font-weight: 600; letter-spacing: .01em; transition: transform .18s ease; }
.hubcard:hover .go { color: var(--ember-2); transform: translateX(3px); }

@media (max-width: 640px) {
  .shell { padding: 0 18px; }
  body { font-size: 16px; }
  .ribbon-clip { width: 136px; left: 8px; }
  .bkroll { width: 144px; left: 4px; }
  .tpage-inner { padding: 18px 22px 28px; }
}