/* ============================================================================
   victory-creative-first.css — the work first, the instrument on request
   ----------------------------------------------------------------------------
   19 September 2026. One sheet, loaded after every other Victory sheet by the
   three routes that share these components (Brand System Studio, the Victory
   case, Brand Voice). It carries the presentation decisions of the
   creative-first pass so that each is made once:

     · one navigation with two shapes: a sticky chapter bar on wide screens,
       a "Sections" disclosure in normal flow on a phone
     · the compact opening
     · chapter headings at reading scale, chapter explanations to one line
     · the evidence disclosures as quiet actions instead of announcement panels
     · resting states for the construction grid, the library and the writer
     · a deliberate narrow gutter on phones so the artwork keeps the width

   Everything is scoped to .vic so nothing leaks into the rest of the site.
   ========================================================================== */

/* ---------------------------------------------------------------- opening --- */
.vic .bs-hero{padding-top:clamp(28px,5vh,64px);padding-bottom:clamp(20px,3vh,36px)}
.vic .bs-hero .bs-h1{font-size:clamp(34px,5.2vw,74px)}
.vic .bs-hero__role{max-width:60ch}
.vic .vic-hero__env{display:none}

/* a closed disclosure holds nothing that can be seen or reached, whatever the engine */
.vic details:not([open]) > :not(summary){display:none}

