style.css

/* Linear Design System – extracted tokens from popular-web-designs
   Reused for a cleaner, modern look.
   ========================================================= */

/* --- Token layer --- */
:root {
    --bg: #08090a;
    --panel: #0f1011;
    --surface: #191a1b;
    --surface-hover: #28282c;
    --fg: #f7f8f8;
    --fg2: #d0d6e0;
    --fg3: #8a8f98;
    --fg4: #62666d;
    --accent: #5e6ad2;
    --accent-bright: #7170ff;
    --accent-hover: #828fff;
    --green: #10b981;
    --border: rgba(255,255,255,0.05);
    --border2: rgba(255,255,255,0.08);
}

/* --- Reset & base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-feature-settings: "cv01", "ss03";
    background: var(--bg);
    color: var(--fg2);
    line-height: 1.60;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Ensure Linear's signature OpenType features reach every element,
   including those with own font-family (monospace, headings). */
h1, h2, h3, h4, h5, h6 {
    font-feature-settings: "cv01", "ss03";
}

/* --- Hero atmosphere: radial glow + fine dot grid --- */
.hero {
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 640px;
    height: 640px;
    background: radial-gradient(
        circle,
        rgba(94, 106, 210, 0.12) 0%,
        rgba(94, 106, 210, 0.04) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px
    );
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(
        ellipse 70% 60% at 50% 40%,
        black 20%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 70% 60% at 50% 40%,
        black 20%,
        transparent 100%
    );
}
.hero > * {
    position: relative;
    z-index: 1;
}

/* --- Navigation --- */
nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    backdrop-filter: blur(12px);
}
nav .inner {
    max-width: 960px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 52px;
}
nav .logo {
    font-weight: 510; font-size: 14px; color: var(--fg);
    letter-spacing: -0.01em; text-decoration: none;
    display: flex; align-items: center; gap: 8px;
}
nav .logo span { font-size: 16px; }
nav .logo .logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 5px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 600; letter-spacing: 0;
    font-family: 'Inter', system-ui, sans-serif;
}
nav .links { display: flex; gap: 24px; align-items: center; }
nav .links a {
    font-size: 13px; font-weight: 510; color: var(--fg3);
    text-decoration: none; transition: color 0.15s;
}
nav .links a:hover { color: var(--fg); }
nav .cta {
    background: var(--accent); color: #fff;
    border: none; border-radius: 6px;
    padding: 6px 14px; font-size: 13px; font-weight: 510;
    font-family: inherit;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s;
}
nav .cta:hover { background: var(--accent-hover); }

/* Current-page indicator — "you are here" on a multi-page site.
   nav.js adds .is-current to whichever link matches the page's
   path, in BOTH the desktop bar and the mobile collapse panel.
   Linear's state-is-the-signal rule: the current section reads at
   full primary ink (--fg) where the rest stay muted (fg3), and a
   single 2px accent underline — reusing the existing --accent token,
   the same width as the .progress-bar — anchors it. No new box,
   icon, or pill; the ink shift IS the hierarchy, the rule IS the
   location. hover is intentionally suppressed on the current link
   so the "you are here" state can not flicker as the cursor passes. */
nav .links a.is-current {
    color: var(--fg);
    position: relative;
}
nav .links a.is-current::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px 1px 0 0;
}
/* Keep the CTA out of the current-link treatment — it is an
   outbound action (Hermes Agent repo), never a section we are
   "on," so it never receives .is-current from nav.js. The rule
   above is scoped to plain .links a, not .links a.cta. */
nav .links a.is-current:hover { color: var(--fg); }

/* Keyboard focus on primary site-level interactive elements.
   Reuses the same --accent-bright inset 2px ring recipe already
   established for .post-row /.topic-chip /.project-card, so every
   clickable surface on the site reads as focusable in the same
   register. Linear is meticulous about keyboard focus visibility —
   without these rules a keyboard user navigating the hero CTAs, the
   desktop nav links, the nav CTA, or the article "Back" link sees
   no focus indicator at all (the browser default outline is
   suppressed visually against the dark panel). Two shapes only:
   text links get an inset offset ring; solid buttons get a 2px
   outline ring outside their own fill so the indicator is visible
   against the accent fill. No new tokens, no new boxes. */
nav .links a:focus-visible,
.btn-ghost:focus-visible,
.back:focus-visible,
.back-link a:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 4px;
    color: var(--fg);
}
nav .cta:focus-visible,
.btn-primary:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 6px;
}
/* Keep the same ring for the logo so heading-brand navigation
   is reachable by keyboard the same way as the page links. */
nav .logo:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 4px;
    color: var(--fg);
}
/* Footer links close the loop — same recipe, scoped so the
   site-wide footer reads consistently with the rest of the chrome. */
footer .right a:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 2px;
    color: var(--fg);
}

/* --- Footer --- */
footer {
    max-width: 960px; margin: 0 auto;
    padding: 32px 24px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}
footer .left { font-size: 13px; color: var(--fg4); }
footer .right { display: flex; gap: 20px; }
footer .right a {
    font-size: 13px; font-weight: 510; color: var(--fg3);
    text-decoration: none; transition: color 0.15s;
}
footer .right a:hover { color: var(--fg); }

/* --- Shared components --- */
.pill {
    display: inline-block;
    background: transparent; color: var(--fg4);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 9999px;
    padding: 2px 10px 2px 8px;
    font-size: 12px; font-weight: 510;
    letter-spacing: -0.01em;
    transition: border-color 0.15s, color 0.15s;
}
.post-row:hover .pill {
    border-color: rgba(255,255,255,0.08);
    color: var(--fg3);
}

/* =========================================================
   HOME PAGE – updated with enhanced spacing and better typography hierarchy
   ========================================================= */

/* Hero — no decorative top strip. Linear reserves brand indigo
   for interactive/CTA elements only, never as a decorative rail.
   The "Active" status badge above the headline carries the brand
   accent where it earns its place. Replaced with a whisper-thin
   hairline that reads as a document edge, not a decoration. */
