/* ============================================================
   ANGEL'S — LAYOUT SYSTEM  (production, 20 Aug 2026)
   Sixteen section archetypes. Structure only; depth, texture, type
   polish and motion come from craft.css, which loads first.

   No new colours, no new type sizes, no new fonts.
   ============================================================ */

/* ---------- OPENING SECTION ----------
   The header is position:fixed and opaque on inner pages, so whichever layout
   opens a page has to clear it. Only L1 carried that padding, which left Who
   It's For at MINUS 10px of clearance at 768 and 390 — its heading sat behind
   the nav. This applies to any layout in the opening slot. */
/* moved to comp.css 27 Aug — see the note there */
/* L6 opens with a full-bleed band, so the clearance sits above the band and the
   band itself does the spacing below. */
/* This more-specific rule was silently overriding .L6 and holding
   Privacy's opener at 112px where every other inner page clears the
   header at 187. Removed rather than re-tuned — .L6 already sets it. */

:root{
  --bleed:calc(50vw - 50%);   /* escape the container to the viewport edge */
}

/* ---------- L1 · FULL BLEED, INSET PANEL ----------
   Photo stops short of the section's bottom edge; the panel hangs
   past it onto the ground below. Contained, so nothing leaks onto
   siblings. */
/* Ali moved the panel up 93px in Figma: it now sits INSIDE the photo rather
   than hanging past its bottom seam. Bottom padding grows to keep the photo
   band the same height. */
.L1{position:relative;isolation:isolate;
  /* The header is position:fixed. This clears it at every width — the old
     84px put the title under the nav below ~1100px. Matches comp.css .phero,
     which is the value the inner pages already used. */
  padding:clamp(140px,13vw,192px) 0 clamp(96px,11.7vw,169px)}
.L1 .ls-bleed{position:absolute;top:0;left:calc(var(--bleed) * -1);
  right:calc(var(--bleed) * -1);bottom:clamp(56px,6vw,96px);z-index:-1;overflow:hidden}
.L1 .ls-bleed img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.6s var(--ease-out)}
.L1.in .ls-bleed img{transform:scale(1)}
/* Two-stop scrim, weighted to the corner the panel sits in, so the
   photo keeps its midtones instead of going uniformly grey. */
.L1 .ls-bleed::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 88%,rgba(4,14,20,.62) 0%,rgba(4,14,20,0) 62%),
    linear-gradient(178deg,rgba(4,14,20,.22),rgba(4,14,20,.46))}
.L1 .ls-title{position:relative;z-index:1;margin:0 0 clamp(24px,3vw,44px);max-width:15ch;
  font-size:var(--t-page-title);line-height:var(--lh-page-title);
  letter-spacing:var(--tr-page-title);font-weight:var(--fw-bold);color:var(--porcelain);
  text-wrap:balance}
.L1:has(.ls-title) .ls-bleed::after{background:
  /* .78/.58/.34 measured 3.76:1 over the placeholder photo: passes AA for
     110px, but with no headroom for a brighter image. .86/.72/.50 = 6.16:1.
     ⚠ RE-MEASURE over every real photo when Colleen's land. Do not eyeball. */
  linear-gradient(96deg,rgba(4,14,20,.86) 0%,rgba(4,14,20,.72) 44%,rgba(4,14,20,.50) 100%),
  radial-gradient(120% 90% at 78% 92%,rgba(4,14,20,.52) 0%,rgba(4,14,20,0) 60%)}
.L1 .ls-panel{position:relative;z-index:1;max-width:640px;margin-left:auto;
  background:var(--porcelain);border-radius:var(--r-2xl);
  padding:clamp(34px,4vw,60px);
  box-shadow:var(--ring-soft),var(--sh-3),var(--sh-lip)}
.L1 .ls-panel :is(h1,h2){margin:0 0 var(--s5);font-size:var(--t-h3);line-height:var(--lh-sec);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.L1 .ls-panel p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted)}
/* the drawn mark, not a border */
.L1 .ls-panel :is(h1,h2)::after{content:"";display:block;width:52px;height:2px;margin-top:var(--s5);
  background:linear-gradient(90deg,var(--gold),rgba(217,164,4,0))}

