/* ==========================================================================
   victory-identity.css — the shared instruments, brought onto the Victory case
   --------------------------------------------------------------------------
   The Identity lens has to show colour, type and icon on the route itself
   rather than sending the reader to Brand Systems for them. These rules are
   the instrument styles those two exhibits already use, lifted OUT of the
   Brand Systems page's inline <style> blocks and into a file both pages could
   share. Nothing here is re-authored: the selectors, the container-query
   units and the step gating are the ones the working exhibits run on, so the
   two routes cannot drift apart.

   What lives here
     .cx*            the colour card, the wheel and the scheme specimen
     .bxp*           the explainer stage: one figure, N steps, one transport
     .cxs*           the colour continuum's own sequence layer
     .bxt*           the type-and-icon stage
     .psx* .pa*      the Public Sans specimen and the live icon library
     aspect ratios   reserved boxes for the interface artwork, so nothing
                     jumps when the SVGs arrive

   What deliberately did NOT come across: the .bs-deep drawers. The Victory
   route already has its own way of opening a fuller record in place, and two
   disclosure idioms on one page would read as two pages.
   ========================================================================== */


/* ---- the colour instrument ------------------------------------------- */

/* ============================================================================
   §3 §5 §6 §7 · THE COLOR INSTRUMENT.

   Four schemes, not seven. No neutral appears inside a scheme: a neutral is a
   surface, not a colour relationship and counting one made the schemes look
   more varied than they were. The card's ground and text are Victory Light
   Neutral and Victory Charcoal and are excluded from every allocation.

   The wheels follow the approved Color Continuum sheets exactly: twelve
   equally spaced positions on one ring, one diameter, one node size, the hue
   focus registered at twelve o'clock, the name centred inside and only the
   dashed relationship lines the reference itself draws.
   ========================================================================== */
.cx{--vi-ink:#141414;--vi-line:rgba(20,20,20,.14);
  --vi-line-2:rgba(20,20,20,.07);--vi-mute:rgba(20,20,20,.56);
  --vi-orange:#FF692E;--vi-blue:#065986;
  --vi-ui:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --vi-serif:'Source Serif 4',Georgia,serif;
  --cx-ground:#F3F4F6;--cx-ink:#292929;
  --cx-accent:#BC1B06;--cx-rule:#FF9C66;--cx-field:#FFE6D5;--cx-nav:#BC1B06;
  font-family:var(--vi-ui);color:var(--vi-ink)}

.cx__axis{display:flex;align-items:center;gap:12px;margin:0 0 10px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--vi-mute)}
.cx__axisr{text-align:right}
.cx__axisline{flex:1 1 auto;height:2px;
  background:linear-gradient(90deg,rgba(255,105,46,.25),rgba(255,105,46,1))}

.cx__tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--vi-line);border-radius:2px;overflow:hidden;background:#fff}
.cx__tab{display:flex;align-items:baseline;gap:8px;padding:11px 13px;
  border:0;border-left:1px solid var(--vi-line);background:transparent;cursor:pointer;
  font-family:var(--vi-ui);color:var(--vi-mute);text-align:left;
  transition:background .22s ease,color .22s ease}
.cx__tab:first-child{border-left:0}
.cx__tab:hover{background:rgba(255,105,46,.06)}
.cx__tabn{font-size:10px;letter-spacing:.12em;font-weight:700;flex:none}
.cx__tabt{font-size:clamp(10px,1vw,12px);letter-spacing:.09em;font-weight:700;line-height:1.2}
.cx__tab[aria-selected="true"]{background:var(--vi-orange);color:#231000}
.cx__tab:focus-visible{outline:2px solid var(--vi-blue);outline-offset:-2px}

.cx__stage{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:clamp(16px,2.2vw,34px);margin-top:14px;align-items:start}
/* the specimen keeps its 16:10 format, so it is shorter than the readout
   beside it. Centring it in the column turns a hole under the card into
   balance either side of it. */
@media (min-width:781px){
  .cx__stage{align-items:center}
  .cx[data-cx-compare="true"] .cx__stage{align-items:start}
}
.cx__demo{margin:0}

/* ---- §5 · the communication wears the scheme --------------------------- */
.cx__card{aspect-ratio:16/10;display:flex;flex-direction:column;gap:9px;
  padding:clamp(16px,2.4vw,34px);position:relative;overflow:hidden;border-radius:3px;
  background:var(--cx-ground);color:var(--cx-ink);
  transition:background .5s cubic-bezier(.4,0,.2,1),color .5s cubic-bezier(.4,0,.2,1)}
.cx__nav{display:flex;align-items:center;gap:8px;padding-bottom:9px;
  border-bottom:2px solid var(--cx-rule);margin-bottom:2px;
  transition:border-color .5s cubic-bezier(.4,0,.2,1)}
.cx__navdot{width:8.3px;height:10px;flex:none;
  background:url(../victory/logo/victory-mark.svg) center/contain no-repeat}
.cx__navt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.cx__navcue{margin-left:auto;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--cx-nav);transition:color .5s cubic-bezier(.4,0,.2,1)}
.cx__ck{margin:0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--cx-accent);transition:color .5s cubic-bezier(.4,0,.2,1)}
.cx__ch{margin:0;font-family:var(--vi-serif);font-size:clamp(20px,2.6vw,36px);
  line-height:1.08;font-weight:400;letter-spacing:-.018em}
.cx__cb{margin:0;font-family:var(--vi-serif);font-size:clamp(12px,1.15vw,15.5px);
  line-height:1.5;max-width:36ch}
.cx__em{font-style:normal;font-weight:600;color:var(--cx-accent);
  box-shadow:inset 0 -.36em 0 var(--cx-field);
  transition:color .5s cubic-bezier(.4,0,.2,1),box-shadow .5s cubic-bezier(.4,0,.2,1)}
.cx__cta{margin:4px 0 0;align-self:flex-start;padding:9px 16px;border-radius:2px;
  font-family:var(--vi-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;background:var(--vi-orange);color:#292929}
.cx__field{margin-top:auto;display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:2px;background:var(--cx-field);
  transition:background .5s cubic-bezier(.4,0,.2,1)}
.cx__fieldl{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--cx-ink);opacity:.8}
.cx__fieldv{margin-left:auto;font-size:12px;font-weight:700;color:var(--cx-ink)}
.cx__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--vi-orange)}
.cx__demolab{margin:9px 0 0;font-size:10.5px;letter-spacing:.06em;color:var(--vi-mute)}

.cx__read{min-width:0}
.cx__panel[hidden]{display:none}
.cx__head{margin:0 0 7px;font-size:clamp(12px,1.15vw,14px);letter-spacing:.1em;
  font-weight:700;text-transform:uppercase;line-height:1.25}