.hero {
    max-width: 720px; margin: 0 auto;
    padding: 140px 24px 100px;
    text-align: center;
}
.hero-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 500;
    color: var(--accent-bright);
    letter-spacing: 0.05em; text-transform: uppercase;
    margin-bottom: 32px;
}
.hero-label .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
}
.hero h1 {
    font-size: 64px; font-weight: 510; line-height: 1.00;
    letter-spacing: -1.408px; color: var(--fg);
    margin-bottom: 24px;
}
.hero .subtitle {
    font-size: 18px; font-weight: 400; line-height: 1.60;
    letter-spacing: -0.165px; color: var(--fg3);
    max-width: 520px; margin: 0 auto 40px;
}
.hero .actions { display: flex; gap: 12px; justify-content: center; }

/* Buttons */
.btn-primary {
    background: var(--accent); color: #fff; border: none;
    border-radius: 6px; padding: 10px 20px;
    font-family: inherit; font-size: 15px; font-weight: 510;
    cursor: pointer; text-decoration: none;
    transition: background 0.15s;
    letter-spacing: -0.165px;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
    background: rgba(255,255,255,0.02); color: var(--fg2);
    border: 1px solid var(--border2); border-radius: 6px;
    padding: 10px 20px; font-family: inherit;
    font-size: 15px; font-weight: 510; cursor: pointer;
    text-decoration: none; transition: all 0.15s;
    letter-spacing: -0.165px;
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

/* Sections */
.section {
    max-width: 960px; margin: 0 auto;
    padding: 0 24px 80px;
}
.section-title {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 500; color: var(--fg4);
    letter-spacing: 0.05em; text-transform: uppercase;
    margin-bottom: 32px;
}

/* Section dividers — Linear-style hairline opener.
   The home page is a Decide/Learn surface that stacks four
   content sections. Without distinction they read as one
   undifferentiated scroll. A hairline top rule + a tiny mono
   index ("01 — Capabilities") gives each section a clear
   visual opening, exactly the editorial rhythm Linear uses
   on its landing pages. Inherits the existing hairline token
   (--border2) already used by .post-year and .projects-cat-label;
   no new boxes, icons, or colors. */
.has-divider {
    padding-top: 56px;
    margin-top: 24px;
    position: relative;
}
.has-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border2);
}
/* The numbered index — Linear's "01 — Capabilities" rhythm.
   The mono label already sets font/size/weight; the only
   addition is putting the index in accent-bright so it reads
   as the section's anchor while the title stays muted. The
   em-dash separator inherits the muted tone automatically.
   One tiny span, one color swap, no new box. */
.section-index {
    color: var(--accent-bright);
}

/* Capabilities */
.capability {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 24px;
    transition: padding 0.2s ease, border-color 0.2s ease;
    border-radius: 0;
}
.capability:first-of-type { padding-top: 0; }
.capability:last-of-type { border-bottom: none; }
.capability:hover {
    padding-left: 12px;
    border-color: var(--border2);
}
.capability-name {
    font-size: 20px; font-weight: 590; color: var(--fg);
    letter-spacing: -0.24px; white-space: nowrap;
}
.capability-desc {
    font-size: 15px; font-weight: 400; color: var(--fg3);
    line-height: 1.60; letter-spacing: -0.165px;
    max-width: 480px; text-align: right;
}

/* Tech stack */
.tech-stack { display: flex; flex-wrap: wrap; gap: 6px; }

/* About */
.about {
    max-width: 720px; margin: 0 auto;
    padding: 0 24px 80px;
}
.about p {
    font-size: 16px; font-weight: 400; color: var(--fg2);
    line-height: 1.50; margin-bottom: 16px;
}
.about a { color: var(--accent-bright); text-decoration: none; }
.about a:hover { color: var(--accent-hover); }

/* =========================================================
   BLOG INDEX
   ========================================================= */

.page-header {
    max-width: 720px; margin: 0 auto;
    padding: 96px 24px 64px;
}
.page-header h1 {
    font-size: 48px; font-weight: 510; line-height: 1.00;
    letter-spacing: -1.056px; color: var(--fg);
    margin-bottom: 12px;
}
.page-header p {
    font-size: 18px; color: var(--fg3);
    letter-spacing: -0.165px; font-weight: 400;
    line-height: 1.60;
}

/* Year heading — top-level grouping */
.post-year {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 500; color: var(--accent-bright);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 32px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border2);
}

/* Month heading — secondary grouping */
.post-month {
    font-size: 13px; font-weight: 510; color: var(--fg4);
    letter-spacing: 0.04em; text-transform: uppercase;
    margin: 40px 0 16px;
    padding-bottom: 0;
    scroll-margin-top: 72px;
}

/* Month navigation — compact in-page jump links.
   Explore-surface affordance: lets the reader see the content's
   time span at a glance and skip to a month without scrolling.
   Linear-style restraint: hairline separator dots, muted mono
   rhythm, no boxes or accent fills. */
.month-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg4);
    letter-spacing: 0.02em;
}
.month-nav a {
    color: var(--fg3);
    text-decoration: none;
    transition: color 0.15s;
    padding: 2px 0;
}
.month-nav a:hover {
    color: var(--fg);
}
.month-nav a:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 2px;
}
.month-nav span {
    color: var(--fg4);
    opacity: 0.5;
    font-size: 10px;
}

/* Empty month indicator */
.post-empty {
    font-size: 14px; color: var(--fg4);
    padding: 8px 0 24px;
    font-style: normal;
}

/* =========================================================
   TOPIC FILTER CHIPS
   The filter affordance for the blog index. Two states only:
   default (outline, muted) and active (solid accent). No
   third hover-decoration state, no gradient, no shadow — the
   state itself is the signal. Linear-style restraint.
   ========================================================= */

.topics {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.topic-chip {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 510;
    letter-spacing: -0.01em;
    color: var(--fg3);
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 9999px;
    padding: 5px 14px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}
.topic-chip:hover {
    color: var(--fg);
    border-color: rgba(255, 255, 255, 0.16);
}
.topic-chip:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}
.topic-chip.is-active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.topic-chip.is-active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

/* Filter result count — small mono label next to the chips */
.topic-count {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg4);
    letter-spacing: 0.02em;
    margin-left: auto;
    padding-left: 8px;
}
@media (max-width: 640px) {
    .topic-count { display: none; }
}

/* Empty filter state — when a topic has zero matches.
   Uses the existing .post-empty tone but scoped to the
   filtered result region so it reads as "no results," not
   a missing page section. */
.filter-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--fg4);
    font-size: 15px;
    line-height: 1.6;
}
.filter-empty .filter-empty-hint {
    font-size: 13px;
    margin-top: 8px;
    color: var(--fg4);
}

