/* =====================================================================
   A GUIDEBOOK TO CLAUDE AI IN A NEW WORLD
   Book stylesheet — two registers:
     (A) Lore   — aged parchment, ornate display type
     (B) Rules  — Colostle-style cream paper, black ink, two columns
   Page trim 47:75 (tall trade book), matches the author's cover art.
   ===================================================================== */

:root{
  /* Page geometry */
  --pw: 760px;                 /* screen page width  */
  --ph: 1212.77px;             /* = pw * 75/47       */
  --margin: 78px;              /* rules-page text inset */
  --s: 1;                      /* fit-to-width scale (set by JS) */

  /* Lore (parchment) palette — tuned to the author's pages */
  --parch:        #e7d4ac;
  --parch-hi:     #f1e3c2;
  --parch-lo:     #cdb585;
  --parch-edge:   #b89a63;
  --lore-ink:     #1a1206;
  --lore-ink-2:   #3a2a12;

  /* Rules (Colostle) palette */
  --paper:        #f6f2e7;
  --paper-2:      #efe9d8;
  --ink:          #15120d;
  --ink-soft:     #2c2720;
  --ink-mute:     #565049;
  --hair:         #1a1610;
  --accent:       #a82c20;     /* red ink accent for chapter + quest headers */

  /* Type */
  --display: "Cinzel", "Trajan Pro", serif;            /* lore display   */
  --display-dec: "Cinzel Decorative", "Cinzel", serif; /* ornate accents */
  --lore-body: "Cormorant Garamond", "Sorts Mill Goudy", Georgia, serif;
  --rule-head: "Jura", "Eurostile", sans-serif;        /* Colostle headers */
  --rule-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
a{ color:inherit; }
a:focus, a:focus-visible, .toc-row:focus, .return-link:focus{ outline:2px solid var(--accent); outline-offset:2px; }
a:focus:not(:focus-visible){ outline:none; }
::selection{ background:rgba(168,44,32,.22); color:inherit; }
body{
  background:#15161b;
  background-image:
    radial-gradient(1100px 700px at 50% -8%, rgba(120,90,50,.18), transparent 60%),
    radial-gradient(900px 900px at 50% 120%, rgba(60,70,90,.16), transparent 60%);
  color:#e9e2d2;
  font-family:var(--rule-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

/* ===========================================================
   Reading rail & page shell
   =========================================================== */
.book{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:64px 24px 120px;
}
.page{
  position:relative;
  width:var(--pw);
  height:var(--ph);
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
  border-radius:2px;
  scroll-margin-top:24px;
  transform:scale(var(--s));
  transform-origin:top center;
  margin-bottom:calc(var(--ph) * (var(--s) - 1) + 32px);
}

/* Full-bleed image pages (author's finished art) */
.page--image{ background:#0b0b0d; }
.page--image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* page number */
.folio{
  position:absolute; bottom:30px; right:40px;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  color:var(--ink-mute);
}
.page--parchment .folio{ color:var(--lore-ink-2); opacity:.7; }

/* ===========================================================
   (B) RULES register — Colostle-style page
   =========================================================== */
.page--rules{
  background:
    radial-gradient(120% 80% at 50% 0%, var(--parch-hi), transparent 55%),
    radial-gradient(100% 120% at 50% 120%, var(--parch-lo), transparent 60%),
    linear-gradient(180deg, var(--parch), var(--parch-lo));
  color:var(--ink);
  padding:64px var(--margin) 72px;
}
.page--rules::before{ /* faint paper grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.25  0 0 0 0.05 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.page--rules > *{ position:relative; z-index:1; }

/* Hand-drawn broken edge rules (generic, not Colostle's totem) */
.page--rules .edge-top,
.page--rules .edge-bottom,
.page--rules .edge-side{
  position:absolute; pointer-events:none; z-index:2;
  background-repeat:no-repeat; background-size:100% 100%;
}
.page--rules .edge-top{
  top:30px; left:36px; right:36px; height:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='30' viewBox='0 0 1200 30'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='7' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='7'/></filter><g filter='url(%23r)' stroke='%2315120d' stroke-width='2.4' stroke-linecap='round' fill='none'><path d='M2 9 H470'/><path d='M520 9 H760'/><path d='M812 9 H1198'/><path d='M2 20 H1198'/></g></svg>");
}
.page--rules .edge-bottom{
  bottom:24px; left:36px; right:36px; height:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='14' viewBox='0 0 1200 14'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='3' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='6'/></filter><path d='M2 7 H1198' filter='url(%23r)' stroke='%2315120d' stroke-width='2.4' stroke-linecap='round' fill='none'/></svg>");
}
.page--rules .edge-side{
  top:58px; right:30px; width:16px; bottom:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='1000' viewBox='0 0 16 1000' preserveAspectRatio='none'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.02' numOctaves='2' seed='9' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='6'/></filter><g filter='url(%23r)' stroke='%2315120d' stroke-width='2.4' stroke-linecap='round' fill='none'><path d='M8 4 V300'/><path d='M8 340 V520'/></g></svg>");
}

/* Rules typography */
.page--rules .chapter-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--accent);
  text-align:center; margin:0 0 6px;
}
.page--rules h1.page-title{
  font-family:var(--rule-head); font-weight:700;
  font-size:30px; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; margin:8px 0 26px; line-height:1.12;
}
.page--rules h2.col-head{
  font-family:var(--rule-head); font-weight:700;
  font-size:19px; letter-spacing:.13em; text-transform:uppercase;
  text-align:center; margin:0 0 16px;
}
.page--rules h3.sub-head{
  font-family:var(--rule-head); font-weight:600;
  font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  margin:20px 0 8px;
  break-after:avoid; break-inside:avoid;
}
.page--rules p,
.page--rules li{
  font-family:var(--rule-body); font-weight:300;
  font-size:14px; line-height:1.62; color:var(--ink-soft);
  margin:0 0 11px;
}
.page--rules p.lead{ font-weight:400; }
.page--rules em{ font-style:italic; }
.page--rules strong{ font-weight:700; color:var(--ink); }

/* two-column flow */
.cols{ columns:2; column-gap:38px; }
.cols.tight{ column-gap:30px; }
.cols > h2.col-head{ column-span:all; }
.no-break{ break-inside:avoid; }

/* Boxed callout (Colostle "What do I need to play") */
.ink-box{
  border:1.5px solid var(--hair);
  padding:20px 22px 18px;
  margin:18px 0;
  break-inside:avoid;
}
.ink-box.center{ text-align:center; }
.ink-box .box-title{
  font-family:var(--rule-head); font-weight:700;
  font-size:15px; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 12px;
}
.ink-box ul{ margin:0; padding:0; list-style:none; }
.ink-box li{ margin:0 0 5px; }

/* Quest banner — the in-world "go do this" call to action */
.quest-banner{
  border-top:1.5px solid var(--hair);
  border-bottom:1.5px solid var(--hair);
  padding:18px 16px 16px;
  margin:22px 0;
  text-align:center;
  break-inside:avoid;
}
.quest-banner .q-kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--accent); margin:0 0 6px;
}
.quest-banner .q-title{
  font-family:var(--rule-head); font-weight:700; color:var(--ink);
  font-size:20px; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 8px;
}
.quest-banner a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.reward-line{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--ink-mute); margin-top:10px;
}
.reward-line b{ color:var(--ink); }

