/* Priority Traffic on 1 — "The Quad Sheet"
   A USGS 7.5-minute quadrangle as a website: paper ground, contour ink,
   woodland tint at page scale, hydro blue for water and links, one pine fill. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque.woff2") format("woff2-variations"), url("../fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/Alegreya.woff2") format("woff2-variations"), url("../fonts/Alegreya.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/Alegreya-Italic.woff2") format("woff2-variations"), url("../fonts/Alegreya-Italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #f4efe3;
  --paper-2: #eae2cf;
  --paper-3: #ddd2b8;
  --wood: #d5e2bf;
  --wood-2: #c3d4a8;
  --contour: #a8743b;
  --contour-2: #7e5529;
  --hydro: #3f7fa6;
  --hydro-ink: #2f6586;
  --pine: #2f4a33;
  --pine-2: #243b29;
  --pine-tint: #c9d6c4;
  --ink: #1f1b17;
  --ink-2: #4a423a;
  --red: #d1452e;

  --sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;

  --gutter: clamp(1.1rem, 5vw, 5.5rem);
  --hair: 1px solid var(--contour);
  --hair-ink: 1px solid var(--ink);
  --radius: 2px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 10px 24px -14px rgba(31, 27, 23, .45);
  --collar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  background: var(--paper);
  color: var(--ink);
  font: 400 112.5%/1.5 var(--serif);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
  scrollbar-color: var(--contour) var(--paper-2);
  caret-color: var(--hydro);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { min-height: 100vh; overflow-x: clip; }
::selection { background: var(--wood-2); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--contour); border: 2px solid var(--paper-2); }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -3rem; z-index: 100; background: var(--pine); color: var(--paper); padding: .6rem 1rem; font: 700 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: .6rem; outline: 2px solid var(--hydro); outline-offset: 3px; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-variation-settings: "wdth" 88, "opsz" 96;
  font-weight: 720;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: .012em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 4.7vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 3.3vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: .03em; font-variation-settings: "wdth" 92, "opsz" 48; font-weight: 680; }
h4 { font-size: .95rem; letter-spacing: .08em; font-variation-settings: "wdth" 100, "opsz" 24; font-weight: 700; }
p { max-width: 68ch; }
p + p { margin-top: 1em; }
.lede { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.42; max-width: 36rem; }
.water { font-style: italic; color: var(--hydro-ink); }
.label {
  font: 600 .72rem/1.35 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--contour-2);
  font-variation-settings: "wdth" 100, "opsz" 14;
}
.label.ink { color: var(--ink); }
.place {
  font: 700 .95rem/1.3 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 94, "opsz" 24;
}
.num { font-variant-numeric: tabular-nums lining-nums; }
small, .small { font-size: .9rem; }
strong { font-weight: 700; }
em { font-style: italic; }

a { color: var(--hydro-ink); text-decoration: underline; text-decoration-style: dashed; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: currentColor; transition: text-decoration-color .15s var(--ease); }
a:hover { text-decoration-style: solid; }
a:focus-visible { outline: 2px solid var(--hydro); outline-offset: 3px; border-radius: var(--radius); }
.quiet-link { color: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font: 700 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  font-variation-settings: "wdth" 100, "opsz" 14;
  padding: 1.05rem 1.5rem; min-height: 3.25rem;
  border: 1px solid var(--ink); border-radius: var(--radius);
  color: var(--ink); background: transparent; text-decoration: none; cursor: pointer;
  transition: box-shadow .16s var(--ease), transform .12s var(--ease);
  white-space: nowrap;
}
.btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--hydro); outline-offset: 3px; }
.btn-primary { background: var(--pine); color: var(--paper); border-color: var(--pine); }
.btn-primary:hover { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--pine); }
.btn-primary:focus-visible { outline-color: var(--hydro); }
.btn .icon { width: 1rem; height: 1rem; }
.btn-paper { border-color: var(--paper); color: var(--paper); }
.btn-paper:hover { box-shadow: inset 0 0 0 1px var(--paper); }
.icon { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Collar (header) ---------- */
.collar {
  position: sticky; top: 0; z-index: 50;
  height: var(--collar-h);
  background: var(--paper-2);
  border-bottom: var(--hair);
  display: flex; align-items: center; gap: 1.6rem;
  padding: 0 var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font: 800 .86rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; font-variation-settings: "wdth" 100, "opsz" 14; white-space: nowrap; }
