/**
 * Generated by `npm run build:css`.
 * Source: ghost-theme/src/screen.css
 */
@font-face {
    font-family: "Cormorant";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/cormorant-latin-ext.woff2") format("woff2");
    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: "Cormorant";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/cormorant-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/inter-latin-ext.woff2") format("woff2");
    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: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-background-primary: #F5F1EA;
  --color-background-secondary: #EFE7DC;
  --color-background-inverse: #1E1E1C;
  --color-text-primary: #1E1E1C;
  --color-text-secondary: #5E5A55;
  --color-text-inverse: #F5F1EA;
  --color-text-muted: #8A847C;
  --color-brand-wine: #5C1F28;
  --color-brand-wine-hover: #4A1820;
  --color-brand-olive: #7A7A68;
  --color-brand-stone: #D9D2C7;
  --color-border-subtle: #DDD5CA;
  --color-border-strong: #BEB4A8;
  --color-surface-card: #FAF7F2;
  --color-surface-elevated: #FFFFFF;
  --font-family-heading: "Cormorant", serif;
  --font-family-body: "Inter", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-md-plus: 18px;
  --font-size-lg: 20px;
  --font-size-lg-plus: 24px;
  --font-size-xl: 32px;
  --font-size-xl-plus: 40px;
  --font-size-xxl: 56px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-line-height-tight: 1.1;
  --font-line-height-normal: 1.5;
  --font-line-height-reading: 1.6;
  --font-line-height-editorial: 1.65;
  --font-line-height-relaxed: 1.7;
  --font-letter-spacing-tight: -0.02em;
  --font-letter-spacing-normal: 0;
  --font-letter-spacing-wide: 0.08em;
  --typography-article-body-font-family: "Inter", sans-serif;
  --typography-article-body-font-size: 18px;
  --typography-article-body-font-weight: 400;
  --typography-article-body-line-height: 1.65;
  --typography-article-body-letter-spacing: 0;
  --typography-article-callout-body-font-family: "Inter", sans-serif;
  --typography-article-callout-body-font-size: 16px;
  --typography-article-callout-body-font-weight: 400;
  --typography-article-callout-body-line-height: 1.7;
  --typography-article-callout-body-letter-spacing: 0;
  --typography-article-section-heading-font-family: "Cormorant", serif;
  --typography-article-section-heading-font-size: 40px;
  --typography-article-section-heading-compact-font-size: 32px;
  --typography-article-section-heading-font-weight: 400;
  --typography-article-section-heading-line-height: 1.1;
  --typography-article-section-heading-letter-spacing: -0.02em;
  --typography-article-subheading-font-family: "Inter", sans-serif;
  --typography-article-subheading-font-size: 24px;
  --typography-article-subheading-compact-font-size: 20px;
  --typography-article-subheading-font-weight: 600;
  --typography-article-subheading-line-height: 1.5;
  --typography-article-subheading-letter-spacing: 0;
  --typography-article-minor-heading-font-family: "Inter", sans-serif;
  --typography-article-minor-heading-font-size: 20px;
  --typography-article-minor-heading-compact-font-size: 18px;
  --typography-article-minor-heading-font-weight: 600;
  --typography-article-minor-heading-line-height: 1.5;
  --typography-article-minor-heading-letter-spacing: 0;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-lg-plus: 32px;
  --spacing-xl: 40px;
  --spacing-xxl: 72px;
  --article-spacing-heading-before: 32px;
  --article-spacing-heading-after: 16px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 4px 20px rgba(0,0,0,0.04);
  --shadow-card: 0 8px 30px rgba(0,0,0,0.06);
  --layout-content-width: 720px;
  --layout-wide-width: 1200px;
  --layout-nav-height: 72px;
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --z-index-nav: 100;
  --z-index-modal: 1000;
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1200px;
}

:root {
    /* Backgrounds */
    --surface-page: var(--color-background-primary);
    --surface-subtle: var(--color-background-secondary);
    --surface-card: var(--color-surface-card);
    --surface-elevated: var(--color-surface-elevated);
    --surface-inverse: var(--color-background-inverse);

    /* Text */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-inverse: var(--color-text-inverse);

    /* Brand */
    --accent-primary: var(--color-brand-wine);
    --accent-primary-hover: var(--color-brand-wine-hover);
    --accent-secondary: var(--color-brand-olive);

    /* Borders */
    --border-subtle: var(--color-border-subtle);
    --border-strong: var(--color-border-strong);

    /* Typography */
    --font-heading: var(--gh-font-heading, var(--font-family-heading));
    --font-body: var(--gh-font-body, var(--font-family-body));

    /* Layout */
    --content-width: var(--layout-content-width);
    --wide-width: var(--layout-wide-width);
    --nav-height: var(--layout-nav-height);
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--font-line-height-relaxed);
    color: var(--text-primary);
    background: var(--surface-page);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-regular);
    line-height: var(--font-line-height-tight);
    letter-spacing: var(--font-letter-spacing-tight);
    color: var(--text-primary);
}

