/* ==========================================================================
   Editorial content pages
   --------------------------------------------------------------------------
   Shared by the guide and About. Composition only — every value resolves
   through the tokens in css/design-system.css.

   These pages are read, not operated, so the ground is quiet and the measure
   is short. One column, no cards, no boxes: structure comes from hairlines
   and space, as everywhere else in the system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page header

   Replaces the coloured hero band these pages used to open with. A dark
   gradient block violates the continuous-canvas rule and, on a page whose
   job is to be believed, it reads as marketing rather than as a document.
   -------------------------------------------------------------------------- */

/* The header, prose and closing CTA all sit inside one .framed column (see
   design-system.css 4d), so they no longer set their own measure — the frame
   sets it, and everything inside shares one left and right edge by
   construction. They keep a shared horizontal pad so text clears the rules. */
.framed > .page-header,
.framed > .prose,
.framed > .page-cta {
    padding-left: var(--s5);
    padding-right: var(--s5);
}

/* --------------------------------------------------------------------------
   1b. The rail

   The frame now spans the full navigation width, which is far wider than a
   readable measure. Left as one column that space would read as hollow, so
   the width is used rather than padded out: a fixed left rail carries the
   section label and the contents list, and prose runs in the main column at
   its own measure.

   Below lg the rail collapses and everything stacks, which is why the grid
   is declared inside the media query rather than switched off in one.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .framed > .page-header > div,
    .framed > .prose {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        column-gap: var(--s6);
    }

    /* Header: the label sits in the rail, level with the first line of the
       title rather than stacked above it. */
    .page-header > div > .eyebrow {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        padding-top: 0.75rem;
    }
    .page-header h1,
    .page-header .page-standfirst,
    .page-header .about-mission,
    .page-header .about-cta {
        grid-column: 2;
    }

    /* The portrait uses the rail the eyebrow already occupies — the one part
       of this header that was otherwise empty all the way down. Row 2 puts it
       under the "About" label and level with the standfirst, so it reads as a
       byline beside the argument rather than a picture above it. */
    /* Fills the rail — 14rem, so a little larger than the 210px it runs at on
       the homepage. The rail width is fixed by the grid, and the 48px column
       gap is outside it, so this cannot crowd the headline beside it.

       Spans every header row rather than sitting in one, so it starts level
       with the headline without forcing that row as tall as the image. Same
       technique the prose contents list uses further down. The small top
       offset optically aligns the image with the headline's cap height, which
       sits a little below its box. */
    .about-portrait {
        grid-column: 1;
        grid-row: 1 / span 200;
        align-self: start;
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Prose: everything runs in the main column by default. */
    .prose > * {
        grid-column: 2;
    }

    /* Contents list moves into the rail and follows the reader down it.
       `span 200` rather than `1 / -1` because the rows here are implicit —
       -1 would resolve to the end of the explicit grid, which is row 1, and
       the list would not travel. */
    .prose > .toc {
        grid-column: 1;
        grid-row: 1 / span 200;
        align-self: start;
        position: sticky;
        top: var(--s4);
        margin: 0;
    }

    /* Two up, but inside the main column like everything else. It previously
       spanned 1/-1 while the paragraphs above it sat in the main column and
       the closing CTA centred on the whole frame — three different left edges
       on one page, which is exactly what read as broken. One edge now. */
    .prose > .value-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--s6);
        max-width: 100%;
    }
    /* With two per row the second item's rule must read as a top border too,
       so the first-child override is widened to the first row. */
    .value-list li:nth-child(2) {
        border-top: 1px solid var(--ink);
    }

    /* The closing CTA joins the same column and the same left edge as
       everything else — see .page-cta below for why it is no longer centred. */
    .framed > .page-cta {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        column-gap: var(--s6);
    }
    .framed > .page-cta > div {
        grid-column: 2;
    }
}

.page-header {
    padding-top: var(--s8);
    padding-bottom: var(--s7);
    border-bottom: 1px solid var(--rule);
}
.page-header h1 {
    margin: 0 0 var(--s4);
}
.page-header .page-standfirst {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 58ch;
    margin: 0;
    text-wrap: pretty;
}
.page-header .page-standfirst + .page-standfirst {
    margin-top: var(--s3);
}
/* About's single action closes the text column rather than taking a
   bordered .page-cta band of its own, which read as heavier than the
   two paragraphs above it. */
.page-header .about-cta {
    margin: var(--s5) 0 0;
}
/* About's mission line leads the text column, above the headline. Not a
   direct-child .eyebrow, so the rail rule above leaves its label alone. */
.page-header .about-mission {
    margin: 0 0 var(--s5);
    max-width: 58ch;
}
.page-header .about-mission .eyebrow {
    margin-bottom: var(--s1);
}
.page-header .about-mission-text {
    font-size: var(--t-lead);
    line-height: 1.4;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    text-wrap: pretty;
}

/* Stacked (below lg the rail collapses), the portrait closes the header
   rather than sitting in a column of its own. Smaller here — at rail width it
   would dominate a phone screen before a word of the argument is read.

   Scoped to a max-width query, not left bare. A media query adds no
   specificity, so a bare rule here — later in the file than the min-width
   block above — silently won at every width and pinned the portrait to 132px
   on desktop too. */