/* Prompt / code block */
.prompt{
  font-family:var(--mono); font-size:11.5px; line-height:1.62;
  white-space:pre-wrap; color:var(--ink-soft);
  background:#ece4d2;
  border:1px solid var(--hair);
  border-left:3px solid var(--ink);
  padding:16px 18px; margin:14px 0;
  break-inside:avoid;
}
.prompt .pl{ color:var(--ink); font-weight:600; }

/* Item card — quest items / loot */
.item{
  border:1.5px solid var(--hair);
  padding:16px 18px; margin:16px 0;
  background:linear-gradient(180deg, rgba(0,0,0,.015), transparent);
  break-inside:avoid;
}
.item .item-top{ position:relative; }
.item .item-name{
  font-family:var(--rule-head); font-weight:700;
  font-size:15px; letter-spacing:.05em; text-transform:uppercase; margin:0; padding-right:104px; white-space:nowrap;
}
.item .rarity{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; white-space:nowrap;
  position:absolute; top:1px; right:0;
  border:1px solid var(--hair); padding:3px 7px;
}
.item .item-desc{ font-style:italic; margin:8px 0 0; font-size:13px; }

/* Tables (quest log, level ladder, character nature) */
table.ink{
  width:100%; border-collapse:collapse; margin:14px 0; break-inside:avoid;
}
table.ink th, table.ink td{
  border:1px solid var(--hair); padding:9px 12px; text-align:left;
  font-family:var(--rule-body); font-weight:300; font-size:13px; color:var(--ink-soft);
}
table.ink th{
  font-family:var(--rule-head); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper);
  background:var(--ink);
}
table.ink td strong{ color:var(--ink); }

