/*
 * biography.css v2.3.1 - seriouslyscientific.com
 *
 * v2.3.1  Text wrapping restored. v2.3.0 used display: flow-root to make
 *         the hand-written <figure> contain its floated caption. That did
 *         fix the clicks, but containing a float is precisely what stops
 *         the body text running alongside it, so the images went from
 *         "text wraps round them" to "text sits underneath them".
 *
 *         The right answer is the opposite: display: contents, so the
 *         figure generates no box at all. The caption then floats
 *         directly inside the content column exactly as a bare [caption]
 *         shortcode does, the text wraps as it always did, and because
 *         the figure has no box it also picks up no z-index from
 *         style.css, which leaves the caption itself free to sit on
 *         z-index 3 and take its own clicks.
 *
 *         Measured in the harness, all three states, 1100px wide:
 *           v2.2.0  links blocked by <p>   text wraps
 *           v2.3.0  links clickable        text does NOT wrap
 *           v2.3.1  links clickable        text wraps
 *
 * v2.3.0  Caption fixes. Two things were wrong.
 *
 *   1. Caption links were not clickable. style.css section 8 gives
 *      EVERY direct child of .entry-content "position: relative;
 *      z-index: 2". A hand written <figure> whose only child is a
 *      floated [caption] has no height, so the headings and paragraphs
 *      after it are laid out over the top of it. They are positioned
 *      too, at the same z-index, and they come later in the document,
 *      so they win the click. The caption still shows because those
 *      paragraphs have no background. Fixed with a higher z-index on
 *      the caption, plus the figure change described in v2.3.1 above.
 *
 *   2. Caption link colour only ever targeted "figcaption a". The
 *      classic [caption] shortcode emits <p class="wp-caption-text">,
 *      not <figcaption>, so inline captions were never styled by this
 *      file at all. Both selectors are now covered.
 *
 * All appearance for page-biography.php. Loads after news.css, which
 * already supplies the two column .news-layout, the sidebar cards, the
 * progress bar and the share panel. This file only adds what is specific
 * to a biography, plus the components added in v2.
 *
 * Typography rule, from the site standard: Space Grotesk 700 is used for
 * exactly three things, prominent headings, stat figures, and dossier
 * titles and kickers. Everything else stays on Inter. Because this
 * template is not the default page template, none of that is inherited,
 * so every heading and every number below sets it explicitly.
 *
 * Palette is re-declared on the page wrapper so the file is readable on
 * its own. Values mirror style.css v3.2 Cosmic Rust Supernova.
 */

.bio-page-container {
    --deep-space: #1A0C08;
    --lunar-rock: #3D2318;
    --martian-soil: #795548;
    --supernova-orange: #CD5A24;
    --supernova-orange-hover: #A85420;
    --nebula-turquoise: #4A9FD4;
    --amber: #E29000;
    --highlight-yellow: #fadb67;
    --starlight: #F7FAFC;
    --starlight-muted: #E2E8F0;

    /* --martian-soil at 2.91:1 on --deep-space fails WCAG AA. It is fine
       for borders and rules, where contrast rules do not apply, but not
       for text. --bio-dim is the same warm family at a passing ratio and
       replaces it everywhere type is set. Matches --vg-dim on the
       Voyager page and --ss-text-muted in lesson.css. */
    --bio-dim: #B8A99E;

    padding-bottom: 4rem;
}


/* ================================================================
   1. ARTICLE HEAD
   ================================================================ */

.bio-article .news-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.2;
}

@media (max-width: 640px) {
    .bio-article .news-title { font-size: 1.55rem; }
}


/* ================================================================
   2. DOSSIER STAT STRIP
   Sits under the hero image, above the two column layout.
   ================================================================ */

.bio-dossier {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    align-items: flex-start;
    background: linear-gradient(135deg, var(--deep-space) 0%, var(--lunar-rock) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.1rem 1.5rem 1.1rem 1.75rem;
    margin: 1.75rem 0 2rem;

    /* The left edge runs the full site palette top to bottom. A plain
       border cannot carry a gradient and keep border-radius, because
       border-image switches radius off, so it is a pseudo element. */
    position: relative;
    overflow: hidden;
}

.bio-dossier::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(
        180deg,
        var(--supernova-orange) 0%,
        var(--highlight-yellow) 50%,
        var(--nebula-turquoise) 100%
    );
}

