/* ==========================================================================
   focal — "Bright Gallery Minimalism" brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_28_focal_e_commerce_homepage_design — the
   gallery_minimalist_eyewear_system/DESIGN.md is the design-system source):
   a warm gallery-white canvas, authoritative near-black Ink for text and the
   primary CTA fill, a Tortoise Amber accent reserved for labels/focus
   moments, 1px low-contrast outlines instead of shadows, 16px-rounded cards
   and full-pill (stadium) buttons/tags, Albert Sans 700 architectural
   headlines over Source Sans 3 body/price/label-caps.

   This stylesheet has two jobs:
     (a) style focal's OWN sections (fc-* — the split hero, the caption-below
         promo tiles, the featured/new-drops header rows, the face-shape
         guide band, the boxed journal cards, the pill newsletter); and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the gallery-white/ink palette and fixing
         every base rule that paints the accent AS TEXT (see the contrast
         note). This is the only reason shop / PDP / cart / checkout /
         account / blog pick up the new palette without a single page
         override.

   Everything is scoped under `body.fc-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.

   Contrast note (App\Support\Theming\ContrastChecker, scratchpad script —
   ratios measured, not assumed):
     - ink #1b1c1a on canvas #faf9f6                    = 16.25:1
     - ink #1b1c1a on band #f4f3f0 / dim #dbdad7        = 15.42:1 / 12.24:1
     - white #ffffff on primary #22252a (CTA fill)      = 15.37:1
     - muted #45474b on canvas / on dim                 =  8.84:1 / 6.66:1
     - soft #5c5e64 on canvas                           =  6.16:1
     - RAW accent (Tortoise Amber #c98a3d) on canvas    =  2.78:1 (FAILS even
       the 3:1 icon floor) — so raw amber NEVER appears as text or a small
       icon. Every base rule that painted --ll-accent as text is re-pointed
       to the DESIGN.md YAML's darker "secondary" amber, --fc-amber-ink
       #875303 (6.10:1 on canvas, 5.54:1 on the journal band, 4.60:1 on the
       dim guide band, 6.42:1 on white). Raw amber survives only as a FILL
       paired with ink text (ink on #c98a3d = 5.85:1 — the Sale badge) and
       as decorative borders.
   ========================================================================== */

