/* ================================================================= *
 |  ALTERNATE UNITED STATES  —  /alternate-united-states  (Phase 2, 2026-07-26)
 |
 |  Scoped under `body.au-skin`, which feature/alternate-united-states.blade.php
 |  sets ALONGSIDE `md-skin`: this page wears the Massive Dynamic skin
 |  (massive-dynamic.css) for its section heading, prose, bulleted list, image
 |  modal and hero, so it is the same furniture as /episode, /characters and
 |  /differences. This file only adds what THIS page has and they don't.
 |
 |  It is the one difference page that does not use the shared image rail: ten
 |  facts, one picture that illustrates all of them. So the layout pairs the map
 |  with its key instead of pairing each fact with its own thumbnail — the map is
 |  sticky beside the list from lg up, so a bullet is never read with the thing it
 |  describes off screen. The reasoning is in the view.
 |
 |  Loaded after massive-dynamic.css. ?design=current gets neither.
 * ================================================================= */


/* ================================================================= *
 |  HERO  —  the screen grab of the map in situ, not a promo still
 * ================================================================= */

/* Hero crop: set in the admin "Hero focus" tool, emitted inline by the view.
   Default + reasoning live in App\Support\HeroTargets — a rule here would be
   overridden by that inline style and silently disagree with it. */

/* A DEEPER SCRIM THAN THE SHARED HERO'S — because this backdrop is the only one
   with a bright window where the others have a dark still, and the office window
   sits directly behind the kicker. Measured by compositing the real crop with the
   real gradient and computing WCAG contrast per text run (the method the massive
   hero was checked with): under the shared scrim this page's kicker was the site's
   WORST at 1.67:1 (/differences/redverse, same component and accent, measures
   2.24) — the accent-lit pink cannot reach AA over a lit photo at that alpha, and
   neither can white (3.57 max). These stops take the kicker to 4.74, the title
   5.39 -> 12.59 and the byline 10.16 -> 14.88.
   Two things that had to be checked, not assumed: the last stop stays at 0 (an .08
   would put a visible step at the body's top edge — the ramp is 0.239 -> 0.236 ->
   0.223 across it, smooth), and the wall map plus both faces sit ABOVE the body
   box, so the extra alpha costs the picture almost nothing (map region mean
   luminance 0.112 -> 0.111). Rendered and eyeballed as well as measured. */
.au-skin .au-hero .md-hero__body {
    background: linear-gradient(0deg,
        rgba(var(--md-scrim), .96) 0%,
        rgba(var(--md-scrim), .92) 30%,
        rgba(var(--md-scrim), .84) 62%,
        rgba(var(--md-scrim), .55) 86%,
        rgba(var(--md-scrim), 0) 100%);
}

/* A shade under the episode clamp, as on the other feature heroes: the title is
   three short words and the byline under it is a sentence, not a credit line. */
.au-skin .au-hero .md-hero__title { font-size: clamp(2rem, 3.8vw, 3rem) }

/* The byline is real prose, so it needs a measure — un-capped it runs the full
   1320px container and reads as a banner subtitle rather than a paragraph. */
.au-skin .au-hero .md-hero__byline { max-width: 62ch }

/* the hero stats line is the shared `.fr-hero-stats` in massive-dynamic.css
   (promoted 2026-07-26, when /scavenger-hunt would have been the fifth copy) */
@media (max-width: 575.98px) {
    }

/* The shared red banner draws its own box, so per the section-geometry rule it
   takes the 1.5rem inset as margin (the .px-4 wrapper) and keeps its padding. */
.au-skin .au-spoiler-note { margin-top: 1.5rem }
.au-skin .au-spoiler-note .alert { margin-bottom: 0 }

.au-skin .au-section { padding-bottom: 2.25rem }


/* ================================================================= *
 |  THE SPLIT  —  map beside its key
 |
 |  Single column below lg (map, then key). From lg the map takes the larger
 |  column and STICKS: ten bullets is ~450px of text, and stacked or scrolled the
 |  reader is reading "Michigan's Upper Peninsula is not a part of the country"
 |  with the map already gone. Same `position: sticky` idiom as the jump bars.
 * ================================================================= */
.au-skin .au-split {
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 992px) {
    .au-skin .au-split {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        column-gap: 2.5rem;
        align-items: start;
    }
}

