/* ============================================================
   ZOE BLOGS — main.css  final
   Design principles applied:
   · 2 fonts max: Newsreader (editorial), system UI (chrome)
   · JetBrains Mono for labels/code only
   · 8pt spacing grid throughout
   · Blue used once: reading progress bar only
   · Every element visible in both light and dark mode
   · Borders, text, and surfaces all have sufficient contrast
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ───────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:         #ffffff;
  --bg2:        #f4f4f2;      /* slightly warmer — clearly distinct */
  --surf:       #ffffff;
  --surf-hover: #efefed;

  /* Text — three levels, all readable */
  --text:       #1d1d1f;      /* primary — near black */
  --text2:      #515154;      /* secondary — medium grey, strong enough */
  --text3:      #86868b;      /* tertiary — labels, timestamps */

  /* Borders — visible but not heavy */
  --b1:         rgba(0,0,0,.09);
  --b2:         rgba(0,0,0,.14);
  --b3:         rgba(0,0,0,.24);

  /* Shadows */
  --sh1:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh2:  0 4px 16px rgba(0,0,0,.09), 0 2px 5px rgba(0,0,0,.05);
  --sh3:  0 10px 32px rgba(0,0,0,.11), 0 4px 8px rgba(0,0,0,.06);

  /* Blue — reading progress bar only */
  --blue: #0071e3;

  /* Glass nav */
  --nav-glass: rgba(255,255,255,.88);

  /* Fonts */
  --font-ui:    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono:  'JetBrains Mono', "Courier New", monospace;

  /* Spacing — 8pt grid */
  --s1:  .25rem;   /*  4px */
  --s2:  .5rem;    /*  8px */
  --s3:  .75rem;   /* 12px */
  --s4:  1rem;     /* 16px */
  --s5:  1.25rem;  /* 20px */
  --s6:  1.5rem;   /* 24px */
  --s8:  2rem;     /* 32px */
  --s10: 2.5rem;   /* 40px */
  --s12: 3rem;     /* 48px */
  --s16: 4rem;     /* 64px */
  --s20: 5rem;     /* 80px */
  --s24: 6rem;     /* 96px */

  /* Radii */
  --r-sm:  6px;
  --r-md:  12px;
  --r-pill:999px;

  /* Nav */
  --nav-h: 54px;
  --outer: 900px;
  --inner: 680px;

  /* Transitions */
  --ease-out:    cubic-bezier(0, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ease-theme:  cubic-bezier(.4, 0, .2, 1);
  --t:   180ms var(--ease-out);
  --ts:  400ms var(--ease-theme);
}

/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:         #0a0a0a;
  --bg2:        #161618;      /* clearly distinct from bg */
  --surf:       #1c1c1e;
  --surf-hover: #2a2a2c;

  --text:       #f5f5f7;
  --text2:      #b0b0b5;      /* lighter than before — more readable */
  --text3:      #737378;      /* was 636366 — boosted for dark bg */

  /* Borders stronger in dark — needed for visibility */
  --b1:         rgba(255,255,255,.10);
  --b2:         rgba(255,255,255,.16);
  --b3:         rgba(255,255,255,.26);

  --sh1:  0 1px 4px rgba(0,0,0,.55);
  --sh2:  0 4px 16px rgba(0,0,0,.60);
  --sh3:  0 10px 32px rgba(0,0,0,.70);

  --blue: #2997ff;
  --nav-glass: rgba(10,10,10,.86);
}

