/* ==========================================================================
   Morris Moor — editorial landing page
   A slower, image-led layout: full-bleed photography, large display type and
   generous vertical rhythm. Namespaced `mm-ed-*` so it sits alongside the
   existing `mm-lp-*` styles in style.css rather than overriding them.
   ========================================================================== */

.mm-ed {
    --ed-bg: #FBF8F3;
    --ed-bg-alt: #F3EDE2;
    --ed-ink: #1C1C1C;
    --ed-ink-soft: #6B675F;
    --ed-rule: #DED8CC;
    --ed-accent: #FF6900;
    --ed-dark: #171715;
    --ed-on-dark: #F2EEE7;
    --ed-on-dark-soft: #9A948A;

    --ed-gutter: clamp(20px, 5vw, 72px);
    --ed-measure: 1320px;
    --ed-section: clamp(88px, 13vh, 176px);

    background-color: var(--ed-bg);
    color: var(--ed-ink);
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.mm-ed-shell {
    max-width: var(--ed-measure);
    margin: 0 auto;
    padding-inline: var(--ed-gutter);
}

.mm-ed-section {
    position: relative;
    overflow: hidden;
    padding-block: var(--ed-section);
}

/* --- Shared type ---------------------------------------------------------- */

.mm-ed-eyebrow {
    display: block;
    margin: 0 0 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ed-accent);
}

.mm-ed-display {
    margin: 0;
    font-size: clamp(2.1rem, 5.4vw, 4.4rem);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -0.03em;
}

.mm-ed-lead {
    margin: 0;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.mm-ed-body {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ed-ink-soft);
}

/* Editorial link: rule sits under the label and sweeps in on hover. */
.mm-ed-link {
    display: inline-block;
    position: relative;
    padding-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ed-ink);
    text-decoration: none;
}
.mm-ed-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-ed-link:hover {
    color: var(--ed-accent);
}
.mm-ed-link:hover::after {
    transform: scaleX(0);
    transform-origin: right;
}

.mm-ed-btn {
    display: inline-block;
    padding: 17px 40px;
    background-color: var(--ed-accent);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.mm-ed-btn:hover {
    background-color: #E25E00;
    transform: translateY(-2px);
}
.mm-ed-btn-ghost {
    background-color: transparent;
    color: var(--ed-on-dark);
    border: 1px solid rgba(242, 238, 231, 0.35);
}
.mm-ed-btn-ghost:hover {
    background-color: var(--ed-on-dark);
    color: var(--ed-dark);
    border-color: var(--ed-on-dark);
}

/* --- Hero ----------------------------------------------------------------- */

.mm-ed-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: var(--ed-dark);
    isolation: isolate;
}
.mm-ed-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.mm-ed-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Slow drift so the still photograph reads as motion behind the type. */
    animation: mm-ed-drift 26s ease-in-out infinite alternate;
}
@keyframes mm-ed-drift {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}
.mm-ed-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgba(23, 23, 21, 0.55) 0%,
        rgba(23, 23, 21, 0.18) 38%,
        rgba(23, 23, 21, 0.72) 88%
    );
}
.mm-ed-hero-inner {
    width: 100%;
    max-width: var(--ed-measure);
    margin: 0 auto;
    padding: 0 var(--ed-gutter) clamp(56px, 9vh, 104px);
    color: var(--ed-on-dark);
}
.mm-ed-hero-title {
    margin: 0;
    font-size: clamp(3.2rem, 13vw, 11rem);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -0.045em;
}
.mm-ed-hero-statement {
    max-width: 22ch;
    margin: clamp(28px, 5vh, 48px) 0 0;
    font-size: clamp(1.15rem, 2.2vw, 1.85rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--ed-on-dark);
}

.mm-ed-hero-description {
    max-width: 52ch;
    margin: clamp(16px, 2.5vh, 24px) 0 0;
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    font-weight: 400;
    line-height: 1.6;
    color: #D8D3C8;
    text-shadow: 0 1px 6px rgba(23, 23, 21, 0.4);
}
.mm-ed-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: clamp(32px, 5vh, 52px);
}
/* A line of plain guidance under the hero buttons — e.g. membership telling
   people an account comes first. Sits on the hero's dark ground. */
.mm-ed-hero-note {
    max-width: 46ch;
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ed-on-dark);
    opacity: 0.78;
}
.mm-ed-hero-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mm-ed-hero .mm-ed-eyebrow {
    color: var(--ed-on-dark);
    opacity: 0.75;
}

/* --- Statement ------------------------------------------------------------ */

.mm-ed-statement {
    text-align: center;
}
.mm-ed-statement .mm-ed-lead {
    max-width: 26ch;
    margin: 0 auto;
    font-size: clamp(1.6rem, 4vw, 3.1rem);
    line-height: 1.25;
    letter-spacing: -0.025em;
}
.mm-ed-statement .mm-ed-body {
    max-width: 60ch;
    margin: clamp(32px, 5vw, 52px) auto 0;
}

/* --- Split (image + text) -------------------------------------------------- */

.mm-ed-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(40px, 7vw, 104px);
}
.mm-ed-split-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
.mm-ed-split-body > * + * {
    margin-top: 28px;
}

/* --- Spaces --------------------------------------------------------------- */

.mm-ed-spaces-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ed-rule);
}

.mm-ed-spaces-intro {
    max-width: 52ch;
    margin-top: 16px;
}

/* CSS-only tabs: the radios stay in the DOM for state, visually hidden. */
.mm-ed-tab-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.mm-ed-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 3vw, 40px);
    padding: 28px 0 0;
}
.mm-ed-tab-label {
    position: relative;
    padding-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
    cursor: pointer;
    transition: color 0.3s ease;
}
.mm-ed-tab-label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--ed-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-ed-tab-label:hover {
    color: var(--ed-ink);
}
.mm-ed-tab-panel {
    display: none;
    padding-top: clamp(40px, 6vw, 72px);
}
#mm-ed-tab-event:checked   ~ .mm-ed-tabs [for="mm-ed-tab-event"],
#mm-ed-tab-meeting:checked ~ .mm-ed-tabs [for="mm-ed-tab-meeting"],
#mm-ed-tab-addon:checked   ~ .mm-ed-tabs [for="mm-ed-tab-addon"],
#mm-ed-tab-equip:checked   ~ .mm-ed-tabs [for="mm-ed-tab-equip"] {
    color: var(--ed-ink);
}
#mm-ed-tab-event:checked   ~ .mm-ed-tabs [for="mm-ed-tab-event"]::after,
#mm-ed-tab-meeting:checked ~ .mm-ed-tabs [for="mm-ed-tab-meeting"]::after,
#mm-ed-tab-addon:checked   ~ .mm-ed-tabs [for="mm-ed-tab-addon"]::after,
#mm-ed-tab-equip:checked   ~ .mm-ed-tabs [for="mm-ed-tab-equip"]::after {
    transform: scaleX(1);
}
#mm-ed-tab-event:checked   ~ #mm-ed-panel-event,
#mm-ed-tab-meeting:checked ~ #mm-ed-panel-meeting,
#mm-ed-tab-addon:checked   ~ #mm-ed-panel-addon,
#mm-ed-tab-equip:checked   ~ #mm-ed-panel-equip {
    display: block;
}
/* Keyboard focus has to remain visible even though the input is hidden. */
.mm-ed-tab-radio:focus-visible ~ .mm-ed-tabs .mm-ed-tab-label {
    outline: 2px solid var(--ed-accent);
    outline-offset: 4px;
}

