@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
}

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ink: #000;
    --ink-soft: #0d0d12;
    --paper: #fff;
    --paper-alt: #f4f4f1;
    --text: #19181e;
    --muted: #66666c;
    --muted-dark: #a6a6a6;
    --line: #d9d9d5;
    --line-dark: #2b2b2f;
    --signal: #fffb1e;
    --violet: #5835d7;
    --display: var(--gh-font-heading, "Bricolage Grotesque", "Arial Narrow", sans-serif);
    --body: var(--gh-font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --shell: 1240px;
    --shell-wide: 1440px;
    --gutter: clamp(20px, 4vw, 64px);
    --radius-pill: 999px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--text);
    background: var(--paper);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

::selection { color: var(--ink); background: var(--signal); }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, picture, svg { display: block; max-width: 100%; }

.shell {
    width: min(calc(100% - (2 * var(--gutter))), var(--shell));
    margin-inline: auto;
}

.shell-wide {
    width: min(calc(100% - (2 * var(--gutter))), var(--shell-wide));
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 10px 16px;
    color: var(--ink);
    background: var(--signal);
    transform: translateY(-150%);
    transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 4px;
}

.eyebrow {
    margin: 0 0 18px;
    color: var(--muted-dark);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.eyebrow--dark { color: var(--muted); }

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 720;
    line-height: 1;
    transition: transform .25s var(--ease), color .25s ease, background .25s ease, border-color .25s ease;
}

.button:hover { transform: translateY(-2px); }
.button--signal { color: var(--ink); background: var(--signal); }
.button--signal:hover { background: var(--paper); }
.button--dark { color: var(--paper); background: var(--ink); }
.button--dark:hover { background: var(--violet); }

.text-link, .story-read-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}

.text-link span, .story-read-link span { transition: transform .25s var(--ease); }
.text-link:hover span, .story-read-link:hover span { transform: translate(3px, -2px); }
.story-read-link:hover span { transform: translateX(4px); }
.text-link--light { color: var(--paper); }

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    color: var(--paper);
    background: rgba(0, 0, 0, .94);
    border-bottom: 1px solid var(--line-dark);
    backdrop-filter: blur(18px);
}