/* ---------- L2 · SPLIT GROUND ----------
   Two colours meet on a vertical seam. The teal side carries a
   soft vignette so the ground has form rather than reading as a
   flat fill, and the seam itself gets a hairline of light. */
.L2{position:relative;padding:var(--pad-snug) 0}
.L2::before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;
  /* ends on the heading column's right edge: half the viewport, minus half the
     content column, plus the 38% column and its gutter. Aligns with a real
     boundary instead of an arbitrary one. */
  width:calc(50% - (var(--maxw) / 2) + var(--gut) + ((var(--maxw) - var(--gut) * 2) * 0.38));
  background:
    radial-gradient(90% 120% at 12% 8%,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 58%),
    var(--teal-deep);
  box-shadow:1px 0 0 rgba(255,255,255,.10)}
.L2 .ls-grid{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.L2 :is(h1,h2){margin:0;font-size:clamp(1.75rem,3vw,2.625rem);line-height:1.06;
  letter-spacing:-.035em;font-weight:var(--fw-bold);color:var(--porcelain);
  padding-right:clamp(24px,3vw,48px)}
.L2 p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted);
  max-width:58ch}

/* ---------- L3 · OVERLAP CARD ----------
   A card straddling the seam between two grounds, built as a
   double bezel. The old 2px gold box is gone: a gold box around a
   card is the single most template-looking device in the set. The
   gold survives as a short drawn rule inside. */
.L3-top{background:var(--porcelain-cool);padding:var(--pad-snug) 0 clamp(64px,7vw,104px)}
/* dark variant: the card then straddles a light/dark seam */
.L3-top.ls-dark{background:
  radial-gradient(110% 130% at 18% 0%,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 62%),
  var(--teal-deep)}
.L3-top.ls-dark p{color:var(--c-on-deep-body)}
/* the dark band can carry a photo, as L1's does */
.L3-top{position:relative;isolation:isolate}
.L3-top .ls-bleed{position:absolute;inset:0;z-index:-1;overflow:hidden}
.L3-top .ls-bleed img{width:100%;height:100%;object-fit:cover}
.L3-top .ls-bleed::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(0,90,128,.94) 0%,rgba(0,90,128,.86) 52%,rgba(0,90,128,.72) 100%)}
.L3-bot{background:var(--porcelain);padding:clamp(64px,7vw,104px) 0 var(--pad-base)}
.L3-top p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);
  letter-spacing:var(--tr-lead);color:var(--text-muted);max-width:62ch}
.L3-bot{--l3-lift:clamp(40px,4.4vw,64px)}
.L3 .ls-bezel{position:relative;z-index:2;max-width:940px;
  margin-top:calc((clamp(64px,7vw,104px) + var(--l3-lift)) * -1)}
.L3 .ls-core{padding:clamp(32px,4vw,56px)}
.L3 :is(h2,h3){margin:0;font-size:var(--t-h3);line-height:var(--lh-sec);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong);
  max-width:20ch}
.L3 :is(h2,h3)::after{content:"";display:block;width:44px;height:2px;margin:20px 0;
  background:linear-gradient(90deg,var(--gold),rgba(217,164,4,0))}
.L3 p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted);
  max-width:64ch}

/* ---------- L4 · HANGING HEADING ----------
   Heading hangs outside the text column and sticks while the rows
   pass it. Rules fade rather than hard-stop; rows lift on hover. */
.L4{padding:var(--sec-y) 0;position:relative}
/* The 2px gold rule that used to sit across the top of L4 is gone,
   and so are the rules between its rows. Ali, 26 Aug: "i do not want
   hairlines anywhere on the site." Privacy is the one page still on
   the 16-layout system and these two survived the sweep because they
   are drawn as pseudo-element backgrounds rather than borders, which
   is what check-page.py was looking for. Space does the separating;
   the row padding opens up to take over. */
.L4 .ls-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:clamp(28px,4vw,72px)}
.L4 h2{margin:0;font-size:var(--ramp-h2);line-height:var(--lh-sec);letter-spacing:var(--tr-h3);
  font-weight:var(--fw-bold);color:var(--text-strong);position:sticky;top:96px;align-self:start}
