/* ======================================================================================================
   1) Surface tokens
   ====================================================================================================== */


:root {
  --sdx-surface-aged-paper-base: var(--fb-cream);
  --sdx-surface-aged-paper-dark-base: color-mix(in srgb, var(--fb-cream) 90%, var(--fb-paper) 10%);
  --sdx-surface-aged-paper-warm: color-mix(in srgb, var(--fb-cream) 84%, var(--fb-amber) 16%);
  --sdx-surface-aged-paper-deep: color-mix(in srgb, var(--fb-cream) 86%, var(--fb-amber) 14%);
  --sdx-surface-aged-paper:
    radial-gradient(ellipse at 0%   50%,  rgba(139, 90, 40, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 50%,  rgba(139, 90, 40, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50%  100%, rgba(139, 90, 40, 0.06) 0%, transparent 40%),
    var(--sdx-surface-aged-paper-base);

  --sdx-surface-dark-linen:
    radial-gradient(ellipse at 50% 60%, rgba(74, 103, 65, 0.12) 0%, transparent 65%),
    var(--fb-cover-bg);

  --sdx-surface-book-dark: var(--fb-cover-bg);
}

:root[data-theme="dark"] {
  --sdx-surface-aged-paper:
    radial-gradient(ellipse at 0%   50%,  rgba(100, 65, 20, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 50%,  rgba(100, 65, 20, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50%  100%, rgba(100, 65, 20, 0.08) 0%, transparent 40%),
    var(--sdx-surface-aged-paper-dark-base);
}

/* Reporters page — deeper amber staining and heavier grain lines.
   Scoped override so the :root token is unchanged for all other pages.
   The compositor render() function sets background via var(--sdx-surface-aged-paper)
   on the slot element — this override is inherited through the DOM cascade. */
.page-reporters .fb-page-slot,
.page-reporters .fb-leaf-front,
.page-reporters .fb-leaf-back {
  --sdx-surface-aged-paper:
    radial-gradient(ellipse at 15%  40%,  rgba(139, 90, 40, 0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 85%  60%,  rgba(139, 90, 40, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50%  95%,  rgba(100, 60, 20, 0.14) 0%, transparent 45%),
    radial-gradient(ellipse at 30%  10%,  rgba(160, 110, 50, 0.09) 0%, transparent 40%),
    radial-gradient(ellipse at 70%  80%,  rgba(120,  75, 25, 0.07) 0%, transparent 35%),
    var(--sdx-surface-aged-paper-warm);
}


/* ======================================================================================================
   2) FlipBook engine token overrides
   ====================================================================================================== */

.page-reporters .fb-container {
  --fb-blank: transparent;
  --fb-cream: transparent;
}


/* ======================================================================================================
   2c) Aged paper — deeper warmth and surface texture overrides.
   Applied to the .fb-page-slot background so all interior pages read older.
   The --sdx-surface-aged-paper token is used by the compositor for render()
   pages. For direct background-color slots we override --fb-cream here.
   ====================================================================================================== */

.page-reporters .fb-container {
  --fb-cream: var(--sdx-surface-aged-paper-deep);
}

/* Paper edge vignette — outer edge only, narrow spread.
   Keeps the text area clear. Warm amber tint suggests aged foxing
   on the page edge without encroaching on the reading surface. */
.page-reporters .fb-page-left {
  box-shadow: inset 1.5rem 0 2rem -1.25rem rgba(139, 90, 40, 0.18);  /* left outer edge only */
}

.page-reporters .fb-page-right {
  box-shadow: inset -1.5rem 0 2rem -1.25rem rgba(139, 90, 40, 0.18); /* right outer edge only */
}

.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-front"] .fb-page-right,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="opening-front"] .fb-page-right,
.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-front"] .fb-leaf-front,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="opening-front"] .fb-leaf-front,
.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-front"] .fb-leaf-face-content,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="opening-front"] .fb-leaf-face-content {
  box-shadow: none;
}

.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-back"] .fb-page-left,
.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-back"] .fb-page-right,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="closing-back"] .fb-page-right,
.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-back"] .fb-leaf-front,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="closing-back"] .fb-leaf-front,
.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-back"] .fb-leaf-face-content,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="closing-back"] .fb-leaf-face-content {
  box-shadow: none;
}

/* ======================================================================================================
   3) Storybook section wrapper — table surface
   ====================================================================================================== */

.page-reporters .reporters-storybook {
  /* Height-driven, like the viridians reader: cap the width by the available
     viewport HEIGHT (×1.5 for the 3:2 spread) so the book fills the viewport
     instead of floating small. The 80vw term is just an upper bound on very tall,
     narrow windows. This is what lets the cover and full-page images render at
     their full intended size. */
  width: min(80vw, calc((100svh - var(--header-height, 77px) - 4rem) * 1.5));
  margin: 2rem auto 0;
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem 4.75rem;
  box-sizing: border-box;
  border-radius: 1rem;
  box-shadow: var(--card-shadow-dark, 0 1.5rem 3.5rem rgba(0, 0, 0, 0.34));
  background-image: url('/assets/images/reporters/partials/unseen-hands-table.webp');
  background-size: cover;
  background-position: center center;
  background-color: var(--fb-cover-bg);
}

.page-reporters .storybook-reader-stage-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.page-reporters .storybook-reader-stage {
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
}

.page-reporters .storybook-reader-book-stage {
  width: min(88%, 64rem);
  max-width: 100%;
  aspect-ratio: 3 / 2;
  margin: 0 auto;
}

.page-reporters #storybook-reader-book {
  margin: 0 auto;
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.74),
    0 0.75rem 2rem rgba(0, 0, 0, 0.52),
    0 0.25rem 0.5rem rgba(0, 0, 0, 0.35);
}

.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-front"],
.page-reporters #storybook-reader-book[data-sdx-flipbook-state="closed-back"],
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="opening-front"],
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="closing-back"],
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="closing-backward-to-closed-front"],
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="opening-backward-from-closed-back"] {
  box-shadow: none;
}

