/* =====================================================================
   important-dates-polish.css

   Ambient color + interaction layer for the /important-dates/ singleton.
   Scoped to the pattern's outer `id="important-dates"` anchor. Sibling
   stylesheet to about-polish.css — same design vocabulary (gradient
   underline, at-a-glance strip, hover-lift, full-bleed band, warm bottom
   card, scroll-reveal). Touches things the strict-native pattern can't
   express on its own:

     1. Section heading underline — teal→grape gradient bar under
        centered h2s. Pure ::after.
     2. "At a glance" strip → 3 stat cards on a soft teal band.
        Strips the white-card chrome from the outer container, lifts the
        paper-bg columns into hover-able cards with colored top accents.
     3. wp:details accordions — bigger summary text, hover hint, soft
        shadow on hover, custom +/- indicator via ::before (browser
        triangle suppressed), smooth open animation where supported.
     4. "Two recitals a year" highlight band — full-bleed photo + teal→
        grape gradient overlay, white type, butter underline. Mirrors
        the franchise band on About.
     5. Warm bottom CTA — butter→cream wash, teal→grape top stripe,
        solid grape pill button. Same recipe as About §6b.
     6. Section breathing room — bigger blockGap between major children
        of #important-dates so the page doesn't feel cramped.
     7. Scroll-reveal — gentle fade-up as each major block enters.
     8. Reduced-motion fallback — kill all transitions/transforms.

   All overrides use `!important` against block-attribute inline styles.
   Editor preview will still show the original paper/white cards
   (Katherine sees the pre-polish version when editing); live + saved
   preview reflect this stylesheet. When the pattern is rebuilt to bake
   these visuals in natively, drop the !important and shrink scope.

   Reduced-motion users get the final state with no animation.
===================================================================== */


/* --------------------------------------------------------------------
   1. Section heading underline — gradient bar under centered h2s.

   Scoped to centered h2s on a light bg only. The full-bleed band
   re-overrides this rule with a butter underline in §4 below.
   -------------------------------------------------------------------- */

#important-dates h2.wp-block-heading.has-text-align-center::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--teal) 0%,
        var(--wp--preset--color--grape) 100%
    );
}

/* Page H1 — page header gets a matching underline too so the eyebrow/
   h1/lede stack feels finished. */
#important-dates h1.wp-block-heading.has-text-align-center::after {
    content: "";
    display: block;
    width: 88px;
    height: 4px;
    margin: 16px auto 0;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--teal) 0%,
        var(--wp--preset--color--grape) 100%
    );
}


/* --------------------------------------------------------------------
   2. "At a glance" → hover-lift stat cards on a soft teal band.

   Targets the FIRST `.wp-block-group.has-white-background-color` direct
   child of #important-dates (the at-a-glance container). Same recipe
   as the About milestones strip (about-polish.css §2) but tuned for
   stat cards rather than a timeline — we keep the paper card chrome on
   the inner columns so they read as discrete cards, not dots on a line.
   -------------------------------------------------------------------- */

#important-dates > div.wp-block-group.has-white-background-color {
    /* Strip the white card chrome — replace with the same soft teal
       band About uses for milestones, but a touch warmer. */
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        var(--wp--preset--color--teal-100) 0%,
        var(--wp--preset--color--teal-50) 100%
    ) !important;
    border-color: transparent !important;
    box-shadow: var(--wp--preset--shadow--xs) !important;
}

/* The eyebrow above the at-a-glance heading reads in teal-700 already;
   no override needed. */

/* The 3 columns inside become hover-lift stat cards. Padding bumped
   for the date numerals + body text combo. */
#important-dates > div.wp-block-group.has-white-background-color > .wp-block-columns {
    gap: clamp(16px, 1.8vw, 28px) !important;
}

#important-dates > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column {
    background-color: #fff !important;
    box-shadow: var(--wp--preset--shadow--xs) !important;
    padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2vw, 28px) !important;
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 240ms ease-out;
}

#important-dates > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp--preset--shadow--md) !important;
}

/* Date numerals (DEC 19 / MAY 15 / SEP 14) — already h-2 font-size +
   bold from the pattern. Tighten the visual rhythm: less margin before
   the heading underneath. */
#important-dates > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column > p:first-of-type {
    margin-bottom: 6px !important;
}


/* --------------------------------------------------------------------
   3. wp:details accordions — restyled with custom +/- marker.

   Six details elements inside the .wp-block-group constrained to 760px.
   Strict structural reach: `#important-dates details.wp-block-details`.
   The browser-default triangle marker is suppressed via `::marker` and
   `summary::-webkit-details-marker`; a custom +/- indicator is drawn
   with `::before` on the summary.
   -------------------------------------------------------------------- */

/* Suppress the browser triangle marker on the summary. */
#important-dates details.wp-block-details > summary::-webkit-details-marker {
    display: none;
}

#important-dates details.wp-block-details > summary {
    /* Standards-compliant marker suppression. */
    list-style: none;
    /* Make space for the custom +/- on the right. */
    position: relative;
    padding-right: 44px;
    cursor: pointer;
    transition:
        color 200ms ease-out;
}

#important-dates details.wp-block-details > summary::marker {
    content: "";
}

/* Soft border-radius bump + accordion separation. */
#important-dates details.wp-block-details {
    border-radius: 18px !important;
    transition:
        box-shadow 240ms ease-out,
        border-color 240ms ease-out,
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Hover — soft teal hint on the border, gentle shadow lift, summary
   text shifts to teal-700. */
#important-dates details.wp-block-details:hover {
    border-color: var(--wp--preset--color--teal-200) !important;
    box-shadow: var(--wp--preset--shadow--xs) !important;
}

#important-dates details.wp-block-details > summary:hover,
#important-dates details.wp-block-details > summary:focus-visible {
    color: var(--wp--preset--color--teal-700) !important;
}

#important-dates details.wp-block-details > summary:focus-visible {
    outline: 2px solid var(--wp--preset--color--teal-500);
    outline-offset: 4px;
    border-radius: 8px;
}

