/* ============================================================
   DESIGN TOKENS — sourced from React editorial theme
   index.css resolved color map (editorial default)
   ============================================================ */

:root {
    /* Fonts */
    --font-sans:  "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-serif: "Fraunces", Georgia, Cambria, serif;
    --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Backgrounds */
    --color-surface:  #fcfaf7;   /* body-bg, page, header */
    --color-panel:    #faf6f0;   /* card bg, image placeholder, featured story */
    --color-soft-bg:  #faf0ed;   /* icon boxes, accent panels */

    /* Text — editorial resolved values */
    --color-ink:    #1a1a1a;     /* text-[#1A1A1A] / headings */
    --color-text:   #2d302d;     /* body text (--body-text) */
    --color-muted:  #6f7275;     /* secondary text (--c-6F7275 resolved) */
    --color-soft:   #8a8d90;     /* meta, muted labels */
    --color-meta:   #a0a5a2;     /* footer muted */

    /* Accents — editorial resolved */
    --color-accent:      #ba9a7c;   /* primary gold — All Articles, CTA links, active nav */
    --color-accent-warm: #c5a880;   /* text-[#C5A880] — eyebrows, category labels */
    --color-rose:        #e09283;   /* text-[#E09283] resolved as #C5A16F in editorial;
                                       but literal #E09283 used in footer hover, contact */

    /* Borders */
    --color-line:        #eae6e1;   /* border-[#EAE6E1] / border-[#F4EFEB] resolved */
    --color-line-input:  #e8dfd8;   /* input borders */

    /* Footer */
    --color-footer-bg:       #151917;
    --color-footer-border:   #262c29;
    --color-footer-social:   #313633;
    --color-trustpilot:      #00b67a;

    /* Shadows */
    --shadow-xs:   0 1px 2px rgba(47, 41, 38, 0.05);
    --shadow-sm:   0 1px 3px rgba(31, 36, 33, 0.06), 0 4px 12px rgba(31, 36, 33, 0.06); /* React shadow-sm */
    --shadow-soft: 0 2px 8px rgba(47, 41, 38, 0.06), 0 12px 32px rgba(47, 41, 38, 0.08); /* legacy alias */
    --shadow-md:   0 4px 16px rgba(47, 41, 38, 0.10);
    --shadow-card: 0 1px 3px rgba(31, 36, 33, 0.06), 0 8px 24px rgba(31, 36, 33, 0.06);
}

/* ============================================================
   GLOBAL BORDER-RADIUS OVERRIDE
   Matches React index.css: button, input, select, textarea,
   .rounded-full, .rounded-2xl, .rounded-3xl, .rounded-xl → 0px
   NOTE: rounded-sm, rounded-xs, rounded-t-full on divs are NOT zeroed
   ============================================================ */
button, input, select, textarea,
.rounded-full, .rounded-2xl, .rounded-3xl, .rounded-xl {
    border-radius: 0 !important;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.newsletter-open {
    overflow: hidden;
}

/*
 * Global heading reset — mirrors Tailwind Preflight.
 * Preflight strips browser bold + sizing from h1-h6 (font-size: inherit; font-weight: inherit).
 * React components then apply font-serif, font-light, text-*xl explicitly on every heading.
 * In WordPress (no Preflight) we replicate that baseline here so NO heading ever falls back
 * to browser-bold Times New Roman or generic serif.
 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;          /* normal weight — Fraunces 400 visually matches the Georgia fallback the design was built on */
    font-optical-sizing: auto;
    color: var(--color-ink);
    line-height: 1.2;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--color-accent);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

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

.site-main {
    min-height: 60vh;
}

/* max-w-7xl = 1280px — matches React layout */
/* React: max-w-7xl px-4 sm:px-6 lg:px-8 = 16/24/32px padding per side */
.section-inner {
    width: min(100% - 32px, 1280px); /* 16px each side = px-4 */
    margin-inline: auto;
}

@media (min-width: 640px) {
    .section-inner {
        width: min(100% - 48px, 1280px); /* 24px each side = px-6 */
    }
}

@media (min-width: 1024px) {
    .section-inner {
        width: min(100% - 64px, 1280px); /* 32px each side = px-8 */
    }
}

.section-inner--narrow {
    width: min(100% - 32px, 760px);
}

/* React: text-[10px] sm:text-[11px] font-bold tracking-[0.35em] uppercase #C5A880 */
.eyebrow {
    margin: 0 0 10px;
    display: block;
    color: var(--color-accent-warm); /* #C5A880 — most eyebrows use accent-warm */
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.35em;
    line-height: 1.3;
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .eyebrow {
        font-size: 11px; /* sm+ */
    }
}

/* About + boutique page: eyebrow uses #BA9A7C (literal, not remapped) */
.about-shell .eyebrow,
.boutique-shell .eyebrow {
    color: var(--color-accent); /* #BA9A7C */
}

/* ── Contact hero overrides (scoped to .contact-shell) ──
   React: max-w-2xl (672px), space-y-3, eyebrow text-xs/semibold/tracking-widest,
          h1 text-4xl/5xl font-bold, p text-sm/base font-light */

/* React: max-w-2xl = 672px, mb-16 = 64px, space-y-3 children */
.contact-shell .page-hero--centered {
    max-width: 672px;
    margin-bottom: 64px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* space-y-3 */
}

/* React: text-xs font-semibold text-[#C5A16F] uppercase tracking-widest */
.contact-shell .eyebrow {
    color: #c5a16f !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    margin: 0 !important;
}

/* React: font-fraunces text-4xl sm:text-5xl font-bold text-[#1F2421] */
.contact-shell .page-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3rem) !important; /* 36px → 48px */
    font-weight: 600 !important;
    font-family: var(--font-serif) !important;
    font-optical-sizing: none !important;
    font-variation-settings: 'opsz' 0 !important; /* pin opsz to 36 — restrains the elaborate display & glyph */
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    color: #1f2421 !important;
    margin: 0 !important;
}

/* React: text-sm sm:text-base text-[#5F6368]→#6F7275 leading-relaxed font-light */
.contact-shell .page-hero p {
    font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14px → 16px */
    font-style: normal;   /* override global italic */
    font-weight: 300;
    color: var(--color-muted);
    line-height: 1.625;
    margin: 0;
}

.button,
.text-link,
.header-cta,
.search-form button,
.newsletter-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.button,
.search-form button,
.newsletter-form button {
    padding: 13px 20px;
}

.button--dark,
.search-form button {
    background: var(--color-ink);
    color: var(--color-surface);
}

.button--dark:hover,
.search-form button:hover {
    background: #000;
    color: var(--color-surface);
}

/* Newsletter subscribe button — warm gold, matching React index.css override */
.newsletter-form button {
    width: 100%;
    background: #c5a880;
    color: #fcfaf7;
    font-size: 0.75rem;     /* text-xs = 12px */
    font-weight: 600;       /* font-semibold */
    letter-spacing: 0.05em; /* tracking-wider */
    padding: 14px 20px;     /* py-3.5 */
}

.newsletter-form button:hover {
    background: #b0916e;
    color: #fcfaf7;
}

.text-link {
    width: max-content;
    padding-block: 3px;
    border-bottom: 1px solid rgba(197, 168, 128, 0.45);
    color: var(--color-ink);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(252, 250, 247, 0.96);
    border-bottom: 1px solid var(--color-line);
    backdrop-filter: blur(14px);
}

/* React: div#top-boundary-line.bg-[#1F2421] → editorial override resolves to #C5A16F (warm gold) */
.site-header__line {
    height: 3px;
    background: #c5a16f;
}

.site-header__brand-row {
    display: grid;
    place-items: center;
    padding: 28px 16px 22px;
    border-bottom: 1px solid rgba(234, 230, 225, 0.72);
}

.site-brand {
    color: #1f2421;
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.25em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    transition: color 300ms ease;
}

.site-brand:hover {
    color: var(--color-accent);
}

.site-brand__name {
    display: block;
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
}

.custom-logo {
    max-height: 86px;
    width: auto;
}

/* Nav row: fixed 288px spacer | centered nav | fixed 288px right — exact React layout */
.site-header__nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
}

/* Left spacer — only at xl (1280px+) for full symmetric 3-column layout */
.site-header__nav-spacer {
    flex: 0 0 288px;
    display: none;
}

@media (min-width: 1280px) {
    .site-header__nav-spacer {
        display: block;
    }
}

/* Centered nav links */
.primary-nav {
    flex-grow: 1;
}

@media (min-width: 1280px) {
    .primary-nav {
        flex-grow: 0;
    }
}

/* Right actions: social + newsletter */
.site-header__actions {
    flex: 0 0 auto;
}

@media (min-width: 1280px) {
    .site-header__actions {
        flex: 0 0 288px;
    }
}

.primary-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tablet (768px–1023px): nav is now a drawer — gap rule not needed, but keep
   the lang-trigger compact since it still shows in the actions row */
@media (min-width: 768px) and (max-width: 1023px) {
    .lang-trigger span {
        display: none;
    }
    .lang-trigger {
        padding: 5px 8px;
    }
}

/* Medium desktop (1024px–1279px): comfortable gap, still no spacer */
@media (min-width: 1024px) and (max-width: 1279px) {
    .primary-nav__list {
        gap: 32px;
    }
}