.cx__copy{margin:0 0 13px;font-size:clamp(12.5px,1.1vw,14.5px);line-height:1.5;
  color:rgba(20,20,20,.84)}

/* ---- §6 · the wheel ----------------------------------------------------- */
.cx__wheelwrap{display:block;margin:0 0 14px;padding:0 0 12px;
  border-bottom:1px solid var(--vi-line-2)}
.cx__wheel{width:clamp(150px,17vw,214px);height:auto;display:block;margin:0 auto}
.cx__wname{font-family:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;font-weight:400;fill:#7C818A;letter-spacing:-.006em}
.cx__wheelcap{margin:6px 0 0;font-size:11px;line-height:1.4;color:var(--vi-mute);
  text-align:center}

.cx__meter{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:10px;padding:6px 0;border-bottom:1px solid var(--vi-line-2)}
.cx__mlab{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--vi-mute)}
.cx__pips{display:flex;gap:4px}
.cx__pip{width:100%;min-width:14px;height:8px;border:1px solid rgba(20,20,20,.3);
  border-radius:1px}
.cx__pip.is-on{background:var(--vi-orange);border-color:var(--vi-orange)}
.cx__meter[data-kind="variety"] .cx__pip.is-on{background:var(--vi-blue);
  border-color:var(--vi-blue)}
.cx__mval{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.cx__press,.cx__best{margin:11px 0 0;font-size:12px;line-height:1.42;
  color:rgba(20,20,20,.84)}
.cx__mk{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--vi-mute);margin-bottom:3px}
.cx__mk b{color:var(--vi-ink)}

/* ---- §5 · the allocation ----------------------------------------------- */
.cx__alloc{margin-top:13px}
.cx__bar2{display:flex;height:12px;border-radius:2px;overflow:hidden;
  border:1px solid rgba(20,20,20,.14)}
