/* Court-filing aesthetic per project_description.md.
   No client JS; all behavior is server-rendered HTML + CSS. */

:root {
  /* Light theme (default) */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --muted: #555550;
  --rule: #D8D6CF;
  --accent: #1F3A5F;
  --accent-soft: #E8EDF3;
  --accent-strong: #14253D;
  --on-accent: #FFFFFF;
  --letter-bg: #ECF1F7;
  --letter-rule: #6F8AAE;
  --image-bg: #FFFFFF;
  --footer-bg: #F4F2EC;
  --tap-highlight: rgba(31, 58, 95, 0.15);
  --color-scheme: light;

  --content-max: 920px;
  --sidebar-width: 270px;
  --sidebar-gap: 2rem;
  --layout-sidebar-max: calc(var(--content-max) + var(--sidebar-width) + var(--sidebar-gap) + 4rem);

  --gutter: 1.5rem;
  --serif: "Charter", "Source Serif Pro", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark palette: applied either when the user's OS prefers dark and they
   haven't overridden, or when they've explicitly chosen dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171C;
    --surface: #1B1E25;
    --text: #ECE9E0;
    --muted: #9A968B;
    --rule: #2A2D34;
    --accent: #88B4DD;
    --accent-soft: #1F2A38;
    --accent-strong: #B8D2EF;
    --on-accent: #0F1116;
    --letter-bg: #1B2735;
    --letter-rule: #4D6E94;
    --image-bg: #ECE9E0;
    --footer-bg: #131519;
    --tap-highlight: rgba(136, 180, 221, 0.18);
    --color-scheme: dark;
  }
}

/* Explicit user override beats system preference. */
html[data-theme="light"] {
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --muted: #555550;
  --rule: #D8D6CF;
  --accent: #1F3A5F;
  --accent-soft: #E8EDF3;
  --accent-strong: #14253D;
  --on-accent: #FFFFFF;
  --letter-bg: #ECF1F7;
  --letter-rule: #6F8AAE;
  --image-bg: #FFFFFF;
  --footer-bg: #F4F2EC;
  --tap-highlight: rgba(31, 58, 95, 0.15);
  --color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #15171C;
  --surface: #1B1E25;
  --text: #ECE9E0;
  --muted: #9A968B;
  --rule: #2A2D34;
  --accent: #88B4DD;
  --accent-soft: #1F2A38;
  --accent-strong: #B8D2EF;
  --on-accent: #0F1116;
  --letter-bg: #1B2735;
  --letter-rule: #4D6E94;
  --image-bg: #ECE9E0;
  --footer-bg: #131519;
  --tap-highlight: rgba(136, 180, 221, 0.18);
  --color-scheme: dark;
}

html { color-scheme: var(--color-scheme); }

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

html {
  -webkit-text-size-adjust: 100%;
  font-size: 17px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-feature-settings: "kern", "liga", "onum";
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: var(--tap-highlight);
  overflow-wrap: break-word;
  /* Prevent stray children from creating horizontal scroll on phones. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover, a:focus { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto; height: auto;
  display: inline-block;
  margin: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.site-header__inner {
  max-width: var(--layout-sidebar-max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.site-header__brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
}
.site-header__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.site-header__tagline {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.site-header__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.site-nav a {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: none;
}
.site-nav a[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
}
.site-nav a[aria-current="page"]:hover,
.site-nav a[aria-current="page"]:focus-visible {
  background: var(--accent-strong);
  color: var(--on-accent);
}

/* Single-column reading layout (home, about, error) */
.layout-reading {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 3rem;
}

/* Sidebar layout (timeline index, document) */
.layout-sidebar {
  max-width: var(--layout-sidebar-max);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--sidebar-gap);
  align-items: start;
}
.layout-sidebar__content { min-width: 0; }