.brand:focus-visible { outline: 2px solid var(--hydro); outline-offset: 4px; }
.brand .mark { width: 18px; height: 18px; }
.sheets { margin-left: auto; display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.5rem); }
.sheets a { position: relative; padding-left: .8rem; color: var(--ink); text-decoration: none; font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; font-variation-settings: "wdth" 100, "opsz" 14; white-space: nowrap; }
.sheets a::before { content: ""; position: absolute; left: 0; top: 50%; width: .42rem; height: 1px; background: var(--ink); }
.sheets a::after { content: ""; position: absolute; left: .8rem; right: 0; bottom: -.45rem; height: 0; border-bottom: 1px dashed transparent; transition: border-color .15s var(--ease); }
.sheets a:hover::after { border-color: var(--ink); }
.sheets a[aria-current="page"]::after { border-bottom: 2px solid var(--contour); }
.sheets a:focus-visible { outline: 2px solid var(--hydro); outline-offset: 5px; }
.sheets .tel { font-weight: 800; }
.menu-btn { display: none; margin-left: auto; align-items: center; gap: .55rem; background: none; border: 1px solid var(--ink); border-radius: var(--radius); padding: .5rem .7rem; font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.menu-btn:focus-visible { outline: 2px solid var(--hydro); outline-offset: 3px; }
.menu-btn .icon { width: 1rem; height: 1rem; }
.sheets-panel { display: none; }
@media (max-width: 1040px) {
  .sheets { display: none; }
  .menu-btn { display: inline-flex; }
  .sheets-panel { display: block; position: fixed; left: 0; right: 0; top: var(--collar-h); z-index: 49; background: var(--paper-2); border-bottom: var(--hair); padding: .5rem var(--gutter) 1.25rem; transform: translateY(-110%); transition: transform .22s var(--ease); box-shadow: var(--shadow); }
  .sheets-panel.open { transform: none; }
  .sheets-panel a { display: flex; align-items: center; justify-content: space-between; padding: .95rem .2rem; border-bottom: var(--hair); color: var(--ink); text-decoration: none; font: 600 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
  .sheets-panel a[aria-current="page"] { color: var(--contour-2); }
  .sheets-panel a .icon { width: .9rem; height: .9rem; }
  .sheets-panel .tel { font-weight: 800; }
}

/* ---------- Map ground ---------- */
.sheet { position: relative; }
.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-bg svg { width: 100%; height: 100%; }
.map-bg .contour { fill: none; stroke: var(--contour); stroke-width: 1; opacity: .85; }
.map-bg .contour.index { stroke-width: 1.6; }
.map-bg .woodland { fill: var(--wood); }
.map-bg .creek { fill: none; stroke: var(--hydro); stroke-width: 2.2; }
.map-bg .fold { stroke: var(--ink); stroke-width: .6; opacity: .16; }
.map-bg .elev { font: 600 10px/1.3 var(--sans); letter-spacing: .08em; fill: var(--contour-2); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.map-bg .creek-name { font: italic 500 15px var(--serif); fill: var(--hydro-ink); }
.map-bg .tick { stroke: var(--contour-2); stroke-width: 1; }

/* ---------- Hero sheet ---------- */
.sheet-hero { position: relative; overflow: hidden; min-height: calc(100svh - var(--collar-h)); background: var(--paper); }
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: 1fr auto;
  grid-template-areas: "copy inset" "scale legend";
  column-gap: clamp(2rem, 5vw, 6rem); row-gap: 1.75rem;
  min-height: calc(100svh - var(--collar-h)); max-height: 980px;
  padding: clamp(2rem, 4.5vh, 4rem) var(--gutter) clamp(1.25rem, 3vh, 2.25rem);
}
.hero-copy { grid-area: copy; max-width: 46rem; align-self: start; padding-top: clamp(0rem, 3vh, 2.5rem); }
.hero-copy h1 { max-width: 15.5ch; }
.hero-copy .lede { margin-top: 1.5rem; }
/* label plates: text that sits on the terrain gets the map's paper mask, drawn
   outside the box so layout is untouched */
.plate, .hero-copy h1, .hero-copy .lede, .hero-copy .fine, .sheet-head .inner h1, .sheet-head .inner .lede, .sheet-head .meta .label, .marker .label, .scale .label, .scale .ends {
  width: fit-content; background: var(--paper); box-shadow: 0 0 0 .3em var(--paper); border-radius: 1px;
}
.sheet-head .meta { gap: .5rem 2.2rem; }
.scale .ends { width: min(470px, 100%); }
.scale .ends span { background: var(--paper); box-shadow: 0 0 0 .3em var(--paper); }
.scale .ends { background: none; box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: 2.1rem; }
.fine { margin-top: 1.1rem; font-style: italic; color: var(--ink-2); font-size: 1rem; }
.fine a { color: inherit; }
.inset { grid-area: inset; align-self: start; justify-self: end; width: 100%; max-width: 340px; border: var(--hair-ink); background: var(--paper-2); padding: 6px; box-shadow: var(--shadow); }
.inset img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 16%; filter: saturate(.94); }
.inset figcaption { padding: .6rem .25rem .2rem; line-height: 1.5; }
.legend { grid-area: legend; justify-self: end; width: 100%; max-width: 340px; border: var(--hair-ink); background: var(--paper); padding: .8rem .9rem .85rem; }
.legend .label { margin-bottom: .45rem; }
.legend-row { display: flex; align-items: center; gap: .7rem; font-size: .88rem; line-height: 1.3; padding: .18rem 0; }
.legend-row .sym { flex: none; width: 38px; display: flex; justify-content: center; }
.legend-row .sym svg { width: 38px; height: 14px; overflow: visible; }
.legend .cred { border-top: var(--hair); margin-top: .5rem; padding-top: .5rem; font-size: .88rem; line-height: 1.35; }
.scale { grid-area: scale; align-self: end; }
.scale .bar { display: flex; width: min(470px, 100%); height: 7px; border: var(--hair-ink); margin-top: .45rem; }
.scale .bar b { flex: 1; background: var(--ink); }
.scale .bar b:nth-child(2n) { background: transparent; }
.scale .ends { display: flex; justify-content: space-between; gap: 1rem; width: min(470px, 100%); margin-top: .4rem; font-size: .72rem; white-space: nowrap; }
.north { position: absolute; z-index: 2; right: var(--gutter); top: 1.4rem; width: 26px; color: var(--ink); }

.marker { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .6rem; pointer-events: none; }
.marker .label { color: var(--ink); white-space: nowrap; }
.marker-here { left: 25%; top: 80%; }
.here-ring { width: 28px; height: 28px; flex: none; }
.marker-office { left: 47%; top: 69%; align-items: flex-start; }
.marker-office .label { line-height: 1.5; }
.marker-office .sym { width: 18px; height: 22px; flex: none; margin-top: -2px; }
.wp-anchor { width: 0; height: 0; position: absolute; }
.map-bg .map-mobile { display: none; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "inset" "office" "legend" "scale"; max-height: none; min-height: 0; row-gap: 1.5rem; padding-top: 2.5rem; }
  .hero-copy h1 { max-width: none; }
  .inset, .legend { justify-self: stretch; max-width: none; }
  .inset img { aspect-ratio: 4 / 4.6; }
  .marker-here { position: static; margin-top: 1.4rem; }
  .marker-office { position: static; grid-area: office; margin-top: -.25rem; }
  .north { top: 1rem; width: 20px; }
  .scale .ends { white-space: normal; flex-wrap: wrap; }
  .map-bg .map-desktop { display: none; }
  .map-bg .map-mobile { display: block; }
  .via { left: 1rem !important; }
}

