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

/* 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 .keep-reading-title {
    font-size: 24px; font-weight: 590; color: var(--fg);
    margin-bottom: 24px;
}
.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);
}

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

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