/* ==========================================================================
   CONSOLE — /capabilities/   (CSITE-49)

   A louder livery than the front page, deliberately: that page is a document
   read once, this one is an instrument with working parts on it. Same
   skeleton though — the strip (rail | bay | rim), round structure and square
   content, radius = exactly half a member's cross-axis extent, one 4px gap,
   two font weights, two motion tokens. What it adds is the elbow.

   Grammar of the marks, assigned before first use, no exceptions:
     · crown elbow + bar, BONE      the page's own structure. Not a claim.
     · rail bar, bone               a section that is the engineer speaking.
     · rail bar, thin, hue-9        a joint. Connective, quiet, claims nothing.
     · rail bar, hue-6              the instrument, and only the instrument.
     · card top edge, hues 1-5      which of the five kinds of work a part
                                    belongs to. Same meaning as the front
                                    page's index, and its only meaning here.
     · card left edge, hue-8        this part carries consequence, or cannot be
                                    priced from a list. Always doubled by the
                                    written weight beside it.
   Families are numbered and get no colour. There is no second numeral series.
   ========================================================================== */

/* ---- Face. The two self-hosted Archivo weights the front page already ships,
   so a visitor arriving from it fetches nothing new. No network request. ---- */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-v25-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-v25-latin-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}

/* ==========================================================================
   TOKENS

   THIS PAGE COMMITS TO A DARK GROUND, and the reason is arithmetic. Measured
   as text on #FFFFFF the nine structural hues run 1.05:1 to 3.71:1 — nine of
   nine fail AA and eight fail even the 3:1 non-text floor, while on a
   near-black ground every one clears AA. A light version would mean replacing
   all nine rather than adjusting them, since at these hue angles the lightness
   drop turns brass to brown and pale yellow to olive: a different design, not
   a theme. The front page keeps its light/dark/system control and holds its
   rail a constant dark member for the same reason; this page is what happens
   when the whole surface is that rail. docs/lcars-extraction.md §4.3.
   So: color-scheme dark, one theme-color meta with no media query, both
   agreeing with --c-void.

   Ratios below are measured against the ground each colour is used on, sRGB
   luminance, (L1+.05)/(L2+.05). Never encode a state with opacity alone —
   measure the composite; six of the seven failures in the source kit are that
   mistake.
   ========================================================================== */
:root{
  /* ---- grounds and ink -------------------------------------------------- */
  --c-void:   #1B1726; /* page ground. violet-tinted near-black. NOT #111 and  */
                       /* not #000: pure black under pale ink maximises        */
                       /* halation. Same ground as the front page.             */
  --c-panel:  #241E33; /* the well, one step up.        1.09:1 on void — the   */
                       /* panel is defined by its rule and by the members      */
                       /* around it, never by fill contrast.                   */
  --c-ink:    #F2EFE6; /* primary ink.                 15.26:1 on void         */
                       /*                              13.96:1 on panel        */
  --c-dim:    #ADA6BE; /* secondary ink.                7.50:1 on void         */
                       /*                               6.86:1 on panel        */
  --c-hair:   #3A3348; /* the 1px rule.                 1.46:1 on void —       */
                       /* quiet structure, decorative by intent, never the     */
                       /* only thing separating two regions.                   */
  --c-edge:   #F2EFE6; /* focus ring.                  15.26:1 on void         */
  --c-on-hue: #16121F; /* ink on any bright member. Worst case is hue-1 at     */
                       /*                               6.47:1                 */

  /* ---- the nine hues, each with a written job assigned before first use.
     Nine are declared because nine is the vocabulary; six appear on the page.
     Declaring a job and then not reaching for it is the discipline. ------- */
  --c-hue-1: #FF6A3D; /* 01 · integrations.             6.17:1 void  5.64 panel */
  --c-hue-2: #F0B429; /* 02 · spreadsheet into an app.  9.41:1 void  8.61 panel */
  --c-hue-3: #35D6A4; /* 03 · internal tools.           9.44:1 void  8.64 panel */
  --c-hue-4: #7DA2FF; /* 04 · customer-facing builds.   7.09:1 void  6.48 panel */
  --c-hue-5: #EE6CC9; /* 05 · rescues.                  6.37:1 void  5.83 panel */
  --c-hue-6: #C9B8FF; /* the instrument, and nothing else. Its crown, its rail
                         and the state of a part that has joined the brief.
                                                        9.84:1 void  9.01 panel */
  --c-hue-7: #8ED0E8; /* the five cost drivers. One hue for one vocabulary.
                                                       10.31:1 void  9.43 panel */
  --c-hue-8: #FFD166; /* caution. The question a demanding part asks before it
                         joins a brief, and the outcome that refuses to price.
                                                       12.17:1 void 11.13 panel */
  --c-hue-9: #9A93AD; /* inactive. A rule that must be SEEN and claims nothing.
                                                        5.97:1 void  5.46 panel */

  /* ---- geometry. Heights are the source; radii are derived. radius =
     extent/2 exactly is the only value that yields a true semicircle: exceed
     it and the browser clamps back, fall short and the cap is a blob. ----- */
  --bar-sm: 24px;  --rad-sm: 12px;   /* 24 / 2 = 12 ✓ */
  --bar-md: 40px;  --rad-md: 20px;   /* 40 / 2 = 20 ✓ */
  --bar-lg: 60px;  --rad-lg: 30px;   /* 60 / 2 = 30 ✓ */
  --c-gap:  4px;                     /* the one gap. every member, everywhere. */

  /* ---- motion. Two tokens, the same two the front page uses. ------------- */
  --c-fast: 120ms;
  --c-slow: 160ms;

  /* ---- type ------------------------------------------------------------- */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-micro:.6875rem;   /* 11px — rail labels, tags, colophon               */
  --t-fine:.8125rem;    /* 13px — buttons, meta lines                       */
  --t-small:clamp(.9375rem,.9rem + .15vw,1rem);
  --t-body:1.0625rem;
  --t-lede:clamp(1.0625rem,.95rem + .6vw,1.25rem);
  --t-no:clamp(.9rem,.55rem + 1.05vw,1.5rem);
  --t-sub:clamp(1.05rem,.9rem + .5vw,1.3rem);
  --t-h3:clamp(1.25rem,.9rem + 1.15vw,1.85rem);
  --t-h2:clamp(1.6rem,.7rem + 2.5vw,2.9rem);
  --t-h1:clamp(2.05rem,.85rem + 4vw,4.1rem);

  /* ---- structure. Same measures as the front page so the two surfaces line
     up if you flip between them. ------------------------------------------ */
  --spine:clamp(2.75rem,7vw,6.5rem);
  --bar:clamp(.625rem,1.9vw,1.375rem);   /* rail segment width. radius = half. */
  --gut:clamp(1rem,2.4vw,2.75rem);
  --bayr:clamp(1rem,3vw,3.5rem);
  --reach:74.5rem;
  --rim:max(0px, calc(100vw - var(--spine) - var(--reach)));
  --arm:clamp(9.5rem,22vw,14rem);          /* the crown elbow's horizontal reach.
     Floor is set by the longest crown label at 11px: below it the label would
     be masked off at the elbow's own left edge rather than wrapping. */

  color-scheme: dark;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:3rem}