.L4 .ls-rows > div{position:relative;padding:clamp(28px,3.2vw,42px) clamp(12px,1.4vw,20px);
  margin-inline:calc(clamp(12px,1.4vw,20px) * -1);border-radius:var(--r-md);
  transition:background var(--dur-fast) var(--ease-out)}

.L4 .ls-rows > div:first-child{padding-top:0}
/* contents variant: the sticky column carries a nav instead of just a heading */
.L4 .ls-toc{position:sticky;top:96px;align-self:start}
.L4 .ls-toc h2{margin:0 0 var(--s5);position:static}
.L4 .ls-toc ol{margin:0;padding:0;list-style:none;counter-reset:none}
.L4 .ls-toc li + li{margin-top:9px}
.L4 .ls-toc a{font-size:var(--t-body-sm);line-height:1.4;font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted);text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--ease-out),
  border-color var(--dur-fast) var(--ease-out)}
.L4 .ls-toc a:hover{color:var(--text-strong);border-bottom-color:var(--gold)}
.L4 .ls-rows > div{scroll-margin-top:110px}
.L4 .ls-rows :is(h2,h3){margin:0 0 10px;font-size:var(--ramp-h3);line-height:1.22;
  letter-spacing:-.025em;font-weight:var(--fw-bold);color:var(--text-strong)}
.L4 .ls-rows ul{margin:12px 0 0;padding:0 0 0 20px}
.L4 .ls-rows li{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted);margin-bottom:8px}
.L4 .ls-rows p + p{margin-top:12px}
.L4 .ls-rows > div:hover{background:rgba(var(--sh-ink),.028)}
.L4 h3{margin:0 0 6px;font-size:var(--ramp-h3);line-height:1.22;letter-spacing:-.025em;
  font-weight:var(--fw-semi);color:var(--text-strong)}
.L4 .ls-rows p{margin:0;max-width:var(--measure);font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);letter-spacing:var(--tr-body);color:var(--text-muted)}

/* ---------- L5 · SEQUENCE (spine) ----------
   Was oversize numerals. Replaced 20 Aug: the July decision on this project is
   "NO index numerals, she dislikes numbers used to list things, do not
   reintroduce them anywhere" — so the archetype was wrong at the premise, not
   in its tuning.

   Sequence is now carried by a single continuous rule with a mark where each
   step joins it. That says the steps are CONNECTED, which a numbered list never
   did. Goldenrod stays a rule, which is the one job it has. */
.L5{padding:var(--pad-base) 0;background:var(--porcelain-cool)}
.L5-head{margin:0 0 clamp(28px,3.2vw,46px);font-size:var(--t-h3);line-height:var(--lh-sec);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong);max-width:24ch}
.L5 .ls-track{position:relative;padding-left:clamp(28px,3.4vw,52px)}
/* the rule fades out at the foot, so the sequence ends rather than stopping */
.L5 .ls-track::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:2px;
  background:linear-gradient(180deg,rgba(217,164,4,.70),rgba(217,164,4,.70) 82%,rgba(217,164,4,0))}
.L5 .ls-step{position:relative;padding:clamp(22px,2.6vw,34px) 0}
.L5 .ls-step::before{content:"";position:absolute;
  left:calc((clamp(28px,3.4vw,52px) + 5px) * -1);
  top:calc(clamp(22px,2.6vw,34px) + 14px);
  width:12px;height:12px;border-radius:50%;
  background:var(--porcelain-cool);box-shadow:0 0 0 2px var(--gold)}
.L5 h3{margin:0 0 8px;font-size:var(--t-h3);line-height:1.1;letter-spacing:var(--tr-h3);
  font-weight:var(--fw-semi);color:var(--text-strong)}
.L5 p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);
  letter-spacing:var(--tr-lead);color:var(--text-muted);max-width:56ch}

/* ---------- L6 · BANDED STATEMENT ----------
   Was "narrow measure in a wide field" (Crete Round 38 at 34ch, offset right).
   Ali reworked it in Figma 20 Aug: a full-bleed goldenrod band above a statement
   set full width in Jakarta Bold. That inverts the original premise, so the
   archetype is renamed rather than pretending it is still the same device.

   Her frame also carried a second 1440x76 band in porcelain, sitting on a
   porcelain ground and therefore painting nothing. It was still named "gold
   mark" like the original 56x3 rule, so it reads as a stretched leftover and is
   NOT ported. Goldenrod here is a GROUND, which is a job it is allowed. */
