/* ---------- 1. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
img,picture,video,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* ---------- 2. tokens ---------- */
:root{
  --paper:#FFFFFF;
  --sand:#F5F0E6;
  --ink:#101010;
  --ink-soft:#5C5C5C;
  --ink-inv:#FFFFFF;
  --red:#E23D28;
  --yellow:#FFB703;
  --teal:#00857D;
  --blue:#1B4FD8;
  --tone:#E23D28;
  --on-tone:#FFFFFF;
  --rule:#101010;
  --hair:rgba(16,16,16,.16);
  --t-huge:clamp(2.6rem,7vw,6rem);
  --t-big:clamp(1.8rem,3.4vw,3rem);
  --t-mid:clamp(1.15rem,1.8vw,1.5rem);
  --t-lead:clamp(1.05rem,1.4vw,1.28rem);
  --t-text:1.0625rem;
  --t-micro:.72rem;
  --sec:clamp(72px,8vw,128px);
  --edge:clamp(20px,4vw,56px);
  --wide:1320px;
  --read:60ch;
  --ease:cubic-bezier(.2,.7,.2,1);
}
.tone-red{--tone:#E23D28;--on-tone:#FFFFFF}
.tone-yellow{--tone:#FFB703;--on-tone:#101010}
.tone-teal{--tone:#00857D;--on-tone:#FFFFFF}
.tone-blue{--tone:#1B4FD8;--on-tone:#FFFFFF}

/* ---------- 3. base ---------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--t-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:700;line-height:1.02}
h1{font-size:var(--t-huge);letter-spacing:-.03em}
h2{font-size:var(--t-big);letter-spacing:-.02em}
h3{font-size:var(--t-mid);letter-spacing:-.01em}
p{max-width:var(--read)}
p + p{margin-top:.9em}

/* ---------- 4. layout ---------- */
.vl-wrap{width:100%;max-width:var(--wide);margin:0 auto;padding-left:var(--edge);padding-right:var(--edge)}
.vl-sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.vl-sec-sand{background:var(--sand)}
.vl-sec-tone{background:var(--tone);color:var(--on-tone)}
.vl-row{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,44px)}
.vl-col{flex:1 1 320px;min-width:0}
.vl-col-wide{flex:2 1 460px;min-width:0}
@media (min-width:900px){
  .vl-sticky{position:sticky;top:88px}
}

/* ---------- 5. components ---------- */
.vl-skip{position:absolute;left:-9999px}
.vl-skip:focus{left:var(--edge);top:12px;z-index:60;background:var(--paper);padding:10px 14px}
.vl-nav{border-bottom:4px solid var(--rule);background:var(--paper)}
.vl-nav-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-top:16px;padding-bottom:16px}
.vl-mark{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.03em;text-decoration:none;margin-right:auto}
.vl-nav a{text-decoration:none;font-size:.94rem;font-weight:500}
.vl-nav a:hover{color:var(--tone)}
.vl-eyebrow{display:inline-block;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--tone)}
.vl-lead{font-size:var(--t-lead);color:var(--ink-soft);max-width:52ch}
.vl-num{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:clamp(2.4rem,5vw,4.2rem);line-height:.9;color:var(--tone)}
.vl-pill{display:inline-block;border-radius:999px;padding:5px 14px;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:600;background:var(--tone);color:var(--on-tone)}
.vl-pill-quiet{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.vl-link{display:inline-block;text-decoration:none;font-weight:600;border-bottom:2px solid var(--tone);padding-bottom:2px}
.vl-link:hover{background:var(--tone);color:var(--on-tone)}
.vl-rule{height:4px;background:var(--rule);border:0;margin:0}
.vl-hair{height:1px;background:var(--hair);border:0;margin:0}
.vl-card{border-radius:12px;overflow:hidden;background:var(--paper);border:1px solid var(--hair)}
.vl-shot{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:1/1}
.vl-shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.vl-shot:hover img{transform:scale(1.04)}
.vl-shot-offset{position:relative}
.vl-shot-offset::before{content:"";position:absolute;left:10px;top:10px;right:-10px;bottom:-10px;background:var(--tone);z-index:0}
.vl-shot-offset > *{position:relative;z-index:1}
.vl-cap{font-size:var(--t-micro);color:var(--ink-soft);margin-top:8px}
.vl-pair{border-top:4px solid var(--rule);padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(48px,6vw,88px)}
.vl-plus{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:2rem;color:var(--tone);line-height:1}
.vl-block{background:var(--tone);color:var(--on-tone);padding:clamp(24px,3vw,40px);border-radius:12px}
.vl-details{border-top:1px solid var(--hair);padding:12px 0}
.vl-details summary{cursor:pointer;list-style:none;font-weight:600}
.vl-details summary::-webkit-details-marker{display:none}
.vl-foot{background:var(--ink);color:var(--ink-inv)}
.vl-foot a{text-decoration:none}
.vl-foot a:hover{text-decoration:underline;text-underline-offset:4px}
.is-hidden{display:none}
:focus-visible{outline:3px solid var(--tone);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 6. site rules (flat, appended) ---------- */
.vl-stack{margin-top:clamp(20px,2.4vw,32px)}
.vl-stack-s{margin-top:12px}
.vl-stack-l{margin-top:clamp(36px,4vw,64px)}
.vl-measure{max-width:var(--read)}
.vl-quiet{color:var(--ink-soft)}
.vl-tiny{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.vl-mono-note{font-size:.86rem;color:var(--ink-soft);max-width:78ch}
.vl-sec-tone .vl-quiet,.vl-sec-tone .vl-lead,.vl-sec-tone .vl-cap,.vl-sec-tone .vl-mono-note{color:var(--on-tone)}
.vl-sec-tone .vl-eyebrow{color:var(--on-tone)}
.vl-sec-tone .vl-num{color:var(--on-tone)}
.vl-sec-tone .vl-link{border-bottom-color:var(--on-tone)}
.vl-sec-tone .vl-link:hover{background:var(--on-tone);color:var(--tone)}

/* header extras */
.vl-navlist{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;width:100%}
.vl-burger{background:var(--paper);border:2px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;margin-left:auto}
@media (max-width:899px){
  .vl-navlist{display:none;flex-direction:column;align-items:flex-start;gap:10px;padding-top:12px;border-top:1px solid var(--hair)}
  .vl-navlist.is-open{display:flex}
}
@media (min-width:900px){
  .vl-navlist{width:auto;gap:12px 22px;margin-left:auto}
  .vl-burger{display:none}
}

/* offset plate must not overflow */
.vl-shot-offset{margin-right:10px;margin-bottom:10px}

/* filled panels used in place of photography */
.vl-shot-fill{background:var(--ink);color:var(--ink-inv);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,2vw,26px)}
.vl-shot-word{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;letter-spacing:-.02em}
.vl-shot-sub{font-size:.86rem;margin-top:10px;max-width:30ch}
.vl-shot-tag{font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--tone);margin-bottom:auto}
.vl-band{position:relative;aspect-ratio:21/9;background:var(--tone);color:var(--on-tone);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,3vw,44px);border-radius:12px;overflow:hidden}
.vl-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vl-band::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.08) 55%,transparent 100%);z-index:1;pointer-events:none}
.vl-band > :not(img){position:relative;z-index:2}