h1 {
    font-size: clamp(42px, 6vw, var(--font-size-xxl));
}

h2 {
    font-size: clamp(28px, 4vw, var(--font-size-xl));
}

h3 {
    font-size: var(--font-size-lg);
}

p {
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
    max-width: 65ch;
}

small {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-primary);
}
.container {
    width: min(100% - 32px, var(--wide-width));
    margin-inline: auto;
}

.content-container {
    width: min(100% - 32px, var(--content-width));
    margin-inline: auto;
}

.section {
    padding-block: var(--spacing-xxl);
}

.section-sm {
    padding-block: var(--spacing-xl);
}

.stack-md>*+* {
    margin-top: var(--spacing-md);
}

.stack-lg>*+* {
    margin-top: var(--spacing-lg);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-xl);
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}
.hero {
    padding-top: var(--spacing-xxl);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--spacing-xxl);
    align-items: center;
}

.hero__content {
    max-width: 620px;
}

.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: var(--font-letter-spacing-wide);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.hero__title {
    font-size: clamp(52px, 8vw, 92px);
    line-height: 0.95;
    letter-spacing: var(--font-letter-spacing-tight);
}

.hero__description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 52ch;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 24px;

    border-radius: var(--radius-pill);

    background: var(--accent-primary);
    color: var(--text-inverse);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.hero__cta:hover {
    background: var(--accent-primary-hover);
    color: var(--text-inverse);
    transform: translateY(-1px);
}

.hero__image {
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.hero__image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__title {
        font-size: clamp(42px, 12vw, 64px);
    }
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;

    min-height: var(--nav-height);

    backdrop-filter: blur(12px);
    background: rgba(245, 241, 234, 0.92);
    border-bottom: 1px solid var(--border-subtle);
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--spacing-lg);

    min-height: var(--nav-height);

    padding-block: var(--spacing-xs);
}

.navbar__logo {
    flex-shrink: 0;

    font-family: var(--font-heading);
    font-size: clamp(36px, 3vw, 42px);
    line-height: 0.75;
    letter-spacing: var(--font-letter-spacing-tight);

    max-width: 110px;
}

.navbar__nav {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1;

    gap: clamp(16px, 3vw, 40px);

    min-width: 0;
}

.navbar__nav a {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    white-space: nowrap;
}

.navbar__nav a:hover {
    color: var(--text-primary);
}

.navbar__cta {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 20px;

    border-radius: var(--radius-pill);

    background: var(--accent-primary);
    color: var(--text-inverse);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.navbar__cta:hover {
    background: var(--accent-primary-hover);
    color: var(--text-inverse);
    transform: translateY(-1px);
}

/* Large tablet */
@media (max-width: 980px) {
    .navbar__inner {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo cta"
            "nav nav";

        align-items: center;

        row-gap: var(--spacing-md);
    }

    .navbar__logo {
        grid-area: logo;
        padding-top: var(--spacing-sm);
    }

    .navbar__cta {
        grid-area: cta;
        justify-self: end;
    }

    .navbar__nav {
        grid-area: nav;

        justify-content: flex-start;
        flex-wrap: wrap;

        gap: var(--spacing-md) var(--spacing-lg);

        width: 100%;
    }
}

/* Tablet + Mobile */
@media (max-width: 820px) {
    .navbar {
        min-height: auto;
    }

    .navbar__inner {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo cta"
            "nav nav";

        align-items: center;

        row-gap: var(--spacing-md);
    }

    .navbar__logo {
        grid-area: logo;
        font-size: var(--font-size-xl);
        line-height: 0.75;
    }

    .navbar__cta {
        grid-area: cta;
        justify-self: end;
        padding: 10px 15px;
    }

    .navbar__nav {
        grid-area: nav;

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        gap: var(--spacing-md) var(--spacing-lg);

        width: 100%;
    }

    .navbar__nav a {
        font-size: var(--font-size-sm);
    }
}

/* Small phones */
@media (max-width: 560px) {
    .navbar__nav {
        gap: var(--spacing-md);
    }

    .navbar__inner {
        justify-content: space-between;
    }

    .navbar__logo {
        font-size: var(--font-size-xl);
    }

    .navbar__cta {
        padding: 10px 14px;
    }
}
.section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.section-title__content {
    max-width: 680px;
}

.section-title__eyebrow {
    margin-bottom: var(--spacing-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    letter-spacing: var(--font-letter-spacing-wide);
    text-transform: uppercase;
}

.section-title__heading {
    margin: 0;
}

.section-title__subtitle {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--font-line-height-normal);
}

.section-title__cta {
    flex-shrink: 0;
}

.section-title__cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.section-title__cta a:hover,
.section-title__cta a:focus-visible {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

@media (max-width: 720px) {
    .section-title {
        align-items: start;
        flex-direction: column;
        gap: var(--spacing-lg);
    }
}

.article-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

    padding: var(--spacing-lg);

    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    border-color: var(--border-strong);
}

.article-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.article-card__image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card--featured {
    display: grid;
    grid-template-columns: minmax(260px, 40%) minmax(0, 1fr);
    gap: var(--spacing-xl);
    align-items: stretch;
}

.article-card--featured .article-card__image {
    grid-column: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
}

.article-card--featured > .stack-md {
    grid-column: 2;
    min-width: 0;
}

.article-card__eyebrow {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--font-letter-spacing-wide);
}