.mm-ed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
}
.mm-ed-card {
    display: flex;
    flex-direction: column;
}
.mm-ed-card-media {
    position: relative;
    overflow: hidden;
    background-color: var(--ed-bg-alt);
    aspect-ratio: 3 / 2;
}
.mm-ed-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-ed-card:hover .mm-ed-card-media img {
    transform: scale(1.05);
}
.mm-ed-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 44px;
    color: var(--ed-ink-soft);
}
/* Sticker illustrations stand in where no photograph exists (the car parks). */
.mm-ed-card-icon img {
    width: auto;
    max-width: 58%;
    max-height: 70%;
    object-fit: contain;
}
.mm-ed-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 22px;
}
.mm-ed-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ed-rule);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
}
.mm-ed-card h3 {
    margin: 18px 0 0;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.mm-ed-card p {
    margin: 12px 0 26px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ed-ink-soft);
}
.mm-ed-card .mm-ed-link {
    margin-top: auto;
    align-self: flex-start;
}

/* --- Specs (large figures on dark) ---------------------------------------- */

.mm-ed-specs {
    background-color: var(--ed-dark);
    color: var(--ed-on-dark);
}
.mm-ed-specs .mm-ed-eyebrow {
    color: var(--ed-on-dark-soft);
}
.mm-ed-specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(40px, 5vw, 64px);
    padding-top: clamp(40px, 6vw, 72px);
}
.mm-ed-spec {
    border-top: 1px solid rgba(242, 238, 231, 0.18);
    padding-top: 24px;
}
.mm-ed-spec-figure {
    display: block;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}
.mm-ed-spec-label {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-on-dark-soft);
}

/* --- Pull quote ----------------------------------------------------------- */

.mm-ed-quote {
    background-color: var(--ed-bg-alt);
    text-align: center;
}
.mm-ed-quote blockquote {
    max-width: 24ch;
    margin: 0 auto;
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.9rem, 5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.01em;
}
.mm-ed-quote cite {
    display: block;
    margin-top: 36px;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
}

/* --- Film ----------------------------------------------------------------- */

.mm-ed-film-frame {
    position: relative;
    margin-top: clamp(36px, 5vw, 60px);
    overflow: hidden;
    background-color: var(--ed-dark);
    aspect-ratio: 16 / 9;
}
.mm-ed-film-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mm-ed-film-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: rgba(23, 23, 21, 0.28);
    border: 0;
    color: var(--ed-on-dark);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.4s ease, background-color 0.4s ease;
}
.mm-ed-film-play i {
    font-size: 20px;
}
.mm-ed-film-play:hover {
    background: rgba(23, 23, 21, 0.4);
}
.mm-ed-film-play.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* --- Process -------------------------------------------------------------- */

.mm-ed-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(32px, 4vw, 56px);
    padding-top: clamp(40px, 6vw, 72px);
}
.mm-ed-step {
    border-top: 1px solid var(--ed-rule);
    padding-top: 22px;
}
.mm-ed-step-num {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ed-accent);
}
.mm-ed-step h3 {
    margin: 16px 0 10px;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.015em;
}
.mm-ed-step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ed-ink-soft);
}

/* The section keeps the cream wash — the gallery before it and the CTA after
   it are both dark, and three dark blocks in a row read as one. The contrast
   comes from the card instead: a dark, lit object sitting on the cream. */
.mm-ed-process-intro {
    max-width: 46ch;
    margin-top: 18px;
}

/* Deck mode, switched on by editorial.js. The grid above is the no-JS view;
   here the same six steps stack like cards, one face-up at a time. */
.mm-ed-steps.is-deck {
    position: relative;
    display: block;
    max-width: 680px;
    /* Cards are absolute, so the grid's padding would sit behind them — the gap
       under the heading has to come from margin instead. */
    padding-top: 0;
    margin: clamp(40px, 6vw, 72px) auto 0;
    perspective: 1200px;
}
.mm-ed-steps.is-deck .mm-ed-step {
    position: absolute;
    inset: 0 0 auto 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(30px, 4vw, 48px);
    background-color: #201F1C;
    border: 1px solid rgba(242, 238, 231, 0.14);
    border-radius: 6px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform-origin: 50% 0;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease, box-shadow 0.3s ease;
}
/* The step number is the artwork: an oversized serif numeral bleeding off the
   top-right corner, with the copy sitting over it. */
.mm-ed-steps.is-deck .mm-ed-step-num {
    position: absolute;
    top: clamp(-34px, -3vw, -14px);
    right: clamp(4px, 2vw, 28px);
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(7rem, 15vw, 12rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    color: rgba(242, 238, 231, 0.09);
    pointer-events: none;
}
.mm-ed-steps.is-deck .mm-ed-step > *:not(.mm-ed-step-num) {
    position: relative;
    z-index: 1;
}
.mm-ed-steps.is-deck .mm-ed-step h3 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--ed-on-dark);
}
.mm-ed-steps.is-deck .mm-ed-step p {
    color: var(--ed-on-dark-soft);
    max-width: 46ch;
}
.mm-ed-steps.is-deck .mm-ed-step:not(.is-face-up) {
    pointer-events: none;
    background-color: #191816;
    border-color: rgba(242, 238, 231, 0.1);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
/* Only the face-up card shows its content; the ones behind are just edges. */
.mm-ed-steps.is-deck .mm-ed-step:not(.is-face-up) > * {
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mm-ed-steps.is-deck .mm-ed-step.is-face-up:hover {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.mm-ed-steps.is-deck .mm-ed-step:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 3px;
}
.mm-ed-steps.is-deck .mm-ed-step-sticker {
    width: 78px;
    filter: invert(1);
}
.mm-ed-steps.is-deck .mm-ed-step h3 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.mm-ed-steps.is-deck .mm-ed-step p {
    font-size: 16px;
}
/* A face-up card says what a click does. */
.mm-ed-steps.is-deck .mm-ed-step.is-face-up::after {
    content: 'Click to continue';
    display: block;
    margin-top: auto;
    padding-top: 26px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-accent);
}

.mm-ed-steps-nav {
    max-width: 680px;
    margin: 30px auto 0;
}
.mm-ed-steps-track {
    position: relative;
    height: 1px;
    background-color: rgba(28, 28, 28, 0.14);
}
.mm-ed-steps-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background-color: var(--ed-accent);
    transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mm-ed-steps-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-top: 18px;
}
.mm-ed-steps-names {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}
.mm-ed-steps-dot {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 0;
    background: none;
    border: 0;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    color: var(--ed-ink-soft);
    cursor: pointer;
    transition: color 0.2s ease;
}
.mm-ed-steps-dot-num {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    opacity: 0.6;
}
.mm-ed-steps-dot-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.mm-ed-steps-dot:hover,
.mm-ed-steps-dot.is-done {
    color: var(--ed-ink);
}
.mm-ed-steps-dot.is-current {
    color: var(--ed-accent);
}
.mm-ed-steps-dot.is-current .mm-ed-steps-dot-num {
    opacity: 1;
}
.mm-ed-steps-next {
    padding: 11px 22px;
    background-color: var(--ed-accent);
    border: 1px solid var(--ed-accent);
    border-radius: 3px;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mm-ed-steps-next:hover {
    background-color: #E25E00;
    border-color: #E25E00;
}

@media (prefers-reduced-motion: reduce) {
    .mm-ed-steps.is-deck,
    .mm-ed-steps.is-deck .mm-ed-step,
    .mm-ed-steps.is-deck .mm-ed-step > * {
        transition: none;
    }
}

/* --- Closing CTA ---------------------------------------------------------- */

.mm-ed-cta {
    position: relative;
    background-color: var(--ed-dark);
    color: var(--ed-on-dark);
    text-align: center;
    overflow: hidden;
}
.mm-ed-cta-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.mm-ed-cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}
.mm-ed-cta .mm-ed-shell {
    position: relative;
    z-index: 1;
}
.mm-ed-cta .mm-ed-display {
    max-width: 18ch;
    margin: 0 auto;
}
.mm-ed-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: clamp(36px, 5vw, 56px);
}

