/* ==========================================================================
   Mehr — romantic couture editorial for bridal & formal wear.

   Ported from the Stitch "Mehr | Romantic Couture Editorial" design (the
   Heritage Couture design system lives at
   docs/templates/pending/stitch_32_mehr_bridal_couture_homepage/…/heritage_couture/DESIGN.md):
   a warm ivory-blush canvas, deep-maroon structural panels, antique-gold
   keylines and eyebrows, Playfair Display (400) headlines over Inter UI and
   prices, and PERFECTLY SHARP 0px corners with ZERO shadows — the system
   rejects elevation in favour of tonal layers and thin 1px gold rules.

   This theme OWNS its header + the hero / featured / atelier-story /
   new-arrivals / journal / newsletter home sections (mh-* markup) and
   INHERITS Modern Retail's functional pages plus the trust / promo /
   categories / brands home partials. This stylesheet therefore has two jobs:

     (a) style the NEW `mh-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the ivory-blush palette, flattening every
         radius and shadow, and drawing the gold keyline structure.

   Everything is scoped under `body.mh-theme` and reads the 5 customizer
   tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
   --ll-font-body, --ll-btn-radius) with theme.json-default fallbacks, so the
   customizer + live preview keep working: change the primary colour and every
   maroon surface follows.

   Colour roles worth knowing before editing:
     --mh-maroon      the customizer primary (#5e1a2c) — buttons, headlines,
                      the newsletter band.
     --mh-maroon-deep the design's darkest maroon (#420418) — announcement
                      band, footer, primary-button hover.
     --mh-gold        the customizer accent (#c2a05c) — KEYLINES, frames and
                      fills only. It measures 2.40:1 on the ivory canvas, so
                      it must NEVER carry text.
     --mh-gold-ink    the export's own darker bronze (#765a1d, 6.25:1 on
                      ivory) — every gold-flavoured TEXT role (eyebrows,
                      tracked labels, step numerals).
   ========================================================================== */