/* When a topic filter is active, fade year/month dividers that
   have no visible rows beneath them. Keeps the filtered view
   tidy without collapsing layout. */
[data-divider].is-dimmed {
    opacity: 0.3;
}

/* Respect reduced motion for chip state transitions */
@media (prefers-reduced-motion: reduce) {
    .topic-chip { transition: none; }
}

/* Post list — Linear issue-list pattern, two-column layout */
.posts {
    max-width: 720px; margin: 0 auto;
    padding: 0 24px 80px;
}
.post-row {
    display: flex;
    text-decoration: none;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
    align-items: flex-start;
    gap: 20px;
}

/* Keep Reading section – Align with post list styling */
.keep-reading {
    max-width: 720px; margin: 0 auto;
    padding: 0 24px 80px;
}
/* Keep Reading section — the "where next" moment after an article.
   This is the only section heading on the site that previously broke
   the established Linear mono-label + hairline rhythm used by the home
   page ("01 — Capabilities"), the blog index (.post-year), and the
   projects page (.projects-cat-label). Promoting it to the same recipe
   means a reader finishing any of the 50+ articles sees a consistent
   section-opening cue across the whole site, with no HTML changes —
   the <h2 class="keep-reading-title"> already exists, injected by
   keep-reading.js. The "Keep reading" label in JetBrains Mono caps +
   accent-bright, sitting above a hairline, reads as the start of a new
   surface rather than a heading floating in the middle of one. */
.keep-reading {
    padding-top: 24px;
}
.keep-reading .keep-reading-title {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 500;
    color: var(--accent-bright);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border2);
}
.keep-reading .post-row {
    /* reuse existing post-row styling for consistency */
}

.post-row:first-child { padding-top: 0; }
.post-row:last-child { border-bottom: none; }
.post-row:hover {
    background: rgba(255,255,255,0.02);
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 6px;
}
.post-row:hover .post-title { color: var(--fg); }
.post-row:active {
    background: rgba(255,255,255,0.04);
}

/* Keyboard focus — currently absent. Linear's issue list rows show a
   clear focus treatment so keyboard users know which row they'd open.
   This is an Explore-surface affordance: the affordance IS the signal.
   Inset accent ring + tightened surface, no icon or color slop. */
.post-row:focus-visible {
    outline: none;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: inset 0 0 0 2px rgba(113, 112, 255, 0.45);
}

/* Post type distinction — daily news vs feature articles
   Daily news rows use a slightly muted treatment so feature
   articles stand out by contrast. Typography-first: lighter
   title weight, not a different color or box. */
.post-row.is-news .post-title {
    font-weight: 400;
    color: var(--fg3);
}
.post-row.is-news:hover .post-title {
    color: var(--fg2);
}

/* daily-news pill — accent tint to signal recurring series */
.pill-news {
    color: var(--accent-bright);
    border-color: rgba(94, 106, 210, 0.20);
}

/* =========================================================
   FRESHNESS INDICATOR — newest post only
   A small emerald status dot + mono "new" micro-label,
   shown next to the date on the single most-recent post
   in the blog index. Follows Linear's status-dot + Mono
   Label pattern (emerald #27a644 for "in progress"), fired
   for ~3 days after publish so it self-maintains as new
   posts land. No new boxes, icons, or color slop — just
   a dot the eye can land on when returning to the list.
   ========================================================= */

.fresh {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--green);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    margin-left: 8px;
    vertical-align: 2px;
    white-space: nowrap;
}
.fresh .fresh-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
    flex-shrink: 0;
}
.fresh.is-stale { display: none; }

.post-date {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 500;
    color: var(--fg4);
    letter-spacing: 0.02em;
    padding-top: 5px;
    min-width: 56px;
    flex-shrink: 0;
}

/* Content column — title, excerpt, tags */
.post-content {
    flex: 1;
    min-width: 0;
}

.post-title {
    font-size: 16px; font-weight: 510; color: var(--fg2);
    letter-spacing: -0.01em; line-height: 1.40;
    margin-bottom: 4px;
    transition: color 0.15s;
}
.post-excerpt {
    font-size: 14px; color: var(--fg3); line-height: 1.55;
    letter-spacing: -0.01em; font-weight: 400;
    margin-bottom: 8px;
    max-width: 540px;
}
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* =========================================================
   ARTICLE PAGES — unified reading experience
   ========================================================= */