/* --- Scroll reveal -------------------------------------------------------- */

/* Slower and softer than the default `.mm-reveal` timing in style.css, to
   match the unhurried pacing of this layout. */
.mm-ed .mm-reveal {
    transform: translateY(26px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-ed-grid > .mm-reveal:nth-child(2),
.mm-ed-specs-grid > .mm-reveal:nth-child(2),
.mm-ed-steps > .mm-reveal:nth-child(2) { transition-delay: 0.08s; }
.mm-ed-grid > .mm-reveal:nth-child(3),
.mm-ed-specs-grid > .mm-reveal:nth-child(3),
.mm-ed-steps > .mm-reveal:nth-child(3) { transition-delay: 0.16s; }
.mm-ed-grid > .mm-reveal:nth-child(4),
.mm-ed-specs-grid > .mm-reveal:nth-child(4),
.mm-ed-steps > .mm-reveal:nth-child(4) { transition-delay: 0.24s; }
.mm-ed-grid > .mm-reveal:nth-child(5),
.mm-ed-steps > .mm-reveal:nth-child(5) { transition-delay: 0.32s; }
.mm-ed-steps > .mm-reveal:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .mm-ed-hero-media img {
        animation: none;
    }
    .mm-ed-card-media img,
    .mm-ed-link::after,
    .mm-ed-tab-label::after {
        transition: none;
    }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
    .mm-ed-split {
        grid-template-columns: 1fr;
    }
    .mm-ed-split-media img {
        aspect-ratio: 3 / 2;
    }
    .mm-ed-spaces-head {
        align-items: flex-start;
    }
}

@media (max-width: 620px) {
    .mm-ed-tabs {
        gap: 16px 22px;
    }
    .mm-ed-hero-statement {
        max-width: none;
    }
}

/* --- Horizontal pinned gallery -------------------------------------------
   Progressive enhancement. Without JS (or on narrow screens, or under
   reduced-motion) this is a native horizontal swipe gallery with scroll
   snapping. The landing script adds `is-pinned` to upgrade it to the
   sticky-pinned version that translates sideways as the page scrolls down.
   -------------------------------------------------------------------------- */

.mm-ed-hscroll {
    position: relative;
    background-color: var(--ed-dark);
    color: var(--ed-on-dark);
    padding-block: var(--ed-section);
}
.mm-ed-hscroll .mm-ed-eyebrow {
    color: var(--ed-on-dark-soft);
}
.mm-ed-hscroll-head {
    max-width: var(--ed-measure);
    margin: 0 auto;
    padding-inline: var(--ed-gutter);
}
.mm-ed-hscroll-head h2 {
    max-width: 16ch;
}
.mm-ed-hscroll-viewport {
    margin-top: clamp(36px, 5vw, 64px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mm-ed-hscroll-viewport::-webkit-scrollbar {
    display: none;
}
.mm-ed-hscroll-track {
    display: flex;
    gap: clamp(16px, 2.4vw, 36px);
    padding-inline: var(--ed-gutter);
    width: max-content;
}
.mm-ed-panel {
    position: relative;
    flex: 0 0 auto;
    width: min(84vw, 940px);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    scroll-snap-align: center;
    background-color: #22221F;
}
.mm-ed-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mm-ed-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23, 23, 21, 0.78) 0%, rgba(23, 23, 21, 0) 52%);
}
.mm-ed-panel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: clamp(22px, 3vw, 40px);
    color: var(--ed-on-dark);
}
.mm-ed-panel-index {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ed-accent);
}
.mm-ed-panel-caption h3 {
    margin: 12px 0 6px;
    font-size: clamp(1.35rem, 2.6vw, 2.1rem);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.mm-ed-panel-caption p {
    margin: 0;
    max-width: 44ch;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(242, 238, 231, 0.78);
}

/* Progress rail — fills as the track travels. */
.mm-ed-hscroll-rail {
    position: relative;
    max-width: var(--ed-measure);
    height: 1px;
    margin: clamp(32px, 4vw, 52px) auto 0;
    background-color: rgba(242, 238, 231, 0.18);
}
.mm-ed-hscroll-rail span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background-color: var(--ed-accent);
    transition: width 0.1s linear;
}
.mm-ed-hscroll-hint {
    display: block;
    margin-top: 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-on-dark-soft);
    text-align: center;
}

/* Upgraded: pinned while the track slides sideways. */
.mm-ed-hscroll.is-pinned {
    padding-block: 0;
}
.mm-ed-hscroll.is-pinned .mm-ed-hscroll-pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(56px, 8vh, 96px);
    overflow: hidden;
}
.mm-ed-hscroll.is-pinned .mm-ed-hscroll-viewport {
    overflow: visible;
    scroll-snap-type: none;
}
.mm-ed-hscroll.is-pinned .mm-ed-hscroll-track {
    will-change: transform;
}
.mm-ed-hscroll.is-pinned .mm-ed-panel {
    height: min(62svh, 620px);
    aspect-ratio: auto;
    width: min(78vw, 1040px);
}

/* --- Illustrations -------------------------------------------------------- */

/* Sticker illustrations sit over the layout as editorial marks: larger and
   fewer than in the previous design, and never carrying meaning on their own. */
.mm-ed-sticker {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    height: auto;
}
.mm-ed-sticker-hero {
    right: clamp(12px, 5vw, 88px);
    bottom: clamp(80px, 14vh, 170px);
    width: clamp(110px, 17vw, 250px);
    transform: rotate(-6deg);
}
.mm-ed-sticker-statement {
    top: clamp(-10px, 2vw, 30px);
    right: clamp(8px, 7vw, 130px);
    width: clamp(88px, 12vw, 175px);
    transform: rotate(7deg);
}
.mm-ed-sticker-cta {
    left: clamp(-20px, 3vw, 70px);
    top: clamp(-16px, 2vw, 36px);
    width: clamp(100px, 14vw, 220px);
    transform: rotate(-9deg);
}
.mm-ed-sticker-quote {
    right: clamp(-16px, 3vw, 74px);
    bottom: clamp(-10px, 3vh, 48px);
    width: clamp(100px, 14vw, 220px);
    transform: rotate(-7deg);
}
.mm-ed-step-sticker {
    display: block;
    width: 60px;
    height: auto;
    margin-bottom: 18px;
}

@media (max-width: 820px) {
    .mm-ed-sticker-statement {
        display: none;
    }
    .mm-ed-sticker-hero {
        width: 108px;
        bottom: auto;
        top: clamp(88px, 15vh, 150px);
        right: 12px;
    }
}

/* --- Scroll animations ----------------------------------------------------
   All three effects below are applied by the landing script, never in the
   base stylesheet — so if JS fails or the visitor prefers reduced motion the
   content renders plainly and fully visible.
   -------------------------------------------------------------------------- */

/* Masked line reveal: each word is clipped by its own wrapper and rises into
   place. The padding/margin pair stops descenders (g, y, p) being shaved off
   by the overflow clip. */
