@font-face {
  font-family: "Desk Sans";
  src: url("./desk-sans-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #fafaf8;
  --ink: #1a1a1a;
  --pencil: #4a4a4a;
  --kraft: #c4a77d;
  --sheet: #f2f1ec;
  --line: #4a4a4a;
  --quiet-line: #b4b3aa;
  --inverse: #fafaf8;
  --dark-surface: #1a1a1a;
  --tape-ink: #1a1a1a;
  --scrap-paper: #fafaf8;
  --scrap-line: #4a4a4a;
  --focus: #705426;
  --noise: .045;
  --sans: "Desk Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --body-size: 1rem;
  --body-leading: 1.6;
  --small-size: 1rem;
  --hero-size: clamp(2.5rem, 5vw, 4rem);
  --title-size: 2.25rem;
  --question-size: 1.5rem;
  --tracking: -.045em;
  --measure: 68ch;
  --grid-width: 1280px;
  --gutter: 1.5rem;
  --space-unit: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --section-gap: clamp(4rem, 8vw, 8rem);
  --answer-gap: 3rem;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1a1a;
    --ink: #fafaf8;
    --pencil: #d0d0c8;
    --sheet: #252524;
    --line: #b5b5aa;
    --quiet-line: #66665f;
    --inverse: #1a1a1a;
    --dark-surface: #fafaf8;
    --focus: #c4a77d;
    --noise: .035;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-block: var(--space-lg); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--body-size); line-height: var(--body-leading); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: var(--noise);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%234a4a4a' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  pointer-events: none;
}
a { color: inherit; text-underline-offset: .2em; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
h1, h2, h3, p, figure, dl { margin: 0; }
h1, h2, h3 { font-weight: 700; }
p, li, dd { overflow-wrap: break-word; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.site-width { max-width: var(--grid-width); margin-inline: auto; padding-inline: var(--gutter); }
.masthead-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 112px; }
.home-link { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; text-decoration: none; font-size: var(--small-size); font-weight: 500; }
.notebook-mark { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 2px solid var(--ink); border-radius: 3px 7px 2px 5px; font-size: 1.5rem; line-height: 1; transform: rotate(-3deg); }
.directory-jump { display: inline-flex; align-items: center; min-height: 48px; padding: .5rem .75rem; border-bottom: 2px dashed var(--line); text-decoration: none; font-weight: 500; white-space: nowrap; }
.skip-link { position: fixed; left: var(--gutter); top: 8px; z-index: 10; display: flex; align-items: center; min-height: 48px; padding: .5rem 1rem; background: var(--paper); border: 2px solid var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.reading-main { padding-top: 3rem; padding-bottom: var(--section-gap); }
.reading-hero { max-width: 860px; margin-bottom: var(--section-gap); padding-top: var(--space-md); border-top: 2px solid var(--ink); }
.page-label { margin-bottom: var(--space-md); color: var(--pencil); font-family: var(--mono); font-size: var(--small-size); font-weight: 500; }
.reading-title { max-width: 24ch; font-size: var(--title-size); line-height: 1.18; letter-spacing: var(--tracking); }
.hero-copy { max-width: 58ch; margin-top: var(--space-md); color: var(--pencil); font-size: 1.125rem; line-height: 1.65; }
.reading-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(240px, 1fr); gap: clamp(2rem, 7vw, 7rem); }
.answer-column { min-width: 0; max-width: var(--measure); }
.margin-column { min-width: 0; align-self: start; }
.question-block { margin-bottom: var(--answer-gap); }
.question-heading { max-width: var(--measure); margin-bottom: var(--space-md); font-size: var(--question-size); line-height: 1.3; letter-spacing: -.025em; }
.answer-copy { max-width: var(--measure); margin-bottom: var(--space-sm); font-size: var(--body-size); line-height: var(--body-leading); }
.answer-copy:last-child { margin-bottom: 0; }
.technical-value { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.answer-list { margin: var(--space-md) 0; padding-left: var(--space-md); }
.list-item { padding-left: .375rem; margin-bottom: .75rem; font-size: var(--body-size); }
.next-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 48px; max-width: 100%; margin-top: var(--space-sm); padding-block: .65rem; border-bottom: 2px solid var(--ink); text-decoration: none; font-size: var(--body-size); font-weight: 500; }
.next-link span { flex: 0 0 auto; font-size: 1.25rem; }
.kraft-paper { background: var(--kraft); color: var(--tape-ink); }
.note-padding { padding: var(--space-lg); }
.note-edge { border-radius: 3px 8px 4px 2px; border: 1px solid var(--tape-ink); }
.note-heading { margin-bottom: var(--space-sm); font-family: var(--mono); font-size: var(--body-size); font-weight: 500; }
.margin-column .note-edge { position: relative; margin-top: .5rem; }
.margin-column .note-edge::before { content: ""; position: absolute; width: 72px; height: 24px; top: -13px; left: 24px; transform: rotate(-4deg); background: var(--kraft); opacity: .65; border-inline: 1px dashed var(--tape-ink); }
.evidence-section { margin-block: var(--answer-gap); }
.evidence-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: var(--space-md); }
.evidence-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.evidence-paper { background: var(--sheet); }
.evidence-padding { padding: var(--space-md); }
.evidence-edge { border: 1px dashed var(--line); border-radius: 4px 10px 5px 12px; }
.evidence-label { margin-bottom: var(--space-sm); font-family: var(--mono); font-size: var(--body-size); font-weight: 500; }
.evidence-date { margin-top: var(--space-md); font-family: var(--mono); font-size: var(--body-size); color: var(--pencil); }
.source-link { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 48px; margin-top: .5rem; padding-block: .75rem; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--body-size); font-weight: 500; overflow-wrap: anywhere; }
.source-link span { flex: 0 0 auto; font-size: 1.25rem; }
.still-frame { min-width: 0; margin: 0 0 var(--space-lg); }
.still-surface { position: relative; background: var(--sheet); border: 1px solid var(--line); border-radius: 3px 8px 2px 4px; }
.still-image { display: block; width: 100%; height: auto; object-fit: cover; background: var(--sheet); filter: grayscale(.8) contrast(.92); color: transparent; font-size: 0; }
.reading-frame .still-surface { aspect-ratio: 3 / 2; }
.reading-frame .still-image { height: 100%; aspect-ratio: 3 / 2; }
.tape-strip { position: absolute; z-index: 2; width: 110px; height: 28px; background: var(--kraft); opacity: .8; left: 20%; top: -15px; border-inline: 1px dashed var(--tape-ink); transform: rotate(-5deg); pointer-events: none; }
.sketch-outline { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); z-index: 1; pointer-events: none; }
.sketch-stroke { fill: none; stroke: var(--line); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sketch-faint { opacity: .45; }
.image-caption { margin-top: .75rem; padding-inline: .25rem; color: var(--pencil); font-family: var(--mono); font-size: var(--body-size); }
.compare-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-md); }
.comparison-section { margin-block: var(--answer-gap); }
.compare-grid .note-padding { padding: var(--space-md); }
.source-section { margin-bottom: var(--answer-gap); }
.source-card-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-md); }
.source-card-grid > :first-child, .source-card-grid > :last-child { grid-column: 1 / -1; }
.footer-paper { background: var(--sheet); border-top: 2px dashed var(--line); }
.footer-padding { padding-block: clamp(3rem, 6vw, 6rem); }
.footer-intro { display: flex; justify-content: space-between; align-items: start; gap: var(--space-lg); margin-bottom: 2.5rem; }
.directory-title { font-size: 2rem; line-height: 1.2; letter-spacing: var(--tracking); }
.top-link { display: inline-flex; align-items: center; min-height: 48px; padding: .5rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.directory-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.05fr 1.1fr; gap: var(--space-lg); }
.directory-heading { font-family: var(--mono); font-size: var(--body-size); font-weight: 500; margin-bottom: var(--space-sm); color: var(--pencil); }
.directory-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 48px; padding-block: .65rem; font-size: var(--body-size); line-height: 1.4; text-decoration: none; border-bottom: 1px solid var(--quiet-line); }
.directory-link span { flex: 0 0 auto; }
.directory-link[aria-current="page"] { font-weight: 700; border-bottom: 2px solid var(--ink); }
.footer-description { max-width: var(--measure); margin-top: 3rem; font-size: var(--body-size); color: var(--pencil); }
.action-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 52px; padding: .9rem 1.25rem; max-width: 100%; border: 1px solid var(--ink); border-radius: 3px 8px 5px 2px; text-decoration: none; font-size: var(--body-size); font-weight: 500; }
.button-ink { background: var(--dark-surface); color: var(--inverse); }
.button-paper { background: var(--paper); color: var(--ink); }

