/* ------------------------------------------------------------ side head -- */

/* Why every wide shape read as a blog beside a wall.
   Two reviewers, independently, put the same thing second on their list: at
   1440 and 1024 the prose chapters are a left-pinned ~660px column with 500
   to 700px of empty ground beside it — "a blog layout, not a plant filling
   its pot". Widening the measure is not the answer; 66ch is the line a person
   reads. Imagery is the AAA answer, and this site has three pictures. What a
   magazine does with a text chapter and room to spare is the side head: the
   title stands in the margin beside the body it introduces, and stays with
   it as the reader scrolls, so the margin is never empty while there is
   anything to read.

   Opt-in by markup. A chapter whose body is prose wraps its head and body
   (and the figure between them, if it has one) in .chapter-spread, with the
   body in .chapter-body. A chapter whose body is a full-width instrument —
   the ledger, the timeline, the walkthrough, the counterfactual, the
   investors' own two-column shell — has no spread and keeps its head above,
   as before. What follows the spread — a card grid, a band, the doors — is
   ordinary flow under it.

   The spread is its own grid, not the container. A sticky grid item is held
   inside its GRID CONTAINER, not its grid area: with the whole container as
   the grid, the head kept sticking past its own row and rode over the card
   grid and the crossing panel below it. A spread that holds only the head,
   the figure and the body is as tall as the body, and the head cannot leave
   it. Gated by .dream-loop/stickyoverlap.mjs.

   From 1100px, the same threshold as the rest of the wide layout. Below it
   the wrappers are inert divs and the chapter stacks as it always did. */
/* The vein's colour belongs to the chapter, not to the hairline that used to
   be the only thing wearing it: styles/layout/stem.css draws a whole plant in
   this colour now, and needs it at every width the system might measure at.
   --vein-lit is the lamp on the branch the reader is level with. */
.chapter-spread {
    /* A shade deeper than the rule it was: on parchment the stem measured 15-27
       luminance levels off its ground, "at the threshold of visibility, which
       is exactly how a print artifact looks". */
    --vein: color-mix(in oklab, var(--day-rule) 68%, var(--copper));
    --vein-lit: var(--copper);
}

/* Moss, not teal. A reviewer sampled the night stem at RGB(84,119,122), hue
   about 185, against a night of hue about 100: "the plant is 85 degrees of hue
   away from the world it grows in. Two light sources is the thesis; the page
   has three, and the third one is the one the code drew." It was --creek, a
   surface colour, mixed toward the rule. A plant is GROWN, so it wears the
   grown half of the model — the night's own green, lifted — and the lamp on the
   branch a reader is level with is the MADE half. */
.chapter-night .chapter-spread,
.turn-band .chapter-spread {
    --vein: color-mix(in oklab, var(--sage) 70%, var(--night-bg));
    --vein-lit: var(--lantern);
}

/* The figure opens the chapter on every shape, above the head, so the
   chapter's anatomy does not depend on the viewport (a reviewer found the
   image before the title on a desktop and after it on a tablet). */
