/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* a16z exact palette */
    --color-bg:          #f6f4ee;   /* warm cream */
    --color-bg-2:        #f0ece3;   /* slightly darker parchment */
    --color-bg-3:        #e7e1d2;   /* borders/dividers */
    --color-text:        #000000;
    --color-text-muted:  #727069;   /* warm gray */
    --color-text-dim:    #9e9890;
    --color-border:      #e7e1d2;
    --color-header-bg:   #212020;   /* dark nav */
    --color-header-text: #ffffff;
    --color-header-hover:#c69344;   /* gold hover */
    --color-cta:         #002d2d;   /* deep green CTAs */
    --color-cta-hover:   #134F47;
    --color-tag-blue:    #5A91A3;
    --color-tag-green:   #779D42;
    --color-progress:    #203757;   /* navy progress bar */
    --color-link:        #000;

    /* Typography — closest free alternatives to Typekit fonts */
    --font-display: 'Cormorant Garamond', 'Georgia', serif;   /* ≈ orpheus-pro */
    --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* ≈ domaine-sans-text */
    --font-body:    'Lora', Georgia, serif;    /* ≈ domaine-text */

    /* Fluid type (a16z uses clamp) */
    --heading-lg:  clamp(3.75rem, 3.26rem + 1.93vw, 5rem);
    --heading-1:   clamp(2rem, 1.76rem + 0.96vw, 2.625rem);
    --heading-2:   clamp(1.5rem, 1.4rem + 0.39vw, 1.75rem);
    --heading-3:   clamp(1.125rem, 1.03rem + 0.39vw, 1.375rem);

    --max-width:       1280px;
    --canvas-width:    740px;
    --canvas-wide:     1040px;
    --transition:      0.18s ease;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-link); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.gh-viewport { display: flex; flex-direction: column; min-height: 100vh; }
.gh-main { flex: 1; }

.gh-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 48px;
}

.gh-canvas {
    max-width: var(--canvas-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.gh-canvas-wide {
    max-width: var(--canvas-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* ── Progress Bar ─────────────────────────────────────────────────────────── */
#gh-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--color-progress);
    z-index: 9999;
    width: 0;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.gh-head {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-header-bg);
    height: 56px;
}

.gh-head-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 48px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 48px;
}

.gh-head-logo {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-header-text);
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
}

.gh-head-logo img { height: 28px; width: auto; }

.gh-head-menu { flex: 1; }

.gh-head-menu .nav {
    display: flex;
    gap: 36px;
    list-style: none;
}

.gh-head-menu .nav a {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.02em;
    transition: color var(--transition);
}

.gh-head-menu .nav a:hover { color: var(--color-header-hover); }

.gh-head-actions { margin-left: auto; flex-shrink: 0; }

.gh-head-btn {
    display: inline-flex;
    align-items: center;
    background: var(--color-cta);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 20px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background var(--transition);
}

.gh-head-btn:hover { background: var(--color-cta-hover); color: #fff; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.gh-hero {
    border-bottom: 1px solid var(--color-border);
    padding: 72px 0 64px;
    background: var(--color-bg);
}

.gh-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 80px;
    align-items: center;
}

.gh-hero-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-tag-blue);
    margin-bottom: 18px;
}

.gh-hero-tag:hover { opacity: 0.8; }

.gh-hero-title {
    font-family: var(--font-display);
    font-size: var(--heading-lg);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin-bottom: 20px;
}

.gh-hero-title a { color: inherit; }
.gh-hero-title a:hover { opacity: 0.75; }

.gh-hero-excerpt {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 28px;
    font-weight: 300;
}

.gh-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 28px;
    letter-spacing: 0.02em;
}

.gh-hero-divider { color: var(--color-border); margin: 0 4px; }

.gh-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-cta);
    letter-spacing: 0.04em;
    transition: opacity var(--transition);
}

.gh-hero-link:hover { opacity: 0.7; }

.gh-hero-image {
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--color-bg-2);
}

.gh-hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gh-hero-image:hover img { transform: scale(1.02); }

