/* Section life — C0147 to C0152.

   The problem this file exists for: on the inner pages a section is an eyebrow,
   a headline, one paragraph and a hairline list. The head occupies the left half
   of a 1440px canvas and the right half is empty paper. Mohamed, reviewing live:
   the sections "feel like too dead".

   The cure is NOT decoration. Every primitive here renders information the
   approved copy already carries: a list that IS a sequence is drawn as a
   sequence, a list that IS a set of rules carries its state in form, a section
   that describes a boundary gets that boundary drawn. No copy is written, moved
   between sections, or invented. No metric, logo, name or date appears.

   Composition rules this file obeys:
   - v2.css owns the tokens, the type scale and the 144px `.sec` rhythm. Nothing
     here redefines them; `--sl-*` is the only new namespace.
   - site-craft.css owns C0139 masked headings and C0140 drawn rules; those act
     on `h2.h2` and on `.grid2/.grid3/.proof/.rows/.faq/.spec`. Nothing here
     targets those selectors, so the two never animate the same element.
   - inner-craft.css owns C0141 chassis, C0142 dgrid, C0143 cfield, C0144 held
     statement, C0145 plan columns, C0146 story spread. Reused here rather than
     rebuilt: C0141's `--ic-ease`/700ms entrance contract, C0143's hover language
     (a column rule warming to `--blue-line`), C0146's scale-in accent rail.
   - `.blist` (C0029) keeps its markup exactly. C0149/C0150/C0151 are variants of
     it, so a page changes a class attribute, never a list item.

   Motion contract (Mohamed, 2026-08-24, after Radwan Studio): entrances are 600
   to 800ms expo-out and dramatic; interface responses stay at or under 350ms.
   Entrances here ride `data-home-in`, the same attribute and the same reading
   -zone trigger site-craft.js already uses. Progressive enhancement: the armed
   state is opt-in via `html.slife-armed`, which only section-life.js sets, so
   with JavaScript off every primitive renders in its finished state.           */

:root{
  --sl-ease:cubic-bezier(.19,1,.22,1);   /* expo-out, the site's entrance easing */
  --sl-enter:720ms;                      /* inside Mohamed's 600-800ms entrance band */
  --sl-rise:14px;                        /* vertical only; lateral travel is capped at 12px */
}

/* ========================================================================== */
/* C0147 Split section head — the layout host                                 */
/* The empty right half stops being empty. `.sec-head` keeps its own type and  */
/* measure; the wrapper only decides where it sits and what sits beside it.    */
/* ========================================================================== */

.sec-split{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(40px,4.4vw,72px);
  align-items:start;
  margin-bottom:56px;                    /* the rhythm `.sec-head` already sets */
}
/* Vertical composition, tied to the left column's height.
   The head always starts at the section's top line, because that alignment is
   shared with every other section on the page and breaking it would make the
   rhythm look arbitrary. The ASIDE is the element that moves: it centres itself
   against whatever height the head turns out to be, so a tall head gets a figure
   at its optical middle instead of one pinned to the first line with a hole
   underneath. When the aside is the taller of the two, centring is a no-op and
   the row is governed by the aside, which is the same result as before. */
/* The 56px is the gap to whatever follows the head. When the split IS the last
   thing in the shell there is nothing to be spaced from, and the margin only
   pushes the section's own bottom padding further away: `#handoff` measured
   96px above its content and 152px below. */
.sec-split:last-child{margin-bottom:0}
.sec-split>.sec-head{margin-bottom:0;align-self:start}
.sec-split>.sec-aside{min-width:0;align-self:center}

/* The aside is a column of air by design: it must never introduce a scrollbar
   and must never be the reason a section grows taller than its content. */
.sec-split>.sec-aside>*{max-width:100%}