.article-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    line-height: var(--font-line-height-tight);
}

.article-card__excerpt {
    color: var(--text-secondary);
}

.article-card__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.article-card--featured .article-card__title {
    font-size: clamp(42px, 4vw, var(--font-size-xxl));
    line-height: 0.95;
}

.article-card--featured .article-card__excerpt {
    font-size: var(--font-size-lg);
    line-height: var(--font-line-height-normal);
}

.article-card--featured .article-card__meta {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

@media (max-width: 860px) {
    .article-card--featured {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .article-card--featured .article-card__image {
        grid-column: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .article-card--featured > .stack-md {
        grid-column: auto;
    }
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-secondary);
    cursor: default;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: 1;
    white-space: nowrap;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

a.tag-pill:hover,
a.tag-pill:focus-visible,
button.tag-pill:hover,
button.tag-pill:focus-visible {
    background: var(--surface-elevated);
    border-color: var(--border-strong);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

a.tag-pill,
button.tag-pill {
    cursor: pointer;
}

.tag-pill:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-xl);
}

@media (max-width: 980px) {
    .article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 900px) {
    .article-grid {
        grid-template-columns: 1fr;
    }

    .article-grid .article-card {
        display: grid;
        grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .article-grid .article-card__image {
        height: 100%;
        min-height: 220px;
        aspect-ratio: auto;
    }
}

@media (max-width: 640px) {
    .article-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .article-grid .article-card {
        display: flex;
    }

    .article-grid .article-card__image {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

.entity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-xl);
}

.entity-card {
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    transition:
        transform var(--motion-normal) ease,
        border-color var(--motion-normal) ease,
        background var(--motion-normal) ease;
}

a.entity-card {
    cursor: pointer;
}

a.entity-card:hover,
a.entity-card:focus-visible {
    transform: translateY(-2px);
    background: var(--surface-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.entity-card:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: var(--spacing-xs);
}

.entity-card__eyebrow {
    color: var(--accent-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: var(--font-line-height-tight);
    text-transform: uppercase;
}

.entity-card__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    line-height: var(--font-line-height-tight);
}

.entity-card__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: var(--font-line-height-normal);
}

.entity-card__meta {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--font-line-height-normal);
}

.entity-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-sm);
}

.entity-card--region {
    background: var(--surface-subtle);
}

.entity-card--pairing .entity-card__tags {
    padding-top: var(--spacing-md);
}

@media (max-width: 980px) {
    .entity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 640px) {
    .entity-grid {
        grid-template-columns: 1fr;
    }
}

