:root {
  color-scheme: light;
  --paper: #f6f3eb;
  --ink: #1c3438;
  --rule: #84938e;
  --mint: #c8e4d8;
  --ochre: #efc262;
  --blue: #c6d7ed;
  --clay: #edb099;
  --panel: #ebe8de;
  --white: #fffdf7;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input { font: inherit; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
}
p { margin: 0 0 1.1em; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.1; }
h1 { font-size: clamp(48px, 4.4vw, 68px); letter-spacing: -0.055em; max-width: 14ch; }
h2 { font-size: 30px; letter-spacing: -0.025em; line-height: 1.2; }
h3 { font-size: 23px; letter-spacing: -0.02em; line-height: 1.25; }
ul, ol { padding-left: 1.4em; }
li { padding-left: .25em; margin: 0 0 .6em; }
figure { margin: 0; }
main, .publication-mark, .closing-file { max-width: 1216px; margin-inline: auto; }
main { padding-inline: 40px; }

.skip-reading {
  position: fixed;
  z-index: 5;
  top: 12px;
  left: 12px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-180%);
  font-size: 18px;
}
.skip-reading:focus { transform: translateY(0); }
.publication-mark {
  padding: 32px 40px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--ink);
}
.publication-mark p { margin: 0; font-family: var(--mono); font-size: 16px; line-height: 1.4; }
.publication-mark p span { margin-inline: 7px; }
.publication-mark .guide-label { margin-left: auto; max-width: 28ch; }
.block-mark { width: 32px; height: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex: 0 0 auto; }
.block-mark i { background: var(--ink); }
.block-mark i:first-child { grid-row: span 2; }
.block-mark i:last-child { background: #638b73; }
.opening-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; padding: 52px 0 30px; align-items: start; }
.briefing-name, .scenario-label, .evidence-label, .record-date, .next-label {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
}
.briefing-name { margin-bottom: 24px; }
.opening-copy h1 { margin-bottom: 28px; }
.scenario { border-left: 4px solid var(--clay); padding-left: 20px; margin-bottom: 23px; max-width: 65ch; }
.scenario .scenario-label { margin-bottom: 8px; }
.scenario p:last-child { margin-bottom: 0; }
.reading-lead { max-width: 64ch; font-size: 20px; line-height: 1.5; margin-bottom: 0; }

.offer-map, .check-route, .product-split, .cost-parts { padding-top: 60px; }
.offer-map ol, .check-route ol, .product-split ol, .cost-parts ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.offer-map li, .check-route li, .product-split li, .cost-parts li {
  margin: 0;
  padding: 24px;
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.35;
}
.offer-map ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.offer-map li:first-child { grid-column: 1 / 4; background: var(--mint); min-height: 120px; }
.offer-map li:nth-child(2) { grid-column: 2 / 5; background: var(--ochre); min-height: 120px; }
.offer-map li:nth-child(3) { grid-column: 1 / 5; background: var(--blue); min-height: 120px; }
.offer-map li:first-child::after { content: ""; display: block; width: 32px; height: 32px; border: 1px solid var(--ink); margin-left: auto; flex-shrink: 0; }
.offer-map li:nth-child(2)::after { content: ""; width: 32px; height: 32px; display: block; background: var(--ink); margin-left: auto; flex-shrink: 0; }
.offer-map li:nth-child(3)::after { content: ""; width: 64px; height: 32px; display: block; border: 1px solid var(--ink); margin-left: auto; flex-shrink: 0; }
.check-route ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.check-route li:first-child { grid-column: 1 / 5; background: var(--blue); }
.check-route li:nth-child(2) { grid-column: 2 / 6; background: var(--mint); }
.check-route li:nth-child(3) { grid-column: 1 / 6; background: var(--ochre); }
.product-split ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-split li:first-child { grid-column: span 2; background: var(--mint); }
.product-split li:nth-child(2) { background: var(--blue); }
.product-split li:nth-child(3) { background: var(--clay); }
.cost-parts ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cost-parts li { min-height: 88px; padding: 20px; }
.cost-parts li:first-child { grid-column: 1 / 3; background: var(--mint); }
.cost-parts li:nth-child(2) { grid-column: 2 / 4; background: var(--blue); }
.cost-parts li:nth-child(3) { grid-column: 1 / 3; background: var(--ochre); }
.cost-parts li:nth-child(4) { grid-column: 2 / 4; background: var(--clay); }
figcaption { font-size: 16px; line-height: 1.55; max-width: 42ch; }