/* ── Theme transition ────────────────────────────────────── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color var(--ts),
    background       var(--ts),
    border-color     var(--ts),
    color            var(--ts),
    box-shadow       var(--ts) !important;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection                   { background: rgba(0,0,0,.10);   color: var(--text) }
[data-theme="dark"] ::selection { background: rgba(255,255,255,.14); color: var(--text) }

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-ui);
  font-size:   16px;
  line-height: 1.65;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

.container   { width: 100%; max-width: var(--outer); margin: 0 auto; padding: 0 var(--s6) }
.content-col { max-width: var(--inner); margin: 0 auto }
main { flex: 1; padding-top: calc(var(--nav-h) + var(--s12)); padding-bottom: var(--s24) }

/* ══ HEADER ══════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  background: var(--nav-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--b2);
  transition: background var(--ts), border-color var(--ts);
}

.site-header__inner {
  display: flex; align-items: center;
  height: 100%; max-width: var(--outer); margin: 0 auto; padding: 0 var(--s6);
  gap: var(--s4);
}

.logo-wrap {
  display: flex; align-items: center;
  text-decoration: none; color: var(--text); flex-shrink: 0;
  transition: opacity var(--t);
}
.logo-wrap:hover { opacity: .55 }

.logo-wordmark {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  white-space: nowrap;
}

.site-header__spacer { flex: 1 }

/* ── Nav pills ── */
.site-nav { display: flex; align-items: center; gap: var(--s1); flex-shrink: 0 }

.nav-pill {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--text2);
  text-decoration: none;
  padding: var(--s1) var(--s4);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.nav-pill:hover {
  background: var(--b1);
  color: var(--text);
  border-color: var(--b2);
}

/* Active: filled dark — no blue */
.nav-pill.active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}

/* ── Theme toggle ── */
.theme-toggle {
  background: none;
  border: 1px solid var(--b2);
  border-radius: var(--r-pill);
  padding: var(--s1) var(--s3);
  cursor: pointer;
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-left: var(--s1);
  transition: background var(--t), color var(--t), border-color var(--t),
              transform 180ms var(--ease-spring);
}
.theme-toggle:hover  { background: var(--b1); color: var(--text); border-color: var(--b3) }
.theme-toggle:active { transform: scale(.92) }

/* ══ HERO ════════════════════════════════════════════════════ */
.hero {
  padding-bottom: var(--s12);
  border-bottom: 1px solid var(--b2);
  margin-bottom: var(--s12);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
  display: block;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5.5vw, 44px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: var(--s5);
}
.hero__title em { font-style: italic; color: var(--text2) }

.hero__sub {
  font-family: var(--font-ui);
  font-size: 17px;
  color: var(--text2);
  line-height: 1.65;
  max-width: 560px;
}

/* ══ SECTION LABEL ═══════════════════════════════════════════ */
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s6);
}

/* ══ PAGE HEADER ══════════════════════════════════════════════ */
.page-header { padding-bottom: 0; border-bottom: none; margin-bottom: 0 }

.page-header__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--b2);
  margin-bottom: var(--s8);
}

.page-header__title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: var(--s1);
  line-height: 1.2;
}

.page-header__desc {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text3);
}

/* ── Filter toggle (icon-only) ── */
.filter-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2);
  background: none;
  border: 1px solid var(--b2);
  border-radius: var(--r-md);
  width: 34px; height: 34px; padding: 0;
  cursor: pointer; flex-shrink: 0;
  transition: background var(--t), color var(--t), border-color var(--t);
  position: relative; top: 2px;
}
.filter-toggle:hover { background: var(--b1); color: var(--text); border-color: var(--b3) }
.filter-toggle[aria-expanded="true"] {
  background: var(--text); color: var(--bg); border-color: transparent;
}

/* ── Filter drawer ── */
.filter-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 320ms var(--ease-out),
    opacity    220ms var(--ease-out),
    margin     320ms var(--ease-out);
  margin-bottom: 0;
}
.filter-drawer.open {
  max-height: 160px;
  opacity: 1;
  margin-bottom: var(--s8);
}

.filter-drawer__inner {
  padding: var(--s5) var(--s5) var(--s4);
  background: var(--bg2);
  border-radius: var(--r-md);
  border: 1px solid var(--b2);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--s2); flex: 1 }

.fchip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--text2);
  background: var(--surf);
  border: 1px solid var(--b2);
  border-radius: var(--r-pill);
  padding: 4px 14px;
  cursor: pointer;
  transition:
    background 130ms var(--ease-out),
    color      130ms var(--ease-out),
    border-color 130ms var(--ease-out),
    transform  130ms var(--ease-spring);
  -webkit-appearance: none; user-select: none;
}
.fchip:hover  { background: var(--b1); color: var(--text); border-color: var(--b3) }
.fchip:active { transform: scale(.94) }

