/* ==========================================================================
   Super Junk Bros — Core styles

   Mobile-first. Every brand value lives in :root so a rebrand means editing
   tokens, not rules. Load order: styles.css then responsive.css.

   Contents
     1. Font
     2. Design tokens
     3. Reset & base
     4. Layout
     5. Site header (wordmark)
     6. Hero typography
     7. Buttons / CTA group
     8. Page-load motion
     9. Interior page shell
    10. Content page
    11. Request chooser
    12. Service-area map page
    13. Reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font — self-hosted, single variable file (~35 KB, latin subset).
      No external requests, so there is no third-party dependency and no
      render-blocking round trip.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Archivo";
    src: url("../public/fonts/archivo-latin-var.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* --- Brand -----------------------------------------------------------
       Taken from the logo badge (public/images/branding/logo.png): deep
       navy ink and the badge's orange-red. Hover and active go DARKER, not
       lighter, so the white label's contrast climbs rather than falls. */
    --color-primary:        oklch(0.560 0.170 40);   /* 5.0:1 vs white label */
    --color-primary-hover:  oklch(0.500 0.170 40);   /* 6.5:1 */
    --color-primary-active: oklch(0.450 0.160 40);   /* 8.1:1 */
    --color-accent:         oklch(0.560 0.170 40);
    --color-primary-tint:   oklch(0.930 0.055 60);   /* 14.6:1 vs ink */

    /* --- Request button (blue) -------------------------------------------
       Measured against a white label: 7.0:1 at rest, climbing to 8.6:1 on
       hover, so the fill darkens rather than lightens under the pointer. */
    --color-email:          oklch(0.470 0.150 258);  /* 7.0:1 vs white */
    --color-email-hover:    oklch(0.420 0.150 258);  /* 8.6:1 */
    --color-email-active:   oklch(0.380 0.140 258);  /* 10.1:1 */

    /* --- Surfaces & text (ink tinted toward the badge navy) -------------- */
    --color-bg:             oklch(1 0 0);
    --color-surface:        oklch(0.972 0.003 272);
    --color-ink:            oklch(0.22 0.045 272);   /* 17.4:1 on bg */
    --color-ink-muted:      oklch(0.44 0.020 272);   /*  7.8:1 on bg */
    --color-on-primary:     oklch(1 0 0);            /*  5.0:1 on primary */
    --color-border:         oklch(0.885 0.006 272);
    --color-border-strong:  oklch(0.22 0.045 272);

    /* --- Type ------------------------------------------------------------ */
    --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-wordmark: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
    --fs-body:     clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --fs-meta:     clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --fs-display:  clamp(2.5rem, 1.55rem + 4.6vw, 4.5rem);

    --lh-display: 1.02;
    --lh-body:    1.55;
    --tracking-display: -0.03em;
    --tracking-label:    0.16em;

    /* --- Space scale ----------------------------------------------------- */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;

    /* --- Layout ---------------------------------------------------------- */
    --content-max: 64rem;
    --measure-max: 34rem;                          /* ~62ch of body copy */
    --gutter: clamp(1.25rem, 5vw, 3rem);

    /* --- Shape & depth --------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --shadow-primary:       0 6px 18px -8px oklch(0.45 0.14 40 / 0.45);
    --shadow-primary-hover: 0 12px 26px -10px oklch(0.45 0.14 40 / 0.52);
    --shadow-quiet:         0 1px 2px oklch(0.22 0.045 272 / 0.10);

    /* --- Controls -------------------------------------------------------- */
    --btn-min-height: 3.25rem;                     /* 52px touch target */
    --btn-padding-x:  clamp(1.375rem, 4vw, 2rem);
    --btn-font-size:  1.0625rem;

    /* --- Motion ---------------------------------------------------------- */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-pop:       cubic-bezier(0.34, 1.8, 0.5, 1);   /* overshoots, for press feedback */
    --dur-fast:   140ms;
    --dur-medium: 240ms;
    --dur-enter:  700ms;

    /* --- Elevation scale (semantic, no magic numbers) -------------------- */
    --z-base:   0;
    --z-header: 10;
    --z-skip:   100;
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    /* Header pinned to the top, main claiming the rest, so hero content
       centres in the remaining space without the page scrolling. */
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--color-ink);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