body.fc-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults).
       --fc-amber tracks accent_color like every sibling theme's accent var;
       the measured ratios above are against the theme-default value that
       ships in the demo. */
    --fc-primary: var(--bs-primary, #22252a);
    --fc-primary-rgb: var(--bs-primary-rgb, 34, 37, 42);
    --fc-amber: var(--ll-accent, #c98a3d);
    --fc-radius: var(--ll-btn-radius, 2rem);
    --fc-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
    --fc-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;

    /* Text-safe amber sibling — FIXED, independent of the customizer token
       (DESIGN.md YAML "secondary"). Carries every amber TEXT role; see the
       contrast note. */
    --fc-amber-ink: #875303;

    /* Bright Gallery Minimalism palette (gallery_minimalist_eyewear_system/
       DESIGN.md + the rendered homepage). --fc-ink is a FIXED LITERAL, never
       bound to --bs-primary — body text must stay near-black even if a
       merchant customises primary_color. */
    --fc-canvas: #faf9f6;      /* surface / background                        */
    --fc-band: #f4f3f0;        /* surface-container-low — hero panel, footer  */
    --fc-band-alt: #efeeeb;    /* surface-container — journal band            */
    --fc-fill: #e9e8e5;        /* surface-container-high — placeholders       */
    --fc-dim: #dbdad7;         /* surface-dim — the face-shape guide band     */
    --fc-white: #ffffff;       /* surface-container-lowest — card media wells */
    --fc-ink: #1b1c1a;         /* on-surface — primary text                   */
    --fc-muted: #45474b;       /* on-surface-variant                          */
    --fc-soft: #5c5e64;        /* surface-tint, darkened (outline #76777b is
                                  only 4.25:1-class — below AA)               */
    --fc-border: #e3e2df;      /* surface-variant — hairline outlines         */
    --fc-border-strong: #c6c6cb; /* outline-variant                           */

    /* Re-point the inherited base neutrals at the gallery palette so every
       inherited mr-* surface (bands, borders, fills, muted text) follows
       across shop/PDP/cart/checkout/account/blog. */
    --mr-ink: var(--fc-ink);
    --mr-muted: var(--fc-muted);
    --mr-soft: var(--fc-soft);
    --mr-surface: var(--fc-canvas);
    --mr-band: var(--fc-band);
    --mr-band-alt: var(--fc-band);
    --mr-fill: var(--fc-fill);
    --mr-border: var(--fc-border);
    --mr-border-strong: var(--fc-border-strong);
    --mr-radius: 1rem; /* DESIGN.md: cards standardise on exactly 16px */
    --mr-gold: var(--fc-amber-ink); /* star ratings — raw amber fails the 3:1 icon floor */
    --mr-shadow: none; /* DESIGN.md Elevation: tonal layers + outlines, no shadows */

    /* Bootstrap paints bare <a> via rgba(var(--bs-link-color-rgb),1) —
       theme-vars sets the hex --bs-link-color but never the -rgb triplet, so
       without this a bare <a> (no .mr-* class) renders factory blue. Alias
       to the already-computed --bs-primary-rgb so it tracks the customizer;
       NO bare `body.fc-theme a { color: … }` rule (it would repaint the
       primary button's white label — see gotchas). */
    --bs-link-color-rgb: var(--bs-primary-rgb);

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

/* --------------------------------------------------------------------------
   Typography — Albert Sans 700 architectural headlines with tight tracking
   on display sizes (DESIGN.md Typography); Source Sans 3 everywhere else.
   Labels/eyebrows are uppercase label-caps with generous 0.1em tracking.
   -------------------------------------------------------------------------- */
body.fc-theme h1,
body.fc-theme h2,
body.fc-theme h3,
body.fc-theme h4,
body.fc-theme h5,
body.fc-theme h6,
body.fc-theme .mr-display,
body.fc-theme .mr-logo {
    font-family: var(--fc-font-head);
    font-weight: 700;
    color: var(--fc-ink);
    letter-spacing: -0.01em;
}

body.fc-theme .mr-display {
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

body.fc-theme .mr-eyebrow,
body.fc-theme .fc-eyebrow {
    font-family: var(--fc-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-amber-ink);
}

/* A keyline-underlined tracked link ("Shop All Popular" / "See All New
   Arrivals") — the export's border-b border-primary pb-1 treatment. */
body.fc-theme .fc-keyline-link {
    font-family: var(--fc-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-ink);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--fc-ink);
    transition: color 0.25s ease, border-color 0.25s ease;
}

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

/* --------------------------------------------------------------------------
   Buttons & inputs — pill-shaped primary/secondary (the button_radius token
   already drives .mr-btn via --bs-border-radius); the export's primary
   hovers by easing opacity, the outline inverts to an ink fill (base
   behaviour, kept). Inputs are enclosed with an 8px radius per DESIGN.md —
   NOT the pill (only the search field and the newsletter field are pills).
   NEVER a padding shorthand on .form-select (it eats Bootstrap's 2.25rem
   caret gutter — the base's own padding-inline-end restore is untouched).
   -------------------------------------------------------------------------- */
body.fc-theme .mr-btn {
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.74rem;
    padding: 1rem 2.1rem;
}

body.fc-theme .mr-btn--primary:hover {
    filter: none;
    opacity: 0.9;
}

body.fc-theme .mr-btn--light:hover {
    background-color: var(--fc-primary);
    color: #fff;
}

/* Ink-outline ghost pill — the hero's secondary "Shop Optical" action
   (export: border-2 border-primary-container, hover inverts to ink fill). */
body.fc-theme .fc-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(1rem - 2px) calc(2.1rem - 2px);
    border: 2px solid var(--fc-primary);
    border-radius: var(--fc-radius);
    color: var(--fc-primary);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.fc-theme .fc-btn-ghost:hover {
    background: var(--fc-primary);
    color: #fff;
}

body.fc-theme .form-control,
body.fc-theme .form-select {
    background-color: var(--fc-white);
    border-color: var(--fc-border);
    border-radius: 0.5rem;
    color: var(--fc-ink);
}

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

body.fc-theme .form-control:focus,
body.fc-theme .form-select:focus {
    border-color: var(--fc-primary);
    box-shadow: 0 0 0 3px rgba(var(--fc-primary-rgb), 0.12);
}

/* The base focus ring is the raw accent — 2.78:1 on the canvas, below the
   3:1 UI floor. Ink instead. */
body.fc-theme a:focus-visible,
body.fc-theme button:focus-visible,
body.fc-theme input:focus-visible {
    outline-color: var(--fc-ink);
}

/* --------------------------------------------------------------------------
   Announcement + header — ink announce band with tracked label-caps (the
   export's bg-primary-container bar); glassmorphism header (90% gallery
   white + heavy blur, DESIGN.md Elevation) over the inherited logo-left
   single-row chrome (structural match — no header override).
   -------------------------------------------------------------------------- */
body.fc-theme .mr-announce {
    background-color: var(--fc-primary);
    background-image: none;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    font-weight: 700;
}

body.fc-theme .mr-header {
    background-color: rgba(250, 249, 246, 0.9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--fc-border);
}

body.fc-theme .mr-logo {
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

body.fc-theme .mr-nav-link {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fc-muted);
}

body.fc-theme .mr-nav-link:hover {
    color: var(--fc-ink);
}

/* Base paints the active nav link with the raw accent (2.78:1) — the export
   underlines it in ink instead. */
body.fc-theme .mr-nav-link.is-active {
    color: var(--fc-ink);
    border-bottom-color: var(--fc-ink);
}

body.fc-theme .mr-icon-btn {
    color: var(--fc-ink);
}

body.fc-theme .mr-icon-btn:hover {
    color: var(--fc-amber-ink);
}

body.fc-theme .mr-badge {
    background-color: var(--fc-primary);
}

body.fc-theme .mr-badge--wish {
    background-color: var(--fc-primary);
}

body.fc-theme .mr-search input {
    background: var(--fc-band);
}

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

/* --------------------------------------------------------------------------
   Hero — the export's split hero: portrait photo left (edge-to-edge inside
   the shell), copy right on the quiet gallery-tint panel with generous
   clamp padding.
   -------------------------------------------------------------------------- */
body.fc-theme .fc-hero {
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

body.fc-theme .fc-hero__grid {
    border-radius: var(--mr-radius);
    overflow: hidden;
}

body.fc-theme .fc-hero__figure {
    height: 100%;
    min-height: 340px;
}

body.fc-theme .fc-hero__img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    display: block;
}

body.fc-theme .fc-hero__copy {
    height: 100%;
    background-color: var(--fc-band);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5.5rem);
}

