/* 2026-05-02 (Agent B) — site-wide smooth-scroll for in-page anchor
       jumps (e.g. the book-lead link → iframe). The existing #22
       prefers-reduced-motion block already neutralizes this to `auto`
       for users who request reduced motion. */
    html { scroll-behavior: smooth; }

    :root {
        --asco-cream: #faf6ee;
        --asco-cream-deep: #f3ecdc;
        --asco-ink: #2d2d2a;
        --asco-ink-soft: #4a4944;
        --asco-terracotta: #c47254;
        --asco-terracotta-deep: #a55c41;
        --asco-clay: #8b6f4e;
        --asco-sage: #7a8a6e;
        --asco-line: #e8e1d3;
        --asco-card-bg: #ffffff;
        --asco-shadow: 0 8px 24px rgba(45, 45, 42, 0.06);
        --asco-shadow-lg: 0 14px 40px rgba(45, 45, 42, 0.12);
        --asco-radius: 10px;
        --asco-radius-lg: 16px;
        --asco-font-display: "Capriola", Georgia, serif;
        --asco-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }

    body {
        background: var(--asco-cream);
        color: var(--asco-ink-soft);
        font-family: var(--asco-font-body);
        line-height: 1.6;
    }

    h1, h2, h3, h4, h5, h6,
    .wp-block-heading,
    .entry-title {
        font-family: var(--asco-font-display);
        color: var(--asco-ink);
        letter-spacing: 0.005em;
        line-height: 1.18;
    }

    a { color: var(--asco-terracotta-deep); }
    a:hover { color: var(--asco-terracotta); }

    /* ---------- Hero block ---------- */
    .asco-hero {
        /* 2026-05-02 (Agent E) — was a cream-gradient block; switched
           to a TCC studio-front photo with a 55% dark overlay for text
           contrast. Layered linear-gradient over the image so headline
           and tagline stay readable in white. Image: home-hero-bg.jpg
           (1410×x px, ~388 KB). */
        background-image:
            linear-gradient(rgba(45, 45, 42, 0.55), rgba(45, 45, 42, 0.55)),
            url("/wp-content/uploads/2026/05/home-hero-bg.jpg");
        background-position: center, center;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
        border-radius: var(--asco-radius-lg);
        margin: 0 auto 3rem;
        max-width: 1200px;
        text-align: center;
        color: #fff;          /* default text color over the dark overlay */
    }
    .asco-hero h1 {
        font-size: clamp(2.2rem, 5.5vw, 3.6rem);
        margin: 0 0 1rem;
        color: #fff;
        /* Soft dark halo via stacked text-shadows — gives the text a
           translucent dark "glow" that hugs each glyph, so it pops on
           any part of the bg image without changing layout. Stacking
           short + long shadows produces a smoother halo than a single
           offset shadow. */
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.7),
            0 2px 6px rgba(0, 0, 0, 0.55),
            0 4px 16px rgba(0, 0, 0, 0.4);
    }
    .asco-hero-tagline {
        font-size: clamp(1.05rem, 1.6vw, 1.2rem);
        color: rgba(255, 255, 255, 0.95);
        max-width: 38em;
        margin: 0 auto 2rem;
        /* Same halo treatment, slightly tighter — tagline is smaller text
           so the long-radius shadow gets exaggerated. */
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.7),
            0 1px 4px rgba(0, 0, 0, 0.5),
            0 2px 10px rgba(0, 0, 0, 0.35);
    }
    /* Keep the ghost CTA visible against the dark hero — flip its border
       and text to white. The terracotta primary button already reads
       fine over the dark overlay. */
    .asco-hero .asco-btn--ghost {
        color: #fff !important;
        border-color: #fff;
    }
    .asco-hero .asco-btn--ghost:hover {
        background: #fff;
        color: var(--asco-ink) !important;
    }

    /* ---------- About-page hero quote ----------
       The first block on /about/ is a wp:quote with the Lupita Nyong'o
       quote. Style with bg image + dark overlay + white text halo for
       legibility, but keep the original left-aligned + vertical-bar
       layout (i.e. NOT centered). The vertical bar is recolored cream
       to read against the dark overlay. Image matches the workshops
       hero so /about/ and /workshops/ feel related. 2026-05-02 (Agent E). */
    body.page-about .wp-block-quote {
        position: relative;
        background-image:
            linear-gradient(rgba(45, 45, 42, 0.55), rgba(45, 45, 42, 0.55)),
            url("/wp-content/uploads/2026/05/workshops-hero-bg.jpg");
        background-position: center, center;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        /* Extra left padding so the inset vertical bar (drawn via the
           ::before pseudo below) has clear space between it and the
           text. */
        padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem) clamp(2.75rem, 6vw, 4rem);
        border-radius: var(--asco-radius-lg);
        margin: 0 auto 3rem;
        max-width: 1200px;
        text-align: left;
        color: #fff;
        box-shadow: var(--asco-shadow);
        /* Theme reset — Twenty Twenty-Five draws its own border on
           wp-block-quote that we don't want competing with our bar. */
        border: 0;
    }
    /* Vertical bar drawn via pseudo-element so it sits ON TOP of the bg
       image at full opacity. (border-left would also work, but Twenty
       Twenty-Five's block-quote stylesheet sometimes wins specificity
       battles; the pseudo is foolproof.) */
    body.page-about .wp-block-quote::before {
        content: "";
        position: absolute;
        left: clamp(1rem, 2.5vw, 1.5rem);
        top: clamp(2rem, 5vw, 3.5rem);
        bottom: clamp(2rem, 5vw, 3.5rem);
        width: 4px;
        background: var(--asco-cream);
        border-radius: 2px;
    }
    body.page-about .wp-block-quote p {
        font-size: clamp(1.4rem, 3vw, 2.1rem);
        font-style: italic;
        line-height: 1.4;
        margin: 0 0 1rem;
        color: #fff;
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.7),
            0 2px 6px rgba(0, 0, 0, 0.55),
            0 4px 16px rgba(0, 0, 0, 0.4);
    }
    body.page-about .wp-block-quote cite {
        display: block;
        font-style: normal;
        font-size: clamp(0.95rem, 1.4vw, 1.05rem);
        color: rgba(255, 255, 255, 0.92);
        letter-spacing: 0.02em;
        text-shadow:
            0 1px 2px rgba(0, 0, 0, 0.7),
            0 1px 4px rgba(0, 0, 0, 0.5),
            0 2px 10px rgba(0, 0, 0, 0.35);
    }
    .asco-hero-cta {
        display: inline-flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .asco-btn {
        display: inline-block;
        padding: 0.85rem 1.6rem;
        border-radius: 999px;
        background: var(--asco-terracotta);
        color: #fff !important;
        text-decoration: none !important;
        font-weight: 600;
        font-size: 0.98rem;
        border: 0;
        cursor: pointer;
        transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
        box-shadow: var(--asco-shadow);
    }
    .asco-btn:hover {
        background: var(--asco-terracotta-deep);
        transform: translateY(-1px);
        box-shadow: var(--asco-shadow-lg);
        color: #fff !important;
    }
    .asco-btn--ghost {
        background: transparent;
        color: var(--asco-ink) !important;
        border: 1.5px solid var(--asco-ink);
        box-shadow: none;
    }
    .asco-btn--ghost:hover {
        background: var(--asco-ink);
        color: #fff !important;
    }

    /* ---------- Section ---------- */
    .asco-section {
        max-width: 1200px;
        margin: 0 auto;
        padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
    }
    .asco-section--alt {
        background: var(--asco-card-bg);
        border-radius: var(--asco-radius-lg);
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
    .asco-section h2 {
        font-size: clamp(1.7rem, 3.5vw, 2.4rem);
        margin: 0 0 0.4rem;
    }
    .asco-section-lede {
        color: var(--asco-ink-soft);
        font-size: 1.05rem;
        max-width: 40em;
        margin: 0 0 2rem;
    }
    .asco-section-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }
    .asco-section-link {
        font-size: 0.95rem;
        color: var(--asco-clay);
    }

    /* ---------- Gallery cards (used by workshops_gallery shortcode) ---------- */
    .asco-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    /* #20a — `display: grid` above otherwise overrides the [hidden]
       attribute from the user-agent stylesheet, leaving the hidden
       search-target gallery (and the toggled-off browse gallery) visible.
       Force [hidden] back to `display: none` so the dual-gallery
       swap on /classes/ works. */
    .asco-gallery[hidden] {
        display: none !important;
    }
    /* Category pages (~/classes/<slug>/) ship the gallery with `alignwide`
       so the block theme widens it to match the top-level /classes/
       overview. Fallback rules here keep the wide layout even if the page
       template doesn't honor alignwide on shortcode-rendered children. */
    .asco-gallery.alignwide,
    .asco-instructor-detail.alignwide {
        max-width: var(--wp--style--global--wide-size, 1200px);
        margin-inline: auto;
        width: 100%;
    }
    .asco-card {
        display: block;
        text-decoration: none !important;
        color: inherit;
        background: var(--asco-card-bg);
        border-radius: var(--asco-radius);
        overflow: hidden;
        transition: transform 160ms ease, box-shadow 160ms ease;
        box-shadow: var(--asco-shadow);
    }
    .asco-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--asco-shadow-lg);
        color: inherit;
    }
    .asco-card-thumb {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: cover;
        background: var(--asco-cream-deep);
    }
    /* 2026-05-02 (Agent E) — Layer-2 (per-category workshop) pages get
       shorter card thumbs. Same image, just cropped to half height via
       object-fit: cover (no skew). The asco-classes-subpage body class
       is added by the body_class filter for any direct child of the
       /classes/ page. To revert: remove this rule. */
    body.asco-classes-subpage .asco-card-thumb {
        height: 110px;
    }
    .asco-card-body { padding: 1.1rem 1.25rem 1.4rem; }
    .asco-card-body h3 {
        margin: 0 0 0.5rem;
        font-size: 1.2rem;
        line-height: 1.3;
    }
    .asco-card-body p {
        margin: 0.35rem 0 0;
        color: var(--asco-ink-soft);
        font-size: 0.95rem;
        line-height: 1.5;
        /* Clamp the gallery blurb to 3 lines for visual consistency. */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .asco-card-meta {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        font-size: 0.8rem;
        color: var(--asco-clay);
        margin-bottom: 0.45rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
    }
    /* #12 — capacity badge under the meta strip */
    .asco-card-cap {
        display: inline-block;
        margin: 0.15rem 0 0.6rem;
        padding: 0.2rem 0.55rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border-radius: 999px;
    }
    .asco-card-cap--soldout { background: rgba(45,45,42,0.85); color: #faf6ee; }
    .asco-card-cap--low     { background: rgba(196,114,84,0.16); color: var(--asco-terracotta-deep); }

    /* #7 — Testimonials section */
    .asco-testimonials .asco-testimonial-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.2rem;
        margin-top: 1.5rem;
    }
    .asco-testimonial {
        margin: 0;
        padding: 1.2rem 1.3rem 1.1rem;
        background: var(--asco-cream);
        border-left: 3px solid var(--asco-terracotta);
        border-radius: var(--asco-radius);
        box-shadow: var(--asco-shadow);
    }
    .asco-testimonial blockquote {
        margin: 0 0 0.8rem;
        padding: 0;
        font-size: 0.97rem;
        line-height: 1.55;
        color: var(--asco-ink);
        border: 0;
        font-style: italic;
    }
    .asco-testimonial figcaption {
        font-size: 0.85rem;
        color: var(--asco-ink-soft);
    }
    .asco-testimonial-context { color: var(--asco-clay); }

    /* #8 — Membership compare table */
    .asco-mc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.2rem;
        margin-top: 1.5rem;
    }
    .asco-mc-tier {
        position: relative;
        padding: 1.5rem 1.4rem 1.4rem;
        background: var(--asco-card-bg);
        border: 1px solid var(--asco-line);
        border-radius: var(--asco-radius);
        box-shadow: var(--asco-shadow);
    }
    .asco-mc-tier--featured {
        border-color: var(--asco-terracotta);
        box-shadow: 0 14px 40px rgba(196, 114, 84, 0.18);
        transform: translateY(-2px);
    }
    .asco-mc-badge {
        position: absolute;
        top: -10px;
        left: 1.2rem;
        background: var(--asco-terracotta-deep);
        color: var(--asco-cream);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 0.2rem 0.7rem;
        border-radius: 999px;
    }
    .asco-mc-name { margin: 0 0 0.5rem; font-size: 1.1rem; }
    .asco-mc-price {
        margin: 0 0 0.4rem;
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--asco-ink);
    }
    .asco-mc-cycle {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--asco-ink-soft);
    }
    .asco-mc-tag {
        margin: 0 0 1rem;
        color: var(--asco-clay);
        font-style: italic;
        font-size: 0.92rem;
    }
    .asco-mc-features {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 0.92rem;
    }
    .asco-mc-features li {
        padding: 0.35rem 0 0.35rem 1.4rem;
        position: relative;
        color: var(--asco-ink-soft);
        border-top: 1px solid var(--asco-line);
    }
    .asco-mc-features li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0.35rem;
        color: var(--asco-terracotta);
        font-weight: 700;
    }

    /* #8 — Membership FAQ accordion */
    .asco-mfaq-list { margin-top: 1.5rem; }
    .asco-mfaq-item {
        border-top: 1px solid var(--asco-line);
        padding: 0.6rem 0;
    }
    .asco-mfaq-item:last-child { border-bottom: 1px solid var(--asco-line); }
    .asco-mfaq-item summary {
        cursor: pointer;
        font-weight: 600;
        font-size: 1rem;
        color: var(--asco-ink);
        list-style: none;
        position: relative;
        padding-right: 1.5rem;
    }
    .asco-mfaq-item summary::-webkit-details-marker { display: none; }
    .asco-mfaq-item summary::after {
        content: "+";
        position: absolute;
        right: 0;
        top: -2px;
        font-size: 1.4rem;
        color: var(--asco-terracotta);
        line-height: 1;
        transition: transform 0.15s;
    }
    .asco-mfaq-item[open] summary::after { content: "−"; }
    .asco-mfaq-item p {
        margin: 0.6rem 0 0;
        color: var(--asco-ink-soft);
        line-height: 1.55;
    }

    /* ---------- Single workshop page ---------- */
    body.single-workshop main,
    body.single-workshop .wp-site-blocks,
    body.single-workshop article {
        background: var(--asco-cream);
    }
    body.single-workshop .entry-content,
    body.single-workshop .wp-block-post-content {
        max-width: 880px;
        margin: 0 auto;
        padding: 0 1rem;
    }
    body.single-workshop iframe[src*="acuityscheduling.com"] {
        width: 100%;
        max-width: 880px;
        border: 1px solid var(--asco-line);
        border-radius: var(--asco-radius);
        box-shadow: var(--asco-shadow);
        margin: 1.5rem auto;
        display: block;
    }
    body.single-workshop .wp-block-post-featured-image img,
    body.single-workshop .post-thumbnail img {
        border-radius: var(--asco-radius-lg);
        box-shadow: var(--asco-shadow);
        max-height: 480px;
        object-fit: cover;
    }
    body.single-workshop h1.entry-title,
    body.single-workshop h1.wp-block-post-title {
        font-size: clamp(2rem, 4.5vw, 2.8rem);
        text-align: center;
        margin: 1.5rem 0 0.5rem;
    }

    /* ---------- About / Contact bands ---------- */
    .asco-info-band {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.25rem;
        background: var(--asco-card-bg);
        padding: 2rem;
        border-radius: var(--asco-radius-lg);
        box-shadow: var(--asco-shadow);
        margin: 2rem 0;
    }
    .asco-info-band div h4 {
        margin: 0 0 0.4rem;
        font-size: 1.05rem;
        color: var(--asco-ink);
        font-family: var(--asco-font-display);
    }
    .asco-info-band div p {
        margin: 0;
        color: var(--asco-ink-soft);
        font-size: 0.95rem;
    }

    /* ---------- Header site-mark ---------- */
    .wp-block-site-title a {
        color: var(--asco-ink) !important;
        font-family: var(--asco-font-display);
        font-size: 1.45rem;
        text-decoration: none;
        letter-spacing: 0.01em;
    }
    .wp-block-site-title a::before {
        content: "";
        display: inline-block;
        width: 22px;
        height: 22px;
        margin-right: 0.55rem;
        vertical-align: -4px;
        background: var(--asco-terracotta);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 3c-2.5 0-4.5 1.4-4.5 3v3c-1.5.4-2.5 1.4-2.5 2.5C5 13 7 14.5 12 14.5s7-1.5 7-3c0-1.1-1-2.1-2.5-2.5V6c0-1.6-2-3-4.5-3zm0 13c-3 0-6-.6-7.5-2v3c0 2 3.5 4 7.5 4s7.5-2 7.5-4v-3c-1.5 1.4-4.5 2-7.5 2z'/></svg>") center / contain no-repeat;
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 3c-2.5 0-4.5 1.4-4.5 3v3c-1.5.4-2.5 1.4-2.5 2.5C5 13 7 14.5 12 14.5s7-1.5 7-3c0-1.1-1-2.1-2.5-2.5V6c0-1.6-2-3-4.5-3zm0 13c-3 0-6-.6-7.5-2v3c0 2 3.5 4 7.5 4s7.5-2 7.5-4v-3c-1.5 1.4-4.5 2-7.5 2z'/></svg>") center / contain no-repeat;
    }

    /* ---------- Custom footer ---------- */
    .asco-footer {
        background: var(--asco-ink);
        color: #f0e9d8;
        padding: 3rem 1.25rem 2rem;
        margin-top: 4rem;
    }
    .asco-footer-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2rem;
    }
    .asco-footer h4 {
        font-family: var(--asco-font-display);
        color: #f8efd8;
        font-size: 1rem;
        letter-spacing: 0.04em;
        margin: 0 0 0.7rem;
    }
    .asco-footer p, .asco-footer li, .asco-footer a {
        color: #d8cfb8;
        font-size: 0.93rem;
        line-height: 1.55;
    }
    .asco-footer ul { list-style: none; padding: 0; margin: 0; }
    .asco-footer ul li { margin-bottom: 0.35rem; }
    .asco-footer a {
        text-decoration: none;
        border-bottom: 1px dotted rgba(216, 207, 184, 0.35);
        transition: color 120ms ease, border-color 120ms ease;
    }
    .asco-footer a:hover { color: #fff; border-color: var(--asco-terracotta); }
    .asco-footer-bottom {
        max-width: 1200px;
        margin: 2.5rem auto 0;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.82rem;
        color: #a89e85;
        text-align: center;
    }
    .asco-footer-socials {
        margin-top: 0.75rem;
        display: flex;
        gap: 0.85rem;
    }
    .asco-footer-socials a {
        display: inline-block;
        padding: 0.3rem 0.75rem;
        border: 1px solid rgba(216, 207, 184, 0.4);
        border-radius: 999px;
        font-size: 0.85rem;
    }
    .asco-footer-hours {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .asco-footer-hours li {
        padding: 0.2rem 0;
    }
    .asco-footer-brand {
        font-family: var(--asco-font-display);
        color: #f8efd8;
        font-size: 1.2rem;
        margin-bottom: 0.4rem;
    }

    /* ---------- Membership tiers ---------- */
    .asco-tiers {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin: 2rem 0;
    }
    .asco-tier {
        background: var(--asco-card-bg);
        border-radius: var(--asco-radius-lg);
        padding: 2rem 1.75rem;
        box-shadow: var(--asco-shadow);
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        position: relative;
    }
    .asco-tier--featured {
        background: linear-gradient(135deg, #fff 0%, var(--asco-cream-deep) 100%);
        border: 2px solid var(--asco-terracotta);
    }
    .asco-tier-badge {
        position: absolute;
        top: -0.7rem;
        right: 1.4rem;
        background: var(--asco-terracotta);
        color: #fff;
        padding: 0.2rem 0.7rem;
        border-radius: 999px;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
    }
    .asco-tier-name {
        margin: 0;
        font-size: 1.25rem;
        color: var(--asco-ink);
        font-family: var(--asco-font-display);
    }
    .asco-tier-price {
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
    }
    .asco-tier-amount {
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--asco-ink);
        font-family: var(--asco-font-display);
    }
    .asco-tier-cycle {
        color: var(--asco-clay);
        font-size: 0.9rem;
    }
    .asco-tier-tagline {
        margin: 0;
        color: var(--asco-ink-soft);
        font-size: 0.95rem;
        font-style: italic;
    }
    .asco-tier-highlights {
        list-style: none;
        padding: 0;
        margin: 0.4rem 0 0.5rem;
    }
    .asco-tier-highlights li {
        padding: 0.4rem 0 0.4rem 1.5rem;
        color: var(--asco-ink-soft);
        font-size: 0.95rem;
        position: relative;
    }
    .asco-tier-highlights li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--asco-terracotta);
        font-weight: 700;
    }
    .asco-tier-cta {
        align-self: stretch;
        text-align: center;
        margin-top: auto;
    }
    .asco-tier-soon {
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* ---------- FAQ ---------- */
    .asco-faq { max-width: 760px; margin: 0 auto; }
    .asco-faq-item {
        background: var(--asco-card-bg);
        border-radius: var(--asco-radius);
        margin-bottom: 0.75rem;
        box-shadow: var(--asco-shadow);
        overflow: hidden;
    }
    .asco-faq-item summary {
        padding: 1rem 1.25rem;
        cursor: pointer;
        list-style: none;
        font-family: var(--asco-font-display);
        color: var(--asco-ink);
        font-size: 1.05rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    .asco-faq-item summary::-webkit-details-marker { display: none; }
    .asco-faq-item summary::after {
        content: "+";
        font-size: 1.4rem;
        color: var(--asco-clay);
        font-family: var(--asco-font-body);
        flex-shrink: 0;
        transition: transform 200ms ease;
    }
    .asco-faq-item[open] summary::after {
        transform: rotate(45deg);
    }
    .asco-faq-answer {
        padding: 0 1.25rem 1.1rem;
        color: var(--asco-ink-soft);
        line-height: 1.6;
    }

    /* ---------- Contact card ---------- */
    .asco-contact-card {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.5rem;
        margin: 1.5rem 0;
    }
    .asco-contact-row {
        background: var(--asco-card-bg);
        border-radius: var(--asco-radius);
        padding: 1.25rem 1.4rem;
        box-shadow: var(--asco-shadow);
    }
    .asco-contact-row h3 {
        margin: 0 0 0.4rem;
        font-size: 1.15rem;
        font-family: var(--asco-font-display);
        color: var(--asco-ink);
    }
    .asco-contact-row p { margin: 0 0 0.55rem; color: var(--asco-ink-soft); }

    /* ---------- Instructors ---------- */
    .asco-instructors-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.5rem;
    }
    .asco-instructor {
        background: var(--asco-card-bg);
        border-radius: var(--asco-radius);
        padding: 1.25rem;
        text-align: center;
        box-shadow: var(--asco-shadow);
    }
    .asco-instructor-photo {
        width: 120px; height: 120px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto 0.85rem;
        display: block;
    }
    .asco-instructor-name {
        margin: 0 0 0.2rem;
        font-size: 1.1rem;
        font-family: var(--asco-font-display);
    }
    .asco-instructor-role {
        margin: 0 0 0.5rem;
        color: var(--asco-clay);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }
    .asco-instructor-bio {
        margin: 0;
        color: var(--asco-ink-soft);
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* ---------- Empty state for content not yet populated ---------- */
    .asco-empty {
        text-align: center;
        padding: 2.5rem 1.5rem;
        background: var(--asco-card-bg);
        border-radius: var(--asco-radius-lg);
        color: var(--asco-ink-soft);
        font-size: 1.05rem;
        line-height: 1.55;
        box-shadow: var(--asco-shadow);
    }

    /* ---------- Calendar (workshops_calendar shortcode) ---------- */
    .asco-calendar { max-width: 880px; margin: 0 auto; }
    .asco-calendar-month { margin-bottom: 2.5rem; }
    .asco-calendar-month-label {
        font-size: 1.6rem;
        margin: 0 0 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--asco-line);
        color: var(--asco-ink);
    }
    .asco-calendar-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .asco-calendar-row { margin-bottom: 0.5rem; }
    .asco-calendar-link {
        display: grid;
        grid-template-columns: 9rem 1fr auto;
        align-items: center;
        gap: 1rem;
        padding: 0.95rem 1.1rem;
        background: var(--asco-card-bg);
        border: 1px solid var(--asco-line);
        border-radius: var(--asco-radius);
        text-decoration: none !important;
        color: inherit;
        transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    }
    .asco-calendar-link:hover {
        border-color: var(--asco-terracotta);
        box-shadow: var(--asco-shadow);
        transform: translateY(-1px);
        color: inherit;
    }
    .asco-calendar-date { display: flex; flex-direction: column; }
    .asco-calendar-day {
        font-family: var(--asco-font-display);
        color: var(--asco-ink);
        font-size: 1.05rem;
        line-height: 1.2;
    }
    .asco-calendar-time {
        font-size: 0.85rem;
        color: var(--asco-clay);
        margin-top: 0.15rem;
    }
    .asco-calendar-meta { display: flex; flex-direction: column; gap: 0.3rem; }
    .asco-calendar-title {
        font-weight: 600;
        color: var(--asco-ink);
        font-size: 1rem;
    }
    .asco-calendar-tags {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .asco-calendar-tag {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--asco-clay);
    }
    .asco-calendar-tag.asco-tag-location {
        background: var(--asco-cream-deep);
        color: var(--asco-ink);
        padding: 0.2rem 0.55rem 0.2rem 0.4rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-weight: 600;
    }
    .asco-calendar-tag.asco-tag-location::before {
        content: "📍";
        font-size: 0.85rem;
        line-height: 1;
    }
    .asco-calendar-tag.asco-tag-price {
        color: var(--asco-terracotta-deep);
    }
    .asco-calendar-cta {
        font-size: 0.95rem;
        color: var(--asco-terracotta-deep);
        font-weight: 600;
        white-space: nowrap;
    }
    .asco-calendar-empty {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--asco-ink-soft);
        font-style: italic;
    }
    @media (max-width: 600px) {
        .asco-calendar-link {
            grid-template-columns: 1fr;
            gap: 0.4rem;
            padding: 0.85rem 1rem;
        }
        .asco-calendar-cta { text-align: right; }
    }

    /* ---------- Single-workshop meta strip (replaces older
       .asco-location-stamp standalone pill) ---------- */
    .asco-meta-strip {
        max-width: 760px;
        margin: 0.5rem auto 1.25rem;
        padding: 0 1.25rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    .asco-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.35rem 0.85rem;
        border-radius: 999px;
        background: var(--asco-cream-deep);
        color: var(--asco-ink);
        font-size: 0.88rem;
        font-weight: 500;
    }
    .asco-pill-location {
        background: var(--asco-cream-deep);
    }
    .asco-pill-location .asco-pill-sub {
        color: var(--asco-ink-soft);
        font-weight: 400;
    }
    .asco-pill-price {
        background: var(--asco-terracotta);
        color: #fff;
    }
    .asco-pill-category {
        background: transparent;
        border: 1px solid var(--asco-line);
        color: var(--asco-clay);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 0.78rem;
        font-weight: 600;
    }
    /* Legacy class kept for backward compat with any existing posts that
       embed .asco-location-stamp directly. */
    .asco-location-stamp {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: var(--asco-cream-deep);
        color: var(--asco-ink);
        padding: 0.45rem 0.95rem;
        border-radius: 999px;
        font-size: 0.92rem;
        font-weight: 500;
        margin: 0.5rem 0 1.5rem;
    }
    .asco-location-stamp .asco-pin { font-size: 1rem; line-height: 1; }
    .asco-location-stamp .asco-location-address {
        color: var(--asco-ink-soft);
        font-weight: 400;
    }
    .asco-locations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.25rem;
    }
    .asco-location-card {
        background: var(--asco-card-bg);
        border-radius: var(--asco-radius);
        padding: 1.25rem 1.4rem;
        box-shadow: var(--asco-shadow);
    }
    .asco-location-card h3 {
        margin: 0 0 0.4rem;
        font-size: 1.2rem;
        color: var(--asco-ink);
    }
    .asco-location-card-address {
        margin: 0 0 0.5rem;
        color: var(--asco-ink-soft);
        font-size: 0.95rem;
    }
    .asco-location-card-meta {
        margin: 0;
        font-size: 0.85rem;
        color: var(--asco-clay);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
    }

    /* ---------- Single workshop layout ---------- */
    /* Compact image (PIP-style square-ish), tight vertical rhythm,
       readable content column. */
    body.single-workshop .wp-block-post-featured-image {
        max-width: 600px;
        margin: 0.5rem auto 1.25rem;
        padding: 0 1rem;
    }
    body.single-workshop .wp-block-post-featured-image img {
        max-height: 320px;
        width: 100%;
        object-fit: cover;
        border-radius: var(--asco-radius);
        box-shadow: var(--asco-shadow);
    }
    body.single-workshop h1.entry-title,
    body.single-workshop h1.wp-block-post-title {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
        text-align: center;
        margin: 1.25rem auto 0.4rem;
        max-width: 880px;
        padding: 0 1rem;
    }
    body.single-workshop .wp-block-post-content,
    body.single-workshop .entry-content {
        max-width: 760px;
        padding: 0 1.25rem;
        margin: 0 auto;
    }
    body.single-workshop .wp-block-post-content > p:first-of-type,
    body.single-workshop .entry-content > p:first-of-type {
        font-size: 1.05rem;
        color: var(--asco-ink-soft);
        line-height: 1.65;
    }

    /* ---------- Workshop 2-column hero (PIP-style) ----------
       Built by JS at runtime: .asco-hero-grid contains
         .asco-hero-image-col  (the featured image)
         .asco-hero-info-col   (title + .asco-hero-desc which holds
                                meta-strip + description paragraphs)
       The Acuity iframe + policy footer stay outside the hero
       (still inside .wp-block-post-content) so they sit full-width below. */
    .asco-hero-grid {
        max-width: 1100px;
        margin: 1.25rem auto 1rem;
        padding: 0 1.25rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: start;
    }
    @media (min-width: 880px) {
        .asco-hero-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
            gap: 2.5rem;
            margin-top: 2rem;
            margin-bottom: 1.5rem;
        }
    }
    .asco-hero-image-col { margin: 0; }
    /* Reset the single-workshop image rules for images inside the hero. */
    .asco-hero-image-col .wp-block-post-featured-image,
    .asco-hero-image-col.wp-block-post-featured-image {
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .asco-hero-image-col .wp-block-post-featured-image,
    body.single-workshop .asco-hero-image-col > .wp-block-post-featured-image {
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .asco-hero-image-col img,
    .asco-hero-image-col .wp-block-post-featured-image img {
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--asco-radius-lg);
        box-shadow: var(--asco-shadow);
        display: block;
    }
    .asco-hero-info-col {
        display: flex;
        flex-direction: column;
    }
    /* Title in hero: left-aligned, no centering, normal flow. */
    .asco-hero-info-col h1.wp-block-post-title,
    .asco-hero-info-col h1.entry-title,
    body.single-workshop .asco-hero-info-col h1.wp-block-post-title,
    body.single-workshop .asco-hero-info-col h1.entry-title {
        text-align: left;
        margin: 0 0 0.85rem;
        max-width: none;
        padding: 0;
        font-size: clamp(1.8rem, 3.6vw, 2.4rem);
        line-height: 1.15;
    }
    .asco-hero-desc {
        margin: 0;
        color: var(--asco-ink);
    }
    .asco-hero-desc .asco-meta-strip {
        margin: 0 0 1rem;
    }
    .asco-hero-desc p {
        margin: 0 0 0.75rem;
        line-height: 1.6;
        font-size: 1rem;
    }
    .asco-hero-desc > p:first-of-type {
        font-size: 1.05rem;
        color: var(--asco-ink-soft);
        line-height: 1.65;
    }
    /* On desktop, vertically center the info column with the image. */
    @media (min-width: 880px) {
        .asco-hero-grid { align-items: center; }
        .asco-hero-info-col { padding: 0; }
    }
    /* Hide Twenty Twenty-Five's broken "Written by [empty] in [empty]"
       byline. Workshop CPT has no meaningful author or terms, so the
       theme-rendered byline shows orphan label text. JS sweep below
       removes it on initial render; CSS hides it pre-JS. */
    body.single-workshop .wp-block-post-author,
    body.single-workshop .wp-block-post-author-name,
    body.single-workshop .wp-block-post-author-biography,
    body.single-workshop .wp-block-post-terms {
        display: none !important;
    }
    /* Acuity iframe should sit close to the description. */
    body.single-workshop iframe[src*="acuityscheduling.com"] {
        margin: 1rem auto 2rem;
    }
    /* Pre-iframe "Pick a date" lead-in. */
    .asco-book-lead {
        max-width: 760px;
        margin: 1.5rem auto 0.5rem;
        padding: 0 1.25rem;
        font-family: var(--asco-font-display);
        color: var(--asco-ink);
        font-size: 1.15rem;
        text-align: center;
    }
    /* 2026-05-02 (Agent B) — book-lead is now a clickable jump-link to
       #asco-book-target (the iframe anchor). Style as a discoverable
       link without making it look like a button — terracotta underline,
       bumped to terracotta-deep on hover/focus. The ↓ arrow lives
       inside the link so the entire affordance is clickable. */
    .asco-book-lead-link {
        color: var(--asco-terracotta-deep);
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 4px;
        cursor: pointer;
        transition: color 0.15s ease, text-decoration-color 0.15s ease;
    }
    .asco-book-lead-link::before {
        content: "↓";
        display: inline-block;
        margin-right: 0.4rem;
        color: var(--asco-terracotta);
        font-weight: 700;
    }
    .asco-book-lead-link:hover,
    .asco-book-lead-link:focus-visible {
        color: var(--asco-terracotta);
        text-decoration-color: var(--asco-terracotta);
    }
    .asco-book-lead-link:focus-visible {
        outline: 2px solid var(--asco-terracotta);
        outline-offset: 4px;
        border-radius: 2px;
    }
    /* Server-side anchor target — sits just above the iframe. The
       scroll-margin-top gives a small breathing-room offset so the
       iframe doesn't crash flush against the top of the viewport when
       the link is clicked. Visually invisible (zero-height div). */
    #asco-book-target {
        display: block;
        height: 0;
        scroll-margin-top: 1.5rem;
    }
    /* Before-you-book footnote section. */
    .asco-policy-footer {
        max-width: 760px;
        margin: 2rem auto 0;
        padding: 1.5rem 1.5rem;
        background: var(--asco-cream-deep);
        border-radius: var(--asco-radius);
        font-size: 0.92rem;
        color: var(--asco-ink-soft);
        line-height: 1.55;
    }
    .asco-policy-footer h3 {
        margin: 0 0 0.5rem;
        font-size: 1rem;
        font-family: var(--asco-font-display);
        color: var(--asco-ink);
    }
    .asco-policy-footer p { margin: 0 0 0.35rem; }
    .asco-policy-footer a { color: var(--asco-terracotta-deep); }

    /* "Filed under" links on the singular workshop page. */
    .asco-filed-under {
        max-width: 760px;
        margin: 1rem auto 2rem;
        padding: 0 1.25rem;
        font-size: 0.85rem;
        color: var(--asco-ink-soft);
        text-align: center;
    }
    .asco-filed-under span {
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        color: var(--asco-clay);
        margin-right: 0.5rem;
    }
    .asco-filed-under a {
        color: var(--asco-terracotta-deep);
        text-decoration: none;
        border-bottom: 1px dotted var(--asco-terracotta-deep);
    }
    .asco-filed-under a:hover {
        border-bottom-style: solid;
    }

    /* #11 — Hide the theme's post-navigation under single workshop pages.
       Visual noise; nobody wants the "previous workshop / next workshop"
       byline after the booking iframe. Rollback: delete this block. */
    body.single-workshop .post-navigation,
    body.single-workshop .posts-navigation,
    body.single-workshop nav.post-navigation,
    body.single-workshop .wp-block-post-navigation-link,
    body.single-workshop .wp-block-template-part nav.post-navigation {
        display: none !important;
    }

    /* #22 — prefers-reduced-motion: neutralize transitions/animations
       site-wide for users who request reduced motion. Rollback: delete
       this @media block. */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* ---- Storefront / E ---- (v0.33.0+, Phase 1 storefront landing)
       Tinted card thumbs since we don't have product images on the WP
       side yet. Each card gets a distinct two-tone gradient in the
       site's palette so the four cards read as separate destinations
       without needing photography. Phase 2 will replace these thumbs
       with real product imagery. Rollback: delete this block. */
    .asco-storefront-thumb {
        height: 200px;
        position: relative;
        overflow: hidden;
    }
    .asco-storefront-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .asco-storefront-thumb--school_studio {
        background: linear-gradient(135deg, var(--asco-terracotta, #c47254) 0%, var(--asco-terracotta-deep, #9a4f37) 100%);
    }
    .asco-storefront-thumb--member_studio {
        background: linear-gradient(135deg, var(--asco-clay, #b4825c) 0%, var(--asco-ink, #2d2d2a) 100%);
    }
    .asco-storefront-thumb--member_gallery {
        background: linear-gradient(135deg, var(--asco-cream-deep, #ead9bf) 0%, var(--asco-clay, #b4825c) 100%);
    }
    .asco-storefront-thumb--gift_certificates {
        background: linear-gradient(135deg, var(--asco-ink-soft, #5a5a55) 0%, var(--asco-terracotta, #c47254) 100%);
    }
    .asco-storefront-card .asco-card-body p {
        /* The storefront cards have shorter blurbs than workshop
           cards; let them flow without the 3-line clamp the gallery
           cards apply. */
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
    }
    /* Redirect-warning notice (auto-shown above the storefront grid
       whenever any card links off-site). Quietly disappears when
       Phase 2 flips URLs to internal paths. */
    .asco-storefront-notice {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin: 0 auto 1.5rem;
        padding: 1rem 1.25rem;
        max-width: var(--wp--style--global--wide-size, 1200px);
        background: var(--asco-cream-deep, #ead9bf);
        border-left: 4px solid var(--asco-terracotta, #c47254);
        border-radius: var(--asco-radius);
        color: var(--asco-ink, #2d2d2a);
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .asco-storefront-notice p {
        margin: 0;
    }
    .asco-storefront-notice-icon {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        margin-top: 0.1rem;
        color: var(--asco-terracotta-deep, #9a4f37);
    }

    /* ================================================================
       Hero band — TCC-style full-bleed background image with 67% dark
       overlay behind the page title, extended UP behind the site
       header so the image starts at the very top of the viewport, and
       clipped at the bottom with a half-moon arch (TCC uses an SVG
       clip-path computed at runtime; we approximate with
       `clip-path: ellipse(...)` for the same visual).
       Applies to: /instructors/, /shop/, /classes/.
       Per-page bg images: wp-content/uploads/2026/05/{slug}-hero-bg.jpg
       Sources: tucsonclayco-op.com/{instructors,shop,booknow}
       The body_class filter adds `asco-hero-page` to the body of any
       page that should get this treatment (see art-studio-coop.php).
       Added 2026-05-02 (Agent E). Reverse: delete this block + the
       image files + the asco-hero-page body class branch in PHP.
       ================================================================ */
    body.asco-hero-page {
        overflow-x: clip;
    }
    body.asco-hero-page .wp-block-post-title {
        position: relative;
        z-index: 0;
        text-align: center;
        color: #fff;
        margin-top: 0;
        margin-bottom: 2rem;
        padding-top: 2rem;
        padding-bottom: clamp(3.5rem, 11vw, 6rem);
        min-height: 0;
        isolation: isolate;
    }
    /* Mobile: kill every source of space above the hero band, and
       pull the title up with a negative margin so any residual gap
       gets physically eliminated. */
    @media (max-width: 781px) {
        body.asco-hero-page [style*="margin-top:var(--wp--preset--spacing--60)"],
        body.asco-hero-page [style*="margin-block-start:var(--wp--preset--spacing--60)"] {
            margin-top: 0 !important;
            margin-block-start: 0 !important;
        }
        body.asco-hero-page [style*="padding-top:var(--wp--preset--spacing--60)"],
        body.asco-hero-page [style*="padding-block-start:var(--wp--preset--spacing--60)"] {
            padding-top: 0 !important;
            padding-block-start: 0 !important;
        }
        body.asco-hero-page > .wp-site-blocks > main,
        body.asco-hero-page > .wp-site-blocks > main > .wp-block-group {
            padding-top: 0 !important;
            padding-block-start: 0 !important;
            margin-top: 0 !important;
            margin-block-start: 0 !important;
        }
        body.asco-hero-page .wp-block-post-title {
            margin-top: -4rem !important;
            margin-block-start: -4rem !important;
            padding-top: 4rem !important;
        }
    }
    @media (min-width: 782px) {
        body.asco-hero-page .wp-block-post-title {
            margin-top: -150px;
            margin-bottom: 3rem;
            padding-top: clamp(8rem, 16vw, 11rem);
            padding-bottom: clamp(5rem, 9vw, 7.5rem);
        }
    }
    /* Shared bg-pseudo: full-bleed, dark overlay, half-moon arch.
       Background URL is set per page below. */
    body.asco-hero-page .wp-block-post-title::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-position: center, center;
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        clip-path: ellipse(110% 90% at 50% 0%);
        z-index: -1;
    }
    /* Per-page bg images. */
    body.page-instructors .wp-block-post-title::before {
        background-image:
            linear-gradient(rgba(45, 45, 42, 0.67), rgba(45, 45, 42, 0.67)),
            url("/wp-content/uploads/2026/05/instructors-hero-bg.jpg");
    }
    body.page-shop .wp-block-post-title::before {
        background-image:
            linear-gradient(rgba(45, 45, 42, 0.67), rgba(45, 45, 42, 0.67)),
            url("/wp-content/uploads/2026/05/shop-hero-bg.jpg");
    }
    body.page-classes .wp-block-post-title::before {
        background-image:
            linear-gradient(rgba(45, 45, 42, 0.67), rgba(45, 45, 42, 0.67)),
            url("/wp-content/uploads/2026/05/classes-hero-bg.jpg");
    }
    body.page-workshops .wp-block-post-title::before {
        background-image:
            linear-gradient(rgba(45, 45, 42, 0.67), rgba(45, 45, 42, 0.67)),
            url("/wp-content/uploads/2026/05/workshops-hero-bg.jpg");
    }
    /* Header sits above the hero (nav stays interactive); cream-solid
       on mobile so the mobile-nav dialog isn't trapped by backdrop-filter
       containing-block; frosted-translucent on desktop where the menu
       inlines without position:fixed. */
    body.asco-hero-page .wp-site-blocks > header {
        position: relative;
        z-index: 2;
        background: var(--asco-cream);
        box-shadow: 0 1px 0 rgba(45, 45, 42, 0.06);
    }
    @media (min-width: 782px) {
        body.asco-hero-page .wp-site-blocks > header {
            background: rgba(250, 246, 238, 0.88);
            -webkit-backdrop-filter: blur(14px) saturate(140%);
                    backdrop-filter: blur(14px) saturate(140%);
        }
    }