.legal-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3vw, 38px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* React: text-[11px] font-bold tracking-widest (#5F6368) uppercase md:px-1 */
.primary-nav__list a {
    display: inline-block;
    position: relative;
    padding-block: 6px;
    padding-inline: 4px; /* md:px-1 */
    color: #5f6368;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em; /* tracking-widest */
    text-transform: uppercase;
    transition: color 200ms ease;
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a,
.primary-nav__list .current_page_ancestor > a {
    color: #ba9a7c;
}

/* animated active underline, matches React layoutId="activeNavHeaderBorder" */
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .current_page_item > a::after,
.primary-nav__list a:hover::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: #ba9a7c;
}

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* React: gap-3.5 = 14px in header */
.social-links {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.social-links a {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--color-muted);
    transition: color 200ms ease;
}

.social-links a:hover {
    color: var(--color-accent);
}

/* Footer social: h-9 w-9 rounded-full bg-[#313633] matches React */
.social-links--footer {
    gap: 12px;
}

.social-links--footer a {
    width: 36px;
    height: 36px;
    background: #313633;
    color: rgba(252, 250, 247, 0.8);
    transition: background 200ms ease, color 200ms ease;
}

/* React hover: hover:bg-[#E09283] */
.social-links--footer a:hover {
    background: #c5a880;
    color: #fcfaf7;
}

.icon {
    width: 18px;
    height: 18px;
}

/* React: Newsletter link — text-[#1F2421]→#1A1A1A border-[#1F2421]/60 */
.header-cta {
    padding: 0 0 2px;
    background: transparent;
    border-bottom: 1px solid rgba(26, 26, 26, 0.6); /* #1A1A1A at 60% */
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em; /* tracking-widest */
    text-transform: uppercase;
    transition: color 200ms ease, border-color 200ms ease;
}

.header-cta:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.mobile-menu-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    padding: 6px;
    cursor: pointer;
}

/* Hidden by default — only shown inside the mobile nav drawer */
.mobile-nav-subscribe {
    display: none;
}

.mobile-nav-policy,
.mobile-nav-footer {
    display: none;
}

/* Matches React: pt-10 sm:pt-16, pb-8 border-b mb-12, flex-col md:flex-row justify-between items-start md:items-end gap-6 */
.home-intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 32px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--color-line);
}

@media (min-width: 640px) {
    .home-intro {
        padding-top: 64px;
    }
}

@media (min-width: 768px) {
    .home-intro {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.home-intro__copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 672px;
}

.home-intro__text {
    font-family: var(--font-sans);
    text-align: left;
    max-width: 384px;
    width: 100%;  /* flex child — ensure max-width is the actual ceiling */
}

@media (min-width: 768px) {
    .home-intro__text {
        text-align: right;
    }
}

/* React homepage: text-3xl sm:text-4xl lg:text-5xl = 30/36/48px, font-light, tracking-tight, leading-snug */
.home-intro h1,
.page-hero h1,
.archive-header h1,
.not-found h1 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: clamp(1.875rem, 4.5vw, 3rem); /* 30px → 48px matching React text-3xl/4xl/5xl */
    font-weight: 400;
    font-optical-sizing: auto;
    letter-spacing: -0.025em; /* tracking-tight */
    line-height: 1.375; /* leading-snug */
}

/* React: text-xs (12px) font-light leading-relaxed #6F7275 */
.home-intro__text,
.section-heading > p,
.page-hero p,
.archive-description {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.75rem; /* 12px */
    font-weight: 300;
    font-style: italic;
    line-height: 1.625; /* leading-relaxed */
}

/* Matches React: lg:grid-cols-12 gap-10, main=7cols, sidebar=5cols */
.featured-story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: stretch;
    padding: 0 0 48px;
    margin-bottom: 48px;
}

@media (min-width: 1024px) {
    .featured-story {
        grid-template-columns: 7fr 5fr;
    }
}

/* Shared image container — post cards have border, featured story does NOT */
.post-card__image,
.single-article__image,
.editorial-image {
    display: block;      /* <a> is inline by default; aspect-ratio only works on block/flex */
    width: 100%;         /* fill the image-wrap column */
    overflow: hidden;
    background: var(--color-panel); /* #faf6f0 */
    border: 1px solid var(--color-line);
}

/* Product card image: React bg-[#FAF6F3] = slightly different from post card */
.product-card__image {
    overflow: hidden;
    background: #faf6f3;
    border: 1px solid var(--color-line);
}

/* Featured story: React uses no border, just bg-[#FAF6F0] overflow-hidden */
/* React: aspect-[16/10] mobile → aspect-[16/9] sm → h-full lg, min-h-[300px]/[420px] */
.featured-story__image {
    overflow: hidden;
    background: #faf6f0;
    border: none;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 300px;
}

@media (min-width: 640px) {
    .featured-story__image {
        aspect-ratio: 16 / 9;
        min-height: 420px;
    }
}

@media (min-width: 1024px) {
    .featured-story__image {
        aspect-ratio: auto;
        height: 100%;
        min-height: unset;
    }
}

.featured-story__image a {
    display: block;
    width: 100%;
    height: 100%;
}

.featured-story__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1400ms ease;
}

/* React: group-hover:scale-[1.025] */
.featured-story:hover .featured-story__image img,
.featured-story__image:hover img {
    transform: scale(1.025);
}

/* Right col: flex flex-col space-y-6 lg:pl-4 py-4 */
.featured-story__content {
    display: flex;
    flex-direction: column;
    gap: 24px;       /* space-y-6 = 24px */
    padding: 16px 0 16px 16px; /* py-4 + lg:pl-4 */
}

/* Shared image hover for cards */
.post-card__image img,
.editorial-image img,
.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms ease;
}

/* Contact panel: full-bleed image, no hover transform */
.contact-panel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.contact-panel:hover .contact-panel__image img {
    transform: scale(1.02);
}

.post-card__image:hover img,
.product-card__image:hover img {
    transform: scale(1.035);
}

/* font-optical-sizing: auto — matches React's unset opsz behavior */
.featured-story__content h2,
.section-heading h2,
.post-card__title,
.single-article h1,
.page-header h1,
.about-panel h2,
.product-card h2,
.contact-form-panel h2 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-weight: 400;
    font-optical-sizing: auto;
    letter-spacing: 0;
    line-height: 1.15;
}

/* React: text-4xl (36px) sm:text-4xl lg:text-[40px] — featured story title */
.featured-story__content h2 {
    font-size: clamp(2.25rem, 4vw, 2.5rem); /* 36px → 40px */
    letter-spacing: -0.025em; /* tracking-tight */
}

/* Featured story category: text-[#C5A880] text-[10px] font-bold tracking-[0.25em] uppercase */
.featured-story__content .eyebrow a {
    color: var(--color-accent-warm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 200ms ease;
}
.featured-story__content .eyebrow a:hover {
    color: var(--color-ink);
}

/* Excerpt: text-[#6F7275] text-xs sm:text-sm font-light leading-relaxed */
.featured-story__content p:not(.eyebrow) {
    color: var(--color-muted);
    font-size: clamp(0.75rem, 1.5vw, 0.875rem); /* 12–14px */
    font-weight: 300;
    line-height: 1.625;
}

/* Meta divider + layout */
.featured-story__meta,
.single-article__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid #f4efeb;
}

/* React: flex items-center gap-3 */
.single-article__meta-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* React: h-10 w-10 rounded-full border border-[#F4EFEB] */
.single-article__meta-author img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid #f4efeb !important;
    object-fit: cover;
    flex-shrink: 0;
}

/* React: text-xs font-semibold text-[#1F2421] */
.single-article__meta-author span {
    font-family: var(--font-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--color-ink) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    display: block !important;
}

.featured-story__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* React: rounded-full → 0px (overridden), 32×32, border #EAE6E1 */
.featured-story__meta img,
.single-article__meta img {
    border-radius: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-line);
    flex-shrink: 0;
}

/* "CURATOR" label: mono 8px tracking widest uppercase #8A8D90 */
.featured-story__meta span,
.single-article__meta span:first-child {
    display: block;
    color: var(--color-soft);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Author name: 10px font-bold tracking-wider uppercase #1A1A1A */
.featured-story__meta strong {
    display: block;
    color: var(--color-ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* "VIEW MORE" link: text-[#C5A880] hover:#1A1A1A 10px bold tracking-widest + border-b underline */
.featured-story__content .text-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent-warm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(197, 168, 128, 0.4);
    padding-bottom: 2px;
    transition: color 200ms ease, border-color 200ms ease;
}
.featured-story__content .text-link:hover {
    color: var(--color-ink);
    border-color: rgba(26, 26, 26, 0.4);
}

.category-section,
div.archive-shell,
.search-shell,
.page-shell,
.single-shell,
.about-shell,
.contact-shell,
.boutique-shell,
.not-found {
    padding-block: clamp(40px, 6vw, 72px);
}

/* Separator line between consecutive category sections */
.category-section + .category-section {
    border-top: 1px solid var(--color-line);
    padding-top: clamp(40px, 6vw, 72px);
}

.section-heading,
.archive-header,
.page-header {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    margin-bottom: 42px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-line);
}

/* React: text-2xl = 24px for section heading H3 */
.section-heading h2,
.archive-header h1,
.page-header h1 {
    font-size: 1.5rem; /* 24px */
}

/* Matches React: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-20 */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 48px;
    row-gap: 80px;
}

@media (min-width: 768px) {
    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .post-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================================
   POST CARD BASE
   ============================================================ */
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   PATTERN 0 — WIDE SPREAD (span 3, alternating image side)
   Matches React: col-span-3, flex-row gap-16, 55%/45%
   ============================================================ */
.post-card--wide {
    grid-column: span 3;
}

.post-card--wide .post-card__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

@media (min-width: 1024px) {
    .post-card--wide .post-card__inner {
        flex-direction: row;
        gap: 64px;
    }
    .post-card--wide.post-card--img-right .post-card__inner {
        flex-direction: row-reverse;
    }
}

/* Image side = 55% */
.post-card--wide .post-card__image-wrap {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .post-card--wide .post-card__image-wrap {
        width: 55%;
    }
}

/* Passe-partout offset shadow border */
.post-card--wide .post-card__image-wrap .post-card__offset-border {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(197, 168, 128, 0.2);
    transform: translate(14px, 14px);
    transition: transform 700ms ease-out;
    pointer-events: none;
    z-index: 0;
}

.post-card--wide:hover .post-card__offset-border {
    transform: translate(0, 0);
}

/* Main image: 16/10, inner border + padding (passe-partout) */
.post-card--wide .post-card__image {
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 10;
    background: #faf6f0;
    border: 1px solid var(--color-line);
    padding: 10px;
    overflow: hidden;
}

.post-card--wide .post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card--wide:hover .post-card__image img {
    transform: scale(1.045);
}

/* Gold tint overlay fades in on card hover */
.post-card--wide .post-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(197, 168, 128, 0.05);
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
    z-index: 2;
}
.post-card--wide:hover .post-card__image::after { opacity: 1; }

/* Text side = flex-grow */
.post-card--wide .post-card__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    text-align: left;
}

