@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@500;600;700&family=Albert+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Chivo+Mono:wght@500;600&display=swap');

:root {
  --ink: #1c261f;
  --ink-soft: #384a3d;
  --bg: #dceadf;
  --bg-deep: #cadfd0;
  --paper: #f6faf6;
  --fern: #2f8f4e;
  --fern-deep: #22683a;
  --stone: #8b8f86;
  --stone-deep: #666b60;
  --white: #ffffff;
  --font-display: "Antonio", "Arial Narrow", sans-serif;
  --font-body: "Albert Sans", "Segoe UI", sans-serif;
  --font-data: "Chivo Mono", ui-monospace, monospace;
  --content-max: 78rem;
  --reading-max: 42rem;
  --step-0: clamp(.85rem, .8rem + .2vw, .95rem);
  --step-1: clamp(1.02rem, .96rem + .25vw, 1.15rem);
  --step-2: clamp(1.3rem, 1.1rem + .8vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.8vw, 2.8rem);
  --step-4: clamp(2.5rem, 1.7rem + 3.6vw, 5rem);
  --space-xs: clamp(.5rem, .42rem + .35vw, .8rem);
  --space-s: clamp(.95rem, .78rem + .85vw, 1.5rem);
  --space-m: clamp(1.6rem, 1.2rem + 1.9vw, 2.7rem);
  --space-l: clamp(2.8rem, 2rem + 3.8vw, 5.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: var(--fern-deep); }
a:hover { color: var(--fern); }
:focus-visible { outline: .18rem solid var(--fern); outline-offset: .2rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { margin: 0; font-size: var(--step-4); }
h2 { margin: 0 0 .8rem; font-size: var(--step-3); }
h3 { margin: 0 0 .5rem; font-size: var(--step-2); text-transform: none; font-weight: 700; }
p { max-width: 66ch; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .8rem 1.1rem; background: var(--fern); color: var(--white); }
.skip-link:focus { left: 1rem; top: 1rem; }
.shell { width: min(calc(100% - 2rem), var(--content-max)); margin-inline: auto; }
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; background: var(--ink); color: var(--bg); font-family: var(--font-data); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }

/* ===== Header ===== */
.trailhead { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: .2rem solid var(--ink); }
.trailhead-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; min-height: 4.2rem; padding-block: .6rem; }
.wordmark { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .01em; text-transform: uppercase; }
.wordmark svg { flex-shrink: 0; }
.wordmark span { display: block; font-family: var(--font-data); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--stone-deep); }
.tramp-nav { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: thin; }
.tramp-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .7rem; color: var(--ink-soft); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; border-bottom: .18rem solid transparent; }
.tramp-nav a:hover, .tramp-nav a[aria-current="page"] { color: var(--fern-deep); border-color: var(--fern); }

/* ===== Hero: .lookout — interactive Great-Walk switcher IS the hero ===== */
.lookout { background: var(--ink); color: var(--paper); border-bottom: .25rem solid var(--fern); }
.lookout-inner { display: grid; gap: var(--space-m); padding-block: var(--space-m) var(--space-l); }
.lookout-intro { max-width: var(--reading-max); }
.lookout-intro .badge { background: var(--fern); color: var(--ink); margin-bottom: .9rem; }
.lookout-intro h1 { color: var(--paper); font-size: var(--step-4); }
.lookout-intro p { color: rgba(246,250,246,.82); font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); margin-top: .9rem; }
.lookout-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-s); padding: 0; list-style: none; }
.lookout-picker button { min-height: 44px; padding: .55rem .9rem; background: transparent; border: .14rem solid rgba(246,250,246,.4); color: var(--paper); font-family: var(--font-body); font-weight: 600; font-size: .88rem; cursor: pointer; }
.lookout-picker button:hover { border-color: var(--fern); }
.lookout-picker button[aria-pressed="true"] { background: var(--fern); border-color: var(--fern); color: var(--ink); }
.lookout-panel { display: grid; gap: 0; background: var(--paper); color: var(--ink); border: .16rem solid var(--fern); }
.lookout-photo { position: relative; min-height: 16rem; background: var(--stone); }
.lookout-photo img { width: 100%; height: 100%; object-fit: cover; }
.lookout-facts { padding: var(--space-s); display: grid; gap: .9rem; }
.lookout-facts h3 { margin: 0; }
.lookout-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .1rem; border: .12rem solid var(--ink); background: var(--ink); }
.lookout-stats div { padding: .6rem .5rem; background: var(--paper); }
.lookout-stats dt { font-family: var(--font-data); font-size: .62rem; text-transform: uppercase; color: var(--stone-deep); }
.lookout-stats dd { margin: .15rem 0 0; font-family: var(--font-display); font-size: 1.15rem; }
.lookout-cta { display: inline-flex; align-self: start; min-height: 44px; align-items: center; padding: .6rem 1rem; background: var(--fern-deep); color: var(--white); text-decoration: none; font-weight: 700; }
.lookout-cta:hover { background: var(--fern); color: var(--ink); }