/* Privacy is the only page still on this layer. Its opener has to
   clear the fixed header by the same amount as every other inner
   page, or it sits 75px higher than the rest of the site. */
.L6{padding:clamp(140px,13vw,192px) 0 var(--sec-y);background:var(--porcelain)}
.L6 .ls-band{height:clamp(28px,3vw,44px);background:var(--gold);
  margin:0 calc(var(--bleed) * -1)}
.L6 .ls-inner{padding-top:var(--pad-snug)}
/* Privacy was the one page never moved onto the page-title ladder:
   48px at 1440 where every other inner page is 110. */
.L6 :is(h1,p){margin:0;font-size:var(--ramp-title);line-height:1.02;
  letter-spacing:-.04em;font-weight:var(--fw-bold);color:var(--text-strong);
  text-wrap:balance;max-width:26ch}
/* optional supporting block, so L6 can open a page as well as close one */
.L6 .ls-sub{margin-top:clamp(20px,2.4vw,32px);max-width:74ch}
.L6 .ls-sub p{margin:0;max-width:var(--measure-lede);font-size:var(--t-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted)}
.L6 .ls-sub p + p{margin-top:var(--s5)}

/* ---------- L7 · MARGINALIA ----------
   A note hanging in the margin, set small and high. Reads as an
   annotation on the page rather than as another section. */
.L7{padding:var(--pad-base) 0;background:var(--porcelain)}
.L7 .ls-grid{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,3.2fr);
  gap:clamp(28px,4vw,72px)}
.L7 .ls-note{position:relative;padding-left:16px;font-size:var(--t-body-sm);line-height:1.6;
  font-weight:var(--fw-med);letter-spacing:var(--tr-body);color:var(--text-muted);
  align-self:start;margin-top:calc(var(--t-h3) * 1.9)}   /* hangs level with the first paragraph, not the heading */
.L7 .ls-note::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:3px;
  border-radius:2px;
  /* held at full strength for most of its run, then released. The old version
     faded from the very top and read as nothing at page scale. */
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold) 62%,rgba(217,164,4,.25) 88%,rgba(217,164,4,0) 100%)}
/* A margin note is an annotation, not a column. Cap it at two short paragraphs
   in the MARKUP; never hide copy with CSS. */
.L7 .ls-note p{margin:0}
.L7 .ls-note p + p{margin-top:var(--s5)}
.L7 :is(h1,h2){margin:0 0 var(--s5);font-size:var(--t-h3);line-height:var(--lh-sec);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.L7 .ls-body p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted)}
.L7 .ls-body p + p{margin-top:var(--s5)}

/* ---------- L8 · TIGHT BAND ----------
   Deliberately compressed against everything around it. Gold
   stays a rule above the band and never becomes type — emphasis
   is carried by weight and by the porcelain against the dimmed
   run beside it. */
.L8{background:var(--ink);padding:var(--pad-tight) 0;position:relative}
.L8::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 34%,
                             rgba(217,164,4,.22) 66%,rgba(217,164,4,0) 100%)}
.L8 ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:clamp(18px,2.4vw,34px);
  font-size:var(--t-lead);line-height:1.45;font-weight:var(--fw-med);
  letter-spacing:var(--tr-lead);color:rgba(255,254,250,.72)}
.L8 li{position:relative}
.L8 li + li::before{content:"";position:absolute;left:clamp(-11px,-1.2vw,-17px);
  top:.34em;bottom:.34em;width:1px;background:rgba(255,254,250,.20)}
.L8 b{font-weight:var(--fw-semi);color:var(--porcelain);white-space:nowrap}

/* ---------- L9 · IMAGE INTERLOCK ----------
   Copy overlaps the image edge rather than sitting beside it. The
   image carries a hairline ring so it reads as a mounted plate,
   not as a raw rectangle dropped on the page. */
