/* site.css — built by build-site.py. Do not edit.
   1. _site.css          identity lane, sections 01-08 (owns the tokens)
   2. _site-surfaces.css surfaces lane, sections 09-15 (additive, :where() fallbacks)
   Order matters: the surfaces lane assumes the identity lane already applied. */

/* ============================================================================
   QARBOTECH — brand system page · shared stylesheet
   Built in DIRECTION 1 · FIELD INSTRUMENT, because the page is the argument:
   achromatic, hairlines not cards, mono for every number, one solid ink band,
   zero corner radius, and nothing that a one-colour print would lose.

   No webfonts, no CDN, no build step. System stacks approximate the named
   faces — see the note in section 04. Banned outright and absent here:
   Inter · Space Grotesk · purple-to-blue gradients · three equal cards in a
   row · emoji section markers · 100vh (dvh only) · any corner radius.
   ============================================================================ */

/* ---- 1 · TOKENS ---------------------------------------------------------- */

:root{
  /* Direction 1 spine — the values are MEASURED/DESIGNED per DESIGN-DIRECTION §1.2 */
  --ink:#000000;
  --graphite:#454545;
  --axis:#767676;
  --rule:#C9C9C9;
  --wash:#F2F2F2;
  --paper:#FFFFFF;
  --plate:#FFFFFF;          /* instrument-plate matte — never card, never hatch */
  --band:#000000;

  /* Direction-specific tokens, used only inside their own specimen blocks */
  --card-d2:#D8D8D8;
  --soil-d2:#7C5A41;
  --field-d3:#000000;
  --mist-d3:#B4B4B4;
  --dim-d3:#8A8A8A;
  --bar-d3:#5A5A5A;

  --sans:"IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
         "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
         Consolas, "Liberation Mono", monospace;
  --cond:"IBM Plex Sans Condensed", "Avenir Next Condensed",
         "Helvetica Neue Condensed", "Roboto Condensed", var(--sans);
  --cjk:"PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
        "Source Han Sans SC", "Microsoft YaHei", var(--sans);
  --serif:"Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia,
          "Times New Roman", serif;

  --maxw:1180px;
  --gut:44px;
  color-scheme:light dark;
}

/* Dark is the same document, inverted. Every token keeps its ROLE. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#FFFFFF;
    --graphite:#B4B4B4;
    --axis:#8A8A8A;
    --rule:#333333;
    --wash:#151515;
    --paper:#0B0B0B;
    --plate:#FFFFFF;
    --band:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --ink:#FFFFFF;
  --graphite:#B4B4B4;
  --axis:#8A8A8A;
  --rule:#333333;
  --wash:#151515;
  --paper:#0B0B0B;
  --plate:#FFFFFF;
  --band:#FFFFFF;
}
:root[data-theme="light"]{
  --ink:#000000; --graphite:#454545; --axis:#767676;
  --rule:#C9C9C9; --wash:#F2F2F2; --paper:#FFFFFF; --plate:#FFFFFF; --band:#000000;
}

/* ---- 2 · BASE ------------------------------------------------------------ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums lining-nums;
  overflow-x:hidden;
}
:root[data-lang="zh"] body{font-family:var(--cjk);line-height:1.8}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-bottom-color:var(--ink);transition:border-color 80ms linear}
hr{border:0;border-top:1px solid var(--rule);margin:34px 0}
code,kbd{font-family:var(--mono);font-size:.86em;background:var(--wash);padding:1px 5px;color:var(--ink)}
pre{font-family:var(--mono);font-size:12px;line-height:1.7;background:var(--wash);
    padding:14px 16px;overflow-x:auto;margin:12px 0;border-left:1px solid var(--rule);color:var(--ink)}
pre code{background:none;padding:0;font-size:inherit}
::selection{background:var(--ink);color:var(--paper)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:200}

.doc{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 120px}

/* ---- 3 · LANGUAGE — three separate views, nothing interleaved ------------ */
/* Every translated node carries .lx plus .en | .bm | .zh. Only the active
   language renders. Numbers live OUTSIDE the .lx spans, which is how the
   "the number never changes between languages" rule is enforced structurally
   rather than by proof-reading. */

:root[data-lang="en"] .lx:not(.en),
:root[data-lang="bm"] .lx:not(.bm),
:root[data-lang="zh"] .lx:not(.zh){display:none !important}
:root:not([data-lang]) .lx:not(.en){display:none !important}

/* ---- 4 · MASTHEAD BAND + STICKY NUMBERED NAV ----------------------------- */

.band{height:23px;background:var(--band);width:100%}     /* 6 mm at 96 dpi */

.top{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.topin{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:stretch;gap:0;
}
.topmark{
  display:flex;align-items:center;gap:10px;padding:9px 18px 9px 0;
  border-right:1px solid var(--rule);flex:0 0 auto;
}
.topmark img{height:15px;width:auto}
:root[data-theme="dark"] .topmark img,
:root[data-theme="dark"] .markplate--rev img{filter:invert(1)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .topmark img{filter:invert(1)}
}
.topmark span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--axis);white-space:nowrap}

.snav{
  flex:1 1 auto;display:flex;align-items:center;gap:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  /* when a sibling fragment adds sections 09+ the strip overflows: fade the
     right edge so the scroll is legible without adding a control */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
.snav::-webkit-scrollbar{display:none}
.snav a{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--axis);white-space:nowrap;padding:11px 10px;border:0;border-bottom:2px solid transparent;
  transition:color 80ms linear,border-color 80ms linear;
}
.snav a b{font-weight:500;color:var(--ink);margin-right:6px}
.snav a:hover{color:var(--ink)}
.snav a[aria-current="true"]{border-bottom-color:var(--ink);color:var(--ink)}

.langsw{flex:0 0 auto;display:flex;align-items:center;border-left:1px solid var(--rule);padding-left:14px;gap:0}
.langsw button{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid transparent;color:var(--axis);cursor:pointer;
  padding:5px 9px;line-height:1;
}
.langsw button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.langsw button:hover{color:var(--ink)}
.langsw button[aria-pressed="true"]:hover{color:var(--paper)}
.themesw{flex:0 0 auto;display:flex;align-items:center;padding-left:10px}
.themesw button{font-family:var(--mono);font-size:10px;letter-spacing:.1em;background:none;
  border:1px solid var(--rule);color:var(--axis);cursor:pointer;padding:5px 9px;line-height:1;text-transform:uppercase}
