/**
 * Bike the Katy: all styling.
 * Tokens and the type scale live in theme-brochure.css, which loads first.
 *
 * Structure: base, layout, primitives, chrome, then one block per page.
 * No radius anywhere on this site. That is deliberate.
 */

/* ── Base ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
select, button, input, textarea { font: inherit; color: inherit; }

/* Class rules like .nowstrip{display:block} outrank the UA's [hidden]. Several
   blocks here are hidden until the conditions cache resolves, so this has to win. */
[hidden] { display: none !important; }

/* Every button, select, input and link gets a visible ring. The day cells,
   filter chips, map pins and trailhead rows are all keyboard targets. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────
   Content caps at the 1240 design measure and centres; backgrounds bleed. */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sec-pad-t) var(--sec-pad-b);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.section--raised { background: var(--paper-raised); }
.section--flush { padding-bottom: 0; border-bottom: 0; }

/* Section head: title block left, a stat or a control right. */
.sechead {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 30px;
  margin-bottom: 24px;
}
.sechead--baseline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sechead__note { font: 400 12.5px/1.5 var(--ui); color: var(--label-ink); }
.sechead__stat { text-align: right; border-left: 1px solid var(--rule); padding-left: 26px; }
.sechead__stat .label { margin-top: 8px; line-height: 1.5; }

.page-head { background: var(--paper); border-bottom: 1px solid var(--rule); padding-block: 38px 30px; }
.page-head .t-page-h1 { margin-bottom: 12px; }
.page-head__deck { font: 400 16px/1.6 var(--serif); color: var(--ink-body); max-width: 640px; }

.stack { display: grid; gap: 8px; justify-items: end; }

/* ── Primitives ─────────────────────────────────────────────────────── */

/* The collapsed hairline grid: rules on the container's top and left, then
   right and bottom on every cell. One class, plus --cols. */
.hairgrid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.hairgrid > * {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 14px;
  min-width: 0;
}
.hairgrid .label { margin-bottom: 8px; }
.hairgrid__value { font: 500 14px/1.3 var(--ui); }

/* Buttons. No radius. */
.btn {
  display: inline-block;
  font: 500 12.5px/1 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--paper-raised); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper-raised); }

.btn--ghost { border-color: var(--ink); color: var(--ink); padding: 12px 18px; font-size: 11.5px; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--quiet { border-color: var(--rule); color: var(--ink-2); padding: 12px 18px; font-size: 11.5px; }
.btn--quiet:hover { border-color: var(--ink); color: var(--ink); }

.btn--accent { border-color: var(--accent); color: var(--accent); padding: 11px 15px; font-size: 11px; }
.btn--accent:hover { background: var(--accent); color: var(--paper-raised); }

.btn--sm { padding: 10px 14px; font-size: 10.5px; }

/* On the green corridor band. */
.btn--band { background: var(--band-head); color: #2B4E36; border-color: var(--band-head); padding: 13px 20px; font-size: 11.5px; }
.btn--band:hover { background: #fff; color: #2B4E36; }
.btn--band-ghost { border-color: rgba(239, 238, 224, .5); color: var(--band-fg); padding: 13px 20px; font-size: 11.5px; }
.btn--band-ghost:hover { border-color: var(--band-head); color: var(--band-head); }

/* Text link: accent with a rule under it. */
.textlink {
  font: 500 11px/1 var(--ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  white-space: nowrap;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
}
.textlink:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

/* Chips: filters and layer toggles. */
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
  padding: 8px 12px;
  font: 500 11.5px/1 var(--ui);
  letter-spacing: .06em;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip__swatch { width: 11px; height: 11px; display: block; flex: none; background: var(--rule); }
.chip__swatch--dot { border-radius: 50%; }

/* Tag pills, non-interactive. */
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 5px 9px;
  font: 400 11px/1 var(--ui);
  color: var(--ink-2);
}

/* Tables. Header rule is ink over hairline; rows are hairline. */
.table { border-top: 1px solid var(--ink); }
.table__head,
.table__row {
  display: grid;
  gap: 16px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
}
.table__head {
  padding: 9px 0;
  font: 500 9px/1 var(--ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.table__row { padding: 12px 0; }
/* Note strings contain newlines and must keep them. */
.table__note { font: 400 12px/1.45 var(--ui); color: var(--ink-2); white-space: pre-line; }
.table__row--captured { background: var(--paper-raised); }
.is-yes { color: var(--good-ink); }
.is-no { color: var(--label-ink); }

/* Photo blocks. Every image sits on --photo-bg so layout never flashes. */
.shot { position: relative; background: var(--photo-bg); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--fill img { position: absolute; inset: 0; }

/* Caption scrims need an alpha floor under the text band. A `to top` gradient
   that reaches 0 alpha inside the text is the failure mode. */
.shot__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  background: linear-gradient(to top, rgba(20, 22, 16, .93), rgba(20, 22, 16, .78));
  color: var(--dark-head);
}
.shot__caption .label { color: var(--accent-soft); margin-bottom: 6px; }
.shot__caption p { font: 400 14px/1.45 var(--serif); }

.shot__flag {
  position: absolute; top: 14px; left: 14px;
  font: 500 9.5px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 10px;
  background: rgba(20, 22, 16, .72);
  color: var(--dark-head);
}
.shot__flag--captured { background: var(--accent); }

/* Grade dot. Always paired with its word: the system never relies on colour. */
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grade-color, var(--good-color)); flex: none; display: block; }
.dot--sm { width: 8px; height: 8px; }
.dot--lg { width: 11px; height: 11px; }

[data-grade="good"]  { --grade-color: var(--good-color);  --grade-ink: var(--good-ink);  --grade-cell: var(--good-cell); }
[data-grade="soft"]  { --grade-color: var(--soft-color);  --grade-ink: var(--soft-ink);  --grade-cell: var(--soft-cell); }
[data-grade="muddy"] { --grade-color: var(--muddy-color); --grade-ink: var(--muddy-ink); --grade-cell: var(--muddy-cell); }
[data-grade="flood"] { --grade-color: var(--flood-color); --grade-ink: var(--flood-ink); --grade-cell: var(--flood-cell); }

.grade-word { display: flex; align-items: center; gap: 8px; }
.grade-word__text { font: 500 14px/1 var(--ui); }

/* Bordered frame used by the planner and the search box. */
.frame { border: 1px solid var(--ink); background: var(--paper-raised); }

/* Search box: input plus an inline count inside one frame. */
.searchbox {
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  background: var(--paper);
  min-width: 320px;
}
.searchbox input {
  border: 0; background: transparent; outline: none;
  padding: 13px 14px;
  font: 400 15px/1 var(--ui);
  width: 100%;
  min-width: 0;
}
.searchbox__count {
  font: 500 10px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label-ink);
  padding: 0 14px 0 6px;
  white-space: nowrap;
}

/* Horizontal scrollers (day strips, jump chips). Snap, no visible scrollbar. */
.scroller {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: none; }

/* Wide content must scroll inside its own box, never the page body. */
.overflow-x { overflow-x: auto; }

/* ── Chrome: desktop header ─────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-block: 15px 13px;
}
.mark {
  font: 600 18px/1 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.mark em { font-style: normal; color: var(--accent); }

.nav__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font: 500 11px/1 var(--ui);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.nav__links a { color: var(--ink-2); padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav__360 {
  font: 500 11px/1 var(--ui);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(169, 58, 34, .4);
}
.nav__status {
  display: flex; align-items: center; gap: 8px;
  border-left: 1px solid var(--rule);
  padding-left: 18px;
}
.nav__status span:last-child {
  font: 500 10px/1 var(--ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav .nav__burger { display: none; }

/* ── Chrome: mobile header and menu sheet ───────────────────────────── */

.burger {
  width: 44px; height: 44px;
  border: 0; background: transparent;
  display: grid; gap: 5px;
  align-content: center; justify-items: center;
  cursor: pointer;
  margin-right: -8px;
}
.burger span { width: 20px; height: 1.5px; background: var(--ink); display: block; }

.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: var(--dark);
  color: var(--dark-fg);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sheet[hidden] { display: none; }
.sheet__top {
  display: flex; align-items: center; gap: 10px;
  height: 52px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--dark-rule);
  flex: none;
}
.sheet__top .mark { color: var(--dark-head); font-size: 15px; letter-spacing: .05em; }
.sheet__top .mark em { color: var(--dark-accent); }
.sheet__close {
  width: 44px; height: 44px;
  margin-left: auto;
  border: 0; background: transparent;
  position: relative; cursor: pointer;
}
.sheet__close span {
  position: absolute; left: 12px; top: 21px;
  width: 20px; height: 1.5px;
  background: var(--dark-head);
  display: block;
}
.sheet__close span:first-child { transform: rotate(45deg); }
.sheet__close span:last-child { transform: rotate(-45deg); }

.sheet__nav { padding: 8px 16px 0; }
.sheet__nav a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 19px 0;
  border-bottom: 1px solid var(--dark-rule);
  color: var(--dark-head);
  font: 400 26px/1 var(--serif);
}
.sheet__cap {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  font: 500 9px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dark-dim);
}
.sheet__foot { margin-top: auto; padding: 26px 16px; }
.sheet__foot .btn { display: block; width: 100%; padding: 17px; font-size: 12px; letter-spacing: .12em; }
.sheet__foot .note { color: var(--dark-dim); margin-top: 14px; text-align: center; }