/* ------------------------------------------------------------- navigation --- */
.vic .vic-bar__d{display:contents}
.vic .vic-bar__sum{display:none}
.vic .vic-bar__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex-wrap:wrap;flex:1 1 auto;min-width:0}
.vic .vic-bar__pause{display:none}
@media (max-width:760px){
  .vic .vic-bar{position:static;top:auto;z-index:auto;display:block;padding:0 16px;backdrop-filter:none;background:transparent;border-bottom:0}
  .vic .vic-bar__d{display:block;border-top:1px solid var(--v-edge-soft);border-bottom:1px solid var(--v-edge-soft)}
  .vic .vic-bar__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 0;cursor:pointer;list-style:none;font:600 12px/1.2 var(--v-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--v-ink)}
  .vic .vic-bar__sum::-webkit-details-marker{display:none}
  .vic .vic-bar__sum::marker{content:''}
  .vic .vic-bar__sumc{font:400 12px/1.2 var(--v-ui);letter-spacing:.02em;text-transform:none;color:var(--v-ink-mute);flex:1 1 auto;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vic .vic-bar__sum::after{content:'';flex:none;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
  .vic .vic-bar__d[open] .vic-bar__sum::after{transform:translateY(2px) rotate(-135deg)}
  .vic .vic-bar__in{display:grid;gap:12px;padding:4px 0 16px}
  .vic .vic-bar__d:not([open]) > .vic-bar__in{display:none}
  .vic .vic-bar .vic-bar__nav{display:grid;gap:0;grid-template-columns:1fr 1fr}
  .vic .vic-bar__nav a{min-height:44px;padding:8px 6px;white-space:normal}
  .vic .vic-bar .vic-env{order:0}
  .vic .vic-bar .vic-env__seg .vic-env__b{min-height:44px;padding:8px 12px}
}

/* ------------------------------------------------------ chapter headings --- */
.vic .bs-chapter .bs-concept,.vic .bs-sec .bs-concept{font-size:clamp(24px,3vw,44px)}
.vic .bs-head{margin-bottom:clamp(18px,2.6vh,30px)}
.vic .bs-say{font-size:clamp(15px,1.25vw,18px);max-width:64ch}
.vic .vsys-h{font-size:clamp(22px,2.6vw,36px)}
/* a chapter whose work already sits in the hero keeps its kicker and its
   evidence row, nothing between them */
.vic .bs-head--quiet{margin-bottom:0}
.vic .bs-head--quiet + .bs-deep,.vic .bs-wrap:has(> .bs-head--quiet) + .bs-deep{margin-top:10px}
.vic .bs-chapter:has(.bs-head--quiet){padding-top:clamp(18px,3vh,32px);padding-bottom:clamp(18px,3vh,32px)}
/* sub-sections inside a chapter sit closer: one interval, not three */
.vic .bs-chapter > .bs-inview > section.bs-sec,.vic .bs-chapter > section.bs-sec{padding-top:clamp(16px,3vh,32px);padding-bottom:clamp(16px,3vh,32px)}
.vic .bs-inview > section + section{margin-top:clamp(16px,3vh,36px)}
.vic .bs-sec--lead{padding-top:0}
/* an exhibit brought back into view after its instrument closes clears the header */
.vic [data-vp-rest]{scroll-margin-top:calc(var(--jw-head-h,64px) + 16px)}
/* the waymark artwork carries its own name and designation */
.vic .vsys-way__meta{display:none}

/* ------------------------------------------------- the evidence actions --- */
/* An announcement panel with preview thumbnails and a plus badge is a card built
   to say another card can be opened. It becomes one quiet row: a small label, one
   line of description, a plus. */
.vic .bs-deep{margin-top:clamp(18px,2.6vh,30px)}
.vic .bs-deep__sum.bs-deep__sum--stack,.vic .bs-deep__sum{
  display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;width:100%;
  padding:12px 0;min-height:48px;border:0;border-top:1px solid var(--v-edge-soft);border-bottom:1px solid var(--v-edge-soft);border-radius:0;
  background:transparent;box-shadow:none;text-align:left;cursor:pointer
}
.vic .bs-deep__sum:hover{background:transparent}
.vic .bs-deep__k{font:600 11px/1.2 var(--v-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--v-accent);flex:none}
.vic .bs-deep__t{font:400 14px/1.4 var(--v-ui);letter-spacing:0;color:var(--v-ink-mute);flex:1 1 20ch;min-width:0}
.vic .bs-deep__sum:hover .bs-deep__t{color:var(--v-ink)}
.vic .bs-deep__pv{display:none}
.vic .bs-deep__ic{flex:none;width:28px;height:28px;border:1px solid var(--v-edge);border-radius:50%;position:relative;margin-left:auto}
.vic .bs-deep__body{padding-top:clamp(18px,2.6vh,30px)}
.vic .bs-deep__end{margin-top:clamp(18px,2.6vh,30px)}
.vic .bs-deep__close{font-size:12px}

/* --------------------------------------------------------- statements --- */
/* a quotation is evidence, not an interval; it reads at paragraph scale */
.vic .vic-stmt{padding:clamp(28px,4vh,48px) 0}
.vic .vic-stmt__q p{font-size:clamp(20px,2.2vw,30px);line-height:1.25}
.vic .vic-stmt__q p .l{display:inline}
.vic .vic-stmt--pair{padding-bottom:0}
.vic .vic-stmt--pair + .vic-stmt{padding-top:clamp(12px,2vh,20px)}
.vic .vic-close .bs-concept{font-size:clamp(22px,2.6vw,36px)}

/* ------------------------------------------------ the construction grid --- */
.vic .vmo:not(.vmo--open) .vmo__panel{display:none}
.vic .vmo:not(.vmo--open) .vmo__stage{grid-template-columns:minmax(0,1fr)}
.vic .vmo:not(.vmo--open) .vmo__seq{display:none}

/* ----------------------------------------------------------- the library --- */
.vic .vlib:not(.vlib--open) .vlib__bar{display:none}

/* -------------------------------------------------------- the phone gutter --- */
@media (max-width:760px){
  .vic .bs-wrap{padding-left:16px;padding-right:16px}
  .vic .bs-sec{padding-top:clamp(36px,7vh,56px);padding-bottom:clamp(36px,7vh,56px)}
  .vic .vst__layers,.vic .vmo__panel{height:auto;max-height:none;overflow:visible}
}

/* ------------------------------------------------------------- the writer --- */
/* At rest: the complete approved text, readable in normal flow, with two labelled
   actions. "Choose example" reveals the format buttons and the example list;
   "See the process" reveals the stages, the reasoning and the transport and
   replays the edit. The metrics belong to the process. */
.vic .vw-root .vw-rest-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:16px 0 0}
.vic .vw-root.vw-root .vw-choose,.vic .vw-root.vw-root .vw-process{
  min-height:40px;padding:8px 14px;border:1px solid var(--vw-line);border-radius:999px;background:transparent;
  font:500 12px/1 var(--v-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--vw-ink);cursor:pointer
}
.vic .vw-root.vw-root .vw-process::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 .vw-root.vw-root .vw-process[aria-expanded="true"]::before{display:none}
.vic .vw-root.vw-root .vw-choose[aria-expanded="true"]{background:var(--vw-ink);color:var(--vw-onink);border-color:var(--vw-ink)}
.vic .vw-root .vw-picker-row{display:none;margin:12px 0 0;flex-wrap:wrap;gap:12px 24px}
.vic .vw-root.vw-choose-open .vw-picker-row{display:flex}
.vic .vw-root.vw-rest .vw-stages,
.vic .vw-root.vw-rest .vw-rationale,
.vic .vw-root.vw-rest .vw-transport,
.vic .vw-root.vw-rest .vw-metrics,
.vic .vw-root.vw-rest .vw-passage-row{display:none}
.vic .vw-root.vw-rest .vw-workspace{grid-template-columns:minmax(0,1fr)}
.vic .vw-root.vw-rest .vw-reader{height:auto;max-height:none;overflow:visible}
.vic .vw-root .vw-picker-row{order:-1}
.vic .vw-root{display:flex;flex-direction:column}
.vic .vw-root .vw-workspace{order:1}
.vic .vw-root .vw-rest-row{order:2}
.vic .vw-root .vw-stages{order:3;margin-top:20px}
.vic .vw-root .vw-transport{order:4}
.vic .vw-root .vw-metrics{order:5}
.vic .vw-root .vw-provenance{order:6}
.vic .vw-root .vw-dialog{order:7}
/* open, the reasoning sits beside the document again; on a phone the document flows and the
   reasoning follows it, nothing scrolls inside anything */