body{
  margin:0; background:var(--c-void); color:var(--c-ink);
  font:400 var(--t-body)/1.55 var(--body);
  overflow-wrap:break-word;
}
h1,h2,h3,p,ul,ol,dl{margin:0}
ol,ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--c-edge); outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
em{font-style:italic}
b{font-weight:600}

.skip{
  position:absolute; left:-9999px; top:0; z-index:40;
  background:var(--c-ink); color:var(--c-void); border-radius:0;
  font-family:var(--display); text-transform:uppercase; font-weight:600;
  font-size:var(--t-fine); letter-spacing:.09em; padding:.6em 1em .5em;
}
.skip:focus{left:0}

/* Display face is uppercase; body face never is. One rule, no opt-outs. The
   exception the front page also makes: headings and part names are sentences,
   so they take the display face at its natural case. */
.wordmark,.eyebrow,.btn,.no,.joint__name,.fam__tag,.colophon,.addr,
.out__band,.drv__key,.ctl__nav a{
  font-family:var(--display); text-transform:uppercase;
}
h1,h2,h3,.sub,.rule__name,.out__name,.el__name{font-family:var(--display)}

/* ==========================================================================
   THE STRIP — rail | bay | rim. No variant is symmetric; there is no centred
   mode anywhere on this page.
   ========================================================================== */
.strip{
  display:grid;
  grid-template-columns:var(--spine) minmax(0,1fr) var(--rim);
  align-items:stretch;
}
.rail{
  position:relative; background:var(--c-panel);
  border-right:1px solid var(--c-hair);
  display:flex; flex-direction:column; align-items:center;
  gap:.4rem; padding:6px 0; min-height:100%;
}
.rail :focus-visible{outline-color:var(--c-ink)}
.bay{min-width:0; padding:var(--gut) var(--bayr) var(--gut) var(--gut)}

/* rail segments. radius is exactly half the segment's own width. */
.bar{
  display:block; width:var(--w,var(--bar)); flex:1 1 auto; min-height:1.25rem;
  border-radius:calc(var(--w,var(--bar)) / 2);
  background:var(--m,var(--c-hue-9));
}
.bar--ink{--m:var(--c-ink)}
.bar--inst{--m:var(--c-hue-6)}
.bar--fam{--m:var(--c-hue-9); --w:calc(var(--bar) * .55)}
.bar--thin{--w:calc(var(--bar) * .4)}
.no{
  font-weight:600; font-size:var(--t-no); line-height:.85;
  color:var(--c-ink); letter-spacing:-.008em;
  font-variant-numeric:tabular-nums; padding-top:.1em;
}

