/* ==========================================================================
   Linen & Loom — slow-living minimalism for artisan home textiles.

   Ported from the Stitch "Linen & Loom" design (the Minimalist-with-Tactile-
   Warmth design system lives at docs/templates/pending/
   stitch_21_linen_loom_e_commerce_store/…/linen_loom/DESIGN.md): a warm-oat
   canvas that replaces harsh whites, dusty-blue primary actions, clay-blush
   secondary highlights, Playfair Display headings over Inter body, a gentle
   12px radius everywhere and STRICTLY diffused/near-absent shadows — depth
   comes from hairline oat-dark borders and tonal layering.

   This theme OWNS its hero / featured / material-story / categories /
   journal home sections (ln-* markup) and INHERITS Modern Retail's header,
   footer, trust, promo and new-arrivals partials + every functional page.
   This stylesheet therefore has two jobs:

     (a) style the NEW `ln-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the oat/stone palette and drawing the
         hairline structure.

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

   TEXT-SAFE ink siblings (IMPORTANT — read before editing a colour here):
   the customizer's primary_color (#5f7a8c, DESIGN.md's named "Dusty Blue")
   and accent_color (#d9a68e, "Clay Blush") are both too LIGHT to pass
   4.5:1 as small text on the oat canvas (measured 3.98:1 / 1.89:1 — see the
   ratios logged below each guard block). DESIGN.md's own YAML ships darker
   siblings for exactly this reason — "primary": "#466172" and
   "secondary": "#7e5541" — which the export's OWN rendered `.text-dusty-blue`
   / `.text-clay` / `.bg-dusty-blue` utilities actually use for every button
   fill, link, eyebrow and icon in the homepage (confirmed against
   linen_loom_homepage/code.html's inline <style> block). So:
     --ln-primary-ink  #466172  → EVERY text/icon/link role that would
                                  otherwise read --bs-primary (6.54:1 on
                                  white, 5.76:1 on oat).
     --ln-clay-ink     #7e5541  → EVERY text/icon/hover role that would
                                  otherwise read --ll-accent (6.44:1 on
                                  white, 5.67:1 on oat; white-on-clay-ink
                                  6.44:1).
     --bs-primary / --ll-accent (the light tokens) stay reserved for FILLS
     with white text on top: white-on-#5f7a8c measures 4.52:1 (passes, but
     thin — hover DARKENS via brightness(0.88), never brightens, so it can
     only improve). White-on-#d9a68e measures 2.14:1 and FAILS outright — no
     base rule in this theme fills white text on the raw accent; every such
     rule (`.mr-eyebrow`, `.mr-ulink`, `.mr-nav-link.is-active`, `.mr-badge`,
     `.mr-trust svg`, `.mr-footer__brand`, `.mr-footer h4`, `.mr-card__wish`,
     `.mr-icon-btn`, `.mr-logo`) is repainted to an -ink sibling below.
   Ratios measured with App\Support\Theming\ContrastChecker via a scratchpad
   script (not a test) — see the PR/task notes for the full table.
   ========================================================================== */

