/* ============================================================
   WHATEVER PEOPLE SAY I AM - ESSAY / FEATURE PAGES (v1.7)
   Covers: individual feature/essay articles (feature-NN-NN.html)
   linked from features-gallery-01.html's theme grids.
   Companion to chassis.css - loads brand tokens (--brand-primary,
   --link-accent, --brand-orange, --stone-bg) from chassis.css.

   Layout mechanic is identical to whatever-legal.css's privacy
   page: body.content-page carries the stone colour across the
   full page height, .paper-sheet is a centred white sheet
   (max-width + margin: 0 auto) sitting on top of it, flush against
   the nav and footer since there's no vertical margin on it, only
   horizontal centring - equal stone margin either side is just
   what that centring naturally gives you.

   v1.0: First build, against feature-01-01.html ("Barriers to
         Engagement, Nottingham Contemporary"). Built from a
         readability-parsed fetch of the live page, not the raw
         HTML source, so a few structural calls are inferred
         rather than confirmed - see the specific notes below and
         the reply this was delivered in.
         - H1 is Poppins, weight 700 (true bold, per Paul's
           explicit instruction) - a deliberate departure from
           every other h1 on the site (gallery-intro, synopsis h1,
           team-heading, legal-content h1), which are all weight
           400/500 and never true bold. This is intentional here,
           essay titles are meant to read heavier than the rest of
           the site's headings.
         - Image filenames are NOT changed anywhere - every image
           reference in feature-01-01.html keeps its original
           legacy filename (embed-01-arts-*.jpg etc.) so the old
           asset files can be dropped straight in without renaming,
           per Paul's explicit instruction.
         - The line "Part of the purpose of The Bigger Picture..."
           was treated as a genuine h2 lede/standfirst, matching how
           h2 is used as a mid-article section marker on the
           destination.css-style essay pages seen earlier in this
           project - this is inferred from the parsed content's
           heading level, not confirmed against real markup.
         - Inline images + captions (.story-inline-image / .stone-caption)
           are a new component - no existing Whatever page had this
           pattern yet. Loosely follows the shape of destination.css's
           .story-inline-image / .stone-caption (image, then a
           tinted caption bar directly below it) but rebuilt against
           Whatever's own tokens rather than thinkamigo's hardcoded
           blue.
         - Blockquote and the closing "arts venues mentioned" links
           list are likewise new components, built to match the
           site's established link/typography conventions (bold
           links, no underline until hover, orange decoration).
   v1.1: Renamed classes to match destination.css's actual vocabulary
         rather than parallel Whatever-specific names for the same
         thing, once a second destination.css-style page (the Think-
         QR story) confirmed the pattern was near-identical: this is
         one reused framework, not two independently-invented ones,
         so the class names should read as one convention.
         essay-content -> text-rail, essay-image -> story-inline-
         image, essay-caption -> stone-caption, essay-links ->
         links-section. essay-attribution and essay-share kept as
         their own names - neither has a shown equivalent in either
         destination.css reference page. Also added blockquote
         footer styling (named-attribution, e.g. "Paul Fillingham"
         under a pull-quote) and .orange-rule (a rule sitting under
         an h1) - neither used on feature-01-01.html itself, but
         both are part of destination.css's own vocabulary and
         worth having ready rather than reinventing them the first
         time a future essay page actually needs one.
   v1.2: Same class of bug as the earlier features-gallery dividers -
         .links-section's border-top was constrained to the 780px
         .text-rail column, not the full 1250px paper-sheet the way
         destination.css's actual <hr> does. Added .rule-grey-paper,
         matching destination.css's own class of that exact name
         (width: 100%, no margin), and restructured
         feature-01-01.html so it sits as a direct child of
         .paper-sheet between two separate .text-rail articles,
         rather than inside either one - same structural pattern as
         the Think-QR reference page's plain inline-styled <hr>.
   v1.3: Added .story-inline-video, a responsive 16:9 iframe wrapper
         sharing the same caption treatment as .story-inline-image -
         needed once the Retired theme's feature-01-07 turned out to
         open with a YouTube embed rather than a lead image. Also
         confirmed .links-section already handles a plain-text
         citation entry (no <a>, just an <li>) without any CSS
         change needed - several Retired-theme features mix real
         links with un-hyperlinked academic citations in the same
         closing list.
   v1.4: Removed the "Share this feature: Tweet" line, and the
         .essay-share component entirely, from all seven built
         feature pages (01 through 07) - Paul's call that Twitter
         links should be stripped sitewide, the platform having
         become discredited since these essays were originally
         written. STANDING RULE for every remaining theme's
         features: do not carry the Twitter/X share line over when
         converting - the legacy source pages all have one, in the
         same "Share this feature: Tweet" shape, and it should be
         dropped rather than rebuilt each time.
   v1.5: Added .essay-footnote, a small-print component for sourced
         citations - needed for feature-03-12's asterisked note on
         the nuclear waste claim, which cites a source (nti.org)
         inline rather than in the closing links list. Paul flagged
         that the Refugee theme's features generally run to a
         slightly different format than other themes - interview-
         based first-person accounts, images supplied by James
         Walker rather than Paul - which is consistent with the
         named-subsection structure, translator credits, and varying
         closing link counts already seen across this theme's pages.
   v1.6: Added .text-rail ul/li - a genuine mid-body bulleted list
         (feature-04-07's Tier 5 visa categories, originally
         <br>-separated text in the legacy source) needed real list
         styling for the first time, matching paragraph typography
         rather than the bold link-list styling used in
         .links-section.
   v1.7: Added .essay-byline for author credit lines sitting right
         under the lede - needed for feature-05-01 ("James Walker"),
         the Locked Down theme's video-interview roundup. The
         theme's other seven features are first-person student
         essays sharing one identical closing attribution line
         ("'Degrees of Isolation' is based on the experiences of
         University students who were interviewed between 2020 and
         2022") and, in every one of those seven, a closing links
         section that was commented out with placeholder "Text"
         content in the legacy source - i.e. deliberately disabled,
         never filled in - so none of them get a closing links
         section on rebuild.
   ============================================================ */

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

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

