/* ==========================================================================
   Castle Matrix — History Reader
   A horizontally paginated e-reader. The chrome is the dark stone-and-gold of
   the main site; the reading surface is a warm parchment leaf lifted out of it.
   ========================================================================== */

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

:root {
  /* Chrome — shared with the main site */
  --stone: #2a2520;
  --stone-deep: #1a1713;
  --stone-light: #3d3630;
  --gold: #c8a45c;
  --gold-bright: #e8c86e;
  --gold-dark: #8a6e30;
  --text-light: #f0e8d8;
  --text-dim: #b0a890;

  /* Reading surface — overridden per theme */
  --leaf: #efe6d4;
  --leaf-edge: #e2d6bd;

  /* Paper for the measured drawings. Deliberately NOT themed: the reading
     themes belong to the book text, and the drawings are scanned line art
     that needs a light backdrop — they are composited with multiply, so a
     dark mat would crush the ink into the background and erase them. */
  --plate-paper: #efe6d4;
  --plate-paper-edge: #e2d6bd;
  --ink: #33291f;
  --ink-soft: #6b5c48;
  --rule: rgba(120, 96, 56, 0.28);
  --drop: #a8823c;

  /* Metrics. --fs is the responsive base; --fs-scale is the reader's own
     text-size control, kept separate so media queries still win on the base. */
  --gutter: 4rem;
  --fs: 1.18rem;
  --fs-scale: 1;
  --lh: 1.72;
  --turn: 620ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 70px;
}

[data-theme="sepia"] {
  --leaf: #e3d3b2;
  --leaf-edge: #d5c39d;
  --ink: #3b2f21;
  --ink-soft: #7a6849;
  --rule: rgba(110, 88, 50, 0.34);
  --drop: #94702f;
}

[data-theme="night"] {
  --leaf: #1d1b17;
  --leaf-edge: #16140f;
  --ink: #cabfa9;
  --ink-soft: #8d8371;
  --rule: rgba(200, 164, 92, 0.22);
  --drop: #c8a45c;
}

html { height: 100%; }

body {
  /* The page scrolls to reach the drawings below; the reader itself still
     never scrolls vertically — it fills exactly one screen and paginates
     sideways within that. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--stone-deep);
  color: var(--text-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Faint vignette so the leaf reads as lit from above */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 32%, rgba(200,164,92,0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ========== NAVIGATION ================================================== */

nav {
  position: sticky;
  top: 0;
  z-index: 30;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 2rem;
  background: rgba(20, 18, 15, 0.97);
  border-bottom: 1px solid rgba(200, 164, 92, 0.16);
}

.nav-brand {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
}
.nav-brand em { color: var(--text-dim); font-weight: 400; font-style: normal; }

.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
.nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--gold); }

.nav-cta {
  border: 1px solid var(--gold);
  padding: 0.5rem 1.2rem;
  color: var(--gold) !important;
  font-size: 0.65rem !important;
  transition: background 0.3s, color 0.3s;
}
.nav-cta:hover { background: var(--gold); color: var(--stone) !important; }
.nav-cta::after { display: none !important; }

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px;
}
.mobile-toggle span { width: 24px; height: 1.5px; background: var(--gold); }

/* ========== READER SHELL =============================================== */

.reader {
  position: relative;
  z-index: 10;
  flex: none;
  /* Exactly one screen below the nav. An explicit height also gives the
     column layout a definite box to fragment into. */
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 0.5rem;
}

/* --- Top bar: title, controls ------------------------------------------ */

.reader-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
}

.bar-left, .bar-right { display: flex; align-items: center; gap: 0.5rem; }

.book-title {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-title b { color: var(--gold); font-weight: 500; }

.ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0 0.7rem;
  background: transparent;
  border: 1px solid rgba(200, 164, 92, 0.28);
  border-radius: 2px;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.ctrl:hover { color: var(--gold); border-color: var(--gold); background: rgba(200,164,92,0.07); }
.ctrl:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.ctrl[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: rgba(200,164,92,0.12); }
.ctrl.icon { width: 34px; padding: 0; font-size: 0.8rem; }

.theme-set { display: inline-flex; gap: 0; }
.theme-set .ctrl { border-radius: 0; margin-left: -1px; }
.theme-set .ctrl:first-child { border-radius: 2px 0 0 2px; margin-left: 0; }
.theme-set .ctrl:last-child { border-radius: 0 2px 2px 0; }

/* --- The leaf ----------------------------------------------------------- */

.stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

/* The first measurement happens before webfonts settle, which reflows the
   column count. Hold the leaf blank until the reader has measured for real. */
.leaf .viewport { opacity: 0; transition: opacity 0.45s ease; }
body.ready .leaf .viewport { opacity: 1; }

.leaf {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--leaf);
  border: 1px solid var(--leaf-edge);
  border-radius: 2px;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    0 18px 50px rgba(0,0,0,0.55),
    0 0 0 1px rgba(200,164,92,0.09);
  overflow: hidden;
  transition: background 0.4s, border-color 0.4s;
}

