:root {
  color-scheme: dark;
  /* Palette sampled directly from foliovistabooks-home.png (the brand OG
     image's purple half) -- not a reused chapter theme. */
  --bg: #0c0318;
  --bg-soft: #170729;
  --panel: #1f0a3d;
  --panel-strong: #2b0f4a;
  --panel-soft: #251140;
  --line: #4a2270;
  --text: #f3ecfa;
  --muted: #bfa8d6;
  --accent: #b565d9;
  --accent-strong: #d199ea;
  --warm: #e68c57;
  --code-bg: #120426;
  --code-line: #3a1a5c;
  --shadow: 0 24px 54px rgba(15, 0, 35, 0.48);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 85% 8%, rgba(181, 101, 217, 0.22), transparent 32%),
    radial-gradient(circle at 10% 85%, rgba(230, 140, 87, 0.06), transparent 30%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  color: var(--text);
  font-family: "Source Sans 3", "Segoe UI", "Inter", system-ui, sans-serif;
}

a {
  color: inherit;
}

code {
  padding: 0.12em 0.4em;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 2, 22, 0.75);
  color: #f0dcf9;
  font-family: "DejaVu Sans Mono", "Ubuntu Mono", monospace;
  font-size: 0.94em;
  line-height: 1;
}

.shell {
  width: min(1140px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 32px 0 72px;
}

.site-nav-panel {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(181, 101, 217, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.site-nav-panel p {
  margin: 0 0 10px;
  color: var(--warm);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-links a {
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: color 140ms ease, background 140ms ease;
}

.page-links a:hover,
.page-links a:focus-visible {
  color: var(--text);
  background: rgba(181, 101, 217, 0.14);
}

@media (max-width: 720px) {
  .site-nav-panel {
    padding: 14px 16px;
  }
}

.hero,
.section {
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.hero {
  padding: 30px 30px 34px;
  background: linear-gradient(150deg, #1a0733 0%, #331550 45%, #5a2680 100%);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% -10%, rgba(230, 140, 87, 0.16), transparent 40%);
  pointer-events: none;
}

.eyebrow {
  position: relative;
  margin: 0 0 12px;
  color: var(--warm);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: "Charter", "Source Serif Pro", "Iowan Old Style", Georgia, serif;
  font-weight: 700;
}

h1 {
  position: relative;
  max-width: 860px;
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  line-height: 1.06;
}

h2 {
  color: var(--accent-strong);
  font-size: 1.6rem;
  line-height: 1.1;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

h3 {
  color: var(--warm);
  font-size: 1.06rem;
  line-height: 1.28;
}

h4 {
  color: var(--accent-strong);
  font-size: 0.98rem;
  line-height: 1.32;
}

.hero-copy {
  position: relative;
  max-width: 820px;
  margin-top: 14px;
  color: rgba(243, 236, 250, 0.92);
  font-size: 1.02rem;
  line-height: 1.65;
}

.meta-row,
.quick-nav,
.figure-grid,
.term-grid {
  display: grid;
  gap: 14px;
}

.meta-row {
  position: relative;
  margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.quick-nav {
  position: relative;
  margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.figure-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.term-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.meta-card,
.manuscript-section,
.figure-card,
.term-card,
.note-panel,
.warning-panel,
.step-block {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
}

.meta-card,
.note-panel,
.warning-panel {
  padding: 15px 17px;
}

.manuscript-section,
.figure-card,
.term-card {
  padding: 22px 20px 20px;
}

.mini-label {
  display: block;
  margin-bottom: 7px;
  color: var(--warm);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.meta-card strong {
  display: block;
  margin-bottom: 6px;
}

.nav-link {
  display: inline-block;
  width: fit-content;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.nav-link:hover {
  border-color: rgba(181, 101, 217, 0.5);
  background: rgba(181, 101, 217, 0.14);
}

.section {
  margin-top: 26px;
  padding: 32px 24px 26px;
  background: var(--panel);
}

.section-intro {
  margin: 10px 0 20px;
  color: var(--muted);
  line-height: 1.68;
}

.manuscript-stack {
  display: grid;
  gap: 16px;
}

.manuscript-section {
  background: rgba(255, 255, 255, 0.03);
}

.manuscript-section h3 {
  margin-bottom: 14px;
}

.manuscript-section h4 {
  margin: 18px 0 10px;
}

.manuscript-section p {
  line-height: 1.74;
}

.manuscript-section p + p,
.manuscript-section p + ul,
.manuscript-section p + ol,
.manuscript-section p + pre,
.manuscript-section pre + p,
.manuscript-section ul + p,
.manuscript-section .figure-embed + p,
.note-panel p + p {
  margin-top: 14px;
}

.checklist,
.ordered-list {
  margin: 14px 0 0;
  padding-left: 18px;
}

.checklist li,
.ordered-list li {
  margin-bottom: 9px;
  line-height: 1.66;
}

.checklist li:last-child,
.ordered-list li:last-child {
  margin-bottom: 0;
}

.code-block {
  margin: 14px 0 0;
  padding: 16px 18px;
  overflow-x: auto;
  white-space: pre-wrap;
  border-radius: 14px;
  border: 1px solid var(--code-line);
  background: var(--code-bg);
  color: #e6d6f2;
  font-family: "DejaVu Sans Mono", "Ubuntu Mono", monospace;
  font-size: 0.92rem;
  line-height: 1.55;
}

.code-file-label {
  display: inline-block;
  margin: 14px 0 -6px;
  padding: 5px 11px;
  border-radius: 8px 8px 0 0;
  background: rgba(230, 140, 87, 0.14);
  border: 1px solid rgba(230, 140, 87, 0.3);
  border-bottom: none;
  color: var(--warm);
  font-family: "DejaVu Sans Mono", "Ubuntu Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
}

.callout {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(181, 101, 217, 0.3);
  background:
    linear-gradient(160deg, rgba(181, 101, 217, 0.14), rgba(181, 101, 217, 0.04)),
    rgba(255, 255, 255, 0.02);
}

.callout p {
  line-height: 1.7;
}

.callout .callout-label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.figure-embed {
  margin-top: 16px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(6, 1, 16, 0.85);
}

.figure-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.figure-embed img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.figure-link:focus-visible img,
.figure-link:hover img {
  outline: 2px solid rgba(181, 101, 217, 0.55);
  outline-offset: 4px;
}

.figure-caption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.figure-hint {
  margin-top: 8px;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 600;
}

.note-panel {
  margin-top: 16px;
  border-color: rgba(181, 101, 217, 0.28);
  background:
    linear-gradient(160deg, rgba(181, 101, 217, 0.16), rgba(181, 101, 217, 0.05)),
    rgba(255, 255, 255, 0.025);
}

.warning-panel {
  margin-top: 16px;
  border-color: rgba(230, 140, 87, 0.3);
  background:
    linear-gradient(180deg, rgba(230, 140, 87, 0.1), rgba(230, 140, 87, 0.03)),
    rgba(255, 255, 255, 0.02);
}

.term-card {
  background:
    linear-gradient(180deg, rgba(181, 101, 217, 0.08), rgba(181, 101, 217, 0.02)),
    rgba(255, 255, 255, 0.025);
}

.term-card h4 {
  margin-bottom: 8px;
  color: var(--warm);
}

.lightbox {
  width: min(1300px, calc(100vw - 48px));
  max-width: 1300px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(12, 3, 24, 0.97);
  color: var(--text);
  box-shadow: 0 30px 68px rgba(0, 0, 0, 0.5);
}

.lightbox::backdrop {
  background: rgba(3, 0, 10, 0.82);
  backdrop-filter: blur(4px);
}

.lightbox-panel {
  padding: 20px;
}

.lightbox-close {
  display: block;
  margin-left: auto;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  border-color: rgba(181, 101, 217, 0.5);
  background: rgba(181, 101, 217, 0.14);
}

.lightbox-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #fff;
}

.lightbox-caption {
  margin-top: 14px;
  color: rgba(243, 236, 250, 0.85);
  font-size: 0.94rem;
  line-height: 1.65;
}

.footer-note {
  margin-top: 22px;
  color: var(--muted);
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.65;
}

@media (max-width: 720px) {
  .shell {
    width: min(1140px, calc(100vw - 20px));
    padding-top: 20px;
  }

  .hero,
  .section {
    border-radius: 16px;
    padding: 20px 16px;
  }

  .code-block {
    font-size: 0.86rem;
  }

  .lightbox {
    width: min(1300px, calc(100vw - 20px));
  }
}

/* Print / PDF: black-and-grey, matching the existing chapter preview PDFs.
   The screen theme above (purple gradient, dark panels) is intentionally
   replaced here, not just dimmed -- printed pages use this block only. */
@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #fff !important;
    color: #111 !important;
  }

  .shell {
    width: 100%;
    padding: 0;
  }

  .hero,
  .section {
    box-shadow: none;
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #fff !important;
    color: #111 !important;
  }

  .hero {
    margin: 18px;
    background: #fff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hero::after {
    display: none;
  }

  .section {
    margin: 18px;
  }

  /* Only genuinely small, single-purpose blocks avoid breaking. A
     multi-paragraph .manuscript-section can itself run over a page, so
     forcing it whole onto one page (like the big .section wrapper above)
     just relocates the same wasted-space problem to a smaller scale. */
  .meta-card,
  .figure-card,
  .figure-embed,
  .figure-section,
  .term-card,
  .note-panel,
  .warning-panel,
  .callout,
  .code-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* A long .code-block correctly refuses to split itself -- but a
     heading, its intro paragraph, or a "File: ..." label could still be
     left stranded alone at the bottom of a page while that block jumped
     whole to the next one. break-after: avoid turned out to be
     unreliable for this in Chrome's print engine (in particular on
     .code-file-label, an inline-block box) -- it did not stop the
     orphaning in testing. The fix that actually works, proven on the
     Figure 4/5/6 sections above, is grouping the whole unit under one
     break-inside: avoid instead; see .code-step-section below. */
  h2,
  h3,
  h4 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .code-file-label {
    display: block;
    width: fit-content;
  }

  /* Each numbered step in "The right approach" is heading + short intro
     + File: label + one code block. Every one of those code blocks was
     confirmed (visually, in the generated PDF) to fit on a single fresh
     page with room to spare, so grouping the whole step is safe -- unlike
     grouping an entire free-form .manuscript-section, which can run
     several pages long and would just relocate the wasted-space problem. */
  .code-step-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Escape hatch for the rare code block too long to fit one printed
     page at any readable size (the appendix's full middleware.js, ~85
     lines including the inlined isHtmlDocumentRequest body). Forcing
     break-inside: avoid on something that long just relocates the
     orphaned-heading bug to a bigger scale. Letting it flow means the
     heading and label stay with the start of the code, and the code
     itself breaks at a normal line boundary instead of jumping whole. */
  .code-block-flows {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* Figure 5's diagram is tall enough to risk exceeding one printed page
     on its own; shrink figures specifically in print so the heading,
     image, and caption reliably fit together as one unbroken unit. */
  .figure-section img {
    max-height: 6in;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  /* The two longest code blocks (Steps 4 and 5 in "The right approach")
     were tall enough at screen font-size that heading + intro + File:
     label + code together still exceeded one printed page, even forced
     into one break-inside: avoid unit -- the browser fell back to
     breaking between the label and the code anyway, orphaning the
     heading. Shrinking code text specifically for print is what actually
     buys enough room for every .code-step-section to fit on one page. */
  .code-block {
    font-size: 0.72rem;
    line-height: 1.3;
    padding: 10px 12px;
  }

  .eyebrow {
    color: #444 !important;
  }

  h1,
  h2,
  h3,
  h4 {
    color: #111 !important;
  }

  h2 {
    border-bottom-color: #ccc;
  }

  .hero-copy,
  .section-intro,
  .manuscript-section p,
  .checklist li,
  .ordered-list li {
    color: #222 !important;
  }

  .meta-card,
  .manuscript-section,
  .figure-card,
  .term-card,
  .note-panel,
  .warning-panel,
  .callout {
    background: #f4f4f4 !important;
    border: 1px solid #ccc !important;
    color: #111 !important;
    box-shadow: none;
  }

  .code-block {
    background: #f0f0f0 !important;
    color: #111 !important;
    border: 1px solid #bbb !important;
  }

  code {
    background: #eaeaea !important;
    color: #111 !important;
    border-color: #ccc;
  }

  .mini-label,
  .callout-label,
  .figure-hint {
    color: #555 !important;
  }

  .figure-embed {
    background: #fff !important;
    border-color: #ccc;
  }

  .lightbox,
  .quick-nav,
  .figure-hint {
    display: none !important;
  }

  a {
    color: #111 !important;
    text-decoration: underline;
  }
}