@media (max-width:1080px){
  .sec-split{grid-template-columns:minmax(0,1fr);gap:36px;margin-bottom:48px}
  .sec-split>.sec-head{max-width:760px}
  /* Mohamed's mobile canon: shape zone under text zone, never beside it. */
  .sec-split>.sec-aside{max-width:460px}
}
@media (max-width:760px){
  .sec-split{gap:30px;margin-bottom:40px}
}

/* ---------- C0147 lean rhythm ---------------------------------------------
   A section whose content is thin does not stop being thin because a figure was
   added beside its headline: `#handoff` is a heading plus two sentences inside
   144px of padding top and bottom, so the content occupies about the middle half
   of the band and the section still reads as mostly air.

   `section-life.js` MEASURES each section that carries one of these primitives
   and sets `data-sl-lean` when its content block is under 420px tall. The lean
   step is the next rung down the site's own ladder at every width (144 to 96,
   96 to 72, 72 to 56), never an invented number, so the page rhythm still reads
   as one system. Sections that are already dense are untouched. */
.sec[data-sl-lean="true"]{padding-top:96px;padding-bottom:96px}
@media (max-width:1080px){
  .sec[data-sl-lean="true"]{padding-top:72px;padding-bottom:72px}
}
@media (max-width:760px){
  .sec[data-sl-lean="true"]{padding-top:56px;padding-bottom:56px}
}

/* ========================================================================== */
/* C0148 Drawn section figure                                                 */
/* Inline SVG only. The page supplies the geometry (see the contract); this    */
/* file supplies the ink, the weights and the entrance, so a figure can never  */
/* carry a hard-coded colour and can never drift from the token set.          */
/* ========================================================================== */

.sfig{margin:0;width:100%;max-width:520px}
.sfig svg{display:block;width:100%;height:auto}

