/* ============================================================================
   our-story-fieldnotes.css  —  "FIELD NOTES" SKIN  (ADDITIVE OVERRIDE LAYER)
   ----------------------------------------------------------------------------
   thedoggos-our-story-v2 · "Our Story" page reskin.

   WHAT THIS IS
   ------------
   A self-contained, additive override stylesheet that reskins the Our Story
   section ([thedoggos_our_story]) to the approved "Field Notes" look — the
   same visual language already shipped on the subscription page
   (doggos-subscription-box/assets/css/subscription-fieldnotes.css): bone paper
   + faint ruled grid, Fraunces display headlines with a lime underline accent,
   JetBrains-Mono mono labels / eyebrows / nav / badges, hard OFFSET shadows
   (never blur), 1.5px solid ink hairlines, rationed lime (#aac527) as the
   single CTA colour, and specimen-style cream/ivory cards.

   HOW IT LOADS
   ------------
   This file is enqueued AFTER assets/css/story.css. It does NOT modify the
   base stylesheet — it overrides it in the cascade.

   WINNING THE CASCADE
   -------------------
   story.css scopes its rules at `.ts-wrap .thing` (specificity 0,2,0). The
   wrapper also carries an INLINE `style="--ts-accent:#C9362E; --ts-radius:..."`,
   so anything in the base that reads `var(--ts-accent)` resolves to that inline
   value. We therefore can't recolour by swapping a token — we override the
   concrete property (color/background/border/box-shadow). Every rule here is
   scoped under `body .ts-wrap` (specificity 0,3,0+) so it beats both the base
   selectors and the inline-driven accent colours, with `!important` used ONLY
   on visual props (color/background/border/box-shadow/font-family/border-radius)
   where the base would otherwise win via the inline accent var.

   SAFETY RULES OBSERVED
   ---------------------
   - Only VISUAL props are forced. Layout props (display / grid-template /
     position / width / flex / overflow) are left to story.css so the hero grid,
     section grid, accordion JS (aria-expanded + hidden), and reveal animation
     all keep working.
   - The reveal animation is driven by `.ts-wrap.is-armed .ts-reveal[.is-visible]`
     (JS adds `is-armed`). We NEVER set opacity/transform on `.ts-reveal`, so the
     fade-in is untouched. Any transition we add is disabled under
     prefers-reduced-motion (section 14).
   - The accordion is hidden via the `[hidden]` attribute (base + browser UA).
     We do not touch `[hidden]` / display, only the panel's visual chrome.

   TOKENS are defined once, scoped to `.ts-wrap`, below.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  (scoped to the wrapper — do not leak to the rest of site)
   Fonts (Fraunces, JetBrains Mono) are already self-hosted site-wide by the
   theme; we only name them here. We do NOT redefine --ts-accent (it's inline);
   instead we add our own --fn-* tokens and override concrete props.
--------------------------------------------------------------------------- */
body .ts-wrap {
    --fn-ink:        #2a2a36;
    --fn-ink-soft:   #55525e;
    --fn-ink-mute:   #8a8794;
    --fn-bone:       #faf6ee;
    --fn-cream:      #fdfaf3;
    --fn-ivory:      #f8f0e3;
    --fn-moss:       #20202a;
    --fn-lime:       #aac527;
    --fn-sage:       #95ab22;
    --fn-lime-ink:   #3a4410;
    --fn-rust:       #8e5a2f;
    --fn-turmeric:   #d4a83a;

    --fn-disp: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fn-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --fn-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --fn-rule: rgba(42, 42, 54, 0.18);     /* ink hairline (translucent)   */
    --fn-grid: rgba(42, 42, 54, 0.04);     /* ruled paper line             */

    --fn-ease: cubic-bezier(.22, 1, .36, 1);
    --fn-snap: cubic-bezier(.5, 1.4, .5, 1);
}

/* ---------------------------------------------------------------------------
   2. PAGE WRAPPER — bone paper + faint ruled grid
   story.css gives .ts-wrap a rounded card with a soft drop-shadow and a
   coloured radial ::before wash. We flip it to bone paper with a horizontal
   ruled grid and a hard ink hairline frame + offset shadow (specimen sheet).
--------------------------------------------------------------------------- */
body .ts-wrap {
    background-color: var(--fn-bone) !important;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 31px,
            var(--fn-grid) 31px,
            var(--fn-grid) 32px
        ) !important;
    color: var(--fn-ink) !important;
    font-family: var(--fn-body) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 18px !important;
    box-shadow: 8px 8px 0 var(--fn-ink) !important;
}

/* Neutralise the base coloured radial wash so the paper reads clean */
body .ts-wrap::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 8%, color-mix(in srgb, var(--fn-lime), transparent 92%), transparent),
        radial-gradient(ellipse 50% 30% at 85% 18%, color-mix(in srgb, var(--fn-turmeric), transparent 94%), transparent) !important;
}

