/* Summit and Spur: park-poster data product style sheet
   Redesign Oct 16, 2026, from the travel design brief.
   Palette: bone #F6F0E2, pine ink #152219, rust #BC4B26,
   ochre #D9A441, sage #7D8F69.
   Type: Barlow Condensed (poster caps display), Source Sans 3 (body),
   IBM Plex Mono (every number that matters). */

:root {
  --bone: #F6F0E2;
  --paper: #FCF8ED;
  --ink: #152219;
  --ink-deep: #0D1710;
  --rust: #BC4B26;
  --ochre: #D9A441;
  --sage: #7D8F69;
  --sage-pale: #DDE3D2;
  --line: #D9CEAC;
  --line-pale: #E4DABC;
  --muted: #5D6A5C;
  /* legacy aliases so older inline styles resolve to the new palette */
  --pine: #152219;
  --pine-dark: #0D1710;
  --brass: #BC4B26;
  --brass-soft: #D9A441;
  --sand: #EFE6CC;
  --sand-line: #D9CEAC;
  --cream: #F6F0E2;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: 0.015em;
  margin: 0 0 0.45em 0;
  font-weight: 600;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-top: 0; }
h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.35em 0;
}
h3.block { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.12rem; font-weight: 700; margin-top: 1.1em; margin-bottom: 0.25em; }

p { margin: 0 0 1em 0; }
a { color: var(--ink); text-decoration-color: var(--rust); text-underline-offset: 3px; }
a:hover { color: var(--rust); }

.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--rust);
  margin: 0 0 0.7em 0;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--rust);
  margin-right: 10px;
  vertical-align: 1px;
}

.mono { font-family: var(--font-mono); }
.small { font-size: 0.9rem; color: var(--muted); }
.fineprint { font-size: 0.88rem; color: var(--muted); }
.caption { font-size: 0.88rem; color: var(--muted); margin: 8px 0 0 0; font-family: var(--font-mono); letter-spacing: 0.01em; }

/* Header */
header.site {
  background: var(--ink);
  color: var(--bone);
  border-bottom: 3px solid var(--rust);
}
header.site .wrap { padding-top: 18px; padding-bottom: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 34px; }
.brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--bone);
  text-decoration: none;
}
.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-top: 5px;
}
nav.main { margin-left: auto; padding-bottom: 3px; }
nav.main a {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bone);
  text-decoration: none;
  font-size: 0.8rem;
  margin-left: 24px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
nav.main a:first-child { margin-left: 0; }
nav.main a:hover { border-bottom-color: var(--ochre); color: #fff; }

/* Layout */
main .wrap { padding-top: 40px; padding-bottom: 34px; }
section { margin-bottom: 40px; }
section:last-child { margin-bottom: 8px; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px 26px;
  margin-bottom: 18px;
}
.card p:last-child { margin-bottom: 0; }

.price {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--rust);
  font-weight: 600;
}

.stamp {
  display: inline-block;
  border: 2px solid var(--rust);
  color: var(--ink);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 2px;
  transform: rotate(-1.2deg);
  background: rgba(188, 75, 38, 0.05);
  margin-bottom: 14px;
}

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
  padding: 12px 22px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 0.85rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  margin: 4px 8px 4px 0;
  cursor: pointer;
}
.btn:hover { background: var(--rust); border-color: var(--rust); color: #fff; }
.btn.alt {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rust);
}
.btn.alt:hover { background: rgba(188, 75, 38, 0.1); color: var(--rust); }

ul.ledger { list-style: none; padding: 0; margin: 0 0 1em 0; }
ul.ledger li { padding: 10px 2px; border-bottom: 1px dotted var(--line); }
ul.ledger li:last-child { border-bottom: none; }

table { border-collapse: collapse; width: 100%; margin: 0 0 1em 0; background: var(--paper); }
th, td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
th {
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.example {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--ochre);
  padding: 20px 24px;
  margin: 0 0 18px 0;
}
.example p:last-child { margin-bottom: 0; }