/* ---------- Route layer (signature) ---------- */
.route-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.route-layer .route { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-dasharray: 7 6; stroke-linecap: round; }
.route-layer .leader { stroke: var(--ink); stroke-width: .9; }
.route-layer .dot { fill: var(--red); }
.route-layer .dot-paper { fill: var(--paper); }
.route-layer .dot-halo { fill: none; stroke: var(--red); stroke-width: 1.2; opacity: .55; }
.wp { position: relative; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); font: 700 .9rem/1 var(--sans); font-variation-settings: "wdth" 100, "opsz" 14; }
.via { position: absolute; width: 0; height: 0; }

/* ---------- Sections ---------- */
.band { position: relative; padding: clamp(3.75rem, 8vw, 7rem) var(--gutter); }
.band.tone { background: var(--paper-2); }
.band.field { background: var(--wood); }
.band.tight { padding-top: clamp(2.75rem, 5vw, 4.5rem); padding-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.band-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.band-head .lede { margin-top: 1rem; }
.cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.cols-narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols > * { min-width: 0; }
@media (max-width: 820px) { .cols, .cols-narrow { grid-template-columns: 1fr; } }
.prose p, .prose li { font-size: 1.1rem; line-height: 1.55; }
.prose h3 { margin: 2.4rem 0 .8rem; }
.prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: .5rem; }
.rule { border: 0; border-top: var(--hair); margin: clamp(2rem, 4vw, 3rem) 0; }
.more { margin-top: 1.75rem; }