svg { display: block; flex: none; }

/* One focus treatment everywhere. Ink rather than amber: amber on white is
   only 1.7:1, well short of the 3:1 a focus indicator needs. */
:focus-visible {
    outline: 3px solid var(--color-ink);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: var(--z-skip);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--color-ink);
    color: var(--color-bg);
    font-size: var(--fs-meta);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-180%);
    transition: transform var(--dur-fast) var(--ease-out-quint);
}
.skip-link:focus-visible {
    transform: translateY(0);
    outline-color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-2xl);
}

.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --------------------------------------------------------------------------
   5. Site header — camera mark plus text wordmark. When the logo lands, swap the
      span for <img src="public/images/branding/logo.svg" ...> at the same
      spot; the layout does not change.
   -------------------------------------------------------------------------- */
.site-header {
    position: relative;
    z-index: var(--z-header);
    padding-block: clamp(1.125rem, 3vw, 1.75rem);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 0.6em;
    justify-content: flex-start;   /* leaves room for nav on the right later */
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: var(--fs-wordmark);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* Short amber rule: the one decorative use of the brand colour up here. */
/* The camera stands where the brand rule stood: same spot, same primary, now
   a destination. The box is a 44px target; the glyph inside stays small so the
   header reads as type with one mark, not as a toolbar. The negative inline
   start margin puts the glyph itself, not its padding, on the container edge. */
.content-mark {
    --mark-box: 2.75rem;                        /* 44px: the touch target */
    --mark-glyph: clamp(1.25rem, 3.5vw, 1.5rem);
    --mark-inset: calc((var(--mark-box) - var(--mark-glyph)) / 2);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--mark-box);
    height: var(--mark-box);
    /* Pull the target's padding off the container edge so the glyph itself
       lines up with it, at every step of the clamp rather than just one. */
    margin-inline-start: calc(var(--mark-inset) * -1);
    margin-block: calc(var(--mark-inset) * -1);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    -webkit-tap-highlight-color: transparent;
    transition:
        color            var(--dur-fast) var(--ease-out-quint),
        background-color var(--dur-fast) var(--ease-out-quint),
        transform        var(--dur-fast) var(--ease-out-quint);
}

.content-mark svg {
    display: block;
    width: var(--mark-glyph);
    height: auto;
}

@media (hover: hover) and (pointer: fine) {
    .content-mark:hover {
        background-color: var(--color-primary-tint);
        color: var(--color-primary-hover);
    }
}

/* Presses in, unlike the call button that pops out: this is navigation, not
   the loud action. */
.content-mark:active {
    background-color: var(--color-primary-tint);
    color: var(--color-primary-active);
    transform: scale(0.94);
}

/* --------------------------------------------------------------------------
   6. Hero logo + typography
   -------------------------------------------------------------------------- */
/* The badge is the brand's centrepiece, so it leads the composition.
   width/height attributes on the <img> reserve the space, so nothing
   shifts as it decodes. */
.hero__logo {
    /* Sized by HEIGHT, because vertical space is what runs out first: this
       keeps the whole composition above the fold on short viewports.
       Aspect ratio comes from the width/height attributes on the <img>. */
    height: clamp(8.05rem, 27.6vh, 17.25rem);
    width: auto;
    max-width: min(19.55rem, 80.5vw);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.hero__title {
    max-width: 18ch;
    margin-bottom: var(--space-md);
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
}

.hero__subtitle {
    max-width: var(--measure-max);
    margin-bottom: clamp(2rem, 5vw, 3rem);
    color: var(--color-ink-muted);
    text-wrap: pretty;
}

.page__tel {
    display: inline-block;
    padding: var(--space-2xs) 0;
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 var(--color-primary);
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--dur-fast) var(--ease-out-quint);
}
@media (hover: hover) and (pointer: fine) {
    .page__tel:hover { box-shadow: inset 0 -0.7em 0 var(--color-primary-tint); }
}

