/* ============================================================
   WHATEVER PEOPLE SAY I AM - COMIC SYNOPSIS PAGES (v2.5)
   Covers: Paper Sheet / Text Rail (ported from thinkamigo's
   destination.css), Comic Cover Strip, Meet the Team Panel.
   Companion to chassis.css - loads brand tokens (--brand-primary,
   --link-accent, --brand-orange, --stone-bg) from chassis.css.
   Reused across all six issue-NN-synopsis.html pages.

   v1.0: First build - converts the legacy issue-05-synopsis.html
         (topnav / .essay / .essay_wide / .boxout / .flex_container
         table-style markup) into the new framework.

         DECISIONS TO FLAG:
         - .text-rail h1/h2/h3/p ported from destination.css almost
           unchanged, but with var(--brand-blue) swapped for
           var(--brand-primary) throughout, matching the same
           token rename already applied to chassis.css.
         - Meet the team panel background (--team-bg) is a colour
           estimate from the screenshot, not sampled from the
           actual asset - likely needs a precise hex once you can
           check it against the original design file.
         - Portrait ring colour (--team-ring) is likewise an
           estimate of the gold/bronze medal-style border seen in
           the screenshot.
         - CTA button reuses .btn-pill from chassis.css rather than
           inventing a new button style, for consistency with the
           rest of the site - CORRECTED below: .btn-pill is white
           text on a white border, built only for dark backgrounds
           (footer, nav bar). On this page's white paper-sheet it
           would be invisible, so a new .btn-cta was added instead
           (solid --brand-primary fill, white text).
   v1.1: Removed the Anton font entirely - flagged as problematic
         on other sites. Synopsis h1 and team-heading now use
         Arial (via the standard Arial/Helvetica/sans-serif stack),
         bold rather than Anton's black weight, since plain Arial
         needs more weight to still read as a heading at this size.
   v1.2: Wrong call on Arial too - synopsis h1 and team-heading
         now match .gallery-intro from whatever-comic-gallery.css
         exactly (Poppins, 28px, weight 400, #333333, no uppercase),
         the same heading used for "Challenging stereotypes through
         comics" on the home page. Poppins was specified over Arial
         since it has a full weight range to draw on. Mobile
         font-size overrides adjusted to match gallery-intro's own
         24px mobile size, rather than the old Anton-era values
         which no longer made sense against a smaller base size.
   v1.3: Checked every link on the page against the site-wide
         pattern. .text-rail p a, .skip-intro a, and .team-bio a
         already matched (underlined by default, decoration colour
         --brand-orange, colour shifts to orange on hover - same
         treatment as .legal-content a in whatever-legal.css).
         .comic-flex-nav a was the one that didn't: it had no
         underline at all on hover, just a colour change, unlike
         every other nav-style link on the site (main nav, footer
         nav, comic-card links), which all gain an orange underline
         on hover. Added text-decoration: underline, decoration
         colour --brand-orange, thickness 2px, offset 4px on hover,
         matching the comic-card link treatment in
         whatever-comic-gallery.css.
   v1.4: v1.3 was wrong - it matched whatever-legal.css's prose-
         link convention (permanently underlined, colour shifts to
         orange on hover), not the actual pattern on index.html.
         index.html's card links (.comic-card .card-links a in
         whatever-comic-gallery.css) have NO underline by default
         and NO colour change on hover - only the underline itself
         appears. Every text-rail/skip-intro/team-bio link, and
         comic-flex-nav, now matches that exactly: color:
         var(--link-accent), text-decoration: none by default;
         on hover, text-decoration: underline, decoration colour
         --brand-orange, thickness 2px, offset 4px, with no change
         to the text colour itself.
   v1.5: Removed the CTA button and bottom comic nav section
         entirely (.synopsis-cta, .btn-cta, .comic-nav-rule,
         .comic-flex-nav). Paul had already said to leave this
         section out and cropped it from the reference screenshot,
         but it was built anyway by pulling it in from the legacy
         file's own flexcomicnav/cta-buttonlink markup. Removed
         from issue-05-synopsis.html and this stylesheet both.
   v1.6: Removed uppercase and --brand-orange from
         .text-rail h3.tagline ("That's what I'm not!"). Neither
         was asked for, and uppercase broke the sentence case rule
         that governs the whole site. Now plain sentence case,
         #333333, weight 500 - a light step up from body text
         rather than a shouted, coloured line.
   v1.7: .team-panel was width: 100%, running edge to edge, while
         .paper-sheet above it is max-width: 1250px and centred -
         so the yellow band had no stone margin either side, unlike
         every other section on the page. Constrained team-panel to
         the same max-width: 1250px, margin: 0 auto. --team-bg left
         unchanged - Paul may desaturate it himself via Live Server
         the same way he dialled in --brand-primary and --footer-bg
         earlier, rather than asking for that yet.
   v1.8: --team-bg set to #fcf49d, Paul's chosen desaturated
         yellow, replacing the earlier #ded877 screenshot estimate.
   v1.9: Colour and hover behaviour already matched the home page
         card links, but font-weight didn't - .comic-card
         .card-links is 600 weight, while .text-rail p a,
         .skip-intro a, and .team-bio a were inheriting their
         paragraph's regular (400) weight. Added font-weight: 600
         directly to all three link rules so the links themselves
         are bold even though the surrounding prose isn't.
   v2.0: Added .team-note, for issue-04-synopsis.html - the
         "New and Emerging Communities" project description that
         sits inside the team panel between bios, with no portrait
         or person attached to it. Reuses the same typography as
         .team-bio (Poppins, 20px/600 heading, 15px/1.6 body) so it
         reads as part of the same panel, just without the flex
         portrait+bio layout since there's no image to sit beside.
   v2.1: Same class of bug as the features-gallery dividers before
         it - .team-divider was nested inside .text-rail (90%/
         960px, centred), so it only spanned the text column, not
         the full 1250px yellow panel. Fixed by restructuring the
         HTML in all three built synopsis pages so each team-member
         (and team-note) sits in its own .text-rail wrapper, with
         .team-divider as a direct child of .team-panel between
         them - no viewport-width hack needed, it's simply 100% of
         its actual parent now. Moved the panel's vertical rhythm
         from .team-panel .text-rail (which no longer makes sense
         with multiple text-rail chunks per panel) to .team-panel
         itself, and trimmed .team-member/.team-note padding from
         30px to 20px to compensate for the extra spacing the
         restructure introduced.
   v2.2: Added .hero-cta-btn - "Read comic" button centred over the
         synopsis cover image, so it's obvious what to do next rather
         than relying on the image itself being clickable with no
         visual cue. Matches .pill-contact-btn from
         whatever-comic-gallery.css exactly (transparent fill, white
         4px border, white text, same hover fill) - duplicated here
         rather than depending on that file, since synopsis pages
         never load it. One addition beyond that button's own style:
         a subtle text-shadow on the label, since the branding bar
         button sits on a flat brand-primary background while this
         one sits over unpredictable comic artwork - flagging this in
         case the exact-match request meant to exclude even that.
         .synopsis-cover needed position: relative to anchor the
         button; image itself is still separately clickable, both
         link to the same reader page.
   v2.3: Reported as illegible and not matching the Contact button's
         style - the shape values (padding, border, radius, weight)
         already matched pill-contact-btn exactly, but that button
         sits on a flat brand-primary bar, so its transparent fill
         still reads as a clear shape; this one sat on comic artwork
         with nothing behind it, so a transparent fill just looked
         like a faint outline. Added background-color: color-mix(in
         srgb, var(--brand-primary) 80%, transparent) - references
         the token rather than a hardcoded hex, so it re-skins
         correctly if --brand-primary ever changes. Removed the
         earlier text-shadow addition (no longer needed once the
         button has a real fill behind the text) and changed the
         hover state from a white tint (which made sense over
         transparent, not over a filled background) to solidifying
         to full opacity brand-primary instead.
   v2.4: Hover direction was backwards - base fill is dark
         (80%-opacity brand-primary), and hover was going to 100%
         opacity of that same dark colour, darker still, not the
         lighter highlight a hover state should read as. Changed
         hover to var(--brand-orange), the accent colour already
         used for every other hover state on the site (nav links,
         footer links, comic-card links, chevrons, close button) -
         both genuinely lighter than the dark base and consistent
         with the rest of the site's interaction language.
   v2.5: Removed .hero-cta-btn entirely. Rather than keep fixing the
         overlay button's shape/legibility, Paul reduced the click
         path instead: the home page gallery now links straight to
         the reader from both the thumbnail and the card links (see
         index.html and whatever-comic-gallery.css), so a prominent
         in-page "read comic" call to action on the synopsis page
         isn't needed the same way - reading the comic no longer
         requires visiting the synopsis page at all, unless someone
         wants the fuller "About" context. .synopsis-cover's
         position: relative was removed along with it, added
         solely to anchor this button.
   ============================================================ */

