/* ----------------------------------------------------------- soul garden -- */

/* A technical director should not have to wonder whether buying the character
   layer means touching a token. */
.soul-decouple {
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
    margin-left: calc(var(--rail) + 1.5rem);
    padding-left: 1.2rem;
    border-left: 2px solid color-mix(in srgb, var(--creek) 60%, transparent);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--night-ink-soft);
    max-width: 68ch;
}

.soul-decouple strong {
    color: var(--night-ink);
}

/* The familiar handle, and the point where it breaks. */
.soul-card {
    margin-top: clamp(1.5rem, 3vw, 2rem);
    margin-left: calc(var(--rail) + 1.5rem);
    font-size: var(--step-1);
    line-height: 1.55;
    color: var(--night-ink-soft);
    max-width: 64ch;
}

.soul-market {
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-left: calc(var(--rail) + 1.5rem);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--night-ink-soft);
    max-width: 66ch;
}

.soul-market a {
    color: var(--honey);
    text-decoration-color: color-mix(in srgb, var(--honey) 45%, transparent);
}

.soul-market a:hover {
    color: var(--lantern);
}

.soul-market em {
    color: var(--night-ink);
    font-style: italic;
}

/* The claim the whole Souls section rests on, so it is set like one. */
.soul-card em,
.soul-card strong {
    color: var(--night-ink);
}

@media (max-width: 620px) {
    .soul-decouple,
    .soul-card,
    .soul-market {
        margin-left: 0;
    }
}

/* $FAI is economics, not protocol, so it does not get a third equal cell. */
.soul-economy {
    position: relative;
    margin-top: clamp(2rem, 4vw, 3rem);
    /* Flush with the crossing panel above it. Standing off the rail it was
       76px narrower than the panel — "two card widths in one chapter". */
    padding: clamp(1.4rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--honey) 28%, transparent);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 60% 120% at 0% 0%, rgba(255, 243, 194, 0.07), transparent 70%),
        var(--night-surface);
}

.soul-economy h3 {
    font-size: var(--step-1);
    color: var(--lantern);
    margin-bottom: 0.6rem;
}

.soul-economy p {
    max-width: var(--measure);
}

/* A panel-wide box holding one measure-wide column left a third of itself
   bare. It takes the same shape as the crossing panel above it: the heading
   in the margin, the prose at the measure beside it. */
@media (min-width: 960px) {
    .soul-economy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
        column-gap: clamp(2rem, 4.5vw, 5rem);
        align-items: start;
    }

    .soul-economy h3 {
        margin-bottom: 0;
    }
}

/* This paragraph's bold is a clause, not a lead-in: promoted to a block by
   the chapter's lead-in rule, the sentence continued on the next line with
   ", or take the other's word" — a paragraph that began with a comma. */
.soul-economy p > strong:first-child {
    display: inline;
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
}

.soul-economy .hero-buttons {
    margin-top: 1.5rem;
}

/* .text-link's copper ink is tuned for the parchment chapters. This panel is
   the one place it lands on --night-surface, where it measures 1.67:1 and all
   but disappears. The night context borrows the lantern the heading above it
   already uses. */
.soul-economy .text-link {
    color: var(--lantern);
    text-decoration-color: color-mix(in srgb, var(--lantern) 55%, transparent);
}

.soul-economy .text-link:hover {
    color: var(--night-ink);
}


/* The crossing. Pillar three was the only one proved by description while the
   other two were proved by scene, in a document that teaches a reader to
   expect scenes. */
.soul-crossing {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--sage) 16%, transparent);
    background: var(--surface-night);
    box-shadow: var(--membrane-night);
}

.soul-crossing h3 { margin: 0 0 0.8rem; font-size: var(--step-2); }

/* The crossing carries its own side head (side-head.css), and it keeps the
   rail every other chapter head keeps, with Maeve's own sigil standing in it
   where a chapter's rune would. It used to drop the rail — "its head has no
   rune" — and stack the sigil above the label, which gave this one chapter a
   different head grammar from the rest ("two stacked headings in two faces,
   it reads as a leftover label") and left its margin plant nothing to grow
   from: a judge measured the stem starting 330px below the seal. The sigil is
   this chapter's seal, and now the plant grows out of it. */
.crossing-head > .sigil {
    justify-self: center;
    margin-top: 0.1rem;
}

/* Centred in the rail; below the rail's breakpoint the head is one column,
   and centred there it stood alone mid-line above left-set titles, the one
   chapter whose seal did not start the line. */
@media (max-width: 959px) {
    .crossing-head > .sigil {
        justify-self: start;
    }
}

/* The pocket, and nothing the shared rule already says. This block was a
   copy-paste of .turn-code that carried two values its source had since
   moved past: a `max-width: 72ch` measured against a frozen 12.5px font, so
   it stayed ~542px at every viewport while the prose beside it grew — the one
   width-capped payload on a site whose rule is "one treatment at every width,
   the payload is the evidence" — and `line-height: 1.65`, the value the
   density pass replaced with 1.5 everywhere it reached. */
.soul-crossing .turn-code {
    margin: 1.2rem 0;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--night-ink) 6%, transparent);
    background: color-mix(in srgb, #12180f 58%, transparent);
    font-size: 0.78125rem;
}

.soul-crossing .turn-code code { white-space: pre-wrap; }
.soul-crossing .soul-market { max-width: 62ch; }