/* Category row in wide card — mono style */
/* React: 9px mono #C5A880 tracking-[0.25em] uppercase */
.post-card--wide .post-card__category {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--color-accent-warm);
    text-transform: uppercase;
}

/* React: text-2xl/text-3xl/text-[34px] = 24/30/34px, weight 300, tracking-tight */
.post-card--wide .post-card__title {
    margin: 0;
    color: #1a1a1a;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.125rem); /* 24–34px */
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.025em; /* tracking-tight */
}

.post-card--wide .post-card__title a {
    display: inline-block; /* ::after width:100% now spans widest title line, not just last */
    position: relative;
    padding-bottom: 6px;
    transition: color 500ms ease;
}

.post-card--wide .post-card__title a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-accent-warm);
    transition: width 500ms ease-out;
}

.post-card--wide:hover .post-card__title a::after {
    width: 100%;
}

.post-card--wide:hover .post-card__title a {
    color: var(--color-accent-warm);
}

.post-card--wide .post-card__excerpt {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 1.7;
    text-align: justify;
}

/* Author + VIEW MORE row at bottom of wide card — always inline */
.post-card--wide .post-card__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--color-line);
}

/* ============================================================
   PATTERN 1 — PARISIAN ARCH (span 1, centered, arch image)
   ============================================================ */
.post-card--arch {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding-bottom: 8px;
}

/* Arch image wrapper — 230px wide, offset border */
.post-card--arch .post-card__arch-wrap {
    position: relative;
    width: 100%;
    max-width: 230px;
    margin-inline: auto;
}

.post-card--arch .post-card__arch-wrap .post-card__offset-border {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(197, 168, 128, 0.3);
    border-radius: 9999px 9999px 0 0;
    transform: translate(6px, 6px);
    transition: transform 600ms ease-out;
    pointer-events: none;
}

.post-card--arch:hover .post-card__arch-wrap .post-card__offset-border {
    transform: translate(0, 0);
}

/* Arch frame: 4/5 aspect, rounded-t-full (NOT overridden — it's a div, not button/input)
   Matches React: aspect-[4/5] rounded-t-full border #EAE6E1 p-1.5 z-0 */
.post-card--arch .post-card__image {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 9999px 9999px 0 0; /* rounded-t-full = stays on divs */
    padding: 6px;
    overflow: hidden;
    transition: border-color 500ms ease;
    z-index: 1;
}

.post-card--arch:hover .post-card__image {
    border-color: rgba(197, 168, 128, 0.4);
}

.post-card--arch .post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9999px 9999px 0 0; /* inner image also curved */
    transition: transform 1800ms ease-out;
}

.post-card--arch:hover .post-card__image img {
    transform: scale(1.05);
}

/* Black tint overlay fades in on card hover */
.post-card--arch .post-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.04);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
    z-index: 2;
}
.post-card--arch:hover .post-card__image::after { opacity: 1; }

/* Category with decorative lines — "— FASHION —" */
.post-card--arch .post-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-inline: 8px;
    flex-grow: 1;
}

.post-card--arch .post-card__category-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-card--arch .post-card__category-line__dash {
    display: block;
    height: 1px;
    width: 16px;
    background: rgba(197, 168, 128, 0.3);
}

/* React: 10px mono medium tracking-[0.25em] #C5A880 uppercase */
.post-card--arch .post-card__category {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.25em;
    color: var(--color-accent-warm);
    text-transform: uppercase;
}

/* React: Serif 20–21px italic #1A1A1A "quoted" — line-clamp-2 */
.post-card--arch .post-card__title {
    margin: 0;
    color: #1a1a1a;
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.6vw, 1.3125rem); /* 18.4–21px */
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    transition: color 300ms ease;
}

.post-card--arch .post-card__title a {
    transition: color 300ms ease;
}

.post-card--arch:hover .post-card__title,
.post-card--arch:hover .post-card__title a {
    color: var(--color-accent-warm);
}

.post-card--arch .post-card__excerpt {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* VIEW MORE at bottom */
.post-card--arch .post-card__cta {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(234, 230, 225, 0.5);
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ============================================================
   PATTERN 2 — PASSE-PARTOUT FRAMED (span 1, panel bg)
   ============================================================ */
/* React: bg-[#FAF6F0] border border-[#EAE6E1]/60 p-4 rounded-sm */
.post-card--framed {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 1px solid rgba(234, 230, 225, 0.6);
    padding: 16px;
    border-radius: 2px; /* rounded-sm on div — not overridden */
    transition: border-color 500ms ease, box-shadow 500ms ease;
}

.post-card--framed:hover {
    border-color: rgba(197, 168, 128, 0.5);
    box-shadow: 0 12px 24px rgba(197, 168, 128, 0.04);
}

/* Double frame: offset gold border behind the image */
.post-card--framed .post-card__frame-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.post-card--framed .post-card__frame-wrap .post-card__offset-border {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(197, 168, 128, 0.2);
    transform: translate(4px, 4px);
    pointer-events: none;
}

.post-card--framed .post-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: transparent;
    border: 1px solid var(--color-line);
    overflow: hidden;
    z-index: 1;
}

.post-card--framed .post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.post-card--framed:hover .post-card__image img {
    transform: scale(1.04);
}

.post-card--framed .post-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

/* React: 9px bold mono #C5A880 tracking-[0.28em] uppercase */
.post-card--framed .post-card__category {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--color-accent-warm);
    text-transform: uppercase;
}

/* React: Serif 18–19px weight 300 */
.post-card--framed .post-card__title {
    margin: 0;
    color: #1a1a1a;
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1.5vw, 1.1875rem); /* 18–19px */
    font-weight: 400;
    line-height: 1.35;
    transition: color 300ms ease;
}

.post-card--framed .post-card__title a {
    transition: color 300ms ease;
}

.post-card--framed:hover .post-card__title,
.post-card--framed:hover .post-card__title a {
    color: var(--color-accent-warm);
}

.post-card--framed .post-card__excerpt {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer row: avatar + VIEW MORE */
.post-card--framed .post-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(234, 230, 225, 0.5);
    font-size: 0.6rem;
}

/* ============================================================
   PATTERN 3 — TYPOGRAPHIC QUOTE SPOTLIGHT (span 1)
   ============================================================ */
.post-card--quote {
    grid-column: span 1;
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 1px solid rgba(197, 168, 128, 0.3);
    padding: 22px;
    transition: border-color 500ms ease, box-shadow 500ms ease;
}

.post-card--quote:hover {
    border-color: var(--color-accent-warm);
    box-shadow: 0 12px 24px rgba(197, 168, 128, 0.06);
}

/* Decorative large quote mark — top-right */
.post-card__quote-mark {
    position: absolute;
    top: 12px;
    right: 20px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 3rem;
    line-height: 1;
    color: rgba(197, 168, 128, 0.15);
    pointer-events: none;
    user-select: none;
}

.post-card--quote .post-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* React: 10px semibold #8A8D90 (muted) tracking-[0.28em] uppercase */
.post-card--quote .post-card__category {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--color-soft); /* #8a8d90 — NOT accent in quote card */
    text-transform: uppercase;
}

/* 16/10 image inside quote card */
.post-card--quote .post-card__image--landscape {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: transparent;
    border: 1px solid var(--color-line);
    overflow: hidden;
    position: relative;
}

.post-card--quote .post-card__image--landscape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1500ms ease-out;
}

.post-card--quote:hover .post-card__image--landscape img {
    transform: scale(1.05);
}

/* Black tint overlay fades in on card hover */
.post-card--quote .post-card__image--landscape::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.04);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
    z-index: 2;
}
.post-card--quote:hover .post-card__image--landscape::after { opacity: 1; }

/* React: Serif 20px italic #1A1A1A weight 300 */
.post-card--quote .post-card__title--italic {
    margin: 0;
    color: #1a1a1a;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px */
    font-weight: 300;
    font-style: italic;
    line-height: 1.35;
    transition: color 300ms ease;
}

.post-card--quote .post-card__title--italic a {
    transition: color 300ms ease;
}

.post-card--quote:hover .post-card__title--italic,
.post-card--quote:hover .post-card__title--italic a {
    color: var(--color-accent-warm);
}

/* Excerpt with left gold border */
.post-card__excerpt--quoted {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.65;
    padding-left: 12px;
    border-left: 2px solid rgba(197, 168, 128, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card--quote .post-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(234, 230, 225, 0.5);
    font-size: 0.6rem;
}

/* ============================================================
   PATTERN 4 — HORIZON SPLIT (span 2, horizontal image+text)
   ============================================================ */
.post-card--split {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    background: #faf6f0;
    border: 1px solid rgba(234, 230, 225, 0.6);
    transition: border-color 400ms ease;
}

@media (min-width: 640px) {
    .post-card--split {
        flex-direction: row;
    }
}

.post-card--split:hover {
    border-color: rgba(197, 168, 128, 0.4);
}

.post-card--split .post-card__split-image-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

@media (min-width: 640px) {
    .post-card--split .post-card__split-image-wrap {
        width: 45%;
    }
}

.post-card--split .post-card__image {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@media (min-width: 640px) {
    .post-card--split .post-card__image {
        aspect-ratio: unset;
        min-height: 180px;
    }
}

.post-card--split .post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1800ms ease-out;
}

.post-card--split:hover .post-card__image img {
    transform: scale(1.04);
}

.post-card--split .post-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    flex-grow: 1;
    justify-content: center;
}

/* React: 9px mono bold #C5A880 tracking-[0.2em] uppercase */
.post-card--split .post-card__category {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--color-accent-warm);
    text-transform: uppercase;
}

