/* ==========================================================================
   Ember Roast — tactile minimalist specialty-coffee roastery.

   Ported from the Stitch "Ember Roast" export (docs/templates/pending/
   stitch_58_ember_roast_homepage_design — the "Ember Roast Digital
   Guidelines" DESIGN.md plus ember_roast_homepage/code.html). Where the two
   disagree the RENDERED code.html wins: DESIGN.md's prose calls the action
   colour "Ember Orange #CD6B3A", but every rendered `.btn-primary`,
   `text-primary` eyebrow, price and active nav item uses the darker burnt
   ember `#984314`, so THAT is the primary token and #CD6B3A becomes the
   accent (fills / decoration / focus tints only — see CONTRAST below).

   The design language: a warm cream "counter-top" canvas, espresso-brown
   panels for the announce band / origin band / footer, burnt-ember calls to
   action, Lora headlines (the export's Literata, substituted per its own
   DESIGN.md prose) over Inter body/UI, a consistent 6px radius that relaxes
   to 8px on hover ("tactile feedback"), and soft brown-tinted ambient
   shadows instead of hard elevation.

   This theme OWNS the hero / promo / featured / farm-gate / new-arrivals /
   journal / newsletter home sections (em-* markup) and INHERITS Modern
   Retail's header, footer, trust strip, categories grid, brand strip,
   product card and every functional page. This stylesheet therefore has two
   jobs:

     (a) style the NEW `em-*` markup into the Stitch design; and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the cream/espresso palette, dressing the
         announce band and footer in espresso, and replacing every
         accent-as-TEXT base rule with the text-safe ember (see the guard
         block below).

   Everything is scoped under `body.em-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 ember surface follows.

   CONTRAST (measured with App\Support\Theming\ContrastChecker):
     - primary ember #984314 is DARK and safe in EVERY role: 5.88:1 on the
       cream canvas, 6.35:1 on the #fff8f5 header/trust surface, 5.43:1 on
       the #f4e5de card media well, 6.67:1 on white (the product card's
       overlay circle), and 6.67:1 white-on-ember as a FILL. It carries all
       the text/link/icon/price roles the export paints `text-primary`.
     - accent Ember Orange #cd6b3a is LIGHT: 3.22:1 on cream and 3.65:1 on
       white as text (both FAIL WCAG AA's 4.5:1), and white-on-accent is
       3.65:1. It clears the lenient 3:1 non-text/UI-component threshold, so
       it is used ONLY for decorative fills, hover tints, focus rings and
       hairline underlines — never for text or a small label. Every base rule
       that painted TEXT with `var(--ll-accent)` is re-pointed to the ember in
       the guard block below.
     - The espresso panels use the export's own darks: --em-espresso #211a16
       (`on-surface` — announce band + footer) and --em-espresso-soft #372f2a
       (`inverse-surface` — the origin band). Cream #fff8f5 on the espresso is
       16.34:1 (12.48:1 on the softer band) and #eee0d9 is 13.32:1.
     - DEVIATION, deliberate: on those dark panels the export paints its
       accents `text-primary` (#984314), which measure 1.96:1 on #372f2a and
       2.57:1 on #211a16 — effectively invisible. Those roles (the origin-band
       pin, the footer column headings) instead use --em-ember-lift #ffb695,
       the design system's OWN `inverse-primary` token, i.e. the value the
       palette already defines as "the primary as it appears on a dark
       surface": 7.72:1 on #372f2a and 10.11:1 on #211a16. Not an invented
       colour.
     - --mr-soft (small captions/eyebrows/breadcrumbs — see app.css) cannot
       reuse the design's own `outline` token (#897269): that measures only
       3.96:1 on cream, under the 4.5:1 normal-text minimum. --em-soft
       (#6b5d55) is a deliberately darkened value in the same warm-brown
       family that clears 5.58:1 on cream and 5.15:1 on the card media well.
   ========================================================================== */