/* Paper grain — inline SVG turbulence, no network request */
.leaf::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}
[data-theme="night"] .leaf::before { mix-blend-mode: screen; opacity: 0.05; }

/* Gutter shadow — the fold of an open codex (two-page spread only) */
.leaf::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 90px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(90, 68, 34, 0.05) 34%,
    rgba(90, 68, 34, 0.12) 50%,
    rgba(90, 68, 34, 0.05) 66%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s;
}
.leaf[data-cols="2"]::after { opacity: 1; }
[data-theme="night"] .leaf::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.4) 50%, transparent); }

/* --- The paginated flow -------------------------------------------------- */

.viewport {
  position: absolute;
  inset: 0;
  padding: 3.2rem 3.4rem 3.4rem;
  overflow: hidden;
  z-index: 1;
  /* Horizontal gestures must reach the drag handler rather than being consumed
     by Safari's own panning. pinch-zoom stays available for accessibility. */
  touch-action: pan-y pinch-zoom;
}

.flow {
  /* Fallback only — reader.js sets an explicit pixel height. A percentage here
     resolves through a flex chain that Safari gets wrong, leaving the multi-
     column container with no height to fragment into. */
  height: 100%;
  column-count: var(--cols, 2);
  column-gap: var(--gutter);
  column-fill: auto;              /* sequential fill — required for pagination */
  transform: translateX(var(--shift, 0px));
  transition: transform var(--turn) var(--ease);
  color: var(--ink);
  font-size: calc(var(--fs) * var(--fs-scale));
  line-height: var(--lh);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.flow.dragging { transition: none; }

/* --- Typography inside the leaf ----------------------------------------- */

.flow p { margin: 0; text-indent: 1.35em; orphans: 2; widows: 2; }
.flow p + p { margin-top: 0; }

.ch { break-before: column; }
.ch:first-child { break-before: auto; }

.ch-label {
  break-after: avoid;
  text-indent: 0;
  margin-bottom: 0.35rem;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--drop);
  text-align: center;
}

.ch-title {
  break-after: avoid;
  margin: 0 0 1.6rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
  position: relative;
  padding-bottom: 1rem;
}
.ch-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 58px; height: 1px;
  background: var(--rule);
}

/* Opening paragraph: illuminated drop cap */
.flow p.opening { text-indent: 0; }
.flow p.opening::first-letter {
  float: left;
  font-family: 'Cinzel', serif;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.09em 0 0;
  color: var(--drop);
  font-weight: 600;
}

.flow p.ref {
  text-indent: 0;
  padding-left: 1.4em;
  margin-bottom: 0.55em;
  text-align: left;
  font-size: 0.94em;
  line-height: 1.5;
  position: relative;
}
.flow p.ref::before {
  content: '';
  position: absolute;
  left: 0.4em; top: 0.62em;
  width: 4px; height: 4px;
  background: var(--rule);
  transform: rotate(45deg);
}

.flow p.signature {
  text-indent: 0;
  margin-top: 1.6rem;
  text-align: right;
  font-style: italic;
  color: var(--ink-soft);
}

/* --- Cover & contents leaves -------------------------------------------- */

.plate {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  break-inside: avoid;
  break-after: column;
}

.plate .rule {
  width: 40px; height: 1px;
  background: var(--rule);
  margin: 1.4rem 0;
}
.plate .mark {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--drop);
  text-indent: 0;
}
.plate h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.08;
  color: var(--ink);
  text-transform: uppercase;
}
.plate .subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12rem;
  font-style: italic;
  color: var(--ink-soft);
  text-indent: 0;
  max-width: 26ch;
  line-height: 1.5;
}
.plate .byline {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-indent: 0;
}
.plate .imprint {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-indent: 0;
  line-height: 1.65;
}
.plate .imprint span { display: block; }

.plate.contents { justify-content: flex-start; }
.plate.contents h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
/* Two balanced columns, filled top-to-bottom then across, like a printed
   contents page. --toc-rows is half the entry count (20 sections). */
.contents-list {
  --toc-rows: 10;
  list-style: none;
  width: 100%;
  margin-top: 0.4rem;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(var(--toc-rows), auto);
  grid-auto-flow: column;
  column-gap: 1.5rem;
  align-content: start;
}
.contents-list li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.1rem 0;
  font-size: 0.82rem;
  line-height: 1.3;
}
.contents-list .cn {
  flex: none;
  width: 3.4em;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--drop);
}
.contents-list .cd {
  flex: 1;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-0.22em);
}

/* --- Page-turn arrows ---------------------------------------------------- */