/* --------------------------------------------------------------------------
   7. Buttons / CTA group
   -------------------------------------------------------------------------- */
.cta-group {
    display: flex;
    flex-direction: column;        /* mobile-first: stacked */
    gap: var(--space-md);          /* 16px keeps stacked thumb targets apart */
    width: 100%;
    max-width: 24rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: var(--btn-min-height);
    padding: var(--space-sm) var(--btn-padding-x);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--btn-font-size);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--dur-fast) var(--ease-out-quint),
        border-color     var(--dur-fast) var(--ease-out-quint),
        color            var(--dur-fast) var(--ease-out-quint),
        box-shadow       var(--dur-medium) var(--ease-out-quint),
        transform        var(--dur-fast) var(--ease-out-quint);
}

.btn--primary {
    /* The fill is 5:1 against the page, so it carries its own boundary
       (WCAG 1.4.11) without needing a separate edge colour. */
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-primary);
}

.btn--secondary {
    background-color: var(--color-bg);
    border-color: var(--color-border-strong);
    color: var(--color-ink);
    box-shadow: var(--shadow-quiet);
}

/* Hover is gated so touch devices never keep a stuck hover state. */
@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover {
        background-color: var(--color-primary-hover);
        box-shadow: var(--shadow-primary-hover);
        transform: translateY(-2px);
    }
    .btn--secondary:hover {
        background-color: var(--color-ink);
        color: var(--color-bg);
        transform: translateY(-2px);
    }
}

/* Pressed: settles down and loses lift — tactile on mouse and on touch. */
.btn:active { transform: translateY(1px); }
.btn--primary:active {
    background-color: var(--color-primary-active);
    box-shadow: var(--shadow-quiet);
}
.btn--secondary:active {
    background-color: var(--color-surface);
    color: var(--color-ink);
}

/* Pop: this one button grows under the finger instead of settling in, so the
   call action reads as the louder of the two. Overshoot on the way out,
   plain ease on the way back, which is what makes it feel sprung. */
.btn--pop {
    transition:
        background-color var(--dur-fast) var(--ease-out-quint),
        border-color     var(--dur-fast) var(--ease-out-quint),
        color            var(--dur-fast) var(--ease-out-quint),
        box-shadow       var(--dur-medium) var(--ease-out-quint),
        transform        var(--dur-medium) var(--ease-out-quint);
}
.btn--pop:active {
    transform: scale(1.07);
    box-shadow: 0 10px 24px -10px oklch(0.22 0.045 272 / 0.38);
    transition-duration: var(--dur-fast);
    transition-timing-function: var(--ease-pop);
}

/* --------------------------------------------------------------------------
   8. Page-load motion — one orchestrated entrance, CSS only.
      Applied to the group rather than each child, and with no
      fill-mode: backwards, so content is never hidden waiting on a class,
      a script, or a paused animation.
   -------------------------------------------------------------------------- */
@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.hero__inner { animation: rise-in var(--dur-enter) var(--ease-out-quint); }
.site-header__inner {
    animation: rise-in var(--dur-enter) var(--ease-out-quint);
}

/* --------------------------------------------------------------------------
   9. Interior page shell (services / about / contact / schedule)
   -------------------------------------------------------------------------- */
.page {
    display: flex;
    align-items: center;
    padding-block: var(--space-2xl);
}

.page__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    animation: rise-in var(--dur-enter) var(--ease-out-quint);
}

.page__title {
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
}

.page__text {
    max-width: var(--measure-max);
    color: var(--color-ink-muted);
    text-wrap: pretty;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 2.75rem;                 /* keeps the tap target comfortable */
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--color-primary);
    transition: box-shadow var(--dur-fast) var(--ease-out-quint);
}
@media (hover: hover) and (pointer: fine) {
    .back-link:hover { box-shadow: inset 0 -0.7em 0 var(--color-primary-tint); }
}

/* --------------------------------------------------------------------------
   10. Content page — a job photo carries the page. Everything above it is
       reversed out, so the scrim is doing real work: it is what buys the
       type its contrast, not decoration.
   -------------------------------------------------------------------------- */
