/*
 * Mikvah Meditation — /mikvah-meditation
 *
 * Landing page for the five guided meditation recordings. The feed gives
 * every one of them the same description and the same generic cover art,
 * so there is no per-episode content to lay out. The page carries itself
 * on type instead: an oversized Cormorant hero, then a numbered editorial
 * list where the serif numerals are the loudest thing on each row.
 *
 * Palette is near-monochrome slate on warm offwhite, with peach reserved
 * for the numerals and hairlines only — restraint suits the subject.
 * Square corners throughout (--radius-card: 0), matching the rest of the
 * redesign; the audio players keep their own pill styling.
 */

/* The site header is white and the page body is peach, which otherwise
 * leaves a hard seam straight across the page under the nav. Fading white
 * into peach over the first ~260px lets the header sit down onto the page
 * instead of being cut off from it.
 *
 * One declaration, not a gradient plus a base colour: a linear-gradient
 * holds its final stop for the remaining height, so everything below the
 * fade is flat --brand-offwhite-peach. background-attachment stays default
 * (scroll) so the fade belongs to the top of the document, not the viewport. */
.redesign .meditations {
    background: linear-gradient(
        180deg,
        var(--neutral-white) 0,
        var(--brand-offwhite-peach) 260px
    );
}

/* .article__container is capped at 864px — a reading measure. This is a
 * landing page with a two-column hero and three-column rows, not prose, so
 * it gets more room. Scoped to .meditations; the shared container is
 * untouched. */
.redesign .meditations .article__container {
    max-width: 1120px;
}

/* ── Hero ──
 * Asymmetric: text column carries the weight, the water figure sits to
 * the right as clearly secondary. Not a centred hero, and no gradient. */
.redesign .meditations-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    align-items: center;
    gap: var(--sp-12);
    padding: var(--sp-8) 0 var(--sp-12);
    border-bottom: 1px solid var(--brand-border-peach);
}

.redesign .meditations-hero__eyebrow {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-tagline);
    line-height: var(--lh-tagline);
    letter-spacing: var(--ls-tagline);
    text-transform: uppercase;
    color: var(--brand-dark-slate-lighter);
}

.redesign .meditations-hero__title {
    margin: 0 0 var(--sp-6);
    font-family: var(--font-display);
    font-size: clamp(44px, 7vw, 88px);
    line-height: 1.04;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--brand-dark-slate);
}

.redesign .meditations-hero__lead {
    max-width: 46ch;
    margin: 0 0 var(--sp-5);
    font-family: var(--font-body);
    font-size: var(--fs-medium);
    line-height: 1.65;
    color: var(--text-paragraph);
}

/* Book title in italic display serif. Kept near 1em — a serif reads
 * optically smaller than the body sans at the same size, so it takes a
 * small bump, but anything larger reopens the line it sits on. */
.redesign .meditations-hero__lead em {
    font-family: var(--font-display);
    font-size: 1.06em;
    font-style: italic;
    color: var(--brand-dark-slate);
}

.redesign .meditations-hero__note {
    max-width: 46ch;
    margin: 0 0 var(--sp-6);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--text-paragraph);
}

.redesign .meditations-hero__note a {
    color: var(--brand-dark-slate);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--hover-dur) var(--hover-ease);
}

.redesign .meditations-hero__note a:hover {
    color: var(--brand-dark-slate-lighter);
}

/* Endorsement — set off by a peach rule rather than a badge or pill. */
.redesign .meditations-hero__endorse {
    margin: 0;
    padding-left: var(--sp-4);
    border-left: 2px solid var(--brand-chestnut);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--brand-dark-slate-lighter);
}

.redesign .meditations-hero__endorse strong {
    font-weight: 600;
    color: var(--brand-dark-slate);
}

.redesign .meditations-hero__art {
    color: var(--brand-border-slate);
}

.redesign .meditations-hero__art svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Numbered list ──
 * Each row is a band separated by a hairline, not a card. Grid columns:
 * numeral | content | ripple. */
.redesign .meditations-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Rows align to the top, not centre: a centred numeral drifts down beside
 * the audio player instead of reading as a label for the title. */
.redesign .meditations-item {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) minmax(88px, 128px);
    align-items: start;
    gap: var(--sp-6);
    padding: var(--sp-8) 0;
    border-bottom: 1px solid var(--brand-border-peach);
}