/* ── Chrome: footer ─────────────────────────────────────────────────── */

.foot { background: var(--dark); color: var(--dark-body); padding-block: 34px 22px; }
.foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot .mark { color: var(--dark-head); font-size: 16px; display: block; margin-bottom: 11px; }
.foot .mark em { color: var(--dark-accent); }
.foot__about { font: 400 13px/1.6 var(--ui); max-width: 330px; }
.foot h2 {
  font: 500 9.5px/1 var(--ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dark-dim);
  margin-bottom: 12px;
}
.foot__links { display: grid; gap: 8px; font: 400 13.5px/1 var(--ui); }
.foot__links a { color: var(--dark-fg); }
.foot__links a:hover { color: #fff; }
.foot__legal {
  border-top: 1px solid rgba(237, 233, 220, .15);
  margin-top: 26px;
  padding-top: 14px;
  font: 400 11.5px/1.5 var(--ui);
  color: var(--dark-dim);
}

/* ── Home: hero ─────────────────────────────────────────────────────── */

.hero { border-bottom: 1px solid var(--rule); background: var(--paper); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.16fr .84fr;
  align-items: stretch;
}
.hero__body { padding: 42px var(--gutter) 30px; padding-left: 0; min-width: 0; }
.hero__deck { color: var(--ink-body); max-width: 520px; margin-bottom: 24px; text-wrap: pretty; }
.hero .t-h1 { margin-bottom: 20px; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.hero__note { padding-top: 9px; }

.hero__media {
  position: relative;
  border-left: 1px solid var(--rule);
  min-height: 552px;
  background: var(--photo-bg);
  margin-right: calc(var(--gutter) * -1);
}
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 40%; }
.hero__media .shot__caption { background: linear-gradient(to top, rgba(20, 22, 16, .94), rgba(20, 22, 16, .76)); padding: 20px 22px; }
.hero__media .shot__caption p { font-size: 15px; }

.award {
  position: absolute; top: 22px; right: 22px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 11px 14px;
  max-width: 190px;
}
.award .label { color: var(--accent); font-size: 9px; letter-spacing: .18em; margin-bottom: 6px; }
.award p { font: 400 12.5px/1.35 var(--serif); color: var(--ink); }

/* The mobile status block: its own tappable link through to /conditions/. */
.nowstrip { display: none; }

/* ── Home: planner ──────────────────────────────────────────────────── */

.planner__readout { text-align: right; flex: none; }
.planner__readout .label { margin-top: 6px; letter-spacing: .2em; font-size: 10.5px; }

.planner__frame {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  border: 1px solid var(--ink);
  background: var(--paper-raised);
}
/* Grid children default to min-width:auto, which lets the seven-day strip push
   the frame wider than its column. */
.planner__frame > * { min-width: 0; }
.planner__controls { padding: 22px 24px; border-right: 1px solid var(--rule); }
.planner__fields { display: grid; gap: 16px; }
.planner__fields label { display: block; }
.planner__fields .label { display: block; margin-bottom: 7px; }
.planner__fields select {
  width: 100%;
  appearance: none;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 9px 2px;
  font: 400 19px/1.2 var(--serif);
  color: var(--ink);
}
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 0; }
.range-row .value { font: 400 19px/1 var(--serif); min-width: 52px; text-align: right; }

.planner__results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
  border-top: 1px solid var(--rule);
}
.planner__results > div { padding-top: 14px; }
.planner__results > div:first-child { display: none; }
.planner__results .label { margin-bottom: 7px; }
.planner__results .note { margin-top: 5px; }

.planner__forecast { padding: 22px 24px; }
.forecast__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* The seven-day strip. Comparing days side by side is the whole point of the
   feature: it never becomes a dropdown. */
.strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.day {
  background: var(--paper-raised);
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 11px 6px 12px;
  text-align: center;
  cursor: pointer;
  display: block;
  min-width: 0;
}
.day[aria-pressed="true"] { background: var(--grade-cell); }
.day__dow { font: 500 9.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.day__dom { font: 400 21px/1.1 var(--serif); margin: 5px 0 8px; color: var(--ink); }
.day__bar { height: 5px; background: var(--grade-color); margin-bottom: 8px; }
.day__hi { font: 500 11px/1 var(--ui); color: var(--ink); }
.day__rain { font: 400 10.5px/1 var(--ui); color: var(--label-ink); margin-top: 4px; }
.day__grade { font: 500 12px/1 var(--ui); margin-bottom: 5px; }

.detail {
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--paper);
  padding: 16px 18px;
}
.detail__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.detail__date { font: 400 20px/1 var(--serif); }
.detail__badge {
  font: 500 10px/1 var(--ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grade-ink);
  border: 1px solid var(--grade-ink);
  padding: 5px 8px;
}
.detail__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.detail__body .label { font-size: 9.5px; letter-spacing: .18em; margin-bottom: 6px; }
.detail__verdict { font: 400 17px/1.25 var(--serif); }
.detail__sub { font: 400 11.5px/1.45 var(--ui); color: var(--ink-2); margin-top: 4px; }