.page-reporters #storybook-reader-book::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 100%;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(80, 40, 10, 0.10) 20%,
    rgba(60, 28, 8, 0.35) 45%,
    rgba(35, 15, 4, 0.55) 50%,
    rgba(60, 28, 8, 0.35) 55%,
    rgba(80, 40, 10, 0.10) 80%,
    transparent 100%
  );
}

.page-reporters #storybook-reader-book[data-sdx-flipbook-state="interior"]::after,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="turning-interior-forward"]::after,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="turning-interior-backward"]::after,
.page-reporters #storybook-reader-book[data-sdx-flipbook-transition="opening-backward-from-closed-back"]::after {
  opacity: 1;
}

.page-reporters #storybook-reader-book .fb-leaf-front,
.page-reporters #storybook-reader-book .fb-leaf-back,
.page-reporters #storybook-reader-book .fb-leaf-face-base,
.page-reporters #storybook-reader-book .fb-leaf-face-content {
  position: absolute;
  inset: 0;
}

.page-reporters .storybook-reader-controls {
  position: absolute;
  bottom: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.page-reporters .storybook-reader-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.page-reporters .storybook-reader-btn {
  appearance: none;
  background: color-mix(in srgb, var(--sdx-color-viridians-dark-base) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--sdx-color-mama-amber) 52%, transparent);
  color: color-mix(in srgb, var(--sdx-color-mama-amber) 74%, white 26%);
  padding: 0.5rem 1.75rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  border-radius: 2px;
  cursor: pointer;
}

.page-reporters .storybook-reader-btn:hover {
  background-color: color-mix(in srgb, var(--sdx-color-viridians-dark-base) 78%, var(--sdx-color-mama-amber) 22%);
  border-color: color-mix(in srgb, var(--sdx-color-mama-amber) 80%, transparent);
}

.page-reporters .storybook-reader-btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.page-reporters .storybook-reader-counter {
  min-width: 4.5rem;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  color: color-mix(in srgb, var(--sdx-color-white) 90%, var(--sdx-color-mama-amber) 10%);
  letter-spacing: 0.1em;
}

