/* ==========================================================================
   victory-logofamily.css — I1, the logo family
   --------------------------------------------------------------------------
   Two products, four treatments each. Every file here is a byte-identical
   copy of Jason's master; nothing is re-coloured, re-exported or
   reconstructed, so the CSS never touches the artwork. It sets the GROUND
   each treatment needs and gets out of the way:

     full-colour positive, one-colour black  ->  light ground
     full-colour negative, one-colour white  ->  dark ground

   That pairing is the whole contrast contract for this chapter. A negative
   lockup on a light card would be invisible, and no amount of page theme
   fixes it — the ground belongs to the artifact, not to the environment.
   ========================================================================== */

/* --- the lead: both products, at scale ------------------------------------
   The two lockups are NOT the same shape: Victory's horizontal is 3.74:1 and
   Victory Shield's is 6.56:1, measured from the rendered ink of the masters.
   Sizing them to a common WIDTH would print the shield's compass at 57% of
   the height of Victory's, which is a false comparison — the two marks are
   the same size in the artwork. So the plates are equal and the artwork is
   sized by HEIGHT: same mark height, different lockup width, which is the
   real relationship. max-width plus object-fit is the guard — if a plate is
   ever too narrow for the shield the image loses height rather than aspect.
   ------------------------------------------------------------------------- */
/* The two artefact grounds this chapter prints on, and the ink each one takes.
   Declared once, at the top of the component that owns them, so every surface
   below states a ground and an ink together rather than a ground alone. These
   are properties of the ARTWORK's world, not the reader's: they do not change
   between High Sun and Night Road, which is the whole point of the chapter. */
.vic .vc-ex--family{
  --v-plate-dark:#0B1B24;
  --v-plate-ink-dark:#DDF4FF;
  --v-plate-ink-light:#20282D;
}

.vic .vlf__lead{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--case-gap);
  margin-block-start:var(--vs-6);
  --vlf-h:clamp(56px,5.6vw,84px);
}
.vic .vlf__hero{margin:0;display:flex;flex-direction:column;gap:var(--vs-3)}
.vic .vlf__heroart{
  display:grid;place-items:center;
  padding:clamp(20px,4vw,56px) clamp(20px,2.6vw,36px);
  border:1px solid var(--v-edge-soft);
  min-height:clamp(120px,15vw,208px);
}
.vic .vlf__heroart img{
  display:block;height:var(--vlf-h);width:auto;max-width:100%;object-fit:contain;
}
@media (max-width:1023px){
  .vic .vlf__lead{grid-template-columns:minmax(0,1fr);--vlf-h:clamp(30px,10.5vw,84px)}
}
.vic .vlf__heroart[data-ground="light"]{background:var(--v-paper);color:var(--v-plate-ink-light)}
.vic .vlf__heroart[data-ground="dark"]{background:var(--v-plate-dark);color:var(--v-plate-ink-dark)}
.vic .vlf__job{display:grid;gap:var(--vs-1)}
.vic .vlf__jobk{margin:0}
.vic .vlf__jobt{margin:0;font-size:var(--t-body);line-height:var(--t-body-lh);max-width:var(--m-rationale)}

/* --- movement label: the sheet begins here --------------------------------
   The rule spans the rail it governs, not the label's own measure — a hairline
   that stops at 40% of the grid beneath it reads as an accident. Labels are
   capped to the body measure by the page default, so this one opts out. */
.vic .vlf__mv{
  margin:var(--vs-8) 0 var(--vs-4);
  padding-block-start:var(--vs-4);
  border-block-start:1px solid var(--v-edge-soft);
  max-width:none;
}

/* --- the treatment sheet --------------------------------------------------
   One row per product, four treatments across. The row reads as a sentence
   left to right — positive, negative, one colour, one colour reversed — and
   the two rows stack so the same treatment lands in the same column on both
   products. That column alignment is the comparison; it survives to two-up
   at 900px and is given up only when a single tile needs the full measure.
   ------------------------------------------------------------------------- */
.vic .vlf__rows{list-style:none;margin:var(--vs-5) 0 0;padding:0;display:grid;gap:var(--vs-7)}
.vic .vlf__row{margin:0;min-width:0}
/* The row key takes no rule of its own: the movement above already carries
   one, and the tiles' own top edges give the horizontal. Two hairlines a
   label apart would fight. */
.vic .vlf__rowk{margin:0 0 var(--vs-3);max-width:none}
.vic .vlf__four{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--vs-5) var(--case-gap);
}
@media (max-width:1099px){.vic .vlf__four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.vic .vlf__four{grid-template-columns:minmax(0,1fr)}}

.vic .vlf__cell{margin:0;min-width:0}
.vic .vlf__b{
  display:block;width:100%;border:0;background:none;padding:0;cursor:pointer;
  text-align:left;color:inherit;
}
.vic .vlf__b:focus-visible{outline:2px solid var(--v-focus);outline-offset:4px}
.vic .vlf__art{
  display:block;
  aspect-ratio:3 / 2;padding:10% 9%;
  box-sizing:border-box;
  border:1px solid var(--v-edge-soft);
  transition:border-color .18s ease,transform .18s ease;
}
/* A plate is an artefact surface: it carries the ground the artwork was drawn
   for, which is not the ground the page is on. So the pairing is declared as a
   pairing — ground and the ink that belongs on it, together, in one rule. The
   artwork here is an <img> and takes no ink today; declaring it anyway is what
   keeps the surface honest if a caption, a badge or a fallback string is ever
   printed on one, and it is the same contract `.vic-paper` uses. */
