/* =============================================================================
   about.css — page-scoped stylesheet for about.html (the editorial dossier)
   Promoted 2026-08-20 from the about-v3 candidate (ADR-005); previous four-act
   version archived at _rollback/2026-08-19-about-v2-four-acts/.

   WHY THIS EXISTS. The four-act About page (about.css, ADR-004) measured 14,291px
   at 1440 across 19 sections, and three things dated it: ten data blocks all
   drawn with the same hairline-plus-mono-label device, four act openers each
   burning most of a screen, and all 11 section heads stacked down the left margin
   so the right 40% of every screen stayed empty.

   WHAT CHANGES. Two registers alternate instead of one repeating. Dossier modules
   (.dsr-plate, the house .kpi-band, .dsr-route, tables) run full width and carry
   checkable data. Editorial spreads (.dsr-prow, .dsr-vm) run asymmetric columns and
   carry argued content. Acts open inside their own lead sections (.dsr-lead) since
   the 2026-09-03 v3 (the black numeral bands and then the standalone cues are gone);
   the tonal rhythm lives in the dark floor feature (.dsr-dark) and the band-inverse
   stack bento, which carry content, not announcements.

   WHAT IS INHERITED. The token layer, body.abx scoping, main-scoped element
   defaults, dark-band colour literals, shared type classes and the reveal block
   are lifted verbatim from about.css. They encode fixes learned the hard way: the
   main scoping is what stops a bare element rule putting footer text at 3.92:1 on
   the fixed red band, and the --band* literals are what survive the theme flip.

   SCOPING. Every rule is prefixed body.abx. Element defaults stay scoped to main.
   Namespace is dsr-, verified unused across all CSS, JS and HTML before adoption.
   Spec: docs/superpowers/specs/2026-08-19-about-editorial-dossier-design.md
   ============================================================================= */
body.abx{
  --p-0:#FFFFFF; --p-50:#FBFAF7; --p-100:#F2F1ED; --p-200:#EAE8E2;
  --rule:rgba(0,0,0,.11); --rule-2:rgba(0,0,0,.22);
  --ink:#16161A; --ink-2:#4A4A54; --ink-3:#6C6B75;
  --ab-red:#AB0000; --ab-red-ink:#AB0000;
  /* live-status green (owner call 2026-09-03): rides the region-token exception to the
     red-only accent rule — same family as tpl.css's .card--gr #57B786, darkened for AA
     text on paper. Used ONLY for the two live-entity status rows on the group map. */
  --live:#1B7A4F; --live-glow:rgba(27,122,79,.4);
  /* the act bands never flip, so everything painted on them is a literal.
     --paper-* tokens go near-black in dark theme and would vanish here. */
  --band:#0B0B0C; --band-ink:#FFFFFF; --band-ink-2:rgba(255,255,255,.72);
  --band-rule:rgba(255,255,255,.16); --band-red:#ef7676;
  --display:var(--font-display); --body:var(--font-body); --mono:var(--font-mono);
  --e:cubic-bezier(.2,.8,.2,1); --e-out:cubic-bezier(.23,1,.32,1);
  background:var(--p-50); color:var(--ink);
  overflow-x:clip;
}
html[data-theme="dark"] body.abx{
  --p-0:#141416; --p-50:#0F0F11; --p-100:#17171A; --p-200:#1D1D21;
  --rule:rgba(255,255,255,.13); --rule-2:rgba(255,255,255,.24);
  --ink:#F4F3EF; --ink-2:#C4C3BD; --ink-3:#95949E;
  --ab-red:#E05252; --ab-red-ink:#E05252;
  --live:#57B786; --live-glow:rgba(87,183,134,.4);
}

body.abx main{position:relative;z-index:1}
body.abx main p{color:var(--ink-2)}
body.abx main :is(h1,h2,h3,h4){color:var(--ink)}
body.abx section{padding:0;border-bottom:0;position:relative}
body.abx ::selection{background:var(--ab-red);color:#fff}

/* ————— shared type ———————————————————————————————————————————————————————— */
/* .lab is this page's eyebrow, and since 2026-09-03 it prints in the sitewide eyebrow
   register: red mono, 12px, .12em — the same voice every other page's kicker speaks in.
   Data labels (.dsr-pk, .dsr-kl and friends) stay muted; only the section kicker is red. */
body.abx .lab{
  font-family:var(--mono);font-weight:500;font-size:12px;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ab-red-ink);
  display:block;margin:0 0 16px;
}
body.abx .h-xl{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,5vw,66px);line-height:.96;letter-spacing:-.028em;
  margin:0;text-wrap:balance;
}
body.abx .h-lg{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.4vw,44px);line-height:1.02;letter-spacing:-.024em;
  margin:0;text-wrap:balance;
}
body.abx .h-md{
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,1.9vw,26px);line-height:1.1;letter-spacing:-.018em;margin:0;
}
body.abx .sub{font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;color:var(--ink-2);margin:0;max-width:60ch}
body.abx .fine{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
body.abx em.q{font-style:normal;color:var(--ab-red-ink)}

/* The fixed .ax-spine rail and the .ax-prog reading hairline were removed 2026-09-03
   (owner call): the rail overlapped the content column between 1360 and 1760 and no other
   page carries one. The act ids survive on the .dsr-lead sections below. */

/* ————— sections ————————————————————————————————————————————————————————— */
body.abx .dsr-sec{padding:clamp(48px,5vw,64px) 0}
body.abx .dsr-sec--tight{padding:clamp(28px,3vw,40px) 0}
/* Section-to-section separation (2026-09-03): paper sections take the sitewide hairline
   between them — the same rule every other page's `section` carries — so adjacent
   containers read as rooms, not one run-on. Two exceptions, both because a stronger
   edge already stands there: a section feeding a chapter cue (the cue opens with its
   own 2px rule) and a section feeding a dark band (the tonal cut IS the separation). */
body.abx .dsr-sec{border-bottom:1px solid var(--rule)}
body.abx .dsr-sec:has(+ .dsr-lead),
body.abx .dsr-sec:has(+ .dsr-dark),
body.abx .dsr-sec:has(+ .band-inverse){border-bottom:0}

/* ————— THE 8-LINE, and the section head ————————————————————————————————
   Headline left, lede right. This is the rule that stops all 11 heads leaving
   an empty right band.

   THE 8-LINE is the page's one shared spine: every block drawn as naked text on
   paper puts its supporting right-hand column on grid line 8 (59.6% of the
   content width, stable across 1440/1280/1024). Members: .dsr-head, .dsr-prow,
   .dsr-val, and .dsr-rec when they land. They must also share this
   block's gap, because a different gap means a different pitch and the same
   column number then resolves ~7px away.

   Blocks drawn as hairline-gutter cell strips (.dsr-plate, .kpi-band, .dsr-br,
   .dsr-next) and equal-weight editorial pairs (.dsr-vm) are EXEMPT
   and divide evenly: a bordered cell strip reads as "N equal cells" and never
   invites registration against a text block. Forcing .dsr-vm onto the 8-line
   would also claim the Vision outranks the Mission, which the copy denies.

   WHY LINE 8 AND NOT 7: at line 7 the --lead headline gets 579px, which is
   24.5 characters at its own size — under the 25-45 display target — and the
   longest headline runs to three lines. At line 8 it gets 680px / 29ch, every
   principle statement fits one line, and every right-hand column stays inside
   45-75 characters at all three desktop widths. */
body.abx .dsr-head{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);align-items:start;
  margin-bottom:clamp(28px,3.4vw,48px);
}
body.abx .dsr-head-t{grid-column:1/8;margin:0}
/* Top-aligned and dropped onto the headline's first baseline, NOT align-items:end.
   End-alignment equated a 130px headline box's bottom with a 2-line lede's bottom,
   so the gap between their last baselines differed in every section and a 1-line
   lede sagged at the bottom of the cell. The drop is the eyebrow block (11px +
   18px margin) plus the baseline delta.
   No ch cap: above 900 the grid track is the only measure authority. max-width:42ch
   resolved to 399px against a 478px track, so the head's right edge floated 79px
   inside the grid at 1280, 49px at 1440 and 11px at 1024 — a different place on
   every screen. */