body.mh-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --mh-maroon: var(--bs-primary, #5e1a2c);
    --mh-maroon-rgb: var(--bs-primary-rgb, 94, 26, 44);
    --mh-gold: var(--ll-accent, #c2a05c);
    --mh-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --mh-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Heritage Couture palette (DESIGN.md + the rendered homepage) */
    --mh-maroon-deep: #420418;
    --mh-gold-ink: #765a1d;
    --mh-gold-soft: #fed88e;
    --mh-ivory: #fff8f7;
    --mh-blush-low: #fff0f1;
    --mh-blush: #faeaeb;
    --mh-blush-high: #f4e5e6;
    --mh-blush-dim: #e6d6d7;
    --mh-ink: #211a1b;
    --mh-muted: #534245;
    --mh-soft: #6f5c5f;
    --mh-line: #d9c1c3;
    --mh-white: #ffffff;

    /* Re-point the inherited base neutrals at the ivory-blush palette so
       every inherited mr-* surface (bands, borders, fills, muted text, the
       shop / PDP / cart / checkout / account / blog pages) follows. */
    --mr-ink: var(--mh-ink);
    --mr-muted: var(--mh-muted);
    --mr-soft: var(--mh-soft);
    --mr-surface: var(--mh-ivory);
    --mr-band: var(--mh-blush-dim);
    --mr-band-alt: var(--mh-blush);
    --mr-fill: var(--mh-blush-high);
    --mr-border: var(--mh-line);
    --mr-border-strong: var(--mh-gold);
    --mr-radius: 0;
    --mr-gold: var(--mh-gold);
    --mr-shadow: none;

    /* Bootstrap link colour — set via the token rather than a bare
       `body.mh-theme a { color: … }` rule, which would out-specify the base
       `.mr-btn--primary { color:#fff }` and repaint every anchor-based CTA's
       label to ink (an invisible label on the maroon fill). */
    --bs-link-color-rgb: var(--mh-maroon-rgb);
    --bs-link-hover-color-rgb: 66, 4, 24;
    --bs-body-bg: var(--mh-ivory);

    background-color: var(--mh-ivory);
    color: var(--mh-ink);
    font-family: var(--mh-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Shape discipline — "Perfectly Sharp (0px)" per DESIGN.md, and zero shadows.
   The customizer button_radius default is 0; hard-flatten everything else.
   The two ROUND product-card overlay controls are exempted immediately below
   (the heart is a <button> for signed-in shoppers and an <a> for guests, so a
   blanket flatten would square it for logged-in users only).
   -------------------------------------------------------------------------- */
body.mh-theme .mr-card,
body.mh-theme .mr-card__media,
body.mh-theme .mr-card__badge,
body.mh-theme .mr-card__sale,
body.mh-theme .mr-card__quick,
body.mh-theme .mr-promo,
body.mh-theme .mr-promo__img,
body.mh-theme .mr-tile,
body.mh-theme .mr-article__media,
body.mh-theme .mr-article__media img,
body.mh-theme .mr-panel,
body.mh-theme .form-control,
body.mh-theme .form-select,
body.mh-theme .mr-btn,
body.mh-theme .btn,
body.mh-theme .dropdown-menu,
body.mh-theme .offcanvas,
body.mh-theme .modal-content,
body.mh-theme .mr-social {
    border-radius: 0 !important;
    box-shadow: none;
}

/* The two round overlay controls stay round — see the note above. (The footer
   socials do not need the exemption: they are always `<a>`, so squaring them
   is consistent for every visitor and matches the design system's sharpness.) */
body.mh-theme .mr-card__wish,
body.mh-theme .mr-card__quickview {
    border-radius: 9999px !important;
}

/* Bootstrap's select keeps its caret gutter. NEVER use a `padding`
   shorthand here — it eats the 2.25rem the caret background-image needs and
   the option text renders under the arrow. */
body.mh-theme .form-select {
    padding-inline-end: 2.25rem;
}

/* --------------------------------------------------------------------------
   Typography — Playfair 400 authority, bronze tracked eyebrows, Inter prices.
   -------------------------------------------------------------------------- */
body.mh-theme h1, body.mh-theme h2, body.mh-theme h3,
body.mh-theme h4, body.mh-theme h5, body.mh-theme h6,
body.mh-theme .mr-display,
body.mh-theme .mr-headline {
    font-family: var(--mh-font-head);
    color: var(--mh-maroon);
    font-weight: 400;
    letter-spacing: -0.02em;
}

body.mh-theme .mr-display {
    line-height: 1.12;
}

body.mh-theme .mr-eyebrow,
body.mh-theme .mh-eyebrow {
    font-family: var(--mh-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mh-gold-ink);
}

/* The short gold hairline the export draws under centered headings. */
body.mh-theme .mh-rule {
    display: block;
    width: 96px;
    height: 1px;
    margin: 1.25rem auto 0;
    background: var(--mh-gold);
}

/* --------------------------------------------------------------------------
   Buttons + keyline links — sharp, uppercase, widely tracked. Solid maroon
   primary; hairline-maroon ghost secondary. Hover deepens, never rounds.
   -------------------------------------------------------------------------- */
body.mh-theme .mr-btn {
    border-radius: 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 1rem 2.4rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.mh-theme .mr-btn--primary,
body.mh-theme .btn-primary {
    background-color: var(--mh-maroon);
    border-color: var(--mh-maroon);
    /* Re-asserted at (0,2,1) so nothing in this file can repaint the label. */
    color: #fff;
}

body.mh-theme .mr-btn--primary:hover,
body.mh-theme .mr-btn--primary:focus,
body.mh-theme .btn-primary:hover {
    background-color: var(--mh-maroon-deep);
    border-color: var(--mh-maroon-deep);
    color: #fff;
    filter: none;
}

body.mh-theme .mr-btn--outline,
body.mh-theme .mh-btn--outline,
body.mh-theme .mh-btn--ghost {
    border: 1px solid var(--mh-maroon);
    background: transparent;
    color: var(--mh-maroon);
}

body.mh-theme .mr-btn--outline:hover,
body.mh-theme .mh-btn--outline:hover,
body.mh-theme .mh-btn--ghost:hover {
    background-color: var(--mh-maroon);
    border-color: var(--mh-maroon);
    color: #fff;
}

body.mh-theme .mh-keyline-link {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mh-maroon);
    text-decoration: none;
    border-bottom: 1px solid var(--mh-maroon);
    padding-bottom: 0.35rem;
    transition: color 0.25s ease, border-color 0.25s ease;
}

body.mh-theme .mh-keyline-link:hover {
    color: var(--mh-gold-ink);
    border-bottom-color: var(--mh-gold);
}

body.mh-theme .mr-ulink { color: var(--mh-maroon); }
body.mh-theme .mr-ulink:hover { color: var(--mh-gold-ink); border-color: var(--mh-gold); }

/* Inputs — the design defines fields by a 1px gold bottom rule. */
body.mh-theme .form-control,
body.mh-theme .form-select {
    background-color: var(--mh-white);
    border-color: var(--mh-line);
    color: var(--mh-ink);
}

body.mh-theme .form-control:focus,
body.mh-theme .form-select:focus {
    border-color: var(--mh-gold);
    box-shadow: none;
}

body.mh-theme .form-control::placeholder { color: var(--mh-soft); }

body.mh-theme .mr-divider { border-color: var(--mh-line); opacity: 1; }

/* --------------------------------------------------------------------------
   Announcement band + header — deepest maroon strip over ivory glass, the
   centered Playfair wordmark, tracked nav and the signature gold keyline.
   -------------------------------------------------------------------------- */
body.mh-theme .mh-announce {
    background-color: var(--mh-maroon-deep);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.25em;
}

body.mh-theme .mh-header {
    background-color: rgba(255, 248, 247, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mh-gold);
}

body.mh-theme .mh-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

body.mh-theme .mh-header__side--start { justify-self: start; display: flex; align-items: center; gap: 1rem; }
body.mh-theme .mh-header__side--end { justify-self: end; display: flex; align-items: center; gap: 1.75rem; }

body.mh-theme .mh-nav { display: flex; align-items: center; gap: 2rem; }

body.mh-theme .mh-logo {
    font-family: var(--mh-font-head);
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-indent: 0.22em; /* balances the tracked wordmark optically */
    text-transform: uppercase;
    color: var(--mh-maroon);
    text-decoration: none;
    white-space: nowrap;
}

body.mh-theme .mh-logo img { max-height: 42px; }

body.mh-theme .mr-nav-link {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mh-muted);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid transparent;
}

body.mh-theme .mr-nav-link:hover,
body.mh-theme .mr-nav-link.is-active {
    color: var(--mh-maroon);
    border-bottom-color: var(--mh-gold);
}

body.mh-theme .mr-icon-btn { color: var(--mh-maroon); }
body.mh-theme .mr-icon-btn:hover { color: var(--mh-gold-ink); }

body.mh-theme .dropdown-menu {
    background-color: var(--mh-ivory);
    border: 1px solid var(--mh-gold);
}

body.mh-theme .dropdown-item { color: var(--mh-muted); font-size: 0.9rem; }
body.mh-theme .dropdown-item:hover,
body.mh-theme .dropdown-item:focus { background-color: var(--mh-blush); color: var(--mh-maroon); }

body.mh-theme .mr-search input {
    border: none;
    border-bottom: 1px solid var(--mh-line);
    border-radius: 0;
    background: transparent;
}

body.mh-theme .mr-search input:focus { border-bottom-color: var(--mh-gold); }

/* --------------------------------------------------------------------------
   Hero — the export INVERTS the usual polarity: a bright ivory veil over the
   couture photograph with deep-maroon type on top. The scrim is kept STRONG
   (0.94 → 0.78 across the copy column) precisely because the headline is
   dark: it must stay legible over any merchant photograph, bright or dark.
   Never remove it.
   -------------------------------------------------------------------------- */
body.mh-theme .mh-hero { background-color: var(--mh-blush); }

body.mh-theme .mh-hero .mr-hero__overlay {
    background: linear-gradient(
        90deg,
        rgba(255, 248, 247, 0.94) 0%,
        rgba(255, 248, 247, 0.86) 26%,
        rgba(255, 248, 247, 0.62) 52%,
        rgba(255, 248, 247, 0) 88%
    );
}

body.mh-theme .mh-hero__copy { max-width: 34rem; }

body.mh-theme .mh-hero__copy .mh-eyebrow {
    color: var(--mh-gold-ink);
    letter-spacing: 0.3em;
    margin-bottom: 1rem;
}

body.mh-theme .mh-hero__copy .mh-hero__title {
    color: var(--mh-maroon);
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

body.mh-theme .mh-hero__copy .mh-hero__sub {
    font-family: var(--mh-font-head);
    font-style: italic;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    line-height: 1.5;
    color: var(--mh-muted);
    max-width: 30ch;
    margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   Trust strip — the export stacks a thin gold glyph over one tracked label
   and closes the band with hairlines top and bottom.
   `.mr-band--alt.border-bottom` is the trust section's unique handle.
   -------------------------------------------------------------------------- */
body.mh-theme .mr-band--alt.border-bottom {
    border-top: 1px solid var(--mh-gold);
    border-bottom-color: var(--mh-gold) !important;
}

body.mh-theme .mr-trust {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

body.mh-theme .mr-trust svg { width: 26px; height: 26px; color: var(--mh-gold-ink); }

body.mh-theme .mr-trust strong {
    font-family: var(--mh-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--mh-muted);
}

body.mh-theme .mr-trust span { font-size: 0.82rem; color: var(--mh-soft); }

/* --------------------------------------------------------------------------
   Promo tiles — the export frames each tile in a 1px gold keyline with an
   inner 8px inset, and STAGGERS the middle tile down the page.
   -------------------------------------------------------------------------- */
body.mh-theme .mr-promo {
    /* The export's tiles are ~384 x 700 in the 1200px grid — much taller than
       the base's 4/5 card ratio. */
    aspect-ratio: 5 / 9;
    border: 1px solid rgba(118, 90, 29, 0.3);
    padding: 0.5rem;
    background-color: var(--mh-blush);
    transition: border-color 0.3s ease;
}

body.mh-theme .mr-promo:hover { border-color: var(--mh-gold); }

/* The image sits INSIDE the frame's padding (the base pins it to the tile). */
body.mh-theme .mr-promo__img,
body.mh-theme .mr-promo__scrim { inset: 0.5rem; }

body.mh-theme .mr-promo__scrim { background: rgba(20, 4, 10, 0.22); }
body.mh-theme .mr-promo:hover .mr-promo__scrim { background: rgba(20, 4, 10, 0.42); }

body.mh-theme .mr-promo__cap { left: 2.5rem; right: 2.5rem; bottom: 2.5rem; }

body.mh-theme .mr-promo__title {
    font-family: var(--mh-font-head);
    font-weight: 400;
    color: #fff;
}

body.mh-theme .mr-promo__cta {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

/* The base hover rule is `.mr-promo:hover .mr-promo__cta` (0,0,3,0) — beat it
   with the same descendant shape so the label never turns gold-on-scrim. */
body.mh-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-bottom-color: var(--mh-gold);
}

/* Staggered heights: the middle tile drops, matching the export's offset
   editorial rhythm. Desktop only — the mobile stack is a plain column. The
   selectors are pinned to `.mr-promo` (and the section is widened with
   :has()) so the journal's sibling 3-column row is never touched; browsers
   without :has() simply render the tiles level, which is a graceful loss. */
@media (min-width: 768px) {
    body.mh-theme .row-cols-md-3 > .col:nth-child(2) > .mr-promo { transform: translateY(3rem); }
    body.mh-theme .mr-section:has(.mr-promo) { padding-bottom: calc(var(--mr-section-y) + 3rem); }
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — gallery minimalism: full-bleed 3:4
   media on a blush well, CENTERED serif title over an Inter price, no chrome.
   The card stays borderless, so its text needs no inset padding.
   -------------------------------------------------------------------------- */
body.mh-theme .mr-card { background: transparent; text-align: center; }

body.mh-theme .mr-card__media { background-color: var(--mh-blush); margin-bottom: 1.25rem; }

body.mh-theme .mr-card__title,
body.mh-theme .mr-card__title a {
    font-family: var(--mh-font-head);
    font-size: 1.12rem;
    font-weight: 400;
    color: var(--mh-ink);
}

body.mh-theme .mr-card__title a:hover { color: var(--mh-maroon); }

body.mh-theme .mr-card__eyebrow {
    color: var(--mh-soft);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.64rem;
}

body.mh-theme .mr-card__price {
    font-family: var(--mh-font-body);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--mh-maroon);
}

body.mh-theme .mr-card__price del { color: var(--mh-soft); font-weight: 400; }

body.mh-theme .mr-card__sale,
body.mh-theme .mr-card__badge {
    background-color: var(--mh-maroon-deep);
    color: #fff;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* The two ROUND overlay controls — the heart AND the quick-view eye — are
   siblings and are always restyled together. Ivory circle + maroon ink reads
   12.6:1 at rest; the hover pair (--mr-surface / --mr-ink) is the base's
   token-driven default and measures 15.2:1 here. */
body.mh-theme .mr-card__wish,
body.mh-theme .mr-card__quickview {
    background-color: rgba(255, 248, 247, 0.92);
    color: var(--mh-maroon);
}

body.mh-theme .mr-card__wish:hover,
body.mh-theme .mr-card__quickview:hover {
    background-color: var(--mh-ivory);
    color: var(--mh-ink);
}

body.mh-theme .mr-card__wish.is-active { color: var(--mh-maroon-deep); }

/* The slide-up Add-to-Cart bar (a THIRD, differently-named control). */
body.mh-theme .mr-card__quick {
    background-color: var(--mh-maroon);
    color: #fff;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Category tiles (inherited) — the export's four flat photo panels with a
   centered tracked label under a maroon wash.
   -------------------------------------------------------------------------- */
body.mh-theme .mr-tile--cat { height: 320px; }

/* Kept at 0.38+ rather than the export's lighter wash: the label is white and
   has to hold up over an arbitrary merchant photograph, bright or dark. */
body.mh-theme .mr-tile--cat .mr-tile__scrim { background: rgba(66, 4, 24, 0.38); }
body.mh-theme .mr-tile--cat:hover .mr-tile__scrim { background: rgba(66, 4, 24, 0.55); }

body.mh-theme .mr-tile--cat .mr-tile__cap {
    font-family: var(--mh-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3em;
}

/* --------------------------------------------------------------------------
   Atelier story — the blush band: an offset gold keyline frame around the
   craft photograph, then the numbered process steps on hairline rules.
   -------------------------------------------------------------------------- */
body.mh-theme .mh-story {
    background-color: var(--mh-blush-high);
    padding-block: clamp(4rem, 9vw, 7.5rem);
    overflow: hidden;
}

body.mh-theme .mh-story__frame { position: relative; }

body.mh-theme .mh-story__frame::before {
    content: "";
    position: absolute;
    inset: -1.75rem -1.75rem 1.75rem 1.75rem;
    border: 1px solid rgba(118, 90, 29, 0.35);
    pointer-events: none;
}

body.mh-theme .mh-story__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(360px, 46vw, 600px);
    object-fit: cover;
}

body.mh-theme .mh-story__heading {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    margin-bottom: 1.5rem;
}

body.mh-theme .mh-story__body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--mh-muted);
    margin-bottom: 2.75rem;
    max-width: 46ch;
}

body.mh-theme .mh-steps { display: grid; gap: 1.75rem; }

body.mh-theme .mh-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(118, 90, 29, 0.18);
}

body.mh-theme .mh-step:last-child { padding-bottom: 0; border-bottom: 0; }

body.mh-theme .mh-step__num {
    font-family: var(--mh-font-head);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--mh-gold-ink);
    flex-shrink: 0;
}

body.mh-theme .mh-step__title {
    font-family: var(--mh-font-head);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--mh-ink);
    margin-bottom: 0.4rem;
}

body.mh-theme .mh-step__text { font-size: 0.9rem; color: var(--mh-muted); }

/* --------------------------------------------------------------------------
   Journal — 16:10 covers with a blush category chip, serif titles.
   -------------------------------------------------------------------------- */
body.mh-theme .mh-article__media { position: relative; background-color: var(--mh-blush); }

body.mh-theme .mh-article__chip {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background-color: var(--mh-gold-soft);
    color: #5b4305;
    font-family: var(--mh-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
}

body.mh-theme .mh-article__title {
    font-family: var(--mh-font-head);
    font-size: 1.25rem;
    font-weight: 400;
}

body.mh-theme .mh-article__title a { color: var(--mh-ink); }
body.mh-theme .mh-article__title a:hover { color: var(--mh-maroon); }

/* --------------------------------------------------------------------------
   Newsletter — "The Trousseau": the deep-maroon band with the hairline field
   and an ivory SUBSCRIBE button.
   -------------------------------------------------------------------------- */
body.mh-theme .mh-cta {
    background-color: var(--mh-maroon-deep);
    padding-block: clamp(4rem, 9vw, 7rem);
}

body.mh-theme .mh-cta__eyebrow { color: var(--mh-gold-soft); }

body.mh-theme .mh-cta__title {
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

body.mh-theme .mh-cta__body {
    color: rgba(255, 255, 255, 0.8);
    max-width: 52ch;
    line-height: 1.7;
}

body.mh-theme .mh-cta__form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
    max-width: 560px;
}

body.mh-theme .mh-cta__form input {
    flex: 1 1 240px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
    padding: 0.6rem 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.mh-theme .mh-cta__form input::placeholder { color: rgba(255, 255, 255, 0.5); }
body.mh-theme .mh-cta__form input:focus { outline: none; border-bottom-color: #fff; }

body.mh-theme .mh-cta__btn {
    border: 0;
    background-color: var(--mh-ivory);
    color: var(--mh-maroon);
    padding: 0.95rem 2.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

body.mh-theme .mh-cta__note {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Footer — the export closes the page on the darkest maroon panel, so every
   inherited footer role (headings, links, muted/soft body copy, the stub
   newsletter field + its maroon "Join" button, the social circles and the
   divider) has to be re-inked for a dark surface.
   -------------------------------------------------------------------------- */
body.mh-theme .mr-footer {
    background-color: var(--mh-maroon-deep);
    border-top: 1px solid rgba(194, 160, 92, 0.35);
    color: rgba(255, 255, 255, 0.82);
}

body.mh-theme .mr-footer .mr-footer__brand {
    font-family: var(--mh-font-head);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    color: #fff;
}

body.mh-theme .mr-footer h4 {
    font-family: var(--mh-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--mh-gold-soft);
}

body.mh-theme .mr-footer a { color: rgba(255, 255, 255, 0.8); }
body.mh-theme .mr-footer a:hover { color: var(--mh-gold-soft); }

body.mh-theme .mr-footer .mr-muted { color: rgba(255, 255, 255, 0.72); }
body.mh-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.58); }
body.mh-theme .mr-footer .mr-divider { border-color: rgba(255, 255, 255, 0.16); }

body.mh-theme .mr-footer .form-control {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

body.mh-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }

/* A maroon button on the maroon panel would be invisible — invert it. */
body.mh-theme .mr-footer .mr-btn--primary {
    background-color: var(--mh-ivory);
    border-color: var(--mh-ivory);
    color: var(--mh-maroon);
}

body.mh-theme .mr-footer .mr-btn--primary:hover {
    background-color: var(--mh-gold-soft);
    border-color: var(--mh-gold-soft);
    color: var(--mh-maroon-deep);
}

body.mh-theme .mr-footer .mr-social {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

body.mh-theme .mr-footer .mr-social:hover {
    background-color: var(--mh-gold-soft);
    border-color: var(--mh-gold-soft);
    color: var(--mh-maroon-deep);
}

/* --------------------------------------------------------------------------
   Inherited odds and ends — press wordmarks, section rails.
   -------------------------------------------------------------------------- */
body.mh-theme .mr-brandstrip { border-block-color: var(--mh-gold); opacity: 0.75; }

body.mh-theme .mr-brandstrip span,
body.mh-theme .mr-brands__mark,
body.mh-theme .mr-brand {
    font-family: var(--mh-font-head);
    font-weight: 400;
    color: var(--mh-soft);
}

body.mh-theme .mr-rail-btn { border-color: var(--mh-gold); color: var(--mh-maroon); }
body.mh-theme .mr-rail-btn:hover { background-color: var(--mh-maroon); color: #fff; }

/* Generous editorial rhythm ("section-gap: 120px" in the design system). */
body.mh-theme { --mr-section-y: clamp(56px, 9vw, 110px); }

/* --------------------------------------------------------------------------
   Respect reduced motion — every transition here is decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.mh-theme .mr-btn,
    body.mh-theme .mr-promo,
    body.mh-theme .mr-promo__img,
    body.mh-theme .mr-promo__scrim,
    body.mh-theme .mr-tile__img,
    body.mh-theme .mr-tile__media img,
    body.mh-theme .mr-card__media img,
    body.mh-theme .mr-article__media img,
    body.mh-theme .mh-keyline-link,
    body.mh-theme .mr-nav-link {
        transition: none;
    }

    body.mh-theme .mr-card:hover .mr-card__media img,
    body.mh-theme .mr-promo:hover .mr-promo__img,
    body.mh-theme .mr-tile:hover .mr-tile__img,
    body.mh-theme .mr-tile--cat:hover .mr-tile__media img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frame): 20px margins, the header collapses
   to hamburger / wordmark / icons, the hero copy centres, the promo stagger
   and the offset story frame are dropped.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.mh-theme .mh-header__bar { grid-template-columns: auto 1fr auto; padding-block: 0.85rem; }
    body.mh-theme .mh-header__side--end { gap: 0.5rem; }
    body.mh-theme .mh-logo { font-size: 1.25rem; letter-spacing: 0.18em; text-indent: 0.18em; }
    body.mh-theme .mh-announce { letter-spacing: 0.15em; font-size: 0.6rem; }

    body.mh-theme .mh-hero__copy { max-width: none; }
    body.mh-theme .mh-hero__copy .mh-hero__sub { max-width: none; margin-bottom: 2rem; }
    body.mh-theme .mh-hero .mr-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(255, 248, 247, 0.7) 0%,
            rgba(255, 248, 247, 0.88) 55%,
            rgba(255, 248, 247, 0.96) 100%
        );
    }

    body.mh-theme .mh-story__frame::before { display: none; }
    body.mh-theme .mh-story__img { height: clamp(280px, 60vw, 420px); }
    body.mh-theme .mh-step { gap: 1rem; }

    body.mh-theme .mr-promo { aspect-ratio: 3 / 4; }
    body.mh-theme .mr-promo__cap { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
    body.mh-theme .mr-tile--cat { height: 240px; }
    body.mh-theme .mh-cta__form { justify-content: center; }
}