@media (max-width:760px){
  .vic .vw-root .vw-reader,.vic .vw-root[data-format="blog"] .vw-reader,.vic .vw-root[data-format="social"] .vw-reader{height:auto;max-height:none;overflow:visible;display:block}
  .vic .vw-root .vw-copy{padding:22px 18px 28px}
  .vic .vw-root .vw-stages{grid-template-columns:1fr 1fr;gap:8px 12px}
}

/* ------------------------------------------------- the Studio opening --- */
/* the finished post is the first exhibit: beside the title on wide screens, directly
   beneath it on a phone. The selectors repeat the environment sheet's so they win. */
.vic .vic-hero.bs-hero .bs-hero__grid--work,
.vic .vic-hero.bs-hero--evidence .bs-hero__grid--work{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:none;
  gap:clamp(18px,3vh,32px);align-items:start;padding-top:clamp(8px,2vh,24px)
}
.vic .vic-hero .bs-hero__grid--work .bs-hero__title{grid-area:auto;min-width:0}
.vic .vic-hero .bs-hero__grid--work .bs-hero__role{grid-area:auto;margin-top:14px}
.vic .vic-hero.bs-hero--evidence .bs-hero__grid--work .bs-h1{font-size:clamp(38px,6vw,84px);letter-spacing:-.035em}
.vic .bs-hero__work{min-width:0}
@media (min-width:1100px){
  .vic .vic-hero.bs-hero .bs-hero__grid--work,
  .vic .vic-hero.bs-hero--evidence .bs-hero__grid--work{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,4vw,72px);align-items:end}
  .vic .vic-hero .bs-hero__grid--work .bs-hero__title{padding-bottom:24px}
}

/* --------------------------------------------------------- the motif atlas --- */
/* the 120 marks stay in page flow; the family filters and the search sit behind
   one quiet disclosure with the live count beside it */
.vic .vat__more{margin:0 0 clamp(14px,2vh,22px)}
.vic .vat__moresum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none;border-top:1px solid var(--v-edge-soft);border-bottom:1px solid var(--v-edge-soft);font:600 11px/1.2 var(--v-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--v-ink)}
.vic .vat__moresum::-webkit-details-marker{display:none}
.vic .vat__moresum::marker{content:''}
.vic .vat__moresum .vat__count{font:400 12px/1.2 var(--v-ui);letter-spacing:.02em;text-transform:none;color:var(--v-ink-mute);margin-left:auto}
.vic .vat__moresum::after{content:'+';font-size:16px;line-height:1;color:var(--v-ink-mute)}
.vic .vat__more[open] .vat__moresum::after{content:'\2013'}
.vic .vat__srlab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vic .vat__more .vat__bar{padding-top:14px}