.chapter-spread > figure:first-child {
    margin-top: 0;
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* The head is the title, and only the title. A lead paragraph left in the
   margin column made the head taller than the body it stood beside —
   #business and #souls had a three-line h2, a six-line lead and a body of
   two paragraphs, so the measure column emptied out under them and the head
   could never stick. The lead opens the body instead, level with the title. */
.chapter-body > :first-child {
    margin-top: 0;
}

.chapter-body > .chapter-lead {
    margin-bottom: 1.1em;
}

/* Blocks that stood off the rail on their own, when they sat under a
   spanning head, sit in the body now; the body carries the offset, once,
   where there is a rail to stand off (below, and in the column above). */
.chapter-body > .mission-felt {
    padding-left: 0;
}

.chapter-body > .mission-turn,
.chapter-body > .soul-decouple,
.chapter-body > .soul-market {
    margin-left: 0;
}

/* Stacked, between the phone and the wide layout, the body stands off the
   rail like the head's own text does, so a chapter has one left edge. A
   reviewer counted three per screen at 1024: the title at the rail, the
   paragraphs at the gutter, a card at the rail again. */
@media (min-width: 621px) and (max-width: 959px) {
    .chapter-body {
        padding-left: calc(var(--rail) + 1.5rem);
    }
}

/* Stacked, a head that ends in a note keeps only a paragraph's worth of
   room under it. With the full head margin after the disclosure's own
   margin, every phone chapter opened on "70-80px of nothing between the
   accordion and the first paragraph". */
@media (max-width: 959px) {
    .chapter-head:has(.deeper, .mission-turn) {
        margin-bottom: clamp(1.1rem, 3vw, 1.75rem);
    }
}

/* Inside the category card the disclosure is the last thing, and the card's
   padding is its room; the disclosure's own bottom margin left 60px of empty
   panel under its rule. */
.mission-turn .deeper {
    margin-bottom: 0;
}

/* From 960px, not 1100. At 1024 the stacked layout left the seal alone in a
   56px margin and the right quarter of the screen empty for whole chapters
   — neither grid. A 60ch measure and the fluid h2 (34px there) give the
   margin column about 260px, which holds a three-line title. */
@media (min-width: 960px) {
    .chapter-spread {
        display: grid;
        /* The body column IS the measure — one number, so the column can
           never hold a line longer than the paragraph rule allows or leave a
           strip the paragraph cannot reach. */
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
        column-gap: clamp(2rem, 4.5vw, 5rem);
        align-items: start;
        margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    }

    /* When nothing follows the spread, the chapter's own padding is the
       room; another 40px under the last line was counted as a void. */
    .chapter-spread:last-child {
        margin-bottom: 0;
    }

    .chapter-spread > .chapter-head {
        grid-column: 1;
        position: sticky;
        top: calc(var(--header-height) + 1.5rem);
        margin-bottom: 0;
    }

    .chapter-spread > .chapter-body {
        grid-column: 2;
        min-width: 0;
        padding-left: 0;
    }

    /* The lead figure opens the chapter, above both columns. */
    .chapter-spread > figure {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-top: 0;
        margin-bottom: clamp(2rem, 4vw, 3rem);
    }

    .chapter-spread:has(> figure) > .chapter-head,
    .chapter-spread:has(> figure) > .chapter-body {
        grid-row: 2;
    }

    /* The title measures were set for a head spanning 1100px. In the margin
       column the column is the measure. */
    .chapter-spread > .chapter-head h2,
    .chapter-spread > .chapter-head .chapter-lead {
        max-width: none;
    }

    /* The margin column holds the chapter's supporting material under its
       title — the disclosure, the category card — where a printed margin
       keeps its notes. Pinned, the title used to hang over 400-700px of
       empty column; the notes are what a margin is for. */
    .chapter-head .deeper,
    .chapter-head .mission-turn {
        margin-top: 1.4rem;
        margin-left: 0;
        max-width: none;
    }

    /* And the stem the chapter grows on.
       The notes fill 60-100px of a column that stands beside 2,000px of body,
       so both reviewers went on finding 300-550px of bare margin under a
       pinned title. A margin does not have to hold words to be doing
       something: this is the venation doctrine at page scale — a vein enters
       at full weight where the chapter starts and thins to nothing as it
       descends, so the column reads as the stem the chapter is growing from
       rather than as a column that ran out. It lives on the spread, not on
       the sticky head, so it stays with the chapter while the title rides. */
    .chapter-spread {
        position: relative;
    }

    .chapter-spread::before {
        content: '';
        position: absolute;
        left: calc(var(--rail) / 2 - 1px);
        top: 0.6rem;
        bottom: clamp(2rem, 6vw, 5rem);
        width: 2px;
        border-radius: 2px;
        pointer-events: none;
        background: linear-gradient(180deg,
            var(--vein) 0%,
            color-mix(in srgb, var(--vein) 40%, transparent) 38%,
            transparent 92%);
        /* Narrowing as it descends, the way a stem does. */
        clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%);
    }
}