.post-guide {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.post-guide__intro {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.post-guide__intro {
    padding: var(--spacing-xl);
    background: var(--surface-subtle);
}

.post-guide__quick-answer {
    border-color: var(--border-strong);
}

.post-guide__sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.post-guide__section {
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-subtle);
}

.semantic-content .post-guide__section {
    margin-block: var(--spacing-xl);
}

.post-guide__section--profile {
    padding: var(--spacing-xl);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.post-guide__section--plain,
.post-guide__section--links {
    max-width: 65ch;
}

.post-guide__section--recommendations {
    max-width: 82ch;
}

.post-guide__section--faq {
    max-width: 65ch;
}

.post-guide__section-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.post-guide__eyebrow {
    margin: 0;
    color: var(--accent-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: var(--font-line-height-tight);
    text-transform: uppercase;
}

.post-guide__title {
    margin: 0;
    font-family: var(--typography-article-section-heading-font-family);
    font-size: var(--typography-article-section-heading-font-size);
    font-weight: var(--typography-article-section-heading-font-weight);
    line-height: var(--typography-article-section-heading-line-height);
    letter-spacing: var(--typography-article-section-heading-letter-spacing);
}

.post-guide__quick-answer .post-guide__title {
    font-size: clamp(var(--font-size-lg-plus), 3vw, var(--font-size-xl));
}

.post-guide__body {
    color: var(--text-secondary);
}

.post-guide__section .post-guide__body {
    font-size: var(--typography-article-body-font-size);
    line-height: var(--typography-article-body-line-height);
}

.post-guide__quick-answer .post-guide__body,
.post-guide__note .post-guide__body {
    font-size: var(--typography-article-callout-body-font-size);
    line-height: var(--typography-article-callout-body-line-height);
}

.post-guide__body > :last-child,
.post-guide__intro > :last-child,
.post-guide__section > :last-child,
.post-guide__note > :last-child {
    margin-bottom: 0;
}

.post-guide__profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

.post-guide__profile-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
}

.post-guide__profile-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.post-guide__profile-item span {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: var(--font-line-height-tight);
    text-transform: uppercase;
}

.post-guide__profile-item strong {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-line-height-normal);
}

.post-guide__appellation-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.post-guide__appellation-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    transition: border-color var(--motion-fast) ease;
}

.post-guide__appellation-card:hover {
    border-color: var(--border-strong);
}

.post-guide__section .post-guide__appellation-card h3 {
    margin: 0 0 var(--spacing-md);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-line-height-tight);
}

.post-guide__appellation-card p {
    margin: 10px 0 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.post-guide__appellation-card h3 + p {
    margin-top: 0;
}

.post-guide__appellation-card p + p {
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.post-guide__appellation-card strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.post-guide__recommendation-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.post-guide__recommendation-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.post-guide__recommendation-card:first-child {
    border-color: var(--border-strong);
    background: var(--surface-elevated);
}

.post-guide__recommendation-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-md);
    align-items: start;
}

.post-guide__recommendation-rank {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--accent-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: 1;
}

.semantic-content .post-guide__section .post-guide__recommendation-card h3,
.post-guide__section .post-guide__recommendation-card h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-line-height-tight);
}

.post-guide__recommendation-card .post-guide__recommendation-confidence {
    margin: var(--spacing-xs) 0 0;
    color: var(--accent-primary);
    font-size: var(--font-size-sm);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: var(--font-line-height-tight);
}

.post-guide__recommendation-regions {
    margin: 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--font-line-height-normal);
}

.post-guide__recommendation-regions span {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: var(--font-line-height-tight);
    text-transform: uppercase;
}

.post-guide__recommendation-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.65;
}

.post-guide__section--style-finder {
    max-width: 82ch;
    text-align: center;
}

.post-guide__section--style-finder .post-guide__section-header {
    align-items: center;
}

.post-guide__style-intro {
    max-width: 65ch;
    margin: 0 auto var(--spacing-lg);
    color: var(--text-secondary);
    font-size: var(--typography-article-body-font-size);
    line-height: var(--typography-article-body-line-height);
}

.post-guide__style-routes {
    display: grid;
    gap: var(--spacing-sm);
}

.post-guide__style-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
    gap: var(--spacing-md);
    align-items: stretch;
    padding: var(--spacing-sm);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.post-guide__style-preference,
.post-guide__style-result {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    text-align: center;
}

.post-guide__style-preference {
    background: var(--surface-subtle);
}

.post-guide__style-result {
    border: 1px solid var(--border-subtle);
    background: var(--surface-elevated);
}

.post-guide__style-preference > span,
.post-guide__style-result > span:not(.post-guide__style-tags) {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: var(--font-line-height-tight);
    text-transform: uppercase;
}

.post-guide__style-preference strong,
.post-guide__style-result strong {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-line-height-normal);
}

.post-guide__style-result .tag-pill {
    max-width: 100%;
    border-color: var(--border-strong);
    color: var(--accent-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-line-height-normal);
    text-align: center;
    white-space: normal;
}

.post-guide__style-result-copy {
    display: block;
}

.post-guide__style-tags {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
}