.reading-tools { display: flex; align-items: center; gap: 18px; padding: 0 0 32px; min-height: 78px; }
.language-switch {
  padding: 11px 18px;
  min-height: 48px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 16px;
  text-align: left;
}
.language-switch:hover { background: var(--mint); }
.language-switch[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.language-switch span { margin-left: 16px; }
.language-status { margin: 0; font-size: 16px; }
.reading-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); column-gap: 56px; border-top: 1px solid var(--ink); padding-top: 38px; }
.briefing-text { min-width: 0; max-width: 72ch; }
.explanation { margin: 0 0 40px; }
.explanation h2 { margin-bottom: 18px; max-width: 30ch; }
.explanation p:last-child { margin-bottom: 0; }
.evidence-card { padding: 26px 28px; border: 1px solid var(--rule); border-left: 6px solid var(--mint); background: var(--white); margin-bottom: 28px; }
.evidence-card:nth-of-type(2n) { border-left-color: var(--blue); }
.evidence-card:nth-of-type(3n) { border-left-color: var(--ochre); }
.evidence-card .evidence-label { margin-bottom: 10px; }
.evidence-card h3 { margin-bottom: 14px; }
.evidence-card p { font-size: 18px; }
.evidence-card .record-date { font-size: 16px; margin: 20px 0 5px; }
.source-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; padding-block: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.record-grid { display: grid; gap: 12px; }
.record-grid .evidence-card { margin-bottom: 0; }
.take-along { min-width: 0; }
.take-along .visit-notes { background: var(--ochre); padding: 28px; border-bottom: 8px solid var(--ink); position: sticky; top: 24px; }
.visit-notes h2 { font-size: 24px; margin-bottom: 22px; }
.question-list { list-style: none; padding: 0; margin: 0; }
.question-list li { padding: 14px 0; border-top: 1px solid rgba(28, 52, 56, .4); font-size: 18px; line-height: 1.5; margin: 0; }
.question-list li:last-child { padding-bottom: 0; }
.briefing-text .visit-notes { margin: 0 0 36px; }
.briefing-text .visit-notes h2 { font-size: 30px; }
.next-briefing { display: flex; flex-direction: column; gap: 12px; padding: 28px; margin: 40px 0 0; min-height: 100px; background: var(--mint); text-decoration: none; }
.next-briefing > span:last-child { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 24px; line-height: 1.25; }
.next-briefing:hover { background: #b5d6c8; }
.next-briefing:hover > span:last-child { text-decoration: underline; text-underline-offset: 5px; }

.briefing-directory { margin-top: 80px; }
.briefing-directory h2 { padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.briefing-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding-top: 24px; }
.briefing-choice { grid-column: span 2; position: relative; background: var(--panel); padding: 26px 28px 58px; min-height: 204px; text-decoration: none; }
.briefing-choice > span:first-child { font-size: 24px; line-height: 1.2; display: block; max-width: 22ch; }
.briefing-choice p { font-size: 18px; line-height: 1.5; margin: 13px 0 0; max-width: 35ch; }
.briefing-choice .choice-arrow { position: absolute; right: 28px; bottom: 16px; font-size: 28px; }
.briefing-choice:nth-child(6n + 1) { background: var(--mint); }
.briefing-choice:nth-child(6n + 3) { background: var(--blue); }
.briefing-choice:nth-child(6n + 4) { background: var(--ochre); grid-column: span 3; }
.briefing-choice:nth-child(6n + 5) { background: var(--clay); grid-column: span 3; }
.briefing-choice:nth-child(6n) { grid-column: span 6; min-height: 160px; }
.briefing-choice:hover > span:first-child { text-decoration: underline; text-underline-offset: 5px; }
.briefing-choice:last-child { grid-column: span 6; min-height: 160px; background: var(--mint); }

.word-file { margin: 0; }
.word-file > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--rule); }
.word-file dt { font-family: var(--mono); font-size: 16px; line-height: 1.5; }
.word-file dd { font-size: 18px; line-height: 1.55; margin: 0; }
.supporting-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: -10px 0 28px; }
.source-files { margin-bottom: 42px; }
.closing-file { margin-top: 80px; padding: 36px 40px 30px; border-top: 2px solid var(--ink); }
.closing-file h2 { font-size: 28px; margin-bottom: 26px; }
.footer-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 22px; row-gap: 8px; padding-bottom: 30px; border-bottom: 1px solid var(--rule); }
.footer-directory a { display: flex; align-items: center; min-height: 48px; padding: 10px 0; font-size: 16px; line-height: 1.5; }
.footer-directory a[aria-current="page"] { text-decoration: none; font-weight: 650; }
.guide-statement { margin: 26px 0 12px; max-width: 70ch; font-size: 17px; line-height: 1.6; }
.file-links { display: flex; gap: 30px; flex-wrap: wrap; }
.file-links a { display: inline-flex; align-items: center; min-height: 48px; padding-block: 10px; font-family: var(--mono); font-size: 16px; }
.file-links span { margin-left: 10px; }

