/* ================================================================= *
 |  FEATURE PAGES  —  the eight converted on 2026-07-27
 |
 |  /cortexiphan-treatment-results, /the-tapes, /names-for-astrid,
 |  /inside-walters-lab, /observer-abilities, /universe-hopping-methods,
 |  /intro-sciences, /glyphs.
 |
 |  WHY ONE SHEET AND NOT EIGHT. The earlier redesigns each got their own file
 |  (differences-page.css, alternate-us-page.css, radio-ads-page.css,
 |  scavenger-hunt-page.css) because each page had one big idea that needed
 |  explaining at length — the image rail, the map-and-key pairing, the waveform
 |  player, the justified gallery. These eight mostly reuse components that now
 |  live in massive-dynamic.css, so most of them need a hero crop and little
 |  else; eight files of four rules would bury the three that do have layout of
 |  their own (the alphabet, the name grid, the glyph plate). Each page's block
 |  is scoped to its own body class, exactly as a separate file would be, so
 |  splitting one back out later is a copy-paste.
 |
 |  Every page here also sets `md-skin`, so the section headings, prose,
 |  .ioi-list bullets, image rail, appearance strip, lightbox and sticky jump bar
 |  are the shared ones. Loaded after massive-dynamic.css.
 * ================================================================= */


/* ================================================================= *
 |  SHARED BY ALL EIGHT
 * ================================================================= */

/* The red "spoilers through season N" banner draws its own box, so per the
   section-geometry rule (CLAUDE.md §6) it takes the 1.5rem inset as MARGIN — via
   the .px-4 wrapper it sits in — and keeps its own padding. Padding would
   inflate the yellow box and leave its left edge behind on the container line.
   (The same three rules as .fd-/.fc-/.au-spoiler-note, which predate this file.) */
.fr-spoiler-note { margin-top: 1.5rem }
.fr-spoiler-note .alert { margin-bottom: 0 }

/* Pills on these pages label sections, not episodes: a couple of words each, in
   sentence case, so they need a touch more room than the episode bar's terse
   names and much less than /differences' SxxEyy codes. */
.md-skin .fr-secnav .fr-pill { text-transform: none; letter-spacing: .02em; font-size: .74rem }


/* ---- the EPISODE CHIP ----
   The appearance strip tile (.fr-appear__tile in massive-dynamic.css), sized for
   a five-character SxxEyy label instead of a number: same accent-per-episode
   idea, same hover. Used where naming the episode is all there is to say and a
   full title would drown the thing being annotated — /names-for-astrid entries
   and /intro-sciences term lists. */
.md-skin .fr-epchip {
    --tile-accent: #4d9de0;
    display: inline-flex;
    align-items: center;
    padding: .12rem .4rem;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--tile-accent) 40%, #ffffff);
    background: color-mix(in srgb, var(--tile-accent) 12%, #ffffff);
    color: var(--md-body) !important;
    font-family: var(--md-display);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    text-decoration: none !important;   /* beats the generic .col-lg a rule */
    transition: background .13s ease, color .13s ease, transform .13s ease;
}
.md-skin .fr-epchip:hover,
.md-skin .fr-epchip:focus-visible {
    background: var(--tile-accent);
    border-color: var(--tile-accent);
    color: #fff !important;
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .md-skin .fr-epchip { transition: none }
    .md-skin .fr-epchip:hover { transform: none }
}


/* ---- THE ENTRY ROW: description beside a still ----
 |
 |  /observer-abilities, /universe-hopping-methods and /intro-sciences are the
 |  same page three times: an entry has a name, some words about it, one
 |  screenshot, and a list. So they share a row.
 |
 |  It is deliberately the geometry the character pages use for a version
 |  (.fc-version__row in character-page.css): text at 1fr, still at a FIXED
 |  340px, list full width underneath. Fixed and not a fraction for the reason
 |  measured there — a proportional (1fr ~ 430px) image towers over a
 |  two-line description and leaves a lot of empty floor beside the picture, and
 |  down a page of entries every one of those gaps is page length.
 |
 |  Not merged with .fc-version__row, only because that would reach into the
 |  character pages for a purely cosmetic gain; the values are identical, so
 |  they can converge whenever that page is next touched.
 */