/* ===== Layer-3 content architecture: .directory — persistent filter rail + scrollable result list (NOT alternating full-width bands) ===== */
.directory { padding-block: var(--space-l); }
.directory-head { max-width: var(--reading-max); margin-bottom: var(--space-m); }
.directory-grid { display: grid; gap: var(--space-m); align-items: start; }
.directory-filters { position: static; background: var(--paper); border: .14rem solid var(--ink); padding: var(--space-s); display: grid; gap: var(--space-s); }
.filter-group { display: grid; gap: .4rem; }
.filter-group legend { font-family: var(--font-data); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--stone-deep); padding: 0; margin-bottom: .3rem; }
.filter-group label { display: flex; align-items: center; gap: .5rem; min-height: 32px; font-size: .92rem; }
.directory-list { display: grid; gap: 0; border-top: .14rem solid var(--ink); }
.walk-row { display: grid; gap: .3rem .9rem; padding: var(--space-s) 0; border-bottom: .12rem solid var(--bg-deep); text-decoration: none; color: inherit; }
.walk-row:hover { background: var(--paper); }
.walk-row-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; }
.walk-row h3 { margin: 0; }
.walk-row .walk-meta { font-family: var(--font-data); font-size: .78rem; color: var(--stone-deep); white-space: nowrap; }
.walk-row p { margin: 0; color: var(--ink-soft); }
.walk-row .walk-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.walk-row .walk-tags span { padding: .15rem .5rem; background: var(--bg-deep); font-family: var(--font-data); font-size: .66rem; text-transform: uppercase; }
[hidden] { display: none !important; }

/* ===== Card grid used on inner pages: .markerpost (named for DOC's orange trail marker posts) ===== */
.markerpost-grid { display: grid; gap: var(--space-s); }
.markerpost { position: relative; padding: var(--space-s); background: var(--paper); border: .14rem solid var(--ink); border-left-width: .45rem; border-left-color: var(--fern); }
.markerpost h3 { margin-bottom: .4rem; }
.markerpost .walk-meta { font-family: var(--font-data); font-size: .7rem; color: var(--stone-deep); }

/* ===== Signature tool: .bookingclock — Great Walks booking-window countdown ===== */
.bookingclock { background: var(--ink); color: var(--paper); padding-block: var(--space-l); }
.bookingclock-grid { display: grid; gap: var(--space-m); }
.bookingclock h2 { color: var(--paper); }
.bookingclock-controls { display: grid; gap: 1rem; padding: var(--space-s); border: .15rem solid var(--fern); }
.bookingclock-controls label { font-weight: 600; }
.bookingclock-controls select { width: 100%; min-height: 48px; margin-top: .35rem; padding: .6rem; color: var(--ink); background: var(--paper); border: .13rem solid var(--stone); font: inherit; }
.bookingclock-result { padding: var(--space-s); background: var(--paper); color: var(--ink); border: .2rem solid var(--fern); }
.bookingclock-result[data-risk="high"] { border-color: var(--fern); }
.bookingclock-result .risk-label { font-family: var(--font-data); font-weight: 600; text-transform: uppercase; font-size: .78rem; }
.bookingclock-result p { margin-bottom: 0; }

.prose-section { padding-block: var(--space-l); }
.prose-section .shell { display: grid; gap: var(--space-m); }
.prose-body > :first-child { margin-top: 0; }
.fact-strip { display: grid; gap: .1rem; margin: 1.4rem 0; background: var(--ink); border: .12rem solid var(--ink); }
.fact-strip div { padding: .7rem .9rem; background: var(--paper); }
.fact-strip dt { font-family: var(--font-data); font-size: .68rem; text-transform: uppercase; color: var(--stone-deep); }
.fact-strip dd { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.2rem; }
.page-lead { padding-block: clamp(2.5rem, 7vw, 5.5rem); background: var(--paper); border-bottom: .18rem solid var(--ink); }
.page-lead .badge { margin-bottom: .8rem; }
.page-lead p { font-size: 1.1rem; }
.callout { padding: 1rem 1.2rem; background: var(--bg-deep); border-left: .4rem solid var(--fern-deep); }
.trail-figure { margin: 0; border: .14rem solid var(--ink); }
.trail-figure img { width: 100%; }
.trail-figure figcaption { padding: .55rem .8rem; background: var(--ink); color: var(--bg); font-family: var(--font-data); font-size: .7rem; }

/* ===== Footer: .basecamp ===== */
.basecamp { background: var(--ink); color: var(--bg); border-top: .25rem solid var(--fern); }
.basecamp .shell { display: grid; gap: var(--space-m); padding-block: var(--space-m) var(--space-l); }
.basecamp a { color: var(--paper); }
.basecamp nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.basecamp small { display: block; margin-top: 1rem; max-width: 70ch; color: rgba(220,234,223,.6); }

@media (min-width: 40rem) {
  .lookout-panel { grid-template-columns: minmax(0,1fr) minmax(20rem,.9fr); }
  .lookout-photo { min-height: auto; }
  .lookout-stats { grid-template-columns: repeat(3, 1fr); }
  .markerpost-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fact-strip { grid-template-columns: repeat(3, 1fr); }
  .basecamp .shell { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60rem) {
  .directory-grid { grid-template-columns: 16rem minmax(0,1fr); }
  .directory-filters { position: sticky; top: 5rem; }
  .lookout-inner { grid-template-columns: 1fr; }
  .markerpost-grid.three-up { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bookingclock-grid { grid-template-columns: .9fr 1.1fr; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}