.content-page {
    color: var(--color-bg);
    background-color: oklch(0.17 0.035 265);   /* seen before the photo paints */
}

/* A fixed layer rather than background-attachment: fixed, which iOS ignores
   and which forces a repaint on every scroll frame where it does work. */
.content-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(
            oklch(0.17 0.035 265 / 0.82),
            oklch(0.14 0.030 265 / 0.92)
        ),
        url("../public/images/content/junk-pile.webp");
    background-size: cover;
    background-position: center;
}

/* The header was drawn for ink on white; on the photo it reverses. */
.content-page .wordmark { color: var(--color-bg); }

.content {
    display: flex;
    padding-block: var(--space-xl) var(--space-3xl);
}

.content__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    animation: rise-in var(--dur-enter) var(--ease-out-quint);
}

.content__title {
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
}

.content__lede {
    max-width: var(--measure-max);
    margin-top: calc(var(--space-lg) * -1 + var(--space-2xs));
    color: oklch(1 0 0 / 0.82);
    text-wrap: pretty;
}

.strip {
    width: 100%;
    margin-top: var(--space-md);
}

.strip__title {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid oklch(1 0 0 / 0.18);
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.015em;
}

.strip__note {
    margin-top: var(--space-sm);
    color: oklch(1 0 0 / 0.7);
    font-size: var(--fs-meta);
}

/* Waiting-for-content slot. Dashed, because a solid panel would read as a
   finished component rather than as a space something is going to fill. */
.slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 2px dashed oklch(1 0 0 / 0.28);
    border-radius: var(--radius-md);
    background-color: oklch(0.14 0.030 265 / 0.55);
    text-align: center;
}

.slot__text {
    max-width: 32ch;
    color: oklch(1 0 0 / 0.82);
    font-size: var(--fs-meta);
    font-weight: 500;
    text-wrap: pretty;
}

/* Video is a wide format, so its slot is one wide frame, not a tile. */
.slot--video {
    /* Capped rather than full-bleed: a 16:9 frame across a desktop column is
       most of a screen of dashed nothing. */
    width: min(100%, 44rem);
    aspect-ratio: 16 / 9;
}

.slot--video svg {
    width: clamp(2.5rem, 7vw, 3.5rem);
    height: auto;
    color: var(--color-primary-tint);
}

/* Photos are many and squarish, so the gallery is a grid that reflows without
   a breakpoint. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-md);
    padding: 0;                   /* drop the UA list indent, or the grid sits right of its heading */
    list-style: none;
}

.tiles__tile {
    aspect-ratio: 4 / 3;
}

.tiles__tile .slot__text {
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.back-link--light {
    margin-top: var(--space-md);
    color: var(--color-bg);
}

@media (hover: hover) and (pointer: fine) {
    .back-link--light:hover {
        box-shadow: inset 0 -0.7em 0 oklch(1 0 0 / 0.22);
    }
}

/* --------------------------------------------------------------------------
   11. Send-your-request chooser — the dialog on the landing page and the
       same list rendered inline on the schedule page.
   -------------------------------------------------------------------------- */
.chooser {
    width: min(28rem, calc(100vw - 2 * var(--space-md)));
    padding: var(--space-xl);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-ink);
    box-shadow: 0 24px 60px -20px oklch(0.22 0.045 272 / 0.55);
}

.chooser::backdrop {
    background-color: oklch(0.22 0.045 272 / 0.55);
}

.chooser[open] {
    animation: chooser-in var(--dur-medium) var(--ease-out-quint);
}

@keyframes chooser-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.chooser__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.chooser__lede {
    margin-top: var(--space-xs);
    color: var(--color-ink-muted);
    font-size: var(--fs-meta);
    text-wrap: pretty;
}

.methods {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-lg);
    padding: 0;                   /* drop the UA list indent, or centring is off by it */
    list-style: none;
}

/* One destination, so this is a button rather than a row in a list: sized
   to its own content and centred, instead of stretching the panel's width. */
.method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    max-width: 100%;
    min-height: var(--btn-min-height);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    background-color: var(--color-email);
    color: var(--color-on-primary);
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease-out-quint);
}