/* Custom +/- indicator — circular badge on the right of the summary.
   Drawn with two pseudo-elements stacked: ::before is the circle, ::after
   is the horizontal bar (always visible). The vertical bar is a second
   element using `box-shadow` trick — but simpler: rotate ::after when
   open to convert + → −. */
#important-dates details.wp-block-details > summary::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wp--preset--color--teal-50);
    border: 1px solid var(--wp--preset--color--teal-200);
    transform: translateY(-50%);
    transition:
        background-color 220ms ease-out,
        border-color 220ms ease-out,
        transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Plus / minus glyph centered inside the ::before circle. Using a
   unicode character instead of the geometric two-bar trick — the
   previous background-image trick for the vertical bar wasn't
   rendering reliably across browsers, leaving the marker stuck as
   "−" on closed accordions. Text glyph is bulletproof. */
#important-dates details.wp-block-details > summary::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(50%, -50%);
    color: var(--wp--preset--color--teal-700);
    font-family: var(--wp--preset--font-family--outfit, "Outfit", sans-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    transition:
        color 220ms ease-out,
        transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Open state — swap to a minus sign (U+2212), tint the circle teal,
   and pull the heading color to teal-700 so the whole row reads as
   active. */
#important-dates details.wp-block-details[open] > summary {
    color: var(--wp--preset--color--teal-700) !important;
}

#important-dates details.wp-block-details[open] > summary::before {
    background: var(--wp--preset--color--teal);
    border-color: var(--wp--preset--color--teal);
}

#important-dates details.wp-block-details[open] > summary::after {
    content: "\2212";
    color: #fff;
}

/* Open accordion gets a slightly more prominent border + soft shadow. */
#important-dates details.wp-block-details[open] {
    border-color: var(--wp--preset--color--teal-200) !important;
    box-shadow: 0 8px 24px rgba(31, 122, 112, 0.10) !important;
}


/* --------------------------------------------------------------------
   3b. Per-month color personality + recital badges.

   Each of the six accordions gets a unique low-opacity gradient wash
   tinting the white card with a season-appropriate color story. The
   text stays ink-readable; the color only carries personality at the
   card surface. December + May (the two recital months) get an
   additional "★ Recital" pill stuck to the top-right corner so they
   pop out of the month-by-month list as the year's big events.

   Order in the pattern: Aug, Sep, Nov, Dec, Mar, May — :nth-of-type
   indices 1..6 below match that order. The :nth-of-type counter is
   scoped to the wrapper group so it counts only the details children.
   -------------------------------------------------------------------- */

/* Position-anchor for the recital badges + give each card a slightly
   stronger shadow so the colored wash reads as a "lifted" card. */
#important-dates details.wp-block-details {
    position: relative;
    overflow: visible;
}

/* August 2026 — late-summer butter→teal fade. */
#important-dates details.wp-block-details:nth-of-type(1) {
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        rgba(244, 209, 106, 0.22) 0%,
        rgba(64, 176, 160, 0.10) 100%
    ) !important;
    border-color: rgba(244, 209, 106, 0.45) !important;
}

/* September 2026 — back-to-school teal wash. */
#important-dates details.wp-block-details:nth-of-type(2) {
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        rgba(64, 176, 160, 0.16) 0%,
        rgba(31, 122, 112, 0.06) 100%
    ) !important;
    border-color: rgba(64, 176, 160, 0.40) !important;
}

/* November 2026 — autumn grape + butter glow. */
#important-dates details.wp-block-details:nth-of-type(3) {
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        rgba(155, 89, 182, 0.14) 0%,
        rgba(244, 209, 106, 0.16) 100%
    ) !important;
    border-color: rgba(155, 89, 182, 0.35) !important;
}

/* December 2026 — winter recital: deeper teal→grape, festive. */
#important-dates details.wp-block-details:nth-of-type(4) {
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        rgba(31, 122, 112, 0.18) 0%,
        rgba(155, 89, 182, 0.20) 100%
    ) !important;
    border-color: rgba(122, 58, 150, 0.45) !important;
    box-shadow: 0 8px 28px rgba(122, 58, 150, 0.12);
}

/* March 2027 — spring grape→teal-50 fresh. */
#important-dates details.wp-block-details:nth-of-type(5) {
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        rgba(155, 89, 182, 0.10) 0%,
        rgba(64, 176, 160, 0.14) 100%
    ) !important;
    border-color: rgba(155, 89, 182, 0.35) !important;
}

/* May 2027 — spring recital: teal→butter→grape celebration. */
#important-dates details.wp-block-details:nth-of-type(6) {
    background-color: transparent !important;
    background-image: linear-gradient(
        135deg,
        rgba(64, 176, 160, 0.18) 0%,
        rgba(244, 209, 106, 0.18) 50%,
        rgba(155, 89, 182, 0.18) 100%
    ) !important;
    border-color: rgba(64, 176, 160, 0.45) !important;
    box-shadow: 0 8px 28px rgba(31, 122, 112, 0.14);
}

/* Hover on any card — colored glow that matches its accent. */
#important-dates details.wp-block-details:nth-of-type(1):hover { box-shadow: 0 12px 36px rgba(244, 209, 106, 0.28) !important; }
#important-dates details.wp-block-details:nth-of-type(2):hover { box-shadow: 0 12px 36px rgba(64, 176, 160, 0.22) !important; }
#important-dates details.wp-block-details:nth-of-type(3):hover { box-shadow: 0 12px 36px rgba(155, 89, 182, 0.22) !important; }
#important-dates details.wp-block-details:nth-of-type(4):hover { box-shadow: 0 14px 40px rgba(122, 58, 150, 0.30) !important; }
#important-dates details.wp-block-details:nth-of-type(5):hover { box-shadow: 0 12px 36px rgba(155, 89, 182, 0.22) !important; }
#important-dates details.wp-block-details:nth-of-type(6):hover { box-shadow: 0 14px 40px rgba(31, 122, 112, 0.28) !important; }

