/* =========================================================================
   Fieldnotes — a Ghost theme
   Security findings · CTF writeups · personal projects
   Design system ported from the Fieldnotes "Prism" direction.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Category accent spectrum (shared across both color schemes) */
  --c-web:  oklch(0.62 0.17 255);   /* blue      */
  --c-rev:  oklch(0.58 0.19 300);   /* violet    */
  --c-tut:  oklch(0.70 0.115 195);  /* teal      */
  --c-find: oklch(0.66 0.19 25);    /* coral     */
  --c-proj: oklch(0.69 0.16 150);   /* green     */
  --c-note: oklch(0.78 0.14 78);    /* amber     */
  --c-cry:  oklch(0.66 0.20 340);   /* magenta   */

  /* Default accent (overridden per-tag by .accent-* classes) */
  --accent: var(--c-web);

  /* Light surface palette (default) */
  --bg:       #fbfbf8;
  --surface:  #ffffff;
  --surface2: #f4f3ee;
  --ink:      #17181c;
  --ink2:     #33353b;
  --muted:    #6c7076;
  --line:     #e8e6df;
  --chip:     #f1f0ea;

  /* Type */
  --font-head: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Layout */
  --maxw:        1120px;
  --maxw-wide:   920px;
  --maxw-narrow: 680px;
  --maxw-page:   1000px;
  --pad: clamp(20px, 5vw, 56px);

  --radius:   16px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-scheme="dark"] {
  --bg:       #0f1115;
  --surface:  #171a20;
  --surface2: #1d212a;
  --ink:      #f3f3ee;
  --ink2:     #d3d6db;
  --muted:    #99a0a8;
  --line:     #262a31;
  --chip:     #1e222a;
}

/* Per-tag accent mapping. Add your own tag slugs here to give them a color. */
.accent-web      { --accent: var(--c-web); }
.accent-ctf      { --accent: var(--c-rev); }
.accent-reversing{ --accent: var(--c-rev); }
.accent-tutorial { --accent: var(--c-tut); }
.accent-tutorials{ --accent: var(--c-tut); }
.accent-findings { --accent: var(--c-find); }
.accent-projects { --accent: var(--c-proj); }
.accent-project  { --accent: var(--c-proj); }
.accent-notes    { --accent: var(--c-note); }
.accent-til      { --accent: var(--c-note); }
.accent-crypto   { --accent: var(--c-cry); }
.accent-cryptography { --accent: var(--c-cry); }

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  transition: background-color 0.45s ease, color 0.45s ease;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
::selection { background: color-mix(in oklab, var(--c-web) 22%, transparent); }

.site-main { min-height: calc(100vh - 320px); }

.container        { max-width: var(--maxw);        margin-inline: auto; padding-inline: var(--pad); }
.container--wide  { max-width: var(--maxw-wide);   margin-inline: auto; padding-inline: var(--pad); }
.container--narrow{ max-width: var(--maxw-narrow); margin-inline: auto; padding-inline: var(--pad); }
.container--page  { max-width: var(--maxw-page);   margin-inline: auto; padding-inline: var(--pad); }

/* -------------------------------------------------------------------------
   3. Shared pieces — brand, badge, chips, section label
   ------------------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark {
  width: 17px; height: 17px; border-radius: 4px; transform: rotate(45deg);
  background: conic-gradient(from 0deg, var(--c-find), var(--c-note), var(--c-proj), var(--c-tut), var(--c-web), var(--c-rev), var(--c-find));
}
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.brand__logo { max-height: 28px; width: auto; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 13%, transparent);
  color: var(--accent);
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
}

.section-label {
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink2);
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.chip:hover { border-color: var(--accent); transform: translateY(-2px); }

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  transition: color 0.2s ease;
}
.back-link:hover { color: var(--ink); }

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.45s ease, border-color 0.45s ease;
}
.site-header__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 15px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.site-header__right { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap; }

.nav { display: flex; gap: clamp(14px, 2.4vw, 26px); }
.nav__link { font-size: 14.5px; color: var(--muted); transition: color 0.2s ease, opacity 0.2s ease; }
.nav__link:hover { color: var(--ink); }
.nav__link.is-current { color: var(--ink); }

.theme-toggle {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 5px 7px 5px 13px; cursor: pointer;
  color: var(--muted); transition: border-color 0.3s ease, background-color 0.3s ease;
}
.theme-toggle__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.theme-toggle__track {
  width: 34px; height: 20px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--line);
  position: relative; display: inline-block;
}
.theme-toggle__knob {
  position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(140deg, var(--c-web), var(--c-rev));
  transform: translateX(0); transition: transform 0.34s var(--ease);
}
[data-scheme="dark"] .theme-toggle__knob { transform: translateX(14px); }

/* Reading progress */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 60;
  background: linear-gradient(90deg, var(--c-find), var(--c-note), var(--c-proj), var(--c-tut), var(--c-web), var(--c-rev));
  transition: width 0.12s linear;
}