.mm-ed-mask .mm-ed-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}
.mm-ed-mask .mm-ed-word-in {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-ed-mask.is-revealed .mm-ed-word-in {
    transform: translateY(0);
}

/* Scroll-linked word brightening: opacity is driven by scroll progress rather
   than a single trigger, so the sentence "lights up" as it passes through. */
.mm-ed-fadewords .mm-ed-fw {
    opacity: 0.16;
    transition: opacity 0.35s ease;
}

/* Parallax: a standing overscale gives the image headroom to drift inside its
   frame without ever exposing an edge, so no layout changes are needed. */
.mm-ed-parallax {
    overflow: hidden;
}
.mm-ed-parallax.is-parallaxing img {
    will-change: transform;
}

/* Images settle out of a slight overscale as their card is revealed. */
.mm-ed-card-media img,
.mm-ed-panel img {
    transform-origin: center;
}
.mm-ed-card.mm-reveal:not(.is-visible) .mm-ed-card-media img {
    transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
    .mm-ed-mask .mm-ed-word-in {
        transform: none;
        transition: none;
    }
    .mm-ed-fadewords .mm-ed-fw {
        opacity: 1;
    }
    .mm-ed-parallax.is-parallaxing img {
        transform: none !important;
    }
}

/* --- Hero background video -----------------------------------------------
   The still photograph is the base layer and always paints immediately; the
   video sits on top and fades in only once it is actually playing, so there
   is never a blank or black frame while it buffers.
   -------------------------------------------------------------------------- */

.mm-ed-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
    pointer-events: none;
}
.mm-ed-hero-video.is-playing {
    opacity: 1;
}
/* Once the footage is running, the still's slow drift is just wasted work. */
.mm-ed-hero.has-video .mm-ed-hero-media img {
    animation-play-state: paused;
}

/* --- Interior page hero --------------------------------------------------- */

.mm-ed-hero-short {
    min-height: min(74svh, 720px);
}
.mm-ed-hero-short .mm-ed-hero-title {
    font-size: clamp(2.8rem, 9vw, 7.5rem);
}

/* --- History timeline ------------------------------------------------------
   Deliberately NOT built on `.mm-ed-section`, which sets `overflow: hidden`
   for the sticker bleed — that would kill the sticky year marker.
   -------------------------------------------------------------------------- */

.mm-ed-chapters {
    position: relative;
    padding-block: clamp(40px, 6vh, 80px);
}
.mm-ed-chapter {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: clamp(28px, 6vw, 96px);
    padding-block: clamp(56px, 9vh, 112px);
    border-top: 1px solid var(--ed-rule);
}
.mm-ed-chapter-marker {
    position: sticky;
    top: 132px;
    align-self: start;
}
.mm-ed-chapter-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ed-accent);
}
.mm-ed-chapter-year {
    display: block;
    margin-top: 12px;
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}
.mm-ed-chapter-figure {
    display: block;
    width: clamp(92px, 11vw, 150px);
    height: auto;
    margin-top: 28px;
}
.mm-ed-chapter-content h2 {
    margin: 0 0 24px;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.mm-ed-chapter-content p {
    margin: 0 0 20px;
    max-width: 62ch;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ed-ink-soft);
}

.mm-ed-mosaic {
    display: grid;
    gap: clamp(12px, 1.6vw, 22px);
    margin-top: clamp(28px, 4vw, 48px);
}
.mm-ed-mosaic-2,
.mm-ed-mosaic-4 { grid-template-columns: repeat(2, 1fr); }
.mm-ed-mosaic-3 { grid-template-columns: repeat(3, 1fr); }
.mm-ed-mosaic figure {
    margin: 0;
}
.mm-ed-mosaic img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background-color: var(--ed-bg-alt);
}
.mm-ed-mosaic-1 img {
    aspect-ratio: 16 / 9;
}
.mm-ed-mosaic figcaption {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
}

@media (max-width: 860px) {
    .mm-ed-chapter {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .mm-ed-chapter-marker {
        position: static;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .mm-ed-chapter-year {
        margin-top: 0;
    }
    .mm-ed-chapter-figure {
        margin: 0 0 0 auto;
        width: 84px;
    }
    .mm-ed-mosaic-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Enquiry form ----------------------------------------------------------
   Presentation-only overrides of the existing `.mm-enquiry-*` classes. The
   form markup, field names and validation behaviour are untouched — these
   rules simply restate the styling in the editorial language.
   -------------------------------------------------------------------------- */

.mm-ed .mm-enquiry-body {
    background-color: var(--ed-bg);
    padding-block: clamp(56px, 9vh, 120px);
}
.mm-ed .mm-enquiry-card {
    max-width: 860px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px);
    background-color: #FFFFFF;
    border: 1px solid var(--ed-rule);
    border-radius: 2px;
    box-shadow: none;
}
.mm-ed .mm-enquiry-body {
    position: relative;
    overflow: hidden;
}
.mm-ed-sticker-enquiry {
    left: clamp(-14px, 3vw, 60px);
    bottom: clamp(24px, 6vh, 90px);
    width: clamp(80px, 8vw, 118px);
    opacity: 0.9;
}
@media (max-width: 1180px) {
    .mm-ed-sticker-enquiry {
        display: none;
    }
}
.mm-ed .mm-required-note {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
}
.mm-ed .mm-required-star {
    color: var(--ed-accent);
}

.mm-ed .mm-enquiry-field label {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-ink);
}
.mm-ed .mm-enquiry-field input,
.mm-ed .mm-enquiry-field select,
.mm-ed .mm-enquiry-field textarea {
    width: 100%;
    padding: 14px 2px;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--ed-rule);
    border-radius: 0;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    font-size: 16px;
    color: var(--ed-ink);
    transition: border-color 0.3s ease;
}
.mm-ed .mm-enquiry-field textarea {
    min-height: 130px;
    resize: vertical;
}
.mm-ed .mm-enquiry-field input:focus,
.mm-ed .mm-enquiry-field select:focus,
.mm-ed .mm-enquiry-field textarea:focus {
    outline: none;
    border-bottom-color: var(--ed-accent);
    box-shadow: none;
}
.mm-ed .mm-enquiry-datetime-row {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--ed-rule);
}
.mm-ed .mm-enquiry-datetime-row.error,
.mm-ed .mm-enquiry-field input.form-error,
.mm-ed .mm-enquiry-field select.form-error,
.mm-ed .mm-enquiry-field textarea.form-error {
    border-bottom-color: #C1392B;
}
/* --- Public form entrance -------------------------------------------------- */

/* The hero and the form card rise in as the page loads. Deliberately a CSS
   animation rather than the `.mm-reveal` class the rest of the public site uses:
   `.mm-reveal` starts at `opacity: 0` and waits for editorial.js to add
   `is-visible`, so a blocked or failed script would leave the booking form
   invisible. An animation cannot fail that way — the worst case is that it does
   not play. Both public forms share these wrappers, so both get the entrance. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes mm-ed-form-rise {
        from {
            opacity: 0;
            transform: translateY(22px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    .mm-ed .mm-ed-hero-short .mm-ed-hero-inner > * {
        animation: mm-ed-form-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .mm-ed .mm-ed-hero-short .mm-ed-hero-inner > *:nth-child(2) {
        animation-delay: 0.08s;
    }
    .mm-ed .mm-ed-hero-short .mm-ed-hero-inner > *:nth-child(n+3) {
        animation-delay: 0.16s;
    }

    .mm-ed .mm-enquiry-card {
        animation: mm-ed-form-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
    }
}

/* --- Membership ------------------------------------------------------------ */

/* Three snapshots of what a month looks like at each size, rather than a row of
   priced cards: the argument is rhythm, not discount. Laid out as a numbered
   list with the statement in a hanging column, so it reads like the rest of the
   page's editorial sections and not like a pricing table dropped into one. */
.mm-ed .mm-ed-belong-top {
    max-width: 780px;
    margin-bottom: clamp(40px, 6vw, 76px);
}
.mm-ed .mm-ed-belong-lede {
    margin-top: clamp(18px, 2vw, 26px);
    max-width: 58ch;
}