/* "★ Recital" badge on December (nth 4) and May (nth 6). Sits INSIDE
   the accordion at the top-right (was previously floating above with
   top: -12px, which read as detached). top: 12px positions it just
   below the top edge; right: 56px keeps it clear of the +/- marker
   button which lives in the right: 0–46px lane. */
#important-dates details.wp-block-details:nth-of-type(4)::before,
#important-dates details.wp-block-details:nth-of-type(6)::before {
    content: "\2605  Recital";
    position: absolute;
    top: 12px;
    right: 56px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--outfit, "Outfit", sans-serif);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 63, 58, 0.18);
    pointer-events: none;
}

/* Dec → grape badge (matches the festive deeper-color treatment). */
#important-dates details.wp-block-details:nth-of-type(4)::before {
    background: linear-gradient(
        135deg,
        var(--wp--preset--color--grape) 0%,
        var(--wp--preset--color--teal-700) 100%
    );
}

/* May → teal→butter badge (matches the spring celebration treatment). */
#important-dates details.wp-block-details:nth-of-type(6)::before {
    background: linear-gradient(
        135deg,
        var(--wp--preset--color--teal-700) 0%,
        var(--wp--preset--color--grape) 100%
    );
}


/* --------------------------------------------------------------------
   3c. Vertical timeline — server-rendered from mm_event records (v5).

   Pattern: patterns/important-dates-content.php loops over published
   mm_event posts whose mm_event_type term is `closure`, `recital`, or
   `highlight` (a-la-carte events stay on /events/). Each row gets a
   .mm-timeline-row class plus a .mm-timeline-row--{kind} modifier that
   selectors below key off of — no positional :nth-of-type math any more.

   Visual decoration:
     · A vertical teal→grape gradient line down the page, positioned in
       the column gap (left: 188px) past the 140px date column.
     · A node dot (circle) on each row, centered vertically on the line.
     · A ★ pill marker on .mm-timeline-row--recital rows instead of the
       plain dot.
     · Highlight rows (parent-week-style) get a slightly muted border so
       they don't compete visually with closures + recitals.

   At <720px the layout collapses to a single-column stack and the
   line + dots are hidden — wp:columns stacks naturally on mobile.
   -------------------------------------------------------------------- */

/* Legacy §3c rules removed 2026-05-15 (v7) — the old #mm-dates-timeline
   selector chain (high specificity from the ID) was beating the new
   .mm-dates__timeline class-based rules below in §8, leaving the line
   stuck at the old left:208px while dots sat at left:188px (20px gap).
   The v7 BEM rules in §8 own the timeline now. */


/* --------------------------------------------------------------------
   4. "Two recitals a year" — full-bleed photo + gradient overlay band.

   Mirrors about-polish.css §6a. Targets the FIRST
   .has-teal-soft-gradient-background direct child of #important-dates
   (the recitals band — the warm bottom CTA is `:last-child`).
   -------------------------------------------------------------------- */

#important-dates > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) {
    /* Break out of the constrained parent + section's spacing-5 horizontal
       padding to extend edge-to-edge. Vertical margins stay at the
       section's natural blockGap so the band doesn't overlap the
       accordion stack above. */
    margin-left: calc(var(--wp--preset--spacing--5) * -1) !important;
    margin-right: calc(var(--wp--preset--spacing--5) * -1) !important;
    max-width: none !important;
    border-radius: 0 !important;

    /* Gradient overlay + class photo. Same recipe as About franchise band,
       different photo so the two pages don't feel like duplicates. */
    background-color: transparent !important;
    background-image:
        linear-gradient(135deg,
            rgba(64, 176, 160, 0.86) 0%,
            rgba(122, 58, 150, 0.88) 60%,
            rgba(31, 122, 112, 0.92) 100%),
        url('https://1qg74ywqg2.rke.spinupwp.site/wp-content/uploads/2026/05/Mixed20Age-1024x768.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* Anchor for the spotlight/sparkle overlay layered above. */
    position: relative;
    overflow: hidden;

    min-height: 480px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(80px, 9vw, 128px) clamp(24px, 5vw, 64px) !important;
    box-shadow: var(--wp--preset--shadow--md) !important;
}

/* Spotlight + scattered sparkle overlay — adds shimmer/celebration
   energy on top of the gradient+photo. Two soft butter "stage light"
   glow blobs at corners, plus a faint center wash and a tiny dot
   field for depth. The text content sits above this layer via z-index. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:not(:last-child)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        /* Soft butter glow at top-left (stage left). */
        radial-gradient(ellipse 320px 320px at 12% 22%,
            rgba(244, 209, 106, 0.28) 0%,
            transparent 65%),
        /* Soft butter glow at bottom-right (stage right). */
        radial-gradient(ellipse 360px 360px at 88% 78%,
            rgba(244, 209, 106, 0.22) 0%,
            transparent 65%),
        /* Faint center spotlight wash. */
        radial-gradient(ellipse 260px 260px at 50% 50%,
            rgba(255, 255, 255, 0.10) 0%,
            transparent 60%),
        /* Tiny sparkle dot field. */
        radial-gradient(circle at 25% 65%, rgba(255, 246, 220, 0.45) 0%, transparent 0.6%),
        radial-gradient(circle at 78% 30%, rgba(255, 246, 220, 0.40) 0%, transparent 0.5%),
        radial-gradient(circle at 60% 80%, rgba(255, 246, 220, 0.38) 0%, transparent 0.5%),
        radial-gradient(circle at 38% 18%, rgba(255, 246, 220, 0.42) 0%, transparent 0.5%);
    pointer-events: none;
    z-index: 1;
}