/* Keep the grain texture but make it a touch subtler on the lighter paper */
body .ts-wrap .ts-grain {
    opacity: 0.022 !important;
    mix-blend-mode: multiply !important;
}

/* Default link colour inside the section (non-prose) -> moss/ink */
body .ts-wrap a { color: var(--fn-ink); }

/* ---------------------------------------------------------------------------
   3. SHARED DISPLAY TYPE — Fraunces headlines, ink
--------------------------------------------------------------------------- */
body .ts-wrap .ts-hero__title,
body .ts-wrap .ts-card__title,
body .ts-wrap .ts-books__title,
body .ts-wrap .ts-faq__title,
body .ts-wrap .ts-founder__name,
body .ts-wrap .ts-footer__name,
body .ts-wrap .ts-accordion__question {
    font-family: var(--fn-disp) !important;
    color: var(--fn-ink) !important;
    letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   4. TOP BAR — badge (mono lime eyebrow) + nav (mono uppercase ink)
--------------------------------------------------------------------------- */
/* Eyebrow badge -> cream chip, ink hairline, hard offset shadow, mono lime text */
body .ts-wrap .ts-badge {
    background: var(--fn-cream) !important;
    color: var(--fn-rust) !important;
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-badge__dot {
    background: var(--fn-lime) !important;
    box-shadow: none !important;
}

/* Quick-nav links -> mono uppercase ink pills with ink hairline + small offset */
body .ts-wrap .ts-nav__link {
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fn-ink) !important;
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
    transition: transform 0.15s var(--fn-snap), box-shadow 0.15s var(--fn-snap),
                background 0.15s var(--fn-ease), color 0.15s var(--fn-ease) !important;
}
body .ts-wrap .ts-nav__link:hover {
    color: var(--fn-lime-ink) !important;
    background: var(--fn-lime) !important;
    border-color: var(--fn-ink) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   5. HERO — big Fraunces title w/ lime underline accent, mono lead prose
   The title is plain text (no inner span in the markup), so the lime accent is
   a left-anchored underline rule drawn under the whole H2 via ::after.
   NOTE: ::after is a generated box, not a functional element — safe to style.
--------------------------------------------------------------------------- */
body .ts-wrap .ts-hero__title {
    font-weight: 600 !important;       /* Fraunces optical weight reads heavy */
    color: var(--fn-ink) !important;
    position: relative;
    padding-bottom: 0.22em;
}
body .ts-wrap .ts-hero__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.02em;
    width: 2.4em;
    max-width: 60%;
    height: 0.12em;
    background: var(--fn-lime) !important;
    border-radius: 2px;
}

/* Lead prose first paragraph -> a touch larger, ink-soft */
body .ts-wrap .ts-prose--lead p:first-child {
    color: var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   6. PROSE — legible ink-soft body, ink emphasis, lime-ink links
--------------------------------------------------------------------------- */
body .ts-wrap .ts-prose {
    font-family: var(--fn-body) !important;
    color: var(--fn-ink-soft) !important;
    max-width: 68ch;            /* keep a comfortable measure on wide screens */
}
body .ts-wrap .ts-prose--centered { max-width: 60ch; }
body .ts-wrap .ts-prose strong { color: var(--fn-ink) !important; font-weight: 700; }
body .ts-wrap .ts-prose a {
    color: var(--fn-sage) !important;
    text-decoration-color: color-mix(in srgb, var(--fn-lime), transparent 40%);
    text-underline-offset: 3px;
}
body .ts-wrap .ts-prose a:hover { color: var(--fn-lime-ink) !important; }

/* ---------------------------------------------------------------------------
   7. BUTTONS
   Primary = lime fill + ink text + 1.5px ink border + 4px hard offset shadow,
             hover translate(-2px,-2px) -> 6px shadow.
   Ghost   = cream fill + ink border + 3px hard offset shadow.
   Mono uppercase labels to match the subscription skin CTAs.
--------------------------------------------------------------------------- */
body .ts-wrap .ts-btn {
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px !important;
    transition: transform 0.15s var(--fn-snap), box-shadow 0.15s var(--fn-snap),
                background 0.15s var(--fn-ease), color 0.15s var(--fn-ease) !important;
}
body .ts-wrap .ts-btn--primary {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    box-shadow: 4px 4px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-btn--primary:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-btn--primary:active {
    transform: translate(0, 0) !important;
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-btn--ghost {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-btn--ghost:hover {
    background: var(--fn-cream) !important;
    color: var(--fn-ink) !important;
    border-color: var(--fn-ink) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   8. HERO ASIDE — media frame + FOUNDERS CARD (specimen panel)
--------------------------------------------------------------------------- */
body .ts-wrap .ts-hero__media {
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 14px !important;
    background: var(--fn-ivory) !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}

/* Founders card -> cream specimen panel, ink hairline, hard 6px offset shadow */
body .ts-wrap .ts-founders-card {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-founders-card__header {
    border-bottom: 1.5px solid var(--fn-rule) !important;
}

/* Avatar initials -> lime disc, ink numeral/letters, ink hairline ring */
body .ts-wrap .ts-avatar {
    border-radius: 12px !important;
    border: 1.5px solid var(--fn-ink) !important;
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-avatar--initials {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-disp) !important;
    font-weight: 700 !important;
}

body .ts-wrap .ts-founder__name { color: var(--fn-ink) !important; }
body .ts-wrap .ts-founder__title {
    font-family: var(--fn-mono) !important;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
}

/* Tagline -> ivory ticket w/ lime left rule */
body .ts-wrap .ts-founders-card__tagline {
    background: var(--fn-ivory) !important;
    border-left: 3px solid var(--fn-lime) !important;
    border-radius: 8px !important;
    color: var(--fn-ink-soft) !important;
    font-family: var(--fn-body) !important;
}

/* ---------------------------------------------------------------------------
   9. VALUES (inside founders card)
--------------------------------------------------------------------------- */
body .ts-wrap .ts-value {
    background: var(--fn-ivory) !important;
    border: 1px solid var(--fn-rule) !important;
    border-radius: 12px !important;
}
body .ts-wrap .ts-value:hover {
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 88%) !important;
    border-color: var(--fn-ink) !important;
}
body .ts-wrap .ts-value__icon {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 10px !important;
}
body .ts-wrap .ts-value__title { color: var(--fn-ink) !important; }
body .ts-wrap .ts-value__body { color: var(--fn-ink-soft) !important; }

/* ---------------------------------------------------------------------------
   10. CARDS / PANELS — feature card, centered card, kicker
   cream/bone background · 1.5px ink hairline · hard 6px offset shadow.
--------------------------------------------------------------------------- */
body .ts-wrap .ts-card {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
/* The philosophy feature card uses --ts-surface (a near-transparent grey) in
   the base; pin it to a faint lime-washed paper so it reads as the lead panel. */
body .ts-wrap .ts-card--feature {
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 90%) !important;
}
body .ts-wrap .ts-card__title { color: var(--fn-ink) !important; }

/* Centered "what is The Doggos" card icon -> lime disc, ink hairline */
body .ts-wrap .ts-card__icon-wrap {
    background: var(--fn-lime) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-card__icon { color: var(--fn-lime-ink) !important; }

/* Kicker -> mono uppercase rust marker on a lime hairline chip */
body .ts-wrap .ts-kicker {
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
    background: var(--fn-ivory) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   11. CHECKLIST — sage check discs, ink-soft text
--------------------------------------------------------------------------- */
body .ts-wrap .ts-checklist li { color: var(--fn-ink-soft) !important; }
body .ts-wrap .ts-checklist__icon {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 50% !important;
}

/* ---------------------------------------------------------------------------
   12. BOOKS — specimen panel + book tickets
--------------------------------------------------------------------------- */
body .ts-wrap .ts-books {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-books__title { color: var(--fn-ink) !important; }
body .ts-wrap .ts-books__icon { color: var(--fn-sage) !important; }

/* Each book row -> ivory ticket with ink hairline + small offset shadow */
body .ts-wrap .ts-book {
    background: var(--fn-ivory) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
    transition: transform 0.15s var(--fn-snap), box-shadow 0.15s var(--fn-snap),
                background 0.15s var(--fn-ease) !important;
}
body .ts-wrap .ts-book:hover {
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 88%) !important;
    border-color: var(--fn-ink) !important;
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0 var(--fn-ink) !important;
}
/* "Vol. 1 / 2" badge -> lime tile, ink numeral, mono */
body .ts-wrap .ts-book__badge {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 10px !important;
}
body .ts-wrap .ts-book__name { color: var(--fn-ink) !important; }
body .ts-wrap .ts-book__desc {
    font-family: var(--fn-mono) !important;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
}
body .ts-wrap .ts-book__arrow { color: var(--fn-ink-mute) !important; }
body .ts-wrap .ts-book:hover .ts-book__arrow { color: var(--fn-sage) !important; }

/* Note line -> dashed rust ticket on turmeric wash */
body .ts-wrap .ts-books__note {
    background: color-mix(in srgb, var(--fn-turmeric), var(--fn-bone) 86%) !important;
    border: 1.5px dashed var(--fn-rust) !important;
    border-radius: 10px !important;
    color: var(--fn-rust) !important;
    font-family: var(--fn-mono) !important;
    font-style: normal !important;
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   13. FAQ / ACCORDION
   Panel = ivory paper; items = cream with lime left rule, ink hairline, offset.
   The accordion mechanic is aria-expanded + [hidden] (JS/UA) — untouched.
--------------------------------------------------------------------------- */
body .ts-wrap .ts-faq {
    background: var(--fn-ivory) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-faq__title { color: var(--fn-ink) !important; }
body .ts-wrap .ts-faq__subtitle {
    font-family: var(--fn-mono) !important;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
}

body .ts-wrap .ts-accordion__item {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-left: 4px solid var(--fn-lime) !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 var(--fn-ink) !important;
}
/* Base lifts the open item with a blurred shadow via :has() — keep it hard */
body .ts-wrap .ts-accordion__item:has([aria-expanded="true"]) {
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
    border-left-color: var(--fn-sage) !important;
}
body .ts-wrap .ts-accordion__trigger:hover {
    background: color-mix(in srgb, var(--fn-lime), var(--fn-cream) 90%) !important;
}
body .ts-wrap .ts-accordion__question { color: var(--fn-ink) !important; }

/* Chevron disc -> ivory tile w/ ink hairline; open state -> lime */
body .ts-wrap .ts-accordion__icon {
    background: var(--fn-ivory) !important;
    border: 1.5px solid var(--fn-ink) !important;
    color: var(--fn-ink) !important;
}
body .ts-wrap .ts-accordion__trigger[aria-expanded="true"] .ts-accordion__icon {
    background: var(--fn-lime) !important;
    border-color: var(--fn-ink) !important;
    color: var(--fn-lime-ink) !important;
}

/* ---------------------------------------------------------------------------
   14. FOOTER — paper strip, ink hairline, mono links
--------------------------------------------------------------------------- */
body .ts-wrap .ts-footer {
    background: var(--fn-cream) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--fn-ink) !important;
}
body .ts-wrap .ts-footer__logo {
    background: var(--fn-lime) !important;
    color: var(--fn-lime-ink) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 12px !important;
}
body .ts-wrap .ts-footer__name { color: var(--fn-ink) !important; }
body .ts-wrap .ts-footer__tagline {
    font-family: var(--fn-mono) !important;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fn-rust) !important;
}
body .ts-wrap .ts-footer__link {
    font-family: var(--fn-mono) !important;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fn-ink) !important;
    background: var(--fn-ivory) !important;
    border: 1.5px solid var(--fn-ink) !important;
    border-radius: 999px !important;
    box-shadow: 2px 2px 0 var(--fn-ink) !important;
    transition: transform 0.15s var(--fn-snap), box-shadow 0.15s var(--fn-snap),
                background 0.15s var(--fn-ease), color 0.15s var(--fn-ease) !important;
}
body .ts-wrap .ts-footer__link:hover {
    color: var(--fn-lime-ink) !important;
    background: var(--fn-lime) !important;
    border-color: var(--fn-ink) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0 var(--fn-ink) !important;
}

/* ---------------------------------------------------------------------------
   15. MOBILE  (<= 560px) — cards stack (base grids handle columns), trim the
   offset shadows so hard shadows don't overflow, keep hero + nav readable.
   We only touch visual props; the base media queries own the layout collapse.
--------------------------------------------------------------------------- */
@media (max-width: 560px) {
    body .ts-wrap {
        box-shadow: 5px 5px 0 var(--fn-ink) !important;
    }
    body .ts-wrap .ts-card,
    body .ts-wrap .ts-books,
    body .ts-wrap .ts-faq,
    body .ts-wrap .ts-founders-card,
    body .ts-wrap .ts-footer,
    body .ts-wrap .ts-hero__media {
        box-shadow: 4px 4px 0 var(--fn-ink) !important;
    }
    body .ts-wrap .ts-accordion__item,
    body .ts-wrap .ts-book {
        box-shadow: 3px 3px 0 var(--fn-ink) !important;
    }
    /* Nav wraps to multiple mono rows; keep chips compact */
    body .ts-wrap .ts-nav { flex-wrap: wrap; }
    body .ts-wrap .ts-nav__link { font-size: 10px; }
    /* Hero underline: don't let the accent rule dominate a small title */
    body .ts-wrap .ts-hero__title::after { width: 1.8em; }
}

/* ---------------------------------------------------------------------------
   16. REDUCED-MOTION SAFETY for every transition introduced above.
   (The base file already neutralises .ts-reveal + its own hovers; we add ours.)
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body .ts-wrap .ts-btn,
    body .ts-wrap .ts-nav__link,
    body .ts-wrap .ts-footer__link,
    body .ts-wrap .ts-book {
        transition: none !important;
    }
    body .ts-wrap .ts-btn--primary:hover,
    body .ts-wrap .ts-btn--ghost:hover,
    body .ts-wrap .ts-nav__link:hover,
    body .ts-wrap .ts-footer__link:hover,
    body .ts-wrap .ts-book:hover {
        transform: none !important;
    }
}