/* Ink. Four weights only: structure, boundary, accent, field. */
.sfig .sf-rule{fill:none;stroke:var(--line-2);stroke-width:1}
.sfig .sf-accent{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* A second structural tier. Its only job is to break a set of strokes into an
   uneven texture, so a reader reads "many" instead of counting to five. */
.sfig .sf-faint{fill:none;stroke:var(--line-2);stroke-width:1;opacity:.55}
.sfig .sf-field{fill:var(--ice);stroke:none}
.sfig .sf-node{fill:var(--paper);stroke:var(--edge);stroke-width:1}
.sfig .sf-node-on{fill:var(--blue);stroke:none}

/* On the shell bands the paper node would disappear into the ground. */
.sec-shell .sfig .sf-node{fill:var(--paper)}

/* Night bands keep the same drawing, re-inked. No blue-on-blue: the accent on
   night is `--night-accent`, never `--blue`. */
.sec-night .sfig .sf-rule{stroke:rgba(255,255,255,.18)}
.sec-night .sfig .sf-faint{stroke:rgba(255,255,255,.18);opacity:.55}
.sec-night .sfig .sf-accent{stroke:var(--night-accent)}
.sec-night .sfig .sf-field{fill:rgba(126,166,255,.10)}
.sec-night .sfig .sf-node{fill:var(--night-lift);stroke:rgba(255,255,255,.38)}
.sec-night .sfig .sf-node-on{fill:var(--night-accent)}

/* A figure inside a C0144 held statement sits under the headline in the wide
   cell — that is the ~490px of empty navy Mohamed photographed. C0144 itself is
   untouched: this only positions a child the band did not have before. */
/* Wider here than in a C0147 aside on purpose: the band's wide cell is roughly
   780px at 1440 and a 460px drawing left ~320px of navy still doing nothing. */
.band-hold .sfig{margin-top:44px;max-width:520px}
@media (max-width:900px){.band-hold .sfig{margin-top:32px;max-width:460px}}

/* Entrance: structure draws itself, then the parts settle onto it.
   `pathLength="1"` on the drawn paths normalises every path to one unit, so one
   dash rule covers every figure regardless of its geometry. */
html.slife-armed .sfig .sf-draw{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset var(--sl-enter) var(--sl-ease) var(--sl-d,0ms);
}
html.slife-armed .sfig[data-home-in="true"] .sf-draw{stroke-dashoffset:0}

html.slife-armed .sfig .sf-pop{
  opacity:0;transform:scale(.72);transform-box:fill-box;transform-origin:center;
  transition:opacity 380ms ease var(--sl-d,0ms),
             transform 560ms var(--sl-ease) var(--sl-d,0ms);
}
html.slife-armed .sfig[data-home-in="true"] .sf-pop{opacity:1;transform:none}

html.slife-armed .sfig .sf-fade{
  opacity:0;transition:opacity 520ms ease var(--sl-d,0ms);
}
html.slife-armed .sfig[data-home-in="true"] .sf-fade{opacity:1}

/* Stagger steps. Authored as classes so the markup declares its own choreography
   and the script stays a single observer with no per-element bookkeeping. */
.sfig .sf-s1{--sl-d:0ms}
.sfig .sf-s2{--sl-d:110ms}
.sfig .sf-s3{--sl-d:220ms}
.sfig .sf-s4{--sl-d:330ms}
.sfig .sf-s5{--sl-d:440ms}
.sfig .sf-s6{--sl-d:550ms}

/* ========================================================================== */
/* C0149 Stepped sequence list — `.blist.stepped`                             */
/* Only where the list genuinely IS a sequence. This is C0142's ordinal        */
/* drafting idiom applied to single-sentence items, which `.dgrid` cannot take */
/* because a `<li>` has no title/body split to hang on.                        */
/* ========================================================================== */

.blist.stepped{
  position:relative;display:block;
  border-top:1px solid var(--line-2);
  counter-reset:sl-step;
}
/* The spine: one continuous drafting rule between the ordinal column and the
   sentence column. Structure assembles before the rows settle. */
/* The spine starts at the FIRST row's text centre rather than at the top rule,
   so it reads as a span from step one to the end instead of a full-height
   divider. One marker per row: the ordinal. An extra station dot on the spine
   was tried and removed — the ordinal already marks the row, and marking it
   twice made the rule look like a decorated list rather than a progression. */
.blist.stepped::before{
  content:"";position:absolute;left:44px;top:33px;bottom:20px;width:1px;
  background:var(--line);transform-origin:top center;
  pointer-events:none;
}
.blist.stepped li{
  position:relative;
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:24px;
  align-items:start;padding:20px 0;
  border-bottom:1px solid var(--line);
  transition:border-bottom-color var(--t-base) var(--ease);
}

.blist.stepped li::before{
  counter-increment:sl-step;
  content:counter(sl-step,decimal-leading-zero);
  width:auto;height:auto;border-radius:0;background:none;transform:none;
  font-size:14px;line-height:1.9;letter-spacing:.04em;
  color:var(--quiet);font-variant-numeric:tabular-nums;
  transition:color var(--t-base) var(--ease);
}
.blist.stepped li:hover{border-bottom-color:var(--line-2)}
.blist.stepped li:hover::before{color:var(--blue)}
.sec-night .blist.stepped{border-top-color:rgba(255,255,255,.16)}
.sec-night .blist.stepped::before{background:rgba(255,255,255,.14)}
.sec-night .blist.stepped li::before{color:var(--night-chip)}
.sec-night .blist.stepped li:hover::before{color:var(--night-accent)}

/* The collapsed state belongs to the ARMED sheet, never to the base rule.
   It used to sit on `.blist.stepped::before` itself, which meant that with
   JavaScript disabled `html.slife-armed` never appeared, nothing ever restored
   `scaleY(1)`, and the spine stayed collapsed permanently. Every other hidden
   state in this file is already written this way; these two rails were the
   exception, and the exception was the bug. */
html.slife-armed .blist.stepped::before{
  transform:scaleY(0);
  transition:transform var(--sl-enter) var(--sl-ease);
}
html.slife-armed .blist.stepped[data-home-in="true"]::before{transform:scaleY(1)}

@media (max-width:760px){
  .blist.stepped li{grid-template-columns:34px minmax(0,1fr);gap:16px;padding:18px 0}
  .blist.stepped::before{left:34px;top:31px;bottom:18px}
}

/* ========================================================================== */
/* C0150 State ledger — `.blist.ledger[data-state]`                           */
/* For lists that are rules, refusals or permissions. The state is drawn, not  */
/* re-stated: a closed square for what the section already calls a mistake, an */
/* engaged square for what it calls required. One accent only — the "closed"   */
/* mark stays monochrome so no second semantic colour enters the system.       */
/* ========================================================================== */

/* Mark weight, measured at 100%: a 14px square with a 1px `--line-2` edge and a
   1.2px diagonal read as a rendering artefact rather than a decision. The mark
   is now 18px with a 2px `--muted` frame and a 2.5px `--body` diagonal that
   overshoots the frame by 1px at both ends, which is what makes a strike read as
   a strike. Still monochrome: the one-accent law was the right call and only
   weight and size changed. */
.blist.ledger li{
  grid-template-columns:18px minmax(0,1fr);gap:18px;align-items:start;
}
.blist.ledger li::before{
  width:18px;height:18px;margin-top:5px;border-radius:3px;
  background:none;border:2px solid var(--muted);transform:none;
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
/* Closed: the square is struck through. Nothing passes. */
.blist.ledger[data-state="avoid"] li::before{
  background-image:linear-gradient(to bottom right,
    transparent calc(50% - 1.25px),var(--body) calc(50% - 1.25px),
    var(--body) calc(50% + 1.25px),transparent calc(50% + 1.25px));
  background-repeat:no-repeat;background-position:center;background-size:22px 22px;
}
.blist.ledger[data-state="avoid"] li:hover::before{border-color:var(--body)}
/* Engaged: the square is filled from the inside. */
.blist.ledger[data-state="allow"] li::before{
  border-color:var(--blue);
  background-image:linear-gradient(var(--blue),var(--blue));
  background-repeat:no-repeat;background-position:center;background-size:9px 9px;
}
.blist.ledger[data-state="allow"] li:hover::before{background-size:11px 11px}

/* The column rule the two-up gutter has been missing. It draws downward as the
   ledger arrives, so the pair of columns reads as one ruled sheet. */
.blist.two.ledger{
  background-image:linear-gradient(var(--line),var(--line));
  background-repeat:no-repeat;background-position:50% 0;background-size:1px 100%;
}
.sec-night .blist.two.ledger{background-image:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12))}
.sec-night .blist.ledger li::before{border-color:var(--night-chip)}
.sec-night .blist.ledger[data-state="avoid"] li::before{
  background-image:linear-gradient(to bottom right,
    transparent calc(50% - 1.25px),var(--night-chip) calc(50% - 1.25px),
    var(--night-chip) calc(50% + 1.25px),transparent calc(50% + 1.25px));
}
.sec-night .blist.ledger[data-state="avoid"] li:hover::before{border-color:var(--night-chip)}
.sec-night .blist.ledger[data-state="allow"] li::before{
  border-color:var(--night-accent);
  background-image:linear-gradient(var(--night-accent),var(--night-accent));
}