/* Table-of-contents sidebar */
.toc {
  position: sticky;
  top: 1rem;
  align-self: start;
  border-right: 1px solid var(--rule);
  padding-right: 1rem;
  max-height: calc(100vh - 2rem);
  /* dvh accounts for iOS Safari's collapsing address bar on tablet portrait. */
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.toc__details > summary { list-style: none; }
.toc__details > summary::-webkit-details-marker { display: none; }
/* The TOC has TWO variants in the markup: a wide-screen nav (always visible,
   no disclosure) and a narrow-screen <details> (collapsible, starts closed).
   We can't use a single <details> for both because the HTML spec requires
   browsers to NOT render the contents of a closed <details>, regardless of
   author CSS. Showing only one variant per breakpoint is reliable. */
.toc__nav--wide { display: block; }
.toc__details--narrow { display: none; }
.toc__summary {
  display: none; /* Hidden on wide screens; shown when TOC collapses on mobile */
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px; /* Material 48dp touch target; comfortable for the disclosure */
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--sans);
}
.toc__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.toc__summary::after {
  content: "\25BC"; /* down triangle */
  color: var(--muted);
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}
.toc__details[open] .toc__summary::after {
  transform: rotate(180deg);
}
.toc__summary-meta {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
}
.toc__eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin: 0 0 0.75rem;
}
.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.4;
}
.toc__item { border-left: 2px solid transparent; }
.toc__link {
  display: flex;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  min-height: 44px; /* Apple HIG / WCAG 2.5.5 enhanced touch target */
  align-items: flex-start;
  text-decoration: none;
  color: var(--text);
}
.toc__link:hover,
.toc__link:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: none;
}
.toc__number {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.82rem;
  padding-top: 0.1rem;
}
.toc__title { display: block; }

/* Document overview (page-level header above the sidebar grid).
   Use longhand padding so we can layer safe-area-inset support — iOS Safari
   on notched devices reports inset values that, in landscape or with the
   address bar collapsed, can leave content flush against the screen edge.
   max() guarantees at least --gutter even when the inset is 0. */
.document-overview {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-top: 2rem;
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  padding-bottom: 0;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
}
.document-overview .document__header {
  margin: 0;
}
.document__intro {
  margin: 1.5rem 0 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
}
.document__intro p { margin: 0 0 1rem; }
.document__intro p:last-child { margin-bottom: 0; }
.document__intro a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.document__intro a:hover,
.document__intro a:focus-visible {
  color: var(--accent-strong);
  text-decoration-thickness: 2px;
}
@media (max-width: 540px) {
  .document-overview {
    /* Bump the floor on phones — 1.25rem (~20px) reads better than 1rem
       (~16px) at small viewports, especially on notched iOS devices. */
    padding-top: 1.25rem;
    padding-right: max(1.25rem, env(safe-area-inset-right));
    padding-left: max(1.25rem, env(safe-area-inset-left));
  }
  .document__intro { font-size: 1rem; }
}

/* Overview */
.overview { margin-bottom: 3rem; }
.overview__eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.overview__title {
  font-size: 2.2rem;
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

/* Overview CTA section */
.overview-cta {
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 4px;
}
.overview-cta__title {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}
.overview-cta__copy {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 1rem;
}

/* CTAs */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}
.cta {
  font-family: var(--sans);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  text-decoration: none;
  color: var(--accent);
  background: transparent;
}
.cta:hover, .cta:focus-visible {
  background: var(--accent-soft);
  outline: none;
}
.cta--primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.cta--primary:hover, .cta--primary:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}

