/* ============================================================
   RoamFound · style.css
   Single stylesheet for every page. Tokens are locked.
   Drop-in replacement: hooks (#rf-search, .rf-search-dropdown,
   .rf-search-item, .factbox, .state-grid, .featured, .cards,
   .nav, .container, .breadcrumb) preserved.
   ============================================================ */

:root {
  /* LOCKED brand tokens */
  --pine: #1B4332;
  --pine-deep: #0F2D1F;
  --pine-soft: #2D5A40;
  --cream: #FAF7F2;
  --paper: #FFFFFF;
  --sunset: #D97706;
  --sunset-deep: #B45309;
  --ink: #1F2937;
  --slate: #6B7280;
  --slate-light: #9CA3AF;
  --line: #E5E0D6;
  --line-strong: #D4CDBE;
  --water: #2563EB;

  /* Regional accents — desaturated, atlas-feel.
     Used only as 2px tops/dots; never as primary surfaces. */
  --r-pnw:        #3D6B7C; /* Pacific Northwest */
  --r-mtnwest:    #8B5E3C; /* Mountain West */
  --r-southwest:  #B45309; /* Desert SW */
  --r-plains:     #B59556; /* Great Plains */
  --r-greatlakes: #4A6E8A; /* Great Lakes */
  --r-southeast:  #5C7A3D; /* Southeast / Appalachian */
  --r-northeast:  #4A5D7E; /* Northeast */
  --r-pacific:    #6B5B7E; /* Hawaii / Alaska */

  /* Type scale */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Shadows / motion */
  --shadow-card: 0 1px 0 rgba(15,45,31,0.04), 0 8px 24px -12px rgba(15,45,31,0.10);
  --shadow-pop:  0 18px 48px -20px rgba(15,45,31,0.32);
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--pine); text-decoration: underline; text-decoration-color: rgba(27,67,50,0.28); text-underline-offset: 3px; transition: color .15s var(--ease); }
a:hover { color: var(--pine-deep); text-decoration-color: var(--pine); }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   TOPOGRAPHY — reusable contour overlay.
   Closed-curve SVG, tile-able, ~3KB. Cream-on-pine 4% alpha.
   ============================================================ */
