/* ============================================================================
   victory-environment.css — High Sun and Night Road, as a visitor preference
   ----------------------------------------------------------------------------
   SCOPE. Every rule in this file is behind `.vic[data-vic-env]`. That class is
   carried by the three Victory routes and nothing else —
   work/victory-the-work-at-a-glance.html, work/brand-voice.html and
   work/brand-systems-the-work-at-a-glance.html — so the shared footer
   defaults, the homepage, Vitae and every other case study are untouched by
   it. High Sun and Night Road belong to Victory, not to JasonWalker.design.

   THE TOKENS ARE DERIVED, NOT SAMPLED. Every value below was read out of the
   200 component SVGs in assets/victory/design-system/{day,night}/…, which carry
   the same five gradient identities (v-canvas, v-panel, v-light-panel,
   v-orange-pos, v-blue) with environment-specific stops. The type colours are
   the actual <text> fills counted across those files: High Sun labels its type
   #064C73 and #5F7078, Night Road #DDF4FF and #9FB0B8. Nothing here was picked
   off a screenshot.

   TWO OF THOSE SAMPLED VALUES ARE DELIBERATELY DARKENED, and say so at the
   line. The component SVGs are artwork, drawn at artwork sizes; this file
   sets running type as small as 10px. Measured against the real grounds,
   High Sun's #5F7078 came to 4.15:1 on the canvas-2 band and Night Road's
   #FF692E to 4.40:1 on panel-1 — both under WCAG AA for text that size. They
   are held one step darker and one step lighter respectively, inside the same
   hue, so the sampled identity survives and the reading does too.

   The orange and the blue are the same gradient in both environments. They are
   the brand's accents, and they do not change when the light does — which is
   the point of the two environments: the road is the same road.
   ========================================================================== */

.vic[data-vic-env]{
  /* ---- the two grounds --------------------------------------------------- */
  --v-canvas-1:#FFF8EC; --v-canvas-2:#F1E5D4; --v-canvas-3:#DCE8EA;
  --v-panel-1:#FFFDF8;  --v-panel-2:#F7EBDD;  --v-panel-3:#E2ECEE;

  /* ---- ink ---------------------------------------------------------------- */
  --v-ink:#20282D;          /* the strong reading colour */
  --v-ink-env:#20282D;      /* the same ink, for a scope that pins --v-ink itself */
  --v-ink-label:#064C73;    /* component labels: blue in daylight */
  --v-ink-mute:#54666E;    /* was #5F7078: 4.15:1 on the canvas-2 band, under AA. 4.82:1 now. */
  --v-ink-faint:rgba(32,40,45,.52);

  /* ---- edges and planes --------------------------------------------------- */
  --v-edge:#B7C4C5;
  --v-edge-soft:rgba(32,40,45,.13);
  --v-edge-hair:rgba(32,40,45,.08);
  --v-paper:#FDFDFB;        /* the artefact plane, shared by both */
  --v-scrim:rgba(20,18,16,.90);

  /* ---- the accents, shared -------------------------------------------------*/
  --v-orange-1:#FF7A49; --v-orange-2:#FF692E; --v-orange-3:#E94F19;
  --v-blue-1:#0E709F;   --v-blue-2:#065986;   --v-blue-3:#043E5E;
  --v-accent:#B43B12;       /* the accent that reads on a light ground */
  --v-signal:#064C73;
  --v-focus:#065986;
  /* Victory orange, the construction colour. Motif selection, motif meaning and every
     construction line use this exact value in BOTH environments: the mark is the same
     mark by daylight and at night, and only the palette stage varies a motif's colour. */
  --v-motif:#F4512A;

  /* ---- derived surfaces --------------------------------------------------- */
  --v-ground:linear-gradient(146deg,var(--v-canvas-1) 0%,var(--v-canvas-2) 54%,var(--v-canvas-3) 100%);
  --v-raised:linear-gradient(146deg,var(--v-panel-1) 0%,var(--v-panel-2) 58%,var(--v-panel-3) 100%);
  --v-action:linear-gradient(135deg,var(--v-orange-1) 0%,var(--v-orange-2) 48%,var(--v-orange-3) 100%);
  --v-structure:linear-gradient(135deg,var(--v-blue-1) 0%,var(--v-blue-2) 52%,var(--v-blue-3) 100%);
  --v-lift-1:0 3px 8px rgba(0,10,18,.18);
  --v-lift-2:0 6px 18px rgba(0,10,18,.16);
  --v-lift-3:0 10px 34px rgba(0,10,18,.14);

  /* ---- faces -------------------------------------------------------------- */
  --v-ui:'Public Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --v-editorial:'Source Serif 4',Georgia,'Times New Roman',serif;

  background:var(--v-ground);
  color:var(--v-ink);
  color-scheme:light;
}

.vic[data-vic-env="night"]{
  --v-canvas-1:#0C2430; --v-canvas-2:#07141C; --v-canvas-3:#040A0E;
  --v-panel-1:#133746;  --v-panel-2:#102B38;  --v-panel-3:#0A202B;

  --v-ink:#DDF4FF;
  --v-ink-env:#DDF4FF;
  --v-ink-label:#DDF4FF;
  --v-ink-mute:#9FB0B8;
  --v-ink-faint:rgba(221,244,255,.52);

  --v-edge:#315568;
  --v-edge-soft:rgba(221,244,255,.16);
  --v-edge-hair:rgba(221,244,255,.09);
  --v-scrim:rgba(2,8,12,.92);

  --v-accent:#FF7A45;       /* was #FF692E: 4.40:1 on panel-1, under AA at 11px. 4.88:1 now. */
  --v-signal:#7CD4FD;
  --v-focus:#7CD4FD;
  --v-motif:#F4512A;        /* the same construction orange as High Sun, deliberately */

  --v-lift-1:0 3px 8px rgba(0,0,0,.34);
  --v-lift-2:0 6px 18px rgba(0,0,0,.38);
  --v-lift-3:0 10px 34px rgba(0,0,0,.42);

  color-scheme:dark;
}

/* The paper plane stays paper in both environments where an artefact is a
   document — a printed guide page, an email, an article. What changes around
   it is the workspace, not the paper. Anything that is a WORKSPACE takes the
   ground; anything that is an ARTEFACT ON PAPER keeps --v-paper and its own
   dark ink, and states so with .vic-paper. */
.vic .vic-paper{background:var(--v-paper);color:#141414;--v-ink:#141414;--v-ink-mute:rgba(20,20,20,.62);
  --v-edge-soft:rgba(20,20,20,.14);--v-edge-hair:rgba(20,20,20,.07)}

/* ============================================================================
   The page, in the chosen environment
   ========================================================================== */