/* ==========================================================================
   THE ELBOW — the one member the front page never needed.

   outer radius = v + h/2. The inner corner is a hard right angle, which is
   why the interior is REMOVED rather than drawn: CSS derives an inner curve of
   max(0, R - arm) and gives a square corner only when R <= min(v, h), and R
   here exceeds both. The punch is a MASK, not an opaque rectangle — painting
   welds the elbow to one ground, masking leaves the interior genuinely
   transparent over any. A @supports fallback keeps the painted punch, with the
   ground parameterised rather than hardcoded.

   Two preconditions the source grammar never states: the box must be at least
   --outer in BOTH axes or the browser clamps the radius, and taller than --h
   or the punch has zero area. Both hold here by construction — see .crown.
   ========================================================================== */
.crown{
  display:flex; gap:var(--c-gap); align-items:stretch;
  /* the elbow's vertical arm IS one of the rail's members, so the crown is
     inset by the distance that centres a bar in the rail — which is what lets
     the arm continue down into it instead of ending in mid-air. */
  padding-left:calc((var(--spine) - var(--bar)) / 2);
  padding-right:var(--rim);
  height:clamp(3.5rem,9vw,6.25rem);           /* >= --outer, and > --h */
}
.crown__elbow{
  --v:var(--bar);
  --h:var(--bar-sm);
  --outer:calc(var(--v) + var(--h) / 2);
  position:relative;
  flex:0 0 auto;
  width:calc(var(--bar) + var(--arm));
  background:var(--m,var(--c-ink));
  border-top-left-radius:var(--outer);
  /* punch grown 1px each side: composited masks leave a half-covered pixel
     where the layers meet, and on a bone member over a near-black ground that
     pixel draws a visible outline of the punch. 1px off an arm is not. */
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
          mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-size:calc(100% - var(--v) + 1px) calc(100% - var(--h) + 1px),100% 100%;
          mask-size:calc(100% - var(--v) + 1px) calc(100% - var(--h) + 1px),100% 100%;
  -webkit-mask-position:right bottom,0 0;
          mask-position:right bottom,0 0;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.crown__label{
  position:absolute; top:0; right:var(--c-gap);
  height:var(--h); display:flex; align-items:center;
  padding-inline:.7em;
  color:var(--c-on-hue);
  font:600 var(--t-micro)/1 var(--display);
  text-transform:uppercase; letter-spacing:.1em;
  pointer-events:none; user-select:none; white-space:nowrap;
  max-width:calc(100% - var(--c-gap) * 2); overflow:hidden; text-overflow:ellipsis;
}
/* the bar continues the elbow's horizontal arm. Its inner end is square,
   because a square end means "this abuts something". */
.crown__bar{
  flex:1 1 auto; align-self:flex-start;
  height:var(--bar-sm); min-width:var(--bar-sm);
  background:var(--m,var(--c-ink));
  border-radius:0 var(--rad-sm) var(--rad-sm) 0;
}
.crown--inst .crown__elbow,
.crown--inst .crown__bar{--m:var(--c-hue-6)}

/* the footer closes the frame the masthead opened: same member, other corner,
   and its vertical arm continues UP into the rail bar above it. */
.crown--foot .crown__elbow{
  border-top-left-radius:0;
  border-bottom-left-radius:var(--outer);
  -webkit-mask-position:right top,0 0;
          mask-position:right top,0 0;
}
.crown--foot .crown__bar{align-self:flex-end}

@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
  .crown__elbow{-webkit-mask-image:none; mask-image:none; overflow:hidden}
  .crown__elbow::after{
    content:''; position:absolute; right:0; bottom:0;
    width:calc(100% - var(--v)); height:calc(100% - var(--h));
    background:var(--c-void);
  }
  .crown--foot .crown__elbow::after{bottom:auto; top:0}
}

/* A member abutting a crown is square at the joint and capped at its free
   end: a square end says "this continues", a cap says "this stops". */
.bar--fromtop{border-radius:0 0 calc(var(--bar) / 2) calc(var(--bar) / 2)}
.bar--totop{border-radius:calc(var(--bar) / 2) calc(var(--bar) / 2) 0 0}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.rail--mast{padding-top:0; gap:.75rem}
.wordmark{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-weight:800; font-size:clamp(.75rem,.6rem + .35vw,.9375rem);
  letter-spacing:.14em; line-height:1; color:var(--c-ink);
  padding:.25rem 0; transition:color var(--c-fast) linear;
}
.wordmark:hover{color:var(--c-hue-1)}
.bay--mast{padding-top:0}
.ctl{
  display:flex; justify-content:space-between; align-items:center;
  gap:.75rem; flex-wrap:wrap;
  margin-inline:calc(-1 * var(--gut)) calc(-1 * var(--bayr));
  padding:clamp(.55rem,1.1vw,.8rem) var(--bayr) clamp(.55rem,1.1vw,.8rem) var(--gut);
  border-bottom:1px solid var(--c-hair);
}
.ctl__nav{display:flex; gap:.15rem; flex-wrap:wrap}
.ctl__nav a{
  display:block; font-weight:600; font-size:var(--t-fine); letter-spacing:.09em;
  padding:.55em .85em .45em; line-height:1; color:var(--c-dim);
  transition:color var(--c-fast) linear, background var(--c-fast) linear;
}
.ctl__nav a:hover{color:var(--c-ink)}
/* current page is a filled member, not a tint: a state carried by an opacity
   step is the one thing this grammar's source got measurably wrong. */
