/* CMW Research Program
   Palette values are the Research Lab, MCL, and EIBT systems from the CMW palette file.
   Ground is a low-saturation derivative of Electric Blue; Deep Blue is a darkened
   derivative used where Electric Blue itself cannot carry text at size. */

@font-face{font-family:'Nokio';font-style:normal;font-weight:400;src:url(../fonts/Nokio-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Nokio';font-style:normal;font-weight:500;src:url(../fonts/Nokio-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Nokio';font-style:normal;font-weight:700;src:url(../fonts/Nokio-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;src:url(../fonts/Newsreader-var.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;src:url(../fonts/Newsreader-var-italic.woff2) format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;src:url(../fonts/IBMPlexMono-400.woff2) format('woff2');font-display:swap}

:root{
  --ink:#2D2F30; --slate:#59646B; --greige:#DADBD3; --paper:#FAFAF8;
  --ground:#E8EDF6; --pageground:#D3DCEE;          /* page ground, 11.45:1 with ink */
  --rule:#C6D0E2;            /* hairline on ground */
  --blue:#2869EB;            /* Electric Blue, marks and fields */
  --deepblue:#2258C8;        /* text-safe blue, 5.42:1 on ground */
  --orange:#E6823A;
  --yel:#E8C400;             /* MCL */
  --eraser:#C98A7C;          /* MCL */
  --nerve:#C9F227;           /* EIBT */
  --heat:#FF4F6D;            /* EIBT */
  --darkroom:#24111F;        /* EIBT ground */
  --bare:#F8E1EE;            /* EIBT light ground */
  --butter:#F7F2D3;          /* MCL field, Highlighter Yellow at 15% on paper.
                                Replaces --butter #F1E1DC, which was never a palette
                                value and measured CIE76 dE 9.61 from --bare,
                                under the palette's own redundancy floor of 12. */
  --sky:#B7CCF4;             /* umbrella + practice field, Electric Blue at 32%.
                                dE 20.9 from --ground, which pale blue mixes could
                                not clear because --ground is itself a blue tint. */
  --yolk:#F1E27F;            /* the Labs deck, Highlighter Yellow at 40%. A tint,
                                not the mark: the palette holds pure Highlighter
                                Yellow to 2-8% of a composition, and a deck is the
                                largest field on the page. */
  --read:1.135;              /* Newsreader against adjacent Nokio, matched on x-height */

  /* The prose column as one font-independent length, and the second vertical
     inside it. `ch` is font-relative, so `max-width:68ch` asked by a mono
     label at 10.5px and by a body paragraph at 19.295px returned boxes about
     200px apart, and each then centred itself somewhere different. That is
     how one band ended up with five left edges. 45.1522rem is exactly what
     68ch computes to in the body's own type, measured rather than guessed. */
  --measure:45.1522rem;
  --term:14.5rem;            /* the label column .rspec already uses; the stat
                                figures adopt it rather than moving it */
  --gutter:clamp(20px,3vw,40px);   /* .rspec's own column-gap */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--ground);color:var(--ink)}
body{font-family:Newsreader,Georgia,serif;font-optical-sizing:auto;font-size:17px;
  line-height:1.6;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:Nokio,system-ui,sans-serif;font-weight:500;letter-spacing:.01em}
.mono,.kick,.gnum,.stamp,.tag,.meta,.apps,.wc b,.ph,.status,.count{
  font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:var(--deepblue)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
img{max-width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:8px 14px;font-family:"IBM Plex Mono",monospace;font-size:12px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ── one gutter, everywhere ──────────────────────────────────────────── */
.in{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,48px);width:100%}
.band{padding:clamp(40px,5.5vw,74px) 0}

.band + .band{border-top:1px solid transparent}
.b-ground{background:var(--ground);color:var(--ink)}

.b-ground + .b-ground > .in{border-top:1px solid var(--rule);padding-top:clamp(34px,4vw,52px)}
.b-ink{background:var(--ink);color:#F2F1EC}

.b-dark{background:var(--darkroom);color:#EDE6EA}

.b-bare{background:var(--bare);color:var(--darkroom)}

.b-greige{background:var(--greige);color:var(--ink)}

/* the neutral above the page ground, shared by every page in the family */
.b-paper{background:var(--paper);color:var(--ink)}
.b-paper .kick{color:var(--slate)}

  .b-blue{background:var(--blue);color:var(--paper)}

.b-butter{background:var(--butter);color:var(--ink)}
.b-sky{background:var(--sky);color:var(--ink)}


.b-ink .kick,.b-dark .kick{color:inherit;opacity:.78}
.b-butter .kick,.b-greige .kick,.b-sky .kick{color:var(--ink);opacity:.7}
.b-bare .kick{color:var(--darkroom);opacity:.72}
.b-ink h2,.b-ink h3{color:#F7F6F1}
.b-dark h2,.b-dark h3{color:var(--bare)}
.b-dark a{color:var(--nerve)}
.b-ink a{color:var(--yel)}
.b-ink.acc-orange a{color:#F0A268}
.b-bare a{color:#8C1F52}
.b-butter a{color:#2258C8}   /* deepblue on butter, 5.64:1 */
.b-sky a{color:#1B3F8F}      /* deep blue on sky, 5.72:1 */
.b-greige a{color:#1A48B0}
.b-ink .note,.b-dark .note{color:inherit;opacity:.8}
.b-ink .ow,.b-dark .ow,.b-ink .cw,.b-dark .cw,.b-ink .cta span,.b-dark .cta span{color:inherit;opacity:.8}
.b-bare .note,.b-bare .ow,.b-butter .note,.b-butter .ow,.b-greige .note,.b-greige .ow,.b-sky .note,.b-sky .ow{color:inherit;opacity:.78}
.b-butter .pbox,.b-greige .pbox,.b-sky .pbox{background:rgba(255,255,255,.62);border-color:rgba(45,47,48,.16)}

/* ── nav, tinted per program ─────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:30;background:rgba(232,237,246,.94);
  border-bottom:1px solid var(--rule);padding:9px 0;backdrop-filter:saturate(150%) blur(6px)}
.bar .in{display:flex;gap:6px 18px;align-items:center;flex-wrap:wrap}
.bar .home{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;margin-right:auto}
.bar nav{display:flex;gap:4px;flex-wrap:wrap}
.bar nav a{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink);
  text-decoration:none;border:1px solid transparent;padding:6px 11px;min-height:32px;
  display:inline-flex;align-items:center;transition:background .12s,color .12s,border-color .12s}
.bar nav a:hover{border-color:var(--rule);background:rgba(255,255,255,.5)}
.bar nav a.t-rp[aria-current="page"]{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.bar nav a.t-mcl[aria-current="page"]{background:var(--yel);color:var(--ink);border-color:var(--yel)}
.bar nav a.t-eibt[aria-current="page"]{background:var(--nerve);color:var(--darkroom);border-color:var(--nerve)}
.bar nav a.t-pr[aria-current="page"]{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.bar nav a.t-wt[aria-current="page"]{background:var(--sky);color:var(--ink);border-color:var(--sky)}
.bar nav a.t-cn[aria-current="page"]{background:var(--greige);color:var(--ink);border-color:var(--greige)}
/* Practice Sites, nav item 5. It takes --yolk because the two sites are
   sustained practice rather than either stream, and every other accent is
   already spoken for by a stream, the umbrella, or Connect. */
.bar nav a.t-ps[aria-current="page"]{background:var(--yolk);color:var(--ink);border-color:var(--yolk)}
.bar nav a.t-ps:hover{border-color:var(--yolk)}
/* the two new pages: a subheading inside a band, below the band's own h2 */
.psub{font-family:"Nokio",Georgia,serif;font-weight:500;font-size:19px;line-height:1.32;
  letter-spacing:-.005em;margin:26px 0 10px}
.psub:first-child{margin-top:0}

/* ── the 45 constructed marks ──────────────────────────────────────────
   Structure follows currentColor, so a mark reads on a light band and a
   dark one without a second file. The accent is fixed per group and is
   deliberately not a stream accent: Electric Blue against Signal Orange
   separates by 126.2 CIE76 under simulated dichromacy, while the two
   stream accents separate by 8.5 against a floor of 12. Enclosure carries
   the group anyway, so the colour is redundant rather than load-bearing.
   --gnd is the band's own ground, for the four marks that knock out. */
.cmwi{display:block;width:100%;height:auto;--gnd:var(--paper)}
.cmwi-cond{--acc:#E6823A}
.cmwi-op,.cmwi-gram{--acc:#2869EB}
.cmwi-art{--acc:currentColor}
/* the research-object group takes Electric Blue, the value operations and
   grammar already carry. No new palette value: enclosure separates the groups,
   and Signal Orange stays with conditions. */
.cmwi-obj{--acc:#2869EB}
.b-ink .cmwi,.b-dark .cmwi{--gnd:var(--ink)}
.b-sky .cmwi{--gnd:var(--sky)}
.b-greige .cmwi{--gnd:var(--greige)}
.b-ground .cmwi{--gnd:var(--ground,#EEF1F7)}

/* a row of condition-family marks under a heading, each with its label */
.mrow{display:flex;flex-wrap:wrap;gap:18px 26px;margin:18px 0 4px;padding:0;list-style:none}
.mrow li{display:flex;align-items:center;gap:9px;margin:0}
.mrow .mk{width:26px;flex:0 0 26px}
.mrow span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate)}
.b-ink .mrow span,.b-dark .mrow span{color:rgba(250,250,248,.72)}

/* the eight grammar marks, placed in order. Each carries a line running
   edge to edge, so set side by side with no gap they read as one line. */
.chain{display:flex;align-items:center;gap:0;margin:22px 0 10px;padding:0;
  list-style:none;overflow-x:auto;overscroll-behavior-x:contain}
.chain li{flex:0 0 auto;width:76px;margin:0}
.chain .cmwi{width:76px}
/* the labels sit in cells of the same width as the marks, so each name stays
   under its own step. 76px is what "embodied encounter" needs at this size
   without the two names either side of it running into each other. */
.chainlab{display:flex;gap:0;margin:0 0 2px;padding:0;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.chainlab::-webkit-scrollbar{display:none}
.chainlab li{flex:0 0 auto;width:76px;margin:0;padding:0 3px;
  font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--slate);text-align:center;line-height:1.3;
  hyphens:none;overflow-wrap:normal}
.b-ink .chainlab li,.b-dark .chainlab li{color:rgba(250,250,248,.6)}

/* corner brackets, the note-page hero treatment */
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:22px;height:22px;
  border:2px solid var(--acc,rgba(250,250,248,.5));pointer-events:none}
.brk::before{top:-4px;left:-6px;border-right:0;border-bottom:0}
.brk::after{bottom:-4px;right:-6px;border-left:0;border-top:0}
@media(max-width:620px){.brk::before,.brk::after{display:none}}
/* a bolded claim line in the spec copy: a statement, not a label. Kick styling
   is uppercase mono and centred, which is unreadable at sentence length. */
.pstate{font-family:"Nokio",Georgia,serif;font-weight:500;font-size:17.5px;
  line-height:1.42;letter-spacing:-.004em;margin:20px auto;padding-left:14px;
  border-left:2px solid var(--rule);color:var(--ink);max-width:var(--measure)}
/* .pstate hardcodes ink, so on an ink band it rendered invisible. Every other
   class that needed it already has a b-ink companion: .b-ink .kick, .b-ink .note,
   .b-ink .rspec dt. This is that companion. */
.b-ink .pstate,.b-dark .pstate{color:inherit;border-left-color:rgba(242,241,236,.32)}
.bar nav a.t-wt:hover{border-color:var(--sky)}
.bar nav a.t-cn:hover{border-color:var(--slate)}
.bar nav a.t-rp:hover{border-color:var(--blue)}
.bar nav a.t-mcl:hover{border-color:var(--yel)}
.bar nav a.t-eibt:hover{border-color:#9DBF1E}
.bar nav a.t-pr:hover{border-color:var(--orange)}

/* ── heroes ──────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(48px,6vw,86px) 0 clamp(42px,5vw,70px)}
.hero .in{position:relative}
.frm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero h1{font-size:clamp(26px,3.4vw,38px);margin:16px 0 4px;font-weight:500;max-width:24ch}
.tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0;opacity:.8}
.thesis{font-size:clamp(21px,2.7vw,29px);line-height:1.34;max-width:36ch;margin:20px 0 0;
  font-family:Nokio,sans-serif;font-weight:400}
.claim{max-width:68ch;margin:22px 0 0;font-size:calc(17px * var(--read))}
.claim + .lead{margin-top:clamp(18px,2vw,26px)}
.oc{color:var(--orange)}
.sub{max-width:70ch;margin:14px 0 0;font-size:16px;opacity:.85}
/* a subtext line sitting directly under a link, saying what is behind it */
.more + .sub{display:block;margin-top:4px;font-size:14.5px;opacity:.7}

h2{font-size:clamp(19px,2.1vw,24px);margin:0 0 8px}
.kick{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:0 0 16px}
.lead{max-width:68ch;margin:0 0 24px;font-size:calc(17px * var(--read))}
.body{max-width:68ch;margin:0 0 14px;font-size:calc(17px * var(--read))}
.note{max-width:var(--measure);margin:0;color:var(--slate);font-size:16px}
.count{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin:0 0 10px}

/* ── eight-step chain ────────────────────────────────────────────────── */
.chain{display:flex;align-items:center;width:100%;margin:6px 0 18px;padding:6px 0 0}
.chain .cl{line-height:0;font-size:0;flex:1 1 0;min-width:0}
.chain .cl > svg,.chain .cl > img{display:block;width:100%;height:auto}
.grammar{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.gstep{display:grid;grid-template-columns:32px 44px 1fr;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--rule)}
@media(min-width:760px){.gstep{grid-template-columns:32px 44px 240px 1fr}}
@media(max-width:759px){.gstep .ggloss{grid-column:2/-1}}
.b-ink .grammar,.b-ink .gstep{border-color:rgba(242,241,236,.22)}
.gnum{font-size:10px;opacity:.65}
.gic{display:flex;align-items:center;justify-content:center;height:38px}
.gstep b{font-family:Nokio,sans-serif;font-weight:500;font-size:13px;letter-spacing:.06em}
.ggloss{font-size:14.5px;opacity:.78}

/* ── stream banners and cards ────────────────────────────────────────── */
.streams{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:860px){.streams{grid-template-columns:1fr 1fr}}
.stream{position:relative;padding:28px 26px 24px;text-decoration:none;display:block}
.s-mcl{background:var(--ink);color:#F2F1EC}
.s-eibt{background:var(--darkroom);color:#EDE6EA}
.stream h3{font-size:21px;margin:12px 0 6px;font-weight:500}
.s-mcl h3{color:#F7F6F1}
.s-eibt h3{color:var(--bare)}
.stream p{margin:0 0 8px;font-size:15px;opacity:.9}
.stream .status{font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:10px}
.s-mcl .status{color:var(--yel)}
.s-eibt .status{color:var(--nerve)}
.stream .go{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;display:inline-block;margin-top:12px}
.s-mcl .go{color:var(--yel)}
.s-eibt .go{color:var(--nerve)}
.stream:hover .go{text-decoration:underline}

.cards{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cards > li{padding:22px 0;border-bottom:1px solid var(--rule)}
.b-dark .cards,.b-dark .cards > li{border-color:#4a3344}
.b-ink .cards,.b-ink .cards > li,.b-ink .qs,.b-ink .qs li,
.b-ink .pairs,.b-ink .pairs > li{border-color:#494B4C}
.b-bare .cards,.b-bare .cards > li{border-color:#E2BCD2}
.b-butter .cards,.b-butter .cards > li,.b-butter .stds li,.b-butter .pairs,.b-butter .pairs > li,.b-butter .offers,.b-butter .offers li{border-color:#E4DDBB}
.b-sky .cards,.b-sky .cards > li,.b-sky .stds li,.b-sky .pairs,.b-sky .pairs > li,.b-sky .offers,.b-sky .offers li{border-color:#9DB6E4}
/* the Labs deck: outside the cycle, so the cycler never reassigns it */
.b-yolk{background:var(--yolk);color:var(--ink)}
.b-yolk .kick{color:var(--ink);opacity:.7}
.b-yolk a{color:#1B3F8F}
.b-yolk .note,.b-yolk .ow{color:inherit;opacity:.78}
.b-yolk .cards,.b-yolk .cards > li{border-color:#DCCB69}
.b-greige .cards,.b-greige .cards > li,.b-greige .pairs,.b-greige .pairs > li,.b-greige .offers,.b-greige .offers li,.b-greige .qs,.b-greige .qs li{border-color:#c3c4bc}
.cards > li.hasicon{display:grid;grid-template-columns:92px 1fr;gap:22px;align-items:start}
@media(max-width:600px){.cards > li.hasicon{grid-template-columns:60px 1fr;gap:14px}}
.cards h3{font-size:18px;margin:0 0 8px;font-weight:500}
.cq{margin:0 0 8px;font-size:calc(16px * var(--read));max-width:62ch}
.apps{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin:0 0 8px}
.cw{margin:0;font-size:15px;max-width:66ch;opacity:.82}
.wc{margin:0 0 8px;max-width:66ch;font-size:calc(16px * var(--read))}
.wc b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;
  display:block;margin-bottom:2px;opacity:.85}
.b-dark .wc b{color:var(--nerve);opacity:1}
.tagline{margin:0 0 10px;font-size:calc(16px * var(--read));font-style:italic;max-width:58ch}

.oicon{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.oicon img{display:block;width:100%;height:auto}
.dtile{background:var(--darkroom);padding:6px}
.smark{display:flex;align-items:center;gap:14px;margin:0 0 6px}
/* a role heading: its mark, then its name, on one line */
.smark .mk{width:30px;flex:0 0 30px}
.smark .kick{margin:0}
.smark .oicon{width:44px}
.smark h2,.smark h3{margin:0}

/* ── offering rows ───────────────────────────────────────────────────── */
.offers{list-style:none;margin:0 0 6px;padding:0;border-top:1px solid var(--rule)}
.offers li{padding:15px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:start}
.offers .oicon{width:50px}
.offers b{font-family:Nokio,sans-serif;font-weight:500;font-size:16px;display:block;margin:0 0 4px}
.oq{margin:0 0 6px;font-size:calc(16px * var(--read));max-width:60ch}
.ow{margin:0;font-size:14.5px;color:var(--slate);max-width:64ch}
.ogroup{margin:0 0 30px}

/* ── standards ───────────────────────────────────────────────────────── */
.stds{list-style:none;margin:0;padding:0}
.stds li{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--rule)}
.b-bare .stds li{border-color:#E2BCD2}
.b-greige .stds li{border-color:#c3c4bc}
.stds li span:last-child{font-size:calc(16px * var(--read));max-width:64ch}
.sic{display:flex;align-items:center;justify-content:center}

/* ── questions ───────────────────────────────────────────────────────── */
.qs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}

/* Research specification. A term and its answer, so the seven fields stay
   comparable from one Lab or Experiment to the next. Terms are mono and set
   small, because they are labels rather than headings. */
.rspec{max-width:68ch;margin:0}
.rspec dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);
  margin-top:clamp(20px,2.4vw,28px)}
.rspec dt:first-of-type{margin-top:0}
.rspec dd{margin:6px 0 0;font-size:calc(17px * var(--read))}
.b-ink .rspec dt,.b-dark .rspec dt{color:inherit;opacity:.72}
@media (min-width:760px){
  /* the label column is fixed, so the answer column keeps a readable measure
     instead of inheriting what is left of 68ch */
  .rspec{max-width:none;display:grid;grid-template-columns:14.5rem minmax(0,58ch);
    column-gap:clamp(20px,3vw,40px)}
  .rspec dt{grid-column:1;margin-top:clamp(20px,2.4vw,28px);padding-top:5px}
  .rspec dd{grid-column:2;margin-top:clamp(20px,2.4vw,28px)}
  .rspec dt:first-of-type,.rspec dt:first-of-type + dd{margin-top:0}
}
.qs li{padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:calc(17px * var(--read));max-width:66ch}
.b-dark .qs,.b-dark .qs li{border-color:#4a3344}

/* ── altered field, the visual argument ──────────────────────────────── */
.field{width:100%;max-width:none;margin:6px 0 16px}
.field svg{display:block;width:100%;height:auto}
.fieldcap{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;line-height:1.6;
  letter-spacing:.02em;max-width:60ch;margin:0;opacity:.85}
.fieldcap b{font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:10px;
  display:block;margin-bottom:4px;opacity:.7}

/* ── sampler: pairing diagram and disclosure meter ───────────────────── */
.pairs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--rule)}
.pairs > li{padding:22px 0;border-bottom:1px solid var(--rule)}
.b-dark .pairs,.b-dark .pairs > li{border-color:#4a3344}
.pairfig{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.pslot{display:flex;flex-direction:column;align-items:center;gap:6px;width:120px;text-align:center}
.pbox{display:flex;align-items:center;justify-content:center;height:72px;width:100%;
  border:1px solid var(--rule);background:rgba(255,255,255,.55)}
.b-dark .pbox{border-color:#4a3344;background:rgba(255,255,255,.05)}
.pslot i{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-style:normal;line-height:1.3}
.pslot em{font-family:"IBM Plex Mono",monospace;font-size:8.5px;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.pop{font-family:Nokio,sans-serif;font-size:18px;opacity:.55;padding-bottom:20px}
.pairs h3{font-size:17px;margin:2px 0 6px}
.meter{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px;max-width:420px}
.meter i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--rule);display:block}
.meter i.on{background:var(--blue);border-color:var(--blue)}
.b-dark .meter i{border-color:#5c4457}
.b-dark .meter i.on{background:var(--nerve);border-color:var(--nerve)}

/* ── statement page ──────────────────────────────────────────────────── */
.pagetitle{font-size:clamp(19px,2.1vw,24px);margin:0 0 8px;font-weight:500}
.statement{margin:0;font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(21px,2.7vw,31px);line-height:1.42;max-width:30ch;margin:0}
.hero-figure{position:relative;overflow:hidden}
.bioblock{max-width:64ch}
.bioblock p{font-size:calc(17px * var(--read));margin:0 0 16px}

/* ── calls to action ─────────────────────────────────────────────────── */
.ctas{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
@media(min-width:760px){.ctas{grid-template-columns:1fr 1fr}}
.cta{display:block;border:1px solid var(--rule);padding:20px 22px;text-decoration:none;
  color:var(--ink);background:rgba(255,255,255,.55);transition:border-color .12s,background .12s}
.cta:hover{border-color:var(--deepblue);background:#fff}
.cta b{font-family:Nokio,sans-serif;font-weight:500;font-size:16px;display:block;margin:0 0 6px}
.cta span{font-size:calc(14px * var(--read));line-height:1.5;display:block;color:var(--slate)}
.cta .go{display:inline-block;margin-top:10px;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--deepblue)}
.seek{max-width:68ch;font-size:calc(17px * var(--read))}
.ph{font-size:11px;border:1px dashed var(--rule);padding:12px 14px;margin-top:16px;
  display:inline-block}

/* ── form ────────────────────────────────────────────────────────────── */
.cform{max-width:620px}
.cform label.fl,.cform p.fl{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:18px 0 6px}
.cform input[type=email],.cform input[type=text]{width:100%;border:1px solid var(--rule);
  background:#fff;padding:12px 14px;font-family:Newsreader,Georgia,serif;font-size:17px;color:var(--ink)}
.doors{margin:8px 0 0}
.door{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  border:1px solid var(--rule);background:rgba(255,255,255,.6);padding:16px 18px;margin:10px 0;cursor:pointer}
.door input{width:18px;height:18px;margin-top:3px;accent-color:var(--blue)}
.door b{font-family:Nokio,sans-serif;font-weight:500;font-size:15px;display:block;margin:0 0 3px}
.door em{font-style:normal;font-size:calc(13.5px * var(--read));color:var(--slate);display:block;line-height:1.5}
.door:has(input:checked){border-color:var(--deepblue);background:#fff}
.cform button{margin-top:22px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);padding:14px 28px;cursor:pointer}
.hp{position:absolute;left:-5000px}

/* ── policy prose ────────────────────────────────────────────────────── */
.pol{margin:0 0 18px;padding-left:20px;max-width:var(--measure)}
.pol li{font-size:calc(15px * var(--read));margin:0 0 8px;line-height:1.55}
.polsec{padding-top:26px;margin-top:26px;border-top:1px solid var(--rule)}
.polsec:first-of-type{border-top:none;margin-top:0;padding-top:0}
.polsec h2{font-size:17px}

/* ── footer ──────────────────────────────────────────────────────────── */
footer.band{padding:34px 0 40px}
.fnav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px}
.fnav a{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em}
footer .legal{font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.9;opacity:.75;margin:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}}

/* ── altered field animation ─────────────────────────────────────────── */
.fld-dot{opacity:.55}
.fld-alt{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .fld-run .fld-dot{animation:fldpulse 2.6s ease-in-out infinite}
  .fld-run .fld-alt{animation:fldslow 7.4s cubic-bezier(.4,0,.2,1) infinite}
}
@keyframes fldpulse{0%,100%{opacity:.28}45%{opacity:.92}}
@keyframes fldslow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.25)}}
.fld-hold{transform-box:fill-box;transform-origin:center}

/* ── r7: content fills the 1060 column, prose centres inside it ──────── */
.band > .in > .claim,
.band > .in > .sub,
.band > .in > .lead,
.band > .in > .body,
.band > .in > .note,
.band > .in > .seek,
.band > .in > .bioblock,
.band > .in > .pol,
.band > .in > .tagline,
.band > .in > .defs,
.band > .in > .vals,
.cform{margin-left:auto;margin-right:auto}

/* hero statements */
.hero .thesis,
.hero .claim,
.hero .statement{text-align:center;margin-left:auto;margin-right:auto}

/* section headings */
.band > .in > .kick,
.band > .in > h1,
.band > .in > h2,
.band > .in > .pagetitle{text-align:center}

/* figure captions */
.fieldcap{text-align:center;margin-left:auto;margin-right:auto}

/* centred headings need the box centred too, not just the text inside it */
.band > .in > h1,
.band > .in > h2,
.band > .in > .pagetitle{margin-left:auto;margin-right:auto}
.hero h1{max-width:none}
.hero .in > .tag,
.hero .in > svg{display:block;margin-left:auto;margin-right:auto;text-align:center}
.hero .in > .tag{text-align:center}

/* One hero text block on every page: tag, h1, thesis, inside the bracket and
   nothing else inside it, so the bracket is the same shape everywhere and its
   height follows the title rather than whatever else the page carries. Marks,
   figures and mark rows sit outside it. The accent colours the bracket, which
   is the only place a stream's colour enters a hero. */
.hero .brk > .tag,
.hero .brk > h1,
.hero .brk > .pagetitle,
.hero .brk > .thesis,
.hero .brk > .claim,
.hero .brk > .statement{text-align:center;margin-left:auto;margin-right:auto}
.hero .brk > h1{max-width:none}
.hero .mrow{justify-content:center}
.acc-orange{--acc:#E6823A}
.acc-mcl{--acc:#E8C400}
.acc-eibt{--acc:#9DBF1E}
.acc-prog{--acc:#2869EB}
.hero .sub{text-align:left}

/* practice portrait */
.portrait{margin:0 0 clamp(26px,3.4vw,42px)}
.portrait img{display:block;width:100%;height:auto}
.hero .statement{max-width:34ch}
.hero .tag{text-align:center}

/* every section heading centres, the icon-carrying ones included */
.band .smark{justify-content:center}
.band .smark h2,.band > .in > h3{text-align:center}
/* Propositions and agenda levels need air above them so each heading reads as the
   top of its own block rather than as a caption on the paragraph above. */
#working-theory > .in > h3,.band > .in > h3.sub{margin-top:clamp(30px,3.4vw,46px)}

/* the altered-mark strip under the practice statement */
.fldwrap{margin:clamp(26px,3.4vw,40px) auto 0;max-width:100%}
.fldstrip{display:block;width:100%;height:64px;opacity:.55}
@media(prefers-reduced-motion:reduce){.fldstrip{opacity:.7}}


/* ── studio: the Chakra Map pane ─────────────────────────────────────
   The studio is behind a sign-in and is noindex, so this is working
   furniture rather than public surface. It borrows the studio's own
   controls and adds only what the pane needs: a boxed section, a stat
   list, and a session row that opens. */
.chkbox{border:1px solid rgba(45,47,48,.14);border-radius:3px;padding:18px 20px;margin:0 0 18px}
.chkh{font-size:15px;margin:0 0 4px}
.chknote{font-size:13px;color:var(--slate);margin:0 0 12px;max-width:74ch}
.chkrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
.chklab{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate)}
.chkrow input{font-family:"IBM Plex Mono",monospace;font-size:13px;padding:7px 9px;
  border:1px solid rgba(45,47,48,.22);border-radius:3px;min-width:22ch;background:#fff}
.chkfound{border-left:2px solid var(--orange);padding:2px 0 2px 14px;margin:10px 0 0}
.chkstats{list-style:none;display:flex;flex-wrap:wrap;gap:6px 30px;margin:0 0 14px;padding:0}
.chkstats li{display:flex;flex-direction:column;gap:2px}
.chkk{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--slate)}
.chkv{font-size:17px}
.chklist{list-style:none;margin:0;padding:0}
.chkitem{border-top:1px solid rgba(45,47,48,.1)}
.chkitem.out .chkwhen,.chkitem.out .chkmeta{opacity:.55}
.chkhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;width:100%;
  text-align:left;background:none;border:0;padding:11px 0;cursor:pointer;color:inherit}
.chkhead:hover .chkwhen{text-decoration:underline;text-underline-offset:3px}
.chkwhen{font-family:"IBM Plex Mono",monospace;font-size:12px}
.chkstate{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange)}
.chkitem.out .chkstate{color:var(--slate)}
.chkmeta{font-size:12px;color:var(--slate);margin-left:auto}
.chkbody{padding:0 0 16px}
.chksub{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  margin:12px 0 6px}
.chkdl{margin:0;font-size:14px}
.chkdl dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin:8px 0 2px}
.chkdl dd{margin:0}
@media(max-width:620px){
  .chkmeta{margin-left:0;flex-basis:100%}
  .chkrow input{min-width:0;flex:1 1 16ch}
}

/* ── one column per band ─────────────────────────────────────────────
   .status and .rspec were the two elements in a b-ground band that ran the
   full 1060 column while every paragraph beside them sat in the 722px prose
   column, so the band had two left edges before anything was added to it.
   Both now take the measure token. The study block takes it too, which is
   what puts its figures, its bar and its dates on the same edge as the
   paragraph underneath. */
.band > .in > .status,
.band > .in > .rspec,
.band > .in > .sblock{max-width:var(--measure);margin-left:auto;margin-right:auto}


/* ── the study block on the Chakra Map object page ───────────────────
   Form is not a chart: two headline figures and one ratio against a limit,
   so a pair of stat figures and a meter. Two verticals and no others. The
   figures sit on the same column the spec list's terms use, so a number and
   a spec value share an edge. The meter spans the measure end to end and its
   dates sit flush to those ends.

   Colour: Electric Blue carries the elapsed fill, Greige the remaining
   track, Signal Orange the today marker. The marker is direct-labelled,
   which is the relief its 2.68:1 against this ground requires. Orange is
   not used on the ink band: it falls outside the lightness band there. */
.sblock{margin:0 0 clamp(26px,3vw,36px)}
.sfigs{display:grid;grid-template-columns:repeat(2,minmax(0,var(--term)));
  gap:0 var(--gutter);align-items:end;margin:0 0 40px}
.sfig{display:flex;flex-direction:column-reverse;gap:4px;min-width:0}
.sfig b{font-family:"Nokio",sans-serif;font-weight:500;font-size:clamp(38px,4.6vw,54px);
  line-height:.9;color:var(--ink)}
.sfig span{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate)}
.smeter{position:relative;height:6px;border-radius:3px;margin:0 0 10px}
.strack{position:absolute;inset:0;border-radius:3px;background:var(--greige)}
.sfill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--blue)}
.stick{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--orange)}
.snow{position:absolute;top:-22px;white-space:nowrap;color:var(--orange);
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase}
.sends{display:flex;justify-content:space-between;gap:20px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate)}
@media(max-width:620px){
  :root{--term:8.5rem}   /* .rspec stops being a grid below 760px; the figures do not */
  .sfigs{gap:22px var(--gutter);margin-bottom:38px}
  .sends{flex-direction:column;gap:3px}
}

/* ── mark rows share the prose column ────────────────────────────────
   The r7 rule above centres prose inside the 1060 column at a 68ch measure,
   which puts body text 141px in from the column edge. Mark rows were never
   added to that group, so they started at the column edge instead and every
   icon sat to the left of the paragraph it labels. The eight role marks on
   Research Objects were worse: `.band .smark` centres its contents, so each
   label floated at a different x depending on how long the word was.

   A mark row is part of the prose, not a full-bleed graphic, so it takes the
   same measure and the same left edge. The exception is a `.smark` carrying a
   section heading, on the two stream pages, which stays centred with the other
   headings; `:has(.kick)` is what separates the two, because a kick-carrying
   smark labels a paragraph and an h2-carrying one titles a section.

   `ch` is font-relative, so a row has to be measured in the same type as
   `.body` or 68ch lands somewhere else: at the mono label size the box came
   out 38px narrower on each side. Every child here sets its own font, so
   setting the container size changes the measure and nothing visible.

   The method diagram on the home page is not in this group. It is a
   full-bleed graphic whose cells stretch to the column edge, and the last
   cell is sized so the drawn line reaches the right margin; narrowing it to
   the prose measure would break that. The Practice History chain is a row
   of fixed tiles reading as a caption to its paragraphs, so it is. */
.band > .in > .mrow,
.band > .in > .smark:has(.kick),
.band > .in > [data-chain],
.band > .in > .chainlab{max-width:68ch;margin-left:auto;margin-right:auto;
  font-size:calc(17px * var(--read))}
.band > .in > .smark:has(.kick){justify-content:flex-start}

/* the last chain tile is 200/256 as wide as the rest, so its cell is too;
   the drawn line then reaches the right margin instead of stopping 27px short */
.chain .cl:last-child{flex-grow:.7812}

/* ── notes index and note pages ─────────────────────────────────── */
.bar nav a.t-nt[aria-current="page"]{background:var(--deepblue);color:var(--paper);border-color:var(--deepblue)}
.notelist{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.notelist > li{border-bottom:1px solid var(--rule)}
.notelist a{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:20px 0;
  text-decoration:none;color:inherit;align-items:start}
.notelist a:hover .ntext b{text-decoration:underline}
/* The note number is no longer displayed, 15 Sept. It is still stored and
   still assigned in publication order; nothing reads it on the public site.
   The type mark took the left column, which says what kind of note this is
   rather than how many came before it. .nnum is kept because the working
   theory and cross-reference blocks still use the same grid. */
.nnum{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.1em;color:var(--slate);padding-top:3px}
/* .tmark hardcodes color:#F2F1EC because it was built for the dark hero band.
   In the list it sits on paper, so the structure has to take the ink colour
   or only the accent stroke is visible. */
.nmk{display:block;width:30px;padding-top:2px}
.nmk .tmark{margin:0;color:var(--ink)}
.nmk-s{width:22px;display:inline-block;vertical-align:-5px;margin-right:8px}
.nmk-s .tmark{color:var(--ink)}
.b-ink .nmk .tmark,.b-dark .nmk .tmark{color:#F2F1EC}
.ntext{display:block}
.ntext b{font-family:Nokio,system-ui,sans-serif;font-weight:500;font-size:19px;display:block;margin-bottom:5px}
.nmeta{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.nabs{display:block;margin-top:8px;max-width:64ch;font-size:calc(16px * var(--read))}
.nempty{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:20px 0}
/* ── media width, chosen per image ──────────────────────────────────────
   Set in the studio, never inferred from the file. A photograph, a
   scanned document, a wide diagram and a 48px mark all sit here without
   any of them being re-rendered to suit the layout. Unknown values fall
   back to full in notes.js, which is how every image behaved before this
   existed. Captions track the image width rather than the column. */
.nmedia{margin:26px 0}
.nmedia.m-inset{max-width:520px;margin-left:auto;margin-right:auto}
.nmedia.m-small{max-width:300px;margin-left:auto;margin-right:auto}
.nmedia.m-inset .fieldcap,.nmedia.m-small .fieldcap{text-align:left}
@media(max-width:620px){
  .nmedia.m-inset,.nmedia.m-small{max-width:100%}
}
.nmedia img,.nmedia video{display:block;width:100%;height:auto}
.nmedia audio{width:100%}
.nmedia .fieldcap{margin-top:9px;text-align:left}

/* ── studio ─────────────────────────────────────────────────────── */
.sform{max-width:340px;margin-top:22px}
.sform label,.scol label{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:16px 0 6px}
.sform input,.scol input,.scol select,.scol textarea{width:100%;box-sizing:border-box;
  font-family:inherit;font-size:16px;padding:9px 11px;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);border-radius:2px}
.scol textarea{font-family:Newsreader,Georgia,serif;line-height:1.5;resize:vertical}
.btn{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
  padding:10px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:2px;cursor:pointer;margin-top:16px;text-decoration:none}
.btn-q{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-go{background:var(--blue);border-color:var(--blue)}
.btn.danger{border-color:#B23A2E;color:#B23A2E;margin-left:auto}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.swho{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--slate);
  display:flex;align-items:center;gap:12px}
.smsg{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--deepblue);min-height:18px;margin:14px 0 0}
.smsg.bad{color:#B23A2E}
.swrap{display:grid;grid-template-columns:1fr;gap:34px;margin-top:22px}
@media(min-width:900px){.swrap{grid-template-columns:300px 1fr}}
.frow2{display:grid;grid-template-columns:110px 1fr;gap:14px}
.notelist.studio{border-top:1px solid var(--rule);margin-top:16px}
.lrow{display:grid;grid-template-columns:44px 1fr;gap:12px;width:100%;text-align:left;
  background:none;border:0;padding:14px 0;cursor:pointer;color:inherit;font:inherit}
.lrow:hover .ltext b{text-decoration:underline}
.lnum{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--slate)}
.ltext b{display:block;font-family:Nokio,system-ui,sans-serif;font-weight:500;font-size:15px}
.lmeta{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.lempty{padding:16px 0;color:var(--slate);font-size:15px}
.st{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px}
.st-draft{background:var(--greige);color:var(--ink)}
.st-published{background:var(--blue);color:var(--paper)}
.mhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.mbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mbtns .btn{margin-top:0}
.mlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:14px}
.mitem{border:1px solid var(--rule);padding:12px;display:grid;gap:8px;background:var(--paper)}
.mitem.unsaved{border-style:dashed}
.mitem img,.mitem video{width:100%;max-width:280px;height:auto;display:block}
.mitem audio{width:100%}
.mdel{justify-self:start;font-family:"IBM Plex Mono",monospace;font-size:11px;
  background:none;border:1px solid var(--rule);padding:5px 10px;cursor:pointer;color:var(--slate)}
.upending{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange)}
.sactions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}
.dim{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--slate);text-transform:none;letter-spacing:0}

/* ── the funnel: cards lead somewhere ───────────────────────────── */
.cardlink{color:inherit;text-decoration:none}
.cardlink:hover{text-decoration:underline}
.cgo{margin:10px 0 0;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em}
.cgo a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.forklist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
@media(min-width:700px){.forklist{grid-template-columns:1fr 1fr}}
.forklist a{display:block;padding:15px 18px;text-decoration:none;
  font-family:Nokio,system-ui,sans-serif;font-size:16px;background:transparent}
.forklist li{background:rgba(0,0,0,.18)}
.forklist a:hover{background:rgba(255,255,255,.07)}
.forklist a::after{content:" \2192";opacity:.6}

/* ── offer pages ────────────────────────────────────────────────── */
.oicon.big{display:block;margin:0 auto 18px;width:92px}
.oicon.big img{display:block;width:100%;height:auto}
.askform,.capture{max-width:560px;margin-top:8px}
.askform label,.capture label{display:block;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin:16px 0 6px;opacity:.8}
.askform input,.askform textarea,.capture input{width:100%;box-sizing:border-box;
  font-family:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);border-radius:2px}
.askform textarea{font-family:Newsreader,Georgia,serif;line-height:1.5;resize:vertical}
.bookslot{margin-top:16px;opacity:.75;max-width:52ch}

/* ── note byline and the path back to the work ──────────────────── */
.nby{margin:16px 0 0;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.nby span{display:block;margin-top:4px;letter-spacing:.06em;opacity:.7;text-transform:none;
  font-size:11px}
/* ── notes index toolbar ────────────────────────────────────────────────
   Two rows. Search and sort on the first, the two facets and the count on
   the second. Facets are selects rather than chip rows: chips wrapped into
   three ragged lines at five propositions and would be unusable at twelve.
   Everything filters data the page already holds, so nothing here makes a
   request. State is carried in the URL, which makes a filtered index a
   link somebody can be sent. */
.ntools{margin:0 0 26px}
.ntoolrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ntoolrow2{margin-top:10px}
.ntoollab{font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate,#59646B);
  white-space:nowrap}
.nfacet{display:inline-flex;align-items:center;gap:8px}
.nsearch{flex:1;min-width:200px;background:var(--white,#FAFAF8);
  border:1px solid var(--slate,#59646B);padding:10px 13px;
  font-family:inherit;font-size:calc(15px * var(--read));color:inherit;
  outline:none;-webkit-appearance:none}
.nsearch:focus{border-color:var(--deepblue,#2258C8);
  box-shadow:inset 0 0 0 1px var(--deepblue,#2258C8)}
.nsort{background:var(--white,#FAFAF8);border:1px solid var(--slate,#59646B);
  padding:10px 32px 10px 12px;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;color:inherit;outline:none;appearance:none;max-width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2359646B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.nsort:focus{border-color:var(--deepblue,#2258C8)}
.ncount{font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--slate,#59646B);margin-left:auto}
.linkish{font:inherit;background:none;border:none;padding:0;cursor:pointer;
  color:var(--deepblue,#2258C8);text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){
  .ntoolrow{flex-direction:column;align-items:stretch}
  .nfacet{justify-content:space-between}
  .nsort{flex:1}
  .ncount{margin-left:0;margin-top:4px}
}

/* ── inside a note body ─────────────────────────────────────────────────
   The grammar a note can use, and all of it. No font sizes and no colours
   are author-settable: the scale and the palette are governed elsewhere,
   and a per-note override is how both stop meaning anything. The pull
   quote gets weight and a rule rather than a colour, so it cannot be set
   to a pairing nobody measured. */
.nsub{font-family:Nokio,system-ui,sans-serif;font-weight:500;
  font-size:calc(21px * var(--read));line-height:1.3;margin:34px 0 10px}
.nquote{margin:22px 0;padding:2px 0 2px 20px;
  border-left:2px solid var(--rule);color:inherit}
.nquote p,.nquote{font-size:calc(16px * var(--read));line-height:1.7}
.npull{margin:30px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--deepblue,#2258C8);
  font-family:Nokio,system-ui,sans-serif;font-weight:400;
  font-size:calc(20px * var(--read));line-height:1.45;max-width:34ch}
.body a,.nquote a,.npull a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}

/* studio: the formatting strip and preview */
.btools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.btool{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:inherit;
  background:var(--white,#FAFAF8);border:1px solid var(--rule);
  padding:6px 10px;min-height:32px;cursor:pointer}
.btool:hover{border-color:var(--deepblue,#2258C8)}
.btool[aria-pressed="true"]{background:var(--sky,#B7CCF4);
  border-color:var(--deepblue,#2258C8);font-weight:600}
.bspacer{flex:1}
.bprev{border:1px dashed var(--rule);padding:16px 18px;margin-top:10px;
  background:var(--white,#FAFAF8)}
.bprev > :first-child{margin-top:0}

/* ── working theory cross-links ───────────────────────────────────────
   A note names at most one proposition. The note page shows the claim it
   bears on plus its siblings; the index shows the claim on the row; the
   umbrella page grows a list under each claim once notes exist. All three
   render nothing when there is nothing to show. */
/* a note and the note it answers, in both directions */
.nrevise{margin:38px 0 0;padding:22px;border:1px solid var(--rule);
  border-left:3px solid var(--signal,#E6823A);background:rgba(255,255,255,.5)}
.nrevise + .ntheory{margin-top:18px}

.ntheory{margin:38px 0 0;padding:22px;border:1px solid var(--rule);
  border-left:3px solid var(--deepblue,#2258C8);background:rgba(255,255,255,.5)}
.ntheoryp{margin:6px 0 0;font-family:Nokio,system-ui,sans-serif;font-size:19px}
.ntheoryp a{text-decoration:none;border-bottom:1px solid currentColor}
.nsibs{list-style:none;margin:8px 0 0;padding:0}
.nsibs li{padding:7px 0;border-top:1px solid var(--rule);font-size:calc(16px * var(--read))}
.nsibs li:first-child{border-top:none}
.nsibs a{text-decoration:none;border-bottom:1px solid currentColor}
.nsibs .nnum{padding-top:0}
.dimtype{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin-left:6px}
.nprop{display:block;margin-top:6px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.propnotes{list-style:none;margin:14px 0 0;padding:0;max-width:64ch}
.propnotes li{padding:6px 0;font-size:calc(15px * var(--read))}
.propnotes li.propnoteshead{font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding-bottom:2px}
.propnotes a{text-decoration:none;border-bottom:1px solid currentColor}
.propnotes .nnum{padding-top:0;margin-right:4px}

.noffer{margin:38px 0 0;padding:22px;border:1px solid var(--rule);background:rgba(255,255,255,.5)}
.nofferlink{margin:6px 0 10px;font-family:Nokio,system-ui,sans-serif;font-size:19px}
.nofferlink a{text-decoration:none;border-bottom:1px solid currentColor}
.frow2b{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.frow2b{grid-template-columns:1fr 1fr}}

/* .cform button (line 269) is more specific than .btn-go, so the ask
   buttons need their own rule or they paint ink-on-ink and vanish */
.askform button{background:var(--blue);border:1px solid var(--blue);color:var(--paper);
  padding:13px 26px;border-radius:2px;cursor:pointer}
.askform button:hover{background:var(--deepblue);border-color:var(--deepblue)}
.capture button{background:var(--ink);border:1px solid var(--ink);color:var(--paper);
  padding:13px 26px;border-radius:2px;cursor:pointer}
.b-dark .askform button{background:var(--nerve);border-color:var(--nerve);color:var(--darkroom)}
.bookslot{margin-left:0}
.askform label,.capture label{opacity:.85}
.bookslot{margin:20px 0 0;font-size:calc(16px * var(--read));max-width:52ch;opacity:.9}
.booklink{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
  display:inline-block;margin-left:6px;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px}
/* a chart that carries its own argument needs no frame around it */
.field.bare{margin:0;max-width:none}
.field.bare svg{display:block;width:100%;height:auto}

/* the bridge draws itself in, like the chain */
@media (prefers-reduced-motion:no-preference){
  /* held at the start state until the diagram is actually on screen */
  .bridge-draw .brseed{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
  .bridge-draw .brstem{stroke-dasharray:40;stroke-dashoffset:40}
  .bridge-draw .brdraw{stroke-dasharray:300;stroke-dashoffset:300}
  .bridge-draw.drawn .brseed{animation:brpop .5s cubic-bezier(.2,1.5,.4,1) both}
  .bridge-draw.drawn .brstem{animation:brline .5s ease-out .35s both}
  .bridge-draw.drawn .brdraw{animation:brline 1.1s cubic-bezier(.32,.06,.28,.98) .8s both}
}
@keyframes brpop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes brline{to{stroke-dashoffset:0}}
/* archive photographs */
.ph{margin:26px 0 0}
.ph img{display:block;width:100%;height:auto}
/* a source too small to fill the column is centred rather than upscaled */
.ph.cap img{max-width:720px;margin:0 auto}

/* Definition list on a stream page. The label leads and the sentence follows it
   inline, so four of them read as one passage rather than four stacked cards. */
.defs{list-style:none;margin:20px 0 18px;padding:0;max-width:68ch}
.defs > li{margin:0 0 13px;font-size:calc(17px * var(--read));line-height:1.55;
  padding-left:16px;border-left:2px solid var(--rule)}
.defs > li:last-child{margin-bottom:0}
.defs b{font-weight:650}

/* Values on the practice page. Each value gives its dictionary sense, then the
   operating principle beneath in the quieter register, so the two are not read
   as one sentence. */
.vals{list-style:none;margin:22px 0 0;padding:0;max-width:68ch}
.vals > li{margin:0 0 24px;font-size:calc(17px * var(--read));line-height:1.55}
.vals > li:last-child{margin-bottom:0}
.vals b{font-weight:650}
.vals i{color:var(--slate);font-style:normal;font-size:15px}
.vals span{display:block;margin-top:7px;padding-left:16px;
  border-left:2px solid var(--rule);color:var(--slate);font-size:16px}

/* Inquiry form status. Never colour alone: the ok state carries a check and the
   bad state carries a cross, so the meaning survives without hue. */
.fstatus{margin:14px 0 0;font-size:calc(16px * var(--read));line-height:1.5}
.fstatus:empty{display:none}
.fstatus.ok::before{content:"\2713\00a0\00a0";font-weight:700}
.fstatus.bad::before{content:"\2715\00a0\00a0";font-weight:700}
.fstatus.ok{color:var(--ink)}
.fstatus.bad{color:var(--ink)}
.b-ink .fstatus,.b-dark .fstatus,.b-paper .fstatus{color:inherit}
.b-ink .fstatus.ok::before,.b-dark .fstatus.ok::before{color:var(--nerve)}
.b-ink .fstatus.bad::before,.b-dark .fstatus.bad::before{color:#F0A268}
.b-paper .fstatus.ok::before,.b-ground .fstatus.ok::before{color:var(--deepblue)}
.b-paper .fstatus.bad::before,.b-ground .fstatus.bad::before{color:var(--orange)}
.cform button[disabled]{opacity:.5;cursor:not-allowed}

/* Studio tabs and the inquiries list. */
.stabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--rule);padding-bottom:12px}
.stab{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;
  background:none;border:1px solid var(--rule);color:var(--ink);padding:8px 13px;min-height:36px;cursor:pointer}
.stab:hover{border-color:var(--blue)}
.stab.on{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.stab .dim{opacity:.75;margin-left:4px}
.inq{border:1px solid var(--rule);background:var(--paper);padding:16px 18px;margin-bottom:12px;list-style:none}
.inqtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.inqtop b{font-family:Nokio,system-ui,sans-serif;font-weight:500;font-size:18px}
.inqmsg{margin:10px 0 0;white-space:pre-wrap;font-size:calc(16px * var(--read));
  border-left:2px solid var(--rule);padding-left:14px}
.inq .sactions{margin-top:14px;gap:6px}
.inq .btn.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.st-new{background:rgba(40,105,235,.12);border:1px solid var(--blue)}
.st-replied{background:rgba(230,130,58,.14);border:1px solid var(--orange)}
.st-booked{background:rgba(45,47,48,.1);border:1px solid var(--ink)}
.st-archived{background:var(--greige);border:1px solid var(--slate)}

/* The Studio link lives in the footer because it is how Charles navigates there,
   and reads quieter than the public destinations beside it. */
.fnav a.fquiet{opacity:.62}
.fnav a.fquiet:hover{opacity:1}

/* ── note hero furniture ─────────────────────────────────────────────────
   The note pages are generated in JS and so never got the corner brackets
   and centred glyph the static heroes have had all along. These style the
   pieces notes.js now emits. --acc is set inline per stream. */
.tmark{display:block;margin:0 auto 2px;color:#F2F1EC}
.tmark .a{stroke:var(--acc,#2869EB)}
.tmark .af{fill:var(--acc,#2869EB);stroke:var(--acc,#2869EB)}

/* The mark wipes in left to right, which is the direction its own baseline
   is drawn. One pass, then it rests. */
@keyframes markdraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tmark.draw{animation:markdraw .72s cubic-bezier(.22,.61,.36,1) both}

/* The corpus as the kinds of note in it, run as a rail along the bottom of
   the index hero. It sat in the middle first and read as a smudge behind
   the title. Along the bottom edge it reads as a ledger and stays out of
   the text. Grows on its own as notes publish. */
.ihero{overflow:hidden}
.markfield{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:nowrap;
  justify-content:center;align-items:flex-end;gap:clamp(10px,2.2vw,30px);
  padding:0 18px 14px;opacity:.22;color:#F2F1EC;pointer-events:none;overflow:hidden}
.mfcell{display:block;flex:0 0 auto;animation:markdraw .6s ease-out both;
  animation-delay:var(--d,0ms)}
.markfield .tmark{margin:0}

/* Three lines of text did not need 480px of band. The extra bottom padding
   is the rail's room. */
.ihero{padding:clamp(38px,4.4vw,62px) 0 clamp(62px,6vw,86px)}
.ihero .thesis{margin-top:16px}


@media(prefers-reduced-motion:reduce){
  .tmark.draw,.mfcell{animation:none}
}

/* ── field capture, /field/ ───────────────────────────────────────────────
   A phone screen held in one hand, not a page. Fixed header and save bar,
   the middle scrolls. Targets are 48px minimum because this gets used
   standing up. Loaded by /field/ only; nothing else uses .fieldapp. */
.fieldapp{margin:0;background:var(--ink,#2D2F30);color:#F2F1EC;
  font-family:Nokio,system-ui,sans-serif;-webkit-text-size-adjust:100%}
.fieldapp input,.fieldapp textarea,.fieldapp select,.fieldapp button{font:inherit}

.fscreen{display:flex;flex-direction:column;min-height:100svh}
/* display:flex beats the user agent's [hidden]{display:none}, which was
   letting every screen render at once and the fixed save bar bleed through
   the list. Assert the negative in the test, not just the positive. */
.fscreen[hidden]{display:none}
.fbar{display:flex;align-items:center;gap:10px;padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:#242627;border-bottom:1px solid #3a3d3e;position:sticky;top:0;z-index:5}
.fbar-t{flex:1;font-size:14px;letter-spacing:.04em;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.fback{background:none;border:0;color:#9fd0ff;padding:6px 2px;font-size:15px}
.fpill{border:1px solid #4a4d4e;background:#2f3233;color:#b9bdbe;border-radius:999px;
  padding:6px 12px;font-size:12px;font-family:"IBM Plex Mono",monospace}
.fpill-on{border-color:#E8C400;color:#E8C400}
.fpill-sp{width:64px}

.fbody{flex:1;padding:16px 14px 24px;overflow-y:auto}
.fbody-cap{padding-bottom:96px}
.ffoot{display:flex;gap:10px;padding:12px 14px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid #3a3d3e}

.fwrap{max-width:420px;margin:0 auto;padding:40px 20px}
.fkick{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin:0}
.ftitle{font-size:30px;margin:8px 0 6px;font-weight:500}
.fnote{opacity:.75;font-size:14.5px;line-height:1.5;margin:0 0 18px}
.fmsg{min-height:20px;font-size:14px;color:#ffb4b4;margin:10px 0 0}
.flabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;
  margin:22px 0 8px}
.freq{font-size:11px;letter-spacing:.1em;opacity:.55;text-transform:uppercase}

.fieldapp label{display:block;font-size:13px;opacity:.8;margin:14px 0 6px}
.fieldapp input[type=text],.fieldapp input[type=email],.fieldapp input[type=password],
.fieldapp textarea,.fieldapp select{
  width:100%;box-sizing:border-box;background:#1d1f20;color:#F2F1EC;
  border:1px solid #4a4d4e;border-radius:10px;padding:13px 12px;font-size:16px}
.fieldapp textarea{resize:vertical;line-height:1.45}
.fieldapp input:focus,.fieldapp textarea:focus,.fieldapp select:focus{
  outline:2px solid #2869EB;outline-offset:1px;border-color:#2869EB}

.fbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 18px;border-radius:10px;border:1px solid #5a5e5f;
  background:#34383a;color:#F2F1EC;text-decoration:none;cursor:pointer}
.fbtn:active{background:#3f4446}
.fbtn-lg{min-height:54px;font-size:17px;background:#2869EB;border-color:#2869EB}
.fbtn-md{flex:1;min-height:52px}
.fbtn-q{background:none;border-color:#4a4d4e;color:#b9bdbe;min-height:42px;font-size:14px}
.fbtn-block{width:100%;margin-top:20px}
/* .fieldapp label sets display:block and wins on specificity, which was
   flattening the three media buttons. Put the flex back for labels that are
   buttons. */
.fieldapp label.fbtn{display:inline-flex;margin:0;opacity:1;font-size:15px}

.fchips{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;
  background:#242627;border-bottom:1px solid #3a3d3e;scrollbar-width:none}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;min-height:38px;padding:0 14px;border-radius:999px;
  border:1px solid #4a4d4e;background:#2f3233;color:#b9bdbe;font-size:12px;
  letter-spacing:.08em;font-family:"IBM Plex Mono",monospace}
.fchip.on{background:#F2F1EC;color:#242627;border-color:#F2F1EC}

.fmedia{display:flex;gap:10px;margin-top:14px}
.fattached{font-size:13px;color:#E8C400;margin:10px 0 0;line-height:1.4}
.ftoggles{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.ftoggles label{display:flex;align-items:center;gap:7px;margin:0;font-size:13.5px;opacity:.85}
.ftoggles input{width:20px;height:20px;accent-color:#FF4F6D}
.fmore{margin-top:16px}
.fmore summary{font-size:13px;opacity:.75;cursor:pointer;padding:6px 0}

.fsave{position:fixed;left:0;right:0;bottom:0;padding:12px 14px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,#2D2F30 72%,rgba(45,47,48,0));z-index:6}
.fsave .fbtn-block{margin:0}

.flist{list-style:none;margin:0;padding:0}
.flist li{margin:0 0 8px}
.frow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:60px;padding:10px 12px;border-radius:10px;border:1px solid #3f4344;
  background:#26292a;color:#F2F1EC}
.frow-c{font-family:"IBM Plex Mono",monospace;font-size:12px;opacity:.7;flex:0 0 auto}
.frow-m{flex:1;min-width:0;display:block}
.frow-m b{display:block;font-weight:500;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
.frow-m .dim{display:block;font-size:12px;opacity:.6;margin-top:2px}
.frow-n{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:13px;opacity:.7}

.flist-sm li{margin:0 0 6px}
.fcap{display:flex;align-items:baseline;gap:8px;padding:9px 11px;border-radius:8px;
  background:#26292a;border:1px solid #3f4344;font-size:13.5px}
.fcap-l{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  opacity:.6;flex:0 0 auto}
.fcap-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fcap-s{flex:0 0 auto;font-size:11px;color:#E8C400}
.fcap-p{border-style:dashed}

@media (min-width:640px){
  .fscreen{max-width:560px;margin:0 auto}
  .fsave{max-width:560px;left:50%;transform:translateX(-50%)}
}

/* ---- anchored bands clear the sticky bar --------------------------------
   The bar wraps its nav as the screen narrows, so its height steps up from
   collapsed bar is the same height everywhere. scroll-margin-top keeps an
   id'd band's heading visible when a link jumps to it. /#working-theory as
   /connect/#environments. */
.band[id]{scroll-margin-top:66px}

/* ---- field app, v16 -----------------------------------------------------
   Held captures, upload progress, and the in-page audio recorder. */
.fcap-err{color:#B23A2E}
.fcap-up{color:var(--deepblue)}
.fcap-bad{background:rgba(178,58,46,.06)}
.fcap-x{margin-left:10px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.06em;border:1px solid #B23A2E;color:#B23A2E;background:transparent;
  padding:3px 9px;border-radius:2px}
.fbtn-rec{background:#B23A2E;border-color:#B23A2E;color:#FAFAF8}
.frectime{font-family:"IBM Plex Mono",monospace;font-size:22px;margin:10px 0 0;
  text-align:center;letter-spacing:.06em}
.fcap-rm{border-color:var(--rule);color:var(--slate);opacity:.75}
.fcap-rm:hover{border-color:#B23A2E;color:#B23A2E;opacity:1}
.fbtn-del{display:block;margin:28px auto 0;border-color:rgba(178,58,46,.5);
  color:#D9695C;background:transparent;font-size:13px}

/* ---- site nav: one anchored chip, tabs fanning right -------------------
   Seven items wrapped to three rows on a phone and made the sticky bar 182px
   tall. The Menu chip holds one position and never moves: the tab list is
   taken out of flow, so opening it cannot reflow the bar and bump the chip
   onto its own row. On desktop the tabs fan out to the chip's right; on a
   phone they drop below it as a panel. <details> carries the state and the
   keyboard behaviour, so this needs no script and survives one failing. */
/* the wordmark's margin-right:auto used to push the nav to the far right, which
   was right for a wrapping row and wrong for an anchored chip. The chip sits
   beside the wordmark now and the free space goes after both. */
.bar .home{margin-right:0}
.bar .in{justify-content:flex-start}
/* On a phone the panel is measured against the bar, not the chip, so it can
   run the full width instead of hanging off the right edge. On desktop the
   chip is the anchor, because the tabs have to start at its right edge. */
.bar .in{position:relative}
.mnav{position:static;display:inline-flex;align-items:center;flex:0 0 auto;
  margin-right:auto}
.mnav > summary{display:inline-flex;align-items:center;list-style:none;cursor:pointer;
  height:30px;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--rule);
  border-radius:2px;padding:0 14px;background:rgba(255,255,255,.5)}
.mnav > summary::-webkit-details-marker{display:none}
.mnav > summary::marker{content:""}
.mnav > summary:hover{border-color:var(--slate)}
.mnav > summary:focus-visible{outline:2px solid var(--deepblue);outline-offset:2px}
.mnav[open] > summary{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* phone: a panel under the chip, out of flow so the bar stays one row tall */
.mnav > nav{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:5;
  flex-direction:column;align-items:stretch;gap:2px;
  width:auto;max-height:64vh;overflow-y:auto;
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  padding:6px;box-shadow:0 10px 28px rgba(45,47,48,.14)}
.mnav > nav a{padding:10px 10px;font-size:12.5px}

@media(min-width:760px){
  .bar .in{--fan:314px}
  /* desktop: the tabs run out to the right of the chip, on its own line */
  /* Seven long labels do not fit beside the chip much under 1280, so the row
     is allowed to wrap and carries the bar's own ground. At full width the
     background is invisible against the bar; when it wraps, the second row
     sits on that ground instead of on the hero. */
  /* top-aligned, not centred: a wrapped second row has to hang below the chip
     rather than push the first row up through the top of the bar. The -4px
     offsets this panel's own padding so row one lines up with the chip. */
  /* --fan is the distance from the bar container's left edge to where the tabs
     start: the wordmark, the gap, the chip, then 10px of air. It is measured
     per breakpoint because the container's side padding changes with width.
     Anchoring the panel to the container rather than to the chip is what keeps
     the right edge inside the page: max-width is the container's own width
     minus --fan, so a wrapped row can never push past it and open a
     horizontal scrollbar. shot29/shot30 assert both. */
  .mnav > nav{top:-4px;transform:none;left:var(--fan);right:auto;
    flex-direction:row;align-items:center;flex-wrap:nowrap;gap:3px 4px;
    width:auto;max-width:calc(100% - var(--fan));max-height:none;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
    background:rgba(232,237,246,.98);border:0;
    padding:3px 4px;border-radius:2px;box-shadow:0 8px 22px rgba(45,47,48,.10)}
  /* the row never wraps, so when the tabs outrun the space they scroll sideways
     inside the panel and the bar stays one line tall at every width */
  .mnav > nav a{flex:0 0 auto}
  .mnav > nav::-webkit-scrollbar{height:6px}
  .mnav > nav::-webkit-scrollbar-thumb{background:rgba(45,47,48,.22);border-radius:3px}
  .mnav > nav a{padding:5px 9px;font-size:11px;white-space:nowrap}
}
@media(min-width:900px){ .bar .in{--fan:321px} }
@media(min-width:1100px){ .bar .in{--fan:324px} }
/* Past 1280 the container stops growing and gets centred, so bounding the
   panel by the container starts wrapping tabs while the screen still has room
   to the right. Above that width the bound becomes the viewport instead: the
   container's right gutter is (100vw - 1100px)/2, so the panel may use that
   gutter too, less 16px of air at the edge. */
@media(min-width:1280px){
  .mnav > nav{max-width:calc(50vw + 550px - var(--fan) - 16px)}
}

/* each tab arrives in turn, left to right, so the row reads as fanning out */
@media(prefers-reduced-motion:no-preference){
  @keyframes fanout{from{opacity:0;transform:translateX(-10px)}
                    to{opacity:1;transform:none}}
  .mnav[open] > nav a{animation:fanout .2s ease-out both}
  .mnav[open] > nav a:nth-child(1){animation-delay:.00s}
  .mnav[open] > nav a:nth-child(2){animation-delay:.035s}
  .mnav[open] > nav a:nth-child(3){animation-delay:.07s}
  .mnav[open] > nav a:nth-child(4){animation-delay:.105s}
  .mnav[open] > nav a:nth-child(5){animation-delay:.14s}
  .mnav[open] > nav a:nth-child(6){animation-delay:.175s}
  .mnav[open] > nav a:nth-child(7){animation-delay:.21s}
  .mnav[open] > nav a:nth-child(8){animation-delay:.245s}
}
.st-archived{background:var(--greige);color:var(--slate)}
/* typed relationships in the studio */
.rellist{list-style:none;margin:0 0 10px;padding:0}
.rellist li{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--rule);font-size:13px}
.rellist li:last-child{border-bottom:0}
.rellist b{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--deepblue);flex:0 0 auto}
.rellist .relx{margin-left:auto;font-size:11px;padding:3px 9px;min-height:0}
.relnew{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.relnew select,.relnew input{width:auto;flex:1 1 170px;min-width:0}
.relnew .btn{flex:0 0 auto}

/* ── dossier evidence, studio ─────────────────────────────────────────── */
.shead{font-family:"Nokio",Georgia,serif;font-weight:500;font-size:17px;
  margin:30px 0 4px}
.evlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.evitem{border:1px solid var(--rule);border-radius:2px;padding:12px 14px;
  background:rgba(255,255,255,.55)}
.evbad{border-color:#B23A2E;background:rgba(178,58,46,.05)}
.evhead b{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em}
.evtitle{font-size:14px;margin:4px 0 2px}
.evbody{font-size:13px;color:var(--slate);margin:0 0 6px}
.evmeta{font-size:12px;margin:2px 0}
.evmeta .dim{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;margin-right:6px}
.evctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px}
.evctl .dim{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase}
.evctl select{width:auto;min-width:0;padding:4px 6px;font-size:12px}
.evchk{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.evchk input{width:auto;margin:0}
.evwarn{color:#B23A2E;font-size:12px;margin:8px 0 0}

/* the schedule field sits with the publish controls */
.swhen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin-right:6px}
.swhen input{width:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;
  border:1px solid var(--rule);background:#fff;padding:6px 8px;border-radius:2px}
.swhen .dim{text-transform:none;letter-spacing:0;font-size:11px}

/* ---- studio note list, v36c ----------------------------------------------
   Status tabs, search, grouping. With no note open the list fills the width as
   tiles; with a note open it drops back to a single compact column. */
.ltools{margin:14px 0 6px}
.lstatus{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.lfilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lfilters input[type=search]{flex:1 1 200px;width:auto;margin:0}
.scol .linl{display:inline-flex;align-items:center;gap:6px;margin:0}
.scol .linl select{width:auto;margin:0}
.lgroup{grid-column:1/-1;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);padding:14px 0 4px;border-bottom:1px solid var(--rule)}
.ltops{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ltop{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.04em;padding:1px 6px;
  border:1px solid var(--rule);border-radius:2px;color:var(--slate)}
.swrap.listwide{grid-template-columns:1fr}
.swrap.listwide .notelist.studio{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:8px;border-top:0}
.swrap.listwide .ltile{border:1px solid var(--rule);border-radius:2px;padding:10px 12px;height:100%;
  background:rgba(255,255,255,.55);align-items:start}
.swrap.listwide .ltile:hover{border-color:var(--blue)}
.ltile .ltext b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* public notes index: the empty message spans the row instead of the mark column */
.nempty .ntext{grid-column:1/-1}
/* nav: past 1100 the bar uses the full window width, so the wordmark sits at the
   left edge and the tabs get the room to its right */
@media(min-width:1100px){
  .bar .in{max-width:none;padding-left:24px;padding-right:24px;--fan:300px}
  .mnav > nav{max-width:calc(100% - var(--fan) - 16px)}
}
.lstatus .stab.on .dim{color:var(--paper);opacity:.85}
.scol .linl select,.lfilters input[type=search]{font-family:"IBM Plex Mono",monospace;font-size:12px;padding:7px 8px}
/* the studio gets more width on big screens so the tiles run four or five across */
.band:has(#studio) > .in{max-width:1560px}
/* ---- public notes index as tiles, v36d ----------------------------------- */
.notelist.ntiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px;
  border-top:0;margin-top:8px}
.notelist.ntiles > li{border:0}
.notelist.ntiles > li.ngroup,.notelist.ntiles > li.nempty{grid-column:1/-1}
.ngroup{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);padding:18px 0 6px;border-bottom:1px solid var(--rule)}
.ngroup .ncnt{opacity:.7;margin-left:6px}
.notelist.ntiles .ntile > a{grid-template-columns:34px 1fr;gap:12px;padding:14px 14px 16px;height:100%;
  box-sizing:border-box;border:1px solid var(--rule);border-radius:2px;background:rgba(255,255,255,.5)}
.notelist.ntiles .ntile > a:hover{border-color:var(--blue)}
.notelist.ntiles .ntext b{font-size:17px;line-height:1.25}
.notelist.ntiles .nabs{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;margin-top:6px}
.notelist.ntiles .nprop{display:none}
.ntops{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.ntop{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.04em;padding:1px 6px;
  border:1px solid var(--rule);border-radius:2px;color:var(--slate)}

/* Streams dropdown, added with the 27 Sept nav.

   The whole nav already lives in one horizontally scrolling row inside the
   Menu panel, and that row sets overflow-x, so an absolutely positioned
   second-level panel would be clipped by its own parent. The children
   therefore open inline: the two stream chips appear in the row directly
   after the Streams chip and the row scrolls as it always has. Native
   <details>, so it opens and keyboard-navigates with no script; nav.js adds
   Escape, click-away, and closing a sibling. */
.bar nav .drop{display:inline-flex;align-items:center;gap:3px 4px;flex:0 0 auto}
.bar nav .drop>summary{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink);
  padding:5px 9px;border:1px solid transparent;border-radius:2px;cursor:pointer;
  list-style:none;white-space:nowrap;flex:0 0 auto}
.bar nav .drop>summary::-webkit-details-marker{display:none}
.bar nav .drop>summary::marker{content:""}
.bar nav .drop>summary::after{content:" \25BE";opacity:.5;font-size:9px;
  display:inline-block;margin-left:5px;transition:transform .15s ease}
.bar nav .drop[open]>summary::after{transform:rotate(180deg)}
.bar nav .drop>summary:hover{border-color:var(--rule);background:rgba(255,255,255,.5)}
.bar nav .drop>summary:focus-visible{outline:2px solid var(--deepblue);outline-offset:2px}
.bar nav .dropin{display:inline-flex;align-items:center;gap:3px 4px;
  padding-left:5px;margin-left:1px;border-left:1px solid var(--rule)}
.bar nav .dropin a{flex:0 0 auto;white-space:nowrap}
.bar nav .drop.cur>summary{background:var(--yel);color:var(--ink);border-color:var(--yel)}

/* Chronology on About, 27 Sept. A drawn spine with year nodes, in the same
   idiom as the method chain and the practice-history bridge: the line is a
   dash-offset draw, the entries arrive in sequence, and the global
   prefers-reduced-motion reset above turns all of it off. Without the
   observer or without JavaScript every entry is present and static. */
.chron{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0 0 0 26px;position:relative}
.chron::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:var(--rule)}
.chron-draw::before{transform:scaleY(0);transform-origin:top}
.chron-draw.drawn::before{animation:chline .9s cubic-bezier(.32,.06,.28,.98) both}
@keyframes chline{to{transform:scaleY(1)}}
.chn{position:relative;padding:0 0 clamp(20px,2.4vw,30px) 0}
.chn::before{content:"";position:absolute;left:-26px;top:7px;width:11px;height:11px;
  border:1px solid var(--ink);background:var(--paper);border-radius:50%}
.chn:last-child::before{background:var(--blue);border-color:var(--blue)}
.chy{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.chb{display:block;margin-top:5px;max-width:62ch}
.chb b{font-size:clamp(16px,1.5vw,18px)}
.chw{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--slate);
  margin-top:3px}
.chd{display:block;margin-top:6px;font-size:15.5px;line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  .chron-draw .chn{opacity:0;transform:translateY(8px)}
  .chron-draw.drawn .chn{animation:chin .5s ease-out both}
  .chron-draw.drawn .chn:nth-child(1){animation-delay:.10s}
  .chron-draw.drawn .chn:nth-child(2){animation-delay:.20s}
  .chron-draw.drawn .chn:nth-child(3){animation-delay:.30s}
  .chron-draw.drawn .chn:nth-child(4){animation-delay:.40s}
  .chron-draw.drawn .chn:nth-child(5){animation-delay:.50s}
  .chron-draw.drawn .chn:nth-child(6){animation-delay:.60s}
  .chron-draw.drawn .chn:nth-child(7){animation-delay:.70s}
  @keyframes chin{to{opacity:1;transform:none}}
}
.vme{display:block;margin-top:5px;font-style:italic;color:var(--slate)}

/* ── the About chronology: strand chart and confluence ───────────────────
   Two graphics replacing the vertical list, which read as a list rather than
   an argument. Both sit on the ink band, because the palette record measures
   Highlighter Yellow at 1.63:1 and Nerve at 1.24:1 against white, and five
   domains need five legible values. The five hues are one colour system
   shared by both, so a colour means the same thing in each.
   The teal is a data-visualization value, not a brand palette value:
   04-PALETTE/dataviz-values-2026-09-27.md. */
:root{--dvteal:#2AA198}
.chronoband .sub{color:rgba(242,241,236,.72)}
.strand{margin:clamp(26px,3vw,40px) 0 0}
.strand .plot{position:relative;padding-top:4px;z-index:1}
.strand .gl{position:absolute;top:0;bottom:0;width:1px;background:rgba(242,241,236,.18)}
.strand .gl.now{background:var(--blue);opacity:0;transition:opacity .5s ease}
.strand.drawn .gl.now{opacity:.5;transition-delay:1.15s}
.strand .gl.pres{background:rgba(242,241,236,.34)}
.strand .prestag{position:absolute;top:-2px;transform:translateX(-50%);
  font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(242,241,236,.6)}
.strand .row{position:relative;height:74px;cursor:pointer;border-radius:2px}
.strand .row:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.strand .lab{position:absolute;top:0;line-height:1.2;white-space:nowrap}
.strand.arm .lab{opacity:0}
.strand .lab b{font-family:Newsreader,Georgia,serif;font-size:15.5px;font-weight:600;color:#F2F1EC}
.strand .lab i{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.05em;margin-top:3px;color:rgba(242,241,236,.66)}
.strand .lab a.go-to{color:inherit;text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:1px}
.strand .lab a.go-to:hover,.strand .lab a.go-to:focus-visible{color:#8FB0FF}
/* one lane per domain, always in the same order, so position says which
   domain a line is even before colour does */
.strand .staff{position:absolute;left:0;right:0;top:42px;height:26px}
.strand .ln{position:absolute;height:3px;transform-origin:left center}
.strand.arm .ln{transform:scaleX(0)}
.strand .l0{top:0;background:var(--orange)} .strand .l1{top:5px;background:var(--dvteal)}
.strand .l2{top:10px;background:var(--heat)} .strand .l3{top:15px;background:var(--yel)}
.strand .l4{top:20px;background:var(--nerve)} .strand .l5{top:10px;height:4px;background:var(--blue)}
.strand .cap{position:absolute;width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;
  background:var(--ink);transform:translateX(-4.5px)}
.strand.arm .cap{opacity:0}
.strand .cap.l0{top:-3px;color:var(--orange)} .strand .cap.l1{top:2px;color:var(--dvteal)}
.strand .cap.l2{top:7px;color:var(--heat)} .strand .cap.l3{top:12px;color:var(--yel)}
.strand .cap.l4{top:17px;color:var(--nerve)} .strand .cap.l5{top:7px;color:var(--blue)}
/* a strand that begins before the chart does enters through the left edge */
.strand .clip{position:absolute;left:0 !important;width:12px;height:3px;
  background:linear-gradient(to right,transparent,currentColor)}
.strand.arm .clip{opacity:0}
.strand .clip.l0{top:0;color:var(--orange)} .strand .clip.l1{top:5px;color:var(--dvteal)}
.strand .clip.l2{top:10px;color:var(--heat)} .strand .clip.l3{top:15px;color:var(--yel)}
.strand .clip.l4{top:20px;color:var(--nerve)}
.strand .arw{position:absolute;width:0;height:0;background:none;
  border-left:7px solid currentColor;border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent;transform-origin:left center}
.strand.arm .arw{opacity:0;transform:scale(0)}
.strand .arw.l0{top:-2.5px;color:var(--orange)} .strand .arw.l1{top:2.5px;color:var(--dvteal)}
.strand .arw.l2{top:7.5px;color:var(--heat)} .strand .arw.l3{top:12.5px;color:var(--yel)}
.strand .arw.l4{top:17.5px;color:var(--nerve)} .strand .arw.l5{top:7px;color:var(--blue)}
.strand .axis{position:relative;height:40px;margin-top:10px;border-top:1px solid rgba(242,241,236,.2)}
.strand .tk{position:absolute;top:6px;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.1em;color:rgba(242,241,236,.66)}
.strand .tk.now{color:#8FB0FF}
.strand .tk.axlab{top:22px;color:#8FB0FF;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap}
/* The axis label sits at 2026 on a 2013 to 2027 scale, which is 93% along, and
   it is 130px wide centred on that tick. Below about 560px that runs past the
   right edge and gives the whole page a horizontal scroll. Narrow screens pin
   it to the end of the axis instead. `left` is set inline by the generator, so
   overriding it takes the flag. */
@media (max-width:560px){
  .strand .tk.axlab{left:auto !important;right:0;transform:none}
}
.strand .key{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;list-style:none;
  margin:24px 0 0;padding:0;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.07em;color:rgba(242,241,236,.72)}
.strand .key li{display:flex;align-items:center;gap:7px}
.strand .sw{width:22px;height:3px;display:inline-block}
.strand .desc{position:absolute;top:70px;margin:0;font-size:14.5px;line-height:1.45;
  color:rgba(242,241,236,.74);width:min(52ch,80vw);display:none;text-align:left}
.strand .desc a{color:#F2F1EC;text-decoration:none;border-bottom:1px solid var(--blue)}
.strand .row[aria-expanded="true"]{height:auto;padding-bottom:14px}
.strand .row[aria-expanded="true"] .desc{display:block;position:static;margin-top:16px;width:auto;
  transform:none !important}
@media (hover:hover) and (pointer:fine){
  .strand .row:hover .desc{display:block;position:absolute;background:#242627;
    border:1px solid rgba(242,241,236,.2);padding:10px 12px;top:66px;z-index:3;
    box-shadow:0 8px 20px rgba(0,0,0,.35)}
}
.strand.drawn .ln{animation:stdraw .8s cubic-bezier(.32,.06,.28,.98) var(--d) both}
.strand.drawn .cap,.strand.drawn .lab,.strand.drawn .clip{animation:stfade .45s ease-out var(--d) both}
.strand.drawn .arw{animation:stpop .45s cubic-bezier(.2,1.5,.4,1) var(--d) both}
@keyframes stdraw{to{transform:scaleX(1)}}
@keyframes stfade{to{opacity:1}}
@keyframes stpop{to{opacity:1;transform:scale(1)}}
@media(max-width:760px){
  /* the label runs as ordinary text and the strand sits in a band beneath it,
     so a wrapped title can never land on top of its own bar */
  .strand .row{height:auto;padding-bottom:34px;margin-bottom:12px}
  .strand .lab{position:static;transform:none !important;white-space:normal;max-width:none}
  .strand .staff{position:relative;top:auto;margin-top:12px;height:26px}
  .strand .desc{position:static !important;width:auto;transform:none !important;
    background:none;border:0;box-shadow:none;padding:0;margin-top:12px}
  .strand .row:hover .desc{display:none}
  .strand .row[aria-expanded="true"] .desc{display:block}
}

.conf{width:100%;height:auto;display:block;overflow:visible;
  margin:clamp(22px,2.6vw,34px) 0 0}
.conf .fl{fill:none;stroke:rgba(242,241,236,.92);stroke-width:1.8;
  stroke-dasharray:900;vector-effect:non-scaling-stroke}
.conf.arm .fl{stroke-dashoffset:900}
/* all five leave at once, which is the claim: the domains ran together */
.conf.drawn .fl{animation:cftrace 2.2s cubic-bezier(.32,.06,.28,.98) .12s both}
.conf .t-yoga{stroke:var(--orange)} .conf .t-curric{stroke:var(--dvteal)}
.conf .t-facil{stroke:var(--heat)} .conf .t-creative{stroke:var(--yel)}
.conf .t-program{stroke:var(--nerve)}
@keyframes cftrace{to{stroke-dashoffset:0}}
.conf .dm{font-family:Newsreader,Georgia,serif;font-size:15px;fill:#F2F1EC}
.conf.arm .dm{opacity:0}
.conf.drawn .dm{animation:stfade .6s ease-out var(--d) both}
.conf .node{fill:var(--blue);transform-box:fill-box;transform-origin:center}
.conf.arm .node{opacity:0}
.conf.drawn .node{animation:cfpop .55s cubic-bezier(.2,1.5,.4,1) 2.35s both}
@keyframes cfpop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.conf .out{stroke:var(--blue);stroke-width:3;stroke-dasharray:300}
.conf.arm .out{stroke-dashoffset:300}
.conf.drawn .out{animation:cftrace 1s cubic-bezier(.32,.06,.28,.98) 2.55s both}
.conf .olab{font-family:Newsreader,Georgia,serif;font-size:16px;fill:#F2F1EC}
.conf.arm .olab{opacity:0}
.conf .osub{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  fill:rgba(242,241,236,.66)}
.conf.arm .osub{opacity:0}
.conf.drawn .olab{animation:stfade .55s ease-out 3.05s both}
.conf.drawn .osub{animation:stfade .55s ease-out 3.25s both}
@media(prefers-reduced-motion:reduce){
  .strand .lab,.strand .cap,.strand .arw,.strand .clip,
  .conf .dm,.conf .node,.conf .olab,.conf .osub{opacity:1}
  .strand .ln{transform:scaleX(1)} .strand .arw{transform:scale(1)}
  .conf .fl,.conf .out{stroke-dashoffset:0} .strand .gl.now{opacity:.34}
}

/* ── studio funnel ──────────────────────────────────────────────────────
   Electric Blue carries "continued", Greige carries the remainder, and the
   dataviz teal carries "resolved" against Blue's "opened". That pair was run
   through the palette validator on 28 September 2026 and passes all six
   checks against the White ground: CVD deltaE 21.0 deutan, 8.4 tritan, 22.3
   normal vision. Both are direct-labelled anyway, so identity never rests on
   hue alone. The teal is a chart value and not a brand colour; it is recorded
   in 04-PALETTE/dataviz-values-2026-09-27.md and declared here with these
   rules rather than in the palette block, so nothing outside a figure can
   reach for it by habit. It is already declared with the About page chronology
   rules above, which is the one place it was first needed, so this block reads
   that declaration rather than repeating the value. */
.fnh{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);
  margin:22px 0 8px;font-weight:600}
.fnmeters{margin:0 0 4px}
.fnmeter{margin:0 0 16px;max-width:62ch}
.fnmlab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:14px;margin:0 0 5px}
.fnmnum{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink)}
.fnmtrack{height:10px;background:var(--greige);border-radius:5px;overflow:hidden}
.fnmfill{height:100%;background:var(--blue);border-radius:5px 0 0 5px}
.fnmfill[style*="width:100"]{border-radius:5px}
.fnmfoot{font-size:12px;color:var(--slate);margin:5px 0 0}

.fncenters{max-width:70ch}
/* Two series, so a key is present and every row is direct-labelled as well.
   Identity never rests on hue alone. */
.fnkey{list-style:none;display:flex;gap:18px;margin:0 0 12px;padding:0;
  font-size:12px;color:var(--slate)}
.fnkey li{display:flex;align-items:center;gap:6px}
.fnsw{display:inline-block;width:14px;height:8px;border-radius:0 4px 4px 0}
.fnrow{display:grid;grid-template-columns:13ch 1fr;gap:4px 12px;align-items:center;
  margin:0 0 12px}
.fnname{font-size:13px;color:var(--ink)}
.fnbars{display:flex;flex-direction:column;gap:2px}
.fnbar{height:8px;border-radius:0 4px 4px 0;min-width:0}
.fnbar-o{background:var(--blue)}
.fnbar-r{background:var(--dvteal)}
.fnnum{grid-column:2;font-size:12px;color:var(--slate);font-family:"IBM Plex Mono",monospace}

.fntablewrap{overflow-x:auto;max-width:100%}
.fntable{border-collapse:collapse;font-size:13px;font-family:"IBM Plex Mono",monospace}
.fntable th,.fntable td{text-align:left;padding:5px 14px 5px 0;
  border-bottom:1px solid rgba(45,47,48,.1);white-space:nowrap}
.fntable th{color:var(--slate);font-weight:600;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase}
.fnraw{margin:18px 0 0;font-size:13px}
.fnraw summary{cursor:pointer;color:var(--slate);font-size:13px}
.fnraw code{font-size:12px}

.chkrev{list-style:none;margin:0 0 14px;padding:0;font-family:"IBM Plex Mono",monospace;
  font-size:12px;color:var(--ink)}
.chkrev li{padding:3px 0;border-bottom:1px solid rgba(45,47,48,.08)}


/* ---- Chakra Map object page assets, added 2026-10-02 ---------------------
   Ramps: each centre name carries its own nine-shade walk from the Map's
   feelings.js, dormant to excessive, balanced outlined. Regenerate the SVGs
   if the Map's colours change. Hero loop and specimen dish are scoped to
   their own classes and appear on that page only. */
.ramps dt{display:flex;align-items:center;gap:12px}
.ramps dt::before{content:"";flex:0 0 81px;height:10px;background-size:100% 100%;
  box-shadow:inset 0 0 0 1px rgba(45,47,48,.18)}
.b-ink .ramps dt::before,.b-dark .ramps dt::before{box-shadow:inset 0 0 0 1px rgba(242,241,236,.26)}
.ramps dt:nth-of-type(1)::before{background-image:url(/assets/img/chakra-ramp-root.svg)}
.ramps dt:nth-of-type(2)::before{background-image:url(/assets/img/chakra-ramp-sacral.svg)}
.ramps dt:nth-of-type(3)::before{background-image:url(/assets/img/chakra-ramp-solar-plexus.svg)}
.ramps dt:nth-of-type(4)::before{background-image:url(/assets/img/chakra-ramp-heart.svg)}
.ramps dt:nth-of-type(5)::before{background-image:url(/assets/img/chakra-ramp-throat.svg)}
.ramps dt:nth-of-type(6)::before{background-image:url(/assets/img/chakra-ramp-third-eye.svg)}
.ramps dt:nth-of-type(7)::before{background-image:url(/assets/img/chakra-ramp-crown.svg)}
@media (max-width:600px){.ramps dt::before{flex-basis:54px;height:8px}}

.heroloop{margin:clamp(22px,3vw,34px) auto 0;max-width:68ch;font-size:calc(17px * var(--read))}
.heroloop video,.heroloop img{display:block;width:100%;height:auto;border-radius:2px;background:#1F2122}

.specimen{margin:clamp(22px,3vw,34px) auto 0;max-width:68ch;font-size:calc(17px * var(--read))}
.specimen iframe{display:block;width:min(100%,560px);aspect-ratio:1;border:0;background:transparent}