/* ============================================================================
   Ğ Blog — Editorial / Literary
   Paper & ink. Hairline rules. Variable serif typography.
   ========================================================================= */

@layer reset, tokens, base, layout, components, utilities, motion;

/* ────────────────────────────────────────────────────────────── reset ─── */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul {
    margin: 0;
  }

  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

  body { min-height: 100vh; }

  img, picture, svg, video {
    max-width: 100%;
    display: block;
    height: auto;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  table { border-collapse: collapse; }

  ::selection {
    background: var(--vermillion);
    color: var(--paper);
  }
}

/* ───────────────────────────────────────────────────────────── tokens ─── */
@layer tokens {
  :root {
    /* Type stack */
    --font-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond',
                    'Baskerville', 'Times New Roman', serif;
    --font-body: 'Newsreader', 'Iowan Old Style', 'Charter',
                 'Source Serif Pro', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas,
                 'Liberation Mono', Menlo, monospace;

    /* Light theme — paper & ink */
    --paper:        #F4EFE6;
    --paper-deep:   #ECE5D7;
    --paper-soft:   #FAF6EE;
    --ink:          #1A1814;
    --ink-soft:     #4B453B;
    --ink-mute:     #756D5E;
    --rule:         rgb(26 24 20 / 0.14);
    --rule-strong:  rgb(26 24 20 / 0.28);
    --vermillion:   #B23A2C;
    --vermillion-soft: #D87967;
    --vermillion-wash: rgb(178 58 44 / 0.08);
    --gold:         #8A6B1F;
    --moss:         #4A6B35;

    /* Spatial scale (8px base) */
    --s-1: 0.125rem;  /*  2 */
    --s-2: 0.25rem;   /*  4 */
    --s-3: 0.5rem;    /*  8 */
    --s-4: 0.75rem;   /* 12 */
    --s-5: 1rem;      /* 16 */
    --s-6: 1.5rem;    /* 24 */
    --s-7: 2.5rem;    /* 40 */
    --s-8: 4rem;      /* 64 */
    --s-9: 6.5rem;    /* 104 */

    /* Type scale (display) */
    --t-eyebrow: 0.75rem;
    --t-meta:    0.8125rem;
    --t-body:    1.0625rem;
    --t-lede:    1.25rem;
    --t-h3:      1.5rem;
    --t-h2:      2rem;
    --t-h1:      2.75rem;
    --t-display: clamp(2.75rem, 6vw, 5rem);
    --t-cover:   clamp(3.25rem, 9vw, 7rem);

    /* Lines */
    --lh-tight:  1.05;
    --lh-snug:   1.2;
    --lh-body:   1.6;
    --lh-loose:  1.85;

    /* Layout */
    --measure: 64ch;
    --wide: 1240px;
    --col-gap: clamp(1.5rem, 3vw, 3rem);

    /* Geometry */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 6px;
    --hairline: 1px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 360ms;

    /* Surface */
    --shadow-soft: 0 1px 0 var(--rule);
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--vermillion);

    color-scheme: light;
  }

  :root[data-theme='dark'] {
    --paper:        #14120E;
    --paper-deep:   #0E0C09;
    --paper-soft:   #1B1814;
    --ink:          #E8E1D2;
    --ink-soft:     #B0A893;
    --ink-mute:     #847C6A;
    --rule:         rgb(232 225 210 / 0.14);
    --rule-strong:  rgb(232 225 210 / 0.30);
    --vermillion:   #E08770;
    --vermillion-soft: #F0A892;
    --vermillion-wash: rgb(224 135 112 / 0.10);
    --gold:         #D6B25A;
    --moss:         #94B377;
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--vermillion);
    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      --paper:        #14120E;
      --paper-deep:   #0E0C09;
      --paper-soft:   #1B1814;
      --ink:          #E8E1D2;
      --ink-soft:     #B0A893;
      --ink-mute:     #847C6A;
      --rule:         rgb(232 225 210 / 0.14);
      --rule-strong:  rgb(232 225 210 / 0.30);
      --vermillion:   #E08770;
      --vermillion-soft: #F0A892;
      --vermillion-wash: rgb(224 135 112 / 0.10);
      --gold:         #D6B25A;
      --moss:         #94B377;
      color-scheme: dark;
    }
  }
}

/* ─────────────────────────────────────────────────────────────── base ─── */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--paper);
    font-feature-settings: 'kern', 'liga', 'calt';
    background-image:
      radial-gradient(rgb(26 24 20 / 0.03) 1px, transparent 1px);
    background-size: 22px 22px;
    background-attachment: fixed;
  }

  :root[data-theme='dark'] body,
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) body {
      background-image:
        radial-gradient(rgb(232 225 210 / 0.025) 1px, transparent 1px);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 460;
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
    color: var(--ink);
    line-height: var(--lh-snug);
    text-wrap: balance;
  }

  h1 { font-size: var(--t-h1); letter-spacing: -0.02em; }
  h2 { font-size: var(--t-h2); letter-spacing: -0.015em; }
  h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }

  p { text-wrap: pretty; }

  a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-decoration-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  a:hover {
    text-decoration-color: var(--vermillion);
    color: var(--vermillion);
  }

  :focus-visible {
    outline: 2px solid var(--vermillion);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  hr {
    border: 0;
    border-top: var(--hairline) solid var(--rule);
    margin-block: var(--s-7);
  }

  code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }

  kbd {
    font-size: 0.78em;
    padding: 2px 6px;
    border: var(--hairline) solid var(--rule-strong);
    border-radius: var(--r-sm);
    background: var(--paper-soft);
  }
}