.L9{padding:var(--pad-base) 0;background:var(--porcelain-cool)}
.L9 .ls-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
.L9 .ls-shot{order:2}
.L9 .ls-copy{order:1;transform:translateY(6%)}
.L9 .ls-shot{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/2;
  background:var(--porcelain-cool);box-shadow:var(--ring-soft),var(--sh-2)}
.L9 .ls-shot img{width:100%;height:100%;object-fit:cover}
.L9 .ls-copy{position:relative;z-index:1;background:var(--porcelain);
  border-radius:var(--r-2xl);padding:clamp(30px,3.6vw,50px);
  margin-right:clamp(-96px,-7.5vw,-44px);
  box-shadow:var(--ring-soft),var(--sh-3),var(--sh-lip)}
.L9 :is(h1,h2){margin:0 0 var(--s4);font-size:var(--t-h3);line-height:var(--lh-sec);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.L9 p{margin:0;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted)}

/* ---------- L10 · FULL-BLEED TYPE ----------
   One line running the full viewport width. The ground carries a
   vertical falloff so 300px of teal has depth; the line is
   tracked tighter than the ramp because at 7vw the default
   tracking opens up visibly. */
.L10{padding:var(--pad-base) 0;overflow:hidden;position:relative;
  background:
    radial-gradient(120% 140% at 50% -20%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 60%),
    var(--teal-deep)}
.L10 p{margin:0 calc(var(--bleed) * -1);padding:0 var(--gut);
  font-size:clamp(2rem,7.35vw,7rem);line-height:1.0;letter-spacing:-.05em;
  font-weight:var(--fw-bold);color:var(--porcelain);white-space:nowrap;text-align:center}

/* ============================================================
   responsive — every asymmetry collapses to one column
   ============================================================ */
@media(max-width:900px){
  .L1 .ls-panel{max-width:none;margin-left:0}
  /* The teal field was a PERCENTAGE of section height, so the white heading
     could land past its bottom edge and sit porcelain-on-porcelain. axe cannot
     see this: it will not resolve a background behind a ::before. The field is
     now the heading's own ground, so it can never be the wrong size. */
  .L2::before{display:none}
  .L2 h1,
  .L2 h2{background:var(--teal-deep);
    margin:calc(var(--pad-snug) * -1) calc(var(--bleed) * -1) var(--s6) calc(var(--bleed) * -1);
    padding:var(--pad-snug) var(--gut)}
  .L2 .ls-grid,.L4 .ls-grid,.L7 .ls-grid,.L9 .ls-grid{grid-template-columns:1fr}
  .L4 h2{position:static}
  .L5 .ls-step{padding-left:0}
  .L5 .ls-n{position:static;display:block;margin-bottom:4px}
  .L6 .ls-inner{margin-left:0;max-width:none}
  .L9 .ls-shot{order:1}
  .L9 .ls-copy{order:2;margin-right:0;margin-top:calc(var(--s7) * -1);transform:none}
  .L10 p{white-space:normal;letter-spacing:-.035em}
}

/* ============================================================
   L11 - L16 · THE SECOND GROUP
   Added because six real content shapes on the six pages had no
   layout that could express them, not to raise the count. Each
   one is a compositional family the first ten does not contain.
   ============================================================ */

/* ---------- SECTION HEADS ----------
   L5, L11, L12 and L14 carry a section heading above their content. L4, L7,
   L15 and L16 own their heading inside their grid, so they are excluded here.
   One rule rather than four, so the heading can never drift between layouts. */
.L11-head{margin:0 0 clamp(28px,3.2vw,46px);
  font-size:var(--t-h3);line-height:var(--lh-sec);letter-spacing:var(--tr-h3);
  font-weight:var(--fw-semi);color:var(--text-strong);max-width:24ch}
/* the drawn mark, matching L1 and L3 */

/* ---------- GROUND MODIFIERS ----------
   Any layout can take a different ground. This exists because the fault that
   keeps recurring on this project is not a bad layout, it is three sections
   with the SAME ground stacked in a row: it happened on Advisory 14 Aug
   (1,610px of unbroken porcelain) and again the moment the page was rebuilt.

   Rule: no three consecutive sections may share a ground. Measure it, do not
   eyeball it, because tint and warm both read as "light" at a glance. */
