@layer reset, fonts, foundation, layout, components, states, responsive, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p { margin: 0; }
  button, summary { font: inherit; }
  a { color: inherit; }
  button { color: inherit; }
  [hidden] { display: none !important; }
}

@layer fonts {
  @font-face {
    font-family: "PT Serif";
    src: url("./display.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "PT Serif Caption";
    src: url("./reading.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
}

@layer foundation {
  :root {
    color-scheme: light;
    --earth: #8b4513;
    --olive: #556b2f;
    --sky: #87ceeb;
    --sand: #d2b48c;
    --orange: #ff8c00;
    --blue: #4682b4;
    --gold: #daa520;
    --ink: #1a1a1a;
    --paper: #fff8ed;
    --cream: #fffdf7;
    --unit: 8px;
    --corner: 8px;
    --reading: "PT Serif Caption", Georgia, serif;
    --display: "PT Serif", Georgia, serif;
  }
  html { font-size: 16px; scroll-padding-top: 24px; }
  body { color: var(--ink); background: var(--paper); font: 400 1rem/1.6 var(--reading); }
  h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; }
  h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.12; letter-spacing: -.025em; }
  h2 { font-size: clamp(1.625rem, 2.1vw, 2rem); line-height: 1.3; }
  h3 { font-size: 1.25rem; line-height: 1.4; }
  p { max-width: 72ch; }
  p + p { margin-top: 16px; }
  a, button, summary { font-size: 1rem; }
  a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
  a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--earth); outline-offset: 4px; }
  ::selection { background: var(--gold); color: var(--ink); }
}