body.abx .dsr-head-s{grid-column:8/13;margin:0;padding-top:clamp(30px,3.75vw,48px);max-width:none}
body.abx .dsr-head--lead .dsr-head-s{padding-top:clamp(34px,4.2vw,54px)}
@media(max-width:900px){
  body.abx .dsr-head-t,body.abx .dsr-head-s{grid-column:1/-1}
  body.abx .dsr-head-s{padding-top:0;margin-top:14px;max-width:62ch}
  /* required: (0,3,1) outranks (0,2,1), so the --lead variant needs its own reset
     or it keeps a 54px top pad once the head has stacked */
  body.abx .dsr-head--lead .dsr-head-s{padding-top:0}
}

/* ————— three type levels ————————————————————————————————————————————————
   LEVEL 1 is the lead section head of each act (.dsr-head--lead, below), which gets
   a genuinely large display head. LEVEL 2 is every supporting section, one step
   below on the inherited .h-lg.

   This exists because the old page set almost every section head at the same
   size, so nothing read as more important than anything else. Exactly three
   sections carry --lead: the principles (act 01), the floor (act 02) and the
   award ledger (act 03). Do not add a fourth. */
body.abx .dsr-head--lead .dsr-head-t :is(h2,h3){
  font-size:clamp(31px,4.2vw,56px);line-height:.99;letter-spacing:-.028em;
}

/* ————— act openers ————————————————————————————————————————————————————————
   v3 (2026-09-03): the standalone cue sections are gone — a cue's big head directly
   above a lead section's near-identical head read as a stutter. Each act now opens
   INSIDE its first section: .dsr-lead carries the chapter's 2px ink rule and extra
   air; the act's eyebrow moved onto the section's own head. The dark act (02) needs
   no rule — its tonal cut is the chapter mark. */
body.abx .dsr-lead{padding-top:clamp(56px,6.5vw,88px)}
body.abx .dsr-lead .wrap::before{
  content:"";display:block;border-top:2px solid var(--ink);
  margin-bottom:clamp(28px,3.4vw,46px);
}

/* ————— full dark feature sections ————————————————————————————————————————
   Replaces the tonal rhythm the four dark act openers used to provide. Same
   literal-colour discipline as the bands. */
