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); }

/* --- 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
   ========================================================= */

/* Hero */
.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;
}

/* 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;
}

/* 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;
}
.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);
}

/* 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: 16px;
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.article-header .meta .read { opacity: 0.7; }
.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 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;
}

/* 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 accent border, no left-border accent callout slop */
.article-body blockquote,
article blockquote {
    border-left: 3px solid var(--accent);
    padding: 12px 0 12px 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 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-left: 3px solid var(--accent);
    padding: 12px 0 12px 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; }
}

/* --- 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);
    }
    .nav-collapse .links a.cta {
        margin: 8px 16px;
        justify-content: center;
        border-radius: 6px;
        min-height: 40px;
    }
}

@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; }

    /* 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; }
    .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; }

    /* 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
   ========================================================= */

.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);
}
.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; }
}

/* =========================================================
   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
   ========================================================= */

.home-links {
    max-width: 960px; margin: 0 auto;
    padding: 0 24px 80px;
    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 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-template-columns: 1fr; }
}