/* ---------- Hero, editorial plate system (Nov 10, 2026) ----------
   The photograph runs clean and full bleed; the title lives in a paper
   plate that overlaps the photograph's lower edge, the way a magazine
   cover block sits on its image. Nothing is set over the photograph, so
   no scrim is needed: the previous murk gradient drowned the bottom two
   thirds of every hero photo in dark wash, and at desktop widths the
   absolute-positioned title block could grow taller than the photo and
   clip its own top line at the photo's edge (verified in renders of the
   Glacier and Zion heroes). The plate carries the type system instead:
   rust kicker, ink display caps set larger and tighter, a sentence-case
   standfirst, and the photo caption below in the mono small print the
   playbook reserves for credits. */
.hero-bleed { background: var(--bone); }
.hero-photo { position: relative; height: min(62vh, 560px); min-height: 380px; overflow: hidden; background: var(--ink-deep); }
.hero-photo.short { height: min(56vh, 500px); min-height: 300px; }
.hero-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
}
.hero-photo img.shift-r { object-position: 68% 50%; }
/* A whisper of shade at the foot of the photograph only, so the plate's
   overlap reads as depth rather than collision. Not a text surface. */
.hero-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(to bottom, rgba(13, 23, 16, 0), rgba(13, 23, 16, 0.16));
  pointer-events: none;
}
.hero-title { position: relative; z-index: 3; max-width: 1168px; margin: -76px auto 0; padding: 0 24px; }
.hero-title .inner {
  max-width: 920px; margin: 0 auto 0 0;
  background: var(--paper);
  border-top: 4px solid var(--rust);
  box-shadow: 0 24px 48px rgba(13, 23, 16, 0.22), 0 2px 6px rgba(13, 23, 16, 0.10);
  padding: 30px 38px 26px;
}
.hero-title .kicker { color: var(--rust); margin-bottom: 0.7em; }
.hero-title .kicker::before { background: var(--rust); }
.hero-title h1 {
  color: var(--ink);
  font-size: clamp(2.75rem, 5.8vw, 4.35rem);
  line-height: 0.97; letter-spacing: 0.005em;
  max-width: 19ch; margin-bottom: 0.24em;
}
.hero-title .tagline {
  font-family: var(--font-body);
  font-size: 1.12rem; line-height: 1.55; letter-spacing: 0.01em;
  color: #2E3B2E; max-width: 56ch; margin: 0;
}
.hero-caption { max-width: 1120px; margin: 0 auto; padding: 12px 24px 0 24px; }
.hero-caption .caption { margin: 0; }
@media (max-width: 760px) {
  .hero-photo { height: 46vh; min-height: 300px; }
  .hero-photo.short { height: 40vh; min-height: 260px; }
  .hero-title { margin-top: -46px; padding: 0 16px; }
  .hero-title .inner { max-width: none; }
  .hero-title .inner { padding: 22px 20px 20px; }
  .hero-title h1 { font-size: clamp(1.95rem, 10vw, 2.75rem); }
  .hero-caption { padding: 10px 16px 0 16px; }
}