.post-guide__style-result strong {
    color: var(--accent-primary);
}

.post-guide__style-arrow {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-self: center;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--accent-primary);
    font-size: var(--font-size-lg);
    line-height: 1;
}

.post-guide__style-arrow::before {
    content: "→";
}

.post-guide__link-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-guide__link-list a:not(.tag-pill) {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.post-guide__link-list a:not(.tag-pill):hover,
.post-guide__link-list a:not(.tag-pill):focus-visible {
    border-color: var(--border-strong);
    color: var(--accent-primary);
}

.similar-table {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.similar-table table {
    width: 100%;
    border-collapse: collapse;
}

.similar-table th,
.similar-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--font-line-height-normal);
    text-align: left;
    vertical-align: top;
}

.similar-table thead th {
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: var(--font-line-height-tight);
    text-transform: uppercase;
}

.similar-table tbody th {
    width: 26%;
    font-weight: var(--font-weight-medium);
}

.similar-table td {
    width: 37%;
}

.similar-table tbody tr:last-child th,
.similar-table tbody tr:last-child td {
    border-bottom: 0;
}

.similar-table .tag-pill {
    white-space: nowrap;
}

.post-guide__note {
    padding: var(--spacing-lg) var(--spacing-xl);
    border: 1px solid var(--border-subtle);
    border-left-color: var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.post-guide__faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.post-guide__faq-item {
    box-sizing: border-box;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    interpolate-size: allow-keywords;
    transition:
        background-color 200ms ease,
        border-color 200ms ease;
}

.post-guide__faq-item[open] {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--surface-card) 82%, var(--surface-subtle));
}

.post-guide__faq-item::details-content {
    overflow: clip;
    block-size: 0;
    opacity: 0;
    transition:
        block-size 200ms cubic-bezier(0.22, 1, 0.36, 1),
        content-visibility 200ms allow-discrete,
        opacity 150ms ease;
}

.post-guide__faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
}

.post-guide__faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-line-height-normal);
    list-style: none;
}

.post-guide__faq-question::-webkit-details-marker {
    display: none;
}

.post-guide__faq-question::after {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--accent-primary);
    content: "";
    transform: rotate(45deg);
    transform-origin: 65% 65%;
    transition: transform 200ms ease;
}

.post-guide__faq-item[open] .post-guide__faq-question::after {
    transform: rotate(-135deg);
}

.post-guide__faq-question:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -4px;
}

.post-guide__faq-answer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--text-secondary);
}

.post-guide__faq-answer p {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
    .post-guide__faq-item,
    .post-guide__faq-item::details-content,
    .post-guide__faq-question::after {
        transition-duration: 0.01ms;
    }
}