/* ── Section Divider ──────────────────────────────────────────────────────── */
.gh-divider {
    padding: 52px 0 36px;
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.gh-divider::before, .gh-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* ── Feed Grid ────────────────────────────────────────────────────────────── */
.gh-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    margin-bottom: 1px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.gh-card {
    background: var(--color-bg);
    transition: background var(--transition);
    overflow: hidden;
}

.gh-card:hover { background: var(--color-bg-2); }

.gh-card-image-link { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--color-bg-2); }

.gh-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gh-card-image-link:hover .gh-card-image { transform: scale(1.03); }

.gh-card-content { padding: 24px 28px 30px; }

.gh-card-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-tag-blue);
    margin-bottom: 10px;
}

.gh-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin-bottom: 10px;
}

.gh-card-title a { color: inherit; }
.gh-card-title a:hover { opacity: 0.7; }

.gh-card-excerpt {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 18px;
    font-weight: 300;
}

.gh-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-text-dim);
    letter-spacing: 0.03em;
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
}

.gh-card-meta span::before { content: '·'; margin-right: 10px; color: var(--color-border); }

/* ── Article Page ─────────────────────────────────────────────────────────── */
.gh-article { padding: 56px 0 80px; }

.gh-article-header {
    margin-bottom: 0;
    padding-top: 16px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-border);
}

.gh-article-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-tag-blue);
    margin-bottom: 20px;
}

.gh-article-title {
    font-family: var(--font-display);
    font-size: var(--heading-1);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin-bottom: 18px;
}

.gh-article-excerpt {
    font-family: var(--font-sans);
    font-size: 19px;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin-bottom: 28px;
    font-weight: 300;
}

.gh-article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.gh-article-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-text-muted);
}

.gh-author-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

.gh-article-author a { color: var(--color-text); font-weight: 500; }

.gh-article-meta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-muted);
}

.gh-meta-divider { color: var(--color-border); }

/* ── Article Hero Image ───────────────────────────────────────────────────── */
.gh-article-image {
    margin: 40px auto;
}

.gh-article-image img { width: 100%; }

.gh-article-image figcaption {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 10px;
    letter-spacing: 0.02em;
}

/* ── Article Body ─────────────────────────────────────────────────────────── */
.gh-content { padding-top: 44px; padding-bottom: 44px; }

.gh-content > * + * { margin-top: 1.4em; }

.gh-content h2 {
    font-family: var(--font-display);
    font-size: var(--heading-2);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    margin-top: 2.4em;
    margin-bottom: -0.4em;
}

.gh-content h3 {
    font-family: var(--font-sans);
    font-size: var(--heading-3);
    font-weight: 500;
    color: var(--color-text);
    margin-top: 2em;
    margin-bottom: -0.4em;
}

.gh-content p {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.8;
    color: #1a1a1a;
}

.gh-content a {
    color: var(--color-cta);
    border-bottom: 1px solid rgba(0,45,45,0.25);
    transition: border-color var(--transition);
}

.gh-content a:hover { border-color: var(--color-cta); }

.gh-content strong { color: var(--color-text); font-weight: 600; }

.gh-content ul, .gh-content ol {
    padding-left: 1.5em;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.8;
    color: #1a1a1a;
}

.gh-content li + li { margin-top: 0.4em; }

.gh-content blockquote {
    border-left: 3px solid var(--color-text);
    padding: 8px 0 8px 28px;
    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.4;
}

.gh-content blockquote p { font-family: inherit; font-size: inherit; color: inherit; }

.gh-content hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2.5em 0;
}

.gh-content pre {
    background: var(--color-bg-2);
    border: 1px solid var(--color-border);
    padding: 24px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.6;
}

.gh-content code {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.875em;
    background: var(--color-bg-2);
    padding: 2px 5px;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.gh-content pre code { background: none; border: none; padding: 0; font-size: 13px; }

.gh-content img { max-width: 100%; }
.gh-content figure { margin: 2em 0; }
.gh-content figcaption { text-align: center; font-family: var(--font-sans); font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }

/* ── KG Cards ─────────────────────────────────────────────────────────────── */
.kg-card { margin: 2em 0; }
.kg-image-card img { width: 100%; }

.kg-bookmark-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-2);
}