/* Selected — inverted fill */
.fchip.fchip--on {
  background: var(--text); color: var(--bg); border-color: transparent;
}
.fchip.fchip--on:hover { opacity: .82 }

/* Clear button */
.filter-clear {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  background: none; border: none;
  cursor: pointer; padding: 4px var(--s2);
  border-radius: var(--r-sm); white-space: nowrap; flex-shrink: 0;
  transition: color var(--t), background var(--t);
  letter-spacing: .02em;
}
.filter-clear:hover { color: var(--text); background: var(--b1) }

/* ══ CARD GRID ═══════════════════════════════════════════════ */
.card-grid    { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) }
.card-grid--3 { grid-template-columns: repeat(3, 1fr) }

.card {
  background: var(--surf);
  border: 1px solid var(--b2);        /* stronger border — visible in both modes */
  border-radius: var(--r-md);
  padding: var(--s5);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: var(--s2);
  box-shadow: var(--sh1);
  position: relative; overflow: hidden;
  transition:
    transform    240ms var(--ease-spring),
    box-shadow   220ms var(--ease-out),
    border-color 180ms var(--ease-out),
    background   180ms var(--ease-out);
}



.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh2);
  border-color: var(--b3);
  background: var(--surf-hover);
}
.card:hover .card__title { color: var(--text) }

.card[data-filtered] { display: none }

@keyframes cardReveal {
  from { opacity: 0; transform: translateY(8px) scale(.98) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}
.card.card--reveal { animation: cardReveal .22s var(--ease-spring) forwards }

/* Card label — clearly readable mono text */
.card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Card title — primary text, strong */
.card__title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -.01em;
  transition: color 160ms var(--ease-out);
}

/* Card description — secondary, clearly readable */
.card__desc {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--s3);
}

.card__date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}

/* Reading time chip */
.card__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--b1);
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
}

/* ══ POST HEADER ══════════════════════════════════════════════ */
.post-header {
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--b2);
  margin-bottom: var(--s12);
  text-align: center;
}

.post-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--s4);
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
}

.eyebrow-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--b3); display: inline-block;
}

/* Tag chip in post header — visible border in both modes */
.tag--accent {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--b2);
  border-radius: var(--r-pill);
  padding: 2px var(--s3);
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.tag--accent:hover { background: var(--b1); color: var(--text); border-color: var(--b3) }

.post-header__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: var(--s4);
  max-width: 20ch; margin-left: auto; margin-right: auto;
}

.post-header__sub {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text2);
  line-height: 1.65;
  max-width: 50ch; margin: 0 auto;
}

/* ══ TAGS — post footer ═══════════════════════════════════════ */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none }

.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
  background: transparent;
  border: 1px solid var(--b2);
  border-radius: var(--r-pill);
  padding: 3px var(--s3);
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.tag:hover { background: var(--b1); color: var(--text); border-color: var(--b3) }

/* ══ PROSE ═══════════════════════════════════════════════════ */
.prose {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.72;
  color: var(--text);
  max-width: 66ch; margin: 0 auto;
}
.prose > * + * { margin-top: 1.5em }

.prose h2 {
  font-family: var(--font-ui); font-size: 21px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25; color: var(--text);
  margin-top: 2.8em; margin-bottom: .6em;
}
.prose h3 {
  font-family: var(--font-ui); font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3; color: var(--text);
  margin-top: 2.2em; margin-bottom: .5em;
}
.prose h4 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--text3); text-transform: uppercase; letter-spacing: .1em;
  margin-top: 2em; margin-bottom: .5em;
}

.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--b3);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--t);
}
.prose a:hover { text-decoration-color: var(--text) }

.prose strong { font-weight: 500 }
.prose em     { font-style: italic }
.prose ul, .prose ol { padding-left: 1.5em }
.prose li { margin-bottom: .4em }
.prose li::marker { color: var(--text3) }

.prose blockquote {
  border-left: 2px solid var(--b3);
  padding: .25rem 0 .25rem var(--s6);
  margin: 2em 0;
  font-style: italic; color: var(--text2);
}
.prose blockquote p { font-size: 19px; line-height: 1.65; margin-top: 0 }