.turn {
  flex: none;
  width: 46px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(200, 164, 92, 0.16);
  border-radius: 2px;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, opacity 0.25s;
}
.turn:hover:not(:disabled) { background: rgba(200,164,92,0.1); border-color: var(--gold); }
.turn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.turn:disabled { opacity: 0.2; cursor: default; }
.turn svg { width: 15px; height: 15px; }

/* --- Footer: progress + counter ----------------------------------------- */

.reader-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.85rem 0.25rem 0.35rem;
}

.progress {
  flex: 1;
  height: 2px;
  background: rgba(200, 164, 92, 0.15);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 2px;
  transition: width var(--turn) var(--ease);
}
.progress::after {
  content: '';
  position: absolute;
  inset: -9px 0;                   /* larger hit target */
}

.counter {
  flex: none;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.counter b { color: var(--gold); font-weight: 500; }

/* ========== MEASURED DRAWINGS ==========================================
   Horizontal scroller of Mike Salter's plans and sections, below the reader.
   Native overflow scrolling with snap points — momentum and accessibility
   come free, unlike the reader which needs true pagination. ============== */

.plates {
  position: relative;
  z-index: 5;
  padding: 5rem 0 6rem;
  border-top: 1px solid rgba(200, 164, 92, 0.14);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(200,164,92,0.05), transparent 70%),
    var(--stone-deep);
}

.plates-head {
  max-width: 640px;
  margin: 0 auto 3rem;
  padding: 0 1.5rem;
  text-align: center;
}
.plates-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.plates-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-light);
}
.plates-rule {
  width: 58px; height: 1px;
  margin: 1.3rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.plates-desc {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-dim);
}

.plates-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.5rem;
}

.plates-track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0 1.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) transparent;
  cursor: grab;
}
.plates-track.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.plates-track::-webkit-scrollbar { height: 5px; }
.plates-track::-webkit-scrollbar-track { background: rgba(200,164,92,0.08); border-radius: 3px; }
.plates-track::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
.plates-track::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* NB: the reader already owns `.plate` for its title and contents pages —
   these gallery figures must stay a distinct class. */
.drawing {
  flex: none;
  width: 380px;
  scroll-snap-align: center;
}

.drawing-frame {
  display: block;
  width: 100%;
  padding: 1.5rem;
  background: var(--plate-paper);
  border: 1px solid var(--plate-paper-edge);
  border-radius: 2px;
  cursor: zoom-in;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 14px 36px rgba(0,0,0,0.45);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.drawing-frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.35), 0 22px 50px rgba(0,0,0,0.6);
}
.drawing-frame:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.drawing-frame img {
  display: block;
  width: 100%;
  /* One shared box shape so the mats and captions line up along the row.
     0.763 is the tallest scan's ratio, so that drawing fills the box exactly
     and the shallower ones sit centred with minimal dead paper. Ratio rather
     than a pixel height keeps it correct at every card width. */
  aspect-ratio: 0.763;
  height: auto;
  object-fit: contain;
  /* The scans are line art on white — keep them on paper, not on the dark. */
  mix-blend-mode: multiply;
}

.drawing figcaption {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}
.drawing-n {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--gold-dark);
  margin-bottom: 0.4rem;
}

.drawing-turn {
  flex: none;
  width: 42px;
  align-self: stretch;
  margin-bottom: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(200, 164, 92, 0.18);
  border-radius: 2px;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s;
}
.drawing-turn:hover:not(:disabled) { background: rgba(200,164,92,0.1); border-color: var(--gold); }
.drawing-turn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.drawing-turn:disabled { opacity: 0.18; cursor: default; }
.drawing-turn svg { width: 15px; height: 15px; }

/* --- Lightbox ------------------------------------------------------------ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: rgba(10, 9, 7, 0.95);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(200, 164, 92, 0.16);
}
.lightbox-caption {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lightbox-caption b { color: var(--gold); font-weight: 500; }

.lightbox-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.4rem;
}
/* isolate creates a stacking context so the drawing multiplies against the
   parchment panel rather than the dark backdrop behind it. */
.lightbox-plate {
  background: var(--plate-paper);
  padding: 1rem;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  isolation: isolate;
  line-height: 0;
}
.lightbox-plate img {
  display: block;
  /* Sized in viewport units — a percentage would need a definite-height
     ancestor chain, which is what broke the reader on Safari. */
  max-width: min(90vw, 1000px);
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (max-width: 700px) {
  .plates { padding: 3.5rem 0 4rem; }
  .plates-head { margin-bottom: 2rem; }
  .plates-stage { padding: 0 1rem; }
  .plates-track { gap: 1rem; }
  .drawing { width: 76vw; }
  .drawing-frame { padding: 1rem; }
  /* Arrows are redundant next to a native swipe on touch. */
  .drawing-turn { display: none; }
  .lightbox-body { padding: 0.8rem; }
}

/* ========== TABLE OF CONTENTS PANEL ===================================== */

.toc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 7, 0.68);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
  z-index: 40;
}
.toc-scrim.open { opacity: 1; visibility: visible; }