/* React: Serif text-xl (20px) weight 300 */
.post-card--split .post-card__title {
    margin: 0;
    color: #1a1a1a;
    font-family: var(--font-serif);
    font-size: 1.25rem; /* 20px = text-xl */
    font-weight: 400;
    line-height: 1.35;
    transition: color 300ms ease;
}

.post-card--split .post-card__title a {
    transition: color 300ms ease;
}

.post-card--split:hover .post-card__title,
.post-card--split:hover .post-card__title a {
    color: var(--color-accent-warm);
}

.post-card--split .post-card__excerpt {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card--split .post-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(234, 230, 225, 0.5);
    font-size: 0.6rem;
}

/* ============================================================
   SHARED CARD ELEMENTS
   ============================================================ */
.post-card__image,
.post-card__image--landscape {
    overflow: hidden;
}

.post-card__image img,
.post-card__image--landscape img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* category labels: text-[#C5A880] = --color-accent-warm (#c5a880) */
.post-card__category {
    color: var(--color-accent-warm);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.post-card__title {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 400;
    line-height: 1.25;
    color: #1a1a1a;
}

.post-card__excerpt {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.65;
}

.post-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--color-soft);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.navigation.pagination {
    margin-top: 52px;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.page-numbers {
    display: inline-grid;
    min-width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 0.78rem;
}

.page-numbers.current,
.page-numbers:hover {
    background: var(--color-ink);
    color: var(--color-surface);
}

.page-numbers.prev,
.page-numbers.next {
    padding-inline: 16px;
    min-width: auto;
}

.single-shell {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.85fr);
    gap: clamp(32px, 5vw, 70px);
    align-items: start;
}

/* React: bg-white p-6 sm:p-10 rounded-3xl→0 border border-[#F4EFEB] shadow-sm */
.single-article {
    padding: clamp(24px, 4vw, 44px);
    background: #fff;
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-sm);
}

.single-article__header {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 34px;
}

/* React: text-3xl sm:text-4xl lg:text-5xl = 30px / 36px / 48px font-bold leading-tight */
.single-article h1 {
    font-size: clamp(1.875rem, 3.5vw, 3rem); /* 30px → 48px */
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.single-article__image {
    margin: 0 0 36px;
    aspect-ratio: 16 / 9;
}

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

.entry-content {
    color: var(--color-text);
}

.entry-content > *:first-child {
    margin-top: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.2;
}

/* React: text-2xl sm:text-3xl font-bold — 24px → 30px */
.entry-content h2 {
    margin-top: 2.4em;
    margin-bottom: 1.1em;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
}

/* React: text-xl font-bold (user: font-weight 600) — 20px */
.entry-content h3 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.25rem;
    font-weight: 600;
}

/* React: text-sm sm:text-base font-light — 14px → 16px */
.entry-content p,
.entry-content li {
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 300;
    line-height: 1.625;
    color: #3a3f41;
}

.entry-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Legal pages (Privacy Policy, Terms, Cookies) — page.php → .page-shell ──
   React: max-w-3xl py-16, article space-y-12,
          h1 text-4xl/5xl font-bold tracking-tight leading-tight #1F2421,
          header border-b pb-8, sections space-y-8, h2 text-lg/xl font-medium,
          body text text-sm/base font-light #3A3F41 leading-relaxed */

/* Container: max-w-3xl = 768px, generous vertical padding */
.page-shell {
    padding-top: 64px;
    padding-bottom: 80px;
}

/* Page title — React: text-4xl sm:text-5xl font-bold text-[#1F2421] tracking-tight leading-tight */
.page-shell .page-header h1 {
    font-size: clamp(2.25rem, 5vw, 3rem) !important; /* 36px → 48px */
    font-weight: 700 !important;
    font-family: var(--font-serif) !important;
    color: #1f2421 !important;
    letter-spacing: -0.025em !important; /* tracking-tight */
    line-height: 1.15 !important;        /* leading-tight */
    margin: 0 !important;
}

/* Header bottom border + spacing — React: border-b border-[#F4EFEB] pb-8 */
.page-shell .page-header {
    display: block;
    border-bottom: 1px solid #f4efeb;
    padding-bottom: 32px;
    margin-bottom: 48px; /* space-y-12 = 48px gap to body */
}

/* Body text color — React: text-[#3A3F41] */
.page-shell .entry-content {
    color: #3a3f41;
}

/* Section h2 — React: font-serif text-lg sm:text-xl font-medium text-[#1F2421] */
.page-shell .entry-content h2 {
    font-size: clamp(1.125rem, 2vw, 1.25rem) !important; /* 18px → 20px */
    font-weight: 500 !important;
    color: #1f2421 !important;
    margin-top: 32px !important;   /* space-y-8 = 32px between sections */
    margin-bottom: 12px !important; /* space-y-3 = 12px before section text */
    line-height: 1.3 !important;
}

/* Intro + body paragraphs — React: text-sm sm:text-base font-light leading-relaxed */
.page-shell .entry-content p,
.page-shell .entry-content li {
    font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14px → 16px */
    font-weight: 300;
    line-height: 1.625; /* leading-relaxed */
    color: #3a3f41;
    margin-top: 0;
    margin-bottom: 12px; /* space-y-3 between paragraphs */
}

/* Lists — React: list-disc pl-5 space-y-2 */
.page-shell .entry-content ul {
    list-style: disc;
    padding-left: 1.25rem; /* pl-5 */
    display: flex;
    flex-direction: column;
    gap: 8px; /* space-y-2 */
    margin: 8px 0; /* my-2 */
}
.page-shell .entry-content li {
    padding-left: 4px; /* pl-1 */
    margin-bottom: 0;
}

.entry-content blockquote {
    margin: 32px 0;
    padding: 22px 28px;
    background: var(--color-panel);
    border-left: 3px solid var(--color-accent);
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: 1.25rem;
}

.sidebar-widget,
.contact-form-panel,
.promo-panel {
    margin-top: 44px;
    padding: 28px;
    background: var(--color-panel);
    border: 1px solid var(--color-line);
}

/* Manifesto panel: gold border, surface bg — matches React border-[#BA9A7C]/20 */
.about-panel {
    padding: clamp(28px, 5vw, 40px);
    background: var(--color-surface); /* #FCFAF7 ✓ */
    border: 1px solid rgba(186, 154, 124, 0.2);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

/* Manifesto panel eyebrow — React: text-[10px] font-bold tracking-[0.25em] text-[#BA9A7C] uppercase */
.about-panel .eyebrow {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.25em !important;
    margin-bottom: 16px !important; /* mb-4 = 16px */
    margin-top: 0 !important;
}

/* Manifesto panel h3 — React: font-serif text-2xl font-light text-[#1F2421] leading-snug mb-6 */
.about-panel h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;    /* text-2xl = 24px */
    font-weight: 300;     /* font-light */
    color: #1f2421;
    line-height: 1.375;   /* leading-snug */
    margin: 0 0 24px;     /* mb-6 = 24px */
    font-optical-sizing: none;
    font-variation-settings: 'opsz' 14;
}

/* Manifesto panel p — React: text-sm font-light text-[#5F6368] leading-relaxed */
.about-panel > p,
.about-panel p:last-child {
    font-size: 0.875rem;  /* text-sm = 14px */
    font-weight: 300;
    color: #5f6368;
    line-height: 1.625;
    margin: 0;
}

.author-bio {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    /* React: mt-12 p-6 bg-[#FCFAF7] border border-[#F4EFEB] */
    margin-top: 44px;
    padding: 24px;
    background: #fcfaf7;
    border: 1px solid #f4efeb;
}

/* React: h-16 w-16 rounded-2xl object-cover shrink-0 border border-[#F4EFEB] */
.author-bio img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    border: 1px solid #f4efeb !important;
    object-fit: cover;
    flex-shrink: 0;
}

/* React: text-xs font-semibold text-[#1F2421] uppercase */
.author-bio .eyebrow {
    font-size: 0.75rem !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--color-ink) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 6px !important;
}

/* React: font-fraunces text-base font-bold text-[#E09283] */
.author-bio h2 {
    margin: 0 0 8px;
    font-family: var(--font-serif);
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #ba9a7c !important;
}

/* React: text-xs text-[#5F6368] leading-relaxed font-light */
.author-bio > div > p:last-child {
    margin: 0;
    font-size: 0.75rem;
    color: #5f6368;
    font-weight: 300;
    line-height: 1.625;
}

.author-bio h2,
.sidebar-widget h2,
.sidebar-widget__title {
    margin: 0 0 12px;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: 1.125rem; /* text-lg = 18px — React: font-fraunces text-lg font-bold */
    font-weight: 700;
}

.sidebar {
    position: sticky;
    top: 136px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* React: bg-white p-6 rounded-2.5xl border border-[#F4EFEB] shadow-sm */
.sidebar-widget {
    margin-top: 0;
    padding: 24px;
    background: #fcfaf7;
    border: 1px solid #f4efeb;
    border-radius: 0;
    box-shadow: var(--shadow-sm);
}

/* React sidebar icon: h-10 w-10 rounded-lg bg-[#FAF0ED] text-[#E09283] */
.sidebar-newsletter__icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    margin-bottom: 16px;
    background: #faf0ed;
    border-radius: 8px;
    color: #ba9a7c;
}

/* Modal icon — no background, colour from parent */
.newsletter-modal__icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    margin-bottom: 16px;
    background: transparent;
    color: #ba9a7c;
    margin-inline: auto;
}

.newsletter-modal__icon .icon {
    width: 30px;
    height: 30px;
}

/* Sidebar newsletter description */
.sidebar-newsletter > p {
    margin: 0 0 4px;
    font-size: 0.75rem;
    color: #5f6368;
    font-weight: 300;
    line-height: 1.625;
}

/* Sidebar newsletter inline form */
.sidebar-newsletter__form {
    margin-top: 0;
}

