:root {
  --ink: #16211b;
  --ink-soft: #3d4740;
  --paper: #f5f2ea;          /* ivory: the page background */
  --panel: #ffffff;
  --line: #e4dfd2;
  --sign: #1c3a2e;           /* deep forest: the masthead, the hike's sign and the featured cards */
  --sign-text: #e8dcb8;
  --sign-rule: rgba(232, 220, 184, 0.38);   /* the fine line inset in each sign */
  --brass: #a07c43;
  --stream: #509cbf;         /* swim spots: the water on the way down */
  --stream-deep: #2a6380;    /* its text color, dark enough to read */
  --stream-mist: #eaf4f8;
  --ticket: #efe3c4;         /* Plan B: an 1800s railroad ticket */
  --ticket-dark: #e2d2aa;
  --press: #3b2a1c;
  --oxblood: #7b2d1e;
  --rule: #8a7352;
  --font-old: "Old Standard TT", Georgia, "Times New Roman", serif;
  --amber: #c7892b;          /* NH Beer Trail stops */
  --amber-text: #94600f;
  --amber-deep: #7a4c0f;
  --link: #173f59;
  --ok-text: #174028;        /* green and red dark enough to read on the ivory page */
  --error-text: #6e1f11;
  --water: #5b93b5;
  --water-deep: #2f5d74;
  --water-bg: #e6f0f5;

  --favorable: #2e7d4f;
  --favorable-bg: #e3f2e8;
  --caution: #8a5a0b;
  --caution-bg: #fbefd6;
  --serious: #b23a26;
  --serious-bg: #fbe3dd;
  --not-recommended: #ffffff;
  --not-recommended-bg: #8c2318;
  --unknown: #4b5560;
  --unknown-bg: #e9ecef;

  --wood-deep: #12271e;
  --paper-card: #fdfcf8;     /* the plan, water and swim cards */
  --paper-edge: rgba(22, 33, 27, 0.11);
  --frost: rgba(250, 251, 248, 0.74);   /* today's numbers, laid on the hero's sky */
  --shadow-soft: 0 1px 2px rgba(22, 33, 27, 0.05), 0 10px 26px -18px rgba(22, 33, 27, 0.3);

  --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --font-sign: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --radius: 4px;
}

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

/* The ground: ivory, with a topographic map's contour lines drawn faintly into it. */
body {
  margin: 0;
  background-color: var(--paper);
  background-image: url("img/topo.svg");
  background-size: 900px 900px;
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
}