/* ───────────────────────────────────────────────────────────── layout ─── */
@layer layout {
  .wide {
    width: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }

  .measure {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 1.5rem);
  }

  .stack > * + * { margin-top: var(--stack, var(--s-5)); }
  .stack-tight  { --stack: var(--s-3); }
  .stack-loose  { --stack: var(--s-7); }

  .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--s-3) var(--s-5);
    background: var(--ink);
    color: var(--paper);
    z-index: 100;
    transform: translateY(-120%);
    transition: transform var(--dur-base) var(--ease-out);
    text-decoration: none;
  }
  .skip-link:focus-visible {
    transform: translateY(0);
    outline-offset: 2px;
  }

  main {
    padding-bottom: var(--s-9);
    padding-top: var(--s-7);
  }
}

/* ───────────────────────────────────────────────────────── components ─── */
@layer components {

  /* ── Masthead ────────────────────────────────────────────────────── */
  .masthead {
    border-bottom: var(--hairline) solid var(--rule);
    background: var(--paper);
    position: sticky;
    top: 0;
    z-index: 30;
    padding-top: max(0px, env(safe-area-inset-top));
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
  }

  .masthead-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-5);
    padding-block: var(--s-4);
    min-height: 64px;
  }

  .masthead-logo {
    font-family: var(--font-display);
    font-weight: 600;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--ink);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.15em;
  }
  .masthead-logo:hover { color: var(--vermillion); }
  .masthead-logo .glyph { font-style: italic; }
  .masthead-logo .word {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-left: var(--s-3);
    align-self: center;
    border-left: var(--hairline) solid var(--rule-strong);
    padding-left: var(--s-3);
  }

  .masthead-nav {
    display: flex;
    justify-content: center;
    gap: var(--s-6);
  }
  .masthead-nav a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-decoration: none;
    color: var(--ink-soft);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .masthead-nav a:hover,
  .masthead-nav a[aria-current='page'] { color: var(--vermillion); }
  .masthead-nav a[aria-current='page'] {
    border-bottom: 1px solid var(--vermillion);
  }

  .masthead-tools {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }

  .icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--hairline) solid var(--rule);
    border-radius: 50%;
    color: var(--ink-soft);
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
  }
  .icon-btn:hover {
    color: var(--vermillion);
    border-color: var(--vermillion);
    background: var(--vermillion-wash);
  }
  .icon-btn svg { width: 16px; height: 16px; }

  @media (max-width: 720px) {
    .masthead-nav { display: none; }
    .masthead-inner { grid-template-columns: 1fr auto; min-height: 56px; gap: var(--s-3); }
    .masthead-tools { justify-self: end; }
  }

  /* ── Eyebrow / metadata ──────────────────────────────────────────── */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--t-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
  }
  .eyebrow .sep { color: var(--rule-strong); margin-inline: 0.7em; }
  .eyebrow .accent { color: var(--vermillion); }

  .meta {
    font-family: var(--font-body);
    font-size: var(--t-meta);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }

  /* ── Issue cover ─────────────────────────────────────────────────── */
  .issue-cover {
    padding-block: var(--s-7) var(--s-8);
    border-bottom: var(--hairline) solid var(--rule);
    margin-bottom: var(--s-8);
  }

  .issue-cover-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--col-gap);
    align-items: end;
  }
  @media (min-width: 900px) {
    .issue-cover-grid {
      grid-template-columns: 1.2fr 1fr;
      gap: var(--s-9);
    }
  }

  .issue-cover-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
  }
  .issue-cover-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
  }

  .issue-cover-title {
    font-family: var(--font-display);
    font-size: var(--t-cover);
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-weight: 380;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
    text-wrap: balance;
  }
  .issue-cover-title em {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    color: var(--vermillion);
  }

  .issue-cover-lede {
    font-family: var(--font-body);
    font-size: var(--t-lede);
    line-height: var(--lh-body);
    color: var(--ink-soft);
    margin-top: var(--s-6);
    max-width: 38ch;
    text-wrap: pretty;
  }

  .issue-cover-byline {
    margin-top: var(--s-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    align-items: center;
  }

  .issue-cover-aside {
    border-left: var(--hairline) solid var(--rule);
    padding-left: var(--s-6);
  }
  @media (max-width: 899px) {
    .issue-cover-aside {
      border-left: 0;
      border-top: var(--hairline) solid var(--rule);
      padding-left: 0;
      padding-top: var(--s-6);
    }
  }
  .issue-cover-aside-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-mute);
    margin-bottom: var(--s-5);
  }
  .issue-cover-aside ul { list-style: none; padding: 0; margin: 0; }
  .issue-cover-aside li + li {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: var(--hairline) dashed var(--rule);
  }
  .issue-cover-aside a {
    text-decoration: none;
    display: block;
  }
  .issue-cover-aside a:hover .featured-title { color: var(--vermillion); }
  .featured-title {
    font-family: var(--font-display);
    font-weight: 480;
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .featured-meta {
    display: block;
    margin-top: var(--s-2);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
  }

  /* ── Section heads ───────────────────────────────────────────────── */
  .section-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-5);
    margin-bottom: var(--s-7);
  }
  .section-head-rule {
    flex: 1;
    height: 1px;
    background: var(--rule);
  }
  .section-head-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    font-style: italic;
    letter-spacing: -0.01em;
  }

  /* ── Tag filter strip ────────────────────────────────────────────── */
  .tag-filter {
    margin-block: var(--s-7) var(--s-6);
    padding: var(--s-5) 0;
    border-top: var(--hairline) solid var(--rule);
    border-bottom: var(--hairline) solid var(--rule);
    display: flex;
    align-items: center;
    gap: var(--s-5);
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .tag-filter-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    white-space: nowrap;
  }
  .tag-chip {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: var(--s-2) var(--s-4);
    border: var(--hairline) solid var(--rule-strong);
    border-radius: 999px;
    color: var(--ink-soft);
    background: transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    scroll-snap-align: start;
  }
  .tag-chip:hover {
    color: var(--ink);
    border-color: var(--ink);
  }
  .tag-chip[aria-pressed='true'],
  .tag-chip.is-active {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
  }
  .tag-chip-clear {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: none;
    border: 0;
    padding: var(--s-2) var(--s-3);
  }
  .tag-chip-clear:hover { color: var(--vermillion); }
  .tag-chip-clear[hidden] { display: none; }

  /* ── Archive list (homepage rows) ────────────────────────────────── */
  .archive {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--hairline) solid var(--rule);
  }
  .archive-row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: var(--s-5);
    padding-block: var(--s-6);
    border-bottom: var(--hairline) solid var(--rule);
    align-items: baseline;
    content-visibility: auto;
    contain-intrinsic-size: 0 140px;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .archive-row:hover { background: var(--paper-soft); }
  .archive-row a { text-decoration: none; }
  .archive-date {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .archive-body { min-width: 0; }
  .archive-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1.2;
    font-weight: 460;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: var(--s-3);
    transition: color var(--dur-fast) var(--ease-out);
    text-wrap: balance;
  }
  .archive-row a:hover .archive-title { color: var(--vermillion); }
  .archive-dek {
    font-family: var(--font-body);
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: var(--s-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
  }
  .archive-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-3);
  }
  .archive-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
  }
  .archive-tag::before { content: '#'; opacity: 0.5; margin-right: 0.1em; }
  .archive-aside {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: right;
    align-self: start;
    padding-top: 0.4em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .archive-aside .read-time { display: block; }
  .archive-aside .reads { display: block; margin-top: var(--s-2); color: var(--ink-mute); }
  .archive-aside .difficulty { display: block; margin-top: var(--s-2); color: var(--vermillion); }

  @media (max-width: 900px) {
    .archive-row {
      grid-template-columns: 1fr;
      gap: var(--s-3);
      padding-block: var(--s-5);
    }
    .archive-aside {
      text-align: left;
      padding-top: 0;
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-4);
      align-items: baseline;
    }
    .archive-aside .read-time,
    .archive-aside .reads,
    .archive-aside .difficulty {
      display: inline;
      margin-top: 0;
    }
    .archive-title { font-size: 1.35rem; }
  }

  /* ── Featured cards (issue cover aside variant) ──────────────────── */
  .post-card {
    display: grid;
    gap: var(--s-4);
  }
  .post-card-image {
    aspect-ratio: 16 / 9;
    background: var(--paper-deep);
    overflow: hidden;
    border: var(--hairline) solid var(--rule);
  }
  .post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Empty states ────────────────────────────────────────────────── */
  .empty-state {
    padding: var(--s-8) var(--s-5);
    text-align: center;
    color: var(--ink-soft);
  }
  .empty-state-glyph {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 4rem;
    color: var(--vermillion);
    opacity: 0.4;
    line-height: 1;
    margin-bottom: var(--s-5);
  }
  .empty-state-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: var(--s-3);
  }

  /* ── Reading progress ────────────────────────────────────────────── */
  .reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--vermillion);
    width: 0;
    z-index: 40;
    transform-origin: left center;
    pointer-events: none;
  }

  /* ── Post layout ─────────────────────────────────────────────────── */
  .post-cover {
    padding-top: var(--s-6);
    padding-bottom: var(--s-7);
    border-bottom: var(--hairline) solid var(--rule);
    margin-bottom: var(--s-8);
    text-align: center;
  }
  .post-cover-eyebrow {
    margin-bottom: var(--s-6);
  }
  .post-cover-title {
    font-family: var(--font-display);
    font-size: var(--t-display);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 380;
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
    text-wrap: balance;
    margin-bottom: var(--s-5);
  }
  .post-cover-dek {
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--t-lede);
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 50ch;
    margin: 0 auto var(--s-7);
    text-wrap: balance;
  }
  .post-cover-byline {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-4);
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
  }
  .post-cover-byline .author {
    color: var(--ink);
    border-bottom: 1px solid var(--vermillion);
    padding-bottom: 1px;
  }
  .post-cover-byline .sep { color: var(--rule-strong); }
  .post-cover-byline .difficulty {
    color: var(--vermillion);
    border: 1px solid currentColor;
    padding: 2px 8px;
    border-radius: 999px;
  }

  .post-hero {
    margin: var(--s-7) auto 0;
    max-width: 1080px;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border: var(--hairline) solid var(--rule);
  }
  .post-hero img { width: 100%; height: 100%; object-fit: cover; }

  .post-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--col-gap);
    width: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  /* Body column is always constrained to a comfortable measure, even
     at small/medium widths where there is no TOC sidebar. */
  .post-main {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    min-width: 0;
  }
  .post-aside-left,
  .post-aside-right { display: none; }

  @media (min-width: 1160px) {
    .post-layout {
      grid-template-columns: 200px minmax(0, 1fr) 200px;
      align-items: start;
    }
    .post-aside-left  { display: block; grid-column: 1; position: sticky; top: 96px; }
    .post-main        { grid-column: 2; }
    .post-aside-right { display: block; grid-column: 3; position: sticky; top: 96px; }
  }

  /* Post content (markdown output) */
  .post-content {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink);
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    min-width: 0;
  }
  .post-content > * + * { margin-top: var(--s-5); }
  .post-content img {
    max-width: 100%;
    height: auto;
  }
  .post-content iframe,
  .post-content video {
    max-width: 100%;
    width: 100%;
  }

  .post-content > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 460;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    float: left;
    font-size: 4.4em;
    line-height: 0.85;
    padding-right: 0.08em;
    padding-top: 0.06em;
    color: var(--vermillion);
  }
  @supports (initial-letter: 3) {
    .post-content > p:first-of-type::first-letter {
      float: none;
      initial-letter: 3 2;
      margin-right: 0.1em;
    }
  }

  .post-content h2 {
    font-size: 1.85rem;
    margin-top: var(--s-7);
    margin-bottom: var(--s-4);
    padding-top: var(--s-5);
    border-top: var(--hairline) solid var(--rule);
    scroll-margin-top: 96px;
    font-weight: 460;
    letter-spacing: -0.018em;
  }
  .post-content h3 {
    font-size: 1.35rem;
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
    scroll-margin-top: 96px;
    font-weight: 480;
    font-style: italic;
  }
  .post-content h2 .toclink,
  .post-content h3 .toclink {
    color: inherit;
    text-decoration: none;
  }

  .post-content a {
    color: var(--vermillion);
    text-decoration: underline;
    text-decoration-color: var(--vermillion-soft);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  .post-content a:hover {
    text-decoration-thickness: 2px;
    text-decoration-color: var(--vermillion);
  }

  .post-content blockquote {
    border-left: 3px solid var(--vermillion);
    padding-left: var(--s-5);
    margin-left: 0;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 1.18rem;
  }

  .post-content hr {
    border: 0;
    text-align: center;
    margin-block: var(--s-7);
  }
  .post-content hr::before {
    content: '✦ ✦ ✦';
    color: var(--ink-mute);
    letter-spacing: 0.6em;
    font-size: 0.8rem;
  }

  .post-content ul,
  .post-content ol {
    padding-left: var(--s-6);
  }
  .post-content li + li { margin-top: var(--s-3); }
  .post-content li::marker { color: var(--vermillion); }

  .post-content img {
    border: var(--hairline) solid var(--rule);
    margin-block: var(--s-6);
  }

  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: var(--s-6);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--r-xs);
  }
  .post-content table {
    width: 100%;
    min-width: max-content;
    font-size: 0.95rem;
  }
  .table-scroll > .post-content table,
  .table-scroll > table { margin-block: 0; min-width: 100%; }
  .post-content thead { border-bottom: 2px solid var(--ink); }
  .post-content th,
  .post-content td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    border-bottom: var(--hairline) solid var(--rule);
  }
  .post-content th {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }

  /* Code blocks */
  .post-content pre {
    background: var(--paper-deep);
    border: var(--hairline) solid var(--rule-strong);
    padding: var(--s-5);
    margin-block: var(--s-6);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    line-height: 1.55;
    position: relative;
    border-radius: var(--r-sm);
  }
  .post-content :not(pre) > code {
    background: var(--vermillion-wash);
    padding: 0.1em 0.4em;
    border-radius: var(--r-xs);
    font-size: 0.9em;
    color: var(--vermillion);
    border: var(--hairline) solid var(--rule);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .copy-btn {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
    background: var(--paper);
    border: var(--hairline) solid var(--rule-strong);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-xs);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .post-content pre:hover .copy-btn,
  .post-content pre:focus-within .copy-btn { opacity: 1; }
  .copy-btn:hover, .copy-btn:focus-visible {
    color: var(--vermillion);
    border-color: var(--vermillion);
  }
  .copy-btn.is-copied { color: var(--moss); border-color: var(--moss); }

  /* Codehilite (Pygments) — neutral tones tuned to paper palette */
  .codehilite .k,  .codehilite .kn { color: var(--vermillion); }
  .codehilite .s,  .codehilite .s1, .codehilite .s2, .codehilite .sd { color: var(--moss); }
  .codehilite .c,  .codehilite .c1, .codehilite .cm { color: var(--ink-mute); font-style: italic; }
  .codehilite .n  { color: var(--ink); }
  .codehilite .nb, .codehilite .nf, .codehilite .nc { color: var(--gold); }
  .codehilite .mi, .codehilite .mf { color: var(--gold); }
  .codehilite .o { color: var(--ink-soft); }

  /* ── TOC ─────────────────────────────────────────────────────────── */
  .toc {
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }
  .toc-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-mute);
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: var(--hairline) solid var(--rule);
  }
  .toc-list { list-style: none; padding: 0; margin: 0; }
  .toc-item { margin-bottom: var(--s-3); }
  .toc-item a {
    color: var(--ink-mute);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    padding: 2px 0 2px var(--s-3);
    border-left: 1px solid var(--rule);
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .toc-item.level-3 a { padding-left: var(--s-5); font-size: 0.74rem; }
  .toc-item a:hover { color: var(--ink); }
  .toc-item.is-active a {
    color: var(--vermillion);
    border-left-color: var(--vermillion);
  }

  /* ── Series trail (in-post) ──────────────────────────────────────── */
  .series-trail {
    margin-block: var(--s-7);
    padding: var(--s-6);
    border: var(--hairline) solid var(--rule-strong);
    background: var(--paper-soft);
    border-radius: var(--r-sm);
  }
  .series-trail-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: var(--s-3);
  }
  .series-trail-link {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--ink);
    text-decoration: none;
  }
  .series-trail-link:hover { color: var(--vermillion); }
  .series-trail-nav {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: var(--hairline) dashed var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }
  .series-trail-nav a { text-decoration: none; }
  .series-trail-pos {
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
  }

  /* ── Emote bar ───────────────────────────────────────────────────── */
  .emote-bar {
    margin-block: var(--s-8);
    padding: var(--s-6) 0;
    border-top: var(--hairline) solid var(--rule);
    border-bottom: var(--hairline) solid var(--rule);
    text-align: center;
  }
  .emote-bar-prompt {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 1.1rem;
    margin-bottom: var(--s-5);
  }
  .emote-bar-buttons {
    display: inline-flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    justify-content: center;
  }
  .emote-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border: var(--hairline) solid var(--rule-strong);
    background: var(--paper);
    border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    min-width: 64px;
  }
  .emote-btn:hover {
    border-color: var(--vermillion);
    background: var(--vermillion-wash);
    transform: translateY(-2px);
  }
  .emote-btn.voted {
    border-color: var(--vermillion);
    background: var(--vermillion-wash);
  }
  .emote-icon { font-size: 1.4rem; line-height: 1; }
  .emote-count {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .emote-btn.voted .emote-count { color: var(--vermillion); }

  /* ── Share bar ───────────────────────────────────────────────────── */
  .share-bar {
    margin-top: var(--s-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
  }
  .share-bar .share-label::after {
    content: '·';
    margin-left: var(--s-4);
    color: var(--rule-strong);
  }
  .share-btn {
    color: var(--ink-soft);
    background: none;
    border: 0;
    padding: var(--s-2);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .share-btn:hover { color: var(--vermillion); }

  /* ── Related posts ───────────────────────────────────────────────── */
  .related {
    margin-top: var(--s-8);
    padding-top: var(--s-7);
    border-top: var(--hairline) solid var(--rule);
  }
  .related-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    margin-bottom: var(--s-6);
    color: var(--ink-soft);
    text-align: center;
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--col-gap);
  }
  .related-item a {
    text-decoration: none;
    display: block;
  }
  .related-item-title {
    font-family: var(--font-display);
    font-weight: 460;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: var(--s-2);
    transition: color var(--dur-fast) var(--ease-out);
    text-wrap: balance;
  }
  .related-item a:hover .related-item-title { color: var(--vermillion); }
  .related-item-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
  }

  /* ── Series page ─────────────────────────────────────────────────── */
  .series-grid {
    display: grid;
    gap: var(--col-gap);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  .series-card {
    padding: var(--s-6);
    border: var(--hairline) solid var(--rule-strong);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .series-card:hover {
    background: var(--paper-soft);
    border-color: var(--vermillion);
  }
  .series-card-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: var(--s-4);
  }
  .series-card-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.7rem;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: var(--s-3);
    text-wrap: balance;
    font-weight: 480;
  }
  .series-card-dek {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
  }
  .series-card-count {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: var(--hairline) dashed var(--rule);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--vermillion);
    font-variant-numeric: tabular-nums;
  }

  .series-detail-cover {
    text-align: center;
    margin-bottom: var(--s-8);
    padding-block: var(--s-6) var(--s-7);
    border-bottom: var(--hairline) solid var(--rule);
  }
  .series-detail-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--t-display);
    line-height: 1;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-5);
    text-wrap: balance;
  }
  .series-ol {
    list-style: upper-roman;
    padding-left: var(--s-7);
    counter-reset: none;
  }
  .series-ol li {
    margin-bottom: var(--s-6);
    padding-left: var(--s-3);
  }
  .series-ol li::marker {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--vermillion);
    font-size: 1.1em;
  }

  /* ── Search ──────────────────────────────────────────────────────── */
  .search-form {
    margin-block: var(--s-7);
    border-bottom: 2px solid var(--ink);
    padding-bottom: var(--s-3);
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
  }
  .search-form-glyph {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--vermillion);
    font-size: 1.5rem;
    line-height: 1;
  }
  .search-input {
    flex: 1;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.6rem;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--ink);
    padding: var(--s-2) 0;
    min-width: 0;
  }
  .search-input::placeholder { color: var(--ink-mute); opacity: 0.7; }
  .search-input:focus-visible { outline: 0; }
  .search-form:focus-within { border-bottom-color: var(--vermillion); }

  .search-meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
    margin-bottom: var(--s-6);
  }

  /* ── 404 ─────────────────────────────────────────────────────────── */
  .err-404 {
    text-align: center;
    padding-block: var(--s-9);
  }
  .err-404-code {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 380;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    font-size: clamp(8rem, 22vw, 14rem);
    line-height: 0.9;
    color: var(--vermillion);
    letter-spacing: -0.03em;
  }
  .err-404-msg {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--ink-soft);
    margin-block: var(--s-5) var(--s-7);
    text-wrap: balance;
  }

  /* ── Buttons & forms ─────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-decoration: none;
    border: var(--hairline) solid var(--ink);
    color: var(--ink);
    background: transparent;
    border-radius: var(--r-xs);
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    min-height: 40px;
  }
  .btn:hover {
    background: var(--ink);
    color: var(--paper);
  }
  .btn-primary {
    background: var(--vermillion);
    border-color: var(--vermillion);
    color: var(--paper);
  }
  .btn-primary:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .btn-ghost {
    border-color: var(--rule-strong);
    color: var(--ink-soft);
  }
  .btn-ghost:hover {
    border-color: var(--ink);
    background: transparent;
    color: var(--ink);
  }
  .btn-danger {
    border-color: var(--vermillion);
    color: var(--vermillion);
  }
  .btn-danger:hover {
    background: var(--vermillion);
    color: var(--paper);
  }
  .btn[disabled],
  .btn[aria-busy='true'] {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .btn-spinner {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .field-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
    font-weight: 500;
  }
  .field-hint {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-mute);
    margin-top: var(--s-1);
  }
  .field-error {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--vermillion);
    margin-top: var(--s-2);
  }

  .input,
  .textarea,
  .select {
    width: 100%;
    background: var(--paper-soft);
    border: var(--hairline) solid var(--rule-strong);
    color: var(--ink);
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-body);
    font-size: 1rem;
    border-radius: var(--r-xs);
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
  }
  .input:focus-visible,
  .textarea:focus-visible,
  .select:focus-visible {
    outline: 0;
    border-color: var(--vermillion);
    background: var(--paper);
    box-shadow: var(--focus-ring);
  }
  .input.is-mono { font-family: var(--font-mono); font-size: 0.92rem; }
  .textarea {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    line-height: 1.55;
    resize: vertical;
    min-height: 12rem;
  }
  .textarea-tall { min-height: 28rem; }

  .checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    cursor: pointer;
  }
  .checkbox-row input[type='checkbox'] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--vermillion);
  }

  /* ── Pills ───────────────────────────────────────────────────────── */
  .pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border: 1px solid currentColor;
    line-height: 1.4;
  }
  .pill-pub { color: var(--moss); }
  .pill-draft { color: var(--ink-mute); }
  .pill-vermillion { color: var(--vermillion); }

  /* ── Flash messages ──────────────────────────────────────────────── */
  .flash-region {
    position: fixed;
    top: var(--s-5);
    right: var(--s-5);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-width: 360px;
  }
  .flash {
    padding: var(--s-4) var(--s-5);
    background: var(--paper);
    border: var(--hairline) solid var(--rule-strong);
    border-left: 3px solid var(--ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
    border-radius: var(--r-xs);
    box-shadow: 0 4px 16px rgb(26 24 20 / 0.08);
    animation: flash-in var(--dur-base) var(--ease-out);
  }
  .flash-success { border-left-color: var(--moss); }
  .flash-error   { border-left-color: var(--vermillion); }
  @keyframes flash-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* ── Footer ──────────────────────────────────────────────────────── */
  .footer {
    margin-top: var(--s-9);
    padding-block: var(--s-7);
    padding-bottom: max(var(--s-7), env(safe-area-inset-bottom));
    border-top: var(--hairline) solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-5);
    align-items: center;
  }
  .footer a { color: var(--ink-soft); text-decoration: none; }
  .footer a:hover { color: var(--vermillion); }
  .footer-mark {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
  }

  /* ── Admin: Editor's Desk ────────────────────────────────────────── */
  .admin-desk-cover {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--s-5);
    padding-bottom: var(--s-6);
    margin-bottom: var(--s-7);
    border-bottom: var(--hairline) solid var(--rule);
  }
  .admin-desk-cover > div:first-child { min-width: 0; flex: 1 1 240px; }
  .admin-desk-cover .admin-toolbar { flex-wrap: wrap; }
  .admin-desk-cover .admin-toolbar .btn { flex: 0 1 auto; }
  .admin-desk-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 460;
  }
  .admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-5);
    margin-bottom: var(--s-7);
  }
  .admin-stat {
    padding: var(--s-5);
    border: var(--hairline) solid var(--rule);
    background: var(--paper-soft);
  }
  .admin-stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: var(--s-3);
  }
  .admin-stat-value {
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 480;
  }
  .admin-stat-value .unit {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
    margin-left: var(--s-2);
  }

  .admin-toolbar {
    display: flex;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
  }

  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem));
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  .admin-table {
    width: 100%;
    min-width: 720px;
    border-top: var(--hairline) solid var(--rule);
    border-bottom: var(--hairline) solid var(--rule);
  }
  .admin-table th {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
    text-align: left;
    padding: var(--s-3) var(--s-4);
    border-bottom: var(--hairline) solid var(--rule);
    font-weight: 500;
    white-space: nowrap;
  }
  .admin-table td {
    padding: var(--s-4);
    border-bottom: var(--hairline) solid var(--rule);
    vertical-align: top;
    font-size: 0.95rem;
  }
  .admin-table tbody tr:hover { background: var(--paper-soft); }
  .admin-table .col-title {
    font-family: var(--font-display);
    font-weight: 480;
    font-size: 1.05rem;
  }
  .admin-table .col-meta {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .admin-table .col-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* ── Admin: editor split layout ──────────────────────────────────── */
  .editor-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  @media (min-width: 1100px) {
    .editor-grid {
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: var(--s-8);
    }
  }
  .editor-aside {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
  }
  .editor-aside-section {
    padding: var(--s-5);
    border: var(--hairline) solid var(--rule);
    background: var(--paper-soft);
  }
  .editor-aside-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: var(--s-4);
  }

  .image-preview {
    margin-top: var(--s-3);
    aspect-ratio: 16 / 9;
    border: var(--hairline) solid var(--rule);
    background: var(--paper-deep);
    overflow: hidden;
  }
  .image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .image-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
  }

  /* ── Admin: AI generator ─────────────────────────────────────────── */
  .ai-stage {
    border: var(--hairline) solid var(--rule);
    padding: var(--s-7);
    background: var(--paper-soft);
    border-radius: var(--r-sm);
  }
  .ai-progress {
    height: 2px;
    background: var(--rule);
    overflow: hidden;
    margin-block: var(--s-5);
    border-radius: 1px;
  }
  .ai-progress-bar {
    height: 100%;
    width: 0;
    background: var(--vermillion);
    transition: width var(--dur-slow) var(--ease-out);
    transform-origin: left center;
  }
  .ai-status {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
  }

  /* ── Modal (confirm) ─────────────────────────────────────────────── */
  .modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 80;
    padding: var(--s-5);
  }
  .modal[open] { display: flex; }
  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(26 24 20 / 0.4);
    backdrop-filter: blur(4px);
  }
  .modal-card {
    position: relative;
    background: var(--paper);
    border: var(--hairline) solid var(--rule-strong);
    padding: var(--s-7);
    max-width: 440px;
    width: 100%;
    border-radius: var(--r-sm);
    box-shadow: 0 24px 60px rgb(26 24 20 / 0.18);
    overscroll-behavior: contain;
  }
  .modal-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    margin-bottom: var(--s-3);
  }
  .modal-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: flex-end;
    margin-top: var(--s-6);
  }

  /* ── Playground ──────────────────────────────────────────────────── */
  .playground-block {
    margin-block: var(--s-6);
    border: var(--hairline) solid var(--rule-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--paper-deep);
  }
  .playground-toolbar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--paper-soft);
    border-bottom: var(--hairline) solid var(--rule);
  }
  .playground-lang {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--vermillion);
    margin-right: auto;
  }
  .playground-run-btn,
  .playground-reset-btn {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: var(--s-2) var(--s-4);
    border: var(--hairline) solid var(--rule-strong);
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--r-xs);
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .playground-run-btn:hover {
    background: var(--vermillion);
    border-color: var(--vermillion);
    color: var(--paper);
  }
  .playground-reset-btn:hover {
    border-color: var(--ink);
  }
  .playground-editor {
    width: 100%;
    min-height: 140px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    border: 0;
    outline: 0;
    padding: var(--s-4);
    resize: vertical;
  }
  .playground-output {
    border-top: var(--hairline) dashed var(--rule);
  }
  .playground-out {
    margin: 0;
    padding: var(--s-4);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-soft);
    background: var(--paper);
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 2em;
  }
  .playground-out.error { color: var(--vermillion); }

  /* ── Lazy images ─────────────────────────────────────────────────── */
  .lazy {
    transition: filter var(--dur-slow) var(--ease-out),
                opacity var(--dur-slow) var(--ease-out);
  }
  .lazy:not(.is-loaded) {
    filter: blur(8px);
    opacity: 0.85;
  }
  .lazy.is-loaded {
    filter: blur(0);
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────── utilities ─── */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .tabular { font-variant-numeric: tabular-nums; }
  .balance { text-wrap: balance; }
  .pretty  { text-wrap: pretty; }
  .italic  { font-style: italic; }
  .nowrap  { white-space: nowrap; }
  .min-w-0 { min-width: 0; }
  .center  { text-align: center; }
  .hidden  { display: none !important; }
  .mt-7    { margin-top: var(--s-7); }
  .mt-8    { margin-top: var(--s-8); }
}