.ctl__nav a[aria-current="page"]{
  background:var(--c-ink); color:var(--c-void);          /* 15.26:1 */
  border-radius:var(--rad-sm);
}

.hero{padding-block:clamp(1.75rem,4.5vw,3.5rem) clamp(1.25rem,2.5vw,2rem)}
.eyebrow{
  font-weight:600; font-size:var(--t-micro); letter-spacing:.13em;
  color:var(--c-dim); margin-bottom:clamp(.8rem,1.8vw,1.2rem);
}
h1{
  font-weight:800; font-size:var(--t-h1); line-height:.95; letter-spacing:-.009em;
  max-width:19ch;
}
.lede{
  font-size:var(--t-lede); line-height:1.45; max-width:56ch;
  margin-top:clamp(1rem,2vw,1.6rem);
}

/* ==========================================================================
   BUTTONS — square, always. Structure is round, content is square, and a
   button is content.
   ========================================================================== */
.btn{
  display:inline-block; border:1px solid var(--c-ink); border-radius:0;
  font-weight:600; font-size:var(--t-fine); letter-spacing:.09em;
  padding:.55em .95em .45em; line-height:1; cursor:pointer;
  font-family:var(--display); text-transform:uppercase;
  transition:background var(--c-fast) linear, color var(--c-fast) linear,
             border-color var(--c-fast) linear;
}
.btn--solid{background:var(--c-ink); color:var(--c-void)}      /* 15.26:1 */
.btn--solid:hover{background:var(--c-hue-1); border-color:var(--c-hue-1); color:var(--c-on-hue)} /* 6.47:1 */
.btn--ghost{background:transparent; color:var(--c-ink); border-color:var(--c-hue-9)}
.btn--ghost:hover{border-color:var(--c-ink)}
.btn--quiet{background:transparent; color:var(--c-dim); border-color:var(--c-hair)}
.btn--quiet:hover{color:var(--c-ink); border-color:var(--c-hue-9)}
.btn--huge{font-size:var(--t-body); padding:.95em 1.65em .85em; letter-spacing:.1em}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.strip--head .bay{padding-bottom:clamp(.5rem,1.2vw,1rem)}
.strip--body .bay{padding-block:clamp(.75rem,1.8vw,1.5rem)}
.joint{display:flex; align-items:center; gap:.7rem; margin-bottom:clamp(.7rem,1.6vw,1.1rem)}
.joint__bar{
  display:block; flex:0 0 auto; width:clamp(1.5rem,4vw,3rem); height:var(--bar-sm);
  background:var(--c-hue-9); border-radius:0 var(--rad-sm) var(--rad-sm) 0;
  margin-left:calc(-1 * var(--gut));
}
.joint__name{
  font-weight:600; font-size:var(--t-micro); letter-spacing:.14em; color:var(--c-dim);
}
h2{font-weight:800; font-size:var(--t-h2); line-height:1; letter-spacing:-.008em; max-width:22ch}
h3,.fam__h{font-weight:800; font-size:var(--t-h3); line-height:1.05; letter-spacing:-.008em; max-width:26ch}
.sub{
  font-weight:600; font-size:var(--t-sub); line-height:1.15;
  margin:clamp(1.4rem,3vw,2.4rem) 0 .75rem; color:var(--c-ink);
}
.say{max-width:68ch; margin-top:1rem}
.say--narrow{max-width:62ch}
.say p + p{margin-top:1rem}
.say > p + p{margin-top:1rem}
.say--split{
  display:grid; gap:clamp(1rem,3vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  max-width:none;
}
.say--split p + p{margin-top:1rem}
.say__aside{
  color:var(--c-dim); font-size:var(--t-small);
  border-left:2px solid var(--c-hue-9); padding-left:1rem;
}

/* ==========================================================================
   FAMILIES
   ========================================================================== */
.fam{display:block; margin-top:clamp(1.5rem,4vw,3rem)}
.strip--fam .bay{padding-bottom:clamp(.6rem,1.4vw,1.1rem)}
.fam__tag{
  display:flex; align-items:center; gap:.7rem;
  font-weight:600; font-size:var(--t-micro); letter-spacing:.14em;
  color:var(--c-dim); margin-bottom:.6rem;
}
.fam__bar{
  display:block; flex:0 0 auto; width:clamp(1.5rem,4vw,3rem); height:var(--bar-sm);
  background:var(--c-hue-9); border-radius:0 var(--rad-sm) var(--rad-sm) 0;
  margin-left:calc(-1 * var(--gut));
}
.strip--parts .bay{padding-top:0}

/* ==========================================================================
   THE ELEMENT BLOCK — the catalogue's only repeating shape, and the only
   markup the instrument understands. The interiors of .el__demo belong to
   console-demos.css; everything from the card edge outwards is here.

   Tier and weight are printed with attr() from the SAME attributes the
   instrument reads, so the label cannot drift from the value the brief is
   computed from — and they are what keeps the catalogue readable with
   JavaScript off.
   ========================================================================== */
.els{
  display:grid; gap:clamp(.75rem,1.6vw,1.25rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20.5rem),1fr));
}
.els:empty{display:none}