body.fc-theme .fc-hero__eyebrow {
    font-family: var(--fc-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fc-amber-ink);
    margin-bottom: 1rem;
}

body.fc-theme .fc-hero__title {
    font-size: clamp(2.4rem, 4.4vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

body.fc-theme .fc-hero__lead {
    color: var(--fc-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 46ch;
    margin-bottom: 2.25rem;
}

body.fc-theme .fc-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited markup) — thin-line ink icons beside label-caps
   captions (the export's icons are text-primary ink, never the accent).
   -------------------------------------------------------------------------- */
body.fc-theme .mr-trust svg {
    color: var(--fc-ink);
    width: 26px;
    height: 26px;
}

body.fc-theme .mr-trust strong {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Promo tiles — focal's caption-below-photo treatment (title + quiet line on
   the canvas under a 4:5 rounded image; the base's scrim-overlay markup is
   overridden in the partial).
   -------------------------------------------------------------------------- */
body.fc-theme .fc-tile {
    display: block;
    text-decoration: none;
}

body.fc-theme .fc-tile__media {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--mr-radius);
    overflow: hidden;
    background: var(--fc-fill);
    margin-bottom: 1rem;
}

body.fc-theme .fc-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

body.fc-theme .fc-tile:hover .fc-tile__media img {
    transform: scale(1.05);
}

body.fc-theme .fc-tile__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--fc-band), var(--fc-fill));
}

body.fc-theme .fc-tile__title {
    display: block;
    font-family: var(--fc-font-head);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--fc-ink);
}

