/*
 * Layer 1 — theme-internal custom properties and cross-cutting chrome.
 * Budget: ≤200 lines. If it grows, content belongs in a feature or pattern folder.
 *
 * See docs/superpowers/specs/2026-05-11-sundaybaker-theme-simplification-design.md §2 — Layer 1.
 *
 * Naming convention: --sb-<category>-<name> (distinct from --wp--preset--*).
 */

:root {
    /* === Hero / feature image aspect ratio token ===
     *
     * Single knob controlling the height of the four "spotlight" image slots:
     *   - homepage featured-recipe hero (.sb-hero-featured-recipe__image)
     *   - homepage editor's-pick / featured-collection lead (.sb-hero-featured-collection__lead)
     *   - homepage + archive recipe-grid lead/regular cards (.sb-recipe-card__pic)
     *   - single-recipe page featured image (img inside .wp-block-post-featured-image
     *     when it lives in the .single-recipe-hero wrapper)
     *
     * Lower the ratio's first number (or raise the second) to make these
     * photos taller; do the inverse for shorter. 4/5 was the original
     * portrait crop; 4/3 is a less tall editorial-landscape default.
     *
     * Documented in DESIGN.md Part 1's "Tokens" section.
     */
    --sb-aspect-hero-photo: 4 / 3;
    /* Muted ink colour used for hairline borders and separators throughout
       the editorial UI. Single source of truth so palette tweaks are
       one-line changes. */
    --sb-ink-light: rgba(42, 26, 10, 0.18);
}

/* -------------------------------------------------------------------------
 * Shared recipe-card component.
 *
 * Used by patterns/grid/{latest-mosaic, recipe-archive-grid}/ — both
 * render image-on-top vertical cards with the same anatomy. The `--lead`
 * and `--tail` modifiers tweak typography and layout for hero/teaser
 * roles; grid-position rules for those modifiers live in each parent
 * pattern's style.css (this file owns the visual styling, not the
 * positioning).
 *
 * Slice 8 may extract this into a `patterns/_partials/recipe-card/`
 * partial; for now it's the shared component anchored in this Layer-1
 * stylesheet.
 * ------------------------------------------------------------------------- */
.sb-recipe-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.sb-recipe-card__pic {
    display: block;
    aspect-ratio: var(--sb-aspect-hero-photo);
    background-color: var(--wp--preset--color--sugar);
    border: 1px solid var(--sb-ink-light);
    overflow: hidden;
}
.sb-recipe-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .3s;
}
.sb-recipe-card:hover .sb-recipe-card__img { transform: scale(1.02); }
.sb-recipe-card__body { display: block; padding: 14px 4px 0; }
.sb-recipe-card__cat {
    display: block;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--wp--preset--color--saddle);
    font-weight: 600;
}
.sb-recipe-card__title {
    display: block;
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--heading);
    font-weight: 500;
    line-height: 1.15;
    margin: 6px 0;
    color: var(--wp--preset--color--ink);
}
.sb-recipe-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--wp--preset--font-family--lora);
    font-style: italic;
    font-size: 11px;
    color: rgba(42, 26, 10, .55);
}
.sb-recipe-card__stars {
    color: var(--wp--preset--color--tuscan);
    font-style: normal;
    letter-spacing: 1px;
}

/* --- Lead card (hero-treatment first card in a grid) --- */
.sb-recipe-card--lead {
    display: flex;
    flex-direction: column;
}
.sb-recipe-card--lead .sb-recipe-card__pic {
    aspect-ratio: var(--sb-aspect-hero-photo);
    flex: 0 0 auto;
}
.sb-recipe-card--lead .sb-recipe-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--sm-plus);
    padding: var(--wp--preset--spacing--sm-plus) var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xxs);
}
.sb-recipe-card--lead .sb-recipe-card__title {
    font-size: 32px;
    line-height: 1.05;
    margin: var(--wp--preset--spacing--xs) 0 0;
}
.sb-recipe-card--lead .sb-recipe-card__stand {
    display: block;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 10px 0 0;
    max-width: 380px;
}
.sb-recipe-card--lead .sb-recipe-card__body-bottom {
    border-top: 1px solid rgba(132, 87, 47, .25);
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--sm-plus);
    flex-wrap: wrap;
}