/* ---------- Live cost strip (homepage hero dock) ---------- */
.cost-strip { background: var(--ink); color: var(--bone); border-top: 3px solid var(--rust); }
.cost-strip .inner { max-width: 1120px; margin: 0 auto; padding: 18px 24px 20px 24px; }
.cost-strip .cs-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--ochre);
  margin: 0 0 12px 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
}
.cost-strip .cs-label .cs-q { color: var(--bone); letter-spacing: 0.04em; font-size: 0.85rem; }
.cs-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }
.cs-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-group .cs-cap {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--sage); width: 100%; margin-bottom: 2px;
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--bone);
  background: transparent;
  border: 1px solid #4A5A4E;
  border-radius: 2px;
  padding: 6px 10px;
  cursor: pointer;
}
.chip:hover { border-color: var(--ochre); }
.chip[aria-pressed="true"] { background: var(--rust); border-color: var(--rust); color: #fff; }
.seg { display: inline-flex; border: 1px solid #4A5A4E; border-radius: 2px; overflow: hidden; }
.seg button {
  font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: transparent; color: var(--bone); border: none; padding: 7px 12px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ochre); color: var(--ink); }
.cs-people { display: none; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.8rem; }
.cs-people.show { display: inline-flex; }
.cs-people input {
  width: 58px; font-family: var(--font-mono); font-size: 0.9rem;
  padding: 5px 7px; border: 1px solid #4A5A4E; border-radius: 2px;
  background: var(--ink-deep); color: var(--bone);
}
.cs-out { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; }
.cs-readout {
  font-family: var(--font-mono);
  font-size: clamp(1.02rem, 2.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bone);
  margin: 0;
}
.cs-readout .win { color: var(--ochre); }
.cs-full {
  font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ochre); text-decoration: none; border-bottom: 1px solid var(--ochre); padding-bottom: 2px;
}
.cs-full:hover { color: var(--bone); border-bottom-color: var(--bone); }
.cs-note { font-size: 0.82rem; color: #A9B4A4; margin: 8px 0 0 0; }

/* ---------- Intent router ---------- */
.router { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.router .inner {
  max-width: 1120px; margin: 0 auto; padding: 6px 24px;
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.router a.route {
  display: flex; gap: 16px; align-items: baseline;
  padding: 15px 2px; text-decoration: none;
  border-bottom: 1px dotted var(--line);
}
.router a.route:last-child { border-bottom: none; }
.router .rnum { font-family: var(--font-mono); color: var(--rust); font-weight: 600; font-size: 0.9rem; }
.router .rtext { font-size: 1.05rem; color: var(--ink); }
.router .rtext strong { font-weight: 700; }
.router .rarrow { margin-left: auto; font-family: var(--font-mono); color: var(--rust); }
@media (min-width: 820px) {
  .router .inner { grid-template-columns: 1fr 1fr 1fr; }
  .router a.route { border-bottom: none; border-right: 1px dotted var(--line); padding: 16px 18px; }
  .router a.route:first-child { padding-left: 2px; }
  .router a.route:last-child { border-right: none; }
}

/* ---------- Route Ribbon ---------- */
.ribbon-wrap { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.ribbon { display: flex; min-width: min-content; list-style: none; margin: 0; padding: 0; }
.ribbon li {
  flex: 1 0 188px;
  position: relative;
  border-top: 2px solid var(--ink);
  padding: 20px 16px 4px 0;
  margin-right: 18px;
}
.ribbon li:last-child { margin-right: 0; }
.ribbon li::before {
  content: "";
  position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rust);
}
.ribbon .r-day {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; color: var(--rust); font-weight: 600; margin: 0 0 4px 0;
}
.ribbon .r-name {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  font-size: 1.3rem; line-height: 1.12; color: var(--ink); margin: 0 0 5px 0;
}
.ribbon .r-detail { font-size: 0.92rem; color: var(--ink); margin: 0 0 6px 0; line-height: 1.45; }
.ribbon .r-base { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; }
.ribbon .r-base strong { color: var(--ink); font-weight: 600; }

/* ---------- Park Index Cards ---------- */
.park-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .park-grid { grid-template-columns: 1fr 1fr; } }
.park-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.park-card .pc-photo { aspect-ratio: 16 / 9; overflow: hidden; }
.park-card .pc-photo picture { display: block; height: 100%; }
.park-card .pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.park-card .pc-body { padding: 18px 20px 16px 20px; display: flex; flex-direction: column; flex: 1; }
.park-card h3 { font-size: 1.65rem; }
.park-card h3 a { text-decoration: none; color: var(--ink); }
.park-card h3 a:hover { color: var(--rust); }
.park-card .pc-excerpt { font-size: 0.98rem; margin-bottom: 14px; }
.park-card .pc-read { margin-top: auto; }
.pc-spine {
  border-top: 1px dashed var(--line);
  padding-top: 10px; margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink);
  display: flex; flex-wrap: wrap; gap: 3px 14px;
}
.pc-spine .dim { color: var(--muted); }

/* ---------- Season Band ---------- */
.season-band { margin: 14px 0 6px 0; }
.sb-cells { display: flex; gap: 3px; }
.sb-cell {
  flex: 1 1 0; min-width: 0;
  text-align: center;
  padding: 5px 0 4px 0;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em; border-radius: 1px;
}
.sb-cell.p { background: var(--rust); color: #FFF6EA; }
.sb-cell.o { background: var(--sage); color: #F2F5EA; }
.sb-cell.l { background: var(--line-pale); color: var(--muted); }
.sb-legend {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.sb-legend .sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: 0; }
.sb-legend .sw.p { background: var(--rust); }
.sb-legend .sw.o { background: var(--sage); }
.sb-legend .sw.l { background: var(--line-pale); border: 1px solid var(--line); }
.sb-mini { display: flex; gap: 2px; margin-top: 10px; }
.sb-mini span { flex: 1 1 0; height: 8px; border-radius: 1px; }
.sb-mini span.p { background: var(--rust); }
.sb-mini span.o { background: var(--sage); }
.sb-mini span.l { background: var(--line-pale); }

/* ---------- Data spine strip (article pages) ---------- */
.spine-strip {
  background: var(--ink); color: var(--bone);
  font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.spine-strip .inner {
  max-width: 1120px; margin: 0 auto; padding: 11px 24px;
  display: flex; flex-wrap: wrap; gap: 4px 22px;
}
.spine-strip .dim { color: var(--sage); }
.spine-strip strong { color: var(--ochre); font-weight: 600; }

/* ---------- Article elements ---------- */
.day-photo { width: 100%; height: auto; display: block; border: 1px solid var(--line); margin: 0 0 6px 0; }
.route-line {
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--rust);
  padding: 14px 18px;
  margin: 0 0 16px 0;
}
.route-line .rl-cap {
  display: block;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--rust);
  margin-bottom: 4px;
}
.map-frame { width: 100%; height: 480px; border: 1px solid var(--line); display: block; margin-bottom: 12px; }

/* ---------- Planner shelf ---------- */
.shelf-row {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline;
  padding: 16px 2px; border-bottom: 1px dotted var(--line);
}
.shelf-row:last-child { border-bottom: none; }
.shelf-row .s-name {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  font-size: 1.4rem; letter-spacing: 0.02em; color: var(--ink); flex: 0 0 auto;
}
.shelf-row .s-hook { flex: 1 1 320px; font-size: 0.98rem; }
.shelf-row .s-get { font-family: var(--font-mono); font-size: 0.88rem; white-space: nowrap; }
.spec-line {
  font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 0 0 8px 0;
}
.spec-line strong { color: var(--rust); font-weight: 600; }

/* ---------- Kit band ---------- */
.band-full { background: var(--ink); border-top: 3px solid var(--rust); border-bottom: 3px solid var(--rust); }
.band-full .wrap { padding-top: 34px; padding-bottom: 36px; }
.band-full h3 { color: var(--bone); font-size: 1.9rem; }
.band-full p { color: #CBD4C6; }
.band-full .kit-form input[type="email"] { background: var(--paper); border-color: var(--paper); }

/* Kit signup forms: plain HTML forms posting to Kit. */
.kit-form .email-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-form input[type="email"] {
  flex: 1 1 240px;
  font-family: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 2px;
}
.kit-form button { min-height: 44px; cursor: pointer; }

/* ---------- Park pass tool ---------- */
.tool {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 26px;
  margin-bottom: 18px;
}
fieldset { border: none; padding: 0; margin: 0 0 22px 0; }
legend {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.3rem;
  padding: 0;
  margin-bottom: 8px;
}
.choice { display: block; padding: 6px 0; cursor: pointer; }
.choice input { margin-right: 8px; accent-color: var(--rust); }
.note { font-size: 0.9rem; color: var(--muted); margin-top: 6px; }
.people-row { margin-bottom: 20px; }
.people-row label { font-weight: 700; color: var(--ink); display: block; margin-bottom: 6px; }
input[type="number"], input[type="text"], input[type="email"] {
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 2px;
}
input[type="number"] { width: 84px; font-family: var(--font-mono); }
.park-list { list-style: none; padding: 0; margin: 0; }
.park-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 11px 2px;
  border-bottom: 1px dotted var(--line);
}
.park-list li:last-child { border-bottom: none; }
.park-pick { flex: 1 1 260px; cursor: pointer; font-weight: 600; }
.park-pick input { margin-right: 8px; accent-color: var(--rust); }
.park-fee { color: var(--muted); font-size: 0.88rem; font-family: var(--font-mono); }
.park-note { color: var(--rust); font-size: 0.85rem; font-family: var(--font-mono); }
.visits { font-size: 0.9rem; color: var(--muted); }
.visits input { width: 64px; margin-left: 6px; }
.custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.custom-row input[type="text"] { flex: 1 1 180px; }
.linkish {
  background: none;
  border: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--rust);
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}

/* Entrance Receipt: the verdict block reads as an entrance-station receipt.
   Itemized ledger on top, perforated verdict card below it. */
#result {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 22px 24px 8px 24px;
  position: relative;
}
#result::before {
  content: "SUMMIT AND SPUR · ENTRANCE RECEIPT · FEES CHECKED OCT 16, 2026";
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
#result ul.ledger { font-family: var(--font-mono); font-size: 0.95rem; }
#result ul.ledger li { padding: 8px 0; }
#result ul.ledger li span.amt { float: right; font-weight: 600; color: var(--ink); }
#result ul.ledger li.total {
  border-top: 2px solid var(--ink);
  border-bottom: none;
  font-weight: 600;
  margin-top: 4px;
  padding-top: 12px;
}
#result .small { font-family: var(--font-mono); font-size: 0.84rem; }
.verdict {
  border: none;
  border-top: 2px dashed var(--line);
  background-image: radial-gradient(circle at 7px 0, var(--bone) 5px, transparent 5.6px);
  background-size: 18px 8px;
  background-repeat: repeat-x;
  background-position: top center;
  padding: 24px 4px 14px 4px;
  margin: 6px 0 12px 0;
}
.verdict h3 {
  font-size: 2rem;
  color: var(--rust);
  margin-bottom: 0.25em;
}
.verdict p:last-child { margin-bottom: 0; }

