/* ==========================================================================
   arthaus — "Gallery-White" brand layer over modern-retail.

   Ported from the Google Stitch export
   (docs/templates/pending/stitch_50_arthaus_e_commerce_homepage_design — the
   arthaus_digital_gallery/DESIGN.md "Gallery-White" system is the
   design-system source): a warm cream canvas, near-black ink for all primary
   text/UI/borders, a curated mustard accent used sparingly, ZERO
   shadows/gradients and perfectly sharp (0px) corners everywhere, with a
   solid-ink footer and a black gallery-wall guide band.

   This stylesheet has two jobs:
     (a) style arthaus's OWN sections (ar-* — the split hero, the rail header
         rows, the black guide band, the keylined text category tiles, the
         boxed newsletter); and
     (b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
         base neutral tokens at the cream/ink palette, flattening every radius
         and shadow, and re-routing the base's accent-as-text roles (the base
         uses --ll-accent, a bright brand highlight, as TEXT on the light
         canvas — see the accent-as-text note below). 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.ar-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 (measured, not assumed — WCAG AA 4.5:1 body / 3:1 large+UI):
     - ink #1e1e1c on cream #faf9f6                 = 16.1:1
     - white #ffffff on ink #1e1e1c (button fill)   = 16.9:1
     - ink #1e1e1c on mustard #d9a441 (fill+text)   = 7.33:1 (safe)
     - mustard #d9a441 AS TEXT on ink #1e1e1c       = 7.33:1 (safe — the
       black guide band + footer accent moments only)
     - mustard #d9a441 AS TEXT on cream #faf9f6     = 2.18:1 (FAILS) — so the
       bright accent is NEVER used as text on the light canvas. Gold-as-text
       roles on cream (eyebrows, keyline-link hover, active heart) route to
       --ar-gold-ink #7d5700 instead:
     - #7d5700 AS TEXT on cream #faf9f6             = 6.28:1 (safe)
     - #7d5700 AS TEXT on band #f4f3f0              = 5.87:1 (safe)
   ========================================================================== */