@media (max-width: 768px) {
    .post-guide__appellation-list,
    .post-guide__recommendation-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .post-guide__title {
        font-size: var(--typography-article-section-heading-compact-font-size);
    }

    .post-guide__intro,
    .post-guide__section--profile,
    .post-guide__note {
        padding: var(--spacing-lg);
    }

    .post-guide__appellation-card {
        padding: 18px;
    }

    .post-guide__profile-grid {
        grid-template-columns: 1fr;
    }

    .post-guide__style-route {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    .post-guide__style-arrow {
        margin: calc(var(--spacing-xs) * -1) auto;
    }

    .post-guide__style-arrow::before {
        content: "↓";
    }

    .similar-table {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .similar-table table,
    .similar-table thead,
    .similar-table tbody,
    .similar-table tr,
    .similar-table th,
    .similar-table td {
        display: block;
    }

    .similar-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .similar-table tbody tr {
        padding-block: var(--spacing-md);
        border-top: 1px solid var(--border-subtle);
    }

    .similar-table tbody tr:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .similar-table tbody th,
    .similar-table tbody td {
        width: auto;
        padding: 0;
        border-bottom: 0;
    }

    .similar-table tbody th {
        margin-bottom: var(--spacing-sm);
    }

    .similar-table tbody td + td {
        margin-top: var(--spacing-xs);
    }

    .similar-table tbody td::before {
        color: var(--text-primary);
        font-weight: var(--font-weight-medium);
    }

    .similar-table tbody td:nth-child(2)::before {
        content: "Similar: ";
    }

    .similar-table tbody td:nth-child(3)::before {
        content: "Difference: ";
    }
}

.footer {
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
}

.footer__inner {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: var(--spacing-xl);
    padding-block: var(--spacing-xxl);
}

.footer__brand {
    max-width: 420px;
}

.footer__logo {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: clamp(34px, 4vw, 48px);
    line-height: 0.95;
    letter-spacing: var(--font-letter-spacing-tight);
}

.footer__newsletter-title {
    margin: 0;
    font-size: var(--font-size-lg);
}

.footer__newsletter-description {
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.footer__nav,
.footer__social {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer__social .nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__nav .nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__nav a,
.footer__social a {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.footer__nav a:hover,
.footer__nav a:focus-visible,
.footer__social a:hover,
.footer__social a:focus-visible {
    color: var(--accent-primary);
}

.footer__meta {
    grid-column: 1 / -1;
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

@media (max-width: 900px) {
    .footer__inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

.newsletter-cta {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.85fr);
    gap: var(--spacing-xl);
    align-items: center;
    padding: var(--spacing-xxl);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

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

.newsletter-cta__content,
.newsletter-cta__form,
.newsletter-cta__controls,
.newsletter-cta__success {
    min-width: 0;
}

.newsletter-cta__title {
    margin: 0;
}

.newsletter-cta__description {
    margin-bottom: 0;
    color: var(--text-secondary);
}

.newsletter-cta__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.newsletter-cta__label {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.newsletter-cta__controls {
    display: flex;
    gap: var(--spacing-sm);
}

.newsletter-cta__input {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--spacing-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-elevated);
    color: var(--text-primary);
    font: inherit;
}

.newsletter-cta__input::placeholder {
    color: var(--text-muted);
}

.newsletter-cta__input:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-color: var(--accent-primary);
}

.newsletter-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent-primary);
    color: var(--text-inverse);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.newsletter-cta__button:disabled {
    cursor: progress;
    opacity: 0.72;
    transform: none;
}

.newsletter-cta__button:hover,
.newsletter-cta__button:focus-visible {
    background: var(--accent-primary-hover);
    transform: translateY(-1px);
}

.newsletter-cta__button:disabled:hover,
.newsletter-cta__button:disabled:focus-visible {
    background: var(--accent-primary);
    transform: none;
}

.newsletter-cta__button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.newsletter-cta__spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: newsletter-spinner 0.75s linear infinite;
}

.newsletter-cta__form.loading .newsletter-cta__spinner,
.newsletter-cta__form.is-sending .newsletter-cta__spinner {
    display: inline-block;
}

.newsletter-cta__message {
    min-height: 1.35em;
    margin: 0;
    color: var(--accent-primary);
    font-size: var(--font-size-sm);
}

.newsletter-cta__success {
    display: none;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
}

.newsletter-cta__success-title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.newsletter-cta__success p {
    margin: 0;
}

.newsletter-cta__form.success .newsletter-cta__label,
.newsletter-cta__form.success .newsletter-cta__controls,
.newsletter-cta__form.success .newsletter-cta__message {
    display: none;
}

.newsletter-cta__form.success .newsletter-cta__success {
    display: grid;
}

@keyframes newsletter-spinner {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 860px) {
    .newsletter-cta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .newsletter-cta {
        padding: var(--spacing-lg);
    }

    .newsletter-cta__controls {
        flex-direction: column;
    }

    .newsletter-cta__button {
        width: 100%;
    }
}

.skip-link {
    position: fixed;
    left: var(--spacing-md);
    top: var(--spacing-md);
    z-index: 200;
    transform: translateY(-140%);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background: var(--surface-inverse);
    color: var(--text-inverse);
}

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

.site-main:focus {
    outline: none;
}

.age-gate-open {
    overflow: hidden;
}

.age-gate[hidden] {
    display: none;
}

.age-gate {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-modal);
    display: grid;
    place-items: center;
    padding: var(--spacing-lg);
    background: color-mix(in srgb, var(--surface-page) 88%, var(--surface-inverse));
}

.age-gate__dialog {
    width: min(100%, 520px);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.age-gate__eyebrow {
    margin-bottom: var(--spacing-sm);
    color: var(--accent-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--font-letter-spacing-wide);
    line-height: var(--font-line-height-tight);
    text-transform: uppercase;
}

.age-gate__title {
    margin: 0;
    font-size: clamp(32px, 5vw, var(--font-size-xxl));
}

.age-gate__description {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    color: var(--text-secondary);
}

.age-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.age-gate__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--spacing-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition:
        background var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        color var(--motion-fast) ease,
        transform var(--motion-fast) ease;
}

.age-gate__button:hover,
.age-gate__button:focus-visible {
    transform: translateY(-1px);
}

.age-gate__button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.age-gate__button--primary {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: var(--text-inverse);
}

.age-gate__button--primary:hover,
.age-gate__button--primary:focus-visible {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: var(--text-inverse);
}

.age-gate__button--secondary {
    background: var(--surface-elevated);
    color: var(--text-secondary);
}

.age-gate__button--secondary:hover,
.age-gate__button--secondary:focus-visible {
    border-color: var(--border-strong);
    color: var(--accent-primary);
}

.age-gate__note {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.navbar__nav ul {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

.discovery-band,
.related-articles {
    background: var(--surface-subtle);
}

.discovery-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.discovery-link {
    display: flex;
    min-height: 96px;
    align-items: end;
    padding: var(--spacing-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    line-height: var(--font-line-height-tight);
}

.discovery-link:hover,
.discovery-link:focus-visible {
    border-color: var(--border-strong);
    color: var(--accent-primary);
}

.discovery-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-xl);
}

.discovery-columns section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.discovery-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 220px;
    place-items: center;
    padding: var(--spacing-lg);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    text-align: center;
}

.post-header,
.tag-header {
    border-bottom: 1px solid var(--border-subtle);
}

.tag-header__media {
    margin: 0;
    max-height: 360px;
    aspect-ratio: 16 / 6;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.tag-header__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.tag-header__media+h1 {
    margin-top: var(--spacing-md);
}

.tag-header h1+.tag-header__count {
    margin-top: var(--spacing-sm);
}

.tag-header__count {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tag-header__count+.post-header__excerpt {
    margin-top: var(--spacing-md);
}

.tag-guides-section {
    padding-top: var(--spacing-xxl);
}

.post-header__excerpt {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--font-line-height-normal);
}

.post-feature {
    margin-top: var(--spacing-xl);
}

.post-feature img {
    width: 100%;
    max-height: 680px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.post-feature figcaption {
    margin-top: var(--spacing-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.post-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, var(--content-width));
    gap: var(--spacing-xl);
    align-items: start;
    padding-block: var(--spacing-xxl);
}

.page-layout {
    width: min(100% - 32px, var(--content-width));
    margin-inline: auto;
    padding-block: var(--spacing-xxl);
}

.page-template--hidden-header .page-layout {
    padding-top: var(--spacing-xl);
}

.page-template--hidden-header .semantic-content>.kg-width-full:first-child {
    margin-top: calc(var(--spacing-xl) * -1);
}

.post-discovery-panel {
    position: sticky;
    top: calc(var(--nav-height) + var(--spacing-lg));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.post-discovery-panel h2 {
    font-size: var(--font-size-lg);
}

.post-discovery-panel nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.post-discovery-panel nav a {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.post-discovery-panel .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--spacing-sm);
    row-gap: var(--spacing-md);
}

.post-content {
    min-width: 0;
}

.semantic-content {
    font-family: var(--font-body);
    font-size: var(--typography-article-body-font-size);
    font-weight: var(--typography-article-body-font-weight);
    line-height: var(--typography-article-body-line-height);
    letter-spacing: var(--typography-article-body-letter-spacing);
}

.semantic-content> :not(.post-guide__section) {
    max-width: 65ch;
}

.semantic-content h2:not(.post-guide__title),
.semantic-content h3:not(.post-guide__title),
.semantic-content h4:not(.post-guide__title) {
    margin-top: var(--article-spacing-heading-before);
    margin-bottom: var(--article-spacing-heading-after);
}

.semantic-content h2:not(.post-guide__title) {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--typography-article-section-heading-font-size);
    font-weight: var(--typography-article-section-heading-font-weight);
    line-height: var(--typography-article-section-heading-line-height);
    letter-spacing: var(--typography-article-section-heading-letter-spacing);
}

.semantic-content>h2:first-child,
.semantic-content>h3:first-child,
.semantic-content>h4:first-child {
    margin-top: 0;
}

.semantic-content h3:not(.post-guide__title) {
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--typography-article-subheading-font-size);
    font-weight: var(--typography-article-subheading-font-weight);
    line-height: var(--typography-article-subheading-line-height);
    letter-spacing: var(--typography-article-subheading-letter-spacing);
}

.semantic-content h4:not(.post-guide__title) {
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--typography-article-minor-heading-font-size);
    font-weight: var(--typography-article-minor-heading-font-weight);
    line-height: var(--typography-article-minor-heading-line-height);
    letter-spacing: var(--typography-article-minor-heading-letter-spacing);
}

.semantic-content p,
.semantic-content ul,
.semantic-content ol {
    color: var(--text-secondary);
}

.semantic-content a:not(.tag-pill) {
    color: var(--accent-primary);
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
}

.semantic-content figure,
.semantic-content .kg-card {
    max-width: 100%;
    margin-block: var(--spacing-xl);
}

.semantic-content .kg-image-card>.kg-image,
.kg-image--fluid {
    display: block;
    width: 100%;
    height: auto;
}

.semantic-content .kg-image-card>.kg-image {
    cursor: zoom-in;
}

.image-zoom-open {
    overflow: hidden;
}

.image-zoom {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-index-modal) + 1);
    display: grid;
    place-items: center;
    padding: var(--spacing-lg);
    background: color-mix(in srgb, var(--surface-inverse) 84%, transparent);
}