.mm-ed .mm-ed-belong-list {
    margin: 0 0 clamp(36px, 5vw, 60px);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ed-rule);
}
.mm-ed .mm-ed-belong-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(24px, 3vw, 38px) 0;
    border-bottom: 1px solid var(--ed-rule);
}
.mm-ed .mm-ed-belong-index {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ed-accent);
    padding-top: 8px;
}
.mm-ed .mm-ed-belong-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 10px clamp(20px, 3vw, 44px);
    align-items: start;
}
/* The line a member would actually say, given the weight of a pull quote. */
.mm-ed .mm-ed-belong-quote {
    grid-column: 1;
    margin: 0;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(26px, 3.4vw, 42px);
    font-style: italic;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--ed-ink);
}
.mm-ed .mm-ed-belong-who {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-top: 10px;
    text-align: right;
}
.mm-ed .mm-ed-belong-plan {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-ink);
}
.mm-ed .mm-ed-belong-meta {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--ed-ink-soft);
}
.mm-ed .mm-ed-belong-detail {
    grid-column: 1;
    margin: 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ed-ink-soft);
}

.mm-ed .mm-ed-belong-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}
.mm-ed .mm-ed-belong-note {
    margin: 0;
    font-size: 14px;
    color: var(--ed-ink-soft);
}

@media (max-width: 860px) {
    .mm-ed .mm-ed-belong-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }
    .mm-ed .mm-ed-belong-body {
        grid-template-columns: minmax(0, 1fr);
    }
    .mm-ed .mm-ed-belong-who {
        grid-column: 1;
        grid-row: auto;
        padding-top: 0;
        text-align: left;
    }
}

/* --- Casual bookings, on the landing page ---------------------------------- */

.mm-ed .mm-ed-casual-intro {
    max-width: 62ch;
    margin-bottom: clamp(32px, 4vw, 52px);
}
.mm-ed .mm-ed-casual-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin-bottom: clamp(32px, 4vw, 52px);
}
.mm-ed .mm-ed-casual-point {
    padding-top: 20px;
    border-top: 1px solid var(--ed-rule);
}
.mm-ed .mm-ed-casual-point h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ed-ink);
}
.mm-ed .mm-ed-casual-point p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ed-ink-soft);
}
.mm-ed .mm-ed-casual-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}
.mm-ed .mm-ed-casual-note {
    margin: 0;
    font-size: 14px;
    color: var(--ed-ink-soft);
}
.mm-ed .mm-ed-casual-note a {
    color: var(--ed-accent);
}
@media (max-width: 860px) {
    .mm-ed .mm-ed-casual-points {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* --- Casual booking price -------------------------------------------------- */

/* What this booking costs, worked out from the rate card admins maintain, shown
   before the customer commits rather than quoted back to them later. */
.mm-ed .mm-booking-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 26px 0 0;
    padding: 18px 20px;
    background-color: var(--ed-bg-alt);
    border-radius: 3px;
}
.mm-ed .mm-booking-price-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
}
.mm-ed .mm-booking-price-value {
    margin-left: auto;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--ed-ink);
}
.mm-ed .mm-booking-price-note {
    flex-basis: 100%;
    font-size: 13px;
    color: var(--ed-ink-soft);
}

/* --- Start time ----------------------------------------------------------- */

/* Every bookable time laid out at once, grouped by part of the day. A dropdown
   hides twenty-five options behind a click and gives no sense of what is on
   offer; as pills the whole day is legible at a glance and one tap picks a time.
   Real radios underneath, so it submits and keys about without any script. */
.mm-ed .mm-enquiry-times {
    /* A fieldset's own margins are reset, but not to nothing: this is a dense
       block of twenty-five pills sitting between two ordinary rows, so it needs
       more room than the 20px every other field carries, or it reads as joined
       to the Category row below it. */
    margin: 34px 0;
    padding: 0;
    border: 0;
}
.mm-ed .mm-enquiry-times > legend {
    display: block;
    margin-bottom: 14px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-ink);
}
.mm-ed .mm-times-group + .mm-times-group {
    margin-top: 18px;
}
.mm-ed .mm-times-group-label {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
}
/* An even grid rather than a wrapped row: the labels are different lengths, so
   flowing them leaves ragged edges and a stray pill on its own. Five to a row
   divides both the ten-slot halves of the day exactly. */
.mm-ed .mm-times-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

/* `.mm-enquiry-field label` styles every label in this form as an uppercase
   caption and outranks a bare `.mm-time-chip`, so these rules carry the extra
   class and element name to win. */
.mm-ed .mm-enquiry-times label.mm-time-chip {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
/* Off-screen rather than display:none, so it stays focusable and reachable by
   keyboard and screen reader. */
.mm-ed .mm-enquiry-times label.mm-time-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.mm-ed .mm-enquiry-times label.mm-time-chip > span {
    display: block;
    padding: 9px 10px;
    background-color: transparent;
    text-align: center;
    border: 1px solid var(--ed-rule);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    color: var(--ed-ink);
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.mm-ed .mm-enquiry-times label.mm-time-chip:hover > span {
    border-color: var(--ed-ink);
}
.mm-ed .mm-enquiry-times label.mm-time-chip input:focus-visible + span {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}
.mm-ed .mm-enquiry-times label.mm-time-chip input:checked + span {
    background-color: var(--ed-accent);
    border-color: var(--ed-accent);
    color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
    .mm-ed .mm-enquiry-times label.mm-time-chip > span {
        transition: none;
    }
}
@media (max-width: 760px) {
    .mm-ed .mm-times-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .mm-ed .mm-times-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .mm-ed .mm-enquiry-times label.mm-time-chip > span {
        padding: 8px 11px;
        font-size: 13px;
    }
}

/* The row draws the single underline its two halves share, so neither control
   draws its own — a select was doubling it up under the time half. */
.mm-ed .mm-enquiry-datetime-row input,
.mm-ed .mm-enquiry-datetime-row select {
    border-bottom: 0;
}
/* A hairline between the date and the time, so they read as two parts of one
   field rather than two controls that happen to sit together. The element names
   are needed to outrank the `border: 0` on the shared field rule above. */
.mm-ed .mm-enquiry-datetime-row > input + select,
.mm-ed .mm-enquiry-datetime-row > input + input {
    padding-left: 16px;
    border-left: 1px solid var(--ed-rule);
}
/* The underline belongs to the row, so focusing either half has to light up the
   row rather than the control the browser is actually focusing. */
.mm-ed .mm-enquiry-datetime-row {
    transition: border-color 0.3s ease;
}
.mm-ed .mm-enquiry-datetime-row:focus-within {
    border-bottom-color: var(--ed-accent);
}
/* Two controls of different kinds sit side by side in here, and left to the
   browser they are different heights: a select is a few pixels shorter than an
   input, and Chrome gives input[type=date] a taller intrinsic box than either
   because of the editor inside it. The tallest set the height of the row, which
   then sat 2px below every other field in the form. Scoped to this row so the
   rest of the form keeps the heights it already had. */
.mm-ed .mm-enquiry-datetime-row input,
.mm-ed .mm-enquiry-datetime-row select {
    line-height: 1.25;
}
.mm-ed .mm-enquiry-datetime-row input[type="date"] {
    box-sizing: border-box;
    height: calc(1.25em + 28px);
}
.mm-ed .mm-enquiry-field .error-message {
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #C1392B;
}

.mm-ed .mm-enquiry-footer {
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--ed-rule);
}
.mm-ed .mm-submit-btn {
    display: inline-block;
    padding: 17px 44px;
    background-color: var(--ed-accent);
    color: #FFFFFF;
    border: 0;
    border-radius: 2px;
    font-family: 'Dia', 'Archivo', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.mm-ed .mm-submit-btn:hover {
    background-color: #E25E00;
    transform: translateY(-2px);
}

/* --- Section grounds -------------------------------------------------------
   Four ways to stop a section being flat beige, so consecutive light sections
   don't read as one undifferentiated slab. Combinable.
   -------------------------------------------------------------------------- */

/* 1. Atmospheric wash — warm light bleeding in from the corners, giving the
      cream some depth without reading as a colour change. */
.mm-ed-ground-wash {
    background-image:
        radial-gradient(70% 55% at 10% -8%, rgba(255, 105, 0, 0.07), transparent 62%),
        radial-gradient(62% 50% at 94% 106%, rgba(74, 63, 48, 0.08), transparent 66%);
}

/* 2. A deeper cream, to alternate against the base. */
.mm-ed-ground-alt {
    background-color: var(--ed-bg-alt);
}

/* 3. Fine industrial grid — `.mm-grid-lines` in style.css, shared with the
      flat sections on the enquiry and auth pages. Dark grounds need the lines
      drawn in light ink to stay visible. */
.mm-ed-specs,
.mm-ed-hscroll,
.mm-ed-cta {
    --mm-grid-line: rgba(242, 238, 231, 0.055);
}

/* 3b. Scroll-blended ground — the section opens on the cream of the section
      above it and warms as it travels up the viewport, so the seam between
      the two never lands as a hard edge. `--blend` (0 to 1) is painted each
      frame by editorial.js; with no JS the section simply holds its first
      colour, and browsers without `color-mix()` fall back to the flat alt. */
.mm-ed-ground-blend {
    --blend: 0;
    --ed-blend-from: var(--ed-bg);
    --ed-blend-to: #EDE2D0;
    background-color: var(--ed-bg-alt);
    background-color: color-mix(
        in oklab,
        var(--ed-blend-to) calc(var(--blend) * 100%),
        var(--ed-blend-from)
    );
}
/* Hold the first inch of the section on the colour above it, so the join is a
   fade rather than a line however far the blend has already travelled. */
.mm-ed-ground-blend::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(90px, 14vh, 190px);
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(to bottom, var(--ed-blend-from), transparent);
}

/* 4. Tinted photograph behind the content, knocked right back so type stays
      legible and the image reads as atmosphere. */
.mm-ed-ground-photo {
    position: relative;
    isolation: isolate;
}
.mm-ed-ground-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
.mm-ed-ground-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.14;
    filter: grayscale(0.4);
}
.mm-ed-ground-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--ed-bg-alt) 0%, rgba(243, 237, 226, 0.45) 45%, var(--ed-bg-alt) 100%);
}
.mm-ed-ground-photo .mm-ed-shell {
    position: relative;
    z-index: 1;
}