body.fc-theme .fc-tile__caption {
    display: block;
    color: var(--fc-muted);
    font-size: 0.95rem;
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   Featured "Frames Everyone's Wearing" — sits on the quiet gallery band.
   -------------------------------------------------------------------------- */
body.fc-theme .fc-featured {
    background-color: var(--fc-band);
}

/* --------------------------------------------------------------------------
   Face-shape guide — focal-ONLY child section on the dimmed gallery surface:
   keyline icon rings over centered advice columns. Muted copy measures
   6.66:1 on the dim band.
   -------------------------------------------------------------------------- */
body.fc-theme .fc-guide {
    background-color: var(--fc-dim);
}

body.fc-theme .fc-guide__sub {
    color: var(--fc-muted);
    font-size: 1.05rem;
}

body.fc-theme .fc-guide__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

body.fc-theme .fc-guide__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border: 1px solid rgba(var(--fc-primary-rgb), 0.25);
    border-radius: 9999px;
    color: var(--fc-ink);
    margin-bottom: 1rem;
}

body.fc-theme .fc-guide__ring svg {
    width: 36px;
    height: 36px;
}

body.fc-theme .fc-guide__title {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

body.fc-theme .fc-guide__text {
    color: var(--fc-muted);
    font-size: 0.95rem;
    max-width: 28ch;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Categories (inherited image tiles) — the export's compact h-64 tiles with
   a centered uppercase label over a black/20 scrim.
   -------------------------------------------------------------------------- */
body.fc-theme .mr-tile--cat {
    height: 256px;
}

body.fc-theme .mr-tile--cat .mr-tile__cap {
    font-size: 1.3rem;
    letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Journal — boxed white story cards (1px outline, 16px radius) on the quiet
   gallery band; amber-ink category labels (5.54:1 on the band).
   -------------------------------------------------------------------------- */
body.fc-theme .fc-journal {
    background-color: var(--fc-band-alt);
}

body.fc-theme .fc-journal__sub {
    color: var(--fc-muted);
    font-size: 1.05rem;
}

body.fc-theme .fc-journal__card {
    background: var(--fc-white);
    border: 1px solid var(--fc-border);
    border-radius: var(--mr-radius);
    overflow: hidden;
    height: 100%;
}

body.fc-theme .fc-journal__media {
    display: block;
    height: 14rem;
    border-radius: 0;
    margin-bottom: 0;
}

body.fc-theme .fc-journal__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.fc-theme .fc-journal__body {
    padding: 1.75rem 2rem 2rem;
}

body.fc-theme .mr-article__title {
    font-size: 1.25rem;
}

body.fc-theme .mr-article__title a:hover {
    color: var(--fc-amber-ink);
}

/* --------------------------------------------------------------------------
   Newsletter — "In Focus": centered on the gallery canvas, a pill email
   field beside a solid ink pill Subscribe button.
   -------------------------------------------------------------------------- */
body.fc-theme .fc-cta {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background-color: var(--fc-canvas);
}

body.fc-theme .fc-cta__body {
    color: var(--fc-muted);
    max-width: 52ch;
    font-size: 1.05rem;
}

body.fc-theme .fc-cta__form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 36rem;
    margin-top: 2.5rem;
}

body.fc-theme .fc-cta__form input {
    flex: 1 1 16rem;
    border: 2px solid var(--fc-border);
    border-radius: var(--fc-radius);
    padding: 0.95rem 1.5rem;
    background: var(--fc-white);
    color: var(--fc-ink);
    font-family: var(--fc-font-body);
    transition: border-color 0.2s ease;
}

body.fc-theme .fc-cta__form input::placeholder {
    color: var(--fc-soft);
}

body.fc-theme .fc-cta__form input:focus {
    outline: none;
    border-color: var(--fc-primary);
}

body.fc-theme .fc-cta__btn {
    border: 0;
    border-radius: var(--fc-radius);
    padding: 0.95rem 2.4rem;
    background: var(--fc-primary);
    color: #fff;
    font-family: var(--fc-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: not-allowed; /* stub form — always disabled */
}

body.fc-theme .fc-cta__note {
    color: var(--fc-soft);
    font-size: 0.78rem;
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — the export keeps cards "naked": a
   white media well with a hairline outline (DESIGN.md Outlines #EBEAE7-
   class) and flush title/price below, so no text inset is needed (the
   border lives on .mr-card__media alone, never the whole card).
   -------------------------------------------------------------------------- */
body.fc-theme .mr-card__media {
    background-color: var(--fc-white);
    border: 1px solid var(--fc-border);
}

body.fc-theme .mr-card__title {
    font-family: var(--fc-font-head);
    font-weight: 700;
    font-size: 1.02rem;
}

/* Base hover paints the title with the raw accent (2.78:1) — amber-ink. */
body.fc-theme .mr-card__title a:hover {
    color: var(--fc-amber-ink);
}

body.fc-theme .mr-card__price {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fc-ink);
}

body.fc-theme .mr-card__price del {
    color: var(--fc-soft);
}

/* The export's SALE chip is an amber pill — but white-on-raw-amber is
   2.92:1, so the label inks with the theme's own near-black (5.85:1 on
   #c98a3d). */
body.fc-theme .mr-card__sale {
    background-color: var(--fc-amber);
    color: var(--fc-ink);
    border-radius: 9999px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Wish + quickview are SIBLINGS — restyle together, both states. Rest state:
   white circle + ink glyph (17.1:1); hover keeps the base's own
   --mr-surface/--mr-ink pair (16.25:1 after the re-point). The "saved" heart
   uses amber-ink (6.42:1 on white), never raw amber (2.92:1). */
body.fc-theme .mr-card__wish,
body.fc-theme .mr-card__quickview {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--fc-ink);
}

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

body.fc-theme .mr-card__wish.is-active {
    color: var(--fc-amber-ink);
}

body.fc-theme .mr-card__quick {
    background: var(--fc-primary);
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   Inherited chrome, continued — every base rule that paints the raw accent
   AS TEXT (2.78:1 on this canvas) moves to amber-ink; filled "current/done/
   active" states keep the dark primary (white label = 15.37:1, base
   default). Underline-link + breadcrumb + cart + tab hovers included.
   -------------------------------------------------------------------------- */
body.fc-theme .mr-ulink:hover {
    color: var(--fc-amber-ink);
    border-color: var(--fc-amber-ink);
}

body.fc-theme .mr-crumbs a:hover {
    color: var(--fc-amber-ink);
}

body.fc-theme .mr-cart-row__title a:hover {
    color: var(--fc-amber-ink);
}

body.fc-theme .mr-tabs .nav-link.active {
    border-bottom-color: var(--fc-amber-ink);
}

body.fc-theme .mr-footer {
    background-color: var(--fc-band);
    border-top: 1px solid var(--fc-border);
}

body.fc-theme .mr-footer a:hover {
    color: var(--fc-amber-ink);
}

body.fc-theme .mr-footer__brand {
    font-family: var(--fc-font-head);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

body.fc-theme .mr-social:hover {
    background-color: var(--fc-primary);
    border-color: var(--fc-primary);
}

/* --------------------------------------------------------------------------
   Respect reduced-motion — neutralise both the transitions AND the hover
   transforms/scales introduced above (a transition:none alone still lets a
   hover transform apply instantly, which is still motion).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.fc-theme .mr-btn,
    body.fc-theme .fc-btn-ghost,
    body.fc-theme .fc-keyline-link,
    body.fc-theme .fc-tile__media img,
    body.fc-theme .mr-card__media img,
    body.fc-theme .mr-tile__img,
    body.fc-theme .mr-article__media img {
        transition: none;
    }

    body.fc-theme .fc-tile:hover .fc-tile__media img,
    body.fc-theme .mr-card:hover .mr-card__media img,
    body.fc-theme .mr-tile:hover .mr-tile__img,
    body.fc-theme .mr-article__media:hover img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the Stitch mobile frame): the hero stacks photo-over-copy
   with tighter panel padding; smaller display sizes; stacked newsletter
   form; shorter category tiles.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.fc-theme .fc-hero__figure,
    body.fc-theme .fc-hero__img {
        min-height: 0;
        aspect-ratio: 4 / 5;
    }

    body.fc-theme .fc-hero__copy {
        padding: 2rem 1.5rem 2.5rem;
    }

    body.fc-theme .fc-hero__title {
        font-size: 2.1rem;
    }

    body.fc-theme .fc-guide__ring {
        width: 80px;
        height: 80px;
    }

    body.fc-theme .mr-tile--cat {
        height: 200px;
    }

    body.fc-theme .fc-cta__form {
        flex-direction: column;
    }

    body.fc-theme .fc-cta__form input,
    body.fc-theme .fc-cta__btn {
        width: 100%;
    }
}