/* --- Supporting cards (default, non-lead/non-tail) --- */
.sb-recipe-card:not(.sb-recipe-card--lead):not(.sb-recipe-card--tail)
    .sb-recipe-card__pic { aspect-ratio: 4/3; }

/* Body-top / body-bottom wrappers are inert on default cards and only
   activate for the lead/tail treatments. */
.sb-recipe-card__body-top,
.sb-recipe-card__body-bottom { display: contents; }
.sb-recipe-card--lead .sb-recipe-card__body-top,
.sb-recipe-card--lead .sb-recipe-card__body-bottom,
.sb-recipe-card--tail .sb-recipe-card__body-top,
.sb-recipe-card--tail .sb-recipe-card__body-bottom { display: flex; flex-direction: column; }

/* --- Tail card (image-left/text-right P.S. teaser; latest-mosaic only) --- */
.sb-recipe-card--tail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--lg);
    align-items: center;
}
.sb-recipe-card--tail .sb-recipe-card__pic {
    aspect-ratio: 16 / 10;
    height: 100%;
    min-height: 220px;
}
.sb-recipe-card--tail .sb-recipe-card__body {
    padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xxs) 0;
    gap: 12px;
}
.sb-recipe-card--tail .sb-recipe-card__title {
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: 34px;
    line-height: 1.05;
    margin: 6px 0 0;
}
.sb-recipe-card--tail .sb-recipe-card__stand {
    display: block;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--wp--preset--color--ink);
    margin: 6px 0 0;
    max-width: 460px;
}
.sb-recipe-card--tail .sb-recipe-card__body-bottom {
    margin-top: 10px;
    flex-direction: row;
    align-items: center;
    gap: var(--wp--preset--spacing--sm-plus);
    flex-wrap: wrap;
    border-top: 1px solid rgba(132, 87, 47, .25);
    padding-top: 14px;
}

/* --- Read-recipe CTA (lead + tail only) --- */
.sb-recipe-card__cta {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--wp--preset--color--saddle);
    padding: 6px 0;
    position: relative;
    transition: letter-spacing .25s, color .25s;
}
.sb-recipe-card:hover .sb-recipe-card__cta {
    letter-spacing: 0.34em;
    color: var(--wp--preset--color--ink);
}

@media (max-width: 800px) {
    .sb-recipe-card--tail {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--sm-plus);
    }
    .sb-recipe-card--tail .sb-recipe-card__pic { min-height: 0; }
}

/* -------------------------------------------------------------------------
 * Shared related-card component (horizontal image-left/text-right card).
 *
 * Used by patterns/grid/recipe-related/. Visually distinct from
 * `.sb-recipe-card` (which is image-on-top); we keep both shapes
 * available because the single-recipe "from the same shelf" beat reads
 * tighter as a horizontal row than as a third copy of the homepage
 * grid. Slice 8 may pull this into a separate partial.
 * ------------------------------------------------------------------------- */
.sb-related-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    align-items: start;
}
.sb-related-card__pic {
    display: block;
    width: 96px;
    height: 96px;
    background-size: cover;
    background-position: center;
    background-color: var(--wp--preset--color--sugar);
    border: 1px solid var(--sb-ink-light);
    transition: transform .3s;
    flex-shrink: 0;
}
.sb-related-card:hover .sb-related-card__pic { transform: scale(1.02); }
.sb-related-card__body { display: block; padding-top: var(--wp--preset--spacing--xxs); }
.sb-related-card__cat {
    display: block;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--wp--preset--color--saddle);
    margin-bottom: 6px;
}
.sb-related-card__title {
    display: block;
    font-family: var(--wp--preset--font-family--cormorant);
    font-size: var(--wp--preset--font-size--card-title);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.005em;
    color: var(--wp--preset--color--ink);
    margin: 0 0 6px;
}
.sb-related-card:hover .sb-related-card__title {
    color: var(--wp--preset--color--saddle);
}
.sb-related-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--wp--preset--font-family--lora);
    font-style: italic;
    font-size: 11px;
    color: rgba(42, 26, 10, .55);
}
.sb-related-card__stars {
    color: var(--wp--preset--color--tuscan);
    font-style: normal;
    letter-spacing: 1px;
}