.md-skin .fr-figrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}
@media (min-width: 992px) {
    .md-skin .fr-figrow {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 1.6rem;
    }
}

.md-skin .fr-figrow__text > p:first-child { margin-top: 0 }
.md-skin .fr-figrow__text > p:last-child { margin-bottom: 0 }

.md-skin .fr-figrow__media { margin: 0 }
.md-skin .fr-figrow__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--md-line);
    border-radius: 4px;
    background: var(--md-surface);
    box-shadow: 0 1px 3px rgba(42, 53, 64, .1);
    cursor: zoom-in;
    transition: box-shadow .14s ease, border-color .14s ease;
}
.md-skin .fr-figrow__media img:hover,
.md-skin .fr-figrow__media img:focus-visible {
    border-color: var(--md-accent);
    box-shadow: 0 4px 14px rgba(42, 53, 64, .22);
}
@media (max-width: 991.98px) {
    /* stacked, the still would otherwise run the full width and dwarf the text */
    .md-skin .fr-figrow__media { max-width: 460px }
}

/* No .fringe-divider between entries — each opens with a ruled
   .subsection-header, which is the separator (the call the character and
   differences pages made). The gap the divider occupied rides here. */
.md-skin .fr-entry { padding-bottom: 2.5rem }
.md-skin .fr-entry:last-of-type { padding-bottom: 3rem }

/* A one-line fact that belongs WITH the description rather than in the list
   below it — /observer-abilities' "First seen when ...".

   It carries the site's accent dot rather than a word label. A worded eyebrow
   was tried and removed: these sentences already open "First seen when ..." /
   "First revealed when ...", so a "First seen" label read as a stutter. The dot
   is the same marker the section headings, .fringe-divider and .ioi-list use, so
   it says "separate fact" without saying anything twice. */
.md-skin .fr-entry__first {
    position: relative;
    margin: .9rem 0 0 !important;
    padding-left: 1.3rem;
    font-size: .95rem !important;
    line-height: 1.7 !important;
    color: var(--md-body) !important;
}
.md-skin .fr-entry__first::before {
    content: "";
    position: absolute; left: 0; top: .62em;
    width: .42rem; height: .42rem; border-radius: 50%;
    background: var(--md-accent);
}

/* The list under the row — appearances, sources, sciences. */
.md-skin .fr-entry__list { margin-top: 1.4rem }

/* A sub-heading INSIDE a section has to stay subordinate to the 22.4px/400
   Futura section header above it. Left alone, a bare h3 falls through to the
   legacy Freelancer rules (Montserrat 700, 24-28px) and out-weighs it — the
   inversion fixed across /episode on 2026-07-24. Same values as the clue labels. */
.md-skin .fr-entry__head {
    margin: 0 0 .6rem;
    font-family: var(--md-display);
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--md-accent);
}

@media (prefers-reduced-motion: reduce) {
    .md-skin .fr-figrow__media img { transition: none }
}


/* ================================================================= *
 |  CORTEXIPHAN TREATMENT RESULTS  (.cx-skin)
 |
 |  The one page on the site that is only prose: four paragraphs about
 |  cortexifan.com, the 2009 viral site that listed the trial subjects. No
 |  images, no data, nothing to lay out — so the work here is the hero and
 |  getting out of the way.
 * ================================================================= */

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

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


/* ================================================================= *
 |  MASSIVE DYNAMIC WEBSITE  (.mdyn-skin)  —  a NEW page (2026-08-02)
 |
 |  The legacy /massive-dynamic was never ported. It used to be a "here's what
 |  used to exist" memorial for the Flash viral site: a description, a still of
 |  the dead homepage, and the 2008 promo ad. The reconstruction
 |  (massivedynamic.fringeconnections.com) makes the first two redundant, so this
 |  page is now the FRONT DOOR to the reconstruction plus a home for the one asset
 |  that had nowhere else to go — the ad.
 |
 |  HERO is the Massive Dynamic NY headquarters from the Pilot, NOT the ad: the ad
 |  already carries "MASSIVE DYNAMIC" in huge type on a bright sky, so scrimming it
 |  and overlaying the title would double the words and kill the picture. Per the
 |  /alternate-united-states principle, the crisp asset is shown CLEAN in the body.
 * ================================================================= */

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

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