.image-zoom[hidden] {
    display: none;
}

.image-zoom__button {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--text-inverse) 28%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-inverse) 72%, transparent);
    color: var(--text-inverse);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-xl);
    line-height: 1;
}

.image-zoom__button:hover,
.image-zoom__button:focus-visible {
    background: var(--surface-inverse);
}

.image-zoom__button:focus-visible {
    outline: 2px solid var(--text-inverse);
    outline-offset: 3px;
}

.image-zoom__figure {
    display: grid;
    max-width: min(100%, 1536px);
    max-height: calc(100vh - var(--spacing-xl) * 2);
    gap: var(--spacing-sm);
    margin: 0;
}

.image-zoom__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - var(--spacing-xl) * 2);
    object-fit: contain;
}

.image-zoom__caption {
    max-width: 90ch;
    color: var(--text-inverse);
    font-size: var(--font-size-sm);
    text-align: center;
}

.semantic-content blockquote,
.semantic-content hr {
    max-width: 65ch;
}

.semantic-content blockquote {
    margin-block: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-left: 1px solid var(--border-strong);
    background: var(--surface-subtle);
}

.semantic-content blockquote p {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    line-height: var(--font-line-height-tight);
}

.semantic-content hr {
    margin-block: var(--spacing-xl);
    border: 0;
    border-top: 1px solid var(--border-subtle);
}