/* -------------------------------------------------------------------------
 * Ad-inserter slot frames.
 *
 * Targets the `ad-inserter` plugin's wrapper variants (.code-block,
 * .ai-viewport-*, .ai-attributes, [data-ai-name]). Frames any inserted ad
 * with thin saddle rules + an italic Cormorant 'Advertisement' chip.
 *
 * Production wrapper captured in docs/design-system/references/integrations-snippets.md.
 * Refresh selectors here when ad-inserter plugin DOM changes.
 *
 * Note: token-purity allows rgba() — not a raw 6-digit hex.
 * ------------------------------------------------------------------------- */
.code-block,
.ai-viewport-0,
.ai-viewport-1,
.ai-viewport-2,
.ai-viewport-3,
.ai-attributes,
[data-ai-name] {
    position: relative;
    margin: var(--wp--preset--spacing--lg) auto !important;
    max-width: 720px;
    padding: 28px 0 8px !important;
    border-top: 1px solid rgba(132, 87, 47, 0.18);
    border-bottom: 1px solid rgba(132, 87, 47, 0.18);
}
.code-block::before,
.ai-viewport-0::before,
.ai-viewport-1::before,
.ai-viewport-2::before,
.ai-viewport-3::before,
.ai-attributes::before,
[data-ai-name]::before {
    content: '— Advertisement —';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wp--preset--color--paper);
    padding: 0 12px;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: 11px;
    color: rgba(132, 87, 47, 0.65);
    letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
 * Shared components.
 *
 * Cross-pattern reusable components and utilities. Migrated from the
 * deprecated assets/css/patterns.css monolith in Phase 11.
 *
 *   .sb-seal               — circular badge stamp (variant: --overlay; the
 *                            --mailbag variant lives scoped inside
 *                            patterns/homepage/subscribe-block/style.css).
 *   .sb-btn                — call-to-action pill button (variants:
 *                            --primary, --ghost).
 *   .sb-byline-*           — single-post byline rating/star/separator.
 *   .sb-search-badge       — post-type badge inside search-result cards.
 *   .sb-archive-pagination — roman-pip pagination (and the WP-core
 *                            .wp-block-query-pagination fallback styling).
 *   .sb-coll-archive-grid  — collections archive grid (lives on template
 *                            templates/archive-collection.html, not on a
 *                            pattern, so it's a global concern).
 *   .sb-recipe__action,
 *   .sb-unit-btn           — recipe action / unit-toggle buttons (Polish H).
 *   .sb-cta-jump,
 *   .sb-cta-review         — jump-to-recipe / leave-a-review pills.
 *   .sb-about-intro,
 *   .sb-about-portrait     — About-page intro layout (saved post content).
 *   .sb-recipe-post-content,
 *   .sb-article-post-content — drop-cap + tracked-uppercase h2 rules for
 *                            single-recipe / single-article post bodies.
 *   .entry-content figure  — inline figure / figcaption framing.
 *   .sb-page-*             — page-tailored layout tweaks.
 *   Polish v2 cross-cutters — ::selection, text-wrap balance/pretty,
 *                            :focus-visible saddle ring, scroll-margin-top,
 *                            .sb-skip-link, lazy-image fade,
 *                            .sb-progress-bar, view-transition @supports,
 *                            prefers-reduced-motion respect.
 *
 * Verify before adding new rules here: components belong in global.css; rules
 * specific to one pattern belong in patterns/<family>/<slug>/style.css.
 * ------------------------------------------------------------------------- */

/* Round seal */
.sb-seal {
    width: 96px;
    height: 96px;
    border: 1.5px solid var(--wp--preset--color--saddle);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--saddle);
    background: rgba(237, 213, 192, 0.4);
    position: relative;
    text-align: center;
    line-height: 1.2;
}
.sb-seal::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--wp--preset--color--saddle);
    border-radius: 50%;
    opacity: 0.4;
}
.sb-seal-line-1,
.sb-seal-line-3 {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 8.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
}
.sb-seal-line-2 {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: 16px;
    margin: 4px 0;
    font-weight: 500;
}

