/* MI Exercises — design foundation: tokens + shared components.
 *
 * THE one place colour, spacing, radii and type scale are defined. Page
 * stylesheets (exercise.css) consume these and MUST NOT introduce a hex
 * literal — the P7 verification greps for that. Values are sampled from
 * the P7 mockups (docs/mockups/), not eyeballed.
 *
 * The gold/purple adjacency constraint is waived for these pages (Q8) —
 * the mockups use both freely.
 */

.mie-single,
.mie-archive {

    /* ── Brand ─────────────────────────────────────────────────────── */
    --mie-gold:          #ffd700;
    --mie-purple:        #4a148c;
    --mie-purple-tint:   #ede7f3;

    /* ── Surfaces ──────────────────────────────────────────────────── */
    --mie-ink:           #212121;  /* hero band, CTA band */
    --mie-ink-raised:    #2e2e2e;  /* attribute cards on the ink band */
    --mie-body:          #fafafa;  /* page background */
    --mie-surface:       #ffffff;  /* content cards */

    /* ── Text ──────────────────────────────────────────────────────── */
    --mie-text:          #212121;
    --mie-text-muted:    #666666;   /* /workouts/ .mi-results-status */
    --mie-text-faint:    #9a9a9a;   /* /workouts/ .mi-guide-card-meta-label */
    --mie-text-on-ink:   #ffffff;
    --mie-text-on-ink-muted: #b8b8b8;

    /* ── Hover — TWO rules, keyed to the ground ─────────────────────
       Reported by Liam (1.1): everything hovered to purple wherever it
       sat. On the ink bands that is near-invisible, and on a light
       ground the theme's purple is LIGHTER than our resting purple, so
       activating a link read as fading it out.

       So hover is a property of the BACKGROUND, not of the component:

         on ink   → white, or the gold brightened where the element is
                    already gold (a gold button going white would read
                    as a different button, not a hovered one)
         on light → a DEEPER purple than resting. Never lighter — that
                    is the whole complaint, and it is why this token is
                    darker than --mie-purple rather than a tint of it.

       Two tokens, consumed by the pair of rules below the theme-defence
       block. Components only restate a hover where colour is not the
       channel that changes (a border, a ground, a button's fill). */
    --mie-hover-on-light: #38006b;   /* deeper than --mie-purple #4a148c */
    --mie-hover-on-dark:  #ffffff;
    --mie-hover-gold:     #ffe14d;   /* --mie-gold, brightened — ON INK ONLY */
    --mie-hover-gold-deep: #e6c200;  /* --mie-gold, deepened — on light */
    /* The hover on /workouts/' Load More, MEASURED on production
       (#4A148C rest → #3F0883 hover). Not derived from --mie-purple and
       deliberately not rounded to --mie-hover-on-light: it is somebody
       else's value, borrowed so a shared component matches, and the
       point of writing it down is that it stays the number over there.
       It lives in the site's Customizer CSS, not in mi-workouts — see
       docs/workout-card-component-investigation.md §4. */
    --mie-hover-purple-deep: #3f0883;

    /* ── Semantic ──────────────────────────────────────────────────── */
    --mie-green:         #1f6b41;
    --mie-green-tint:    #eaf3ee;
    --mie-tick:          #2e8b57;
    --mie-red:           #c0392b;

    --mie-hairline:      #e8e8e8;
    --mie-card-border:   #dddddd;              /* .mi-guide-card on /workouts/ */
    --mie-scrim:         rgba(0, 0, 0, 0.55);  /* badge ground over a photo */

    /* Empty media wells. Must sit visibly BELOW --mie-surface and apart
       from --mie-body, or an unpopulated image well is indistinguishable
       from the page and its overlaid badge appears to float in space
       (seen on the hub category cards before P4 populates images). */
    --mie-placeholder:   #ececec;

    /* ── Pill palette (P2 tag colours folded in — one scheme only) ───
       Mockup pills are TINTED: pale ground, saturated ink. Each variant
       is a (ground, ink) pair so .mie-pill needs no per-variant rules. */
    --mie-pill-variation-bg:   var(--mie-green-tint);
    --mie-pill-variation-fg:   var(--mie-green);
    --mie-pill-related-bg:     var(--mie-purple-tint);
    --mie-pill-related-fg:     var(--mie-purple);
    --mie-pill-muscle-bg:      var(--mie-purple-tint);
    --mie-pill-muscle-fg:      var(--mie-purple);
    --mie-pill-equipment-bg:   #eeeeee;
    --mie-pill-equipment-fg:   #424242;
    --mie-pill-movement-bg:    #eceff1;
    --mie-pill-movement-fg:    #37474f;
    --mie-pill-region-bg:      #e0f2f1;
    --mie-pill-region-fg:      #00695c;
    --mie-pill-level-beginner-bg:     #e0f2f1;
    --mie-pill-level-beginner-fg:     #00695c;
    --mie-pill-level-intermediate-bg: #fff3e0;
    --mie-pill-level-intermediate-fg: #e65100;
    --mie-pill-level-advanced-bg:     #fdecea;
    --mie-pill-level-advanced-fg:     #b71c1c;

    /* ── Spacing scale ─────────────────────────────────────────────── */
    --mie-space-1: 0.25rem;
    --mie-space-2: 0.5rem;
    --mie-space-3: 0.75rem;
    --mie-space-4: 1rem;
    --mie-space-5: 1.5rem;
    --mie-space-6: 2rem;
    --mie-space-7: 3rem;
    --mie-space-8: 4rem;

    /* Measured parity value that does NOT sit on the 4/8/12/16/24 rhythm
       above: the /workouts/ card grid uses a 20px gutter. Kept as its own
       token rather than rounded to --mie-space-5, and rather than bent
       into the scale where it would make the rhythm a lie. */
    --mie-grid-gap: 20px;

    /* ── Radii ─────────────────────────────────────────────────────── */
    --mie-radius-sm:   4px;
    --mie-radius:      8px;
    --mie-radius-lg:   12px;
    --mie-radius-btn:  10px;   /* measured off /workouts/ .mi-hero-btn-primary */
    /* CARD-SCOPED, deliberately not --mie-radius: that token is used
       site-wide (video frames, panels, media wells), and moving it to 16
       would drag all of them along. Measured off .mi-guide-card. */
    --mie-radius-card: 16px;
    --mie-radius-pill: 999px;

    /* ── Shadows ───────────────────────────────────────────────────── */
    --mie-shadow-pop:  0 8px 24px rgba(0, 0, 0, 0.12);   /* floating filter panel */
    --mie-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);    /* .mi-guide-card on /workouts/ */

    /* ── Type scale ────────────────────────────────────────────────── */
    --mie-text-2xs: 0.625rem;   /* 10px — /workouts/ card badge + meta label */
    --mie-text-xs:  0.72rem;
    --mie-text-sm:  0.85rem;
    --mie-text-md:  0.95rem;
    --mie-text-lg:  1.15rem;
    --mie-text-xl:  1.5rem;
    --mie-text-2xl: 2.25rem;
    --mie-text-3xl: 3rem;

    --mie-measure: 34rem;   /* hero copy line length */
    --mie-shell:   1140px;  /* content shell width */
}