.toc-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(400px, 86vw);
  background: var(--stone);
  border-right: 1px solid rgba(200, 164, 92, 0.24);
  box-shadow: 20px 0 60px rgba(0,0,0,0.6);
  transform: translateX(-100%);
  transition: transform 0.42s var(--ease);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.toc-panel.open { transform: translateX(0); }

.toc-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.6rem 1.1rem;
  border-bottom: 1px solid rgba(200, 164, 92, 0.16);
}
.toc-head h2 {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.toc-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 0.8rem 0 2rem;
}
.toc-list::-webkit-scrollbar { width: 6px; }
.toc-list::-webkit-scrollbar-track { background: transparent; }
.toc-list::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding: 0.62rem 1.6rem;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--text-dim);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: color 0.22s, background 0.22s, border-color 0.22s;
}
.toc-item:hover { color: var(--text-light); background: rgba(200,164,92,0.06); }
.toc-item:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.toc-item[aria-current="true"] {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(200,164,92,0.09);
}
.toc-num {
  flex: none;
  width: 3.2em;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--gold-dark);
}
.toc-item[aria-current="true"] .toc-num { color: var(--gold); }

/* ========== FALLBACK ====================================================
   Only active if the browser failed to fragment the text into columns.
   Better a scrolling page than clipped text. ============================= */

body.no-columns .viewport {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
}
body.no-columns .flow {
  height: auto !important;
  column-count: 1 !important;
  transform: none !important;
}
body.no-columns .ch { break-before: auto; padding-top: 2.5rem; }
body.no-columns .plate { height: auto; padding: 2rem 0 3rem; }
body.no-columns .turn,
body.no-columns .progress,
body.no-columns .counter { display: none; }

/* ========== ACCESSIBILITY UTILITIES ===================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px; left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--gold);
  color: var(--stone);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* ========== RESPONSIVE ================================================== */

@media (max-width: 1080px) {
  .nav-links { gap: 1.3rem; }
  :root { --gutter: 3rem; }
  .viewport { padding: 2.6rem 2.6rem 2.8rem; }
}

@media (max-width: 860px) {
  nav { padding: 0 1.2rem; }
  .nav-links {
    display: none;
    position: absolute;
    top: 70px; left: 0; right: 0;
    flex-direction: column;
    gap: 1.4rem;
    padding: 1.8rem;
    background: rgba(20, 18, 15, 0.99);
    border-bottom: 1px solid rgba(200, 164, 92, 0.2);
  }
  .nav-links.open { display: flex; }
  .mobile-toggle { display: flex; }

  .reader { padding: 0.9rem 0.9rem 0.4rem; }
  .reader-bar { gap: 0.5rem; padding-bottom: 0.7rem; }
  /* The nav already says Castle Matrix; the strap only costs a row here. */
  .book-title { display: none; }
  .bar-right { flex: 1; justify-content: flex-end; gap: 0.35rem; }
  .ctrl { min-height: 32px; padding: 0 0.5rem; font-size: 0.55rem; letter-spacing: 0.1em; }
  .ctrl.icon { width: 32px; }
  #tocToggle .ctrl-label { display: none; }
  #tocToggle { width: 36px; padding: 0; }
  .stage { gap: 0.4rem; }
  .turn { width: 34px; }
  .viewport { padding: 2rem 1.5rem 2.2rem; }
  .ch-title { font-size: 1.5rem; margin-bottom: 1.2rem; }
  :root { --fs: 1.08rem; }
}

@media (max-width: 560px) {
  .fs-label, .theme-label { display: none; }
  .counter { font-size: 0.55rem; }
  .viewport { padding: 1.6rem 1.2rem 1.8rem; }
  .flow { text-align: left; }
  .plate .imprint { font-size: 0.82rem; }
}

/* Narrow leaves get a single contents column — two would wrap the titles */
@media (max-width: 860px) {
  .contents-list { grid-template-columns: 1fr; grid-auto-flow: row; }
}

/* Short viewports: reclaim margin so a full leaf still fits */
@media (max-height: 760px) {
  .viewport { padding: 2.2rem 2.6rem 2.4rem; }
  .ch-title { font-size: 1.55rem; margin-bottom: 1.1rem; }
  .plate .rule { margin: 0.9rem 0; }
}
@media (max-height: 620px) {
  .viewport { padding: 1.6rem 2rem 1.8rem; }
  .reader { padding: 0.75rem 1.5rem 0.35rem; }
  .plate h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
}

/* Coarse pointers: arrows are secondary to swiping, keep them slim */
@media (pointer: coarse) {
  .turn { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}