/* agentic.adam V2 . the nine sections. system.css holds the tokens, the ground,
   the type, the glass and the entrances. This file holds only the patterns,
   and NO TWO SECTIONS SHARE ONE. */

/* ── 1 . THE NAME . his pick B. portrait anchor, artifacts floating ON it ── */
.name-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(24px,4.5vw,72px);
  align-items:center}
@media(max-width:940px){.name-grid{grid-template-columns:1fr;gap:38px}}
.statrow{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--hair)}
.statrow b{display:block;font-family:var(--body);font-weight:800;font-size:clamp(22px,2.4vw,28px);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.statrow span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
  font-weight:700}
.stage{position:relative;padding:18px 0}
.pf{position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(150deg,#C9A88E,#8E6A55 46%,#4A2F2C);
  box-shadow:0 46px 96px -42px rgba(29,10,12,.66)}
.pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 34%}
.pf .grainy{position:absolute;inset:0;opacity:.24;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
.fc{position:absolute;border-radius:var(--r-lg);padding:15px 17px;
  background:var(--lift);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 60px -22px rgba(29,10,12,.62),0 2px 5px rgba(29,10,12,.08)}
.fc .l{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--burg);margin:0}
.fc .v{font-family:var(--body);font-weight:800;font-variant-numeric:tabular-nums;font-size:30px;
  letter-spacing:-.035em;line-height:1;margin-top:5px;color:var(--ink)}
.fc .v.sm{font-size:22px}
.fc .vrow{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.fc .vrow i{font-style:normal;font-size:11.5px;color:var(--mut)}
.fc .s{font-size:11.5px;color:var(--mut);margin-top:4px;max-width:24ch}
.fc-1{left:-8%;bottom:14%}
.fc-2{right:-9%;top:10%;width:226px}
.fc-3{right:4%;bottom:-3%;padding:10px 15px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--umber)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ochre);
  box-shadow:0 0 0 3px rgba(169,113,74,.26)}
/* D9 . hero B is the portrait WITH artifacts floating on it. Below 940 the
   cards used to drop out of position and stack as a list, which deleted the
   thing he picked at the two widths most people use. They stay on the portrait
   down to 560, at a smaller scale, and the stage is capped so the picture never
   eats a whole phone screen. */
@media(max-width:940px){
  /* width:100% is load bearing. auto inline margins on a GRID ITEM replace the
     default stretch with centring at fit-content, and every child here is
     absolutely positioned, so fit-content was 0 and the portrait vanished at
     390. Measured, not guessed. */
  .stage{width:100%;max-width:440px;margin-inline:auto}
  .fc-1{left:-14px;bottom:12%}
  .fc-2{right:-14px;top:8%;width:118px}
  .fc-3{right:8px;bottom:-14px;padding:8px 13px}
  .fc.thumb{width:120px}
  .fc.thumb.tall{width:106px}
}
@media(max-width:560px){
  .stage{max-width:none}
  /* the cards hang off the edges rather than sit across his face */
  .fc-1{left:-8px;bottom:-16px}
  .fc-2{right:-8px;top:6%;width:104px}
  .fc.thumb{width:104px}
  .fc.thumb.tall{width:94px}
  .fc-3{right:4px;bottom:-12px;font-size:12px}
}

/* ── 2 . THE LIBRARY . mixed media, vertical, never a uniform grid ──────── */
/* D8 . this was an auto-fill grid with mixed aspect ratios, so every short tile
   left a hole under it and the last row ended on one orphan hanging alone.
   Real columns give real masonry: no hole, no orphan, mixed ratios kept. */
.lib{columns:4;column-gap:12px;margin-top:30px}
@media(max-width:1000px){.lib{columns:3}}
@media(max-width:640px){.lib{columns:2;column-gap:10px}}
.lib figure{margin:0 0 12px;position:relative;aspect-ratio:9/16;border-radius:var(--r-md);
  overflow:hidden;background:var(--paper-2);box-shadow:0 20px 44px -24px rgba(29,10,12,.5);
  break-inside:avoid;-webkit-column-break-inside:avoid;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media(max-width:560px){.lib figure{margin-bottom:10px}}
.lib figure:nth-child(4n+3){aspect-ratio:4/5}
.lib figure:hover{transform:translateY(-5px);box-shadow:0 32px 62px -26px rgba(29,10,12,.6)}
.lib video,.lib img{width:100%;height:100%;object-fit:cover;display:block}
.lib figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 11px 9px;display:flex;
  align-items:baseline;gap:7px;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:#FBF8F4;background:linear-gradient(transparent,rgba(20,8,10,.78))}
.lib figcaption span{margin-left:auto;font-size:8px;opacity:.72;letter-spacing:.14em}
.lib .v::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;
  border-radius:50%;background:var(--ochre);box-shadow:0 0 0 3px rgba(169,113,74,.3)}