.vic[data-vic-env]{min-height:100%}
.vic[data-vic-env] main{background:transparent}

/* the site shell's own ground rules are written for a fixed grey; the two
   Victory routes take the environment instead */
.vic[data-vic-env].site-shell,
.vic[data-vic-env].site-shell main{background:var(--v-ground)}
.vic[data-vic-env] .bs-sec,
.vic[data-vic-env] .bs-wrap,
.vic[data-vic-env] .bs-synth,
.vic[data-vic-env] .bsx-stmt{background:transparent}

/* type ---------------------------------------------------------------------- */
.vic[data-vic-env] .bs-title,
.vic[data-vic-env] .bs-concept,
.vic[data-vic-env] h1,.vic[data-vic-env] h2,.vic[data-vic-env] h3,.vic[data-vic-env] h4{color:var(--v-ink)}
/* Reading copy takes the environment's ink. LABELS ARE EXCLUDED, deliberately.
   This rule is element-shaped, so it used to claim every <p class="va-label"> as
   well — at (0,2,1) it outranked `.vic .va-label` at (0,2,0), and the label role
   silently lost its own colour on every element type named here while keeping it
   on the ones that are not (a <span>, a <summary>). The result was one label role
   rendering in two colours on one page, decided by tag name.

   `:not(:where(.va-label))` is the fix: :where() contributes ZERO specificity, so
   this selector is still exactly (0,2,1) and its relationship to every other rule
   in the system is unchanged. All it does is stop the environment from owning a
   role that belongs to the label component. Label colour now comes from
   `.vic .va-label` in victory-align.css, which any component can still override.

   .bs-say and .bs-lede keep the plain form on purpose: they are Brand Systems
   components that opt into environment ink by name, and they are not labels. */
.vic[data-vic-env] p:not(:where(.va-label)),
.vic[data-vic-env] li:not(:where(.va-label)),
.vic[data-vic-env] dd:not(:where(.va-label)),
.vic[data-vic-env] dt:not(:where(.va-label)),
.vic[data-vic-env] figcaption:not(:where(.va-label)),
.vic[data-vic-env] blockquote:not(:where(.va-label)),
.vic[data-vic-env] .bs-say,.vic[data-vic-env] .bs-lede{color:var(--v-ink)}
.vic[data-vic-env] .bs-kicker,.vic[data-vic-env] .bs-kicker .idx{color:var(--v-accent)}
/* an accent inside a statement turns in the italic, the way the approved plates and
   Brand Voice already do; the weight stays the statement's own */
.vic[data-vic-env] em,.vic[data-vic-env] .bs-concept em,.vic[data-vic-env].site-shell .bs-q em{color:var(--v-accent);font-style:italic;font-weight:inherit;font-family:inherit}

/* type roles on the case study's own narration: the pair the component library and
   Brand Voice use.  Statements and reading copy in the editorial serif at the
   library's weight; labels, controls and captions stay in the UI face by their
   own rules, which the project boundary on <main> now lets through. */
/* the page's own sheets ask for --bs-font in the chapter expansions; on this route that
   token is the UI face (the site's own face is left to the universal components, which
   resolve --font-brand for themselves) */
.vic[data-vic-env] main.project-content{--bs-font:var(--v-ui)}
.vic[data-vic-env] .bs-h1,.vic[data-vic-env] .bs-concept{font-family:var(--v-editorial);font-weight:400;letter-spacing:-.018em}
.vic[data-vic-env] .bs-say,.vic[data-vic-env] .bs-lede{font-family:var(--v-editorial)}
.vic[data-vic-env] .bs-lede{opacity:1;color:var(--v-ink)}

/* the artefact planes inside a chapter ------------------------------------- */
.vic[data-vic-env] .vic-panel{
  background:var(--v-raised);border:1px solid var(--v-edge-soft);
  box-shadow:var(--v-lift-2);border-radius:3px;
}
.vic[data-vic-env] .vic-hair{border-color:var(--v-edge-soft)}

/* ============================================================================
   The environment selector
   ========================================================================== */