body.ln-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --ln-primary: var(--bs-primary, #5f7a8c);
    --ln-primary-rgb: var(--bs-primary-rgb, 95, 122, 140);
    --ln-accent: var(--ll-accent, #d9a68e);
    --ln-radius: var(--bs-border-radius, 0.75rem);
    --ln-font-head: var(--ll-font-headings, "Playfair Display"), Georgia, serif;
    --ln-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Text-safe siblings — LITERALS, not derived from the customizer tokens
       above, per the guard note at the top of this file. */
    --ln-primary-ink: #466172;
    --ln-clay-ink: #7e5541;
    --ln-clay-hover: #633e2b;

    /* Slow-living / tactile-warmth palette (DESIGN.md prose + the export's
       own rendered inline utilities) */
    --ln-oat: #f5f0e8;         /* page canvas — replaces harsh white       */
    --ln-oat-tint: #f8f4ec;    /* card media wells + alternating bands     */
    --ln-oat-dim: #efe7d9;     /* quiet architectural bands (search input) */
    --ln-white: #ffffff;
    --ln-border: #e8e2d6;      /* DESIGN.md's hairline: "1px oat-dark"     */
    --ln-border-strong: #cdbfa0;
    --ln-ink: #1a1c1d;         /* deep charcoal, never pure black          */
    --ln-muted: #42474c;
    --ln-soft: #63686c;        /* darkened from DESIGN.md's #73787c outline
                                   — that literal measured 3.93:1 on oat,
                                   under the 4.5:1 small-text minimum */

    /* Re-point the inherited base neutrals at the oat/stone palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows. */
    --mr-ink: var(--ln-ink);
    --mr-muted: var(--ln-muted);
    --mr-soft: var(--ln-soft);
    --mr-surface: var(--ln-oat);
    --mr-band: var(--ln-oat-dim);
    --mr-band-alt: var(--ln-oat-tint);
    --mr-fill: var(--ln-oat-dim);
    --mr-border: var(--ln-border);
    --mr-border-strong: var(--ln-border-strong);
    --mr-radius: var(--ln-radius);
    --mr-gold: var(--ln-clay-ink);
    --mr-shadow: 0 12px 28px -10px rgba(70, 97, 114, 0.14);

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

/* --------------------------------------------------------------------------
   Legibility guard for the light customizer primary/accent (see the file
   header note for the full rationale + measured ratios). Every base rule
   that renders --bs-primary or --ll-accent as TEXT, an ICON, or a
   non-text-but-still-too-light BORDER indicator is repainted to the -ink
   sibling; rules that use them as a FILL with white text on top are left
   alone (white-on-#5f7a8c passes at 4.52:1).
   -------------------------------------------------------------------------- */
body.ln-theme {
    --bs-link-color: var(--ln-primary-ink);
    --bs-link-color-rgb: 70, 97, 114;
    --bs-link-hover-color: var(--ln-clay-ink);
}

body.ln-theme .btn-outline-primary {
    --bs-btn-color: var(--ln-primary-ink);
    --bs-btn-border-color: var(--ln-primary-ink);
}

body.ln-theme .text-primary,
body.ln-theme .link-primary {
    color: var(--ln-primary-ink) !important;
}

/* Eyebrows — every section's small tracked label (hero, featured,
   material-story, journal). The export's OWN eyebrows read `.text-clay`
   (#7e5541), never the light accent. */
body.ln-theme .mr-eyebrow,
body.ln-theme .ln-eyebrow {
    color: var(--ln-clay-ink);
}

/* Underline links (journal "read more" style, wherever inherited) + their
   hover, and the header nav's is-active state + hover — all TEXT. */
body.ln-theme .mr-ulink,
body.ln-theme .mr-nav-link.is-active {
    color: var(--ln-primary-ink);
}
body.ln-theme .mr-ulink:hover,
body.ln-theme .mr-nav-link:hover,
body.ln-theme .mr-icon-btn:hover,
body.ln-theme .mr-search button:hover,
body.ln-theme .mr-card__title a:hover,
body.ln-theme .mr-cart-row__title a:hover,
body.ln-theme .mr-footer a:hover {
    color: var(--ln-clay-ink);
}
body.ln-theme .mr-ulink:hover {
    border-color: var(--ln-clay-ink);
}
body.ln-theme .mr-nav-link.is-active {
    border-bottom-color: var(--ln-clay-ink);
}

/* Header icons + logo — the export's icons/wordmark read `.text-primary`
   (ink), not the light fill. */
body.ln-theme .mr-icon-btn,
body.ln-theme .mr-card__wish,
body.ln-theme .mr-card__quickview {
    color: var(--ln-primary-ink);
}
body.ln-theme .mr-logo {
    color: var(--ln-primary-ink);
}

/* Cart / wishlist count badge — the export's badge is `.bg-secondary`
   (clay-ink), not the primary fill. */
body.ln-theme .mr-badge,
body.ln-theme .mr-badge--wish {
    background-color: var(--ln-clay-ink);
}

/* Pagination + shop-sidebar filters — hover/active TEXT + BORDER. */
body.ln-theme .mr-page:hover,
body.ln-theme .mr-filter__link:hover,
body.ln-theme .mr-filter__link.is-active,
body.ln-theme .mr-acct-link:hover {
    color: var(--ln-primary-ink);
}
body.ln-theme .mr-page:hover {
    border-color: var(--ln-primary-ink);
}

/* PDP tabs — active TEXT; its border-bottom reads --ll-accent in the base,
   which as a bare 2px line on white/oat undershoots the 3:1 UI minimum too
   (measured equivalent to the white-on-accent-fill fail above). */
body.ln-theme .mr-tabs .nav-link.active {
    color: var(--ln-primary-ink);
    border-bottom-color: var(--ln-clay-ink);
}

/* Checkout step rail — the CURRENT step's unfilled dot renders its own
   number as TEXT (the DONE dot is a fill+white, already safe at 4.52:1). */
body.ln-theme .mr-step.is-current .mr-step__dot {
    color: var(--ln-primary-ink);
}

/* Trust-strip icons — the export's icons read `.text-dusty-blue` (ink). */
body.ln-theme .mr-trust svg {
    color: var(--ln-primary-ink);
}

/* Footer brand + column headings — the export reads `.text-primary` (ink)
   for both "Linen & Loom" and the "Shop / About / Support" labels. */
body.ln-theme .mr-footer__brand,
body.ln-theme .mr-footer h4 {
    color: var(--ln-primary-ink);
}

/* --------------------------------------------------------------------------
   Buttons — dusty-blue fill (white text, 4.52:1 — deliberately the light
   customizer token per the fixed brief decision, NOT the export's literally
   rendered #466172; see file header). Hover DEEPENS per DESIGN.md ("Hover
   states should slightly deepen the blue") rather than the base's default
   brightness(1.18) lightening, which would also erode the already-thin
   contrast margin. Clay-outline ghost secondary is its own .ln-hero__ghost
   class (see below) — .mr-btn--outline stays primary-based for any other
   inherited usage (e.g. a merchant-filled new-arrivals CTA).
   -------------------------------------------------------------------------- */
body.ln-theme .mr-btn {
    font-family: var(--ln-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

body.ln-theme .mr-btn--primary:hover {
    filter: brightness(0.88);
    color: #fff;
}

body.ln-theme .mr-btn--outline {
    color: var(--ln-primary-ink);
}

/* Newsletter stub Subscribe button (base partials/home/newsletter.blade.php,
   inherited unmodified) — the export's is a CLAY fill + white text (not the
   base's white-fill/primary-text `.mr-btn--light`), hover deepens to the
   design's own #633e2b (both measured safe: 6.44:1 / 9.31:1). Scoped to
   `.mr-cta` so it can never bleed into an unrelated `.mr-btn--light`. */
body.ln-theme .mr-cta .mr-btn--light {
    background-color: var(--ln-clay-ink);
    color: #fff;
}
body.ln-theme .mr-cta .mr-btn--light:hover {
    background-color: var(--ln-clay-hover);
    color: #fff;
}

/* Newsletter band: the base .mr-cta fills with var(--bs-primary) = raw slate
   #5f7a8c, on which the inherited white body copy is only 3.53:1. Deepen the
   band to the slate-ink so the copy clears AA (white on #466172 = 6.5:1). */
body.ln-theme .mr-cta {
    background-color: var(--ln-primary-ink);
}

/* Focus ring: the base outline is var(--ll-accent) = raw clay (1.89:1 on oat,
   under the 3:1 WCAG minimum for a focus indicator). Repoint to slate-ink. */
body.ln-theme *:focus-visible {
    outline-color: var(--ln-primary-ink);
}

/* Promo-tile hover caption: the base flips .mr-promo__cta to var(--ll-accent)
   = raw clay on hover (~2.5:1 on the photo scrim). Keep it white on hover —
   the scrim guarantees legibility, matching the rest state. */
body.ln-theme .mr-promo:hover .mr-promo__cta {
    color: #fff;
    border-color: #fff;
}

/* Keyline link — the export's tracked "View All Products" / "Read More
   Stories" underline (rest = ink, hover = clay-ink, matching its own
   hover:text-clay utility). */
body.ln-theme .ln-keyline-link {
    display: inline-block;
    font-family: var(--ln-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ln-primary-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ln-primary-ink);
    padding-bottom: 0.3rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}
body.ln-theme .ln-keyline-link:hover {
    color: var(--ln-clay-ink);
    border-color: var(--ln-clay-ink);
}

/* Inputs — oat-tinted fields, dusty-blue focus border per DESIGN.md ("Focus
   states transition the border to Dusty Blue"). No padding SHORTHAND here
   (recurring platform bug) — the base's own .form-select keeps its
   padding-inline-end: 2.25rem caret gutter untouched. */
body.ln-theme .form-control,
body.ln-theme .form-select {
    border-color: var(--ln-border);
    background-color: var(--mr-surface);
}
body.ln-theme .form-control:focus,
body.ln-theme .form-select:focus {
    border-color: var(--ln-primary);
    box-shadow: 0 0 0 3px rgba(var(--ln-primary-rgb), 0.16);
}

/* --------------------------------------------------------------------------
   Announcement + header — the export's TopAppBar reads `.bg-primary`
   (ink) + white text; the header itself is oat glass with an ink wordmark.
   -------------------------------------------------------------------------- */
body.ln-theme .mr-announce {
    background-color: var(--ln-primary-ink);
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.16em;
    font-size: 0.68rem;
}

body.ln-theme .mr-header {
    background-color: var(--mr-surface);
    border-bottom: 1px solid var(--ln-border);
}

body.ln-theme .mr-logo {
    font-family: var(--ln-font-head);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

body.ln-theme .mr-nav-link {
    font-size: 0.92rem;
}

body.ln-theme .mr-search input {
    background: var(--mr-band);
    border-color: var(--ln-border);
}
body.ln-theme .mr-search input:focus {
    border-color: var(--ln-primary);
    box-shadow: 0 0 0 3px rgba(var(--ln-primary-rgb), 0.16);
}

/* --------------------------------------------------------------------------
   Inherited hero fallback styling (used only if a store has zero hero
   slides and the base's own full-bleed hero renders instead of this
   theme's own split hero override) — keep the overlay legible either way.
   -------------------------------------------------------------------------- */
body.ln-theme .mr-hero__overlay {
    background: linear-gradient(90deg, rgba(26, 28, 29, 0.6) 0%, rgba(26, 28, 29, 0.28) 55%, rgba(26, 28, 29, 0.08) 100%);
}

/* --------------------------------------------------------------------------
   Split hero (ln-hero) — gapless 50/50: full-bleed bedroom photography on
   one side, the copy panel (clay eyebrow, serif headline, lead, primary
   button + clay-ghost secondary) on the other.
   -------------------------------------------------------------------------- */
body.ln-theme .ln-hero {
    display: flex;
    flex-wrap: wrap;
    min-height: clamp(480px, 78vh, 819px);
    overflow: hidden;
}

body.ln-theme .ln-hero__media {
    flex: 1 1 50%;
    position: relative;
    min-height: 420px;
    background: var(--mr-fill);
}

body.ln-theme .ln-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.ln-theme .ln-hero__copy {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 640px;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.75rem, 5vw, 4rem);
}

body.ln-theme .ln-hero__title {
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

body.ln-theme .ln-hero__lead {
    color: var(--mr-muted);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 42ch;
    margin-bottom: 2rem;
}

body.ln-theme .ln-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

body.ln-theme .ln-hero__ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.05rem 2.5rem;
    border: 1px solid var(--ln-clay-ink);
    border-radius: var(--ln-radius);
    color: var(--ln-clay-ink);
    font-family: var(--ln-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}
body.ln-theme .ln-hero__ghost:hover {
    background-color: var(--ln-clay-ink);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — white-tinted media well behind a
   hairline oat-dark border (DESIGN.md: "very thin 1px border in a slightly
   darker oat shade"), serif-free Inter title, dusty-blue price. The border
   sits on the MEDIA box only (never the outer .mr-card), so title/price stay
   flush without needing the card-text-inset fix.
   -------------------------------------------------------------------------- */
body.ln-theme .mr-card__media {
    border: 1px solid var(--ln-border);
}

body.ln-theme .mr-card__price {
    color: var(--ln-primary-ink);
    font-weight: 500;
}

/* Both round overlay controls together, both states (recurring platform
   gotcha): rest already repainted to ink above; hover already inks with the
   theme's own --mr-ink/--mr-surface pair at the base (>= 12.8:1 on every
   theme) — nothing further to do here. */

/* --------------------------------------------------------------------------
   Material story (ln-story) — the "300 Threads, Nothing to Hide" split
   band: macro weave photo on one side, the sourcing paragraph + up to 3
   fabric-quality lines (each with a small decorative ink icon) on the other.
   -------------------------------------------------------------------------- */
body.ln-theme .ln-story {
    display: flex;
    flex-wrap: wrap;
    min-height: 480px;
}

body.ln-theme .ln-story__media {
    flex: 1 1 50%;
    position: relative;
    min-height: 340px;
    background: linear-gradient(135deg, var(--mr-fill), var(--ln-border));
}

body.ln-theme .ln-story__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.ln-theme .ln-story__panel {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    padding: clamp(2.5rem, 6vw, 5.5rem);
}

body.ln-theme .ln-story__body {
    max-width: 32rem;
}

body.ln-theme .ln-story__heading {
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    margin-bottom: 1.5rem;
}

body.ln-theme .ln-story__lead {
    color: var(--mr-muted);
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

body.ln-theme .ln-story__features {
    display: grid;
    gap: 1rem;
}

body.ln-theme .ln-story__feature {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.ln-theme .ln-story__feature svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--ln-primary-ink);
}

body.ln-theme .ln-story__feature span {
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Explore by Room (ln-rooms) — a small tracked label over ROUND portrait
   tiles (a representative product image per real category), with the room
   name sitting below the circle in italic serif. A clay-ink ring appears on
   hover (matches the export's group-hover:border-clay).
   -------------------------------------------------------------------------- */
body.ln-theme .ln-rooms__heading {
    font-family: var(--ln-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mr-soft);
}

body.ln-theme .ln-rooms__item {
    text-decoration: none;
}

body.ln-theme .ln-rooms__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 9999px;
    border: 4px solid transparent;
    background: var(--mr-band-alt);
    margin-bottom: 1.25rem;
    transition: border-color 0.3s ease;
}
body.ln-theme .ln-rooms__item:hover .ln-rooms__media {
    border-color: var(--ln-clay-ink);
}

body.ln-theme .ln-rooms__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}
body.ln-theme .ln-rooms__item:hover .ln-rooms__media img {
    transform: scale(1.08);
}

body.ln-theme .ln-rooms__placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--mr-fill), var(--ln-border));
}

body.ln-theme .ln-rooms__label {
    display: block;
    font-family: var(--ln-font-head);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--mr-ink);
    transition: color 0.2s ease;
}
body.ln-theme .ln-rooms__item:hover .ln-rooms__label {
    color: var(--ln-clay-ink);
}

/* --------------------------------------------------------------------------
   Journal (ln-journal) — heading left, single section-level keyline link
   right (no per-article read-more line — the template shows none).
   -------------------------------------------------------------------------- */
body.ln-theme .ln-journal .mr-article__title a:hover {
    color: var(--ln-clay-ink);
}

/* --------------------------------------------------------------------------
   Inherited chrome finishing — footer settles onto the oat system (most of
   the work is done by the --mr-* re-point above).
   -------------------------------------------------------------------------- */
body.ln-theme .mr-footer {
    background-color: var(--ln-oat-tint);
    border-top: 1px solid var(--ln-border);
}

body.ln-theme .mr-social {
    border-color: var(--ln-border-strong);
}

/* --------------------------------------------------------------------------
   Motion discipline — drop decorative image zooms and lifts, including the
   INHERITED hover transforms the base only strips the transition from
   (app.css kills `.mr-card__media img` / `.mr-tile__img`'s *transition* under
   reduced-motion, but the `:hover { transform: scale(...) }` rule itself
   still fires instantly without one — this neutralises the transform too).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ln-theme .mr-btn,
    body.ln-theme .ln-keyline-link,
    body.ln-theme .ln-hero__ghost,
    body.ln-theme .ln-rooms__media,
    body.ln-theme .ln-rooms__media img,
    body.ln-theme .ln-rooms__label {
        transition: none;
    }

    body.ln-theme .mr-card:hover .mr-card__media img,
    body.ln-theme .mr-tile:hover .mr-tile__img,
    body.ln-theme .mr-promo:hover .mr-promo__img,
    body.ln-theme .ln-rooms__item:hover .ln-rooms__media img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frame): the hero + material-story bands
   stack image-over-copy, the newsletter form (inherited .mr-cta__form)
   goes vertical.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.ln-theme .ln-hero {
        flex-direction: column;
        min-height: auto;
    }
    body.ln-theme .ln-hero__media {
        flex: none;
        min-height: 340px;
    }
    body.ln-theme .ln-hero__copy {
        flex: none;
        max-width: none;
        padding: clamp(2rem, 8vw, 3rem) 1.5rem;
    }

    body.ln-theme .ln-story {
        flex-direction: column;
    }
    body.ln-theme .ln-story__media {
        flex: none;
        min-height: 280px;
    }
    body.ln-theme .ln-story__panel {
        flex: none;
        padding: clamp(2.5rem, 8vw, 3.5rem) 1.5rem;
    }
}

@media (max-width: 575.98px) {
    body.ln-theme .mr-cta__form {
        flex-direction: column;
    }
}