/* Ruled roster (legend table) */
.roster { list-style: none; padding: 0; border-top: var(--hair); }
.roster li { display: grid; grid-template-columns: minmax(10rem, 13rem) 1fr; gap: 1.25rem; padding: 1rem 0; border-bottom: var(--hair); align-items: baseline; }
.roster li p { font-size: 1.05rem; }
@media (max-width: 560px) { .roster li { grid-template-columns: 1fr; gap: .3rem; } }

/* Route steps */
.steps { list-style: none; padding: 0; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 1.4rem; max-width: 40rem; }
.step h3 { margin-bottom: .55rem; }
.step p { font-size: 1.08rem; }
.step .facts { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
@media (min-width: 981px) {
  .step:nth-child(1) { margin-left: 24rem; }
  .step:nth-child(2) { margin-left: 12rem; }
}
.steps-cta { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }

/* Field photos */
.photo { border: var(--hair-ink); background: var(--paper-2); padding: 6px; box-shadow: var(--shadow); }
.photo img { width: 100%; object-fit: cover; }
.photo figcaption { padding: .65rem .25rem .2rem; }
.photo-stack { position: relative; padding-bottom: 20%; }
.photo-stack .photo-a img { aspect-ratio: 3 / 2; }
.photo-stack .photo-b { position: absolute; right: -3%; bottom: 0; width: 40%; }
.photo-stack .photo-b img { aspect-ratio: 4 / 5; }
@media (max-width: 820px) { .photo-stack { padding-bottom: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: end; } .photo-stack .photo-b { position: static; width: auto; } }

/* Classification table (classes) */
.classes { list-style: none; padding: 0; border-top: var(--hair); }
.classes li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(8rem, .8fr) 6rem; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0; border-bottom: var(--hair); }
.classes .price { text-align: right; font: 700 1.1rem/1 var(--sans); font-variation-settings: "wdth" 100, "opsz" 24; }
.classes .meta { color: var(--ink-2); font-style: italic; }
@media (max-width: 640px) { .classes li { grid-template-columns: 1fr 5rem; } .classes .meta { grid-column: 1 / -1; } }