/* Dark sections get depth too, rather than sitting as flat near-black. */
.mm-ed-specs {
    background-image:
        radial-gradient(58% 60% at 82% 8%, rgba(255, 105, 0, 0.14), transparent 60%),
        radial-gradient(50% 55% at 8% 96%, rgba(120, 150, 175, 0.10), transparent 62%);
}
.mm-ed-hscroll {
    background-image: radial-gradient(70% 60% at 50% 0%, rgba(255, 105, 0, 0.08), transparent 64%);
}

/* --- Full-bleed image band -------------------------------------------------
   A tall photographic break between sections, drifting on scroll.
   -------------------------------------------------------------------------- */

.mm-ed-banner {
    position: relative;
    height: min(58svh, 560px);
    overflow: hidden;
    background-color: var(--ed-dark);
}
.mm-ed-banner picture {
    display: block;
    height: 100%;
}
.mm-ed-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mm-ed-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23, 23, 21, 0.72) 0%, rgba(23, 23, 21, 0.1) 55%);
}
.mm-ed-banner-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    max-width: var(--ed-measure);
    margin: 0 auto;
    padding: 0 var(--ed-gutter) clamp(28px, 4vw, 52px);
    color: var(--ed-on-dark);
}
.mm-ed-banner-caption p {
    margin: 10px 0 0;
    max-width: 46ch;
    font-size: clamp(1.05rem, 1.9vw, 1.5rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.015em;
}

/* The enquiry form sits on a washed ground rather than flat cream. */
.mm-ed .mm-enquiry-body {
    background-image:
        radial-gradient(64% 50% at 8% -6%, rgba(255, 105, 0, 0.07), transparent 62%),
        radial-gradient(58% 48% at 95% 104%, rgba(74, 63, 48, 0.08), transparent 66%);
}

/* --- Definition list & tick list (membership) ----------------------------- */

.mm-ed-deflist {
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: 0;
    border-top: 1px solid var(--ed-rule);
}
.mm-ed-deflist-item {
    display: grid;
    grid-template-columns: minmax(180px, 22%) 1fr;
    gap: clamp(16px, 3vw, 48px);
    padding-block: clamp(22px, 2.6vw, 34px);
    border-bottom: 1px solid var(--ed-rule);
}
.mm-ed-deflist dt {
    margin: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.mm-ed-deflist dd {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ed-ink-soft);
}

.mm-ed-ticklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(14px, 1.8vw, 22px) clamp(24px, 3vw, 56px);
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: 0;
    list-style: none;
}
.mm-ed-ticklist li {
    position: relative;
    padding-left: 30px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ed-ink-soft);
}
.mm-ed-ticklist li::before {
    content: '';
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 14px;
    height: 1px;
    background-color: var(--ed-accent);
}

@media (max-width: 640px) {
    .mm-ed-deflist-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* --- Membership rates, tables & notes ------------------------------------ */

.mm-ed-intro {
    max-width: 68ch;
    margin-top: 24px;
}

.mm-ed-subhead {
    margin: clamp(56px, 7vw, 96px) 0 0;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Rate cards: image on one side, the price large on the other. Every second
   card flips so the page alternates down the column. */
/* Three plans, side by side. They were full-width rows alternating a photo left
   and right, which ran to 2,300px and made the one thing people come here to do
   — compare three prices — impossible without scrolling between them. Columns
   put the figures on one line of sight; the photos went because they were
   decorative and were what forced the height. */
.mm-ed-rates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin-top: clamp(32px, 4vw, 52px);
}
.mm-ed-rate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(24px, 2.4vw, 34px);
    border: 1px solid var(--ed-rule);
    background-color: var(--ed-bg);
}
.mm-ed-rate-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.mm-ed-rate-index {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ed-accent);
}
.mm-ed-rate-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
}
.mm-ed-rate-price {
    margin: 4px 0 0;
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}
.mm-ed-rate-price span {
    margin-left: 8px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ed-ink-soft);
}
/* The same figure with GST, under the headline price. */
.mm-ed-rate-gst {
    margin: 6px 0 2px;
    font-size: 14px;
    color: var(--ed-ink-soft);
}
/* The two numbers that actually differ between plans, given equal weight and the
   same position in every card so the eye can run straight down them. */
.mm-ed-rate-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin: 14px 0 4px;
    padding: 14px 0;
    border-top: 1px solid var(--ed-rule);
    border-bottom: 1px solid var(--ed-rule);
}
.mm-ed-rate-facts dt {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ed-ink-soft);
}
.mm-ed-rate-facts dd {
    margin: 4px 0 0;
    font-size: 28px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ed-accent);
}
/* Pinned to the bottom of the card so the three buttons line up whatever the
   length of the description above them. */
.mm-ed-rate-actions {
    margin-top: auto;
    padding-top: 18px;
}
.mm-ed-rate-blurb {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ed-ink-soft);
}
.mm-ed-rate-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
    margin-top: auto;
    padding-top: clamp(20px, 2.4vw, 32px);
}