/* ────────────────────────────────────────────────────────────── motion ─── */
@layer motion {
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: reveal var(--dur-slow) var(--ease-out) forwards;
    animation-delay: var(--reveal-delay, 0s);
  }
  @keyframes reveal {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ───────────────────────────────────────────────────── responsive ─── */
@layer components {
  /* Tablet: tighten the big editorial covers */
  @media (max-width: 900px) {
    .issue-cover { padding-block: var(--s-6) var(--s-7); margin-bottom: var(--s-7); }
    .issue-cover-eyebrow { margin-bottom: var(--s-5); }
    .issue-cover-title { letter-spacing: -0.025em; }
    .post-cover { padding-bottom: var(--s-6); margin-bottom: var(--s-7); }
    .post-hero { aspect-ratio: 16 / 9; margin-top: var(--s-6); }
    .series-detail-cover { padding-block: var(--s-5) var(--s-6); margin-bottom: var(--s-6); }
    main { padding-top: var(--s-6); }
  }

  /* Phone: aggressive tightening */
  @media (max-width: 600px) {
    :root {
      --t-cover:   clamp(2.25rem, 11vw, 3.4rem);
      --t-display: clamp(2rem, 9vw, 3rem);
      --t-h1: 1.85rem;
      --t-h2: 1.5rem;
      --t-h3: 1.25rem;
      --col-gap: var(--s-5);
    }

    /* Editorial typography sized down so the page feels right on phones */
    .post-content {
      font-size: 1rem;
      line-height: 1.65;
    }
    .post-content > p:first-of-type::first-letter {
      font-size: 3.4em;
    }
    .post-content blockquote { font-size: 1.05rem; padding-left: var(--s-4); }
    .post-content h2 { font-size: 1.55rem; padding-top: var(--s-4); margin-top: var(--s-6); }
    .post-content h3 { font-size: 1.2rem; }
    .post-content pre { padding: var(--s-4); font-size: 0.85rem; }

    /* Byline: drop the tight separator so items wrap cleanly */
    .post-cover-byline {
      gap: var(--s-3);
      font-size: 0.7rem;
      letter-spacing: 0.12em;
    }
    .post-cover-byline .sep { display: none; }

    /* Issue cover: stack and restrain */
    .issue-cover-title { font-size: var(--t-cover); line-height: 1; }
    .issue-cover-lede { font-size: 1.05rem; max-width: 100%; margin-top: var(--s-5); }
    .issue-cover-byline { gap: var(--s-3); }
    .issue-cover-eyebrow .sep { margin-inline: 0.4em; }

    /* Eyebrow/rule pair tends to push items off-line; let the rule disappear on phones */
    .issue-cover-eyebrow::after { display: none; }

    /* Section heads: stack the rule under */
    .section-head {
      flex-wrap: wrap;
      gap: var(--s-3);
    }
    .section-head-rule { width: 100%; flex: none; }

    /* Archive rows on phones: compact reading rhythm */
    .archive-row { padding-block: var(--s-4); gap: var(--s-2); }
    .archive-title { font-size: 1.2rem; }
    .archive-dek { font-size: 0.95rem; -webkit-line-clamp: 3; line-clamp: 3; }
    .archive-aside { font-size: 0.7rem; gap: var(--s-3); }

    /* Tag filter strip becomes a horizontal scroller */
    .tag-filter { gap: var(--s-3); padding: var(--s-4) 0; }
    .tag-chip-clear { margin-left: 0; }

    /* Series + related grids: single column */
    .series-grid,
    .related-grid {
      grid-template-columns: 1fr;
      gap: var(--s-5);
    }
    .series-card { padding: var(--s-5); }
    .series-card-title { font-size: 1.4rem; }
    .series-detail-title { font-size: clamp(2rem, 9vw, 3rem); }
    .series-ol { padding-left: var(--s-6); }
    .series-ol li { margin-bottom: var(--s-5); }

    /* Search heading scales down */
    .search-input { font-size: 1.25rem; }
    .search-form-glyph { font-size: 1.25rem; }

    /* Emote bar is roomier and centres cleanly */
    .emote-bar { margin-block: var(--s-7); padding: var(--s-5) 0; }
    .emote-btn { padding: var(--s-3) var(--s-4); min-width: 56px; }
    .emote-icon { font-size: 1.25rem; }

    /* Editor admin: stack the aside under the form */
    .editor-grid { gap: var(--s-6); }
    .admin-desk-title { font-size: 1.9rem; }
    .admin-stat-value { font-size: 2.1rem; }
    .admin-table th,
    .admin-table td { padding: var(--s-3); }
    .admin-table { font-size: 0.9rem; }

    /* Footer: stack on phones */
    .footer { padding-block: var(--s-6); }
    .footer-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--s-3);
    }

    /* Flash region: span the top edge so it doesn't push off-screen */
    .flash-region {
      left: var(--s-4);
      right: var(--s-4);
      max-width: none;
    }

    /* Modal: reduce padding so card fits small viewports */
    .modal-card { padding: var(--s-6); }

    /* Series trail: tighten */
    .series-trail { padding: var(--s-5); margin-block: var(--s-6); }
    .series-trail-link { font-size: 1.2rem; }
    .series-trail-nav { font-size: 0.72rem; }
  }

  /* Phone admin tables: drop the table layout and stack as cards */
  @media (max-width: 700px) {
    .admin-table-wrap {
      overflow-x: visible;
      margin-inline: 0;
      padding-inline: 0;
    }
    .admin-table {
      min-width: 0;
      display: block;
      border: 0;
    }
    .admin-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      margin: -1px;
    }
    .admin-table tbody { display: block; }
    .admin-table tr {
      display: block;
      border: var(--hairline) solid var(--rule);
      border-radius: var(--r-sm);
      padding: var(--s-5);
      margin-bottom: var(--s-4);
      background: var(--paper);
    }
    .admin-table tbody tr:hover { background: var(--paper-soft); }
    .admin-table td {
      display: block;
      padding: 0;
      border: 0;
      vertical-align: baseline;
      font-size: 0.95rem;
    }
    .admin-table td + td { margin-top: var(--s-3); }
    .admin-table td[data-label]::before {
      content: attr(data-label);
      display: block;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--ink-mute);
      margin-bottom: var(--s-1);
    }
    .admin-table .col-actions {
      justify-content: flex-start;
      gap: var(--s-3);
      margin-top: var(--s-2);
    }
    .admin-table .col-actions .btn { flex: 1; min-width: 0; }
  }

  /* Very narrow / iPhone SE class */
  @media (max-width: 380px) {
    .masthead-logo { font-size: 1.4rem; }
    .masthead-logo .word { display: none; }
    .icon-btn { width: 32px; height: 32px; }
    .post-cover-title { font-size: 2rem; letter-spacing: -0.02em; }
  }

  /* Touch / coarse-pointer devices: drop the fixed paper grain (perf + jank) */
  @media (hover: none), (pointer: coarse) {
    body {
      background-attachment: scroll;
      background-size: 24px 24px;
    }
  }

  /* Wide-but-not-huge desktops: reserve a sane post-layout middle column */
  @media (min-width: 1160px) and (max-width: 1320px) {
    .post-layout {
      grid-template-columns: 200px minmax(0, 1fr) 200px;
      gap: var(--s-6);
    }
  }

  /* High-density screens get crisper hairlines */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    :root { --hairline: 0.5px; }
  }
}

/* ──────────────────────────────────────────────────── reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ────────────────────────────────────────────────────────────── print ─── */
@media print {
  .masthead, .footer, .reading-progress, .toc, .emote-bar, .share-bar,
  .related, .series-trail, .copy-btn { display: none !important; }
  body { background: white; color: black; }
  .post-content { font-size: 11pt; line-height: 1.5; max-width: 100%; }
  .post-cover-title { font-size: 28pt; }
  a { color: black; text-decoration: underline; }
  .post-content pre { border: 1px solid #ccc; background: #f8f8f8; }
}