/* ── Theme defence: zero inherited margins on OUR OWN controls ──────
   The Macros Inc theme styles bare element selectors:

       .button, button, fieldset, input, select, textarea
           { margin-bottom: 1em; }

   Every control below lays itself out with a flex or grid `gap`, so any
   margin arriving from outside is wrong by definition. Left alone it
   pushed .mie-filter__clear 8px above the centre line of the facet
   pills it sits beside, inflated the video toggle's pill container by
   13px, and put a phantom gap under the search field.

   SCOPED TO NAMED CLASSES, not `.mie-archive button`, deliberately: the
   mi-staff coach modal renders inside these containers and is another
   plugin's markup — a blanket element reset here would silently restyle
   it. Anything new that is a <button>, <input>, <select>, <textarea> or
   <fieldset> needs adding to this list, and will look 1em out of place
   until it is. */
.mie-btn,
.mie-filter__clear,
.mie-filter__input,
.mie-filter__group,
.mie-filter__option input,
.mie-video__tab {
    margin: 0;
}

/* ── THE HOVER PAIR ─────────────────────────────────────────────────
   One rule per ground, and everything else in the plugin is an
   exception to one of them rather than a rule of its own.

   PLACED HERE, ABOVE EVERY COMPONENT, ON PURPOSE. These two are the
   least specific hover rules in the plugin, so a component that needs
   to change something other than colour — a border, a card ground, a
   button fill — beats them either on specificity or, at a tie, on
   source order. Moving this block below the components would invert
   that and silently repaint them.

   :not(.mie-btn) rather than a later override: a button's hover changes
   its FILL, and its label colour has to stay put (gold fill + white
   text is unreadable). Excluding buttons from the colour rule entirely
   is honest about that; letting them inherit it and then fighting it
   back would need a specificity bump on every button rule.

   Bare `a` and not our own classes, deliberately: the theme styles
   `a:hover` on element selectors, so anything rendered INSIDE our pages
   that we do not class — a link an editor writes into a muscle-group
   description, rendered through .mie-prose — otherwise keeps the
   theme's fading purple. This is the net that catches those. */