@layer layout {
  .header-inner, .guide-main, .footer-inner { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
  .site-header { background: var(--cream); border-top: 8px solid var(--olive); }
  .header-inner { display: grid; grid-template-columns: 1fr 264px 1fr; gap: 16px; align-items: center; min-height: 120px; }
  .header-start, .header-further { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .header-further { justify-content: flex-end; }
  .guide-main { padding-block: 32px 80px; }
  .home-opening { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 24px; }
  .page-opening { min-width: 0; }
  .page-opening h1 { max-width: 19ch; margin-block: 16px 24px; }
  .page-home h1 span { display: block; }
  .page-intro { max-width: 58ch; }
  .page-opening > .route-button { margin-top: 32px; }
  .reading-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(272px, 1fr); gap: 64px; align-items: start; margin-top: 40px; }
  .reading-copy { min-width: 0; }
  .page-reading .page-opening { max-width: 840px; }
  .reading-layout > .myth-stop { grid-column: 2; grid-row: 1; }
  .journey { position: relative; padding-block: 48px 8px; margin-top: 56px; }
  .journey::before { content: ""; position: absolute; left: 22%; top: 0; bottom: 0; width: 54%; background: var(--olive); opacity: .8; clip-path: polygon(0 0, 2% 0, 2% 22%, 91% 22%, 91% 64%, 24% 64%, 24% 100%, 22% 100%, 22% 62%, 89% 62%, 89% 24%, 0 24%); }
  .journey-stop { position: relative; max-width: 840px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; background: var(--cream); border: 2px solid var(--earth); border-radius: var(--corner); padding: 40px; box-shadow: 8px 8px 0 var(--sand); }
  .journey-stop:nth-child(2) { margin: 64px 0 0 auto; border-color: var(--olive); box-shadow: 8px 8px 0 var(--sky); }
  .journey-stop:nth-child(3) { margin: 64px 8% 0 0; border-color: var(--earth); box-shadow: 8px 8px 0 var(--gold); }
  .next-stop { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; border-block: 2px solid var(--earth); padding: 40px 0; }
  .footer-inner { padding-block: 48px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 24px 64px; }
  .footer-description { grid-column: 2; max-width: 68ch; }
  .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
}

@layer components {
  .header-start a, .header-further a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: var(--corner); text-decoration: none; }
  .guide-mark { min-height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; color: var(--earth); font: 700 1.375rem/1.4 var(--display); }
  .guide-mark-kind { font: 400 1rem/1.6 var(--reading); color: var(--ink); }
  .landscape-edge { position: relative; height: 24px; background: var(--sky); overflow: hidden; }
  .landscape-edge span { position: absolute; bottom: 0; height: 16px; background: var(--sand); clip-path: polygon(0 50%, 12% 50%, 12% 0, 40% 0, 40% 50%, 73% 50%, 73% 25%, 100% 25%, 100% 100%, 0 100%); }
  .landscape-edge span:nth-child(1) { width: 43%; left: 0; }
  .landscape-edge span:nth-child(2) { width: 38%; right: 0; height: 24px; background: var(--olive); }
  .landscape-edge span:nth-child(3) { width: 18%; left: 47%; height: 8px; background: var(--blue); }
  .eyebrow { color: var(--olive); font-size: 1rem; line-height: 1.6; }
  .route-button { display: inline-flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 24px; border: 2px solid var(--earth); border-radius: var(--corner); background: var(--orange); color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--earth); }
  .journey-progress { display: flex; gap: 8px; margin-top: 40px; width: min(100%, 352px); }
  .journey-progress span { height: 8px; flex: 1; background: var(--sand); }
  .journey-progress span:first-child { background: var(--olive); }
  .myth-stop { min-width: 0; border: 2px solid var(--olive); background: var(--cream); border-radius: var(--corner); padding: 24px; }
  .home-opening .myth-stop { margin-top: 24px; box-shadow: 8px 8px 0 var(--sky); }
  .myth-stop > h2 { font-size: 1.5rem; margin-block: 8px 24px; }
  .fact-stop { padding-top: 24px; border-top: 4px solid var(--olive); }
  .fact-stop h3 { margin-block: 8px 16px; }
  .stop-copy { min-width: 0; }
  .stop-copy > h2 { margin-bottom: 24px; }
  .stop-mark { display: flex; justify-content: center; align-items: center; background: var(--gold); border: 2px solid var(--earth); height: 64px; width: 64px; font: 700 2rem/1 var(--display); box-shadow: 4px 4px 0 var(--earth); }
  .journey-stop:nth-child(2) .stop-mark { background: var(--sky); border-color: var(--olive); box-shadow: 4px 4px 0 var(--olive); }
  .journey-stop:nth-child(3) .stop-mark { background: var(--sand); }
  .reading-stop { border-top: 2px solid var(--sand); padding-top: 32px; margin-top: 40px; }
  .reading-stop:first-child { margin-top: 0; border-top: 4px solid var(--olive); }
  .next-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 24px; padding-block: 8px; color: var(--earth); gap: 16px; }
  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; }
  .breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; padding-right: 8px; color: var(--earth); }
  .next-stop h2 { margin-block: 8px 16px; }
  .site-footer { color: var(--paper); background: var(--ink); border-top: 8px solid var(--olive); }
  .footer-heading { font: 700 1.5rem/1.5 var(--display); max-width: 20ch; }
  .footer-links a { min-height: 48px; display: inline-flex; align-items: center; padding-block: 8px; color: var(--paper); }
  .site-footer a:focus-visible { outline-color: var(--gold); }
  .urgent-stop { border: 2px solid var(--earth); border-left: 8px solid var(--earth); border-radius: var(--corner); background: var(--cream); padding: 32px; margin-bottom: 40px; }
  .urgent-stop h2 { color: var(--earth); }
  .urgent-stop p:nth-of-type(3) { font-family: var(--display); font-weight: 700; font-size: 1.25rem; border-block: 2px solid var(--gold); padding-block: 16px; }
  .evidence-note { margin-top: 24px; border-top: 1px solid var(--olive); }
  .evidence-note summary { min-height: 48px; padding: 12px 4px; cursor: pointer; color: var(--olive); }
  .source-arrow { float: right; }
  .evidence-content { padding: 8px 0 16px; }
  .source-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; padding: 12px 8px; margin-top: 8px; background: var(--paper); color: var(--earth); overflow-wrap: anywhere; }
  .evidence-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: 100dvh; width: min(100%, 544px); max-width: 100%; padding: 32px; border: 0; border-left: 8px solid var(--olive); background: var(--cream); color: var(--ink); overflow-y: auto; }
  .evidence-drawer::backdrop { background: rgb(26 26 26 / .55); }
  .drawer-header { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 24px; border-bottom: 4px solid var(--olive); }
  .drawer-title { font-size: 1.5rem; }
  .drawer-close { cursor: pointer; min-height: 48px; padding: 8px 16px; border: 2px solid var(--earth); border-radius: var(--corner); background: var(--sand); }
  .drawer-content { padding-top: 24px; }
  .missing-path { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-block: 40px; }
  .missing-path .next-link { margin: 0; }
  .skip-link { position: absolute; z-index: 20; top: 8px; left: 24px; min-height: 48px; display: inline-flex; align-items: center; padding: 8px 16px; background: var(--cream); color: var(--earth); transform: translateY(-200%); }
}

