/* READER — chapter reading typography + reader settings panel.
   Loaded after site.css, which owns the design tokens. */
:root {
      --bg: #f5f0e6;
      --bg-elev: #ebe4d4;
      --paper: #faf6ec;
      --ink: #1a1714;
      --ink-2: #4a4036;
      --ink-3: #7a6f60;
      --rule: #d8cfba;
      --rule-2: #e6dec8;
      --accent: oklch(0.58 0.14 55);
      --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
      --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
      --font-read: "EB Garamond", "Cormorant Garamond", Georgia, serif;
      /* printed-ink black: slightly softened from screen-black for that
         ink-on-paper warmth */
      --ink-prose: #1f1a15;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: "kern", "liga", "ss01";
      min-height: 100vh;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 70% 50% at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%),
        radial-gradient(ellipse 60% 40% at 50% 110%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
      z-index: 0;
    }

    /* ---------- READING PROGRESS ---------- */
    .progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: transparent;
      z-index: 40;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background: var(--accent);
      transition: width .08s linear;
    }

    /* ---------- TOP CHROME ---------- */
    .reading-top {
      position: sticky;
      top: 0;
      z-index: 30;
      width: 100%;
      background: color-mix(in srgb, var(--bg) 86%, transparent);
      backdrop-filter: saturate(140%) blur(10px);
      -webkit-backdrop-filter: saturate(140%) blur(10px);
      border-bottom: 1px solid var(--rule);
    }
    .reading-top-inner {
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
      padding: 18px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--ink);
      text-decoration: none;
    }
    .brand-mark {
      width: 26px; height: 26px;
      display: grid; place-items: center;
      color: var(--accent);
    }
    .brand-name {
      font-family: var(--font-display);
      font-size: 18px;
      letter-spacing: 0.01em;
    }
    .back {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-3);
      text-decoration: none;
      transition: color .2s;
    }
    .back:hover { color: var(--ink); }
    .back::before {
      content: "\2190";
      margin-right: 8px;
      letter-spacing: 0;
    }

    /* ---------- READING SETTINGS ---------- */
    .top-right {
      display: inline-flex;
      align-items: center;
      gap: 22px;
    }
    .reader-toggle {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 600;
      line-height: 1;
      color: var(--ink-3);
      background: transparent;
      border: 0;
      padding: 4px 2px;
      cursor: pointer;
      transition: color .2s;
      letter-spacing: 0.02em;
    }
    .reader-wrap { position: relative; display: inline-flex; }
    .reader-toggle:hover, .reader-toggle.open { color: var(--ink); }
    .reader-toggle .a-sm { font-size: 12px; }
    .reader-toggle .a-lg { font-size: 19px; }

    .reader-panel {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      z-index: 40;
      width: 248px;
      background: var(--paper);
      border: 1px solid var(--ink);
      box-shadow: 0 16px 44px rgba(26,23,20,.22);
      padding: 16px;
      display: none;
      text-align: left;
    }
    .reader-panel.open { display: block; }
    .reader-row { display: grid; gap: 7px; }
    .reader-row + .reader-row { margin-top: 16px; }
    .reader-label {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .seg {
      display: flex;
      border: 1px solid var(--rule);
      background: var(--paper);
    }
    .seg button {
      flex: 1;
      background: transparent;
      border: 0;
      border-left: 1px solid var(--rule);
      padding: 8px 4px;
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--ink-2);
      cursor: pointer;
      transition: background .15s, color .15s;
      white-space: nowrap;
    }
    .seg button:first-child { border-left: 0; }
    .seg button:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
    .seg button.on { background: var(--ink); color: var(--bg); }
    .seg button .ag { font-family: var(--font-display); }

    /* ---------- CHAPTER ---------- */
    main {
      position: relative;
      z-index: 1;
    }
    .chapter {
      max-width: var(--read-measure, 42rem);
      margin: 0 auto;
      padding: 56px 24px 96px;
    }

    .frontmatter {
      text-align: center;
      margin-bottom: 56px;
    }
    .chapter-cover {
      display: flex;
      justify-content: center;
      margin: 0 auto 36px;
      width: min(190px, 48vw);
    }
    .chapter-cover img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 2px;
      box-shadow:
        0 1px 3px rgba(0,0,0,.16),
        0 12px 30px rgba(26,23,20,.24),
        0 28px 56px rgba(26,23,20,.14);
    }
    .running-head {
      font-family: var(--font-display);
      font-variant-caps: all-small-caps;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.32em;
      color: var(--ink-3);
      margin-bottom: 32px;
    }
    .frontmatter .chapter-num {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(34px, 4.2vw, 44px);
      line-height: 1;
      color: var(--ink);
      margin: 0 0 6px;
      letter-spacing: -0.005em;
    }
    .frontmatter .chapter-num-label {
      font-family: var(--font-display);
      font-variant-caps: all-small-caps;
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.32em;
      color: var(--ink-3);
    }

    /* Epigraph (the BLOCK ENTRY line) — quiet, centered, no rules */
    .epigraph {
      font-family: var(--font-read);
      font-style: italic;
      font-size: 14.5px;
      letter-spacing: 0.01em;
      color: var(--ink-3);
      text-align: center;
      max-width: 34em;
      margin: 40px auto 56px;
      line-height: 1.55;
    }
    .epigraph .glyphs {
      font-style: normal;
      letter-spacing: 0.16em;
      margin: 0 6px;
      color: var(--accent);
    }
    .epigraph .label {
      font-variant-caps: all-small-caps;
      letter-spacing: 0.18em;
      font-style: normal;
    }

    .chapter-title {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(24px, 3.4vw, 32px);
      line-height: 1.18;
      letter-spacing: -0.005em;
      color: var(--ink);
      text-align: center;
      margin: 0 0 64px;
      text-wrap: balance;
      max-width: 24ch;
      margin-left: auto;
      margin-right: auto;
    }
    .chapter-title::after {
      content: "";
      display: block;
      width: 48px;
      height: 1px;
      background: var(--rule);
      margin: 28px auto 0;
    }

    /* ---------- PROSE ---------- */
    .prose {
      font-family: var(--font-read);
      font-size: calc(20px * var(--read-size, 1));
      line-height: var(--read-leading, 1.62);
      color: var(--ink-prose);
      font-weight: 400;
      font-feature-settings: "kern", "liga", "onum";
      text-align: var(--read-align, justify);
      text-justify: inter-word;
      hyphens: var(--read-hyphens, auto);
      -webkit-hyphens: var(--read-hyphens, auto);
      hyphenate-limit-chars: 6 3 3;
    }
    .prose p {
      margin: 0;
      text-indent: 0;
      orphans: 2;
      widows: 2;
    }
    .prose p + p { margin-top: 0.9em; }

    /* First paragraph: drop cap */
    .prose .dropcap {
      text-indent: 0;
      margin-top: 0;
    }
    .prose .dropcap::first-letter {
      float: left;
      font-family: var(--font-display);
      font-style: normal;
      font-weight: 600;
      font-size: 3.1em;
      line-height: 0.72;
      padding: 0.02em 0.1em 0 0;
      color: var(--ink-prose);
    }

    .prose em {
      font-style: italic;
    }

    /* End-of-chapter mark */
    .end-mark {
      text-align: center;
      font-family: var(--font-display);
      font-size: 18px;
      color: var(--ink-3);
      margin: 56px 0 0;
      letter-spacing: 0.8em;
      text-indent: 0.8em;
    }

    /* ---------- AFTER ---------- */
    .after {
      max-width: var(--read-measure, 42rem);
      margin: 64px auto 0;
      padding: 56px 24px 0;
      border-top: 1px solid var(--rule);
      text-align: center;
    }
    .after-eyebrow {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 22px;
    }
    .after h2 {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(32px, 4.4vw, 44px);
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin: 0 0 16px;
      text-wrap: balance;
    }
    .after h2 em {
      color: var(--accent);
      font-style: italic;
    }
    .after p {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 18px;
      color: var(--ink-2);
      margin: 0 0 32px;
      line-height: 1.5;
      text-wrap: balance;
    }
    .cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 28px;
      background: var(--ink);
      color: var(--bg);
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 600;
      border: 1px solid var(--ink);
      transition: background .2s, color .2s, transform .2s;
    }
    .cta:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #1a0f06;
      transform: translateY(-1px);
    }
    .cta::after {
      content: "\2192";
      letter-spacing: 0;
    }


    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 640px) {
      .reading-top-inner { padding: 14px 20px; }
      .chapter { padding: 32px 22px 64px; }
      .frontmatter { margin-bottom: 40px; }
      .block-entry { font-size: 11px; padding: 12px 14px; margin-bottom: 36px; }
      .chapter-title { margin-bottom: 40px; }
      .prose { font-size: calc(18.5px * var(--read-size, 1)); line-height: var(--read-leading, 1.58); }
      .prose .dropcap::first-letter { font-size: 2.9em; line-height: 0.72; }
      .after { padding: 48px 22px 0; margin-top: 56px; }
    }