.themesw button:hover{color:var(--ink);border-color:var(--ink)}

/* ---- 5 · COVER ----------------------------------------------------------- */

.cover{padding:72px 0 52px;border-bottom:2px solid var(--ink)}
.markplate{
  display:inline-block;background:#FFFFFF;border:1px solid var(--rule);
  padding:16px 26px;margin-bottom:30px;
}
.markplate img{height:30px;width:auto}
.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--graphite);display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ink);flex:0 0 auto}
h1{
  font-family:var(--sans);font-weight:600;font-size:clamp(38px,6.4vw,80px);
  line-height:1.0;letter-spacing:-.028em;margin:0 0 22px;color:var(--ink);text-wrap:balance;
  max-width:17ch;
}
:root[data-lang="zh"] h1{font-family:var(--cjk);letter-spacing:.01em;line-height:1.12;max-width:14ch}
.lede{font-size:17px;color:var(--graphite);max-width:64ch;margin:0 0 10px}
.coverfoot{
  margin-top:38px;padding-top:16px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:6px 30px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--axis);
}

/* ---- 6 · SECTIONS -------------------------------------------------------- */

.sec{padding:62px 0 58px;border-bottom:1px solid var(--rule);scroll-margin-top:56px}
.sh{display:flex;align-items:baseline;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.sh .n{font-family:var(--mono);font-size:12px;color:var(--axis);letter-spacing:.14em;flex:0 0 auto}
.sh h2{
  font-family:var(--sans);font-weight:600;font-size:clamp(25px,3.5vw,42px);
  letter-spacing:-.022em;margin:0;color:var(--ink);line-height:1.05;
}
:root[data-lang="zh"] .sh h2{font-family:var(--cjk);letter-spacing:0}
h3{font-size:15.5px;font-weight:600;margin:32px 0 9px;letter-spacing:-.006em}
h4{font-size:13.5px;font-weight:600;margin:0 0 6px;letter-spacing:-.004em}
p{margin:0 0 12px;max-width:74ch}
.big{
  font-family:var(--sans);font-weight:500;font-size:clamp(20px,2.4vw,29px);
  line-height:1.26;letter-spacing:-.016em;color:var(--ink);max-width:27ch;margin:0 0 16px;
}
:root[data-lang="zh"] .big{font-family:var(--cjk);letter-spacing:0;line-height:1.5}
.cap{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--axis);line-height:1.8;max-width:82ch}
.src{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--axis)}
ul,ol{margin:6px 0 12px;padding-left:19px;max-width:74ch}
li{margin-bottom:6px;font-size:14.5px}
strong,b{font-weight:600}
em{font-style:italic}
.m{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- 7 · LAYOUT PRIMITIVES ---------------------------------------------- */
/* Asymmetric only. There is deliberately no three-equal-column primitive. */

.two{display:grid;grid-template-columns:1.16fr .84fr;gap:30px;align-items:start;margin:20px 0}
.two--rev{grid-template-columns:.84fr 1.16fr}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin:18px 0}
.wide{display:grid;grid-template-columns:1.4fr 1fr .78fr;gap:22px;align-items:start;margin:18px 0}
.card{border:1px solid var(--rule);background:var(--paper);padding:19px 21px}
.card p,.card li{font-size:13.5px;color:var(--graphite)}
.card h4{color:var(--ink)}
.card--wash{background:var(--wash)}

.note{border-left:2px solid var(--ink);background:var(--wash);padding:14px 18px;margin:18px 0;max-width:86ch}
.note b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.note p{font-size:13.5px;margin:0 0 8px;max-width:none;color:var(--graphite)}
.note p:last-child{margin-bottom:0}
.note--stop{border-left-width:4px}
.note--warn{border-left-style:dashed;border-left-width:3px}

/* the hairline row-set — replaces the banned card row */
.rows{border-top:1px solid var(--ink);margin:20px 0}
.rows>.row{
  display:grid;grid-template-columns:64px 1fr;gap:0 22px;
  padding:24px 0;border-bottom:1px solid var(--rule);align-items:start;
}
.rows>.row .rn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--axis);padding-top:5px}

/* ---- 8 · TABLES ---------------------------------------------------------- */

.tw{overflow-x:auto;margin:14px 0;border-bottom:1px solid var(--rule)}
table{width:100%;border-collapse:collapse;font-size:13.2px;min-width:520px}
th{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--axis);font-weight:500;text-align:left;border-bottom:1px solid var(--ink);
  padding:0 14px 8px 0;vertical-align:bottom;
}
td{padding:9px 14px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--graphite)}
td:first-child{color:var(--ink)}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.k{font-family:var(--mono);color:var(--ink);white-space:nowrap}
tr.tot td{border-bottom:1px solid var(--ink)}
.ok{color:var(--ink);font-weight:600}
.no{color:var(--ink);font-weight:600;text-decoration:line-through;text-decoration-thickness:1px}
.chip{display:inline-block;width:13px;height:13px;border:1px solid var(--rule);
  vertical-align:-2px;margin-right:8px}

/* ---- 9 · PALETTE + PROPORTION ------------------------------------------- */

.prop{display:flex;height:46px;margin:14px 0 4px;border:1px solid var(--rule)}
.prop div{display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;overflow:hidden;white-space:nowrap;
  min-width:0;padding:0 3px}
.propkey{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--axis);margin:0 0 18px}

.thresh{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--rule);margin:14px 0 4px}
.thresh>div{border-right:1px solid var(--rule)}
.thresh>div:last-child{border-right:0}
.thresh .sw{height:46px}
.thresh .tv{height:46px;border-top:1px solid var(--rule)}
.thresh .tl{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--axis);
  padding:7px 8px;line-height:1.5;border-top:1px solid var(--rule);text-align:center}
.deadband{border:1px solid var(--ink);padding:10px 14px;margin:12px 0;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.05em;color:var(--ink)}

/* ---- 10 · TYPE SPECIMENS ------------------------------------------------- */

.ladder{border-top:1px solid var(--ink);margin:18px 0}
.ladder>div{display:grid;grid-template-columns:196px 1fr;gap:26px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.ladder .spec{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--axis);line-height:1.9}
.sp-h1{font-family:var(--sans);font-weight:600;font-size:clamp(28px,4vw,48px);line-height:1.02;
  letter-spacing:-.028em;color:var(--ink)}