.page-reporters .storybook-reader-hint {
  font-family: 'Playfair Display', Georgia, serif;
  color: color-mix(in srgb, var(--sdx-color-white) 64%, var(--sdx-color-mama-amber) 36%);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.page-reporters .storybook-reader-state {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(26, 18, 9, 0.82);
}

[data-theme="dark"] .page-reporters .storybook-reader-state {
  color: rgba(255, 253, 247, 0.82);
}

/* ======================================================================================================
   6) uh-page — base text page
   ====================================================================================================== */

.page-reporters .uh-page {
  --uh-page-padding-block: 6rem;
  --uh-body-line-height-scale: 1;
  --uh-eyebrow-gap: 0.75rem;
  --uh-title-gap: 1.375rem;
  --uh-body-gap: 1rem;
  --uh-closing-gap: 1.25rem;
  --uh-rule-margin-top: 1.125rem;
  --uh-rule-margin-bottom: 1.25rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--uh-page-padding-block) 2.5rem;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.page-reporters .uh-page--centered {
  justify-content: center;
  align-items: center;
  text-align: center;
}


/* ======================================================================================================
   7) Typography — uh-* text elements
   ====================================================================================================== */

.page-reporters .uh-eyebrow {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fb-amber);
  margin-bottom: var(--uh-eyebrow-gap);
  position: relative;
}

.page-reporters .uh-chapter-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fb-ink);
  line-height: 1.2;
  margin-bottom: var(--uh-title-gap);
  position: relative;
}

.page-reporters .uh-body {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.04rem;   /* was 0.94 — read too small; comfortable narrative size */
  line-height: 1.88;
  color: rgba(30, 18, 8, 0.80);
  position: relative;
}

.page-reporters .uh-body + .uh-body {
  margin-top: var(--uh-body-gap);
}

.page-reporters .uh-closing {
  margin-top: var(--uh-closing-gap);
  font-style: italic;
}

.page-reporters .uh-rule {
  width: 3.125rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--fb-amber), transparent);
  margin: var(--uh-rule-margin-top) 0 var(--uh-rule-margin-bottom);
  flex-shrink: 0;
}

.page-reporters .uh-rule--end {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

.page-reporters .uh-ornament {
  margin-top: 1.75rem;
  text-align: center;
  color: var(--fb-rust);
  font-size: 1.1rem;
  width: 100%;
}

.page-reporters .uh-page-num {
  position: absolute;
  bottom: 1.125rem;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: rgba(30, 18, 8, 0.28);
  font-style: italic;
}

.page-reporters .uh-page-num--left  { left:  1.75rem; }
.page-reporters .uh-page-num--right { right: 1.75rem; }


/* ======================================================================================================
   8) Image page
   ====================================================================================================== */

.page-reporters .uh-image-page {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  box-sizing: border-box;
}

.page-reporters .uh-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.625rem 1rem;
  background: linear-gradient(to top, rgba(20, 12, 4, 0.75) 0%, transparent 100%);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.06em;
  color: rgba(232, 220, 200, 0.90);
  text-align: center;
}

/* ── Map half-page ── */

.page-reporters .uh-page--map-portrait {
  padding: 0.5rem;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.page-reporters .uh-map-portrait-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc((100% - 1rem) / 0.6330);
  height: calc(100% - 1rem);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0.35rem 0.65rem rgba(26, 18, 9, 0.14));
}

.page-reporters .uh-map-portrait-inner--reverse {
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* ── Dedication page ── */
.page-reporters .uh-page--dedication {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.page-reporters .uh-dedication-rule {
  width: 3rem;
  height: 1px;
  background: var(--fb-amber);
  margin: 1.5rem auto;
  opacity: 0.6;
}

.page-reporters .uh-dedication-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: var(--body);
  line-height: 1.9;
  color: rgba(26, 18, 9, 0.72);
  max-width: 16rem;
  margin: 0 auto;
}

/* ── Title page ── */
.page-reporters .uh-page--title {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.page-reporters .uh-title-main {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--fb-ink);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.page-reporters .uh-title-sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(26, 18, 9, 0.55);
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
}

.page-reporters .uh-title-bridge {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: var(--body);
  line-height: 1.7;
  color: rgba(26, 18, 9, 0.5);
  max-width: 14rem;
  margin: 0.75rem auto 0;
  font-style: italic;
}

/* ── Chapter end vignette ── */
.page-reporters .uh-page--chapter-end {
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding-bottom: 2.5rem;
}

.page-reporters .uh-vignette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.page-reporters .uh-vignette__img {
  max-width: 60%;
  max-height: 9rem;
  object-fit: contain;
  opacity: 0.75;
  filter: sepia(0.4);
}

.page-reporters .uh-vignette__caption {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(26, 18, 9, 0.4);
  text-align: center;
}



/* ======================================================================================================
   8c) End image page — chapter vignette
   No .uh-page wrapper. Dark-linen surface. Radial scrim lifts image off surface.
   No card, no border, no radius. Image centred with object-fit: contain.
   ====================================================================================================== */

.page-reporters .uh-end-image-page {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2rem;
}

.page-reporters .uh-end-image-scrim {
  position: absolute;
  inset: 0;
  /* Warm sepia vignette — period plate feel on aged-paper surface */
  background: radial-gradient(ellipse at center,
    transparent                      50%,
    rgba(139, 90, 40, 0.08)          75%,
    rgba(100, 60, 20, 0.18)         100%);
  pointer-events: none;
  z-index: 2;
}

.page-reporters .uh-end-image-img {
  position: relative;
  width: 80%;
  aspect-ratio: 4 / 3;          /* reasonable default; image fills via background-size */
  display: block;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  filter: sepia(0.45) brightness(0.95) contrast(1.05);
}

.page-reporters .uh-end-image-caption {
  position: relative;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: rgba(30, 18, 8, 0.65);
  text-align: center;
  margin-top: 1.25rem;
  z-index: 2;
}


/* ======================================================================================================
   9) Table of Contents
   ====================================================================================================== */

.page-reporters .uh-toc {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.page-reporters .uh-toc li {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(139, 90, 40, 0.15);
}

.page-reporters .uh-toc li:last-child {
  border-bottom: none;
}

.page-reporters .uh-toc-label {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fb-ink);
  line-height: 1.3;
}

.page-reporters .uh-toc-sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(30, 18, 8, 0.50);
  margin-top: 0.125rem;
}