body.ar-theme {
    /* Customizer-driven brand tokens (fallbacks match theme.json defaults).
       --ar-gold tracks accent_color (like every sibling theme's own accent
       var) so the customizer stays meaningful; it is used ONLY as a FILL, and
       as TEXT only on the ink/black bands (never on the cream canvas). */
    --ar-gold: var(--ll-accent, #d9a441);
    --ar-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
    --ar-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;

    /* Gallery-White palette (arthaus_digital_gallery/DESIGN.md). --ar-ink is a
       FIXED LITERAL, never bound to --bs-primary — body text/borders must stay
       near-black even if a merchant later customises primary_color (every
       sibling theme keeps ink/canvas literals for the same reason; only
       "accent" tracks the customizer). */
    --ar-cream: #faf9f6;        /* surface / background                                  */
    --ar-band: #f4f3f0;         /* surface-container-low — quiet bands (journal)         */
    --ar-white: #ffffff;        /* surface-container-lowest                              */
    --ar-fill: #e9e8e5;         /* surface-container-high — card media wells             */
    --ar-ink: #1e1e1c;          /* Ink — primary text / UI / borders / footer / band    */
    --ar-muted: #464741;        /* on-surface-variant                                    */
    --ar-soft: #5b5c56;         /* quiet text (placeholders / captions) — 6.5:1 on cream */
    --ar-hairline: #c7c7bf;     /* outline-variant — decorative 1px dividers             */

    /* Gold routed for TEXT on the light canvas (a darker mustard sibling; the
       bright --ar-gold is 2.18:1 on cream and cannot carry text — see the
       header contrast note). Literal, not customizer-bound, matching the
       darker-text-sibling pattern used by pulse/inkwell. */
    --ar-gold-ink: #7d5700;

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

    /* 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> renders factory blue even though
       --bs-link-color is correctly ink. Alias to --bs-primary-rgb so it tracks
       the customizer. */
    --bs-link-color-rgb: var(--bs-primary-rgb);

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

/* --------------------------------------------------------------------------
   Shape discipline — DESIGN.md: strictly sharp (0px radius), every UI element,
   image container and button at 90-degree angles. Zero shadows/gradients too.
   The base sets some radii as LITERALS that --mr-radius never reaches
   (.mr-social, .mr-status, .mr-cart-row__media, .mr-sale-tag) — flattened here
   explicitly.
   -------------------------------------------------------------------------- */
body.ar-theme .mr-card,
body.ar-theme .mr-card__media,
body.ar-theme .mr-btn,
body.ar-theme .mr-promo,
body.ar-theme .mr-promo__img,
body.ar-theme .mr-icon-btn,
body.ar-theme .mr-tile,
body.ar-theme .mr-article__media,
body.ar-theme .mr-social,
body.ar-theme .mr-status,
body.ar-theme .mr-cart-row__media,
body.ar-theme .mr-sale-tag,
body.ar-theme .mr-card__badge,
body.ar-theme .mr-search input,
body.ar-theme .form-control,
body.ar-theme .form-select,
body.ar-theme .dropdown-menu,
body.ar-theme .offcanvas,
body.ar-theme img,
body.ar-theme input,
body.ar-theme select,
body.ar-theme textarea,
body.ar-theme button {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The two round overlay controls on the product card (wishlist heart, quick
   view eye) are EXEMPT from the flatten above. `.mr-card__wish` renders as a
   <button> for signed-in shoppers and an <a> for guests — a flatten rule that
   catches `button` would square the heart for logged-in users only. Target the
   classes directly (matches both tags) and keep them pill-shaped, matching the
   platform's round icon-affordance convention. */
body.ar-theme .mr-card__wish,
body.ar-theme .mr-card__quickview {
    border-radius: 9999px !important;
}

/* --------------------------------------------------------------------------
   Accent-as-text re-route. The base app.css uses --ll-accent (bright mustard
   here) as TEXT/ICON/BORDER colour in ~a dozen places that render on the CREAM
   canvas, where mustard measures 2.18:1 (fails). Re-point each to a
   contrast-safe colour: --ar-gold-ink for gold-toned hover/active text
   (6.28:1), or ink where the export itself shows ink. Accent-as-FILL and
   accent-as-text on the dark bands are left alone (7.33:1, safe).
   -------------------------------------------------------------------------- */
body.ar-theme .mr-eyebrow,
body.ar-theme .mr-ulink:hover,
body.ar-theme .mr-card__wish.is-active,
body.ar-theme .mr-card__title a:hover,
body.ar-theme .mr-crumbs a:hover,
body.ar-theme .mr-cart-row__title a:hover,
body.ar-theme .mr-article__title a:hover {
    color: var(--ar-gold-ink);
}

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

/* Roles the export renders in plain ink, not gold, on the light canvas. */
body.ar-theme .mr-nav-link.is-active,
body.ar-theme .mr-icon-btn:hover,
body.ar-theme .mr-trust svg {
    color: var(--ar-ink);
}

body.ar-theme .mr-nav-link.is-active {
    border-bottom-color: var(--ar-ink);
}

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

/* Focus ring — the base draws it in mustard (2.18:1 on cream). Ink on the
   light canvas (16.1:1); the dark guide band + footer flip it to gold below. */
body.ar-theme a:focus-visible,
body.ar-theme button:focus-visible,
body.ar-theme input:focus-visible,
body.ar-theme select:focus-visible,
body.ar-theme textarea:focus-visible {
    outline: 2px solid var(--ar-ink);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Typography — Albert Sans Bold headlines (architectural, tight tracking on
   display sizes per DESIGN.md); Inter for everything else. Labels/eyebrows/
   buttons are uppercase + widely tracked.
   -------------------------------------------------------------------------- */
body.ar-theme h1,
body.ar-theme h2,
body.ar-theme h3,
body.ar-theme h4,
body.ar-theme h5,
body.ar-theme h6,
body.ar-theme .mr-display,
body.ar-theme .mr-logo {
    font-family: var(--ar-font-head);
    font-weight: 700;
    color: var(--ar-ink);
    letter-spacing: -0.01em;
}

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

/* Eyebrow (arthaus + inherited). Gold-toned but routed to the text-safe dark
   gold on the light canvas (the mustard eyebrow the export shows on cream is
   2.18:1). */
body.ar-theme .ar-eyebrow,
body.ar-theme .mr-eyebrow {
    font-family: var(--ar-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ar-gold-ink);
}

body.ar-theme a {
    color: var(--ar-ink);
}

/* Rail section headings (Wall Favourites / New on the Wall / Arthaus Journal
   / category heading). */
body.ar-theme .ar-rail__title {
    font-family: var(--ar-font-head);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    letter-spacing: -0.01em;
    color: var(--ar-ink);
}

/* Quiet tracked keyline link ("Shop All Best Sellers" / "Read More Stories"). */
body.ar-theme .ar-keyline-link {
    font-family: var(--ar-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ar-ink);
    text-decoration: none;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--ar-ink);
    transition: color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   Buttons & form controls — solid-ink primary (mustard fill on hover, per
   DESIGN.md Components → Buttons), ink-outline secondary. The base's
   token-driven defaults already deliver the pair once primary = ink; only the
   hover inversion, tracking and the select caret gutter are tuned here.
   -------------------------------------------------------------------------- */
body.ar-theme .mr-btn {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 0;
}

/* DESIGN.md: "On hover, background shifts to Mustard." Ink text on mustard
   = 7.33:1. Overrides the base's brightness-filter hover. */
body.ar-theme .mr-btn--primary:hover {
    filter: none;
    background-color: var(--ar-gold);
    color: var(--ar-ink);
    border-color: var(--ar-gold);
}

/* Re-assert the primary button's light label (the bare `body.ar-theme a`
   link-colour rule above is (0,1,2) and would otherwise repaint every
   <a>-based .mr-btn--primary to ink, vanishing the label on the ink fill). */
body.ar-theme .mr-btn--primary { color: #fff; }

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

body.ar-theme .mr-btn--outline:hover {
    background-color: var(--ar-ink);
    color: #fff;
}

/* Inputs — DESIGN.md: 1px Ink border, cream background, sharp corners, caps
   labels. The base's shared shorthand sets padding for both control types;
   .form-select restores its END gutter so Bootstrap's caret background-image
   never runs under the option text. */
body.ar-theme .form-control,
body.ar-theme .form-select {
    border: 1px solid var(--ar-ink);
    background-color: var(--ar-cream);
    color: var(--ar-ink);
}

body.ar-theme .form-select {
    padding-inline-end: 2.25rem;
}

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

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

body.ar-theme .form-label,
body.ar-theme .mr-field-label {
    font-family: var(--ar-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ar-ink);
}

/* --------------------------------------------------------------------------
   Announcement + header — ink announce band; the header is INHERITED
   (logo-left single sticky row, matching the export) and only restyled: cream
   backdrop with a 2px ink bottom rule, uppercase tracked nav.
   -------------------------------------------------------------------------- */
body.ar-theme .mr-announce {
    background-color: var(--ar-ink);
    color: var(--ar-cream);
    letter-spacing: 0.16em;
    font-size: 0.68rem;
    text-transform: uppercase;
}

body.ar-theme .mr-header {
    background-color: rgba(250, 249, 246, 0.96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 2px solid var(--ar-ink);
}

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

body.ar-theme .mr-nav-link {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ar-muted);
}

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

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

body.ar-theme .mr-search input {
    background-color: var(--ar-band);
    border-color: var(--ar-ink);
}

body.ar-theme .mr-search input:focus {
    border-color: var(--ar-ink);
    background-color: var(--ar-white);
}

/* --------------------------------------------------------------------------
   Split hero — gallery-wall interior photograph LEFT, copy RIGHT on cream.
   Full-bleed (no shell), a hairline-ink bottom rule separating it from the
   trust strip.
   -------------------------------------------------------------------------- */
body.ar-theme .ar-hero {
    border-bottom: 1px solid var(--ar-ink);
}

body.ar-theme .ar-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: min(80vh, 760px);
}

body.ar-theme .ar-hero__figure {
    position: relative;
    overflow: hidden;
    background-color: var(--ar-fill);
    border-right: 1px solid var(--ar-ink);
}

body.ar-theme .ar-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.ar-theme .ar-hero__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding: clamp(2rem, 6vw, 5rem);
    background-color: var(--ar-cream);
}

body.ar-theme .ar-hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 12ch;
}

body.ar-theme .ar-hero__lead {
    color: var(--ar-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 42ch;
    margin: 0;
}

body.ar-theme .ar-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.5rem;
}

body.ar-theme .ar-btn {
    padding: 1.05rem 2.5rem;
}

/* --------------------------------------------------------------------------
   Product cards (inherited) — the export frames each media well in a 1px ink
   border on the cream canvas (DESIGN.md Cards). The border lives on
   .mr-card__media alone (never the whole .mr-card), so the title/price
   siblings below never need a text inset.
   -------------------------------------------------------------------------- */
body.ar-theme .mr-card__media {
    background-color: var(--ar-fill);
    border: 1px solid var(--ar-ink);
}

body.ar-theme .mr-card__title {
    font-family: var(--ar-font-body);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ar-ink);
}

body.ar-theme .mr-card__price {
    font-weight: 500;
    letter-spacing: 0.01em;
}

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

/* Sale/demo chip — the base blade emits `.mr-card__badge` but the base CSS
   only styles the legacy `.mr-card__sale` class, leaving the badge unpositioned
   on every mr-family theme. Style it here: a solid mustard chip with ink text
   in the top-left (DESIGN.md Chips: rectangular Mustard with Ink text; ink+gold
   = 7.33:1). The demo chip keeps its own inline grey. */
body.ar-theme .mr-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background-color: var(--ar-gold);
    color: var(--ar-ink);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
}

