/* ============================================================================
   brand-refresh.css  (2026-10-06)
   Loads LAST (see inc/enqueue.php), so these rules win on equal specificity
   without !important. Four jobs:
     1. Header: "Ink luxe" (dark bar, cream wordmark, blush accents).
     2. Flavor colour behind EVERY cookie photo, always on.
        Exception: the weekly .flavor-block on the homepage keeps
        white-at-rest, fill-on-hover (desktop).
     3. Hero date: upright (no faux italic), bright rose.
     4. Small clean-ups after the badge / credit removal.
   ========================================================================== */

:root {
    --brand-rose:       #E4738E;   /* fill */
    --brand-rose-text:  #A83C57;   /* text-safe on white (6.1:1) */
    --brand-blush:      #FFB9CD;   /* highlight / soft accent, never text on white */
    --brand-date:       #D95A7B;   /* hero date: brightest rose that stays readable on white (3.7:1, large text) */
    --brand-ink:        #16100C;
    --brand-cream:      #FFF9F5;
}


/* ============================================================
   1. HEADER: "INK LUXE"
   Dark ink bar, cream wordmark, blush accents. #FFB9CD is 11:1 on the
   ink, so here it can be TEXT as well as fill.
============================================================ */

.site-header {
    background: linear-gradient(180deg, #1C120D 0%, var(--brand-ink) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 185, 205, 0.16);
    color: var(--brand-cream);
}

.site-header__inner { min-height: 76px; gap: var(--space-8); }

.logo {
    font-size: 1.625rem;
    line-height: 1;
    color: var(--brand-cream);
}
.logo em { font-style: normal; color: var(--brand-blush); }

/* Focus ring for a dark surface (base.css adds a white halo for light ones) */
.site-header :focus-visible {
    outline-color: var(--color-focus-ring-invert);
    box-shadow: none;
}

/* Mobile toggle */
.site-header__menu-toggle {
    border-color: rgba(255, 249, 245, 0.28);
    border-radius: var(--radius-pill);
}
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after { background: var(--brand-cream); }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon { background: transparent; }

/* Mobile panel */
.mobile-nav {
    background: var(--brand-ink);
    border-top-color: rgba(255, 249, 245, 0.10);
}
.mobile-nav a {
    color: rgba(255, 249, 245, 0.78);
    border-bottom-color: rgba(255, 249, 245, 0.10);
}
.mobile-nav a[aria-current="page"] { color: var(--brand-blush); }
.mobile-nav .btn,
.mobile-nav .btn--primary {
    background: var(--brand-blush);
    color: var(--brand-ink);
    border-bottom: none;
    font-weight: var(--weight-extrabold);
}

/* CTA (desktop only; the mobile panel has its own button) */
.header-cta__arrow { transition: transform var(--transition-hover); }

@media (min-width: 860px) {

    .site-header__nav { margin-inline: auto; }
    .site-header__nav ul { gap: 38px; }
    .site-header__nav a {
        position: relative;
        padding: 10px 0;
        font-size: 0.906rem;
        color: rgba(255, 249, 245, 0.66);
    }
    .site-header__nav a:hover { color: var(--brand-cream); }
    .site-header__nav a[aria-current="page"] { color: var(--brand-cream); }
    .site-header__nav a[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        height: 2px;
        border-radius: 2px;
        background: var(--brand-blush);
    }

    .header-cta {
        gap: 10px;
        margin-left: 0;
        padding: 13px 24px;
        background: var(--brand-blush);
        color: var(--brand-ink);
        font-weight: var(--weight-extrabold);
    }
    .header-cta:hover {
        background: #FFCAD9;
        transform: translateY(-1px);
        box-shadow: 0 10px 26px -10px rgba(255, 185, 205, 0.6);
    }
    .header-cta:hover .header-cta__arrow { transform: translateX(3px); }
}


/* ============================================================
   2. FLAVOR COLOUR BEHIND EVERY COOKIE PHOTO
   All colour comes from the per-flavor contract (--flavor-color, --on)
   already printed on the parent element. Nothing hardcoded per cookie.
============================================================ */

/* 2a. Flavor profile hero: the WHOLE hero is a full-width band in the
   flavour's colour (breadcrumbs included). All text derives from --on. */
.flavor-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--flavor-color);
    color: var(--on);
    /* hairline so very pale fills (white, cream) still end visibly */
    border-bottom: 1px solid color-mix(in srgb, var(--flavor-color) 88%, #16100C);
}
.flavor-hero::before {                          /* soft studio light behind the cookie */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(42% 70% at 24% 55%, rgba(255, 255, 255, 0.20), transparent 70%),
        linear-gradient(180deg, transparent 60%, rgba(22, 16, 12, 0.08));
    pointer-events: none;
}
.flavor-hero .flavor-profile__hero { padding-block: var(--space-6) var(--space-12); }

