/* Reusable layout, space, type, surface, and interaction rules for semantic landmarks. */
@font-face {
  font-family: "Inter Notes";
  src: url("/media/inter-variable-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #142631;
  --ink-soft: #254554;
  --paper: #faf7e8;
  --paper-dim: #ebe7d5;
  --yellow: #f4da62;
  --mint: #9acbbc;
  --muted: #c0cfce;
  --line: #587582;
  --space: 1.25rem;
  --measure: 65ch;
  --edge: 2rem;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--ink); color: var(--paper); }
body, button, input { font-family: "Inter Notes", system-ui, sans-serif; }
body, p, li, a, label, button, figcaption { font-size: 1rem; }
body { line-height: 1.65; font-weight: 440; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
ol { padding-left: 1.5rem; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: .075em; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 5px; }
.paper-panel :focus-visible { outline-color: #25566d; }
::selection { color: var(--ink); background: var(--yellow); }

/* Page and reading-width utilities. */
.site-header, .guide-grid, .site-footer { width: min(100% - 5rem, 1320px); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space); }
.site-header { padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.guide-grid { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 3.5rem; }
.guide-grid { padding-block: 3.5rem 4rem; align-items: start; }
.page-main { grid-column: 2; grid-row: 1; min-width: 0; }
.chapter-rail { grid-column: 1; grid-row: 1; min-width: 0; }
.page-intro { padding-block: .2rem 2.25rem; }
.page-intro h1 { max-width: 16ch; }
.page-lead, .intro-copy { max-width: 53ch; }
.paper-panel { background: var(--paper); color: var(--ink); border-radius: 2rem .35rem 2rem .35rem; }
.paper-panel { padding: 2.8rem 3.1rem; border: 1px solid var(--paper-dim); }
.answer-section { max-width: var(--measure); margin-inline: auto; }
.answer-section + .answer-section { margin-top: 2.35rem; padding-top: 2.35rem; border-top: 1px solid #b7bdae; }
.answer-section p + p, .answer-section p + .question-prompt, .answer-section p + ol, .answer-section h2 + p { margin-top: 1rem; }
.answer-section h2 + .visit-checklist { margin-top: 1.35rem; }
.answer-section .question-prompt + p { margin-top: 1.25rem; }

/* Type utilities, shared by their content roles. */
h1, h2, h3 { line-height: 1.2; font-weight: 660; }
h1 { font-size: clamp(2.25rem, 4.8vw, 3.8rem); letter-spacing: -.048em; color: var(--yellow); }
h2 { font-size: 1.5rem; letter-spacing: -.028em; }
h3 { font-size: 1.125rem; letter-spacing: -.018em; }
.eyebrow { color: var(--mint); font-size: 1rem; line-height: 1.45; font-weight: 590; }
.eyebrow { margin-bottom: 1.4rem; }
.page-lead { margin-top: 1.5rem; font-size: 1.2rem; line-height: 1.55; color: var(--paper); }
.intro-copy { margin-top: 1rem; color: var(--muted); }
.site-name { display: flex; flex-direction: column; min-height: 58px; justify-content: center; }
.site-name { text-decoration: none; padding-left: 2.25rem; position: relative; line-height: 1.35; font-weight: 660; }
.site-name::before { content: ""; width: 1rem; height: 1rem; border: 3px solid var(--yellow); border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.site-name-detail { color: var(--muted); font-weight: 460; }
.next-label, .prompt-label { display: block; font-size: 1rem; font-weight: 650; }
.next-label { color: var(--mint); margin-bottom: .4rem; }

/* Interactive-area utilities: text links get real hit areas. */
.header-links, .site-footer nav { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; }
.header-links a, .site-footer a, .intro-back, .rail-return { display: inline-flex; gap: .65rem; align-items: center; min-height: 48px; padding-block: .55rem; }
.header-links a { text-decoration: none; }
.header-links a:hover, .site-footer a:hover, .intro-back:hover, .rail-return:hover { color: var(--yellow); }
.intro-back { margin-top: 1rem; color: var(--muted); }
.paper-panel .intro-back { color: var(--ink); }
.paper-panel .intro-back:hover { color: #27586a; }
.intro-jump, .print-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.75rem; }
.intro-jump, .print-button { min-height: 52px; padding: .8rem 1.2rem; background: var(--yellow); color: var(--ink); }
.intro-jump, .print-button { border-radius: .25rem 1.3rem 1.3rem .25rem; border: 2px solid var(--yellow); text-decoration: none; font-weight: 620; }
.intro-jump { margin-top: 1.6rem; }
.intro-jump:hover, .print-button:hover { background: var(--paper); border-color: var(--paper); }
.evidence-link { display: inline-block; min-height: 44px; max-width: 100%; padding-block: .55rem; font-weight: 620; color: #234e62; line-height: 1.65; }
.evidence-link { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.evidence-link:hover { color: var(--ink); background: #e3dfb3; }
.question-prompt { padding: 1.15rem 1.35rem; border-left: 4px solid #c5a331; background: #eee6bb; }
.question-prompt .prompt-label { margin: 0 0 .55rem; }
.question-prompt p + p { margin-top: 0; }

/* Chapter and route utilities; every route works without JavaScript. */
.chapter-index h2 { font-size: 1.2rem; margin-bottom: 1.8rem; color: var(--yellow); }
.chapter-group + .chapter-group { margin-top: 1.5rem; }
.chapter-label { font-size: 1rem; font-weight: 660; line-height: 1.2; color: var(--mint); margin-bottom: .45rem; }
.chapter-group a { display: flex; align-items: center; min-height: 46px; padding: .55rem .65rem .55rem 1.15rem; }
.chapter-group a { position: relative; color: var(--muted); text-decoration: none; border-left: 2px solid var(--ink-soft); }
.chapter-group a:hover { background: var(--ink-soft); color: var(--paper); }
.chapter-group a[aria-current="page"] { border-color: var(--yellow); color: var(--yellow); background: var(--ink-soft); }
.chapter-group a[aria-current="page"]::before { content: ""; position: absolute; width: .4rem; height: .4rem; border-radius: 50%; background: var(--yellow); left: -.25rem; }
.rail-return { margin-top: 1.5rem; color: var(--muted); }
.question-chapter { margin-top: 2rem; }
.question-chapter h3 { margin-bottom: .8rem; color: #36566a; font-weight: 630; }
.question-route { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; padding: 1.2rem 0; min-height: 88px; }
.question-route { text-decoration: none; border-top: 1px solid #b8bfad; }
.question-route:hover .route-title { text-decoration: underline; text-underline-offset: .2em; }
.question-copy { min-width: 0; display: block; }
.route-title { display: block; font-size: 1.18rem; font-weight: 650; line-height: 1.4; letter-spacing: -.025em; }
.route-note { display: block; margin-top: .4rem; font-size: 1rem; color: #415562; line-height: 1.55; }
.route-arrow { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #9ea799; border-radius: 50%; font-size: 1.35rem; }
.question-route:hover .route-arrow { background: var(--yellow); border-color: #958140; }
.next-note { margin-top: 1.5rem; }
.next-note a { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 104px; padding: 1.35rem 1.65rem; border: 1px solid var(--line); border-radius: 1.5rem .3rem; text-decoration: none; }
.next-note a:hover { background: var(--ink-soft); border-color: var(--mint); }
.next-arrow { color: var(--yellow); font-size: 1.75rem; }

/* Place, home-opening, and print-checklist utilities. */
.home-opening { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 2.5rem; align-items: start; margin-bottom: 2rem; }
.home-intro { padding-bottom: 0; }
.home-intro h1 { max-width: 13ch; }
.place-note { margin-top: 2rem; }
.home-place { margin: .25rem 0 0; }
.place-frame { position: relative; overflow: hidden; background: linear-gradient(145deg, #355a6c, #223c4c 63%, #ab9569); border: 1px solid #779290; border-radius: 5rem .3rem .3rem .3rem; }
.place-frame::after { content: ""; position: absolute; bottom: 1.1rem; left: 1.1rem; width: 2.2rem; height: .35rem; background: var(--yellow); border-radius: 2rem; pointer-events: none; }
.place-image { width: 100%; color: transparent; font-size: 0; aspect-ratio: 1024 / 640; object-fit: cover; }
.home-place .place-frame { border-radius: 5rem 5rem .4rem .4rem; }
.home-place .place-image { aspect-ratio: 768 / 960; }
.place-note figcaption { color: #405361; margin-top: .75rem; }
.home-place figcaption { color: var(--muted); }
.record-steps { margin-top: 1.5rem; }
.record-steps li { margin-top: 1.25rem; padding-left: .35rem; }
.record-steps li::marker { font-size: 1rem; font-weight: 650; }
.record-steps h3 + p { margin-top: .6rem; }
.visit-checklist li + li { border-top: 1px solid #b8bfad; }
.visit-checklist label { display: flex; align-items: flex-start; gap: 1rem; min-height: 56px; padding-block: 1rem; cursor: pointer; }
.visit-checklist input { flex: 0 0 44px; width: 44px; height: 44px; margin: .12rem 0 0; accent-color: #285868; }
.visit-checklist input:checked + span { text-decoration: underline; text-decoration-color: #8a967e; text-underline-offset: .2em; }
.print-tools { margin-top: 1.35rem; }
.print-tools .print-button { margin-top: 1rem; }
.site-footer { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; }
.site-footer p { max-width: 69ch; color: var(--muted); }
.site-footer nav { margin-top: 1rem; }
.site-footer a { font-size: 1rem; }
.skip-link { position: absolute; left: 1rem; top: -8rem; z-index: 2; min-height: 48px; padding: .75rem 1rem; color: var(--ink); background: var(--yellow); }
.skip-link:focus { top: 1rem; }

@media (min-width: 1100px) {
  .chapter-rail { position: sticky; top: 1.5rem; }
}
@media (max-width: 1099px) {
  .site-header, .guide-grid, .site-footer { width: min(100% - 3rem, 940px); }
  .guide-grid { grid-template-columns: 190px minmax(0, 1fr); gap: 2rem; }
  .home-opening { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .home-place { max-width: 100%; }
  .home-place .place-image { aspect-ratio: 1024 / 400; }
  .home-place .place-frame { border-radius: 3rem .3rem; }
  .paper-panel { padding: 2.2rem; }
}
@media (max-width: 760px) {
  :root { --edge: 1.25rem; }
  .site-header, .guide-grid, .site-footer { width: calc(100% - 2.5rem); }
  .site-header { gap: .75rem; align-items: flex-start; padding-block: 1rem; }
  .site-name { padding-left: 1.65rem; min-height: 52px; flex-shrink: 0; }
  .site-name::before { width: .7rem; height: .7rem; border-width: 2px; }
  .header-links { flex-direction: column; gap: 0; align-items: flex-end; }
  .header-links a { min-height: 44px; padding-block: .25rem; gap: .45rem; }
  .guide-grid { display: flex; flex-direction: column; padding-block: 2.2rem 2.5rem; gap: 3rem; }
  .page-main, .chapter-rail { width: 100%; }
  .page-intro { padding-bottom: 1.7rem; }
  h1 { font-size: clamp(2.1rem, 8.3vw, 3.1rem); line-height: 1.12; }
  h2 { font-size: 1.35rem; }
  .eyebrow { margin-bottom: 1.15rem; }
  .page-lead { font-size: 1.1rem; margin-top: 1.25rem; }
  .home-opening { gap: 1.6rem; margin-bottom: 1.6rem; }
  .home-intro { padding: 0; }
  .home-intro h1 { max-width: 14ch; }
  .home-place .place-image { aspect-ratio: 1024 / 420; }
  .home-place figcaption { margin-top: .5rem; }
  .paper-panel { padding: 1.55rem 1.3rem; border-radius: 1.5rem .3rem; }
  .answer-section + .answer-section { padding-top: 1.8rem; margin-top: 1.8rem; }
  .question-prompt { padding: 1rem; }
  .question-route { gap: .8rem; }
  .route-title { font-size: 1.1rem; }
  .chapter-rail { border-top: 1px solid var(--line); padding-top: 2rem; }
  .chapter-index h2 { margin-bottom: 1.4rem; }
  .chapter-group a { padding-block: .65rem; }
  .next-note a { padding: 1.15rem; }
  .site-footer { padding-block: 1.6rem 2rem; }
  .site-footer nav { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  :root { color-scheme: light; }
  body { background: white; color: #142631; font-size: 16px; }
  .site-header, .site-footer, .chapter-rail, .skip-link, .intro-back, .next-note, .print-tools, .place-note { display: none; }
  .guide-grid { display: block; width: 100%; padding: 0; margin: 0; }
  .page-intro, .paper-panel { padding: 0; border: 0; border-radius: 0; background: transparent; }
  h1 { font-size: 30px; color: #142631; max-width: none !important; }
  .eyebrow, .page-lead { color: #142631; }
  .eyebrow { margin-bottom: .6rem; }
  .page-lead { margin-top: .6rem; font-size: 16px; }
  .paper-panel { margin-top: 1rem; }
  .answer-section + .answer-section { margin-top: 1rem; padding-top: 1rem; }
  .answer-section h2 { font-size: 20px; }
  .answer-section h2 + p, .answer-section p + p { margin-top: .5rem; }
  .visit-checklist label { min-height: 44px; padding-block: .6rem; }
  .visit-checklist input { flex-basis: 24px; width: 24px; height: 24px; appearance: none; border: 1.5px solid #142631; border-radius: 2px; background: transparent; }
  .visit-checklist input:checked { background: #142631; box-shadow: inset 0 0 0 4px white; print-color-adjust: exact; }
  .visit-checklist li, .question-prompt, h2 { break-inside: avoid; }
  .evidence-link { color: #142631; }
  @page { margin: 16mm; }
}