.overnights { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.overnights__list { display: flex; gap: 7px; flex-wrap: wrap; }
.leg { border: 1px solid var(--rule); background: var(--paper-raised); padding: 6px 10px; font: 400 12.5px/1 var(--ui); }

/* ── Home: 360 band ─────────────────────────────────────────────────── */

.viewer { background: var(--dark); color: var(--dark-fg); padding-block: var(--sec-pad-t) var(--sec-pad-b); }
.viewer .eyebrow { color: var(--dark-accent); }
.viewer h2 { color: var(--dark-head); }
.viewer__lede { color: var(--dark-body); max-width: 600px; }
.viewer__count { text-align: right; border-left: 1px solid rgba(237, 233, 220, .2); padding-left: 24px; }
.viewer__count .big { font: 200 54px/1 var(--serif); color: var(--dark-head); }
.viewer__count .big span { color: var(--dark-dim); }
.viewer__count .label { color: var(--dark-dim); margin-top: 6px; }

.viewer__well {
  position: relative;
  background: var(--well);
  border: 1px solid rgba(237, 233, 220, .22);
  /* 460px is +17% over the old 392px well: noticeably taller without the mobile
     breakpoint below needing to change. */
  height: 460px;
  overflow: hidden;
}
.viewer__well > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .94; }
.viewer__well iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 30%, rgba(10, 12, 8, .6) 100%);
  pointer-events: none;
}
.viewer__badges { position: absolute; top: 16px; left: 18px; display: flex; gap: 8px; align-items: center; }
.badge {
  font: 500 9.5px/1 var(--ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 1px solid transparent;
  cursor: pointer;
}
.badge--fill { background: var(--accent); color: var(--dark-head); border-color: var(--accent); }
.badge--out { border-color: rgba(244, 240, 230, .4); color: var(--dark-head); letter-spacing: .14em; }

.viewer__bottom { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.scrubber { display: flex; gap: 1px; margin-bottom: 14px; align-items: flex-end; height: 26px; cursor: pointer; }
.scrubber i { flex: 1; background: rgba(237, 233, 220, .2); display: block; }
.scrubber i.on { background: rgba(237, 233, 220, .55); }
/* The playhead keeps a floor height: at a low point in the profile it would
   otherwise be a 6px stub and read as nothing. */
.scrubber i.head { background: var(--accent); min-height: 22px; }

/* Hover/keyboard scene preview. Progressive enhancement over the scrubber:
   populated only when data/scene-thumbs.json fetches, positioned in JS
   (left/top) above the cursor and clamped to the scrubber's own width.
   pointer-events:none so the card itself can never steal the mousemove/leave
   that drives it. Decorative to assistive tech: the scrubber's own
   aria-valuetext is the accessible readout, this is a sighted/mouse extra. */
.scrub-tip {
  position: absolute;
  width: 128px;
  padding: 8px;
  background: var(--dark);
  border: 1px solid var(--dark-rule-2);
  pointer-events: none;
}
.scrub-tip__img { display: block; width: 100%; height: 128px; object-fit: cover; background: var(--well); }
.scrub-tip__cap { font: 400 11px/1.3 var(--ui); color: var(--dark-fg); text-align: center; margin: 7px 0 0; }

.entrypoints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.entry {
  display: block;
  background: rgba(14, 16, 11, .78);
  border: 1px solid rgba(244, 240, 230, .28);
  padding: 13px 15px;
  color: inherit;
  min-width: 0;
}
.entry:hover { background: rgba(14, 16, 11, .94); color: inherit; }
.entry__top { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.entry__n { font: 400 24px/1 var(--serif); color: var(--dark-accent); }
.entry__name { display: block; font: 500 13.5px/1.2 var(--ui); color: var(--dark-head); }
.entry__sub { display: block; font: 400 12px/1.4 var(--ui); color: var(--dark-body); }
.viewer__note { font: 400 11.5px/1.5 var(--ui); color: var(--dark-dim); margin-top: 11px; }

/* ── Home: trail guide teaser ───────────────────────────────────────── */

.guide__grid { display: grid; grid-template-columns: 1.32fr 1fr 1fr; gap: 22px; }
.card { display: block; color: inherit; min-width: 0; }
.card:hover { color: inherit; }
.card:hover img { opacity: .9; }
.card__media { height: 150px; }
.card__body { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 11px; }
.card__mm { font: 400 11px/1 var(--ui); letter-spacing: .14em; color: var(--label-ink); margin-bottom: 6px; }
.card h3 { margin-bottom: 6px; }
.card__blurb { font: 400 13px/1.55 var(--ui); color: var(--ink-2); }

.card--featured { grid-row: span 2; }
.card--featured .card__media { height: 330px; }
.card--featured .card__body { border-top-color: var(--ink); padding-top: 12px; margin-top: 14px; }
.card--featured .card__mm { font-size: 11.5px; margin-bottom: 8px; }
.card--featured h3 { margin-bottom: 8px; }
.card--featured .card__blurb { font: 400 14.5px/1.6 var(--serif); max-width: 400px; margin-bottom: 12px; }

/* ── Home: corridor search ──────────────────────────────────────────── */

.results { border-top: 1px solid var(--ink); }
.result {
  display: grid;
  grid-template-columns: 74px 1.15fr 1.45fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.result__head { display: contents; }
.result__mile { font: 400 20px/1 var(--serif); color: var(--accent); }
.result__name { font: 500 16px/1.2 var(--ui); margin-bottom: 4px; }
.result__sub { font: 400 12px/1.4 var(--ui); color: var(--label-ink); }
.result__detail {
  font: 400 12.5px/1.4 var(--ui);
  color: var(--ink-2);
  text-align: right;
  min-width: 150px;
  white-space: pre-line;
}
.results__foot { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.results__foot .note { max-width: 620px; }
.results__foot .textlink { margin-left: auto; }

/* ── Home: river ────────────────────────────────────────────────────── */

.river__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: start; }
.river .eyebrow { color: var(--river); }
.river__copy { color: var(--ink-2); margin-bottom: 16px; }
.gauges { --cols: 4; }
.gauges .label { font-size: 9.5px; letter-spacing: .14em; line-height: 1.3; }
.gauges__ft { font: 400 20px/1 var(--serif); }
.gauges__state { font: 400 10.5px/1 var(--ui); color: var(--good-ink); margin-top: 5px; }
.river__actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.river__media { height: 300px; }
.river__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.river__figs .shot { height: 150px; }
.howto { border-top: 1px solid var(--ink); padding-top: 11px; }
.howto .label { margin-bottom: 7px; }
.howto p { font: 400 13.5px/1.55 var(--serif); color: var(--ink-2); }

/* ── Home: corridor band ────────────────────────────────────────────── */

.corridor { background: var(--band); color: var(--band-fg); padding-block: 36px; }
.corridor__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: center; }
.corridor .eyebrow { color: var(--band-eyebrow); margin-bottom: 12px; }
.corridor h2 { font: 200 34px/1.1 var(--serif); color: var(--band-head); margin-bottom: 12px; }
.corridor p { font: 400 14.5px/1.6 var(--serif); color: var(--band-body); max-width: 520px; }
.progress { display: flex; height: 16px; margin-bottom: 11px; background: rgba(239, 238, 224, .24); }
.progress i { background: var(--band-bar); display: block; }
.progress__labels {
  display: flex; justify-content: space-between; gap: 16px;
  font: 500 10px/1.3 var(--ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--band-eyebrow);
  margin-bottom: 20px;
}
.corridor__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Map page ───────────────────────────────────────────────────────── */

.mapframe { border: 1px solid var(--ink); background: var(--paper-raised); padding: 24px; }
.mapframe__canvas { width: 100%; aspect-ratio: 4.3 / 1; min-height: 260px; background: var(--map-land); position: relative; }
.maplibregl-map { font: inherit; }

.maplegend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.maplegend > .label { margin-right: 4px; }
.maplegend .note { margin-left: auto; }

/* The straightened mile ruler. Position is linear in railroad mile. */
.ruler { position: relative; height: 56px; border-bottom: 1px solid var(--ink); margin-bottom: 8px; }
.ruler__track { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--rule-2); }
.ruler__cap { position: absolute; bottom: 0; height: 16px; background: var(--accent); }
.ruler__tick { position: absolute; bottom: 0; width: 1px; height: 22px; background: var(--ink); }
.ruler__tick--cap { height: 30px; background: var(--accent-hover); }
.ruler__label {
  position: absolute; bottom: 22px;
  font: 500 9.5px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.ruler__ends {
  display: flex; justify-content: space-between; gap: 16px;
  font: 500 9.5px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label-ink);
}

.mapsplit {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
}
.mapsplit > * { min-width: 0; }
.mapsplit__list { padding: 32px 34px 36px var(--gutter); border-right: 1px solid var(--rule); }
.mapsplit__detail { padding: 32px var(--gutter) 36px 34px; }

.thlist { border-top: 1px solid var(--ink); max-height: 520px; overflow: auto; }
.throw {
  width: 100%;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 12px 6px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.throw:hover { background: var(--paper); }
.throw[aria-current="true"] { background: var(--paper); }
.throw__mile { font: 400 17px/1 var(--serif); color: var(--accent); }
.throw__name { display: block; font: 500 14.5px/1.2 var(--ui); margin-bottom: 3px; }
.throw__sub { display: block; font: 400 11.5px/1.4 var(--ui); color: var(--label-ink); }
.throw__flag { font: 400 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

.thdetail__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.thdetail__head h2 { font: 300 32px/1.05 var(--serif); }
.thdetail__mile { font: 400 20px/1 var(--serif); color: var(--accent); }
.thdetail__sub { font: 400 14.5px/1.55 var(--serif); color: var(--ink-2); margin-bottom: 14px; }
.thdetail .pills { margin-bottom: 16px; }
.thdetail .hairgrid { margin-bottom: 16px; }
.thdetail .hairgrid > * { padding: 10px 12px; }
.thdetail__notes { border-left: 2px solid var(--rule); padding-left: 14px; margin-bottom: 18px; }
.thdetail__notes .label { margin-bottom: 7px; }
.thdetail__notes p { font: 400 13.5px/1.55 var(--ui); color: var(--ink-body); white-space: pre-line; }
.thdetail__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.thdetail__nearby { border-top: 1px solid var(--rule); padding-top: 14px; }
.thdetail__nearby .label { margin-bottom: 7px; }
.thdetail__nearby p { font: 400 12.5px/1.55 var(--ui); color: var(--label-ink); }

.mapctl { display: none; }
/* Zoom stack and view label are mobile controls: on desktop the map has room
   for MapLibre's own scale bar and the frame caption does the labelling. */
.maplabel { display: none; }
.sheet-handle { display: none; }

/* ── Conditions page ────────────────────────────────────────────────── */

.verdict { text-align: right; border-left: 1px solid var(--rule); padding-left: 26px; min-width: 210px; }
.verdict__word { display: flex; align-items: center; gap: 9px; justify-content: flex-end; margin-bottom: 8px; }
.verdict__word span:last-child { font: 400 26px/1 var(--serif); }
.verdict .label { letter-spacing: .18em; font-size: 10px; line-height: 1.5; }

.strip--wide .day { padding: 14px 14px 16px; text-align: left; }
.strip--wide .day__dom { font-size: 30px; margin: 7px 0 10px; }
.strip--wide .day__bar { margin-bottom: 10px; }
.strip--wide .day__wx { font: 400 11.5px/1.6 var(--ui); color: var(--label-ink); }

.points { --cols: 3; }
.points > * { padding: 15px 17px 17px; background: var(--cell-bg, var(--paper-raised)); }
.point__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.point__name { font: 500 15px/1.2 var(--ui); }
.point__mile { font: 400 15px/1 var(--serif); color: var(--accent); }
.point__grade { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.point__grade span:last-child { font: 500 11.5px/1 var(--ui); letter-spacing: .06em; color: var(--grade-ink); }
.point__rain {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 9px;
}
.point__rain .label { font-size: 8.5px; letter-spacing: .16em; margin-bottom: 5px; }
.point__rain b { font: 400 15px/1 var(--serif); }
.point__wx { font: 400 11.5px/1.5 var(--ui); color: var(--ink-2); }

.flag-sample {
  margin-left: auto;
  font: 500 10px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 6px 9px;
}

.condsplit { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start; }
.condsplit > * { min-width: 0; }
.gaugetable .table__head,
.gaugetable .table__row { grid-template-columns: 1.5fr 70px 80px auto; }
.gaugetable__name { font: 500 14px/1.3 var(--ui); }
.gaugetable__ft { font: 400 16px/1 var(--serif); }
.gaugetable__flood { font: 400 13px/1 var(--ui); color: var(--label-ink); }
.gaugetable__status { font: 400 12px/1.3 var(--ui); text-align: right; }
.gaugetable__status[data-state="normal"] { color: var(--good-ink); }
.gaugetable__status[data-state="high"] { color: var(--soft-ink); }
.gaugetable__status[data-state="flood"] { color: var(--muddy-ink); }
.gaugetable__status[data-state="none"] { color: var(--label-ink); }

.legend { border-top: 1px solid var(--rule); }
.legend__row {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.legend__row .dot { margin-top: 5px; }
.legend__name { font: 500 14px/1.2 var(--ui); margin-bottom: 5px; }
.legend__text { font: 400 12.5px/1.55 var(--ui); color: var(--ink-2); }
.disclaimer {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  margin-top: 16px;
  font: 400 12.5px/1.6 var(--ui);
  color: var(--ink-body);
}

/* ── Trail guide page ───────────────────────────────────────────────── */

.jumpchips { display: none; }

.tsection {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  scroll-margin-top: 70px;
}
.tsection:nth-of-type(even) { grid-template-columns: 1.05fr .95fr; background: var(--paper-raised); }
.tsection:nth-of-type(even) .tsection__media { order: 2; }
.tsection > * { min-width: 0; }
.tsection__media { position: relative; min-height: 400px; background: var(--photo-bg); }
.tsection__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tsection__body { padding: 34px 40px 38px; }
.tsection__span { font: 500 10px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.tsection__lede { color: var(--ink-body); margin-bottom: 20px; max-width: 600px; text-wrap: pretty; }
.tsection__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tsection__cols .label { margin-bottom: 10px; }

.stops { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.stops li { display: grid; grid-template-columns: auto 1fr; gap: 9px; font: 400 13px/1.5 var(--ui); color: var(--ink-body); }
.stops li::before { content: "\2013"; color: var(--accent); }

.spec { border-top: 1px solid var(--rule); }
.spec__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 12.5px/1.4 var(--ui);
}
.spec__row dt { color: var(--label-ink); }
.spec__row dd { margin: 0; text-align: right; }
.tsection__actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.threeways { background: var(--dark); color: var(--dark-fg); padding-block: 36px 40px; }
.threeways__grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.threeways .eyebrow { color: var(--dark-accent); margin-bottom: 12px; }
.threeways h2 { font: 200 32px/1.08 var(--serif); color: var(--dark-head); margin-bottom: 10px; }
.threeways p { font: 400 14.5px/1.6 var(--serif); color: var(--dark-body); max-width: 560px; }
.threeways__list { display: grid; gap: 8px; min-width: 340px; }
.threeways__list .entry { background: transparent; border-color: var(--dark-rule-2); display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; }
.threeways__list .entry:hover { background: rgba(237, 233, 220, .08); }
.threeways__list .entry__n { font-size: 20px; }
.threeways__list .entry__name { font-size: 13px; }
.threeways__list .entry__sub { font-size: 11.5px; margin-top: 3px; }

/* ── Getting there page ─────────────────────────────────────────────── */

.trains { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 20px; }
.train {
  border: 1px solid var(--ink);
  background: var(--paper-raised);
  padding: 14px 18px;
  display: flex; align-items: baseline; gap: 16px;
}
.train__code { font: 500 10px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); min-width: 52px; }
.train__run { font: 400 17px/1.3 var(--serif); }

.amtrak .table__head, .amtrak .table__row { grid-template-columns: 1.1fr .8fr 2fr; gap: 20px; padding-block: 13px; }
.amtrak__station { font: 500 14.5px/1.3 var(--ui); }
.amtrak__serves { font: 400 13.5px/1.3 var(--ui); }
.amtrak__note { font: 400 12.5px/1.5 var(--ui); color: var(--ink-2); }

.shuttles .table__head, .shuttles .table__row { grid-template-columns: 1.3fr .7fr 1.6fr auto; gap: 20px; padding-block: 13px; }
.shuttles__name { font: 500 14.5px/1.3 var(--ui); }
.shuttles__base, .shuttles__services { font: 400 12.5px/1.4 var(--ui); color: var(--ink-2); }
.shuttles__contact { text-align: right; min-width: 150px; font: 400 12.5px/1.4 var(--ui); }

.allheads .table__head, .allheads .table__row { grid-template-columns: 64px 1.1fr 58px 66px 66px 1.7fr; padding-block: 11px; }
.allheads__mile { font: 400 16px/1 var(--serif); color: var(--accent); }
.allheads__name { font: 500 14px/1.3 var(--ui); }
.allheads__yn { font: 400 12.5px/1 var(--ui); }

.practical { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.practical > div { border-top: 1px solid var(--ink); padding-top: 12px; }
.practical .label { margin-bottom: 9px; }
.practical p { font: 400 13.5px/1.6 var(--ui); color: var(--ink-body); }

/* W/R/C chips, mobile only. */
.wrc { display: none; }

/* ── History page ───────────────────────────────────────────────────── */

.hsplit { display: grid; grid-template-columns: 1.05fr .95fr; border-bottom: 1px solid var(--rule); background: var(--paper); }
.hsplit > * { min-width: 0; }
.hsplit__body { padding: 38px var(--gutter) 34px; }
.hsplit__body p { font: 400 16px/1.62 var(--serif); color: var(--ink-body); max-width: 540px; }
.hsplit__body p + p { margin-top: 14px; }
.hsplit__media { position: relative; min-height: 420px; background: var(--photo-bg); border-left: 1px solid var(--rule); }
.hsplit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Two columns that read down, not across: 1804 to 1990 on the left, the rest
   continuing on the right. */
.timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 0 44px;
}
.timeline__row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.timeline__year { font: 400 19px/1.1 var(--serif); color: var(--accent); }
.timeline__title { font: 500 15px/1.3 var(--ui); margin-bottom: 6px; }
.timeline__text { font: 400 13.5px/1.6 var(--ui); color: var(--ink-body); }

.lcsplit { display: grid; grid-template-columns: .95fr 1.05fr; border-bottom: 1px solid var(--rule); background: var(--paper); }
.lcsplit > * { min-width: 0; }
.lcsplit__media { position: relative; min-height: 400px; background: var(--photo-bg); border-right: 1px solid var(--rule); }
.lcsplit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lcsplit__body { padding: 36px var(--gutter) 40px; }
.lcsplit__body .eyebrow { color: var(--river); }
.lcsplit__body h2 { font: 200 36px/1.06 var(--serif); letter-spacing: -.015em; margin-bottom: 14px; }
.lcsplit__body p { font: 400 15.5px/1.62 var(--serif); color: var(--ink-body); margin-bottom: 14px; }
.callout { background: var(--paper-raised); border: 1px solid var(--rule); padding: 18px 20px; }
.callout .label { margin-bottom: 9px; }
.callout p { font: 400 14px/1.6 var(--serif); color: var(--ink-body); margin-bottom: 14px; }

.rockisland { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.rockisland > * { min-width: 0; }
.rockisland h2 { font: 200 36px/1.06 var(--serif); letter-spacing: -.015em; margin-bottom: 14px; }
.rockisland p { font: 400 15.5px/1.62 var(--serif); color: var(--ink-body); }
.rockisland p + p { margin-top: 14px; }
.rockisland .shot { height: 280px; margin-bottom: 14px; }
.capnote { border-top: 1px solid var(--ink); padding-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.capnote .label { margin-bottom: 8px; }
.capnote p { font: 400 13.5px/1.6 var(--ui); color: var(--ink-body); max-width: 400px; }

/* ── 1024 to 1239: same layout, fluid ───────────────────────────────── */

@media (max-width: 1239px) {
  .hero__media { min-height: 480px; }
  .tsection__body { padding: 30px 32px 34px; }
}

/* ── 768 to 1023 ────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; min-height: 340px; border-left: 0; margin-inline: calc(var(--gutter) * -1); }
  .hero__body { padding: 30px 0; }

  .planner__frame { grid-template-columns: 1fr; }
  .planner__controls { border-right: 0; border-bottom: 1px solid var(--rule); }

  .guide__grid { grid-template-columns: 1fr 1fr; }
  .card--featured { grid-row: auto; grid-column: span 2; }
  .card--featured .card__media { height: 260px; }

  .result { grid-template-columns: 64px 1fr auto; }
  .result__tags { display: none; }

  .mapsplit { grid-template-columns: 1fr; }
  .mapsplit__list { border-right: 0; border-bottom: 1px solid var(--rule); padding-inline: var(--gutter); }
  .mapsplit__detail { padding-inline: var(--gutter); }

  .points { --cols: 2; }
  .condsplit { grid-template-columns: 1fr; gap: 30px; }
  .river__grid { grid-template-columns: 1fr; gap: 26px; }
  .corridor__grid { grid-template-columns: 1fr; gap: 26px; }
  .practical { grid-template-columns: 1fr 1fr; }
  .threeways__grid { grid-template-columns: 1fr; }
  .threeways__list { min-width: 0; }
  .rockisland { grid-template-columns: 1fr; gap: 26px; }
  .allheads .table__head, .allheads .table__row { grid-template-columns: 56px 1.1fr 52px 60px 60px 1.5fr; gap: 12px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}

/* ── 767 and below: the 390 mobile design ───────────────────────────── */

@media (max-width: 767px) {
  .nav__inner { height: var(--header-h); padding-block: 0; gap: 10px; }
  .nav__links, .nav__360 { display: none; }
  .mark { font-size: 15px; letter-spacing: .05em; }
  .nav__status { border-left: 0; padding-left: 0; margin-left: auto; gap: 6px; }
  .nav__status span:last-child { font-size: 9.5px; }
  .nav .nav__burger { display: grid; }

  .sechead { grid-template-columns: 1fr; gap: 16px; }
  .sechead__stat { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 12px; }
  .stack { justify-items: stretch; }
  .stack .btn { width: 100%; }

  .btn { display: block; width: 100%; min-height: 48px; padding: 16px; }
  .btn--sm, .textlink { width: auto; display: inline-block; min-height: 0; }
  .textlink { padding: 8px 0; }
  .chip { padding: 10px 13px; min-height: 44px; }
  .throw { min-height: 44px; }
  .day { min-height: 44px; }

  /* Hero: the headline sits over the photo's scrim rather than beside it.
     One document, so .hero__body is repositioned rather than duplicated: a second
     copy of the h1 would mean two h1s, one of them hidden. */
  .hero__grid { display: block; position: relative; }
  .hero__media {
    min-height: 0; height: 452px;
    border-left: 0;
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero__media img { object-position: 56% 42%; }
  .hero__media .shot__caption,
  .hero__media .award { display: none; }

  .hero__body {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 0 var(--gutter) 22px;
    background: linear-gradient(to top, rgba(20, 22, 16, .94) 0%, rgba(20, 22, 16, .72) 45%, rgba(20, 22, 16, .3) 100%);
  }
  .hero__body .eyebrow { color: var(--accent-soft); line-height: 1.4; margin-bottom: 16px; }
  .hero__body .t-h1 { color: var(--paper-raised); margin-bottom: 12px; }
  .hero__body .hero__deck { color: #E4DFD1; margin-bottom: 18px; max-width: none; }
  .hero__body .hero__actions { display: grid; gap: 9px; margin-bottom: 0; }
  .hero__body .btn--ghost { border-color: var(--paper); color: var(--paper); }
  .hero__body .btn--ghost:hover { background: var(--paper); color: var(--ink); }
  /* The status cells and their footnote move out to .nowstrip below the photo. */
  .hero__status, .hero__note { display: none; }

  /* The desktop status strip becomes its own tappable block. */
  .nowstrip { display: block; color: inherit; border-bottom: 1px solid var(--rule); background: var(--paper); }
  .nowstrip:hover { color: inherit; }
  .nowstrip__top { display: flex; align-items: center; gap: 9px; padding: 13px var(--gutter) 11px; }
  .nowstrip__top b { font: 500 14px/1 var(--ui); }
  .nowstrip__all { margin-left: auto; font: 500 9.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .nowstrip__cells { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule-2); }
  .nowstrip__cells > * { padding: 10px var(--gutter) 12px; min-width: 0; }
  .nowstrip__cells > *:first-child { border-right: 1px solid var(--rule-2); }
  .nowstrip__cells .label { display: block; margin-bottom: 6px; }
  .nowstrip__cells b { display: block; font: 500 13.5px/1.3 var(--ui); }

  .planner__readout { display: none; }
  .planner__frame { display: block; padding: 16px; }
  .planner__controls { padding: 0; border: 0; }
  .planner__fields select { padding: 12px 4px; font-size: 18px; }
  .planner__results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
  }
  .planner__results > div { padding-top: 0; }
  .planner__results > div:first-child { display: block; }
  .planner__results .note { display: none; }
  .planner__results .t-num-md { font-size: 24px; }
  .range-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .range-row input[type="range"] { height: 28px; width: 100%; }
  .range-row .value { text-align: left; }
  .planner__forecast { padding: 22px 0 0; }

  /* Seven-day strip becomes a snapping horizontal scroller, never a dropdown. */
  .strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  .day { flex: none; width: 74px; scroll-snap-align: start; padding: 11px 8px 13px; }
  .strip--wide .day { width: 96px; text-align: left; }
  .strip--wide .day__dom { font-size: 26px; }

  .detail__head .detail__badge { margin-left: auto; }
  /* Three label/value rows rather than three columns. */
  .detail__body { display: block; border-top: 1px solid var(--rule-2); }
  .detail__body > div {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule-2);
    align-items: baseline;
  }
  .detail__body > div:last-child { border-bottom: 0; }
  .detail__body .label { margin-bottom: 0; line-height: 1.3; }
  .detail__verdict { font-size: 16px; }
  .overnights .textlink { margin-left: 0; }
  .overnights__copy { width: 100%; }
  .overnights__copy .btn { margin-top: 4px; }

  .viewer__well { height: 210px; }
  .viewer__count { text-align: left; border-left: 0; padding-left: 0; }
  .entrypoints { grid-template-columns: 1fr; }
  .entry { min-height: 44px; }
  .viewer__bottom { left: 12px; right: 12px; bottom: 12px; }

  .guide__grid { grid-template-columns: 1fr; gap: 18px; }
  .card--featured { grid-column: auto; }
  .card--featured .card__media { height: 180px; }
  .card--featured .card__blurb { max-width: none; }
  .card__media { height: 150px; }

  .searchbox { min-width: 0; width: 100%; }
  .searchbox input { font-size: 16px; }  /* 16px floor or iOS zooms on focus */
  .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chips--scroll::-webkit-scrollbar { display: none; }
  .chips--scroll .chip { flex: none; }

  /* Search results become stacked cards. */
  .results { border-top: 1px solid var(--ink); }
  .result { display: block; padding: 14px 0; }
  .result__head { display: flex; align-items: baseline; gap: 10px; }
  .result__title { order: -1; }
  .result__mile { font-size: 17px; margin-left: auto; }
  .result__name { margin-bottom: 0; }
  .result__sub { margin: 4px 0 8px; }
  .result__detail { display: none; }
  .results__foot { display: block; }
  .results__foot .textlink { display: block; width: 100%; text-align: center; margin-top: 14px; }

  .river__media { height: 190px; }
  .river__figs { display: none; }
  .gauges { --cols: 2; }

  .corridor h2 { font-size: 26px; }
  .progress__labels { font-size: 9px; }

  /* Map: full bleed with a bottom sheet over it. */
  .mapframe { border: 0; border-bottom: 1px solid var(--ink); padding: 0; margin-inline: calc(var(--gutter) * -1); position: relative; }
  .mapframe__canvas { aspect-ratio: auto; height: 330px; }
  .mapctl { display: grid; gap: 6px; position: absolute; top: 10px; right: 10px; z-index: 5; }
  .mapctl button {
    width: 44px; height: 44px;
    border: 1px solid var(--ink);
    background: var(--paper);
    font: 400 18px/1 var(--ui);
    cursor: pointer;
  }
  .maplabel {
    position: absolute; top: 10px; left: 10px; z-index: 5;
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 8px 10px;
    font: 500 9.5px/1 var(--ui);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .maplegend .note { margin-left: 0; width: 100%; }
  .ruler__label { font-size: 8.5px; letter-spacing: .1em; }
  .ruler__ends { font-size: 8.5px; letter-spacing: .1em; }

  .mapsplit { display: flex; flex-direction: column; }
  .mapsplit__detail { order: -1; padding: 16px var(--gutter) 24px; border-bottom: 1px solid var(--rule); }
  .mapsplit__list { padding: 24px var(--gutter) 28px; border-right: 0; }
  .sheet-handle { display: block; width: 44px; height: 4px; background: var(--rule); margin: 0 auto 14px; }
  .thlist { max-height: none; }
  .thdetail__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .thdetail__actions .btn--accent { grid-column: span 2; }
  .thdetail__head h2 { font-size: 26px; }

  .verdict {
    text-align: left; border-left: 0; padding: 14px 16px;
    border: 1px solid var(--ink);
    background: var(--paper-raised);
    min-width: 0;
  }
  .verdict__word { justify-content: flex-start; }
  .points { --cols: 1; border-left: 0; }
  .points > * { border-right: 0; padding: 12px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; }
  .point__head { display: contents; }
  .point__name { grid-column: 2; }
  .point__mile { grid-column: 3; }
  .point__grade { grid-column: 1 / -1; margin-bottom: 0; }
  .point__rain { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .point__wx { display: none; }
  .flag-sample { margin-left: 0; }

  .gaugetable .table__head { display: none; }
  .gaugetable .table__row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .gaugetable__flood { grid-column: 1; }
  .gaugetable__status { grid-column: 2; }

  /* Trail guide: jump chips, then everything stacked. */
  .jumpchips { display: flex; margin-top: 16px; gap: 7px; }
  .jumpchips .chip--here { border-color: var(--accent); color: var(--accent); }
  .tsection, .tsection:nth-of-type(even) { grid-template-columns: 1fr; }
  .tsection__media { min-height: 0; height: 200px; order: -1 !important; }
  .tsection__body { padding: 22px var(--gutter) 26px; }
  .tsection__cols { grid-template-columns: 1fr; gap: 20px; }
  .tsection__actions { display: grid; gap: 8px; }

  .trains { grid-template-columns: 1fr; }
  .amtrak .table__head, .shuttles .table__head, .allheads .table__head { display: none; }
  .amtrak .table__row { grid-template-columns: 1fr; gap: 5px; padding-block: 14px; }
  .shuttles .table__row { grid-template-columns: 1fr; gap: 5px; padding-block: 14px; }
  .shuttles__contact { text-align: left; min-width: 0; margin-top: 8px; }
  .shuttles__contact a { display: inline-block; border: 1px solid var(--ink); color: var(--ink); padding: 10px 14px; font: 500 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }

  /* Trailhead table becomes mile, name, and three W/R/C chips. */
  .allheads .table__row { grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding-block: 12px; }
  .allheads__yn, .allheads .table__note { display: none; }
  .wrc { display: flex; gap: 5px; }
  .wrc span {
    width: 20px; height: 20px;
    display: grid; place-items: center;
    font: 500 9px/1 var(--ui);
    border: 1px solid var(--rule);
    color: var(--disabled);
  }
  .wrc span[data-on="true"] { background: var(--good-ink); border-color: var(--good-ink); color: var(--paper-raised); }

  .practical { grid-template-columns: 1fr; gap: 18px; }

  .hsplit, .lcsplit { grid-template-columns: 1fr; }
  .hsplit__media, .lcsplit__media { min-height: 0; height: 240px; border: 0; order: -1; }
  .hsplit__body, .lcsplit__body { padding: 24px var(--gutter) 28px; }
  .timeline { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .timeline__row { grid-template-columns: 84px 1fr; gap: 14px; padding: 14px 0; }
  .rockisland .shot { height: 200px; }
  .capnote { grid-template-columns: 1fr; gap: 14px; align-items: start; }

  .foot__cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .foot__cols > :first-child { grid-column: span 2; }
}

/* ── Width-conditional copy ─────────────────────────────────────────────
   One document, two widths. A handful of sentences run longer on desktop than
   they can on a 390 screen; these spans are how that happens without a second
   copy of the headline. */
.narrow-only { display: none; }
@media (max-width: 767px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
}

/* ── Conditions page head ───────────────────────────────────────────────
   Desktop: title left, verdict right, deck under the title. Mobile: title,
   then the verdict in a bordered card, then the deck. The answer to "is it
   muddy" has to be above the fold on a phone. */
.condhead__deck { grid-column: 1; }
@media (max-width: 767px) {
  .condhead { display: flex; flex-direction: column; gap: 14px; }
  .condhead__deck { grid-column: auto; }
}

/* ── Waysides ───────────────────────────────────────────────────────── */
.wayside__h1 { margin: 0 0 14px; text-wrap: balance; }
.wayside__lede { max-width: 62ch; margin: 0 0 8px; }
.wayside__prov { margin: 0 0 30px; }
.wayside__art { margin: 0 0 8px; }
.wayside__art a { position: relative; display: block; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--photo-bg); }
.wayside__art img { width: 100%; height: auto; display: block; }
.wayside__zoom { position: absolute; right: 12px; bottom: 12px; background: rgba(25,26,21,.78); color: var(--dark-fg); border-radius: 8px; padding: 6px 11px; letter-spacing: .04em; }
.wayside__art figcaption { margin: 10px 0 34px; }
.wayside__cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.wayside__story h2 { margin: 0 0 7px; }
.wayside__story p { max-width: 64ch; margin: 0 0 16px; }
.wayside__side { background: var(--paper-raised); border: 1px solid var(--rule-2); border-radius: 10px; padding: 20px 20px 16px; }
.wayside__side h2 { margin: 6px 0 9px; }
.wayside__caps { border-top: 1px solid var(--rule-2); margin-top: 10px; padding-top: 12px; display: grid; gap: 8px; }
.wayside__credits { border-top: 1px solid var(--rule); margin-top: 34px; padding-top: 16px; max-width: 78ch; }
.wayside__cta { background: var(--dark); color: var(--dark-fg); padding: var(--sec-pad-t) 0 var(--sec-pad-b); }
.wayside__cta .eyebrow { color: var(--dark-accent); }
.wayside__cta h2 { color: var(--dark-head); margin: 0 0 16px; }
.wayside__btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* .btn--ghost's base colors are --ink, which equals --dark: invisible on this
   band at any width (the mobile-only .hero__body override doesn't reach
   here). Same fix, same pattern, scoped to this band's own tokens. */
.wayside__cta .btn--ghost { border-color: var(--dark-fg); color: var(--dark-fg); }
.wayside__cta .btn--ghost:hover { background: var(--dark-fg); color: var(--dark); }
.wayside__g { color: var(--dark-accent); font-weight: 500; margin-right: 4px; }
.wayside__ctanote { color: var(--dark-dim); margin: 12px 0 0; }

/* Embed band: live iframe with a two-location toggle, above the CTA. */
.wayside__embed h2 { margin: 0 0 18px; }
.wayside__toggle { margin: 0 0 14px; }
.wayside__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--photo-bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.wayside__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wayside__embed-note { margin-top: 12px; }

@media (max-width: 767px) {
  .wayside__cols { grid-template-columns: 1fr; gap: 26px; }
}
.wayside-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.wayside-card { display: block; background: var(--paper-raised); border: 1px solid var(--rule-2); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; }
.wayside-card img { width: 100%; height: auto; aspect-ratio: 16/8; object-fit: cover; display: block; }
.wayside-card__pad { display: grid; gap: 6px; padding: 14px 16px 16px; }
.wayside-card__read { color: var(--accent); font-weight: 500; }
.wayside-card:hover .wayside-card__read { text-decoration: underline; }
.wayside-ghost { border: 1px dashed var(--rule); border-radius: 10px; display: grid; place-items: center; min-height: 170px; padding: 20px; text-align: center; }
.wayside-ghost .note { max-width: 26ch; }

/* Map popup: the "ways-dot" layer's click card. MapLibre popup content
   inherits page fonts, so these set the same type scale as the rest of the site. */
.ways-pop { font: 400 12.5px/1.5 var(--ui); color: var(--ink-body); min-width: 180px; }
.ways-pop__ey { font: 500 8.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.ways-pop h5 { font: 400 16px/1.15 var(--serif); color: var(--ink); margin: 0 0 2px; }
.ways-pop__sub { color: var(--label-ink); margin: 0 0 9px; }
.ways-pop__links { display: flex; gap: 12px; }
.ways-pop__links a { font-weight: 500; color: var(--accent); text-decoration: none; }
.ways-pop__links a:hover { text-decoration: underline; }
.maplibregl-popup-content { background: var(--paper-raised); border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); padding: 13px 15px 12px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--paper-raised); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--paper-raised); }