.topo-bg {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='340' viewBox='0 0 480 340' fill='none' stroke='%23FAF7F2' stroke-width='0.7' stroke-opacity='0.10'><path d='M-20 60 Q60 30 140 60 T300 60 T460 70'/><path d='M-20 96 Q70 70 160 96 T320 96 T500 92'/><path d='M-20 132 Q80 110 170 132 T330 130 T500 124'/><path d='M-20 170 Q90 150 180 170 T340 168 T500 160'/><path d='M-20 210 Q100 192 200 210 T360 208 T500 200'/><path d='M-20 252 Q110 232 220 252 T380 250 T500 244'/><path d='M-20 296 Q120 278 230 296 T390 296 T500 290'/><path d='M40 -10 Q90 40 60 90 T80 200 T40 340'/><path d='M180 -10 Q230 50 200 110 T220 240 T180 340'/><path d='M340 -10 Q390 60 360 130 T380 260 T340 340'/></svg>");
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(250,247,242,0.92);
}
.nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand {
  font-family: var(--serif);
  font-weight: 600; font-size: 22px;
  color: var(--pine);
  text-decoration: none;
  letter-spacing: -0.012em;
  display: inline-flex; align-items: center; gap: 10px;
}
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--sunset); }
.brand-icon { width: 30px; height: 30px; flex: 0 0 auto; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { color: var(--slate); font-size: 14px; text-decoration: none; letter-spacing: 0.01em; }
.nav-links a:hover { color: var(--pine); }

/* ============ NAV SEARCH (markup hooks preserved) ============ */
.nav-search { position: relative; flex: 1; max-width: 380px; }
#rf-search {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 14px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
#rf-search::-webkit-search-cancel-button { -webkit-appearance: none; }
#rf-search:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.14); }

.rf-search-dropdown {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  max-height: 460px; overflow-y: auto; z-index: 100;
}
.rf-search-heading {
  padding: 10px 14px 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--slate); background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.rf-search-heading:first-child { border-radius: 12px 12px 0 0; }
.rf-search-item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 10px 14px;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}
.rf-search-item:last-child { border-bottom: 0; }
.rf-search-item:hover, .rf-search-item.is-active { background: rgba(27, 67, 50, 0.05); text-decoration: none; }
.rf-search-name { font-weight: 500; color: var(--pine); font-size: 15px; }
.rf-search-meta { font-family: var(--mono); font-size: 12px; color: var(--slate); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.rf-search-empty { padding: 14px 18px; color: var(--slate); font-size: 14px; text-align: center; }

/* ============================================================
   HOMEPAGE HERO — panoramic pine with topo + horizon silhouette
   ============================================================ */
.hero-pano {
  position: relative;
  margin: 0 -24px;
  padding: 0;
  background: var(--pine);
  color: var(--cream);
  overflow: hidden;
  border-radius: 0;
}
.hero-pano-inner {
  position: relative; z-index: 3;
  padding: 88px 24px 168px;
  max-width: 1080px;
  margin: 0 auto;
}
.hero-pano .topo-layer {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='480' viewBox='0 0 720 480' fill='none' stroke='%23FAF7F2' stroke-width='0.8' stroke-opacity='0.09'><path d='M-40 80 Q90 40 220 80 T480 80 T740 90'/><path d='M-40 130 Q100 92 240 130 T500 130 T740 140'/><path d='M-40 184 Q110 144 260 184 T520 184 T740 192'/><path d='M-40 240 Q120 200 280 240 T540 240 T740 246'/><path d='M-40 300 Q130 260 300 300 T560 300 T740 304'/><path d='M-40 364 Q140 322 320 364 T580 364 T740 366'/><path d='M-40 432 Q150 390 340 432 T600 432 T740 432'/><path d='M60 -20 Q120 60 80 140 T100 320 T60 500'/><path d='M260 -20 Q320 70 280 160 T300 340 T260 500'/><path d='M460 -20 Q520 80 480 180 T500 360 T460 500'/><path d='M620 -20 Q680 90 640 200 T660 380 T620 500'/></svg>");
  background-size: 720px 480px;
  opacity: 0.95;
  pointer-events: none;
}
.hero-pano .sun {
  position: absolute; z-index: 2;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #F2B45C 0%, var(--sunset) 55%, var(--sunset-deep) 100%);
  top: 64px; right: 80px;
  box-shadow: 0 0 0 1px rgba(217,119,6,0.6), 0 0 80px rgba(217,119,6,0.35);
}
.hero-pano .horizon {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 220px; z-index: 2; pointer-events: none;
  display: block;
}
.hero-pano .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(250,247,242,0.78);
  margin-bottom: 28px;
}
.hero-pano .eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--sunset);
}
.hero-pano h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cream);
  max-width: 18ch;
  margin-bottom: 28px;
}
.hero-pano h1 em {
  font-style: italic;
  font-weight: 400;
  color: #EBD9B8;
}
.hero-pano p.lede {
  font-size: 19px; line-height: 1.55;
  color: rgba(250,247,242,0.86);
  max-width: 56ch;
}
.hero-pano .stat-strip {
  display: flex; flex-wrap: wrap; gap: 36px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(250,247,242,0.18);
  max-width: 760px;
}
.hero-pano .stat-strip .stat { display: flex; flex-direction: column; gap: 2px; }
.hero-pano .stat-strip .num {
  font-family: var(--mono);
  font-size: 22px; font-weight: 500;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.hero-pano .stat-strip .lbl {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250,247,242,0.62);
}

/* ============================================================
   STANDARD PAGE HEADERS (category, state, metro hubs)
   ============================================================ */
.page-head {
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.page-head .eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sunset);
  margin-bottom: 12px;
}
.page-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 500; line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--pine);
  margin-bottom: 12px;
  text-wrap: balance;
}
.subtitle {
  color: var(--slate);
  font-size: 18px;
  max-width: 60ch;
}

/* ============================================================
   SECTIONS / TYPE
   ============================================================ */