/* Back link */
.back-link {
    max-width: 720px; margin: 0 auto;
    padding: 0 24px 32px;
}
.back-link a {
    font-size: 14px; font-weight: 510; color: var(--fg3);
    text-decoration: none; transition: color 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.back-link a:hover { color: var(--fg); }

/* Legacy .back selector (for old-style posts) */
.back {
    font-size: 13px; font-weight: 510; color: var(--fg4);
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
    margin-bottom: 32px; transition: color 0.15s;
}
.back:hover { color: var(--fg2); }

/* Article header — the unified pattern */
.article-header {
    max-width: 720px; margin: 0 auto;
    padding: 64px 24px 40px;
}
.article-header .meta {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px; font-weight: 500; color: var(--fg4);
    letter-spacing: 0.02em;
    margin-bottom: 20px;
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
/* De-emphasize the read-time as the secondary half of the pair,
   so the date reads as the anchored label and "X min read" recedes.
   Linear's Mono Label spec: the primary token carries the row,
   the secondary one dims. No new box, color, or icon — just opacity.
   The real middot separator turns the two spans into one typographic
   pair, matching Linear's "label · detail" rhythm. */
.article-header .meta .read { opacity: 0.7; }
.article-header .meta .read::before {
    content: '·';
    margin-right: 2px;
    opacity: 0.5;
    color: var(--fg4);
}
.article-header h1 {
    font-size: 40px; font-weight: 510; line-height: 1.10;
    letter-spacing: -0.704px; color: var(--fg);
    margin-bottom: 16px;
}
.article-header .subtitle {
    font-size: 18px; color: var(--fg3);
    letter-spacing: -0.165px; font-weight: 400;
    line-height: 1.60; margin-bottom: 16px;
}
.article-header .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

/* Legacy inline article styles (old-style posts using <article> + bare elements) */
article {
    max-width: 720px; margin: 0 auto;
    padding: 64px 24px 48px;
}
article .meta {
    font-size: 13px; color: var(--fg4); margin-bottom: 24px;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
article .meta .read { opacity: 0.7; }
article .meta .read::before {
    content: '·';
    margin-right: 2px;
    opacity: 0.5;
    color: var(--fg4);
}
article h1 {
    font-size: 40px; font-weight: 510; line-height: 1.10;
    letter-spacing: -0.704px; color: var(--fg);
    margin-bottom: 16px;
}

/* Article body — shared reading typography */
.article-body {
    max-width: 720px; margin: 0 auto;
    padding: 0 24px 80px;
}
/* Also target bare article child elements for old-style posts */
.article-body h2,
article h2,
.article-body h3,
article h3 {
    position: relative;
}

/* H2 — section anchors. A heading-level permalink glyph that stays
   muted by default and sharpens on hover/focus, so it never competes
   with the prose until the reader reaches for it. Pure Linear: a mono
   token, the quaternary text tone, no box, no icon, no color slop.
   The anchor shifts the heading right by its own width on hover so
   the glyph occupies space ahead of the title rather than colliding
   with it — Linear's "compressed headline, expanded surroundings" at
   the section level. */
.article-body h2,
article h2 {
    font-size: 24px; font-weight: 590; color: var(--fg);
    letter-spacing: -0.288px; line-height: 1.30;
    margin: 56px 0 16px;
    scroll-margin-top: 72px;
    transition: padding-left 0.15s ease;
}
.article-body h3,
article h3 {
    font-size: 17px; font-weight: 590; color: var(--fg2);
    letter-spacing: -0.204px; line-height: 1.33;
    margin: 36px 0 12px;
    scroll-margin-top: 72px;
    transition: padding-left 0.15s ease;
}

/* H4 — the missing fourth tier of the article reading ladder.
   h1/h2/h3 each step down deliberately (40 → 24 → 17px, --fg → --fg2,
   weight 590 holding to 17px, then hierarchy handed to scale + ink).
   h4 had no rule at all, so any article using <h4> fell through to
   the browser default — a bold black 16-ish px block that broke the
   rhythm the three tiers above it had established. This closes the
   gap with one more tier in the same register: smaller than h3, ink
   one step dimmer (fg3), the same weight discipline (510, matching
   nav/section-label weight), tighter leading to read as a compact
   sub-heading rather than a new section. No box, no icon, no color —
   scale and ink carry the hierarchy, exactly the way h2 and h3 do.
   Margin is compressed versus h3 (28px top / 10px bottom) so a run
   of h4s under one h2/h3 reads as a list of sub-points, not a fresh
   section each. */
.article-body h4,
article h4 {
    font-size: 15px; font-weight: 510; color: var(--fg3);
    letter-spacing: -0.18px; line-height: 1.40;
    margin: 28px 0 10px;
    scroll-margin-top: 72px;
}

/* The permalink glyph — rendered via ::before on a JS-inserted <a>
   wrapper so it is keyboard-focusable and copies a real anchor URL.
   Lives outside the heading text flow as an absolutely-positioned
   mono mark on its leading edge, mirroring how Linear places a mono
   label to the left of a section title. */
.article-body h2 > .heading-anchor,
article h2 > .heading-anchor,
.article-body h3 > .heading-anchor,
article h3 > .heading-anchor {
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    padding-right: 8px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75em;
    font-weight: 500;
    line-height: inherit;
    color: var(--fg4);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}

/* Shift the heading text right to make room for the glyph on hover, so
   the title never reflows or jumps — the glyph opens a slot for itself. */
.article-body h2:hover,
article h2:hover,
.article-body h3:hover,
article h3:hover {
    padding-left: 22px;
}
.article-body h2:hover > .heading-anchor,
article h2:hover > .heading-anchor,
.article-body h3:hover > .heading-anchor,
article h3:hover > .heading-anchor,
.article-body h2 > .heading-anchor:focus-visible,
article h2 > .heading-anchor:focus-visible,
.article-body h3 > .heading-anchor:focus-visible,
article h3 > .heading-anchor:focus-visible {
    opacity: 1;
    color: var(--accent-bright);
}
.article-body h2 > .heading-anchor:focus-visible,
article h2 > .heading-anchor:focus-visible,
.article-body h3 > .heading-anchor:focus-visible,
article h3 > .heading-anchor:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 4px;
    border-radius: 2px;
}
.article-body p,
article p {
    font-size: 16px; font-weight: 400; color: var(--fg2);
    line-height: 1.70; margin-bottom: 24px;
    letter-spacing: -0.01em;
}
.article-body a,
article a:not(.back):not(.back-link a):not(.cta):not(.logo):not(.post-row):not(footer a):not(nav a) {
    color: var(--accent-bright); text-decoration: none;
    transition: color 0.15s;
}
.article-body a:hover,
article a:not(.back):not(.back-link a):not(.cta):not(.logo):not(.post-row):not(footer a):not(nav a):hover {
    color: var(--accent-hover);
}
.article-body ul, .article-body ol,
article ul, article ol {
    margin: 0 0 24px 20px;
    font-size: 16px; color: var(--fg2); line-height: 1.70;
    letter-spacing: -0.01em;
}
.article-body li,
article li { margin-bottom: 8px; }

/* Inline code — Linear accent violet on dark surface */
.article-body code,
article code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px; background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 4px; padding: 2px 6px;
    color: var(--accent-bright);
}

/* Code blocks — refined for readability with language labels */
.article-body pre,
article pre {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 28px 0;
    overflow-x: auto;
    position: relative;
}
.article-body pre code,
article pre code {
    background: none; border: none; padding: 0;
    font-size: 13px; line-height: 1.65;
    color: var(--fg2);
    display: block;
}

/* Code block language label — Linear Mono Label spec */
.article-body pre[data-lang]::before,
article pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute; top: 10px; right: 14px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; font-weight: 500;
    color: var(--fg4);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* Blockquote — Linear full-enclosure treatment, no left-border accent rail.
   The prior border-left: 3px solid accent was an accent-rail slop tell
   (decoration pretending to be organization). Linear encloses callouts
   with a uniform hairline border and lets indentation + muted ink carry
   the "this is a quote" grammar. Indentation is preserved via the left
   padding so the row reads as set-off prose, not as a colored strip. */
.article-body blockquote,
article blockquote {
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 14px 20px;
    margin: 28px 0;
    color: var(--fg3);
}
.article-body blockquote p,
article blockquote p {
    margin-bottom: 0; font-size: 15px; color: var(--fg3);
    font-style: normal; line-height: 1.70;
}
.article-body blockquote p + p,
article blockquote p + p {
    margin-top: 8px;
}

/* Article end-tags */
.tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* Read time — monospace, muted */
.read-time {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 500; color: var(--fg4);
    letter-spacing: 0.02em; margin-top: 12px;
}

/* Temporary-accounts post — unique nested structure */
.meta .date {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px; font-weight: 500; color: var(--fg4);
    letter-spacing: 0.02em; margin-bottom: 16px;
}
.meta h1 {
    font-size: 40px; font-weight: 510; line-height: 1.10;
    letter-spacing: -0.704px; color: var(--fg);
    margin-bottom: 16px;
}
.meta .subtitle {
    font-size: 18px; color: var(--fg3);
    letter-spacing: -0.165px; font-weight: 400;
    line-height: 1.60; margin-bottom: 16px;
}
.meta .tags { margin-top: 16px; }
.meta .read-time {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 500; color: var(--fg4);
    letter-spacing: 0.02em; margin-top: 12px;
}

/* Article body class (temporary-accounts uses .body) */
article .body {
    padding-top: 24px;
}
article .body p {
    font-size: 16px; font-weight: 400; color: var(--fg2);
    line-height: 1.70; margin-bottom: 24px;
    letter-spacing: -0.01em;
}
article .body a {
    color: var(--accent-bright); text-decoration: none;
    transition: color 0.15s;
}
article .body a:hover { color: var(--accent-hover); }
article .body h2 {
    font-size: 24px; font-weight: 590; color: var(--fg);
    letter-spacing: -0.288px; line-height: 1.30;
    margin: 56px 0 16px;
    scroll-margin-top: 72px;
}
article .body h3 {
    font-size: 17px; font-weight: 590; color: var(--fg2);
    letter-spacing: -0.204px; line-height: 1.33;
    margin: 36px 0 12px;
    scroll-margin-top: 72px;
}
article .body ul, article .body ol {
    margin: 0 0 24px 20px;
    font-size: 16px; color: var(--fg2); line-height: 1.70;
    letter-spacing: -0.01em;
}
article .body li { margin-bottom: 8px; }
article .body code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px; background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 4px; padding: 2px 6px;
    color: var(--accent-bright);
}
article .body pre {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 28px 0;
    overflow-x: auto;
    position: relative;
}
article .body pre code {
    background: none; border: none; padding: 0;
    font-size: 13px; line-height: 1.65;
    color: var(--fg2);
    display: block;
}
article .body blockquote {
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 14px 20px;
    margin: 28px 0;
    color: var(--fg3);
}
article .body blockquote p {
    margin-bottom: 0; font-size: 15px; color: var(--fg3);
    font-style: normal; line-height: 1.70;
}
article .body .tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* =========================================================
   SHARED ARTICLE COMPONENTS
   ========================================================= */