/* ── 3 . THREE DOMAINS . unequal 3:5:4, z depth, ground through the gutters  */
.dom{display:grid;grid-template-columns:3fr 5fr 4fr;gap:clamp(14px,2.4vw,30px);margin-top:36px;
  align-items:start}
@media(max-width:900px){.dom{grid-template-columns:1fr;margin-top:26px}}
.dom .d{position:relative;border-radius:var(--r-xl);padding:clamp(20px,2.6vw,32px);
  background:linear-gradient(140deg,rgba(255,255,255,.72),rgba(255,255,255,.34));
  backdrop-filter:blur(22px) saturate(185%) brightness(1.04);
  -webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.04);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 62px -30px rgba(29,10,12,.5)}
.dom .d::before{content:"";position:absolute;inset:0;border-radius:var(--r-xl);padding:1.2px;
  background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,214,224,.45) 28%,
    rgba(255,255,255,.1) 52%,rgba(214,232,255,.45) 78%,rgba(255,255,255,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* they overlap in DEPTH, not just in z-index. the middle panel sits forward and
   its own shadow falls across the edge of both neighbours: three objects laid
   on a desk, never three cells of a table. */
.dom .d1{margin-top:52px}
.dom .d2{margin-top:0;z-index:3;margin-inline:clamp(-36px,-2.4vw,-16px);
  box-shadow:0 38px 74px -30px rgba(29,10,12,.58)}
.dom .d3{margin-top:96px}
@media(max-width:900px){.dom .d2{margin-inline:0;box-shadow:none}}
.dom .n{font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.16em;
  color:var(--ochre)}
.dom h3{margin-top:9px}
.dom p{font-size:15.5px;color:var(--mut);margin-top:9px}
/* the drawn mark, one per domain. a worked-by-hand stroke, not an icon glyph,
   and never the compass, which belongs to the shelf's kind system. */
.dm{width:clamp(56px,4.6vw,72px);height:auto;margin-bottom:16px;overflow:visible}
.dm path,.dm circle{stroke:var(--ink);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.dm .dot{fill:var(--burg);stroke:none}
.d2 .dm path,.d2 .dm circle{stroke:var(--umber)}
/* D2 . below 900 the three panels used to stack as three identical white cards,
   which is the exact V1 disease. Glass goes pale under 300px anyway (measured),
   so on a phone the material drops and the DRAWN MARK carries the section. */
@media(max-width:900px){
  .dom .d1,.dom .d2,.dom .d3{margin-top:0}
  .dom .d{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:0;box-shadow:none;border-radius:0;padding:22px 0 24px;
    border-bottom:1px solid var(--hair);
    display:grid;grid-template-columns:clamp(52px,16vw,72px) minmax(0,1fr);
    column-gap:20px;align-items:start}
  .dom .d::before{display:none}
  .dom .d:last-child{border-bottom:0}
  .dm{grid-row:1/4;margin-bottom:0;margin-top:4px;width:100%}
  .dom .n{grid-column:2}
  .dom h3{grid-column:2;margin-top:4px}
  .dom p{grid-column:2}
}

/* ── 4 . THE SPINE . the line draws itself at his scroll speed ──────────── */
.sp-wrap{position:relative;margin-top:clamp(36px,6vw,80px)}
.sp{width:100%;height:auto;overflow:visible}
.sp .line{stroke:var(--ink);stroke-width:2.1;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.sp .st{opacity:0;transform:translateY(7px);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.sp .st.on{opacity:1;transform:none}
.sp text{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--mut)}
.sp text.y{font-size:10px;fill:var(--faint);letter-spacing:.14em}
.sp text.now{fill:var(--burg)}

/* ── 5 . THE NUMBERS . type IS the object. no card. ─────────────────────── */
/* D8 . the numeral was left aligned and sixty percent of the width sat empty.
   This is the one section allowed true central symmetry, because a numeral is
   symmetric by nature and the object wants monumental authority. */
.s-num .wrap{text-align:center}
.s-num .kick{margin-bottom:6px;max-width:none}
/* a global p{max-width:60ch} computes to ~393px at the kicker's 11px size, so
   the kicker was centring inside a short box and reading as left aligned. */
.numrow{display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(12px,2.4vw,32px);margin-top:10px}
.scatter{margin-top:18px;flex:0 0 auto}
.numbar{display:block;width:120px;height:7px;border-radius:4px;background:var(--burg);
  margin:4px auto 0}
.numu{font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--mut);margin:18px auto 0;max-width:52ch;text-wrap:balance}
.s-num .support{justify-content:center;margin-inline:auto;max-width:620px}
.s-num .support div{text-align:center;flex:0 1 auto}
.s-num .support span{max-width:22ch;margin-inline:auto;text-wrap:balance}
.s-num{padding-bottom:clamp(48px,7vw,104px)}
.acc{font-family:var(--accent);font-style:italic;color:var(--burg);font-size:1.12em}
@media(max-width:620px){.scatter{display:none}}

/* ── 6 . WHAT CHANGED . sticky left, scrolling right ────────────────────── */
.chg{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:900px){.chg{grid-template-columns:1fr}}
.chg-l{position:sticky;top:clamp(92px,12vh,150px)}
@media(max-width:900px){.chg-l{position:static}}
.chg-l .lede{margin-top:16px;max-width:34ch}
/* the KNOT . the before state, one self crossing line, drawn not listed.
   the ribbon leaves it and straightens as the reader scrolls. */
.knot{width:100%;max-width:340px;margin-top:clamp(18px,3vw,38px);overflow:visible}
.knot .tangle{stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;opacity:.82}
.knot .rib{stroke:var(--burg-mid);stroke-width:2.6;fill:none;stroke-linecap:round}
/* D1 . the beat was a 2 col grid with 3 children, so the body landed in the
   52px number column and wrapped one word per line. the text is its own cell. */
.chg-r .ch{padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start}
.chg-r .ch:last-of-type{border-bottom:0}
.chg-r .i{font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.08em;
  color:var(--ochre);padding-top:5px}
.chg-r .ch-b{min-width:0}
.chg-r .ch-b p{font-size:15.5px;color:var(--mut);margin-top:7px}
/* the method row. the section he ticked in round two, at the smallest size
   that still carries it. his own words: not a template, configured, ready. */
.meth{position:relative;margin-top:clamp(22px,3vw,36px);padding:clamp(22px,2.6vw,30px);
  border-radius:var(--r-xl);
  background:linear-gradient(140deg,rgba(255,255,255,.68),rgba(255,255,255,.28));
  backdrop-filter:blur(24px) saturate(185%) brightness(1.05);
  -webkit-backdrop-filter:blur(24px) saturate(185%) brightness(1.05);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 34px 70px -32px rgba(29,10,12,.5)}
/* the chromatic rim. the one visual signature: a bent hairline where glass
   meets paper. This is glass instance 3 of 3 and the last one on the page. */
.meth::before{content:"";position:absolute;inset:0;border-radius:var(--r-xl);padding:1.4px;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,214,224,.5) 26%,
    rgba(255,255,255,.12) 52%,rgba(214,232,255,.5) 76%,rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.meth-h{font-family:var(--accent);font-weight:400;font-size:clamp(24px,2.6vw,30px);
  line-height:1.08;letter-spacing:-.01em;margin:0}
.meth-h em{color:var(--burg);font-style:italic}
.meth-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);margin-top:20px}
@media(max-width:820px){.meth-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.meth-g{grid-template-columns:1fr}}
.mstep{border-top:2px solid var(--burg);padding-top:10px;min-width:0}
.mstep b{display:block;font-family:var(--body);font-weight:800;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ochre);margin-bottom:6px}
.mstep p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink)}