@layer states {
  .header-start a[aria-current="page"], .header-further a[aria-current="page"] { background: var(--sand); text-decoration: underline; }
  .header-start a:hover, .header-further a:hover { background: var(--sky); }
  .route-button:hover { background: var(--gold); }
  .source-link:hover { background: var(--sand); color: var(--ink); }
  .skip-link:focus { transform: translateY(0); }
  body.evidence-open { overflow: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .route-button { transition: background-color 120ms ease; }
  }
}

@layer responsive {
  @media (max-width: 1100px) {
    .header-inner { grid-template-columns: 1fr 240px 1fr; }
    .home-opening, .reading-layout { gap: 32px; }
    .header-start, .header-further { gap: 0; }
    .header-start a, .header-further a { padding-inline: 6px; }
  }
  @media (max-width: 760px) {
    .header-inner { grid-template-columns: 1fr; gap: 8px; padding-block: 16px; }
    .guide-mark { grid-row: 1; min-height: 56px; }
    .header-start, .header-further { justify-content: center; gap: 8px; }
    .header-start a, .header-further a { padding-inline: 8px; }
    .guide-main { padding-block: 24px 48px; }
    .home-opening, .reading-layout { grid-template-columns: 1fr; gap: 40px; }
    .home-opening { margin-top: 8px; }
    .home-opening .myth-stop { margin-top: 0; }
    .page-opening h1 { margin-block: 16px 24px; }
    .reading-layout > .myth-stop { grid-column: 1; grid-row: 1; }
    .page-stop-signs .reading-copy { grid-row: 1; }
    .page-stop-signs .myth-stop { grid-row: 2; }
    .page-stop-signs .reading-layout { display: flex; flex-direction: column; }
    .page-stop-signs .myth-stop { order: 2; }
    .journey { margin-top: 48px; padding-block: 16px; }
    .journey::before { left: 16px; width: 4px; background: var(--olive); clip-path: none; }
    .journey-stop { margin-left: 16px; padding: 24px; grid-template-columns: 1fr; gap: 24px; max-width: calc(100% - 24px); }
    .journey-stop:nth-child(2), .journey-stop:nth-child(3) { margin: 40px 0 0 16px; }
    .next-stop { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; padding-block: 32px; }
    .next-stop .route-button { justify-self: start; }
    .footer-inner { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
    .footer-description { grid-column: 1; }
    .footer-heading { max-width: 100%; }
    .evidence-drawer { padding: 24px; }
    .urgent-stop { padding: 24px; }
  }
  @media (max-width: 360px) {
    .header-start, .header-further { gap: 0; }
    .route-button { padding-inline: 16px; gap: 16px; }
    .journey-stop { padding: 16px; }
  }
}

@layer print {
  @media print {
    body { background: white; color: black; }
    .site-header, .site-footer, .skip-link, .journey-progress, .stop-mark, .route-button, .next-link, .evidence-drawer { display: none; }
    .guide-main { padding: 0; }
    .reading-layout, .home-opening { display: block; }
    .journey::before { display: none; }
    .myth-stop, .journey-stop, .urgent-stop { box-shadow: none; border-color: black; }
    .journey-stop, .journey-stop:nth-child(2), .journey-stop:nth-child(3) { margin: 24px 0; max-width: 100%; }
    .journey-stop { display: block; }
    .reading-stop, .urgent-stop, .myth-stop { break-inside: avoid; }
    .next-stop { display: block; }
  }
}