/* pair layout */
.vl-pair-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px}
.vl-pair-place{color:var(--ink-soft);margin-top:6px}
.vl-shot-tall{aspect-ratio:4/5}
.vl-pair-media{flex:1 1 300px}
.vl-plusline{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,3vw,44px);margin-bottom:clamp(20px,2.4vw,32px)}
.vl-plusline-rule{flex:1 1 0;min-width:0;height:4px;background:var(--rule)}
.vl-formula{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:clamp(24px,3vw,40px)}
.vl-formula-word{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:clamp(1.1rem,2.2vw,1.7rem);letter-spacing:-.01em}
@media (min-width:900px){
  .vl-pair-alt .vl-pair-media{order:2}
  .vl-pair-alt .vl-pair-body{order:1}
}
.vl-label{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--tone)}
.vl-catch{border-left:4px solid var(--tone);padding-left:14px;max-width:var(--read)}
.vl-meta{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;margin-top:22px}

/* section rows on home */
.vl-kind{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;border-top:4px solid var(--rule);padding-top:22px;padding-bottom:22px;text-decoration:none}
.vl-kind-name{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.02em;color:var(--tone);margin-right:auto}
.vl-kind-note{color:var(--ink-soft);max-width:46ch}
.vl-kind-count{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:1.5rem}