/* Lift the band's own children above the sparkle layer. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) > * {
    position: relative;
    z-index: 2;
}

/* Eyebrow → soft butter on the dark band. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) > p.has-teal-700-color:first-of-type {
    color: var(--wp--preset--color--butter) !important;
    letter-spacing: 0.18em;
}

/* Heading → white on the dark band, with a soft shadow for legibility. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) > h2.wp-block-heading {
    color: #fff !important;
    text-shadow: 0 2px 24px rgba(14, 63, 58, 0.35);
    max-width: 820px;
}

/* Body paragraph → softened white. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) > p.has-teal-700-color:last-of-type {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 12px rgba(14, 63, 58, 0.32);
    max-width: 640px;
}

/* Underline accent → butter on the dark band, slightly thicker. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:not(:last-child) h2.wp-block-heading.has-text-align-center::after {
    background: var(--wp--preset--color--butter) !important;
    width: 56px;
    height: 4px;
}


/* --------------------------------------------------------------------
   5. Bottom CTA — full-bleed coda to the recitals band.

   Passes so far:
   v1: butter→cream warm card (clashed with recitals band).
   v2: contained dark card (read as a smaller duplicate of recitals).
   v3: grape-forward dark + staff lines + piano keys (clashed with
       recitals band — two different dark palettes fought; the piano
       keys + staff together overdid the music metaphor).
   v4: matched recitals band gradient exactly (too matching — the two
       dark sections looked like one stretched band, no breathing room).
   v5: solid teal-800 + staff lines (teal-800 felt too dark; staff
       lines read as random horizontal bars, not music staff).
   v6 (current): solid teal-700 (one shade lighter, easier on the
       eye at end-of-page) with NO staff lines. Music identity is a
       single ♬ glyph above the heading — instantly readable as
       music, no clutter behind the text.

   Targets the LAST .has-teal-soft-gradient-background direct child of
   #important-dates.
   -------------------------------------------------------------------- */

#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child {
    /* Break out to full-bleed. Negative top + bottom margins kept from
       the earlier pass — they eliminate the cream stripe above and
       butt the band against the footer. */
    margin-left: calc(var(--wp--preset--spacing--5) * -1) !important;
    margin-right: calc(var(--wp--preset--spacing--5) * -1) !important;
    margin-top: calc(var(--wp--preset--spacing--16) * -1) !important;
    margin-bottom: calc(var(--wp--preset--spacing--section-y) * -1) !important;
    max-width: none !important;
    border-radius: 0 !important;

    /* Solid teal-700 base — one shade lighter than teal-800 (which felt
       too heavy at end-of-page) and a clean flat brand color, distinct
       from the recitals band's multi-color gradient above.
       No staff lines — they were reading as random horizontal bars
       behind the text rather than as a music staff. Music identity now
       comes from a single ♬ note glyph above the heading (rule below). */
    background-color: var(--wp--preset--color--teal-700) !important;
    background-image: none !important;

    /* Anchor for the top tape stripe. */
    position: relative;
    overflow: hidden;

    /* Match the recitals band's footprint so the two full-bleed
       sections read as equal-weight "chapters" instead of hero +
       smaller coda. */
    min-height: 480px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(80px, 9vw, 128px) clamp(24px, 5vw, 64px) !important;
    box-shadow: none;
}

/* Top "tape" stripe — teal→grape, slightly thicker so the seam
   between the recitals band and this coda still reads as a beat. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--teal) 0%,
        var(--wp--preset--color--grape) 100%
    );
    z-index: 2;
}

/* Lift the band's own children above the staff-line layer. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child > * {
    position: relative;
    z-index: 3;
}

/* Heading → white on the dark card, with a soft shadow for legibility. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child > h2.wp-block-heading {
    color: #fff !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* Single ♬ music note glyph above the heading — the only music
   decoration. Sits centered as a butter "header cap" above the h2,
   reads instantly as a music studio sign-off without competing with
   the text underneath. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child > h2.wp-block-heading::before {
    content: "♬";
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 5vw, 60px);
    line-height: 1;
    color: var(--wp--preset--color--butter);
    opacity: 0.85;
    margin-bottom: 14px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Body paragraph → softened white. The pattern emits this paragraph
   with `has-ink-2-color`; override to white-with-alpha. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child > p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Underline accent → butter on the dark card, bumped slightly wider
   for end-of-page presence. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child h2.wp-block-heading.has-text-align-center::after {
    background: var(--wp--preset--color--butter) !important;
    width: 88px;
    height: 4px;
    margin-top: 18px;
}

/* "Text the studio" button → white pill on the dark card (mirrors the
   franchise-band button on About). Flips to butter on hover. */
#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link {
    margin-top: 12px;
    padding: 16px 36px;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--wp--preset--color--teal-800) !important;
    font-family: var(--wp--preset--font-family--outfit, "Outfit", sans-serif);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transition:
        transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 220ms ease-out,
        background-color 220ms ease-out,
        color 220ms ease-out;
}

#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link:hover,
#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link:focus-visible {
    background: var(--wp--preset--color--butter) !important;
    color: var(--wp--preset--color--ink) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
}

#important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* --------------------------------------------------------------------
   6. Section breathing room — push major children of #important-dates
      further apart so the page doesn't feel cramped between header →
      callout → cards → accordions → recital band → CTA.
   -------------------------------------------------------------------- */

#important-dates {
    row-gap: var(--wp--preset--spacing--20) !important;
}


/* --------------------------------------------------------------------
   7. Scroll-reveal — fade-up as each major child of #important-dates
      enters. Paired with important-dates-reveal.js, which sets
      data-mm-reveal and toggles .is-mm-revealed via IntersectionObserver.
   -------------------------------------------------------------------- */

#important-dates [data-mm-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

#important-dates [data-mm-reveal].is-mm-revealed {
    opacity: 1;
    transform: none;
}