/* Slide-up quick-add — mustard-fill hover to echo the primary button. */
body.ar-theme .mr-card__quick {
    letter-spacing: 0.14em;
}

body.ar-theme .mr-card__quick:hover {
    background-color: var(--ar-gold);
    color: var(--ar-ink);
}

/* --------------------------------------------------------------------------
   Promo tiles (inherited) — a link-line caption ("Explore Collection") under
   the title, over the base's dark scrim; the base's hover border/scrim/scale
   motion is kept. The caption sits on the darkened image, so the bright gold
   hover (7.33:1 on that scrim) is left as the base defines it.
   -------------------------------------------------------------------------- */
body.ar-theme .mr-promo__title {
    font-family: var(--ar-font-head);
    font-weight: 700;
}

body.ar-theme .mr-promo__cta {
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Rail header rows (Wall Favourites / New on the Wall) — cream canvas.
   -------------------------------------------------------------------------- */
body.ar-theme .ar-rail {
    background-color: var(--ar-cream);
}

/* --------------------------------------------------------------------------
   Gallery-wall guide — arthaus-only BLACK band with a centered heading and up
   to three bordered-icon how-to columns. White text/borders on ink = 16.9:1;
   focus ring flips to gold here (gold on ink = 7.33:1).
   -------------------------------------------------------------------------- */
body.ar-theme .ar-guide {
    background-color: var(--ar-ink);
    color: #fff;
    padding: clamp(4rem, 8vw, 6rem) 0;
}

body.ar-theme .ar-guide__title {
    font-family: var(--ar-font-head);
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

body.ar-theme .ar-guide__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(2.5rem, 4vw, 4rem);
}

body.ar-theme .ar-guide__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

body.ar-theme .ar-guide__icon {
    width: 5rem;
    height: 5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    color: #fff;
}

body.ar-theme .ar-guide__icon svg {
    width: 2rem;
    height: 2rem;
}

body.ar-theme .ar-guide__step-title {
    font-family: var(--ar-font-head);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

body.ar-theme .ar-guide__step-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 34ch;
}

body.ar-theme .ar-guide *:focus-visible {
    outline-color: var(--ar-gold);
}

/* --------------------------------------------------------------------------
   Category band — full-width keylined grid of OUTLINED text tiles (no photos).
   Each square cell fills solid ink from the bottom on hover, its label
   flipping to cream. auto-fit so 2–8 real categories always tile cleanly.
   -------------------------------------------------------------------------- */
body.ar-theme .ar-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border-top: 1px solid var(--ar-ink);
    border-left: 1px solid var(--ar-ink);
}