/* Ink-sketch illustration placeholder (drop your own art) */
.art-slot{
  border:1.6px dashed rgba(21,18,13,.5);
  background:
    repeating-linear-gradient(45deg, rgba(21,18,13,.05) 0 2px, transparent 2px 9px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; color:var(--ink-mute);
  min-height:180px; margin:16px 0; break-inside:avoid;
}
.art-slot .as-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; max-width:80%;
}
.art-slot .as-mark{ font-size:30px; opacity:.4; }

/* Fillable character sheet rows */
.sheet-row{ display:flex; align-items:flex-end; gap:14px; margin:14px 0 0; }
.sheet-row.tall{ align-items:flex-start; }
.sheet-label{
  font-family:var(--rule-head); font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  width:140px; flex:0 0 140px; padding-bottom:3px;
}
.sheet-fill{
  flex:1; border-bottom:1.5px dotted rgba(21,18,13,.55);
  height:26px;
}
.sheet-row.tall .sheet-fill{ height:62px; border-bottom:none;
  background:repeating-linear-gradient(transparent 0 25px, rgba(21,18,13,.45) 25px 26.5px);
}
.sheet-hint{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--ink-mute); margin:4px 0 0 154px;
}

/* tip / note line */
.tip{
  border-left:3px solid var(--ink);
  padding:8px 0 8px 14px; margin:14px 0;
  font-style:italic; font-size:13.5px; color:var(--ink-soft);
  break-inside:avoid;
}
.tip b{ font-style:normal; }

/* Pull list with em-dash markers */
ul.dash{ list-style:none; padding:0; margin:0 0 11px; }
ul.dash li{ position:relative; padding-left:18px; }
ul.dash li::before{ content:"—"; position:absolute; left:0; color:var(--ink-mute); }

/* ===========================================================
   (A) LORE register — parchment pages
   =========================================================== */