.g-cool{background:var(--porcelain-cool)!important}
/* .g-tint retired 20 Aug — Ali: no light blue on cards or grounds */
.g-pale{background:var(--porcelain)!important}

/* ---------- L11 · ASYMMETRIC PEER GRID ----------
   The flagged gap: nothing in the first ten handles three or more
   items of equal weight. Homepage How I Help is six peer cards.
   NOT three equal columns, which is the most template-looking grid
   there is. Spans vary, and cells carry different grounds so the
   block is not six white boxes. */
.L11{padding:clamp(56px,6.3vw,90px) 0;background:var(--porcelain)}
.L11 .ls-grid{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.2vw,18px);grid-auto-rows:minmax(0,auto)}
.L11 .ls-cell{grid-column:span 6;border-radius:var(--r-xl);padding:clamp(22px,2.4vw,34px);
  background:var(--porcelain);box-shadow:var(--ring-soft),var(--sh-1);
  display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
  transition:box-shadow var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out)}
.L11 .ls-cell:hover{box-shadow:var(--ring-soft),var(--sh-2);transform:translateY(-2px)}
/* spans: 7/5 then 5/7 then 4/4/4, so no two rows scan the same */
.L11 .ls-cell:nth-child(1){grid-column:span 7}
.L11 .ls-cell:nth-child(2){grid-column:span 5}
.L11 .ls-cell:nth-child(3){grid-column:span 5}
.L11 .ls-cell:nth-child(4){grid-column:span 7}
.L11 .ls-cell:nth-child(5){grid-column:span 6}
.L11 .ls-cell:nth-child(6){grid-column:span 6}
/* ground variation, so the grid is not six identical white boxes */
.L11 .ls-cell.tint{background:var(--porcelain-cool);box-shadow:none}
.L11 .ls-cell.cool{background:var(--porcelain-cool);box-shadow:none}
/* five items get their own span set. The rule is N items -> N cells with no
   empty cell, so a 6-cell grid carrying 5 items is a planning error, not a
   layout to pad out. */
/* Cell-count variants. The rule is N items -> N cells with no empty cell, so
   each supported count gets its own span pattern. The base span 6 above is the
   safety net: adding a cell can never collapse the grid to 1/12 again. */
.L11.ls-five  .ls-cell:nth-child(5){grid-column:span 12}
.L11.ls-seven .ls-cell:nth-child(5),
.L11.ls-seven .ls-cell:nth-child(6),
.L11.ls-seven .ls-cell:nth-child(7){grid-column:span 4}
.L11 .ls-cell.ls-shot{padding:0;overflow:hidden;min-height:200px;
  box-shadow:var(--ring-soft),var(--sh-1)}
.L11 .ls-cell.ls-shot img{width:100%;height:100%;object-fit:cover}
.L11 h3{margin:0;font-size:var(--t-card-title);line-height:1.15;letter-spacing:var(--tr-card);
  font-weight:var(--fw-semi);color:var(--text-strong)}
.L11 p{margin:0;font-size:var(--t-body-sm);line-height:1.55;font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted)}

/* ---------- L12 · OPPOSITION ----------
   Two blocks making opposite claims, offset and overlapping on the
   z-axis rather than sitting in two columns. The dark block starts
   where the light one ends, so the argument is spatial. Who It's For
   is built on exactly this and had no layout for it. */
.L12{padding:var(--pad-base) 0;background:var(--porcelain-cool);position:relative}
.L12 .ls-yes,.L12 .ls-no{border-radius:var(--r-2xl);padding:clamp(28px,3.4vw,48px);position:relative}
.L12 .ls-yes{background:var(--porcelain);width:min(100%,58%);
  /* the ink block lands in this reserve, so the overlap never covers a line */
  padding-bottom:clamp(88px,8vw,116px);
  /* the two sides must read as EQUAL and opposed. On a porcelain ground this
     card was invisible next to a solid ink card, so the section takes the cool
     ground and the card keeps its porcelain fill. */
  box-shadow:var(--ring-soft),var(--sh-2)}
.L12 .ls-no{background:var(--ink);width:min(100%,58%);margin-left:auto;
  margin-top:clamp(-64px,-5vw,-32px);z-index:1;box-shadow:var(--sh-3)}