.mie-single a:hover:not(.mie-btn),
.mie-archive a:hover:not(.mie-btn) {
    color: var(--mie-hover-on-light);
}

/* The dark bands sit INSIDE .mie-single/.mie-archive, so this must come
   second: identical specificity, and source order is what makes the ink
   rule win on the hero and the CTA band. */
.mie-hero a:hover:not(.mie-btn),
.mie-cta-band a:hover:not(.mie-btn) {
    color: var(--mie-hover-on-dark);
}

/* Visually hidden but present for assistive tech — used by the collapsed
   filter facets, where the <legend> carries the grouping semantics while
   the <summary> is what a sighted user reads. */
.mie-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Page shell ────────────────────────────────────────────────────── */

.mie-single,
.mie-archive {
    background: var(--mie-body);
    color: var(--mie-text);
}

.mie-shell {
    max-width: var(--mie-shell);
    margin: 0 auto;
    padding-left: var(--mie-space-4);
    padding-right: var(--mie-space-4);
}

/* ── Eyebrow — "— LABEL", gold on ink, purple on light ─────────────── */

.mie-eyebrow {
    display: block;
    margin: 0 0 var(--mie-space-2);
    font-size: var(--mie-text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;   /* ≈2px at 11px — /workouts/ .mi-section-tag */
    text-transform: uppercase;
    color: var(--mie-purple);
}

.mie-eyebrow::before {
    content: "— ";
}

.mie-eyebrow a {
    color: inherit;
    text-decoration: none;
}

.mie-hero .mie-eyebrow {
    color: var(--mie-gold);
}

/* ── Hero — full-bleed dark band ───────────────────────────────────── */

.mie-hero {
    background: var(--mie-ink);
    color: var(--mie-text-on-ink);
    padding: var(--mie-space-6) 0 var(--mie-space-7);
}

.mie-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--mie-space-6);
    align-items: start;
}

/* No media at all — the copy takes the whole width. Without this the
   second track is still reserved and an imageless hero renders a ~45%
   void to the right of the copy. Applies to any hero: a category with no
   diagram and a single with no poster hit the same case. */
.mie-hero__grid:not(:has(.mie-hero__media)) {
    grid-template-columns: minmax(0, 1fr);
}

.mie-hero__title {
    margin: 0 0 var(--mie-space-4);
    /* 36px/800, measured off the /workouts/ H1 — was 3rem/700. The
       heavier weight at a smaller size is what makes the two heroes read
       as the same family. */
    font-size: var(--mie-text-2xl);
    font-weight: 800;
    line-height: 1.12;
    color: var(--mie-text-on-ink);
}

/* The gold-highlighted portion of the H1. */
.mie-hero__title em {
    font-style: normal;
    color: var(--mie-gold);
}

.mie-hero__desc {
    margin: 0 0 var(--mie-space-5);
    max-width: var(--mie-measure);
    font-size: var(--mie-text-md);
    line-height: 1.6;
    color: var(--mie-text-on-ink-muted);
}

/* The hero image well is aspect-CONSTRAINED rather than free-flowing:
   an unconstrained portrait asset (a muscle diagram, say) otherwise
   dictates the height of the whole hero band and strands the copy
   beside a tall column of whitespace. */