@media (max-width: 1000px) {
  main, .publication-mark, .closing-file { max-width: 100%; }
  main { padding-inline: 32px; }
  .publication-mark { padding-inline: 32px; }
  .closing-file { padding-inline: 32px; }
  .opening-grid { gap: 28px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  h1 { font-size: 52px; }
  .reading-grid { gap: 30px; grid-template-columns: minmax(0, 2fr) minmax(225px, 1fr); }
  .take-along .visit-notes { padding: 24px; }
  .offer-map li, .check-route li, .product-split li { padding: 20px; }
  .offer-map li::after { display: none !important; }
  .briefing-choice { padding-inline: 24px; }
  .word-file > div { grid-template-columns: 140px minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 700px) {
  body { font-size: 18px; }
  main { padding-inline: 22px; }
  .publication-mark { padding: 22px; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .publication-mark .guide-label { flex-basis: 100%; margin-left: 44px; max-width: 26ch; }
  .publication-mark p { font-size: 16px; }
  .publication-mark p span { margin-inline: 2px; }
  .opening-grid { display: block; padding-top: 32px; padding-bottom: 24px; }
  .briefing-name { margin-bottom: 18px; }
  h1 { font-size: 48px; max-width: 14ch; }
  .opening-copy h1 { margin-bottom: 26px; }
  .scenario { padding-left: 16px; margin-bottom: 22px; }
  .reading-lead { font-size: 20px; }
  .offer-map, .check-route, .product-split, .cost-parts { padding-top: 28px; }
  .offer-map li { min-height: 86px !important; padding: 22px; }
  .check-route li { min-height: 75px; }
  .product-split li { min-height: 82px; }
  .cost-parts li { min-height: 66px; }
  figcaption { max-width: 40ch; }
  .reading-tools { align-items: flex-start; flex-direction: column; gap: 12px; padding-bottom: 26px; min-height: 70px; }
  .language-status:empty { display: none; }
  .reading-grid { display: block; padding-top: 28px; }
  .explanation { margin-bottom: 30px; }
  h2 { font-size: 28px; }
  h3 { font-size: 23px; }
  .evidence-card { padding: 23px 22px; margin-bottom: 24px; }
  .take-along { margin-top: 32px; }
  .take-along .visit-notes { position: static; padding: 26px; }
  .take-along .visit-notes h2 { font-size: 26px; }
  .next-briefing { padding: 26px; margin-top: 30px; }
  .next-briefing > span:last-child { font-size: 23px; }
  .briefing-directory { margin-top: 46px; }
  .briefing-choices { display: block; padding-top: 18px; }
  .briefing-choice { display: block; margin-bottom: 8px; min-height: 170px !important; padding: 25px 26px 58px; }
  .briefing-choice > span:first-child { font-size: 24px; }
  .briefing-choice .choice-arrow { right: 24px; }
  .word-file > div { grid-template-columns: 1fr; gap: 10px; padding-block: 20px; }
  .word-file dt { font-weight: 650; }
  .closing-file { margin-top: 50px; padding: 30px 22px 26px; }
  .closing-file h2 { font-size: 28px; }
  .footer-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
  .footer-directory a { min-height: 52px; }
  .guide-statement { font-size: 17px; }
  .file-links { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 380px) {
  h1 { font-size: 43px; }
  main, .publication-mark, .closing-file { padding-inline: 18px; }
  .product-split ol { display: block; }
  .product-split li { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