.sb-seal--overlay {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 96px;
    height: 96px;
    background: rgba(132,87,47,.85);
    color: var(--wp--preset--color--paper);
    border: 1.5px solid var(--wp--preset--color--paper);
}
.sb-seal--overlay::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--wp--preset--color--paper);
    border-radius: 50%;
    opacity: .5;
}
.sb-seal--overlay .sb-seal-line-1,
.sb-seal--overlay .sb-seal-line-2,
.sb-seal--overlay .sb-seal-line-3 {
    color: var(--wp--preset--color--paper);
}

/* Recipe single byline rating */
.sb-byline-rating {
    color: var(--wp--preset--color--saddle);
    font-style: normal;
}
.sb-byline-stars {
    color: var(--wp--preset--color--tuscan);
    letter-spacing: 0.04em;
    margin-right: 4px;
}
.sb-byline-sep {
    color: rgba(132, 87, 47, 0.4);
    margin: 0 6px;
}

/* Search results badge color per post type */
.sb-search-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.post-type-recipe .sb-search-badge { background: var(--wp--preset--color--saddle); }
.post-type-post .category-culture .sb-search-badge { background: var(--wp--preset--color--breeze); color: var(--wp--preset--color--ink); }
.post-type-post .category-baking-tips .sb-search-badge { background: var(--wp--preset--color--tuscan); color: var(--wp--preset--color--ink); }

/* Generic CTA pill */
.sb-btn {
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    padding: 13px 22px;
    border: 1.5px solid var(--wp--preset--color--ink);
    border-radius: 999px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.sb-btn--primary {
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--paper);
}
.sb-btn--ghost {
    background: transparent;
    color: var(--wp--preset--color--ink);
}

/* Polish H — recipe action buttons must use Manrope (not browser default). */
.sb-recipe__action,
.sb-unit-btn,
.sb-recipe-action-btn,
button.sb-unit-btn,
.sb-recipe button {
    font-family: var(--wp--preset--font-family--manrope) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
}

/* Roman pagination */
.sb-archive-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px 36px 40px;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.sb-archive-pagination .sb-pg {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wp--preset--color--saddle);
    border-radius: 50%;
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sb-archive-pagination .sb-pg:hover {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.sb-archive-pagination .sb-pg.is-on {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}
.sb-archive-pagination .sb-pg--next,
.sb-archive-pagination .sb-pg--arrow {
    width: auto;
    padding: 0 16px;
    border-radius: 999px;
}

/* Override the default WP query-pagination block on archives so any leftover
   instance still reads as roman pips rather than as plain underlined numbers. */
.wp-block-query-pagination {
    justify-content: center;
    gap: 6px;
}
.wp-block-query-pagination .page-numbers {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wp--preset--color--saddle);
    border-radius: 50%;
    color: var(--wp--preset--color--saddle);
    text-decoration: none;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 11px;
    letter-spacing: 0.2em;
}
.wp-block-query-pagination .page-numbers.current {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
}

@media (max-width: 800px) {
    .sb-archive-pagination { padding-left: 16px; padding-right: 16px; }
}

/* Collections archive grid (template-level — templates/archive-collection.html). */
.sb-coll-archive-grid .wp-block-post {
    margin-bottom: 24px;
}

/* Recipe action share-flash + jump/review pill hover (Phase K). */
.sb-recipe__action.is-flashing {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
    position: relative;
}
.sb-recipe__action.is-flashing::after {
    content: attr(data-flash);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--paper);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

