/* The Victory webfonts are no longer delivered. This is the Victory UI
SYSTEM PAGE — live website text describing the system — not artwork, so
per the sitewide rule it is reset in Radikal. Weights snapped to genuine
cuts: Radikal has no 600. Victory's actual artwork keeps its own
letterforms wherever it is raster or outlined vector. */
/* ============================================================================
victory-ui-system.css — Victory Directional UI + Pilgrim Waymark modules.
Everything is scoped under .vsys so the portfolio shell (Satoshi/Figtree,
nav, footer, tokens) is never touched. The Victory artifacts are shown as
untouched ![]()
SVGs; only the exhibition chrome around them is styled here.
Public Sans + Source Serif 4 are loaded here and used ONLY inside .vsys.
========================================================================== */
/* --- packaged application fonts, scoped to Victory modules only --- */
/* portfolio-shell tokens the modules borrow (do not redefine globals) */
.vsys{
--v-ink:#171717; --v-bone:#F5F2EC; --v-iv:#D73A2C; --v-line:rgba(23,23,23,.14);
--v-line-2:rgba(23,23,23,.28); --v-muted:#5f5a54;
--v-ui:var(--font-brand); /* Victory Public Sans is no longer shipped */
--v-serif:var(--font-brand); /* Victory Source Serif 4 is no longer shipped */
}
/* ---- section shell ---- */
.vsys{margin:0}
.vsys .vsys-head{margin:0 0 clamp(20px,3vh,34px)}
.vsys .vsys-eyebrow{font-family:var(--v-ui);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--v-iv);margin:0 0 14px}
.vsys .vsys-h{font-family:var(--v-ui);font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.018em;margin:0;color:var(--v-ink);text-wrap:balance}
.vsys .vsys-body{font-family:var(--v-ui);font-weight:400;font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--v-ink);max-width:74ch;margin:16px 0 0}
.vsys .vsys-pull{font-family:var(--v-serif);font-size:clamp(20px,2.4vw,30px);line-height:1.3;color:var(--v-ink);margin:clamp(20px,3vh,32px) 0 0;max-width:26ch;text-wrap:balance;border-left:2px solid var(--v-iv);padding-left:22px}
/* ---- generic specimen frame (untouched SVG via ![]()
) ---- */
.vsys-spec{margin:0;background:#fff;border:1px solid var(--v-line);padding:clamp(16px,2.2vw,34px);display:flex;align-items:center;justify-content:center;min-height:0}
.vsys-spec--night{background:#07141C;border-color:rgba(214,224,255,.16)}
.vsys-spec img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain}
.vsys-cap{font-family:var(--v-ui);font-weight:500;font-size:12.5px;letter-spacing:.02em;color:var(--v-muted);margin:12px 0 0;display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.vsys-cap .vsys-tag{font-family:var(--v-ui);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--v-iv)}
.vsys-cap a{color:var(--v-iv);text-decoration:none;border-bottom:1px solid transparent}
.vsys-cap a:hover{border-bottom-color:var(--v-iv)}
/* ---- side-by-side pair (Free vs Ally, or Day vs Night) ---- */
.vsys-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);align-items:stretch}
.vsys-pair .vsys-col{display:flex;flex-direction:column}
.vsys-pair .vsys-spec{flex:1}
@media (max-width:720px){.vsys-pair{grid-template-columns:1fr}}
/* ---- curated group spreads ---- */
.vsys-grid{display:grid;gap:clamp(12px,1.6vw,20px)}
.vsys-grid--2{grid-template-columns:repeat(2,1fr)}
.vsys-grid--3{grid-template-columns:repeat(3,1fr)}
.vsys-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.vsys-grid--3,.vsys-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vsys-grid--2,.vsys-grid--3,.vsys-grid--4{grid-template-columns:1fr}}
/* ---- environment / tier segmented controls ---- */
.vsys-controls{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin:clamp(18px,2.6vh,28px) 0 0;font-family:var(--v-ui)}
.vsys-seg{display:inline-flex;border:1px solid var(--v-line-2);background:#fff}
.vsys-seg button{appearance:none;background:none;border:0;font-family:var(--v-ui);font-weight:500;font-size:13px;letter-spacing:.01em;color:var(--v-muted);padding:10px 16px;min-height:48px;cursor:pointer;border-right:1px solid var(--v-line)}
.vsys-seg button:last-child{border-right:0}
.vsys-seg button[aria-pressed="true"]{background:var(--v-ink);color:var(--v-bone)}
.vsys-seg button:focus-visible{outline:2px solid var(--v-iv);outline-offset:2px}
.vsys-seglabel{font-family:var(--v-ui);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--v-muted);margin-right:2px}
/* ============================================================================
UI comparison instrument (Brand Systems Section B)
============================================================================ */
.vsys-inst{border:1px solid var(--v-line);background:var(--v-bone)}
.vsys-inst__stage{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--v-line)}
.vsys-inst__cell{background:#fff;padding:clamp(16px,2.4vw,40px);display:flex;flex-direction:column;gap:12px;min-width:0}
.vsys-inst__cell--night{background:#07141C}
.vsys-inst__envtag{font-family:var(--v-ui);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--v-muted)}
.vsys-inst__cell--night .vsys-inst__envtag{color:#9FB0B8}
.vsys-inst__art{flex:1;display:flex;align-items:center;justify-content:center;min-height:clamp(150px,26vh,300px)}
.vsys-inst__art img{display:block;width:100%;height:auto;max-height:clamp(150px,26vh,300px);object-fit:contain}
/* compare-tiers 2x2 */
.vsys-inst__stage--matrix{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
.vsys-inst__stage--matrix .vsys-inst__art,.vsys-inst__stage--matrix .vsys-inst__art img{min-height:clamp(120px,18vh,210px);max-height:clamp(120px,18vh,210px)}
.vsys-inst__tiertag{font-family:var(--v-ui);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--v-iv);margin-top:4px}
/* controls bar */
.vsys-inst__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px clamp(14px,2vw,24px);border-top:1px solid var(--v-line);font-family:var(--v-ui);background:var(--v-bone)}
.vsys-inst__nav{display:inline-flex;align-items:center;gap:6px}
.vsys-inst__btn{appearance:none;border:1px solid var(--v-line-2);background:#fff;min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--v-ink);font-family:var(--v-ui);font-weight:500;font-size:14px}
.vsys-inst__btn:hover{border-color:var(--v-ink)}
.vsys-inst__btn:focus-visible{outline:2px solid var(--v-iv);outline-offset:2px}
.vsys-inst__meta{display:flex;flex-direction:column;line-height:1.2;min-width:170px}
.vsys-inst__count{font-family:var(--v-ui);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--v-muted)}
.vsys-inst__name{font-size:15px;font-weight:700;color:var(--v-ink)}
.vsys-inst__spacer{flex:1 1 20px}
.vsys-inst__fams{display:flex;flex-wrap:wrap;gap:4px}
.vsys-inst__fam{appearance:none;border:1px solid var(--v-line);background:#fff;font-family:var(--v-ui);font-weight:500;font-size:12px;color:var(--v-muted);padding:8px 11px;min-height:48px;cursor:pointer}
.vsys-inst__fam[aria-pressed="true"]{background:var(--v-ink);color:var(--v-bone);border-color:var(--v-ink)}
.vsys-inst__fam:focus-visible{outline:2px solid var(--v-iv);outline-offset:2px}
.vsys-inst__search{font-family:var(--v-ui);font-size:13px;padding:9px 12px;min-height:48px;border:1px solid var(--v-line-2);background:#fff;width:150px;color:var(--v-ink)}
.vsys-inst__search:focus-visible{outline:2px solid var(--v-iv);outline-offset:1px}
/* detail disclosure */
.vsys-inst__detail{border-top:1px solid var(--v-line);padding:16px clamp(14px,2vw,24px);font-family:var(--v-ui);display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 26px;background:#fff}
.vsys-inst__detail dt{font-family:var(--v-ui);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--v-muted);margin:0 0 3px}
.vsys-inst__detail dd{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--v-ink)}
.vsys-inst__detail .vsys-inst__dl{font-family:var(--v-ui);color:var(--v-iv);text-decoration:none;font-weight:500;border-bottom:1px solid transparent}
.vsys-inst__detail .vsys-inst__dl:hover{border-bottom-color:var(--v-iv)}
@media (max-width:720px){
.vsys-inst__stage{grid-template-columns:1fr}
.vsys-inst__stage--matrix{grid-template-columns:1fr}
.vsys-inst__bar{gap:10px 12px}
}
/* ============================================================================
Pilgrim Waymark synchronized dual viewers
============================================================================ */
.vsys-way{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)}
@media (max-width:720px){.vsys-way{grid-template-columns:1fr}}
.vsys-way__card{border:1px solid var(--v-line);background:#fff;display:flex;flex-direction:column}
.vsys-way__card--night{background:#07141C;border-color:rgba(214,224,255,.16)}
.vsys-way__env{font-family:var(--v-ui);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--v-muted);padding:12px 16px 0}
.vsys-way__card--night .vsys-way__env{color:#9FB0B8}
.vsys-way__art{padding:clamp(14px,2vw,28px);display:flex;align-items:center;justify-content:center;min-height:clamp(240px,32vh,360px)}
.vsys-way__art img{display:block;width:100%;max-width:320px;height:auto;object-fit:contain;transition:opacity .22s ease}
@media (prefers-reduced-motion:reduce){.vsys-way__art img{transition:none}}
.vsys-way__meta{border-top:1px solid var(--v-line);padding:12px 16px;font-family:var(--v-ui);min-height:74px}
.vsys-way__card--night .vsys-way__meta{border-top-color:rgba(214,224,255,.16)}
.vsys-way__name{font-family:var(--v-serif);font-size:19px;font-weight:500;color:var(--v-ink)}
.vsys-way__card--night .vsys-way__name{color:#F2E9D8}
.vsys-way__desig{font-size:12.5px;color:var(--v-muted);margin-top:2px}
.vsys-way__card--night .vsys-way__desig{color:#9FB0B8}
/* shared control bar under the two cards */
.vsys-way__bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:6px;font-family:var(--v-ui)}
.vsys-way__phase{font-family:var(--v-ui);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--v-iv)}
.vsys-way__count{font-family:var(--v-ui);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--v-muted)}
.vsys-way__spacer{flex:1}
/* small waymark set (WAAG / deep case), image-led */
.vsys-markset{display:grid;gap:clamp(12px,1.6vw,20px)}
.vsys-markset figure{margin:0;background:#fff;border:1px solid var(--v-line);padding:14px}
.vsys-markset figure.is-night{background:#07141C;border-color:rgba(214,224,255,.16)}
.vsys-markset img{display:block;width:100%;height:auto;object-fit:contain}
.vsys-markset figcaption{font-family:var(--v-ui);font-size:11.5px;letter-spacing:.02em;color:var(--v-muted);margin-top:10px}
/* ============================================================================
AI-assisted process panel
============================================================================ */
.vsys-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--v-line);border:1px solid var(--v-line);margin-top:clamp(20px,3vh,32px)}
@media (max-width:820px){.vsys-proc{grid-template-columns:1fr}}
.vsys-proc__step{background:#fff;padding:clamp(18px,2vw,26px);font-family:var(--v-ui)}
.vsys-proc__n{font-family:var(--v-serif);font-size:13px;font-weight:500;color:var(--v-iv);letter-spacing:.1em}
.vsys-proc__t{font-size:15px;font-weight:700;color:var(--v-ink);margin:8px 0 0;line-height:1.3}
/* focus + reduced motion baseline */
.vsys :focus-visible{outline:2px solid var(--v-iv);outline-offset:2px}
/* ============================================================================
Product-screen viewer (Brand Systems Interface chapter) — synchronized
Day/Night mobile mockups. New classes, used only on the Brand Systems page.
============================================================================ */
.vsys-screens{margin:0}
.vsys-screens__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,52px);justify-items:center;align-items:start}
.vsys-screens__cell{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px}
.vsys-screens__env{font-family:var(--v-ui);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--v-muted);text-align:center}
.vsys-screens__frame{position:relative;width:100%;aspect-ratio:430/932;background:#fff;border:1px solid var(--v-line);overflow:hidden;cursor:zoom-in}
.vsys-screens__frame--night{background:#07141C;border-color:rgba(214,224,255,.16)}
.vsys-screens__frame img{width:100%;height:100%;object-fit:contain;display:block;transition:opacity .3s ease}
.vsys-screens__frame:focus-visible{outline:2px solid var(--v-iv);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.vsys-screens__frame img{transition:none}}
.vsys-screens__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:clamp(16px,2.4vh,26px);font-family:var(--v-ui)}
.vsys-screens__count{font-family:var(--v-ui);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--v-muted)}
.vsys-screens__name{font-size:15px;font-weight:700;color:var(--v-ink)}
.vsys-screens__spacer{flex:1}
.vsys-screens__note{width:100%;margin-top:8px;font-family:var(--v-ui);font-size:12px;color:var(--v-muted)}
@media (max-width:720px){
.vsys-screens__pair{grid-template-columns:1fr;gap:clamp(16px,4vw,28px)}
.vsys-screens__cell{max-width:300px;margin:0 auto}
}
/* inspect overlay (scoped to the screen viewer; the page loads no shared lightbox) */
.vsys-lb{position:fixed;inset:0;z-index:9999;background:rgba(12,10,9,.86);display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.vsys-lb.is-open{display:flex}
.vsys-lb__img{max-width:min(92vw,760px);max-height:90vh;width:auto;height:auto;object-fit:contain;background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.vsys-lb__x{position:absolute;top:16px;right:16px;min-width:48px;min-height:48px;border:1px solid rgba(245,242,236,.4);background:rgba(23,23,23,.5);color:#F5F2EC;font-size:16px;cursor:pointer}
.vsys-lb__x:focus-visible{outline:2px solid #fff;outline-offset:2px}