/* Callout / resource box — used across multiple posts */
.callout {
    background: rgba(94,106,210,0.06);
    border: 1px solid rgba(94,106,210,0.15);
    border-radius: 8px; padding: 16px 20px;
    margin: 24px 0;
}
.callout p { margin-bottom: 0; color: var(--fg2); }

/* CTA box (legacy name, used in epoll/dmca posts) */
.cta-box {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 24px; margin: 32px 0;
}
.cta-box h3 { margin-top: 0; color: var(--accent-bright); }
.cta-box p { margin-bottom: 12px; }

/* Benchmark grid — fastsdcpu, apertus, cancel-claude */
.bench-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin: 16px 0 24px;
}
.bench-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px; padding: 16px 20px;
}
.bench-card .label {
    font-size: 12px; font-weight: 510; color: var(--fg4);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.bench-card .stat {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 28px; font-weight: 500; color: var(--fg);
    letter-spacing: -0.02em;
}
.bench-card .detail {
    font-size: 13px; color: var(--fg3); margin-top: 4px;
}

/* Spec grid — apertus, cancel-claude */
.specs-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin: 16px 0 24px;
}
.spec-item {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px; padding: 16px 20px;
}
.spec-label {
    font-size: 12px; font-weight: 510; color: var(--fg4);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.spec-value {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 18px; font-weight: 500; color: var(--fg);
}
.value { color: var(--fg2); font-size: 15px; }

/* Compare table — budget-accelerators */
.compare-table {
    width: 100%; border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px; overflow: hidden;
    margin: 24px 0;
}
.compare-table th {
    text-align: left; padding: 12px 16px; font-size: 13px;
    font-weight: 510; color: var(--fg3);
    border-bottom: 1px solid var(--border2);
    background: rgba(255,255,255,0.02);
}
.compare-table td {
    padding: 12px 16px; font-size: 14px; color: var(--fg2);
    border-bottom: 1px solid var(--border);
}
.compare-table tr:last-child td { border-bottom: none; }

/* Verdict box — budget-accelerators */
.verdict {
    background: rgba(94,106,210,0.06);
    border: 1px solid rgba(94,106,210,0.15);
    border-radius: 8px; padding: 16px 20px;
    margin: 24px 0 16px;
}
.verdict p { margin-bottom: 0; color: var(--fg2); }
.verdict strong { color: var(--fg); font-weight: 590; }

/* Story card — daily-news */
.story-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px; padding: 20px 24px;
    margin-bottom: 16px;
}
.story-card h3 {
    font-size: 18px; font-weight: 590; color: var(--fg);
    letter-spacing: -0.24px; margin: 0 0 8px;
}
.story-card p {
    font-size: 15px; color: var(--fg3); line-height: 1.60;
    margin: 0 0 8px;
}
.story-card .source {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; color: var(--fg4);
}
.story-card a { color: var(--accent-bright); text-decoration: none; }
.story-card a:hover { color: var(--accent-hover); }

/* Stack list — self-hosting */
.stack-item {
    display: flex; gap: 16px; align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.stack-item:last-child { border-bottom: none; }
.stack-item .name {
    font-size: 16px; font-weight: 590; color: var(--fg);
    white-space: nowrap; min-width: 120px;
}
.stack-item .desc {
    font-size: 15px; color: var(--fg3); line-height: 1.60;
}

/* Note box — dmca */
.note-box {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px; padding: 20px 24px;
    margin: 24px 0;
}

/* =========================================================
   READING PROGRESS BAR
   A thin accent bar that fills as the reader scrolls through
   an article. Linear-style: precise, minimal, purposeful.
   ========================================================= */

/* The progress indicator sits above the sticky nav */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--accent);
    z-index: 200;
    transition: width 0.08s linear;
    pointer-events: none;
    will-change: width;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none;
    }
}

