/* Trekpeek blog: cinematic headers, a reading column that teaches (answer box, stats, chart, FAQ), and small motion everywhere.
   Builds on site.css (colours, .mhead, .tc cards, .seeall, .cmp tables). All motion is CSS except the stat counters. */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}

/* reading progress: a cream line across the top that fills as you scroll */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:50;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){.progress{animation:fill linear both;animation-timeline:scroll(root)}}
@keyframes fill{to{transform:scaleX(1)}}

/* post header extras */
.mhead .byline{margin-top:18px;font-size:14px;color:rgba(255,255,255,.7);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .5s both}

/* layout: sticky table of contents beside the article on wide screens */
.postwrap{display:grid;gap:56px;padding-top:var(--sy)}
@media (min-width:1100px){.postwrap{grid-template-columns:240px minmax(0,72ch);justify-content:center}}
.toc{align-self:start;position:sticky;top:32px;font-size:14px}
.toc b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;color:rgba(255,255,255,.72);text-decoration:none;transition:color .3s,border-color .3s,padding .3s}
.toc a:hover{color:var(--accent);border-color:var(--accent);padding-left:22px}
@media (max-width:1099px){.toc{display:none}}

/* article typography */
.post{font-size:18px;line-height:1.75;min-width:0}
.post h2{font-size:clamp(26px,2.6vw,36px);margin:64px 0 16px;scroll-margin-top:24px}
.post h3{font-size:21px;letter-spacing:-.03em;margin:34px 0 10px}
.post p,.post li{color:rgba(255,255,255,.86)}
.post b{color:#fff}
.post a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.post a:hover{color:#fff}
.post ul,.post ol{padding-left:22px}.post li{margin:8px 0}
.post code{font-size:15px;background:var(--panel);padding:2px 7px;border-radius:6px}
.post blockquote{margin:36px 0;padding:20px 24px;border-left:3px solid var(--accent);background:var(--panel);border-radius:0 16px 16px 0;color:rgba(255,255,255,.86)}
.post .tablewrap{margin:28px 0}

/* the 30-second answer: a card with a slowly circling cream border */
.tldr{position:relative;padding:26px 28px;border-radius:22px;background:var(--panel);isolation:isolate;margin:0 0 28px}
.tldr::before{content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--spin),transparent 0 62%,rgba(229,252,201,.9) 78%,transparent 92%);animation:spin 6s linear infinite}
.tldr::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--panel)}
@keyframes spin{to{--spin:360deg}}
.tldr b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.tldr ul{margin:0;padding-left:20px}.tldr li{margin:6px 0;color:#fff}

/* stat cards: big numbers that count up */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 36px}
.stat{padding:20px 18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(229,252,201,.07),transparent 60%);transition:transform .4s,border-color .4s}
.stat:hover{transform:translateY(-4px);border-color:rgba(229,252,201,.35)}
.stat b{display:block;font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--mute)}

/* altitude chart: the line draws itself */
.chart{margin:8px 0 40px;padding:22px 18px 8px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.chart figcaption{font-size:14px;color:var(--mute);margin:0 0 6px 6px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.chart circle{fill:var(--bg);stroke:var(--accent);stroke-width:3}
.chart text{font:600 13px Inter,sans-serif;fill:#fff;text-anchor:middle}.chart text.l{font-weight:500;fill:var(--mute)}
@supports (animation-timeline:view()){
  .chart .line{animation:draw linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
  .chart .area,.chart circle,.chart text{animation:fadein linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
}
@keyframes draw{from{stroke-dashoffset:1}}@keyframes fadein{from{opacity:0}}

/* cinematic photos inside the article: wide, rounded, slowly settling as they enter */
.cine{margin:52px 0 8px}
.cine .frame{overflow:hidden;border-radius:22px;aspect-ratio:21/10}
.cine img{width:100%;height:100%;object-fit:cover;display:block}
.cine figcaption{font-size:13px;color:var(--mute);margin-top:10px}
@supports (animation-timeline:view()){.cine img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 60%}}
@keyframes settle{from{transform:scale(1.18)}}

/* FAQ accordion */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 40px 16px 0;position:relative;font-weight:600;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:24px;color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;animation:rise .5s cubic-bezier(.2,.7,.2,1)}

/* post cards (index, related) */
.pcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:22px}
.pc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel);text-decoration:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s,box-shadow .5s}
.pc:hover{transform:translateY(-6px);border-color:rgba(229,252,201,.3);box-shadow:0 0 50px -14px rgba(229,252,201,.4)}
.pc .im{aspect-ratio:16/10;overflow:hidden}
.pc img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.pc:hover img{transform:scale(1.08)}
.pc .tx{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc h3{margin:0;font-size:22px;letter-spacing:-.035em;line-height:1.2;color:#fff}
.pc p{margin:0;font-size:15px;color:var(--mute);flex:1}
.pc .rt{font-size:14px;font-weight:600;color:var(--accent);transition:letter-spacing .3s}
.pc:hover .rt{letter-spacing:.02em}
.chip{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:80px;background:rgba(229,252,201,.12);color:var(--accent)}
.pc.big{display:grid}
@media (min-width:900px){.pc.big{grid-template-columns:1.25fr 1fr}.pc.big .im{aspect-ratio:auto;min-height:420px}.pc.big h3{font-size:clamp(28px,3vw,40px)}.pc.big .tx{padding:40px;justify-content:center}}
@supports (animation-timeline:view()){.pc{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 45%}}

/* index hero: full-bleed video, headline words rise one after another */
.bhero{position:relative;min-height:min(86svh,820px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:120px 0 clamp(48px,9vh,96px)}
.bhero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:push 24s ease-out both}
.bhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,52,42,.6),rgba(3,52,42,.1) 35%,rgba(3,52,42,.55) 70%,var(--bg))}
.bhero .crumb{position:absolute;top:24px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.85)}
.bhero .crumb .logo img{height:26px;width:auto;display:block}
.bhero h1{font-size:clamp(44px,8vw,112px);font-weight:600;letter-spacing:-.06em;line-height:.96;margin:0 0 20px;max-width:12ch}
.bhero h1 span{display:inline-block;animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.bhero h1 span:nth-child(2){animation-delay:.08s}.bhero h1 span:nth-child(3){animation-delay:.16s}.bhero h1 span:nth-child(4){animation-delay:.24s}.bhero h1 span:nth-child(5){animation-delay:.32s}.bhero h1 span:nth-child(6){animation-delay:.4s}
.bhero p{max-width:56ch;font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.86);margin:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) .55s both}
.bhero .cap{position:absolute;right:var(--pad);bottom:16px;font-size:12px;color:rgba(255,255,255,.6)}
.blogmain .feat{padding-top:var(--sy)}

/* type filter: radio chips, no script */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.filter input{position:absolute;opacity:0;pointer-events:none}
.filter label{cursor:pointer;font-size:15px;font-weight:500;padding:10px 18px;border-radius:80px;border:1px solid rgba(255,255,255,.18);transition:background .3s,color .3s,border-color .3s,transform .3s}
.filter label:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.filter input:checked+label{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.filter input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.blogmain:has(#f-planning:checked) .all .pc:not([data-type=planning]),
.blogmain:has(#f-safety:checked) .all .pc:not([data-type=safety]),
.blogmain:has(#f-compare:checked) .all .pc:not([data-type=compare]),
.blogmain:has(#f-season:checked) .all .pc:not([data-type=season]),
.blogmain:has(#f-trek:checked) .all .pc:not([data-type=trek]){display:none}