/* Jump-to-recipe / Leave-a-review pills (Task K2). */
.sb-cta-jump .wp-block-button__link,
.sb-cta-review .wp-block-button__link {
    cursor: pointer !important;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.sb-cta-jump .wp-block-button__link:hover,
.sb-cta-jump .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--ink) !important;
    color: var(--wp--preset--color--paper) !important;
    transform: translateY(-1px);
}
.sb-cta-review .wp-block-button__link:hover,
.sb-cta-review .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--saddle) !important;
    color: var(--wp--preset--color--paper) !important;
    transform: translateY(-1px);
}

/* About page intro layout (Task K4). */
.sb-about-intro {
    align-items: center;
    gap: 32px;
    margin-bottom: var(--wp--preset--spacing--md);
}
.sb-about-portrait img {
    border-radius: 999px;
    object-fit: cover;
    width: 160px !important;
    height: 160px !important;
    flex: 0 0 160px;
    aspect-ratio: 1;
    border: 2px solid var(--wp--preset--color--saddle);
}
@media (max-width: 600px) {
    .sb-about-intro { flex-wrap: wrap !important; justify-content: center !important; }
    .sb-about-portrait img { width: 120px !important; height: 120px !important; flex-basis: 120px; }
}

/* Single-recipe headnote and single-article post bodies: 840px + saddle drop cap. */
.sb-recipe-post-content {
    /* The post-content block already constrains to 840px via contentSize.
       This class is the hook for the drop-cap rule below — anchored to the
       FIRST paragraph that comes before the wp-block-sb-recipe block. */
}
.sb-recipe-post-content > p:first-of-type::first-letter,
.sb-article-post-content > p:first-of-type::first-letter {
    font-family: var(--wp--preset--font-family--cormorant);
    font-weight: 500;
    font-size: 4.4em;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.12em 0 0;
    color: var(--wp--preset--color--saddle);
}
.sb-recipe-post-content > p,
.sb-article-post-content > p {
    font-family: var(--wp--preset--font-family--lora);
    font-size: 17px;
    line-height: 1.78;
}
/* Marcellus all-caps section subheads inside long-form post bodies. */
.sb-recipe-post-content > h2,
.sb-article-post-content > h2 {
    font-family: var(--wp--preset--font-family--marcellus);
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--wp--preset--color--saddle);
    margin: 36px 0 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.sb-recipe-post-content > h2::after,
.sb-article-post-content > h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wp--preset--color--saddle);
    opacity: .4;
}

/* Inline figures inside post bodies (Task 2). */
.entry-content > figure,
.wp-block-post-content > figure,
.entry-content > .wp-block-image,
.wp-block-post-content > .wp-block-image {
    display: block;
    margin-inline: auto;
    text-align: center;
    max-width: min(720px, 100%);
}
.entry-content > figure > img,
.wp-block-post-content > figure > img,
.entry-content > .wp-block-image > img,
.wp-block-post-content > .wp-block-image > img,
.entry-content > .wp-block-image figure > img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}
.entry-content > figure > figcaption,
.wp-block-post-content > figure > figcaption,
.entry-content .wp-block-image figcaption {
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(42, 26, 10, 0.55);
    text-align: center;
    padding-top: 8px;
    margin: 0 auto;
    max-width: 480px;
}
.entry-content > figure.alignwide,
.wp-block-post-content > figure.alignwide,
.entry-content > .wp-block-image.alignwide {
    max-width: 1180px;
    width: 100%;
}
@supports (aspect-ratio: 1) {
    .entry-content > figure > img:where([style*="aspect-ratio"]),
    .wp-block-post-content > figure > img:where([style*="aspect-ratio"]) {
        max-height: 720px;
        width: auto;
    }
}