/* more air since 2026-09-03 (owner: the dark band and its neighbours sat glued) */
body.abx .dsr-dark{background:var(--band);padding:clamp(64px,7vw,96px) 0}
body.abx .dsr-dark :is(h2,h3,h4){color:var(--band-ink)}
body.abx .dsr-dark p,body.abx .dsr-dark .dsr-head-s,body.abx .dsr-dark .fine{color:var(--band-ink-2)}
body.abx .dsr-dark .lab{color:var(--band-red)}
body.abx .dsr-dark em.q{color:var(--band-red)}
body.abx .dsr-dark a{color:var(--band-ink)}
body.abx .dsr-dark a:focus-visible{outline:2px solid #EBE9E3;outline-offset:3px}
/* ————— opening spread: the identity plate ————————————————————————————————
   Six coded fields, full width, directly under the hero. Same six are proved
   against public registries in act three. */
/* full bleed since 2026-09-03: the plate is a direct child of its section, inside a
   .dsr-bleed that keeps the page's own gutter (owner call: the strip wants the page's
   left/right padding, not cells on the glass edge). Cells lift to plain paper on hover. */
body.abx .dsr-bleed{padding-inline:clamp(20px,4vw,48px)}
body.abx .dsr-plate{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
body.abx .dsr-pc{background:var(--p-50);padding:clamp(18px,2vw,28px)}
@media(hover:hover) and (pointer:fine){
  body.abx .dsr-pc:hover{background:var(--p-0)}
  body.abx .dsr-pc:hover .dsr-pk{color:var(--ab-red-ink)}
}
body.abx .dsr-pk{transition:color .3s var(--e)}
body.abx .dsr-pk{
  font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:12px;
}
body.abx .dsr-pv{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.7vw,24px);line-height:1.1;letter-spacing:-.015em;
  color:var(--ink);display:block;
}
body.abx .dsr-pv small{
  display:block;margin-top:9px;font-family:var(--body);font-weight:400;
  font-size:12.5px;line-height:1.45;letter-spacing:0;color:var(--ink-3);
}
@media(max-width:900px){body.abx .dsr-plate{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){body.abx .dsr-plate{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ————— opening spread: the trademark beat ————————————————————————————————
   v3 (2026-09-03): the REAL lockup. The box mark's six facets loop through their
   assembly forever (fill rides currentColor, so each theme gets its own red literal),
   and the registered wordmark carries a slow red sweep — a 3%-wide clip window on a
   red copy travelling the ink copy underneath. All of it motion-gated. */
body.abx .dsr-tm2{margin-top:6px}
body.abx .dsr-lockup{
  display:flex;align-items:center;gap:clamp(20px,3vw,44px);margin:0;
}
body.abx .dsr-tmk{
  width:clamp(64px,7vw,110px);height:auto;display:block;flex:none;
  color:var(--ab-red-ink);
}
/* the facet loop: 8s per lap, each facet enters from its iso offset on its own delay,
   holds assembled through most of the lap, and clears for the next one */
@keyframes dsr-facet{
  0%,3%{opacity:0;transform:translate(var(--fx,0px),var(--fy,0px))}
  14%,86%{opacity:1;transform:none}
  95%,100%{opacity:0;transform:translate(var(--fx,0px),var(--fy,0px))}
}
body.abx .dsr-tmk path{opacity:0;transform:translate(var(--fx,0px),var(--fy,0px))}
body.abx .reveal.is-visible .dsr-tmk path{
  animation:dsr-facet 8s var(--e) infinite;
  animation-delay:calc(var(--i,0) * 120ms);
}
/* the wordmark: ink copy underneath, red copy above clipped to a narrow travelling
   window. The window is what loops; the ink copy never moves. */
body.abx .dsr-tmwd{position:relative;display:block;flex:1;min-width:0}
body.abx .dsr-tmword{display:block;width:100%;height:auto;color:var(--ink)}
body.abx .dsr-tmword--red{
  position:absolute;inset:0;color:var(--ab-red-ink);
  clip-path:inset(-6% 100% -6% 0);
}
@keyframes dsr-tmsweep{
  0%{clip-path:inset(-6% 100% -6% 0)}
  100%{clip-path:inset(-6% 0 -6% 97%)}
}
body.abx .reveal.is-visible .dsr-tmword--red{animation:dsr-tmsweep 5.5s linear infinite}
@media(prefers-reduced-motion:reduce){
  body.abx .dsr-tmk path{opacity:1;transform:none;animation:none!important}
  body.abx .dsr-tmword--red{animation:none!important;clip-path:inset(0 100% 0 0)}
}
html.a11y-no-motion body.abx .dsr-tmk path{opacity:1;transform:none;animation:none!important}
html.a11y-no-motion body.abx .dsr-tmword--red{animation:none!important;clip-path:inset(0 100% 0 0)}
@media(scripting:none){body.abx .dsr-tmk path{opacity:1;transform:none}}
body.abx .dsr-tm-side{margin-top:clamp(22px,2.6vw,34px)}
body.abx .dsr-tm-sub{margin:0;max-width:62ch}
body.abx .dsr-tm-tag{
  display:inline-block;margin-top:18px;padding-top:12px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
@media(max-width:640px){
  body.abx .dsr-lockup{flex-direction:column;align-items:flex-start;gap:20px}
  body.abx .dsr-tmk{width:72px}
}

/* ————— act 01: the three principles, as editorial rows —————————————————————
   Register B. Statement left at quote scale, body and tag right. Was three
   equal cards, which gave three co-equal claims no hierarchy at all. */
body.abx .dsr-prin{border-top:1px solid var(--rule)}
body.abx .dsr-prow{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);align-items:start;
  padding:clamp(30px,3.6vw,54px) 0;border-bottom:1px solid var(--rule);
}
/* on the 8-line. Was 1/6 next to 7/13, which was wrong twice over: column 6 sat
   empty as 126px of unexplained gutter, and the right edge landed one full pitch
   (100.8px at 1280) inside the head's lede directly above it. */
body.abx .dsr-pq{grid-column:1/8}
body.abx .dsr-pq :is(h3,h4){
  font-family:var(--display);font-weight:300;
  font-size:clamp(25px,2.9vw,40px);line-height:1.06;letter-spacing:-.02em;
  margin:16px 0 0;color:var(--ink);text-wrap:balance;
}
body.abx .dsr-pb{grid-column:8/13}
/* no ch cap above 900: the 478px track is already a 60-character measure, and the
   52ch cap resolved to 457px, insetting the text 21px from the grid for no reason */
body.abx .dsr-pb p{margin:0}
/* the marks are on the REQ-005 house recipe (160x160 iso cubes, 1.5 stroke), so they
   render at house scale rather than the old 54px glyph size. Occlusion fills are the
   literal #fff form; this attribute rule is what keeps them on the page's own paper in
   dark theme (the sitewide rule only covers .mf-ico). */
body.abx .dsr-pico{
  width:clamp(64px,6vw,96px);height:auto;color:var(--ink);display:block;
}
body.abx .dsr-pico path[fill="#fff"]{fill:var(--p-50)}
body.abx .dsr-pico .rk{stroke:var(--ab-red-ink)}
/* each row is a hover surface, and the wash spans the WHOLE viewport (owner call
   2026-09-03): a ::before layer bleeds to both screen edges under the row's content —
   the 8-line never moves because no padding changes. The tag reddens and the mark's
   layers separate along their own iso axes — the .pc pattern the home cards use. */
/* the sections carry the clip for the 50vw washes, not just body: 100vw includes the
   scrollbar, so every bleed overshoots the true viewport by half a scrollbar, and a clip
   on body alone leaves the page draggable sideways by that amount at load (tpl.css's
   .sec-clip pattern; measured 8px at 430/768 on 2026-09-04). */
body.abx .dsr-sec,body.abx .dsr-dark{overflow-x:clip}
body.abx .dsr-prow{position:relative;z-index:0}
body.abx .dsr-prow::before{
  content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:transparent;transition:background-color .3s var(--e);
}
body.abx .dsr-prow .pc{transition:transform .6s var(--e)}
@media(hover:hover) and (pointer:fine){
  body.abx .dsr-prow:hover::before{background:var(--p-0)}
  body.abx .dsr-prow:hover .pc{transform:translate(var(--dx,0px),var(--dy,0px))}
  body.abx .dsr-prow:hover .dsr-ptag{color:var(--ab-red-ink);border-top-color:var(--ab-red-ink)}
}
/* the continuous beat: the red layer of each mark breathes on its own vertical, always,
   not only on hover. `translate` composes with the .pc transform, so the two never fight. */
@keyframes dsr-bob{from{translate:0 0}to{translate:0 -4px}}
body.abx .dsr-pico .fl{animation:dsr-bob 2.6s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){
  body.abx .dsr-pico .fl{animation:none}
  body.abx .dsr-prow .pc{transition:none}
}
html.a11y-no-motion body.abx .dsr-pico .fl{animation:none}
html.a11y-no-motion body.abx .dsr-prow .pc{transition:none}
body.abx .dsr-ptag{
  display:inline-block;margin-top:20px;padding-top:13px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  transition:color .3s var(--e),border-top-color .3s var(--e);
}
@media(max-width:900px){
  body.abx .dsr-pq,body.abx .dsr-pb{grid-column:1/-1}
  body.abx .dsr-pb{margin-top:16px}
  body.abx .dsr-pb p{max-width:62ch}
}

/* ————— act 01: vision & mission ——————————————————————————————————————————
   v2 (owner call 2026-09-03): two CARDS, each led by an iso mark on the REQ-005
   recipe and ringed by the house conic-sweep on hover. Two statements adopted
   internally and reproduced unchanged — the lead line stays at quote scale. */
body.abx .dsr-vm{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
}
body.abx .dsr-vmc{
  background:var(--p-0);border:1px solid var(--rule);border-radius:2px;
  padding:clamp(24px,3vw,40px);position:relative;
}
body.abx .dsr-vmico{
  width:clamp(84px,7.5vw,116px);height:auto;display:block;
  color:var(--ink);margin-bottom:clamp(16px,2vw,24px);
}
body.abx .dsr-vmico path[fill="#fff"]{fill:var(--p-0)}
body.abx .dsr-vmico .rk{stroke:var(--ab-red-ink)}
body.abx .dsr-vmico .pc{transition:transform .6s var(--e)}
body.abx .dsr-vmc h4{
  font-family:var(--display);font-weight:300;
  font-size:clamp(22px,2.3vw,32px);line-height:1.12;letter-spacing:-.018em;
  margin:14px 0 16px;color:var(--ink);text-wrap:balance;
}
body.abx .dsr-vmc h4 span{color:var(--ink-3)}
body.abx .dsr-vmc p{margin:0;max-width:52ch}
/* the house conic-sweep outline (@property --sweep registered in tpl.css) */
body.abx .dsr-vmc::after{
  content:"";position:absolute;inset:-1px;padding:1px;border-radius:2px;
  pointer-events:none;--sweep:0deg;
  background:conic-gradient(from 135deg,transparent 0 calc(180deg - var(--sweep)),var(--ab-red) calc(180deg - var(--sweep)) calc(180deg + var(--sweep)),transparent calc(180deg + var(--sweep)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:--sweep 280ms cubic-bezier(.2,0,0,1);
}
@media(hover:hover) and (pointer:fine){
  body.abx .dsr-vmc:hover::after{--sweep:180deg}
  body.abx .dsr-vmc:hover .dsr-vmico .pc{transform:translate(var(--dx,0px),var(--dy,0px))}
}
@media(prefers-reduced-motion:reduce){
  body.abx .dsr-vmc::after{transition:none}
  body.abx .dsr-vmico .pc{transition:none}
}
html.a11y-no-motion body.abx .dsr-vmc::after{transition:none}
html.a11y-no-motion body.abx .dsr-vmico .pc{transition:none}
@media(max-width:900px){body.abx .dsr-vm{grid-template-columns:1fr;gap:20px}}

/* ————— act 01: the five values ——————————————————————————————————————————
   Register A. Was five 220px columns of body copy, which crushed every one of
   them. Now five full-width rows: number, name, description on one line. No
   text is cut. */
body.abx .dsr-vals{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);
}
body.abx .dsr-val{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);align-items:baseline;
  padding:clamp(18px,2.1vw,28px) 0;border-bottom:1px solid var(--rule);
  position:relative;z-index:0;
}
/* same full-viewport hover wash as the principle rows */
body.abx .dsr-val::before{
  content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:transparent;transition:background-color .3s var(--e);
}
@media(hover:hover) and (pointer:fine){body.abx .dsr-val:hover::before{background:var(--p-0)}}
body.abx .dsr-vn{
  font-family:var(--mono);font-weight:500;font-size:12px;line-height:1.4;
  letter-spacing:.1em;color:var(--ab-red-ink);font-variant-numeric:tabular-nums;
}
body.abx .dsr-val h4{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.5vw,21px);line-height:1.16;letter-spacing:-.012em;
  margin:0;color:var(--ink);
  display:flex;align-items:center;gap:12px;
}
/* the value glyph: quiet ink beside the name, red under the row's own hover wash */
body.abx .dsr-vg{width:22px;height:22px;flex:none;color:var(--ink-3);transition:color .3s var(--e)}
@media(hover:hover) and (pointer:fine){body.abx .dsr-val:hover .dsr-vg{color:var(--ab-red-ink)}}
body.abx .dsr-val p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
/* on the 8-line: the index is a hairline column, the name is the major element and the
   description is the minor one, so the five descriptions share an x with every section
   head's lede. Was auto/3fr/6fr, which started the description around 38% and matched
   nothing else on the page. */
body.abx .dsr-vn{grid-column:1/2}
body.abx .dsr-val h4{grid-column:2/8}
body.abx .dsr-val p{grid-column:8/13}
/* 900, not 760: at 900 an 8/13 description is 334px, under 45 characters. Collapsing here
   also keeps every 8-line member on the one breakpoint.
   Every grid-column MUST be reset — leaving p at 8/13 against 2 declared tracks creates
   10 implicit columns and overflows the row. */
@media(max-width:900px){
  body.abx .dsr-val{grid-template-columns:auto minmax(0,1fr);row-gap:9px}
  body.abx .dsr-vn{grid-column:auto}
  body.abx .dsr-val h4{grid-column:2/-1}
  body.abx .dsr-val p{grid-column:2/-1}
}

/* ————— act 02: the floor's numbers ————————————————————————————————————————
   Since 2026-09-03 the KPIs are the house .kpi-band — bare paper, edge to edge of the
   content column, counting up on reveal — the same treatment the home page's band took
   on 2026-09-01. The band's own cells, hairlines and count-up all come from tpl.css and
   tpl.js; the page only gives the section its height (body.abx zeroes section padding). */
body.abx .dsr-kpis{padding:48px 0}

/* ————— act 02: the story, as a horizontal route ——————————————————————————
   Was a 9-row ledger in a narrow left column. The page's own copy calls it a
   route, so it is drawn as one. Reverts to a vertical rail on phones: sideways
   scrubbing on a phone is worse than a list. */
body.abx .dsr-route{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);
  border-top:1px solid var(--rule);position:relative;
}
/* the route DRAWS itself (2026-09-03): a 2px red line travels the ledger's top edge as
   the section reveals, and each stop's dot pops in on the row's own stagger. */
body.abx .dsr-route::before{
  content:"";position:absolute;top:-1.5px;left:0;height:2px;width:100%;
  background:var(--ab-red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.6s var(--e-out) .2s;
}
body.abx .reveal.is-visible.dsr-route::before{transform:scaleX(1)}
body.abx .dsr-stop{
  position:relative;padding:26px clamp(13px,1.4vw,22px) 30px;
  border-right:1px solid var(--rule);
}
body.abx .dsr-stop:last-child{border-right:0}
body.abx .dsr-stop::before{
  content:"";position:absolute;top:-4.5px;left:clamp(13px,1.4vw,22px);
  width:8px;height:8px;border-radius:50%;background:var(--rule-2);
  transform:scale(0);transition:transform .45s var(--e-out);
  transition-delay:calc(var(--i,0) * 45ms + 350ms);
}
body.abx .reveal.is-visible .dsr-stop::before{transform:scale(1)}
body.abx .dsr-stop--now::before{background:var(--ab-red)}
/* "Today" keeps a live pulse: a ring radiating from the red dot, motion-gated below */
body.abx .dsr-stop--now::after{
  content:"";position:absolute;top:-4.5px;left:clamp(13px,1.4vw,22px);
  width:8px;height:8px;border-radius:50%;pointer-events:none;
  animation:dsr-ping 2.4s cubic-bezier(.2,.6,.4,1) 1.2s infinite;
}
@keyframes dsr-ping{
  0%{box-shadow:0 0 0 0 var(--ping,rgba(171,0,0,.45))}
  70%,100%{box-shadow:0 0 0 12px transparent}
}
body.abx .dsr-stop--fut::before{background:transparent;border:1px solid var(--rule-2)}
@media(prefers-reduced-motion:reduce){
  body.abx .dsr-route::before{transform:scaleX(1);transition:none}
  body.abx .dsr-stop::before{transform:scale(1);transition:none}
  body.abx .dsr-stop--now::after{animation:none}
}
html.a11y-no-motion body.abx .dsr-route::before{transform:scaleX(1);transition:none}
html.a11y-no-motion body.abx .dsr-stop::before{transform:scale(1);transition:none}
html.a11y-no-motion body.abx .dsr-stop--now::after{animation:none}
@media(scripting:none){
  body.abx .dsr-route::before{transform:scaleX(1)}
  body.abx .dsr-stop::before{transform:scale(1)}
}
body.abx .dsr-y{
  display:block;font-family:var(--mono);font-weight:500;font-size:12.5px;
  line-height:1.3;letter-spacing:.08em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
body.abx .dsr-stop--now .dsr-y{color:var(--ab-red-ink)}
body.abx .dsr-slab{
  display:block;margin:7px 0 11px;font-family:var(--mono);font-weight:500;
  font-size:10px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
body.abx .dsr-stop p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
/* the story photo, full width under the route */
body.abx .dsr-rfig{margin:clamp(28px,3.4vw,48px) 0 0}
body.abx .dsr-rfig img{
  display:block;width:100%;height:auto;aspect-ratio:16/6;object-fit:cover;
  border-radius:2px;
}
body.abx .dsr-rfig figcaption{
  margin-top:12px;font-family:var(--mono);font-weight:500;font-size:10.5px;
  line-height:1.5;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
}
@media(max-width:760px){body.abx .dsr-rfig img{aspect-ratio:4/3}}

@media(max-width:900px){
  body.abx .dsr-route{grid-auto-flow:row;grid-auto-columns:auto}
  body.abx .dsr-stop{
    border-right:0;border-bottom:1px solid var(--rule);
    padding:18px 0 18px 24px;
  }
  body.abx .dsr-stop:last-child{border-bottom:0}
  body.abx .dsr-stop::before{top:23px;left:0}
  body.abx .dsr-stop--now::after{top:23px;left:0}
  /* vertical rail: the top-edge draw line has no meaning sideways */
  body.abx .dsr-route::before{display:none}
}

/* ————— act 02: branches ————————————————————————————————————————————————— */
body.abx .dsr-br{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
body.abx .dsr-brc{background:var(--p-50);padding:clamp(20px,2.2vw,30px)}
@media(hover:hover) and (pointer:fine){body.abx .dsr-brc:hover{background:var(--p-0)}}
body.abx .dsr-brc h4{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.6vw,23px);line-height:1.15;margin:12px 0 10px;color:var(--ink);
}
body.abx .dsr-brc p{margin:0;font-size:14.5px;line-height:1.55}
body.abx .dsr-brs{
  font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:8px;
}
body.abx .dsr-brs::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* status reads at a glance (2026-09-03): LIVE entities carry a GREEN dot with a radiating
   pulse — green because live/running is what the colour has to say (owner call; the
   --live token above documents the accent-rule exception) — the horizon entity a hollow
   dashed dot and quieter card ink. */
body.abx .dsr-brc--live .dsr-brs{color:var(--live)}
body.abx .dsr-brc--live .dsr-brs::before{
  background:var(--live);--ping:var(--live-glow);
  animation:dsr-ping 2.4s cubic-bezier(.2,.6,.4,1) infinite;
}
body.abx .dsr-brc--fut .dsr-brs::before{
  background:transparent;border:1px dashed var(--ink-3);width:8px;height:8px;
}
body.abx .dsr-brc--fut :is(h4,p){color:var(--ink-3)}
@media(prefers-reduced-motion:reduce){body.abx .dsr-brc--live .dsr-brs::before{animation:none}}
html.a11y-no-motion body.abx .dsr-brc--live .dsr-brs::before{animation:none}
@media(max-width:900px){body.abx .dsr-br{grid-template-columns:1fr}}

/* ————— act 02: AI-native — the arithmetic room ————————————————————————————
   Replaces the ai.html band-inverse import (owner: duplicate). Ground: the ONE
   house noisy-dark recipe (tpl.css .band-noise dark / #discipline.band-inverse
   literals), fixed in both themes; dark theme deepens to the #020203/.78 wash
   exactly as tpl.css does for its textured bands, so the band still reads as a
   break against dark-theme paper (--p-50 #0F0F11 sits 4 steps off #0d0d0e).
   All text rides the .dsr-dark literals declared above — nothing here may use
   --p/--ink tokens. */
body.abx .dsr-dark--noise{
  background:linear-gradient(rgba(13,13,14,.75),rgba(13,13,14,.75)),#0d0d0e url('https://img.tpl.one/websites/tplgr/v2/assets/images/backgrounds/noisy-dark.webp') center/cover no-repeat;
  background-blend-mode:normal,multiply;
}
html[data-theme="dark"] body.abx .dsr-dark--noise{
  background:linear-gradient(rgba(2,2,3,.78),rgba(2,2,3,.78)),#020203 url('https://img.tpl.one/websites/tplgr/v2/assets/images/backgrounds/noisy-dark.webp') center/cover no-repeat;
  background-blend-mode:normal,multiply;
}
/* .biglink's base hover is --red-ink, too dim on near-black; the band literal instead */
body.abx .dsr-dark .biglink:hover{color:var(--band-red)}

/* the ratio mark: solid 27 (the people) counts up via the sitewide [data-count]
   observer — markup text holds the final value (the kpi-band contract), so
   scripting:none ships "27"; data-plain because "27" must never localize.
   min-width:2ch + text-align:right makes the count grow leftward so the slash
   and the outlined 100 (the output envelope) never shift mid-count. The slash
   draws in like the route ledger's red line and lands as the count settles.
   aria-hidden — the sentence beside it on the 8-line carries the fact. */
body.abx .dsr-ratio{display:flex;align-items:baseline;gap:clamp(12px,1.4vw,22px)}
body.abx .dsr-rn,body.abx .dsr-rx{
  font-family:var(--display);font-weight:800;
  font-size:clamp(80px,10vw,160px);line-height:.8;letter-spacing:-.04em;
  color:var(--band-ink);font-variant-numeric:tabular-nums;
}
body.abx .dsr-rn{min-width:2ch;text-align:right}
body.abx .dsr-rx{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.5)}
/* transparent fill with no stroke support = invisible text; this is not optional */
@supports not (-webkit-text-stroke:1px #fff){body.abx .dsr-rx{color:rgba(255,255,255,.45)}}
body.abx .dsr-rsl{
  width:3px;height:.78em;align-self:center;background:var(--band-red);
  transform:skewX(-18deg) scaleY(0);transform-origin:50% 100%;
  transition:transform .7s var(--e-out) .95s;
}
body.abx .reveal.is-visible .dsr-rsl{transform:skewX(-18deg) scaleY(1)}
body.abx .dsr-rcap{
  display:block;margin-top:18px;font-family:var(--mono);font-weight:500;
  font-size:10.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  color:var(--band-ink-2);
}
@media(prefers-reduced-motion:reduce){body.abx .dsr-rsl{transform:skewX(-18deg) scaleY(1);transition:none}}
html.a11y-no-motion body.abx .dsr-rsl{transform:skewX(-18deg) scaleY(1);transition:none}
@media(scripting:none){body.abx .dsr-rsl{transform:skewX(-18deg) scaleY(1)}}

/* partners: the .dsr-val row grammar (index 1/2, name 2/8, claim on the 8-line)
   in band literals; the full-viewport hover wash lifted to a quiet white —
   a state, not a ground. */
body.abx .dsr-pt{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;border-top:1px solid var(--band-rule)}
body.abx .dsr-ptr{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);align-items:baseline;
  padding:clamp(16px,1.9vw,24px) 0;border-bottom:1px solid var(--band-rule);
  position:relative;z-index:0;
}
body.abx .dsr-ptr::before{
  content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:transparent;transition:background-color .3s var(--e);
}
@media(hover:hover) and (pointer:fine){body.abx .dsr-ptr:hover::before{background:rgba(255,255,255,.05)}}
body.abx .dsr-ptn{
  grid-column:1/2;font-family:var(--mono);font-weight:500;font-size:12px;
  line-height:1.4;letter-spacing:.1em;color:var(--band-red);font-variant-numeric:tabular-nums;
}
body.abx .dsr-ptr h4{
  grid-column:2/8;margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.7vw,23px);line-height:1.15;letter-spacing:-.012em;color:var(--band-ink);
}
body.abx .dsr-ptr p{grid-column:8/13;margin:0;font-size:15px;line-height:1.6;color:var(--band-ink-2)}
/* 900, the page's one collapse point; every grid-column reset, per the .dsr-val lesson
   (leaving a child at 8/13 against 2 declared tracks creates implicit columns and overflows) */
@media(max-width:900px){
  body.abx .dsr-ptr{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  body.abx .dsr-ptn{grid-column:auto}
  body.abx .dsr-ptr h4{grid-column:2/-1}
  body.abx .dsr-ptr p{grid-column:2/-1;max-width:62ch}
}
/* the mark on phones: 10vw floors at 80px; two numerals + slash ≈ 230px, inside 360px */
@media(max-width:640px){
  body.abx .dsr-rn,body.abx .dsr-rx{font-size:clamp(64px,21vw,92px)}
}

/* ————— act 02: the people, as the personnel manifest ————————————————————————
   v3 (the owner rejected the person-card grid twice): no card at all. Five
   register rows in the page's 8-line grammar — index 1/2, subject 2/8, mandate
   8/13, hairline rows, the same full-viewport hover wash as .dsr-prow/.dsr-val —
   spoken in a manifest voice no other ledger here carries: the index is an
   outlined display numeral (career's .cr-zero recipe, @supports-guarded so a
   non-stroking engine gets a quiet solid digit, never invisible text) and the
   subject is a portrait plate on tpl.css's own .person .photo machinery (sketch
   overlay + its reduced-motion/a11y gates come free; the hover trigger is
   restated at row scope because these rows are not .card). Hover also pulls a
   3px red spine down the viewport's left edge — the section-level overflow-x:clip
   (with body.abx's as backstop) contains both 50vw bleeds. dsr-op* grep'd against
   tpl.css and tpl.js 2026-09-03: unused. */
body.abx .dsr-ops{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
body.abx .dsr-op{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);align-items:center;
  padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--rule);
  position:relative;z-index:0;
}
/* the sheet lifts out of the file: the page's full-viewport wash */
body.abx .dsr-op::before{
  content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;
  background:transparent;transition:background-color .3s var(--e);
}
/* the red spine at the viewport's left edge */
body.abx .dsr-op::after{
  content:"";position:absolute;left:calc(50% - 50vw);top:0;bottom:0;width:3px;
  background:var(--ab-red);transform:scaleY(0);transform-origin:bottom;
  transition:transform .26s var(--e);
}
/* the manifest numeral. Decorative — DOM order carries the sequence. Sized to
   its own track: the 1/2 column is ~66px at 1280 content width, and two
   tabular digits at 52px run ~60px — 64px would overflow it. */
body.abx .dsr-opn{
  grid-column:1/2;font-family:var(--display);font-weight:800;
  font-size:clamp(34px,3.5vw,52px);line-height:.9;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink-3);
  transition:color .3s var(--e),-webkit-text-stroke-color .3s var(--e);
}
@supports(-webkit-text-stroke:2px black){
  body.abx .dsr-opn{color:transparent;-webkit-text-stroke:1.5px var(--rule-2)}
}
body.abx .dsr-opid{grid-column:2/8;display:flex;align-items:center;gap:clamp(16px,1.8vw,24px);min-width:0}
/* the portrait plate rides tpl.css .person .photo (aspect-ratio 1/1, sketch
   overlay, every motion gate); only size, the page's 2px radius and the
   card-era margin are restated here */
body.abx .dsr-op .photo{width:clamp(80px,8.5vw,120px);margin:0;border-radius:2px;flex:none}
body.abx .dsr-op h4{
  font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.9vw,26px);line-height:1.08;letter-spacing:-.015em;
  margin:0 0 8px;color:var(--ink);
}
body.abx .dsr-opr{
  display:block;font-family:var(--mono);font-weight:500;font-size:10.5px;
  line-height:1.4;letter-spacing:.15em;text-transform:uppercase;color:var(--ab-red-ink);
}
/* the mandate, on the 8-line with every section lede */
body.abx .dsr-opm{grid-column:8/13;margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
/* row hover, one gesture: wash + spine + numeral inks red + sketch + house zoom.
   tpl.css fires the sketch and zoom off .card:hover; these rows are not .card,
   deliberately, so the triggers are restated at row scope. */
@media(hover:hover) and (pointer:fine){
  body.abx .dsr-op:hover::before{background:var(--p-0)}
  body.abx .dsr-op:hover::after{transform:scaleY(1);transform-origin:top}
  body.abx .dsr-op:hover .dsr-opn{color:var(--ab-red);-webkit-text-stroke-color:var(--ab-red)}
  body.abx .dsr-op:hover .photo .sketch{opacity:1}
  body.abx .dsr-op:hover .photo img{transform:scale(1.03)}
}
body.abx .dsr-op:focus-within .photo .sketch{opacity:1}
@media(prefers-reduced-motion:reduce){
  body.abx .dsr-op::before,body.abx .dsr-op::after,body.abx .dsr-opn{transition:none}
  body.abx .dsr-op:hover .photo img{transform:none}
}
html.a11y-no-motion body.abx .dsr-op::before,
html.a11y-no-motion body.abx .dsr-op::after,
html.a11y-no-motion body.abx .dsr-opn{transition:none}
html.a11y-no-motion body.abx .dsr-op:hover .photo img{transform:none}
/* 900, the page's one ledger breakpoint — same collapse as .dsr-val. Every
   grid-column is reset: a leftover 8/13 against 2 declared tracks mints
   implicit columns and overflows the row. */
@media(max-width:900px){
  body.abx .dsr-op{grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:12px}
  body.abx .dsr-opn{grid-column:auto;font-size:30px;-webkit-text-stroke-width:1.2px}
  body.abx .dsr-opid{grid-column:2/-1}
  body.abx .dsr-op .photo{width:64px}
  body.abx .dsr-op h4{font-size:18px;margin-bottom:6px}
  body.abx .dsr-opm{grid-column:2/-1;max-width:62ch}
}

/* ————— act 03: the awards, as plaques —————————————————————————————————————
   v2 (owner call 2026-09-03): not another horizontal ledger — three plaques, the
   year at display scale, the tier as a chip, the verify link still the only way the
   claim is made (it reaches the awarding body's own archive). */
body.abx .dsr-aw{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
}
body.abx .dsr-awc{
  background:var(--p-0);border:1px solid var(--rule);border-radius:2px;
  padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;
  align-items:flex-start;gap:0;
}
body.abx .dsr-awy{
  font-family:var(--display);font-weight:800;
  font-size:clamp(40px,4.2vw,60px);line-height:.95;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;
  transition:color .3s var(--e);
}
@media(hover:hover) and (pointer:fine){body.abx .dsr-awc:hover .dsr-awy{color:var(--ab-red-ink)}}
body.abx .dsr-awt{
  display:inline-block;margin-top:14px;padding:7px 11px;
  border:1px solid var(--ab-red-ink);border-radius:2px;
  font-family:var(--mono);font-weight:500;font-size:10px;line-height:1;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ab-red-ink);
}
body.abx .dsr-awn{
  font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,22px);
  line-height:1.2;margin:16px 0 6px;color:var(--ink);
}
body.abx .dsr-awd{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--ink-2)}
body.abx .dsr-awc .dsr-awv{margin-top:auto}
@media(max-width:900px){body.abx .dsr-aw{grid-template-columns:1fr}}
/* The badge is a LINK to the awarding body's own archive, not a label. This section
   claims "Independently judged. Publicly verifiable." — a badge reading "Verified ·
   e-volution archive" that does not reach the archive makes a checkable claim
   uncheckable while still looking checkable, which is worse than omitting it. */