html.slife-armed .blist.two.ledger{
  background-size:1px 0;
  transition:background-size var(--sl-enter) var(--sl-ease);
}
html.slife-armed .blist.two.ledger[data-home-in="true"]{background-size:1px 100%}

@media (max-width:760px){
  /* `.blist.two` is already one column here, so the gutter rule has no gutter. */
  .blist.two.ledger,
  html.slife-armed .blist.two.ledger,
  html.slife-armed .blist.two.ledger[data-home-in="true"]{background-image:none;transition:none}
  .blist.ledger li{grid-template-columns:18px minmax(0,1fr);gap:14px}
}

/* ========================================================================== */
/* C0151 Quiet field — `.blist.field`                                         */
/* For a list of SHORT phrases, where a dash list of four fragments reads as   */
/* four dropped words. The phrase becomes the object; the ordinal is the quiet */
/* metadata beside it. Cell hover is C0143's language, deliberately identical. */
/* ========================================================================== */

.blist.field{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-2);counter-reset:sl-field;
}
.blist.field li{
  display:block;padding:26px 28px 30px;
  border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  font-size:20px;line-height:1.34;letter-spacing:-.012em;color:var(--ink);
  transition:border-left-color var(--t-base) var(--ease);
}
.blist.field li::before{
  counter-increment:sl-field;
  content:counter(sl-field,decimal-leading-zero);
  display:block;width:auto;height:auto;border-radius:0;background:none;transform:none;
  margin-bottom:16px;
  font-size:13px;letter-spacing:.04em;color:var(--quiet);
  font-variant-numeric:tabular-nums;
  transition:color var(--t-base) var(--ease);
}
.blist.field li:hover{border-left-color:var(--blue-line)}
.blist.field li:hover::before{color:var(--blue)}
/* Row starts hold the page's left edge, per column count. The measured bug this
   avoids is the one page-trust.css documents on `.cfield`: resetting only
   `:first-child` leaves row two indented with a stray rule. */