body.ar-theme .ar-catlink {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    border-right: 1px solid var(--ar-ink);
    border-bottom: 1px solid var(--ar-ink);
    background-color: var(--ar-cream);
}

body.ar-theme .ar-catlink::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--ar-ink);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

body.ar-theme .ar-catlink:hover::before,
body.ar-theme .ar-catlink:focus-visible::before {
    transform: translateY(0);
}

body.ar-theme .ar-catlink__label {
    position: relative;
    z-index: 1;
    font-family: var(--ar-font-head);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ar-ink);
    transition: color 0.3s ease;
    padding: 0.5rem;
    text-align: center;
}

body.ar-theme .ar-catlink:hover .ar-catlink__label,
body.ar-theme .ar-catlink:focus-visible .ar-catlink__label {
    color: var(--ar-cream);
}

/* --------------------------------------------------------------------------
   Journal — quiet cream-band surface; a mustard-fill category chip with ink
   text (7.33:1), an ink title, a 2-line excerpt.
   -------------------------------------------------------------------------- */
body.ar-theme .ar-journal {
    background-color: var(--ar-band);
}

body.ar-theme .ar-journal__media {
    border: 1px solid var(--ar-ink);
    display: block;
}

body.ar-theme .ar-chip {
    display: inline-block;
    background-color: var(--ar-gold);
    color: var(--ar-ink);
    font-family: var(--ar-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
}

body.ar-theme .ar-journal__title {
    font-family: var(--ar-font-head);
    font-weight: 700;
    letter-spacing: -0.01em;
}

body.ar-theme .ar-journal__title a {
    color: var(--ar-ink);
}

body.ar-theme .ar-journal__title a:hover {
    color: var(--ar-gold-ink);
}

/* --------------------------------------------------------------------------
   Newsletter — "On the Wall": centered heading + lead, then a single 1px-ink
   boxed row holding the email field and a solid-ink Subscribe button (mustard
   fill on hover). Stub form.
   -------------------------------------------------------------------------- */
body.ar-theme .ar-cta {
    background-color: var(--ar-cream);
    border-top: 1px solid var(--ar-ink);
}

body.ar-theme .ar-cta__inner {
    max-width: 36rem;
}

body.ar-theme .ar-cta__title {
    font-family: var(--ar-font-head);
    font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 3rem);
    letter-spacing: -0.02em;
    color: var(--ar-ink);
}