.section { padding: 40px 0 16px; }
.section h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  color: var(--pine);
  margin: 0 0 6px;
  letter-spacing: -0.018em;
}
.section .section-lede {
  color: var(--slate);
  font-size: 15px;
  max-width: 60ch;
  margin-bottom: 20px;
}
.section h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--pine); margin: 24px 0 10px; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 16px 24px; }
.prose li { margin-bottom: 6px; }

hr.divider {
  width: 100%; height: 1px; background: var(--line);
  margin: 32px 0; border: 0; position: relative;
}
hr.divider::after {
  content: ""; position: absolute; left: 50%; top: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sunset); transform: translateX(-50%);
}

/* Section header w/ rule on the right (atlas pages) */
.section-head {
  display: flex; align-items: baseline; gap: 16px;
  margin: 0 0 22px;
}
.section-head h2 { margin: 0; }
.section-head .rule { flex: 1; height: 1px; background: var(--line); }
.section-head .meta {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ============================================================
   FEATURED ROW — asymmetric editorial grid
   ============================================================ */
.featured {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(140px, auto);
  gap: 14px;
  margin: 8px 0 36px;
}
.featured a {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  position: relative; overflow: hidden;
}
.featured a:hover {
  border-color: var(--pine);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.featured a .top {
  font-family: var(--serif);
  font-size: 19px; font-weight: 500;
  color: var(--pine);
  line-height: 1.15;
  letter-spacing: -0.012em;
}
.featured a .meta {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate);
}
.featured a .height-num {
  font-family: var(--mono);
  font-size: 36px; font-weight: 500;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: auto;
}
.featured a .height-num span {
  font-size: 14px; font-weight: 500;
  color: var(--slate); margin-left: 4px;
}

/* The hero feature — pine inverted, spans 2x2 */
.featured a.feat-hero {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--pine);
  border-color: var(--pine);
  color: var(--cream);
  padding: 28px 28px 26px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='340' viewBox='0 0 480 340' fill='none' stroke='%23FAF7F2' stroke-width='0.7' stroke-opacity='0.10'><path d='M-20 60 Q60 30 140 60 T300 60 T460 70'/><path d='M-20 110 Q70 80 160 110 T320 110 T500 102'/><path d='M-20 160 Q80 130 170 160 T330 158 T500 152'/><path d='M-20 214 Q90 184 180 214 T340 212 T500 204'/><path d='M-20 268 Q100 240 200 268 T360 266 T500 258'/></svg>");
}
.featured a.feat-hero:hover { background-color: var(--pine-deep); }
.featured a.feat-hero .top {
  color: var(--cream);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.05;
  max-width: 14ch;
}
.featured a.feat-hero .meta { color: rgba(250,247,242,0.72); }
.featured a.feat-hero .height-num { color: var(--cream); font-size: 56px; }
.featured a.feat-hero .height-num span { color: rgba(250,247,242,0.72); }
.featured a.feat-hero::after {
  content: ""; position: absolute; right: -20px; bottom: -28px;
  width: 200px; height: 200px;
  background: radial-gradient(circle at 30% 30%, var(--sunset) 0%, transparent 70%);
  opacity: 0.18; pointer-events: none;
}

/* Cream variant — span 2 cols, used for second-tier */
.featured a.feat-wide {
  grid-column: span 2;
  background: var(--cream);
  border-color: var(--line-strong);
}

/* On wider screens we keep 4 cols; phones drop to single column */
@media (max-width: 900px) {
  .featured { grid-template-columns: repeat(2, 1fr); }
  .featured a.feat-hero, .featured a.feat-wide { grid-column: span 2; grid-row: auto; }
  .featured a.feat-hero .height-num { font-size: 40px; }
}
@media (max-width: 540px) {
  .featured { grid-template-columns: 1fr; }
  .featured a.feat-hero, .featured a.feat-wide { grid-column: span 1; }
}

/* ============================================================
   STATE GRID — atlas-style with regional accents
   ============================================================ */