.page--parchment{
  color:var(--lore-ink);
  padding:80px 76px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--parch-hi), transparent 55%),
    radial-gradient(100% 120% at 50% 120%, var(--parch-lo), transparent 60%),
    linear-gradient(180deg, var(--parch), var(--parch-lo));
}
.page--parchment::before{ /* mottled age + grain */
  content:""; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:multiply; opacity:.5;
  background-image:
    radial-gradient(circle at 14% 20%, rgba(120,80,30,.16) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 12%, rgba(120,80,30,.12) 0 11px, transparent 12px),
    radial-gradient(circle at 30% 88%, rgba(120,80,30,.14) 0 9px, transparent 10px),
    radial-gradient(circle at 90% 78%, rgba(120,80,30,.10) 0 12px, transparent 13px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0 0.06  0 0 0 0.12 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}
.page--parchment::after{ /* darkened vignette edges */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 120px rgba(80,50,16,.4), inset 0 0 36px rgba(80,50,16,.28);
}
.page--parchment > *{ position:relative; z-index:1; }

.page--parchment .lore-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--accent); opacity:.92;
  text-align:center; margin:0 0 26px;
}
.lore-title{
  font-family:var(--display-dec); font-weight:700;
  font-size:40px; line-height:1.08; text-align:center;
  color:var(--lore-ink); margin:0 0 8px;
  text-shadow:0 1px 0 rgba(255,240,200,.4);
}
.lore-sub{
  font-family:var(--lore-body); font-style:italic; font-size:20px;
  text-align:center; color:var(--lore-ink-2); margin:0 0 30px;
}
.page--parchment p,
.page--parchment li{
  font-family:var(--lore-body); font-size:20px; line-height:1.62;
  color:var(--lore-ink-2);
}
.page--parchment p.scene{ font-style:italic; }
.lore-rule{
  height:0; border:0; border-top:1.5px solid rgba(60,40,16,.45);
  width:50%; margin:30px auto;
  position:relative;
}
.lore-rule::before{
  content:"✦"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--parch); padding:0 12px; color:var(--lore-ink-2); font-size:14px;
}

/* Journal entry quote */
.entry{
  margin:22px 0; padding-left:20px;
  border-left:2px solid rgba(60,40,16,.5);
  break-inside:avoid;
}
.entry p{ font-style:italic; margin:0 0 6px; }
.entry .ref{
  display:block; font-family:var(--mono); font-style:normal;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lore-ink-2); opacity:.8; margin-top:8px;
}

/* Return-to-journey link at the end of each Recovered Pages */
a.return-link{
  display:block; text-align:center; margin-top:18px;
  font-family:var(--lore-body); font-style:italic; font-size:18px;
  color:var(--lore-ink); text-decoration:none;
  border-top:1px solid rgba(60,40,16,.35); padding-top:14px;
  transition:opacity .15s ease;
}
a.return-link::before{ content:"↩  "; font-style:normal; }
a.return-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* big centered verse (poem / invocation) */
.verse{ text-align:center; }
.verse p{ font-family:var(--display); font-size:23px; line-height:1.5; letter-spacing:.01em; margin:0 0 18px; color:var(--lore-ink); }

/* Contents / index page */
.contents{ max-width:80%; margin:6px auto 0; }
.contents .toc-row{
  display:flex; align-items:baseline; gap:10px;
  padding:7px 0; text-decoration:none; color:var(--lore-ink);
  border-bottom:1px dotted rgba(60,40,16,.3);
}
.contents .toc-row:hover .toc-name{ text-decoration:underline; text-underline-offset:3px; }
.contents .toc-name{ font-family:var(--lore-body); font-size:19px; white-space:nowrap; }
.contents .toc-sub{ font-family:var(--lore-body); font-style:italic; font-size:15px; color:var(--lore-ink-2); }
.contents .toc-dots{ flex:1; border-bottom:1px dotted rgba(60,40,16,.45); transform:translateY(-4px); }
.contents .toc-pg{ font-family:var(--mono); font-size:13px; color:var(--lore-ink-2); }
.contents .toc-sec{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin:18px 0 2px;
}
.contents .toc-sec:first-child{ margin-top:0; }

/* Title page crest */
.crest{
  text-align:center;
}
.crest .crest-rule{ width:62%; margin:22px auto; border-top:2px solid rgba(60,40,16,.5); }

/* ===========================================================
   Navigation chrome (screen only)
   =========================================================== */