/* Prose body (rendered markdown) */
.prose { max-width: 100%; }
.prose h1, .prose h2, .prose h3 {
  font-family: var(--serif);
  letter-spacing: 0.005em;
  line-height: 1.2;
  scroll-margin-top: 1rem;
}
.prose h2 {
  font-size: 1.7rem;
  font-weight: 700;
  color: #B7281F;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 3rem 0 1.25rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
html[data-theme="dark"] .prose h2 { color: #E07A6E; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .prose h2 { color: #E07A6E; }
}
.prose h3 {
  font-size: 1.2rem;
  color: var(--accent);
  margin: 2rem 0 0.75rem;
}
.prose p { margin: 0 0 1rem; }
.prose strong.emphasis { color: #B7281F; }
html[data-theme="dark"] .prose strong.emphasis { color: #E07A6E; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .prose strong.emphasis { color: #E07A6E; }
}
html[data-theme="dark"] .prose img.invert-on-dark { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .prose img.invert-on-dark { filter: invert(1) hue-rotate(180deg); }
}
.prose video.embedded-video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  background: #000;
  border-radius: 4px;
}
.prose .legend-blue { color: #1F62B0; font-weight: 600; }
.prose .legend-green { color: #2A7A3A; font-weight: 600; }
.prose .note-blue { color: #1F62B0; }
html[data-theme="dark"] .prose .legend-blue { color: #6FA8E0; }
html[data-theme="dark"] .prose .legend-green { color: #6FCB7A; }
html[data-theme="dark"] .prose .note-blue { color: #6FA8E0; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .prose .legend-blue { color: #6FA8E0; }
  html:not([data-theme="light"]) .prose .legend-green { color: #6FCB7A; }
  html:not([data-theme="light"]) .prose .note-blue { color: #6FA8E0; }
}
.prose ul, .prose ol { margin: 0 0 1.25rem 2.5rem; padding: 0 0 0 0.5rem; }
.prose li { margin: 0.35rem 0; padding-left: 0.25rem; }
.prose blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem 0.5rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-style: italic;
  color: var(--text);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}
.prose code, .prose pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.prose img {
  border: 1px solid var(--rule);
  background: var(--image-bg);
  margin: 1rem auto;
  max-height: 720px;
  object-fit: contain;
}

/* Image lightbox (CSS-only; uses :target — no client JS, CSP-compliant).
   The trigger uses display: contents so it's transparent to layout
   (the wrapped <img> behaves as if it were a direct child of its parent). */
.lightbox-trigger {
  display: contents;
  cursor: zoom-in;
}
/* When the lightbox is dismissed, the close link points back to the trigger
   image's id; this margin ensures the image isn't flush against the viewport
   top after the snap. */
.lightbox-trigger > img {
  cursor: zoom-in;
  scroll-margin-top: 1rem;
}
.lightbox-trigger:focus-visible > img {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: rgba(0, 0, 0, 0.92);
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.lightbox:target {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close-area {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  text-decoration: none;
  padding: 1rem;
}
.lightbox__close-area:focus-visible {
  outline: 2px solid white;
  outline-offset: -8px;
}
.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--image-bg);
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.lightbox__close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: var(--sans);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: white;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  outline: none;
  background: rgba(0, 0, 0, 0.85);
  border-color: white;
}

/* Lock body scroll while a lightbox is open. */
html:has(.lightbox:target) { overflow: hidden; }

/* Inherit invert-on-dark behavior on the enlarged image. */
html[data-theme="dark"] .lightbox__image.invert-on-dark { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .lightbox__image.invert-on-dark { filter: invert(1) hue-rotate(180deg); }
}

/* Multi-image grouping (mirrors docx paragraphs containing multiple inline images). */
.prose figure.figure-grid {
  display: grid;
  /* `min(220px, 100%)` prevents overflow when the container is itself narrower
     than 220px (Galaxy Fold cover, very narrow phones) — the column shrinks
     to the container width instead of producing a horizontal scrollbar. */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
}
.prose figure.figure-grid img {
  margin: 0 auto;
  max-width: 100%;
  max-height: 560px;
}
.prose figure.figure-grid .figure-grid__cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prose figure.figure-grid .figure-grid__cell p {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  align-self: stretch;
}

/* Asymmetric row: 1/3 + 2/3 split with a nested 2-image pair on the right.
   Stays horizontal at all viewport widths to mirror the PDF layout. */
.prose figure.figure-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 0;
}
.prose figure.figure-row .figure-row__cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.prose figure.figure-row .figure-row__cell p {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.prose figure.figure-row img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
.prose figure.figure-row .figure-row__inner-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
/* Vertical stack variant: nested pair stacks top-over-bottom (used when the
   PDF places two images vertically inside the wider 2/3 cell). */
.prose figure.figure-row .figure-row__inner-pair--stack {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

/* Side-by-side image/caption pair (mirrors the docx two-column tables). */
.prose figure.figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 0;
}
.prose figure.figure-pair .figure-pair__cell,
.prose figure.figure-pair .figure-pair__image,
.prose figure.figure-pair .figure-pair__caption {
  min-width: 0;
}
.prose figure.figure-pair img {
  margin: 0.5rem auto;
  max-width: 100%;
}
.prose figure.figure-pair p {
  margin: 0 0 0.75rem;
  font-size: 0.97rem;
}
.prose figure.figure-pair ul {
  margin: 0 0 0.75rem 1.25rem;
  font-size: 0.97rem;
}
.prose figure.figure-pair li { margin: 0.15rem 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.prose th, .prose td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.75rem;
  vertical-align: top;
  text-align: left;
  min-width: 14rem;
}
.prose th { background: var(--accent-soft); }

/* Step cards (timeline index page) */
.step-cards {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.step-card { border-bottom: 1px solid var(--rule); }
.step-card__link {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 0.25rem;
  text-decoration: none;
  color: var(--text);
  align-items: flex-start;
}
.step-card__link:hover,
.step-card__link:focus-visible {
  background: var(--accent-soft);
  outline: none;
}
.step-card__number {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--muted);
  min-width: 2.5rem;
  padding-top: 0.15rem;
}
.step-card__body { display: flex; flex-direction: column; gap: 0.2rem; }
.step-card__title {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--accent);
  font-weight: 600;
}
.step-card__section,
.step-card__source {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Document page */
.document__header { margin-bottom: 2rem; }
.document__eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.document__title {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.document__source {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.document-nav {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
}
.document-nav__link {
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
}
.document-nav__link:hover,
.document-nav__link:focus-visible {
  border-color: var(--accent);
  outline: none;
  background: var(--accent-soft);
}
.document-nav__link--next { text-align: right; }
.document-nav__link--index {
  align-self: center;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}
.document-nav__direction {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.document-nav__title {
  font-size: 1rem;
  color: var(--accent);
}
.document-nav__placeholder { display: block; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  background: var(--footer-bg);
}
.site-footer__inner {
  max-width: var(--layout-sidebar-max);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--muted);
}
.site-footer__notice { margin: 0 0 1rem; line-height: 1.55; }
.site-footer__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}
.site-footer__copyright,
.site-footer__credit { display: inline; }
.site-footer__attribution {
  color: var(--text);
  font-weight: 600;
}

/* Theme toggle (header) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.theme-toggle__label {
  /* Visually hidden — the group serves as its own label via aria-labelledby */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.theme-toggle__group {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  padding: 2px;
}
.theme-toggle__button {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--sans);
  font-size: 0.82rem;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  min-height: 36px; /* Coarse-pointer override below bumps this to 44px on touch devices */
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.theme-toggle__button:hover,
.theme-toggle__button:focus-visible {
  outline: none;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.theme-toggle__button--active {
  background: var(--accent);
  color: var(--on-accent);
}
.theme-toggle__button--active:hover,
.theme-toggle__button--active:focus-visible {
  background: var(--accent-strong);
  color: var(--on-accent);
}

/* Responsive: collapse TOC sidebar below ~960px */
@media (max-width: 960px) {
  .layout-sidebar {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .toc {
    position: static;
    border-right: 0;
    padding-right: 0;
    padding-bottom: 1rem;
    max-height: none;
    overflow-y: visible;
  }
  /* Swap the TOC variants: hide the always-visible wide nav, show the
     collapsible <details>. */
  .toc__nav--wide { display: none; }
  .toc__details--narrow { display: block; }
  /* Surface the disclosure summary as a tap target. */
  .toc__summary { display: flex; }
  .toc__eyebrow { margin: 0; }
  .toc__details:not([open]) .toc__list { display: none; }
  .toc__details[open] .toc__list {
    margin-top: 0.5rem;
    max-height: 60vh;
    /* dvh tracks the visible viewport on iOS Safari as the address bar
       collapses, preventing the bottom of the list from being cut off. */
    max-height: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--surface);
  }
  .toc__details[open] .toc__item {
    border-bottom: 1px solid var(--rule);
  }
  .toc__details[open] .toc__item:last-child {
    border-bottom: 0;
  }
}

/* Small screens (phones) */
@media (max-width: 540px) {
  :root { --gutter: 1rem; }
  html { font-size: 16px; }
  .layout-reading,
  .layout-sidebar { padding: 1.25rem var(--gutter) 2rem; }
  .site-header__inner {
    padding: 0.85rem var(--gutter);
    gap: 0.6rem 1rem;
  }
  .site-header__title { font-size: 1.25rem; }
  .site-header__tagline { font-size: 0.8rem; }
  .site-footer__inner { padding: 1.5rem var(--gutter); }
  .site-header__controls {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
  }
  .site-header__nav-link {
    font-size: 0.95rem;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
  }
  .theme-toggle__button {
    min-height: 44px; /* Apple HIG touch target for the most-used header control */
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
  }
  .overview__title { font-size: 1.7rem; }
  .document__title { font-size: 1.55rem; line-height: 1.25; }
  .overview-cta { padding: 1.25rem 1rem; }
  .document-nav { grid-template-columns: 1fr; }
  .document-nav__link--next { text-align: left; }
  .document-nav__link { min-height: 44px; }
  .step-card__link { padding: 0.85rem 0.25rem; }
  .prose img { margin: 0.75rem auto; max-height: none; }
  .prose figure.figure-grid img,
  .prose figure.figure-row img,
  .prose figure.figure-pair img { max-height: none; }
  .prose ul, .prose ol { margin-left: 1.75rem; }
  .prose h2 { font-size: 1.4rem; margin: 2.25rem 0 1rem; }
  .prose h3 { font-size: 1.1rem; }
  .prose blockquote { padding: 0.5rem 0.85rem 0.5rem 1rem; }
}

/* Extra-narrow phones (≤380px, e.g. Galaxy Fold cover, iPhone SE 1st gen) —
   keep the figure-row / figure-pair / figure-grid layouts horizontal per
   editorial direction, but tighten gaps so the inner images stay legible. */
@media (max-width: 380px) {
  :root { --gutter: 0.75rem; }
  .prose figure.figure-row { gap: 0.4rem; }
  .prose figure.figure-row .figure-row__inner-pair { gap: 0.3rem; }
  .prose figure.figure-pair { gap: 0.6rem; }
  .prose figure.figure-grid { gap: 0.6rem; }
  .site-header__title { font-size: 1.1rem; }
  .theme-toggle__button {
    padding: 0.55rem 0.65rem;
    font-size: 0.8rem;
  }
}

/* Touch-primary devices (phones, tablets) — guarantee 44px on every tap
   target regardless of viewport-width media-query stacking. */
@media (pointer: coarse) {
  .toc__link,
  .site-header__nav-link,
  .theme-toggle__button,
  .download-card__button,
  .back-link,
  .prose .doc-button {
    min-height: 44px;
  }
}

/* Header nav (Downloads link) */
.site-header__nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.site-header__nav-link {
  font-family: var(--sans);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--text);
  padding: 0.5rem 0.95rem;
  border-radius: 4px;
  border: 1px solid transparent;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.site-header__nav-link:hover,
.site-header__nav-link:focus-visible {
  outline: none;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--rule);
}
.site-header__nav-link--active {
  background: var(--accent);
  color: var(--on-accent);
}
.site-header__nav-link--active:hover,
.site-header__nav-link--active:focus-visible {
  background: var(--accent-strong);
  color: var(--on-accent);
}

/* Downloads page */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--accent);
  margin: 0 0 1rem;
  padding: 0.55rem 0.85rem 0.55rem 0.65rem;
  min-height: 44px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.back-link:hover,
.back-link:focus-visible {
  outline: none;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}
.back-link::before {
  content: "\2190"; /* leftwards arrow */
  font-size: 1rem;
  line-height: 1;
}

/* Inline document button (used in prose to link to /downloads PDFs) */
.prose .doc-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  padding: 0.55rem 0.95rem;
  min-height: 40px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  vertical-align: middle;
  /* Permit the long button label to wrap inside its inline-flex box. */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.prose .doc-button:hover,
.prose .doc-button:focus-visible {
  outline: none;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}
.prose .doc-button::after {
  content: "\2197"; /* up-right arrow indicating new tab */
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.85;
}

.download-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

/* Videos page */
.video-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
/* Higher-specificity selector beats `.prose li` (which sets padding-left: 0.25rem)
   so the card gets the full 40px horizontal padding on both sides. */
.prose .video-list .video-card {
  padding: 1.5rem 2.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
}
.video-card__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--text);
}
.video-card__desc {
  margin: 0 0 1rem;
  font-size: 0.97rem;
  line-height: 1.5;
}
/* Click-to-load video poster — privacy-preserving alternative to iframe embed.
   The thumbnail is self-hosted; no request goes to Google until the visitor
   actually clicks through to YouTube.
   Grid stacking (single cell) reliably overlays the play button on top of
   the thumbnail without depending on absolute-positioning subtleties. */
.video-card__poster {
  display: grid;
  grid-template-areas: "stack";
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0 0 1rem;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--rule);
  text-decoration: none;
}
.video-card__poster > * { grid-area: stack; }
.video-card__poster:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
/* Reset .prose img defaults (margin/border/max-height) for the thumbnail —
   the higher-specificity `.video-card__poster .video-card__thumb` selector
   beats `.prose img` so the image fills the grid cell flush. */
.video-card__poster .video-card__thumb {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  max-height: none;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.video-card__poster:hover .video-card__thumb,
.video-card__poster:focus-visible .video-card__thumb {
  transform: scale(1.02);
  opacity: 0.85;
}
.video-card__play {
  place-self: center;
  width: 64px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
  transition: transform 0.2s ease;
}
.video-card__play svg {
  display: block;
  width: 100%;
  height: auto;
}
.video-card__poster:hover .video-card__play,
.video-card__poster:focus-visible .video-card__play {
  transform: scale(1.1);
}
.video-card__cta {
  margin: 0;
  text-align: center;
}
.video-card__yt-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem 0.55rem 0.85rem;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #FFFFFF;
  background: #FF0033;
  border: 1px solid #FF0033;
  border-radius: 4px;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.video-card__yt-button:hover {
  background: #CC0029;
  border-color: #CC0029;
  color: #FFFFFF;
  transform: translateY(-1px);
}
.video-card__yt-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  background: #CC0029;
  border-color: #CC0029;
}
.video-card__yt-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #FFFFFF;
  display: block;
}
@media (max-width: 540px) {
  .prose .video-list .video-card {
    padding: 1.25rem 1.25rem;
  }
}
.prose .download-list .download-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
}
.download-card__main { min-width: 0; }
.download-card__title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--text);
}
.download-card__desc {
  margin: 0 0 0.6rem;
  font-size: 0.97rem;
  line-height: 1.5;
}
.download-card__meta {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.download-card__source {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
}
.download-card__source a {
  color: var(--accent);
  /* `anywhere` wraps long URLs without shredding short words mid-character. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.download-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  min-width: 9rem;
}
.download-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.7rem 1rem;
  min-height: 44px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.download-card__button:hover,
.download-card__button:focus-visible {
  outline: none;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}
.download-card__button--secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--rule);
}
.download-card__button--secondary:hover,
.download-card__button--secondary:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}
@media (max-width: 640px) {
  .prose .download-list .download-card {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .download-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .download-card__button { flex: 1 1 auto; }
}

/* Breadcrumbs (downloads page) */
.breadcrumbs {
  max-width: var(--content-max);
  margin: 1.5rem auto 0;
  padding: 0 var(--gutter);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
}
.breadcrumbs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  color: var(--muted);
  opacity: 0.6;
}
.breadcrumbs__item a {
  color: var(--accent);
  text-decoration: none;
}
.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus { text-decoration: underline; }
.breadcrumbs__item [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* Print */
@media print {
  .skip-link, .toc, .cta, .breadcrumbs { display: none; }
  .layout-sidebar { display: block; }
  .site-footer { background: transparent; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
  .prose h2 { color: #000; }
  .prose figure.figure-pair,
  .prose figure.figure-grid { grid-template-columns: 1fr; }
}