:root {
    --team-bg: #fcf49d;
    --team-ring: #c9a94a;
}

/* --- 1. PAGE BACKGROUND --- */
body.content-page {
    background-color: var(--stone-bg);
    margin: 0;
    padding: 0;
}

/* --- 2. THE PAPER SHEET (ported from destination.css) --- */
.paper-sheet {
    background-color: #ffffff;
    max-width: 1250px;
    margin: 0 auto;
    padding-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* --- 3. THE TEXT RAIL (ported from destination.css) --- */
.text-rail {
    max-width: 960px;
    margin: 0 auto;
    width: 90%;
    padding: 40px 0 20px 0;
    box-sizing: border-box;
}

/* --- 4. COMIC COVER STRIP --- */
.synopsis-cover {
    line-height: 0;
    margin-bottom: 0;
}

.synopsis-cover img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #dddddd;
}

/* --- 5. SYNOPSIS HEADER TYPOGRAPHY --- */
.text-rail h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    margin: 30px 0 5px 0;
}

.text-rail h3.tagline {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    margin: 0 0 15px 0;
}

.text-rail h2.comic-title {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--brand-primary);
    margin: 0 0 20px 0;
}

.text-rail p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #333333;
    margin: 0 0 20px 0;
}

.text-rail p a, .text-rail .skip-intro a {
    color: var(--link-accent);
    font-weight: 600;
    text-decoration: none;
}