.mm-ed-table-wrap {
    margin-top: clamp(36px, 4.5vw, 56px);
    overflow-x: auto;
}
.mm-ed-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.mm-ed-table th,
.mm-ed-table td {
    padding: clamp(16px, 2vw, 26px) 20px clamp(16px, 2vw, 26px) 0;
    border-bottom: 1px solid var(--ed-rule);
    vertical-align: baseline;
}
.mm-ed-table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ed-accent);
}
.mm-ed-table tbody th {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    white-space: nowrap;
}
.mm-ed-table td {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ed-ink-soft);
}
.mm-ed-table-figure {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ed-ink);
    white-space: nowrap;
}

.mm-ed-note {
    max-width: 68ch;
    margin: clamp(28px, 3vw, 40px) 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ed-ink-soft);
}

/* --- Definition list & tick list (membership) ----------------------------- */

.mm-ed-deflist {
    margin: clamp(36px, 4.5vw, 56px) 0 0;
    padding: 0;
    border-top: 1px solid var(--ed-rule);
}
.mm-ed-deflist-item {
    display: grid;
    grid-template-columns: minmax(180px, 22%) 1fr;
    gap: clamp(16px, 3vw, 48px);
    padding-block: clamp(22px, 2.6vw, 34px);
    border-bottom: 1px solid var(--ed-rule);
}
.mm-ed-deflist dt {
    margin: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.mm-ed-deflist dd {
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ed-ink-soft);
}

.mm-ed-ticklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(14px, 1.8vw, 22px) clamp(24px, 3vw, 56px);
    margin: clamp(32px, 4vw, 48px) 0 0;
    padding: 0;
    list-style: none;
}
.mm-ed-ticklist-wide {
    grid-template-columns: 1fr;
    max-width: 78ch;
}
.mm-ed-ticklist li {
    position: relative;
    padding-left: 30px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ed-ink-soft);
}
.mm-ed-ticklist li::before {
    content: '';
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 14px;
    height: 1px;
    background-color: var(--ed-accent);
}

/* Three priced columns need real width to stay comparable; below that they stack
   rather than shrinking into unreadable slivers. */
@media (max-width: 1000px) {
    .mm-ed-rates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .mm-ed-rates {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .mm-ed-deflist-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Booking rules sit beside the credits table as a set-off aside. */
.mm-ed-aside {
    margin-top: clamp(48px, 6vw, 80px);
    padding-left: clamp(20px, 3vw, 40px);
    border-left: 2px solid var(--ed-accent);
}
.mm-ed-aside .mm-ed-subhead {
    margin-top: 0;
}
.mm-ed-aside .mm-ed-ticklist {
    margin-top: clamp(20px, 2.4vw, 28px);
}

/* Three room cards read better capped than stretched full width. */
.mm-ed-grid-rooms {
    margin-top: clamp(40px, 5vw, 64px);
}

/* The facilities list runs down one half of a split, so it stays single file. */
.mm-ed-split-body .mm-ed-ticklist {
    margin-top: clamp(24px, 3vw, 36px);
}

/* ==========================================================================
   Membership — motion character
   Scoped to `.mm-ed-membership` so the landing and history pages keep their
   existing, quicker reveals. Two easings do all the work: an expo-out for
   anything arriving, and a symmetric in-out for anything the user triggers.
   ========================================================================== */

.mm-ed-membership {
    --ed-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ed-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
    --ed-dur: 1.4s;
}

/* In-page jumps ride the same slow curve rather than teleporting. */
html:focus-within {
    scroll-behavior: smooth;
}

/* A longer travel over a longer duration, decelerating hard at the end —
   the difference between "it faded in" and "it arrived". */
.mm-ed-membership .mm-reveal {
    transform: translateY(clamp(48px, 7vw, 110px));
    transition:
        opacity var(--ed-dur) var(--ed-ease-out),
        transform var(--ed-dur) var(--ed-ease-out);
}
/* The travel above outranks style.css's `.mm-reveal.is-visible`, so the
   landing has to be restated here — otherwise everything stays pushed down,
   under the next heading and past the bottom of its section. */
.mm-ed-membership .mm-reveal.is-visible {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .mm-ed-membership .mm-reveal {
        transform: none;
        transition: none;
    }
}

/* Media wipes up from its own bottom edge while the image inside settles out
   of an overscale, so the frame fills rather than the picture sliding. */
.mm-ed-membership .mm-ed-wipe {
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--ed-dur) var(--ed-ease-out);
}
.mm-ed-membership .mm-ed-wipe img {
    transform: scale(1.12);
    transition: transform 1.8s var(--ed-ease-out);
}
.mm-ed-membership .mm-reveal.is-visible .mm-ed-wipe,
.mm-ed-membership .mm-ed-wipe.mm-reveal.is-visible {
    clip-path: inset(0 0 0 0);
}
.mm-ed-membership .mm-reveal.is-visible .mm-ed-wipe img,
.mm-ed-membership .mm-ed-wipe.mm-reveal.is-visible img {
    transform: scale(1);
}

/* Headings rise word by word on the same curve, a touch slower and with a
   wider gap between words than the shared default. */
.mm-ed-membership .mm-ed-mask .mm-ed-word-in {
    transition: transform 1.25s var(--ed-ease-out);
}

/* Rate cards cascade rather than landing together. */
.mm-ed-rates > .mm-reveal:nth-child(2) { transition-delay: 0.12s; }
.mm-ed-rates > .mm-reveal:nth-child(3) { transition-delay: 0.24s; }

/* Hover: the whole card answers, but it stays exactly where it is. Lifting the
   card moved the thing being pointed at, which is awkward to use and worse on a
   trackpad; instead the ground warms, the outline firms up and a rule draws
   itself along the bottom edge. `focus-within` gives keyboard users the same
   answer, since each card holds a link. */
.mm-ed-rate {
    position: relative;
    transition:
        background-color 0.45s var(--ed-ease-out),
        border-color 0.45s var(--ed-ease-out);
}
.mm-ed-rate::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background-color: var(--ed-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.55s var(--ed-ease-out);
    pointer-events: none;
}
.mm-ed-rate:hover,
.mm-ed-rate:focus-within {
    background-color: var(--ed-bg-alt);
    border-color: var(--ed-ink-soft);
}
.mm-ed-rate:hover::after,
.mm-ed-rate:focus-within::after {
    transform: scaleX(1);
}
.mm-ed-membership .mm-ed-rate:hover .mm-ed-rate-media img {
    transform: scale(1.04);
    transition: transform 1.2s var(--ed-ease-out);
}
.mm-ed-rate-index {
    transition: color 0.5s var(--ed-ease-io);
}
.mm-ed-rate:hover .mm-ed-rate-index,
.mm-ed-rate:focus-within .mm-ed-rate-index {
    color: var(--ed-ink);
}

/* The counters' underline draws itself in as the band arrives. */
.mm-ed-membership .mm-ed-spec {
    border-top-color: transparent;
    background-image: linear-gradient(to right, rgba(242, 238, 231, 0.18), rgba(242, 238, 231, 0.18));
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 0 1px;
    transition: background-size 1.6s var(--ed-ease-out);
}
.mm-ed-membership .mm-ed-spec.is-visible {
    background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }
    .mm-ed-membership .mm-reveal {
        transform: none;
        transition: none;
    }
    .mm-ed-membership .mm-ed-wipe,
    .mm-ed-membership .mm-ed-wipe img {
        clip-path: none;
        transform: none;
        transition: none;
    }
    .mm-ed-membership .mm-ed-spec {
        border-top-color: rgba(242, 238, 231, 0.18);
        background-size: 100% 1px;
        transition: none;
    }
    .mm-ed-rate,
    .mm-ed-rate:hover {
        transform: none;
        transition: none;
    }
    /* The bottom rule appears rather than drawing itself. */
    .mm-ed-rate::after {
        transition: none;
    }
}

