/* ============================================================
   HOW TO ADD YOUR OWN PEAKS
   Scroll down to the "PEAKS DATA" block near the bottom of the
   <script> section. Copy one entry, change the details, and add
   your photos to the /images folder. That's the only file you
   need to touch.
   ============================================================ */

:root{
  --bg: #131C24;
  --bg-panel: #1C2932;
  --bg-panel-2: #24333F;
  --line-teal: #4F7C82;
  --ink: #EDE7DA;
  --ink-dim: #9FB0B8;
  --amber: #E2963F;
  --rust: #A8553A;
  --border: rgba(159,176,184,0.18);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
/* iOS Safari's default tap flash is a mismatched gray/blue box that clashes
   with this dark theme. Removing it and relying on explicit :active states
   (added throughout below) gives cleaner, intentional touch feedback instead. */
*{ -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Source Sans 3', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mono{ font-family: 'JetBrains Mono', monospace; }
.display{ font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }

a{ color: var(--amber); }

/* ---------- HERO ---------- */
.hero{
  position: relative;
  padding: 64px 6vw 32px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-contours{
  position:absolute; inset:0;
  opacity:0.35;
  pointer-events:none;
}
/* hero-inner's max-width is deliberately calc(1200px - 12vw), not a flat
   1200px. .hero already consumes 6vw of padding on each side before
   hero-inner even starts centering itself inside it — grid-section, by
   contrast, applies its max-width/centering and its own 6vw padding on
   the SAME element. Subtracting 12vw (both sides) here cancels out that
   structural difference, so hero-inner's actual content edge lands at
   the exact same x-position as grid-section's content edge at every
   viewport width, without changing .hero's own full-bleed background/
   border, which still spans edge-to-edge as before. */
.hero-inner{ position:relative; max-width: calc(1200px - 12vw); margin: 0 auto; }
.hero-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.18em;
  color: var(--amber);
  margin:0 0 12px;
}
.hero h1{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height:0.9;
  margin:0 0 16px;
  letter-spacing:0.01em;
}
.hero p.sub{
  max-width:560px;
  color: var(--ink-dim);
  font-size:0.98rem;
  line-height:1.6;
  margin:0 0 24px;
}
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap: 36px 56px;
}
.hero-bio{
  max-width:560px;
  margin: 20px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.hero-bio p{
  margin:0 0 14px;
  color: var(--ink-dim);
  font-size:0.92rem;
  line-height:1.6;
}
.social-links{
  display:flex;
  flex-wrap:wrap;
  gap: 18px;
}
.social-links a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
  color: var(--amber);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.social-links a:hover{ border-bottom-color: var(--amber); }
.hero-stat .num{
  font-family:'JetBrains Mono', monospace;
  font-size:1.9rem;
  color: var(--ink);
  display:block;
}
.hero-stat .label{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  color: var(--ink-dim);
  text-transform:uppercase;
}
.hero-span-line{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  color: var(--ink-dim);
  margin: 10px 0 0;
  max-width: 640px;
}
.hero-span-line:empty{ display:none; }

/* ---------- ON THIS DAY ---------- */
/* No max-width/margin/padding here — this sits nested directly inside
   .grid-section, which already centers itself and applies its own 6vw
   padding to its children. Re-declaring the same properties here was
   double-indenting the banner relative to "The Peaks" heading beside it. */
.on-this-day:empty{ display:none; }
.on-this-day a{
  display:block;
  margin-top:18px;
  padding: 12px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  border-radius:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.85rem;
  color: var(--ink);
  text-decoration:none;
}
.on-this-day a:hover{ border-color: var(--ink); }

/* ---------- FEATURED ADVENTURES (curated) ---------- */
.featured-adventures-section{
  max-width:1200px;
  margin: 0 auto;
  padding: 40px 6vw 10px;
}
.featured-adventures-row{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.adventure-card{
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.adventure-card:hover{ border-color: var(--line-teal); transform: translateY(-3px); }
.adventure-card:active{ border-color: var(--line-teal); }
.adventure-thumb{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--bg-panel-2);
}
.adventure-body{ padding: 14px 16px 16px; }
.adventure-elev{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  color: var(--amber);
  letter-spacing:0.05em;
  margin-bottom: 4px;
}
.adventure-body h4{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:1.1rem;
  line-height:1.1;
  margin:0 0 4px;
}
.adventure-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  color: var(--ink-dim);
}

/* ---------- FEATURED SPOT ---------- */
.featured-section{
  max-width:1200px;
  margin: 0 auto;
  padding: 40px 6vw 10px;
}
.featured-card{
  display:flex;
  flex-wrap:wrap;
  gap: 26px;
  max-width: 1200px;
  text-decoration:none;
  color: var(--ink);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow:hidden;
}
.featured-img{
  flex: 1 1 380px;
  min-height: 280px;
  max-height: 420px;
  width: 100%;
  object-fit: cover;
  display:block;
}
.featured-body{
  flex: 1 1 340px;
  padding: 28px 30px 30px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.featured-body .elev{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  color: var(--amber);
  letter-spacing:0.08em;
}
.featured-body h3{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin: 6px 0 8px;
  line-height:1;
}
.featured-body .meta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.featured-body .teaser{
  font-size:0.98rem;
  line-height:1.6;
  color: var(--ink);
  margin-bottom: 16px;
}
.featured-body .go{
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
  color: var(--amber);
}
@media (max-width: 700px){
  .featured-body{ padding: 22px 22px 26px; }

  /* Reduces how far a user has to scroll to reach the peak grid on
     phone-sized screens — tightens spacing throughout the intro, bio,
     stats, featured, and map sections. No content removed, no
     sections reordered or restructured — purely smaller gaps/padding. */
  .hero{ padding: 50px 6vw 28px; }
  .hero p.sub{ margin-bottom: 22px; }
  .hero-bio{ margin-top: 18px; padding: 14px 16px; }
  .hero-bio p{ margin-bottom: 10px; }
  .hero-stats{ gap: 20px 32px; margin-top: 4px; }
  .featured-section{ padding: 24px 6vw 6px; }
  .map-section{ padding: 24px 6vw 6px; }
  #peaksMap{ height: 280px; }
}

/* ---------- STATS DASHBOARD ---------- */
.stats-dashboard-section{
  max-width:1200px;
  margin: 0 auto;
  padding: 8px 6vw 0;
}
.stats-dashboard-inner{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.stats-chart-card{
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px 20px;
}
.stats-chart-card h3{
  margin: 0 0 14px;
  text-align: left;
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: var(--ink-dim);
  font-weight:500;
}
.stats-chart-canvas-wrap{
  position: relative;
  height: 170px;
}
@media (max-width: 700px){
  .stats-dashboard-inner{ grid-template-columns: 1fr; }
  .stats-chart-canvas-wrap{ height: 150px; }
}

/* ---------- MAP ---------- */
.map-section{
  max-width:1200px;
  margin: 0 auto;
  padding: 40px 6vw 10px;
}
.map-caption{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  color: var(--ink-dim);
  margin: 0 0 16px;
}
#peaksMap{
  height: 420px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: var(--bg-panel);
  color: var(--ink);
}
.leaflet-popup-content a{ color: var(--amber); }

/* ---------- ELEVATION SPINE ---------- */
.spine-wrap{
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 26px 6vw 10px;
}
.spine-label{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  color: var(--ink-dim);
  text-transform:uppercase;
  margin:0 0 14px;
  max-width:1200px;
  margin-left:auto; margin-right:auto;
}
.spine{
  display:flex;
  align-items:flex-end;
  gap: 6px;
  max-width:1200px;
  margin: 0 auto;
  height: 130px;
  overflow-x:auto;
  padding-bottom: 16px;
}
.spine::-webkit-scrollbar{ height:6px; }
.spine::-webkit-scrollbar-thumb{ background: var(--line-teal); border-radius:4px; }
.spine-tick{
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  background: linear-gradient(to top, var(--line-teal), rgba(79,124,130,0.35));
  border-radius: 3px 3px 0 0;
  cursor:pointer;
  position:relative;
  transition: background 0.2s ease, transform 0.15s ease;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.spine-tick:hover, .spine-tick.active{
  background: linear-gradient(to top, var(--amber), rgba(226,150,63,0.4));
  transform: translateY(-2px);
}
.spine-tick .tick-val{
  position:absolute;
  top:-22px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  color: var(--ink-dim);
  white-space:nowrap;
}
.spine-tick:hover .tick-val, .spine-tick.active .tick-val{ color: var(--amber); }

/* ---------- GRID ---------- */
.back-to-top{
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 40;
  background: var(--amber);
  color: var(--bg);
  border: none;
  border-radius: 24px;
  padding: 11px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.back-to-top.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{ background: var(--ink); }
.back-to-top:active{ background: var(--ink); }
@supports (bottom: env(safe-area-inset-bottom)){
  .back-to-top{ bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); }
}
.grid-section{
  max-width:1200px;
  margin: 0 auto;
  padding: 56px 6vw 100px;
}
.sticky-grid-bar{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  padding-top: max(8px, env(safe-area-inset-top));
  box-shadow: 0 8px 12px -8px rgba(0,0,0,0.35);
}
.grid-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
  margin-bottom:34px;
}
.grid-heading h2{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:1.6rem;
  margin:0;
  letter-spacing:0.02em;
}
.featured-tag{
  color: var(--ink-dim);
  font-style: italic;
}
.grid-heading span{
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  color: var(--ink-dim);
}
.grid-controls{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 12px;
  margin-bottom:34px;
}
.sort-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.sort-controls .sort-label{
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  color: var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-right:2px;
}
.sort-select{
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.03em;
  color: var(--ink);
  background: var(--bg-panel);
  border:1px solid var(--border);
  padding:7px 30px 7px 12px;
  border-radius:20px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0' fill='none' stroke='%239FB0B8' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;
  background-position: right 12px center;
}
.sort-select:hover{ border-color: var(--amber); }
.sort-select:focus{ outline:none; border-color: var(--amber); }
.search-box{
  position:relative;
  display:flex;
  align-items:center;
}
.search-box svg{
  position:absolute;
  left:12px;
  width:13px;
  height:13px;
  pointer-events:none;
  opacity:0.6;
}
.search-input{
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.03em;
  color: var(--ink);
  background: var(--bg-panel);
  border:1px solid var(--border);
  padding:7px 12px 7px 32px;
  border-radius:20px;
  width:200px;
  transition: width 0.15s ease, border-color 0.15s ease;
}
.search-input::placeholder{ color: var(--ink-dim); }
/* iOS Safari auto-zooms the whole page when a focused text input computes
   to under 16px font-size. Bumping just this box on phone-sized viewports
   avoids that jarring zoom-on-tap, without changing the compact desktop
   look at wider widths. Placed after the base rule above so it actually
   wins the cascade at equal specificity. */
@media (max-width: 700px){
  .search-input{ font-size:16px; }

  /* Each labeled control (Sort/Region/Difficulty) was claiming a full row
     on its own at this width, stacking the sticky bar up to ~250px tall —
     nearly 40% of an iPhone's screen while scrolling. Search goes on its
     own full-width row (people expect room to type), and the three filter
     dropdowns share one compact row beneath it, with their redundant text
     labels hidden since the selected value already says what each one is. */
  .grid-heading{
    padding-bottom: 8px;
    margin-bottom: 14px;
  }
  .grid-controls{
    align-items: stretch;
    gap: 8px;
    margin-bottom: 20px;
  }
  .search-box{
    order: -1;
    flex: 1 1 100%;
  }
  .search-input{ width: 100%; }
  .search-input:focus{ width: 100%; }
  .sort-controls{
    flex: 1 1 30%;
    min-width: 0;
    gap: 0;
  }
  .sort-controls .sort-label{ display:none; }
  .sort-select{
    width: 100%;
    padding: 7px 22px 7px 10px;
    font-size: 0.68rem;
    background-position: right 8px center;
  }
}
.search-input:hover{ border-color: var(--amber); }
.search-input:focus{ outline:none; border-color: var(--amber); width:240px; }
.peak-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
/* Wide desktop monitors (e.g. 2560x1440) sat at only 3 columns because
   .grid-section's max-width (1200px) combined with its 6vw side padding
   leaves less room than it looks like at a glance. These two breakpoints
   widen the container specifically on large screens and force an exact
   column count, rather than leaving it to auto-fill's guesswork — 4
   columns from 1400px viewport width, 5 columns from 1900px up. Mobile
   and tablet layouts (everything below 1400px) are untouched. */
@media (min-width: 1400px){
  .hero-inner{ max-width: calc(1600px - 12vw); }
  .grid-section{ max-width: 1600px; }
  .map-section{ max-width: 1600px; }
  .featured-section{ max-width: 1600px; }
  .featured-adventures-section{ max-width: 1600px; }
  .stats-dashboard-section{ max-width: 1600px; }
  .peak-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1900px){
  .hero-inner{ max-width: calc(1900px - 12vw); }
  .grid-section{ max-width: 1900px; }
  .map-section{ max-width: 1900px; }
  .featured-section{ max-width: 1900px; }
  .featured-adventures-section{ max-width: 1900px; }
  .stats-dashboard-section{ max-width: 1900px; }
  .peak-grid{ grid-template-columns: repeat(5, 1fr); }
}
.skeleton-card{
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.skeleton-thumb{
  aspect-ratio: 4/3;
  background: linear-gradient(100deg, var(--bg-panel) 30%, var(--bg-panel-2) 50%, var(--bg-panel) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-line{
  height: 14px;
  margin: 16px 20px;
  border-radius: 4px;
  background: linear-gradient(100deg, var(--bg-panel) 30%, var(--bg-panel-2) 50%, var(--bg-panel) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-line-title{ width: 60%; height: 20px; }
.skeleton-line-meta{ width: 85%; }
@keyframes skeleton-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .skeleton-thumb, .skeleton-line{ animation: none; }
}
.peak-card{
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow:hidden;
  cursor:pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  display:flex;
  flex-direction:column;
}
.peak-card:hover{
  transform: translateY(-4px);
  border-color: var(--line-teal);
}
.peak-card:active{
  transform: translateY(-2px);
  border-color: var(--line-teal);
}
.peak-card .thumb{
  width:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  background: var(--bg-panel-2);
  display:block;
}
.peak-card .body{ padding: 18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.peak-card .elev{
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  color: var(--amber);
  margin-bottom:6px;
}
.peak-card h3{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:1.7rem;
  margin:0 0 6px;
  line-height:1;
}
.peak-card .meta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  color: var(--ink-dim);
  margin-bottom:12px;
}
.peak-card .ascent-dates{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin: -4px 0 12px;
}
.peak-card .ascent-dates .count-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  color: var(--bg, #1c2932);
  background: var(--amber);
  border: none;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing:0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.peak-card .ascent-dates .count-tag:hover{
  background: var(--ink);
}
.peak-card .ascent-dates .count-tag::after{
  content: '▾';
  font-size: 0.6rem;
}
.peak-card .ascent-dates .count-tag[aria-expanded="true"]::after{
  content: '▴';
}
.peak-card .ascent-dates .date-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  color: var(--ink-dim);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing:0.03em;
}
.peak-card .ascent-dates .date-tags-extra{
  /* Lets the wrapper's own .date-tag children participate directly in the
     parent's flex row, as if this span weren't there — so expanding just
     adds more tags to the same wrapping row instead of a nested block. */
  display: contents;
}
.peak-card .ascent-dates .date-tags-extra[hidden]{
  display: none;
}
.peak-card .multi-peak-badge{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  color: var(--bg);
  background: var(--amber);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing:0.03em;
  margin-bottom: 10px;
}
.peak-card .highest-badge{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  color: var(--bg);
  background: var(--line-teal);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing:0.03em;
  margin-bottom: 10px;
  margin-right: 6px;
}
.peak-card .card-stats{
  display:flex;
  gap: 16px;
  padding: 12px 0;
  margin: 4px 0 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.peak-card .card-stats .cs{ flex:1; min-width:0; }
.peak-card .card-stats .cs-v{
  font-family:'JetBrains Mono', monospace;
  color: var(--amber);
  font-size:0.85rem;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.peak-card .card-stats .cs-l{
  font-family:'JetBrains Mono', monospace;
  color: var(--ink-dim);
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.peak-card .teaser{
  color: var(--ink-dim);
  font-size:0.92rem;
  line-height:1.5;
  flex:1;
}
.peak-card .teaser.teaser-clamped{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3em;
  flex: 0 1 auto;
}
.peak-card .teaser-toggle{
  align-self: flex-start;
  margin: 6px 0 -4px;
  background: none;
  border: none;
  padding: 0;
  font-family:'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--amber);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.peak-card .teaser-toggle:hover{ color: var(--ink); }
.peak-card .teaser-toggle[hidden]{ display: none; }
.peak-card .go{
  margin-top:14px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  color: var(--amber);
  letter-spacing:0.04em;
}

/* ---------- DETAIL OVERLAY ---------- */
.overlay{
  position:fixed; inset:0;
  background: var(--bg);
  z-index: 100;
  overflow-y:auto;
  display:none;
}
.overlay.open{ display:block; }
.overlay-top{
  position:-webkit-sticky;
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding: max(18px, env(safe-area-inset-top)) 6vw 18px;
  background: rgba(19,28,36,0.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.overlay-top .brand{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:0.03em;
}
.close-btn, .nav-btn{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  background:none;
  border:1px solid var(--border);
  color: var(--ink);
  padding:8px 16px;
  border-radius:4px;
  cursor:pointer;
  letter-spacing:0.06em;
}
.close-btn:hover, .nav-btn:hover{ border-color: var(--amber); color: var(--amber); }
.close-btn:active, .nav-btn:active{ border-color: var(--amber); color: var(--amber); background: rgba(226,150,63,0.12); }
.overlay-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.share-wrap{
  position:relative;
}
.share-menu{
  display:none;
  position:absolute;
  top: calc(100% + 8px);
  right:0;
  min-width:160px;
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px;
  flex-direction:column;
  gap:2px;
  z-index:10;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.share-menu.open{ display:flex; }
.share-menu a{
  font-family:'JetBrains Mono', monospace;
  font-size:0.76rem;
  letter-spacing:0.03em;
  color: var(--ink);
  text-decoration:none;
  padding:9px 12px;
  border-radius:5px;
}
.share-menu a:hover{
  background: var(--bg-panel-2);
  color: var(--amber);
}
.share-toast{
  position:fixed;
  bottom:28px;
  left:50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--amber);
  color: var(--bg, #131c24);
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.04em;
  padding:10px 20px;
  border-radius:20px;
  max-width: min(86vw, 420px);
  text-align:center;
  line-height:1.4;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index:50;
}
.share-toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}
.overlay-hero{
  display:block;
  margin: 0 auto;
  max-width:100%;
  width:auto;
  height:auto;
  max-height: 75vh;
  object-fit: contain;
  background: #0B1218;
}
.overlay-body{
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 6vw 80px;
}
.overlay-body h2{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-weight:900;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height:0.9;
  margin:0 0 18px;
}
.stat-row{
  display:flex; flex-wrap:wrap; gap: 28px 40px;
  padding: 20px 0 30px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-bottom: 34px;
}
.stat-row .s{ }
.stat-row .s .v{ font-family:'JetBrains Mono', monospace; color:var(--amber); font-size:1.1rem; display:block; }
.stat-row .s .l{ font-family:'JetBrains Mono', monospace; color:var(--ink-dim); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; }
.resource-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  margin: -8px 0 30px;
}
.resource-label{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  color: var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-right:2px;
}
.resource-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.82rem;
  font-weight:600;
  color: var(--amber);
  background: rgba(226,150,63,0.08);
  border: 1px solid var(--amber);
  padding: 9px 16px;
  border-radius: 24px;
  text-decoration:none;
  letter-spacing:0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}
.resource-btn:hover{ background: var(--amber); color: var(--bg); }
.resource-btn:active{ background: var(--amber); color: var(--bg); }
.writeup{
  font-size:1.08rem;
  line-height:1.75;
  color: var(--ink);
}
.writeup p{ margin: 0 0 20px; }
.gallery-heading{
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--ink-dim);
  margin: 50px 0 20px;
}
.gallery{
  columns: 3 220px;
  column-gap: 14px;
}
.gallery img{
  width:100%;
  height:auto;
  display:block;
  margin-bottom:14px;
  border-radius:4px;
  cursor: zoom-in;
  break-inside: avoid;
}
.gallery img[hidden]{ display:none; }
.overlay-footer-nav{
  display:flex; justify-content:space-between;
  margin-top: 56px;
  padding-top: 24px;
  border-top:1px solid var(--border);
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0;
  background: rgba(10,14,18,0.94);
  display:none;
  align-items:center; justify-content:center;
  z-index: 200;
  padding: 5vh 5vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:90vh; border-radius:4px; }
.lightbox-close{
  position:absolute; top:24px; right:32px;
  font-family:'JetBrains Mono', monospace;
  color: var(--ink); background:none; border:1px solid var(--border);
  padding:8px 14px; border-radius:4px; cursor:pointer;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  background: rgba(28,41,50,0.7);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 2rem;
  line-height:1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-nav:hover{ border-color: var(--amber); color: var(--amber); }
.lightbox-nav:active{ border-color: var(--amber); color: var(--amber); background: rgba(226,150,63,0.12); }
.lightbox-prev{ left: 24px; }
.lightbox-next{ right: 24px; }
.lightbox-count{
  position:absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  color: var(--ink-dim);
  background: rgba(28,41,50,0.7);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
}
@media (max-width:640px){
  .lightbox-nav{ width:42px; height:42px; font-size:1.6rem; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
}

.extra-section{
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px dashed var(--border);
}
.extra-section h3{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:1.5rem;
  margin: 0 0 6px;
  color: var(--amber);
}
.extra-section .extra-sub{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  color: var(--ink-dim);
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin: 0 0 22px;
}
.extra-section .writeup{ font-size:1rem; margin-bottom: 30px; }

.at-a-glance{
  margin: -6px 0 34px;
  padding: 20px 24px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.at-a-glance h4{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color: var(--ink-dim);
  margin: 0 0 14px;
}
.at-a-glance dl{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px;
  margin:0;
}
.at-a-glance dl > div{ display:flex; flex-direction:column; gap:2px; }
.at-a-glance dt{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color: var(--ink-dim);
}
.at-a-glance dd{
  margin:0;
  font-size:0.95rem;
  color: var(--ink);
  line-height:1.4;
}
.ascent-toc{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px 12px;
  margin: -14px 0 30px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
}
.ascent-toc-label{ color: var(--ink-dim); text-transform:uppercase; font-size:0.7rem; letter-spacing:0.08em; }
.ascent-toc a{
  color: var(--amber);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.ascent-toc a:hover{ border-bottom-color: var(--amber); }
.gallery-expand-btn{
  display:block;
  width:100%;
  margin: -6px 0 20px;
  padding: 12px;
  background:none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--amber);
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
  letter-spacing:0.04em;
  cursor:pointer;
  transition: border-color 0.15s ease;
}
.gallery-expand-btn:hover{ border-color: var(--amber); }
.gallery-expand-btn:active{ border-color: var(--amber); background: rgba(226,150,63,0.08); }
.ascent-section{
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px dashed var(--border);
}
.ascent-section h3{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:1.5rem;
  margin: 0 0 22px;
  color: var(--amber);
}
.ascent-section .stat-row{ margin-bottom: 30px; }
.ascent-section .writeup{ font-size:1rem; margin-bottom: 30px; }

.detail-comments{
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.empty-note{
  color: var(--ink-dim);
  font-family:'JetBrains Mono', monospace;
  font-size:0.85rem;
  padding: 40px 0;
}
.empty-note .clear-all-filters{ margin-left: 10px; }
.active-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px 10px;
  margin-top: 14px;
}
.filter-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.76rem;
  color: var(--amber);
  background: rgba(226,150,63,0.1);
  border: 1px solid var(--amber);
  padding: 5px 6px 5px 12px;
  border-radius: 20px;
}
.filter-pill-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  min-height:32px;
  background:none;
  border:none;
  color: var(--amber);
  font-family:'JetBrains Mono', monospace;
  font-size:0.85rem;
  cursor:pointer;
  padding: 0;
  line-height:1;
}
.filter-pill-x:hover{ color: var(--bg); background: var(--amber); border-radius:50%; }
.filter-pill-x:active{ color: var(--bg); background: var(--amber); border-radius:50%; }
.clear-all-filters{
  background:none;
  border:1px solid var(--border);
  color: var(--ink-dim);
  font-family:'JetBrains Mono', monospace;
  font-size:0.76rem;
  padding: 6px 14px;
  border-radius: 20px;
  cursor:pointer;
  letter-spacing:0.02em;
}
.clear-all-filters:hover{ border-color: var(--amber); color: var(--amber); }
.clear-all-filters:active{ border-color: var(--amber); color: var(--amber); background: rgba(226,150,63,0.12); }

.comments-section{
  max-width:900px;
  margin: 0 auto;
  padding: 0 6vw 80px;
}
.comments-section .grid-heading{ max-width:none; }

footer{
  text-align:center;
  padding: 40px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  color: var(--ink-dim);
  border-top:1px solid var(--border);
}
.footer-line{ margin-bottom: 14px; }
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  row-gap: 8px;
}
footer a{
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
footer a:hover{ border-bottom-color: var(--amber); }
.footer-links a:not(:last-child)::after{
  content:"·";
  margin: 0 10px;
  opacity:0.4;
  color: var(--ink-dim);
}

/* ---------- NOSCRIPT FALLBACK (added for crawler/no-JS accessibility) ----------
   Only shown to browsers/crawlers that don't execute JavaScript, since the
   .peak-grid above is normally populated by script. Purely additive — does
   not alter any rule above it. */
.noscript-peaks{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.noscript-peak{
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:20px;
}
.noscript-peak h3{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:1.3rem;
  margin:0 0 8px;
}
.noscript-peak h3 a{ color: var(--ink); text-decoration:none; }
.noscript-peak h3 a:hover{ color: var(--amber); }
.noscript-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  color: var(--ink-dim);
  margin:0 0 10px;
}
.noscript-teaser{
  font-size:0.92rem;
  line-height:1.5;
  color: var(--ink-dim);
  margin:0;
}



/* ---------- ENHANCED INTERACTIVE MAP ---------- */
.map-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
  margin-bottom:16px;
}
.map-heading-row h2{
  font-family:'Big Shoulders Display',sans-serif;
  text-transform:uppercase;
  font-weight:700;
  font-size:1.6rem;
  margin:0 0 2px;
}
.map-result-count{
  font-family:'JetBrains Mono',monospace;
  color:var(--ink-dim);
  font-size:.72rem;
  letter-spacing:.08em;
}
.map-heading-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.map-scope-chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 12px;
  scrollbar-width:thin;
}
.map-scope-chip{
  flex:0 0 auto;
  border:1px solid var(--border);
  background:var(--bg-panel);
  color:var(--ink-dim);
  border-radius:20px;
  padding:8px 13px;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  cursor:pointer;
  white-space:nowrap;
}
.map-scope-chip:hover,.map-scope-chip.active{ border-color:var(--amber); color:var(--amber); }
.map-scope-chip.active{ background:rgba(226,150,63,.11); }
.map-shell{ position:relative; max-width: 1200px; }
.map-help{ margin:10px 0 0; color:var(--ink-dim); font: .72rem/1.5 'JetBrains Mono',monospace; }
.map-fullscreen-close{ display:none; }
.map-floating-reset{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1001;
  border: 1px solid var(--amber);
  background: rgba(19,28,36,.92);
  color: var(--ink);
  border-radius: 5px;
  padding: 9px 12px;
  font: .72rem 'JetBrains Mono', monospace;
  cursor: pointer;
}
.map-floating-reset:hover{ border-color: var(--ink); }
.map-floating-reset[hidden]{ display: none; }
.map-shell.has-floating-reset .leaflet-top.leaflet-left{
  margin-top: 46px;
}
.map-marker-wrap,.map-cluster-wrap{ background:none!important; border:none!important; }
.map-marker,.map-cluster{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  transform:none;
  background:var(--amber);
  color:var(--bg);
  border:2px solid var(--ink);
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  font:700 .75rem 'JetBrains Mono',monospace;
}
.map-marker-location{ background:var(--line-teal); color:var(--ink); }
.map-marker-multi{ background:var(--rust); color:var(--ink); }
.map-cluster{ width:42px; height:42px; border-radius:50%; transform:none; background:var(--line-teal); color:var(--ink); }
.map-marker-wrap.map-marker-hover .map-marker{ transform:scale(1.18); box-shadow:0 0 0 5px rgba(226,150,63,.2),0 4px 12px rgba(0,0,0,.5); }
.leaflet-popup-content{ margin:10px; }
.map-popup-card{ display:block; color:var(--ink)!important; text-decoration:none; }
.map-popup-card img{ display:block; width:100%; height:112px; object-fit:cover; border-radius:6px 6px 0 0; }
.map-popup-body{ display:flex; flex-direction:column; gap:4px; padding:10px 4px 2px; }
.map-popup-body strong{ font-family:'Big Shoulders Display',sans-serif; text-transform:uppercase; font-size:1.35rem; line-height:1; }
.map-popup-body span{ font: .72rem/1.35 'JetBrains Mono',monospace; color:var(--ink-dim); }
.map-popup-body b{ margin-top:5px; color:var(--amber); font: .72rem 'JetBrains Mono',monospace; }
.map-popup-group{ display:flex; flex-direction:column; gap:4px; max-height:300px; overflow:auto; color:var(--ink); }
.map-popup-group>strong{ padding:4px 4px 8px; font-family:'Big Shoulders Display',sans-serif; text-transform:uppercase; font-size:1.15rem; }
.map-popup-group a{ display:flex; flex-direction:column; padding:8px; border-top:1px solid var(--border); color:var(--ink); text-decoration:none; }
.map-popup-group a:hover{ background:var(--bg-panel-2); }
.map-popup-group small{ color:var(--ink-dim); font-family:'JetBrains Mono',monospace; }
.peak-card-link{ display:flex; flex:1; flex-direction:column; color:inherit; text-decoration:none; position:relative; }
.difficulty-badge{
  position:absolute;
  top:12px;
  right:12px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:14px;
  color:#0B1218;
  background: var(--ink-dim);
}
.difficulty-badge.diff-easy{ background:#7FC97F; }
.difficulty-badge.diff-moderate{ background:#6FB8D9; }
.difficulty-badge.diff-strenuous{ background: var(--amber); }
.difficulty-badge.diff-technical-scramble{ background:#E2695F; }
.show-on-map{
  margin:0 20px 18px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--amber);
  border-radius:5px;
  padding:9px 12px;
  font: .72rem 'JetBrains Mono',monospace;
  cursor:pointer;
}
.show-on-map:hover{ border-color:var(--amber); background:rgba(226,150,63,.08); }
.peak-card.map-highlight{ border-color:var(--amber); box-shadow:0 0 0 3px rgba(226,150,63,.14); }
body.map-modal-open{ overflow:hidden; }
.map-section.map-expanded{
  position:fixed;
  inset:0;
  z-index:1000;
  max-width:none;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:var(--bg);
  display:flex;
  flex-direction:column;
}
.map-section.map-expanded .map-heading-row{ flex:0 0 auto; }
.map-section.map-expanded .map-scope-chips,.map-section.map-expanded .map-caption,.map-section.map-expanded .map-help{ flex:0 0 auto; }
.map-section.map-expanded .map-shell{ flex:1; min-height:0; max-width:none; }
.map-section.map-expanded #peaksMap{ height:100%; min-height:300px; }
.map-section.map-expanded .map-fullscreen-close{
  display:block;
  position:absolute;
  top:12px;
  right:12px;
  z-index:1001;
  border:1px solid var(--amber);
  background:rgba(19,28,36,.92);
  color:var(--ink);
  border-radius:5px;
  padding:9px 12px;
  font: .72rem 'JetBrains Mono',monospace;
}
@media(max-width:700px){
  .map-heading-row{ align-items:flex-start; }
  .map-heading-actions{ flex-direction:column; }
  .map-heading-actions .close-btn{ padding:7px 10px; font-size:.68rem; }
  #peaksMap{ height:min(62svh,440px); min-height:340px; }
  .map-scope-chips{ margin-right:-6vw; padding-right:6vw; }
  .map-section.map-expanded .map-heading-row{ margin-bottom:8px; }
  .map-section.map-expanded .map-caption,.map-section.map-expanded .map-help{ display:none; }
  .map-section.map-expanded .map-heading-actions #mapResetBtn{ display:none; }
  .map-section.map-expanded .map-scope-chips{ margin-right:0; padding-right:0; }
}

/* ---------- MOBILE PEAK FILTER BAR FIX ----------
   On phones, the entire "The Peaks" heading/search/filter block should
   scroll normally with the page. Keeping this large block sticky covers
   too much of the first card and makes the page feel trapped underneath it.
   Desktop retains the sticky behavior defined above. */
@media (max-width: 700px){
  .sticky-grid-bar{
    position: static;
    top: auto;
    z-index: auto;
    padding-top: 0;
    box-shadow: none;
  }
}


/* ---------- PHASE 1 CORE UX ---------- */
.hero-bio{
  display:block;
  overflow:hidden;
}
.hero-bio summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--amber);
}
.hero-bio summary::-webkit-details-marker{ display:none; }
.hero-bio summary::after{ content:'+'; font-size:1.1rem; line-height:1; }
.hero-bio[open] summary::after{ content:'−'; }
.bio-summary-note{
  margin-left:auto;
  color:var(--ink-dim);
  font-size:0.7rem;
  letter-spacing:0.03em;
  text-transform:none;
}
.hero-bio-content{ padding-top:16px; }
.hero-bio[open] .hero-bio-content{ animation:bioReveal 0.18s ease-out; }
@keyframes bioReveal{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.search-box{ z-index:35; }
.search-suggestions{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  right:0;
  min-width:min(420px, 88vw);
  max-height:360px;
  overflow:auto;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 16px 38px rgba(0,0,0,0.42);
  padding:6px;
  z-index:80;
}
.search-suggestions[hidden]{ display:none; }
.search-suggestion{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--ink);
  text-align:left;
  padding:10px 11px;
  cursor:pointer;
}
.search-suggestion:hover,.search-suggestion.active{ background:var(--bg-panel-2); }
.search-suggestion span{ display:flex; flex-direction:column; min-width:0; }
.search-suggestion strong{ font-family:'Source Sans 3',sans-serif; font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggestion small{ font-family:'JetBrains Mono',monospace; color:var(--ink-dim); font-size:0.67rem; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggestion em{ flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-style:normal; font-size:0.64rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber); }

.smart-related li a{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.smart-related li a small{ flex:0 0 auto; color:var(--ink-dim); font-family:'JetBrains Mono',monospace; font-size:0.68rem; font-weight:400; }

@media (max-width:700px){
  .hero-bio summary{ align-items:flex-start; }
  .bio-summary-note{ max-width:52%; text-align:right; }
  .search-suggestions{ min-width:0; width:100%; max-height:52svh; }
  .smart-related li a{ align-items:flex-start; flex-direction:column; gap:3px; }
}

/* ---------- COMPACT HOMEPAGE HERO ---------- */
.hero-intro-short{
  margin-bottom:12px !important;
}
.hero-intro-more{
  max-width:560px;
  margin:0 0 22px;
}
.hero-intro-more summary{
  width:max-content;
  list-style:none;
  cursor:pointer;
  color:var(--amber);
  font-family:'JetBrains Mono',monospace;
  font-size:0.74rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:3px 0;
}
.hero-intro-more summary::-webkit-details-marker{ display:none; }
.hero-intro-more summary::after{
  content:' +';
}
.hero-intro-more[open] summary::after{
  content:' −';
}
.hero-intro-more p{
  margin:12px 0 0;
  color:var(--ink-dim);
  font-size:0.96rem;
  line-height:1.6;
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px 28px;
  max-width:760px;
  margin-top:18px;
}
.hero-stat{
  min-width:0;
}
.hero-stat .num{
  font-size:1.3rem;
  line-height:1.05;
}
.hero-stat .label{
  display:block;
  margin-top:5px;
  font-size:0.66rem;
  line-height:1.35;
  letter-spacing:0.09em;
}

@media (max-width:700px){
  .hero{
    padding:calc(34px + env(safe-area-inset-top)) 6vw 26px;
  }
  .hero-eyebrow{
    font-size:0.67rem;
    letter-spacing:0.14em;
    margin-bottom:10px;
  }
  .hero h1{
    font-size:clamp(2.85rem,15vw,4.35rem);
    line-height:0.9;
    margin-bottom:14px;
  }
  .hero p.sub{
    max-width:none;
    font-size:0.96rem;
    line-height:1.5;
  }
  .hero-intro-more{
    margin-bottom:16px;
  }
  .hero-intro-more summary{
    font-size:0.68rem;
  }
  .hero-intro-more p{
    font-size:0.92rem;
    line-height:1.55;
  }
  .hero-bio{
    margin-top:14px;
  }
  .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 18px;
    margin-top:20px;
  }
  .hero-stat .num{
    font-size:1.28rem;
  }
  .hero-stat .label{
    font-size:0.60rem;
    letter-spacing:0.07em;
  }
  .hero-span-line{
    font-size:0.72rem;
    line-height:1.45;
    margin-top:12px;
  }
}


/* ---------- SMALLER MOBILE SEARCH + MAP SCROLL STABILITY ---------- */
@media (max-width:700px){
  /* Keep the input at 16px to prevent Safari focus zoom, but make the
     physical control slightly narrower and shorter than the full row. */
  .search-box{
    flex:0 1 360px;
    width:min(100%,360px);
    max-width:360px;
  }
  .search-input{
    width:100%;
    padding:6px 10px 6px 30px;
    border-radius:18px;
    line-height:1.25;
  }
  .search-input:focus{ width:100%; }
  .search-box svg{ left:11px; width:12px; height:12px; }
}

/* View-on-map opens the existing full-screen map overlay; preserve the
   underlying card position and keep the compact mobile search control. */
@media (max-width: 700px){
  .search-box{
    flex: 0 1 340px;
    max-width: 340px;
    width: 100%;
  }
  .search-input{
    min-height: 38px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}


/* ---------- MAP ABOVE PEAKS + VIEW-ON-MAP FOCUS ---------- */
.map-section{
  padding-top: 34px;
  padding-bottom: 12px;
  scroll-margin-top: 12px;
}
.map-marker-wrap.map-marker-pulse .map-marker{
  animation: summit-map-pulse 0.62s ease-out 0s 2;
}
@keyframes summit-map-pulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(226,150,63,.55),0 4px 12px rgba(0,0,0,.45); }
  50%{ transform:scale(1.28); box-shadow:0 0 0 11px rgba(226,150,63,0),0 7px 18px rgba(0,0,0,.55); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(226,150,63,0),0 4px 12px rgba(0,0,0,.45); }
}
@media (max-width:700px){
  .map-section{ padding-top:24px; padding-bottom:4px; }
  .map-caption{ line-height:1.45; }
}
@media (prefers-reduced-motion: reduce){
  .map-marker-wrap.map-marker-pulse .map-marker{ animation:none; box-shadow:0 0 0 5px rgba(226,150,63,.22),0 4px 12px rgba(0,0,0,.5); }
}