.el{
  --tier:var(--c-hue-9);
  display:flex; flex-direction:column;
  background:var(--c-panel);
  border:1px solid var(--c-hair);
  border-top:3px solid var(--tier);
  border-radius:0;                       /* glass is square. always. */
  min-width:0;
}
.el[data-tier^="01"]{--tier:var(--c-hue-1)}
.el[data-tier^="02"]{--tier:var(--c-hue-2)}
.el[data-tier^="03"]{--tier:var(--c-hue-3)}
.el[data-tier^="04"]{--tier:var(--c-hue-4)}
.el[data-tier^="05"]{--tier:var(--c-hue-5)}

/* the meta strip, generated from the article's own data attributes */
.el::before{
  content:"Tier " attr(data-tier) " · " attr(data-weight);
  order:-1;
  font:600 var(--t-micro)/1 var(--display);
  text-transform:uppercase; letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--c-dim);                    /* 6.86:1 on panel */
  padding:.85rem 1rem .1rem;
}
/* a part that carries consequence, or that cannot be priced from a list, gets
   a member down its leading edge. The word is already in the strip above, so
   the colour is never carrying the meaning by itself. */
.el[data-weight="heavy"],
.el[data-weight="conversation"]{border-left:3px solid var(--c-hue-8)}

.el__head{padding:.35rem 1rem .9rem}
.el__name{
  font-weight:600; font-size:1.0625rem; line-height:1.2; letter-spacing:-.004em;
  color:var(--c-ink);
}
.el__aka{
  margin-top:.35rem; font-size:var(--t-small); line-height:1.4;
  color:var(--c-dim);                    /* 6.86:1 on panel */
}
.el__demo{
  background:var(--c-void);
  border-block:1px solid var(--c-hair);
  padding:1rem;
  min-width:0; overflow-x:auto;
}
.el__meta{padding:.9rem 1rem}
.el__build{font-size:var(--t-small); line-height:1.45; color:var(--c-dim)}
.el__pick{
  order:10;
  margin-top:auto;
  border-top:1px solid var(--c-hair);
  padding:.7rem 1rem;
}
.el__pick label{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  font:600 var(--t-fine)/1.2 var(--display);
  text-transform:uppercase; letter-spacing:.09em; color:var(--c-ink);
}
.el__pick input[type=checkbox]{
  flex:0 0 auto; width:1.15rem; height:1.15rem; margin:0;
  accent-color:var(--c-hue-6);           /* 9.01:1 on panel */
  cursor:pointer;
}
.el__pick input[type=checkbox]:focus-visible{outline:2px solid var(--c-edge); outline-offset:3px}
/* a part that has joined the brief is stated by the instrument's own hue on
   the card's leading edge AND by the checkbox, never by a dimming. */
.el:has(.pick:checked){box-shadow:inset 4px 0 0 0 var(--c-hue-6)}

/* ==========================================================================
   THE METHOD — the most important prose on the page, and the section a
   visitor who never ticks anything is supposed to leave with.
   ========================================================================== */
.drv{margin-top:.5rem; border-top:1px solid var(--c-hair); max-width:70ch}
.drv__row{
  display:grid; gap:.3rem 1.1rem; padding:.9rem 0;
  border-bottom:1px solid var(--c-hair);
  grid-template-columns:minmax(0,1fr);
}
.drv dt{
  display:flex; align-items:center; gap:.65rem;
  font:600 var(--t-fine)/1 var(--display);
  text-transform:uppercase; letter-spacing:.1em; color:var(--c-ink);
}
.drv__key{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:var(--bar-sm); height:var(--bar-sm);
  border-radius:var(--rad-sm);           /* 24 / 2. a true semicircle each end */
  background:var(--c-hue-7); color:var(--c-on-hue);   /* 10.82:1 */
  font-weight:800; font-size:var(--t-micro); letter-spacing:0;
}
.drv dd{margin:0; font-size:var(--t-small); line-height:1.5; color:var(--c-dim)}

.rules{margin-top:.5rem; max-width:66ch}
.rule{padding:1.1rem 0; border-top:1px solid var(--c-hair)}
.rule:last-child{border-bottom:1px solid var(--c-hair)}
.rule__name{
  font-weight:800; font-size:var(--t-sub); line-height:1.15;
  letter-spacing:-.006em; color:var(--c-ink); margin-bottom:.5rem;
}
.rule p + p{margin-top:.5rem}
.rule > p:not(.rule__name){font-size:var(--t-small); line-height:1.55; color:var(--c-dim)}