/* Quote */
.quote-band { position: relative; padding: clamp(3rem, 7vw, 6rem) var(--gutter); border-top: var(--hair); border-bottom: var(--hair); }
.quote-band blockquote { max-width: 44rem; margin: 0 auto; text-align: center; }
.quote-band blockquote p { font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.3; font-style: italic; color: var(--hydro-ink); max-width: 26ch; margin: 0 auto; }
.quote-band cite { display: block; margin-top: 1.25rem; font-style: normal; }

/* Destination */
.destination { text-align: left; }
.destination .inner { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1.5rem; align-items: start; max-width: 54rem; }
.destination h2 { max-width: 20ch; }
.destination .lede { margin-top: 1rem; }
.destination .ways { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
.destination .ways a.plain { color: var(--ink); font-size: 1.05rem; display: inline-flex; align-items: center; gap: .5rem; }
.wp-flag { width: 48px; height: 48px; }

/* Inner sheet head */
.sheet-head { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem); border-bottom: var(--hair); }
.sheet-head .inner { position: relative; z-index: 2; max-width: 52rem; }
.sheet-head .lede { margin-top: 1.1rem; }
.sheet-head .meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.neatline { position: absolute; z-index: 2; right: var(--gutter); top: 1.2rem; display: inline-flex; align-items: center; white-space: nowrap; color: var(--ink); background: var(--paper); border: 1px solid var(--contour); padding: .4rem .65rem; }
@media (max-width: 600px) { .neatline { top: .8rem; padding: .3rem .5rem; } .neatline .nl-name { display: none; } }

/* Portrait block */
.portrait { max-width: 420px; }
.portrait img { aspect-ratio: 4 / 5; object-position: 50% 16%; }

/* Facts list (definition rows) */
.facts-list { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; align-items: baseline; }
.facts-list dt { font: 600 .7rem/1.35 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--contour-2); }
.facts-list dd { font-size: 1.05rem; }

/* Courses */
.course { border-top: var(--hair); padding: clamp(2rem, 4vw, 3rem) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: clamp(2rem, 4vw, 4rem); }
.course:last-of-type { border-bottom: var(--hair); }
.course h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: .9rem; letter-spacing: .03em; font-variation-settings: "wdth" 92, "opsz" 48; font-weight: 680; }
.course p { font-size: 1.08rem; }
.course .ticket { border: var(--hair-ink); background: var(--paper); padding: 1rem 1.1rem; align-self: start; }
.course .ticket .price { font: 700 2rem/1 var(--sans); font-variation-settings: "wdth" 92, "opsz" 48; margin: .25rem 0 .75rem; }
.course .ticket .label + .price { margin-top: .35rem; }
.course .ticket p { font-size: .95rem; }
.course .ticket .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
@media (max-width: 760px) { .course { grid-template-columns: 1fr; } }

