/* ══════════════════════════════════════════════════════════════════════════════
   VERTICAL PAGES - shared styling for livestream.html, fashion.html, munich.html.

   Kept out of _site.css (which every page loads) and out of the three pages' own <style>
   blocks (which would be the same rules written three times). Everything here builds on
   the tokens in _site.css - no new colours, so a future theme change still reaches it.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── evidence bar: the numbers, stated as numbers ───────────────────────────── */
.vbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-top:1.4rem}
.vstat{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:1.1rem 1.2rem}
/* nowrap so a year span never breaks at its dash in a narrow card. Every value in here is
   a single figure - a formatted number or a span of years - and a formatted number has no
   break opportunity anyway, so this only ever affects the spans. */
.vstat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,3.4vw,2rem);
  letter-spacing:-.03em;line-height:1;color:var(--accent);white-space:nowrap}
/* CHILD combinator, not descendant. The label is the stat card's own <span>, but figures
   are built out of spans too - a year span is <b><span>2019</span>–<span>2023</span></b>,
   and a label can wrap one to inject a count mid-sentence. As a descendant selector this
   rule reached inside them and re-styled a headline year as an 11px dim BLOCK, so the live
   production page rendered its span of years as three stacked lines instead of one figure.
   Scoping it to the direct child leaves every nested span inheriting what encloses it. */
.vstat>span{display:block;margin-top:.4rem;font-size:.7rem;line-height:1.45;color:var(--dim)}
/* where a figure comes from, said out loud - one line, under the block it belongs to */
.vsrc{margin-top:.9rem;font-size:.7rem;line-height:1.7;color:var(--dim);max-width:78ch}
.vsrc b{color:var(--text);font-weight:600}

/* ── tiles ──────────────────────────────────────────────────────────────────── */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem;margin-top:1rem}
.vt{position:relative;display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--card);transition:border-color .16s,transform .16s}
.vt:hover,.vt:focus-visible{border-color:var(--accent);transform:translateY(-3px)}
.vt .vim{display:block;width:100%;aspect-ratio:16/9;background:#06131a center/cover no-repeat}
.vt.v9 .vim{aspect-ratio:9/16}
.vt .vmt{display:block;padding:.65rem .75rem .75rem}
.vt .vmt b{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;line-height:1.3;
  color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vt .vmt i{display:block;margin-top:.3rem;font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:.62rem;letter-spacing:.02em;color:var(--dim)}
.vchips{position:absolute;top:.5rem;left:.5rem;right:.5rem;z-index:2;display:flex;gap:.3rem;flex-wrap:wrap}
.vchip{font-size:.52rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:999px;color:#eafcff;background:rgba(2,10,14,.72);
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vchip.alt{color:var(--accent3)}
.vmore{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ── cards: capability blocks, buyer segments, vertical lists ───────────────── */
.vcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem;margin-top:1.2rem}
.vcard{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:1.3rem 1.35rem}
.vcard h3{font-family:var(--display);font-weight:900;font-size:.98rem;letter-spacing:-.01em;line-height:1.2}
.vcard h3 .vyr{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.66rem;color:var(--dim)}
.vcard p{margin-top:.5rem;color:var(--dim);font-size:.84rem;line-height:1.65}
.vcard ul{list-style:none;margin:.7rem 0 0;display:grid;gap:.42rem}
.vcard li{position:relative;padding-left:1.15rem;color:var(--dim);font-size:.82rem;line-height:1.5}
.vcard li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.vcard li b{color:var(--text);font-weight:600}
.vcard .vgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}

/* A claim with no archive behind it says so, in the same place the eye lands. */
.vtag{display:inline-block;font-size:.53rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:.26rem .6rem;border-radius:999px;margin-bottom:.6rem;
  color:var(--accent);background:var(--ghost);border:1px solid var(--line)}
.vtag.proof{color:var(--onaccent);background:linear-gradient(135deg,var(--accent2),var(--accent));border-color:transparent}

/* ── the client table under the live-production claim ───────────────────────── */
.vtwrap{overflow-x:auto;margin-top:1rem}
.vtable{width:100%;border-collapse:collapse;font-size:.82rem;min-width:420px}
.vtable th,.vtable td{text-align:right;padding:.55rem .7rem;border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--dim);white-space:nowrap}
.vtable thead th{font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);border-bottom-color:var(--line)}
.vtable th[scope="row"],.vtable thead th:first-child{text-align:left}
.vtable th[scope="row"]{font-family:var(--display);font-weight:700;color:var(--text)}

/* ── a short prose block that is not a card ─────────────────────────────────── */
.vnote{border-left:3px solid var(--accent);background:var(--ghost);border-radius:0 12px 12px 0;
  padding:.85rem 1.05rem;margin-top:1.1rem;font-size:.83rem;line-height:1.7;color:var(--dim);max-width:80ch}
.vnote b{color:var(--text)}
.vsteps{counter-reset:vs;display:grid;gap:.7rem;margin-top:1.1rem}
.vstep{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:1rem 1.2rem 1rem 3.2rem}
.vstep::before{counter-increment:vs;content:counter(vs,decimal-leading-zero);position:absolute;left:1.15rem;top:1.05rem;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--accent)}
.vstep b{display:block;font-family:var(--display);font-weight:800;font-size:.88rem}
.vstep span{display:block;margin-top:.3rem;color:var(--dim);font-size:.83rem;line-height:1.6}

/* ── closing call to action (same shape as the Services page's) ─────────────── */
.vcta .box{border:1px solid var(--line);border-radius:20px;text-align:center;padding:2.6rem 2rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 16%,var(--card)),var(--card))}
.vcta h2{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,4vw,2.4rem);line-height:1;letter-spacing:-.02em}
.vcta p{color:var(--dim);max-width:540px;margin:.8rem auto 1.5rem;line-height:1.6;font-size:.9rem}
.vcta .row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

@media(max-width:560px){
  .vgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .vt:hover,.vt:focus-visible{transform:none}
}