.outs{
  display:grid; gap:clamp(.75rem,1.6vw,1.25rem); margin-top:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.out{
  background:var(--c-panel); border:1px solid var(--c-hair);
  border-left:3px solid var(--c-hue-9);
  padding:1rem;
}
.out:nth-child(3),.out:nth-child(4){border-left-color:var(--c-hue-8)}
.out__band{
  font-weight:800; font-size:var(--t-sub); line-height:1;
  letter-spacing:.02em; color:var(--c-ink); font-variant-numeric:tabular-nums;
}
.out__name{
  margin:.45rem 0 .6rem; font-weight:600; font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--c-dim);
}
.out > p:last-child{font-size:var(--t-small); line-height:1.5; color:var(--c-dim)}

.wex{
  margin-top:1.25rem; background:var(--c-panel);
  border:1px solid var(--c-hair); border-left:3px solid var(--c-hue-7);
  padding:clamp(1rem,2.5vw,1.5rem); max-width:70ch;
}
.wex__grid > div{
  display:flex; flex-wrap:wrap; gap:.15rem .9rem; align-items:baseline;
  padding:.55rem 0; border-bottom:1px solid var(--c-hair);
}
.wex__grid > div:last-child{border-bottom:0}
.wex dt{
  flex:1 1 14rem; min-width:0;
  font:600 var(--t-fine)/1.3 var(--display);
  text-transform:uppercase; letter-spacing:.1em; color:var(--c-ink);
}
.wex dd{margin:0; flex:1 1 16rem; font-size:var(--t-small); line-height:1.4; color:var(--c-dim)}
.wex dd b{
  display:inline-block; min-width:2.5em; color:var(--c-hue-7);   /* 9.43:1 */
  font-weight:800; font-variant-numeric:tabular-nums;
}
.wex__read{margin-top:1rem; font-size:var(--t-small); line-height:1.55; color:var(--c-dim)}
.wex__read b{color:var(--c-ink); font-weight:800}

/* ==========================================================================
   THE INSTRUMENT

   Every class below is emitted by console.js, which builds its own markup in
   the empty #console mount in section 14. The names are its published
   contract; its structure is semantic, so the brief stays readable wherever a
   rule of mine is missed.

   The rule that outranks every layout preference here: no band, no figure and
   no number goes anywhere near the selection controls. The strip carries a
   count and nothing else. In the brief the itemisation is the output and the
   band is its footnote, which is why .cns__band-fig is no larger than a
   subheading.
   ========================================================================== */

/* --- the strip. A bookmark, not a readout. Hairline, one line, no cart. --- */
.cns-strip{
  position:fixed; inset-inline:0; top:0; z-index:30;
  background:var(--c-panel); border-bottom:1px solid var(--c-hue-6);
}
.cns-strip[hidden]{display:none}
.cns-strip__line{
  padding:.5rem var(--gut); text-align:right;
  font:600 var(--t-micro)/1.4 var(--display);
  text-transform:uppercase; letter-spacing:.12em; color:var(--c-dim);
}
.cns-strip__n{color:var(--c-hue-6); font-variant-numeric:tabular-nums}  /* 9.01:1 on panel */
.cns-strip__go{
  color:var(--c-ink);                                                   /* 13.96:1 on panel */
  border-bottom:1px solid var(--c-hue-6); padding-bottom:.1em;
  transition:color var(--c-fast) linear;
}
.cns-strip__go:hover{color:var(--c-hue-6)}

/* --- the brief -------------------------------------------------------- */
#console[hidden]{display:none}
.cns{margin-top:clamp(1rem,2.5vw,1.75rem); max-width:70ch}
.cns h3{
  font-weight:600; font-size:var(--t-sub); line-height:1.2; letter-spacing:-.004em;
  margin:clamp(1.25rem,2.5vw,2rem) 0 .6rem; max-width:none;
}
.cns__count{font-size:var(--t-small); line-height:1.5; color:var(--c-dim)}
.cns__notice,.cns__stale{
  border-left:3px solid var(--c-hue-8); background:var(--c-panel);
  padding:.8rem 1rem; font-size:var(--t-small); line-height:1.5; color:var(--c-ink);
}
.cns__notice[hidden],.cns__stale[hidden]{display:none}
.cns__example{
  border-left:3px solid var(--c-hue-7); background:var(--c-panel);
  padding:clamp(1rem,2.5vw,1.5rem); margin-top:1.25rem;
}
.cns__example[hidden]{display:none}
.cns__example h3{margin-top:0}
.cns__example p{font-size:var(--t-small); line-height:1.55; color:var(--c-dim)}