/* ======================================================================================================
   10) Illustration page
   ====================================================================================================== */

.page-reporters .uh-illus {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}

.page-reporters .uh-illus__glyph {
  font-size: 5rem;
  margin-bottom: 1rem;
  filter: sepia(1) saturate(0.5) brightness(0.85);
}

.page-reporters .uh-illus__caption {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(232, 220, 200, 0.45);
  text-align: center;
  max-width: 11.25rem;
  line-height: 1.6;
}


/* ======================================================================================================
   11) CTA / Final page
   ====================================================================================================== */

.page-reporters .uh-final-statement {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: var(--body);
  line-height: 1.85;
  color: rgba(30, 18, 8, 0.75);
  text-align: center;
  max-width: 18rem;
  font-style: italic;
}

.page-reporters .uh-stamp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Seal image is the background — no border, no border-radius */
  border: none;
  border-radius: 0;
  width: 14rem;
  aspect-ratio: 3 / 2;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  text-decoration: none;
  transition: filter 0.2s ease;
  margin: 0.75rem 0;
}

.page-reporters .uh-stamp-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.page-reporters .uh-stamp-cta__label {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(139, 90, 40, 0.65);
}

.page-reporters .uh-stamp-cta__emphasis {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(40, 22, 8, 0.85);
  letter-spacing: 0.04em;
}

.page-reporters .uh-stamp-cta:hover {
  filter: brightness(1.08);
}

.page-reporters .uh-colophon {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(30, 18, 8, 0.28);
  margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .page-reporters .uh-stamp-cta { transition: none; }
}


/* ======================================================================================================
   12) Dark mode overrides
   ====================================================================================================== */

[data-theme="dark"] .page-reporters .uh-chapter-title,
[data-theme="dark"] .page-reporters .uh-toc-label {
  color: color-mix(in srgb, var(--fb-paper) 88%, var(--fb-amber) 12%);
}

[data-theme="dark"] .page-reporters .uh-body,
[data-theme="dark"] .page-reporters .uh-toc-sub {
  color: rgba(232, 213, 176, 0.75);
}

[data-theme="dark"] .page-reporters .uh-eyebrow {
  color: color-mix(in srgb, var(--fb-amber) 86%, var(--fb-paper) 14%);
}

[data-theme="dark"] .page-reporters .uh-page-num {
  color: rgba(232, 213, 176, 0.22);
}

[data-theme="dark"] .page-reporters .uh-toc li {
  border-color: rgba(200, 148, 58, 0.18);
}

[data-theme="dark"] .page-reporters .uh-final-statement {
  color: rgba(232, 213, 176, 0.70);
}

[data-theme="dark"] .page-reporters .uh-colophon {
  color: rgba(232, 213, 176, 0.22);
}