/* -------------------------------------------------------------------------
   5. Home — hero, spectrum, topics, recent list
   ------------------------------------------------------------------------- */
.hero { padding-top: clamp(36px, 5vw, 68px); }
.hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 52px); align-items: center;
}
.hero__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(31px, 4.4vw, 47px); line-height: 1.04; letter-spacing: -0.026em;
  margin: 18px 0; color: var(--ink); text-wrap: balance;
}
.hero__title a { transition: opacity 0.2s ease; }
.hero__title a:hover { opacity: 0.72; }
.hero__excerpt { font-size: clamp(16px, 1.6vw, 17.5px); line-height: 1.55; color: var(--muted); margin-bottom: 24px; max-width: 48ch; }
.hero__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero__cta {
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink);
  border-bottom: 2px solid var(--accent); padding-bottom: 2px; transition: opacity 0.2s ease;
}
.hero__cta:hover { opacity: 0.62; }
.hero__dateline { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.cover {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  display: block; transition: transform 0.35s var(--ease);
}
.cover:hover { transform: translateY(-4px); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover--hero { aspect-ratio: 4 / 3; }
.cover__ph {
  position: absolute; inset: 0; padding: 16px;
  display: flex; align-items: flex-end;
  background: repeating-linear-gradient(45deg, var(--chip), var(--chip) 12px, transparent 12px, transparent 24px), var(--surface);
}
.cover__ph span {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); padding: 4px 9px; border-radius: 6px;
}

.spectrum {
  height: 3px; border-radius: 2px; margin-top: clamp(32px, 4vw, 48px); opacity: 0.9;
  background: linear-gradient(90deg, var(--c-find), var(--c-note), var(--c-proj), var(--c-tut), var(--c-web), var(--c-rev), var(--c-find));
  background-size: 200% 100%;
}
.topics { margin-top: clamp(26px, 3.5vw, 40px); }
.topics__label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 14px; }

.recent { padding-top: clamp(34px, 4.5vw, 52px); padding-bottom: clamp(48px, 6vw, 80px); }
.recent__head { margin-bottom: 6px; }
.post-rows { margin-top: 6px; }

.post-row {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(14px, 3vw, 28px);
  align-items: start; padding: 22px 12px; border-top: 1px solid var(--line);
  border-radius: 10px; transition: background-color 0.25s ease, transform 0.25s ease;
}
.post-row:hover { background: var(--chip); transform: translateX(5px); }
.post-row__cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--accent); margin-bottom: 9px;
}
.post-row__cat .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.post-row__title {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.015em; line-height: 1.18; margin-bottom: 7px; color: var(--ink);
}
.post-row__excerpt { font-size: 15px; color: var(--muted); line-height: 1.5; max-width: 64ch; }
.post-row__meta { text-align: right; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 3px; line-height: 1.7; }

/* -------------------------------------------------------------------------
   6. Cards (tag/author grids + read next)
   ------------------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.readnext .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }

.post-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius); padding: 24px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
}
.post-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 24px 50px -26px var(--accent); }
.post-card__bar { height: 3px; width: 44px; border-radius: 2px; background: var(--accent); margin-bottom: 18px; }
.post-card__cat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--accent); margin-bottom: 13px;
}
.post-card__cat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.post-card__title { font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 11px; }
.post-card__excerpt { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-bottom: 20px; }
.post-card__meta { margin-top: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* -------------------------------------------------------------------------
   7. Article
   ------------------------------------------------------------------------- */
.article__header { padding-top: clamp(26px, 4vw, 46px); }
.article__header .badge { margin: 22px 0 18px; }
.article__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(30px, 4.6vw, 50px); line-height: 1.05; letter-spacing: -0.028em;
  color: var(--ink); text-wrap: balance;
}
.article__excerpt { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.55; color: var(--muted); margin-top: 18px; max-width: 60ch; }
.byline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.byline__avatar { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(from 210deg, var(--c-web), var(--c-rev), var(--c-find), var(--c-web)); }
.byline__avatar-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.byline__meta { display: flex; flex-direction: column; gap: 2px; }
.byline__name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.byline__date { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

.article__cover { margin-top: 26px; }
.article__cover img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.article__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }

.readnext { margin-top: clamp(46px, 6vw, 72px); padding-top: clamp(30px, 4vw, 44px); padding-bottom: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.readnext .section-label { margin-bottom: 20px; }

/* -------------------------------------------------------------------------
   8. Prose (Ghost content / Koenig cards)
   ------------------------------------------------------------------------- */
.article__body { padding-top: clamp(30px, 4vw, 48px); font-size: 17.5px; line-height: 1.75; color: var(--ink2); }
.article__body > * + * { margin-top: 22px; }
.article__body p { margin: 0; }
.article__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.article__body strong { color: var(--ink); font-weight: 700; }
.article__body h2 {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(23px, 2.6vw, 30px);
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin-top: 44px;
}
.article__body h3 {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 2vw, 23px);
  letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); margin-top: 34px;
}
.article__body h2 + *, .article__body h3 + * { margin-top: 14px; }
.article__body ul, .article__body ol { margin: 22px 0 0; padding-left: 22px; }
.article__body li { margin-bottom: 8px; line-height: 1.6; }
.article__body li::marker { color: var(--accent); }

.article__body blockquote {
  padding: 6px 0 6px 22px; border-left: 3px solid var(--accent);
  font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.35; letter-spacing: -0.015em; color: var(--ink);
}

.article__body hr { border: none; height: 1px; background: var(--line); margin: 40px 0; }

.article__body :not(pre) > code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--surface2); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 6px; color: var(--ink);
}
.article__body pre {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; color: var(--ink2);
  background: var(--surface2); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 18px 20px; overflow-x: auto;
}
.article__body pre code { font-family: inherit; background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

/* Koenig image / figure */
.article__body figure { margin-top: 28px; }
.article__body img { border-radius: var(--radius-sm); border: 1px solid var(--line); margin-inline: auto; }
.article__body figcaption { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 10px; }
.kg-width-wide { max-width: var(--maxw-wide); margin-inline: auto; }
.kg-width-full { max-width: 100%; }

/* Koenig callout → styled as the design's "Note" box */
.kg-callout-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 26%, var(--line));
  border-radius: var(--radius-sm); padding: 18px 20px;
}
.kg-callout-emoji { font-size: 18px; line-height: 1.5; }
.kg-callout-text { font-size: 15.5px; line-height: 1.6; color: var(--ink2); }

/* Koenig button */
.kg-btn { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 14px; }

/* Koenig bookmark */
.kg-bookmark-container { display: flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); color: inherit; }
.kg-bookmark-content { padding: 18px 20px; }
.kg-bookmark-title { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.kg-bookmark-description { color: var(--muted); font-size: 14px; margin-top: 6px; }
.kg-bookmark-metadata { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 10px; }

/* Prism syntax tokens (loaded when code highlighting is enabled) */
.article__body .token.comment,
.article__body .token.prolog,
.article__body .token.doctype,
.article__body .token.cdata { color: var(--muted); font-style: italic; }
.article__body .token.punctuation { color: var(--ink2); }
.article__body .token.property,
.article__body .token.tag,
.article__body .token.boolean,
.article__body .token.number,
.article__body .token.constant,
.article__body .token.symbol { color: var(--c-cry); }
.article__body .token.selector,
.article__body .token.attr-name,
.article__body .token.string,
.article__body .token.char,
.article__body .token.builtin { color: var(--c-proj); }
.article__body .token.operator,
.article__body .token.entity,
.article__body .token.url { color: var(--c-tut); }
.article__body .token.atrule,
.article__body .token.attr-value,
.article__body .token.keyword { color: var(--c-web); }
.article__body .token.function,
.article__body .token.class-name { color: var(--c-find); }
.article__body .token.regex,
.article__body .token.important,
.article__body .token.variable { color: var(--c-note); }

/* -------------------------------------------------------------------------
   9. Archive (tag / author) + filters
   ------------------------------------------------------------------------- */
.archive { padding-top: clamp(30px, 4vw, 50px); }
.archive__header { display: flex; align-items: baseline; gap: 16px; margin: 24px 0 10px; flex-wrap: wrap; }
.archive__swatch { width: 16px; height: 16px; border-radius: 5px; background: var(--accent); align-self: center; }
.archive__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.archive__count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.archive__blurb { font-size: 16.5px; line-height: 1.55; color: var(--muted); max-width: 56ch; margin-bottom: 26px; }
.archive__list { padding-top: clamp(26px, 3.5vw, 38px); padding-bottom: clamp(48px, 6vw, 80px); }

.filters { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 8px; }
.filter {
  display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--chip); color: var(--muted);
  font-family: var(--font-mono); font-size: 12px;
  transition: transform 0.2s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.filter:hover { transform: translateY(-2px); }
.filter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* -------------------------------------------------------------------------
   10. Page / About
   ------------------------------------------------------------------------- */
.page__header { padding-top: clamp(34px, 5vw, 64px); }
.page__header .section-label { margin-bottom: 18px; }
.page__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.028em; color: var(--ink); max-width: 20ch; text-wrap: balance; }
.page__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px, 4vw, 48px); align-items: start; margin-top: clamp(34px, 4vw, 52px); }
.page__grid:has(.page__body--full) { display: block; }
.page__portrait { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.page__portrait img { width: 100%; height: 100%; object-fit: cover; }
.page__body { font-size: 17px; line-height: 1.7; color: var(--ink2); }
.page__body > * + * { margin-top: 18px; }
.page__body h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(21px, 2.4vw, 27px); color: var(--ink); letter-spacing: -0.015em; margin-top: 32px; }
.page__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.page__body img { border-radius: var(--radius-sm); border: 1px solid var(--line); }