.flavor-hero .breadcrumbs,
.flavor-hero .breadcrumbs a { color: color-mix(in srgb, var(--on) var(--on-a-label), transparent); }
.flavor-hero .breadcrumbs a:hover { color: var(--on); }
.flavor-hero .breadcrumbs__item::after { color: color-mix(in srgb, var(--on) var(--on-a-hairline), transparent); }

.flavor-hero .eyebrow              { color: color-mix(in srgb, var(--on) var(--on-a-label), transparent); }
.flavor-hero .flavor-profile__title { color: var(--on); }
.flavor-hero .flavor-profile__lede  { color: color-mix(in srgb, var(--on) var(--on-a-body), transparent); }

.flavor-hero .flavor-block__stats,
.flavor-hero .flavor-block__stat   { border-color: color-mix(in srgb, var(--on) var(--on-a-hairline), transparent); }
.flavor-hero .flavor-block__stat-label,
.flavor-hero .flavor-block__stat-count { color: color-mix(in srgb, var(--on) var(--on-a-label), transparent); }
.flavor-hero .flavor-block__stat-value { color: var(--on); }
.flavor-hero .stars        { color: var(--on); }
.flavor-hero .stars__empty { color: color-mix(in srgb, var(--on) var(--on-a-hairline), transparent); }
.flavor-hero :focus-visible { outline-color: var(--on); box-shadow: none; }

.flavor-profile__figure { background: none; }
.flavor-profile__glow   { display: none; }
.flavor-profile__image {
    width: min(460px, 86%);
    filter: drop-shadow(0 26px 30px rgba(22, 16, 12, 0.30));
}
.flavor-profile__body > .flavor-profile__section:first-child { border-top: none; }

@media (min-width: 860px) {
    .flavor-hero .flavor-profile__hero { padding-block: var(--space-8) var(--space-16); }
}

/* 2b. Homepage cover card: colour panel holds the photo, card stays light */
.cover-card { padding: var(--space-4) var(--space-4) var(--space-6); background: #fff; }
.cover-card__media {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--flavor-color);
    border: 1px solid color-mix(in srgb, var(--flavor-color) 90%, #16100C);
}
.cover-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 60% at 50% 45%, rgba(255, 255, 255, 0.22), transparent 70%);
}
.cover-card__tag {
    top: var(--space-5);
    left: var(--space-5);
    z-index: 1;
    color: color-mix(in srgb, var(--on) 85%, transparent);
}
.cover-card__image,
.cover-card .cookie-art {
    margin: var(--space-6) auto var(--space-2);
    width: min(300px, 66%);
    filter: drop-shadow(0 18px 22px rgba(22, 16, 12, 0.26));
}
.cover-card__name { margin-top: var(--space-5); padding-inline: var(--space-2); }

/* 2c. Compact cards (All Flavors hub, Similar cookies, leaderboard):
   colour tile behind the photo at rest; whole card still floods on hover */
.flavor-card__image {
    box-sizing: border-box;
    width: 100%;
    padding: 12%;
    border-radius: var(--radius-md);
    background-color: var(--flavor-color);
}
@media (min-width: 860px) {
    .flavor-card:hover .flavor-card__image,
    .flavor-card:focus-visible .flavor-card__image { background-color: transparent; }
}