body.ar-theme .ar-cta__body {
    color: var(--ar-muted);
    max-width: 40ch;
}

body.ar-theme .ar-cta__form {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ar-ink);
}

body.ar-theme .ar-cta__input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--ar-ink);
    font-family: var(--ar-font-body);
    font-size: 0.95rem;
    padding: 0.9rem 1.25rem;
}

body.ar-theme .ar-cta__input::placeholder {
    color: var(--ar-soft);
}

body.ar-theme .ar-cta__input:focus {
    outline: none;
}

body.ar-theme .ar-cta__btn {
    flex: 0 0 auto;
    background-color: var(--ar-ink);
    border: 0;
    color: #fff;
    font-family: var(--ar-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.9rem 2rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.ar-theme .ar-cta__btn:hover:not(:disabled) {
    background-color: var(--ar-gold);
    color: var(--ar-ink);
}

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

/* --------------------------------------------------------------------------
   Inherited component finishing — footer (solid ink band, matching the
   export), socials (square bordered), dividers, pagination.
   -------------------------------------------------------------------------- */
body.ar-theme .mr-footer {
    background-color: var(--ar-ink);
    color: rgba(250, 249, 246, 0.72);
    border-top: 0;
}

body.ar-theme .mr-footer h4 {
    color: var(--ar-cream);
}

body.ar-theme .mr-footer a {
    color: rgba(250, 249, 246, 0.72);
}

body.ar-theme .mr-footer a:hover {
    color: #ffffff;
}

body.ar-theme .mr-footer__brand {
    color: var(--ar-cream);
    text-transform: uppercase;
}

body.ar-theme .mr-social {
    border: 1px solid rgba(250, 249, 246, 0.28);
    color: var(--ar-cream);
}

body.ar-theme .mr-social:hover {
    background-color: var(--ar-gold);
    border-color: var(--ar-gold);
    color: var(--ar-ink);
}

body.ar-theme .mr-footer *:focus-visible {
    outline-color: var(--ar-gold);
}

body.ar-theme .mr-divider {
    border-color: var(--ar-hairline);
}

body.ar-theme .mr-page {
    border-color: var(--ar-ink);
}

/* --------------------------------------------------------------------------
   Motion & responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.ar-theme .mr-reveal,
    body.ar-theme .mr-card__media,
    body.ar-theme .ar-keyline-link,
    body.ar-theme .ar-catlink::before,
    body.ar-theme .ar-catlink__label {
        transition: none !important;
    }

    body.ar-theme .mr-card:hover .mr-card__media img,
    body.ar-theme .mr-tile:hover .mr-tile__img,
    body.ar-theme .mr-promo:hover .mr-promo__img {
        transition: none !important;
        transform: none !important;
    }
}

@media (max-width: 991.98px) {
    body.ar-theme .ar-hero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body.ar-theme .ar-hero__figure {
        border-right: 0;
        border-bottom: 1px solid var(--ar-ink);
        min-height: 320px;
    }

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

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

    body.ar-theme .ar-cta__btn {
        border-top: 1px solid var(--ar-ink);
    }
}