.blist.field li:nth-child(3n+1){border-left:0;padding-left:0}
.blist.field--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.blist.field--4 li{padding-left:24px;padding-right:24px;font-size:19px}
.blist.field--4 li:nth-child(3n+1){border-left:1px solid var(--line);padding-left:24px}
.blist.field--4 li:nth-child(4n+1){border-left:0;padding-left:0}
.blist.field--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.blist.field--2 li:nth-child(3n+1){border-left:1px solid var(--line);padding-left:28px}
.blist.field--2 li:nth-child(2n+1){border-left:0;padding-left:0}

.sec-night .blist.field{border-top-color:rgba(255,255,255,.16)}
.sec-night .blist.field li{border-color:rgba(255,255,255,.10);color:var(--night-ink)}
.sec-night .blist.field li::before{color:var(--night-chip)}
.sec-night .blist.field li:hover{border-left-color:var(--night-accent)}
.sec-night .blist.field li:hover::before{color:var(--night-accent)}

html.slife-armed .blist.field li{
  opacity:0;transform:translateY(var(--sl-rise));
  transition:opacity 520ms ease var(--sl-d,0ms),
             transform var(--sl-enter) var(--sl-ease) var(--sl-d,0ms),
             border-left-color var(--t-base) var(--ease);
}
html.slife-armed .blist.field[data-home-in="true"] li{opacity:1;transform:none}
.blist.field li:nth-child(1){--sl-d:0ms}
.blist.field li:nth-child(2){--sl-d:70ms}
.blist.field li:nth-child(3){--sl-d:140ms}
.blist.field li:nth-child(4){--sl-d:210ms}
.blist.field li:nth-child(5){--sl-d:280ms}
.blist.field li:nth-child(6){--sl-d:350ms}
.blist.field li:nth-child(n+7){--sl-d:420ms}

@media (max-width:1000px){
  .blist.field,.blist.field--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blist.field li,.blist.field--4 li{padding-left:24px;padding-right:20px;font-size:19px}
  .blist.field li:nth-child(3n+1),.blist.field--4 li:nth-child(4n+1){
    border-left:1px solid var(--line);padding-left:24px;
  }
  .blist.field li:nth-child(2n+1),.blist.field--4 li:nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:700px){
  .blist.field,.blist.field--4,.blist.field--2{grid-template-columns:minmax(0,1fr)}
  .blist.field li,
  .blist.field li:nth-child(2n+1),
  .blist.field li:nth-child(3n+1),
  .blist.field--4 li,
  .blist.field--4 li:nth-child(2n+1),
  .blist.field--4 li:nth-child(4n+1),
  .blist.field--2 li,
  .blist.field--2 li:nth-child(2n+1){
    border-left:0;padding:20px 0 22px;font-size:19px;
  }
  .blist.field li::before{margin-bottom:10px}
}