.page { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* Section headings are blazed in the color of their blaze in the bar at the top. */
h2 {
  display: flex; align-items: center; gap: 0.7rem;
  font: 600 2rem/1.15 var(--font-sign); letter-spacing: -0.005em; text-wrap: balance;
  margin: 0 0 0.85rem;
}
h2::before { content: ""; flex: none; width: 0.22rem; height: 1.45rem; border-radius: 1px; background: var(--blaze-color, var(--sign)); }
.visually-hidden::before { display: none; }
#swim-title { --blaze-color: var(--stream); }
#food-title { --blaze-color: #8b5a3c; }
#beer-title { --blaze-color: var(--amber); }
#rail-title { --blaze-color: var(--oxblood); }
#emergency-title { --blaze-color: var(--serious); }
#water-title { --blaze-color: var(--water); }
section { margin-top: 3.25rem; }
p { margin: 0 0 0.75rem; max-width: 70ch; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}
code { font-size: 0.9em; background: #eef1ec; padding: 0.1em 0.35em; border-radius: 4px; }
.muted { color: var(--ink-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The hike's sign: deep forest, ivory lettering and a fine inset line */
.sign {
  background: var(--sign);
  color: var(--sign-text);
  border-radius: var(--radius);
  padding: 1.75rem 2rem 1.5rem;
  box-shadow: inset 0 0 0 10px var(--sign), inset 0 0 0 11px var(--sign-rule);
}
.sign-name {
  font: 600 clamp(2.3rem, 6vw, 3.75rem)/1.05 var(--font-sign);
  letter-spacing: -0.01em;
  margin: 0;
}
.sign-elev { font: 500 1.4rem/1.2 var(--font-sign); margin: 0.4rem 0 0; }
.sign-range { margin: 0.25rem 0 0; }
.sign-old {
  margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--sign-rule);
  max-width: 34rem; font-size: 0.9375rem; line-height: 1.4;
}
.sign-old + .sign-old { border-top: 0; padding-top: 0; margin-top: 0.3rem; }
.sign-old-name { font-weight: 700; font-style: italic; }
.sign-old-source { margin-left: 0.2rem; font-size: 0.8125rem; color: inherit; opacity: 0.85; }

/* Backdrop: the hike's ridgeline under the forecast sky */
/* The picture clips to the rounded corners; the scene itself doesn't, so the details popup that
   follows your finger along the ridge can reach past the edge of a short (phone-sized) picture. */
.scene {
  position: relative; border-radius: 6px;
  min-height: 23rem; padding: 1.25rem; display: flex; align-items: flex-start;
  background: #a9c6dc;
}
.scene-art { position: absolute; inset: 0; display: flex; align-items: flex-end; overflow: hidden; border-radius: inherit; }
/* a sideways drag traces the route; an up-and-down one still scrolls the page */
.scene-art svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.stat-icon { width: 1.6rem; height: 1.6rem; vertical-align: -0.35rem; margin-right: 0.3rem; }
.stat-icon.thermometer { width: 1rem; height: 2.3rem; vertical-align: -0.6rem; }
.scene-caption .stat-icon { width: 1.3rem; height: 1.3rem; vertical-align: -0.3rem; }
.scene-caption { margin: 0.25rem 0 0; font-weight: 500; color: var(--ink); }
.scene-caption[hidden] { display: none; }
.scene-note { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--ink-soft); max-width: 70ch; }
.scene-tip {
  position: absolute; z-index: 1; transform: translate(-50%, calc(-100% - 14px));
  display: flex; flex-direction: column; gap: 0.15rem;
  background: rgba(24, 32, 27, 0.9); color: #fff; border-radius: var(--radius);
  padding: 0.5rem 0.75rem; font-size: 0.8125rem; line-height: 1.4; white-space: nowrap; pointer-events: none;
}
.scene-tip.below { transform: translate(-50%, 14px); }
@media (max-width: 40rem) { .scene-tip { white-space: normal; width: max-content; max-width: min(18rem, calc(100vw - 2.5rem)); } }
.scene-tip[hidden] { display: none; }
.detail-label { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.badge-small { font-size: 0.75rem; padding: 0.05rem 0.45rem; }
.emergency { border-left: 4px solid var(--serious); padding-left: 1rem; }
.emergency ul { padding-left: 1.1rem; margin: 0 0 1rem; }
.emergency li { margin-bottom: 0.5rem; max-width: 70ch; }
.emergency h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.scene-time { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.6rem; font-size: 0.875rem; color: var(--ink-soft); }
.scene-time input { flex: 1; accent-color: var(--sign); }
.scene-time output { min-width: 7rem; color: var(--ink); font-weight: 500; text-align: right; }
@keyframes fall { from { transform: translateY(-3rem); } to { transform: translateY(22rem); } }
.scene-art .drop { animation: fall linear infinite; }
.scene-rock { fill: #a5a39a; opacity: 0.8; }
.scene-route-outline { fill: none; stroke: #f6efd9; stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.detail-hint { opacity: 0.75; font-style: italic; }
/* Local lore: small trail-sign cards, in the drawer under the mountain picture */
.lore-cards { display: grid; gap: 0.6rem; }
.lore-card {
  padding: 0.9rem 1.1rem 0.85rem; background: var(--sign); color: var(--sign-text); border-radius: var(--radius);
  box-shadow: inset 0 0 0 5px var(--sign), inset 0 0 0 6px var(--sign-rule);
}
.story-kind { margin: 0; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.story-title { margin: 0.15rem 0 0.35rem; font: 600 1.35rem/1.2 var(--font-sign); }
.story-text { margin: 0; color: #f6efd9; line-height: 1.5; }
.story-sources { margin: 0.5rem 0 0; font-size: 0.8125rem; opacity: 0.9; }
.story-sources a { color: inherit; }
.scene-shore { fill: #34503c; opacity: 0.55; }
.scene-ripple { fill: none; stroke: #ffffff; stroke-width: 1.4; stroke-linecap: round; opacity: 0.55; }
.scene-falls { fill: none; stroke: #eef7fb; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 12 3; opacity: 0.92; animation: flow 0.8s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -15; } }
.scene-crack { fill: none; stroke: #6f6d66; stroke-width: 1; stroke-linecap: round; opacity: 0.6; }
@keyframes drift { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.scene-art .cloud { animation: drift 48s ease-in-out infinite alternate; }
.scene-art .cloud:nth-child(even) { animation-duration: 62s; animation-direction: alternate-reverse; }
@media (prefers-reduced-motion: reduce) { .scene-art .drop, .scene-art .cloud, .scene-art .scene-falls { animation: none; } }
/* The masthead: a letterhead bar, the logo and name on the left and the hike picker on the right */
.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  margin: 0 0 0.75rem; padding: 0.75rem 1.25rem; border-radius: var(--radius); color: var(--sign-text);
  background: var(--sign); border-bottom: 2px solid var(--brass); box-shadow: var(--shadow-soft);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--sign-text); text-decoration: none; }
.brand:focus-visible { outline: 2px solid var(--sign-text); outline-offset: 4px; border-radius: var(--radius); }
.brand-logo { display: block; width: 3.1rem; height: 3.1rem; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font: 600 1.6rem/1.05 var(--font-sign); letter-spacing: 0; }
.brand-tag { margin-top: 0.25rem; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sign-text); opacity: 0.8; }
.hike-picker { display: flex; align-items: center; gap: 0.6rem; }
.masthead-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; }
.saved-link {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: var(--radius);
  background: var(--wood-deep); color: var(--sign-text); box-shadow: inset 0 0 0 1px var(--sign-rule); font: 600 0.75rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.saved-link[hidden] { display: none; }
.saved-link::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sign-text); }
.hike-picker label { font: 600 0.6875rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sign-text); opacity: 0.8; }
/* the hike picker: an ivory field with a fine chevron */
.hike-picker select {
  min-width: 0; max-width: 100%; appearance: none; padding: 0.45rem 2.2rem 0.45rem 0.85rem; cursor: pointer;
  border: 1px solid var(--sign-rule); border-radius: var(--radius); color: var(--ink); font: 600 1rem/1.2 var(--font-sign);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c3a2e' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 0.8rem center / 0.65rem;
}
.hike-picker select:focus-visible { outline: 2px solid var(--sign-text); outline-offset: 3px; }
.hike-picker[hidden] { display: none; }
/* The section bar: stays at the top, one marked link per part of the page */
.blazes {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 0.25rem 1rem; margin: 0 -1.25rem 0.9rem; padding: 0.5rem 1.25rem;
  overflow-x: auto; scrollbar-width: none; background: rgba(245, 242, 234, 0.96); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.blazes::-webkit-scrollbar { display: none; }
.blazes.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.blazes.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
.blazes.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.blaze {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: none; padding: 0.15rem 0.1rem;
  font: 600 0.75rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.blaze[hidden] { display: none; }
/* each part's mark: a slim upright bar in its color */
.blaze-mark {
  width: 0.2rem; height: 0.85rem; border-radius: 1px; background: var(--mark);
  box-shadow: 0 0 0 1px rgba(22, 33, 27, 0.18); transition: transform 0.2s ease;
}
.blaze:hover .blaze-mark, .blaze[aria-current] .blaze-mark { transform: scaleY(1.2); }
.blaze-marker {
  position: absolute; left: 0; bottom: 0.15rem; height: 2px; width: 0; border-radius: 1px; background: var(--sign);
  transition: transform 0.35s ease, width 0.35s ease;
}
.blaze:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.blaze-plan { --mark: var(--brass); }
.blaze-rail { --mark: var(--oxblood); }
.blaze-mountain { --mark: #ffffff; }
.blaze-swim { --mark: var(--stream); }
.blaze-food { --mark: #8b5a3c; }
.blaze-beer { --mark: var(--amber); }
.blaze-help { --mark: var(--serious); }
main section, .verdict, .drawers { scroll-margin-top: 3.5rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blaze-mark, .blaze-marker { transition: none; } }
/* Data sources: required credits, tucked under a small toggle at the very bottom */
.credits { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.credits summary { display: inline-block; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.credits summary::-webkit-details-marker { display: none; }
.footer-links { margin: 0.6rem 0 0; font-size: 0.8125rem; }
.footer-links a { color: var(--ink-soft); text-underline-offset: 3px; }
/* Terms, safety and privacy */
.terms-page section { max-width: 70ch; }
.terms-page h2 { margin: 1.6rem 0 0.4rem; font: 600 1.4rem/1.2 var(--font-sign); }
.terms-page p, .terms-page li { line-height: 1.55; }
.terms-page ul { padding-left: 1.2rem; }
.terms-page li { margin-bottom: 0.4rem; }
.terms-updated { margin: 0; color: var(--ink-soft); font-size: 0.875rem; }
.terms-back { margin: 2rem 0 1rem; }
.credits summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.credits p { margin: 0.5rem 0 0; }
.sample-note { font-size: 0.875rem; color: var(--ink-soft); margin: 0.6rem 0 0; }

/* Right now */
.now {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; margin: 0 0 1.25rem; padding: 0.25rem 0 0;
}
/* The hero: the hike's own mountain opens the page, with its trail sign, any trail alert and today's
   numbers laid on the sky, and the slider and drawers about the mountain right under it. */
.hero { margin-top: 0; }
.hero .scene { min-height: 34rem; border-radius: 6px; box-shadow: var(--shadow-soft); }
/* the ridges and trail (the lower 62% of the drawing, which is 41.7% as tall as it is wide) stay
   clear of the boxes: when the sign, alerts and numbers need more room, the picture grows taller */
@media (min-width: 40.01rem) { .hero .scene { padding-bottom: calc(41.7% * 0.62 + 1rem); } }
.hero-overlay {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 0.9rem 1.25rem; width: 100%; pointer-events: none;   /* the sky between them still traces the route */
}
.hero-overlay > * { pointer-events: auto; }
.now-head { flex: 0 1 auto; min-width: 0; }
.hero .sign {
  max-width: 100%; padding: 1rem 1.35rem 0.9rem;
  box-shadow: inset 0 0 0 7px var(--sign), inset 0 0 0 8px var(--sign-rule), 0 14px 32px -16px rgba(12, 20, 16, 0.55);
}
.hero .sign-name { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.hero .sign-elev { font-size: 1.3rem; }
.hero .alerts {
  margin-top: 0.6rem; max-width: 30rem; padding: 0.45rem 0.75rem; border-radius: 6px;
  background: var(--frost); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Trail alerts: the plan's warnings one at a time, like a news ticker, right under the sign:
   the blinking tag, the alert, and the count at the end of the line. */
.alerts {
  flex-basis: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 0.3rem 1.25rem; padding-top: 0.5rem;
}
.alerts[hidden] { display: none; }
.alerts-head { display: contents; }   /* the tag and count take their own places in the line */
.alerts-body { grid-area: 1 / 2; }
.alerts-count { grid-area: 1 / 3; }
.alerts-tag {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.6rem;
  font: 700 0.75rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--error-text);
}
.alerts-dot {
  width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #c0321e;
  animation: alert-blink 1.2s ease-in-out infinite;
}
@keyframes alert-blink {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(192, 50, 30, 0.6); }
  50% { opacity: 0.3; }
  100% { opacity: 1; box-shadow: 0 0 0 0.5rem rgba(192, 50, 30, 0); }
}
.alerts-text { margin: 0; font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; animation: alert-in 0.4s ease-out; }
.alerts-text strong { color: var(--error-text); margin-right: 0.4rem; }
@keyframes alert-in { from { opacity: 0; transform: translateY(0.4em); } }
.alerts-count { font-size: 0.8125rem; color: var(--ink-soft); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .alerts-dot, .alerts-text { animation: none; } }
@media (max-width: 30rem) {   /* on phones the alert goes under the tag, lined up with its words */
  .alerts { grid-template-columns: 1fr auto; }
  .alerts-count { grid-area: 1 / 2; }
  .alerts-body { grid-area: 2 / 1 / 3 / 3; padding-left: 1.25rem; }
}

/* The answer: the plan's rating and finish time, in a band colored by the rating, with the plan
   itself under it as a sentence whose underlined words are the choices. */
.verdict {
  --tone: var(--unknown); --tone-soft: var(--unknown-bg);
  margin: 1rem 0 1.1rem; padding: 1.1rem 1.35rem 1.15rem; border: 1px solid var(--line);
  border-left: 6px solid var(--tone); border-radius: 6px;
  /* faint contour lines in the corner, like a topo map, over a wash of the rating's color */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='none' stroke='%231f2b24' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M200 6c-30 4-52 22-70 40s-40 30-70 30'/%3E%3Cpath d='M200 26c-24 4-40 18-56 34s-36 28-62 28'/%3E%3Cpath d='M200 46c-18 4-30 14-42 27s-30 24-52 24'/%3E%3Cpath d='M200 66c-12 3-20 10-29 20s-22 19-40 19'/%3E%3Cpath d='M200 86c-8 2-13 7-19 14s-14 13-26 13'/%3E%3C/svg%3E") no-repeat right top / 18rem auto,
    linear-gradient(105deg, var(--tone-soft) 0%, var(--paper-card) 42%);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.3s ease;
}
.verdict[data-level="FAVORABLE"] { --tone: var(--favorable); --tone-soft: var(--favorable-bg); }
.verdict[data-level="CAUTION"] { --tone: var(--caution); --tone-soft: var(--caution-bg); }
.verdict[data-level="SERIOUS"] { --tone: var(--serious); --tone-soft: var(--serious-bg); }
.verdict[data-level="NOT_RECOMMENDED"] { --tone: var(--not-recommended-bg); --tone-soft: var(--serious-bg); }
.verdict-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0.9rem 1.75rem;
  padding-bottom: 1rem; border-bottom: 1px dashed rgba(31, 43, 36, 0.18);
}
.verdict-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
.verdict-back { align-items: flex-end; justify-self: end; text-align: right; }   /* the finish time sits in the far right corner */
.badge-pending { background: transparent; color: var(--ink-soft); border: 2px dashed #c4ccc4; font-size: 1.25rem !important; }
.verdict-empty { color: #c4ccc4; }
.verdict-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.verdict-head .badge-large {
  font: 600 1.65rem/1 var(--font-sign); padding: 0.5rem 1.05rem; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(31, 43, 36, 0.06);
}
.verdict-time { display: flex; align-items: center; gap: 0.45rem; font: 600 2.1rem/1 var(--font-sign); color: var(--ink); white-space: nowrap; }
.verdict-time .stat-icon { width: 1.75rem; height: 1.75rem; margin: 0; vertical-align: 0; }
.verdict-length { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.verdict-spare { font-size: 0.9375rem; color: var(--ink-soft); }
.verdict[data-light="sunset"] .verdict-spare { color: var(--caution); font-weight: 500; }
.verdict[data-light="moon"] .verdict-spare { color: #3b4a7a; font-weight: 500; }
/* The day from sunrise to sunset, with the hike laid on it */
.daylight { grid-column: 1 / -1; padding-bottom: 1.1rem; }
.daylight-track { position: relative; height: 0.7rem; border-radius: 999px; background: #3b4a6a; overflow: hidden; }
.daylight-day {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, #f2c27b, #f6dd9a 18%, #f6dd9a 82%, #e9a46b);
}
.daylight-hike {
  position: absolute; top: 0.12rem; bottom: 0.12rem; min-width: 0.5rem; border-radius: 999px;
  background: var(--tone); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.daylight-labels { position: relative; height: 0; font-size: 0.6875rem; color: var(--ink-soft); }
.daylight-labels span { position: absolute; top: 0.3rem; transform: translateX(-50%); white-space: nowrap; }
.daylight-labels span:first-child { transform: none; }
.daylight-labels span:last-child { transform: translateX(-100%); }
.verdict .error { margin: 0; }
.plan-sentence { position: relative; margin: 0.75rem 0 0; font-size: 1.1875rem; line-height: 2.15; color: var(--ink); }
.plan-sentence .choice {
  min-height: 0; margin: 0 0.1em; padding: 0 1em 0 0.15em; font: inherit; font-weight: 600; line-height: 1.35;
  color: var(--sign); border: 0; border-bottom: 2px dashed var(--sign); border-radius: 5px 5px 0 0; cursor: pointer;
  background: rgba(28, 58, 46, 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c3a2e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.15em center / 0.6em;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.plan-sentence .choice::placeholder { color: rgba(28, 58, 46, 0.45); font-weight: 500; }
.plan-sentence .choice:hover, .plan-sentence .choice:focus { background-color: #f3eee2; border-bottom-style: solid; outline: none; }
.plan-sentence .choice:focus-visible { box-shadow: 0 2px 0 var(--sign); }
.plan-sentence .choice[aria-invalid="true"] { color: var(--serious); border-bottom-color: var(--serious); }
.plan-sentence .choice[aria-expanded="true"] { background-color: #f3eee2; border-bottom-style: solid; cursor: text; }
/* The list under a part of the plan: a small card in the plan card's own cream and the sign's forest. */
.plan-menu {
  position: absolute; z-index: 5; max-width: 100%; max-height: 15rem; overflow-y: auto; margin: 0; padding: 0.3rem;
  list-style: none; font-size: 1rem; line-height: 1.3; background: #fbf8f0; color: var(--ink);
  border: 1px solid #d9cfb8; border-top: 3px solid var(--sign); border-radius: 4px 4px 10px 10px;
  box-shadow: 0 10px 24px rgba(31, 43, 36, 0.18);
}
.plan-menu[hidden] { display: none; }
.plan-menu [role="option"] {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.65rem 0.4rem 1.6rem; border-radius: 6px;
  cursor: pointer; white-space: nowrap; position: relative;
}
.plan-menu [role="option"]:hover { background: #f1eadb; }
.plan-menu [role="option"].active { background: var(--sign); color: var(--sign-text); }
.plan-menu [role="option"][aria-selected="true"] { font-weight: 600; }
.plan-menu [role="option"][aria-selected="true"]::before {
  content: ""; position: absolute; left: 0.6rem; top: 50%; width: 0.35rem; height: 0.65rem; margin-top: -0.4rem;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.plan-menu-note { padding: 0.3rem 0.65rem 0.4rem; font-size: 0.8125rem; color: var(--ink-soft); white-space: normal; }
.plan-menu-times { display: grid; grid-template-columns: repeat(4, minmax(3.6rem, 1fr)); gap: 0.1rem; }
.plan-menu-times .plan-menu-note { grid-column: 1 / -1; }
.plan-menu-times [role="option"] { justify-content: center; padding: 0.4rem 0.5rem; font-variant-numeric: tabular-nums; }
.plan-menu-times [role="option"][aria-selected="true"]::before { display: none; }
.plan-problem { margin: 0.35rem 0 0; padding: 0.35rem 0.6rem; border-radius: 6px; background: var(--caution-bg); color: var(--caution); font-size: 0.875rem; }
.plan-problem[hidden] { display: none; }
.plan-typical { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); font-style: italic; }
.plan-typical[hidden] { display: none; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.share-row[hidden] { display: none; }
.share-plan {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.15rem; border: 0; border-radius: var(--radius);
  font: 600 0.8125rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sign-text); background: var(--sign); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.share-plan:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 33, 27, 0.22); }
.share-plan:disabled { opacity: 0.6; cursor: progress; }
.share-plan:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The line to the hike's trail reports on New England Trail Conditions, louder when our forecast
   expects ice, snow or wet rock, or rates the hike badly */
/* Hiker reports: a quiet line of two links under the plan, so the plan itself stands out. It only
   draws the eye (in the caution color, with a mark) when the forecast says reports matter. */
/* the trip plan's optional details: who's going, the car, a cell number */
.trip-details { flex-basis: 100%; margin-top: 0.2rem; }
.trip-details summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.trip-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 0.5rem 0.9rem; margin: 0.5rem 0 0.3rem; }
.trip-fields label { display: grid; gap: 0.2rem; color: var(--ink); font-weight: 500; }
.trip-fields input { font: inherit; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); min-width: 0; }
.trip-note { margin: 0; font-size: 0.8125rem; }
.share-done { flex-basis: 100%; margin: 0.3rem 0 0; color: var(--ink); }
.share-done[hidden] { display: none; }
.trip-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.4rem 0 0; padding: 0.6rem 0.75rem; background: var(--paper-card); border: 1px solid var(--paper-edge); border-radius: 8px; font: 0.8125rem/1.5 var(--font-body); }
.essentials-line, .summit-forecast { margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--ink-soft); max-width: 70ch; }
.summit-forecast[hidden] { display: none; }
/* the turnaround time and any footwear warning, full width under the day's strip */
.verdict-notes { grid-column: 1 / -1; display: grid; gap: 0.45rem; margin: 0; }
.verdict-notes:empty { display: none; }
.verdict-turnaround, .verdict-ankle { margin: 0; padding: 0.55rem 0.8rem; border-radius: 6px; font-size: 0.9375rem; max-width: 72ch; }
.verdict-turnaround { background: #eef3f6; border-left: 3px solid var(--water-deep); color: var(--ink); }
.verdict-ankle { background: var(--caution-bg); border-left: 3px solid var(--caution); color: var(--ink); }
.verdict-ankle strong { color: var(--caution); }
.reality { grid-column: 1 / -1; }
/* how hard it really is: the climb, the rock and the steepest mile, under the day's strip */
.reality { margin: 0; padding: 0.85rem 1rem 0.8rem; border-radius: 6px; background: #f3eedf; border: 1px solid var(--paper-edge); }
.reality-title { margin: 0 0 0.6rem; font: 600 0.75rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.reality-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 0.6rem 1.25rem; }
.reality-fact { display: grid; gap: 0.1rem; min-width: 0; }
.reality-value { font: 600 1.35rem/1.15 var(--font-sign); color: var(--ink); }
.reality-label { font-size: 0.875rem; color: var(--ink-soft); }
.reality-note { margin: 0.65rem 0 0; font-size: 0.875rem; color: var(--ink); max-width: 70ch; }
/* Not feeling it? The other hikes a short drive away, easier, similar or bigger, one of which can be kept as a backup */
.nearby { grid-column: 1 / -1; margin: 0; padding: 0.85rem 1rem 0.5rem; border-radius: 6px; background: var(--paper-card); border: 1px solid var(--paper-edge); }
.nearby-intro { margin: 0; font-size: 0.875rem; color: var(--ink-soft); max-width: 70ch; }
.nearby-label { margin: 0.85rem 0 0.25rem; font: 600 0.6875rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.nearby-group ul { margin: 0; padding: 0; list-style: none; }
.nearby-hike { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.nearby-about { flex: 1 1 15rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; }
.nearby-about strong { color: var(--ink); }
.nearby-facts { flex-basis: 100%; font-size: 0.875rem; color: var(--ink-soft); }
.nearby-tag { font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 6px; background: var(--favorable-bg); color: var(--ok-text); }
.nearby-switch, .nearby-keep { font: inherit; font-size: 0.875rem; padding: 0.35rem 0.7rem; border-radius: 8px; border: 1px solid var(--sign); background: var(--panel); color: var(--sign); text-decoration: none; cursor: pointer; }
.nearby-switch:hover, .nearby-keep:hover { background: #f3eedf; }
.nearby-keep.kept { background: var(--favorable); border-color: var(--favorable); color: #fff; }
/* Be prepared: a trailhead kiosk for what to do before you go, the ten essentials as trail patches to
   sew on as you pack, the Hike Safe card as its own sign, and a rescue card for if something goes wrong */
#safety-title { --blaze-color: var(--serious); }
.safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.25rem; align-items: start; }

/* the trailhead kiosk: a forest header over a paper board */
.kiosk { min-width: 0; overflow: hidden; border-radius: 6px; background: var(--paper-card); border: 1px solid var(--paper-edge); box-shadow: var(--shadow-soft); }
.kiosk-sign {
  margin: 0; padding: 0.85rem 1.25rem; color: var(--sign-text); text-transform: uppercase; letter-spacing: 0.14em;
  font: 600 0.8125rem/1.2 var(--font-body); background: var(--sign); border-bottom: 2px solid var(--brass);
}
.kiosk-steps { list-style: none; counter-reset: step; margin: 0; padding: 1.1rem 1.25rem 0.4rem; }
.kiosk-steps li { counter-increment: step; position: relative; margin: 0 0 0.9rem; padding-left: 2.6rem; max-width: 60ch; }
.kiosk-steps li::before {   /* each step numbered in a serif, over a fine brass rule */
  content: counter(step); position: absolute; left: 0; top: -0.1rem; width: 1.8rem; padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--brass); text-align: center; color: var(--sign); font: 600 1.35rem/1.1 var(--font-sign);
}
.kiosk-code { margin: 0; padding: 0.75rem 1.25rem 1rem; border-top: 1px dashed var(--paper-edge); font-size: 0.875rem; color: var(--ink-soft); }

/* the pack: canvas, with a stitched edge */
.pack {
  min-width: 0; padding: 1.1rem 1.25rem 1.25rem; border-radius: 6px; background: #f1ece0; box-shadow: var(--shadow-soft);
  outline: 1px dashed rgba(160, 124, 67, 0.45); outline-offset: -7px;
}
.pack-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.pack h3 { margin: 0; font: 600 1.35rem/1.15 var(--font-sign); }
.pack-count { margin: 0; font: 600 1rem/1.2 var(--font-sign); letter-spacing: 0.03em; color: var(--sign); }
.pack-count.done { color: var(--favorable); }
.pack-lead { margin: 0.35rem 0 0.7rem; font-size: 0.875rem; color: var(--ink-soft); }
.pack-meter { height: 0.55rem; margin: 0 0 1rem; border-radius: 999px; background: rgba(28, 58, 46, 0.1); overflow: hidden; }
.pack-meter span {
  display: block; width: 0; height: 100%; border-radius: inherit; transition: width 0.35s ease;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.18) 0 6px, transparent 6px 12px), var(--favorable);
}
.essentials { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 0.55rem 0.8rem; }
.essentials label { position: relative; display: flex; align-items: center; gap: 0.65rem; cursor: pointer; line-height: 1.25; }
.essentials input { position: absolute; opacity: 0; width: 1px; height: 1px; }   /* the patch is the box */
/* an embroidered patch: a round badge with a stitched ring; sewn on, it takes the forest green */
.patch {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: #fffdf6; color: var(--ink-soft); border: 2px dashed rgba(31, 43, 36, 0.3);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}
.patch-icon { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.essentials input:checked + .patch {
  background: var(--favorable); color: #fff; border: 2px dashed var(--sign-text); transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 0 0 2px var(--favorable), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
}
.essentials input:checked ~ .patch-name { color: var(--ink-soft); }
.essentials input:focus-visible + .patch { outline: 2px solid var(--ink); outline-offset: 3px; }
.essentials label:hover .patch { border-color: rgba(31, 43, 36, 0.55); }
@media (prefers-reduced-motion: reduce) { .patch, .pack-meter span { transition: none; } }

/* the Hike Safe card, as its own wide sign */
.trail-tag.hike-safe-wide { max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 1.25rem 0 0; padding: 1rem 1.35rem; }
.trail-tag.hike-safe-wide[hidden] { display: none; }
.hike-safe-text { flex: 1 1 22rem; min-width: 0; }
.hike-safe-text p:last-child { margin-bottom: 0; }
.trail-tag .hike-safe-get {
  flex: none; padding: 0.6rem 1.15rem; border-radius: var(--radius); text-decoration: none;
  background: var(--sign-text); color: var(--sign); font: 600 0.8125rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.5); transition: transform 0.18s ease;
}
.trail-tag .hike-safe-get:hover, .trail-tag .hike-safe-get:focus-visible { transform: translateY(-2px); }

/* the rescue card, with a 911 sign in rescue red */
.safety > .rescue {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem; border-radius: 6px; border-left: 4px solid var(--serious);
  background: var(--paper-card); box-shadow: var(--shadow-soft);
}
.rescue-head { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 0.75rem; }
.rescue-badge {
  flex: none; display: grid; place-items: center; width: 3.6rem; height: 2.6rem; border-radius: 8px;
  background: var(--serious); color: #fff; font: 600 1.45rem/1 var(--font-sign); letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 1.5px var(--serious), 0 4px 10px -5px rgba(0, 0, 0, 0.45);
}
.rescue .emergency-title { margin: 0; color: var(--serious); font: 600 1.45rem/1.1 var(--font-sign); }
.safety .kit-steps { margin: 0 0 1rem; padding-left: 1.1rem; }
.safety .kit-steps li:first-child { font-size: 1.0625rem; }
.safety .kit-steps li:first-child strong { color: var(--serious); }
.report-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0.6rem 0 0; font-size: 0.875rem; }
.report-line[hidden] { display: none; }
.report-line a { color: var(--link); }
.report-line a:first-child { font-weight: 600; }
.report-line-mark { margin-right: 0.35rem; vertical-align: -0.15rem; }
.report-line-mark:empty { display: none; }
.report-line-mark {
  display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--caution); color: #fff; font: 700 0.8125rem/1 var(--font-body);
}
.report-line.warn a:first-child { color: var(--caution); }
.plan-help { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.verdict .info-text { margin-top: 0.6rem; background: #f4f1e8; }
@media (max-width: 40rem) {
  .verdict { padding: 0.9rem 1rem 1rem; background-size: 12rem auto, auto; }
  .verdict-head { gap: 0.75rem 1.25rem; }
  .verdict-head .badge-large { font-size: 1.4rem; }
  .verdict-time { font-size: 1.55rem; }
  .verdict-time .stat-icon { width: 1.4rem; height: 1.4rem; }
  .plan-sentence { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) { .verdict, .plan-sentence .choice { transition: none; } }

.verdict { flex-basis: 100%; min-width: 0; }
/* today's numbers: a frosted strip on the hero's sky, like a summit register */
.now-stats {
  flex: 0 1 auto; display: grid; grid-template-columns: repeat(3, auto); gap: 0.55rem 1.4rem; margin: 0; padding: 0.8rem 1.05rem;
  border-radius: 6px; background: var(--frost); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -16px rgba(20, 30, 40, 0.5);
}
.now-stats div { min-width: 0; }
.now-stats dt { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.now-stats dd { margin: 0; font: 500 1.35rem/1.15 var(--font-sign); white-space: nowrap; }
/* Folded sections (the three-day forecast, the route) stay out of the way until asked for. */
.fold summary {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  border: 1px solid var(--ink-soft); border-radius: var(--radius); padding: 0.3rem 0.75rem;
  font: 600 1rem/1.2 var(--font-sign); letter-spacing: 0.03em; color: var(--ink);
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after {
  content: ""; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.fold[open] summary::after { margin-top: 0.2rem; transform: rotate(-135deg); }
.fold summary:hover { background: rgba(255, 255, 255, 0.25); }
.fold summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.fold-note { font: 500 0.875rem/1.2 var(--font-body); letter-spacing: 0; color: var(--ink-soft); }
.fold-body { margin-top: 0.75rem; }
/* Two drawers under the mountain picture, side by side: each slides open on its own, below them. */
.drawers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 0.6rem; margin-top: 0.85rem; }
.drawer-tabs { display: contents; }
#temps-drawer { grid-column: 1; grid-row: 2; }
#route-drawer { grid-column: 2; grid-row: 2; }
.drawers.has-lore { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#lore-drawer { grid-column: 3; grid-row: 2; }
.drawer-tab[hidden], .drawer[hidden] { display: none; }
.drawer-tab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; position: relative; padding: 0.6rem 2.4rem 0.65rem 0.95rem;
  border: 1px solid rgba(31, 43, 36, 0.28); border-radius: 6px; background: rgba(255, 255, 255, 0.35); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.drawer-tab::after {
  content: ""; position: absolute; right: 1rem; top: 50%; width: 0.45rem; height: 0.45rem; margin-top: -0.35rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.3s ease, margin 0.3s ease;
}
.drawer-tab:hover { background: rgba(255, 255, 255, 0.6); }
.drawer-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.drawer-tab[aria-expanded="true"] { background: var(--sign); border-color: var(--sign); color: var(--sign-text); }
.drawer-tab[aria-expanded="true"] .fold-note { color: var(--sign-text); }
.drawer-tab[aria-expanded="true"]::after { margin-top: -0.05rem; transform: rotate(-135deg); }
.drawer-name { font: 600 1.15rem/1.2 var(--font-sign); letter-spacing: 0.03em; }
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.drawer.open { grid-template-rows: 1fr; }
.drawer-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.4s; }
.drawer.open .drawer-inner { visibility: visible; transition: none; }
.drawer.open .drawer-inner > * { margin-top: 0.75rem; }
/* the temperature ladder: summit to trailhead, cold to warm */
.ladder, #route { border-radius: 6px; background: rgba(255, 255, 255, 0.55); }
#route { padding: 0.9rem 1.1rem; }
.ladder { position: relative; list-style: none; margin: 0; padding: 0.9rem 1.1rem; }
.ladder::before {
  content: ""; position: absolute; left: calc(1.1rem + 0.45rem - 2px); top: 1.6rem; bottom: 1.6rem; width: 4px; border-radius: 2px;
  background: linear-gradient(#7fb3cf, #e7b867);
}
.rung { position: relative; display: grid; grid-template-columns: 0.9rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.45rem 0; }
.rung + .rung { border-top: 1px dashed rgba(31, 43, 36, 0.18); }
.rung-dot { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 3px solid #fff; z-index: 1;
  background: color-mix(in srgb, #e7b867 calc(var(--warmth) * 100%), #7fb3cf); box-shadow: 0 0 0 1px rgba(31, 43, 36, 0.25); }
.rung-place { display: flex; flex-direction: column; font: 600 1.1rem/1.2 var(--font-sign); letter-spacing: 0.02em; }
.rung-elev { font: 400 0.8125rem/1.3 var(--font-body); color: var(--ink-soft); letter-spacing: 0; }
.rung-temp { font: 600 2rem/1 var(--font-sign); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) {
  .drawers { gap: 0 0.45rem; }
  .drawers.has-lore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lore-tab { grid-column: 1 / -1; margin-top: 0.45rem; }
  #temps-drawer, #route-drawer, #lore-drawer { grid-column: 1 / -1; grid-row: auto; }
  .drawer-tab { padding: 0.55rem 2rem 0.6rem 0.75rem; }
  .drawer-name { font-size: 1.0625rem; }
  .drawer-tab .fold-note { font-size: 0.8125rem; }
  .drawer-tab::after { right: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-inner, .drawer-tab::after { transition: none; } }
/* Live weather down: only the sign and a note show, so nothing looks rated. */
.weather-note { display: none; }
.weather-note.shown { display: block; flex-basis: 100%; margin: 0; padding: 0.45rem 0.8rem; border-radius: 8px;
  background: var(--caution-bg); color: var(--caution); font-size: 0.9375rem; }
body.weather-down .weather-note { display: block; flex-basis: 100%; margin: 0; font-size: 1.0625rem; }
body.weather-down main > :not(.masthead):not(.now),
body.weather-down .now > :not(.now-head):not(.weather-note) { display: none; }
.outlook { flex-basis: 100%; min-width: 0; }   /* the forecast scrolls inside it on phones */
/* One column per forecast period, day and night side by side */
.forecast-days {
  list-style: none; padding: 0 0 0.25rem; display: grid; grid-auto-flow: column; gap: 0.5rem;
  grid-auto-columns: minmax(8.5rem, 1fr); overflow-x: auto;
}
.forecast-days li {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.75rem 0.8rem;
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--sign); border-radius: 8px;
  font-size: 0.875rem; color: var(--ink-soft);
}
.forecast-days .night { background: #eef1ec; border-top-color: var(--water-deep); }
.forecast-days h3 { margin: 0; font: 600 1.05rem/1.2 var(--font-sign); color: var(--ink); }
.forecast-days .stat-icon { width: 2rem; height: 2rem; margin: 0.15rem 0; }
.forecast-days .temp { font: 500 1.35rem/1.1 var(--font-sign); color: var(--ink); }
.forecast-days .sky { color: var(--ink); line-height: 1.35; flex: 1; }

/* Rating badges */
.badge {
  display: inline-block; border-radius: var(--radius);
  padding: 0.3rem 0.8rem; font-weight: 600;
}
.badge-large { font-size: 1.25rem; padding: 0.45rem 1rem; }
.level-FAVORABLE { background: var(--favorable-bg); color: var(--favorable); }
.level-CAUTION { background: var(--caution-bg); color: var(--caution); }
.level-SERIOUS { background: var(--serious-bg); color: var(--serious); }
.level-NOT_RECOMMENDED { background: var(--not-recommended-bg); color: var(--not-recommended); }
.level-UNKNOWN { background: var(--unknown-bg); color: var(--unknown); }

/* Water to bring: a row of drawn bottles, filled to what you'll drink */
.water {
  margin-top: 1.25rem; background: var(--paper-card); border: 1px solid var(--paper-edge);
  border-radius: 6px; padding: 1rem 1.25rem; box-shadow: var(--shadow-soft);
}
.water-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.water-title { font: 600 1.35rem/1.2 var(--font-sign); margin: 0; }
.water-amount { margin: 0; color: var(--ink-soft); }
.water-amount strong { font: 600 2.5rem/1 var(--font-sign); color: var(--water-deep); margin-right: 0.2rem; }
.bottles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.bottle {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  background: none; border: 0; border-radius: var(--radius); padding: 0.35rem 0.4rem;
  font: inherit; font-size: 0.8125rem; color: var(--ink-soft); cursor: pointer;
}
.bottle:hover, .bottle:focus-visible { background: var(--water-bg); }
.bottle-art { display: block; width: 2.6rem; height: auto; }
.bottle-plastic { fill: #eef4f6; }
.bottle-water { fill: var(--water); }
.bottle-label { fill: var(--sign-text); opacity: 0.9; }
.bottle-outline { fill: none; stroke: var(--water-deep); stroke-width: 1.5; }
.bottle-cap { fill: var(--sign); }
.water-when { margin: 0.5rem 0 0; min-height: 1.5em; }
.water-size { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; }
.water-weight { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; }
.water-size-note { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }
.bottle-reserve .bottle-outline { stroke-dasharray: 3 2.5; }
.bottle-reserve .bottle-water { fill-opacity: 0.55; }
.water-tip { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.water .water-heat { margin-top: 0.9rem; }
.water .info-text, .water .heat-aid { margin-top: 0.75rem; }

.field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.875rem; color: var(--ink-soft); border: 0; margin: 0; padding: 0; }
.field-head { display: inline-flex; align-items: center; gap: 0.4rem; }
.info {
  width: 1.25rem; height: 1.25rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--ink-soft); background: transparent; color: var(--ink-soft);
  font: italic 600 0.75rem/1 Georgia, serif; cursor: pointer;
}
.info[aria-expanded="true"] { background: var(--sign); border-color: var(--sign); color: var(--sign-text); }
.info.info-link {
  width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: var(--link); text-decoration: underline; cursor: pointer;
}
.info.info-link[aria-expanded="true"] { background: none; color: var(--sign); font-weight: 600; }
.info-text {
  margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--sign);
  background: var(--paper); font-size: 0.875rem; color: var(--ink);
}
.heat-aid {
  margin-top: 0.9rem; padding: 0.8rem 1rem; border-left: 4px solid var(--serious);
  background: var(--serious-bg); border-radius: var(--radius); font-size: 0.9375rem;
}
.heat-aid h3 { font: 600 1.15rem/1.2 var(--font-sign); margin: 0 0 0.4rem; }
.heat-aid p { margin: 0 0 0.5rem; max-width: 75ch; }
.heat-aid p:last-child { margin: 0; font-size: 0.8125rem; }
.heat-aid[hidden] { display: none; }
.info-text p { margin: 0 0 0.4rem; }
.info-text p:last-child { margin: 0; }
input[type="number"] { width: 6.5rem; }
.choice { color: var(--ink); font-size: 1rem; display: inline-flex; align-items: center; gap: 0.35rem; }
input[type="time"], input[type="number"], select {
  font: inherit; color: var(--ink); font-size: 1rem;
  border: 1px solid #b9c3bb; border-radius: var(--radius); background: #fff;
  padding: 0.45rem 0.6rem; min-height: 2.5rem;
}

/* Hike Safe card: a small forest sign, like the one on the scene */
.trail-tag {
  margin-top: 1rem; padding: 0.8rem 1rem 0.85rem; border-radius: var(--radius); max-width: 30rem;
  background: var(--sign); color: var(--sign-text); font-size: 0.875rem;
  box-shadow: inset 0 0 0 5px var(--sign), inset 0 0 0 6px var(--sign-rule);
}
.trail-tag[hidden] { display: none; }
.trail-tag p { margin: 0 0 0.4rem; }
.trail-tag-name { font: 600 1.3rem/1.15 var(--font-sign); }
.trail-tag a { color: var(--sign-text); font-weight: 600; }
.data-note { font-size: 0.8125rem; color: var(--ink-soft); margin: 1rem 0 0; }
.error { color: var(--error-text); font-weight: 500; }

/* Tables */
table { border-collapse: collapse; min-width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.55rem 0.9rem 0.55rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); }

/* Route and swim */
.route-sections { margin: 0; padding-left: 1.4rem; }
.route-sections li { margin: 0.15rem 0; }
.route-hint { margin: 0.2rem 0 0.4rem; font-size: 0.8125rem; color: var(--ink-soft); }
/* each section is a button: choosing it lights it up on the mountain picture */
.route-section {
  display: block; width: 100%; padding: 0.35rem 0.5rem; margin-left: -0.5rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.route-section:hover { background: rgba(31, 43, 36, 0.06); }
.route-section:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.route-section[aria-pressed="true"] { background: rgba(31, 43, 36, 0.1); }
.route-section-name { font-weight: 600; }
.route-level .badge { font-size: 0.75rem; padding: 0.05rem 0.45rem; vertical-align: 0.05rem; }
.route-section-meta { display: block; font-size: 0.875rem; color: var(--ink-soft); }
.scene-focus-line { fill: none; stroke: #fffbe8; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.swim-unchecked {
  display: inline-block; margin: 0.3rem 0 0.1rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8125rem;
  background: var(--caution-bg); color: var(--caution);
}
.swim-gauge { margin: 0.45rem 0 0; padding-left: 0.6rem; border-left: 3px solid var(--stream); color: var(--ink); }
/* Swim spots as pools along a stream in the hike's water blue: the river is drawn through each pool,
   ripples faster when a gauge says it's running high, and a chosen pool opens out beside it. */
.stream { position: relative; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.stream-river { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.stream-river path { fill: none; stroke-linecap: round; }
.stream-bank { stroke: var(--stream); stroke-opacity: 0.2; stroke-width: 20; }
.stream-water { stroke: var(--stream); stroke-width: 5; transition: stroke-width 0.4s ease; }
.stream-ripple { --dash: 16px; stroke: #eef8fc; stroke-width: 1.6; stroke-dasharray: 2 14; animation: stream-flow 3.2s linear infinite; }
.stream[data-flow="calm"] .stream-ripple { animation-duration: 5.5s; }
.stream[data-flow="high"] .stream-water { stroke-width: 8; }
.stream[data-flow="high"] .stream-ripple { --dash: 12px; stroke-dasharray: 4 8; stroke-width: 2; animation-duration: 1.3s; }
@keyframes stream-flow { to { stroke-dashoffset: calc(var(--dash) * -2); } }
.pool-row { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; padding: 0.3rem 0; }
.pool {
  position: relative; z-index: 1; grid-column: 1; justify-self: center; width: 1.45rem; height: 1.45rem; margin-top: 0.6rem;
  border: 3px solid var(--stream); border-radius: 50%; background: var(--stream-mist); transition: transform 0.25s ease;
}
.pool-lake { width: 2.3rem; border-radius: 52% 46% 50% 48% / 60% 54% 46% 40%; }
.pool.unchecked { border-color: rgba(80, 156, 191, 0.45); }
.pool[data-temp="cold"] { background: #e2f1f8; }
.pool[data-temp="cool"] { background: #a6d1e4; }
.pool[data-temp="mild"] { background: var(--stream); border-color: var(--stream-deep); }
.pool-row:hover .pool, .pool-row.open .pool { transform: scale(1.15); }
.pool-row.open .pool::after {
  content: ""; position: absolute; inset: -7px; border: 2px solid var(--stream); border-radius: inherit;
  animation: pool-ring 2.8s ease-out infinite;
}
@keyframes pool-ring { from { opacity: 0.75; transform: scale(0.75); } to { opacity: 0; transform: scale(1.7); } }
.pool-body { grid-column: 2; min-width: 0; padding: 0.35rem 0.8rem; border-radius: 6px; transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.pool-row.open .pool-body { padding: 0.6rem 0.95rem 0.85rem; background: var(--paper-card); box-shadow: inset 0 0 0 1px var(--paper-edge), var(--shadow-soft); }
.pool-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; width: 100%; padding: 0; border: 0;
  font: inherit; text-align: left; color: var(--ink); background: none; cursor: pointer;
}
.pool-name { font: 600 1.3rem/1.15 var(--font-sign); text-decoration: underline wavy transparent 1.5px; text-underline-offset: 5px; transition: text-decoration-color 0.2s ease; }
.pool-head:hover .pool-name, .pool-head:focus-visible .pool-name { text-decoration-color: var(--stream-deep); }
.pool-head:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.pool-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; font-size: 0.8125rem; color: var(--ink-soft); }
.water-tag { padding: 0.08rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.8); color: var(--stream-deep); font-weight: 600; }
.pool-row.open .water-tag { background: #fff; }
.water-high { background: var(--caution-bg); color: var(--caution); }
.pool-row.open .water-high { background: var(--caution-bg); }
.water-unknown { color: var(--ink-soft); font-weight: 500; }
.pool-meta .badge { font-size: 0.75rem; padding: 0.08rem 0.5rem; }
.pool-detail { margin-top: 0.35rem; font-size: 0.9375rem; }
.pool-detail p { margin: 0.45rem 0 0; }
/* lakes the Army Corps of Engineers runs, with its water-safety message */
.swim-corps { padding: 0.5rem 0.7rem; border-radius: 8px; background: var(--water-bg); color: var(--water-deep); font-size: 0.875rem; }
.swim-corps strong { color: var(--water-deep); }
.pool-note { color: var(--stream-deep); font-weight: 500; }
.pool-hazards { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.stream-headline { margin: 0 0 0.6rem; font-size: 1.0625rem; }
.stream-key { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.stream-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.stream-key span::before { content: ""; width: 0.8rem; height: 0.8rem; border: 2px solid var(--stream); border-radius: 50%; background: var(--stream-mist); }
.stream-key .key-lake::before { width: 1.25rem; border-radius: 52% 46% 50% 48% / 60% 54% 46% 40%; }
.stream-key .key-unchecked::before { border-color: rgba(80, 156, 191, 0.45); }
.stream-key .key-temp::before { width: 1.6rem; border: 0; border-radius: 999px; background: linear-gradient(90deg, #e2f1f8, #a6d1e4, var(--stream)); }
@media (max-width: 40rem) {
  .pool-row { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .pool-body { padding-inline: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stream-ripple, .pool-row.open .pool::after { animation: none; }
  .pool, .pool-body, .stream-water { transition: none; }
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }
.chips[hidden] { display: none; }
.chip {
  font: inherit; font-size: 0.875rem; padding: 0.35rem 0.85rem; border-radius: var(--radius); cursor: pointer;
  border: 1px solid #d6cfbf; background: var(--panel); color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--sign); border-color: var(--sign); color: var(--sign-text); }
/* Places to eat: small forest signs, like the Hike Safe card */
.pick {
  background: var(--sign); color: var(--sign-text); border-radius: var(--radius); padding: 0.95rem 1.2rem 1rem;
  margin-bottom: 0.75rem; box-shadow: inset 0 0 0 5px var(--sign), inset 0 0 0 6px var(--sign-rule);
}
.pick-label { margin: 0; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sign-text); opacity: 0.8; }
.pick h3 { margin: 0.2rem 0 0.25rem; font: 600 1.5rem/1.15 var(--font-sign); }
.pick-line { margin: 0; color: #f4efe2; }
.pick-why { margin: 0.35rem 0 0; color: var(--sign-text); font-size: 0.9375rem; }
.pick-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.5rem 0 0; font-size: 0.9375rem; }
.pick a, .pick .link-button { color: var(--sign-text); }
.pick.partner { background: var(--wood-deep); box-shadow: inset 0 0 0 5px var(--wood-deep), inset 0 0 0 6px var(--brass); }
.partner-note { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--sign-text); opacity: 0.85; }
.link-button { font: inherit; padding: 0; border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; }
/* More places as a flowing set of trail markers: each lifts on hover, turns sign forest, and
   keeps an ivory ring once chosen. The beer list groups them by drive time, like trail-sign mileages. */
.stops h3 { margin: 1rem 0 0.5rem; font: 600 1.15rem/1.2 var(--font-sign); }
.stops-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stop {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; padding: 0.45rem 0.85rem 0.5rem;
  font: inherit; text-align: left; cursor: pointer; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-left: 4px solid var(--sign); border-radius: 4px 14px 14px 4px;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.stop-name { font: 600 1.1rem/1.2 var(--font-sign); }
.stop-meta { font-size: 0.8125rem; color: var(--ink-soft); transition: color 0.18s ease; }
.stop:hover, .stop:focus-visible, .stop[aria-pressed="true"] {
  background: var(--sign); color: var(--sign-text); border-color: var(--sign);
}
.stop:hover, .stop:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(31, 43, 36, 0.22); }
.stop:hover .stop-meta, .stop:focus-visible .stop-meta, .stop[aria-pressed="true"] .stop-meta { color: var(--sign-text); }
.stop[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sign-text); }
.stop[aria-pressed="true"]:hover, .stop[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--sign-text), 0 6px 14px rgba(31, 43, 36, 0.22);
}
.stop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.stops-hint { margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
/* Brewers Association members off the Beer Trail: the same marker in slate instead of sign forest. */
.stop.member { --blaze: #2b3d4f; border-left-color: var(--blaze); }
.stop.member:hover, .stop.member:focus-visible, .stop.member[aria-pressed="true"] { background: var(--blaze); border-color: var(--blaze); }
.pick.member { background: #2b3d4f; box-shadow: inset 0 0 0 5px #2b3d4f, inset 0 0 0 6px var(--sign-rule); }
/* NH Beer Trail stops: amber, with a hop cone, so they stand apart from both the forest that marks a
   chosen place and the slate of other members. Chosen, they fill with deep amber and keep the ring. */
.hop { width: 0.75em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.stop.trail { --blaze: var(--amber); border-left-color: var(--blaze); }
.stop.trail .stop-name { display: inline-flex; align-items: center; gap: 0.3rem; }
.stop.trail .hop { color: var(--amber-text); transition: color 0.18s ease; }
.stop.trail:hover, .stop.trail:focus-visible, .stop.trail[aria-pressed="true"] { background: var(--amber-deep); border-color: var(--amber-deep); }
.stop.trail:hover .hop, .stop.trail:focus-visible .hop, .stop.trail[aria-pressed="true"] .hop { color: var(--sign-text); }
.pick.trail { background: var(--amber-deep); box-shadow: inset 0 0 0 5px var(--amber-deep), inset 0 0 0 6px var(--sign-rule); }
.trail-stamp {
  float: right; display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.4rem 0.75rem; padding: 0.2rem 0.55rem;
  border: 1.5px dashed var(--sign-text); border-radius: 4px; transform: rotate(-2deg);
  font: 600 0.6875rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sign-text);
}
.stops-key { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.stops-key span::before {
  content: ""; display: inline-block; width: 4px; height: 0.9em; margin-right: 0.45rem; vertical-align: -0.1em;
  border-radius: 1px; background: var(--sign);
}
.stops-key span { display: inline-flex; align-items: center; }
.stops-key .key-trail::before { background: var(--amber); }
.stops-key .key-trail .hop { margin-right: 0.3rem; color: var(--amber-text); }
.stops-key .key-member::before { background: #2b3d4f; }
.stops-by-time { margin-top: 0.25rem; }
.stops-row { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.6rem 0; }
.stops-row + .stops-row { border-top: 1px dashed rgba(31, 43, 36, 0.3); }
.stops-time { margin: 0.35rem 0 0; text-align: right; color: var(--sign); font: 600 1.5rem/1 var(--font-sign); font-variant-numeric: tabular-nums; }
.stops-time span { display: block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.plan-nudge { margin: 0 0 0.6rem; font-size: 0.875rem; color: var(--ink-soft); font-style: italic; }
.pick.swap { animation: swap-in 0.22s ease; }
@keyframes swap-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .stop, .stop-meta, .stop .hop { transition: none; }
  .stop:hover, .stop:focus-visible { transform: none; }
  .pick.swap { animation: none; }
}

.beer[hidden] { display: none; }
.beer-intro, .section-intro { margin: 0 0 0.75rem; max-width: 40rem; }
.beer-support { margin: 1rem 0 0; max-width: 40rem; }

/* Eat and Pint side by side on a wide screen (one column when there's no brewery list) */
.eat-drink { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 0 2.5rem; align-items: start; }
.eat-drink > section { min-width: 0; }
.eat-drink > [hidden] { display: none; }
.fine-print { margin-top: 1.25rem; }
.fine-print p:empty { display: none; }
.beer-all {
  display: none; margin: 0.6rem 0 0; padding: 0.5rem 1rem; border: 1px solid var(--sign); border-radius: var(--radius);
  background: var(--panel); color: var(--sign); font: 600 0.8125rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.beer-all:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 40rem) {
  .sign { padding: 1.5rem 1.5rem 1.25rem; }
  /* the hero sized to what's laid on its sky, plus the drawing's own sky and ridges below it, so
     there's no empty band above the mountains */
  .hero .scene { min-height: 0; padding: 0.75rem 0.75rem calc(41.7% * 0.62); }
  .hero-overlay { flex-direction: column; gap: 0.6rem; }
  .hero .sign { padding: 0.8rem 1rem 0.75rem; }
  .masthead { padding: 0.6rem 0.85rem; overflow: hidden; }
  .brand-name { font-size: 1.4rem; }
  .hike-picker { width: 100%; }
  .hike-picker select { flex: 1; max-width: calc(100% - 0.4rem); }
  /* on a phone the numbers stay a compact strip, so the mountain still shows */
  .now-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.8rem; width: 100%; padding: 0.6rem 0.8rem; }
  .now-stats dt { font-size: 0.625rem; letter-spacing: 0.08em; }
  .now-stats dd { font-size: 1.05rem; white-space: normal; }
  .now-stats .stat-icon { width: 1.1rem; height: 1.1rem; }
  .now-stats .stat-icon.thermometer { width: 0.7rem; height: 1.5rem; }
  .stops-by-time.collapsed .beer-more { display: none; }
  .beer-all { display: inline-block; }
}

/* ---------- Plan B: the rail trail, as an 1800s railroad ticket. Three inks only: paper, press
   brown and oxblood. The type is a 19th-century book face; the drawings are engraved line work. */
.plan-b-chit {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; margin: 0.9rem 0 0.2rem;
  background: var(--ticket); color: var(--press); border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 0 var(--ticket-dark), 0 3px 9px rgba(59, 42, 28, 0.16);
  animation: ticket-in 0.45s ease-out both;
}
.plan-b-chit[hidden] { display: none; }
.chit-stub { display: flex; align-items: center; padding: 0 0.85rem; background: var(--ticket-dark); border-right: 2px dotted var(--rule); }
.chit-stub .locomotive { width: 3.4rem; height: auto; color: var(--press); }
.plan-b-chit p { margin: 0; padding: 0.6rem 1rem 0.7rem; font-size: 1rem; }
.chit-kicker { font: 700 0.75rem/1.4 var(--font-old); letter-spacing: 0.2em; text-transform: uppercase; color: var(--oxblood); }
.plan-b-chit a { color: var(--oxblood); font-weight: 600; white-space: nowrap; }
@keyframes ticket-in { from { opacity: 0; transform: translateY(6px) rotate(-0.4deg); } }

.rail h2 { margin-bottom: 0.6rem; }
.ticket {
  position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr); color: var(--press);
  border-radius: 6px; box-shadow: 0 10px 26px rgba(59, 42, 28, 0.22);
  /* aged paper: two faint foxing spots and a fine grain */
  background: radial-gradient(circle at 18% 26%, rgba(139, 105, 60, 0.1) 0 2.5rem, transparent 4rem),
    radial-gradient(circle at 84% 80%, rgba(139, 105, 60, 0.08) 0 3rem, transparent 5rem),
    repeating-linear-gradient(0deg, rgba(59, 42, 28, 0.018) 0 1px, transparent 1px 3px), var(--ticket);
}
/* the notches where the stub tears off */
.ticket::before, .ticket::after { content: ""; position: absolute; left: calc(4rem - 0.75rem); width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--paper); }
.ticket::before { top: -0.75rem; }
.ticket::after { bottom: -0.75rem; }
.ticket-stub {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.2rem 0;
  border-right: 2px dotted var(--rule); border-radius: 6px 0 0 6px; background: rgba(226, 210, 170, 0.55);
}
.ticket-stub .seal { width: 3rem; height: 3rem; }
/* the conductor's punch through the stub */
.ticket-punch { width: 0.85rem; height: 0.85rem; margin-top: auto; border-radius: 50%; background: var(--paper);
  box-shadow: inset 0 1px 2px rgba(59, 42, 28, 0.45); }
.ticket-stub span {
  writing-mode: vertical-rl; transform: rotate(180deg); font: 700 0.8125rem/1 var(--font-old);
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--oxblood);
}
.ticket-body { padding: 1.2rem 1.6rem 1.35rem; min-width: 0; }
.ticket-frame p { max-width: none; }
.ticket-frame { padding: 1rem 1.25rem 1.1rem; border: 1.5px solid var(--press); outline: 1px solid var(--press); outline-offset: 3px; font-family: var(--font-old); }
.ticket-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin: 0;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.ticket-drive { color: var(--oxblood); }
.ticket-ornament { display: flex; align-items: center; gap: 0.6rem; margin: 0.55rem 0 0; color: var(--rule); font-size: 0.875rem; }
.ticket-ornament::before, .ticket-ornament::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.ticket-name { margin: 0.4rem 0 0; text-align: center; font: 700 2.1rem/1.08 var(--font-old); letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; }
.ticket-sub { margin: 0.4rem 0 0; text-align: center; font-style: italic; font-size: 1.0625rem; }
.ticket-scene { display: block; width: 100%; height: auto; margin: 0.8rem 0 0.2rem; color: var(--press); }
.ticket-scene .milepost path { stroke: var(--press); stroke-width: 2; }
.ticket-scene .milepost rect { fill: var(--ticket); stroke: var(--press); stroke-width: 1.2; }
.ticket-scene .milepost text { font: 700 11px var(--font-old); fill: var(--press); text-anchor: middle; }
.ticket-scene .milepost.picked rect { fill: var(--oxblood); stroke: var(--oxblood); }
.ticket-scene .milepost.picked text { fill: var(--ticket); }
.ticket-scene .smoke circle { animation: smoke 2.6s ease-out 0.4s both; transform-box: fill-box; transform-origin: center; }
.ticket-scene .smoke circle:nth-child(2) { animation-delay: 0.7s; }
.ticket-scene .smoke circle:nth-child(3) { animation-delay: 1s; }
@keyframes smoke { from { opacity: 0; transform: translate(-6px, 10px) scale(0.4); } }
.timetable { width: 100%; margin-top: 0.4rem; border-collapse: collapse; font-size: 1rem; }
.timetable th { padding: 0.3rem 0.4rem; border-bottom: 1.5px solid var(--press); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.2em; text-align: left; text-transform: uppercase; }
.timetable td { padding: 0.35rem 0.4rem; border-bottom: 1px dotted var(--rule); }
.timetable th:not(:first-child), .timetable td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.timetable td:not(:first-child) { white-space: nowrap; }
.timetable tr.picked td { background: rgba(123, 45, 30, 0.08); }
.timetable em { color: var(--oxblood); }
.ticket-notes { margin: 0.8rem 0 0; text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.ticket-shared { margin: 0.35rem 0 0; text-align: center; font-style: italic; color: var(--oxblood); }
.ticket-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; margin: 0.8rem 0 0; font: 0.9375rem var(--font-body); }
.ticket a, .ticket .link-button { color: var(--oxblood); }
.ticket-other { margin: 0.6rem 0 0; text-align: center; font-style: italic; }
.ticket-other .link-button { font-style: normal; font-weight: 700; }
@media (max-width: 40rem) {
  .ticket { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .ticket::before, .ticket::after { left: calc(2.6rem - 0.75rem); }
  .ticket-stub .seal { width: 1.9rem; height: 1.9rem; }
  .ticket-body { padding: 0.9rem 0.7rem 1rem; }
  .ticket-frame { padding: 0.8rem 0.7rem 0.9rem; }
  .ticket-name { font-size: 1.55rem; }
  .timetable { font-size: 0.875rem; table-layout: fixed; }
  .timetable th { letter-spacing: 0.08em; vertical-align: bottom; }
  .timetable th:first-child { width: 46%; }
  .ticket-top { letter-spacing: 0.14em; }
  .timetable th, .timetable td { padding-inline: 0.25rem; overflow-wrap: anywhere; }
  .timetable th:nth-child(2), .timetable td:nth-child(2) { display: none; }
  .timetable th:last-child, .timetable td:last-child { white-space: normal; }
  .timetable em { display: block; font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-b-chit, .ticket-scene .smoke circle { animation: none; }
}

/* In memory of the Old Man of the Mountain */
.tribute { display: flex; align-items: center; gap: 0.9rem; margin: 3rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(31, 43, 36, 0.25); color: var(--ink); }
.tribute-seal .seal { display: block; width: 7rem; height: 7rem; }
.tribute p { margin: 0; max-width: 34rem; font: italic 1rem/1.45 var(--font-old); }

/* ---------- take it on the trail: the first-aid guide and the saved hikes page */
.first-aid { margin: 1rem 0 0; }
.first-aid h3 { margin: 0 0 0.3rem; font: 600 1.35rem/1.2 var(--font-sign); }
.first-aid-note { margin: 0 0 0.6rem; font-size: 0.875rem; color: var(--ink-soft); max-width: 44rem; }
.first-aid details { margin: 0 0 0.45rem; border-radius: 6px; background: rgba(255, 255, 255, 0.5); }
.first-aid summary {
  position: relative; padding: 0.6rem 2.4rem 0.6rem 0.9rem; cursor: pointer; list-style: none;
  font: 600 1.05rem/1.25 var(--font-sign); letter-spacing: 0.02em;
}
.first-aid summary::-webkit-details-marker { display: none; }
.first-aid summary::after {
  content: ""; position: absolute; right: 1rem; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.3rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.first-aid details[open] summary::after { margin-top: -0.05rem; transform: rotate(-135deg); }
.first-aid summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
/* the international first-aid sign, a white cross on green, beside the heading */
.first-aid-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.3rem; }
.first-aid-head h3 { margin: 0; }
.first-aid-badge { flex: none; width: 2rem; height: 2rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.first-aid-badge rect { fill: #0a8a4a; }
.first-aid-badge path { fill: #ffffff; }
.aid-sub { display: block; font: 400 0.875rem/1.3 var(--font-body); letter-spacing: 0; color: var(--ink-soft); }
.aid-urgent summary { color: var(--serious); }
.aid-body { padding: 0 0.9rem 0.8rem; }
.aid-body h4 { margin: 0.5rem 0 0.25rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.aid-body ul, .aid-body ol { margin: 0 0 0.4rem; padding-left: 1.3rem; }
.aid-body li { margin-bottom: 0.3rem; max-width: 64ch; }
.aid-body ol li::marker { font-weight: 600; color: var(--favorable); }
/* when to call for help: set apart in the rescue red */
.aid-911 { margin: 0.6rem 0 0; padding: 0.55rem 0.75rem; border-radius: 8px; background: var(--serious-bg); border-left: 3px solid var(--serious); max-width: 64ch; }
.aid-911 strong { color: var(--serious); }
.first-aid-sources { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); max-width: 70ch; }

.save-plan { background: var(--panel); color: var(--sign); box-shadow: inset 0 0 0 1.5px var(--sign); }
.trail-title { margin: 0.4rem 0 0.8rem; font: 600 2rem/1.1 var(--font-sign); }
.trail-offline { margin: 0 0 0.8rem; padding: 0.5rem 0.8rem; border-radius: 8px; background: var(--sign); color: var(--sign-text); font-weight: 600; }
.trail-offline[hidden] { display: none; }
.saved-empty { max-width: 40rem; }
.saved-hike { margin: 0 0 1.25rem; padding: 1rem 1.2rem 1.1rem; border-radius: 6px; background: var(--panel); box-shadow: var(--shadow-soft); }
.saved-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.saved-head h2 { margin: 0; font: 600 1.6rem/1.1 var(--font-sign); }
.saved-when { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.saved-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.6rem 1rem; margin: 0.9rem 0 0.4rem; }
.saved-times dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.saved-times dd { margin: 0; font: 600 1.6rem/1.1 var(--font-sign); }
.saved-call { margin: 0.4rem 0; padding: 0.45rem 0.7rem; border-radius: 8px; background: var(--serious-bg); color: var(--error-text); font-weight: 600; }
.saved-plan { margin: 0.4rem 0; color: var(--ink-soft); }
.saved-reasons { margin: 0.3rem 0 0.6rem; padding-left: 1.2rem; }
.saved-hike h3 { margin: 0.9rem 0 0.4rem; font: 600 1.2rem/1.2 var(--font-sign); }
.saved-sections { margin: 0; padding-left: 1.4rem; }
.saved-sections li { padding: 0.45rem 0; border-bottom: 1px dashed var(--line); }
.saved-sections p { margin: 0.15rem 0 0; font-size: 0.9375rem; }
.saved-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.saved-section-head .badge { font-size: 0.75rem; padding: 0.08rem 0.5rem; }
.saved-note { color: var(--ink-soft); }
.saved-water, .saved-planb { margin: 0.7rem 0 0; }
.saved-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.9rem 0 0; }
.trail-page .emergency { margin-top: 2rem; }