/* THE CALL TO ACTION — the single most important thing on the page: go see the
   reconstruction. An accent-filled button, the one loud element here. */
.md-skin .mdyn-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.5rem;
    padding: .72rem 1.4rem;
    background: var(--md-accent);
    color: #fff !important;
    font-family: var(--md-display);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid var(--md-accent);
    border-radius: 4px;
    text-decoration: none !important;   /* beats the generic .col-lg a rule */
    box-shadow: 0 1px 3px rgba(42, 53, 64, .18);
    transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.md-skin .mdyn-cta:hover,
.md-skin .mdyn-cta:focus-visible {
    background: color-mix(in srgb, var(--md-accent) 82%, #000);
    box-shadow: 0 4px 14px rgba(42, 53, 64, .28);
    transform: translateY(-1px);
    color: #fff !important;
}
.md-skin .mdyn-cta i { font-size: .85em }

/* THE PRESERVED ASSET — the 2008 ad, shown clean and full width (never cropped:
   it is a landscape ad, not a 16:9 still), opening the lightbox for a true-size
   read of the fine print. Same resting shadow the rail thumbnails carry, so it
   reads as clickable before the pointer is on it. */
.md-skin .mdyn-figure { margin: 0 }
.md-skin .mdyn-shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--md-line);
    border-radius: 4px;
    background: var(--md-surface);
    box-shadow: 0 1px 3px rgba(42, 53, 64, .12);
    cursor: zoom-in;
    transition: box-shadow .14s ease, border-color .14s ease;
}
.md-skin .mdyn-shot:hover,
.md-skin .mdyn-shot:focus-visible {
    border-color: var(--md-accent);
    box-shadow: 0 4px 16px rgba(42, 53, 64, .24);
}
.md-skin .mdyn-figure figcaption {
    margin-top: .7rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--md-muted);
}
.md-skin .mdyn-figure figcaption i { margin: 0 .15rem 0 .3rem; opacity: .85 }

@media (prefers-reduced-motion: reduce) {
    .md-skin .mdyn-cta,
    .md-skin .mdyn-shot { transition: none }
    .md-skin .mdyn-cta:hover { transform: none }
}


/* ================================================================= *
 |  THE TAPES  (.tp-skin)
 |
 |  Eight VHS tapes, each one section: where it was seen, then the transcript.
 |  Two of the eight were never shown, and saying so plainly is most of the
 |  design — the legacy page rendered them as a heading, an "Unknown", and then
 |  nothing at all, which reads like a page that failed to load.
 * ================================================================= */

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

.tp-skin .tp-tape { padding-bottom: 2.25rem }
.tp-skin .tp-tape:last-of-type { padding-bottom: 3rem }

/* Where the tape was seen — the same compact accent eyebrow the episode page
   uses for its clue labels, so it reads as a label and not as the first line of
   the transcript. */
.tp-skin .tp-tape__seen {
    margin: 0 0 1.1rem !important;
    font-family: var(--md-display);
    font-size: .8rem !important;      /* beats `.md-skin .container p` */
    line-height: 1.4 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--md-muted) !important;
}
.tp-skin .tp-tape__seen i { margin-right: .5rem; opacity: .8 }
.tp-skin .tp-tape__seen a { color: var(--md-accent) !important }

/* THE TRANSCRIPT. It is a recording of someone speaking, and it is quoted
   verbatim with the gaps in the recording marked "[...]" — so it gets the
   treatment the site already gives quoted speech: an accent rule down the left,
   an inset, and the speaker names picked out. Not italics and not a monospace
   "terminal" pastiche: these are Walter's words, not a computer's. */
