:root {
    --bg: #faf6ef;
    --paper: #fffdf8;
    --text: #1c1813;
    --text-soft: #4a4036;
    --muted: #8a7c6a;
    --rule: rgba(28, 24, 19, 0.10);
    --chrome-bg: rgba(250, 246, 239, 0.92);
    --accent: #8a5a2b;
    --hint-bg: rgba(28, 24, 19, 0.78);
    --hint-fg: #faf6ef;
    --progress-track: rgba(28, 24, 19, 0.10);
    --progress-fill: #8a5a2b;

    --book-font: "Lora", "Georgia", "Times New Roman", serif;
    --book-size: 18px;
    --book-leading: 1.7;
    --side-pad: 28px;
    --page-gap: 56px;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.theme-sepia {
    --bg: #f4ecd8;
    --paper: #f7f0dc;
    --text: #2b2418;
    --text-soft: #5a4d36;
    --muted: #8c7a5d;
    --rule: rgba(43, 36, 24, 0.12);
    --chrome-bg: rgba(244, 236, 216, 0.94);
    --accent: #7a5a32;
    --progress-track: rgba(43, 36, 24, 0.12);
    --progress-fill: #7a5a32;
  }

  body.theme-dark {
    --bg: #14110d;
    --paper: #1b1813;
    --text: #d8cfc0;
    --text-soft: #ada494;
    --muted: #756a5a;
    --rule: rgba(216, 207, 192, 0.10);
    --chrome-bg: rgba(20, 17, 13, 0.94);
    --accent: #c9a875;
    --hint-bg: rgba(216, 207, 192, 0.92);
    --hint-fg: #14110d;
    --progress-track: rgba(216, 207, 192, 0.12);
    --progress-fill: #c9a875;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    transition: background 240ms ease, color 240ms ease;
  }
  /* Chrome (top/bottom bars, controls, nav) stays unselectable so swipes
     and taps don't accidentally start a selection. Reading text IS
     selectable so users can copy quotes. */
  .topbar, .bottombar, .nav-top, .nav-arrow, .page-btn, .scroll-hint,
  .hint-toast, .filters, .filter-chip, .text-btn, .iconbtn {
    user-select: none;
    -webkit-user-select: none;
  }
  .page-content, .story-card, .story-card-body, .info-content,
  .info-header, .story-head {
    user-select: text;
    -webkit-user-select: text;
  }

  #root {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--bg);
    overflow: hidden;
  }

  /* ---------- COVER ---------- */
  .cover-link {
    display: block;
    position: absolute;
    inset: 0;
    text-decoration: none;
    color: inherit;
  }
  .cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(20px + var(--safe-top)) 32px calc(28px + var(--safe-bottom));
    background:
      radial-gradient(120% 70% at 50% 10%, rgba(255,255,255,0.6), transparent 60%),
      var(--bg);
    overflow-y: auto;
  }
  body.theme-dark .cover {
    background:
      radial-gradient(120% 70% at 50% 10%, rgba(255,255,255,0.04), transparent 60%),
      var(--bg);
  }
  .cover-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px;
  }
  .cover-top .ornament {
    flex: 1;
    height: 1px;
    background: var(--rule);
    margin: 0 12px;
  }
  .cover-image {
    width: min(70%, 260px);
    height: min(56vh, 340px);
    margin: 10px 0 24px;
    border-radius: 4px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 10px 30px -8px rgba(28, 24, 19, 0.28),
      0 30px 60px -20px rgba(28, 24, 19, 0.22);
    overflow: hidden;
    background: var(--paper);
    position: relative;
    flex-shrink: 0;
  }
  body.theme-dark .cover-image {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 10px 30px -8px rgba(0, 0, 0, 0.6),
      0 30px 60px -20px rgba(0, 0, 0, 0.5);
  }
  .cover-image image-slot {
    width: 100%;
    height: 100%;
    display: block;
  }
  .cover-title-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 4px;
  }
  .cover-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .cover-title {
    font-family: "Cormorant Garamond", "Lora", serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(26px, 6.6vw, 36px);
    line-height: 1.12;
    color: var(--text);
    text-wrap: balance;
    max-width: 20ch;
    margin: 0;
  }
  .cover-title::before { content: "\201E"; }
  .cover-title::after  { content: "\201D"; }
  .cover-subtitle {
    font-family: "Lora", serif;
    font-size: clamp(14px, 3.6vw, 17px);
    font-style: italic;
    color: var(--text-soft);
    margin-top: 14px;
    max-width: 24ch;
    line-height: 1.5;
    text-wrap: balance;
  }
  .cover-flourish {
    margin: 18px 0 16px;
    color: var(--accent);
    font-size: 18px;
    letter-spacing: 0.4em;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cover-flourish::before, .cover-flourish::after {
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    background: var(--accent);
    opacity: 0.5;
  }
  .cover-cta {
    margin-top: auto;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--rule);
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--paper);
    transition: transform 200ms ease, background 200ms ease, color 200ms ease;
    cursor: pointer;
  }
  .cover-cta:active { transform: scale(0.97); }
  .cover-meta {
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* ---------- READER ---------- */
  .reader {
    position: absolute;
    inset: 0;
    background: var(--bg);
    display: flex;
    flex-direction: column;
  }

  /* top chrome */
  .topbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: calc(8px + var(--safe-top)) 12px 8px;
    height: calc(48px + var(--safe-top));
    background: var(--chrome-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
  }
  .topbar-controls {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .text-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-family: "Lora", serif;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    line-height: 1;
    min-width: 32px;
    transition: background 150ms ease, opacity 150ms ease;
  }
  .text-btn:active { background: var(--rule); }
  .text-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
  .text-btn.size-sm { font-size: 13px; }
  .text-btn.size-lg { font-size: 18px; font-weight: 500; }
  .iconbtn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    transition: background 150ms ease;
  }
  .iconbtn:active { background: var(--rule); }
  .iconbtn.aa {
    font-family: "Lora", serif;
    font-weight: 500;
    font-size: 18px;
  }
  .iconbtn svg { width: 20px; height: 20px; }
  /* Theme toggle: show sun in dark mode, moon in light mode */
  .theme-toggle .icon-moon { display: inline-block; }
  .theme-toggle .icon-sun  { display: none; }
  body.theme-dark .theme-toggle .icon-moon { display: none; }
  body.theme-dark .theme-toggle .icon-sun  { display: inline-block; }
  .topbar-title {
    text-align: center;
    font-family: "Lora", serif;
    font-size: 13px;
    font-style: italic;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* the page-flow container */
  .frame {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: var(--bg);
  }
  .flow {
    position: absolute;
    inset: 0;
    padding: 26px var(--side-pad) 22px;
    column-width: 99999px;
    column-gap: var(--page-gap);
    column-fill: auto;
    font-family: var(--book-font);
    font-size: var(--book-size);
    line-height: var(--book-leading);
    color: var(--text);
    transition: transform 360ms cubic-bezier(.22,.78,.24,1);
    will-change: transform;
  }
  .flow p {
    margin: 0 0 0.85em 0;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
    orphans: 2;
    widows: 2;
  }
  .flow p:first-child::first-letter {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 3.4em;
    line-height: 0.9;
    float: left;
    padding: 0.08em 0.12em 0 0;
    color: var(--accent);
  }
  .flow .break {
    text-align: center;
    color: var(--muted);
    letter-spacing: 0.6em;
    margin: 1.4em 0 1.4em 0.6em;
    font-size: 0.9em;
    break-inside: avoid;
  }
  .flow .end-mark {
    break-before: column;
    text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 500;
    color: var(--muted);
    padding-top: 38vh;
  }
  .flow .end-mark .word {
    font-size: 2.2em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .flow .end-mark .ornament {
    margin-top: 18px;
    font-size: 18px;
    color: var(--accent);
    opacity: 0.7;
  }

  /* tap zones (left/right/center) */
  .tapzones {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 28% 44% 28%;
    z-index: 3;
  }
  .tapzones > div { cursor: pointer; }

  /* visible nav arrows on each side */
  .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--chrome-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.2);
    opacity: 0.55;
    transition: opacity 200ms ease, transform 200ms ease, background 160ms ease;
  }
  .nav-arrow:hover { opacity: 1; }
  .nav-arrow:active { transform: translateY(-50%) scale(0.92); opacity: 1; }
  .nav-arrow[disabled] {
    opacity: 0.15;
    cursor: default;
    pointer-events: none;
  }
  .nav-arrow.prev { left: 8px; }
  .nav-arrow.next { right: 8px; }
  .nav-arrow svg { width: 18px; height: 18px; }
  body.theme-dark .nav-arrow {
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.55);
  }
  @media (max-width: 380px) {
    .nav-arrow { width: 38px; height: 38px; }
    .nav-arrow.prev { left: 4px; }
    .nav-arrow.next { right: 4px; }
  }

  /* bottom chrome */
  .bottombar {
    position: relative;
    z-index: 4;
    background: var(--chrome-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--rule);
    padding: 10px 12px calc(12px + var(--safe-bottom));
    flex-shrink: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
  }
  .bottombar-center {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 2px 6px;
  }
  .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    background: var(--accent);
    color: var(--paper);
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
    font: inherit;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(28, 24, 19, 0.25);
    white-space: nowrap;
  }
  .page-btn.prev,
  span.page-btn.prev {
    width: 44px;
    padding: 0;
    gap: 0;
  }
  .page-btn:hover { filter: brightness(1.08); }
  .page-btn:active { transform: scale(0.94); }
  .page-btn svg { width: 18px; height: 18px; stroke-width: 2.2; }
  .page-btn.disabled,
  span.page-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--rule);
    box-shadow: none;
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
  }
  body.theme-dark .page-btn { color: #1c1813; }
  body.theme-dark span.page-btn { color: var(--muted); }

  /* "Next story" variant for the very last page — visually distinct from
     in-story page navigation so the reader knows this jumps to a NEW
     story, not the next page of the current one. */
  a.page-btn.next-story {
    background: var(--paper);
    color: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: none;
  }
  a.page-btn.next-story:hover {
    background: var(--accent);
    color: var(--paper);
    filter: none;
  }
  body.theme-dark a.page-btn.next-story {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
  }
  body.theme-dark a.page-btn.next-story:hover {
    background: var(--accent);
    color: #1c1813;
  }
  @keyframes nextBtnPulse {
    0%, 100% { box-shadow: 0 4px 12px -4px rgba(28, 24, 19, 0.25), 0 0 0 0 rgba(138, 90, 43, 0.6); }
    50%      { box-shadow: 0 4px 12px -4px rgba(28, 24, 19, 0.25), 0 0 0 10px rgba(138, 90, 43, 0); }
  }
  a.page-btn.next.attention {
    animation: nextBtnPulse 1.4s ease-out 1.5s 1 both;
  }
  @media (prefers-reduced-motion: reduce) {
    a.page-btn.next.attention { animation: none; }
  }
  .progress {
    position: relative;
    height: 4px;
    background: var(--progress-track);
    border-radius: 999px;
    overflow: visible;
  }
  .progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--progress-fill);
    border-radius: 999px;
  }
  .progress-thumb {
    position: absolute;
    top: 50%;
    left: var(--p, 0%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--progress-fill);
    box-shadow: 0 0 0 3px var(--chrome-bg);
    margin-left: -5px;
    margin-top: -5px;
    pointer-events: none;
  }
  .meta {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
  }
  .meta .current {
    font-family: "Lora", serif;
    font-size: 13px;
    color: var(--text);
  }
  .meta .of { color: var(--muted); font-style: italic; }
  .meta .total { color: var(--muted); }
  .meta .dot { margin: 0 2px; color: var(--rule); }
  .meta .time { color: var(--muted); }

  /* ---------- SETTINGS DRAWER ---------- */
  .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9;
    transition: background 240ms ease;
  }
  .backdrop.open {
    background: rgba(0, 0, 0, 0.35);
  }
  body.theme-dark .backdrop.open { background: rgba(0, 0, 0, 0.55); }

  .drawer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: var(--paper);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 12px 22px calc(22px + var(--safe-bottom));
    box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(.22,.78,.24,1);
    max-height: 86%;
    overflow-y: auto;
  }
  .drawer.open { transform: translateY(0); }
  .drawer-handle {
    width: 38px;
    height: 4px;
    background: var(--rule);
    border-radius: 999px;
    margin: 4px auto 14px;
  }
  .drawer h3 {
    margin: 0 0 18px;
    font-family: "Lora", serif;
    font-weight: 500;
    font-size: 18px;
    color: var(--text);
    letter-spacing: 0.01em;
  }
  .setting-row {
    margin-bottom: 22px;
  }
  .setting-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }

  /* segmented control */
  .seg {
    display: flex;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
  }
  .seg button {
    flex: 1;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 10px 8px;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    transition: background 160ms ease, color 160ms ease;
  }
  .seg button.active {
    background: var(--paper);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 8px -2px rgba(0,0,0,0.08);
  }
  body.theme-dark .seg button.active { box-shadow: 0 0 0 1px var(--rule) inset; }
  .seg button:active { transform: scale(0.98); }
  .seg button[disabled] { opacity: 0.4; cursor: not-allowed; }

  .seg.size button { font-size: 18px; font-weight: 500; padding: 12px 8px; }
  .seg.size .size-aa-sm { font-size: 13px; }
  .seg.size .size-aa-md { font-size: 16px; }
  .seg.size .size-aa-lg { font-size: 20px; }

  /* font seg */
  .seg.font .opt-serif { font-family: "Lora", serif; }
  .seg.font .opt-sans  { font-family: "Source Sans 3", sans-serif; }

  /* theme swatches */
  .theme-row {
    display: flex;
    gap: 10px;
  }
  .theme-swatch {
    flex: 1;
    appearance: none;
    border: 1px solid var(--rule);
    background: transparent;
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    transition: border-color 160ms ease, background 160ms ease;
  }
  .theme-swatch.active {
    border-color: var(--accent);
    background: var(--bg);
  }
  .theme-swatch:active { transform: scale(0.98); }
  .swatch-disc {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Lora", serif;
    font-size: 15px;
    font-style: italic;
  }
  .swatch-disc.light { background: #fffdf8; color: #1c1813; }
  .swatch-disc.sepia { background: #f4ecd8; color: #2b2418; }
  .swatch-disc.dark  { background: #14110d; color: #d8cfc0; }
  .theme-swatch span { font-size: 12px; color: var(--text-soft); letter-spacing: 0.02em; }

  /* ---------- SUBTLE HINT TOAST ---------- */
  .hint-toast {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 6;
    background: var(--hint-bg);
    color: var(--hint-fg);
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease, transform 320ms ease;
  }
  .hint-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  .hint-toast.show.out {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  .hint-toast .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 11px;
  }
  body.theme-dark .hint-toast .kbd { background: rgba(0, 0, 0, 0.12); }

  /* ---------- SWIPE HINT (legacy modal — kept but unused) ---------- */
  .hint {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: pointer;
    animation: hintIn 280ms ease;
  }
  @keyframes hintIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .hint-card {
    background: var(--paper);
    color: var(--text);
    border-radius: 16px;
    padding: 26px 24px 22px;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
  }
  .hint-animation {
    position: relative;
    height: 88px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hint-page-stack {
    width: 110px;
    height: 70px;
    position: relative;
  }
  .hint-page {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--rule);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.12);
  }
  .hint-page.b { transform: translate(6px, 6px); opacity: 0.6; }
  .hint-page.a {
    animation: pageFlip 1.6s ease-in-out infinite;
    transform-origin: left center;
    z-index: 2;
  }
  .hint-page .lines {
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .hint-page .line {
    height: 3px;
    background: var(--rule);
    border-radius: 99px;
  }
  .hint-page .line:nth-child(1) { width: 70%; }
  .hint-page .line:nth-child(2) { width: 92%; }
  .hint-page .line:nth-child(3) { width: 80%; }
  .hint-page .line:nth-child(4) { width: 88%; }
  .hint-page .line:nth-child(5) { width: 50%; }

  @keyframes pageFlip {
    0%   { transform: translateX(0) rotateY(0); }
    50%  { transform: translateX(-60%) rotateY(-65deg); }
    100% { transform: translateX(-100%) rotateY(0); opacity: 0; }
  }

  .hint-hand {
    position: absolute;
    bottom: 8px;
    right: 6px;
    font-size: 28px;
    animation: handSwipe 1.6s ease-in-out infinite;
  }
  @keyframes handSwipe {
    0%   { transform: translateX(0) translateY(0); opacity: 0.9; }
    40%  { transform: translateX(-44px) translateY(0); opacity: 1; }
    70%  { transform: translateX(-44px) translateY(0); opacity: 0.4; }
    100% { transform: translateX(0) translateY(0); opacity: 0; }
  }

  .hint-title {
    font-family: "Lora", serif;
    font-size: 17px;
    margin-bottom: 6px;
    color: var(--text);
  }
  .hint-sub {
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.45;
    margin-bottom: 16px;
  }
  .hint-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
  }
  .hint-row .gesture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .hint-row .icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text);
  }
  .hint-dismiss {
    appearance: none;
    border: 0;
    background: var(--accent);
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  body.theme-dark .hint-dismiss { color: #14110d; }

  /* Desktop: book-like centered layout */
  @media (min-width: 760px) {
    body {
      background: #e9e2d2;
    }
    body.theme-dark { background: #0a0907; }
    body.theme-light { background: #efe9dd; }
    body > .cover-link,
    body.page-view > .reader {
      max-width: 480px !important;
      margin: 0 auto !important;
      box-shadow:
        0 0 0 1px var(--rule),
        0 30px 80px -30px rgba(0,0,0,0.35);
    }
  }

  /* Hide selection caret while reading */
  .flow ::selection { background: rgba(122, 90, 50, 0.22); }

  /* ============== PAGE-VIEW (multi-html version) ============== */
  /* Each story page is now its own HTML document. Body scrolls naturally;
     top/bottom chrome stick to the viewport edges. */

  /* Story head: image + title + subtitle at the top of page-01, replacing
     the standalone cover when readers arrive from an external list. */
  .story-head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 0 28px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    overflow: visible;
  }
  /* Soft colored glow behind the book cover — same recipe as the hero
     blob on the stories list. Centered under the book, rotated -45°,
     bleeds past the column edges. */
  .story-head::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 200%;
    height: 90%;
    top: -5%;
    left: 30%;
    transform: translate(-50%, 0) rotate(-45deg);
    transform-origin: center;
    background:
      radial-gradient(45% 55% at 30% 40%, var(--blob-1, #d4a373) 0%, transparent 65%),
      radial-gradient(40% 50% at 72% 60%, var(--blob-2, #8a5a2b) 0%, transparent 60%),
      radial-gradient(55% 70% at 50% 50%, var(--blob-3, rgba(217, 138, 60, 0.55)) 0%, transparent 75%);
    filter: blur(64px);
    opacity: 0.6;
  }
  body.theme-dark .story-head::before {
    background:
      radial-gradient(45% 55% at 30% 40%, var(--blob-1, #b07b3a) 0%, transparent 65%),
      radial-gradient(40% 50% at 72% 60%, var(--blob-2, #5b3a1c) 0%, transparent 60%),
      radial-gradient(55% 70% at 50% 50%, var(--blob-3, rgba(176, 110, 50, 0.55)) 0%, transparent 75%);
    opacity: 0.7;
  }
  /* Lift the actual head content above the blob */
  .story-head .head-eyebrow,
  .story-head .head-image,
  .story-head .head-title,
  .story-head .head-subtitle,
  .story-head .head-flourish {
    position: relative;
    z-index: 1;
  }
  .story-head .head-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
  }
  .story-head .head-image {
    width: min(78%, 240px);
    aspect-ratio: 3 / 4;
    margin: 0 0 22px;
    border-radius: 2px 6px 6px 2px;
    overflow: visible;
    background: var(--paper);
    position: relative;
    flex-shrink: 0;
    box-shadow:
      /* page block: stacked offsets on the right edge */
      1px 0 0 rgba(255, 255, 255, 0.65),
      2px 0 0 rgba(0, 0, 0, 0.06),
      3px 0 0 rgba(255, 255, 255, 0.55),
      4px 0 0 rgba(0, 0, 0, 0.05),
      5px 0 0 rgba(255, 255, 255, 0.45),
      /* cast shadow */
      0 14px 36px -14px rgba(28, 24, 19, 0.4),
      0 30px 60px -28px rgba(28, 24, 19, 0.22);
  }
  body.theme-dark .story-head .head-image {
    box-shadow:
      1px 0 0 rgba(216, 198, 165, 0.55),
      2px 0 0 rgba(0, 0, 0, 0.5),
      3px 0 0 rgba(216, 198, 165, 0.5),
      4px 0 0 rgba(0, 0, 0, 0.5),
      5px 0 0 rgba(216, 198, 165, 0.45),
      0 14px 36px -14px rgba(0, 0, 0, 0.65),
      0 30px 60px -28px rgba(0, 0, 0, 0.55);
  }
  /* Soft binding-shadow on the left edge */
  .story-head .head-image::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 18px;
    background:
      linear-gradient(to right,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.16) 35%,
        rgba(0, 0, 0, 0) 100%),
      linear-gradient(to right,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0) 6%);
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    pointer-events: none;
    z-index: 2;
  }
  /* Diagonal cover sheen */
  .story-head .head-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.12) 78%,
      rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
  }
  .story-head .head-image image-slot,
  .story-head .head-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
  }
  .story-head .head-title {
    font-family: "Cormorant Garamond", "Lora", serif;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(22px, 5.4vw, 30px);
    line-height: 1.15;
    color: var(--text);
    text-wrap: balance;
    max-width: 20ch;
    margin: 0 auto 10px;
  }
  .story-head .head-subtitle {
    font-family: "Lora", serif;
    font-size: 13px;
    font-style: italic;
    color: var(--text-soft);
    max-width: 24ch;
    line-height: 1.5;
    text-wrap: balance;
    margin: 0;
  }
  .story-head .head-flourish {
    margin-top: 16px;
    color: var(--accent);
    font-size: 14px;
    opacity: 0.7;
    letter-spacing: 0.3em;
  }
  .story-head .head-meta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }
  .story-head .head-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .story-head .head-meta svg {
    width: 13px;
    height: 13px;
    opacity: 0.85;
  }
  .story-head .head-meta .meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--rule);
  }
  .story-head + p.dropcap::first-letter {
    /* Dropcap still applies after the head — see existing rule below */
  }
  html, body.page-view, body.list-view {
    overflow: visible;
    height: auto;
    min-height: 100%;
  }
  body.page-view,
  body.list-view {
    overflow-x: hidden;
  }
  body.page-view .reader {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }
  body.page-view .topbar {
    position: sticky;
    top: 0;
  }
  body.page-view .bottombar {
    /* fixed to the visual-viewport bottom: tracks the mobile browser chrome
       in BOTH states (sticky-bottom left a gap on iOS when the toolbar hid).
       Centered + capped to match the 480px reader column on desktop. */
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 5;
    border-top: 0;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.page-view .page-content {
    flex: 1 1 auto;
    /* clear the fixed bottombar so the last lines aren't hidden behind it */
    padding-bottom: calc(104px + var(--safe-bottom));
  }
  /* No special desktop bottombar positioning needed — it inherits from the
     flex column inside the 480px-wide centered reader. */
  .page-content {
    padding: 26px var(--side-pad) 22px;
    font-family: var(--book-font);
    font-size: var(--book-size);
    line-height: var(--book-leading);
    color: var(--text);
    position: relative;
  }
  .page-content > p {
    margin: 0 0 0.85em 0;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
    orphans: 2;
    widows: 2;
  }
  .page-content > p.dropcap::first-letter {
    /* drop-cap only on the first page of the story */
  }
  body[data-page="1"] .page-content > p.dropcap::first-letter {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 3.4em;
    line-height: 0.9;
    float: left;
    padding: 0.08em 0.12em 0 0;
    color: var(--accent);
  }
  .page-content .break {
    text-align: center;
    color: var(--muted);
    letter-spacing: 0.6em;
    margin: 1.4em 0 1.4em 0.6em;
    font-size: 0.9em;
  }
  .page-content .end-mark.inline-end {
    text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 500;
    color: var(--muted);
    margin-top: 2.4em;
    margin-bottom: 1em;
  }
  .page-content .end-mark.inline-end .word {
    font-size: 2.2em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .page-content .end-mark.inline-end .ornament {
    margin-top: 14px;
    font-size: 18px;
    color: var(--accent);
    opacity: 0.7;
  }

  /* ============== END-OF-STORY block ============== */
  /* Replaces the old "vége ❦" with story recommendations + CTA to the
     stories list. Sits at the bottom of the final page. */
  .story-end {
    margin-top: 56px;
    padding-top: 36px;
    border-top: 1px solid var(--rule);
    text-align: center;
  }
  .story-end-mark {
    color: var(--accent);
    opacity: 0.65;
    font-size: 22px;
    letter-spacing: 0.4em;
    margin-bottom: 18px;
  }
  .story-end-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
  }
  .story-end-heading {
    font-family: "Cormorant Garamond", "Lora", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(26px, 6vw, 34px);
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 6px;
  }
  .story-end-sub {
    font-family: "Source Sans 3", sans-serif;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 auto 26px;
    max-width: 28ch;
  }
  .end-stories {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    margin-bottom: 28px;
  }
  .end-story-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 10px;
    border-radius: 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .end-story-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -10px rgba(28, 24, 19, 0.22);
  }
  .end-story-card:active { transform: translateY(0); }
  .end-story-image {
    width: 72px;
    height: 96px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
  }
  .end-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .end-story-image.placeholder {
    background:
      repeating-linear-gradient(135deg,
        var(--bg) 0 8px,
        rgba(138, 90, 43, 0.05) 8px 16px);
  }
  .end-story-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    font-family: "Source Sans 3", sans-serif;
  }
  .end-story-eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .end-story-title {
    font-family: "Lora", serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .end-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--paper);
    text-decoration: none;
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: filter 160ms ease, transform 160ms ease;
  }
  .end-cta:hover { filter: brightness(1.08); }
  .end-cta:active { transform: scale(0.97); }
  .end-cta svg { width: 14px; height: 14px; }
  body.theme-dark .end-cta { color: #1c1813; }
  /* Hide nav-arrow on the start (cover) and end (last page's next) cleanly */
  body.page-view .page-btn.disabled,
  body.page-view span.page-btn {
    opacity: 0.22;
    pointer-events: none;
    cursor: default;
  }
  /* Hide scrollbars for an unobtrusive reading surface */
  html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar { display: none; width: 0; height: 0; }

  /* Fade gradient ABOVE the bottombar so text dissolves into it. Attached
     to the bottombar so it can never be "detached" from the bottom edge. */
  body.page-view .bottombar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -48px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 100%);
    pointer-events: none;
  }

  /* Scroll affordance: a subtle "scroll further" chip above the bottombar
     that shows only when the page has more content below the fold. JS
     toggles the .show class. When the reader has reached the bottom of
     the page, the chip transforms into a "next page" prompt via the
     .at-end variant. */
  .scroll-hint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 14px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--text-soft);
    border: 1px solid var(--rule);
    box-shadow: 0 6px 18px -8px rgba(28, 24, 19, 0.25);
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease, background 240ms ease, color 240ms ease, border-color 240ms ease;
  }
  .scroll-hint.show {
    opacity: 0.95;
    animation: scrollHintBob 1.8s ease-in-out infinite;
  }
  .scroll-hint.at-end {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
    box-shadow: 0 6px 22px -6px rgba(138, 90, 43, 0.55);
  }
  .scroll-hint.at-end svg {
    color: var(--paper);
  }
  body.theme-dark .scroll-hint.at-end { color: #1c1813; }
  body.theme-dark .scroll-hint.at-end svg { color: #1c1813; }
  .scroll-hint svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
  }
  .scroll-hint .hint-text-next,
  .scroll-hint .hint-icon-next { display: none; }
  .scroll-hint.at-end .hint-text-scroll,
  .scroll-hint.at-end .hint-icon-down { display: none; }
  .scroll-hint.at-end .hint-text-next,
  .scroll-hint.at-end .hint-icon-next { display: inline-block; }
  @keyframes scrollHintBob {
    0%, 100% {
      opacity: 0.95;
      transform: translateX(-50%) translateY(0);
    }
    50% {
      opacity: 0.95;
      transform: translateX(-50%) translateY(3px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-hint.show { animation: none; }
  }
  /* hint toast bottom in fixed-positioned bodies */
  body.page-view .hint-toast {
    position: fixed;
    bottom: 78px;
  }

  /* ============== INFO PAGES (about / contact / terms / privacy) ============== */
  body.info-view {
    font-family: "Source Sans 3", sans-serif;
  }
  .info-shell {
    max-width: 680px;
    margin: 0 auto;
    padding: calc(20px + var(--safe-top)) 22px 60px;
  }
  .info-shell .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0 18px;
    gap: 12px;
  }
  .info-shell .nav-top .brand {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 20px;
    color: var(--text);
    flex: 1;
    text-align: center;
  }
  .info-header {
    padding: 24px 0 28px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--rule);
  }
  .info-eyebrow {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .info-heading {
    font-family: "Cormorant Garamond", "Lora", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(32px, 7vw, 48px);
    line-height: 1.05;
    color: var(--text);
    margin: 0 0 12px;
  }
  .info-lede {
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.5;
    max-width: 56ch;
    margin: 0;
  }
  .info-content {
    font-family: "Lora", serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    padding-top: 14px;
  }
  .info-content > * + * { margin-top: 14px; }
  .info-content h2 {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    color: var(--text);
    margin: 36px 0 4px;
  }
  .info-content h2:first-child { margin-top: 0; }
  .info-content h3 {
    font-family: "Lora", serif;
    font-weight: 500;
    font-size: 17px;
    color: var(--text);
    margin: 26px 0 4px;
  }
  .info-content p {
    margin: 0;
    text-wrap: pretty;
  }
  .info-content ul, .info-content ol {
    padding-left: 22px;
    margin: 0;
  }
  .info-content li + li { margin-top: 6px; }
  .info-content a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .info-content blockquote {
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 18px;
    margin: 18px 0;
    font-style: italic;
    color: var(--text-soft);
  }
  .info-content hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 32px 0;
  }
  .info-section {
    margin-top: 36px;
  }
  /* Contact form */
  .info-form {
    display: grid;
    gap: 14px;
    max-width: 480px;
    margin: 8px 0 28px;
  }
  .info-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .info-form input,
  .info-form textarea {
    font: inherit;
    font-family: "Lora", serif;
    font-size: 16px;
    color: var(--text);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 12px 14px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    text-transform: none;
    letter-spacing: 0;
  }
  .info-form input:focus,
  .info-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(122, 90, 50, 0.12);
  }
  .info-form textarea {
    min-height: 140px;
    resize: vertical;
  }
  .info-form button {
    appearance: none;
    border: 0;
    background: var(--accent);
    color: var(--paper);
    font: inherit;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 999px;
    cursor: pointer;
    justify-self: start;
    transition: filter 160ms ease, transform 160ms ease;
  }
  .info-form button:hover { filter: brightness(1.08); }
  .info-form button:active { transform: scale(0.97); }
  body.theme-dark .info-form button { color: #1c1813; }

  .contact-channels {
    display: grid;
    gap: 14px;
    margin: 8px 0 32px;
  }
  .contact-channel {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
    transition: background 160ms ease, transform 160ms ease;
  }
  .contact-channel:hover { background: var(--bg); }
  .contact-channel:active { transform: scale(0.99); }
  .info-content a.contact-channel,
  .info-content a.contact-channel:hover { text-decoration: none; }
  .contact-channel .icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contact-channel .icon svg { width: 18px; height: 18px; }
  .contact-channel .label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .contact-channel .value {
    font-family: "Lora", serif;
    font-size: 16px;
    color: var(--text);
  }
  /* Footer reuse */
  body.info-view .site-footer {
    margin-top: 80px;
    padding: 32px 4px;
    border-top: 1px solid var(--rule);
    text-align: center;
  }
  body.info-view .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 18px;
  }
  body.info-view .site-footer-links a {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 13px;
  }
  body.info-view .site-footer-links a:hover { color: var(--text); }
  body.info-view .site-footer-copy {
    font-size: 12px;
    color: var(--muted);
  }
  /* Body overflow for info-view */
  html, body.info-view {
    overflow: visible;
    height: auto;
    min-height: 100%;
  }
  body.info-view {
    overflow-x: hidden;
  }
  @media (min-width: 760px) {
    body.info-view { background: #e9e2d2; }
    body.info-view.theme-dark { background: #0a0907; }
  }


/* ============== LIST VIEW (from stories.html) ============== */
  body.list-view { font-family: "Source Sans 3", sans-serif; }
  .list-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px 60px;
  }
  .list-header {
    padding: 18px 4px 28px;
  }
  .list-eyebrow {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .list-heading {
    font-family: "Cormorant Garamond", "Lora", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(32px, 7vw, 44px);
    line-height: 1.05;
    color: var(--text);
    margin: 0 0 10px;
  }
  .list-sub {
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.5;
    max-width: 42ch;
  }
  .filters {
    display: flex;
    gap: 8px;
    margin: 22px 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter-chip {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--text-soft);
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
  }
  .filter-chip.active {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
  }
  body.theme-dark .filter-chip.active { color: #1c1813; }
  .story-list {
    display: flex;
    flex-direction: column;
    /* No gap — rows are separated by their own border-top */
  }
  .story-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 16px 4px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    transition: background 160ms ease;
  }
  .story-card:first-child { border-top: 0; }
  .story-card:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
  }
  .story-card:hover .story-card-title { color: var(--accent); }
  .story-card:active { opacity: 0.7; }
  .story-card-image {
    width: 80px;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg);
    position: relative;
    flex-shrink: 0;
  }
  .story-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .story-card-image.placeholder {
    background:
      repeating-linear-gradient(135deg,
        var(--bg) 0 8px,
        rgba(138, 90, 43, 0.05) 8px 16px);
  }
  .story-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .story-card-eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .story-card-title {
    font-family: "Lora", serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .story-card-meta {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .story-card-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--rule);
  }
  .meta-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
  }
  .meta-views svg {
    width: 12px;
    height: 12px;
    opacity: 0.8;
  }
  .list-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 36px;
    padding: 8px 0;
  }
  .pg-btn,
  .pg-num,
  .pg-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-soft);
    text-decoration: none;
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  }
  .pg-btn { width: 38px; padding: 0; border-color: var(--rule); }
  .pg-btn svg { width: 16px; height: 16px; }
  .pg-num:hover,
  .pg-btn:hover { background: var(--paper); color: var(--text); }
  .pg-num:active,
  .pg-btn:active { transform: scale(0.94); }
  .pg-num.current {
    background: var(--accent);
    color: var(--paper);
    border-color: var(--accent);
    pointer-events: none;
  }
  body.theme-dark .pg-num.current { color: #1c1813; }
  .pg-btn.disabled,
  span.pg-btn {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }
  .pg-ellipsis {
    color: var(--muted);
    border: 0;
    background: transparent;
    pointer-events: none;
    min-width: 22px;
    padding: 0 2px;
  }
  @media (max-width: 380px) {
    .list-pagination { gap: 3px; }
    .pg-btn, .pg-num { min-width: 34px; height: 34px; font-size: 13px; }
  }
  .featured-tag {
    background: var(--accent);
    color: var(--paper);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    margin-right: 8px;
  }
  body.theme-dark .featured-tag { color: #1c1813; }

  /* ============== HERO featured story card ============== */
  .hero-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    margin: 18px 0 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--rule);
    /* Don't clip the blob — let it bleed out of the column */
    overflow: visible;
  }
  /* Soft colored glow centered under the book cover. Rotated ~40deg,
     blurred, and intentionally larger than its container so it spills
     past the page edges. */
  .hero-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    /* Mobile: book is centered → blob center = 50%. Width and height
       larger than the container so the blur spills out left/right. */
    width: 200%;
    height: 110%;
    top: -5%;
    left: 30%;
    transform: translate(-50%, 0) rotate(-45deg);
    transform-origin: center;
    background:
      radial-gradient(45% 55% at 30% 40%, var(--blob-1, #d4a373) 0%, transparent 65%),
      radial-gradient(40% 50% at 72% 60%, var(--blob-2, #8a5a2b) 0%, transparent 60%),
      radial-gradient(55% 70% at 50% 50%, var(--blob-3, rgba(217, 138, 60, 0.55)) 0%, transparent 75%);
    filter: blur(64px);
    opacity: 0.6;
  }
  body.theme-dark .hero-card::before {
    background:
      radial-gradient(45% 55% at 30% 40%, var(--blob-1, #b07b3a) 0%, transparent 65%),
      radial-gradient(40% 50% at 72% 60%, var(--blob-2, #5b3a1c) 0%, transparent 60%),
      radial-gradient(55% 70% at 50% 50%, var(--blob-3, rgba(176, 110, 50, 0.55)) 0%, transparent 75%);
    opacity: 0.7;
  }
  /* All hero-card children stack above the blob */
  .hero-image,
  .hero-body { position: relative; z-index: 1; }
  .hero-image {
    position: relative;
    width: min(70%, 260px);
    aspect-ratio: 3 / 4;
    margin: 8px auto 0;
    border-radius: 2px 6px 6px 2px;
    overflow: visible;
    background: var(--paper);
    box-shadow:
      /* page block: stacked offsets on the right edge */
      1px 0 0 rgba(255, 255, 255, 0.65),
      2px 0 0 rgba(0, 0, 0, 0.06),
      3px 0 0 rgba(255, 255, 255, 0.55),
      4px 0 0 rgba(0, 0, 0, 0.05),
      5px 0 0 rgba(255, 255, 255, 0.45),
      /* cast shadow */
      0 14px 36px -14px rgba(28, 24, 19, 0.4),
      0 30px 60px -28px rgba(28, 24, 19, 0.22);
  }
  body.theme-dark .hero-image {
    box-shadow:
      1px 0 0 rgba(216, 198, 165, 0.55),
      2px 0 0 rgba(0, 0, 0, 0.5),
      3px 0 0 rgba(216, 198, 165, 0.5),
      4px 0 0 rgba(0, 0, 0, 0.5),
      5px 0 0 rgba(216, 198, 165, 0.45),
      0 14px 36px -14px rgba(0, 0, 0, 0.65),
      0 30px 60px -28px rgba(0, 0, 0, 0.55);
  }
  .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }
  /* Soft binding-shadow on the left edge */
  .hero-image::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 18px;
    background:
      linear-gradient(to right,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.16) 35%,
        rgba(0, 0, 0, 0) 100%),
      linear-gradient(to right,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0) 6%);
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    pointer-events: none;
    z-index: 2;
  }
  /* Diagonal cover sheen */
  .hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.12) 78%,
      rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
  }
  .hero-tag {
    position: absolute;
    top: 12px;
    left: 22px;
    background: var(--accent);
    color: var(--paper);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    z-index: 3;
  }
  body.theme-dark .hero-tag { color: #1c1813; }
  .hero-body {
    padding: 28px 4px 0;
    text-align: center;
  }
  body.theme-dark .hero-tag { color: #1c1813; }
  .hero-body {
    padding: 28px 4px 0;
    text-align: center;
  }
  .hero-eyebrow {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  .hero-title {
    font-family: "Cormorant Garamond", "Lora", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 5.4vw, 32px);
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 12px;
    text-wrap: balance;
  }
  .hero-lede {
    font-family: "Lora", serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-soft);
    margin: 0 0 14px;
    text-wrap: pretty;
  }
  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 18px;
    font-variant-numeric: tabular-nums;
  }
  .hero-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--rule);
  }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--paper);
    font-family: "Source Sans 3", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: filter 160ms ease, transform 160ms ease;
  }
  .hero-card:hover .hero-cta { filter: brightness(1.08); }
  .hero-card:active .hero-cta { transform: scale(0.98); }
  .hero-cta svg { width: 14px; height: 14px; }
  body.theme-dark .hero-cta { color: #1c1813; }

  /* Section label between hero and list */
  .list-section-label {
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 0 10px;
    margin-top: 4px;
  }

  /* ============== Editorial pull-quote ============== */
  .pull-quote {
    position: relative;
    margin: 40px -20px 40px;
    padding: 56px 28px 40px;
    background:
      radial-gradient(120% 80% at 80% 10%, #c97a3a 0%, transparent 60%),
      radial-gradient(120% 80% at 10% 90%, #5b3a1c 0%, transparent 55%),
      #8a5a2b;
    color: #fbf4e6;
    text-align: left;
    overflow: hidden;
  }
  /* Subtle paper-grain texture using two soft layers */
  .pull-quote::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(115deg,
        rgba(255, 255, 255, 0.025) 0,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 3px),
      repeating-linear-gradient(45deg,
        rgba(0, 0, 0, 0.04) 0,
        rgba(0, 0, 0, 0.04) 1px,
        transparent 1px,
        transparent 4px);
    pointer-events: none;
  }
  .pull-quote-mark {
    position: absolute;
    top: 8px;
    left: 22px;
    font-family: "Cormorant Garamond", serif;
    font-size: 140px;
    line-height: 1;
    color: #fbf4e6;
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
  }
  .pull-quote-text {
    position: relative;
    font-family: "Cormorant Garamond", "Lora", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.25;
    margin: 0 0 20px;
    text-wrap: balance;
    color: #fbf4e6;
    z-index: 1;
  }
  .pull-quote-attr {
    position: relative;
    font-family: "Source Sans 3", sans-serif;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(251, 244, 230, 0.7);
    z-index: 1;
  }
  .pull-quote-attr::before {
    content: "— ";
    margin-right: 2px;
  }
  body.theme-dark .pull-quote {
    background:
      radial-gradient(120% 80% at 80% 10%, #a85a25 0%, transparent 60%),
      radial-gradient(120% 80% at 10% 90%, #3a1e0a 0%, transparent 55%),
      #6e4118;
  }
  @media (min-width: 720px) {
    .pull-quote {
      margin: 48px 0 48px;
      padding: 64px 48px 48px;
      border-radius: 12px;
    }
    .pull-quote-mark {
      top: 4px;
      left: 36px;
      font-size: 180px;
    }
  }

  @media (min-width: 760px) {
    .hero-card {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 36px;
      align-items: center;
    }
    .hero-image {
      width: 100%;
      max-width: 280px;
      margin: 0;
      justify-self: center;
    }
    .hero-body { padding: 0; text-align: left; }
    .hero-meta { justify-content: flex-start; }
    /* Desktop: book is in the LEFT column, so center the blob under it.
       Left column spans roughly 0..47% of the grid width — its center is
       at ~24% of the .hero-card. */
    .hero-card::before {
      width: 130%;
      height: 160%;
      top: -30%;
      left: 12%;
      transform: translate(-50%, 0) rotate(-45deg);
    }
  }
  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 12px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .nav-top .brand {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 20px;
    color: var(--text);
  }
  .settings-btn {
    appearance: none;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
    font-family: "Lora", serif;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  @media (min-width: 760px) {
    body { background: #e9e2d2; }
    body.theme-dark { background: #0a0907; }
  }
  .site-footer {
    margin-top: 60px;
    padding: 32px 4px;
    border-top: 1px solid var(--rule);
    text-align: center;
  }
  .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 18px;
  }
  .site-footer-links a {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.02em;
    transition: color 160ms ease;
  }
  .site-footer-links a:hover { color: var(--text); }
  .site-footer-copy {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--muted);
  }

/* ===== CONTENT MEDIA (картинки в тексте; стили Reboot сняты) ===== */
.page-content > p img,
.page-content > figure img,
.page-content > img,
.info-content img { max-width: 100%; height: auto; }
.page-content > figure,
.info-content figure { max-width: 100%; margin: 1.2em 0; }
.page-content > figure img,
.info-content figure img { display: block; margin: 0 auto; border-radius: 4px; }
.page-content .wp-caption, .info-content .wp-caption { max-width: 100% !important; }
.page-content .wp-caption-text, .info-content .wp-caption-text { font-size: .85em; color: var(--muted); text-align: center; margin-top: 6px; }
.page-content .aligncenter, .info-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.page-content .alignleft, .info-content .alignleft { float: left; margin: .3em 1.2em .8em 0; max-width: 50%; }
.page-content .alignright, .info-content .alignright { float: right; margin: .3em 0 .8em 1.2em; max-width: 50%; }

/* Кликабельный бренд */
a.brand{text-decoration:none;color:var(--text);}

/* Авторский byline (E-E-A-T) в шапке истории */
.head-byline{font-family:"Source Sans 3",sans-serif;font-size:12px;color:var(--muted);letter-spacing:.02em;margin-top:10px;}
.head-byline a{color:var(--text-soft);text-decoration:none;border-bottom:1px solid var(--rule);}
.head-byline a:hover{color:var(--text);}

/* Поднять мою мету/байлайн над цветным blob (::before z-index:0) */
.story-head .head-meta,
.story-head .head-byline{position:relative;z-index:1;}

/* blob должен якориться к шапке истории, а не к .reader */
.story-head{position:relative;}

/* === storyx: minimal story-end + next-story teaser (page-15 design) === */
.story-end.minimal { margin-top: 48px; padding-top: 0; border-top: 0; }
.story-end.minimal .story-end-mark { margin-bottom: 0; }
.next-teaser { position: relative; margin-top: 40px; padding-top: 0; border-top: 0; }
.next-teaser-body { position: relative; }
.next-teaser-body p { margin: 0 0 0.85em; }
.next-teaser-fade {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 6em; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 88%);
}
body.theme-dark .next-teaser-fade {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg) 88%);
}