/* ------------------------------------------- the fifty-component browser --- */
.vic .vsys-inst__more{flex:1 1 100%;margin:0}
.vic .vsys-inst__moresum{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border:1px solid var(--v-line-2,var(--v-edge));border-radius:999px;cursor:pointer;list-style:none;font:500 12px/1 var(--v-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink)}
.vic .vsys-inst__moresum::-webkit-details-marker{display:none}
.vic .vsys-inst__moresum::marker{content:''}
.vic .vsys-inst__more[open] .vsys-inst__moresum{background:var(--v-ink);color:var(--v-canvas-1,#fff)}
.vic .vsys-inst__morein{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 0 2px}

/* ------------------------------------------------ the type + icon stage --- */
/* The colour stage was made to grow with its content; the type stage was still an
   absolute overlay, so on a phone the frame collapsed and the glyph tiles were
   printed over the chapter heading. The composition now sits in flow. */
.vic[data-vic-env] .bxp__stage .bxt{position:relative;inset:auto;width:100%;min-height:clamp(320px,40vw,560px);box-sizing:border-box}
@media (max-width:900px){
  .vic[data-vic-env] .bxp__stage .bxt{min-height:0;padding:clamp(16px,4vw,24px)}
}

/* ------------------------------------------------------ the Victory case --- */
/* more footage under a smaller headline */
.vic[data-vic-env] .vc .vc-h1{font-size:clamp(34px,4.8vw,72px);max-width:14ch}
.vic[data-vic-env] .vc .vc-deck{font-size:clamp(17px,1.5vw,22px);max-width:40ch;margin-top:clamp(12px,2vh,20px)}
.vc-hero{min-height:min(100svh,760px)}
.vc-hero__copy{padding-top:clamp(140px,30vh,300px)}
/* the identity at a glance: four finished things, each a way into the identity lens */
.vic .vc-glance{padding:clamp(18px,3vh,32px) 0 0}
.vic .vc-glance__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.vic .vc-glance__i{display:grid;gap:8px;text-decoration:none;color:var(--v-ink)}
.vic .vc-glance__art{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:var(--v-panel-1);border:1px solid var(--v-edge-soft);border-radius:3px;padding:12%}
.vic .vc-glance__art img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.vic .vc-glance__art--screen{padding:8% 22% 0;align-items:start}
.vic .vc-glance__art--screen img{max-height:none;width:100%}
.vic .vc-glance__art--motif{padding:22%}
.vic .vc-glance__art--motif img{width:100%}
.vic .vc-glance__k{font:600 10.5px/1.2 var(--v-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--v-ink-mute)}
.vic .vc-glance__i:hover .vc-glance__k{color:var(--v-accent)}
.vic .vc-glance__i:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}
@media (max-width:760px){
  .vic .vc-glance__row{grid-template-columns:1fr 1fr;gap:10px}
  .vc-hero{min-height:min(100svh,640px)}
  .vc-hero__copy{padding-top:120px}
}
/* the chapter links stay a bar between phone and desktop widths, since the phone select is gone */
@media (min-width:761px){
  .vic .vc-bar .vic-bar__nav{display:flex}
}
/* the lens: always in view */
@media (max-width:760px){
  .vic .vc-bar .vc-lens{display:flex;width:100%;margin:10px 0 2px}
  .vic .vc-bar .vc-lens__b{flex:1 1 0;justify-content:center;min-height:44px}
}
/* chapter headings at reading scale; explanations one line */
.vic .vc-head .vc-h2{font-size:clamp(28px,3.6vw,54px)}
.vic .vc-ex{padding-top:clamp(40px,7vh,88px);padding-bottom:clamp(40px,7vh,88px)}

/* ------------------------------------------------------ the icon library --- */
/* the fifty icons stay in view; size and category tools sit behind one disclosure */
.vic .pa__more{margin:0}
.vic .pa__moresum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;cursor:pointer;list-style:none;border-bottom:1px solid var(--vi-line,var(--v-edge-soft));font:600 11px/1.2 var(--v-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--v-ink)}
.vic .pa__moresum::-webkit-details-marker{display:none}
.vic .pa__moresum::marker{content:''}
.vic .pa__moresum::after{content:'+';font-size:16px;line-height:1;color:var(--v-ink-mute)}
.vic .pa__more[open] .pa__moresum::after{content:'\2013'}
.vic .pa__linkrow{padding:10px 12px;border-top:1px solid var(--vi-line,var(--v-edge-soft))}
.vic .pa__linkrow .pa__link{margin:0}

/* ------------------------------------------------- small contrast repairs --- */
/* labels inside the evidence disclosures that sat under 4.5:1 */
.vic .bs-film__head .bs-kicker .idx{color:#FF9A6F}
.vic[data-vic-env] .bs-film__lab{color:rgba(244,248,250,.78)}
.vic .cpl__hx,.vic .cpl__famh{color:#666;opacity:1}

/* a landscape phone has no height to give a second persistent strip */
@media (max-height:520px){
  .vic .vic-bar{position:static;top:auto}
}

/* tablets: the bar shows every link once, in flow, rather than wrapping into a
   two-row sticky strip */
@media (min-width:761px) and (max-width:1100px){
  .vic .vic-bar{position:static;top:auto}
}