/* Footer */
footer.site {
  background: var(--ink-deep);
  color: var(--bone);
  border-top: 3px solid var(--rust);
  margin-top: 44px;
}
footer.site .wrap { padding-top: 28px; padding-bottom: 32px; }
footer.site .fbrand {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.04em; font-size: 1.35rem;
}
footer.site a { color: var(--ochre); }
footer.site p { margin-bottom: 0.5em; }
footer.site .small { color: #A9B4A4; }

/* Mobile tap targets: taller touch area for content and footer links. */
@media (max-width: 760px) {
  main a, footer.site a {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  nav.main a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
  .tool { padding: 20px 16px; }
  #result { padding: 18px 16px 4px 16px; }
}

/* ---------- Front door hero + sub-niche doors (homepage restructure, Oct 17, 2026) ----------
   Added for the generic brand front door: a poster band with no single
   park's content, and a one-column door grid reusing the park card
   treatment. Additive only; no existing rule changed. */
.front-hero { background: var(--ink-deep); color: var(--bone); border-bottom: 3px solid var(--rust); }
.front-hero .wrap { padding-top: 52px; padding-bottom: 46px; }
.front-hero .kicker { color: var(--ochre); }
.front-hero .kicker::before { background: var(--ochre); }
.front-hero h1 { color: var(--bone); max-width: 18ch; }
.front-hero .lede { font-size: 1.14rem; line-height: 1.6; color: #E9E3CF; max-width: 64ch; margin-bottom: 1.3em; }
.front-hero .btn { border-color: var(--bone); }
.front-hero .btn.alt { border-color: var(--rust); color: var(--bone); }
.front-hero .btn.alt:hover { background: rgba(188, 75, 38, 0.25); color: #fff; }
/* Homepage hero photo band: one panel per line of the publication, so the
   front door shows photography without leading with any single shelf. */
.front-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.fb-panel { position: relative; display: block; overflow: hidden; border: 1px solid #3C4A3E; }
.fb-panel picture { display: block; }
.fb-panel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fb-panel .fb-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 12px 9px 12px;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; font-weight: 600; color: var(--bone);
  /* Strengthened with the hero scrim pass (Nov 9, 2026): the label is
     one short line at the panel's foot, and its gradient now starts
     from a floor instead of transparency so the line never sits on a
     bright patch of photo. */
  background: linear-gradient(to bottom, rgba(13, 23, 16, 0.28), rgba(13, 23, 16, 0.68) 55%, rgba(13, 23, 16, 0.92));
}
.fb-panel:hover .fb-label { color: var(--ochre); }
@media (max-width: 760px) { .front-band { grid-template-columns: 1fr 1fr; } }
.door-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* ---------- Route ribbon scroll cue (Oct 21, 2026, page-audit A6) ----------
   Static discoverability cue for the day/layer ribbons: a right-edge
   fade plus a chip naming the next card. Both render only at widths
   where the ribbon actually overflows (below ~860px the 806px strip
   outgrows its container); on wide screens the whole ribbon fits and no
   cue shows. The fade means no label is ever hard-sliced mid-word at
   rest. Static only: the nudge motion is a separate, later tranche. */
.ribbon-shell { position: relative; }
.ribbon-cue { display: none; }
@media (max-width: 860px) {
  .ribbon-shell::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 64px;
    background: linear-gradient(to right, rgba(246, 240, 226, 0), var(--bone) 85%);
    pointer-events: none;
  }
  .ribbon-cue {
    display: block;
    position: absolute; right: 8px; bottom: 12px; z-index: 2;
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--bone); background: var(--ink);
    padding: 5px 9px; border-radius: 2px;
    pointer-events: none;
  }
}

/* ---------- Shelf link rows wrap on phones (Oct 21, 2026, page-audit 23/D11) ----------
   .s-get was white-space: nowrap, so a shelf row's three links ran past
   the right edge of a phone and the page clipped them mid-text (the
   Gumroad links were the clipped ones, on the home page's Japan and
   Disney rows and across the parks hub). Let the row wrap instead:
   the links land on their own lines, whole. */
@media (max-width: 760px) {
  .shelf-row .s-get { white-space: normal; }
}

/* Social icon row, footer (Nov 6, 2026) */
.social-row { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
.social-row a { display: inline-flex; align-items: center; line-height: 0; }
.social-row svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* ---------- Permit calendar, correction pages, cruise checker (Nov 9, 2026) ----------
   Added for the three affiliate-lane pages: the permit lottery calendar
   (parks/permit-lottery-calendar/), the Arches rule-change correction
   (parks/arches-timed-entry/), and the Alaska cruise port fit checker
   (alaska-cruise-ports/). Additive only; no existing rule changed.
   Tables read as ledger sheets, booking slots as stamped cards waiting
   for their partner link, verdict chips in the season-band palette. */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); margin-bottom: 10px; }
table.tbl { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--paper); font-size: 0.95rem; }
table.tbl th {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.72rem; font-weight: 600; color: var(--bone); background: var(--ink);
  text-align: left; padding: 10px 12px;
}
table.tbl td { padding: 10px 12px; border-top: 1px solid var(--line-pale); vertical-align: top; line-height: 1.45; }
table.tbl tr td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
table.tbl .num { font-family: var(--font-mono); font-size: 0.88rem; white-space: nowrap; }
.tbl-wrap { position: relative; }