.vic .vlf__art[data-ground="light"]{background:var(--v-paper);color:var(--v-plate-ink-light)}
.vic .vlf__art[data-ground="dark"]{background:var(--v-plate-dark);color:var(--v-plate-ink-dark)}
/* width and height both 100% of the padded box, and object-fit does the rest:
   a 6.56:1 shield and a 3.74:1 Victory lockup both land inside the same tile
   without either one being stretched or spilling out of it. */
.vic .vlf__art img{display:block;width:100%;height:100%;object-fit:contain}
.vic .vlf__b:hover .vlf__art{border-color:var(--v-accent);transform:translateY(-2px)}
.vic .vlf__t{display:block;margin-block-start:var(--vs-2);color:var(--v-ink)}
.vic .vlf__m{display:block;margin-block-start:2px;color:var(--v-ink-mute);
  font:400 12px/1.4 var(--v-ui)}
@media (prefers-reduced-motion:reduce){
  .vic .vlf__art{transition:none}
  .vic .vlf__b:hover .vlf__art{transform:none}
}

/* --- the inspector -------------------------------------------------------- */
.vlf-lock,.vlf-lock body{overflow:hidden}
.vlf-lock body{position:fixed;width:100%}
.vic .vlf__insp{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:clamp(10px,2.4vw,32px)}
.vic .vlf__insp[hidden]{display:none !important}
.vic .vlf__scrim{position:absolute;inset:0;background:var(--v-scrim)}
/* The panel is a surface with its own canvas AND real text on it, so it names
   its ink beside its ground instead of relying on what it happens to inherit
   through the scrim. */
.vic .vlf__panel{
  position:relative;width:min(980px,100%);max-height:92vh;overflow:auto;
  background:var(--v-canvas-1);color:var(--v-ink);box-shadow:var(--v-lift-3);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  grid-template-areas:"bar bar" "stage meta" "stage nav";
  gap:var(--vs-4) var(--case-gap);padding:var(--vs-5);align-content:start;
}
.vic .vlf__pbar{grid-area:bar;display:flex;align-items:center;gap:var(--vs-4);
  border-block-end:1px solid var(--v-edge-soft);padding-block-end:var(--vs-3)}
.vic .vlf__pbar .va-label{margin:0;flex:1 1 auto}
.vic .vlf__stage{grid-area:stage;display:grid;place-items:center;padding:clamp(20px,3vw,40px);height:clamp(210px,30vh,280px);box-sizing:border-box}
.vic .vlf__stage[data-ground="light"]{background:var(--v-paper);color:var(--v-plate-ink-light)}
.vic .vlf__stage[data-ground="dark"]{background:var(--v-plate-dark);color:var(--v-plate-ink-dark)}
.vic .vlf__big{display:block;width:100%;height:100%;object-fit:contain}
.vic .vlf__meta{grid-area:meta;align-self:start}
.vic .vlf__name{margin:0;font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(24px,2.2vw,32px);line-height:1.12;letter-spacing:-.02em;color:var(--v-ink)}
/* label rail and value rail: one cap line per row, so the eye can run down
   either column. The two rails separate by TYPE, not by colour — 11px caps
   at 600 against 13px sentence case is already unambiguous, and it keeps the
   spec labels the same ink as the panel's own "Approved master" label two
   lines above. (The --v-ink-label token is blue in daylight, but a page-wide
   environment rule outranks .va-label on every <p>, so labels across these
   pages render as full ink. Taking the raw token here made this one list blue
   and nothing else. Noted as a system-level finding rather than fixed
   page-wide.) The label is a label, not a link — it never takes accent. */
.vic .vlf__spec{
  margin:var(--vs-4) 0 0;
  display:grid;grid-template-columns:minmax(0,10ch) minmax(0,1fr);
  column-gap:var(--vs-4);row-gap:6px;align-items:baseline;
}
.vic .vlf__spec dt{
  margin:0;font:600 11px/1.5 var(--v-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--v-ink);
}
.vic .vlf__spec dd{margin:0;font:400 13px/1.5 var(--v-ui);color:var(--v-ink)}
.vic .vlf__dl{margin:var(--vs-4) 0 0}
.vic .vlf__dl a{font:600 12px/1.4 var(--v-ui);color:var(--v-ink);text-decoration:none;
  border-block-end:1px solid var(--v-accent)}
.vic .vlf__nav{grid-area:nav;display:flex;gap:var(--vs-1);align-self:end}
.vic .vlf__seg button,.vic .vlf__close,.vic .vlf__nav button{
  border:0;background:none;cursor:pointer;padding:8px 13px;
  font:600 12px/1.3 var(--v-ui);color:var(--v-ink-mute);
  box-shadow:inset 0 0 0 1px var(--v-edge-soft);
}
.vic .vlf__close:hover,.vic .vlf__nav button:hover{color:var(--v-accent)}

@media (max-width:760px){
  .vic .vlf__lead{grid-template-columns:minmax(0,1fr)}
  .vic .vlf__panel{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"bar" "stage" "meta" "nav";padding:var(--vs-4)}
}