/* --------------------------------------------------------------------
   8. Reduced-motion fallback — kill transitions + transforms.
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    #important-dates > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column,
    #important-dates details.wp-block-details,
    #important-dates details.wp-block-details > summary,
    #important-dates details.wp-block-details > summary::before,
    #important-dates details.wp-block-details > summary::after,
    #important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link {
        transition: none !important;
    }

    #important-dates > div.wp-block-group.has-white-background-color > .wp-block-columns > .wp-block-column:hover,
    #important-dates > .wp-block-group.has-teal-soft-gradient-background:last-child .wp-block-button__link:hover {
        transform: none !important;
    }

    #important-dates [data-mm-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ============================================================================
   §8. MM-010 v7 redesign (2026-05-15) — full-bleed bands + BEM classes.

   The page now alternates four full-bleed bands top to bottom:
     1. Notice  — paper bg, compact teal-accent callout card
     2. Recitals — full-bleed photo + dark teal→grape scrim, white text,
        two big recital date cards floating on top
     3. Timeline — paper bg with subtle gradient wash + decorative blob,
        the vertical-line timeline sits centered inside
     4. Tradition — full-bleed photo + heavier teal→grape→teal scrim,
        white text, decorative music notes
     5. CTA — teal-soft gradient band closing the page, pill button

   Bands are 100% viewport width; inner content is constrained by
   .mm-dates__inner (1240px) or .mm-dates__inner--narrow (840px). All
   sections use the same .mm-dates__section-eyebrow / -heading / -intro
   header recipe, with --on-dark modifiers for the photo bands.

   The legacy §3c rules above still target `#mm-dates-timeline > .wp-
   block-columns` and will simply not match the new <ol>/<li> markup —
   leaving them in place as dead code is harmless and preserves the file
   history; a future cleanup pass can prune.
   ============================================================================ */

.mm-dates {
    display: block;
    color: var(--wp--preset--color--ink);
}

/* The post is rendered inside wp:post-content with a constrained layout
   (contentSize: 780px). Each band breaks out to the full viewport using
   the standard 100vw + negative-margin trick so the photo backgrounds
   and gradient bands span edge-to-edge instead of being trapped in the
   780px column. */
.mm-dates__band {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 56px);
    background-color: var(--wp--preset--color--paper);
    background-size: cover;
    background-position: center;
}

.mm-dates__band--recitals {
    /* No photo here — the page-hero is photographic and we don't want a
       photo-on-photo collision. Soft teal→paper→grape diagonal wash plus
       two radial accents in the corners adds color depth without
       competing with the hero. */
    background-color: var(--wp--preset--color--paper-2);
    background-image:
        radial-gradient(ellipse 50% 60% at 8% 10%, rgba(64, 176, 160, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 92% 90%, rgba(122, 58, 150, 0.15) 0%, transparent 65%),
        linear-gradient(135deg,
            rgba(232, 245, 242, 0.5) 0%,
            transparent 50%,
            rgba(237, 227, 242, 0.5) 100%);
    color: var(--wp--preset--color--ink);
}

.mm-dates__band--timeline {
    background-color: var(--wp--preset--color--paper);
    /* Soft gradient wash + decorative radial accents top and bottom. */
    background-image:
        radial-gradient(ellipse 60% 40% at 12% 8%, rgba(64, 176, 160, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 88% 92%, rgba(122, 58, 150, 0.10) 0%, transparent 70%),
        linear-gradient(180deg, var(--wp--preset--color--paper) 0%, var(--wp--preset--color--paper-2) 100%);
}

.mm-dates__band--tradition {
    background-color: var(--wp--preset--color--teal-900);
    color: #fff;
}

.mm-dates__band--cta {
    background:
        linear-gradient(135deg,
            var(--wp--preset--color--teal-100) 0%,
            var(--wp--preset--color--paper) 50%,
            var(--wp--preset--color--grape-100) 100%);
}

/* Scrim overlay for photo-backed bands. Sits absolutely behind content. */
.mm-dates__band-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(14, 63, 58, 0.86) 0%,
        rgba(31, 122, 112, 0.74) 50%,
        rgba(122, 58, 150, 0.78) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.mm-dates__band-scrim--tradition {
    background: linear-gradient(
        135deg,
        rgba(14, 63, 58, 0.84) 0%,
        rgba(95, 44, 117, 0.72) 50%,
        rgba(14, 63, 58, 0.84) 100%
    );
}

.mm-dates__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.mm-dates__inner--narrow {
    max-width: 880px;
}

.mm-dates__band-header {
    text-align: center;
    margin-bottom: clamp(32px, 4vw, 56px);
}

.mm-dates__band-header--light {
    color: #fff;
}

/* --- Shared section header (eyebrow + heading + intro) ----------------- */

.mm-dates__section-eyebrow,
.mm-dates__tradition-eyebrow,
.mm-dates__notice-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--wp--preset--color--teal-700);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mm-dates__section-eyebrow--on-dark {
    color: var(--wp--preset--color--teal-200);
}

.mm-dates__section-eyebrow-dot,
.mm-dates__notice-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wp--preset--color--teal);
}

.mm-dates__section-eyebrow-dot--on-dark {
    background: var(--wp--preset--color--butter);
    box-shadow: 0 0 0 4px rgba(244, 209, 106, 0.18);
}

.mm-dates__section-heading {
    margin: 0 0 12px;
    color: var(--wp--preset--color--ink);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(32px, 1.8vw + 24px, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.mm-dates__section-heading--on-dark {
    color: #fff;
}

.mm-dates__section-intro {
    margin: 0 auto;
    max-width: 640px;
    color: var(--wp--preset--color--ink-2);
    font-size: clamp(16px, 0.5vw + 14px, 18px);
    line-height: 1.65;
}

.mm-dates__section-intro--on-dark {
    color: rgba(255, 255, 255, 0.86);
}

/* Inline link inside .mm-dates__section-intro — used by the SMS line
   under the timeline heading. Picks up the teal text-emphasis so the
   sentence still reads as one continuous prompt. */
.mm-dates__section-intro-link {
    color: var(--wp--preset--color--teal-700);
    font-weight: 700;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color 180ms ease-out;
}

.mm-dates__section-intro-link:hover,
.mm-dates__section-intro-link:focus-visible {
    color: var(--wp--preset--color--teal-800);
}

/* --- Heads-up notice (now folded inline at top of recitals band) ------ */

.mm-dates__notice {
    max-width: 880px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--wp--preset--color--teal-200);
    border-left: 4px solid var(--wp--preset--color--teal);
    border-radius: 14px;
    padding: 14px clamp(18px, 2vw, 24px);
}

.mm-dates__notice--inline {
    margin-bottom: clamp(32px, 4vw, 48px);
}

.mm-dates__notice-eyebrow {
    color: var(--wp--preset--color--teal-800);
    margin-bottom: 6px;
}

.mm-dates__notice-body {
    margin: 0;
    color: var(--wp--preset--color--ink-2);
    font-size: 15px;
    line-height: 1.55;
}

.mm-dates__notice-link {
    color: var(--wp--preset--color--teal-700);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.mm-dates__notice-link:hover {
    color: var(--wp--preset--color--teal-800);
}

/* --- Section 2: Recital cards (Winter + Spring) ----------------------- */

.mm-dates__recitals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 2vw, 32px);
}

