/* Elevate Terrain: site styles
   Concept: a field survey of steep ground. Mist-green paper, forest ink, kraft from the logo,
   wet-basalt plates for photographs, and real contour lines (img/topo.svg) as the one signature. */

:root{
  /* Brand palette (see BRAND.md) */
  --mist:      #EAEDE6;   /* reading surface: waterfall spray */
  --mist-2:    #DCE1D6;
  --paper:     #F6F7F3;   /* cards and forms */
  --ink:       #1A261C;   /* body text */
  --ink-soft:  #4E5D4A;
  --moss:      #5C6F55;   /* secondary lines and captions */
  --forest:    #1F3B2D;   /* primary: logo green */
  --kraft:     #D4A574;   /* accent: logo kraft, bands and rules */
  --kraft-lt:  #EBD7B8;
  --basalt:    #121712;   /* wet rock: photo plates */
  --basalt-2:  #1D241C;
  --line:      rgba(31,59,45,.2);
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Barlow", system-ui, sans-serif;
  --cond:  "Barlow Condensed", "Barlow", sans-serif;
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 40px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; background:var(--mist); color:var(--ink); font:400 1.0625rem/1.6 var(--sans) }
img{ max-width:100%; display:block }
a{ color:var(--forest); text-underline-offset:.18em }
a:hover{ color:var(--ink) }
:focus-visible{ outline:3px solid var(--kraft); outline-offset:3px }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut) }
.skip{ position:absolute; left:-999px; top:8px; background:var(--forest); color:#fff; padding:.5rem .8rem; z-index:50 }
.skip:focus{ left:8px }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--forest); line-height:1.02; margin:0 0 .5em; letter-spacing:-.022em; font-optical-sizing:auto }
h1{ font-size:clamp(3rem, 8.4vw, 7.2rem) }
h2{ font-size:clamp(2.1rem, 4.6vw, 3.6rem) }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.7rem); line-height:1.15; font-weight:600; letter-spacing:-.01em }
p{ margin:0 0 1em; max-width:66ch }
.lede{ font-size:clamp(1.15rem, 1.8vw, 1.35rem); color:var(--ink-soft); max-width:58ch }
.note{ font-family:var(--cond); font-weight:500; font-size:.95rem; letter-spacing:.02em; color:var(--ink-soft) }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5em; padding:.8em 1.35em; border-radius:999px; font:600 1rem/1 var(--sans);
  text-decoration:none; border:2px solid var(--forest); background:var(--forest); color:#F3F1EA; transition:background .2s, color .2s }
.btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff }
.btn.ghost{ background:transparent; color:var(--forest) }
.btn.ghost:hover{ background:var(--forest); color:#fff }
.btn.light{ background:var(--kraft); border-color:var(--kraft); color:var(--basalt) }
.btn.light:hover{ background:#fff; border-color:#fff }
.btn.outline-light{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff }
.btn.outline-light:hover{ background:#fff; color:var(--basalt) }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:40; background:rgba(231,235,227,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line) }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:78px }
.brand{ font-family:var(--serif); font-weight:700; font-size:1.35rem; color:var(--forest); text-decoration:none; letter-spacing:.01em; display:flex; align-items:center; gap:.55rem }
.brand svg{ width:30px; height:30px; flex:none }
.nav{ display:flex; align-items:center; gap:clamp(.8rem, 2vw, 1.8rem) }
.nav a{ color:var(--ink); text-decoration:none; font-weight:500 }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--forest); text-decoration:underline; text-decoration-color:var(--kraft); text-decoration-thickness:3px }
.nav .btn{ color:#F3F1EA; text-decoration:none }
.menu-btn{ display:none; background:none; border:2px solid var(--forest); border-radius:8px; padding:.4rem .6rem; font:600 .95rem var(--sans); color:var(--forest) }
@media (max-width: 860px){
  .menu-btn{ display:block }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:flex-start; gap:0;
        background:var(--mist); border-bottom:1px solid var(--line); padding:.5rem var(--gut) 1.2rem }
  .nav.open{ display:flex }
  .nav a{ padding:.7rem 0; width:100% }
  .nav .btn{ width:auto; margin-top:.5rem; padding:.8em 1.35em }
}

/* ---------- hero (the signature: photo + live contour overlay) ---------- */
.hero{ position:relative; min-height:min(92vh, 860px); display:flex; align-items:flex-end; color:#fff; background:var(--basalt); overflow:hidden }
.hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40% }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,24,19,.15) 0%, rgba(19,24,19,.25) 45%, rgba(19,24,19,.82) 100%) }
.topo-overlay{ position:absolute; inset:0; z-index:1; color:var(--kraft); opacity:0; mix-blend-mode:screen;
  -webkit-mask:url(img/topo.svg) center/cover no-repeat; mask:url(img/topo.svg) center/cover no-repeat; background:currentColor;
  animation:topo-in 2.4s .3s ease-out forwards }