.kg-bookmark-container { display: flex; color: var(--color-text); }
.kg-bookmark-content { padding: 20px 24px; flex: 1; }
.kg-bookmark-title { font-family: var(--font-sans); font-weight: 500; font-size: 15px; margin-bottom: 6px; }
.kg-bookmark-description { font-family: var(--font-sans); font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.kg-bookmark-metadata { font-family: var(--font-sans); font-size: 11px; color: var(--color-text-dim); margin-top: 10px; }
.kg-bookmark-thumbnail { width: 180px; flex-shrink: 0; overflow: hidden; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* ── Article Footer ───────────────────────────────────────────────────────── */
.gh-article-footer {
    padding-top: 36px;
    border-top: 1px solid var(--color-border);
}

.gh-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.gh-tag-pill {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    transition: all var(--transition);
}

.gh-tag-pill:hover { border-color: var(--color-text); color: var(--color-text); }

.gh-author-card {
    background: var(--color-bg-2);
    border: 1px solid var(--color-border);
    padding: 28px 32px;
}

.gh-author-card-inner { display: flex; gap: 20px; align-items: flex-start; }

.gh-author-card-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.gh-author-card-label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-dim);
    margin-bottom: 4px;
}

.gh-author-card-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 8px;
}

.gh-author-card-name a { color: inherit; }

.gh-author-card-bio {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.6;
    font-weight: 300;
}

/* ── Tag/Author Pages ─────────────────────────────────────────────────────── */
.gh-tag-header, .gh-author-header {
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 40px;
}

.gh-tag-title, .gh-author-header-name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 12px;
}

.gh-tag-desc, .gh-author-header-bio {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-text-muted);
    max-width: 600px;
    font-weight: 300;
}

.gh-tag-count {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-dim);
    margin-top: 10px;
    letter-spacing: 0.04em;
}

.gh-author-header { display: flex; align-items: center; gap: 24px; }
.gh-author-header-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ── Paywall ──────────────────────────────────────────────────────────────── */
.gh-paywall {
    margin: 40px auto;
    background: var(--color-bg-2);
    border: 1px solid var(--color-border);
    padding: 56px 40px;
    text-align: center;
}

.gh-paywall h3 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 10px;
}

.gh-paywall p {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

.gh-paywall-btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-cta);
    color: #fff;
    padding: 12px 32px;
    transition: background var(--transition);
}