/* ============================================================
   3. HERO DATE
   Frank Ruhl Libre has no italic, so the old <em> was a browser-faked
   slant: that was the blur. Now upright and sharp, in the brightest rose
   that is still readable on white. (#FFB9CD itself is 1.6:1 on white,
   so it lives in the dark header instead.)
============================================================ */

.hero__date {
    font-style: normal;
    font-weight: var(--weight-black);
    color: var(--brand-date);
    white-space: nowrap;   /* keep "Oct 5 - 10, 2026" together */
}


/* ============================================================
   4. CLEAN-UPS
============================================================ */

/* Eyebrow now sits alone (badge removed) */
.flavor-block__badges { gap: 0; }


/* ============================================================
   5. HEADINGS
   Every section heading now uses the display serif (Frank Ruhl Libre),
   the same family as the H1, so the page reads as one editorial voice.
   Flavor NAMES stay Plus Jakarta Sans 800 (locked decision).
============================================================ */

.flavor-profile__section h2,
.prose h2,
.entry-content h2:not([class]) {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.prose h3,
.entry-content h3:not([class]),
.explore-card h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}


/* ============================================================
   6. LINKS: pink underline everywhere a text link is underlined
============================================================ */

a {
    text-decoration-color: var(--brand-rose);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.prose a,
.entry-content a:not([class]),
.flavor-profile__section a:not([class]),
.u-muted a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--brand-rose);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.prose a:visited { color: inherit; }
.prose a:hover,
.entry-content a:not([class]):hover,
.flavor-profile__section a:not([class]):hover,
.u-muted a:hover {
    color: var(--brand-rose-text);
    text-decoration-color: var(--brand-rose-text);
}
/* On a coloured fill the pink could vanish (e.g. Pink Sugar): use --on */
.flavor-block a:not([class]),
.flavor-hero a:not([class]) { text-decoration-color: currentColor; }
@media (min-width: 860px) {
    /* desktop weekly cards rest white, so the pink comes back until hover */
    .flavor-block:not(:hover):not(:focus-within) a:not([class]) { text-decoration-color: var(--brand-rose); }
}
/* Dark sections: blush reads better than rose on ink */
.section--dark a:not([class]) { text-decoration-color: var(--brand-blush); }
/* Footer: the legal link is a real link, so it gets the underline too */
.site-footer__legal a {
    text-decoration: underline;
    text-decoration-color: var(--brand-rose);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


/* ============================================================
   7. READER RATINGS (Site Reviews), redesigned
   The plugin draws its stars from CSS variables; we swap in brand stars.
   "html body" outranks the plugin's own "body" rule without !important.
============================================================ */

html body {
    --glsr-star-full:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D95A7B' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45l-5.8 3.05 1.1-6.45-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");
    --glsr-star-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F7D5DF' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45l-5.8 3.05 1.1-6.45-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");
    --glsr-star-half:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='50%25' stop-color='%23D95A7B'/%3E%3Cstop offset='50%25' stop-color='%23F7D5DF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23h)' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45l-5.8 3.05 1.1-6.45-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");
    --glsr-star-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23DC2626' stroke-width='1.5' d='M12 2.6l2.9 5.9 6.5.95-4.7 4.6 1.1 6.45L12 17.45l-5.8 3.05 1.1-6.45-4.7-4.6 6.5-.95z'/%3E%3C/svg%3E");
    --glsr-bar-bg: var(--brand-date);
    --glsr-bar-opacity: 1;
    --glsr-bar-radius: 999px;
    --glsr-bar-size: 8px;
    --glsr-bar-gap: 12px;
    --glsr-summary-star: 1.4em;
    --glsr-form-star: 2.25em;
    --glsr-max-w: none;
    --glsr-input-radius: 12px;
    --glsr-input-border-color: var(--color-border-ui);
}

.flavor-rating__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-6);
}
.flavor-rating__card {
    padding: clamp(24px, 3vw, 36px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: #fff;
}
.flavor-rating__score {
    background: linear-gradient(160deg, #FFF6F9 0%, #FFFFFF 70%);
    border-color: rgba(228, 115, 142, 0.18);
}
.flavor-rating__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--brand-rose-text);
}