/* ---------- Mobile table standard (Nov 9, 2026, Mike's phone review) ----------
   No table may outgrow the phone viewport. Two treatments, one rule:
   text-heavy tables (class "stack") restructure into labeled blocks,
   one row per card, with the column names carried on data-label;
   true grids stay grids inside .tbl-wrap, a contained momentum-scroll
   frame with a right-edge fade as the affordance that more columns
   exist. The 640px table floor and the first-column nowrap that
   forced the overflow are both lifted at phone widths. */
@media (max-width: 760px) {
  table.tbl { min-width: 0; }
  table.tbl tr td:first-child { white-space: normal; }
  .tbl-wrap { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tbl-wrap::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 0; width: 30px;
    background: linear-gradient(to right, rgba(252, 248, 237, 0), rgba(21, 34, 25, 0.13));
    pointer-events: none;
  }
  table.tbl.stack { border-top: 2px solid var(--line); }
  table.tbl.stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  /* The clipped thead still lays its cells out at natural width, and those
     boxes counted as page overflow (Nov 10, 2026, Angels Landing anchors
     table, last header cell at 474px on a 390px viewport). Cap the cells
     themselves so the header's layout stays inside the clip. */
  table.tbl.stack thead th { max-width: 1px; overflow: hidden; }
  table.tbl.stack tbody, table.tbl.stack tr, table.tbl.stack td { display: block; width: auto; }
  table.tbl.stack tr { padding: 10px 0 12px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
  table.tbl.stack td { border-top: none; padding: 3px 12px; }
  table.tbl.stack td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
    margin-bottom: 1px;
  }
  table.tbl.stack td:first-child { font-size: 1.04rem; padding-top: 2px; }
  table.tbl.stack td:first-child::before { display: none; }
  table.tbl.stack td.empty { display: none; }
}
.status {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 2px; white-space: nowrap;
}
.status.open { background: var(--sage); color: #F2F5EA; }
.status.soon { background: var(--ochre); color: var(--ink); }
.status.idle { background: var(--line-pale); color: var(--muted); }
.status.off { background: var(--rust); color: #FFF6EA; }
.slot {
  background: var(--paper); border: 1.5px dashed var(--rust); border-radius: 2px;
  padding: 18px 20px 14px 20px; margin: 0 0 16px 0;
}
.slot .slot-tag {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rust); margin: 0 0 6px 0;
}
.slot h3.block { margin-top: 0; }
.slot .slot-meta { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); margin-bottom: 6px; }
.slot .slot-note {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border-top: 1px dashed var(--line); padding-top: 10px; margin: 10px 0 2px 0;
}
.slot p:last-child { margin-bottom: 2px; }
.correction-band {
  background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--rust);
  border-radius: 2px; padding: 20px 22px 12px 22px; margin-bottom: 18px;
}
.correction-band .cb-big {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.7rem; font-weight: 600; line-height: 1.15; color: var(--ink); margin: 0 0 0.4em 0;
}
.fit-out { list-style: none; padding: 0; margin: 0; }
.fit-out li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 11px 2px; border-bottom: 1px dotted var(--line);
}
.fit-out li:last-child { border-bottom: none; }
.fit-out .f-name { flex: 1 1 240px; font-weight: 600; }
.fit-out .f-math { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); }
.fit-out .f-verdict { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.fit-out .f-verdict.ok { color: var(--sage); }
.fit-out .f-verdict.tight { color: #A6761D; }
.fit-out .f-verdict.no { color: var(--rust); }
.time-row { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: flex-end; margin-bottom: 6px; }
.time-row label { font-weight: 700; color: var(--ink); display: block; margin-bottom: 6px; font-size: 0.95rem; }
input[type="time"], select {
  font-family: var(--font-mono); font-size: 1rem; padding: 8px 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 2px;
}
/* Tool form width chain (Nov 10, 2026, Angels Landing planner overflow):
   a select sizes to its longest option, and fieldset plus flex items refuse
   to shrink below content by default, so one long option pushed the whole
   form past the phone viewport. Constrain every link of the chain: the
   fieldset and the flex field may shrink, and the control fills its field
   instead of sizing the page. */
fieldset { min-width: 0; }
.time-row .t-field { min-width: 0; max-width: 100%; }
.t-field select, .t-field input { width: 100%; max-width: 100%; box-sizing: border-box; }