/* Dense parchment variant — prose-heavy Recovered Pages */
.page--parchment.dense{ padding:64px 70px; }
.page--parchment.dense p,
.page--parchment.dense li{ font-size:16px; line-height:1.55; margin:0 0 10px; }
.page--parchment.dense .lore-title{ font-size:30px; }
.page--parchment.dense .lore-sub{ font-size:17px; margin-bottom:18px; }
.page--parchment.dense h3.lore-h{
  font-family:var(--display); font-weight:600; font-size:18px;
  letter-spacing:.04em; color:var(--lore-ink); margin:18px 0 6px;
}
.page--parchment.dense .entry p{ font-size:16px; }
.page--parchment .pull{
  text-align:center; font-style:italic; font-size:19px;
  color:var(--lore-ink); margin:18px auto; max-width:46ch;
  border-top:1px solid rgba(60,40,16,.4);
  border-bottom:1px solid rgba(60,40,16,.4); padding:14px 0;
}

.toolbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  background:linear-gradient(180deg, rgba(12,13,17,.92), rgba(12,13,17,.0));
  pointer-events:none;
}
.toolbar .tb-title{
  font-family:var(--display); font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:#cdbfa0; pointer-events:auto;
}
.toolbar .tb-nav{ display:flex; gap:8px; pointer-events:auto; }
.tb-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:#d9cdb2; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); border-radius:3px;
  padding:7px 12px; cursor:pointer; transition:all .15s ease;
}
.tb-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
@media (max-width:640px){
  .toolbar{ padding-left:12px; padding-right:12px; }
  .toolbar .tb-title{ display:none; }
  .toolbar .tb-nav{ gap:6px; width:100%; justify-content:center; }
  .tb-btn{ padding:6px 9px; font-size:10px; letter-spacing:.08em; }
  .tb-counter{ min-width:auto !important; }
}
.tb-counter{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:#b6ab92; align-self:center; min-width:64px; text-align:center;
}

/* Foreword (front-matter prose, single column) */
.foreword{ max-width:48ch; margin:8px auto 0; }
.foreword p{ font-family:var(--lore-body); font-size:18px; line-height:1.6; color:var(--ink-soft); margin:0 0 13px; }
.foreword p.lead{ font-size:22px; font-style:italic; color:var(--ink); margin-bottom:16px; }
.foreword .fw-close{ font-style:italic; font-size:19px; color:var(--ink); margin-top:18px; }
.foreword .fw-sign{ text-align:right; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-mute); margin-top:18px; line-height:1.6; }

/* Memory page compaction (fits four full RPG items + optional quest) */
.page--rules.mem .item .item-name{ font-size:12.5px; padding-right:80px; white-space:normal; }
.page--rules.mem .item .rarity{ font-size:8px; letter-spacing:.16em; padding:2px 5px; }
.page--rules.mem .item{ padding:9px 12px; margin:6px 0; }
.page--rules.mem .item p, .page--rules.mem .item li, .page--rules.mem .item ol{ font-size:11.5px; }
.page--rules.mem .prompt{ font-size:8.5px !important; line-height:1.4; }
.page--rules.mem .lead{ font-size:14px; }
.page--rules.mem .quest-banner{ padding:12px 14px 10px; }
.page--rules.mem .quest-banner .prompt{ font-size:10px !important; }

/* ===========================================================
   Editorial review overlay — red marks everything NOT in the
   original README. Toggle with the "Hide edits" button.
   =========================================================== */
/* Editorial overlay retired — added marks now render as normal book text. */
.added, .added *{ color:inherit; }
.added-box{ box-shadow:none; }
.added-note{ display:none; }

/* ===========================================================
   Print — one page per sheet, no chrome
   =========================================================== */
@media print{
  @page{ size:5in 7.978in; margin:0; }
  body{ background:#fff; }
  .toolbar{ display:none !important; }
  .book{ display:block; padding:0; gap:0; }
  .page{
    width:5in; height:7.978in; box-shadow:none; border-radius:0;
    break-after:page; page-break-after:always;
  }
  .page:last-child{ break-after:auto; page-break-after:auto; }
  .page{ transform:none !important; margin-bottom:0 !important; }
  .page--rules{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .page--parchment, .page--image, .page--rules{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ===========================================================
   Fit-to-width: pages keep their true fixed size and are scaled
   as a whole by --s (set in JS). No font/column reflow, so the
   two-column book reads identically at any width, just smaller.
   =========================================================== */