/* NO FALLBACK BACKGROUND, deliberately. This well used to carry
   --mie-placeholder, which was a light tint chosen back when every image
   here was an opaque landscape poster that covered it completely. It is
   wrong in both states now: against the dark hero band it draws a white
   box behind a transparent diagram, and with no image it leaves an empty
   grey rectangle. The ink band on its own is better than either, and
   every caller already renders nothing at all when it has no image.

   The theory it was kept on — that grey linework would vanish against
   the ink — does not survive contact with the rendered page. Do not
   reintroduce it. */
.mie-hero__media {
    margin: 0;
    border-radius: var(--mie-radius);
    overflow: hidden;
    aspect-ratio: 16 / 10;   /* the SINGLE page's landscape poster frame */
}

.mie-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Category hero diagram — ON TRIAL ───────────────────────────────
   The well above is 16/10 + object-fit: cover. That is right for the
   SINGLE page's landscape poster frame, and wrong for a portrait
   anatomical illustration — cropping one into a wide well is exactly
   the render that got the category hero reverted during the P7 pass.

   So the diagram gets its OWN well rather than reusing that crop: a
   narrower right-hand column at a portrait aspect, with `contain` so
   no diagram is ever cropped whatever ratio Liam's files turn out to
   be. Sizing is deterministic (a capped 16rem track, not a fraction),
   so the band cannot be dictated by the asset the way it was before.

   The inherited light well background is KEPT deliberately: a diagram
   drawn in dark linework on a transparent background would otherwise
   disappear against the ink band.

   Scoped entirely to the modifier and :has(), so deleting the render
   call in archive-exercise.php leaves this inert. Browsers without
   :has() keep the wider column — letterboxed, never broken. */
/* 55/45 with the figure CENTRED in its own zone.
   Previously this was `1fr auto` with the figure justified to the end,
   which sized the second track to the figure itself (139px) and pinned
   it to the right edge. The copy column then took the other ~969px while
   its text is capped at --mie-measure (544px), so the band carried a
   measured 457px void between the end of the copy and the figure, and
   the figure read as jammed against the outer edge rather than placed.

   align-items is centre here and NOWHERE ELSE: the copy block and the
   figure are different heights (202px against 304px on Legs), and
   top-aligning them left the whole right side hanging 102px lower than
   the left. Scoped to the diagram case so the single exercise page's
   poster hero keeps its top alignment. */
.mie-hero__grid:has(.mie-hero__media--diagram) {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: center;
}

/* No well — the figure IS the element. Height is the only constraint;
   width follows from the asset, so a future delivery at a different
   crop cannot letterbox itself against a ratio hardcoded here. */
.mie-hero__media--diagram {
    box-sizing: border-box;   /* declared, not inherited from the theme reset */
    aspect-ratio: auto;
    width: auto;
    padding: 0;
    justify-self: center;
}

.mie-hero__media--diagram img {
    width: auto;
    height: auto;
    max-height: 19rem;   /* keeps a tall portrait from dictating the band */
    max-width: 100%;
}

/* Hero CTA row — category archives only. Mirrors the primary+ghost pair
   that closes the /workouts/ hero. Wraps rather than overflowing, because
   the copy column narrows well before these two buttons stop fitting. */
.mie-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mie-space-3);
    margin: var(--mie-space-5) 0 0;
}

/* The divider above the hub hero's buttons (Liam, round 2 · 2.1).

   On /workouts/ that hairline is not a divider element at all — it is
   `border-top` on `.mi-hero-stats`, which sits between the copy and the
   buttons (measured: `margin-top:28px; padding-top:24px; border-top:1px
   solid rgba(255,255,255,.1)`). Removing the stat blocks removes the rule
   with them, so it moves onto the button row and the three values come
   with it, unrounded — a 1px hairline is exactly where a 4px token
   rounding shows.

   Category heroes keep their attribute strip, so they keep the divider
   they already have and do NOT take this modifier. */
.mie-hero__actions--divided {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Inline hero pills sit on ink, so they invert rather than tint. */
.mie-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mie-space-2);
    margin: 0 0 var(--mie-space-5);
}

.mie-hero__pills .mie-pill {
    background: #3a3a3a;
    color: var(--mie-text-on-ink);
}