.cx__seg{display:block;height:100%}
.cx__sws{list-style:none;margin:9px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.cx__sws li{display:grid;grid-template-columns:16px 1fr;grid-template-rows:auto auto;
  column-gap:8px;align-items:center}
.cx__sw{grid-row:1 / span 2;width:16px;height:16px;border-radius:2px;
  border:1px solid rgba(20,20,20,.22)}
.cx__swn{font-size:11px;font-weight:600;line-height:1.15}
.cx__swh{font-size:9.5px;letter-spacing:.07em;color:var(--vi-mute);
  font-variant-numeric:tabular-nums}
.cx__ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.cx__cmpwrap{display:grid;gap:clamp(12px,2vw,26px)}
/* the comparison takes the whole stage, because two specimens clipped by a
   fixed ratio would be comparing two crops rather than two schemes */
.cx[data-cx-compare="true"] .cx__stage{grid-template-columns:1fr}
.cx[data-cx-compare="true"] .cx__read{margin-top:clamp(14px,2vw,26px)}
/* at full width the wheel and the readout sit beside each other, so the
   comparison is not followed by a band of empty page */
@media (min-width:781px){
  .cx[data-cx-compare="true"] .cx__read{display:grid;
    grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
    gap:clamp(16px,2.2vw,34px);align-items:start}
  .cx[data-cx-compare="true"] .cx__wheelwrap{margin:0;padding:0;border-bottom:0}
}
.cx[data-cx-compare="true"] .cx__card{aspect-ratio:auto;min-height:clamp(210px,26vw,300px)}
.cx[data-cx-compare="true"] [data-cx-cap]{display:none}
.cx__cmpsay{margin:10px 0 0;font-size:10.5px;letter-spacing:.06em;color:var(--vi-mute)}
.cx__facts{margin:12px 0 0;display:grid;gap:8px}
.cx__facts > div{display:grid;grid-template-columns:minmax(96px,29%) 1fr;gap:10px;align-items:baseline;
  padding-top:8px;border-top:1px solid var(--vi-line,rgba(0,0,0,.1))}
.cx__facts dt{margin:0;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--vi-mute)}
.cx__facts dd{margin:0;font-size:clamp(12px,1.05vw,13.5px);line-height:1.45}
.cx__cmpwrap[data-on="true"]{grid-template-columns:1fr 1fr}
.cx__cmplab{margin:0 0 6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--vi-mute)}
.cx__cmplab b{color:var(--vi-ink);letter-spacing:.09em}
.cx__ab{display:none;gap:0;margin:9px 0 0}
.cx [data-cx-compare][aria-pressed="true"]{background:var(--vi-orange);color:#231000}
@media (max-width:720px){
  .cx__cmpwrap[data-on="true"]{grid-template-columns:1fr}
  .cx__cmpwrap[data-on="true"] > *[data-cx-side="b"]{display:none}
  .cx__cmpwrap[data-on="true"][data-show="b"] > *[data-cx-side="a"]{display:none}
  .cx__cmpwrap[data-on="true"][data-show="b"] > *[data-cx-side="b"]{display:block}
  .cx__cmpwrap[data-on="true"] ~ .cx__ab{display:flex}
}
.cx__live{margin:9px 0 0;font-size:11px;letter-spacing:.08em;color:var(--vi-mute);
  min-height:1.2em}

/* ---- chapter 06 · the inheritance exhibit ------------------------------
   One coordinate space, so the sources sit exactly under the parts they
   draw. Every dimension called out is read from the approved artwork or
   from geometry-manifest.json; nothing here is a redrawing. */
.vinh{margin:0;width:100%;max-width:none}
.vinh__scroll{width:100%}
.vinh__fig{display:block;width:100%;height:auto;
  background:linear-gradient(180deg,#FBFAF8 0%,#F4F3F1 100%);
  border:1px solid var(--vi-line,rgba(20,20,20,.12));border-radius:3px}
.vinh__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.vinh__scroll:focus-visible{outline:2px solid var(--vi-orange,#FF692E);outline-offset:2px}
/* the composition argues by alignment between the control and the forms
   beneath it, so it is never restacked. Below the width where its 12px
   annotations stop being readable it keeps its size and scrolls instead. */
@media (max-width:900px){
  .vinh{position:relative}
  .vinh__scroll{border:1px solid var(--vi-line,rgba(20,20,20,.12));border-radius:3px}
  .vinh__fig{min-width:1040px;border:0;border-radius:0}
  /* the cut edge is the affordance; this makes it read as one rather than
     as a crop, without spending a line of copy on saying "scrolls" */
  .vinh::after{content:"";position:absolute;top:1px;right:1px;width:34px;
    height:calc(100% - 2px - 3.4em);pointer-events:none;border-radius:0 3px 3px 0;
    background:linear-gradient(90deg,rgba(244,243,241,0),rgba(244,243,241,.92))}
}
.vinh__cap{margin:13px 0 0;font-size:11.5px;letter-spacing:.05em;
  color:var(--vi-mute,rgba(20,20,20,.56));max-width:62ch}
.vinh-lab{font-family:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  fill:#B43B12}
.vinh-note{font-family:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12.5px;font-weight:600;fill:#20282D}
.vinh-sub{font-family:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12px;font-weight:400;fill:#5F7078}
.vinh-num{font-family:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:11.5px;font-weight:700;fill:#0A6B97;font-variant-numeric:tabular-nums}
.vinh-lead{stroke:#98A6AC;stroke-width:1;fill:none}
.vinh-guide{stroke:#B43B12;stroke-width:1;stroke-dasharray:3 4;fill:none;opacity:.55}
.vinh-rule{stroke:#C9D2D5;stroke-width:1;fill:none}
@media (max-width:780px){
  .vinh__cap{font-size:11px}
}

/* ---- §7b · ONE RELATIONSHIP, TWO JOBS ---------------------------------
   The mirror of the comparison above. There the words were held and the
   relationship changed; here the relationship is held and everything a
   designer actually controls changes instead. Both cards carry the same
   five Monochromatic values, declared inline so a reader can check them. */
.cxj{margin:0}
.cxj__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2.2vw,30px)}
.cxj__lab{margin:0 0 9px;display:flex;align-items:baseline;gap:9px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.cxj__n{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:2px;
  background:var(--vi-ink);color:#fff;font-size:10px;letter-spacing:.04em}
.cxj__card{aspect-ratio:auto;min-height:clamp(215px,25vw,290px)}
/* the chapter's own paragraph rules reach into this figure in a way they
   never reach the continuum specimen, which sits inside section.cx. State
   the specimen's own type here so both cards match the instrument above. */
.cxj .cx__ch,.cxj .cx__cb{font-family:var(--vi-serif)}
.cxj .cx__ck,.cxj .cx__cta,.cxj .cx__navt,.cxj .cx__navcue,
.cxj .cx__fieldl,.cxj .cx__fieldv{font-family:var(--vi-ui)}
.cxj .cx__ch{line-height:1.08;letter-spacing:-.018em;font-weight:400}
.cxj .cx__cb{line-height:1.5}
.cxj__facts{margin:11px 0 0;display:grid;gap:7px}
.cxj__facts > div{display:grid;grid-template-columns:minmax(84px,32%) 1fr;
  gap:10px;align-items:baseline;padding-top:7px;
  border-top:1px solid var(--vi-line-2)}
.cxj__facts dt{margin:0;font-size:9.5px;letter-spacing:.13em;font-weight:700;
  text-transform:uppercase;color:var(--vi-mute)}
.cxj__facts dd{margin:0;font-size:12px;line-height:1.4}
.cxj__cap{margin:15px 0 0;font-size:11px;letter-spacing:.05em;color:var(--vi-mute)}
/* A · the field carries the surface; the action closes, quietly */
.cxj__card--a .cx__cta{background:transparent;color:var(--cx-accent);
  padding:0;border-radius:0;box-shadow:inset 0 -2px 0 var(--cx-accent)}
/* B · the action is promoted: a band at the head, the call above the
   headline, the status line dropped, the closing rule thickened */
.cxj__card--b{padding-top:clamp(25px,3.6vw,44px)}
.cxj__card--b .cxj__band{position:absolute;left:0;right:0;top:0;
  height:clamp(15px,2.2vw,25px);background:var(--vi-orange)}
.cxj__card--b .cx__nav{order:1}
.cxj__card--b .cx__ck{order:2}
.cxj__card--b .cx__cta{order:3;font-size:12.5px;padding:11px 20px}
.cxj__card--b .cx__ch{order:4;font-size:clamp(16px,1.9vw,25px)}
.cxj__card--b .cx__cb{order:5;margin-top:auto}
.cxj__card--b .cx__bar{height:9px}
@media (max-width:780px){
  .cxj__pair{grid-template-columns:1fr}
}

/* ---- §7 · the practice matrix ------------------------------------------ */
.cmx{width:100%;border-collapse:collapse;
  font-family:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#141414}
/* two columns since the felt effect moved into the panels that state it;
   held to a reading width so the pairing stays a pairing */
@media (min-width:781px){
  .cmx{max-width:560px}
  .cmx thead th:first-child,.cmx tbody tr>*:first-child{width:46%}
}
.cmx__cap{caption-side:bottom;text-align:left;padding-top:11px;font-size:11.5px;
  color:rgba(20,20,20,.56);letter-spacing:.02em}
.cmx thead th{text-align:left;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:rgba(20,20,20,.56);padding:0 12px 9px 0;
  border-bottom:1px solid rgba(20,20,20,.14)}
.cmx tbody th,.cmx tbody td{padding:0;border-bottom:1px solid rgba(20,20,20,.07);
  vertical-align:middle}
.cmx__b{display:flex;align-items:center;gap:10px;width:100%;padding:14px 12px 14px 0;
  border:0;background:transparent;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit}
.cmx__b:hover .cmx__need{color:#FF692E}
.cmx__b:hover .cmx__arr{transform:translateX(3px);color:#FF692E}
.cmx__b:focus-visible{outline:2px solid #065986;outline-offset:-2px}
.cmx__need{font-size:clamp(15px,1.7vw,21px);font-weight:600;letter-spacing:-.015em;
  transition:color .2s ease}
.cmx__arr{color:rgba(20,20,20,.3);transition:transform .2s ease,color .2s ease}
.cmx__rel{font-size:clamp(12px,1.1vw,14px);font-weight:600;padding-right:12px}
.cmx__eff{font-size:clamp(12px,1.1vw,14px);color:rgba(20,20,20,.72);padding-right:12px}
.cmx__con{font-size:clamp(11px,1vw,13px);color:rgba(20,20,20,.56);white-space:nowrap}
.cmx tbody tr:hover{background:rgba(255,105,46,.045)}

@media(max-width:1000px){
  .cx__stage{grid-template-columns:1fr}
  .cx__card{aspect-ratio:auto;min-height:280px}
}
@media(max-width:640px){
  .cx__tabs{grid-template-columns:repeat(2,1fr)}
  .cx__tab:nth-child(3){border-left:0}
  .cx__tab:nth-child(n+3){border-top:1px solid var(--vi-line)}
  .cx__sws{grid-template-columns:1fr}
  .cmx thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmx tbody tr{display:grid;grid-template-columns:1fr auto;gap:0 10px;
    padding:12px 0;border-bottom:1px solid rgba(20,20,20,.07)}
  .cmx tbody th,.cmx tbody td{border:0;padding:0}
  .cmx__b{padding:0}
  .cmx__rel{grid-column:2;text-align:right;align-self:center}
  .cmx__eff{grid-column:1 / -1;padding-top:5px}
  .cmx__con{grid-column:1 / -1;padding-top:2px}
}
@media (prefers-reduced-motion:reduce){
  .cx__card,.cx__cta,.cx__bar,.cx__nav,.cx__em,.cx__field,.cx__ck,.cx__navcue{
    transition:none !important}
  .cx__stage{display:block}
  .cx__panel[hidden]{display:block !important}
  .cx__panel{border-top:1px solid var(--vi-line);padding-top:16px;margin-top:16px}
}
.site-shell .cx.cx,
.site-shell .cx .cx__tab.cx__tab,
.site-shell .cx .cx__ck.cx__ck,
.site-shell .cx .cx__cta.cx__cta,
.site-shell .cx .cx__head.cx__head,
.site-shell .cx .cx__mk.cx__mk,
.site-shell .cx .cx__swh.cx__swh,
.site-shell .cx .cx__navt.cx__navt,
.site-shell .cx .cx__navcue.cx__navcue,
.site-shell .cx .cx__fieldl.cx__fieldl,
.site-shell .cx .cx__axis.cx__axis,
.site-shell .cmx.cmx,
.site-shell .cmx .cmx__b.cmx__b{font-family:var(--vi-ui,'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif)}
.site-shell .cx .cx__ch.cx__ch,
.site-shell .cx .cx__cb.cx__cb{font-family:'Source Serif 4',Georgia,serif}
.site-shell .cx .cx__copy.cx__copy,
.site-shell .cx .cx__press.cx__press,
.site-shell .cx .cx__best.cx__best,
.site-shell .cx .cx__wheelcap.cx__wheelcap,
.site-shell .cx .cx__swn.cx__swn,
.site-shell .cx .cx__live.cx__live,
.site-shell .cx .cx__demolab.cx__demolab{font-family:var(--vi-ui)}


/* ---- the explainer stage --------------------------------------------- */

/* ---- the explainer stage ----------------------------------------------- */
.bxp{margin:clamp(18px,2.6vh,30px) 0 0;container-type:inline-size}
.bxp__stage{position:relative;width:100%;aspect-ratio:2/1;max-height:min(62svh,600px);overflow:hidden;background:#fff;border:1px solid rgba(23,23,23,.14);isolation:isolate}
@media (max-width:760px){.bxp__stage{aspect-ratio:5/7;max-height:min(78svh,640px)}}
.bxp__ctl{display:flex;align-items:center;gap:8px;margin-top:10px}.bxp__ctl--vp{display:block}
.bxp__b{font:500 12px/1 'Public Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--carbon);background:#fff;border:1px solid rgba(23,23,23,.28);border-radius:999px;padding:9px 14px;cursor:pointer}
.bxp__b:hover{border-color:var(--intervention);color:var(--intervention)}
.bxp__b:focus-visible{outline:2px solid var(--intervention);outline-offset:3px}
.bxp__step{font:500 12px/1 'Public Sans',system-ui,sans-serif;letter-spacing:.08em;color:rgba(20,20,20,.6);margin-left:auto}
.bxp__cap{margin:clamp(10px,1.4vh,16px) 0 0;font:400 14px/1.5 'Public Sans',system-ui,sans-serif;color:rgba(20,20,20,.72);max-width:64ch}
@media (prefers-reduced-motion:reduce){.bxp__ctl [data-bxp-toggle]{display:none}}
.bxp *{transition-property:opacity,transform,background-color,color,border-color,stroke,fill,width,height,left,top;transition-duration:.6s;transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.bxp.is-static *{transition:none!important}
.bxp__stage.project-content{font-family:'Public Sans',system-ui,sans-serif}
.bsv__stage.project-content{font-family:'Public Sans',system-ui,sans-serif}


/* ---- colour: the continuum sequence ---------------------------------- */

/* ---- colour: the continuum sequence ---------------------------------------- */
.cxs{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;padding:clamp(14px,2.6cqw,28px);gap:clamp(10px,2cqw,20px);background:#FBFAF7;font-family:'Public Sans',system-ui,sans-serif}
.cxs__axis{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font-size:clamp(10px,1.2cqw,12px);letter-spacing:.14em;color:rgba(20,20,20,.6)}
.cxs__axisline{position:relative;height:2px;background:rgba(20,20,20,.18)}
.cxs__mark{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#FF692E;transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.2,.7,.2,1)}
.cxs__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,2.4cqw,28px);min-height:0;align-items:center}
.cxs .cx__demo{margin:0;min-height:0;max-height:100%;display:grid;align-items:center}
.cxs .cx__card{--cx-ground:#FFF4ED;max-height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(14px,3.2cqw,44px);gap:clamp(8px,1.3cqw,18px);transition:background-color .9s,color .9s,border-color .9s}
.cxs .cx__ch{font-size:clamp(20px,3.5cqw,50px)}.cxs .cx__cb{font-size:clamp(13px,1.7cqw,22px);max-width:34ch}.cxs .cx__cta{font-size:clamp(11px,1.1cqw,14px)}.cxs .cx__ck{font-size:clamp(9px,.85cqw,11px)}.cxs .cx__navt,.cxs .cx__navcue{font-size:clamp(9px,.9cqw,12px)}.cxs .cx__fieldl,.cxs .cx__fieldv{font-size:clamp(10px,1cqw,13px)}
.cxs__read{display:grid;grid-template-rows:auto auto auto auto;align-content:center;gap:6px;min-height:0}
.cxs__read .cx__wheelwrap{width:min(100%,clamp(150px,20cqw,250px));margin:0}
.cxs__read .cx__wheel{width:100%;height:auto}
.cxs__fam{margin:0;font-size:clamp(11px,1.3cqw,13px);letter-spacing:.16em;text-transform:uppercase;color:rgba(20,20,20,.62)}
.bxp .cxs__tone{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(20px,3cqw,34px);line-height:1.1;color:#141414}
.cxs__say{margin:0;font-size:clamp(13px,1.6cqw,16px);line-height:1.45;color:rgba(20,20,20,.78);max-width:34ch}
@media (max-width:760px){.cxs__row{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.cxs__read{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;grid-auto-flow:dense;align-items:center;column-gap:12px}.cxs__read .cx__wheelwrap{grid-row:1/4;width:min(30cqw,120px)}}
/* static (reduced motion) view: the four families named beneath the specimen */
.cxs__fams{display:none;margin:0;padding:0;list-style:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bxp.is-static .cxs__fams{display:grid}
.bxp.is-static .cxs{grid-template-rows:auto 1fr auto}
.cxs__fams li{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;font-size:clamp(10px,1.1cqw,12px);line-height:1.3;color:rgba(20,20,20,.7)}
.cxs__fams li b{font-weight:600;color:#141414;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(9px,1cqw,11px)}
.cxs__fams li span:last-child{grid-column:2}
.cxs__famsw{grid-row:1/3;width:26px;height:26px;border-radius:4px;background:linear-gradient(135deg,var(--f) 0 50%,var(--a) 50% 100%);box-shadow:inset 0 -4px 0 var(--r)}
@media (max-width:760px){.cxs__fams{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the within-family job: the card re-composes, the call leads */
.cxs .cx__card .cx__cta{transition:order 0s,transform .7s}
.cxs .cx__card .cxs__band{display:none;height:clamp(10px,2cqw,18px);background:var(--cx-accent);margin:calc(-1*clamp(14px,2.2cqw,24px)) calc(-1*clamp(14px,2.2cqw,24px)) 10px}
.cxs.is-job .cx__card{display:flex;flex-direction:column}
.cxs.is-job .cx__card .cxs__band{display:block;order:-2}
.cxs.is-job .cx__card .cx__nav{order:-1}
.cxs.is-job .cx__card .cx__ck{order:0}
.cxs.is-job .cx__card .cx__cta{order:1}
.cxs.is-job .cx__card .cx__ch{order:2}
.cxs.is-job .cx__card .cx__cb{order:3}
.cxs.is-job .cx__card .cx__field{display:none}
.cxs.is-job .cx__card .cx__bar{order:4}

/* ---- type + icon ------------------------------------------------------ */

/* ---- type + icon ------------------------------------------------------------- */
.bxt{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto 1fr 1.2fr;align-items:center;gap:clamp(10px,2cqw,24px);padding:clamp(14px,3cqw,36px);background:#FBFAF7;font-family:'Public Sans',system-ui,sans-serif}
.bxt__cell{display:grid;justify-items:center;gap:8px;opacity:.25;transform:scale(.96)}
.bxt__frame{position:relative;width:min(100%,clamp(120px,22cqw,300px));aspect-ratio:1;background:#fff;border:1px solid rgba(23,23,23,.14)}
.bxt__frame svg{position:absolute;inset:12%;width:76%;height:76%;color:#141414}
.bxt__frame .psx__art{fill:#141414}
.bxt__rule{inset:0!important;width:100%!important;height:100%!important;fill:none;stroke:#FF692E;stroke-width:1.6;opacity:0}
.bxt__rule circle,.bxt__rule line{stroke-dasharray:4 4}
.bxt__lab{margin:0;font-size:clamp(11px,1.3cqw,13px);letter-spacing:.1em;text-transform:uppercase;color:rgba(20,20,20,.6)}
.bxt__lab b{color:#141414}
.bxt__rule-card{opacity:0;transform:translateY(8px);border-left:3px solid #FF692E;padding-left:12px}
.bxt__k{margin:0 0 6px;font-size:clamp(10px,1.2cqw,12px);letter-spacing:.14em;text-transform:uppercase;color:#BC1B06}
.bxt__rules{margin:0;padding:0;list-style:none;font-size:clamp(12px,1.6cqw,18px);line-height:1.55;color:#141414}
.bxt__use{display:grid;justify-items:start;gap:8px;opacity:0;transform:translateY(8px)}
.bxt__input{display:flex;align-items:center;gap:10px;width:100%;max-width:340px;height:52px;padding:0 14px;border:1.5px solid #0A6B97;border-radius:6px;background:#fff;color:#071C35;font-size:16px}
.bxt__ic{width:24px;height:24px;flex:none;color:#071C35}
.bxt__ic svg{width:24px;height:24px;display:block}
.bxt__ph{color:rgba(7,28,53,.6)}
.bxp[data-step="1"] .bxt__cell--o,.bxp[data-step="2"] .bxt__cell--o,.bxp[data-step="3"] .bxt__cell--o,.bxp[data-step="4"] .bxt__cell--o{opacity:1;transform:none}
.bxp[data-step="2"] .bxt__rule,.bxp[data-step="3"] .bxt__rule,.bxp[data-step="4"] .bxt__rule{opacity:1}
.bxp[data-step="2"] .bxt__rule-card,.bxp[data-step="3"] .bxt__rule-card,.bxp[data-step="4"] .bxt__rule-card{opacity:1;transform:none}
.bxp[data-step="3"] .bxt__cell--i,.bxp[data-step="4"] .bxt__cell--i{opacity:1;transform:none}
.bxp[data-step="5"] .bxt__use{opacity:1;transform:none}
.bxp[data-step="5"] .bxt__cell--o{opacity:1;transform:none}.bxp[data-step="5"] .bxt__rule{opacity:1}.bxp[data-step="5"] .bxt__rule-card{opacity:1;transform:none}.bxp[data-step="5"] .bxt__cell--i{opacity:1;transform:none}
.bxt__cell--o{grid-area:1/1/2/2}.bxt__rule-card{grid-area:1/2/2/3}.bxt__cell--i{grid-area:1/3/2/4}.bxt__use{grid-area:1/4/2/5}
.bxt__fam{grid-area:1/3/2/5;align-self:stretch;position:relative;z-index:2;background:#fff;border:1px solid rgba(23,23,23,.14);padding:clamp(10px,1.8cqw,20px);display:grid;grid-template-rows:1fr auto;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.bxp[data-step="4"] .bxt__fam{opacity:1;transform:none}
.bxt__famgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(4px,.8cqw,10px);align-content:center}
.bxt__famc{display:grid;justify-items:center;gap:3px;padding:6px 2px;border-radius:4px;color:#141414;opacity:.55;transition:opacity .2s ease,background .2s ease,transform .2s ease}
.bxt__famc.is-seen{opacity:.85}.bxt__famc.is-lit{opacity:1;background:rgba(255,105,46,.12);transform:translateY(-2px)}
.bxt__famsvg svg{width:clamp(20px,2.6cqw,30px);height:clamp(20px,2.6cqw,30px);display:block}
.bxt__famn{font-size:clamp(8px,.95cqw,11px);letter-spacing:.06em;color:rgba(20,20,20,.62);white-space:nowrap}
.bxt__famc.is-lit .bxt__famn{color:#BC1B06}
.bxt__famlab{margin:0;font-size:clamp(10px,1.15cqw,12.5px);letter-spacing:.06em;color:rgba(20,20,20,.7)}.bxt__famlab b{color:#141414}
@media (max-width:760px){.bxt__cell--o{grid-area:1/1/2/2}.bxt__cell--i{grid-area:1/2/2/3}.bxt__rule-card{grid-area:2/1/3/3}.bxt__use{grid-area:3/1/4/3}.bxt__fam{grid-area:1/1/4/3;align-self:stretch}.bxt__famgrid{grid-template-columns:repeat(5,1fr)}.bxt__famn{display:none}}
.bxp.is-static .bxt__cell,.bxp.is-static .bxt__rule,.bxp.is-static .bxt__rule-card,.bxp.is-static .bxt__use{opacity:1;transform:none}
@media (max-width:760px){.bxt{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;align-content:center;gap:10px 14px;padding:14px}.bxt__rule-card{grid-column:1/3}.bxt__use{grid-column:1/3}.bxt__frame{width:min(100%,112px)}.bxt__rules{font-size:12px;line-height:1.4}.bxt__input{height:44px;font-size:14px}}

.cx--ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media (max-width:760px){.cx--ledger{grid-template-columns:1fr}}


/* ---- the Public Sans specimen and the icon library -------------------- */

/* ============================================================================
   §11 · FIVE COMPARISONS.

   Three families are shown at the same place in the alphabet, so the typeface
   is the only variable: the uppercase O and the magnifying glass drawn from
   it. In rows two and three the letterform is not a picture of the O beside
   the icon; it is the identical compound path, with the handle removed.

   Jost is shown at its W because a geometric sans states itself at its apexes,
   and Quantico at its O because a square face states itself where a circle
   should have been.
   ========================================================================== */
.psx{display:grid;gap:0;border-top:1px solid var(--vi-line)}
.psx__row{display:grid;
  grid-template-columns:minmax(0,1.15fr) clamp(64px,7vw,104px) 24px clamp(64px,7vw,104px) minmax(0,1.15fr);
  align-items:center;gap:clamp(10px,1.6vw,26px);
  padding:clamp(14px,2.2vh,24px) 0;border-bottom:1px solid var(--vi-line-2)}
.psx__id{min-width:0}
.psx__cat{margin:0 0 3px;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:var(--vi-orange)}
.psx__fam{margin:0;font-size:clamp(15px,1.7vw,21px);font-weight:600;letter-spacing:-.015em}
.psx__wt{margin:1px 0 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vi-mute);font-weight:600}
.psx__trait{margin:0;font-size:clamp(11.5px,1vw,13px);line-height:1.45;
  color:rgba(20,20,20,.78);max-width:36ch}
.psx__cell{margin:0;display:grid;justify-items:center;gap:6px}
.psx__frame{width:100%;aspect-ratio:1;display:grid;place-items:center;
  border:1px solid var(--vi-line-2);border-radius:2px;background:#fff}
.psx__art{width:78%;height:78%;display:block;color:var(--vi-ink)}
.psx__cell figcaption{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--vi-mute)}
.psx__arrow{text-align:center;color:var(--vi-orange);font-size:19px}
.psx__say{margin:0;font-size:clamp(11.5px,1vw,13px);line-height:1.5;
  color:rgba(20,20,20,.84);max-width:38ch}
@media(max-width:900px){
  .psx__row{grid-template-columns:1fr 24px 1fr;
    grid-template-areas:"id id id" "gl ar ic" "say say say";gap:10px}
  .psx__id{grid-area:id}.psx__cell:nth-of-type(1){grid-area:gl}
  .psx__arrow{grid-area:ar}.psx__cell:nth-of-type(2){grid-area:ic}
  .psx__say{grid-area:say;max-width:none}
  .psx__frame{max-width:120px;margin:0 auto}
}

/* ============================================================================
   §12 · THE ATLAS, COMPRESSED.

   Fourteen stacked category blocks became one instrument. The grid is dense
   and scrolls inside itself; the rail answers the only question a size ramp is
   really asked, which is what THIS icon looks like at every size at once.
   ========================================================================== */
.pa{--pa-size:24px;border:1px solid var(--vi-line);border-radius:3px;background:#fff;
  font-family:var(--vi-ui);color:var(--vi-ink);display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;max-height:55vh}
.pa__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 12px;
  border-bottom:1px solid var(--vi-line-2);background:#FAF9F7}
.pa__bar .vi-ctl__b{padding:6px 10px;min-width:38px;text-align:center}
.pa__link{margin-left:auto;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--vi-orange);text-decoration:none;white-space:nowrap}
.pa__link:hover{text-decoration:underline}
.pa__chips{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px;
  border-bottom:1px solid var(--vi-line-2)}
.pa__chip{border:1px solid var(--vi-line);background:#fff;border-radius:99px;
  padding:4px 10px;font-family:var(--vi-ui);font-size:10px;letter-spacing:.06em;
  color:var(--vi-mute);cursor:pointer;transition:background .16s ease,color .16s ease}
.pa__chip b{font-weight:700;opacity:.7;margin-left:3px}
.pa__chip:hover{background:rgba(255,105,46,.08)}
.pa__chip[aria-pressed="true"]{background:var(--vi-orange);border-color:var(--vi-orange);
  color:#231000}
.pa__chip:focus-visible,.pa__b:focus-visible{outline:2px solid var(--vi-blue);
  outline-offset:2px}
.pa__body{overflow-y:auto;padding:10px 12px;scrollbar-width:thin;min-height:0}
.pa__grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:2px}
.pa__cell[hidden]{display:none}
.pa__b{display:grid;justify-items:center;gap:5px;width:100%;padding:9px 4px;
  border:1px solid transparent;border-radius:2px;background:transparent;cursor:pointer;
  font-family:var(--vi-ui);color:var(--vi-ink)}
.pa__b:hover{background:rgba(255,105,46,.06);border-color:rgba(255,105,46,.35)}
.pa__b[aria-pressed="true"]{background:rgba(255,105,46,.12);
  border-color:rgba(255,105,46,.6)}
.pa__ico{width:var(--pa-size);height:var(--pa-size);fill:currentColor;display:block;
  transition:width .18s ease,height .18s ease}
.pa__nm{font-size:9px;letter-spacing:.04em;color:var(--vi-mute);text-align:center;
  line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa__rail{display:flex;align-items:flex-end;gap:clamp(10px,2vw,26px);padding:10px 14px;
  border-top:1px solid var(--vi-line-2);background:#FAF9F7;overflow-x:auto}
.pa__r{display:grid;justify-items:center;gap:4px;flex:none}
.pa__rico{fill:currentColor;color:var(--vi-ink);display:block}
.pa__rl{font-size:9px;letter-spacing:.1em;color:var(--vi-mute);font-weight:700}
.pa__rail .vi-ctl__lab{align-self:center;margin-right:6px;flex:none}
@media(max-width:640px){
  .pa{max-height:none}
  .pa__body{max-height:36vh}
  .pa__grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  .pa__link{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .pa__ico,.pa__chip,.pa__b{transition:none}
}
.site-shell .pa.pa,.site-shell .pa .pa__chip.pa__chip,
.site-shell .pa .pa__nm.pa__nm,.site-shell .pa .pa__link.pa__link,
.site-shell .pa .pa__b.pa__b,.site-shell .pa .pa__rl.pa__rl,
.site-shell .psx .psx__fam.psx__fam,.site-shell .psx .psx__trait.psx__trait,
.site-shell .psx .psx__say.psx__say,.site-shell .psx .psx__cat.psx__cat,
.site-shell .psx .psx__wt.psx__wt{
  font-family:'Public Sans','Helvetica Neue',Helvetica,Arial,sans-serif}


/* ---- reserved boxes for the interface artwork -------------------------------
   Lifted from the Brand Systems reserve block. Without these the component,
   waymark and screen viewers are zero-height until the SVG bytes land, and the
   page jumps under the reader's cursor. */
.vsys-spec > img,.vsys-inst__art > img,.vsys-grid img,.vsys-cmp__art > img{aspect-ratio:480 / 196}
.vsys-way__art > img{aspect-ratio:360 / 440}
.vsys-screens__frame > img{aspect-ratio:430 / 932}
.vsys-spec > img,.vsys-inst__art > img,.vsys-way__art > img,
.vsys-screens__frame > img,.vsys-grid img{height:auto;max-width:100%}

/* The interface viewers were written for a fixed-measure page. On this route
   the rail owns the measure, so their internal caps are released. */
.vic .vc .vsys-head,.vic .vc .vsys-body,.vic .vc .vsys-eyebrow,.vic .vc .vsys-pull{max-width:none;width:100%}

/* --- the first frame is never empty ----------------------------------------
   Step 0 of the type stage is named "Letterform", and the ported rules left
   every cell at opacity .25 until step 1 — so the frame the reader lands on
   showed a ghost of the thing it was naming. The letter is lit from the start;
   the icon still waits until the argument reaches it. */
.vic .bxp[data-bxp="type"][data-step="0"] .bxt__cell--o{opacity:1;transform:none}

/* ==========================================================================
   The route's own framing for the ported exhibits
   ========================================================================== */

/* --- the lens opening ----------------------------------------------------- */
.vic .vio{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--case-gap);align-items:center;
}
.vic .vio__copy .vc-hdeck{margin-block-start:var(--vs-4);max-width:var(--m-body)}
.vic .vio__mark{
  display:grid;place-items:center;
  padding:clamp(24px,4vw,56px);
  min-height:clamp(140px,16vw,220px);
  border:1px solid var(--v-edge-soft);
}
.vic .vio__mark img{display:block;width:100%;max-width:420px;height:auto}
@media (max-width:900px){
  .vic .vio{grid-template-columns:minmax(0,1fr);gap:var(--vs-6)}
}

/* --- the atlas, bounded until the reader asks for the rest ------------------
   All 120 marks render into the DOM — search and the inspector need every
   record — but a five-thousand-pixel wall of them is not a first view. The
   grid is capped, a fade says there is more, and one control removes the cap.
   Filtering or searching removes it too, because at that point the reader is
   looking for something specific. */
.vic .vc-atlaswrap{position:relative}
.vic .vc-atlaswrap .vat__grid{max-height:1080px;overflow:hidden}
.vic .vc-atlaswrap[data-vat-open] .vat__grid{max-height:none;overflow:visible}
.vic .vat-more{
  position:relative;margin-block-start:calc(-1 * var(--vs-6));
  padding-block-start:var(--vs-8);
  display:flex;justify-content:center;
  background:linear-gradient(to bottom,transparent,var(--v-canvas-2) 78%);
}
.vic .vc-atlaswrap[data-vat-open] .vat-more{display:none}
.vic .vat-more button{
  border:0;cursor:pointer;background:var(--v-paper);color:#141414;
  font:600 12px/1 var(--v-ui);letter-spacing:.12em;text-transform:uppercase;
  padding:13px 22px;box-shadow:inset 0 0 0 1px var(--v-edge-soft);
}
.vic .vat-more button:hover{box-shadow:inset 0 0 0 2px var(--v-accent)}
.vic .vat-more button:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}

/* --- the motif orange, named in the note ---------------------------------- */
.vic .vc-swatch{
  display:inline-block;width:.72em;height:.72em;vertical-align:baseline;
  background:var(--v-motif,#F4512A);margin-inline-end:.15em;
}

/* --- the connected work --------------------------------------------------- */
.vic .vc-connected{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--case-gap);margin-block-start:var(--vs-8);
}
.vic .vc-conn{
  display:grid;gap:var(--vs-2);text-decoration:none;color:inherit;
  padding-block-start:var(--vs-4);border-block-start:1px solid var(--v-edge-soft);
  transition:border-color .18s ease;
}
.vic .vc-conn:hover{border-block-start-color:var(--v-accent)}
.vic .vc-conn__k{color:var(--v-ink-label)}
.vic .vc-conn__t{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(20px,1.9vw,28px);line-height:1.18;letter-spacing:-.015em;
  color:var(--v-ink);max-width:26ch;
}
.vic .vc-conn:hover .vc-conn__t{color:var(--v-accent)}
.vic .vc-conn:focus-visible{outline:2px solid var(--v-focus);outline-offset:4px}
@media (max-width:760px){.vic .vc-connected{grid-template-columns:minmax(0,1fr)}}

/* --- narrow-width corrections to the ported instruments ---------------------
   Two real overflows, both measured, both fixed where they start rather than
   with a clip:

   1. .pa is a grid, so its rows inherit min-width:auto, and the nowrap
      "explore the full library" link made the whole bar 338px wide inside a
      272px rail at 320. The rows may shrink; the link may wrap.
   2. .bxt__fam spans two grid columns of the type stage. At 768 its five-across
      icon survey ran 796px wide inside a 691px stage, and only the stage's own
      overflow:hidden kept it off the page — which means the last icons were
      simply not visible. It shrinks and re-columns instead.
   ------------------------------------------------------------------------- */
.vic .pa{grid-template-columns:minmax(0,1fr)}
.vic .pa > *{min-width:0}
@media (max-width:640px){
  .vic .pa__link{margin-inline-start:0;white-space:normal;letter-spacing:.06em}
  .vic .pa__bar,.vic .pa__chips,.vic .pa__body,.vic .pa__rail{padding-inline:10px}
}
.vic .bxt__fam{min-width:0}
.vic .bxt__famgrid{min-width:0}
@media (max-width:1080px){
  .vic .bxt__famgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .vic .bxt__famgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ==========================================================================
   The Strategy lens: the compositions the design direction sets
   ========================================================================== */

/* --- S1 · the two-state comparison ---------------------------------------
   Equal scale on both sides, one rule between them, and the same three-part
   structure in each: what it is called, what it says, and what it costs. The
   reader sees the change before reading the explanation of it. */
.vic .vtc{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--case-gap);
  margin-block-start:var(--vs-7);
}
.vic .vtc__side{
  display:grid;gap:var(--vs-4);align-content:start;
  padding-block-start:var(--vs-4);
  border-block-start:1px solid var(--v-edge-soft);
}
.vic .vtc__side--to{padding-inline-start:var(--case-gap);border-inline-start:1px solid var(--v-edge-soft)}
/* NOT switched on. This asked for the accent on the "to" side of the comparison
   and never rendered — the environment's reading-copy rule outranked it, so the
   key has always shipped in plain label ink, and there is no matching rule on
   the "from" side, so the pair was never designed as a pair. Turning it on now
   would be a new visual decision in a correction pass, so the declaration is
   commented out rather than deleted: uncomment this one line to adopt it.
   .vic .vtc__k--to{color:var(--v-accent)}
   The side rule above still distinguishes the "to" column by rule and indent. */
.vic .vtc__q{
  margin:0;font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(30px,3.6vw,54px);line-height:1.06;letter-spacing:-.025em;
  color:var(--v-ink-mute);max-width:14ch;text-wrap:balance;
}
.vic .vtc__side--to .vtc__q{color:var(--v-ink)}
.vic .vtc__d{margin:0;font-size:var(--t-body);line-height:var(--t-body-lh);max-width:var(--m-rationale)}
/* THE EXPLANATORY PARAGRAPH, GIVEN A SPAN RATHER THAN A LEFTOVER COLUMN.
   This row used to be 7fr | 5fr, with the "Source and scope" disclosure in the
   second column. The paragraph's own measure is wider than 7 of 12 columns at
   this type size, so the column — not the measure — decided where every line
   broke: the copy was squeezed against the column edge while the 5fr beside it
   held a single small label and a large amount of nothing.

   The disclosure has gone to the record, so the row is now a twelve-column
   field with one explicit placement. The paragraph spans eight of those twelve
   and then stops at its own measure, so the line length is chosen by the
   reading measure and the remaining four columns are deliberate margin rather
   than an abandoned column. Nothing sits beside the text to encroach on. */
.vic .vtc__read{
  margin-block-start:var(--vs-7);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--case-gap);align-items:start;
}
.vic .vtc__body{
  grid-column:1 / span 8;
  margin:0;font-size:var(--t-body);line-height:var(--t-body-lh);
  max-width:var(--m-body);text-wrap:pretty;
}
@media (max-width:1100px){
  .vic .vtc__body{grid-column:1 / span 10}
}
@media (max-width:860px){
  .vic .vtc{grid-template-columns:minmax(0,1fr);gap:var(--vs-6)}
  .vic .vtc__side--to{padding-inline-start:0;border-inline-start:0}
  .vic .vtc__read{grid-template-columns:minmax(0,1fr);gap:var(--vs-5)}
  .vic .vtc__body{grid-column:1 / -1}
}

/* --- S4 · roles, product pair, portfolio ---------------------------------- */
.vic .vrl,.vic .varch{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--case-gap);
}
.vic .vrl{grid-template-columns:repeat(5,minmax(0,1fr))}
.vic .varch{grid-template-columns:repeat(4,minmax(0,1fr))}
.vic .vrl__i,.vic .varch__i{margin:0;min-width:0;display:grid;gap:var(--vs-2);align-content:start}
.vic .vrl__i .va-rule,.vic .varch__i .va-rule{margin:0 0 var(--vs-3);border-top-color:var(--v-edge-soft)}
/* These keys are labels and take the label role's colour. They used to restate
   `--v-ink-label` here, but the environment's reading-copy rule outranked them,
   so the declaration never rendered and the approved appearance has always been
   the environment's ink. Now that labels own their own colour the restatement
   would flip them to blue, which is a change nobody approved — so it is removed
   rather than preserved. The colour comes from `.vic .va-label`; a component
   that genuinely wants the blue opts in by name, the way .vsl__src, .vpr__env
   and .vc-conn__k do. */
.vic .vrl__k,.vic .varch__r{margin:0}
.vic .vrl__n,.vic .varch__n{
  margin:0;font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(20px,1.9vw,26px);line-height:1.16;letter-spacing:-.015em;color:var(--v-ink);
}
.vic .vrl__d,.vic .varch__d{margin:0;font-size:var(--t-meta);line-height:1.5;color:var(--v-ink-mute)}
@media (max-width:1099px){
  .vic .vrl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vic .varch{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .vic .vrl,.vic .varch{grid-template-columns:minmax(0,1fr)}
}
.vic .vpp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--case-gap)}
.vic .vpp__i{margin:0}
.vic .vpp__art{
  display:grid;place-items:center;
  padding:clamp(20px,3vw,40px) clamp(18px,2.4vw,32px);
  border:1px solid var(--v-edge-soft);min-height:clamp(96px,10vw,140px);
}
.vic .vpp__art img{display:block;height:clamp(30px,3.4vw,52px);width:auto;max-width:100%;object-fit:contain}
.vic .vpp__c{margin:var(--vs-3) 0 0;font-size:var(--t-meta);line-height:1.5;color:var(--v-ink-mute);max-width:34ch}
@media (max-width:760px){.vic .vpp{grid-template-columns:minmax(0,1fr)}}

/* --- S6 · three rows of evidence ------------------------------------------
   One artifact, one claim, one route into the chapter that shows it working.
   The rows share a rail: art left, argument right, and the same rule above. */
.vic .vev{list-style:none;margin:var(--vs-6) 0 0;padding:0;display:grid;gap:var(--vs-7)}
.vic .vev__row{
  margin:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--case-gap);align-items:center;
  padding-block-start:var(--vs-5);border-block-start:1px solid var(--v-edge-soft);
}
.vic .vev__art{display:grid;place-items:center;padding:clamp(18px,2.6vw,36px);min-height:clamp(120px,12vw,180px)}
.vic .vev__art img{display:block;width:100%;height:auto;max-width:420px}
.vic .vev__say{display:grid;gap:var(--vs-2);align-content:center}
.vic .vev__k{margin:0}
.vic .vev__t{
  margin:0;font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(24px,2.6vw,38px);line-height:1.12;letter-spacing:-.02em;color:var(--v-ink);max-width:20ch;
}
.vic .vev__d{margin:0;font-size:var(--t-body);line-height:var(--t-body-lh);max-width:var(--m-body)}
.vic .vev__go{margin:var(--vs-2) 0 0}
@media (max-width:860px){
  .vic .vev__row{grid-template-columns:minmax(0,1fr);gap:var(--vs-4)}
}
/* portrait artwork (a Waymark) and landscape artwork (a control) sit in the
   same row, so neither is sized by width alone */
.vic .vev__art img{width:auto;height:auto;max-width:100%;max-height:280px}