/* grids */
.vl-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.4vw,34px)}
@media (min-width:640px){.vl-grid-2{grid-template-columns:1fr 1fr}}
@media (min-width:640px){.vl-grid-3{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.vl-grid-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:640px){.vl-grid-4{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.vl-grid-4{grid-template-columns:repeat(4,1fr)}}
.vl-tile{border-top:4px solid var(--rule);padding-top:16px}
.vl-tile a{text-decoration:none}
.vl-tile-name{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:-.01em}

/* card (pairs index) */
.vl-card-in{padding:18px}
.vl-card-shots{display:block}
.vl-card-num{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:1.6rem;color:var(--tone);line-height:1}
.vl-card h3{margin-top:6px}
.vl-card-reason{color:var(--ink-soft);margin-top:8px;font-size:.95rem}

/* filter */
.vl-filter{display:flex;flex-wrap:wrap;gap:10px}
.vl-chip{border-radius:999px;padding:7px 16px;font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:600;background:transparent;color:var(--ink);border:1px solid var(--hair);cursor:pointer}
.vl-chip:hover{border-color:var(--ink)}
.vl-chip[aria-pressed="true"]{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}
.vl-count{font-weight:600;margin-top:16px}

/* forms */
.vl-form{max-width:34rem}
.vl-field{margin-top:18px}
.vl-field label{display:block;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.vl-input{width:100%;padding:12px 14px;border:1px solid var(--hair);border-radius:8px;background:var(--paper)}
.vl-check{display:flex;gap:10px;align-items:flex-start;margin-top:18px;max-width:var(--read)}
.vl-btn{margin-top:20px;background:var(--ink);color:var(--ink-inv);border:0;border-radius:999px;padding:12px 24px;font-weight:600;letter-spacing:.06em;cursor:pointer}
.vl-btn:hover{background:var(--tone);color:var(--on-tone)}

/* dispatch */
.vl-note{border-top:4px solid var(--rule);padding-top:18px}
.vl-note h3{margin-top:8px}
.vl-note-lead{color:var(--ink-soft);margin-top:10px}
.vl-note-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:14px;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.vl-note-big h3{font-size:var(--t-big);letter-spacing:-.02em}

/* footer */
.vl-foot-top{font-family:"Space Grotesk",Arial,sans-serif;font-weight:700;font-size:var(--t-big);letter-spacing:-.02em;max-width:20ch}
.vl-foot-cols{display:grid;grid-template-columns:1fr;gap:28px;margin-top:clamp(36px,4vw,56px)}
@media (min-width:640px){.vl-foot-cols{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.vl-foot-cols{grid-template-columns:repeat(4,1fr)}}
.vl-foot h2{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#B9B9B9}
.vl-foot li{margin-top:10px}
.vl-foot-bottom{border-top:1px solid rgba(255,255,255,.22);margin-top:clamp(36px,4vw,56px);padding-top:22px;font-size:.86rem;color:#C6C6C6}
.vl-foot-bottom p{max-width:78ch}
.vl-ack{margin-top:10px}

/* legal + prose */
.vl-prose h2{font-size:var(--t-mid);margin-top:clamp(32px,3.4vw,48px)}
.vl-prose h3{font-size:1.05rem;margin-top:26px}
.vl-prose p{margin-top:12px}
.vl-list{max-width:var(--read)}
.vl-list li{position:relative;padding-left:22px;margin-top:10px}
.vl-list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--tone)}
.vl-num-list li{border-top:1px solid var(--hair);padding-top:12px;margin-top:12px;max-width:var(--read)}

/* ---------- 7. accessible tone variants ---------- */
:root{--tone-text:#C3301C;--tone-deep:#C3301C}
.tone-red{--tone-text:#C3301C;--tone-deep:#C3301C}
.tone-yellow{--tone-text:#8A5A00;--tone-deep:#FFB703}
.tone-teal{--tone-text:#006F68;--tone-deep:#006F68}
.tone-blue{--tone-text:#1B4FD8;--tone-deep:#1B4FD8}
.vl-sec-tone{background:var(--tone-deep)}
.vl-block{background:var(--tone-deep)}
.vl-band{background:var(--tone-deep)}
.vl-pill{background:var(--tone-deep)}
.vl-eyebrow{color:var(--tone-text)}
.vl-label{color:var(--tone-text)}
.vl-shot-tag{color:var(--tone-text)}
.vl-nav a:hover{color:var(--tone-text)}
.vl-link:hover{background:var(--tone-deep);color:var(--on-tone)}
.vl-btn:hover{background:var(--tone-deep);color:var(--on-tone)}
.vl-sec-tone .vl-eyebrow{color:var(--on-tone)}
.vl-sec-tone .vl-label{color:var(--on-tone)}
.vl-sec-tone .vl-link:hover{background:var(--on-tone);color:var(--tone-deep)}
.vl-shot-fill .vl-shot-tag{color:var(--paper)}