/* ======================================================================================================
   14) Script-family line-height overrides
   Matches line_height values in /assets/languages/font-families.json.
   sdx-flipbook-compositor.js applies matching inline styles to the measurement
   probe — these rules ensure rendered pages match measured heights exactly.
   Latin family (default): line-height: 1.88 — set in .uh-body, no override needed.
   ====================================================================================================== */

/* Stacking scripts: Thai, Khmer, Burmese, Lao, Tibetan */
html:lang(th) .page-reporters .uh-body,
html:lang(km) .page-reporters .uh-body,
html:lang(my) .page-reporters .uh-body,
html:lang(lo) .page-reporters .uh-body,
html:lang(bo) .page-reporters .uh-body {
  line-height: 2.2;
}

/* Indic scripts: Devanagari family */
html:lang(hi) .page-reporters .uh-body,
html:lang(bn) .page-reporters .uh-body,
html:lang(gu) .page-reporters .uh-body,
html:lang(pa) .page-reporters .uh-body,
html:lang(mr) .page-reporters .uh-body,
html:lang(ne) .page-reporters .uh-body,
html:lang(si) .page-reporters .uh-body {
  line-height: 2.0;
}

/* pIqaD: Klingon — font loaded from /source/fonts/pIqaD-qolqoS */
html:lang(tlh) .page-reporters .uh-body {
  font-family: 'pIqaD qolqoS', sans-serif;
  line-height: 1.88;
}

/* ======================================================================================================
   13) Responsive
   ====================================================================================================== */

/* ======================================================================================================
   Mobile — vertical pager (max-width: 768px)
   The flipbook engine is hidden. A vertical scroll-snap pager takes over.
   The table fills the full viewport. Pages are centred with thin side strips.
   ====================================================================================================== */