.tp-skin .tp-tape__transcript {
    margin: 0;
    padding: .1rem 0 .1rem 1.15rem;
    border-left: 3px solid var(--md-accent);
}
.tp-skin .tp-tape__transcript p {
    margin: 0;
    /* A LITTLE MORE LEADING THAN THE .md-skin DEFAULT, AND NO MEASURE.
       A `max-width: 74ch` cap was here and the owner removed it (2026-07-27):
       it wrapped the transcript about halfway across a wide screen while the
       heading above it ran the full width, which reads as a broken column
       rather than a comfortable line. The site's own convention is that body
       copy runs to the section's measure — the Bootstrap `.container` governs
       (CLAUDE.md §6), exactly as `/guide` and the episode synopsis do.
       Don't reinstate it, and don't "fix" a future cap with `max-width: none`
       either; delete the declaration, as here. */
    line-height: 1.85 !important;
}
/* WALTER / DONALD / NEIGHBOR — the <b> the data file already carries */
.tp-skin .tp-tape__transcript b {
    font-family: var(--md-display);
    font-weight: 600;
    font-size: .85em;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--md-ink);
}

/* A tape that was never shown. Says what is true — the tape exists in the plan,
   we just never saw it — instead of leaving an empty section. */
.tp-skin .tp-tape__missing {
    margin: 0;
    font-size: .95rem !important;
    font-style: italic;
    color: var(--md-muted) !important;
}
.tp-skin .tp-tape__missing i { margin-right: .5rem; font-style: normal }


/* ================================================================= *
 |  OBSERVER ABILITIES  (.oa-skin)
 |  Body is the shared entry row + a labelled "Derived from" list.
 * ================================================================= */

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


/* ================================================================= *
 |  FAQs  (.fq-skin)  —  PROPOSAL ONLY, reachable at ?design=proposal
 |
 |  The live page is still the legacy one; this is the mockup the owner asked
 |  for. See the reasoning in feature/faqs.blade.php.
 * ================================================================= */

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

.fq-skin .fq-group { padding-bottom: 2rem }
.fq-skin .fq-group:last-of-type { padding-bottom: 3.5rem }

/* One question. Closed it is a row in the index; open it is the answer, in
   place. A hairline between rows rather than a card each — eleven boxes read as
   eleven things to inspect, where this is a list to run your eye down (the same
   call /names-for-astrid made). */
.fq-skin .fq-item {
    border-bottom: 1px solid var(--md-line);
}
.fq-skin .fq-item:first-of-type { border-top: 1px solid var(--md-line) }

.fq-skin .fq-item__q {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    padding: .85rem .2rem;
    cursor: pointer;
    list-style: none;                 /* Firefox's own marker */
    color: var(--md-ink);
    transition: color .13s ease;
}
.fq-skin .fq-item__q::-webkit-details-marker { display: none }
.fq-skin .fq-item__q:hover,
.fq-skin .fq-item__q:focus-visible { color: var(--md-accent) }
.fq-skin .fq-item__q:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px }

/* The marker is a chevron drawn in CSS rather than an icon font: it has to
   rotate on open, and Font Awesome's SVG build replaces the <i> it is given,
   which makes a element-level transform on it unreliable (the trap that broke
   the /radio-ads play glyph). */
.fq-skin .fq-item__mark {
    flex: 0 0 auto;
    position: relative;
    top: -.15em;
    width: .5rem; height: .5rem;
    border-right: 2px solid var(--md-accent);
    border-bottom: 2px solid var(--md-accent);
    transform: rotate(-45deg);
    transition: transform .16s ease;
}
.fq-skin .fq-item[open] .fq-item__mark { transform: rotate(45deg) }