@keyframes topo-in{ from{ opacity:0; transform:scale(1.04) } to{ opacity:.42; transform:scale(1) } }
.hero .wrap{ position:relative; z-index:2; width:100%; padding-bottom:clamp(2.5rem, 7vh, 5rem); padding-top:6rem }
.hero h1{ color:#fff; max-width:12ch }
.hero .lede{ color:rgba(255,255,255,.88) }
.credit{ position:absolute; right:var(--gut); bottom:1rem; z-index:2; font:500 .8rem var(--cond); letter-spacing:.03em; color:rgba(255,255,255,.7) }

/* page hero (inner pages) */
.page-hero{ position:relative; padding:clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 3.5rem); overflow:hidden; border-bottom:1px solid var(--line) }
.page-hero::before{ content:""; position:absolute; inset:-10% -10% -10% 35%; color:var(--forest); opacity:.12; background:currentColor;
  -webkit-mask:url(img/topo.svg) center/cover no-repeat; mask:url(img/topo.svg) center/cover no-repeat; pointer-events:none }
.page-hero .wrap{ position:relative }

/* ---------- sections ---------- */
section{ padding:clamp(3.5rem, 8vw, 6.5rem) 0 }
.rule{ height:14px; margin:0; border:0; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 C30 1 60 13 90 7 S150 1 180 7 S225 12 240 7' fill='none' stroke='%231F3B2D' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x center/240px 14px }

/* proof sentence */
.proof{ padding:clamp(2.5rem, 6vw, 4.5rem) 0 }
.proof p{ font-family:var(--serif); font-size:clamp(1.45rem, 3.2vw, 2.35rem); line-height:1.3; color:var(--forest); max-width:34ch; margin:0 }
.proof p span{ color:var(--ink-soft) }

/* services index: ruled rows, not cards */
.svc-list{ list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--line) }
.svc-list li{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 160px; gap:clamp(1rem, 3vw, 2.5rem); align-items:center;
  padding:1.6rem 0; border-bottom:1px solid var(--line) }
.svc-list h3{ margin:0 }
.svc-list p{ margin:0; color:var(--ink-soft) }
.svc-list .thumb{ aspect-ratio:4/3; overflow:hidden; border-radius:4px; background:var(--mist-2) }
.svc-list .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s }
.svc-list li:hover .thumb img{ transform:scale(1.05) }
.svc-list a.more{ font-weight:600; white-space:nowrap }
@media (max-width: 760px){
  .svc-list li{ grid-template-columns:1fr 110px; }
  .svc-list li > div:nth-child(2){ grid-column:1 / -1; grid-row:2 }
}

/* split: photo + text */
.split{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1.5rem, 5vw, 4.5rem); align-items:center }
.split.flip > :first-child{ order:2 }
.split figure{ margin:0 }
.split figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px }
@media (max-width: 820px){ .split{ grid-template-columns:1fr } .split.flip > :first-child{ order:0 } }
figcaption{ font:500 .85rem var(--cond); letter-spacing:.03em; color:var(--ink-soft); margin-top:.55rem }

/* quote */
.quote{ font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem, 3.4vw, 2.5rem); line-height:1.25; color:var(--forest); margin:0 0 1rem; max-width:22ch }
.quote-by{ font-family:var(--cond); font-size:1rem; color:var(--ink-soft) }