.state-atlas {
  margin: 8px 0 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  position: relative;
}
.state-atlas-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
}
.state-atlas-head .label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.state-atlas-head .legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--slate);
}
.state-atlas-head .legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.state-atlas-head .legend i {
  width: 12px; height: 3px; display: inline-block; border-radius: 2px;
}
.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0;
}
.state-cell {
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px 12px;
  text-decoration: none;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  transition: background .12s var(--ease);
  position: relative;
  border-top: 3px solid var(--region, var(--line-strong));
}
.state-cell:hover {
  background: rgba(27, 67, 50, 0.03);
  text-decoration: none;
}
.state-cell .state-name {
  font-family: var(--sans); font-weight: 500;
  color: var(--pine); font-size: 15px;
  letter-spacing: -0.005em;
}
.state-cell .state-count {
  font-family: var(--mono);
  color: var(--slate); font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.state-cell.is-empty {
  opacity: 0.45;
  background: repeating-linear-gradient(
    -45deg,
    var(--paper) 0px, var(--paper) 6px,
    var(--cream) 6px, var(--cream) 7px
  );
  cursor: default;
}
.state-cell.is-empty:hover { background: repeating-linear-gradient(-45deg,var(--paper) 0,var(--paper) 6px,var(--cream) 6px,var(--cream) 7px); }
.state-cell.is-empty .state-count { color: var(--slate-light); }

/* Regional palette mapping */
.state-cell.r-pnw        { --region: var(--r-pnw); }
.state-cell.r-mtnwest    { --region: var(--r-mtnwest); }
.state-cell.r-southwest  { --region: var(--r-southwest); }
.state-cell.r-plains     { --region: var(--r-plains); }
.state-cell.r-greatlakes { --region: var(--r-greatlakes); }
.state-cell.r-southeast  { --region: var(--r-southeast); }
.state-cell.r-northeast  { --region: var(--r-northeast); }
.state-cell.r-pacific    { --region: var(--r-pacific); }

/* ============================================================
   DESTINATION CARDS — varied densities
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  display: flex; flex-direction: column; gap: 6px;
}
.card:hover {
  border-color: var(--pine);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.card h3 {
  font-family: var(--serif);
  font-size: 19px; font-weight: 500;
  color: var(--pine);
  letter-spacing: -0.012em;
}
.card p.meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate);
}
.card p.snippet { font-size: 14px; color: var(--ink); line-height: 1.5; }

/* Metro/city card variant — tabular numerals, big count */
.card.metro { padding-bottom: 22px; }
.card.metro .count {
  font-family: var(--mono);
  font-size: 28px; font-weight: 500;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: auto;
}
.card.metro .count span {
  font-size: 12px; color: var(--slate);
  font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; margin-left: 6px;
}

/* ============================================================
   DESTINATION HEADER — CSS cascade banner (no SVG drawing)
   ============================================================ */
.dest-header {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: 16px 0 28px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.dest-header .text {
  padding: 32px 32px 28px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.dest-header .eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sunset);
  display: inline-flex; align-items: center; gap: 8px;
}
.dest-header .eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--sunset);
}
.dest-header h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--pine);
  margin: 12px 0 14px;
  text-wrap: balance;
}
.dest-header .place-line {
  font-size: 15px; color: var(--slate);
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  align-items: baseline;
}
.dest-header .place-line strong { color: var(--ink); font-weight: 500; }
.dest-header .place-line .dot { color: var(--line-strong); }
.dest-header .stamp {
  display: inline-flex; align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  color: var(--pine);
}
.dest-header .stamp .v {
  font-size: 44px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.dest-header .stamp .u {
  font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--slate);
  padding-bottom: 4px;
}