/* ========================================================================== */
/* C0152 Held line — `p.hold-line`                                            */
/* For a section that is one dense paragraph. The opening SENTENCE is raised   */
/* to display scale and the remainder continues at reading size, in the same   */
/* paragraph, in the same order, character for character. The rail is C0146's  */
/* `.story-quote` accent, reused rather than reinvented.                       */
/* ========================================================================== */

.hold-line{
  position:relative;margin-top:26px;padding-left:26px;
  font-size:18px;line-height:1.62;color:var(--body);
  max-width:60ch;text-wrap:pretty;
}
.hold-line::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--blue-line);transform-origin:top center;
}
.hold-line__lead{
  display:block;margin-bottom:14px;
  font-size:clamp(21px,1.95vw,26px);line-height:1.28;letter-spacing:-.018em;
  font-weight:600;color:var(--ink);max-width:24ch;text-wrap:balance;
}
.sec-night .hold-line{color:var(--night-lede)}
.sec-night .hold-line::before{background:rgba(126,166,255,.55)}
.sec-night .hold-line__lead{color:var(--night-ink)}

html.slife-armed .hold-line::before{
  transform:scaleY(0);
  transition:transform var(--sl-enter) var(--sl-ease);
}
html.slife-armed .hold-line[data-home-in="true"]::before{transform:scaleY(1)}
html.slife-armed .hold-line__lead{
  opacity:0;transform:translateY(var(--sl-rise));
  transition:opacity 520ms ease 90ms,transform var(--sl-enter) var(--sl-ease) 90ms;
}
html.slife-armed .hold-line[data-home-in="true"] .hold-line__lead{opacity:1;transform:none}

@media (max-width:760px){
  .hold-line{padding-left:18px;margin-top:22px}
  .hold-line__lead{max-width:none}
}

/* ========================================================================== */
/* C0159 Peer field — `.blist.peers`                                          */
/* The shape the kit could not touch: a list of full, unordered, neutral       */
/* sentences. Not a sequence (C0149 would assert an order that is not there),  */
/* not rules or permissions (C0150 would assert a state), not short phrases    */
/* (C0151), and there is no paragraph to lift (C0152). It is the most common   */
/* list on this site and the kit's honest answer used to be "do nothing".      */
/*                                                                            */
/* What a peer list actually IS: a bounded set of equals. So that is what gets */
/* drawn — a closed field (top and bottom rules) divided into equal cells by   */
/* hairlines. Peerage is carried by identical treatment inside a visible grid, */
/* which asserts equality rather than order. The blue dash goes: a marker that */
/* is the same on every row and means nothing is noise, and removing it is     */
/* what lets the cell structure read.                                          */
/*                                                                            */
/* Deliberately NOT dramatic. Six neutral sentences contain no drama to        */
/* surface, and manufacturing some is exactly what got `sfig--boundary` cut.   */
/* This is a structural upgrade — a list becomes a sheet — and nothing more.   */
/* ========================================================================== */