/* ── 7 . THE SHOP DOOR . the slab, the one inversion ────────────────────── */
.s-door .slab{max-width:960px;margin-inline:auto;text-align:center}
.s-door .slab .lede{margin-inline:auto}
.s-door .kick{color:#E8A8B6}

/* ── 8 . THE SHELF . three drawn workers, each with a FACE ──────────────────
   HIS correction, 19 sep: "give a face to the agents artifacts". The orb is
   dead here. No box behind the figure: the silhouette IS the object, and the
   uneven heights come from the drawing, never from a stretched card.
   A black square laid over any one of them leaves a worker, not a rectangle. */
.shelf{display:grid;gap:clamp(26px,3.4vw,56px);align-items:end;
  grid-template-columns:1.05fr 1.3fr .95fr;margin-top:clamp(30px,5vw,58px)}
@media(max-width:940px){.shelf{grid-template-columns:1fr;align-items:start;
  gap:clamp(34px,7vw,52px)}}
.ag{position:relative;color:var(--lift);display:flex;flex-direction:column;
  transition:transform .4s var(--ease)}
.ag:hover{transform:translateY(-4px)}
/* the drawn worker. the three sit at different natural heights, on no shared
   baseline, because a standing figure is taller than a coiled one. */
.ag-fig{display:flex;justify-content:flex-start;margin-bottom:18px;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.ag-fig .fig{height:auto;overflow:visible}
.fig-tall{width:min(168px,52%)}
.fig-wide{width:min(238px,74%)}
.fig-narrow{width:min(132px,44%)}
.ag-tall{padding-bottom:0}
.ag-wide{padding-bottom:clamp(6px,1.4vw,26px)}
.ag-narrow{padding-bottom:clamp(14px,3vw,54px)}
/* the ink. light on the dark ground, the way a chalk line reads on slate. */
.fig .ln path,.fig .ln circle{stroke:#EBD9DA;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.fig .hair path{fill:#8E2440;stroke:#EBD9DA;stroke-width:2.4;stroke-linejoin:round}
.fig .br{stroke:#EBD9DA;stroke-width:3}
.fig .eye{stroke:#EBD9DA;stroke-width:3;fill:none;stroke-linecap:round}
.fig .fl{fill:#EBD9DA;stroke:none}
.fig .ln2{stroke:#EBD9DA;stroke-width:2.4;stroke-linecap:round;fill:none}
.fig .pg{stroke:#EBD9DA;stroke-width:2;fill:rgba(26,16,18,.82);stroke-linejoin:round}
.fig .pg2{stroke:rgba(235,217,218,.34);stroke-width:1.8;fill:rgba(26,16,18,.6);
  stroke-linejoin:round}
.fig .tx{stroke:#C98CA0;stroke-width:2;stroke-linecap:round;fill:none}
.fig .ring{stroke:#8E2440;stroke-width:2.2;fill:none;opacity:.95;stroke-linecap:round}
.fig .st{stroke:#A9714A;stroke-width:2.2;stroke-linecap:round;fill:none}
.fig .och{fill:#A9714A;stroke:none}
.fig .base{stroke:rgba(235,217,218,.26);stroke-width:1.6;fill:none}
.ag-room{display:inline-flex;align-items:center;gap:7px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:#E8A8B6}
.ag-room svg{width:15px;height:15px;stroke:#E8A8B6;stroke-width:1.7;
  stroke-linecap:round;fill:none;flex:none}
.ag h3{font-family:var(--accent);font-weight:400;font-size:clamp(30px,3.2vw,38px);
  letter-spacing:-.02em;color:var(--lift);margin-top:9px;line-height:1}
.ag p{font-size:14.5px;color:rgba(251,248,244,.66);margin-top:10px;max-width:34ch}
.ag-f{display:flex;align-items:center;gap:10px;margin-top:20px;
  padding-top:16px;border-top:1px solid rgba(255,235,225,.16)}
.ag-tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  padding:6px 13px;border-radius:var(--r-pill);background:rgba(232,168,182,.16);color:#F0BCC6}
.ag-act{margin-left:auto;font-size:13.5px;font-weight:700;color:#E8A8B6;text-decoration:none}
.ag-act:hover{text-decoration:underline;text-underline-offset:3px}
/* the arch hairline divided Life from Work on this shelf. All three free agents
   now sit in the Life room, matching the shop, so it divides nothing and goes. */
.shelf-more{margin-top:clamp(30px,4vw,48px);padding-top:22px;
  border-top:1px solid rgba(255,235,225,.16);
  font-size:15.5px;color:rgba(251,248,244,.7);max-width:none}
.shelf-more a{color:#E8A8B6;font-weight:700;text-decoration:none;margin-left:10px}
.shelf-more a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── 9 . THE CLOSE ──────────────────────────────────────────────────────── */
.s-close .btn{background:#E8A8B6;color:#2B1A1C}
.s-close .btn:hover{background:#F0BCC6}

/* the three acts butt together with no seam */
.act-3 + .act-3{padding-top:0}
.s-door{padding-bottom:clamp(40px,6vw,80px)}
.s-shelf{padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(40px,5vw,72px)}
.s-spine{padding-bottom:clamp(48px,7vw,100px)}
.sp-wrap{margin-top:clamp(24px,3.4vw,48px)}

/* the two supporting figures under the number, and the nav cta, and the close */
.support{display:flex;gap:clamp(22px,3.4vw,52px);flex-wrap:wrap;margin-top:34px;
  padding-top:24px;border-top:1px solid var(--hair)}
.support b{display:block;font-family:var(--body);font-weight:800;font-size:clamp(20px,2.2vw,26px);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.support span{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);
  font-weight:700;max-width:24ch;display:block;margin-top:3px}
.navcta{padding:9px 18px;border-radius:var(--r-pill);background:var(--burg);
  color:var(--lift)!important;font-weight:700;font-size:14px}
.navcta:hover{background:var(--burg-mid)}
/* THE NAV AT 390. Measured 19 sep 2026, 20:10: brand + three labels + the pill
   do not fit 390, so flex shrank each link and every label broke across two
   lines. "The / method", "The / shop", "Book / a call". That is the same one
   word per line disease as D1, in the first thing a phone sees. The three
   links now ride in their own element: `display:contents` keeps the desktop
   row byte identical, and below 560 that element becomes the second row.
   Every label is nowrap, so no label may ever split again at any width. */
.nav .navlinks{display:contents}
.nav a{white-space:nowrap}
@media(max-width:560px){
  .nav .in{flex-wrap:wrap;row-gap:7px;padding-block:9px;min-height:0;gap:14px}
  .nav .brand{margin-right:auto}
  .navcta{order:2;padding:7px 15px;font-size:13.5px}
  .nav .navlinks{display:flex;flex-basis:100%;gap:20px;order:3}
}
.foot-close{font-family:var(--accent);font-weight:400;font-size:clamp(22px,3.2vw,38px);
  letter-spacing:-.02em;color:var(--lift);max-width:none;margin:0 0 30px}
.foot-close em{font-style:italic;color:#E8A8B6}

/* the hero's floating artifacts . real frames, not restated numbers */
.fc.thumb{padding:0;overflow:hidden;width:150px;aspect-ratio:4/5;border-radius:var(--r-md)}
.fc.thumb.tall{width:132px;aspect-ratio:9/16}
.fc.thumb img,.fc.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.fc.thumb figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 10px 8px;
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:#FBF8F4;
  background:linear-gradient(transparent,rgba(20,8,10,.8))}
@media(max-width:940px){.fc.thumb,.fc.thumb.tall{width:auto;aspect-ratio:auto;height:150px}}


/* ── THE SPINE FOLDS VERTICAL AT 390 ─────────────────────────────────────
   OBJECTS_V2: "it may fold to a vertical spine at 390px". At 390 the 1180 wide
   svg squeezed every station label to about four pixels tall and nothing could
   be read. Measured. The vignettes are the SAME drawings, each wrapped in a
   viewBox cropped to its own bounding box, never redrawn. */
.sp-m{display:none}
@media(max-width:760px){
  .sp-wrap{display:none}
  .sp-m{display:block;list-style:none;margin:clamp(22px,6vw,36px) 0 0;padding:0;
    position:relative}
  .sp-m::before{content:"";position:absolute;left:27px;top:24px;bottom:30px;width:1.6px;
    background:linear-gradient(180deg,var(--ink),var(--umber) 62%,var(--burg));opacity:.45}
  .sp-m li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);
    column-gap:20px;align-items:center;padding:13px 0;margin:0}
  .sp-m li::marker{content:""}
  .sp-m .v{position:relative;z-index:2;display:grid;place-items:center;
    width:56px;height:56px;border-radius:50%;background:var(--paper);
    box-shadow:0 0 0 7px var(--paper)}
  .sp-m .v svg{width:44px;height:44px;overflow:visible}
  .sp-m .now .v svg{width:30px;height:30px}
  .sp-m .t{min-width:0;font-size:15.5px;line-height:1.35;color:var(--ink)}
  .sp-m .t b{display:block;font-family:var(--body);font-weight:800;font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);margin-bottom:3px}
  .sp-m .now .t b{color:var(--burg)}
}

/* ── D8 . THE SEAMS, MEASURED AND CLOSED ───────────────────────────────────
   Measured 19 sep 2026, 20:20, in the browser at 1440: every `.act` carries
   150px of padding at the TOP and 150 at the BOTTOM, so each seam is 300px of
   nothing and the page has eight of them. Act three had already been trimmed
   by hand and reads right; acts one and two never were, which is the half of
   D8 the handoff left open.
   The rule is not "less padding everywhere". A section that follows another
   INSIDE THE SAME ACT gives up half its air, and the two ACT seams keep all
   of theirs, because the ground changes value there and a room change earns
   the pause. `:has` is the whole point: without it the rule cannot tell a
   same act neighbour from an act boundary, and if a browser lacks it the page
   simply keeps today's spacing. */
.act-1 + .act-1,
.act-2 + .act-2       {padding-top:clamp(40px,6vw,84px)}
.act-1:has(+ .act-1),
.act-2:has(+ .act-2)  {padding-bottom:clamp(44px,6.5vw,92px)}