/* ============================================================
   Slow Roads: theme. Topo-map paper, forest ink, trail orange.
   Bricolage Grotesque for headings, Newsreader for long reading.
   Light and dark, remembered per reader. The walk's elevation
   profile is the one graphic idea, used for progress and posts.
   ============================================================ */
@layer theme {
:root{
  --canvas:#ECEFE6; --surface:#F5F7F1; --ink:#1E2621; --muted:#56615A; --line:#CBD2C4; --line-strong:#96A08F;
  --primary:#24302A; --primary-hover:#334139; --on-primary:#EEF2EA;
  --accent:#C24E19; --accent-hover:#A9420F; --on-accent:#FBF7F2; --accent-text:#A9420F;
  --focus:#A9420F; --focus-ring:rgb(169 66 15/.2); --error:#A3261B; --ph-bg:#D5DBCD;
  --header-bg:#ECEFE6; --footer-bg:#24302A; --on-footer:#DDE4D8;
  --prof-fill:#D3DACB; --prof-line:#56615A;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif; --font-body:'Newsreader',Georgia,serif; --font-ui:'Bricolage Grotesque',system-ui,sans-serif;
  --radius:6px; --radius-sm:6px; --radius-lg:10px; --radius-btn:999px;
  --header-h:4.25rem; --text-base:clamp(1.08rem,1rem + .3vw,1.2rem);
  --select-arrow:none;
}
/* dark: the reader's saved choice, otherwise their system */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --canvas:#151A17; --surface:#1D241F; --ink:#E6EBE2; --muted:#A7B1A6; --line:#2F3933; --line-strong:#4C574F;
  --primary:#E6EBE2; --primary-hover:#F6F8F3; --on-primary:#151A17;
  --accent:#E36A33; --accent-hover:#F08454; --on-accent:#151A17; --accent-text:#F08454;
  --focus:#F08454; --ph-bg:#252D28; --header-bg:#151A17; --footer-bg:#0F1311; --prof-fill:#26302A; --prof-line:#A7B1A6;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#151A17; --surface:#1D241F; --ink:#E6EBE2; --muted:#A7B1A6; --line:#2F3933; --line-strong:#4C574F;
  --primary:#E6EBE2; --primary-hover:#F6F8F3; --on-primary:#151A17;
  --accent:#E36A33; --accent-hover:#F08454; --on-accent:#151A17; --accent-text:#F08454;
  --focus:#F08454; --ph-bg:#252D28; --header-bg:#151A17; --footer-bg:#0F1311; --prof-fill:#26302A; --prof-line:#A7B1A6;
}
body[data-texture="paper"]{background-image:radial-gradient(color-mix(in srgb,var(--line-strong) 30%,transparent) .8px,transparent 1px);background-size:9px 9px}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.02}
.btn,.meta,.site-nav,.tag-filter,.toc,.toc-title,.cl-read,.cl-ticks,.copy-link,.sample-tag,.note-by,.crumbs,.field label,.demo-only,.pr-shape span{font-family:var(--font-ui)}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.theme-vt::view-transition-old(root){z-index:1}
.theme-vt::view-transition-new(root){z-index:2}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:1.35rem;letter-spacing:-.04em}
.brand-mark{background:var(--accent);color:var(--on-accent);border-radius:50%}
.theme-toggle{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-strong);color:var(--ink);
  transition:background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
@media (hover:hover){ .theme-toggle:hover{background:var(--surface)} }
.theme-toggle:active{transform:scale(.92)}
.theme-toggle .ico-sun{display:none}
.theme-toggle[aria-pressed="true"] .ico-sun{display:block}
.theme-toggle[aria-pressed="true"] .ico-moon{display:none}
@media (min-width:900px){ .site-nav{margin-right:.5rem} }

/* ---------- meta and tags ---------- */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;font-size:.88rem;color:var(--muted);font-weight:500}
.tag{display:inline-flex;padding:.2rem .65rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}

/* ---------- featured post ---------- */
.featured{padding-block:clamp(1.5rem,4vw,3rem)}
.feat-grid{display:grid;gap:2rem;align-items:center}
.feat-photo .ph{border-radius:var(--radius-lg)}
.feat-copy{display:grid;gap:1.1rem}
.featured h1{font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.045em}
.featured h1 a{text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 3px;background-position:0 95%;background-repeat:no-repeat;
  transition:background-size var(--dur-slow) var(--ease-out)}