.prose hr { border: none; border-top: 1px solid var(--b2); margin: 3em auto; width: 64px }
.prose img { width: 100%; height: auto; border-radius: var(--r-md); display: block }
.prose figure { margin: 2.5em 0 }
.prose figcaption {
  font-family: var(--font-ui); font-size: 12px;
  color: var(--text3); text-align: center; margin-top: var(--s2);
}

.prose table { width: 100%; border-collapse: collapse; font-size: 14px; font-family: var(--font-ui) }
.prose tr:hover td { background: var(--bg2) }
.prose th, .prose td { padding: 9px var(--s3); border-bottom: 1px solid var(--b1); text-align: left; vertical-align: top }
.prose th { font-weight: 500; font-size: 12px; color: var(--text) }
.prose td:first-child { font-weight: 500; color: var(--text) }
.prose td { color: var(--text2); font-weight: 300 }

/* ══ CODE ════════════════════════════════════════════════════ */
.prose code, code {
  font-family: var(--font-mono); font-size: .85em;
  background: var(--bg2); color: var(--text);
  padding: .1em .38em; border-radius: 5px; border: 1px solid var(--b1);
}
.prose pre {
  background: var(--bg2); border: 1px solid var(--b2);
  border-radius: var(--r-md); padding: var(--s5); overflow-x: auto;
  line-height: 1.6; box-shadow: var(--sh1); position: relative; margin: 2em 0;
}
.prose pre code { background: none; padding: 0; font-size: 13px; color: var(--text); border: none; border-radius: 0 }

/* ══ ARCHIVE ══════════════════════════════════════════════════ */
.archive-year { margin-top: var(--s12) }
.archive-year:first-of-type { margin-top: 0 }
.archive-year[data-hidden] { display: none }
.archive-year__heading {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--text3); letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: var(--s4);
}

/* ══ EMPTY STATE ══════════════════════════════════════════════ */
.posts-empty { text-align: center; padding: var(--s16) 0 }
.posts-empty__text { font-family: var(--font-ui); font-size: 15px; color: var(--text2); margin-bottom: var(--s4) }
.posts-empty__reset {
  font-family: var(--font-mono); font-size: 11px; color: var(--text2);
  background: none; border: 1px solid var(--b2); border-radius: var(--r-pill);
  padding: 5px var(--s5); cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.posts-empty__reset:hover { background: var(--b1); color: var(--text); border-color: var(--b3) }

/* ══ POST FOOTER ══════════════════════════════════════════════ */
.post-footer { margin-top: var(--s16); padding-top: var(--s8); border-top: 1px solid var(--b2) }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) }

.post-nav__item {
  background: var(--surf); border: 1px solid var(--b2);
  border-radius: var(--r-md); padding: var(--s4);
  text-decoration: none; color: inherit; display: block; box-shadow: var(--sh1);
  transition: transform 240ms var(--ease-spring), box-shadow 220ms var(--ease-out),
              border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.post-nav__item:hover {
  transform: translateY(-2px); box-shadow: var(--sh2);
  border-color: var(--b3); background: var(--surf-hover);
}
.post-nav__item--next { text-align: right }

.post-nav__dir {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--text3); text-transform: uppercase; letter-spacing: .1em;
  display: block; margin-bottom: var(--s1);
}
.post-nav__title {
  font-family: var(--font-ui); font-size: 14px; font-weight: 500;
  line-height: 1.35; letter-spacing: -.01em; color: var(--text);
}

/* ══ ABOUT ════════════════════════════════════════════════════ */
.about-hero {
  text-align: center;
  padding-bottom: var(--s12);
  border-bottom: 1px solid var(--b2);
  margin-bottom: var(--s12);
}
.about-name {
  font-family: var(--font-serif);
  font-size: 32px; font-weight: 300;
  letter-spacing: -.025em; color: var(--text);
  margin-bottom: var(--s2);
}
.about-tagline {
  font-family: var(--font-ui);
  font-size: 14px; color: var(--text2);
}