.method__label {
    font-size: 1.0625rem;
    font-weight: 700;
}

/* Stepped back from the label without dropping below the contrast floor:
   white at 0.85 alpha over the blue measures 5.5:1. */
.method__hint {
    color: oklch(1 0 0 / 0.85);
    font-size: var(--fs-meta);
}

@media (hover: hover) and (pointer: fine) {
    .method:hover {
        background-color: var(--color-email-hover);
    }
}

.method:active {
    background-color: var(--color-email-active);
}

.chooser__close {
    margin-top: var(--space-lg);
    padding: var(--space-xs) 0;
    border: none;
    background: none;
    color: var(--color-ink-muted);
    font-family: inherit;
    font-size: var(--fs-meta);
    font-weight: 700;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out-quint);
}

@media (hover: hover) and (pointer: fine) {
    .chooser__close:hover { color: var(--color-ink); }
}

.methods-slot { width: 100%; max-width: 28rem; }

/* No-script fallback: the message shown for copying. */
.message {
    max-width: var(--measure-max);
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: inherit;
    font-size: var(--fs-meta);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   12. Service-area map page — the artwork is the page. Everything else is a
       way out of it: one back control and one line of terms.
   -------------------------------------------------------------------------- */
.map-page {
    /* Matches the navy in the artwork's own header band, so the letterboxing
       on off-ratio screens reads as framing rather than as dead space. */
    background-color: oklch(0.22 0.045 265);
}

.map {
    position: relative;
    display: flex;
    flex-direction: column;
    /* A definite height, not a minimum: the image only knows to letterbox
       itself if the box it sits in has a height to fit into. With min-height
       the column grows to the artwork's intrinsic size and the page scrolls. */
    height: 100vh;
    height: 100dvh;                 /* mobile chrome does not eat the note */
    overflow: hidden;
}

.map__figure {
    display: flex;
    flex: 1 1 0;
    min-height: 0;                  /* lets the image shrink inside the column */
    padding: var(--space-sm);
}

.map__figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;            /* the whole map, never a cropped one */
}

/* Floats over the artwork rather than sitting in a bar above it, so the map
   keeps the full frame. Solid fill because the corner underneath it is
   photographic and cannot be relied on for contrast. */
.map__back {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: var(--z-header);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.75rem;
    padding-inline: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-ink);
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 6px 20px -8px oklch(0.15 0.03 265 / 0.65);
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--dur-fast) var(--ease-out-quint),
        color            var(--dur-fast) var(--ease-out-quint),
        transform        var(--dur-fast) var(--ease-out-quint);
}

.map__back svg {
    width: 1.125em;
    height: 1.125em;
    /* The arrow leads the word, so it moves first on interaction. */
    transition: transform var(--dur-fast) var(--ease-out-quint);
}

@media (hover: hover) and (pointer: fine) {
    .map__back:hover {
        background-color: var(--color-primary);
        color: var(--color-on-primary);
    }
    .map__back:hover svg { transform: translateX(-2px); }
}

.map__back:active {
    background-color: var(--color-primary-active);
    color: var(--color-on-primary);
    transform: scale(0.98);
}

.map__back:focus-visible {
    outline-color: var(--color-bg);
}

.map__note {
    padding: var(--space-md) var(--gutter);
    color: oklch(1 0 0 / 0.92);     /* 15.6:1 on the navy behind it */
    font-size: var(--fs-meta);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-wrap: pretty;
}

.map__note-link {
    color: var(--color-bg);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 var(--color-primary);
    transition: box-shadow var(--dur-fast) var(--ease-out-quint);
}

@media (hover: hover) and (pointer: fine) {
    .map__note-link:hover { box-shadow: inset 0 -1.5em 0 var(--color-primary); }
}

/* --------------------------------------------------------------------------
   13. Reduced motion — accessibility outranks animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Colour feedback stays; movement goes. */
    .btn:hover,
    .btn:active,
    .btn--pop:active,
    .content-mark:active,
    .map__back:active,
    .map__back:hover svg { transform: none; }
}