.kg-width-wide {
    width: min(100vw - 32px, 960px);
    max-width: none;
    margin-inline: calc((var(--content-width) - min(100vw - 32px, 960px)) / 2);
}

.kg-width-full {
    width: min(100vw - 32px, var(--wide-width));
    max-width: none;
    margin-inline: calc((var(--content-width) - min(100vw - 32px, var(--wide-width))) / 2);
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.kg-gallery-row {
    display: flex;
    gap: var(--spacing-sm);
}

.kg-gallery-image {
    flex: 1;
    min-width: 0;
}

.kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kg-bookmark-card {
    width: 100%;
}

.kg-bookmark-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 0.32fr);
    gap: var(--spacing-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.kg-bookmark-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
}

.kg-bookmark-title {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    line-height: var(--font-line-height-tight);
}

.kg-bookmark-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.kg-bookmark-icon {
    width: 18px;
    height: 18px;
}

.kg-bookmark-author,
.kg-bookmark-publisher {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-bookmark-thumbnail {
    min-height: 180px;
    background: var(--surface-subtle);
}

.kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.semantic-content figcaption {
    margin-top: var(--spacing-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.newsletter-cta {
    padding-block: calc(var(--spacing-xxl) * 1.35);
}

.newsletter-cta__title+.newsletter-cta__description {
    margin-top: var(--spacing-lg);
}

.article-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

@media (max-width: 980px) {
    .discovery-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .post-layout {
        grid-template-columns: 1fr;
    }

    .post-discovery-panel {
        position: static;
    }
}

@media (max-width: 900px) {
    .discovery-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .semantic-content h2:not(.post-guide__title) {
        font-size: var(--typography-article-section-heading-compact-font-size);
    }

    .semantic-content h3:not(.post-guide__title) {
        font-size: var(--typography-article-subheading-compact-font-size);
    }

    .semantic-content h4:not(.post-guide__title) {
        font-size: var(--typography-article-minor-heading-compact-font-size);
    }

    .tag-header__media {
        max-height: 220px;
        aspect-ratio: 16 / 8;
    }

    .tag-guides-section {
        padding-top: var(--spacing-xl);
    }

    .article-card__excerpt {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .discovery-link-grid {
        grid-template-columns: 1fr;
    }

    .kg-width-wide,
    .kg-width-full {
        width: 100%;
        margin-inline: 0;
    }

    .kg-bookmark-container {
        grid-template-columns: 1fr;
    }
}