/* ==========================================================================
   blog.css — shared styles for the writing/ post pages.

   Zero build: every post is plain HTML that <link>s this one file.
   The :root tokens below MIRROR index.html — if you ever retheme the site,
   update both (this block is the only duplication).

   To start a new post, copy writing/_TEMPLATE.html. See WRITING.md.
   ========================================================================== */

/* ============================== TOKENS ============================== */
:root{
  --ink:#0B0E0D;
  --panel:#121715;
  --panel-2:#161D1A;
  --line:#232C28;
  --line-soft:#1A211E;
  --mist:#7E8A84;
  --mist-2:#586460;
  --paper:#E9EEEB;
  --paper-dim:#BFC9C4;
  --signal:#33D69A;
  --signal-dim:rgba(51,214,154,.13);
  --amber:#E6A23C;

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --maxw:1080px;          /* nav / footer width — matches the home page */
  --measure:46rem;        /* the reading column for article bodies */
  --gutter:clamp(20px,5vw,72px);
}

/* ============================== RESET ============================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper-dim);
  font-family:var(--body);
  font-size:clamp(1.02rem,1rem + .15vw,1.12rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background-image:radial-gradient(circle at 1px 1px, rgba(126,138,132,.05) 1px, transparent 0);
  background-size:38px 38px;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--signal);color:var(--ink)}

/* ============================== HELPERS ============================== */
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"//";color:var(--mist-2)}

/* ============================== READING PROGRESS ============================== */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:var(--signal);box-shadow:0 0 10px var(--signal);z-index:60;will-change:transform}

/* ============================== NAV ============================== */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--ink) 78%, transparent);border-bottom:1px solid var(--line-soft)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;color:var(--paper);display:inline-flex;align-items:center;gap:.6em;white-space:nowrap}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.nav-back{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);transition:color .2s}
.nav-back:hover{color:var(--paper)}

/* ============================== ARTICLE SHELL ============================== */
.article{max-width:var(--measure);margin:0 auto;padding:clamp(40px,7vw,84px) var(--gutter) clamp(54px,8vw,104px)}
.post-head{margin-bottom:clamp(30px,5vw,48px)}
.post-head h1{font-family:var(--display);color:var(--paper);font-weight:700;
  font-size:clamp(2rem,5.2vw,3.05rem);line-height:1.07;letter-spacing:-.02em;margin:.5em 0 .5em;max-width:22ch}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-2)}
.post-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--mist-2)}
.post-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.post-tags .chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--paper-dim);
  background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:5px 11px}
.lede-text{font-size:clamp(1.14rem,1.6vw,1.32rem);color:var(--paper);line-height:1.55}

/* ============================== PROSE ============================== */
.prose{color:var(--paper-dim)}
.prose > * + *{margin-top:1.25em}
.prose p{max-width:68ch}
.prose h2{font-family:var(--display);color:var(--paper);font-weight:600;
  font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.015em;line-height:1.14;margin-top:1.9em;scroll-margin-top:84px}
.prose h3{font-family:var(--display);color:var(--paper);font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.38rem);letter-spacing:-.01em;line-height:1.2;margin-top:1.5em;scroll-margin-top:84px}
.prose h2 + p,.prose h3 + p{margin-top:.7em}
.prose a{color:var(--signal);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--signal) 40%,transparent);text-underline-offset:3px;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--signal)}
.prose strong{color:var(--paper);font-weight:600}
.prose em{color:var(--paper)}
.prose ul,.prose ol{padding-left:1.4em;max-width:66ch}
.prose li{margin-top:.5em}
.prose ul li::marker{color:var(--signal)}
.prose ol li::marker{color:var(--mist);font-family:var(--mono);font-size:.85em}
.prose blockquote{border-left:2px solid var(--signal);padding:2px 0 2px 20px;color:var(--mist)}
.prose blockquote p{color:var(--mist);max-width:64ch}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:2.4em 0}

/* inline + block code */
.prose code{font-family:var(--mono);font-size:.86em;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:4px;padding:.12em .4em;color:var(--paper)}
.prose pre{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:clamp(14px,2vw,20px);overflow-x:auto;font-size:.84rem;line-height:1.6}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;color:var(--paper-dim)}

/* media + tables */
.prose figure{margin-top:1.7em}
.prose img{width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.prose figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--mist-2);margin-top:11px;text-align:center}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.prose th{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}

/* callout / aside */
.callout{background:var(--signal-dim);border:1px solid color-mix(in srgb,var(--signal) 30%,var(--line));
  border-radius:6px;padding:18px 20px}
.callout .clabel{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:8px}
.callout p{max-width:none;color:var(--paper-dim)}

/* figures — route comparison (raw vs smoothed), reusable for any GPS post */
.fig-route{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:clamp(16px,3vw,24px)}
.fig-route svg{width:100%;height:auto;overflow:visible}
.fig-route .raw{fill:none;stroke:var(--mist-2);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.fig-route .smooth{fill:none;stroke:var(--signal);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(51,214,154,.35))}
.fig-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.fig-legend span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);display:inline-flex;align-items:center;gap:8px}
.fig-legend i{width:16px;height:2px;border-radius:2px;display:inline-block}
.fig-legend i.raw{background:var(--mist-2)}
.fig-legend i.smooth{background:var(--signal)}

/* ============================== POST FOOTER ============================== */
.post-foot{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.post-foot .back{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mist);border:1px solid var(--line);border-radius:99px;
  padding:10px 18px;transition:border-color .2s,color .2s}
.post-foot .back:hover{color:var(--paper);border-color:color-mix(in srgb,var(--signal) 50%,var(--line))}
footer{border-top:1px solid var(--line-soft);padding:30px var(--gutter);margin-top:clamp(48px,8vw,88px)}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.foot-inner span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-2)}
.foot-inner a{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);transition:color .2s}
.foot-inner a:hover{color:var(--signal)}

/* ============================== LIST / ARCHIVE PAGE ============================== */
.list{max-width:var(--measure);margin:0 auto;padding:clamp(40px,7vw,84px) var(--gutter) clamp(54px,8vw,100px)}
.list-head{margin-bottom:clamp(28px,5vw,44px)}
.list-head h1{font-family:var(--display);color:var(--paper);font-weight:700;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.06;letter-spacing:-.02em;margin:.45em 0 .42em}
.list-sub{color:var(--mist);max-width:58ch}

/* post list — mirrors the Writing section in index.html; drafts are non-links */
.posts{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.post{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:baseline;
  padding:clamp(20px,3vw,26px) 0;border-bottom:1px solid var(--line-soft);transition:padding-left .25s}
a.post:hover{padding-left:14px}
.post .ptitle{font-family:var(--display);font-weight:500;color:var(--paper);
  font-size:clamp(1.1rem,2vw,1.32rem);letter-spacing:-.01em;transition:color .2s}
a.post:hover .ptitle{color:var(--signal)}
.post .dek{grid-column:1/2;color:var(--mist);font-size:.95rem;margin-top:4px;max-width:62ch}
.post .pmeta{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist-2);white-space:nowrap;text-align:right}
.post--draft{opacity:.6}
.post--draft .pmeta{color:var(--amber)}
@media(max-width:560px){ .post{grid-template-columns:1fr} .post .pmeta{text-align:left} }

/* ============================== MOTION / A11Y ============================== */
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .progress{display:none}
}