/* Each figure takes its own accent, in palette order. Three stats, three
   colours, so yellow gets a proper showing at the top of the page rather
   than being sprinkled around as decoration. */
.bio-dossier-stat:nth-child(1) .bio-dossier-num { color: var(--supernova-orange); }
.bio-dossier-stat:nth-child(2) .bio-dossier-num { color: var(--highlight-yellow); }
.bio-dossier-stat:nth-child(3) .bio-dossier-num { color: var(--nebula-turquoise); }

.bio-dossier-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 140px;
}

.bio-dossier-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    color: var(--supernova-orange);
}

.bio-dossier-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bio-dim);
    line-height: 1.35;
}

@media (max-width: 640px) {
    .bio-dossier { gap: 1rem 1.25rem; padding: 1rem; }
    .bio-dossier-stat { flex: 1 1 100%; flex-direction: row; align-items: baseline; gap: 0.6rem; }
    .bio-dossier-num { font-size: 1.5rem; }
}


/* ================================================================
   3. ARTICLE BODY
   ================================================================ */

.bio-content > p:first-of-type {
    font-size: 1.08rem;
    line-height: 1.9;
    color: rgba(247, 250, 252, 0.92);
}

/* Section heads: orange caps with a teal rule running off to the right.
   Matches the About and Editorial Guidelines pages. */
.bio-content h2,
.bio-sec-title {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--supernova-orange) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 2.5rem 0 1.25rem !important;
}

.bio-content h2::after,
.bio-sec-title::after {
    content: '' !important;
    display: block !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(90deg, var(--nebula-turquoise), transparent) !important;
    min-width: 40px;
}

@media (max-width: 640px) {
    .bio-content h2,
    .bio-sec-title { font-size: 1.15rem !important; }
}

.bio-content h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: var(--nebula-turquoise) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 0.9rem !important;
    margin: 2rem 0 0.5rem !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}


/* ── Pull quote card ──
   Any blockquote in the body becomes the quote card, so the writer just
   uses a normal blockquote and gets the component. */
.bio-content blockquote {
    position: relative;
    margin: 2.5rem 0;
    padding: 1.75rem 1.75rem 1.75rem 3.5rem;
    background: var(--lunar-rock) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid var(--nebula-turquoise) !important;
    border-radius: 0 10px 10px 0;
}

.bio-content blockquote::before {
    content: '\201C';
    position: absolute;
    left: 0.9rem;
    top: 0.35rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 1;
    color: var(--highlight-yellow);
    opacity: 0.5;
}

.bio-content blockquote p {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--starlight);
    margin: 0;
}

@media (max-width: 640px) {
    .bio-content blockquote { padding: 1.25rem 1.1rem 1.25rem 2.6rem; }
    .bio-content blockquote::before { font-size: 2.6rem; left: 0.6rem; }
    .bio-content blockquote p { font-size: 1rem; }
}


/* ── Inline figures ── */
.bio-content figure {
    margin: 2rem 0;
}

/* A .bio-figure is a hand-written <figure> wrapped round a [caption]
   shortcode in the post body. It has no job to do: the shortcode already
   emits its own <div class="wp-caption">. Left as a real box it breaks
   things two ways, so it is removed from layout entirely.

   Why display: contents and not flow-root. The figure's only child is a
   floated caption, so as a normal block the figure is zero pixels tall
   and the caption hangs out of the bottom of it. flow-root fixes the
   height but also contains the float, which is exactly what stops the
   body text wrapping round the picture. display: contents generates no
   box, so the caption floats directly in the content column, the text
   wraps as it always did, and the figure picks up no z-index from
   style.css to trap the caption underneath. */
.bio-content .bio-figure {
    display: contents;
}