/* =========================================================
   PAGE ENTRANCE
   A barely-perceptible fade that gives the page a polished
   arrival feel. Linear uses this; it separates "rendered"
   from "appearing."
   ========================================================= */

@keyframes pageIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

body {
    animation: pageIn 0.4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
}

/* =========================================================
   ARTICLE READING TYPOGRAPHY REFINEMENTS
   Typographic hierarchy without decoration — the reading
   surface is where visitors spend the most time, so the
   prose itself has to carry rhythm. These four rules are
   all "type as hierarchy" moves: no boxes, colors, or icons.
   ========================================================= */

/* 1. text-wrap on headings — modern browsers balance the
   last line so headings read as deliberately set, not
   word-processed. Fallbacks gracefully to normal wrap. */
.article-body h1, article h1,
.article-body h2, article h2,
.article-body h3, article h3,
.page-header h1,
.article-header h1 {
    text-wrap: balance;
}
/* Hero headline benefits too — "AI agent / for the real
   world" should break where the writer decided, not where
   the viewport happens to land. */
.hero h1 { text-wrap: balance; }

/* 2. text-wrap: pretty on prose — prevents a single word
   orphaning the last line of a paragraph (a widow). The
   browser shuffles a word down so the final line carries
   at least two. Subtle but it changes how a long article
   feels — fewer "leftover" words dangling alone. */
.article-body p,
article p,
article .body p,
.about-page p {
    text-wrap: pretty;
    orphans: 2;
    widows: 2;
}

/* 3. Lead paragraph — the first paragraph following an
   article's h1 gets a slightly larger size and the primary
   ink color, establishing it as the "lede" of the piece.
   Uses adjacent-sibling and direct-child selectors so it
   applies automatically across all 50+ articles without
   any HTML changes. This is how editorial sites build
   hierarchy without a box around the intro.
   Caveat: the .article-header .subtitle is intentionally
   NOT touched here — it carries its own muted (var(--fg3))
   treatment as a deck line, and is a separate semantic
   element from the first prose paragraph. */
.article-header h1 + p,
article > h1 + p,
.article-body > p:first-of-type {
    font-size: 18px;
    color: var(--fg);
    line-height: 1.65;
    letter-spacing: -0.01em;
    font-weight: 400;
}
/* Subsequent paragraphs inherit the body prose defaults
   already set by .article-body p / article p (16px,
   var(--fg2)). No reset needed — specificity carries it. */

/* 4. Selection styling — accent-tinted highlight so the
   reader's own selection gesture feels like the brand,
   not the operating-system default. Linear does this. */
::selection {
    background: rgba(94, 106, 210, 0.28);
    color: var(--fg);
}
::selection:focus { background: rgba(94, 106, 210, 0.36); }
/* Keep code selection legible against the surface bg */
.article-body code::selection,
article code::selection {
    background: rgba(94, 106, 210, 0.35);
}

/* --- Footer refinements --- */
footer .left {
    font-size: 13px; color: var(--fg4);
    letter-spacing: -0.01em;
}

/* =========================================================
   MOBILE NAVIGATION
   Linear-style responsive collapse. The desktop bar stays exactly
   as-is above 640px; below it, the inline links hide behind a
   hamburger icon-button (Linear icon-button: translucent bg,
   50% radius, hairline border) that toggles a stacked panel.
   ========================================================= */

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
    display: none; /* JS reveals it under 640px */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border2);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.nav-toggle:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.nav-toggle:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