/* Resources */
.crisis { border: var(--hair-ink); background: var(--paper-2); padding: 1.25rem 1.4rem; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; max-width: 52rem; }
.crisis .icon { width: 1.5rem; height: 1.5rem; margin-top: .15rem; color: var(--contour-2); }
.crisis p { font-size: 1.05rem; }
.links { list-style: none; padding: 0; border-top: var(--hair); max-width: 52rem; }
.links li { border-bottom: var(--hair); }
.links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem .2rem; color: var(--ink); text-decoration: none; }
.links a:hover .place { text-decoration: underline; text-decoration-style: solid; text-underline-offset: .25em; text-decoration-color: var(--contour); }
.links a .place, .links a .note { display: block; }
.links a .note { color: var(--ink-2); font-style: italic; font-size: 1rem; margin-top: .2rem; }
.links a .icon { color: var(--hydro-ink); }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.shelf figure img { aspect-ratio: 2 / 3; object-fit: cover; }
.shelf figcaption { margin-top: .75rem; line-height: 1.35; }
.shelf figcaption .by { display: block; font-style: italic; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 760px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Contact */
.channels { list-style: none; padding: 0; display: grid; gap: 1rem; }
.channels li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: var(--hair); }
.channels li:first-child { border-top: var(--hair); }
.channels .icon { width: 1.35rem; height: 1.35rem; margin-top: .3rem; color: var(--contour-2); }
.channels a.big { font: 500 1.35rem/1.3 var(--serif); color: var(--ink); }
.channels .note { font-size: 1rem; color: var(--ink-2); margin-top: .2rem; }
.form { border: var(--hair-ink); background: var(--paper); padding: clamp(1.25rem, 3vw, 2rem); }
.form-row { display: grid; gap: .4rem; }
.form-row + .form-row { margin-top: 1.1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  width: 100%; padding: .8rem .9rem; border: var(--hair-ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 1.05rem;
}
.form textarea { min-height: 9rem; resize: vertical; }
.form ::placeholder { color: var(--ink-2); opacity: 1; font-style: italic; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--hydro); outline-offset: 2px; }
fieldset { border: 0; padding: 0; min-width: 0; }
.choices { display: grid; gap: .55rem; margin-top: .5rem; }
.choice { display: flex; align-items: center; gap: .8rem; font-size: 1.05rem; cursor: pointer; }
.choice input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); flex: none; cursor: pointer; transition: box-shadow .12s var(--ease); }
.choice input:checked { box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 10px var(--ink); }
.choice input:focus-visible { outline: 2px solid var(--hydro); outline-offset: 3px; }
.form-foot { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-note { font-size: .95rem; color: var(--ink-2); font-style: italic; max-width: 32rem; }
.form-status { margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed var(--contour-2); background: var(--paper-2); font-size: 1rem; display: none; }
.form-status.show { display: block; }

/* ---------- Footer: the sheet's reverse ---------- */
.reverse { position: relative; background: var(--pine); color: var(--paper); padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2rem; }
.reverse a { color: var(--paper); }
.reverse a:focus-visible { outline-color: var(--paper); }
.reverse .label { color: var(--pine-tint); margin-bottom: .65rem; }
.reverse .grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); }
.reverse .brand { color: var(--paper); }
.reverse .tag { margin-top: 1rem; font-size: 1.05rem; color: var(--pine-tint); max-width: 30rem; }
.reverse ul { list-style: none; padding: 0; }
.reverse li + li { margin-top: .55rem; }
.reverse .f-links a { text-decoration: none; font: 600 .74rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.reverse .f-links a:hover { text-decoration: underline; text-decoration-style: solid; text-underline-offset: .3em; }
.reverse .contact li { display: flex; gap: .7rem; align-items: flex-start; }
.reverse .contact .icon { margin-top: .25rem; color: var(--pine-tint); }
.reverse .cred-box { border: 1px solid var(--paper); padding: .9rem 1rem; font-size: .95rem; line-height: 1.4; }
.reverse .cred-box .label { margin-bottom: .4rem; }
.reverse .crisis-note { margin-top: 1.5rem; font-size: .95rem; color: var(--pine-tint); max-width: 30rem; }
.reverse .crisis-note strong { color: var(--paper); }
.reverse .colophon { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid rgba(244, 239, 227, .35); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; color: var(--pine-tint); }
@media (max-width: 900px) { .reverse .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .reverse .grid { grid-template-columns: 1fr; } }

/* ---------- Mobile dispatch strip ---------- */
.dispatch { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: 4.6rem; }
  .dispatch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: var(--paper-2); border-top: var(--hair); }
  .dispatch .btn { padding-left: .75rem; padding-right: .75rem; }
}

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