/* The height gate is not optional: a sticky element TALLER than the viewport
   parks its own top and then hides its own bottom, so the citation under the map
   would become unreachable on a short window. Below this height the column just
   scrolls normally, which is the correct fallback. */
@media (min-width: 992px) and (min-height: 660px) {
    .au-skin .au-split__map {
        position: sticky;
        /* clear the fixed navbar; the var is set by episode-jumpbar.js on pages
           that have a jump bar, and declared at :root in massive-dynamic.css
           (57px) for pages like this one that don't. */
        top: calc(var(--md-nav-h, 57px) + 1rem);
    }
}


/* ================================================================= *
 |  THE MAP
 * ================================================================= */
.au-skin .au-map { margin: 0 }

/* The resting drop shadow is the `.fr-rail__thumb` treatment: this image opens
   the lightbox, and at rest a hairline alone doesn't say so (lightbox.css gives
   it `cursor: zoom-in`, but that is only discoverable once the pointer is
   already on it). Hover/focus escalates so it still clearly outranks rest. */
.au-skin .au-map__img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--md-line);
    border-radius: 4px;
    background: #8f8f8f;    /* the map's own grid ground, so it doesn't flash white */
    box-shadow: 0 1px 2px rgba(42, 53, 64, .12), 0 3px 8px rgba(42, 53, 64, .16);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.au-skin .au-map__img:hover,
.au-skin .au-map__img:focus-visible {
    border-color: var(--md-accent);
    box-shadow: 0 2px 4px rgba(42, 53, 64, .16), 0 8px 20px rgba(42, 53, 64, .28);
    outline: none;
}

.au-skin .au-map__hint {
    margin: .5rem 0 0;
    font-family: var(--md-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1.4;
    color: var(--md-muted);
}
.au-skin .au-map__hint i { color: var(--md-accent); margin-right: .4rem }


/* ================================================================= *
 |  THE CITATION  —  where the map appears on screen
 |  A footnote to the map, not a peer of it: small thumb, one line of meta.
 * ================================================================= */
.au-skin .au-cite {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--md-line);
}

.au-skin .au-cite__thumb {
    flex: 0 0 auto;
    width: 132px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--md-line);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(42, 53, 64, .12), 0 3px 8px rgba(42, 53, 64, .16);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.au-skin .au-cite__thumb:hover,
.au-skin .au-cite__thumb:focus-visible {
    border-color: var(--md-accent);
    box-shadow: 0 2px 4px rgba(42, 53, 64, .16), 0 8px 20px rgba(42, 53, 64, .28);
    outline: none;
}

.au-skin .au-cite__label {
    display: block;
    font-family: var(--md-display);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--md-muted);
}

/* TWO classes on purpose: the generic in-content link rule `.md-skin .col-lg a`
   is (0,2,1) and beats a single-class selector, which would leave this accent
   coloured and underlined like a body link (the specificity trap documented in
   CLAUDE.md — it has bitten the chip index and the connection titles already). */
.au-skin .au-cite .au-cite__ep {
    display: inline-block;
    margin-top: .15rem;
    font-size: .95rem;
    color: var(--md-ink);
    text-decoration: none;
    transition: color .14s ease;
}
.au-skin .au-cite .au-cite__ep:hover,
.au-skin .au-cite .au-cite__ep:focus-visible {
    color: var(--md-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.au-skin .au-cite__time {
    display: block;
    margin-top: .1rem;
    font-family: var(--md-display);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--md-muted);
}
.au-skin .au-cite__time i { margin-right: .35rem }

@media (max-width: 575.98px) {
    .au-skin .au-cite__thumb { width: 104px }
}


/* ================================================================= *
 |  THE KEY  —  the ten differences
 |  The list itself is the skin's own .ioi-list; only its label is new. Styled
 |  explicitly because a bare h3 falls through to the legacy Freelancer heading
 |  rules (Montserrat 700, 24-28px) and would out-weigh the section header above
 |  it — the sub-heading inversion fixed across /episode on 2026-07-24. This is
 |  that page's "compact accent eyebrow" treatment.
 * ================================================================= */
.au-skin .au-key__head {
    margin: 0 0 .85rem;
    font-family: var(--md-display);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--md-accent);
}

@media (prefers-reduced-motion: reduce) {
    .au-skin .au-map__img,
    .au-skin .au-cite__thumb,
    .au-skin .au-cite .au-cite__ep { transition: none }
}