@media (hover:hover){ .featured h1 a:hover{background-size:100% 3px} }
.feat-dek{font-size:1.25rem;color:var(--muted);font-style:italic;max-width:30rem}
.feat-prof svg{width:100%;height:auto;max-height:7rem}
.fp-fill{fill:var(--prof-fill)}
.fp-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.feat-prof p{display:flex;justify-content:space-between;font-family:var(--font-ui);font-size:.8rem;color:var(--muted);font-weight:600}
.feat-prof strong{color:var(--ink)}
@media (min-width:900px){ .feat-grid{grid-template-columns:1.25fr .75fr;gap:3.5rem} }

/* ---------- post list ---------- */
.posts-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2rem}
.tag-filter [role="group"]{display:flex;flex-wrap:wrap;gap:.4rem}
.tag-filter button{min-height:44px;padding:.45rem 1rem;border-radius:999px;border:1.5px solid var(--line-strong);font-weight:600;
  transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
.tag-filter button:active{transform:scale(.96)}
.tag-filter button[aria-pressed="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.post-list{display:grid;gap:2rem}
.post-row{display:grid;gap:1rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.post-row[hidden]{display:none}
.post-row .ph{border-radius:var(--radius-lg)}
.pr-body{display:grid;gap:.6rem;align-content:start}
.pr-body h2,.pr-body h3{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.08}
.pr-body > p:not(.meta){color:var(--muted)}
.pr-shape{display:grid;gap:.2rem;margin-top:.4rem;max-width:18rem}
.mini-prof{width:100%;height:3.2rem}
.mp-fill{fill:var(--prof-fill)}
.mp-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.pr-shape span{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){ .post-row.pop{animation:rise .5s var(--ease-out) both;animation-delay:var(--pd,0ms)} }
@keyframes rise{from{transform:translateY(12px)}}
.demo-only{margin-top:1.5rem;font-size:.88rem;color:var(--muted)}
@media (min-width:760px){ .post-row{grid-template-columns:.8fr 1.2fr;gap:2rem;align-items:start} }
@media (min-width:1000px){ .post-list{grid-template-columns:repeat(3,1fr);gap:2.5rem} .post-row{grid-template-columns:1fr;border:0;padding:0} }

/* ---------- the article ---------- */
.article-wrap{padding-block:clamp(2.5rem,6vw,5rem);border-top:1px solid var(--line)}
.post-head{display:grid;gap:1rem;max-width:46rem;margin:0 auto clamp(2rem,4vw,3rem)}
.post-head h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:.98;letter-spacing:-.045em}
.post-inline-title{max-width:46rem;margin:0 auto 2.5rem;font-size:clamp(2.2rem,5vw,3.8rem)}
.art-grid{display:grid;gap:1.5rem}
.prose{max-width:40rem;font-size:1.2rem;line-height:1.7}
.prose > * + *{margin-top:1.15em}
.prose h2,.prose h3{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:2em;scroll-margin-top:calc(var(--header-h) + 7rem)}
.prose .lead{font-size:1.4rem;line-height:1.55}
.prose .lead::first-letter{float:left;font-family:var(--font-display);font-weight:800;font-size:4.2em;line-height:.8;margin:.06em .1em 0 0;color:var(--accent-text)}
.pull{margin:2em 0;padding-left:1.25rem;border-left:4px solid var(--accent)}
.pull p{font-style:italic;font-size:1.6rem;line-height:1.3}
.wide{margin-inline:0}
.wide .ph{border-radius:var(--radius-lg)}
.wide figcaption{margin-top:.5rem;font-size:.95rem;color:var(--muted);font-style:italic}
.ticks{list-style:none;padding:0;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:2rem}
.ticks li::before{content:"";position:absolute;left:.2rem;top:.55em;width:.8rem;height:.8rem;border-radius:50%;border:2.5px solid var(--accent)}
/* trail aside: the climb (reading progress) and the contents list */
.trail{display:grid;gap:1rem;align-content:start;align-self:start;position:sticky;top:var(--header-h);z-index:5;background:var(--canvas);
  padding:.6rem 0;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);border-bottom:1px solid var(--line)}
.climb svg{width:100%;height:auto;max-height:5.5rem;overflow:visible}
.cl-fill{fill:var(--prof-fill)}
.cl-line{fill:none;stroke:var(--prof-line);stroke-width:2;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.cl-done{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.walked-rect{transform-origin:0 0;transform:scaleX(var(--p,0))}
.walker{transform:translate(var(--wx,0px),var(--wy,100px))}
.walker circle{fill:var(--accent);stroke:var(--canvas);stroke-width:3}
.walker .walker-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:.45}
@media (prefers-reduced-motion:no-preference){ .walker-ring{animation:ring 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center} }
@keyframes ring{from{transform:scale(.6)}to{transform:scale(1.5);opacity:0}}
.cl-ticks{position:relative;height:1.1rem;font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cl-ticks span{position:absolute;left:calc(var(--x) * 100%);transform:translateX(calc(var(--x) * -100%))}
.cl-read{font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.cl-read small{font-weight:500;color:var(--muted);font-size:.85rem;margin-left:.3rem}
.toc-title{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:none}
.toc{display:none;gap:.15rem;border-left:2px solid var(--line)}
.toc a{display:block;padding:.45rem 0 .45rem 1rem;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;font-weight:500;color:var(--muted);
  transition:color var(--dur-fast) linear,border-color var(--dur-fast) linear}
@media (hover:hover){ .toc a:hover{color:var(--ink)} }
.toc a[aria-current]{color:var(--accent-text);border-left-color:var(--accent);font-weight:700}
.copy-link{display:none;align-items:center;gap:.5rem;justify-self:start;min-height:44px;padding:.4rem .9rem;border-radius:999px;border:1.5px solid var(--line-strong);font-weight:600;font-size:.9rem}
.copy-link .ico{width:1rem;height:1rem}
@media (min-width:1000px){
  .art-grid{grid-template-columns:17rem minmax(0,40rem);gap:4rem;justify-content:center}
  .trail{top:calc(var(--header-h) + 1.5rem);margin:0;padding:0;border:0;background:none}
  .climb svg{max-height:none}
  .toc,.toc-title{display:grid}
  .copy-link:not([hidden]){display:inline-flex}
  .post-inline-title{margin-left:max(0px,calc((100% - 61rem) / 2 + 21rem))}
}

/* ---------- map and notes ---------- */
.where h2,.notes h2{margin-bottom:1.5rem}
.map-block{border:1.5px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--prof-fill)}
.map-title{display:grid;gap:.25rem;max-width:28rem}
.map-title strong{font-family:var(--font-display);font-size:1.4rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.map-note{margin-top:.75rem;font-size:.92rem;color:var(--muted)}
.notes{border-top:1px solid var(--line)}
.notes .sample-tag{margin:-.75rem 0 1.25rem}
.note-list{display:grid;gap:1.25rem}
.note-list li{padding:1.25rem 1.4rem;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--line)}
.note-by{display:flex;gap:.75rem;align-items:baseline;margin-bottom:.4rem;font-size:.9rem}
.note-by time{color:var(--muted)}

/* ---------- about ---------- */
.about{border-top:1px solid var(--line)}
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-photo .ph{border-radius:var(--radius-lg)}
.about-copy{display:grid;gap:1rem;max-width:38rem}
.about-copy p{font-size:1.2rem}
@media (min-width:900px){ .about-grid{grid-template-columns:.7fr 1.3fr;gap:4.5rem} }

/* ---------- newsletter over the mountains ---------- */
.letter{position:relative;isolation:isolate;padding-block:clamp(4.5rem,10vw,8rem);color:#F2F4EE;overflow:clip}
.letter-bg{position:absolute;inset:0;z-index:-1}
.letter-bg .ph{height:100%;aspect-ratio:auto;border-radius:0}
.letter-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(20 24 21/.82),rgb(20 24 21/.35))}
.letter-inner{display:grid;gap:1rem;justify-items:start}
.letter h2{color:#F2F4EE}
.letter-inner > p{font-size:1.2rem;max-width:28rem;opacity:.9}
.letter-form{display:grid;gap:.8rem;width:min(100%,30rem);margin-top:.5rem}
.letter-form .field label{color:#F2F4EE}
.letter-form .input{--field-bg:rgb(244 241 234/.95);color:#1E2621}
.letter-form .btn{justify-self:start}
.letter .demo-note{color:var(--ink)}

/* ---------- page head ---------- */
.page-head{padding-block:clamp(2.5rem,6vw,4.5rem) 0}
.page-head h1{font-size:clamp(2.8rem,7vw,5.5rem);letter-spacing:-.05em}
.page-head p:not(.crumbs){margin-top:.75rem;font-size:1.25rem;font-style:italic;color:var(--muted)}
.crumbs{display:flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:1rem}
.crumbs .ico{width:1em;height:1em}

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-mark{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-bottom:.5rem}
.foot-mark .ico{color:var(--accent)}
.site-footer h2{font-family:var(--font-ui);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.5rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
}