.mie-hero__pills .mie-pill--accent {
    background: var(--mie-gold);
    color: var(--mie-ink);
}

/* ── Breadcrumb ────────────────────────────────────────────────────── */

.mie-breadcrumb {
    margin: 0 0 var(--mie-space-5);
    font-size: var(--mie-text-sm);
    color: var(--mie-text-on-ink-muted);
}

.mie-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mie-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mie-breadcrumb li + li::before {
    content: "/";
    margin-right: var(--mie-space-2);
    opacity: 0.5;
}

.mie-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.mie-breadcrumb a:hover {
    text-decoration: underline;
}

.mie-breadcrumb [aria-current="page"] {
    color: var(--mie-gold);
    font-weight: 600;
}

/* ── Attribute strip — gold-topped cards on the ink band ───────────── */

.mie-attribute-strip {
    display: grid;
    /* The minimum must be a real length: minmax(0, 1fr) gives auto-fit no
       basis to compute a track count from, so it generates as many tracks
       as it can and collapses the surplus to zero width (89 tracks for a
       4-card strip). A concrete minimum makes the wrap honest. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--mie-space-3);
    margin: var(--mie-space-6) 0 0;
    padding: 0;
    list-style: none;
}

.mie-attribute-card {
    background: var(--mie-ink-raised);
    border-top: 3px solid var(--mie-gold);
    border-radius: var(--mie-radius-sm);
    padding: var(--mie-space-3) var(--mie-space-4);
    text-align: center;
}

.mie-attribute-card__label {
    display: block;
    margin-bottom: var(--mie-space-1);
    font-size: var(--mie-text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mie-text-on-ink-muted);
}

.mie-attribute-card__value {
    display: block;
    font-size: var(--mie-text-lg);
    font-weight: 700;
    color: var(--mie-gold);
}

.mie-attribute-card__value a {
    color: inherit;
    text-decoration: none;
}

.mie-attribute-card__value a:hover {
    text-decoration: underline;
}

/* ── Card — white rounded content surface ──────────────────────────── */

.mie-card {
    background: var(--mie-surface);
    border-radius: var(--mie-radius-lg);
    padding: var(--mie-space-6);
    margin: 0 0 var(--mie-space-5);
}

.mie-card__heading {
    margin: 0 0 var(--mie-space-4);
    font-size: var(--mie-text-xl);
    line-height: 1.25;
}

/* ── Pill ──────────────────────────────────────────────────────────── */

.mie-pill {
    display: inline-block;
    padding: var(--mie-space-1) var(--mie-space-3);
    border-radius: var(--mie-radius-pill);
    font-size: var(--mie-text-sm);
    font-weight: 600;
    text-decoration: none;
    background: var(--mie-pill-equipment-bg);
    color: var(--mie-pill-equipment-fg);
}

/* Only the GROUND is stated here; the ink comes from the light-ground
   rule at the top of this file, which deepens a purple-family chip's
   text as it darkens. brightness() is a darkening — a chip that got
   lighter under the pointer is the same "fading out" complaint in a
   smaller place. */
a.mie-pill:hover {
    filter: brightness(0.94);
}

.mie-pill--sm {
    font-size: var(--mie-text-xs);
    padding: 2px var(--mie-space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* The card pill: ONE ground, one size, one case, for every tag except
   the level accent. Cards used to carry up to six pills across four
   colour systems; this is the single quiet style that replaced them
   (Liam, 3.1). Deliberately the same pair as --equipment, which was
   already the neutral one — this is a policy with a name, not a new
   colour. */
.mie-pill--quiet {
    background: var(--mie-pill-equipment-bg);
    color: var(--mie-pill-equipment-fg);
}

.mie-pill--variation {
    background: var(--mie-pill-variation-bg);
    color: var(--mie-pill-variation-fg);
}

.mie-pill--related,
.mie-pill--muscle {
    background: var(--mie-pill-muscle-bg);
    color: var(--mie-pill-muscle-fg);
}

.mie-pill--equipment {
    background: var(--mie-pill-equipment-bg);
    color: var(--mie-pill-equipment-fg);
}

.mie-pill--movement {
    background: var(--mie-pill-movement-bg);
    color: var(--mie-pill-movement-fg);
}

.mie-pill--region {
    background: var(--mie-pill-region-bg);
    color: var(--mie-pill-region-fg);
}

.mie-pill--level-beginner {
    background: var(--mie-pill-level-beginner-bg);
    color: var(--mie-pill-level-beginner-fg);
}

.mie-pill--level-intermediate {
    background: var(--mie-pill-level-intermediate-bg);
    color: var(--mie-pill-level-intermediate-fg);
}

.mie-pill--level-advanced {
    background: var(--mie-pill-level-advanced-bg);
    color: var(--mie-pill-level-advanced-fg);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.mie-btn {
    display: inline-block;
    padding: var(--mie-space-3) var(--mie-space-6);
    /* 10px, measured off .mi-hero-btn-primary on /workouts/ — not the
       4px --mie-radius-sm this used to take. Applied at .mie-btn so the
       CTA band's buttons move with the hero's rather than the plugin
       carrying two button radii. */
    border-radius: var(--mie-radius-btn);
    font-weight: 700;
    font-size: var(--mie-text-md);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
}

.mie-btn--primary {
    background: var(--mie-gold);
    color: var(--mie-ink);
}

.mie-btn--ghost {
    background: transparent;
    color: var(--mie-text-on-ink);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Buttons hover as a FILL change, which is why they are excluded from
   the colour pair above.

   The gold one brightens rather than going white: white is the right
   answer for gold TEXT, but a gold button turning white reads as a
   different button rather than a hovered one. The ink label stays put
   through the change.

   BRIGHTENING IS AN INK-BAND ANSWER, and only that. It was written when
   every .mie-btn in the plugin sat on the hero or the CTA band; the hub's
   "Load more" then put a primary button on the light page body, where
   brightening the gold is the *lighter-on-light* fade Liam objected to in
   the first place. So the default deepens — right on any ground — and the
   two ink bands opt back into the brighter one, where a deepened gold
   would instead disappear into the band behind it. */
.mie-btn--primary:hover {
    background: var(--mie-hover-gold-deep);
    color: var(--mie-ink);
}

.mie-hero .mie-btn--primary:hover,
.mie-cta-band .mie-btn--primary:hover {
    background: var(--mie-hover-gold);
}

.mie-btn--ghost:hover {
    color: var(--mie-hover-on-dark);
    border-color: var(--mie-hover-on-dark);
}

/* ── CTA band ──────────────────────────────────────────────────────── */

.mie-cta-band {
    background: var(--mie-ink);
    color: var(--mie-text-on-ink);
    text-align: center;
    padding: var(--mie-space-8) var(--mie-space-4);
    margin-top: var(--mie-space-7);
}

.mie-cta-band__title {
    margin: 0 0 var(--mie-space-3);
    font-size: var(--mie-text-2xl);
    color: var(--mie-text-on-ink);
}

.mie-cta-band__desc {
    margin: 0 auto var(--mie-space-5);
    max-width: var(--mie-measure);
    color: var(--mie-text-on-ink-muted);
    line-height: 1.6;
}

.mie-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mie-space-3);
    justify-content: center;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .mie-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mie-hero__media {
        order: -1;
    }

    /* The diagram trial, stacked. The :has() rule above is a single
       class more specific than the base .mie-hero__grid, so it would
       otherwise survive into the one-column layout and keep a 16rem
       track pinned beside the copy. */
    .mie-hero__grid:has(.mie-hero__media--diagram) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Copy leads on mobile — a category page's title is the point, and
       a portrait diagram above it would push the H1 off the first
       screen. Overrides the order: -1 directly above by source order
       (identical specificity), which is why it must stay below it. */
    .mie-hero__media--diagram {
        order: 0;
        justify-self: start;
    }

    /* Capped by height here too — the figure sizes itself, so a width
       cap would be the fixed-ratio mistake in a second place. */
    .mie-hero__media--diagram img {
        max-height: 14rem;
    }

    .mie-attribute-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .mie-single,
    .mie-archive {
        --mie-text-3xl: 2rem;
        --mie-text-2xl: 1.6rem;
    }

    .mie-card {
        padding: var(--mie-space-4);
    }
}