/* Consecutive figures auto-pair (Task 12). */
.entry-content > figure + figure,
.wp-block-post-content > figure + figure,
.entry-content > .wp-block-image + .wp-block-image,
.wp-block-post-content > .wp-block-image + .wp-block-image {
    margin-top: 12px;
}
.entry-content,
.wp-block-post-content {
    --sb-pair-gap: 16px;
}
.entry-content > figure:has(+ figure),
.wp-block-post-content > figure:has(+ figure) {
    display: inline-block;
    width: calc(50% - var(--sb-pair-gap) / 2);
    margin-right: var(--sb-pair-gap);
    vertical-align: top;
    max-width: none;
}
.entry-content > figure:has(+ figure) + figure,
.wp-block-post-content > figure:has(+ figure) + figure {
    display: inline-block;
    width: calc(50% - var(--sb-pair-gap) / 2);
    margin-right: 0;
    vertical-align: top;
    max-width: none;
}
.entry-content > figure:has(+ figure) > img,
.entry-content > figure:has(+ figure) + figure > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4/5;
}
@media (max-width: 600px) {
    .entry-content > figure:has(+ figure),
    .entry-content > figure:has(+ figure) + figure {
        display: block;
        width: auto;
        margin-right: 0;
    }
}

/* Page-tailored layouts (Task 13). */
.sb-page-about-sunday-baker .wp-block-post-content {
    max-width: 760px;
}
.sb-page-about-sunday-baker .wp-block-post-date,
.sb-page-about-sunday-baker .sb-byline-rating {
    display: none;
}
.sb-page-subscribe main > .wp-block-group:first-child {
    padding-bottom: 0;
}
.sb-page-privacy-policy .wp-block-post-content,
.sb-page-amazon-affiliate-disclosure .wp-block-post-content {
    max-width: 720px;
}
.sb-page-privacy-policy .wp-block-post-content > p,
.sb-page-amazon-affiliate-disclosure .wp-block-post-content > p {
    font-size: 15px;
    line-height: 1.7;
}

/* 404 safety net (full layout in templates/404.html). */
.error404 main {
    text-align: center;
}

/* Collections archive sparse state (Task 14). */
.sb-coll-archive-grid--auto:has(.wp-block-post:nth-child(1):last-child) {
    display: flex !important;
    justify-content: center;
}
.sb-coll-archive-grid--auto:has(.wp-block-post:nth-child(1):last-child) .wp-block-post {
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid var(--wp--preset--color--saddle);
    padding: 24px;
    background: var(--wp--preset--color--paper);
    text-align: center;
}
.sb-coll-archive-grid--auto:has(.wp-block-post:nth-child(1):last-child)::before {
    content: "~ Volume IV begins ~";
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--wp--preset--font-family--cormorant);
    font-style: italic;
    color: var(--wp--preset--color--saddle);
    font-size: 14px;
    margin-bottom: 18px;
}

/* ====================================================================
   Polish v2 — cross-cutting finishing touches (Tasks #1, 4–12).
   Each block is independent and globally applied.
   ==================================================================== */

/* ::selection palette (Task 4) — on-brand saddle/paper. */
::selection {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
    text-shadow: none;
}
::-moz-selection {
    background: var(--wp--preset--color--saddle);
    color: var(--wp--preset--color--paper);
    text-shadow: none;
}

/* text-wrap balance / pretty / hyphens (Task 1, plus bonus). */
.sb-recipe__title,
.sb-recipe-card--lead .sb-recipe-card__title,
.sb-recipe-card__title,
h1.wp-block-post-title,
h1.wp-block-heading,
h2.wp-block-heading {
    /* .sb-two-col-feature__title applies text-wrap: balance in its own
       per-pattern style.css (patterns/homepage/two-col-feature/).
       .sb-search-results .sb-search-hero__ask likewise applies it in
       patterns/search/search-results/style.css. */
    text-wrap: balance;
}
.sb-recipe-post-content > p,
.sb-article-post-content > p,
.entry-content > p,
.wp-block-post-content > p {
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.entry-content,
.wp-block-post-content,
.sb-recipe-post-content,
.sb-article-post-content {
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Global :focus-visible saddle ring (Task 8). */
*:focus-visible {
    outline: 2px solid var(--wp--preset--color--saddle);
    outline-offset: 4px;
    border-radius: 2px;
}
/* Light variants for elements sitting on saddle/ink backgrounds.
   `.sb-subscribe-block__form-submit:focus-visible` lives in
   patterns/homepage/subscribe-block/style.css. */
.sb-cta-jump .wp-block-button__link:focus-visible,
.sb-recipe__action:focus-visible {
    outline-color: var(--wp--preset--color--paper);
    outline-offset: 3px;
}
/* Recipe-card link focus state (Task 12) — visible saddle ring on Tab. */
.sb-recipe-card:focus-visible {
    outline: 2px solid var(--wp--preset--color--saddle);
    outline-offset: 6px;
    border-radius: 2px;
}
.sb-recipe-card:focus-visible .sb-recipe-card__pic {
    transform: scale(1.02);
}

/* scroll-margin-top for hash anchors (Task 9). */
:target,
#main,
#recipe,
#recipe-card,
#respond,
.sb-recipe,
.sb-recipe-post-content {
    scroll-margin-top: 88px;
}

/* Skip-to-content link (Task 10). */
.sb-skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    padding: 10px 18px;
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--paper);
    text-decoration: none;
    font-family: var(--wp--preset--font-family--manrope);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    z-index: 99999;
    border-radius: 999px;
    transition: top 120ms ease;
}
.sb-skip-link:focus,
.sb-skip-link:focus-visible {
    top: 12px;
    outline: 2px solid var(--wp--preset--color--paper);
    outline-offset: 2px;
}