.sp-h2{font-family:var(--sans);font-weight:500;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.018em;color:var(--ink)}
.sp-b{font-size:15.5px;color:var(--graphite);max-width:60ch}
.sp-m{font-family:var(--mono);font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.sp-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)}
.sp-c{font-family:var(--cond);font-weight:600;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.006em;color:var(--ink)}

/* the trilingual expansion specimen — all three visible AT ONCE, by design:
   this block is the content, not the page copy, so it is not .lx */
.tri{border-top:1px solid var(--ink);margin:18px 0}
.tri>div{display:grid;grid-template-columns:120px 1fr 92px;gap:22px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.tri .lg{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--axis)}
.tri .ln{font-family:var(--mono);font-size:10px;color:var(--axis);text-align:right;font-variant-numeric:tabular-nums}
.tri .en-set{font-family:var(--sans);font-weight:600;font-size:clamp(21px,3vw,34px);
  line-height:1.06;letter-spacing:-.024em;color:var(--ink)}
.tri .bm-set{font-family:var(--cond);font-weight:600;font-size:clamp(21px,3vw,34px);
  line-height:1.06;letter-spacing:-.012em;color:var(--ink)}
.tri .zh-set{font-family:var(--cjk);font-weight:600;font-size:clamp(21px,3vw,34px);
  line-height:1.34;letter-spacing:.012em;color:var(--ink)}

/* ---- 11 · FIGURES + THE GRADING TIERS ------------------------------------ */
/* The shared plate: a figure that can carry a black floor and a white cap.
   isolation:isolate keeps the blend modes from leaking into the page. */

