/* ================================================================= *
 |  DIFFERENCES PAGES  —  /differences/{feature}  (Phase 2, 2026-07-25)
 |
 |  Everything here is scoped under `body.fd-skin`, which feature/differences.blade.php
 |  sets ALONGSIDE `md-skin`: these pages wear the Massive Dynamic skin
 |  (massive-dynamic.css) for their section headings, prose, lists, image cards
 |  and the sticky jump bar, so they are the same page furniture as /episode and
 |  the character pages. This file only adds what a differences page has and an
 |  episode page doesn't: the feature hero, the per-episode heading meta, and the
 |  image rail (?diff=rail, the default layout).
 |
 |  Loaded after massive-dynamic.css. ?diff=current gets neither.
 * ================================================================= */


/* ================================================================= *
 |  HERO  —  the timeline's own still, with the page's stats over it
 * ================================================================= */

/* 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 shade under the episode clamp: these titles are short ("2036") and the
   byline under them is a full paragraph, not a one-line credit. */
.fd-skin .fd-hero .md-hero__title { font-size: clamp(2rem, 3.8vw, 3rem) }

/* The byline is the old masthead's description — real prose, so it needs a
   measure. Left un-capped it ran the full 1320px container and read as a banner
   subtitle rather than a paragraph. */
.fd-skin .fd-hero .md-hero__byline { max-width: 62ch }
.fd-skin .fd-hero .md-hero__byline p { margin: 0 }

/* What the page holds — the count of differences, how many episodes they span
   and where in the run. The prose never said any of it. */
.fd-skin .fd-hero__arrow { margin: 0 .4rem; opacity: .6 }

@media (max-width: 575.98px) {
    }


/* ================================================================= *
 |  JUMP BAR + SPOILER NOTE
 * ================================================================= */

/* Pills are SxxEyy codes, not section names — narrower and monospaced-ish, so
   23 of them stay on two rows at desktop width. */
.fd-skin .md-secnav .fr-pill { letter-spacing: .04em; font-size: .74rem }

/* 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. */
.fd-skin .fd-spoiler-note { margin-top: 1.5rem }
.fd-skin .fd-spoiler-note .alert { margin-bottom: 0 }


/* ================================================================= *
 |  EPISODE BLOCK
 |  No .fringe-divider between blocks — the ruled .subsection-header is the
 |  separator (the call the character pages made). The gap the divider used to
 |  occupy rides on the section instead.
 * ================================================================= */
.fd-skin .fd-episode { padding-bottom: 2.25rem }

/* The heading is a link to the episode itself, but it must still LOOK like every
   other section heading on the site — colour and weight come from the h2. */
.fd-skin .fd-episode__link {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .14s ease;
}
.fd-skin .fd-episode__link:hover,
.fd-skin .fd-episode__link:focus-visible { color: var(--md-accent) !important }

/* Sub-head under the title: how many differences this episode has and how many
   are pictured. Cheap orientation on a page whose blocks run 1 to 18 items. */
.fd-skin .fd-episode__count {
    margin: .1rem 0 0;
    font-family: var(--md-display);
    font-size: .74rem !important;    /* beats `.md-skin .container p` */
    line-height: 1.4 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--md-muted) !important;
}
.fd-skin .fd-episode__dot {
    display: inline-block;
    vertical-align: middle;
    width: 3px; height: 3px;
    margin: 0 .35rem 0 .2rem;
    border-radius: 50%;
    background: var(--md-accent);
}

@media (prefers-reduced-motion: reduce) {
    .fd-skin .fd-episode__link { transition: none }
}