/* --- Credit ledger -------------------------------------------------------
   "5 credits buys 90 minutes" read as an equation rather than a table row,
   with a bar under each line sized against the dearest standard session so
   the three rooms can be compared at a glance.
   -------------------------------------------------------------------------- */

.mm-ed-ledger {
    margin: clamp(40px, 5vw, 68px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ed-rule);
}
.mm-ed-ledger-row {
    display: grid;
    grid-template-columns: minmax(120px, 15%) auto 1fr;
    align-items: start;
    /* Column gap only: the shorthand was also spacing the bar away from the row
       it belongs to, on top of the bar's own margin. */
    column-gap: clamp(16px, 2.5vw, 40px);
    row-gap: 0;
    padding-block: clamp(18px, 2vw, 26px);
    border-bottom: 1px solid var(--ed-rule);
}
.mm-ed-ledger-cost {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mm-ed-ledger-figure {
    /* Was 4.6rem, which with baseline alignment pushed the row beside it down and
       left a large void above the bar. */
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ed-accent);
}
.mm-ed-ledger-unit,
.mm-ed-ledger-eq {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-ink-soft);
}
.mm-ed-ledger-get {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mm-ed-ledger-room {
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.mm-ed-ledger-session {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ed-ink-soft);
}
.mm-ed-ledger-extra {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ed-ink-soft);
    opacity: 0.8;
}
/* The bar spans the full row on its own line beneath the three columns. */
.mm-ed-ledger-bar {
    grid-column: 1 / -1;
    display: block;
    height: 2px;
    margin-top: clamp(10px, 1.2vw, 16px);
    background-color: var(--ed-rule);
}
.mm-ed-ledger-bar > span {
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--ed-accent);
    transition: width 1.6s var(--ed-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.2s;
}
.mm-ed-ledger-row.is-visible .mm-ed-ledger-bar > span {
    width: var(--bar, 0%);
}

/* --- Application rail ----------------------------------------------------
   Deliberately not the landing page's one-card-at-a-time deck: every step is
   on screen at once, threaded onto a single drawn line.
   -------------------------------------------------------------------------- */

.mm-ed-rail {
    margin: clamp(44px, 5.5vw, 76px) 0 0;
    padding: 0;
    list-style: none;
}
.mm-ed-rail-step {
    position: relative;
    display: grid;
    grid-template-columns: clamp(56px, 7vw, 88px) 1fr;
    gap: clamp(20px, 3vw, 44px);
    padding-bottom: clamp(36px, 4.5vw, 60px);
}
/* The thread itself, drawn between one node and the next. */
.mm-ed-rail-step::before {
    content: '';
    position: absolute;
    top: clamp(40px, 5vw, 56px);
    bottom: 0;
    left: clamp(27px, 3.5vw, 43px);
    width: 1px;
    background-color: var(--ed-rule);
}
.mm-ed-rail-step:last-child {
    padding-bottom: 0;
}
.mm-ed-rail-step:last-child::before {
    display: none;
}
.mm-ed-rail-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(56px, 7vw, 88px);
    aspect-ratio: 1;
    border: 1px solid var(--ed-rule);
    border-radius: 50%;
    background-color: var(--ed-bg);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ed-ink-soft);
    transition:
        border-color 0.9s var(--ed-ease-out, ease),
        color 0.9s var(--ed-ease-out, ease);
}
.mm-ed-rail-step.is-visible .mm-ed-rail-node {
    border-color: var(--ed-accent);
    color: var(--ed-accent);
}
.mm-ed-rail-body {
    padding-top: clamp(10px, 1.6vw, 20px);
}
.mm-ed-rail-body h3 {
    margin: 0 0 10px;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.mm-ed-rail-body p {
    margin: 0;
    max-width: 62ch;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ed-ink-soft);
}

/* --- Non-member price list -----------------------------------------------
   A classified-ad price list: the room, a dotted leader, the cost.
   -------------------------------------------------------------------------- */

.mm-ed-pricelist {
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: 0;
    list-style: none;
}
.mm-ed-pricelist-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-block: clamp(20px, 2.4vw, 30px);
    border-bottom: 1px solid var(--ed-rule);
}
.mm-ed-pricelist-row:first-child {
    border-top: 1px solid var(--ed-rule);
}
.mm-ed-pricelist-room {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
}
.mm-ed-pricelist-credits {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ed-accent);
}
.mm-ed-pricelist-leader {
    flex: 1;
    min-width: 24px;
    height: 1em;
    border-bottom: 1px dotted var(--ed-rule);
}
.mm-ed-pricelist-cost {
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mm-ed-ledger-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mm-ed-ledger-eq {
        display: none;
    }
    .mm-ed-pricelist-row {
        flex-wrap: wrap;
    }
    .mm-ed-pricelist-leader {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-ed-ledger-bar > span {
        width: var(--bar, 0%);
        transition: none;
    }
    .mm-ed-rail-node {
        transition: none;
    }
}


/* --- Membership page rhythm ------------------------------------------------ */

/* Twelve sections at the shared `--ed-section` spacing ran the page to well over
   eleven thousand pixels — more than twelve screens, most of it empty. The
   landing page earns that pace with photography between its sections; this one
   is mostly reading, so it gets its own tighter measure. */
.mm-ed-membership .mm-ed-section {
    padding-block: clamp(56px, 7vh, 96px);
}
/* One rhythm for the whole page. Each section's heading was followed by a
   different block — a grid, a list, a paragraph — each carrying its own top
   margin, so the gap under the heading came out at 18, 36, 51, 56, 64 and 70px
   depending on the section. The heading's own margin is dropped and the spacing
   is set once, on whatever follows it, so every section reads the same. */
.mm-ed-membership .mm-ed-section > .mm-ed-shell > .mm-ed-eyebrow {
    margin-bottom: clamp(10px, 1.2vw, 16px);
}
.mm-ed-membership .mm-ed-section > .mm-ed-shell > .mm-ed-display {
    margin-bottom: 0;
}
/* The split layout nests its heading a level deeper, so it needs naming too or
   it keeps its own spacing and breaks the rhythm. */
.mm-ed-membership .mm-ed-split-body > .mm-ed-display {
    margin-bottom: 0;
}
.mm-ed-membership .mm-ed-split-body > .mm-ed-display + *,
.mm-ed-membership .mm-ed-section > .mm-ed-shell > .mm-ed-display + * {
    margin-top: clamp(26px, 3vw, 40px);
}
/* A lede paragraph belongs to the heading, so it sits closer than a block of
   content would, and then owns the gap to whatever comes after it. */
.mm-ed-membership .mm-ed-section > .mm-ed-shell > .mm-ed-display + .mm-ed-body {
    margin-top: clamp(14px, 1.6vw, 20px);
}
.mm-ed-membership .mm-ed-section > .mm-ed-shell > .mm-ed-body + * {
    margin-top: clamp(26px, 3vw, 40px);
}

/* Links inside the page's body copy were coming through as the browser's blue. */
.mm-ed-membership .mm-ed-note a,
.mm-ed-membership .mm-ed-body a {
    color: var(--ed-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.mm-ed-membership .mm-ed-note a:hover,
.mm-ed-membership .mm-ed-body a:hover {
    opacity: 0.72;
}

.mm-ed-nonmember-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}
.mm-ed-nonmember-actions .mm-ed-note {
    margin: 0;
}