/* dark plate */
.plate{ background:var(--basalt); color:#E9ECE6 }
.plate h2, .plate h3{ color:#fff }
.plate p{ color:rgba(233,236,230,.82) }
.plate a:not(.btn){ color:var(--kraft) }
.plate .split figure img{ aspect-ratio:3/4 }

/* kraft band with contour lines */
.band{ position:relative; background:var(--kraft); color:var(--basalt); overflow:hidden }
.band::before{ content:""; position:absolute; inset:0; color:var(--forest); opacity:.18; background:currentColor;
  -webkit-mask:url(img/topo.svg) center/cover no-repeat; mask:url(img/topo.svg) center/cover no-repeat }
.band .wrap{ position:relative }
.band h2{ color:var(--basalt) }
.band p{ color:#3A3326 }

/* photo row */
.photo-row{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px }
.photo-row img{ width:100%; height:clamp(220px, 32vw, 420px); object-fit:cover; border-radius:3px }
@media (max-width: 700px){ .photo-row{ grid-template-columns:1fr 1fr } .photo-row img:first-child{ grid-column:1 / -1 } }

/* service detail blocks */
.svc{ scroll-margin-top:90px }
.svc + .svc{ border-top:1px solid var(--line) }
.checks{ list-style:none; padding:0; margin:1rem 0 0 }
.checks li{ position:relative; padding:.55rem 0 .55rem 1.6rem; border-bottom:1px dashed var(--line); max-width:62ch }
.checks li::before{ content:""; position:absolute; left:0; top:1.05rem; width:.8rem; height:2px; background:var(--kraft) }
.checks li strong{ color:var(--forest) }
.steps{ counter-reset:s; list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:1rem }
.steps li{ counter-increment:s; display:grid; grid-template-columns:2.6rem 1fr; gap:.8rem; align-items:start }
.steps li::before{ content:counter(s); font:600 1.25rem/2.4rem var(--serif); width:2.4rem; height:2.4rem; text-align:center; border:2px solid var(--forest); border-radius:50%; color:var(--forest) }
.tag{ display:inline-block; font:600 .8rem var(--cond); letter-spacing:.04em; padding:.2rem .6rem; border-radius:999px; background:var(--kraft-lt); color:#5A4524; margin-bottom:.8rem }

/* trip styles / courses: varied blocks */
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(1rem, 3vw, 2rem) }
@media (max-width: 760px){ .grid-2{ grid-template-columns:1fr } }
.block{ padding:1.6rem 0 0; border-top:3px solid var(--forest) }
.block p{ color:var(--ink-soft) }
.course{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:clamp(1.3rem, 3vw, 2.2rem) }
.course + .course{ margin-top:1.5rem }
.course h2{ font-size:clamp(1.6rem, 2.8vw, 2.1rem) }
.modules{ columns:2 260px; column-gap:2rem; padding-left:1.2rem; margin:1rem 0 0 }
.modules li{ break-inside:avoid; margin-bottom:.7rem }
.modules li::marker{ font-family:var(--serif); font-weight:700; color:var(--forest) }

/* faq */
.faq details{ border-bottom:1px solid var(--line); padding:1rem 0 }
.faq summary{ cursor:pointer; font:600 1.1rem var(--sans); color:var(--forest); list-style:none; display:flex; justify-content:space-between; gap:1rem }
.faq summary::after{ content:"+"; font:400 1.5rem/1 var(--serif) }
.faq details[open] summary::after{ content:"−" }
.faq details p{ margin:.6rem 0 0 }

/* credentials */
.creds{ list-style:none; padding:0; margin:1rem 0 0; border-top:1px solid var(--line) }
.creds li{ padding:.8rem 0; border-bottom:1px solid var(--line); display:flex; gap:1rem; align-items:baseline }
.creds li::before{ content:""; flex:none; width:10px; height:10px; border:2px solid var(--forest); border-radius:50%; transform:translateY(1px) }

/* image placeholder: Renan flags what to shoot */
.ph{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:260px; aspect-ratio:4/5; padding:1.5rem;
  border:2px dashed #B5895A; border-radius:4px; background:repeating-linear-gradient(45deg, rgba(212,165,116,.12) 0 12px, transparent 12px 24px);
  font:600 1rem/1.4 var(--cond); letter-spacing:.03em; color:#7A5A33 }
.ph.wide{ aspect-ratio:16/9 }

/* contact form */
.form{ display:grid; gap:1rem; max-width:640px }
.form label{ display:grid; gap:.35rem; font-weight:600; color:var(--forest) }
.form input, .form select, .form textarea{ font:400 1rem var(--sans); color:var(--ink); padding:.75rem .85rem; border:1.5px solid #9AA595; border-radius:6px; background:#fff }
.form input:focus, .form select:focus, .form textarea:focus{ outline:3px solid var(--kraft); outline-offset:1px; border-color:var(--forest) }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width: 600px){ .form .row{ grid-template-columns:1fr } }

/* footer */
.site-foot{ background:var(--forest); color:#D9E0D6; padding:3rem 0 2rem }
.site-foot a{ color:#fff; text-decoration:none }
.site-foot a:hover{ text-decoration:underline }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem }
.foot-grid .brand{ color:#fff }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem }
.foot-small{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.18); font-size:.9rem; color:#B9C4B5 }
@media (max-width: 700px){ .foot-grid{ grid-template-columns:1fr } }

/* ---------- v2 additions ---------- */

/* hero video */
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 70% }

/* two doors: the visitor picks a path right under the hero */
.doors{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line) }
.door{ position:relative; display:block; padding:clamp(2rem, 5vw, 3.6rem) var(--gut); text-decoration:none; color:var(--ink); transition:background .25s }
.door + .door{ border-left:1px solid var(--line) }
.door:hover{ background:var(--paper) }
.door .who{ font:600 1rem var(--cond); letter-spacing:.03em; color:var(--moss); display:block; margin-bottom:.6rem }
.door h2{ font-size:clamp(1.8rem, 3.6vw, 2.8rem); margin-bottom:.4em }
.door p{ color:var(--ink-soft); margin-bottom:1.3rem }
.door .go{ font-weight:600; color:var(--forest); border-bottom:2px solid var(--kraft); padding-bottom:2px }
/* line the doors up with the page grid */
.door:first-child{ padding-left:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) }
.door:last-child{ padding-right:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) }
@media (max-width: 760px){ .doors{ grid-template-columns:1fr } .door + .door{ border-left:0; border-top:1px solid var(--line) } }

/* trust strip: credentials divided by hairlines */
.trust{ border-bottom:1px solid var(--line); background:var(--paper) }
.trust ul{ list-style:none; margin:0 auto; padding:1.1rem var(--gut); max-width:var(--wrap); display:flex; flex-wrap:wrap; gap:.6rem 0 }
.trust li{ font:500 1rem/1.3 var(--cond); letter-spacing:.02em; color:var(--forest); padding:0 .95rem; border-left:1px solid var(--line) }
@media (max-width: 760px){ .trust ul{ display:grid; gap:.45rem } .trust li{ border-left:0; padding:0 } }
.trust li:first-child{ padding-left:0; border-left:0 }

/* section heads: a hairline above every major heading, like a manual chapter */
.sec-head{ border-top:1px solid var(--forest); padding-top:1.1rem; margin-bottom:2rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:end }
.sec-head h2{ margin:0 }
.sec-head p{ margin:0; color:var(--ink-soft) }
@media (max-width: 760px){ .sec-head{ grid-template-columns:1fr; gap:.8rem } }

/* field-note captions: a logbook entry under each photo */
figcaption.fn{ display:flex; gap:.7rem; align-items:baseline; font:500 .92rem/1.35 var(--cond); letter-spacing:.02em; color:var(--ink-soft); margin-top:.7rem }
figcaption.fn time{ flex:none; padding:.08rem .45rem; border:1px solid var(--moss); border-radius:3px; color:var(--forest); font-weight:600 }
.plate figcaption.fn{ color:#AEB8AA } .plate figcaption.fn time{ color:var(--kraft); border-color:rgba(212,165,116,.55) }

/* work page */
.project{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1.5rem, 4vw, 3.5rem); padding:clamp(2.5rem, 6vw, 4.5rem) 0; border-top:1px solid var(--line) }
.project:first-of-type{ border-top:0 }
.project .facts{ display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; margin:1.2rem 0 0; padding:1rem 0 0; border-top:1px solid var(--line); font-size:.98rem }
.project .facts dt{ font:600 .95rem var(--cond); letter-spacing:.02em; color:var(--moss) }
.project .facts dd{ margin:0 }
.project .gallery{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start }
.project .gallery img, .project .gallery .ph{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; min-height:0 }
.project .gallery img:first-child{ grid-column:1 / -1; aspect-ratio:16/10 }
@media (max-width: 820px){ .project{ grid-template-columns:1fr } }

/* before / after pairs */
.ba-set{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(.8rem, 2vw, 1.5rem); margin-top:1.2rem }
.ba{ margin:0 }
.ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:4px }
.ba-pair div{ position:relative }
.ba-pair img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px }
.ba-pair span{ position:absolute; left:6px; top:6px; font:600 .78rem var(--cond); letter-spacing:.04em; padding:.12rem .45rem; border-radius:3px; background:rgba(18,23,18,.78); color:#fff }
.ba-pair div:last-child span{ background:var(--kraft); color:var(--basalt) }
@media (max-width: 820px){ .ba-set{ grid-template-columns:1fr } }

/* mobile sticky action */
.mobile-cta{ display:none }
@media (max-width: 760px){
  .mobile-cta{ display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:45; justify-content:center;
    padding:.95rem 1rem; border-radius:999px; background:var(--forest); color:#fff; font-weight:600; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.25) }
  body{ padding-bottom:76px }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
  .topo-overlay{ opacity:.42 }
}

/* real logo in header/footer */
.brand img{ display:block; height:62px; width:auto }
.site-foot .brand img{ height:64px }


/* phone hero: the vertical clip keeps the rappeller near the top; push copy to the bottom */
@media (max-width: 760px) and (orientation: portrait){ .hero .hero-video{ object-position:25% 15% } .hero{ min-height:88svh } }


/* readable text on dark plates */
.plate .block p{ color:rgba(233,236,230,.82) }
.plate .block h3{ color:#fff }


/* ---------- articles ---------- */
.post-hero{ position:relative; min-height:min(70vh,620px); display:flex; align-items:flex-end; color:#fff; background:var(--basalt); overflow:hidden }
.post-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.post-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,24,19,.1), rgba(19,24,19,.85)) }
.post-hero .wrap{ position:relative; z-index:1; padding-bottom:clamp(2rem,6vh,4rem); padding-top:5rem }
.post-hero h1{ color:#fff; font-size:clamp(2.3rem,5.4vw,4.4rem); max-width:18ch }
.post-hero .lede{ color:rgba(255,255,255,.88) }
.post-kicker{ color:var(--kraft) !important; margin-bottom:.6rem }
.post-body{ max-width:820px; padding-top:clamp(2rem,5vw,3.5rem); padding-bottom:clamp(3rem,7vw,5rem) }
.post-body h2{ font-size:clamp(1.8rem,3.4vw,2.5rem); margin-top:2.8rem; scroll-margin-top:90px }
.post-body h3{ margin-top:1.8rem; margin-bottom:.4rem }
.post-body p, .post-body li{ font-size:1.08rem }
.post-body figure{ margin:2rem 0 }
.post-body figure.wide img{ width:100%; border-radius:4px; max-height:560px; object-fit:cover }
.post-body figure.half-right{ float:right; width:min(42%,320px); margin:0 0 1rem 1.5rem }
.post-body figure.half-right img{ border-radius:4px; aspect-ratio:3/4; object-fit:cover; width:100% }
@media (max-width:640px){ .post-body figure.half-right{ float:none; width:100%; margin:1.5rem 0 } }
.post-body h2{ clear:both }
.toc{ background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:1.1rem 1.4rem; margin-bottom:2rem }
.toc ol{ margin:.5rem 0 0; padding-left:1.2rem; columns:2 220px }
.toc a{ text-decoration:none } .toc a:hover{ text-decoration:underline }
.post-author{ display:flex; gap:1.2rem; align-items:center; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--forest) }
.post-author img{ width:88px; height:88px; border-radius:50%; object-fit:cover; flex:none }
.post-author p{ margin:.3rem 0 0; color:var(--ink-soft); font-size:1rem }
.guide-list{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.6rem }

.table-wrap{ overflow-x:auto; margin:1rem 0 2rem; border:1px solid var(--line); border-radius:6px }
.hike-table{ width:100%; border-collapse:collapse; font-size:.98rem; min-width:620px }
.hike-table th{ text-align:left; font:600 .95rem var(--cond); letter-spacing:.02em; color:var(--forest); background:var(--paper); padding:.7rem .9rem; border-bottom:1px solid var(--forest) }
.hike-table td{ padding:.65rem .9rem; border-bottom:1px solid var(--line); vertical-align:top }
.hike-table tr:last-child td{ border-bottom:0 }
.post-body .band p, .post-body .band h2{ color:var(--basalt) }


/* guides index */
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,320px),1fr)); gap:clamp(1rem,2.5vw,1.8rem) }
.guide-card{ display:block; text-decoration:none; color:var(--ink); border-top:3px solid var(--forest); padding-top:1rem }
.guide-card img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:4px; margin-bottom:.9rem; transition:transform .4s }
.guide-card:hover img{ transform:scale(1.02) }
.guide-card h2{ font-size:clamp(1.35rem,2.2vw,1.65rem); margin:.4rem 0 }
.guide-card p{ color:var(--ink-soft); margin:0 }
.guide-card:hover h2{ text-decoration:underline; text-decoration-color:var(--kraft); text-decoration-thickness:3px }