/* Reuse newsletter-form__fields grid — sidebar variant */
.sidebar-newsletter .newsletter-form__fields {
    display: grid;
    gap: 8px;
    padding-top: 10px;
}

/* React: border border-[#E8DFD8] rounded-lg px-4.5 py-3 text-xs */
.sidebar-newsletter__input {
    width: 100%;
    border: 1px solid #e8dfd8;
    border-radius: 8px;
    background: #fff;
    padding: 12px 18px;
    font-size: 0.75rem;
    color: var(--color-ink);
    outline: none;
    transition: border-color 0.2s;
}

.sidebar-newsletter__input:focus {
    border-color: #ba9a7c;
}

.sidebar-newsletter__input::placeholder {
    color: #a09890;
}

/* React: bg-[#1F2421] hover:bg-black text-[#FCFAF7] text-[10px] font-semibold tracking-wider uppercase py-3 rounded-lg */
.sidebar-newsletter .button--full {
    display: block;
    width: 100%;
    background: #c5a16f;
    color: #fcfaf7;
    font-size: 0.625rem; /* 10px */
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-newsletter .button--full:hover {
    background: #b0916e;
}

/* Sidebar success state */
.sidebar-newsletter__success.newsletter-form__success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #fcfaf7;
    border-radius: 8px;
    color: #ba9a7c;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Recent Articles panel header separator */
.sidebar-recent__header {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f4efeb;
}

.sidebar-recent__header h2 {
    margin: 0;
}

/* Posts list */
.sidebar-posts {
    display: grid;
    gap: 4px;
}

/* React: flex gap-4.5 items-center p-1.5 rounded-xl hover:bg-[#FCFAF7] */
.sidebar-post {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px;
    border-radius: 12px;
    color: var(--color-ink);
    text-decoration: none;
    transition: background 0.2s;
}

.sidebar-post:hover {
    background: #fcfaf7;
}

/* React: h-16 w-16 rounded-lg overflow-hidden shrink-0 */
.sidebar-post__thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #faf0ed;
}

.sidebar-post__thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.sidebar-post__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* React: text-[9px] font-bold text-[#E09283] uppercase tracking-wider */
.sidebar-post__category {
    font-size: 9px;
    font-weight: 700;
    color: #ba9a7c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

/* React: font-fraunces text-xs font-bold text-[#1F2421] line-clamp-2 leading-snug */
.sidebar-post__title {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.375;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.sidebar-post:hover .sidebar-post__title {
    color: #ba9a7c;
}

.search-form {
    display: flex;
    gap: 10px;
    width: min(100%, 560px);
}

.search-field,
.contact-form-panel input,
.contact-form-panel textarea {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: 0;
    background: #fff;
    color: var(--color-ink);
    padding: 13px 15px;
}

.newsletter-form input {
    width: 100%;
    border: 1px solid #e8dfd8; /* React: border-[#E8DFD8] */
    border-radius: 0;
    background: #fff;
    color: var(--color-ink);
    padding: 12px 20px;       /* React: py-3 px-5 */
    font-size: 0.75rem;       /* React: text-xs = 12px */
}

.search-field:focus,
.contact-form-panel input:focus,
.contact-form-panel textarea:focus {
    outline: 1px solid #ba9a7c;
    border-color: #ba9a7c;
}

/* React: focus:border-[#BA9A7C] focus:outline-none — border only, no ring */
.newsletter-form input:focus {
    outline: none;
    border-color: #ba9a7c;
}

.page-hero--centered,
/* React: max-w-4xl = 896px centered */
.about-hero,
.not-found {
    max-width: 896px;
    margin-inline: auto;
    text-align: center;
}

/* About + boutique: text-4xl/5xl/6xl = 36/48/60px */
.about-hero h1,
.boutique-shell h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem); /* 36px → 60px */
    font-family: var(--font-serif);
    color: #1f2421;
    margin: 0;
    font-weight: 300;               /* React: font-light */
    font-optical-sizing: none;      /* user-specified: none for correct glyph form */
    font-variation-settings: 'opsz' 0;
    letter-spacing: -0.025em; /* tracking-tight */
    line-height: 1.1;
}
/* Boutique h1 weight 400 per React (about-hero uses 300 from shared rule) */
.boutique-shell h1 {
    font-weight: 400;
}

/* Italic accent span inside h1 — React: font-serif italic text-[#BA9A7C] */
.about-hero h1 em,
.about-hero h1 i,
.home-intro h1 em,
.home-intro h1 i,
.boutique-shell h1 em,
.boutique-shell h1 i {
    font-style: italic;
    color: var(--color-accent); /* #BA9A7C */
}

/* ── About hero container: space-y-6 = 24px gap between eyebrow/h1/quote/divider ── */
.about-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px; /* space-y-6 */
    padding-bottom: 64px; /* mb-16 */
}

/* About hero eyebrow — React: text-xs tracking-[0.4em] font-semibold text-[#BA9A7C] */
.about-hero .eyebrow {
    color: var(--color-accent);  /* #BA9A7C */
    font-size: 0.75rem;          /* text-xs = 12px */
    font-weight: 600;            /* font-semibold */
    letter-spacing: 0.4em;       /* tracking-[0.4em] */
    margin: 0;
}

/* Quote — React: font-serif text-lg sm:text-xl text-[#5F6368] font-light italic leading-relaxed max-w-2xl */
.about-hero__quote {
    font-family: var(--font-serif) !important;
    font-size: clamp(1.125rem, 2vw, 1.25rem) !important; /* 18px → 20px */
    font-weight: 300 !important;
    font-style: italic !important;
    color: var(--color-muted) !important;
    line-height: 1.625 !important;
    max-width: 672px;  /* max-w-2xl */
    margin: 0 !important;
}

.about-hero__divider {
    width: 80px;
    height: 1px;
    margin: 28px auto 0;
    background: rgba(186, 154, 124, 0.4);
}

.about-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 6vw, 72px);
    margin-top: 72px;
    align-items: start;
}

/* React: grid lg:grid-cols-12, 5/7 split, overflow-hidden (image bleeds), no inner gap */
.contact-layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
    margin-top: 64px;
    align-items: stretch;
}

.about-manifesto {
    position: sticky;
    top: 130px;
}

.editorial-image {
    margin: 28px 0 0;
    padding: 6px;
}

.editorial-image--portrait {
    aspect-ratio: 3 / 4;
}

.editorial-image--landscape {
    aspect-ratio: 16 / 9;
}

.editorial-image figcaption {
    margin-top: 10px;
    color: var(--color-soft);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}

.about-story {
    color: #5f6368;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 200;
    line-height: 1.625;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* First paragraph — exact user-specified CSS */
.about-story p:first-child {
    color: #1a1a1a !important;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.625;
    font-optical-sizing: none;
    font-variation-settings: 'opsz' 30;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 72px;
    padding-block: 46px;
    border-top: 1px solid rgba(197, 168, 128, 0.35);
    border-bottom: 1px solid rgba(197, 168, 128, 0.35);
}

.pillar-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pillar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent; /* no background circle */
    margin-bottom: 4px;
    flex-shrink: 0;
}

.pillar-icon svg {
    width: 20px;   /* h-5 w-5 = 20px */
    height: 20px;
}

.pillar-icon--rose,
.pillar-icon--gold { color: #c5a16f; } /* warm gold, no separate rose/gold split */

/* React: font-serif text-lg font-light text-[#1F2421] */
.pillar-card h2 {
    margin: 0;
    color: #1f2421;
    font-family: var(--font-serif);
    font-size: 1.125rem; /* text-lg = 18px */
    font-weight: 300;    /* font-light */
    font-optical-sizing: none;
    font-variation-settings: 'opsz' 14;
}

/* React: text-xs text-[#5F6368] font-light leading-relaxed */
.pillar-card p {
    margin: 0;
    color: #5f6368;
    font-size: 0.75rem;  /* text-xs = 12px */
    font-weight: 300;
    line-height: 1.625;
}

/* ============================================================
   TRUSTPILOT BLOCK — matches React bg-[#181C1A] card
   ============================================================ */
.trustpilot-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #181c1a;
    border: 1px solid rgba(49, 54, 51, 0.5);
    border-radius: 0;
    padding: 16px;
    margin-bottom: 20px;
    max-width: 320px; /* prevent stretching on tablet/mobile */
}

.trustpilot-block__left {
    flex: 1;
}

.trustpilot-block__stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 4px;
}

/* Green square with ★ — matches React rounded-sm */
.trustpilot-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #00b67a;
    border-radius: 2px; /* rounded-sm */
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.trustpilot-block__label {
    margin: 0 0 2px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.trustpilot-block__rating {
    margin: 0;
    color: rgba(160, 165, 162, 1);
    font-size: 0.625rem;
    font-weight: 300;
}

.trustpilot-block__right {
    text-align: right;
    flex-shrink: 0;
}

.trustpilot-block__brand {
    display: block;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.trustpilot-block__excellent {
    display: block;
    color: #00b67a;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* React: bg-white border border-[#F4EFEB] shadow-sm overflow-hidden */
.contact-layout {
    background: #fff;
    border: 1px solid #eae6e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* ── Left image panel ── */
.contact-panel {
    position: relative;
    min-height: 480px; /* fallback before grid stretches it */
    overflow: hidden;
    background: #1a1a1a;
    color: #fff;
}

/* React: opacity-90 */
.contact-panel__image {
    position: absolute;
    inset: 0;
    border: 0;
    opacity: 0.9;
}

/* React: absolute inset-0 bg-[#1F2421]/65 mix-blend-multiply */
.contact-panel__overlay {
    position: absolute;
    inset: 0;
    background: rgba(31, 36, 33, 0.65);
    mix-blend-mode: multiply;
    z-index: 1;
}

/* Content fills the full panel so contact info is always pinned to the bottom */
.contact-panel__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 5vw, 48px);
    gap: 32px;
}

/* React: text-xs font-semibold uppercase tracking-[0.2em] text-[#E09283] → #C5A16F */
.contact-panel__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #c5a16f;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* React: font-fraunces text-2xl font-bold text-white */
.contact-panel h2 {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    font-optical-sizing: none;
    font-variation-settings: 'opsz' 14;
    line-height: 1.2;
}

/* React: text-xs text-[#E8DFD8] leading-relaxed font-light max-w-xs */
.contact-panel__desc {
    margin: 0;
    color: #e8dfd8;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.625;
    max-width: 320px;
}

/* React: space-y-4 pt-10, each row flex items-center gap-3 text-white/90 */
.contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    letter-spacing: 0.025em;
}

.contact-list li a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.contact-list li a:hover {
    color: #fff;
}

/* React: h-4 w-4 text-[#E09283] → #C5A16F */
.contact-list__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #c5a16f;
}