/* ══ FOOTER ══════════════════════════════════════════════════ */
.site-footer { border-top: 1px solid var(--b2); padding: var(--s6) 0 }
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--outer); margin: 0 auto; padding: 0 var(--s6); gap: var(--s4);
}
.site-footer__copy { font-family: var(--font-ui); font-size: 12px; color: var(--text3) }
.site-footer__links { display: flex; gap: var(--s5) }
.site-footer__link {
  font-family: var(--font-ui); font-size: 12px;
  color: var(--text2);           /* boosted from text3 — now clearly readable */
  text-decoration: none;
  transition: color var(--t);
}
.site-footer__link:hover { color: var(--text) }

/* ══ READING PROGRESS — blue, and only blue ═══════════════════ */
.reading-progress {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 2px;
  background: var(--blue);
  z-index: 300;
  transition: width 80ms linear;
  opacity: 1;
}

/* ══ BACK TO TOP ══════════════════════════════════════════════ */
.back-to-top {
  position: fixed; bottom: var(--s8); right: var(--s8);
  background: var(--surf); border: 1px solid var(--b2);
  border-radius: var(--r-pill); width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--text2); font-size: 14px;
  box-shadow: var(--sh2); opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-spring),
              box-shadow 220ms var(--ease-out);
}
.back-to-top.visible { opacity: 1; pointer-events: auto }
.back-to-top:hover { box-shadow: var(--sh3); color: var(--text); transform: translateY(-2px) }

/* ══ COPY BUTTON ══════════════════════════════════════════════ */
.copy-btn {
  position: absolute; top: var(--s3); right: var(--s3);
  background: var(--surf); border: 1px solid var(--b2); border-radius: 5px;
  color: var(--text3); font-family: var(--font-mono); font-size: 10px;
  padding: 3px var(--s2); cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.copy-btn:hover { color: var(--text); border-color: var(--b3); background: var(--b1) }

/* ══ SYNTAX ══════════════════════════════════════════════════ */
.highlight .k,  .highlight .kn               { color: #7c3aed }
.highlight .s,  .highlight .s1, .highlight .s2 { color: #15803d }
.highlight .c,  .highlight .c1, .highlight .cm { color: var(--text3); font-style: italic }
.highlight .nb, .highlight .nf               { color: #1d4ed8 }
.highlight .mi, .highlight .mf               { color: #b45309 }

[data-theme="dark"] .highlight .k,
[data-theme="dark"] .highlight .kn  { color: #c4b5fd }
[data-theme="dark"] .highlight .s,
[data-theme="dark"] .highlight .s1,
[data-theme="dark"] .highlight .s2  { color: #86efac }
[data-theme="dark"] .highlight .nb,
[data-theme="dark"] .highlight .nf  { color: #93c5fd }
[data-theme="dark"] .highlight .mi,
[data-theme="dark"] .highlight .mf  { color: #fcd34d }

/* ══ ANIMATIONS ═══════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: translateY(0) }
}
.fade-up   { animation: fadeUp .5s var(--ease-spring) forwards }
.fade-up-1 { animation-delay: .05s; opacity: 0 }
.fade-up-2 { animation-delay: .13s; opacity: 0 }
.fade-up-3 { animation-delay: .22s; opacity: 0 }
.fade-up-4 { animation-delay: .32s; opacity: 0 }

/* ══ RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 700px) {
  :root { --nav-h: 48px }
  .container,
  .site-header__inner,
  .site-footer__inner { padding-left: var(--s4); padding-right: var(--s4) }
  main { padding-top: calc(var(--nav-h) + var(--s8)) }
  .card-grid, .card-grid--3 { grid-template-columns: 1fr }
  .post-nav { grid-template-columns: 1fr }
  .hero__title { font-size: 28px }
  .post-header__title { font-size: 26px }
  .page-header__title { font-size: 24px }
  .site-footer__inner { flex-direction: column; gap: var(--s2); text-align: center }
  .back-to-top { bottom: var(--s4); right: var(--s4) }
  .filter-drawer.open { max-height: 220px }
}

@media print {
  .site-header, .site-footer, .back-to-top,
  .reading-progress, .post-nav, .copy-btn { display: none !important }
  body { background: #fff; color: #000; font-size: 11pt }
  .prose { max-width: 100% }
}