.colophon { margin-top: clamp(38px, 4.5vw, 56px); padding-bottom: clamp(48px, 6vw, 80px); }
.colophon .section-label { margin-bottom: 14px; font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.12em; }

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); transition: background-color 0.45s ease, border-color 0.45s ease; }
.footer__grid { max-width: var(--maxw); margin-inline: auto; padding: clamp(34px, 4vw, 48px) var(--pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(26px, 4vw, 44px); }
.footer__desc { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 30ch; margin-top: 12px; }
.footer__title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 14px; }
.site-footer .nav { flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer .nav__link { font-size: 14px; color: var(--ink2); }
.site-footer .nav__link:hover { color: var(--ink); }
.footer__rss { display: block; margin-top: 10px; font-size: 14px; color: var(--ink2); }
.footer__rss:hover { color: var(--ink); }
.footer__bottom { max-width: var(--maxw); margin-inline: auto; padding: 18px var(--pad); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* -------------------------------------------------------------------------
   12. Pagination
   ------------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 44px; }
.pagination__btn { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink2); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 16px; transition: border-color 0.2s ease, transform 0.2s ease; }
.pagination__btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.pagination__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.pagination__page { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------------------------
   13. Error page
   ------------------------------------------------------------------------- */
.error { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 80px var(--pad); }
.error__code { font-family: var(--font-head); font-weight: 800; font-size: clamp(64px, 12vw, 128px); letter-spacing: -0.04em; line-height: 1; background: linear-gradient(120deg, var(--c-web), var(--c-rev), var(--c-find)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error__msg { font-size: 18px; color: var(--muted); }

/* -------------------------------------------------------------------------
   14. Motion
   ------------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes spectrum-sweep { from { background-position: 0% 0; } to { background-position: 200% 0; } }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.5s var(--ease) both; }
  .spectrum { animation: spectrum-sweep 9s linear infinite; }
  .post-rows .post-row, .card-grid > * { animation: rise 0.55s var(--ease) both; }
  .post-rows .post-row:nth-child(1), .card-grid > *:nth-child(1) { animation-delay: 0.04s; }
  .post-rows .post-row:nth-child(2), .card-grid > *:nth-child(2) { animation-delay: 0.10s; }
  .post-rows .post-row:nth-child(3), .card-grid > *:nth-child(3) { animation-delay: 0.16s; }
  .post-rows .post-row:nth-child(4), .card-grid > *:nth-child(4) { animation-delay: 0.22s; }
  .post-rows .post-row:nth-child(5), .card-grid > *:nth-child(5) { animation-delay: 0.28s; }
  .post-rows .post-row:nth-child(6), .card-grid > *:nth-child(6) { animation-delay: 0.34s; }
  .post-rows .post-row:nth-child(n+7), .card-grid > *:nth-child(n+7) { animation-delay: 0.4s; }
}

/* -------------------------------------------------------------------------
   15. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .site-header__inner { gap: 12px; }
  .nav { gap: 16px; }
  .post-row { grid-template-columns: 1fr; }
  .post-row__meta { text-align: left; }
  .footer__bottom { justify-content: flex-start; }
}