/* Cascade panel — pure CSS waterfall */
.cascade {
  position: relative;
  background: linear-gradient(180deg, #20543B 0%, #143626 60%, #0F2D1F 100%);
  min-height: 320px;
  overflow: hidden;
  border-left: 1px solid var(--line);
}
.cascade::before {
  /* vertical water columns — varied opacity = depth */
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(250,247,242,0.13) 7px, rgba(250,247,242,0.13) 8px,
      transparent 8px, transparent 17px,
      rgba(250,247,242,0.06) 17px, rgba(250,247,242,0.06) 19px,
      transparent 19px, transparent 28px,
      rgba(250,247,242,0.18) 28px, rgba(250,247,242,0.18) 29px,
      transparent 29px, transparent 41px,
      rgba(250,247,242,0.09) 41px, rgba(250,247,242,0.09) 43px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 23px,
      rgba(250,247,242,0.05) 23px, rgba(250,247,242,0.05) 25px,
      transparent 25px, transparent 67px,
      rgba(250,247,242,0.10) 67px, rgba(250,247,242,0.10) 68px);
  -webkit-mask: linear-gradient(180deg, transparent 0%, black 12%, black 72%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, black 12%, black 72%, transparent 100%);
  pointer-events: none;
}
.cascade::after {
  /* mist pool at bottom */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(250,247,242,0.22) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(15,45,31,0.4) 100%);
  pointer-events: none;
}
.cascade .cliff {
  position: absolute; left: 0; right: 0; top: 0;
  height: 36px;
  background:
    linear-gradient(180deg, #2D5A40 0%, #1B4332 100%);
  clip-path: polygon(
    0 0, 100% 0, 100% 56%,
    93% 70%, 86% 64%, 78% 78%, 71% 70%, 64% 80%,
    56% 72%, 48% 84%, 40% 76%, 33% 86%, 25% 78%,
    16% 88%, 9% 80%, 0 90%
  );
  z-index: 2;
}
.cascade .coords {
  position: absolute; left: 16px; bottom: 14px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(250,247,242,0.7);
  text-transform: uppercase;
}
.cascade .coords::before {
  content: "◉ "; color: var(--sunset);
}
.cascade .scale {
  position: absolute; right: 18px; top: 56px; bottom: 36px;
  width: 14px; z-index: 3;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-end;
  font-family: var(--mono); font-size: 9px;
  color: rgba(250,247,242,0.5);
  letter-spacing: 0.06em;
}
.cascade .scale span { padding-right: 18px; position: relative; }
.cascade .scale span::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 12px; height: 1px; background: rgba(250,247,242,0.35);
}

@media (max-width: 720px) {
  .dest-header { grid-template-columns: 1fr; }
  .cascade { min-height: 220px; border-left: 0; border-top: 1px solid var(--line); order: -1; }
  .dest-header .text { padding: 24px 22px; }
}

/* ============================================================
   FACTBOX — printed reference card
   ============================================================ */
.factbox {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 24px 0;
  position: relative;
}
.factbox::before {
  content: "FIELD CARD";
  position: absolute;
  top: -9px; left: 22px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em;
  background: var(--cream);
  padding: 0 8px;
  color: var(--slate);
}
.factbox dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 28px;
  font-size: 14px;
}
.factbox .row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}
.factbox .row:first-child, .factbox .row:nth-child(2) { border-top: 0; }
.factbox dt {
  font-family: var(--mono);
  font-weight: 500; font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.factbox dd { color: var(--ink); font-size: 15px; }
.factbox dd a { color: var(--pine); }
.factbox .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   CALLOUT
   ============================================================ */
.callout {
  background: rgba(217, 119, 6, 0.06);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-left: 3px solid var(--sunset);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
  font-size: 15px;
}
.callout strong { color: var(--sunset-deep); }

/* ============================================================
   DEST TABLE
   ============================================================ */
.dest-table {
  width: 100%; border-collapse: collapse;
  margin: 16px 0; font-size: 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.dest-table th, .dest-table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.dest-table th {
  background: var(--cream);
  font-family: var(--mono);
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--slate);
}
.dest-table tr:last-child td { border-bottom: 0; }
.dest-table tr:hover td { background: rgba(217, 119, 6, 0.04); }
.dest-table a { color: var(--pine); font-weight: 500; }
.dest-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--slate); }

/* ============================================================
   SIGNUP / FORMS
   ============================================================ */