.L12 :is(h2,h3){margin:0 0 var(--s5);font-size:var(--t-subhead);line-height:1.2;
  letter-spacing:var(--tr-subhead);font-weight:var(--fw-semi)}
.L12 .ls-yes :is(h2,h3){color:var(--text-strong)}
.L12 .ls-no :is(h2,h3){color:var(--porcelain)}
/* the approved list intros, restored 23 Aug. Each list in the record has a
   lead-in sentence that was dropped when the copy was moved into L12. */
.L12 .ls-intro{margin:0 0 var(--s5);font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);letter-spacing:var(--tr-body)}
.L12 .ls-yes .ls-intro{color:var(--text-muted)}
.L12 .ls-no .ls-intro{color:rgba(255,254,250,.78)}
.L12 ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.L12 li{position:relative;padding-left:26px;font-size:var(--t-body);line-height:1.5;
  font-weight:var(--fw-med);letter-spacing:var(--tr-body)}
.L12 .ls-yes li{color:var(--text-muted)}
.L12 .ls-no li{color:rgba(255,254,250,.78)}
/* the marks are RULES, which is the one job goldenrod has */
.L12 .ls-yes li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;
  background:var(--teal)}
.L12 .ls-no li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;
  background:var(--gold)}

/* ---------- L13 · VOICE ----------
   An attributed quote. L6 is an unattributed conviction line set
   narrow and offset; this is a person speaking, with a face, and it
   needs attribution structure L6 does not have. */
.L13{padding:var(--pad-snug) 0;background:var(--porcelain-cool)}
.L13 .ls-grid{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(24px,3.4vw,56px);align-items:center}
.L13 .ls-portrait{width:clamp(96px,11vw,152px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;box-shadow:var(--ring-soft),var(--sh-2)}
.L13 .ls-portrait img{width:100%;height:100%;object-fit:cover}
.L13 blockquote{margin:0}
.L13 blockquote p{margin:0 0 var(--s5);font-family:var(--serif);
  font-size:clamp(1.375rem,2.5vw,2.125rem);line-height:1.32;letter-spacing:-.012em;
  color:var(--text-strong);text-wrap:balance;text-indent:-.34em}
.L13 cite{display:block;font-style:normal;font-size:var(--t-body-sm);line-height:1.5;
  font-weight:var(--fw-semi);letter-spacing:var(--tr-body);color:var(--text-strong)}
.L13 cite span{display:block;font-weight:var(--fw-med);color:var(--text-muted)}

/* ---------- L14 · RAIL ----------
   Breadth without a long vertical list. Scroll-snap horizontally,
   which is native on touch and keyboard reachable on desktop.
   Nothing else in the set moves sideways. */
.L14{padding:var(--pad-base) 0;background:var(--porcelain);overflow:hidden}
.L14 :is(h1,h2){margin:0 0 var(--s6);font-size:var(--t-h3);line-height:var(--lh-sec);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.L14 .ls-rail{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  margin:0 calc(var(--bleed) * -1);padding:4px var(--bleed) 20px;
  list-style:none;scrollbar-width:thin}
.L14 .ls-rail li{scroll-snap-align:start;flex:0 0 clamp(230px,23vw,310px);
  background:var(--porcelain);border-radius:var(--r-xl);padding:clamp(20px,2.2vw,30px);
  box-shadow:var(--ring-soft),var(--sh-1)}
.L14 .ls-rail h3{margin:0 0 8px;font-size:var(--t-card-title);line-height:1.15;
  letter-spacing:var(--tr-card);font-weight:var(--fw-semi);color:var(--text-strong)}
.L14 .ls-rail p{margin:0;font-size:var(--t-body-sm);line-height:1.55;font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted)}
/* a card carrying ONE sentence and no heading: the sentence IS the card, so it
   takes the card-title size rather than sitting at caption scale */
.L14 .ls-rail li > p:only-child{font-size:var(--t-card-title);line-height:1.28;
  letter-spacing:var(--tr-card);font-weight:var(--fw-semi);color:var(--text-strong)}
.L14 .ls-rail:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

/* ---------- L15 · READING SPREAD ----------
   One passage set in two columns, as a magazine would. The only
   layout in the set where the text itself carries the structure.
   For genuinely long prose, which currently has nowhere to go. */
.L15{padding:var(--pad-snug) 0;background:var(--porcelain)}
.L15 :is(h1,h2){margin:0 0 var(--s6);font-size:var(--t-h3);line-height:var(--lh-sec);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong);
  max-width:24ch}