@media (max-width: 991.98px) {
    .about-portrait {
        width: 132px;
        margin-top: var(--s5);
    }
}

/* --------------------------------------------------------------------------
   2. Prose

   62ch is the measure; anything wider and the eye loses the line return.
   -------------------------------------------------------------------------- */

.prose {
    padding-top: var(--s8);
    padding-bottom: var(--s8);
}
.prose > * {
    max-width: 62ch;
}
.prose h2 {
    font-size: var(--t-h3);
    margin: var(--s7) 0 var(--s3);
}
.prose h2:first-child {
    margin-top: 0;
}
.prose h3 {
    font-size: 1.125rem;
    margin: var(--s5) 0 var(--s2);
}
.prose p {
    color: var(--ink-2);
    margin: 0 0 var(--s3);
}
.prose ul,
.prose ol {
    color: var(--ink-2);
    margin: 0 0 var(--s3);
    padding-left: 1.15rem;
}
.prose li {
    margin-bottom: 0.5rem;
}
.prose li::marker {
    color: var(--ink-4);
}
.prose strong {
    color: var(--ink);
    font-weight: 600;
}

/* A figure quoted inline in running text. */
.prose .fig {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* Section divider inside long prose. */
.prose hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--s7) 0;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Callout

   For the one or two places a page has to step out of the argument and say
   something directly — a limit, a caution. A tonal panel with a heavy left
   rule: the tone separates it from running prose without a fill colour, which
   would be the loudest thing on the page.
   -------------------------------------------------------------------------- */

.callout {
    border-left: 2px solid var(--ink);
    padding: var(--s4);
    margin: var(--s6) 0;
    background-color: var(--paper-tint);
    background-image: var(--tex-diag), var(--tex-grain);
    background-size: var(--tex-diag-size), var(--tex-grain-size);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout .eyebrow {
    margin-bottom: var(--s1);
}
.callout p {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. Values list (About)

   Was a row of coloured circular icons. The icons carried no information the
   headings did not already carry, and four saturated fills on a monochrome
   page were the only colour on it. Numbered hairline entries instead, which
   also match the step list on the homepage.
   -------------------------------------------------------------------------- */

/* Both selectors deliberately. `.prose ol` above is (0-1-1) and outranked a
   bare `.value-list` (0-1-0), so its 1.15rem list indent won and pushed all
   four blocks ~18px right of the prose above them. `.prose .value-list` is
   (0-2-0) and takes it back; the bare class keeps the rule working if the
   list is ever used outside .prose. */
.prose .value-list,
.value-list {
    list-style: none;
    margin: var(--s6) 0 0;
    padding: 0;
    max-width: 100%;
}
.value-list li {
    border-top: 1px solid var(--rule);
    padding: var(--s5) 0;
    margin: 0;
}
.value-list li:first-child {
    border-top: 1px solid var(--ink);
}
.value-list .value-n {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    letter-spacing: 0.08em;
    color: var(--ink-3);
    margin-bottom: var(--s2);
}
.value-list h3 {
    font-size: var(--t-h3);
    margin: 0 0 var(--s2);
}
.value-list p {
    color: var(--ink-2);
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. Closing call to action
   -------------------------------------------------------------------------- */

/* Left-aligned, like everything else in the column. It was centred, which put
   its heading, copy and button on three different axes — none of them the page's
   single content edge. Centring the block also hid the problem from a check that
   measured the wrapper rather than the text inside it. */
.page-cta {
    border-top: 1px solid var(--rule);
    padding-top: var(--s8);
    padding-bottom: var(--s8);
    text-align: left;
}
.page-cta h2 {
    margin: 0 0 var(--s3);
}
.page-cta p {
    color: var(--ink-2);
    max-width: 56ch;
    margin: 0 0 var(--s5);
}

/* --------------------------------------------------------------------------
   6. In-page contents

   A guide long enough to need one. Hairline-separated links, no box.
   -------------------------------------------------------------------------- */

.toc {
    border: 1px solid var(--rule);
    border-top: 1px solid var(--ink);
    border-radius: 0 0 var(--r-md) var(--r-md);
    background-color: var(--paper-tint);
    background-image: var(--tex-diag), var(--tex-grain);
    background-size: var(--tex-diag-size), var(--tex-grain-size);
    padding: var(--s4);
    margin: 0 0 var(--s7);
}
.toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--s6);
}
/* In the rail it is a single narrow column, not two. */
@media (min-width: 992px) {
    .toc ol {
        columns: 1;
    }
    .toc {
        border-radius: var(--r-md);
    }
}
.toc li {
    margin-bottom: 0.4rem;
    font-size: var(--t-small);
    break-inside: avoid;
}
/* Underline comes from the global main-link rule and is left in place —
   these are navigation within a document, and colour alone should not mark
   them. Only the colour is set here. */
.toc a {
    color: var(--accent);
}
.toc a:hover {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

@media (max-width: 575.98px) {
    .toc ol {
        columns: 1;
    }
}