/* Summary (only rendered once there are approved ratings) */
.flavor-rating .glsr-summary { margin-top: var(--space-4); row-gap: var(--space-3); }
.flavor-rating .glsr-summary-rating {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: clamp(3rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    color: var(--color-text);
}
.flavor-rating .glsr-summary-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.flavor-rating .glsr-summary-percentages { margin-top: var(--space-5); }
.flavor-rating .glsr-summary-bar-label,
.flavor-rating .glsr-summary-bar-percent { font-size: 13px; color: var(--color-text-muted); }
.flavor-rating .glsr-summary-bar-background:before { background-color: #F7D5DF; opacity: 1; }

/* Empty state */
.flavor-rating__empty { margin-top: var(--space-4); }
.flavor-rating__empty-title {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.flavor-rating__empty-stars {
    display: block;
    width: 170px;
    height: 32px;
    margin-top: var(--space-4);
    background-image: var(--glsr-star-empty);
    background-size: 34px 32px;
    background-repeat: repeat-x;
}
.flavor-rating__empty-text { margin-top: var(--space-4); max-width: 38ch; color: var(--color-text-muted); }

/* "On Crumbl" line: Crumbl's own published rating, visibly separate */
.flavor-rating__crumbl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(228, 115, 142, 0.20);
}
.flavor-rating__crumbl-label {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-light);
}
.flavor-rating__crumbl-value { display: inline-flex; align-items: center; gap: 8px; }
.flavor-rating__crumbl-value .stars { color: var(--brand-date); }
.flavor-rating__crumbl-value b { font-size: var(--text-lg); font-weight: var(--weight-extrabold); }
.flavor-rating__crumbl-meta { font-size: 13px; color: var(--color-text-muted); }

/* Big score (Crumbl rating, before any reader ratings) */
.flavor-rating__big { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); }
.flavor-rating__big-number {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: clamp(3.5rem, 6vw, 4.75rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text);
}
.flavor-rating__big-side { display: flex; flex-direction: column; gap: 6px; }
.flavor-rating__big-side .stars { color: var(--brand-date); font-size: 1.5rem; letter-spacing: 3px; }
.flavor-rating__big-side .stars__empty { color: #F7D5DF; }
.flavor-rating__big-count { font-size: var(--text-sm); color: var(--color-text-muted); }

/* No score yet: the form card takes the full width */
.flavor-rating--form-only .flavor-rating__grid { grid-template-columns: 1fr !important; }
.flavor-rating--form-only .flavor-rating__form { max-width: 760px; }

/* Form card */
.flavor-rating__form-title {
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.flavor-rating .glsr-form {
    margin-top: var(--space-5);
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}
.flavor-rating .glsr-default form.glsr-form label.glsr-label {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-light);
}
.flavor-rating .glsr-default form.glsr-form input.glsr-input:not(.wp-block-search__input),
.flavor-rating .glsr-default form.glsr-form textarea.glsr-textarea {
    padding: 14px 16px !important;   /* the plugin sets its padding with !important */
    background: var(--color-surface-2);
    border-color: transparent;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.flavor-rating .glsr-default form.glsr-form input.glsr-input:not(.wp-block-search__input):focus,
.flavor-rating .glsr-default form.glsr-form textarea.glsr-textarea:focus {
    background: #fff;
    border-color: var(--brand-rose-text);
    box-shadow: 0 0 0 3px rgba(228, 115, 142, 0.25);
}
.flavor-rating .glsr-default button.glsr-button {
    justify-self: start;
    min-height: 50px;
    padding: 14px 30px;
    border-radius: var(--radius-pill);
    background: var(--brand-ink);
    color: var(--brand-cream);
    font-weight: var(--weight-bold);
}
.flavor-rating .glsr-default button.glsr-button:hover {
    background: #2B1B12;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(217, 90, 123, 0.6);
}

/* Review list */
.flavor-rating__list { margin-top: var(--space-8); }
.flavor-rating__more { margin-top: var(--space-4); }

@media (min-width: 900px) {
    .flavor-rating:not(.flavor-rating--compact) .flavor-rating__grid {
        grid-template-columns: 0.9fr 1.1fr;
        align-items: start;
    }
}


/* ============================================================
   8. SMOOTH HOVER ON THE HOMEPAGE FLAVOR CARDS
   The card fill was animated (250ms) but the text, stars, hairlines and
   buttons inside it had no transition, so they snapped instantly. Now
   everything fades together over 600ms on the same easing curve.
============================================================ */

@media (min-width: 860px) {
    .flavor-block {
        transition:
            background-color 600ms cubic-bezier(.22, .61, .36, 1),
            border-color     600ms cubic-bezier(.22, .61, .36, 1),
            box-shadow       600ms cubic-bezier(.22, .61, .36, 1),
            transform        600ms cubic-bezier(.22, .61, .36, 1),
            opacity          400ms ease;
    }
    .flavor-block__name,
    .flavor-block__name a,
    .flavor-block__desc,
    .flavor-block__eyebrow,
    .flavor-block__stats,
    .flavor-block__stat,
    .flavor-block__stat-label,
    .flavor-block__stat-value,
    .flavor-block__stat-count,
    .flavor-block .stars,
    .flavor-block .stars__empty,
    .flavor-block__desc a {
        transition:
            color                 600ms ease,
            border-color          600ms ease,
            text-decoration-color 600ms ease;
    }
    .flavor-block .btn {
        transition:
            color            600ms ease,
            background-color 600ms ease,
            border-color     600ms ease,
            box-shadow       200ms ease,
            transform        200ms ease;
    }
    .flavor-block__image {
        transition:
            transform 800ms cubic-bezier(.22, .61, .36, 1),
            filter    800ms cubic-bezier(.22, .61, .36, 1);
    }
    .flavor-block__glow {
        transition:
            transform 800ms cubic-bezier(.22, .61, .36, 1),
            opacity   600ms ease;
    }
}


/* ============================================================
   9. HOMEPAGE WEEKLY BODY (the static front page's Custom HTML)
   front-page.php prints the editor content inside
   <div class="container entry-content">. These rules give that body
   its rhythm: section spacing, readable paragraphs, serif H2s, a styled
   at-a-glance table, gaps between the [flavor_block] cards, and a clean
   ranked list. Scoped to .home so no other page changes.
============================================================ */

.home .entry-content { padding-bottom: var(--space-16); }

/* Sections */
.home .entry-content > .cd-block { margin-top: clamp(48px, 6vw, 88px); max-width: 980px; }
.home .entry-content > .cd-block:first-child { margin-top: 0; }
.home .entry-content .cd-block h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin-bottom: var(--space-5);
}
.home .entry-content .cd-block p {
    margin-top: var(--space-4);
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 72ch;
}
.home .entry-content .cd-block > p:first-child,
.home .entry-content .cd-block h2 + p { margin-top: 0; }
.home .entry-content .cd-block .eyebrow { display: block; margin-bottom: var(--space-3); font-size: var(--text-xs); line-height: 1.4; }
.home .entry-content .cd-block .eyebrow + p { margin-top: 0; }

/* At-a-glance table */
.home .entry-content > .cd-block:has(table) { max-width: none; overflow-x: auto; }  /* wide table scrolls on phones */
.home .entry-content .cd-block table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
}
.home .entry-content .cd-block table caption {
    caption-side: bottom;
    padding: var(--space-3) var(--space-5);
    text-align: left;
    font-size: 13px;
    color: var(--color-text-light);
}
.home .entry-content .cd-block th,
.home .entry-content .cd-block td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.home .entry-content .cd-block thead th {
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-light);
    background: var(--color-surface-2);
    white-space: nowrap;
}
.home .entry-content .cd-block tbody th { font-weight: var(--weight-bold); min-width: 190px; }
.home .entry-content .cd-block td:nth-child(3) { min-width: 240px; }
.home .entry-content .cd-block tbody tr:last-child th,
.home .entry-content .cd-block tbody tr:last-child td { border-bottom: none; }
.home .entry-content .cd-block tbody tr:nth-child(even) { background: #FCFAF9; }

/* Weekly cards: gaps, and the written review inside each card */
.home .entry-content > .flavor-block { margin-top: var(--space-flavor-gap); }
.home .entry-content > .cd-block + .flavor-block { margin-top: clamp(32px, 4vw, 56px); }
.flavor-block__review > * + * { margin-top: var(--space-3); }
.flavor-block__review p { font-size: inherit; line-height: 1.65; color: inherit; max-width: none; }
.flavor-block__review .flavor-block__link { font-size: var(--text-sm); }
.flavor-block__review [data-cd="pending"] { font-style: italic; opacity: .85; }
.home .entry-content .flavor-block__name a,
.home .entry-content .flavor-block__name a:hover { text-decoration: none; color: inherit; }
.flavor-block a:not([class]) { color: inherit; }

/* Classics block printed by [crumbl_classics] inside the body */
.home .entry-content > .week-header { padding-inline: 0; margin-top: clamp(48px, 6vw, 88px); }
.home .entry-content > .flavor-blocks { padding-inline: 0; }

/* Ranked list: the CSS counter already numbers the rows, so the
   written rank span is hidden (otherwise every number shows twice). */
.home .entry-content .ranking-list { margin-top: var(--space-5); }
.home .entry-content .ranking-list__rank { display: none; }
.home .entry-content .ranking-list__item {
    display: grid;
    grid-template-columns: 2.5ch 1fr;
    column-gap: var(--space-5);
    row-gap: 4px;
    align-items: baseline;
}
.home .entry-content .ranking-list__item::before { grid-row: span 2; color: var(--brand-date); }
.home .entry-content .ranking-list__name { font-weight: var(--weight-extrabold); font-size: var(--text-lg); }
.home .entry-content .ranking-list__note { grid-column: 2; color: var(--color-text-muted); }

/* FAQ inside the body */
.home .entry-content .faq { margin-top: var(--space-5); }
.home .entry-content .faq__answer { margin-top: 0; }


/* ============================================================
   10. HOMEPAGE FAQ (front page editor content, printed after "Go deeper")
   Markup: <div class="cd-block home-faq"><div class="home-faq__intro">
   eyebrow + h2 + p</div><section class="faq">details...</section></div>
============================================================ */

.home-extra { border-top: 1px solid var(--color-border); }
.home-extra .entry-content { padding-bottom: 0; }
.home .entry-content > .home-faq { max-width: none; margin-top: 0; }

.home-faq { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
.home-faq__intro .eyebrow { color: var(--brand-rose-text); }
.home .entry-content .home-faq__intro h2 { font-size: var(--text-title); margin-bottom: var(--space-4); }
.home .entry-content .home-faq__intro p { color: var(--color-text-muted); max-width: 40ch; }

.home-faq .faq { margin-top: 0; border-top: 1px solid var(--color-border); }
.home-faq .faq__item { border-bottom: 1px solid var(--color-border); }
.home-faq .faq__question {
    padding: var(--space-6) 0;
    font-size: 1.125rem;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
    transition: color var(--transition-fast);
}
.home-faq .faq__question:hover { color: var(--brand-rose-text); }
.home-faq .faq__question::after {
    content: "";
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(228, 115, 142, 0.45);
    background:
        linear-gradient(var(--brand-rose-text), var(--brand-rose-text)) center / 12px 2px no-repeat,
        linear-gradient(var(--brand-rose-text), var(--brand-rose-text)) center / 2px 12px no-repeat;
    transition: transform 300ms var(--ease-out), background-color 300ms ease, border-color 300ms ease;
}
.home-faq .faq__item[open] .faq__question::after {
    content: "";
    transform: rotate(45deg);
    background-color: #FFF0F4;
    border-color: var(--brand-rose);
}
.home .entry-content .home-faq .faq__answer {
    margin-top: 0;
    padding: 0 var(--space-12) var(--space-6) 0;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 68ch;
}

@media (min-width: 1020px) {
    .home-faq { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); align-items: start; }
    .home-faq__intro { position: sticky; top: 110px; }
}