.gh-paywall-btn:hover { background: var(--color-cta-hover); color: #fff; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.gh-pagination { display: flex; justify-content: center; padding: 56px 0; }

.gh-pagination-btn {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 12px 36px;
    transition: all var(--transition);
}

.gh-pagination-btn:hover { background: var(--color-bg-2); border-color: var(--color-text); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.gh-foot {
    border-top: 1px solid var(--color-border);
    padding: 36px 0;
    background: var(--color-bg);
}

.gh-foot-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.gh-foot-brand a {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gh-foot-menu .nav { display: flex; gap: 24px; list-style: none; }

.gh-foot-menu .nav a {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-muted);
    transition: color var(--transition);
}

.gh-foot-menu .nav a:hover { color: var(--color-text); }

.gh-foot-copy {
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-text-dim);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet landscape — 1024px */
@media (max-width: 1100px) {
    :root {
        --heading-lg:  clamp(2.75rem, 5vw, 3.75rem);
        --heading-1:   clamp(1.75rem, 3vw, 2.25rem);
    }

    .gh-container { padding: 0 36px; }
    .gh-feed { grid-template-columns: 1fr 1fr; gap: 32px; }
    .gh-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .gh-hero-image { display: none; }
    .gh-hero-title { font-size: clamp(2.25rem, 5vw, 3.25rem); }
    .gh-hero-excerpt { font-size: 16px; }
}

/* Tablet portrait — 768px */
@media (max-width: 768px) {
    :root {
        --heading-lg:  clamp(2rem, 7vw, 2.75rem);
        --heading-1:   clamp(1.5rem, 5vw, 2rem);
        --heading-2:   clamp(1.25rem, 4vw, 1.5rem);
        --heading-3:   clamp(1.1rem, 3.5vw, 1.25rem);
    }

    html { font-size: 15px; }

    .gh-container,
    .gh-canvas,
    .gh-canvas-wide { padding-left: 20px; padding-right: 20px; }

    .gh-head-inner { padding: 0 20px; gap: 16px; }
    .gh-head-logo { font-size: 18px; }
    .gh-foot-inner { padding: 0 20px; flex-direction: column; gap: 16px; text-align: center; }

    .gh-hero { padding: 36px 0 40px; }
    .gh-hero-inner { padding: 0 20px; }
    .gh-hero-title { font-size: clamp(1.875rem, 6vw, 2.5rem); line-height: 1.15; }
    .gh-hero-excerpt { font-size: 15px; max-width: 100%; }
    .gh-hero-tag { font-size: 10px; }

    .gh-feed { grid-template-columns: 1fr; gap: 0; }
    .gh-card { border-top: 1px solid var(--color-border); }
    .gh-card-content { padding: 20px 0; }
    .gh-card-title { font-size: clamp(1.1rem, 4vw, 1.375rem); }
    .gh-card-excerpt { font-size: 14px; }

    .gh-head-menu { display: none; }
    .gh-head-subscribe { font-size: 12px; padding: 8px 14px; }

    /* Article post */
    .gh-article { padding: 28px 0 56px; }
    .gh-article-header { padding-bottom: 28px; }
    .gh-article-title { font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.2; }
    .gh-article-excerpt { font-size: 16px; }
    .gh-article-meta { font-size: 12px; flex-wrap: wrap; gap: 8px; }

    /* Body copy */
    .gh-content p,
    .gh-content ul,
    .gh-content ol { font-size: 16px; line-height: 1.75; }
    .gh-content h2 { font-size: clamp(1.375rem, 5vw, 1.75rem); }
    .gh-content h3 { font-size: clamp(1.125rem, 4vw, 1.375rem); }
    .gh-content blockquote { padding-left: 16px; }
    .gh-content blockquote p { font-size: 17px; }

    /* Author */
    .gh-author-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .gh-author-header-avatar { width: 64px; height: 64px; }
    .gh-author-card-inner { flex-direction: column; }
    .gh-author-card-avatar { width: 48px; height: 48px; }

    .gh-foot-copy { margin-left: 0; width: 100%; text-align: center; }

    .gh-divider { margin: 32px 0 24px; }
    .gh-divider span { font-size: 10px; }
}

/* Mobile — 480px */
@media (max-width: 480px) {
    :root {
        --heading-lg:  clamp(1.75rem, 8vw, 2.25rem);
    }

    html { font-size: 14px; }

    .gh-container,
    .gh-canvas,
    .gh-canvas-wide { padding-left: 16px; padding-right: 16px; }

    .gh-head-inner { padding: 0 16px; height: 52px; }
    .gh-head-logo { font-size: 16px; }

    .gh-hero { padding: 28px 0 32px; }
    .gh-hero-inner { padding: 0 16px; }
    .gh-hero-title { font-size: clamp(1.625rem, 7.5vw, 2rem); }
    .gh-hero-excerpt { font-size: 14px; }

    .gh-article-title { font-size: clamp(1.5rem, 7vw, 1.875rem); }

    .gh-content p,
    .gh-content ul,
    .gh-content ol { font-size: 15px; }
    .gh-content h2 { font-size: clamp(1.25rem, 6vw, 1.5rem); }
    .gh-content h3 { font-size: clamp(1.1rem, 5vw, 1.25rem); }

    .gh-author-card-inner { gap: 12px; }
    .gh-tag-pill { font-size: 10px; padding: 4px 10px; }
}

/* ── KG Card Width Classes (required by Ghost) ────────────────────────────── */
.gh-content .kg-width-wide {
    position: relative;
    width: 85vw;
    min-width: 100%;
    margin: auto calc(50% - 50vw * 0.85);
    transform: translateX(calc(50vw - 50% - (50vw - 50%) * 0.15));
}

.gh-content .kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.kg-width-wide img,
.kg-width-full img {
    width: 100%;
}

/* ── Error / 404 Page ─────────────────────────────────────────────────────── */
.gh-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 60px 20px;
}

.gh-error-code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: 300;
    color: var(--color-bg-3);
    line-height: 1;
    margin-bottom: 16px;
}

.gh-error-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 12px;
}

.gh-error-desc {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}

.gh-error-link {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-cta);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 2px;
    transition: border-color var(--transition);
}

.gh-error-link:hover { border-color: var(--color-cta); }