@font-face {
  font-family: "PT Serif";
  src: url("heading.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two Text";
  src: url("reading.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --blue: #C8E0F4;
  --pink: #F5E0E8;
  --grey: #E8E8E8;
  --surface: #F5F5F5;
  --ink: #293845;
  --muted: #465568;
  --link: #184B67;
  --edge: #6B7988;
  --focus: #294D70;
  --raised: 8px 8px 20px #D1D5D9, -8px -8px 20px #FFFFFF;
  --inset: inset 4px 4px 10px #D2D7DC, inset -4px -4px 10px #FFFFFF;
  --body-font: "STIX Two Text", Georgia, serif;
  --heading-font: "PT Serif", Georgia, serif;
  --label-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 18px/1.6 var(--body-font); }
main, header, footer, section, article, aside, nav, figure { min-width: 0; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-family: var(--heading-font); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.12; letter-spacing: -.035em; max-width: 20ch; }
h2 { font-size: clamp(1.55rem, 2.5vw, 2rem); line-height: 1.25; letter-spacing: -.02em; }
h3 { font-size: 1.25rem; line-height: 1.35; }
p, li { overflow-wrap: break-word; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .13em; }
a, summary { -webkit-tap-highlight-color: #C8E0F4; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
::selection { background: var(--blue); color: var(--ink); }
.u-container { width: min(100% - 80px, 1280px); margin-inline: auto; }
.u-grid { display: grid; }
.u-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.u-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); align-items: start; }
.u-gap-2 { gap: 16px; }
.u-gap-3 { gap: 24px; }
.u-gap-5 { gap: 40px; }
.u-gap-8 { gap: 64px; }
.u-stack > * + * { margin-top: 24px; }
.u-tight > * + * { margin-top: 16px; }
.u-measure { max-width: 72ch; }
.u-pad-3 { padding: 24px; }
.u-pad-4 { padding: 32px; }
.u-pad-5 { padding: 40px; }
.u-radius { border-radius: 14px; }
.u-border { border: 1px solid var(--edge); }
.u-raised { box-shadow: var(--raised); }
.u-inset { box-shadow: var(--inset); }
.u-blue { background: var(--blue); }
.u-pink { background: var(--pink); }
.u-grey { background: var(--grey); }
.u-surface { background: var(--surface); }
.u-label { font: 500 16px/1.5 var(--label-font); }
.u-muted { color: var(--muted); }
.u-block { display: block; }
.u-target { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; padding: 10px 16px; }
.u-press { transition: box-shadow 150ms ease, background-color 150ms ease; }
.u-press:active { box-shadow: var(--inset); }
.u-marker { letter-spacing: .08em; text-transform: uppercase; }
.skip-link { position: absolute; top: 16px; left: 16px; transform: translateY(-200%); z-index: 5; background: var(--surface); border: 2px solid var(--focus); }
.skip-link:focus { transform: translateY(0); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--edge); }
.masthead-name { color: var(--ink); font: 700 18px/1.25 var(--heading-font); text-decoration: none; padding-left: 0; flex-wrap: wrap; gap: 6px 16px; }
.masthead-name span { font: 500 16px/1.5 var(--label-font); color: var(--muted); }
.masthead-directory { text-decoration: none; white-space: nowrap; }
.breadcrumbs { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumbs a { padding-left: 0; }
.arrival { padding-block: 56px 64px; }
.arrival-kicker { display: inline-block; color: var(--link); }
.arrival-scenario { color: var(--ink); padding-left: 24px; border-left: 3px solid var(--edge); }
.arrival-intro { max-width: 55ch; }
.arrival-note { margin-top: 40px; transform: rotate(-1deg); }
.arrival-note p + p { margin-top: 24px; font-size: 1.6rem; line-height: 1.45; font-family: var(--heading-font); }
.collage { position: relative; overflow: hidden; aspect-ratio: 6 / 5; width: 100%; background: var(--grey); isolation: isolate; }
.collage::before, .collage::after { content: ""; position: absolute; width: 85%; height: 60%; left: -5%; bottom: 7%; z-index: -1; box-shadow: 5px 5px 15px #A4B4C1; }
.collage::before { background: var(--blue); clip-path: polygon(0 33%, 28% 8%, 54% 31%, 72% 14%, 100% 45%, 100% 100%, 0 100%); transform: rotate(-4deg); }
.collage::after { background: var(--pink); left: 25%; bottom: -10%; transform: rotate(10deg); clip-path: polygon(0 22%, 37% 5%, 77% 16%, 100% 3%, 100% 100%, 0 100%); }
.collage img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; font: 400 16px/1.6 var(--body-font); color: var(--ink); }
.explanations { padding-bottom: 32px; }
.myth-row { padding-block: 48px; border-top: 1px solid var(--edge); }
.myth-row:nth-child(even) .myth-note { background: var(--pink); }
.myth-note p { font-size: 1.2rem; line-height: 1.5; font-family: var(--heading-font); }
.myth-note p + p { margin-top: 16px; }
.myth-answer { max-width: 72ch; }
.questions { list-style: none; padding: 0; }
.questions li { position: relative; padding: 16px 16px 16px 52px; background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--inset); font-size: 18px; }
.questions li + li { margin-top: 16px; }
.questions li::before { content: ""; position: absolute; width: 16px; height: 16px; left: 20px; top: 22px; border: 1.5px solid var(--edge); border-radius: 3px; }
.source-drawer { border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); box-shadow: var(--inset); }
.source-drawer summary { cursor: pointer; padding: 16px 24px; min-height: 56px; font: 500 16px/1.5 var(--label-font); }
.source-drawer[open] summary { border-bottom: 1px solid var(--edge); }
.source-links { list-style: none; padding: 16px 24px; }
.source-links a { min-height: 48px; display: flex; align-items: center; padding: 8px 0; overflow-wrap: anywhere; font-size: 16px; }
.source-links li + li { border-top: 1px solid var(--grey); }
.next-question { padding-block: 24px 56px; }
.next-question a { font-weight: 500; text-decoration: none; }
.directory { padding-block: 48px; border-top: 1px solid var(--edge); background: var(--grey); }
.directory-heading { max-width: 40ch; }
.directory-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.directory-link { display: flex; min-height: 72px; align-items: center; color: var(--ink); font: 500 16px/1.5 var(--label-font); text-decoration: none; padding: 16px 24px; border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); box-shadow: var(--raised); }
.directory-link:hover { background: var(--blue); text-decoration: underline; text-underline-offset: .2em; }
.directory-link[aria-current="page"] { background: var(--blue); box-shadow: var(--inset); border-width: 2px; }
.directory-footer { display: flex; align-items: start; gap: 32px; justify-content: space-between; margin-top: 40px; font-size: 16px; }
.directory-footer p { max-width: 72ch; }
.directory-footer a { flex-shrink: 0; padding-top: 0; }
@media (min-width: 1024px) {
  .myth-row:nth-child(even) { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); }
  .myth-row:nth-child(even) .myth-heading { order: 2; }
  .myth-row:nth-child(even) .myth-answer { order: 1; }
}
@media (max-width: 800px) {
  .u-container { width: min(100% - 48px, 1280px); }
  .u-split, .u-row { grid-template-columns: minmax(0, 1fr); }
  .u-gap-8 { gap: 32px; }
  .arrival { padding-block: 40px; }
  .arrival-note { margin-top: 0; transform: none; }
  .collage { max-width: 560px; }
  .directory-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .myth-row { padding-block: 32px; }
  .directory-footer { display: block; }
  .directory-footer a { margin-top: 24px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .u-container { width: calc(100% - 40px); }
  .masthead { flex-wrap: wrap; gap: 16px; padding-block: 16px; }
  .masthead-name { flex-basis: 100%; }
  .masthead-directory { width: 100%; justify-content: center; }
  .u-pad-5 { padding: 24px; }
  .u-pad-4 { padding: 24px; }
  .u-gap-5 { gap: 24px; }
  .arrival-scenario { padding-left: 16px; }
  .arrival-note p + p { font-size: 1.4rem; }
  .myth-note p { font-size: 18px; }
  .questions li { font-size: 16px; }
  .directory-nav { grid-template-columns: minmax(0, 1fr); }
  .directory-link { min-height: 56px; }
  .source-drawer summary { padding-inline: 16px; }
  .source-links { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .u-raised, .u-inset, .directory-link, .questions li, .source-drawer { box-shadow: none; border: 1px solid CanvasText; }
}
@media print {
  body { background: white; color: black; font-size: 12pt; }
  .masthead, .skip-link, .directory-nav, .collage, .next-question, .directory-footer a { display: none; }
  .u-container { width: 100%; }
  .u-split, .u-row, .myth-row:nth-child(even) { display: block; }
  .arrival, .myth-row, .directory { padding-block: 16px; }
  .u-raised, .u-inset, .source-drawer, .questions li { box-shadow: none; background: white; }
  .myth-note { margin-block: 16px; }
  h1 { font-size: 26pt; max-width: none; }
  h2 { font-size: 18pt; }
  h1, h2, h3, summary { break-after: avoid; }
  .questions li { break-inside: avoid; }
  a { color: black; }
}