.signup {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 32px;
  margin: 48px 0 8px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.signup::before {
  content: ""; position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(217,119,6,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.signup .eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sunset);
  display: block;
  margin-bottom: 8px;
}
.signup h3 {
  font-family: var(--serif);
  font-size: 26px; font-weight: 500;
  margin-bottom: 8px;
  color: var(--pine);
  letter-spacing: -0.018em;
  max-width: 32ch;
}
.signup p.subtitle { color: var(--slate); margin-bottom: 22px; font-size: 15px; max-width: 60ch; }
.signup form { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input[type=email] {
  flex: 1; min-width: 220px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit; font-size: 15px;
  background: var(--cream);
  transition: border-color .15s, background .15s;
}
.signup input[type=email]:focus { outline: none; border-color: var(--pine); background: var(--paper); }
.signup button {
  padding: 13px 26px;
  background: var(--pine);
  color: white;
  border: 0; border-radius: 999px;
  font-family: inherit; font-weight: 500; font-size: 15px;
  cursor: pointer;
  transition: background .15s;
}
.signup button:hover { background: var(--pine-deep); }
.signup .privacy-note { color: var(--slate); font-size: 13px; margin-top: 14px; }

form.contact-form {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 32px; border-radius: 14px;
}
form.contact-form label { display: block; font-weight: 500; font-size: 14px; color: var(--ink); margin: 18px 0 6px; }
form.contact-form label:first-of-type { margin-top: 0; }
form.contact-form input[type=text],
form.contact-form input[type=email],
form.contact-form select,
form.contact-form textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 15px;
  background: var(--cream);
}
form.contact-form input:focus, form.contact-form select:focus, form.contact-form textarea:focus {
  outline: none; border-color: var(--pine); background: var(--paper);
}
form.contact-form textarea { resize: vertical; min-height: 130px; }
form.contact-form button {
  margin-top: 22px; padding: 12px 22px;
  background: var(--pine); color: white;
  border: 0; border-radius: 8px;
  font-family: inherit; font-weight: 500; font-size: 15px;
  cursor: pointer;
}
form.contact-form button:hover { background: var(--pine-deep); }
.success {
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46;
  padding: 14px 18px; border-radius: 8px; margin-bottom: 24px; font-size: 15px;
}

/* ============================================================
   CATEGORY TILES (homepage / state hub)
   ============================================================ */
.categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 18px 0 32px;
}
.cat-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cat-tile:hover { border-color: var(--pine); transform: translateY(-1px); box-shadow: var(--shadow-card); text-decoration: none; }
.cat-tile.is-disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.cat-tile h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--pine); }
.cat-tile p { font-size: 14px; color: var(--slate); }
.cat-tile .badge {
  display: inline-block;
  background: var(--cream);
  color: var(--slate);
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-top: 6px;
}

/* ============================================================
   AD SLOTS — reserve space, never break grid
   ============================================================ */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: 1px dashed var(--line-strong);
  color: var(--slate-light);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 32px 0;
  border-radius: 6px;
}
.ad-slot.leaderboard { width: 728px; max-width: 100%; height: 90px; margin-left: auto; margin-right: auto; }
.ad-slot.rectangle { width: 300px; height: 250px; margin: 16px auto; }

/* ============================================================
   FOOTER — guidebook colophon
   ============================================================ */