.text-rail p a:hover, .text-rail .skip-intro a:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-orange);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.skip-intro {
    margin-top: 10px;
}

/* --- 6. MEET THE TEAM PANEL --- */
.team-panel {
    background-color: var(--team-bg);
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
}

.team-panel .text-rail {
    padding: 0;
}

.team-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    margin: 0 0 20px 0;
}

.team-member {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 20px 0;
}

.team-portrait {
    flex: 0 0 140px;
}

.team-portrait img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 5px solid var(--team-ring);
}

.team-bio {
    flex: 1;
}

.team-bio h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.team-bio p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
    margin: 0 0 12px 0;
}

.team-bio a {
    color: var(--link-accent);
    font-weight: 600;
    text-decoration: none;
}

.team-bio a:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-orange);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.team-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.15);
}

.team-note {
    padding: 20px 0;
}

.team-note h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.team-note p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333333;
    margin: 0;
}

/* --- 7. RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1250px) {
    .paper-sheet {
        box-shadow: none;
    }
}

@media (max-width: 700px) {
    .text-rail {
        width: 92%;
        padding: 25px 0 15px 0;
    }
    .text-rail h1 {
        font-size: 24px;
    }
    .team-heading {
        font-size: 24px;
    }
    .team-member {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }
    .team-bio {
        text-align: left;
    }
}