/* --- 3. THE TEXT RAIL --- */
.text-rail {
    max-width: 780px;
    margin: 0 auto;
    width: 90%;
    padding: 40px 0 20px 0;
    box-sizing: border-box;
}

/* --- 4. ESSAY TYPOGRAPHY --- */
.text-rail h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.text-rail h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #333333;
    line-height: 1.5;
    margin: 0 0 25px 0;
}

.essay-byline {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #555555;
    margin: 0 0 22px 0;
}

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

.text-rail ul {
    margin: 0 0 22px 0;
    padding-left: 22px;
}

.text-rail li {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 6px;
}

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

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

.essay-attribution {
    font-style: italic;
    color: #555555;
}

.essay-footnote {
    font-size: 13px;
    line-height: 1.6;
    color: #777777;
}

/* --- 5. PULL-QUOTE --- */
.text-rail blockquote {
    margin: 40px 0;
    padding: 5px 0 5px 30px;
    border-left: 4px solid var(--brand-orange);
}

.text-rail blockquote p {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: #333333;
    margin: 0;
}

.text-rail blockquote footer {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    color: #666666;
    margin-top: 12px;
}

/* --- 5b. ORANGE RULE --- */
/* Not used on feature-01-01.html, but part of the reused
   destination.css vocabulary (sits under an h1) - kept ready for
   essay pages that want it. */
.orange-rule {
    width: 250px;
    height: 2px;
    background-color: var(--brand-orange);
    margin: 0 0 20px 0;
}

/* --- 6. INLINE IMAGE + CAPTION --- */
.story-inline-image {
    margin: 40px 0;
    width: 100%;
}

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

.stone-caption {
    background-color: var(--stone-bg);
    padding: 10px 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #666666;
    margin: 0;
}

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

/* --- 6b. RESPONSIVE VIDEO EMBED --- */
/* Same wrapper/caption pattern as .story-inline-image, but for a
   YouTube (or similar) iframe instead of an <img> - feature-01-07
   opens with a video rather than a lead image. 16:9 aspect ratio
   maintained responsively via the padding-top percentage trick. */
.story-inline-video {
    margin: 40px 0;
    width: 100%;
}

.story-inline-video .video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border: 1px solid #dddddd;
    box-sizing: border-box;
}

.story-inline-video .video-frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.stone-caption a:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-orange);
    text-underline-offset: 3px;
}

/* --- 7b. FULL-WIDTH DIVIDER --- */
/* Matches destination.css's .rule-grey-paper exactly - sits as a
   direct child of .paper-sheet, outside both .text-rail articles,
   so it spans the full paper width with no margin, same as the
   plain inline-styled <hr> in the Think-QR reference page. */
.rule-grey-paper {
    width: 100%;
    height: 1px;
    background-color: #dddddd;
    margin: 0;
    padding: 0;
    border: none;
    display: block;
}

/* --- 8. RELATED LINKS LIST --- */
.links-section {
    margin-top: 0;
    padding-top: 30px;
}

.links-section h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.links-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.links-section li {
    margin-bottom: 10px;
}

.links-section a {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--link-accent);
    text-decoration: none;
}

.links-section a:hover {
    text-decoration: underline;
    text-decoration-color: var(--brand-orange);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* --- 9. RESPONSIVE --- */
@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: 26px;
    }
    .text-rail blockquote {
        padding-left: 20px;
    }
    .text-rail blockquote p {
        font-size: 19px;
    }
}