/* the itemisation. This is the output; everything after it is commentary. */
.cns__group{margin-top:1.25rem; border-top:1px solid var(--c-hair); padding-top:.9rem}
.cns__group h3{
  margin:0 0 .6rem; font-size:var(--t-fine); font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; color:var(--c-hue-6);
}
.cns__group li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .6rem;
  padding:.45rem 0; border-bottom:1px solid var(--c-hair);
  font-size:var(--t-small); line-height:1.45;
}
.cns__item-name{flex:0 1 auto; color:var(--c-ink); font-weight:600}
.cns__item-aka{flex:1 1 12ch; color:var(--c-dim); font-style:italic}
.cns__item-note{
  flex:0 0 auto; margin-left:auto; color:var(--c-dim);
  font:600 var(--t-micro)/1.4 var(--display);
  text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;
}
.cns__group-sum{
  margin-top:.6rem; color:var(--c-hue-6);
  font:600 var(--t-fine)/1.4 var(--display);
  text-transform:uppercase; letter-spacing:.1em;
}

.cns__resolve{margin-top:clamp(1.25rem,3vw,2rem)}
.cns__resolve[hidden]{display:none}

/* the outcome. Asked for, never volunteered. */
.cns__out{
  margin-top:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--c-hair); border-left:3px solid var(--c-hue-6);
  background:var(--c-panel); padding:clamp(1rem,2.5vw,1.75rem);
}
.cns__out[hidden]{display:none}
.cns__out:focus{outline:none}
.cns__out:focus-visible{outline:2px solid var(--c-edge); outline-offset:3px}
/* the four outcomes, each named in words by console.js as well as coloured —
   colour never carries the meaning on its own here. */
.cns__out[data-outcome="larger"],
.cns__out[data-outcome="conversation"]{border-left-color:var(--c-hue-8)}
.cns__out > h3:first-child{margin-top:0}

.cns__drivers{margin-top:.25rem}
.cns__drv{
  display:flex; flex-wrap:wrap; gap:.15rem .9rem; align-items:baseline;
  padding:.5rem 0; border-bottom:1px solid var(--c-hair);
}
.cns__drv dt{
  flex:1 1 13rem; min-width:0;
  font:600 var(--t-fine)/1.3 var(--display);
  text-transform:uppercase; letter-spacing:.1em; color:var(--c-ink);
}
.cns__drv dd{margin:0; flex:1 1 15rem; font-size:var(--t-small); line-height:1.45}
.cns__drv dd b{color:var(--c-hue-7); font-weight:800; font-variant-numeric:tabular-nums} /* 9.43:1 */
.cns__drv-why{color:var(--c-dim)}
.cns__drivers > p{font-size:var(--t-small); line-height:1.5; color:var(--c-dim)}

.cns__rules li{
  padding:.55rem 0; border-bottom:1px solid var(--c-hair);
  font-size:var(--t-small); line-height:1.5; color:var(--c-dim);
}
.cns__rules li b{color:var(--c-ink); font-weight:800}

/* THE BAND. A footnote to the reasoning above it, sized like one. A headline
   figure with the working-out collapsed beneath it is the artifact this page
   exists in order not to be. */
.cns__band{margin-top:clamp(1.25rem,3vw,2rem); border-top:1px solid var(--c-hue-9); padding-top:1rem}
.cns__band h3{margin-top:0}
.cns__band-fig{
  font:800 var(--t-sub)/1.1 var(--display); letter-spacing:.02em;
  color:var(--c-ink); font-variant-numeric:tabular-nums; margin-bottom:.5rem;
}
.cns__band-note{font-size:var(--t-small); line-height:1.55; color:var(--c-dim)}
.cns__band-note + .cns__band-note{margin-top:.6rem}
.cns__band-caveat{
  margin-top:.9rem; padding-top:.75rem; border-top:1px solid var(--c-hair);
  font-size:var(--t-fine); line-height:1.5; color:var(--c-dim);
}
.cns__phase{
  margin-top:clamp(1.25rem,3vw,2rem);
  border-left:3px solid var(--c-hue-7); padding-left:1rem;
}
.cns__phase h3{margin-top:0}
.cns__phase p{font-size:var(--t-small); line-height:1.55; color:var(--c-dim)}
.cns__phase li{
  font-size:var(--t-small); line-height:1.5; color:var(--c-ink);
  padding:.3rem 0 .3rem 1.1rem; position:relative;
}
.cns__phase li::before{
  content:''; position:absolute; left:0; top:.85em;
  width:.5rem; height:2px; background:var(--c-hue-7);
}
.cns__phase p + ul{margin-top:.5rem}
.cns__phase ul + p{margin-top:.9rem}