.blist.peers{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.blist.peers li{
  display:block;padding:26px 32px 28px;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  font-size:18px;line-height:1.6;color:var(--body);text-wrap:pretty;
  transition:border-left-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
/* No marker. The C0029 dash is identical on every row of a peer list, which
   makes it decoration; the cell is what carries membership now. */
.blist.peers li::before{content:none;display:none}
/* The field's own top rule opens the first row, and its bottom rule closes the
   last, so the set reads as one object with a boundary. */
.blist.peers li:nth-child(-n+2){border-top:0}
.blist.peers li:nth-child(2n+1){border-left:0;padding-left:0}
.blist.peers li:nth-child(2n){padding-right:0}
.blist.peers li:hover{border-left-color:var(--blue-line);color:var(--ink)}
/* C0141 already draws a top rule for a block that carries `data-chassis`, and
   it uses the same weight and token. Defer to it rather than stacking a second
   line on top of it — the agent should not have to remember to strip one. */
.blist.peers[data-chassis]{border-top:0}

/* Optional, all-or-nothing: the site's existing inline `.lead` (C0142/C0143),
   colour and weight only, no layout change, no split of the sentence's flow.
   Use it ONLY where the opening clause is a subject a reader would scan for.
   Where the sentences open with the first item of an enumeration it produces
   nonsense emphasis, and the field ships without leads. */
.blist.peers .lead{color:var(--ink);font-weight:500}
.blist.peers li:hover .lead{color:var(--ink)}

.sec-night .blist.peers{border-color:rgba(255,255,255,.16)}
.sec-night .blist.peers li{border-color:rgba(255,255,255,.10);color:var(--night-lede)}
.sec-night .blist.peers li:hover{border-left-color:var(--night-accent);color:var(--night-ink)}
.sec-night .blist.peers .lead{color:var(--night-ink)}

html.slife-armed .blist.peers li{
  opacity:0;transform:translateY(var(--sl-rise));
  transition:opacity 520ms ease var(--sl-d,0ms),
             transform var(--sl-enter) var(--sl-ease) var(--sl-d,0ms),
             border-left-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease);
}
html.slife-armed .blist.peers[data-home-in="true"] li{opacity:1;transform:none}
.blist.peers li:nth-child(1){--sl-d:0ms}
.blist.peers li:nth-child(2){--sl-d:70ms}
.blist.peers li:nth-child(3){--sl-d:140ms}
.blist.peers li:nth-child(4){--sl-d:210ms}
.blist.peers li:nth-child(5){--sl-d:280ms}
.blist.peers li:nth-child(6){--sl-d:350ms}
.blist.peers li:nth-child(n+7){--sl-d:420ms}

@media (max-width:760px){
  .blist.peers{grid-template-columns:minmax(0,1fr)}
  .blist.peers li,
  .blist.peers li:nth-child(2n+1),
  .blist.peers li:nth-child(2n){
    border-left:0;border-top:1px solid var(--line);
    padding:20px 0 22px;font-size:17px;
  }
  .blist.peers li:first-child{border-top:0}
}

/* ========================================================================== */
/* Reduced motion and print — every primitive resolves to its finished state.  */
/* Duplicated rather than delegated to the script, so a preference changed     */
/* after load still lands somewhere complete.                                  */
/* ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html.slife-armed .sfig .sf-draw,
  .sfig .sf-draw{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  html.slife-armed .sfig .sf-pop,
  html.slife-armed .sfig .sf-fade,
  html.slife-armed .blist.field li,
  html.slife-armed .blist.peers li,
  html.slife-armed .hold-line__lead{opacity:1;transform:none;transition:none}
  html.slife-armed .blist.stepped::before,
  html.slife-armed .hold-line::before{transform:scaleY(1);transition:none}
  .blist.stepped::before,.hold-line::before{transform:scaleY(1)}
  html.slife-armed .blist.two.ledger{background-size:1px 100%;transition:none}
}

@media print{
  .sfig .sf-draw{stroke-dasharray:none;stroke-dashoffset:0}
  .sfig .sf-pop,.sfig .sf-fade,.blist.field li,.blist.peers li,.hold-line__lead{opacity:1;transform:none}
  .blist.stepped::before,.hold-line::before{transform:scaleY(1)}
  .blist.two.ledger{background-size:1px 100%}
  .sec-split{display:block}
  .sec-split>.sec-aside{display:none}
}