/* style.css section 8 puts every direct child of .entry-content on
   position: relative and z-index 2. Same z-index means later in the
   document wins, so the paragraphs after a floated caption are painted
   over it and take the clicks on its credit links. The caption is still
   visible, because those paragraphs have no background, which is what
   made this look like a link problem rather than a layout one. Putting
   the caption on z-index 3 settles it. */
.bio-content .wp-caption {
    position: relative;
    z-index: 3;
}

.bio-content figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.bio-content figcaption,
.bio-content .wp-caption-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--bio-dim);
    margin-top: 0.6rem;
    padding-left: 0.1rem;
}


/* ── Tables ── */
.bio-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    background: var(--lunar-rock);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.bio-content table thead tr {
    background: rgba(205, 90, 36, 0.12);
    border-bottom: 2px solid var(--supernova-orange);
}

.bio-content table th {
    padding: 0.75rem 1rem;
    text-align: left;
    color: var(--supernova-orange);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bio-content table td {
    padding: 0.65rem 1rem;
    color: rgba(247, 250, 252, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
    line-height: 1.5;
}

.bio-content table tbody tr:last-child td { border-bottom: none; }
.bio-content table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.bio-content table strong { color: var(--starlight); }


/* ── Sources list ── */
.bio-content ol {
    margin: 1.25rem 0 1.5rem 1.5rem;
    color: rgba(247, 250, 252, 0.7);
}

.bio-content ol li {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

.bio-content ol li a { color: var(--nebula-turquoise); }


/* ================================================================
   4. CAREER TIMELINE
   A single ruled column with the year in Space Grotesk and a marker
   dot sitting on the rule.
   ================================================================ */

.bio-timeline-section { margin-top: 2.5rem; }

.bio-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;

    /* --lunar-rock is only just lighter than --deep-space, so a rule in
       it is effectively invisible and the dots look like they are
       floating. A low-opacity teal reads as a deliberate spine and ties
       to the section rules above it. */
    border-left: 2px solid rgba(74, 159, 212, 0.28);
}

.bio-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    padding: 0.6rem 0;
    align-items: baseline;
}

.bio-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.68rem;
    top: 1.05rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--highlight-yellow);
    border: 2px solid var(--deep-space);
    box-shadow: 0 0 6px rgba(250, 219, 103, 0.35);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bio-timeline-item:hover::before {
    background: var(--highlight-yellow);
    box-shadow: 0 0 0 5px rgba(250, 219, 103, 0.20), 0 0 10px rgba(250, 219, 103, 0.6);
    transform: scale(1.25);
}

.bio-timeline-year {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--nebula-turquoise);
    letter-spacing: -0.01em;
}

.bio-timeline-event {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(247, 250, 252, 0.8);
}

@media (max-width: 520px) {
    .bio-timeline-item { grid-template-columns: 1fr; gap: 0.15rem; }
    .bio-timeline-item::before { top: 0.8rem; }
}


/* ================================================================
   5. SIDEBAR CARDS
   ================================================================ */

.bio-factfile-card { border-left: 3px solid var(--supernova-orange); }
.bio-hub-card      { border-left: 3px solid var(--nebula-turquoise); }

.bio-fact-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bio-fact-row:last-child { border-bottom: none; }

.bio-fact-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bio-dim);
}

.bio-fact-value {
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--starlight);
}

.bio-sidebar-show {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--bio-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem 0;
}

.bio-hub-btn {
    display: block;
    background: var(--supernova-orange);
    color: #fff !important;
    text-align: center;
    padding: 0.65rem 1rem;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none !important;
    margin-bottom: 0.6rem;
    transition: background 0.2s ease;
}

.bio-hub-btn:hover { background: var(--supernova-orange-hover); }

.bio-episodes-link {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--nebula-turquoise) !important;
    text-decoration: none !important;
    padding: 0.5rem;
    border: 1px solid rgba(74, 159, 212, 0.3);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.bio-episodes-link:hover {
    background: rgba(74, 159, 212, 0.08);
    border-color: var(--nebula-turquoise);
}

.bio-educators-list { list-style: none; margin: 0; padding: 0; }