/* ── Right form panel ── */
.contact-form-panel {
    margin: 0;
    background: #fff;
    border: 0;
    box-shadow: none;
    padding: clamp(28px, 5vw, 48px);
}

/* React: space-y-1 — heading + description stacked */
.contact-form-panel__intro {
    margin-bottom: 24px;
}

/* React: font-fraunces text-2xl font-bold */
.contact-form-panel h2 {
    font-size: 1.5rem;
    font-weight: 700;
    font-optical-sizing: none;
    font-variation-settings: 'opsz' 14;
    margin: 0 0 4px;
}

/* React: text-xs text-[#5F6368] font-light */
.contact-form-panel__intro > p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-muted);
    font-weight: 300;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 42px);
    margin-top: 56px;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.product-card__image {
    aspect-ratio: 3 / 4;
}

.product-card__body {
    display: grid;
    gap: 9px;
}

/* React: Fraunces 16px bold #1F2421(→#1A1A1A) hover:#BA9A7C */
.product-card h2 {
    font-size: 1rem; /* 16px */
    font-weight: 700;
    transition: color 200ms ease;
}
.product-card:hover h2 {
    color: var(--color-accent);
}

/* React: 12px mono medium #5F6368 (→#6F7275) */
.product-card__price {
    margin: 0;
    color: var(--color-muted); /* #6f7275 — NOT accent gold */
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
}

/* React: 11px #808385 weight 300 */
.product-card ul,
.product-card__description {
    margin: 8px 0 0;
    padding-left: 0;
    list-style: none;
    color: #808385;
    font-size: 11px;
    font-weight: 300;
}

.promo-panel {
    margin-top: 72px;
}

.empty-state {
    max-width: 620px;
    margin: 48px auto;
    padding: 42px;
    border: 1px dashed var(--color-line);
    color: var(--color-muted);
    text-align: center;
}

.empty-state h2 {
    margin: 0 0 8px;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-weight: 400;
}

.empty-state--small {
    max-width: none;
    margin: 20px 0 0;
    padding: 22px;
}

/* ============================================================
   SITE FOOTER — matches React bg-[#151917] pt-16 pb-8
   ============================================================ */
.site-footer {
    background: #151917;
    color: rgba(252, 250, 247, 0.8);
    padding: 64px 0 32px;
    border-top: 1px solid #262c29;
}

.site-footer__inner {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
}

/* React: grid-cols-1 sm:grid-cols-2 md:grid-cols-12 gap-10 md:gap-8
   col-span proportions: brand=4, pages=2, categories=3, social=3 */
/* React: pb-12 border-b with editorial theme border #262C29 */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid #262c29;
}

@media (min-width: 640px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (min-width: 768px) {
    .site-footer__grid {
        /* 4:3:2:3 — wider pages column, tighter divisions */
        grid-template-columns: 4fr 3fr 2fr 3fr;
        gap: 32px;
    }
}

/* Footer wordmark: text-lg sm:text-xl font-light tracking-[0.25em] white */
.site-footer__logo {
    display: inline-block;
    margin-bottom: 20px;
    text-align: left;
    font-family: var(--font-serif);
    font-weight: 300;
    line-height: 1.1;
}

.site-footer__logo .wordmark {
    color: #fff;
    font-size: clamp(1.125rem, 2vw, 1.25rem); /* text-lg / text-xl = 18-20px */
    font-optical-sizing: auto;
    gap: 6px;
    padding-left: 0;
}

.site-footer__logo .wordmark__amp {
    color: #ba9a7c;
    font-style: italic;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    font-weight: 400;
    font-optical-sizing: auto;      /* footer size is small → auto already picks the simple & form */
    font-variation-settings: normal; /* reset so auto opsz drives the axis, not our header override */
    margin-inline: -2px;
}

.site-footer__logo:hover .wordmark {
    color: #ba9a7c;
}

.site-footer p,
.site-footer a {
    color: rgba(252, 250, 247, 0.8);
}

/* React: text-xs font-semibold tracking-wider text-[#A0A5A2] uppercase */
.site-footer h2 {
    margin: 0 0 16px;
    color: #a0a5a2;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Footer menu: vertical list, space-y-2.5 */
.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* wp_page_menu() fallback wraps in a <div class="footer-menu"><ul> — style the inner ul too */
.footer-menu ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li a,
.footer-menu li button {
    color: rgba(252, 250, 247, 0.8);
    font-size: 0.875rem;
    font-weight: 300;
    transition: color 200ms ease;
}

.footer-menu li a:hover,
.footer-menu li button:hover {
    color: #e09283;
}

/* "All Articles →" — gold + semibold, matches React text-[#BA9A7C] font-semibold */
.site-footer .footer-menu__all-link,
a.footer-menu__all-link {
    display: inline-block;
    margin-top: 10px;
    color: #ba9a7c !important; /* override .site-footer a general rule */
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 200ms ease;
}

.site-footer .footer-menu__all-link:hover,
a.footer-menu__all-link:hover {
    color: #fcfaf7 !important;
}

/* Footer brand description text */
.site-footer__brand p {
    color: #a0a5a2;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.65;
    max-width: 384px;
}

/* Social wrap: space-y-3 */
.site-footer__social-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer__social-wrap p {
    color: #a0a5a2;
    font-size: 0.75rem;
    font-weight: 300;
    margin: 0;
}

/* Footer bottom: copyright only, React pt-8 text-xs text-[#828885] */
.site-footer__bottom {
    padding-top: 32px;
    color: #828885;
    font-size: 0.75rem;
    font-weight: 300;
}

.newsletter-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    place-items: center;
    padding: 20px;
}

.newsletter-modal.is-open {
    display: grid;
}

.newsletter-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 36, 33, 0.64);
    backdrop-filter: blur(8px);
}

.newsletter-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    padding: 34px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.newsletter-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--color-muted);
}

.newsletter-modal__icon {
    margin-inline: auto;
}

.newsletter-modal h2 {
    margin: 0 0 8px;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: 1.5rem; /* text-2xl = 24px */
    font-weight: 400;
    font-optical-sizing: auto; /* let browser match opsz to rendered size — avoids wavy small-text letterforms */
}

/* React: mt-2 text-xs text-[#5F6368] leading-relaxed font-light */
.newsletter-modal__panel > p {
    margin: 8px 0 0;
    color: #5f6368;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.625;
}

.newsletter-form {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

/* React: space-y-3 = 12px gap between input / button / note */
.newsletter-form__fields {
    display: grid;
    gap: 12px;
}

/* React: text-[9px] text-[#8A8D90] font-light leading-normal */
.newsletter-form__note {
    margin: 0;
    color: #8a8d90;
    font-size: 0.5625rem; /* 9px */
    font-weight: 300;
    line-height: normal;
}

/* Prevent fields/success from showing when hidden attribute is set */
.newsletter-form__fields[hidden],
.newsletter-form__success[hidden] {
    display: none !important;
}

/* React: mt-6 p-4 bg-[#FAF0ED]/60 text-[#BA9A7C] flex items-center justify-center gap-2 font-medium text-xs */
.newsletter-form__success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 16px;
    background: rgba(250, 240, 237, 0.6);
    color: #ba9a7c;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Mobile/tablet nav: hamburger drawer below 1024px */
@media (max-width: 1023px) {

    .mobile-menu-toggle {
        display: inline-grid;
        place-items: center;
    }

    /* On mobile: actions fills the full nav row width and right-aligns */
    .site-header__actions {
        flex: 1;
        gap: 10px;
    }

    .site-header__actions .social-links a {
        padding: 6px;
    }

    /* Social links: smaller gap on mobile */
    .site-header__actions .social-links {
        gap: 6px;
    }

    /* Nav spacer: hidden on mobile — full width for actions row */
    .site-header__nav-spacer {
        display: none;
    }

    /* Primary nav becomes a full-width drawer */
    .primary-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        background: var(--color-surface);
        border-top: 1px solid var(--color-line);
        border-bottom: 1px solid var(--color-line);
        z-index: 50;
    }

    .primary-nav.is-open {
        display: block;
    }

    /* Mobile nav list: full-width stacked items, React px-4 pt-4 pb-6 space-y-3 */
    .primary-nav__list {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 16px 0 24px;
        list-style: none;
        justify-content: stretch;
        align-items: stretch;
        text-align: left;
    }

    /* Mobile nav items: block full-width, py-2.5 px-4, React font-semibold tracking-widest */
    .primary-nav__list a {
        display: block;
        width: 100%;
        padding: 10px 16px;
        font-size: 0.75rem;   /* text-xs = 12px */
        font-weight: 600;     /* font-semibold */
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-align: left;
        color: #5f6368;
        transition: background 150ms ease, color 150ms ease;
    }

    /* Hover: React hover:bg-[#FAF0ED]/10 */
    .primary-nav__list a:hover {
        background: rgba(250, 240, 237, 0.1);
        color: #5f6368;
    }

    /* Active item: gold bg highlight — React bg-[#FAF0ED]/60 text-[#BA9A7C] */
    .primary-nav__list .current-menu-item > a,
    .primary-nav__list .current_page_item > a,
    .primary-nav__list .current_page_ancestor > a {
        background: rgba(250, 240, 237, 0.6);
        color: #ba9a7c;
    }

    /* No underline pseudo-element inside drawer */
    .primary-nav__list .current-menu-item > a::after,
    .primary-nav__list .current_page_item > a::after,
    .primary-nav__list .current_page_ancestor > a::after,
    .primary-nav__list a:hover::after {
        display: none;
    }

    /* Mobile newsletter button inside nav drawer */
    .mobile-nav-subscribe {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;   /* py-3 */
        background: #ba9a7c;
        color: #fcfaf7;
        font-size: 0.625rem;  /* text-[10px] */
        font-weight: 600;     /* font-semibold */
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border: 0;
        cursor: pointer;
        transition: background 200ms ease;
    }

    .mobile-nav-subscribe:hover {
        background: #1f2421;
    }

    /* Policy links section — React: border-t border-[#F4EFEB]/60 my-2 pt-2 */
    .mobile-nav-policy {
        display: flex;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid rgba(244, 239, 235, 0.6);
        margin: 8px 0 0;
        padding: 8px 0 0;
    }

    .mobile-nav-policy a {
        display: block;
        width: 100%;
        padding: 8px 16px;
        color: #8a8d90;
        font-size: 0.625rem;  /* text-[10px] */
        font-weight: 600;     /* font-semibold */
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-align: left;
    }

    .mobile-nav-policy a::after {
        display: none !important;
    }

    /* Subscribe button wrapper — React: pt-4 px-4 */
    .mobile-nav-footer {
        display: block;
        padding: 16px 16px 8px;
    }

    /* Social links stay visible in actions row on mobile */
    .site-header__actions .social-links {
        display: flex;
    }

    /* Newsletter text button: hide on mobile — drawer has the gold button */
    .site-header__actions .header-cta {
        display: none;
    }
}