/* Hamburger icon — three lines, no decorative SVG */
.nav-toggle .nav-toggle-bar {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--fg2);
    border-radius: 1px;
    margin: 2px 0;
    transition: opacity 0.15s, transform 0.15s;
    transform-origin: center;
}
/* Close (X) state when active */
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) {
    transform: translateY(-3.5px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle .nav-toggle-bar { transition: none; }
}

/* Collapsible panel — holds the same .links but stacked */
.nav-collapse {
    display: none; /* Override below 640px */
}

/* The panel needs to sit in the nav inner so the logo stays put.
   On mobile we switch nav .inner to column and let the panel
   flow below the bar.
   The .js class is added by nav.js — without JS, the inline links
   stay visible and the panel/toggle remain hidden (noscript fallback). */
@media (max-width: 640px) {
    nav .inner {
        position: relative;
    }
    /* Only collapse when JS is active. Without JS, inline links stay. */
    html.js nav > .inner > .links {
        display: none;
    }
    html.js .nav-toggle {
        display: inline-flex;
    }
    .nav-collapse {
        display: block;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.2s ease-out;
        border-top: 1px solid var(--border);
    }
    html.js .nav-collapse {
        display: block;
    }
    /* Without JS, keep the panel entirely hidden. */
    html:not(.js) .nav-collapse {
        display: none;
    }
    .nav-collapse.is-open {
        max-height: 400px;
    }
    .nav-collapse .links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
    }
    .nav-collapse .links a {
        font-size: 15px;
        font-weight: 510;
        color: var(--fg2);
        padding: 11px 24px; /* 44px total touch target */
        min-height: 44px;
        display: flex;
        align-items: center;
        transition: background 0.15s, color 0.15s;
    }
    .nav-collapse .links a:hover {
        color: var(--fg);
        background: rgba(255,255,255,0.03);
    }
    /* Mobile panel keyboard focus — accent ring inset so it reads
       clearly against the panel's translucent hover surface, matching
       the desktop ring recipe. */
    .nav-collapse .links a:focus-visible {
        outline: 2px solid var(--accent-bright);
        outline-offset: -2px;
        border-radius: 4px;
        color: var(--fg);
    }
    .nav-collapse .links a.cta {
        margin: 8px 16px;
        justify-content: center;
        border-radius: 6px;
        min-height: 40px;
    }
    /* Mobile current-page indicator. The desktop underline (::after
       bottom rule) does not translate to a stacked vertical list, so
       the current link gets a 2px accent left edge instead — the
       orientation where a leading rule reads as location, not as the
       horizontal "accent rail" slop tell. Same ink shift to --fg,
       same --accent token, suppressed hover. The rule sits inside
       the panel's 24px padding channel so it does not collide with
       the panel's own left edge. */
    .nav-collapse .links a.is-current {
        color: var(--fg);
        box-shadow: inset 2px 0 0 var(--accent);
    }
    .nav-collapse .links a.is-current:hover {
        color: var(--fg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-collapse { transition: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    /* Home */
    .hero h1 { font-size: 40px; letter-spacing: -0.704px; }
    .hero .subtitle { font-size: 16px; }
    .hero { padding: 100px 24px 64px; }
    .capability { flex-direction: column; gap: 4px; }
    .capability-desc { text-align: left; max-width: none; }
    footer { flex-direction: column; gap: 16px; text-align: center; }
    footer .right { justify-content: center; }

    /* Section dividers — keep the hairline flush with mobile padding */
    .has-divider { padding-top: 40px; }
    .home-links-lead { font-size: 16px; }

    /* Blog index */
    .page-header h1 { font-size: 32px; letter-spacing: -0.704px; }
    .page-header { padding: 64px 24px 40px; }
    .post-row { flex-direction: column; gap: 4px; padding: 16px 8px; }
    .post-row:hover { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
    /* Match the mobile hover treatment so keyboard focus doesn't overflow */
    .post-row:focus-visible { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
    .post-date { padding-top: 0; min-width: 0; }
    .post-title { font-size: 15px; }
    .post-excerpt { font-size: 13px; }
    .post-month { margin-top: 32px; }

    /* News distinction holds on mobile */
    .post-row.is-news .post-title { font-weight: 400; }

    /* Articles */
    .article-header h1 { font-size: 28px; letter-spacing: -0.528px; }
    article h1 { font-size: 28px; letter-spacing: -0.528px; }
    .article-body { font-size: 15px; }
    .article-body h2, article h2 { font-size: 20px; }
    /* h3 holds at 17px on mobile; h4 at 15px would otherwise collide
       with the 15px body text and lose its sub-heading distinction.
       Pinning h4 to 15px with weight 510 (vs body 400) keeps the
       tier readable even when the scale gap to body closes to zero —
       the weight is what carries the hierarchy at that point. No
       explicit override needed: the default-rule values already do
       this, so no mobile block is added. */

    /* Components */
    .bench-grid { grid-template-columns: 1fr; }
    .specs-grid { grid-template-columns: 1fr; }
    .compare-table { font-size: 13px; }
    .compare-table th, .compare-table td { padding: 8px 12px; }
}

/* =========================================================
   PROJECTS PAGE
   ========================================================= */

/* The projects page is an Explore surface: a visitor browsing
   an open catalog of repos. The prior 2x7 wall of equal cards
   carried no scannable structure (feature-tile-grid slop —
   every card the same weight, nothing prioritized). Grouping
   the 14 projects into a few category-led sections lets the
   eye scan "self-hosting" vs "AI tooling" vs "utilities" in
   one glance, exactly the way the blog index already scans by
   topic chips and month headings.

   Implementation note: NO new tokens. The category label reuses
   the exact mono-label recipe already in the system:
   .section-title / .post-year (JetBrains Mono, 12px, 500,
   accent-bright / fg4, 0.05–0.08em tracking, uppercase, with a
   hairline bottom rule to attach the grid beneath). The hairline
   is the existing --border2 token that .post-year already uses. */
.projects {
    max-width: 960px; margin: 0 auto;
    padding: 0 24px 80px;
}
.projects-cat {
    margin-bottom: 56px;
}
.projects-cat:last-child { margin-bottom: 0; }
.projects-cat-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 500;
    color: var(--fg4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border2);
    /* The category itself is the primary signal; the count is the
       secondary mono detail, exactly mirroring how .article-header
       .meta pairs a date with the dimmed read-time. No new box. */
}

/* Keyboard focus surface below the section label */
.projects-cat:focus-visible {
    outline: none;
}
.projects-cat .projects-grid {
    /* Override .projects-grid's own max-width + bottom padding so
       the page can flow the four category sections top-to-bottom
       inside the single .projects container. The grid rules here
       are deliberately IDENTICAL to the base .projects-grid —
       removing only the per-grid sizing that conflicts with the
       outer wrapper. Cards themselves are touched. */
    max-width: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.projects-grid {
    max-width: 960px; margin: 0 auto;
    padding: 0 24px 80px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.project-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 24px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
}
.project-card:hover {
    border-color: rgba(255,255,255,0.15);
    background: var(--surface-hover);
}
/* Keyboard focus — same inset accent ring as the blog list rows,
   so every clickable card on the site reads as focusable the same way. */
.project-card:focus-visible {
    outline: none;
    border-color: rgba(255,255,255,0.15);
    background: var(--surface-hover);
    box-shadow: inset 0 0 0 2px rgba(113, 112, 255, 0.45);
}
.project-card:first-child h2 { margin-top: 0; }
.project-card h2 {
    font-size: 18px;
    font-weight: 590;
    color: var(--fg);
    letter-spacing: -0.24px;
    margin-bottom: 8px;
}
.project-card p {
    font-size: 14px;
    color: var(--fg3);
    line-height: 1.55;
    margin-bottom: 12px;
    flex: 1;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 700px) {
    .projects-grid { grid-template-columns: 1fr; }
    /* Match the scoped grid override to keep the mobile single-column
       collapse working the same way it did before categorization. */
    .projects-cat .projects-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page {
    max-width: 720px; margin: 0 auto;
    padding: 0 24px 80px;
}
.about-page h2 {
    font-size: 24px;
    font-weight: 400;
    color: var(--fg);
    letter-spacing: -0.288px;
    margin: 48px 0 16px;
}
.about-page p {
    font-size: 16px;
    color: var(--fg2);
    line-height: 1.70;
    margin-bottom: 24px;
}
.about-page a {
    color: var(--accent-bright);
    text-decoration: none;
}
.about-page a:hover { color: var(--accent-hover); }
.about-page ul {
    margin: 0 0 24px 20px;
    font-size: 16px;
    color: var(--fg2);
    line-height: 1.70;
}
.about-page li { margin-bottom: 8px; }
.about-capability {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
}
.about-capability:last-of-type { border-bottom: none; }
.about-capability-name {
    font-size: 18px;
    font-weight: 590;
    color: var(--fg);
    white-space: nowrap;
}
.about-capability-desc {
    font-size: 14px;
    color: var(--fg3);
    line-height: 1.60;
    max-width: 440px;
    text-align: right;
}
.about-stack { margin-top: 16px; }

@media (max-width: 600px) {
    .about-capability { flex-direction: column; gap: 4px; }
    .about-capability-desc { text-align: left; }
}

/* =========================================================
   HOME LINK CARDS
   ========================================================= */

/* The home-links section now has an eyebrow above the grid:
   a mono section label + a short lead line that says what the
   three cards are for. Linear's editorial pattern: a labelled
   opener, then the grid. The eyebrow lives inside the 960px
   section, the grid keeps its own max-width so the cards
   align with everything else on the page. */
.home-links {
    max-width: 960px; margin: 0 auto;
    padding: 0 24px 80px;
}
.home-links-eyebrow {
    margin-bottom: 32px;
}
.home-links-eyebrow .section-title {
    margin-bottom: 12px;
}
.home-links-lead {
    font-size: 18px;
    font-weight: 400;
    color: var(--fg3);
    line-height: 1.60;
    letter-spacing: -0.165px;
    max-width: 520px;
}
.home-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.home-link-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 28px 24px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
}
.home-link-card:hover {
    border-color: rgba(255,255,255,0.15);
    background: var(--surface-hover);
}
.home-link-card:focus-visible {
    outline: none;
    border-color: rgba(255,255,255,0.15);
    background: var(--surface-hover);
    box-shadow: inset 0 0 0 2px rgba(113, 112, 255, 0.45);
}
.home-link-card h2 {
    font-size: 20px;
    font-weight: 590;
    color: var(--fg);
    margin-bottom: 8px;
}
.home-link-card p {
    font-size: 14px;
    color: var(--fg3);
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
}
.home-link-arrow {
    font-size: 14px;
    color: var(--accent-bright);
    font-weight: 510;
}
.home-link-card:hover .home-link-arrow { color: var(--accent-hover); }

@media (max-width: 700px) {
    .home-links-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ARTICLE-END SIGNATURE FOOTER
   A quiet editorial close for blog posts — the essay's final
   rule, a mono signoff, and three small nav links. Replaces
   the chaos of ~10 unstyled per-post footer variants
   (bare <p>, .left/.right, .footer-quote/.footer-links/
   .footer-signoff, .signoff, .quote…) with one consistent,
   scoped component.

   Design posture: this is a Decide/Learn reading surface,
   so the close is hairline + type, never a card or CTA
   banner. The hairline matches the .tags end-rule already
   used at the bottom of article bodies; the mono signoff
   reuses the exact .read-time / .section-title recipe; the
   links reuse the muted footer .right a treatment. Nothing
   new is invented — existing tokens are reused deliberately.

   Scope: `article footer` and `article > footer` override the
   site-wide `footer` rules (which target the 960px page
   footer on index/about/projects) so article footers stop
   inheriting a 960px flex strip and instead stay inside the
   720px reading column. The `.post-footer` class is the
   canonical hook for footers placed outside <article> (older
   posts); it carries the same scoped rules.
   ========================================================= */

/* Scoped article footer — overrides unscoped footer rules.
   Placed *after* the site-wide footer block so specificity
   (tag + descendant) wins without !important. */
article > footer,
article footer,
.post-footer {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px 16px;
    border-top: 1px solid var(--border);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: transparent;
}
/* Undo the site-wide two-column flex row inside articles */
article > footer .left,
article footer .left,
article footer .right,
.post-footer .footer-links {
    all: unset;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Signoff line — the article's signature.
   Mono, fg4, 0.02em tracking — the exact .read-time recipe
   already used for article metadata. Keeps the close in the
   same typographic register as the byline at the top. */
.signoff,
.footer-signoff,
article footer .left,
article > footer .left,
article footer p:first-child,
article > footer p:first-child {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg4);
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin: 0;
}

/* The recurring signoff quote (e.g. "It's been an honor…")
   gets a slightly warmer tone than the bare name — it carries
   the voice, so it earns the muted ink (fg3) rather than the
   quaternary (fg4) used for the bare name. Still hairline-quiet. */
.footer-quote,
.quote,
article footer .left em,
article > footer .left em {
    color: var(--fg3);
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.55;
}

/* Nav links row — small, muted, left-aligned.
   Reuses footer .right a color/weight/transition, re-scoped
   so the flex-direction column above doesn't break alignment. */
.post-footer .footer-links a,
article footer .right a,
article > footer .right a,
article footer .footer-links a,
article > footer .footer-links a,
article footer p a,
article > footer p a {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 510;
    color: var(--fg3);
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.4;
}
article footer .right a:hover,
article > footer .right a:hover,
.post-footer .footer-links a:hover,
article footer .footer-links a:hover,
article > footer .footer-links a:hover,
article footer p a:hover,
article > footer p a:hover {
    color: var(--fg);
}

/* The "Back to Blog" lead link earns the accent — it's the
   one navigation action a reader actually want after an
   article, so it gets accent-bright (same as inline article
   links) rather than the muted fg3 treatment. */
article footer a[href\$="/blog/"],
article > footer a[href\$="/blog/"],
.post-footer a[href\$="/blog/"] {
    color: var(--accent-bright);
}
article footer a[href\$="/blog/"]:hover,
article > footer a[href\$="/blog/"]:hover,
.post-footer a[href\$="/blog/"]:hover {
    color: var(--accent-hover);
}

/* Accessibility: keyboard focus rings on article footer links */
.post-footer a:focus-visible,
article footer a:focus-visible,
article > footer a:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Bare <p> fallback — posts whose footer is just <p>Cappy 🎩</p>
   or <p>…</p><p>links</p>. These get the muted mono signoff
   treatment automatically. */
article footer p,
article > footer p {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg4);
    letter-spacing: 0.02em;
    line-height: 1.5;
    margin: 0;
}

/* Mobile: keep the article footer quiet and left-aligned.
   The site-wide footer goes centered/column on mobile, but
   the article close stays editorial — left edge holds the
   rhythm of the reading column above it. */
@media (max-width: 640px) {
    article > footer,
    article footer,
    .post-footer {
        padding: 28px 20px 8px;
        gap: 12px;
    }
}