@media (min-width: 720px) {
    .mm-dates__recitals-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.mm-dates__recital-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 24px;
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px);
    text-align: left;
    box-shadow:
        0 1px 2px rgba(21, 92, 85, 0.04),
        0 12px 32px -16px rgba(21, 92, 85, 0.12);
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 240ms ease-out,
        border-color 240ms ease-out;
}

.mm-dates__recital-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 24px 24px 0 0;
}

.mm-dates__recital-card--winter::before {
    background: linear-gradient(90deg, var(--wp--preset--color--teal) 0%, var(--wp--preset--color--teal-700) 100%);
}

.mm-dates__recital-card--spring::before {
    background: linear-gradient(90deg, var(--wp--preset--color--grape) 0%, var(--wp--preset--color--grape-700) 100%);
}

.mm-dates__recital-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 8px rgba(21, 92, 85, 0.06),
        0 24px 48px -20px rgba(21, 92, 85, 0.20);
}

.mm-dates__recital-card-season {
    margin: 0 0 16px;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mm-dates__recital-card--winter .mm-dates__recital-card-season {
    color: var(--wp--preset--color--teal-700);
}

.mm-dates__recital-card--spring .mm-dates__recital-card-season {
    color: var(--wp--preset--color--grape-700);
}

.mm-dates__recital-card-stamp {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--wp--preset--font-family--outfit);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.mm-dates__recital-card-month {
    font-size: clamp(20px, 1vw + 16px, 26px);
    color: var(--wp--preset--color--ink-3);
    text-transform: uppercase;
}

.mm-dates__recital-card-big {
    font-size: clamp(44px, 4vw + 18px, 64px);
    color: var(--wp--preset--color--ink);
}

.mm-dates__recital-card--winter .mm-dates__recital-card-big {
    color: var(--wp--preset--color--teal-700);
}

.mm-dates__recital-card--spring .mm-dates__recital-card-big {
    color: var(--wp--preset--color--grape-700);
}

.mm-dates__recital-card-year {
    margin: 6px 0 16px;
    color: var(--wp--preset--color--ink-3);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 14px;
    font-weight: 600;
}

.mm-dates__recital-card-title {
    margin: 0 0 8px;
    color: var(--wp--preset--color--ink);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(20px, 0.8vw + 16px, 24px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mm-dates__recital-card-body {
    margin: 0;
    color: var(--wp--preset--color--ink-2);
    font-size: 15px;
    line-height: 1.55;
}

/* --- Section 3: Vertical timeline ------------------------------------- */

.mm-dates__timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2vw, 28px);
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 920px;
    text-align: left;
}

/* The vertical line — teal→grape gradient running down the timeline,
   positioned 188px from the left edge of each row card (past the 140px
   date stamp column). Drawn on the <ol> itself so it spans uninterrupted
   between cards too. */
.mm-dates__timeline::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 188px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(
        to bottom,
        var(--wp--preset--color--teal) 0%,
        var(--wp--preset--color--grape) 50%,
        var(--wp--preset--color--teal-700) 100%
    );
    z-index: 0;
}

.mm-dates__timeline-row {
    position: relative;
    display: flex;
    gap: 0;
    background: transparent;
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 18px;
    padding: clamp(20px, 2vw, 28px) clamp(20px, 2.5vw, 32px);
    box-shadow: 0 2px 8px rgba(14, 63, 58, 0.04);
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 240ms ease-out,
        border-color 240ms ease-out;
}

.mm-dates__timeline-row:hover {
    transform: translateX(2px);
    border-color: var(--wp--preset--color--teal-200);
    box-shadow: 0 8px 24px rgba(31, 122, 112, 0.08);
}

.mm-dates__timeline-row--recital {
    border-color: rgba(122, 58, 150, 0.30);
    box-shadow: 0 4px 16px rgba(122, 58, 150, 0.08);
}

.mm-dates__timeline-row--recital:hover {
    border-color: rgba(122, 58, 150, 0.50);
    box-shadow: 0 10px 28px rgba(122, 58, 150, 0.16);
}

.mm-dates__timeline-row--highlight {
    border-color: var(--wp--preset--color--teal-200);
    box-shadow: 0 4px 16px rgba(31, 122, 112, 0.07);
}

.mm-dates__timeline-row--highlight:hover {
    border-color: var(--wp--preset--color--teal-300);
    box-shadow: 0 10px 28px rgba(31, 122, 112, 0.14);
}

/* Node dot — vertically centered on the line. */
.mm-dates__timeline-row::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 188px;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--wp--preset--color--teal);
    box-shadow: 0 0 0 4px var(--wp--preset--color--paper);
    z-index: 1;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mm-dates__timeline-row:hover::before {
    transform: translate(-50%, -50%) scale(1.15);
}

/* Recital row gets a grape star pill instead of the plain dot. */
.mm-dates__timeline-row--recital::before {
    content: "\2605";
    width: 30px;
    height: 30px;
    background: linear-gradient(
        135deg,
        var(--wp--preset--color--grape) 0%,
        var(--wp--preset--color--teal-700) 100%
    );
    border-color: var(--wp--preset--color--grape);
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    box-shadow:
        0 0 0 4px var(--wp--preset--color--paper),
        0 6px 16px rgba(122, 58, 150, 0.32);
}