@media (max-width: 980px) {

    .home-intro,
    .featured-story,
    .post-card--wide,
    .post-card--split,
    .single-shell,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .about-manifesto,
    .sidebar {
        position: static;
    }

    /* Pillars: 3 cols down to 768px (md), centre-align below md */
    .pillar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Wide card: span 2 in the 2-col post-grid (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .post-card--wide,
    .post-card--split {
        grid-column: span 2;
    }
}

/* About hero h1: sm:text-5xl (48px) at 640px+ */
@media (min-width: 640px) {
    .about-hero h1,
    .boutique-shell h1 {
        font-size: 3rem; /* text-5xl = 48px */
    }
}

/* About two-column layout: only at xl (1280px+) — matches React xl:col-span-5/7 */
@media (max-width: 1279px) {
    .about-layout {
        grid-template-columns: 1fr;
    }

    .about-manifesto {
        position: static;
    }

    /* Hero bottom margin shrinks on tablet/mobile */
    .about-hero {
        padding-bottom: 48px;
    }

    /* Portrait image too tall at full width on tablet — switch to landscape ratio */
    .about-shell .editorial-image--portrait {
        aspect-ratio: 16 / 9;
    }
}

/* Pillars single-column below md (768px) — matches React md:grid-cols-3 */
@media (max-width: 767px) {
    .pillar-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 48px;
        padding-block: 36px;
    }

    .pillar-card {
        text-align: center;
    }

    .pillar-icon {
        margin-inline: auto;
    }
}

@media (max-width: 680px) {
    .site-header__brand-row {
        padding-block: 22px 18px;
    }

    .site-header__nav-row {
        width: min(100% - 24px, 1280px);
    }

    .header-cta {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .site-footer__inner {
        width: min(100% - 24px, 1280px);
    }

    .home-intro,
    .section-heading,
    .archive-header,
    .page-header,
    .site-footer__bottom,
    .author-bio {
        display: block;
    }

    /* Post grid: 1-col on small mobile (redundant with base, but explicit) */
    .post-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }

    /* Wide/split cards: span 1 in the 1-col mobile grid */
    .post-card--wide,
    .post-card--split {
        grid-column: span 1;
    }

    /* About hero: tighter on small mobile */
    .about-hero h1,
    .boutique-shell h1 {
        font-size: 2.25rem; /* text-4xl — 36px */
    }

    .about-hero {
        padding-bottom: 36px;
        gap: 16px;
    }

    .about-hero__quote {
        font-size: 1rem !important;
    }

    .about-layout {
        margin-top: 40px;
        gap: 28px;
    }

    .pillar-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .search-form {
        display: grid;
    }

    .single-article,
    .contact-form-panel,
    .about-panel,
    .author-bio,
    .newsletter-modal__panel {
        padding: 22px;
    }
}


.design-contact-form,
.wpcf7-form {
    display: grid;
    gap: 20px;
    margin-top: 0;
}

/* React: text-xs font-semibold text-[#1F2421] — labels */
.design-contact-form label,
.wpcf7-form label {
    display: grid;
    gap: 6px;
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: 600;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* React: bg-[#FCFAF7] border border-[#E8DFD8] px-4 py-3.5 text-xs placeholder-[#A09890]
         focus:border-[#E09283](→#C5A16F) focus:bg-white focus:outline-none */
.design-contact-form input,
.design-contact-form textarea,
.wpcf7-form input,
.wpcf7-form textarea {
    width: 100%;
    border: 1px solid #e8dfd8;
    border-radius: 0;
    background: #fcfaf7;
    color: var(--color-ink);
    padding: 14px 16px;
    font-size: 0.75rem;
    font-weight: 400;
    transition: border-color 200ms ease, background 200ms ease;
}

.design-contact-form input:focus,
.design-contact-form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: #c5a16f;
    background: #fff;
}

.design-contact-form textarea,
.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

/* React: inline-flex gap-2 bg-[#1F2421]→#C5A880 text-xs font-semibold tracking-wider px-8 py-4 */
.button--gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #c5a880;
    color: #fcfaf7;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 16px 32px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background 200ms ease;
}

.button--gold:hover {
    background: #b0916e;
}

.contact-submit-wrap {
    padding-top: 8px;
}

/* ── Contact form error banner ──
   React: p-3.5 rounded-lg bg-red-50 text-red-600 border border-red-100 text-xs font-medium */
.contact-form__error {
    padding: 14px;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
}

/* ── Contact form success card ──
   React: py-12 px-6 rounded-2xl bg-[#FAF0ED] text-center space-y-4 border border-[#E89C8C]/20
   → editorial theme bg: #fcfaf7 (site's warm off-white) */
.contact-form__success {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 24px;
    border-radius: 16px !important;
    background: #fcfaf7 !important;
    border: 1px solid #e8dfd8 !important;
    text-align: center;
}

/* Ensure hidden attribute is respected even when display is set by CSS */
.contact-form__success[hidden],
.contact-form__error[hidden],
.contact-form__fields[hidden] {
    display: none !important;
}

/* React: h-16 w-16 rounded-full bg-white text-[#E09283] shadow-sm, CheckCircle2 h-8 w-8
   → editorial theme icon colour: #c5a16f (warm gold — our remap of #E09283) */
.contact-form__success-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #c5a16f !important;
    flex-shrink: 0;
}

/* Explicitly set stroke so SVG currentColor picks up the warm gold */
.contact-form__success-icon svg {
    color: #c5a16f !important;
    stroke: #c5a16f !important;
}

/* React: font-fraunces text-xl font-bold text-[#1F2421] */
.contact-form__success h4 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2421;
    margin: 0 0 6px; /* space-y-1.5 = 6px between h4 and p */
}

/* React: text-xs text-[#5F6368] leading-relaxed max-w-sm mx-auto font-light */
.contact-form__success p {
    font-size: 0.75rem;
    color: #5f6368; /* React: text-[#5F6368] — slightly different from --color-muted (#6f7275) */
    line-height: 1.625;
    max-width: 24rem; /* max-w-sm = 384px = 24rem */
    margin: 0;
    font-weight: 300;
    font-style: normal;
}

/* React: text-[10px] text-[#808385] font-mono uppercase bg-white/60 px-3 py-1 rounded-full */
.contact-form__status {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.6);
    padding: 4px 12px;
    border-radius: 999px;
    color: #808385;
    letter-spacing: 0.05em;
}

/* ── Dark submit button ──
   React: bg-[#1F2421] hover:bg-black text-[#FCFAF7] text-xs font-semibold tracking-wider
          uppercase px-8 py-4 rounded-full inline-flex items-center gap-2 */
.button--dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #1f2421;
    color: #fcfaf7;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 32px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 200ms ease;
}
.button--dark:hover {
    background: #000;
}

/* Send icon inside submit button — pinkish accent colour matching React */
.contact-submit-icon {
    color: #e09283;
    flex-shrink: 0;
}

/* Wrap the fields section so we can hide it as one unit */
.contact-form__fields {
    display: contents; /* transparent wrapper — layout unchanged */
}

.wpcf7-submit {
    width: max-content;
    border: 0;
    background: var(--color-ink) !important;
    color: var(--color-surface) !important;
    padding: 14px 24px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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


/* Wordmark — matches React h1: font-serif, font-light, tracking-[0.25em], uppercase, flex gap-2
   font-variation-settings opsz=144 gives the heavier editorial optical weight at display size */
.wordmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    font-weight: 400;
    font-optical-sizing: auto;
    letter-spacing: 0.25em;
    color: #1a1a1a; /* text-[#1F2421] → editorial resolved #1A1A1A */
    text-transform: uppercase;
    user-select: none;
    transition: color 500ms ease;
    padding-left: 4px;
}

.wordmark__amp {
    /* Force the body-text (small-opsz) glyph form for & so it looks like a clean italic &
       rather than Fraunces's elaborate calligraphic display-size variant. */
    color: #ba9a7c;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 400;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 18;
    letter-spacing: normal;
    text-transform: lowercase;
    margin-inline: -4px;
}

.site-brand:hover .wordmark {
    color: #1a1a1a; /* no color shift on logo hover — wordmark stays ink */
}

.product-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 34px 0 4px;
}