@media (hover: hover) {
  .directory-link:hover, .next-link:hover, .source-link:hover, .directory-jump:hover { text-decoration: underline; text-decoration-style: dashed; }
  .action-link:hover { animation: pencil-jolt .15s steps(2, end) 1; }
}
@keyframes pencil-jolt { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-1px, 1px); } 70% { transform: translate(1px, 0); } }

@media (max-width: 900px) {
  .reading-grid { grid-template-columns: minmax(0, 1fr); gap: var(--answer-gap); }
  .margin-column { max-width: var(--measure); }
  .margin-column .note-edge { max-width: 36ch; }
  .reading-frame { max-width: 480px; }
  .directory-grid { grid-template-columns: 1.15fr 1fr; gap: 2.5rem var(--space-lg); }
}
@media (max-width: 540px) {
  .masthead-row { align-items: start; min-height: 120px; padding-top: var(--space-md); gap: .75rem; }
  .home-link { gap: .5rem; max-width: 215px; line-height: 1.4; }
  .notebook-mark { flex-basis: 32px; height: 36px; font-size: 1.25rem; }
  .directory-jump { padding-inline: .25rem; }
  .reading-main { padding-top: var(--space-md); }
  .reading-hero { margin-bottom: 4rem; }
  .reading-title { font-size: 2.25rem; }
  .hero-copy { font-size: var(--body-size); }
  .evidence-grid, .compare-grid, .source-card-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-intro { flex-direction: column; gap: var(--space-sm); }
  .directory-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-description { margin-top: 2.5rem; }
  .note-padding { padding: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  :root { color-scheme: light; --paper: #fff; --ink: #1a1a1a; --pencil: #4a4a4a; --sheet: #fff; --line: #4a4a4a; --kraft: #e8ddcb; --gutter: 0; }
  body::before, .masthead-row, .skip-link, .margin-column, .footer-paper, .hero-frame { display: none; }
  .reading-main { padding: 0; }
  .reading-grid { display: block; }
  .reading-hero { margin-bottom: 2rem; }
  .question-block, .evidence-edge { break-inside: avoid; }
  .evidence-grid { display: block; }
  .evidence-edge { margin-bottom: var(--space-md); }
}