/* Image fade-in on lazy load (Task 11). Pairs with sb-polish.js. */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 350ms ease-out;
}
img[loading="lazy"].is-loaded {
    opacity: 1;
}

/* Progress bar during fetch-and-swap (Task 6). Mounted by sb-polish.js;
   activated by archive-axis-swap.js when a fetch takes > 150 ms. */
.sb-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--wp--preset--color--saddle);
    transform-origin: 0 0;
    transform: scaleX(0);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}
html.sb-progress-active .sb-progress-bar {
    opacity: 1;
    animation: sb-progress 1.4s ease-out forwards;
}
@keyframes sb-progress {
    0%   { transform: scaleX(0);    }
    40%  { transform: scaleX(0.55); }
    80%  { transform: scaleX(0.85); }
    100% { transform: scaleX(0.95); }
}

/* View Transitions naming (Task 5). Per-pattern view-transition-name
   declarations live alongside each pattern's CSS:
     - `.sb-hero-archive`                  → patterns/hero/hero-archive/style.css
     - `.sb-archive-control-sub-tabs`      → patterns/archive-control/archive-control-sub-tabs/style.css
     - `.sb-archive-control-term-chips`    → patterns/archive-control/archive-control-term-chips/style.css
     - `.sb-archive-control-sort-bar`      → patterns/archive-control/archive-control-sort-bar/style.css
     - `.sb-search-results .sb-search-filters`,
       `.sb-search-results .sb-results-list` → patterns/search/search-results/style.css */
@supports (view-transition-name: a) {
    .wp-block-query-pagination { view-transition-name: sb-pagination;  }
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 180ms;
    }
}

/* prefers-reduced-motion respect (Task 7). Disables non-essential motion
   site-wide for users who've opted out. Keeps focus-visible rings. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html.sb-progress-active .sb-progress-bar {
        animation: none;
        transform: scaleX(0.95);
    }
    img[loading="lazy"] {
        opacity: 1; /* skip the fade — straight to visible */
    }
}

/* sb/annotated-photo */
.sb-annotated-photo {
  margin-top: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--md);
}
.sb-annotated-photo__image {
  position: relative;
}
.sb-annotated-photo__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.sb-annotated-photo__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp--preset--color--saddle);
  color: var(--wp--preset--color--paper);
  font-family: var(--wp--preset--font-family--marcellus);
  font-size: var(--wp--preset--font-size--meta);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.sb-annotated-photo__legend {
  margin-top: var(--wp--preset--spacing--xs-loose);
  margin-bottom: 0;
  padding-left: 0;
  list-style: decimal inside;
  font-family: var(--wp--preset--font-family--lora);
  font-size: var(--wp--preset--font-size--sm-tight);
  line-height: 1.5;
}
.sb-annotated-photo__legend li {
  margin-top: var(--wp--preset--spacing--xxs);
  margin-bottom: var(--wp--preset--spacing--xxs);
}