* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; margin-inline: auto; padding: 28px 40px; }
.site-header__brand { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; }
.site-header__brand-line { display: block; }
.site-header__mark { position: relative; display: block; width: 25px; height: 31px; flex: 0 0 auto; transform: rotate(-7deg); }
.site-header__mark::after { content: ''; position: absolute; inset: 4px 0 0 5px; }
.skip-link { position: absolute; z-index: 100; left: 16px; top: -100px; display: flex; align-items: center; min-height: 48px; padding: 8px 16px; }
.skip-link:focus { top: 12px; }
.notebook-page { width: calc(100% - 32px); max-width: 760px; margin-inline: auto; padding-block: 44px 48px; }
.page-heading { margin-bottom: 24px; }
.page-heading__eyebrow { margin: 0 0 16px; }
.page-heading__title { margin: 0; max-width: 710px; }
.page-heading__intro { max-width: 660px; margin: 0 0 32px; }
.reader-turn { display: flex; justify-content: flex-end; margin: 36px 0 28px; }
.reader-turn__question { max-width: 80%; margin: 0; padding: 12px 20px; }
.answer { position: relative; display: flex; align-items: flex-start; gap: 20px; }
.answer__mark { display: block; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 8px; }
.answer__body { min-width: 0; flex: 1; }
.answer__text { margin: 0 0 16px; }
.answer__heading { margin: 40px 0 12px; }
.answer__heading:first-child { margin-top: 0; }
.source-note { display: flex; flex-direction: column; align-items: flex-start; margin: 20px 0 36px; padding-top: 12px; }
.source-note__label { margin: 0 0 4px; }
.source-note__link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 6px; max-width: 100%; }
.source-note__context { margin: 4px 0 0; max-width: 620px; }
.next-note { margin: 32px 0 8px; }
.next-note__label { margin: 0 0 4px; }
.next-note__link { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; padding-block: 12px; }
.next-note__arrow { flex: 0 0 auto; }

.note-menu__trigger { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; min-width: 48px; min-height: 48px; cursor: pointer; list-style: none; }
.note-menu__trigger::-webkit-details-marker { display: none; }
.note-menu__glyph { position: relative; width: 18px; height: 12px; flex: 0 0 auto; }
.note-menu__glyph::before, .note-menu__glyph::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; }
.note-menu__glyph::before { top: 2px; }
.note-menu__glyph::after { bottom: 2px; }
.note-menu__close-label { display: none; }
.note-menu__scrim { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.note-menu__drawer { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(360px, calc(100% - 28px)); height: 100vh; height: 100dvh; padding: 104px 24px 32px; overflow-y: auto; overscroll-behavior: contain; }
.note-menu__title { margin: 0 0 32px; }
.note-menu__group { margin-bottom: 28px; }
.note-menu__group-label { margin: 0 0 8px; }
.note-menu__link { display: flex; align-items: center; min-height: 48px; padding: 8px 12px; margin-block: 4px; }
.note-menu[open] .note-menu__trigger { position: fixed; top: 24px; left: 24px; z-index: 50; }
.note-menu[open] .note-menu__open-label { display: none; }
.note-menu[open] .note-menu__close-label { display: inline; }
.note-menu[open] .note-menu__glyph::before { transform: rotate(45deg); top: 5px; }
.note-menu[open] .note-menu__glyph::after { transform: rotate(-45deg); bottom: 5px; }

.paper-collage { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 10 / 3; margin: 44px 0 36px; }
.paper-collage__image { position: absolute; width: 100%; height: 100%; object-fit: cover; font-size: 0; }
.paper-collage__underlay { position: absolute; inset: 0; }
.paper-collage__sheet { position: absolute; inset: 12% 14% 16% 9%; transform: rotate(-4deg); }
.paper-collage__fold { position: absolute; inset: 22% 19% 12% 25%; transform: rotate(5deg); }
.paper-collage__ribbon { position: absolute; left: 11%; top: 55%; width: 80%; height: 22%; transform: rotate(-8deg); }
.paper-collage__tab { position: absolute; right: 16%; top: 29%; width: 10%; height: 36%; transform: rotate(10deg); }
.paper-collage--visit-notes { margin-top: 24px; }
.question-hub { margin-top: 12px; }
.question-hub__branch { padding-block: 24px; }
.question-hub__caption { margin: 0 0 8px; }
.question-hub__heading { margin: 0; }
.question-hub__link { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding-block: 8px; }
.question-hub__arrow { flex: 0 0 auto; }
.question-hub__summary { margin: 4px 0 0; max-width: 650px; }

.print-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 24px 0 20px; }
.print-tools__button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 12px 24px; }
.print-tools__help { margin: 0; max-width: 300px; }
.visit-sheet__section { margin: 0; padding: 28px 0; }
.visit-sheet__heading { margin: 0 0 12px; }
.visit-sheet__check { display: flex; align-items: flex-start; gap: 14px; padding-block: 10px; min-height: 48px; cursor: pointer; }
.visit-sheet__checkbox { position: relative; width: 44px; height: 44px; flex: 0 0 auto; margin: 0; cursor: pointer; }
.visit-sheet__check span { padding-top: 7px; }
.visit-sheet__question { margin: 12px 0 16px 58px; }
.visit-sheet__note-label { margin: 0 0 8px 58px; }
.visit-sheet__writing-space { margin-left: 58px; height: 68px; }
.site-footer { max-width: 760px; width: calc(100% - 32px); margin: 0 auto; padding: 24px 0 40px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; }
.site-footer__link { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; padding: 8px 0; }
.site-footer__purpose { margin: 0; max-width: 670px; }

@media (max-width: 600px) {
  .site-header { padding: 20px 16px; }
  .site-header__brand { gap: 10px; }
  .note-menu__trigger { padding-inline: 12px; gap: 8px; }
  .notebook-page { padding-top: 28px; }
  .page-heading__eyebrow { max-width: 280px; }
  .reader-turn { margin-top: 28px; }
  .reader-turn__question { padding: 12px 16px; }
  .answer { gap: 12px; }
  .answer__mark { flex-basis: 12px; width: 12px; height: 12px; margin-top: 9px; }
  .paper-collage { margin-block: 32px 24px; }
  .question-hub__branch { padding-block: 24px; }
  .site-footer { padding-bottom: 28px; }
}

@media print {
  @page { size: auto; margin: 16mm; }
  .site-header, .skip-link, .reader-turn, .print-tools, .paper-collage, .next-note, .site-footer__links { display: none; }
  .notebook-page, .site-footer { width: 100%; max-width: none; padding: 0; margin: 0; }
  .page-heading { margin-bottom: 12px; }
  .page-heading__intro { max-width: none; margin-bottom: 16px; }
  .visit-sheet__section { break-inside: avoid; padding: 12px 0; }
  .visit-sheet__heading { margin-bottom: 4px; }
  .visit-sheet__check { padding-block: 4px; min-height: 32px; }
  .visit-sheet__checkbox { width: 32px; height: 32px; }
  .visit-sheet__check span { padding-top: 3px; }
  .visit-sheet__question, .visit-sheet__note-label, .visit-sheet__writing-space { margin-left: 46px; }
  .visit-sheet__question { margin-top: 4px; margin-bottom: 8px; }
  .visit-sheet__writing-space { height: 52px; }
  .site-footer { margin-top: 16px; }
  .source-note { break-inside: avoid; }
}