.product-filters button {
    border: 1px solid var(--color-line);
    background: #fff;
    color: var(--color-muted);
    padding: 10px 22px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* React: bg-[#1F2421] → editorial override → #C5A16F (warm gold) */
.product-filters button.is-active,
.product-filters button:hover {
    background: #c5a16f;
    border-color: #c5a16f;
    color: #fcfaf7;
}

.product-card[hidden] {
    display: none;
}

.product-card__image {
    position: relative;
}

.product-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(31, 36, 33, 0.16);
    opacity: 0;
    transition: opacity 220ms ease;
}

.product-card__image:hover .product-card__overlay,
.product-card__image:focus-within .product-card__overlay {
    opacity: 1;
}

.product-card__overlay button {
    border: 0;
    background: #fff;
    color: var(--color-ink);
    padding: 12px 14px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-card__overlay button:hover {
    background: var(--color-ink);
    color: var(--color-surface);
}

.product-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    place-items: center;
    padding: 20px;
}

.product-modal.is-open {
    display: grid;
}

.product-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(8px);
}

.product-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 880px);
    max-height: 90vh;
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.product-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 0;
    background: rgba(252, 250, 247, 0.92);
    color: var(--color-ink);
}

.product-modal__body {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    padding: clamp(24px, 4vw, 42px);
}

.product-modal__image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-panel);
}

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

.product-modal__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.product-modal__copy h2 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
}

.product-modal__copy ul {
    margin: 0;
    padding-left: 18px;
    color: var(--color-muted);
}

@media (max-width: 680px) {
    .product-modal__body {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   POST CARD PATTERN ENHANCEMENTS
   (wide · arch · framed · quote · split)
   ============================================================ */

/* Shared — image wrapper provides the stacking context for the
   offset-border pseudo-layer that animates on hover. */
.post-card__image-wrap,
.post-card__arch-wrap,
.post-card__frame-wrap,
.post-card__split-image-wrap {
    position: relative;
}

/* Decorative offset border that slides in on hover */
.post-card__offset-border {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(197, 168, 128, 0.2);
    transform: translate(14px, 14px);
    transition: transform 700ms ease-out;
    pointer-events: none;
    z-index: -1;
}

.post-card:hover .post-card__offset-border {
    transform: translate(0, 0);
}

/* ── Wide card ────────────────────────────────────────────── */

.post-card--wide .post-card__image {
    aspect-ratio: 16 / 10;
}

.post-card--wide .post-card__meta {
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--color-line);
}

/* Reverse column order when image should appear on the right */
.post-card--img-right {
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
}

.post-card--img-right > .post-card__image-wrap { order: 2; }
.post-card--img-right > .post-card__body       { order: 1; }

/* ── Arch card ────────────────────────────────────────────── */

/* Move max-width constraint to the wrapper so the offset border
   is also contained within 245 px. */
.post-card--arch .post-card__arch-wrap {
    max-width: 245px;
    margin-inline: auto;
    width: 100%;
}

/* Override the direct-image rules that existed before the wrapper
   was introduced. */
.post-card--arch .post-card__image {
    max-width: none;
    margin-inline: 0;
}

.post-card--arch .post-card__offset-border {
    border-radius: 999px 999px 0 0;
    border-color: rgba(197, 168, 128, 0.3);
    transform: translate(6px, 6px);
    transition-duration: 600ms;
}

/* Centered body typography for arch cards */
.post-card__body--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

/* Decorative rule–category–rule divider */
.post-card__category-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.post-card__category-line__dash {
    display: block;
    width: 16px;
    height: 1px;
    background: rgba(197, 168, 128, 0.3);
    flex-shrink: 0;
}

/* ── Framed / passe-partout card ─────────────────────────── */

/* Extra padding creates a visible mat between the article border
   and the image — a two-layer frame effect. */
.post-card__image--matted {
    padding: 6px;
}

/* ── Quote card ───────────────────────────────────────────── */

.post-card--quote > .post-card__meta {
    margin-top: auto;
}

/* Large decorative opening quotation mark */
.post-card__quote-mark {
    position: absolute;
    top: 10px;
    right: 18px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(197, 168, 128, 0.15);
    pointer-events: none;
    user-select: none;
}

/* Italic title for arch and quote patterns */
.post-card__title--italic a {
    font-style: italic;
}

/* Excerpt with left-border accent */
.post-card__excerpt--quoted {
    border-left: 2px solid rgba(197, 168, 128, 0.4);
    padding-left: 12px;
    padding-top: 2px;
    font-style: italic;
}

/* Landscape aspect ratio for quote card image */
.post-card__image--landscape {
    aspect-ratio: 16 / 10;
}

/* Muted category label variant (quote card) */
.post-card__category--subtle {
    color: var(--color-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ── Split card ───────────────────────────────────────────── */

.post-card--split .post-card__split-image-wrap {
    align-self: stretch;
}

.post-card--split .post-card__image {
    height: 100%;
    min-height: 180px;
    aspect-ratio: unset;
}

/* ── Shared inline meta (framed / quote / split) ─────────── */

.post-card__meta--inline {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(234, 230, 225, 0.5);
    padding-top: 10px;
    color: var(--color-soft);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.post-card__meta-role {
    display: block;
    font-size: 0.64rem;
    color: var(--color-soft);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.post-card__meta-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* "View More" link pushed to the right inside inline meta */
.post-card__view-more {
    margin-left: auto;
    color: var(--color-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.post-card__view-more:hover {
    color: var(--color-ink);
}

/* Avatar thumbnail inside card meta */
.post-card__avatar {
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-line);
    display: block;
}

/* Wide card: 32×32 (h-8 w-8 in React) */
.post-card--wide .post-card__avatar {
    width: 32px;
    height: 32px;
}

/* Framed / quote / split: 20×20 (h-5 w-5 in React) */
.post-card--framed .post-card__avatar,
.post-card--quote .post-card__avatar,
.post-card--split .post-card__avatar {
    width: 20px;
    height: 20px;
}

/* Author block inside wide card */
.post-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* React: 7px mono #8A8D90 tracking-widest uppercase */
.post-card__meta-role {
    display: block;
    font-family: var(--font-mono);
    font-size: 7px;
    color: var(--color-soft);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* React: 12px font-bold tracking-wider uppercase #1A1A1A */
.post-card__meta-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Shared CTA link — "VIEW MORE" / "Read More" */
.post-card__cta-link,
.post-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: color 200ms ease, border-color 200ms ease;
}

/* Gold variant — wide card CTA
   React pattern 0: text-[#1A1A1A] group-hover:text-[#C5A880] border-b #C5A880/20 hover:border-#C5A880 */
/* ================================================================
   CTA buttons — unified:
   Always #1A1A1A text. Light gold underline by default.
   On hover: ONLY the underline turns full gold. Text never changes.
   ================================================================ */
.post-card__cta--gold,
.post-card__cta--subtle,
.post-card__cta--bold {
    color: var(--color-ink);
    border-bottom: 1px solid rgba(197, 168, 128, 0.2);
    padding-bottom: 3px;
    transition: border-color 300ms ease;
}

/* Layout modifier for wide-card CTA */
.post-card__cta--gold { align-self: flex-start; }
@media (min-width: 640px) {
    .post-card__cta--gold { align-self: center; }
}

/* Size modifiers retained per variant */
.post-card__cta--subtle { font-size: 0.56rem; }
.post-card__cta--bold   { font-size: 0.63rem; letter-spacing: 0.28em; }

/* Hover: only border-color changes to full gold on direct button hover; text stays ink */
.post-card__cta--gold:hover,
.post-card__cta--subtle:hover,
.post-card__cta--bold:hover {
    color: var(--color-ink);
    border-color: var(--color-accent-warm);
}

/* Body-top helper (wide card top section) */
.post-card__body-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ============================================================
   LANGUAGE SWITCHER  (Phase 2 — shown only when Polylang active)
   ============================================================ */

.lang-switcher {
    position: relative;
}

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--color-line);
    background: transparent;
    color: var(--color-ink);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 220ms, color 220ms;
}

.lang-trigger:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    display: none;
    min-width: 160px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-soft);
}

.lang-switcher.open .lang-dropdown {
    display: block;
}

.lang-dropdown li {
    display: block;
}

.lang-dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: var(--color-text);
    font-size: 0.78rem;
}

.lang-dropdown li a:hover,
.lang-dropdown .lang-active a {
    background: var(--color-panel);
    color: var(--color-accent);
}

/* All headings now use font-optical-sizing: auto (set in global h1-h6 rule above)
   matching React's unset opsz behavior. No override block needed. */

/* ==========================================================================
   Category Archive
   ========================================================================== */

.category-archive-shell {
    padding-bottom: clamp(60px, 8vw, 96px);
}

/* ← Back to Homepage link */
.category-archive__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: clamp(28px, 4vw, 48px);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    text-decoration: none;
    transition: color 200ms ease;
}

.category-archive__back:hover {
    color: var(--color-ink);
}

/* Header: title + description stacked */
.category-archive-header {
    padding-top: clamp(24px, 3.5vw, 40px);
}

.category-archive-header h1 {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.category-archive-header__desc {
    font-size: 0.9rem;
    color: var(--color-muted);
    max-width: 520px;
    margin: 0;
    line-height: 1.6;
}

/* Thin rule below header */
.category-archive-divider {
    height: 1px;
    background: var(--color-line);
    margin-top: clamp(24px, 3vw, 36px);
}

/* Each row of 4 cards */
.category-archive-row {
    padding-top: clamp(48px, 6vw, 72px);
}


/* Pagination sits below rows */
.category-archive-content + .pagination {
    margin-top: clamp(48px, 6vw, 72px);
}

.category-archive-shell .pagination {
    padding: clamp(40px, 5vw, 64px) 0;
}

/* ── 404 page layout improvements ──────────────────────────────────────── */

.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.not-found > p:not(.eyebrow) {
    margin: 0;
    color: var(--color-muted);
}

.not-found .eyebrow {
    font-size: 1.6rem;
    letter-spacing: 0.5em;
}

.not-found .search-form {
    margin-inline: auto;
}