/* Highlight (event) row dot — teal, same as the base node. */
.mm-dates__timeline-row--highlight::before {
    border-color: var(--wp--preset--color--teal);
}

/* Date stamp column — fixed 140px on the left, now a tinted "date card"
   tile. The tile chrome (padding / radius / centering) lives here; the
   per-kind gradient wash + border color come from the
   .mm-dates__timeline-row--{kind} rules in §3d below so each event type
   reads at a glance (coral = closure, teal = event, grape = recital). */
.mm-dates__timeline-stamp {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    padding: 14px 10px;
    border-radius: 14px;
    border: 1px solid var(--wp--preset--color--line);
    background: linear-gradient(135deg, var(--wp--preset--color--paper-2) 0%, #fff 100%);
}

.mm-dates__timeline-month {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--teal-700);
    line-height: 1;
}

.mm-dates__timeline-big {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--ink);
}

.mm-dates__timeline-year {
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--wp--preset--color--ink-3);
}

.mm-dates__timeline-row--recital .mm-dates__timeline-month,
.mm-dates__timeline-row--recital .mm-dates__timeline-big {
    color: var(--wp--preset--color--grape-700);
}

/* --------------------------------------------------------------------
   §3d. Event-type color coding — closure / event / recital.

   Each timeline row's mm_event_type drives a color story so families
   can scan the page by category, not just by date:
     · closure  → coral / red-pink (studio closed)
     · highlight→ teal (events / parent weeks — the everyday cadence)
     · recital  → grape / purple (the year's big shows; also keeps the
       ★ star node + Recital tag from the rules above)

   The accent shows up in three places per row: the left border + hover
   glow, the node dot on the timeline line, and a soft gradient wash on
   the date-card stamp tile. Stamp text is darkened per kind so it stays
   legible on the tinted tile.
   -------------------------------------------------------------------- */

/* Closure — coral / red-pink. (Closure is the default kind, so these
   override the base teal stamp + dot.) */
.mm-dates__timeline-row--closure {
    border-color: rgba(229, 107, 94, 0.32);
    box-shadow: 0 4px 16px rgba(229, 107, 94, 0.08);
}

.mm-dates__timeline-row--closure:hover {
    border-color: rgba(229, 107, 94, 0.55);
    box-shadow: 0 10px 28px rgba(229, 107, 94, 0.18);
}

.mm-dates__timeline-row--closure::before {
    border-color: var(--wp--preset--color--coral);
}

.mm-dates__timeline-row--closure .mm-dates__timeline-month {
    color: #c24a3d; /* deeper coral — readable on the light coral tile */
}

.mm-dates__timeline-row--closure .mm-dates__timeline-stamp {
    border-color: rgba(229, 107, 94, 0.30);
    background: linear-gradient(135deg, rgba(229, 107, 94, 0.18) 0%, rgba(229, 107, 94, 0.04) 100%);
}

/* Event (highlight) — teal date card. Month stays teal-700 from the base. */
.mm-dates__timeline-row--highlight .mm-dates__timeline-stamp {
    border-color: rgba(64, 176, 160, 0.30);
    background: linear-gradient(135deg, rgba(64, 176, 160, 0.18) 0%, rgba(64, 176, 160, 0.04) 100%);
}

/* Recital — grape date card (pairs with the grape ★ node + tag above). */
.mm-dates__timeline-row--recital .mm-dates__timeline-stamp {
    border-color: rgba(122, 58, 150, 0.30);
    background: linear-gradient(135deg, rgba(122, 58, 150, 0.18) 0%, rgba(122, 58, 150, 0.04) 100%);
}

/* Content column — heading + body + CTA, left padding to clear the line. */
.mm-dates__timeline-content {
    flex: 1 1 auto;
    padding-left: clamp(32px, 2.5vw, 44px);
}

.mm-dates__timeline-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: var(--wp--preset--color--grape-700);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.mm-dates__timeline-tag-star {
    font-size: 14px;
}

.mm-dates__timeline-title {
    margin: 0 0 8px;
    color: var(--wp--preset--color--ink);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(18px, 0.5vw + 16px, 22px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.mm-dates__timeline-body {
    margin: 0;
    color: var(--wp--preset--color--ink-2);
    font-size: 15px;
    line-height: 1.55;
}

.mm-dates__timeline-cta-wrap {
    margin: 12px 0 0;
}

.mm-dates__timeline-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wp--preset--color--teal-700);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease-out, color 200ms ease-out;
}

.mm-dates__timeline-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--wp--preset--color--teal-100);
    color: var(--wp--preset--color--teal-700);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.mm-dates__timeline-cta:hover,
.mm-dates__timeline-cta:focus-visible {
    color: var(--wp--preset--color--teal-800);
    border-bottom-color: currentColor;
}

.mm-dates__timeline-cta:focus-visible {
    outline: 2px solid var(--wp--preset--color--teal-500);
    outline-offset: 4px;
    border-radius: 2px;
}

.mm-dates__timeline-row--recital .mm-dates__timeline-cta {
    color: var(--wp--preset--color--grape-700);
}

.mm-dates__timeline-row--recital .mm-dates__timeline-cta-icon {
    background: var(--wp--preset--color--grape-100);
    color: var(--wp--preset--color--grape-700);
}

.mm-dates__timeline-empty {
    list-style: none;
    text-align: center;
    color: var(--wp--preset--color--ink-3);
    padding: var(--wp--preset--spacing--10);
}

/* Year separator — small pill that sits ON the vertical line, marking
   the boundary between 2026 and 2027 events. Subtle on purpose; the
   per-row year stamp is the authoritative source. */
.mm-dates__timeline-year-sep {
    list-style: none;
    text-align: center;
    padding: 4px 0;
    margin: 0;
}

.mm-dates__timeline-year-sep-label {
    display: inline-block;
    position: relative;
    z-index: 2;
    background: var(--wp--preset--color--paper);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 999px;
    padding: 6px 18px;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wp--preset--color--ink-3);
}