footer.colophon {
  margin-top: 80px;
  background: var(--pine);
  color: rgba(250,247,242,0.78);
  font-size: 14px;
  position: relative;
  overflow: hidden;
}
footer.colophon .topo-layer {
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='340' viewBox='0 0 480 340' fill='none' stroke='%23FAF7F2' stroke-width='0.7' stroke-opacity='0.07'><path d='M-20 60 Q60 30 140 60 T300 60 T460 70'/><path d='M-20 110 Q70 80 160 110 T320 110 T500 102'/><path d='M-20 160 Q80 130 170 160 T330 158 T500 152'/><path d='M-20 214 Q90 184 180 214 T340 212 T500 204'/><path d='M-20 268 Q100 240 200 268 T360 266 T500 258'/></svg>");
  pointer-events: none;
}
footer.colophon .container { position: relative; z-index: 2; padding-top: 48px; padding-bottom: 36px; }
footer.colophon .col-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(250,247,242,0.14);
}
footer.colophon .col h4 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(250,247,242,0.55);
  margin-bottom: 14px;
}
footer.colophon .col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
footer.colophon .col a {
  color: rgba(250,247,242,0.86);
  text-decoration: none; margin: 0;
  font-size: 14px;
}
footer.colophon .col a:hover { color: var(--cream); text-decoration: underline; }
footer.colophon .brand {
  color: var(--cream);
  font-family: var(--serif);
  font-size: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
footer.colophon .brand .brand-mark { color: var(--sunset); }
footer.colophon .tagline {
  font-family: var(--serif);
  font-size: 17px; font-style: italic;
  color: rgba(250,247,242,0.68);
  max-width: 32ch; line-height: 1.4;
}
footer.colophon .meta-row {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding-top: 22px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(250,247,242,0.56);
}
footer.colophon .meta-row a { color: rgba(250,247,242,0.7); text-decoration: underline; text-decoration-color: rgba(250,247,242,0.25); margin: 0; }
footer.colophon .meta-row a:hover { color: var(--cream); }
footer.colophon .footer-attribution {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(250,247,242,0.62);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  max-width: 90ch;
  margin-top: 14px;
}
footer.colophon .footer-attribution a { color: rgba(250,247,242,0.8); }

@media (max-width: 720px) {
  footer.colophon .col-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  footer.colophon .col-brand { grid-column: span 2; }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 18px 0 0;
  padding: 18px 0 0;
}
.breadcrumb a { color: var(--slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--pine); text-decoration: underline; }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* ============================================================
   PHOTO SLOTS — drop <picture><img> into the slot.
   Slots have CSS fallbacks (cascade/topo/pine) that show through
   when the <picture> is absent. Photos win when present.
   ============================================================ */

/* Cascade panel — photo slot inside .cascade */
.cascade > picture {
  position: absolute; inset: 0; z-index: 1;
  display: block;
}
.cascade > picture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cascade:has(picture) .cliff,
.cascade:has(picture) .scale { display: none; }
.cascade:has(picture)::before {
  opacity: 0.25;
  mix-blend-mode: screen;
}
.cascade:has(picture)::after {
  height: 60%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(15,45,31,0.65) 100%);
}
.cascade .coords { z-index: 4; }
.cascade:has(picture) .coords { color: rgba(250,247,242,0.92); }

/* Homepage hero — backing photo behind topo + horizon */
.hero-pano > picture.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  display: block;
}
.hero-pano > picture.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-pano:has(picture.hero-bg)::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(15,45,31,0.45) 0%, rgba(15,45,31,0.78) 60%, rgba(15,45,31,0.94) 100%);
  pointer-events: none;
}

/* Featured hero card — photo replaces pine + topo */
.featured a.feat-hero > picture {
  position: absolute; inset: 0; z-index: 0;
  display: block;
}
.featured a.feat-hero > picture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.featured a.feat-hero:has(picture) { background-image: none; }
.featured a.feat-hero:has(picture)::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,45,31,0.20) 0%, rgba(15,45,31,0.55) 50%, rgba(15,45,31,0.92) 100%);
  pointer-events: none;
}
.featured a.feat-hero > * { position: relative; z-index: 2; }

/* Metro card — thumbnail strip at top */
.card.metro > picture {
  display: block;
  margin: -18px -20px 14px;
  height: 110px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.card.metro > picture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Destination banner — optional full-bleed strip above breadcrumb */
.dest-banner {
  margin: 16px -24px 0;
  height: 280px;
  overflow: hidden;
  border-radius: 0;
  position: relative;
}
.dest-banner picture, .dest-banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dest-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, var(--cream) 95%);
  pointer-events: none;
}

@media (max-width: 720px) {
  .dest-banner { height: 200px; }
  .card.metro > picture { height: 90px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav-search { max-width: 100%; flex-basis: 100%; order: 3; margin-top: 4px; }
  .nav-inner { flex-wrap: wrap; }
  .hero-pano-inner { padding: 56px 24px 140px; }
  .hero-pano .sun { width: 64px; height: 64px; top: 36px; right: 32px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-links a { font-size: 13px; }
  .signup { padding: 24px; }
  form.contact-form { padding: 24px; }
  .factbox { padding: 18px 18px; }
  .factbox dl { grid-template-columns: 1fr; gap: 10px; }
  .rf-search-dropdown { left: -8px; right: -8px; }
  .hero-pano .stat-strip { gap: 22px; }
  .hero-pano .stat-strip .num { font-size: 18px; }
}