.fq-skin .fq-item__text {
    font-family: var(--md-display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
}

/* The answer sits under the question, indented to its text so the chevron
   column stays clear all the way down — and runs to the same right edge the
   question does.

   A `max-width: 74ch` cap was here and the owner removed it (2026-07-27): it cut
   the answer off about halfway across a wide screen while the question above it
   ran the full width, so the two halves of one row didn't line up. The site's
   own convention is that body copy runs to the section's measure — the Bootstrap
   `.container` governs (CLAUDE.md §6). Don't reinstate it, and don't "fix" a
   future cap with `max-width: none` either; delete the declaration, as here.

   The left inset is the summary's OWN padding plus the chevron plus its gap
   (.2 + .5 + .85rem), so the answer's first character lands on exactly the same
   line as the question's — miss the .2rem and it sits 3px adrift. */
.fq-skin .fq-item__a {
    padding: 0 .2rem 1.1rem calc(.2rem + .5rem + .85rem);
}
.fq-skin .fq-item__a p { margin: 0 0 .8rem }
.fq-skin .fq-item__a p:last-child { margin-bottom: 0 }
/* the legacy answers carry `.indent` on their paragraphs, which the old page
   used for a text-indent; the panel's own inset does that job now */
.fq-skin .fq-item__a p.indent { text-indent: 0 }

/* A deep-linked panel is worth marking for a beat — the reader arrived from
   somewhere else and needs to see which of eleven rows answered them. */
.fq-skin .fq-item:target { background: color-mix(in srgb, var(--md-accent) 5%, transparent) }

@media (prefers-reduced-motion: reduce) {
    .fq-skin .fq-item__mark,
    .fq-skin .fq-item__q { transition: none }
}


/* ================================================================= *
 |  VIOLET SEDAN CHAIR  (.vs-skin)
 |
 |  Body is the shared image rail (per episode, as on /differences) and the
 |  shared video grid. The page's own piece is THE RECORD-SLEEVE 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. */

/* Each episode heading links to that episode but must still LOOK like every
   other section heading on the site — colour and weight come from the h2, and
   only hover tints it. (Same rule /differences uses.) */
.vs-skin .vs-episode__link {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .14s ease;
}
.vs-skin .vs-episode__link:hover,
.vs-skin .vs-episode__link:focus-visible { color: var(--md-accent) !important }

.vs-skin .vs-section { padding-bottom: 2.5rem }
.vs-skin .vs-section:last-of-type { padding-bottom: 3.5rem }

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


/* ================================================================= *
 |  GLYPHS  (.gl-skin)
 |
 |  Body is the shared image rail, once per glyph, with the glyph's own still as
 |  the rail's first row. The page's own pieces are the alphabet grid and the
 |  glyph plate's dark ground.
 * ================================================================= */

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

/* Sub-head under the glyph name: how many sightings and across how many
   episodes. The same treatment /differences puts under an episode title. */
.gl-skin .gl-glyph__count {
    margin: .1rem 0 0 !important;
    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;
}
.gl-skin .gl-glyph__dot {
    display: inline-block;
    vertical-align: middle;
    width: 3px; height: 3px;
    margin: 0 .55rem;
    border-radius: 50%;
    background: var(--md-accent);
}

/* THE ALPHABET. The legacy page shipped these 26 images TWICE — four flex rows
   of seven for desktop, plus a d-lg-none stack of 26 full-width rows for mobile.
   One grid does both. auto-fill so a wide viewport adds columns rather than
   inflating 26 letter cards to the width of the measure. */
.gl-skin .gl-alphabet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gl-skin .gl-letter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .5rem .3rem .35rem;
    border: 1px solid var(--md-line);
    border-radius: 4px;
    background: var(--md-surface);
}
/* The symbols are drawn light-on-black, so they need a dark plate — on the
   skin's white ground the JPEG's own black square would otherwise be the only
   dark thing on the page and read as a hole. Rounding it makes it a chip. */
.gl-skin .gl-letter__img {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 3px;
    background: #000;
}
.gl-skin .gl-letter__char {
    font-family: var(--md-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--md-muted);
}

/* The rail's first row on a glyph section is the glyph itself rather than a
   sighting, so its thumbnail gets the same black plate the alphabet chips do —
   the still is letterboxed black and would otherwise sit oddly against the
   screen grabs below it. */