/* Mobile: stack the date column above the content. */
@media (max-width: 720px) {
    .mm-dates__timeline::before,
    .mm-dates__timeline-row::before {
        display: none;
    }

    .mm-dates__timeline-row {
        flex-direction: column;
        gap: 16px;
    }

    .mm-dates__timeline-stamp {
        flex-basis: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
    }

    .mm-dates__timeline-content {
        padding-left: 0;
    }
}

/* --- Section 4: Tradition band ---------------------------------------- */

.mm-dates__tradition {
    text-align: center;
    color: #fff;
}

.mm-dates__tradition-eyebrow {
    justify-content: center;
    color: var(--wp--preset--color--teal-200);
}

.mm-dates__tradition-heading {
    margin: 0 0 16px;
    color: #fff;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(32px, 2vw + 22px, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.20);
}

.mm-dates__tradition-body {
    max-width: 600px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(16px, 0.5vw + 14px, 18px);
    line-height: 1.65;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}

/* "Join the list" CTA — sits between the body copy and the music-notes
   flourish. White-on-teal pill that pops against the photo+scrim
   background; same shape vocabulary as the bottom-band .mm-dates__cta-btn
   so the two CTAs feel like siblings. */
.mm-dates__tradition-actions {
    margin: 24px 0 0;
}

.mm-dates__tradition-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--wp--preset--color--teal-800);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.18),
        0 18px 36px -14px rgba(0, 0, 0, 0.40);
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 240ms ease-out,
        background 200ms ease-out,
        color 200ms ease-out;
}

.mm-dates__tradition-btn-arrow {
    display: inline-block;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mm-dates__tradition-btn:hover,
.mm-dates__tradition-btn:focus-visible {
    background: var(--wp--preset--color--teal-50);
    color: var(--wp--preset--color--teal-800);
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.22),
        0 22px 44px -14px rgba(0, 0, 0, 0.48);
}

.mm-dates__tradition-btn:hover .mm-dates__tradition-btn-arrow,
.mm-dates__tradition-btn:focus-visible .mm-dates__tradition-btn-arrow {
    transform: translateX(3px);
}

.mm-dates__tradition-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.mm-dates__tradition-notes {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 32px 0 0;
    font-size: 40px;
    line-height: 1;
    color: rgba(244, 209, 106, 0.85);
}

.mm-dates__tradition-note {
    display: inline-block;
}

.mm-dates__tradition-note:nth-of-type(2) {
    color: rgba(232, 155, 181, 0.85);
    transform: translateY(-10px);
}

.mm-dates__tradition-note:nth-of-type(3) {
    transform: translateY(4px);
}

/* --- Section 5: Bottom CTA -------------------------------------------- */

.mm-dates__cta {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.mm-dates__cta-heading {
    margin: 0 0 12px;
    color: var(--wp--preset--color--ink);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(26px, 1.2vw + 20px, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.mm-dates__cta-body {
    margin: 0 0 24px;
    color: var(--wp--preset--color--ink-2);
    font-size: clamp(15px, 0.5vw + 13px, 17px);
    line-height: 1.65;
}

.mm-dates__cta-actions {
    margin: 0;
}

.mm-dates__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wp--preset--color--teal-700);
    color: #fff;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow:
        0 2px 4px rgba(31, 122, 112, 0.16),
        0 12px 24px -12px rgba(31, 122, 112, 0.40);
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 240ms ease-out,
        background 200ms ease-out;
}

.mm-dates__cta-btn-arrow {
    display: inline-block;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mm-dates__cta-btn:hover,
.mm-dates__cta-btn:focus-visible {
    background: var(--wp--preset--color--teal-800);
    transform: translateY(-1px);
    box-shadow:
        0 4px 8px rgba(31, 122, 112, 0.20),
        0 16px 32px -12px rgba(31, 122, 112, 0.48);
    color: #fff;
}

.mm-dates__cta-btn:hover .mm-dates__cta-btn-arrow,
.mm-dates__cta-btn:focus-visible .mm-dates__cta-btn-arrow {
    transform: translateX(3px);
}

.mm-dates__cta-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--teal-500);
    outline-offset: 4px;
}

/* --- Print --------------------------------------------------------------
   Parents often print this page to put on the fridge. Strip the photo
   backgrounds and gradients (toner-expensive, hard to read), collapse
   each band to plain text, and keep the timeline scannable. */
@media print {
    .mm-dates__band {
        width: auto;
        margin: 0;
        padding: 16px 0;
        background: #fff !important;
        background-image: none !important;
        color: #000;
        break-inside: avoid;
    }

    .mm-dates__band-scrim {
        display: none;
    }

    .mm-dates__section-heading,
    .mm-dates__section-heading--on-dark,
    .mm-dates__tradition-heading,
    .mm-dates__section-intro,
    .mm-dates__section-intro--on-dark,
    .mm-dates__section-eyebrow,
    .mm-dates__section-eyebrow--on-dark,
    .mm-dates__tradition-eyebrow,
    .mm-dates__tradition-body {
        color: #000 !important;
        text-shadow: none !important;
    }

    .mm-dates__recital-card,
    .mm-dates__timeline-row {
        background: #fff !important;
        border: 1px solid #999 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .mm-dates__timeline::before,
    .mm-dates__timeline-row::before,
    .mm-dates__tradition-notes,
    .mm-dates__cta-btn,
    .mm-dates__timeline-cta {
        display: none !important;
    }

    .mm-dates__timeline-row {
        flex-direction: row;
        gap: 16px;
    }

    .mm-dates__timeline-content {
        padding-left: 16px;
    }

    .mm-dates__band--cta,
    .mm-dates__band--notice {
        display: none;
    }
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mm-dates__recital-card,
    .mm-dates__timeline-row,
    .mm-dates__cta-btn,
    .mm-dates__cta-btn-arrow,
    .mm-dates__timeline-cta {
        transition: none !important;
    }

    .mm-dates__recital-card:hover,
    .mm-dates__timeline-row:hover,
    .mm-dates__cta-btn:hover {
        transform: none !important;
    }
}