/* The bold move: numerals large enough to be the page's rhythm, in the
 * warm accent so they never compete with the titles for colour.
 * The negative top margin optically seats the numeral's cap height on the
 * title's, which its larger font-size would otherwise push out of line. */
.redesign .meditations-item__num {
    margin: -0.08em 0 0;
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1;
    font-weight: 400;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--brand-beige-darker);
}


.redesign .meditations-item__main {
    min-width: 0;
}

.redesign .meditations-item__title {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.redesign .meditations-item__title a {
    color: var(--brand-dark-slate);
    text-decoration: none;
    transition: color var(--hover-dur) var(--hover-ease);
}

.redesign .meditations-item__title a:hover {
    color: var(--brand-dark-slate-lighter);
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}

.redesign .meditations-item .audio-player {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 0 var(--sp-3);
}

.redesign .meditations-item__more {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--brand-dark-slate-lighter);
    transition: color var(--hover-dur) var(--hover-ease);
}

.redesign .meditations-item__more:hover {
    color: var(--brand-dark-slate);
}

.redesign .meditations-item__more span {
    display: inline-block;
    transition: transform 240ms ease;
}

.redesign .meditations-item__more:hover span {
    transform: translateX(4px);
}

/* Ripple seats with the title rather than the row's vertical centre. */
.redesign .meditations-item__art {
    margin-top: 0.5em;
    color: var(--brand-border-slate);
}

.redesign .meditation-ripple {
    display: block;
    width: 100%;
    height: auto;
    margin-left: auto;
}

.redesign .meditations-empty {
    padding: var(--sp-12) 0;
    font-family: var(--font-body);
    font-size: var(--fs-medium);
    color: var(--text-paragraph);
}

.redesign .meditations-empty a {
    color: var(--brand-dark-slate);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Related series ──
 * Inverted block in dark slate so the page closes on a different note
 * instead of trailing off after the fifth row. */
.redesign .meditations-series {
    margin: var(--sp-16) 0 var(--sp-20);
    padding: var(--sp-12);
    background: var(--brand-dark-slate);
    color: var(--text-paragraph-white);
}

.redesign .meditations-series__eyebrow {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-body);
    font-size: var(--fs-tagline);
    line-height: var(--lh-tagline);
    letter-spacing: var(--ls-tagline);
    text-transform: uppercase;
    color: var(--brand-offwhite-slate);
}

.redesign .meditations-series__title {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 400;
    color: var(--text-heading-white);
}

.redesign .meditations-series__lead {
    max-width: 58ch;
    margin: 0 0 var(--sp-8);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--brand-offwhite-slate);
}

.redesign .meditations-series__items {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--opacity-white-15);
}

.redesign .meditations-series__item {
    border-bottom: 1px solid var(--opacity-white-15);
}

.redesign .meditations-series__item a {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-3);
    text-decoration: none;
    transition: background var(--hover-dur) var(--hover-ease);
}

.redesign .meditations-series__item a:hover {
    background: var(--opacity-white-10);
}

.redesign .meditations-series__part {
    font-family: var(--font-body);
    font-size: var(--fs-tiny);
    letter-spacing: var(--ls-tagline);
    text-transform: uppercase;
    color: var(--brand-offwhite-slate);
}

.redesign .meditations-series__name {
    font-family: var(--font-display);
    font-size: var(--fs-h6);
    line-height: 1.3;
    color: var(--text-heading-white);
}

.redesign .meditations-series__date {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--brand-offwhite-slate);
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    /* Figure drops below the copy before it gets too narrow to read. */
    .redesign .meditations-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-8);
    }

    .redesign .meditations-hero__art {
        max-width: 320px;
    }

    /* Ripples are decorative — the first thing to go when space is tight. */
    .redesign .meditations-item {
        grid-template-columns: minmax(56px, auto) minmax(0, 1fr);
    }

    .redesign .meditations-item__art {
        display: none;
    }
}

@media (max-width: 600px) {
    /* Numeral moves above the title so the title keeps full width. */
    .redesign .meditations-item {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-2);
        padding: var(--sp-6) 0;
    }

    .redesign .meditations-item__num {
        font-size: 32px;
    }

    .redesign .meditations-series {
        padding: var(--sp-6);
    }

    .redesign .meditations-series__item a {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-1);
    }

    .redesign .meditations-series__date {
        white-space: normal;
    }
}