.gl-skin .gl-row--original .fr-rail__thumb { background: #000 }


/* ================================================================= *
 |  INTRO SCIENCES  (.is-skin)
 |
 |  Body is the shared entry row (term list beside the frame) + the shared
 |  appearance strip. The one thing that is this page's own is the term list,
 |  where a term that the series actually dramatised carries the episode that
 |  did it — the join the legacy page kept behind a second modal.
 * ================================================================= */

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

/* The terms are the intro's own list, in its own order — not a bulleted list of
   sentences, so they get room to breathe and a hairline between them rather than
   the .ioi-list dot treatment. */
.is-skin .is-terms {
    list-style: none;
    margin: 0;
    padding: 0;
}
.is-skin .is-term {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .6rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--md-line);
}
.is-skin .is-term:last-child { border-bottom: 0 }

.is-skin .is-term__word {
    font-family: var(--md-display);
    font-size: .95rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--md-muted);
    margin-right: auto;
}
/* A term the show went on to actually dramatise is the interesting one, so it is
   the one that is inked rather than muted — the chips beside it are then the
   reason, not decoration. */
.is-skin .is-term--seen .is-term__word {
    color: var(--md-ink);
    font-weight: 600;
}

.is-skin .is-term__eps { display: flex; flex-wrap: wrap; gap: .25rem }


/* ================================================================= *
 |  UNIVERSE HOPPING METHODS  (.uh-skin)
 |  Body is the shared entry row + the shared inline appearance strip.
 * ================================================================= */

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


/* ================================================================= *
 |  INSIDE WALTER'S LAB  (.wl-skin)
 |
 |  One gallery and nothing else. The layout is the shared justified rows
 |  (.fr-gallery in massive-dynamic.css) with --fr-gal-row-max pinned to 352px,
 |  the exact height of all 25 sources, so nothing is ever upscaled.
 * ================================================================= */

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

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

/* These photographs are small (528px) and the gallery draws them smaller still,
   so the lightbox is where the detail actually is — and `cursor: zoom-in` only
   announces that once the pointer is already on a tile. Same reasoning as the
   /alternate-united-states map hint. */
.wl-skin .wl-note {
    margin: 0 !important;
    font-family: var(--md-display);
    font-size: .78rem !important;      /* beats `.md-skin .container p` */
    line-height: 1.4 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--md-muted) !important;
}

/* Provenance. These are FOX's photographs, not screen grabs, and the page has
   said so since the legacy version — it just never linked the source, which had
   been sitting in a comment in the data file. */
.wl-skin .wl-source {
    margin: 1.4rem 0 0 !important;
    font-size: .85rem !important;
    color: var(--md-muted) !important;
}


/* ================================================================= *
 |  NAMES FOR ASTRID  (.na-skin)
 |
 |  24 entries whose entire content is ONE WORD and between one and eight
 |  episode references. The legacy page gave each of them a heading, a ruled
 |  block and a bulleted list of full episode titles — 24 sections and ~4,600px
 |  to say 24 words. It is a list of short things, so it is laid out as one.
 * ================================================================= */

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

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

/* The order IS the content (first use, ending on "Astrid" in the finale) and no
   layout can say so — hence one line that does. */
.na-skin .na-note {
    margin: 0 0 1.3rem !important;
    font-family: var(--md-display);
    font-size: .78rem !important;      /* beats `.md-skin .container p` */
    line-height: 1.4 !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--md-muted) !important;
}

/* auto-fill, not auto-fit: at wide widths auto-fit would stretch two surviving
   columns across the whole measure and leave each entry mostly empty. The min is
   set by the widest realistic row — an eight-chip name ("Astro") wraps its chips
   onto a second line at this width rather than forcing a one-column grid. */
.na-skin .na-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .3rem 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A hairline between rows rather than a card each: 24 boxes read as 24 things to
   inspect, where this is a list to run your eye down. */
.na-skin .na-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .7rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--md-line);
}

.na-skin .na-entry__word {
    font-family: var(--md-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--md-ink);
    /* the name is the thing being looked up, so it holds the left edge and the
       chips flow after it */
    margin-right: auto;
}

.na-skin .na-entry__eps { display: flex; flex-wrap: wrap; gap: .25rem }

/* (`.fr-epchip` is shared — see "SHARED BY ALL EIGHT" at the top of this file.
   It is used here and by /intro-sciences term list.) */