.bio-educators-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.bio-educators-list li:last-child { border-bottom: none; }

.bio-educators-list a {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: rgba(247, 250, 252, 0.65) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: block;
}

.bio-educators-list a::before {
    content: "\2192  ";
    color: var(--supernova-orange);
    font-size: 0.7rem;
}

.bio-educators-list a:hover { color: var(--supernova-orange) !important; }


/* ================================================================
   6. FULL WIDTH STRIPS (watch and puzzles)
   These sit outside .news-layout so they get the whole column width.
   ================================================================ */

.bio-strip { margin: 3.5rem 0 0; }

.bio-strip-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--starlight);
    margin-bottom: 1.5rem;
}

.bio-strip-cta { text-align: center; margin-top: 1.5rem; }

/* Grid children carrying the hidden attribute must actually disappear.
   display:grid on the parent would otherwise beat the browser default
   for [hidden] and the extra cards would all render. */
.bio-watch-grid > [hidden] { display: none !important; }


/* ── Puzzle cards.
   Same component as the Brain Teasers row on the front page: the topic
   icon sits large and low in the corner BEHIND the title, at z-index 0
   against the text at 1, so the title still reads across it. ── */
.sspz-fp-card .sspz-card-icon {
    position: absolute;
    right: -12px;
    bottom: -12px;
    height: 90%;

    /* The <svg> printed by ss_puzzle_icon() carries no viewBox and no
       width or height attributes, so it has no intrinsic aspect ratio.
       Without the line below, width:auto resolves to the full width of
       the card, the symbol centres itself inside that box, and the icon
       floats in the middle instead of sitting in the corner that
       right:-12px and bottom:-12px are asking for. Every symbol in the
       sprite is 48 by 48, so pinning the ratio to 1/1 makes the width
       resolve from the height and the icon lands where it should.
       The same fix is worth applying to the Brain Teasers row on
       front-page.php, which has the identical problem. */
    aspect-ratio: 1 / 1;
    width: auto;

    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.sspz-fp-card:hover .sspz-card-icon {
    opacity: 0.32;
    transform: scale(1.05);
}

.sspz-fp-body { position: relative; z-index: 1; }

.sspz-fp-chip {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 2px 9px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sspz-fp-chip-spark     { background: rgba(74, 159, 212, 0.18);  color: var(--nebula-turquoise); }
.sspz-fp-chip-charge    { background: rgba(226, 144, 0, 0.18);   color: var(--amber); }
.sspz-fp-chip-supernova { background: rgba(205, 90, 36, 0.20);   color: var(--supernova-orange); }


/* ================================================================
   7. CAPTION LINKS
   The hero figcaption sits OUTSIDE .news-content, so the link colour
   rules in news.css never reach it and the browser default takes over,
   which is why the CC BY-SA credit rendered as a bright default-blue
   underlined link. Attribution links have to live in the caption for
   licence compliance, so they need styling here.
   ================================================================ */

.bio-page-container .news-hero-image figcaption a,
.bio-content figcaption a,
.bio-content .wp-caption-text a {
    color: var(--nebula-turquoise);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 159, 212, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.bio-page-container .news-hero-image figcaption a:hover,
.bio-content figcaption a:hover,
.bio-content .wp-caption-text a:hover {
    color: var(--highlight-yellow);
    border-bottom-color: var(--highlight-yellow);
}

.bio-page-container .news-hero-image figcaption a:visited,
.bio-content figcaption a:visited,
.bio-content .wp-caption-text a:visited {
    color: var(--nebula-turquoise);
}


/* ================================================================
   8. SHARE
   The trigger only. The modal itself is ss-share-modal.php, the same
   component the lessons and the puzzles use, and it carries its own
   styles. Nothing here should try to restyle the modal.
   ================================================================ */

.bio-share {
    text-align: center;
    margin: 3rem 0 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--lunar-rock);
}

.bio-share-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--supernova-orange);
    margin: 0 0 1.1rem;
}

/* Styled to match .bio-episodes-link in the sidebar: blue outline, wide.
   To run it the full width of the column instead, delete the max-width. */