.vic-env{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.vic-env__lab{font:600 11px/1.2 var(--v-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--v-ink-mute)}
.vic-env__seg{display:inline-flex;border:1px solid var(--v-edge);border-radius:2px;overflow:hidden;background:var(--v-paper)}
.vic[data-vic-env="night"] .vic-env__seg{background:rgba(19,55,70,.5)}
/* The Brand Voice page also carries the site's carbon skin, whose button rules are more specific
   than a single class.  The selector states its own ground and ink at matching specificity so an
   unpressed option cannot pick up an unrelated accent from the page it happens to sit on. */
.vic .vic-env__seg .vic-env__b{
  appearance:none;margin:0;cursor:pointer;border:0;border-radius:0;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 16px;
  font:500 14px/1.2 var(--v-ui);letter-spacing:.01em;
  color:var(--v-ink);background:transparent;box-shadow:none;
  border-right:1px solid var(--v-edge);
}
.vic .vic-env__seg .vic-env__b:last-child{border-right:0}
.vic .vic-env__seg .vic-env__b[aria-pressed="true"]{background:var(--v-ink);color:var(--v-canvas-1);font-weight:600}
.vic[data-vic-env="night"] .vic-env__seg .vic-env__b[aria-pressed="true"]{background:var(--v-ink);color:#07141C}
.vic .vic-env__seg .vic-env__b:focus-visible{outline:2px solid var(--v-focus);outline-offset:-3px}
/* the state is named in text and marked with a shape: never hue alone */
.vic-env__dot{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;opacity:.55}
.vic .vic-env__seg .vic-env__b[aria-pressed="true"] .vic-env__dot{background:currentColor;opacity:1}
.vic-env__say{margin:0;font:400 13px/1.5 var(--v-ui);color:var(--v-ink-mute);max-width:46ch}

/* the sticky chapter bar that carries it while scrolling -------------------- */
.vic-bar{
  position:sticky;top:var(--jw-head-h,64px);z-index:40;
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap;
  padding:9px clamp(20px,5vw,80px);
  background:color-mix(in srgb,var(--v-canvas-2) 88%,transparent);
  border-bottom:1px solid var(--v-edge-soft);
  backdrop-filter:saturate(1.1) blur(6px);
}
.vic[data-vic-env="night"] .vic-bar{background:color-mix(in srgb,var(--v-canvas-1) 90%,transparent)}
@supports not (backdrop-filter:blur(2px)){.vic-bar{background:var(--v-canvas-2)}
  .vic[data-vic-env="night"] .vic-bar{background:var(--v-canvas-1)}}
.vic .vic-bar__nav{display:flex;gap:2px;flex-wrap:wrap;margin:0;padding:0;list-style:none;flex:1 1 auto;min-width:0}
.vic .vic-bar__nav a{
  display:inline-flex;align-items:center;min-height:38px;padding:6px 10px;
  font:500 12.5px/1.2 var(--v-ui);letter-spacing:.02em;color:var(--v-ink-mute);
  text-decoration:none;border-radius:2px;white-space:nowrap;
}
.vic .vic-bar__nav a:hover, .vic .vic-bar__nav a:focus-visible{color:var(--v-ink);background:var(--v-edge-hair)}
.vic .vic-bar__nav a[aria-current="true"]{color:var(--v-ink);font-weight:600}
.vic .vic-bar__nav a:focus-visible{outline:2px solid var(--v-focus);outline-offset:2px}
.vic-bar .vic-env{flex:none}
.vic-bar .vic-env__lab{display:none}
.vic-bar__pause{
  appearance:none;cursor:pointer;min-height:38px;padding:8px 12px;
  font:500 12px/1.2 var(--v-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--v-ink-mute);background:transparent;border:1px solid var(--v-edge);border-radius:2px;
}
.vic-bar__pause[aria-pressed="true"]{color:var(--v-ink);border-color:var(--v-ink);font-weight:600}
.vic-bar__pause:focus-visible{outline:2px solid var(--v-focus);outline-offset:2px}
/* one sticky row only: the chapter bar replaces any second sticky strip */
/* the phone's one-row bar: the environment, one chapter control, the global pause */
.vic .vic-bar__sel{display:none}
@media (max-width:760px){
  .vic .vic-bar{gap:8px;padding:6px 12px;flex-wrap:nowrap;align-items:center}
  .vic .vic-bar .vic-bar__nav{display:none}
  .vic .vic-bar__sel{display:block;order:1;flex:1 1 auto;min-width:0;height:36px;padding:0 8px;border:1px solid var(--v-edge);border-radius:2px;
    background:var(--v-panel-1);color:var(--v-ink);font:500 12.5px/1 var(--v-ui);letter-spacing:.02em}
  .vic .vic-bar__pause{order:2;flex:0 0 auto;padding:8px 10px;font-size:11px}
  .vic .vic-bar .vic-env{order:0;flex:0 0 auto}
  .vic .vic-bar .vic-env__seg .vic-env__b{min-height:36px;padding:8px 10px;font-size:12px;gap:6px}
  .vic .vic-bar .vic-env__seg .vic-env__b .vic-env__dot{display:none}
}
/* the narrowest phones: the same three controls, tighter, and nothing wider than the screen */
@media (max-width:400px){
  .vic .vic-bar{gap:6px;padding:6px 8px}
  .vic .vic-bar .vic-env__seg .vic-env__b{padding:8px 7px;font-size:11.5px;letter-spacing:0}
  .vic .vic-bar__pause{padding:8px 7px;font-size:10.5px;letter-spacing:.04em}
  .vic .vic-bar__sel{padding:0 4px;font-size:12px}
}

/* ============================================================================
   The site shell's hero and footer, skinned on these two routes only
   ========================================================================== */
.vic[data-vic-env] .bs-hero,
.vic[data-vic-env] .bs-hero--carbon{background:transparent;color:var(--v-ink)}
.vic[data-vic-env] .bs-hero .bs-eyebrow{color:var(--v-accent)}
.vic[data-vic-env] .bs-hero__role{color:var(--v-ink-mute)}
.vic[data-vic-env] .bs-hero__cta,
body.vic[data-vic-env] .closing-cta{
  /* the dark ink, as the approved 01-primary-action-button components do */
  background:var(--v-action);color:#20282D;border:0;box-shadow:var(--v-lift-1);
}
.vic[data-vic-env] .bs-hero__cta:hover,
body.vic[data-vic-env] .closing-cta:hover{filter:brightness(1.06)}

body.vic[data-vic-env] .closing,
body.vic[data-vic-env] .closing.site-contact{background:transparent;color:var(--v-ink)}
body.vic[data-vic-env] .closing .label{color:var(--v-accent)}
body.vic[data-vic-env] .closing .meaning-statement{color:var(--v-ink)}
body.vic[data-vic-env] .closing .cta-accent{color:var(--v-accent)}
body.vic[data-vic-env] .closing-sub,
body.vic[data-vic-env] .closing-obs,
body.vic[data-vic-env] .closing-foot,
.vic[data-vic-env] .site-footer{color:var(--v-ink-mute)}
body.vic[data-vic-env] .closing-foot{border-top:1px solid var(--v-edge-soft)}

/* JasonWalker.design's navigation is NOT themed. Its wordmark is a canvas drawn
   to a fixed Carbon / Bone / Acid specification that has no light state, and the
   brief asks that the site's identity, logo and navigation function be preserved.
   So the bar keeps its own Carbon ground in both environments — which is also
   what the reference screenshots show — and Victory's light begins below it. */
.vic[data-vic-env] .site-nav{border-bottom:1px solid rgba(242,239,233,.12)}
@supports not (color-mix(in srgb,red,blue)){
  .vic-bar{background:var(--v-canvas-2)}
  .vic[data-vic-env="night"] .vic-bar{background:var(--v-canvas-1)}
}

/* ============================================================================
   Every artefact that used to be painted for one ground
   ========================================================================== */
/* expansions */
.vic[data-vic-env] .bs-deep__sum{background:var(--v-raised);border-color:var(--v-edge-soft);color:var(--v-ink);padding-inline:clamp(18px,2.4vw,28px);border-radius:3px;border-width:1px}
.vic[data-vic-env] .bs-deep__k{color:var(--v-accent)}
.vic[data-vic-env] .bs-deep__t{color:var(--v-ink)}
.vic[data-vic-env] .bs-deep__d{color:var(--v-ink-mute)}
.vic[data-vic-env] .bs-deep__pv img{border-color:var(--v-edge-soft);background:var(--v-paper)}
.vic[data-vic-env] .bs-deep__close{color:var(--v-ink);border-color:var(--v-edge)}
.vic[data-vic-env] .bs-deep__close:hover{border-color:var(--v-accent);color:var(--v-accent)}

/* the component gallery inside the expansion: its own sheet pins ink and faces for a
   fixed cream page, so the environment restates them on the gallery root, where they
   resolve before anything inside asks.  The page's one environment choice drives its
   file swaps (victory-environment.js), so its own per-scope controls stay out of sight. */
.vic[data-vic-env] .vsys{
  --v-ui:'Public Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --v-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --v-ink:var(--v-ink-env);--v-muted:var(--v-ink-mute);
  --v-line:var(--v-edge-soft);--v-line-2:var(--v-edge);
  --v-bone:var(--v-panel-1);--v-iv:var(--v-accent);
}
.vic[data-vic-env] .vsys-controls{display:none}
.vic[data-vic-env] .vsys .vsys-h{font-family:var(--v-serif);font-weight:400;letter-spacing:-.012em}
.vic[data-vic-env] .vsys .vsys-body{font-family:var(--v-serif)}
/* the comparison instrument shows both environments side by side, so each cell keeps
   the ink of the environment it shows; the chrome around them takes the page's */
.vic[data-vic-env] .vsys-inst{background:var(--v-panel-1);border-color:var(--v-edge-soft)}
.vic[data-vic-env] .vsys-inst__stage{background:var(--v-edge-soft)}
.vic[data-vic-env] .vsys-inst__cell{background:#FDFDFB;--v-ink:#20282D;--v-muted:#5F7078}
.vic[data-vic-env] .vsys-inst__cell--night{background:#07141C;--v-ink:#DDF4FF;--v-muted:#9FB0B8}
.vic[data-vic-env] .vsys-inst__bar,.vic[data-vic-env] .vsys-inst__detail{background:var(--v-panel-1);border-top-color:var(--v-edge-soft)}
.vic[data-vic-env] .vsys-inst__btn,.vic[data-vic-env] .vsys-inst__fam,.vic[data-vic-env] .vsys-inst__search{background:var(--v-panel-1);color:var(--v-ink);border-color:var(--v-edge)}
.vic[data-vic-env] .vsys-inst__fam[aria-pressed="true"],.vic[data-vic-env] .vsys-seg button[aria-pressed="true"]{background:var(--v-ink);color:var(--v-canvas-1);border-color:var(--v-ink)}
.vic[data-vic-env] .vsys-inst__search::placeholder{color:var(--v-ink-mute)}
.vic[data-vic-env] .vsys-seg{background:var(--v-panel-1);border-color:var(--v-edge)}
.vic[data-vic-env] .vsys-seg button{color:var(--v-ink-mute);border-right-color:var(--v-edge)}
/* a wall or a frame that shows the daylight artefact keeps daylight ink whatever the page */
.vic[data-vic-env] .vsys-way__card:not(.vsys-way__card--night){background:#FDFDFB;border-color:var(--v-edge-soft);--v-ink:#20282D;--v-muted:#5F7078}
.vic[data-vic-env] .vsys-way__card--night{--v-ink:#DDF4FF;--v-muted:#9FB0B8}
.vic[data-vic-env] .vsys-screens__frame:not(.vsys-screens__frame--night){background:#FDFDFB;border-color:var(--v-edge-soft)}
.vic[data-vic-env] .vsys-spec{background:var(--v-raised);border:1px solid var(--v-edge-soft)}
.vic[data-vic-env="night"] .vsys-spec{background:var(--v-ground)}

/* The chapter expansions were written for a fixed cream page.  Two things follow from the
   environment: a panel that is an artefact on paper — a composed card, a palette sheet, a
   specimen box, the icon library, the motif playbook, the small-post gallery — keeps paper and
   its own dark ink (the .vic-paper rule, restated here for the classes that carry it); and
   text that sits on the ground takes the environment's ink instead of a colour written for
   cream.  Both are declared on the tokens and the roots, not element by element. */
.vic[data-vic-env] .cx__card,.vic[data-vic-env] .cpl,.vic[data-vic-env] .pa,.vic[data-vic-env] .mpb,
.vic[data-vic-env] .tfx__art,.vic[data-vic-env] .tfx__metric,.vic[data-vic-env] .cst__art,
.vic[data-vic-env] .ctc-inline,.vic[data-vic-env] .ctc-mobile,.vic[data-vic-env] .bsm__art,.vic[data-vic-env] .psx__frame{
  color:#141414;--v-ink:#141414;--v-ink-mute:rgba(20,20,20,.58);--v-ink-label:#064C73;--v-accent:#B43B12;
  --v-edge:#B7C4C5;--v-edge-soft:rgba(20,20,20,.14);--v-edge-hair:rgba(20,20,20,.07);
  --vi-ink:#141414;--vi-muted:rgba(20,20,20,.58);--vi-line:rgba(20,20,20,.14);
}
.vic[data-vic-env] .cx__card .cx__ck,.vic[data-vic-env] .cx__card .cx__ch,.vic[data-vic-env] .cx__card .cx__cb,
.vic[data-vic-env] .cx__card .cx__cta,.vic[data-vic-env] .cpl__nm,.vic[data-vic-env] .cpl__hx,.vic[data-vic-env] .cpl__famh,
.vic[data-vic-env] .pa__nm,.vic[data-vic-env] .pa__rl,.vic[data-vic-env] .pa__chip,.vic[data-vic-env] .pa .vi-ctl__lab,
.vic[data-vic-env] .mpb__nm,.vic[data-vic-env] .mpb__live,.vic[data-vic-env] .mpb b{color:#141414}
.vic[data-vic-env] .cx__card .cx__em{color:#B43B12}
.vic[data-vic-env] .psx__frame .psx__art{color:#141414;fill:#141414}
.vic[data-vic-env] .pa__link{color:#B43B12}
/* on the ground: the environment's ink */
.vic[data-vic-env] .bsm__t,.vic[data-vic-env] .mk,.vic[data-vic-env] .mapp__one i,
.vic[data-vic-env] .cmx__need,.vic[data-vic-env] .cmx__rel,.vic[data-vic-env] .cmx td,.vic[data-vic-env] .cmx th,
.vic[data-vic-env] .bs-ev__note,.vic[data-vic-env] .bs-ev__note b,.vic[data-vic-env] .vfound__t,.vic[data-vic-env] .vfound__b,
.vic[data-vic-env] .cst__nm,.vic[data-vic-env] .cst__read,.vic[data-vic-env] .psx__ruleshd,.vic[data-vic-env] .psx__rules li{color:var(--v-ink)}
.vic[data-vic-env] .bsm__m,.vic[data-vic-env] .cx__swh,.vic[data-vic-env] .cmx__cap,.vic[data-vic-env] .cmx caption,
.vic[data-vic-env] .bs-ev__cap,.vic[data-vic-env] .bsg-intro,.vic[data-vic-env] .cst__use,.vic[data-vic-env] .cst__tag,
.vic[data-vic-env] .vsrc,.vic[data-vic-env] .bs-film__lab{color:var(--v-ink-mute);opacity:1}
.vic[data-vic-env] .bsm__k,.vic[data-vic-env] .vfound__n,.vic[data-vic-env] .ctc-unit__n,.vic[data-vic-env] .cst__grid,
.vic[data-vic-env] .mpb__n,.vic[data-vic-env] .mpb__pagen{color:var(--v-accent)}
.vic[data-vic-env] .bs-ev__cap b,.vic[data-vic-env] .ctc-cap b,.vic[data-vic-env] .ctc-unit__lab,.vic[data-vic-env] .ctc-cap,.vic[data-vic-env] .cx__mk b{color:var(--v-ink)}
.vic[data-vic-env] .cmx{border-color:var(--v-edge-soft)}
.vic[data-vic-env] .cmx td,.vic[data-vic-env] .cmx th{border-color:var(--v-edge-soft)}

/* the inspection viewer */
.vic[data-vic-env] .ctc-overlay{background:var(--v-scrim)}
.vic[data-vic-env] .aiv{background:var(--v-canvas-3)}
.vic[data-vic-env] .aiv__bar{background:var(--v-canvas-3);color:var(--v-ink);border-top-color:var(--v-edge-soft)}
.vic[data-vic-env] .aiv__ctl label{color:var(--v-ink-mute)}
.vic[data-vic-env] .ctc-close{color:var(--v-ink);border-color:var(--v-edge)}
.vic[data-vic-env] .ctc-close:hover{border-color:var(--v-accent);color:var(--v-accent)}
/* the artefact stage inside the viewer is a document, so it stays paper */
.vic[data-vic-env] .aiv__stage{background:var(--v-paper);border-color:var(--v-edge-soft)}

/* the construction grid instrument */
.vic[data-vic-env] .cg{background:var(--v-raised);border:1px solid var(--v-edge-soft)}
.vic[data-vic-env] .cg__stage{background:var(--v-canvas-3)}
.vic[data-vic-env="night"] .cg__stage{background:#050D13}
.vic[data-vic-env] .cg__panel,.vic[data-vic-env] .cg__foot{background:var(--v-panel-2);color:var(--v-ink);border-color:var(--v-edge-soft)}
.vic[data-vic-env] .cg-row{color:var(--v-ink)}
.vic[data-vic-env] .cg-row.is-on{background:var(--v-edge-hair)}

@media (prefers-reduced-motion:reduce){
  .vic[data-vic-env] *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* ============================================================================
   The transport, shared by every animated artifact
   ----------------------------------------------------------------------------
   One language, so a visitor who learns it at the Studio already knows it at
   the continuum, the grid and the component library.
   ========================================================================== */
.vic .vp{
  display:block;
  padding:10px 0 0;font-family:var(--v-ui);
}
/* THE RESULT FIRST (19 September 2026). The transport rests as one labelled action.
   The instrument beneath it is one row of transport and stage selection, then one
   quiet row of settings (restart, speed) and the way back. */
.vic .vp__rest{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vic .vp__panel{margin-top:10px}
.vic .vp__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vic .vp__row--settings{margin-top:8px;gap:8px 14px}
.vic .vp__b--quiet{border-color:transparent;color:var(--v-ink-mute)}
.vic .vp__b--quiet:hover{border-color:transparent}
.vic .vp__b--reveal::before{content:'';width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;margin-right:9px;display:inline-block;vertical-align:-1px}
.vic .vp__b--reveal[aria-expanded="true"]::before{display:none}
.vic .vp__b--hide{margin-left:auto}
.vic .vp__b{
  appearance:none;cursor:pointer;
  min-height:38px;padding:8px 13px;
  font:500 12px/1 var(--v-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--v-ink);background:transparent;
  border:1px solid var(--v-edge);border-radius:999px;
}
.vic .vp__b:hover{border-color:var(--v-accent);color:var(--v-accent)}
.vic .vp__b:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}
.vic .vp__b--play{min-width:82px;font-weight:600}
.vic .vp__stages{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 0 6px;padding:0;list-style:none;min-width:0}
.vic .vp__stage{
  appearance:none;cursor:pointer;display:inline-flex;align-items:baseline;gap:7px;
  min-height:38px;padding:7px 11px;
  font:500 12px/1.2 var(--v-ui);letter-spacing:.02em;
  color:var(--v-ink-mute);background:transparent;border:1px solid transparent;border-radius:2px;
  white-space:nowrap;
}
.vic .vp__stage:hover{color:var(--v-ink);background:var(--v-edge-hair)}
.vic .vp__stage[aria-current="true"]{color:var(--v-ink);border-color:var(--v-edge);font-weight:600}
.vic .vp__stage:focus-visible{outline:2px solid var(--v-focus);outline-offset:2px}
.vic .vp__n{font-variant-numeric:tabular-nums;color:var(--v-accent);font-size:10.5px;letter-spacing:.1em}
.vic .vp__rate{margin-left:0;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.vic .vp__speedlab{font:600 10.5px/1 var(--v-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--v-ink-mute)}
.vic .vp__speed{display:inline-flex;border:1px solid var(--v-edge);border-radius:2px;overflow:hidden}
.vic .vp__r{
  appearance:none;cursor:pointer;min-height:38px;padding:8px 10px;border:0;
  border-right:1px solid var(--v-edge);
  font:500 12px/1 var(--v-ui);color:var(--v-ink);background:transparent;
  font-variant-numeric:tabular-nums;
}
.vic .vp__r:last-child{border-right:0}
.vic .vp__r[aria-pressed="true"]{background:var(--v-ink);color:var(--v-canvas-1);font-weight:600}
.vic[data-vic-env="night"] .vp__r[aria-pressed="true"]{color:#07141C}
.vic .vp__r:focus-visible{outline:2px solid var(--v-focus);outline-offset:-3px}
/* The transport carries no progress rail, and reserves no room for one. The stage list
   already says where the instrument is; a travelling orange line only competed with the
   artefact it sat beneath. Removed in full: no track, no fill, no reserved height. */
.vic .vp__live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .vic .vp__row{gap:6px}
  .vic .vp__stages{order:3;flex-basis:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
  .vic .vp__stages::-webkit-scrollbar{display:none}
  .vic .vp__rate{margin-left:0;order:4}
  .vic .vp__b--hide{margin-left:0;order:5}
  /* A finger is not a cursor. The transport is the one control every animated
     artifact on these routes shares, so the comfortable target belongs here
     rather than being set again per component: 38px measured on a phone,
     44 is the floor. */
  .vic .vp__b,
  .vic .vp__stage,
  .vic .vp__r{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ============================================================================
   The opening
   ========================================================================== */
.vic .vic-hero{padding-bottom:clamp(30px,5vh,60px)}
.vic .vic-thesis{
  margin:0 0 clamp(14px,2.2vh,24px);
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(30px,3.4vw,48px);line-height:1.08;letter-spacing:-.016em;
  color:var(--v-ink);max-width:20ch;text-wrap:balance;
}
.vic .vic-thesis em{color:var(--v-accent)}
.vic .vic-hero__env{
  margin-top:clamp(20px,3.4vh,36px);padding-top:clamp(16px,2.6vh,26px);
  border-top:1px solid var(--v-edge-soft);
}
.vic .vic-env__say{margin:10px 0 0}
.vic .vic-env__note{margin:6px 0 0;font:400 13px/1.55 var(--v-ui);color:var(--v-ink-faint);max-width:44ch}

/* the statement: generous, not a full empty screen ------------------------- */
.vic .vic-stmt{
  display:flex;align-items:center;
  min-height:var(--vic-stmt-h,58vh);
  padding:clamp(40px,7vh,90px) 0;
}
.vic .vic-stmt__q{margin:0;max-width:none}
.vic .vic-stmt__q p{
  margin:0;
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(34px,6.2vw,92px);line-height:1.14;letter-spacing:-.02em;
  /* --v-accent, not --v-orange-2: the raw orange reads 2.31:1 on the High Sun
     ground, under AA even for 92px display type. --v-accent is the value that
     already turns with the environment — brick by daylight, the same vivid
     orange at night — so the quote keeps its colour and gains its reading. */
  color:var(--v-accent);
}
.vic .vic-stmt__q p .l{display:block}
.vic .vic-stmt__q footer{
  margin-top:clamp(16px,2.6vh,30px);
  font:500 clamp(13px,1.1vw,15px)/1.4 var(--v-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--v-ink-mute);
}
.vic .vic-stmt--belief p{color:var(--v-ink)}
.vic .vic-stmt--belief em{color:var(--v-accent)}
@media (max-width:760px){
  .vic .vic-stmt{min-height:var(--vic-stmt-h-p,46vh)}
  .vic .vic-stmt__q p{font-size:clamp(28px,8.4vw,44px);line-height:1.12}
}

.vic .vic-tension{padding-top:clamp(20px,3vh,40px)}

/* the close: FROM and TO, two substantial fields side by side ------------- */
.vic .vic-close__pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,32px);align-items:stretch;
  margin:clamp(20px,3.4vh,40px) 0 0;
}
@media (max-width:820px){.vic .vic-close__pair{grid-template-columns:minmax(0,1fr)}}
.vic .vic-close__q{
  margin:0;display:flex;flex-direction:column;min-height:clamp(260px,34vh,380px);
  padding:clamp(22px,3vw,40px) clamp(22px,3vw,44px) clamp(20px,2.6vw,32px);
  background:var(--v-panel-1);border:1px solid var(--v-edge);border-radius:4px;box-shadow:var(--v-lift-1);
  border-top:3px solid var(--v-orange-2);
}
.vic .vic-close__q--to{border-top-color:var(--v-blue-2)}
.vic .vic-close__k{
  margin:0 0 clamp(18px,2.6vh,30px);font:600 12px/1.3 var(--v-ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--v-accent);
}
.vic .vic-close__q--to .vic-close__k{color:var(--v-blue-2)}
.vic .vic-close__t{
  margin:0 0 auto;font-family:var(--v-editorial);font-weight:400;
  /* 1.3, not 1.18: at display size Source Serif 4's descenders reach far enough that
     the p of "impact" and the f of "feature" met on adjacent lines. The leading has to
     clear them at the narrow measures too, so it is set here rather than per width. */
  font-size:clamp(24px,2.5vw,38px);line-height:1.3;letter-spacing:-.012em;color:var(--v-ink);
  text-wrap:balance;
}
.vic .vic-close__q footer{margin-top:clamp(20px,3vh,34px);font:500 12px/1.4 var(--v-ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--v-ink-mute)}
.vic .vic-close__say{margin:clamp(24px,3.6vh,44px) 0 0;max-width:62ch;
  font-size:clamp(16px,1.2vw,18px);line-height:1.62;color:var(--v-ink)}
.vic .vic-close__note{margin:12px 0 0;font:400 13px/1.5 var(--v-ui);color:var(--v-ink-faint)}
@media (max-width:820px){
  .vic .vic-close__q{min-height:0}
  .vic .vic-close__t{font-size:clamp(22px,6vw,28px)}
}


/* the opening grid, now that the five-post figure has left it ---------------- */
.vic .vic-hero.bs-hero .bs-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"title aside" "role aside";
  align-content:start;align-items:start;
  gap:clamp(18px,3vh,34px) clamp(30px,5vw,90px);
  padding-top:clamp(40px,8vh,110px);
}
.vic .vic-hero .bs-hero__title{grid-area:title;align-self:start}
.vic .vic-hero .bs-hero__aside{grid-area:aside;align-self:start}
.vic .vic-hero .bs-hero__role{grid-area:role;margin:0;max-width:62ch;color:var(--v-ink-mute)}
@media (max-width:900px){
  .vic .vic-hero.bs-hero .bs-hero__grid{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"title" "aside" "role"}
}

/* the chapter numerals need their own space in the sticky bar --------------- */
.vic .vic-bar__nav .n{color:var(--v-accent);font-variant-numeric:tabular-nums;margin-right:6px;font-size:11px;letter-spacing:.08em}

/* ============================================================================
   The closing block, in the chosen environment
   ----------------------------------------------------------------------------
   The brief asks for the hero and the footer of these two case studies to be
   skinned in the selected environment, and for every relevant surface to change
   together rather than leaving a themed page above an unconverted footer.

   The identity itself is not repainted.  The nav's wordmark keeps its Carbon
   canvas in both environments, because the lockup specification has no white
   symbol state; the footer carries no wordmark, so what changes here is its
   ground, its ink and its accent.  The acid the site uses on Carbon is replaced
   by the environment's own accent, since acid on a High Sun cream ground is not
   a legible accent -- it is the same failure the nav was corrected for.
   ========================================================================== */
body.vic[data-vic-env] .closing{background:var(--v-ground) !important;color:var(--v-ink) !important;border-top:1px solid var(--v-edge-soft) !important}
body.vic[data-vic-env] .closing .label{color:var(--v-ink-mute) !important}
body.vic[data-vic-env] .closing .meaning-statement{color:var(--v-ink) !important}
body.vic[data-vic-env] .closing .cta-accent{color:var(--v-accent) !important}
body.vic[data-vic-env] .closing .closing-sub,
body.vic[data-vic-env] .closing .closing-obs{color:var(--v-ink-mute) !important}
body.vic[data-vic-env] .closing .closing-cta{color:var(--v-ink) !important;border-color:var(--v-ink) !important;background:transparent !important}
body.vic[data-vic-env] .closing .closing-cta:hover,
body.vic[data-vic-env] .closing .closing-cta:focus-visible{color:var(--v-canvas-1) !important;background:var(--v-ink) !important;border-color:var(--v-ink) !important}
body.vic[data-vic-env] .closing .closing-cta .arr{color:var(--v-accent) !important}
body.vic[data-vic-env] .closing .closing-cta:hover .arr,
body.vic[data-vic-env] .closing .closing-cta:focus-visible .arr{color:var(--v-canvas-1) !important}
body.vic[data-vic-env] .closing .closing-foot{color:var(--v-ink-mute) !important;border-top-color:var(--v-edge-soft) !important}
body.vic[data-vic-env] .closing .closing-foot span{color:var(--v-ink-mute) !important}
/* the short accent rule the site draws under the closing kicker follows the environment too */
body.vic[data-vic-env] .closing .label::after,
body.vic[data-vic-env] .closing .label::before{background:var(--v-accent) !important;border-color:var(--v-accent) !important}

/* The product work moved out of the Interface disclosure and into the chapter's own
   reading path. It keeps the chapter's rhythm and clears the sticky chapter bar. */
.vic .bs-inview{display:block}
.vic .bs-inview > section{scroll-margin-top:clamp(112px,15vh,140px)}
/* One scroll margin for every in-page target on both Victory routes. The site header and
   the chapter bar together occupy about 108px on a phone and 130px on a desktop, and two
   chapter sections carried no margin at all, so their headings arrived underneath the bar.
   This is the sticky chrome's height, stated once, rather than per section. */
.vic section[id],.vic .bs-chapter,.vic .bs-sec[id],.vic .bv-ch,
.vic .bs-anchor,.vic .bv-anchor{scroll-margin-top:clamp(112px,15vh,140px)}
.vic .bs-inview > section + section{margin-top:clamp(48px,7vh,96px)}
.vic .bs-anchor{display:block;height:0;overflow:hidden;scroll-margin-top:clamp(96px,14vh,132px)}

/* ==========================================================================
   SYSTEMS-01, SYSTEMS-02 and SYSTEMS-05 — the recomposed opening
   --------------------------------------------------------------------------
   The reading order is now hero, chapter navigation, customer philosophy,
   Ben's question, the Thursday-morning pressure, then the Studio.  "Brand
   System Studio." is the only hero-level idea; the philosophy that governs
   how the rest is read gets its own field and its own scale rather than
   competing with the title from a side column.
   ========================================================================== */

/* The hero aside now carries only the compact environment selector, which
   shares its state with the sticky one below. */
.vic[data-vic-env] .bs-hero--evidence .bs-hero__aside{align-self:end}
.vic[data-vic-env] .bs-hero--evidence .vic-hero__env{margin-top:0}

.vic[data-vic-env] .vic-philos{
  padding-block:clamp(56px,8vh,104px);
}
.vic[data-vic-env] .vic-philos__t{
  font-family:var(--v-editorial);
  font-weight:400;
  font-size:clamp(40px,6.2vw,92px);
  line-height:1.04;
  letter-spacing:-.035em;
  margin:clamp(18px,2.4vh,28px) 0 0;
  max-width:15ch;
  color:var(--v-ink);
  text-wrap:balance;
}
.vic[data-vic-env] .vic-philos__t em{font-style:italic;color:var(--v-accent)}
.vic[data-vic-env] .vic-philos__rule{margin-top:clamp(28px,4vh,48px)}
.vic[data-vic-env] .vic-philos__foot{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--va-gutter);
}
.vic[data-vic-env] .vic-philos__d{max-width:52ch;color:var(--v-ink-mute)}
@media (max-width:899px){
  .vic[data-vic-env] .vic-philos__foot{grid-template-columns:minmax(0,1fr)}
}

/* --- SYSTEMS-05: the disclosure summary ----------------------------------
   The eyebrow and the description form one stacked text column on a single
   left edge with one consistent gap.  The thumbnails and the control take the
   other columns of the same grid, so nothing floats. */
.vic[data-vic-env] .bs-deep__sum--stack{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-rows:auto auto;
  column-gap:clamp(20px,3vw,48px);
  row-gap:8px;
  align-items:center;
  text-align:left;
  width:100%;
}
.vic[data-vic-env] .bs-deep__sum--stack .bs-deep__k{
  grid-column:1;grid-row:1;justify-self:start;margin:0;
}
.vic[data-vic-env] .bs-deep__sum--stack .bs-deep__t{
  grid-column:1;grid-row:2;justify-self:start;margin:0;
}
.vic[data-vic-env] .bs-deep__sum--stack .bs-deep__pv{grid-column:2;grid-row:1 / span 2}
.vic[data-vic-env] .bs-deep__sum--stack .bs-deep__ic{grid-column:3;grid-row:1 / span 2}
@media (max-width:719px){
  .vic[data-vic-env] .bs-deep__sum--stack{grid-template-columns:minmax(0,1fr) auto}
  .vic[data-vic-env] .bs-deep__sum--stack .bs-deep__pv{display:none}
  .vic[data-vic-env] .bs-deep__sum--stack .bs-deep__ic{grid-column:2}
}

/* The aside no longer carries a competing headline, so the title takes the
   field it needs and the environment selector settles beneath it on the right. */
.vic .vic-hero.bs-hero--evidence .bs-hero__grid{
  grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);
}
.vic .vic-hero.bs-hero--evidence .vic-hero__env .vic-env__b{white-space:nowrap}
.vic .vic-hero.bs-hero--evidence .bs-h1{
  max-width:none;
  font-size:clamp(56px,8.4vw,132px);
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
}
@media (max-width:1023px){
  .vic .vic-hero.bs-hero--evidence .bs-hero__grid{grid-template-columns:minmax(0,1fr)}
}

/* --- section 7: the common case-study contact ----------------------------
   One structure and one destination on all three cases, with the case's own
   environment and type carried through.  The authorship line names Jason
   directly above the invitation, so there is no reading in which the button
   contacts Victory rather than the person who designed it. */
.vic[data-vic-env] .closing .closing-who.closing-who.closing-who{
  font-family:var(--v-ui);
  font-size:var(--va-support-size,16px);
  line-height:calc(24 / 16);
  font-weight:400;
  color:var(--v-ink-mute);
  margin:var(--vs-4,24px) auto var(--vs-5,32px);
  max-width:56ch;
}

/* ==========================================================================
   SYSTEMS-08 and SYSTEMS-09 — balanced Color and Type/Icon stages
   --------------------------------------------------------------------------
   Equal outside insets, a bounded and centred content group, and one
   coordinated transition of about 300 ms when the group changes shape.
   victory-stagebalance.js marks the parts that are not yet in play; the rules
   below take them out of the measure so the visible group actually centres
   instead of hanging off the left of a field reserved for something that has
   not arrived.
   ========================================================================== */

/* --- the shared stage frame ---------------------------------------------- */
.vic[data-vic-env] .bxp__stage .cxs,
.vic[data-vic-env] .bxp__stage .bxt{
  padding:clamp(24px,3.2vw,48px);
  align-content:center;
}

/* --- Color: the continuum, its line and the artifact group on one grid ---- */
.vic[data-vic-env] .bxp__stage .cxs{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:clamp(24px,3vh,40px);
}
.vic[data-vic-env] .cxs__axis,
.vic[data-vic-env] .cxs__row{
  width:100%;
  max-width:980px;
  margin-inline:auto;
}
.vic[data-vic-env] .cxs__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
  row-gap:clamp(24px,3vh,40px);
}
.vic[data-vic-env] .cxs__row > *{
  flex:0 1 auto;
  min-width:0;
  margin-inline:clamp(14px,2vw,32px);
  transition:opacity .3s ease,width .3s ease,flex-basis .3s ease,margin .3s ease;
}
.vic[data-vic-env] .cxs__row .cx__demo{flex-basis:min(460px,48%)}
.vic[data-vic-env] .cxs__row .cxs__read{flex-basis:min(400px,42%)}
/* one item on its own is centred, not left in half a field */
.vic[data-vic-env] .cxs__row[data-live="1"] > *:not(.is-off){flex-basis:min(520px,72%)}

/* --- Type + Icon: the letterform, the rule, the icon, the use -------------
   The gap lives on the items, not on the container, so a part that has not
   arrived contributes neither width nor space between its neighbours and the
   visible group genuinely centres. */
.vic[data-vic-env] .bxp__stage .bxt{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
  row-gap:clamp(20px,3vh,36px);
}
.vic[data-vic-env] .bxt > *{
  flex:0 0 auto;
  min-width:0;
  margin-inline:clamp(12px,1.6vw,28px);
  transition:opacity .3s ease,width .3s ease,flex-basis .3s ease,margin .3s ease;
}
.vic[data-vic-env] .bxt .bxt__cell{flex:0 0 clamp(150px,15vw,215px)}
.vic[data-vic-env] .bxt .bxt__rule-card{flex:0 0 clamp(200px,18vw,250px)}
.vic[data-vic-env] .bxt .bxt__use{flex:0 0 clamp(200px,18vw,258px)}
/* The family survey is the whole composition when it arrives, so it takes the
   field rather than sitting in one of four reserved columns. */
.vic[data-vic-env] .bxt .bxt__fam{flex:1 1 min(720px,100%)}

/* --- what has not arrived yet takes no space ----------------------------- */
.vic[data-vic-env] .cxs__row > .is-off,
.vic[data-vic-env] .bxt > .is-off{
  flex:0 0 0 !important;
  width:0;
  min-width:0;
  padding-inline:0 !important;
  margin-inline:0 !important;
  border-inline-width:0 !important;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}
@media (prefers-reduced-motion:reduce){
  .vic[data-vic-env] .cxs__row,
  .vic[data-vic-env] .cxs__row > *,
  .vic[data-vic-env] .bxt > *{transition:none}
}

/* Longer copy wraps inside its own column rather than pushing a diagram. */
.vic[data-vic-env] .cxs__read,
.vic[data-vic-env] .bxt__rule-card,
.vic[data-vic-env] .bxt__use{white-space:normal}
.vic[data-vic-env] .cxs__read *,
.vic[data-vic-env] .bxt__rule-card *,
.vic[data-vic-env] .bxt__use *{white-space:normal}

@media (max-width:767px){
  /* deliberate rows on a phone rather than a compressed desktop stage.
     flex-wrap MUST be cleared here.  The desktop rule above sets wrap so a
     four-part row can break onto a second line; in a COLUMN that same wrap
     breaks onto a second COLUMN, and the stage is a fixed 5/7 frame with
     overflow:hidden, so the part that wrapped lands outside the frame and is
     never seen.  Measured at 320px before this line: the Colour read-out
     (family, tone, what it says) sat at x=317 in a 280px stage — present in
     the DOM, invisible on the phone. */
  .vic[data-vic-env] .cxs__row{--vic-stack-gap:clamp(24px,3vh,40px)}
  .vic[data-vic-env] .bxp__stage .bxt{--vic-stack-gap:clamp(20px,3vh,36px)}
  .vic[data-vic-env] .cxs__row,
  .vic[data-vic-env] .bxp__stage .bxt{
    flex-direction:column;flex-wrap:nowrap;align-items:center;
    row-gap:var(--vic-stack-gap);
  }
  .vic[data-vic-env] .cxs__row > *,
  .vic[data-vic-env] .bxt > *{flex-basis:auto !important;width:100%;max-width:420px}
  /* A collapsed item still sits between two gaps, so the stack would carry 2G
     of space where it should carry G.  The correction is exactly half a gap on
     each side — no more.  It used to be a flat -18px, which at the phone's
     smaller gaps over-collapsed and pulled the next card up OVER the previous
     card's label: at 320px the search-icon frame was printed across "PUBLIC
     SANS O". */
  .vic[data-vic-env] .cxs__row > .is-off,
  .vic[data-vic-env] .bxt > .is-off{
    max-height:0;max-width:100%;
    margin-block:calc(-0.5 * var(--vic-stack-gap));
  }
}
/* At the narrowest phone the stacked composition is about 25px taller than the
   5/7 frame at its fullest step (415 against 392, measured at 320px across all
   seven Colour steps). The frame is deliberately fixed — a stage that changed
   height between steps would rock the page — so the rhythm inside it tightens
   instead. */
@media (max-width:479px){
  .vic[data-vic-env] .bxp__stage .cxs{row-gap:14px}
  .vic[data-vic-env] .cxs__row,
  .vic[data-vic-env] .bxp__stage .bxt{--vic-stack-gap:14px}
  .vic[data-vic-env] .bxp__stage .cxs,
  .vic[data-vic-env] .bxp__stage .bxt{padding:12px}
  /* and the frame takes the last 28px. 5/7 gives 392px at a 280px stage; the
     fullest Colour step — the one that brings the four families back — wants
     408. 2/3 gives 420, still inside the 78svh cap on a 320x568 phone, and the
     frame stays one fixed size across all seven steps. */
  .vic[data-vic-env] .bxp__stage{aspect-ratio:5/8}
  /* The read-out carries the most words of anything in the stage and it is the
     part that was being cut. One step down in size below 360px, where the card
     beside it has already scaled itself. */
  .vic[data-vic-env] .cxs__tone{font-size:17px;line-height:1.15}
  .vic[data-vic-env] .cxs__say{font-size:12px;line-height:1.45}
}