/* the actions, at the bottom, past the reasoning. You cannot skip to them. */
.cns__actions{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  margin-top:clamp(1.4rem,3vw,2.25rem);
  padding-top:1.25rem; border-top:1px solid var(--c-hair);
}
.cns__btn{
  display:inline-block; border:1px solid var(--c-hue-9); border-radius:0;
  background:transparent; color:var(--c-ink);
  font-family:var(--display); text-transform:uppercase;
  font-weight:600; font-size:var(--t-fine); letter-spacing:.09em;
  padding:.55em .95em .45em; line-height:1; cursor:pointer;
  transition:background var(--c-fast) linear, color var(--c-fast) linear,
             border-color var(--c-fast) linear;
}
.cns__btn:hover{border-color:var(--c-ink)}
.cns__btn--go{background:var(--c-hue-6); color:var(--c-on-hue); border-color:var(--c-hue-6)} /* 10.33:1 */
.cns__btn--go:hover{background:var(--c-ink); border-color:var(--c-ink)}                      /* 16.02:1 */
.cns__msg{margin-top:.9rem; font-size:var(--t-small); line-height:1.5; color:var(--c-hue-6)}
.cns__msg:empty{margin:0}
.cns__note{font-size:var(--t-small); line-height:1.5; color:var(--c-dim)}
.cns__fallback{
  display:block; width:100%; min-height:12rem; margin-top:.9rem;
  background:var(--c-void); color:var(--c-ink);
  border:1px solid var(--c-hue-8); border-radius:0; padding:.75rem;
  font:400 var(--t-fine)/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* --- the one interruption, and the conversation note. Both live inside a
   card, under its .el__pick, so they are styled to read as part of it. ----- */
.el__ask{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  margin:0 1rem 1rem; padding:.85rem 1rem;
  background:var(--c-void); border:1px solid var(--c-hue-8);
}
.el__ask-q{
  flex:1 1 100%; font-size:var(--t-small); line-height:1.45; color:var(--c-ink);
}
.el__note{
  margin:0 1rem 1rem; padding:.75rem 1rem;
  background:var(--c-void); border-left:3px solid var(--c-hue-8);
  font-size:var(--t-fine); line-height:1.5; color:var(--c-dim);
}

/* ==========================================================================
   CONTACT — the front page's block, unchanged, with the same words and the
   same address. This page does not invent a second call to action.
   ========================================================================== */
.strip--ask{margin-top:clamp(2rem,5vw,4rem)}
.bay--ask{padding-block:clamp(2rem,5vw,4rem)}
.ask__body{
  display:grid; gap:clamp(1.25rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  align-items:start; margin-top:clamp(1rem,2vw,1.5rem);
}
.ask__act{display:flex; flex-direction:column; align-items:flex-start; gap:1rem}
.addr{
  font-size:var(--t-fine); letter-spacing:.05em; color:var(--c-dim);
  border-bottom:1px solid var(--c-hair); padding-bottom:.15em;
  transition:color var(--c-fast) linear, border-color var(--c-fast) linear;
  text-transform:none;
}
.addr:hover{color:var(--c-ink); border-bottom-color:var(--c-ink)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{margin-top:clamp(2rem,5vw,4rem)}
.rail--foot{padding-bottom:0}
.bay--foot{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding-block:clamp(1rem,2.5vw,1.75rem);
}
.colophon{font-weight:600; font-size:var(--t-micro); letter-spacing:.13em; color:var(--c-dim)}
.colophon--alt a{transition:color var(--c-fast) linear}
.colophon--alt a:hover{color:var(--c-ink)}

/* ==========================================================================
   PROGRESSIVE ENHANCEMENT

   With JavaScript off the catalogue is a complete readable list of parts with
   their names, descriptions and weights, and the instrument is absent rather
   than broken. Family 12 makes that claim on this page's behalf, so the page
   has to actually do it.
   ========================================================================== */
.only-nojs{display:none}
html:not(.js) .only-nojs{display:revert}
/* the one rule console.js needs and may not write for itself. */
html:not(.js) .el__pick{display:none}

/* ==========================================================================
   REDUCED MOTION. Every transition in this file is a colour or a background,
   so collapsing the duration lands on the correct end state. Nothing here
   animates position or opacity, so there is no half-drawn state to rescue.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   PRINT. The brief becomes a scope document: chrome, navigation, catalogue
   and argument come off, leaving who wrote it, what was chosen, what set the
   band and where to send it. Colour is forced to ink, because every value here
   was chosen for a near-black ground and none survives white paper.
   ========================================================================== */
@media print{
  .cns-strip,.crown,.rail,.ctl,.skip,.btn,.cns__btn,.cns__resolve,
  .cns__example,#open,#catalogue,#method,.hero h1,.hero .lede{display:none !important}
  html,body{background:#fff}
  body,body *{
    color:#000 !important; background:transparent !important;
    border-color:#999 !important; box-shadow:none !important;
  }
  body{font-size:11pt}
  .strip{display:block}
  .bay{padding:0 0 .75rem}
  .hero{padding:0 0 1rem}
  .say__aside,.el__build,.cns__count,.cns__band-note,.cns__band-caveat,
  .cns__item-note,.cns__drv-why,.cns__note,.colophon{color:#333 !important}
  .cns__msg,.cns__fallback{display:none}
  #brief{page-break-inside:auto}
  .cns__out,.cns__group,.cns__phase{page-break-inside:avoid}
}