.site-header__inner {
    display: grid;
    min-height: 76px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.brand-lockup img { width: 72px; height: auto; }
.brand-lockup span {
    padding-left: 14px;
    border-left: 1px solid #444;
    color: #ccc;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.primary-navigation ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 2.5vw, 40px);
    padding: 0;
    margin: 0;
    list-style: none;
}

.primary-navigation a, .header-link {
    position: relative;
    color: #bcbcc0;
    font-size: 13px;
    font-weight: 620;
    transition: color .2s ease;
}

.primary-navigation a::after {
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    height: 1px;
    background: var(--signal);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s var(--ease);
}

.primary-navigation a:hover,
.primary-navigation .is-current a,
.header-link:hover { color: var(--paper); }
.primary-navigation a:hover::after,
.primary-navigation .is-current a::after { transform: scaleX(1); transform-origin: left; }

.site-header__actions { display: flex; align-items: center; gap: 20px; }
.icon-button {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid #35353a;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.icon-button:hover { border-color: var(--signal); background: #141414; }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.button--header { min-height: 42px; padding-inline: 18px; font-size: 12px; }
.menu-toggle { display: none; }

.reading-progress {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    pointer-events: none;
}
.reading-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
}

.journal-hero {
    position: relative;
    min-height: min(820px, calc(100vh - 76px));
    overflow: hidden;
    color: var(--paper);
    background: var(--ink);
}

.journal-hero::after {
    position: absolute;
    right: -10vw;
    bottom: -42%;
    width: 55vw;
    height: 55vw;
    border: 1px solid #252529;
    border-radius: 50%;
    box-shadow: 0 0 0 7vw #060606, 0 0 0 calc(7vw + 1px) #202024, 0 0 0 14vw #030303, 0 0 0 calc(14vw + 1px) #17171a;
    content: "";
    pointer-events: none;
}

.signal-rail {
    display: grid;
    width: min(calc(100% - (2 * var(--gutter))), var(--shell));
    margin: 0 auto;
    padding-top: 28px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    color: #87878b;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .17em;
}
.signal-rail__line { height: 1px; background: #26262a; }
.signal-rail__value { display: flex; align-items: center; gap: 8px; color: var(--signal); }
.signal-rail__value::before { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); content: ""; box-shadow: 0 0 18px rgba(255, 251, 30, .65); }

.journal-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    padding-top: clamp(72px, 10vh, 128px);
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.journal-hero__headline { grid-column: 1 / 10; }
.journal-hero__headline h1 {
    max-width: 1100px;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(68px, 10.4vw, 154px);
    font-stretch: 80%;
    font-weight: 620;
    letter-spacing: -.065em;
    line-height: .79;
    text-wrap: balance;
}
.journal-hero__intro {
    display: flex;
    grid-column: 9 / 13;
    align-self: end;
    flex-direction: column;
    gap: 26px;
    padding-top: 110px;
}
.journal-hero__intro p { max-width: 430px; margin: 0; color: #bcbcc1; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; }
.journal-hero__actions { display: flex; align-items: center; gap: 24px; }
.journal-hero__index {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 36px;
    left: 0;
    display: flex;
    gap: 28px;
    color: #68686c;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.stories-section { padding-block: clamp(80px, 10vw, 148px); }
.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ink);
}
.section-heading h2, .topics-section h2, .newsletter-section h2 {
    max-width: 840px;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 520;
    letter-spacing: -.05em;
    line-height: .96;
}

.story-feed { display: grid; margin-top: 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 76px 28px; }
.lead-story {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .8fr);
    gap: clamp(32px, 5vw, 74px);
    align-items: center;
    padding-bottom: clamp(60px, 8vw, 108px);
    border-bottom: 1px solid var(--line);
}
.lead-story__media, .post-card__media {
    display: block;
    overflow: hidden;
    background: var(--ink-soft);
}
.lead-story__media { aspect-ratio: 1.28 / 1; }
.post-card__media { aspect-ratio: 1.42 / 1; margin-bottom: 24px; }
.lead-story__media picture, .post-card__media picture,
.lead-story__media img, .post-card__media img { width: 100%; height: 100%; }
.lead-story__media img, .post-card__media img { object-fit: cover; transition: transform .7s var(--ease); }
.lead-story__media:hover img, .post-card__media:hover img { transform: scale(1.025); }
.story-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 10px; font-weight: 730; letter-spacing: .1em; text-transform: uppercase; }
.story-meta span + span::before { padding-right: 18px; color: #b9b9b9; content: "/"; }
.story-meta--light { color: var(--muted-dark); }
.story-meta--light a:hover { color: var(--signal); }
.lead-story h3, .post-card h3 {
    margin: 22px 0 16px;
    font-family: var(--display);
    font-size: clamp(35px, 4.1vw, 62px);
    font-weight: 520;
    letter-spacing: -.05em;
    line-height: .98;
}
.lead-story h3 a, .post-card h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.lead-story h3 a:hover, .post-card h3 a:hover { background-size: 100% 1px; }
.lead-story__copy > p, .post-card > p { margin: 0 0 24px; color: var(--muted); font-size: 16px; }

.post-card { min-width: 0; }
.post-card h3 { margin-top: 17px; font-size: clamp(28px, 3vw, 43px); }
.post-card > p { max-width: 54ch; }

.signal-art {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    overflow: hidden;
    background: var(--ink-soft);
}
.signal-art::before {
    width: 44%;
    aspect-ratio: 1;
    border: 1px solid #3c3c40;
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 4vw #101014, 0 0 0 calc(4vw + 1px) #303034, 0 0 0 8vw #08080a, 0 0 0 calc(8vw + 1px) #242428;
}
.signal-art i { position: absolute; top: 50%; left: 8%; width: 84%; height: 1px; background: #27272b; }
.signal-art i:nth-child(2) { transform: rotate(22deg); }
.signal-art i:nth-child(3) { transform: rotate(-22deg); }
.signal-art i:nth-child(4) { width: 16px; height: 16px; left: calc(50% - 8px); border-radius: 50%; background: var(--signal); box-shadow: 0 0 35px rgba(255, 251, 30, .6); }
.signal-art--card::before { width: 36%; }

.empty-state { grid-column: 1 / -1; padding: 70px; text-align: center; background: var(--paper-alt); }
.empty-state h3 { margin: 0 auto 16px; font-family: var(--display); font-size: clamp(36px, 5vw, 68px); font-weight: 520; letter-spacing: -.045em; line-height: 1; }
.empty-state p { margin: 0 auto 28px; color: var(--muted); }

.topics-section { padding-block: clamp(90px, 12vw, 170px); color: var(--paper); background: var(--ink-soft); }
.topics-section__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.topics-section header { grid-column: 1 / 8; }
.topics-section h2 { font-size: clamp(50px, 6.5vw, 92px); }
.topic-list { display: flex; grid-column: 9 / 13; flex-direction: column; align-self: end; border-top: 1px solid var(--line-dark); }
.topic-pill { display: flex; min-height: 68px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-dark); color: #d8d8dc; transition: padding .25s var(--ease), color .2s ease; }
.topic-pill:hover { padding-left: 10px; color: var(--signal); }
.topic-pill span { font-family: var(--display); font-size: 21px; font-weight: 520; }
.topic-pill small { color: #68686d; font-size: 10px; letter-spacing: .1em; }

.newsletter-section { padding-block: clamp(78px, 10vw, 130px); color: var(--ink); background: var(--signal); }
.newsletter-section__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.newsletter-section__inner > div:first-child { grid-column: 1 / 8; }
.newsletter-section__inner > div:last-child { display: flex; grid-column: 9 / 13; align-self: end; flex-direction: column; align-items: flex-start; gap: 24px; }
.newsletter-section .eyebrow { color: #555400; }
.newsletter-section p { max-width: 420px; margin: 0; color: #363600; font-size: 17px; }
.newsletter-section .button--signal { color: var(--paper); background: var(--ink); }
.newsletter-section .button--signal:hover { color: var(--ink); background: var(--paper); }

.archive-page { min-height: 65vh; padding-block: clamp(80px, 10vw, 140px); }
.archive-header { max-width: 900px; padding-bottom: 55px; }
.archive-header h1, .error-page h1 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(68px, 10vw, 138px);
    font-weight: 560;
    letter-spacing: -.065em;
    line-height: .82;
}
.archive-header > p:last-child { max-width: 680px; margin: 32px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 24px); }
.author-header img { width: 112px; height: 112px; margin-bottom: 32px; border-radius: 50%; object-fit: cover; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 26px; }
.pagination { display: grid; margin-top: 80px; padding-top: 24px; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pagination__link:last-child { justify-self: end; }
.pagination__link:hover { color: var(--violet); }

.article-header { padding-block: clamp(76px, 9vw, 128px); color: var(--paper); background: var(--ink); }
.article-header__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.article-header .story-meta, .article-header .eyebrow { grid-column: 2 / 12; }
.article-header h1 {
    grid-column: 2 / 12;
    max-width: 1120px;
    margin: 24px 0 0;
    font-family: var(--display);
    font-size: clamp(58px, 8.6vw, 126px);
    font-weight: 560;
    letter-spacing: -.062em;
    line-height: .84;
    text-wrap: balance;
}
.article-deck { grid-column: 2 / 9; max-width: 780px; margin: 30px 0 0; color: #bdbdc2; font-size: clamp(18px, 2vw, 25px); line-height: 1.45; }
.article-byline { display: flex; grid-column: 2 / 12; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.article-byline > div { display: flex; flex-wrap: wrap; gap: 8px 20px; color: #aaaab0; font-size: 12px; }
.share-button { padding: 0 0 4px; border: 0; border-bottom: 1px solid #777; color: var(--paper); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.share-button:hover { color: var(--signal); border-color: var(--signal); }
.article-header--page .eyebrow, .article-header--page h1, .article-header--page .article-deck { grid-column: 2 / 11; }

.article-feature { position: relative; z-index: 2; margin-top: clamp(-28px, -3vw, -48px); }
.article-feature img { width: 100%; max-height: 820px; object-fit: cover; }
.article-feature figcaption { max-width: 720px; margin: 12px auto 0; color: var(--muted); font-size: 12px; }
.article-canvas { width: min(calc(100% - 40px), 840px); margin: 0 auto; padding-block: clamp(70px, 9vw, 126px); }

.gh-content {
    font-family: var(--body);
    font-size: clamp(18px, 1.45vw, 21px);
    line-height: 1.75;
}
.gh-content > * { margin-block: 0 1.45em; }
.gh-content > * + h2, .gh-content > * + h3 { margin-top: 2.2em; }
.gh-content h2, .gh-content h3, .gh-content h4 {
    color: var(--ink);
    font-family: var(--display);
    font-weight: 580;
    letter-spacing: -.035em;
    line-height: 1.08;
}
.gh-content h2 { font-size: clamp(36px, 4vw, 54px); }
.gh-content h3 { font-size: clamp(28px, 3vw, 40px); }
.gh-content h4 { font-size: 24px; }
.gh-content a { color: var(--violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gh-content a:hover { color: var(--ink); }
.gh-content strong { font-weight: 720; }
.gh-content blockquote {
    margin-inline: 0;
    padding: 8px 0 8px 30px;
    border-left: 4px solid var(--signal);
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(28px, 3.7vw, 46px);
    font-weight: 480;
    letter-spacing: -.035em;
    line-height: 1.15;
}
.gh-content code { padding: .14em .35em; background: var(--paper-alt); font-size: .85em; }
.gh-content pre { overflow-x: auto; padding: 24px; color: #eee; background: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.gh-content pre code { padding: 0; background: transparent; }
.gh-content hr { margin-block: 64px; border: 0; border-top: 1px solid var(--line); }
.gh-content ul, .gh-content ol { padding-left: 1.25em; }
.gh-content li { margin-bottom: .45em; }
.gh-content img { height: auto; }
.gh-content figcaption { margin-top: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.gh-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.gh-content th, .gh-content td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.gh-content th { color: var(--ink); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }

.kg-width-wide { width: min(1100px, calc(100vw - 40px)); margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full img { width: 100%; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.kg-gallery-row { display: flex; gap: 8px; }
.kg-gallery-image { flex: 1; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.kg-callout-card { display: flex; gap: 18px; padding: 28px; border-radius: 0; background: var(--paper-alt); }
.kg-callout-emoji { flex: 0 0 auto; font-size: 28px; }
.kg-bookmark-card { border: 1px solid var(--line); }
.kg-bookmark-container { display: flex; min-height: 150px; text-decoration: none !important; }
.kg-bookmark-content { display: flex; min-width: 0; padding: 22px; flex: 1; flex-direction: column; }
.kg-bookmark-title { color: var(--ink); font-size: 16px; font-weight: 720; }
.kg-bookmark-description { display: -webkit-box; overflow: hidden; margin-top: 6px; color: var(--muted); font-size: 13px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kg-bookmark-metadata { display: flex; align-items: center; gap: 8px; margin-top: auto; color: var(--muted); font-size: 11px; }
.kg-bookmark-icon { width: 20px; height: 20px; }
.kg-bookmark-thumbnail { position: relative; width: 34%; min-width: 150px; }
.kg-bookmark-thumbnail img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.kg-embed-card iframe, .kg-video-container { width: 100%; }
.kg-button-card .kg-btn { display: inline-flex; min-height: 48px; align-items: center; padding: 0 24px; border-radius: 999px; color: var(--paper); background: var(--ink); text-decoration: none; }
.kg-toggle-card { padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kg-header-card { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.article-tags { margin-top: 70px; padding-top: 26px; border-top: 1px solid var(--line); }
.article-tags > div { display: flex; flex-wrap: wrap; gap: 10px; }
.article-tags a { padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); font-size: 11px; font-weight: 700; }
.article-tags a:hover { color: var(--ink); border-color: var(--ink); }
.article-adjacent { display: grid; margin-top: 72px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.article-adjacent a { display: flex; min-height: 130px; padding: 22px 22px 22px 0; flex-direction: column; gap: 12px; }
.article-adjacent a + a { padding-right: 0; padding-left: 22px; border-left: 1px solid var(--line); text-align: right; }
.article-adjacent small { color: var(--muted); font-size: 10px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.article-adjacent span { font-family: var(--display); font-size: 22px; font-weight: 560; line-height: 1.05; }
.comments-section { margin-top: 74px; }
.related-section { padding-bottom: clamp(80px, 10vw, 140px); }
.related-section .post-grid { margin-top: 40px; }

.error-page { min-height: 65vh; padding-block: clamp(100px, 14vw, 190px); }
.error-page h1 { max-width: 950px; }
.error-page > p:not(.eyebrow) { margin: 34px 0; color: var(--muted); font-size: 20px; }

.site-footer { color: var(--paper); background: var(--ink); }
.site-footer__top { display: grid; padding-block: 76px 92px; grid-template-columns: 5fr 7fr; gap: 70px; }
.brand-lockup--footer { margin-bottom: 24px; }
.site-footer__top > div:first-child > p { max-width: 360px; margin: 0; color: #85858a; font-size: 14px; }
.site-footer__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.site-footer__links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.site-footer__links span { margin-bottom: 5px; color: #6f6f74; font-size: 9px; font-weight: 730; letter-spacing: .15em; text-transform: uppercase; }
.site-footer__links a, .site-footer__links button { padding: 0; border: 0; color: #c9c9cc; background: transparent; font-size: 13px; cursor: pointer; }
.site-footer__links a:hover, .site-footer__links button:hover { color: var(--signal); }
.site-footer__bottom { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line-dark); color: #6e6e73; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.site-footer__bottom a:hover { color: var(--paper); }

[data-reveal] { opacity: 1; transform: none; }

@media (max-width: 1100px) {
    .site-header__inner { gap: 24px; }
    .header-link--signin, .header-link--product { display: none; }
    .journal-hero__headline { grid-column: 1 / 11; }
    .journal-hero__intro { grid-column: 8 / 13; }
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topics-section header { grid-column: 1 / 8; }
    .topic-list { grid-column: 8 / 13; }
}

@media (max-width: 820px) {
    :root { --gutter: 20px; }
    html { scroll-padding-top: 68px; }
    .site-header__inner { min-height: 68px; grid-template-columns: 1fr auto; }
    .brand-lockup img { width: 64px; }
    .brand-lockup span { font-size: 9px; }
    .menu-toggle {
        position: relative;
        z-index: 3;
        display: flex;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        align-items: center;
        justify-content: center;
        border: 1px solid #35353a;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
    }
    .menu-toggle > span:not(.sr-only) { position: absolute; width: 18px; height: 1px; background: var(--paper); transition: transform .25s var(--ease); }
    .menu-toggle > span:first-child { transform: translateY(-3px); }
    .menu-toggle > span:nth-child(2) { transform: translateY(3px); }
    .menu-open .menu-toggle > span:first-child { transform: rotate(45deg); }
    .menu-open .menu-toggle > span:nth-child(2) { transform: rotate(-45deg); }
    .site-header__nav {
        position: fixed;
        z-index: 2;
        inset: 68px 0 0;
        visibility: hidden;
        padding: 56px 20px;
        background: var(--ink);
        opacity: 0;
        transform: translateY(-12px);
        transition: opacity .25s ease, transform .25s var(--ease), visibility .25s;
    }
    .menu-open .site-header__nav { visibility: visible; opacity: 1; transform: translateY(0); }
    .primary-navigation ul { align-items: stretch; flex-direction: column; gap: 0; }
    .primary-navigation li { border-bottom: 1px solid var(--line-dark); }
    .primary-navigation a { display: block; padding: 18px 0; color: var(--paper); font-family: var(--display); font-size: 32px; }
    .primary-navigation a::after { display: none; }
    .site-header__actions { position: fixed; z-index: 3; right: 84px; }
    .site-header__actions .icon-button, .site-header__actions .header-link, .site-header__actions .button { display: none; }
    .journal-hero { min-height: 720px; }
    .journal-hero__grid { display: flex; padding-top: 72px; flex-direction: column; gap: 44px; }
    .journal-hero__headline h1 { font-size: clamp(62px, 19vw, 116px); line-height: .82; }
    .journal-hero__intro { max-width: 520px; padding-top: 0; }
    .journal-hero__index { flex-wrap: wrap; gap: 10px 22px; }
    .journal-hero::after { right: -30vw; bottom: -15%; width: 90vw; height: 90vw; }
    .lead-story { grid-template-columns: 1fr; }
    .topics-section__inner, .newsletter-section__inner { display: flex; flex-direction: column; gap: 56px; }
    .topic-list { width: 100%; }
    .newsletter-section__inner > div:last-child { gap: 20px; }
    .article-header__inner { display: block; }
    .article-header h1 { margin-top: 24px; }
    .article-deck { margin-top: 26px; }
    .article-byline { margin-top: 42px; }
    .site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .journal-hero { min-height: calc(100svh - 68px); }
    .signal-rail { padding-top: 20px; }
    .journal-hero__grid { padding-top: 56px; }
    .journal-hero__headline h1 { font-size: clamp(58px, 20vw, 86px); }
    .journal-hero__intro p { font-size: 17px; }
    .journal-hero__actions { align-items: flex-start; flex-direction: column; gap: 18px; }
    .journal-hero__index { bottom: 22px; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .story-feed, .post-grid { grid-template-columns: 1fr; gap: 58px; }
    .lead-story { padding-bottom: 60px; }
    .lead-story__media { aspect-ratio: 1 / .84; }
    .post-card__media { margin-bottom: 20px; }
    .story-meta { gap: 6px 11px; }
    .story-meta span + span::before { padding-right: 11px; }
    .empty-state { padding: 50px 24px; }
    .archive-header { padding-bottom: 44px; }
    .archive-header h1, .error-page h1 { font-size: clamp(60px, 21vw, 100px); }
    .article-header { padding-block: 64px 76px; }
    .article-header h1 { font-size: clamp(52px, 17vw, 84px); }
    .article-byline { align-items: flex-start; flex-direction: column; }
    .article-feature { width: 100%; margin-top: 0; }
    .article-feature figcaption { padding-inline: 20px; }
    .article-canvas { width: min(calc(100% - 40px), 840px); }
    .kg-bookmark-thumbnail { display: none; }
    .kg-width-wide { width: calc(100vw - 40px); }
    .article-adjacent { grid-template-columns: 1fr; }
    .article-adjacent a + a { padding: 22px 0; border-top: 1px solid var(--line); border-left: 0; text-align: left; }
    .site-footer__links { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
    .site-footer__bottom { padding-block: 25px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; }
    input, textarea, select { font-size: 16px; }
}

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