body.abx .dsr-awv{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  border:1px solid var(--rule);border-radius:2px;padding:7px 11px;
  text-decoration:none;transition:color .25s var(--e),border-color .25s var(--e);
}
body.abx .dsr-awv svg{width:11px;height:11px;flex:none;color:var(--ab-red-ink)}
@media(hover:hover) and (pointer:fine){
  body.abx .dsr-awv:hover{color:var(--ink);border-color:var(--ink)}
}
body.abx .dsr-awv:focus-visible{outline:2px solid var(--ab-red-ink);outline-offset:3px}

/* ————— act 03: on the record ——————————————————————————————————————————————
   v2 (owner call 2026-09-03: "raw information, unreadable"). The registry CODES lead
   as three mono plates — they are the checkable artifacts, and they stay selectable
   text. Entity facts follow as a calm definition ledger, confirmations as chips. */
body.abx .dsr-codes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
body.abx .dsr-code{background:var(--p-50);padding:clamp(18px,2.2vw,28px) clamp(14px,1.6vw,24px)}
@media(hover:hover) and (pointer:fine){body.abx .dsr-code:hover{background:var(--p-0)}}
body.abx .dsr-code-k{
  display:block;font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1.4;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;
}
body.abx .dsr-code-v{
  display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(15px,1.5vw,20px);line-height:1.2;letter-spacing:.02em;
  color:var(--ink);word-break:break-all;user-select:all;
}
body.abx .dsr-code-s{
  display:block;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--ink-3);
}
body.abx .dsr-rec{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);align-items:start;
}
body.abx .dsr-recl{grid-column:1/8;min-width:0}
body.abx .dsr-recr{grid-column:8/13}
body.abx .dsr-facts{margin:0}
body.abx .dsr-facts>div{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:16px;
  padding:12px 0;border-bottom:1px solid var(--rule);
}
body.abx .dsr-facts dt{
  font-family:var(--mono);font-weight:500;font-size:11px;line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
body.abx .dsr-facts dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
body.abx .dsr-conf{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
body.abx .dsr-conf li{
  border:1px solid var(--rule);border-radius:2px;padding:10px 12px 10px 30px;
  position:relative;font-size:12.5px;line-height:1.4;color:var(--ink-2);
  background:var(--p-0);
}
body.abx .dsr-conf li b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
body.abx .dsr-conf li::before{
  content:"\2713";position:absolute;left:11px;top:10px;
  color:var(--ab-red-ink);font-size:12px;
}
@media(max-width:900px){
  body.abx .dsr-codes{grid-template-columns:1fr}
  body.abx .dsr-recl,body.abx .dsr-recr{grid-column:1/-1}
  body.abx .dsr-recr{margin-top:10px}
}
@media(max-width:460px){body.abx .dsr-conf{grid-template-columns:1fr}}

/* ————— act 03: where to next ——————————————————————————————————————————————— */
body.abx .dsr-next{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
body.abx .dsr-nextc{
  background:var(--p-50);padding:clamp(20px,2.4vw,32px);
  display:block;text-decoration:none;color:inherit;position:relative;
  transition:background .25s var(--e);
}
@media(hover:hover) and (pointer:fine){body.abx .dsr-nextc:hover{background:var(--p-100)}}
/* the house conic-sweep outline (@property --sweep is registered in tpl.css): these three
   are the page's only card-shaped links, so they are the one surface that earns the ring */
body.abx .dsr-nextc::after{
  content:"";position:absolute;inset:-1px;padding:1px;pointer-events:none;--sweep:0deg;
  background:conic-gradient(from 135deg,transparent 0 calc(180deg - var(--sweep)),var(--ab-red) calc(180deg - var(--sweep)) calc(180deg + var(--sweep)),transparent calc(180deg + var(--sweep)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:--sweep 280ms cubic-bezier(.2,0,0,1);
}
@media(hover:hover) and (pointer:fine){body.abx .dsr-nextc:hover::after{--sweep:180deg}}
body.abx .dsr-nextc:focus-visible::after{--sweep:180deg}
@media(prefers-reduced-motion:reduce){body.abx .dsr-nextc::after{transition:none}}
html.a11y-no-motion body.abx .dsr-nextc::after{transition:none}
body.abx .dsr-nextc h4{
  font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,22px);
  line-height:1.18;margin:10px 0 8px;color:var(--ink);
}
body.abx .dsr-nextc p{margin:0;font-size:14.5px;line-height:1.55}
/* the card's own CTA line, restored after the copy diff found it cut. The card is
   the link, so this is a visual affordance, not a nested anchor. */
body.abx .dsr-nextgo{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-family:var(--mono);font-weight:500;font-size:10.5px;line-height:1;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ab-red-ink);
}
body.abx .dsr-nextgo svg{width:14px;height:14px;flex:none;transition:transform .3s var(--e)}
@media(hover:hover) and (pointer:fine){
  body.abx .dsr-nextc:hover .dsr-nextgo svg{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){body.abx .dsr-nextgo svg{transition:none}}
html.a11y-no-motion body.abx .dsr-nextgo svg{transition:none}
@media(max-width:900px){body.abx .dsr-next{grid-template-columns:1fr}}

/* ————— reveal ————————————————————————————————————————————————————————
   One shared entrance, keyed off the site's own .reveal observer. Rows stagger
   by their index so a ledger arrives as a ledger rather than all at once. */
/* The entrance and any hover feedback have to live in ONE transition declaration: it is a
   single property, so a later `transition` on the same element replaces an earlier one whole —
   an element carrying .r-up that also transitions its background must have both listed here. */
body.abx .r-up{opacity:0;transform:translateY(16px);
  transition:opacity 600ms var(--e),transform 600ms var(--e),background-color 280ms var(--e);
  transition-delay:calc(var(--i,0) * 45ms)}
/* the entrance delay must not also delay the hover, so once revealed the delay is dropped */
body.abx .r-up.is-visible,body.abx .reveal.is-visible .r-up{transition-delay:0s}
body.abx .reveal.is-visible .r-up,body.abx .r-up.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body.abx .r-up{opacity:1;transform:none;transition:none}
}
html.a11y-no-motion body.abx .r-up{opacity:1;transform:none;transition:none}
@media(scripting:none){
  body.abx .r-up{opacity:1;transform:none}
}

/* ————— textured grounds — the page's two paper-texture beats (ground rhythm, 2026-09) ————
   Paper is the default; texture is punctuation, not wallpaper. Exactly two textured beats:
   act 1's centrepiece (vision & mission) on contact #write's bg-grain recipe below, and the
   group map on .band-noise — the same ground branches.html gives the same subject, applied
   AS A CLASS IN THE MARKUP with no rule here at all (tpl.css ~3187 + its dark twin; it
   carries no padding, .dsr-sec keeps the section's own). The dark floor, the arithmetic
   room and the hero's own grain are the page's tonal rhythm and stay untouched; act 3
   stays bare paper on purpose — receipts read on plain stock. Naked-text ledgers
   (principles, values, the route) never take texture: dense data sits on opaque plates
   ATOP a texture, never directly on it (the #models lesson, tpl.css ~5731). */

/* the contact #write recipe, abx-scoped: paper-token base, image multiplied in at 25% so
   it warms into the page's own paper; dark theme flips multiply→soft-light because
   multiply crushes on dark paper. isolation:isolate scopes the z-index:-1 layer and the
   blend; painting order puts the pseudo above the section's own --p-50 ground and below
   all content. The .dsr-vmc cards stay opaque --p-0 and float on it — no frost. */
body.abx .dsr-grain{position:relative;isolation:isolate;overflow:hidden;background:var(--p-50)}
body.abx .dsr-grain::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url(https://img.tpl.one/websites/tplgr/v2/assets/images/backgrounds/bg-grain.webp) center/cover no-repeat;
  mix-blend-mode:multiply;opacity:.25;
}
html[data-theme="dark"] body.abx .dsr-grain::before{mix-blend-mode:soft-light}