.L15 .ls-spread{columns:2;column-gap:clamp(32px,4.4vw,76px);
  column-rule:1px solid var(--hair-soft)}
.L15 .ls-spread p{margin:0 0 var(--s5);font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);letter-spacing:var(--tr-body);color:var(--text-muted);
  break-inside:avoid-column}
.L15 .ls-spread p:last-child{margin-bottom:0}
/* the opening line carries the entry, in place of a drop cap */
.L15 .ls-spread p:first-child{font-size:var(--t-lead);line-height:var(--lh-lead);
  letter-spacing:var(--tr-lead);color:var(--text-strong)}

/* ---------- L16 · ACTION ----------
   The only layout with real interactive state, which is what
   exercises the focus system. Labels ABOVE fields, never a
   placeholder standing in for a label. */
.L16{padding:var(--pad-base) 0;background:var(--porcelain-cool)}
.L16 .ls-grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,6fr);
  gap:clamp(32px,5vw,84px);align-items:start}
.L16 :is(h1,h2){margin:0 0 var(--s5);font-size:var(--t-h3);line-height:var(--lh-sec);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.L16 .ls-aside p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted)}
/* comp.css .chat-form .row already carries a bottom margin. A grid gap on top
   of it doubled every field's spacing. The form owns its rhythm here. */
.L16 form{display:block}
.L16 .row{margin-bottom:clamp(18px,2.2vw,24px)}
.L16 .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px)}
@media(max-width:620px){ .L16 .pair{grid-template-columns:1fr} }
.L16 .ls-field{display:grid;gap:7px}
.L16 label{font-size:var(--t-body-sm);line-height:1.3;font-weight:var(--fw-semi);
  letter-spacing:var(--tr-body);color:var(--text-strong)}
.L16 label .opt{font-weight:var(--fw-med);color:var(--text-muted)}
.L16 input,.L16 textarea{font:var(--fw-med) var(--t-body)/1.5 var(--sans);
  letter-spacing:var(--tr-body);color:var(--body);
  background:var(--c-field-bg);border:1px solid var(--c-field-line);
  border-radius:var(--r-md);padding:13px 15px;width:100%;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out)}
.L16 input:hover,.L16 textarea:hover{border-color:var(--c-field-line-hover)}
/* NEVER outline:none. This silently removed the keyboard focus ring from the
   only interactive layout on the site. */
.L16 input:focus-visible,.L16 textarea:focus-visible{border-color:var(--c-field-line-focus);
  outline:2px solid var(--c-field-line-focus);outline-offset:2px}
.L16 input:focus,.L16 textarea:focus{border-color:var(--c-field-line-focus)}
.L16 textarea{min-height:132px;resize:vertical}
.L16 button{justify-self:start;font:var(--fw-semi) var(--t-btn)/1 var(--sans);
  letter-spacing:.01em;color:var(--c-btn-fg);background:var(--c-btn-bg);
  border:0;border-radius:var(--r-pill);padding:15px 30px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.L16 button:hover{background:var(--c-btn-bg-hover)}
.L16 button:active{transform:scale(.98)}   /* physical press, not a colour flick */
.L16 .ls-hp{position:absolute;left:-9999px}   /* honeypot, never shown, never announced */

@media(max-width:900px){
  .L11 .ls-cell{grid-column:span 12!important;min-height:0!important}
  .L12 .ls-yes,.L12 .ls-no{width:100%}
  .L12 .ls-no{margin-top:var(--s5)}
  .L13 .ls-grid,.L16 .ls-grid{grid-template-columns:1fr}
  .L15 .ls-spread{columns:1;column-rule:0}
}

/* measure caps — the .L6/.L4 rules above did not reach these */
.ls-sub p{max-width:var(--measure-lede)}
.ls-rows p{max-width:var(--measure)}