.fig{position:relative;isolation:isolate;display:block;margin:0;background:var(--wash)}
.fig img{display:block;width:100%;height:auto}
.fig::before,.fig::after{content:"";position:absolute;inset:0;pointer-events:none}
.fig::before{background:#141414;mix-blend-mode:lighten}   /* black floor  ≈ output black 20/255 */
.fig::after{background:#F0F0F0;mix-blend-mode:darken}     /* highlight cap ≈ 94 %                */

/* the ungraded control in a before/after pair: no filter AND no floor/cap,
   otherwise the 'as supplied' half is already half-graded and the comparison lies */
.fig--raw::before,.fig--raw::after{content:none}
.fig--raw img{filter:none}

.fig--a img{filter:saturate(.82) contrast(1.04) brightness(1.02)}
.fig--b img{filter:grayscale(.55) contrast(1.08) brightness(1.01)}
.fig--c img{filter:grayscale(1) contrast(1.14) brightness(1.03)}
.fig--c{outline:1px solid var(--rule);outline-offset:0}

/* Direction 2 · everything becomes a plate */
.pl{position:relative;display:block;margin:0;padding:12px;background:var(--card-d2);
    outline:1px solid #000;outline-offset:0}
.pl img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.pl--1 img{filter:saturate(.95) contrast(1.02)}
.pl--2 img{filter:saturate(.78) contrast(1.06) brightness(1.02)}
.pl--3 img{filter:grayscale(1) contrast(1.08)}
.pl--3{padding:16px;background-image:repeating-linear-gradient(45deg,#454545 0 1px,transparent 1px 5px)}

/* Direction 3 · two worlds, kept apart */
.d3{position:relative;display:block;margin:0;background:#000}
.d3 img{display:block;width:100%}
.d3--dark img{filter:brightness(1) contrast(1) saturate(1)}   /* declared identity — no grading */
.d3--day img{filter:saturate(.80) contrast(1.05) brightness(1.02)}
.d3--day::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11%;background:#000}
.d3--x img{filter:grayscale(1) contrast(1.12) brightness(1.04)}

/* INSTRUMENT PLATE (tier Ø) — enforced by class, never by trusting the author.
   A CSS filter is still a falsification: it leaves the file untouched and
   changes what the reader sees. */
.plate{position:relative;display:block;margin:0;padding:12px;background:var(--plate);
       outline:1px solid var(--ink);background-image:none !important}
.plate img{display:block;width:100%;filter:none !important}
.plate::before,.plate::after{content:none !important}

figure{margin:0}
figcaption{margin-top:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  line-height:1.75;color:var(--axis)}
figcaption b{display:block;color:var(--ink);font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
figcaption code{background:none;padding:0;color:var(--graphite);font-size:9.5px}
.figno{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink);
  font-weight:500;margin-bottom:7px;display:block}   /* FIG. n — OUTSIDE the frame */

/* the before/after pair — the grading has to be visible, not described */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ba>div{position:relative;background:var(--paper)}
.ba .tag{position:absolute;left:0;bottom:0;z-index:3;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;background:#000;color:#fff;padding:3px 7px}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:20px 0}
.tier{border-top:1px solid var(--ink);padding-top:14px}
.tier .th{display:flex;align-items:baseline;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.tier .th .tk{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink)}
.tier .th h4{margin:0}
.tier .for{font-family:var(--mono);font-size:9.5px;color:var(--axis);line-height:1.7;margin:0 0 12px;max-width:none}
.tier p{font-size:13px;color:var(--graphite)}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:16px 0}

/* the image foot band — INSTRUMENT · PLACE · DATE · OPERATOR */
.stamp{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;line-height:1.5;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.stamp::-webkit-scrollbar{display:none}

/* ---- 12 · MARK PLATES + CLEAR SPACE ------------------------------------- */

.markbox{border:1px solid var(--rule);padding:34px;background:#FFFFFF;display:flex;
  flex-direction:column;justify-content:space-between;min-height:206px}
.markbox--rev{background:#000;border-color:#333}
.markbox--rev .lbl,.markbox--rev .cap{color:#8A8A8A}
.markbox--rev img{filter:invert(1)}
.markbox .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--axis);margin-bottom:22px}
.markbox img{width:auto;max-width:100%}
.markbox .cap{margin-top:20px;color:var(--axis)}

.clearspace{position:relative;border:1px solid var(--rule);background:#fff;padding:0;overflow:hidden}
.clearspace .zone{position:relative;margin:29px;outline:1px dashed #767676;outline-offset:0}
.clearspace .zone img{width:100%;height:auto;display:block}
.clearspace .cmark{position:absolute;font-family:var(--mono);font-size:9px;color:#767676;letter-spacing:.1em}
.clearspace .cmark--t{top:9px;left:50%;transform:translateX(-50%)}
.clearspace .cmark--l{left:6px;top:50%;transform:translateY(-50%)}

.sizes{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;border:1px solid var(--rule);
  background:#fff;padding:26px 24px;margin:14px 0}
.sizes figure{text-align:left}
.sizes img{width:auto}
.sizes figcaption{color:#767676}

/* institutional adjacency — the mark beside marks it does not control */
.adjacency{display:flex;align-items:center;gap:30px;flex-wrap:wrap;border:1px solid var(--rule);
  background:#fff;padding:30px 28px}
.adjacency .lock{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.adjacency img{height:26px;width:auto}
.crest{width:60px;height:60px;flex:0 0 auto}
.crest+span,.crestlbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:#767676;
  display:block;margin-top:7px;max-width:96px;line-height:1.5}
.adjacency .div{width:1px;align-self:stretch;background:#C9C9C9}

/* ---- 13 · NOTATION SPECIMENS -------------------------------------------- */

.clause{display:grid;grid-template-columns:76px 1fr;gap:18px;padding:11px 0;border-bottom:1px solid var(--rule)}
.clause .cn{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink)}
.clause .ct{font-size:13.5px;color:var(--graphite)}
.absence{display:grid;grid-template-columns:118px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule);align-items:start}
.absence .mk{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink);
  border:1px solid var(--ink);padding:6px 10px;text-align:center;line-height:1.2}
.tag-ev{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite);border:1px solid var(--rule);padding:2px 6px;display:inline-block;margin-right:6px}
.docfoot{border-top:1px solid var(--ink);margin-top:16px;padding-top:9px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--axis)}
.scalebar{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink)}
.scalebar i{display:inline-block;width:64px;height:7px;border-left:1px solid var(--ink);
  border-right:1px solid var(--ink);border-top:0;border-bottom:0;position:relative}
.scalebar i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink)}
.ph{display:inline-block;border:1px dashed var(--axis);color:var(--axis);font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;padding:5px 10px;background:var(--wash)}

/* ---- 14 · GRID + EVIDENCE MARGIN DIAGRAM -------------------------------- */

.page-diagram{border:1px solid var(--rule);background:var(--wash);padding:20px;margin:14px 0}
.page-diagram .sheet{background:#fff;border:1px solid var(--rule);display:grid;
  grid-template-columns:20fr 34fr 6fr 130fr 20fr;min-height:280px}
.page-diagram .sheet>div{border-right:1px dashed var(--rule);position:relative;padding:12px 8px}
.page-diagram .sheet>div:last-child{border-right:0}
.page-diagram .mm{position:absolute;top:6px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:8.5px;color:var(--axis)}
.page-diagram .zone-l{background:var(--wash)}
.page-diagram .body-lines i{display:block;height:1px;background:var(--rule);margin:0 0 10.5px}
.page-diagram .ev{font-family:var(--mono);font-size:8.5px;line-height:1.9;color:var(--graphite);
  padding-top:36px}
.motion{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:16px 0}
.motion ul{margin-top:6px}
.motion li{font-size:13.5px;color:var(--graphite)}

/* ---- 15 · DEVICE FRAME (tall full-page shots) --------------------------- */

.device{border:1px solid var(--ink);background:var(--wash);padding:0;overflow:hidden}
.device .bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--ink);
  background:var(--paper);font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--axis)}
.device .bar i{width:7px;height:7px;border:1px solid var(--axis);flex:0 0 auto}
.device .vp{max-height:74dvh;overflow-y:auto;overflow-x:hidden;background:#fff;-webkit-overflow-scrolling:touch}
.device .vp img{width:100%;display:block}
.device .ft{padding:7px 12px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:9px;
  letter-spacing:.08em;color:var(--axis);background:var(--paper)}

/* ---- 16 · MOODBOARD ------------------------------------------------------ */

.fam{border-top:1px solid var(--ink);padding:26px 0 30px}
.famhead{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start;margin-bottom:18px}
.famhead .fn{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--axis);margin-bottom:7px}
.famhead h3{margin:0 0 8px;font-size:19px;letter-spacing:-.014em}
.famhead p{font-size:13.5px;color:var(--graphite);margin:0}
.ar{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ar>div{background:var(--paper);padding:12px 14px}
.ar .k{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.ar p{font-size:12.5px;margin:0;color:var(--graphite);max-width:none}
.ar-r{border-left:3px solid var(--ink);margin-left:-1px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px;margin-top:6px}
.mgrid figure{margin:0}
.mgrid .fr{border:1px solid var(--rule);background:var(--wash);overflow:hidden;aspect-ratio:4/3}
.mgrid .fr img{width:100%;height:100%;object-fit:cover}
.mgrid figcaption{font-size:10px;line-height:1.6;color:var(--graphite);font-family:var(--sans);
  letter-spacing:0;margin-top:7px}
.mgrid figcaption span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;
  color:var(--axis);margin-top:3px;text-transform:uppercase}
.cutline{border-top:1px dotted var(--rule);margin-top:20px;padding-top:11px;font-size:12.5px;
  color:var(--axis);max-width:86ch}
.cutline .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-right:9px}

/* ---- 17 · FOOTER --------------------------------------------------------- */

.fin{border-top:2px solid var(--ink);margin-top:10px;padding:26px 0 0;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--axis);line-height:2}

/* ---- 18 · MOTION — four things only, per DESIGN-DIRECTION §1.6 ---------- */

@media (prefers-reduced-motion: no-preference){
  .sec{animation:none}
  .snav a,.langsw button,a{transition-duration:80ms}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---- 19 · RESPONSIVE ----------------------------------------------------- */

@media (max-width:1000px){
  :root{--gut:28px}
  .wide{grid-template-columns:1fr 1fr;}
  .wide>*:last-child{grid-column:1/-1}
}
@media (max-width:820px){
  body{font-size:15px}
  .two,.two--rev,.split,.tiers,.motion,.famhead,.trio{grid-template-columns:1fr}
  .wide{grid-template-columns:1fr}
  .ladder>div,.tri>div{grid-template-columns:1fr;gap:10px}
  .tri .ln{text-align:left}
  .rows>.row{grid-template-columns:1fr;gap:10px}
  .thresh{grid-template-columns:repeat(3,1fr)}
  .thresh>div:nth-child(3){border-right:0}
  .page-diagram .sheet{min-height:180px}
  .topmark span{display:none}
  .device .vp{max-height:62dvh}
}
@media (max-width:560px){
  :root{--gut:18px}
  h1{font-size:clamp(30px,9vw,44px)}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .ba{grid-template-columns:1fr}
  .adjacency{gap:20px}
  .adjacency .div{display:none}
}

/* ---- 20 · PRINT — the one-colour reduction, live ------------------------ */

@media print{
  :root{--paper:#fff;--ink:#000;--graphite:#454545;--axis:#767676;--rule:#C9C9C9;--wash:#F2F2F2}
  .top,.langsw,.themesw,.device .bar,.device .ft{display:none}
  .sec{page-break-inside:auto;border-bottom:1px solid #C9C9C9}
  .card,.note,figure,.tier{page-break-inside:avoid}
  .device .vp{max-height:none;overflow:visible}
  a{border-bottom:0}
}


/* ===================== surfaces lane starts here ===================== */

/* ============================================================================
   _site-surfaces.css — sections 09–15 (surfaces lane)
   Additive only. The identity lane owns _site.css; nothing here may fight it.

   Two rules keep the lanes apart:
     1. Every component class is prefixed  .qb-…  so no name can collide.
     2. Fallbacks for the SHARED conventions (.sec .sh .n .lede .card .note
        .cap .two .tw) are written with :where() — zero specificity — so any
        rule in _site.css beats them automatically. They exist only so this
        fragment is legible if it is opened before the identity CSS lands.

   Direction 1 — FIELD INSTRUMENT. Achromatic by policy: colour on a Field
   Instrument surface is only ever a measurement. There is no accent here.
   Corner radius 0 everywhere except a drawing of somebody else's hardware.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* Inherit the identity lane's tokens when _site.css is present; fall back to
     the canon literals (DESIGN-DIRECTION §1.2) when this fragment is opened
     standalone. Namespaced so the two stylesheets can never collide. */
  --qbs-paper:var(--paper,#FFFFFF);
  --qbs-ink:var(--ink,#000000);
  --qbs-graphite:var(--graphite,#454545);
  --qbs-axis:var(--axis,#767676);
  --qbs-rule:var(--rule,#C9C9C9);
  --qbs-wash:var(--wash,#F2F2F2);
  --qbs-band:var(--ink,#000000);
  --qbs-onband:var(--paper,#FFFFFF);

  --qbs-sans:var(--sans,"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Helvetica,Arial,"Noto Sans",sans-serif);
  --qbs-mono:var(--mono,"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace);
  --qbs-cond:var(--cond,"IBM Plex Sans Condensed","Avenir Next Condensed","Helvetica Neue Condensed","Roboto Condensed",ui-sans-serif,system-ui,sans-serif);
  --qbs-cjk:var(--cjk,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","Heiti SC",sans-serif);
}
@media (prefers-color-scheme: dark){
  :root{
    --qbs-paper:var(--paper,#0A0A0A);
    --qbs-ink:var(--ink,#F4F4F4);
    --qbs-graphite:var(--graphite,#B4B4B4);
    --qbs-axis:var(--axis,#8C8C8C);
    --qbs-rule:var(--rule,#3A3A3A);
    --qbs-wash:var(--wash,#171717);
    --qbs-band:var(--ink,#F4F4F4);
    --qbs-onband:var(--paper,#0A0A0A);
  }
}
:root[data-theme="dark"]{
  --qbs-paper:var(--paper,#0A0A0A);
  --qbs-ink:var(--ink,#F4F4F4);
  --qbs-graphite:var(--graphite,#B4B4B4);
  --qbs-axis:var(--axis,#8C8C8C);
  --qbs-rule:var(--rule,#3A3A3A);
  --qbs-wash:var(--wash,#171717);
  --qbs-band:var(--ink,#F4F4F4);
  --qbs-onband:var(--paper,#0A0A0A);
}
:root[data-theme="light"]{
  --qbs-paper:var(--paper,#FFFFFF);
  --qbs-ink:var(--ink,#000000);
  --qbs-graphite:var(--graphite,#454545);
  --qbs-axis:var(--axis,#767676);
  --qbs-rule:var(--rule,#C9C9C9);
  --qbs-wash:var(--wash,#F2F2F2);
  --qbs-band:var(--ink,#000000);
  --qbs-onband:var(--paper,#FFFFFF);
}

/* ----------------------------------------------- THREE SEPARATE LANGUAGES --
   The identity lane owns the switch, the `data-lang` root attribute and the
   `.lx .en/.bm/.zh` convention; these sections use the same classes. The rules
   below are a zero-specificity SAFETY NET so this fragment still shows exactly
   one language if it is ever opened without _site.css. Theirs always wins.   */
:where(:root[data-lang="en"]) .lx:not(.en),
:where(:root[data-lang="bm"]) .lx:not(.bm),
:where(:root[data-lang="zh"]) .lx:not(.zh){ display:none; }
:where(:root:not([data-lang])) .lx:not(.en){ display:none; }

:root[data-lang="zh"] .qb-sec{ font-family:var(--qbs-cjk); }
:root[data-lang="zh"] .qb-sec :is(.qb-mono,.qb-stamp,.qb-tag,.qb-num,code){ font-family:var(--qbs-mono); }

/* ---------------------------------------- zero-specificity shared fallback -- */
:where(.sec){ max-width:1120px; margin:0 auto; padding:64px 24px; }
:where(.sh){ display:flex; align-items:baseline; gap:16px; border-top:2px solid var(--qbs-ink); padding-top:14px; margin-bottom:22px; }
:where(.sh .n){ font-family:var(--qbs-mono); font-size:13px; letter-spacing:.1em; color:var(--qbs-axis); }
:where(.sh h2){ font-size:clamp(26px,4vw,42px); line-height:1.08; margin:0; font-weight:600; }
:where(.lede){ font-size:clamp(16px,1.5vw,19px); line-height:1.55; max-width:64ch; color:var(--qbs-ink); }
:where(.cap){ font-size:13px; line-height:1.5; color:var(--qbs-graphite); }
:where(.card){ border:1px solid var(--qbs-rule); padding:18px; background:var(--qbs-paper); }
:where(.card h4){ margin:0 0 8px; font-size:15px; font-weight:600; }
:where(.note){ border-left:1px solid var(--qbs-ink); padding:12px 0 12px 16px; margin:20px 0; }
:where(.note b){ display:block; font-family:var(--qbs-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--qbs-graphite); margin-bottom:6px; }
:where(.two){ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
:where(.tw){ overflow-x:auto; }
:where(.tw table){ border-collapse:collapse; width:100%; min-width:560px; font-size:14px; }
:where(.tw th),:where(.tw td){ border-bottom:1px solid var(--qbs-rule); padding:9px 10px; text-align:left; vertical-align:top; }
:where(.tw thead th){ border-bottom:1px solid var(--qbs-ink); font-family:var(--qbs-cond); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:820px){ :where(.two){ grid-template-columns:1fr; } }

/* ------------------------------------------------------- section chassis -- */
/* Sections paint their own ground. Without this, a viewer in dark mode gets
   near-white type on whatever ground the shell happens to be painting — which
   is exactly how this file first rendered. Self-contained in both themes. */
.qb-sec{ font-family:var(--qbs-sans); color:var(--qbs-ink); background:var(--qbs-paper); }
.qb-sec :is(h3,h4){ font-weight:600; }
.qb-sec h3{ font-size:clamp(18px,2vw,23px); line-height:1.2; margin:34px 0 12px; }
.qb-sec p{ line-height:1.6; }
.qb-sec img{ max-width:100%; height:auto; display:block; }

.qb-band{                       /* the 6 mm ink masthead band, as a page rule */
  height:8px; background:var(--qbs-band); margin:0 0 20px;
}
.qb-kicker{
  font-family:var(--qbs-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--qbs-axis); margin:0 0 8px;
}
.qb-mono,.qb-num{ font-family:var(--qbs-mono); font-variant-numeric:tabular-nums lining-nums; }
.qb-tag{
  display:inline-block; font-family:var(--qbs-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--qbs-graphite);
  border:1px solid var(--qbs-rule); padding:2px 6px; white-space:nowrap; max-width:100%;
}
/* a long evidence tag must wrap on a phone rather than push the page sideways */
@media (max-width:640px){ .qb-tag{ white-space:normal; overflow-wrap:break-word; } }
.qb-hole{                       /* marked placeholder — sized to what it holds */
  font-family:var(--qbs-mono); font-size:12.5px; color:var(--qbs-graphite);
  background:var(--qbs-wash); border:1px solid var(--qbs-rule);
  padding:9px 11px; display:block;
}
.qb-hole--inline{ display:inline-block; padding:1px 6px; font-size:12px; }
.qb-stamp{
  font-family:var(--qbs-mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--qbs-onband); background:var(--qbs-band);
  padding:7px 10px; line-height:1.4; word-break:break-word;
}
.qb-foot{                       /* the attestation block — type, never a seal */
  font-family:var(--qbs-mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--qbs-graphite); line-height:1.8;
  border-top:1px solid var(--qbs-rule); padding-top:10px; margin-top:18px;
}
.qb-caveat{ border-left:1px solid var(--qbs-ink); padding:10px 0 10px 14px; margin:16px 0; }
.qb-caveat > b{ display:block; font-family:var(--qbs-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--qbs-graphite); margin-bottom:5px; }
.qb-caveat p{ font-size:14px; margin:0 0 6px; color:var(--qbs-graphite); }

.qb-grid{ display:grid; gap:22px; align-items:start; }
.qb-grid--12{ grid-template-columns:1.35fr 1fr; }
.qb-grid--21{ grid-template-columns:1fr 1.35fr; }
.qb-grid--even{ grid-template-columns:1fr 1fr; }
@media (max-width:880px){ .qb-grid{ grid-template-columns:1fr !important; } }

/* A grid/flex child defaults to min-width:auto, so a wide table inside one
   pushes the whole column out instead of scrolling in its own container.
   This is the line that keeps the page body from ever scrolling sideways. */
.qb-grid > *, .qb-spread > *, .qb-acca > *, .qb-igcols > *,
.qb-abc > *, .qb-abc .v, .qb-margin > *, :where(.two) > *,
.qb-sec .card, .qb-sec .tw{ min-width:0; }
.qb-sec :where(.tw){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.qb-sec :where(.tw) > table{ max-width:none; }

.qb-list{ margin:0; padding-left:0; list-style:none; }
.qb-list li{ border-top:1px solid var(--qbs-rule); padding:11px 0 11px 34px; position:relative; font-size:14.5px; line-height:1.55; }
.qb-list li::before{
  content:attr(data-n); position:absolute; left:0; top:12px;
  font-family:var(--qbs-mono); font-size:11px; color:var(--qbs-axis);
}
.qb-list li:last-child{ border-bottom:1px solid var(--qbs-rule); }

/* ------------------------------------------------ scrollable device frame -- */
.qb-device{ border:1px solid var(--qbs-ink); background:var(--qbs-paper); }
.qb-device__chrome{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-bottom:1px solid var(--qbs-ink); background:var(--qbs-wash);
  font-family:var(--qbs-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--qbs-graphite);
}
.qb-device__dots{ display:flex; gap:5px; flex:0 0 auto; }
.qb-device__dots i{ width:7px; height:7px; border:1px solid var(--qbs-axis); display:block; }
.qb-device__url{ flex:1 1 auto; border:1px solid var(--qbs-rule); padding:3px 8px; background:var(--qbs-paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qb-device__scroll{
  height:clamp(340px,58dvh,660px); overflow-y:auto; overflow-x:hidden;
  background-repeat:no-repeat; background-position:top center; background-size:100% auto;
  scrollbar-width:thin;
}
.qb-device__scroll img{ width:100%; height:auto; display:block; }
.qb-device__hint{
  font-family:var(--qbs-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--qbs-graphite); border-top:1px solid var(--qbs-rule); padding:6px 10px;
}
.qb-shots{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:880px){ .qb-shots{ grid-template-columns:1fr; } }

/* ------------------------------------------------- described photo blocks -- */
.qb-ph{
  background:var(--qbs-wash); border:1px solid var(--qbs-rule);
  min-height:130px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:12px; gap:6px;
}
.qb-ph em{ font-style:normal; font-family:var(--qbs-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--qbs-axis); }
.qb-ph span{ font-size:13px; line-height:1.45; color:var(--qbs-graphite); }

/* ------------------------------------------------------------ scope plate -- */
.qb-scope{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.qb-scope th,.qb-scope td{ border-bottom:1px solid var(--qbs-rule); padding:11px 10px; vertical-align:top; text-align:left; }
.qb-scope thead th{ border-bottom:1px solid var(--qbs-ink); font-family:var(--qbs-cond); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.qb-scope .pos{ font-family:var(--qbs-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.qb-scope tr.is-blank td{ background:var(--qbs-wash); }

/* --------------------------------------------------------- funnel clauses -- */
.qb-acca{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--qbs-ink); }
.qb-acca > div{ border-left:1px solid var(--qbs-rule); padding:14px; }
.qb-acca > div:first-child{ border-left:0; }
.qb-acca b{ display:block; font-family:var(--qbs-mono); font-size:11px; letter-spacing:.13em; color:var(--qbs-axis); margin-bottom:6px; }
.qb-acca strong{ display:block; font-size:15px; margin-bottom:6px; }
.qb-acca p{ margin:0; font-size:13px; line-height:1.5; color:var(--qbs-graphite); }
@media (max-width:880px){ .qb-acca{ grid-template-columns:1fr 1fr; } .qb-acca > div:nth-child(3){ border-left:0; } }
@media (max-width:520px){ .qb-acca{ grid-template-columns:1fr; } .qb-acca > div{ border-left:0; border-top:1px solid var(--qbs-rule); } .qb-acca > div:first-child{ border-top:0; } }

.qb-abc{ border:1px solid var(--qbs-ink); }
.qb-abc > div{ display:grid; grid-template-columns:34px 1fr; border-top:1px solid var(--qbs-rule); }
.qb-abc > div:first-child{ border-top:0; }
.qb-abc .k{ font-family:var(--qbs-mono); font-size:14px; display:flex; align-items:center; justify-content:center; border-right:1px solid var(--qbs-rule); background:var(--qbs-wash); }
.qb-abc .v{ padding:11px 13px; font-size:14px; line-height:1.5; }
.qb-abc .v small{ display:block; margin-top:4px; font-family:var(--qbs-mono); font-size:11px; letter-spacing:.06em; color:var(--qbs-graphite); text-transform:uppercase; }

/* ------------------------------------------------------------- linkedin -- */
.qb-li{ border:1px solid var(--qbs-rule); background:var(--qbs-paper); }
.qb-li__head{ display:flex; gap:10px; align-items:center; padding:11px 13px; border-bottom:1px solid var(--qbs-rule); }
.qb-li__av{ width:32px; height:32px; border:1px solid var(--qbs-ink); font-family:var(--qbs-mono); font-size:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.qb-li__head b{ display:block; font-size:13.5px; }
.qb-li__head span{ font-family:var(--qbs-mono); font-size:10.5px; letter-spacing:.06em; color:var(--qbs-axis); }
.qb-li__body{ padding:13px; font-size:14px; line-height:1.6; }
.qb-li__body p{ margin:0 0 9px; }
.qb-li__fig{ border:1px solid var(--qbs-rule); padding:13px; margin:12px 0; }
.qb-li__figt{ font-family:var(--qbs-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--qbs-graphite); margin-bottom:12px; }
.qb-li__foot{ font-family:var(--qbs-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--qbs-graphite); border-top:1px solid var(--qbs-rule); padding:9px 13px; line-height:1.7; }

/* the range figure — a mean inside its range, drawn true to scale, never a counter */
.qb-range{ position:relative; height:52px; margin:6px 0 4px; }
.qb-range__axis{ position:absolute; left:0; right:0; top:26px; height:1px; background:var(--qbs-rule); }
.qb-range__span{ position:absolute; top:24px; height:5px; background:var(--qbs-wash); border:1px solid var(--qbs-axis); }
.qb-range__mean{ position:absolute; top:16px; width:2px; height:21px; background:var(--qbs-ink); }
.qb-range__cap{ position:absolute; top:19px; width:1px; height:15px; background:var(--qbs-axis); }
.qb-range__lbl{ position:absolute; top:0; font-family:var(--qbs-mono); font-size:11px; white-space:nowrap; }
.qb-range__lbl.is-right{ transform:translateX(-100%); }
.qb-scale{ display:flex; justify-content:space-between; font-family:var(--qbs-mono); font-size:10px; color:var(--qbs-axis); border-top:1px solid var(--qbs-rule); padding-top:4px; }

/* ------------------------------------------------------------ instagram -- */
.qb-igwrap{ border:1px solid var(--qbs-ink); }
.qb-igbio{ padding:13px; border-bottom:1px solid var(--qbs-ink); display:flex; gap:12px; align-items:flex-start; }
.qb-igbio__av{ width:46px; height:46px; border:1px solid var(--qbs-ink); flex:0 0 auto; font-family:var(--qbs-mono); font-size:9px; display:flex; align-items:center; justify-content:center; }
.qb-igbio__meta{ font-family:var(--qbs-mono); font-size:11px; letter-spacing:.06em; color:var(--qbs-axis); margin-bottom:4px; }
.qb-igcols{ display:grid; grid-template-columns:repeat(3,1fr); font-family:var(--qbs-cond); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--qbs-graphite); }
.qb-igcols > div{ padding:7px 9px; border-left:1px solid var(--qbs-rule); border-bottom:1px solid var(--qbs-ink); }
.qb-igcols > div:first-child{ border-left:0; }
.qb-ig{ display:grid; grid-template-columns:repeat(3,1fr); }
.qb-ig .t{
  position:relative; aspect-ratio:1/1; border-left:1px solid var(--qbs-rule); border-top:1px solid var(--qbs-rule);
  background:var(--qbs-paper); display:flex; flex-direction:column; padding:10px 10px 0; overflow:hidden;
}
.qb-ig .t:nth-child(3n+1){ border-left:0; }
.qb-ig .t:nth-child(-n+3){ border-top:0; }
.qb-ig .t em{ font-style:normal; font-family:var(--qbs-mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--qbs-axis); }
.qb-ig .t h5{ margin:6px 0 0; font-size:13px; line-height:1.28; font-weight:600; }
.qb-ig .t p{ margin:5px 0 0; font-size:11px; line-height:1.4; color:var(--qbs-graphite); }
.qb-ig .t .band{
  position:absolute; left:0; right:0; bottom:0; height:11%;
  background:var(--qbs-band); color:var(--qbs-onband);
  font-family:var(--qbs-mono); font-size:8px; letter-spacing:.09em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between; padding:0 8px;
}
.qb-ig .t.is-dark{ background:var(--qbs-ink); color:var(--qbs-paper); }
.qb-ig .t.is-dark em{ color:var(--qbs-axis); }
.qb-ig .t.is-dark p{ color:var(--qbs-rule); }
.qb-ig .t.is-dark .band{ background:var(--qbs-paper); color:var(--qbs-ink); }
.qb-ig .t .ph{
  flex:1 1 auto; margin:8px -10px 11%; background:var(--qbs-wash);
  border-top:1px solid var(--qbs-rule); border-bottom:1px solid var(--qbs-rule);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--qbs-mono); font-size:9.5px; line-height:1.45; color:var(--qbs-axis); padding:8px;
}
.qb-ig .t .fig{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; padding-bottom:11%; }
.qb-ig .t .big{ font-family:var(--qbs-mono); font-size:clamp(18px,2.4vw,28px); font-variant-numeric:tabular-nums; }
@media (max-width:520px){ .qb-ig .t h5{ font-size:11px; } .qb-ig .t p{ font-size:9.5px; } }

/* ------------------------------------------------------------- whatsapp -- */
.qb-wa{ border:1px solid var(--qbs-ink); display:flex; flex-direction:column; }
.qb-wa__head{ padding:11px 13px; border-bottom:1px solid var(--qbs-ink); }
.qb-wa__head b{ display:block; font-size:14px; }
.qb-wa__head span{ font-family:var(--qbs-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--qbs-axis); }
.qb-wa__body{ padding:13px; display:flex; flex-direction:column; gap:9px; background:var(--qbs-wash); }
.qb-wa .msg{ max-width:86%; border:1px solid var(--qbs-rule); background:var(--qbs-paper); padding:9px 11px; font-size:13px; line-height:1.5; border-radius:0; }
.qb-wa .msg.out{ align-self:flex-end; border-color:var(--qbs-ink); }
.qb-wa .msg.in{ align-self:flex-start; }
.qb-wa .msg time{ display:block; margin-top:5px; font-family:var(--qbs-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--qbs-axis); }
.qb-wa .sys{ align-self:center; font-family:var(--qbs-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--qbs-graphite); border-top:1px solid var(--qbs-rule); border-bottom:1px solid var(--qbs-rule); padding:5px 9px; }
.qb-wa__input{ border-top:1px solid var(--qbs-ink); padding:9px 13px; font-family:var(--qbs-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--qbs-axis); display:flex; justify-content:space-between; }
.qb-prefill{ border:1px solid var(--qbs-ink); padding:10px 12px; font-family:var(--qbs-mono); font-size:11.5px; line-height:1.6; }
.qb-prefill b{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--qbs-graphite); margin-bottom:4px; }

/* --------------------------------------------------------------- dossier -- */
.qb-dos{ border:1px solid var(--qbs-ink); background:var(--qbs-paper); position:relative; }
.qb-dos__band{ height:9px; background:var(--qbs-band); }
.qb-dos__edge{ position:absolute; right:0; width:5px; background:var(--qbs-band); }
.qb-dos__in{ padding:20px 26px 20px 20px; }
.qb-dos__ctl{ font-family:var(--qbs-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--qbs-graphite); }
.qb-dos h4{ font-size:clamp(17px,2.2vw,24px); line-height:1.15; margin:16px 0 4px; }
.qb-dos__toc{ list-style:none; margin:18px 0 0; padding:0; counter-reset:toc; }
.qb-dos__toc li{ display:grid; grid-template-columns:22px 1fr; gap:8px; border-top:1px solid var(--qbs-rule); padding:7px 0; font-size:13px; }
.qb-dos__toc li:last-child{ border-bottom:1px solid var(--qbs-rule); }
.qb-dos__toc li i{ font-style:normal; font-family:var(--qbs-mono); color:var(--qbs-axis); font-size:11.5px; }
.qb-spread{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--qbs-ink); }
.qb-spread > div{ padding:16px; border-left:1px solid var(--qbs-rule); }
.qb-spread > div:first-child{ border-left:0; }
@media (max-width:880px){ .qb-spread{ grid-template-columns:1fr; } .qb-spread > div{ border-left:0; border-top:1px solid var(--qbs-rule); } .qb-spread > div:first-child{ border-top:0; } }
.qb-margin{ display:grid; grid-template-columns:96px 1fr; gap:12px; border-top:1px solid var(--qbs-rule); padding:10px 0; }
.qb-margin__ev{ font-family:var(--qbs-mono); font-size:10px; letter-spacing:.06em; line-height:1.55; color:var(--qbs-graphite); text-transform:uppercase; }
.qb-margin__bd{ font-size:13.5px; line-height:1.55; }
.qb-margin__bd b{ display:block; font-family:var(--qbs-cond); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--qbs-graphite); margin-bottom:4px; }

/* ---------------------------------------------------------- ranked table -- */
.qb-rank{ width:100%; border-collapse:collapse; font-size:14px; min-width:680px; }
.qb-rank th,.qb-rank td{ border-bottom:1px solid var(--qbs-rule); padding:11px 10px; text-align:left; vertical-align:top; }
.qb-rank thead th{ border-bottom:1px solid var(--qbs-ink); font-family:var(--qbs-cond); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; }
.qb-rank td.r{ font-family:var(--qbs-mono); width:36px; color:var(--qbs-axis); }
.qb-rank td.c{ font-family:var(--qbs-mono); font-size:12px; white-space:nowrap; }

.qb-supply{ border:1px solid var(--qbs-rule); }
.qb-supply > div{ border-top:1px solid var(--qbs-rule); padding:12px 14px; }
.qb-supply > div:first-child{ border-top:0; }
.qb-supply h5{ margin:0 0 5px; font-size:14px; font-weight:600; }
.qb-supply p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--qbs-graphite); }
.qb-supply .qb-tag{ margin-top:7px; }

/* nothing on this page moves except a link underline and a table reveal;
   counting-up numbers are banned by the direction. Respect reduced motion. */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* ---- build-injected route bar -------------------------------------------
   Not part of the authored identity lane. Achromatic, 0 radius, mono caps —
   the Field Instrument rules apply to the chrome as well as to the content. */
.routes{border-bottom:1px solid var(--rule,#C9C9C9);background:var(--paper,#fff)}
.routesin{max-width:var(--maxw,1180px);margin:0 auto;padding:0 var(--gut,44px);
  display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none}
.routesin::-webkit-scrollbar{display:none}
.routes a{font-family:var(--mono,ui-monospace,monospace);font-size:9.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--axis,#767676);
  white-space:nowrap;padding:9px 12px;border-bottom:2px solid transparent;
  text-decoration:none}
.routes a:first-child{padding-left:0}
.routes a:hover{color:var(--ink,#000)}
.routes a[aria-current="page"]{color:var(--ink,#000);border-bottom-color:var(--ink,#000)}
@media (max-width:900px){.routesin{padding:0 var(--gut,28px)}}