body.em-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
    --em-ember: var(--bs-primary, #984314);
    --em-ember-rgb: var(--bs-primary-rgb, 152, 67, 20);
    /* Bootstrap 5.3 paints bare <a> as rgba(var(--bs-link-color-rgb),…);
       theme-vars sets --bs-link-color but never the -rgb triplet, so without
       this a plain content link (CMS/blog body, quick-view "Category") falls
       back to factory blue. Point it at the ember. NOTE: setting this token is
       the ONLY correct fix — a bare `body.em-theme a { color: … }` catch-all
       would out-specify the base `.mr-btn--primary { color:#fff }` and repaint
       the hero CTA's label to ink. */
    --bs-link-color-rgb: var(--em-ember-rgb);
    --em-flame: var(--ll-accent, #cd6b3a);
    /* The accent as it reads on a DARK panel — the design system's own
       `inverse-primary`. See the CONTRAST note above. */
    --em-ember-lift: #ffb695;
    --em-radius: var(--bs-border-radius, 0.375rem);
    /* DESIGN.md "Shapes": interactive elements relax to 8px on hover. */
    --em-radius-hover: 0.5rem;
    --em-font-head: var(--ll-font-headings, "Lora"), Georgia, serif;
    --em-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Warm roastery palette (rendered code.html + DESIGN.md) */
    --em-cream: #f6f0e6;          /* page canvas (the export's body bg)       */
    --em-surface: #fff8f5;        /* header / trust strip / inputs            */
    --em-container-low: #fff1ea;  /* quiet lifts                             */
    --em-container: #faebe4;      /* newsletter card, chips                  */
    --em-container-high: #f4e5de; /* product + article media wells           */
    --em-band: #fdf9f4;           /* journal band (the export's #FDF9F4)     */
    --em-ink: #211a16;            /* on-surface                              */
    --em-muted: #55433b;          /* on-surface-variant                      */
    --em-soft: #6b5d55;           /* darkened "outline" — see CONTRAST note  */
    --em-espresso: #211a16;       /* announce band + footer (on-surface)     */
    --em-espresso-soft: #372f2a;  /* origin band (inverse-surface)           */
    --em-on-dark: #eee0d9;        /* surface-variant, body copy on espresso  */

    /* Depth — soft, diffused, brown-tinted "resting on a tabletop" shadows
       (DESIGN.md "Tactile Shadows": rgba(46, 33, 26, 0.08)), never hard
       digital elevation. Value copied from the export's own .card-shadow. */
    --em-shadow: 0 4px 20px -4px rgba(46, 33, 26, 0.08);

    /* Re-point the inherited base neutrals at the cream palette so every
       inherited mr-* surface (bands, borders, fills, muted text) warms — this
       single block is what restyles shop / PDP / cart / checkout / account /
       blog without a per-page override. */
    --mr-ink: var(--em-ink);
    --mr-muted: var(--em-muted);
    --mr-soft: var(--em-soft);
    --mr-surface: var(--em-surface);
    --mr-band: var(--em-band);
    --mr-band-alt: var(--em-container-high);
    --mr-fill: #eee0d9;
    --mr-border: #dcc1b6;
    --mr-border-strong: #c9a493;
    --mr-radius: var(--em-radius);
    /* .mr-stars — ember rather than the base's generic gold. */
    --mr-gold: var(--em-ember);
    --mr-shadow: var(--em-shadow);

    background-color: var(--em-cream);
    color: var(--em-ink);
    font-family: var(--em-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Accent-as-TEXT guard. The base app.css paints a dozen text/icon roles with
   `var(--ll-accent)`, which on this cream canvas measures 3.22:1 — under the
   4.5:1 AA minimum. Re-point every one of them at the text-safe ember
   (5.88:1+). The raw accent survives only on the decorative roles further
   down (hover tints, focus rings, hairlines). Documented in gotchas.md as
   "check the accent as TEXT, not just as a fill".
   -------------------------------------------------------------------------- */
body.em-theme .mr-ulink:hover,
body.em-theme .mr-crumbs a:hover,
body.em-theme .mr-card__title a:hover,
body.em-theme .mr-article__title a:hover,
body.em-theme .mr-cart-row__title a:hover,
body.em-theme .mr-icon-btn:hover,
body.em-theme .mr-search button:hover {
    color: var(--em-ember);
}

body.em-theme .mr-ulink:hover {
    border-color: var(--em-ember);
}

body.em-theme .mr-badge--wish,
body.em-theme .mr-card__sale,
body.em-theme .mr-sale-tag {
    background-color: var(--em-ember);
    color: #fff;
}

body.em-theme .mr-tabs .nav-link.active {
    color: var(--em-ember);
    border-bottom-color: var(--em-ember);
}

/* The base focus ring is the raw accent; the ember reads more crisply on
   cream (5.88:1 vs 3.22:1) while still being unmistakably the brand. */
body.em-theme a:focus-visible,
body.em-theme button:focus-visible,
body.em-theme input:focus-visible,
body.em-theme select:focus-visible,
body.em-theme textarea:focus-visible {
    outline: 2px solid var(--em-ember);
    outline-offset: 2px;
}

/* Sale pricing (shared storefront::head.theme-vars defaults are a generic
   #d6293e red). The export renders the live price in ember with a quiet
   struck-through "was" beside it. */
body.em-theme .ll-price--sale {
    color: var(--em-ember);
}

body.em-theme .ll-price-compare {
    color: var(--em-soft);
}

/* --------------------------------------------------------------------------
   Shape discipline — the design's soft 6px geometry on every interactive
   element and image container; NEVER a `padding` shorthand on .form-select
   (it would collapse Bootstrap's reserved 2.25rem caret gutter and run the
   option text under the arrow — the base app.css already restores it with
   padding-inline-end, untouched here).
   -------------------------------------------------------------------------- */
body.em-theme .form-control,
body.em-theme .form-select,
body.em-theme .dropdown-menu,
body.em-theme .offcanvas,
body.em-theme .em-hero__media,
body.em-theme .mr-card__media,
body.em-theme .mr-article__media,
body.em-theme .mr-tile {
    border-radius: var(--em-radius);
}

/* --------------------------------------------------------------------------
   Typography — Lora at 600 for section headings (the design's headline-lg /
   headline-md), 700 for the hero display; Inter for everything functional.
   Eyebrows are the design's `label-md`: 14px, 600, 0.05em tracking, ember.
   -------------------------------------------------------------------------- */
body.em-theme h1, body.em-theme h2, body.em-theme h3,
body.em-theme h4, body.em-theme h5, body.em-theme h6 {
    font-family: var(--em-font-head);
    color: var(--em-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.em-theme .mr-display {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The export's section headings are headline-lg: 32px / 600 / left-aligned,
   noticeably quieter than the base's 3rem display scale. */
body.em-theme .em-section-title {
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: left;
}

body.em-theme .mr-eyebrow,
body.em-theme .em-eyebrow {
    font-family: var(--em-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--em-ember);
}

/* --------------------------------------------------------------------------
   Buttons — solid ember primary with cream-white text (6.67:1); an
   espresso-outline secondary (the export's 1.5px `.btn-secondary`). Both
   relax from 6px to 8px on hover per DESIGN.md's "tactile feedback".
   -------------------------------------------------------------------------- */
body.em-theme .mr-btn {
    font-family: var(--em-font-body);
    border-radius: var(--em-radius);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.85rem 2.2rem;
    transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, border-radius 0.2s ease, transform 0.1s ease;
}

body.em-theme .mr-btn:hover {
    border-radius: var(--em-radius-hover);
}

body.em-theme .mr-btn--primary {
    background-color: var(--em-ember);
    border-color: var(--em-ember);
    color: #fff;
}

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

/* The base's `.mr-btn--light:hover` fills with the raw accent under #fff text
   (3.65:1). Fill with espresso and cream text instead (14.83:1). */
body.em-theme .mr-btn--light {
    background-color: var(--em-surface);
    color: var(--em-ember);
}

body.em-theme .mr-btn--light:hover {
    background-color: var(--em-espresso);
    color: var(--em-surface);
}

body.em-theme .em-btn-outline {
    border: 1.5px solid var(--em-ink);
    color: var(--em-ink);
    background: transparent;
}

body.em-theme .em-btn-outline:hover {
    background: var(--em-ink);
    border-color: var(--em-ink);
    color: var(--em-surface);
}

/* The ember "→" link used by the journal cards when a merchant re-enables the
   per-article label. */
body.em-theme .em-view-link {
    color: var(--em-ember);
    text-decoration: none;
    font-family: var(--em-font-body);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--em-flame);
}

body.em-theme .em-view-link:hover {
    color: var(--em-ink);
    border-color: var(--em-ink);
}

/* --------------------------------------------------------------------------
   Inputs — DESIGN.md "Inner Depth": a 1px inset border rather than a shadow,
   for a "pressed-paper" look; focus draws the ember border.
   -------------------------------------------------------------------------- */
body.em-theme .form-control,
body.em-theme .form-select {
    background-color: var(--em-surface);
    border-color: rgba(46, 33, 26, 0.2);
    color: var(--em-ink);
}

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

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

/* --------------------------------------------------------------------------
   Announcement band + header — the espresso whisper strip ("Roasted every
   Monday…"), then the bright warm-white header under a clay hairline: Lora
   ember wordmark, quiet Inter nav, ember active state.
   -------------------------------------------------------------------------- */
body.em-theme .mr-announce {
    background-color: var(--em-espresso);
    color: var(--em-surface);
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: none;
}

body.em-theme .mr-header {
    background-color: var(--em-surface);
    border-bottom-color: var(--mr-border);
}

body.em-theme .mr-logo {
    font-family: var(--em-font-head);
    font-weight: 700;
    color: var(--em-ember);
}

body.em-theme .mr-nav-link {
    font-family: var(--em-font-body);
    color: var(--em-muted);
}

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

/* The export's active nav item is `text-primary font-bold border-b-2
   border-primary` — the base painted it with the raw accent. */
body.em-theme .mr-nav-link.is-active {
    color: var(--em-ember);
    font-weight: 700;
    border-bottom-color: var(--em-ember);
}

body.em-theme .mr-search input {
    background: var(--em-container-low);
    border-color: rgba(46, 33, 26, 0.2);
}

/* The base focus shadow here is a hardcoded stock-blue rgba(0,140,199,…). */
body.em-theme .mr-search input:focus {
    background: var(--em-surface);
    border-color: var(--em-ember);
    box-shadow: 0 0 0 3px rgba(var(--em-ember-rgb), 0.16);
}

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

/* --------------------------------------------------------------------------
   Hero (em-hero) — the export's 50/50 split: the roasting-drum photograph
   edge-to-edge on the left, copy on the cream panel to the right. Stacks
   photo-over-copy on mobile.
   -------------------------------------------------------------------------- */
body.em-theme .em-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px;
    background: var(--em-cream);
}

body.em-theme .em-hero__media {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: var(--em-container-high);
}

body.em-theme .em-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s ease;
}

body.em-theme .em-hero:hover .em-hero__img {
    transform: scale(1.04);
}

body.em-theme .em-hero__panel {
    display: flex;
    align-items: center;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 5rem);
}

/* Keep the copy column measured on very wide viewports rather than letting it
   stretch across the whole half (the export's copy block is `max-w-md`-bound). */
body.em-theme .em-hero__copy {
    width: 100%;
    max-width: 34rem;
}

body.em-theme .em-hero__title {
    font-size: clamp(2.25rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

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

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

body.em-theme .em-btn-hero {
    padding: 0.95rem 2.5rem;
}

/* --------------------------------------------------------------------------
   Trust strip (inherited mr-trust) — the export lifts it onto the lighter
   #fff8f5 surface (not the cream canvas) with an ember icon over one short
   uppercase label per item, centered.
   -------------------------------------------------------------------------- */
body.em-theme .mr-band--alt {
    background-color: var(--em-surface);
}

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

body.em-theme .mr-trust svg {
    width: 26px;
    height: 26px;
    color: var(--em-ember);
}

body.em-theme .mr-trust strong {
    font-family: var(--em-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--em-ink);
}

body.em-theme .mr-trust span {
    font-size: 0.85rem;
    color: var(--em-muted);
}

/* --------------------------------------------------------------------------
   Promo tiles (em-promo) — the export's three tall photographic tiles with a
   bottom-up espresso gradient and a two-line caption pinned bottom-left.
   -------------------------------------------------------------------------- */
/* The export's promo band is `py-xl` (a flat 80px) rather than the base
   `.mr-section` rhythm. */
body.em-theme .em-promos {
    padding-block: clamp(3rem, 6vw, 5rem);
}

body.em-theme .em-promo {
    position: relative;
    display: block;
    overflow: hidden;
    height: 500px;
    border-radius: var(--em-radius-hover);
    background: var(--em-container-high);
    text-decoration: none;
}

body.em-theme .em-promo__img,
body.em-theme .em-promo__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

body.em-theme .em-promo__placeholder {
    background: linear-gradient(135deg, var(--em-container), var(--em-container-high));
}

body.em-theme .em-promo:hover .em-promo__img {
    transform: scale(1.08);
}

/* Never `background: none` here — the scrim is the only thing keeping the
   caption readable over an arbitrary merchant photograph. */
body.em-theme .em-promo__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(33, 26, 22, 0.82) 0%, rgba(33, 26, 22, 0.34) 42%, rgba(33, 26, 22, 0) 78%);
}

body.em-theme .em-promo__cap {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 2rem;
    z-index: 2;
    display: block;
}

body.em-theme .em-promo__title {
    display: block;
    font-family: var(--em-font-head);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--em-surface);
    margin-bottom: 0.35rem;
}

body.em-theme .em-promo__text {
    display: block;
    font-family: var(--em-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 248, 245, 0.9);
}

/* --------------------------------------------------------------------------
   Product cards (inherited mr-card) — DESIGN.md: "Product cards use a thin
   1px border (#E8DED0) rather than heavy shadows. The product name is always
   in Literata." The rendered export puts that border on the MEDIA well only
   (not the whole card), so the title/price below stay flush by design and no
   text inset is needed. Prices are bold ember (the design's `price-tag`).
   -------------------------------------------------------------------------- */
body.em-theme .mr-card__media {
    background-color: var(--em-container-high);
    border: 1px solid var(--mr-border);
}

body.em-theme .mr-card__title,
body.em-theme .mr-card__title a {
    font-family: var(--em-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--em-ink);
}

body.em-theme .mr-card__eyebrow {
    color: var(--em-soft);
}

body.em-theme .mr-card__price {
    font-family: var(--em-font-body);
    color: var(--em-ember);
    font-size: 1.05rem;
    font-weight: 700;
}

body.em-theme .mr-card__price del,
body.em-theme .mr-card__price .ll-price-compare {
    color: var(--em-soft);
}

/* The export's Sale chip is `bg-primary text-surface` with a small radius
   (the shared theme-vars default is a generic red pill). */
body.em-theme .mr-card__badge {
    background: var(--em-ember);
    color: var(--em-surface);
    border-radius: var(--em-radius);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.68rem;
}

/* The two round overlay controls are SIBLINGS with different names and are
   restyled together (recurring bug — gotchas.md). Resting ink is the ember on
   the warm-white circle (6.67:1); hover keeps the base's own text pair
   (--mr-ink on --mr-surface, 14.9:1). The wishlist "saved" state defaults to
   the raw accent (3.65:1 on the circle) — ink it with the ember instead.
   Measured: 6.53:1 resting, 16.34:1 hover. Their 9999px radius is
   deliberately untouched: this theme has no `border-radius: 0 !important`
   flatten block, so the circles stay circles for signed-in shoppers (a
   <button>) and guests (an <a>) alike. */
body.em-theme .mr-card__wish,
body.em-theme .mr-card__quickview {
    background-color: rgba(255, 248, 245, 0.88);
    color: var(--em-ember);
}

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

body.em-theme .mr-card__wish.is-active {
    color: var(--em-ember);
}

body.em-theme .mr-card__quick {
    background-color: var(--em-espresso);
    color: var(--em-surface);
    font-family: var(--em-font-body);
    letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Featured ("Cupping Table Picks") + new arrivals ("Fresh Off the Roaster") —
   both are left-heading still grids on the cream canvas. The base's featured
   band tint is dropped: the export keeps both rows on the canvas.
   -------------------------------------------------------------------------- */
body.em-theme .em-featured,
body.em-theme .em-arrivals {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Origin notes (em-farm) — the espresso "From the Farm Gate" band: three
   columns opened by a clay hairline rule, an ember-lift pin, an uppercase
   cream place label and a warm off-white tasting note. The pin uses
   --em-ember-lift, not the ember: see the CONTRAST deviation note at the top.
   -------------------------------------------------------------------------- */
body.em-theme .em-farm {
    background: var(--em-espresso-soft);
    padding: clamp(4rem, 8vw, 5rem) 0;
}

body.em-theme .em-farm__heading {
    color: var(--em-surface);
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 600;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

body.em-theme .em-farm__card {
    height: 100%;
    border-left: 1px solid rgba(220, 193, 182, 0.4);
    padding-left: 1.5rem;
}

body.em-theme .em-farm__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

body.em-theme .em-farm__pin {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--em-ember-lift);
}

body.em-theme .em-farm__pin svg {
    width: 22px;
    height: 22px;
}

body.em-theme .em-farm__title {
    color: var(--em-surface);
    font-family: var(--em-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0;
}

body.em-theme .em-farm__text {
    color: var(--em-on-dark);
    font-size: 1rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Categories (inherited mr-tile--cat) — the export shows plain icon chips,
   but the base's real-category + representative-photo tiles scale to any
   merchant's catalogue, so we keep that behaviour and simply warm the
   placeholder, firm up the scrim (so the cream caption clears any photo) and
   set the caption in Lora.
   -------------------------------------------------------------------------- */
body.em-theme .mr-tile__placeholder {
    background: linear-gradient(135deg, var(--em-container), var(--em-container-high));
}

body.em-theme .mr-tile--cat .mr-tile__scrim {
    background: rgba(33, 26, 22, 0.46);
}

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

/* --------------------------------------------------------------------------
   Journal (em-journal) — the export's own #FDF9F4 band, left Lora heading,
   ember category labels, Lora story titles.
   -------------------------------------------------------------------------- */
body.em-theme .em-journal {
    background: var(--em-band);
}

body.em-theme .em-article__media {
    background: var(--em-container-high);
}

body.em-theme .em-article__title,
body.em-theme .em-article__title a {
    font-family: var(--em-font-head);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--em-ink);
}

/* --------------------------------------------------------------------------
   Newsletter (em-cta) — "The Morning Pour": a calm centered card on the warm
   container tint, cream field + solid espresso Subscribe button (the export
   uses `bg-on-surface text-surface` here, not the ember).
   -------------------------------------------------------------------------- */
body.em-theme .em-cta {
    padding: clamp(4rem, 8vw, 5rem) 0;
}

body.em-theme .em-cta__inner {
    max-width: 720px;
    background: var(--em-container);
    border-radius: 1rem;
    padding: clamp(2.5rem, 5vw, 3.5rem);
}

body.em-theme .em-cta__heading {
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 600;
}

body.em-theme .em-cta__body {
    color: var(--em-muted);
    font-size: 1.125rem;
    max-width: 46ch;
}

body.em-theme .em-cta__form {
    display: flex;
    gap: 0.75rem;
    max-width: 460px;
}

body.em-theme .em-cta__form input {
    flex: 1;
    min-width: 0;
    background: var(--em-surface);
    border: 1px solid var(--mr-border);
    border-radius: var(--em-radius);
    padding: 0.8rem 1.1rem;
    font-size: 0.95rem;
    font-family: var(--em-font-body);
    color: var(--em-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

body.em-theme .em-cta__form input:focus {
    outline: none;
    border-color: var(--em-ember);
    box-shadow: 0 0 0 3px rgba(var(--em-ember-rgb), 0.16);
}

body.em-theme .em-cta__btn {
    border: 0;
    background: var(--em-espresso);
    color: var(--em-surface);
    border-radius: var(--em-radius);
    padding: 0.8rem 2rem;
    font-family: var(--em-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.2s ease, border-radius 0.2s ease;
}

body.em-theme .em-cta__btn:hover {
    opacity: 0.9;
    border-radius: var(--em-radius-hover);
}

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

/* --------------------------------------------------------------------------
   Inherited chrome finishing — the espresso footer (the export's footer sits
   on the same `on-surface` dark as the announce band). Column headings use
   --em-ember-lift, since the export's own `text-primary` would measure
   1.86:1 here (see the CONTRAST deviation note).
   -------------------------------------------------------------------------- */
body.em-theme .mr-footer {
    background-color: var(--em-espresso);
    border-top: 0;
    color: var(--em-on-dark);
}

body.em-theme .mr-footer h4 {
    color: var(--em-ember-lift);
    font-family: var(--em-font-body);
    letter-spacing: 0.1em;
}

body.em-theme .mr-footer__brand {
    color: var(--em-ember-lift);
    font-family: var(--em-font-head);
}

body.em-theme .mr-footer a {
    color: var(--em-on-dark);
}

/* `primary-fixed` (#ffdbcc) is the design's own hover value on a dark
   footer — 13.28:1 on the espresso. */
body.em-theme .mr-footer a:hover {
    color: #ffdbcc;
}

body.em-theme .mr-social {
    border-color: rgba(255, 248, 245, 0.25);
    background: transparent;
    color: var(--em-on-dark);
}

body.em-theme .mr-social:hover {
    background-color: var(--em-ember-lift);
    border-color: var(--em-ember-lift);
    color: var(--em-espresso);
}

body.em-theme .mr-ulink {
    color: var(--em-ember);
}

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

body.em-theme .mr-brandstrip span {
    font-family: var(--em-font-head);
    font-weight: 600;
    color: var(--em-soft);
}

body.em-theme .mr-panel,
body.em-theme .mr-page {
    background: var(--em-surface);
}

body.em-theme .mr-status {
    background: var(--em-container);
    color: var(--em-muted);
}

/* --------------------------------------------------------------------------
   Reduced motion — every zoom, lift and radius relax here is decorative.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.em-theme .mr-btn,
    body.em-theme .em-hero__img,
    body.em-theme .em-promo__img,
    body.em-theme .em-cta__btn,
    body.em-theme .em-cta__form input,
    body.em-theme .mr-card__media img,
    body.em-theme .mr-tile__img,
    body.em-theme .mr-promo__img {
        transition: none;
    }

    body.em-theme .em-hero:hover .em-hero__img,
    body.em-theme .em-promo:hover .em-promo__img {
        transform: none;
    }

    /* The base's reduced-motion block only kills the transitions on these —
       neutralise the hover transforms themselves too. */
    body.em-theme .mr-card:hover .mr-card__media img,
    body.em-theme .mr-tile:hover .mr-tile__img,
    body.em-theme .mr-promo:hover .mr-promo__img {
        transform: none !important;
    }

    body.em-theme .mr-btn:hover,
    body.em-theme .em-cta__btn:hover {
        border-radius: var(--em-radius);
    }
}

/* --------------------------------------------------------------------------
   Mobile (from the export's mobile frame): the hero stacks photo-over-copy,
   the promo tiles shorten, the origin columns swap their left rule for a top
   rule, and the newsletter form stacks.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body.em-theme .em-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body.em-theme .em-hero__media {
        min-height: 340px;
    }

    body.em-theme .em-hero__panel {
        padding: 2.5rem 1.25rem 3rem;
    }

    body.em-theme .em-promo {
        height: 380px;
    }

    body.em-theme .em-farm__card {
        border-left: 0;
        border-top: 1px solid rgba(220, 193, 182, 0.4);
        padding-left: 0;
        padding-top: 1.25rem;
    }
}

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

    body.em-theme .em-cta__btn {
        width: 100%;
    }
}