.bio-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 380px;
    background: transparent;
    color: var(--nebula-turquoise);
    border: 1px solid rgba(74, 159, 212, 0.4);
    border-radius: 8px;
    padding: 0.85rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bio-share-btn:hover {
    background: rgba(74, 159, 212, 0.10);
    border-color: var(--nebula-turquoise);
    box-shadow: 0 0 14px rgba(74, 159, 212, 0.22);
}

.bio-share-btn .ss-share-open-icon {
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: -2px;
    fill: currentColor;
}


/* ── Modal transparency ──
   ss-share-modal.php prints its own CSS inline in the body. Inline <style>
   in the body still loses to higher specificity, so scoping through the
   page container (0,2,0 against its 0,1,0) wins without !important.
   Gives the frosted backdrop the lessons have. */
.bio-page-container .ss-share-overlay {
    background: rgba(10, 5, 3, 0.62);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
}

.bio-page-container .ss-share-panel {
    background: rgba(26, 12, 8, 0.86);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}


/* ================================================================
   9. READING PROGRESS BAR
   news.css paints it flat orange. On a biography it runs orange to
   yellow, so the third colour is present on every scroll.
   ================================================================ */

.bio-page-container .news-progress-bar {
    background: linear-gradient(
        90deg,
        var(--supernova-orange) 0%,
        var(--amber) 55%,
        var(--highlight-yellow) 100%
    );
    box-shadow: 0 0 10px rgba(250, 219, 103, 0.45);
}


/* ================================================================
   10. REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .sspz-fp-card .sspz-card-icon,
    .bio-hub-btn,/* ═══════════════════════════════════════════════════════════
   BIOGRAPHY  v2.4.0  August 2026

   ADDITIVE. Paste at the very end of biography.css.

   Goes with page-biography.php v2.4.0, which moves the kicker,
   title, show name and byline onto the portrait. Almost all the
   appearance for that comes free from the .news-hero-overlay
   block in news.css, which already loads on biography posts.
   Only the two genuine collisions are handled here.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   11. HERO TITLE ON THE OVERLAY

   Section 1 of this file pins .bio-article .news-title to a flat
   2.1rem. That selector is specificity 0,2,0, the same as
   .news-hero-overlay .news-title in news.css, and biography.css
   is enqueued AFTER news.css, so the flat size wins and the
   clamp() never applies.

   On the overlay the title has a hard height budget, and these
   titles are long: "Julius Sumner Miller: Physics Is My Business"
   is 44 characters. It has to be allowed to shrink on a narrow
   window or it wraps to three lines and climbs out of the scrim.

   Three classes puts this at 0,3,0, so it wins on specificity
   and needs no !important.
   ─────────────────────────────────────────────────────────── */
.bio-article .news-hero-overlay .news-title {
    font-size: clamp(1.45rem, 2.9vw, 2.4rem);
    line-height: 1.1;
}

/* news.css unstacks the overlay at 780px. Section 1 of this file
   resizes the title at 640px, which would leave a 140px band
   where the title is still overlay sized on an unstacked layout.
   Matching 780 here closes it. */
@media (max-width: 780px) {
    .bio-article .news-hero-overlay .news-title {
        font-size: 1.55rem;
    }
}

/* ───────────────────────────────────────────────────────────
   12. DOSSIER STRIP JOINED TO THE HERO
   ─────────────────────────────────────────────────────────── */
.bio-dossier-joined {
    margin-top: 0;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Same correction as news.css section 17: a caption between the
   hero and the strip means they are not touching, so the joined
   treatment is wrong and gets undone. Every biography currently
   carries a hero caption, so in practice this is the branch that
   runs; the joined rule above is for the ones that do not. */
.news-hero-caption + .bio-dossier-joined {
    margin-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
    .bio-episodes-link,
    .bio-educators-list a,
    .bio-share-btn,
    .bio-timeline-item::before,
    .bio-content figcaption a,
    .bio-content .wp-caption-text a {
        transition: none;
    }
    .bio-share-btn:hover { transform: none; }
}