/* ================================================================= *
 |  RADIO ADS  —  /radio-ads  (Phase 2, 2026-07-26)
 |
 |  Scoped under `body.ra-skin`, which feature/radio-ads.blade.php sets ALONGSIDE
 |  `md-skin`: this page wears the Massive Dynamic skin (massive-dynamic.css) for
 |  its hero, section heading and type, so it is the same furniture as /episode,
 |  /characters, /differences and /alternate-united-states.
 |
 |  It is the one feature page with no pictures and no list of facts: five audio
 |  clips, 1:45 of them, and nothing else. So the redesign is mostly about a
 |  CONTROL rather than a layout — and as of 2026-07-26 that control is the shared
 |  component (public/css/audio-player.css + js/fringe-audio.js +
 |  partials/audio-player.blade.php), extracted from this page when
 |  /scavenger-hunt needed the same player for the Broyles phone message.
 |
 |  So this file is now only the page's own furniture: the hero crop and the list
 |  the players sit in. Loaded after massive-dynamic.css and audio-player.css.
 |  ?design=current gets none of the three.
 * ================================================================= */


/* ================================================================= *
 |  HERO
 * ================================================================= */

/* 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. */

/* NOTE: no scrim override here, deliberately. This is the first feature hero
   whose kicker clears AA under the SHARED gradient (worst case 5.01 at 1280px,
   6.59 at 1600px) because the still is dark exactly where the text lands.
   /alternate-united-states needed its own deeper stops; this one must not
   diverge from the shared component without a measured reason. */

/* A shade under the episode clamp, as on the other feature heroes: the title is
   two short words and the byline under it is a paragraph, not a credit line. */
.ra-skin .ra-hero .md-hero__title { font-size: clamp(2rem, 3.8vw, 3rem) }
.ra-skin .ra-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) */

.ra-skin .ra-section { padding-bottom: 3rem }


/* ================================================================= *
 |  THE LIST
 |
 |  <ol>, not <ul>: these are numbered spots in a set and the order is the order
 |  they are numbered in on the page. The markers are suppressed because each row
 |  states its own number in the head line, where it can be styled.
 * ================================================================= */
.ra-skin .ra-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* the separator is on the LIST ITEM, not on .fr-audio: the player is a shared
   component and how a page spaces several of them is the page's business */
.ra-skin .ra-list > li + li {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--md-line);
}