@media (max-width: 768px) {

  .page-reporters .storybook-reader-stage-wrap,
  .page-reporters .storybook-reader-controls,
  .page-reporters .storybook-reader-state {
    display: none !important;
  }

  /* Section becomes full-viewport table surface.
     margin-left: calc(-50vw + 50%) breaks out of any centred parent container.
     position:relative + overflow:hidden contains the pager and dots. */
  .page-reporters .reporters-storybook {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    aspect-ratio: unset;
    height: 100svh;
    min-height: unset;
    padding: 0;
    overflow: hidden;
    position: relative;
    background-image: url('/assets/images/reporters/partials/unseen-hands-table.webp');
    background-size: cover;
    background-position: center center;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    margin-top: 1.5rem;
    height: calc(100svh - 1.5rem);
    padding-top: 1.5rem;
  }

  /* Vertical pager — absolutely fills section, cannot overflow boundary.
     scroll-padding-top: 60svh means the snap point is 60% down the viewport —
     user must scroll the current slide more than halfway out before snap fires. */
  .page-reporters .sb-mobile-pager {
    position: absolute;
    inset: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    /* scroll-snap-type removed — free scroll only */
    scroll-padding-top: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-reporters .sb-mobile-pager::-webkit-scrollbar { display: none; }

  /* Slide sizes tightly to its paper content. No min-height — no artificial gaps. */
  .page-reporters .sb-mobile-slide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  /* Paper page — flex column so .uh-page can centre vertically with justify-content.
     min-height set by JS from JSON. No hardcoded dimensions. */
  .page-reporters .sb-mobile-page {
    width: min(92vw, 28rem);
    background: var(--sdx-surface-aged-paper);
    border-radius: 2px;
    filter:
      drop-shadow(0 0.5rem 2rem   rgba(0, 0, 0, 0.60))
      drop-shadow(0 0.125rem 0.5rem rgba(0, 0, 0, 0.40));
    overflow: visible;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  /* Cover and back cover — all image values set by JS from JSON surface entry.
     aspect-ratio, background-size and background-position are all inline styles.
     Adding a new book requires only JSON changes — no CSS changes needed. */
  .page-reporters .sb-mobile-slide--cover .sb-mobile-page,
  .page-reporters .sb-mobile-slide--backcover .sb-mobile-page {
    min-height: unset;
    width: min(92vw, 28rem);
    background-repeat: no-repeat;
    background-color: transparent;
    overflow: hidden;
  }


  /* Map slide — paper aspect ratio matches rotated landscape image.
     COVER_RATIO 0.6330: portrait height = paper_width / 0.6330.
     aspect-ratio 6330/10000 gives the correct portrait proportions.
     min-height overridden so no blank space appears above or below. */
  .page-reporters .sb-mobile-slide--map .sb-mobile-page {
    min-height: unset;
    aspect-ratio: 633 / 1000;
    overflow: hidden;
    position: relative;
    padding: 0;
  }

  .page-reporters .sb-mobile-map-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 158%;
    height: 63.3%;
    transform: translate(-50%, -50%) rotate(90deg);    /* CW */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .page-reporters .sb-mobile-map-inner--reverse {
    transform: translate(-50%, -50%) rotate(-90deg);   /* CCW */
  }

  /* Chapter end image slide — images have proper alpha; aged-paper surface shows through */
  .page-reporters .sb-mobile-slide--image .sb-mobile-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Remove desktop padding on mobile — no band visible */
  .page-reporters .sb-mobile-slide--image .uh-end-image-page {
    padding: 0;
  }
  /* .uh-page fills the paper flex column.
     flex: 1 expands it to fill the full min-height.
     Generous padding gives old-paperback breathing room.
     Text pages start from top (flex-start). Centred pages
     (.uh-page--centered) keep their own justify-content:center. */
  /* flex:1 fills the paper min-height. padding gives old-paperback breathing room.
     justify-content and align-items NOT set here — page-type classes own their alignment. */
  .page-reporters .sb-mobile-page .uh-page {
    flex: 1;
    padding: 6.5rem 2.5rem;
    height: auto;
    overflow: visible;
  }

  .page-reporters .sb-mobile-slide--image .uh-end-image-scrim {
    display: none;
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
      transparent              50%,
      rgba(139, 90, 40, 0.08)  75%,
      rgba(100, 60, 20, 0.18) 100%);
    pointer-events: none;
    z-index: 2;
  }
  .page-reporters .sb-mobile-slide--image .uh-end-image-img {
    position: relative;
    width: 85%;
    aspect-ratio: 4 / 3;
    display: block;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    filter: sepia(0.45) brightness(0.92) contrast(1.05);
  }
  .page-reporters .sb-mobile-slide--image .uh-end-image-caption {
    position: relative;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: rgba(30, 18, 8, 0.65);
    text-align: center;
    margin-top: 1.25rem;
    z-index: 2;
  }

  /* Page indicator dots — absolute inside section, above pager.
     pointer-events: none so they never block taps. */
  .page-reporters .sb-mobile-dots {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
    z-index: 200;
    pointer-events: none;
    padding: 0.25rem 0.5rem;
    background: rgba(12, 6, 2, 0.50);
    border-radius: 100px;
  }
  .page-reporters .sb-mobile-dot {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 100px;
    background: rgba(200, 155, 60, 0.35);
    transition: background 0.2s, transform 0.2s;
  }
  .page-reporters .sb-mobile-dot--active {
    background: rgba(200, 155, 60, 0.90);
    transform: scale(1.4);
  }

  /* Side navigation strips — transparent zones over the table texture.
     Positioned absolute inside the section, either side of the paper.
     Touch events on these strips scroll the pager or tap to navigate. */
  .page-reporters .sb-nav-strip {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - min(92vw, 28rem)) / 2);
    z-index: 50;
    touch-action: none;  /* we handle touch manually */
  }

  .page-reporters .sb-nav-strip--left  { left: 0; }
  .page-reporters .sb-nav-strip--right { right: 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   v2 engine (.sdx-engine-v2) — flowable density.
   v2 does NOT compact (text never shrinks), so this page padding is the ONLY
   density lever — it changes how many full-size paragraphs fit per page, never
   the text size. Reduced from 6rem so the Foreword fits ~2 readable pages.
   The v2 probe carries .sdx-engine-v2, so resolvePageBox measures the same
   padding → measure == render. Default engine (no flag) keeps the original 6rem.
   Tune this one value up (looser) or down (denser) as desired.
   ────────────────────────────────────────────────────────────────────────── */
.page-reporters.sdx-engine-v2 .uh-page {
  /* Generous TOP margin for narrative text pages (3.5rem); tighter bottom (2rem).
     Asymmetric on purpose: the §5.1 trailing-page rule handles short tails, so the
     bottom needn't be large, but text should sit a comfortable way down from the
     top edge. Overrides the base `padding` shorthand's top/bottom; left/right stay
     2.5rem. (Earlier symmetric 2rem made the top read too tight.) */
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}