/* ============================================================================
   Silverplay — ELECTRIC ARENA
   Dark arena shell (header / hero / footer) + clean light editorial body.
   Electric cyan accent (#05b1eb) loud on focus points, KANT-elevation
   (accent top-rail instead of shadows), dosed glow on CTA / hero.
   Prefix: vwh-  ·  container: 1201px
   ========================================================================== */

/* ---- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,dl,dd,ol,ul{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{max-width:100%;height:auto;display:block}
table{border-collapse:collapse}
a{color:inherit}
button{font:inherit;color:inherit}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li){text-wrap:pretty}

/* ---- design tokens -------------------------------------------------------- */
:root{
  --vwh-wrap:1201px;

  /* brand */
  --vwh-accent:#05b1eb;        /* electric cyan — links, kickers, active, glow */
  --vwh-accent-2:#51aaca;      /* softer brand cyan — rails / dark-zone hairlines */
  --vwh-cta:#0879a1;           /* CTA fill */
  --vwh-cta-ink:#ffffff;
  --vwh-deep:#241919;          /* deep brand tone — badges / secondary marks */
  --vwh-link:#0a6a8c;          /* AA cyan for body links on light */

  /* dark arena zones */
  --vwh-dark:#0d2230;
  --vwh-dark-2:#143140;
  --vwh-dark-3:#1c4254;
  --vwh-dark-ink:#eaf6fb;
  --vwh-dark-ink-2:#a9c6d4;
  --vwh-dark-rail:color-mix(in srgb,var(--vwh-accent-2) 30%,transparent);
  --vwh-dark-line:color-mix(in srgb,#9ecbe0 18%,transparent);

  /* light body surfaces */
  --vwh-bg:#eef3f6;
  --vwh-surface:#ffffff;
  --vwh-surface-2:#f1f6f9;
  --vwh-ink:#16242c;
  --vwh-ink-2:#44555f;
  --vwh-ink-3:#5a6770;
  --vwh-hairline:color-mix(in srgb,#16242c 13%,transparent);
  --vwh-hairline-2:color-mix(in srgb,#16242c 8%,transparent);

  /* trustpilot + part fonts (consumed by parts/*.php inline css) */
  --vwh-tp-star:#00b67a;
  --vwh-fdisplay:'Archivo Black','Archivo Expanded',system-ui,sans-serif;
  --vwh-fbody:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* radii (kant system — near-square corners) */
  --vwh-r-sm:8px;
  --vwh-r:11px;
  --vwh-r-lg:14px;

  /* spacing — 8px base */
  --vwh-s1:8px; --vwh-s2:16px; --vwh-s3:24px; --vwh-s4:36px; --vwh-s5:52px;

  /* type scale — ratio ~1.25, fluid on display steps */
  --vwh-t-kicker:.76rem;
  --vwh-t-small:.9rem;
  --vwh-t-body:1.02rem;
  --vwh-t-lead:clamp(1.08rem,.98rem + .5vw,1.25rem);
  --vwh-t-h3:clamp(1.18rem,1.05rem + .6vw,1.45rem);
  --vwh-t-h2:clamp(1.5rem,1.2rem + 1.5vw,2.15rem);
  --vwh-t-h1:clamp(2rem,1.4rem + 3vw,3.2rem);

  --vwh-glow:color-mix(in srgb,var(--vwh-accent) 55%,transparent);
}

/* ---- base ----------------------------------------------------------------- */
body{
  margin:0;
  font-family:var(--vwh-fbody);
  font-size:var(--vwh-t-body);
  line-height:1.62;
  color:var(--vwh-ink);
  background:var(--vwh-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:color-mix(in srgb,var(--vwh-accent) 30%,transparent);color:var(--vwh-ink)}
:focus-visible{outline:2px solid var(--vwh-accent);outline-offset:2px;border-radius:2px}
:where(input,textarea,select){accent-color:var(--vwh-accent)}
html{scrollbar-color:var(--vwh-accent-2) var(--vwh-bg)}

h1,h2,h3{font-family:var(--vwh-fdisplay);font-weight:400;line-height:1.1;letter-spacing:-.015em}
h1{font-size:var(--vwh-t-h1)}
h2{font-size:var(--vwh-t-h2)}
h3{font-size:var(--vwh-t-h3);letter-spacing:-.006em}
strong,b{font-weight:700}

/* skip link */
.vwh-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--vwh-accent);color:#042330;
  padding:10px 16px;border-radius:0 0 var(--vwh-r-sm) 0;font-weight:700;text-decoration:none}
.vwh-skip:focus{left:0}

/* ---- containers ----------------------------------------------------------- */
.vwh-wrap{
  width:100%;
  max-width:var(--vwh-wrap);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,30px);
}
.vwh-main{                       /* container invariant — width lives here */
  display:block;
  width:100%;
  max-width:var(--vwh-wrap);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,30px);
  padding-block:clamp(26px,3.4vw,44px);
}
.vwh-main *{min-width:0}

/* full-width docs (legal / author) span the whole container */
.vwh-doc{max-width:none}

/* generic link ergonomics */
a{text-decoration-thickness:1.5px;text-underline-offset:2px}

/* ===========================================================================
   HEADER — dark arena masthead (sticky)
   ========================================================================= */
.vwh-head{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#0c2230 0%,#0e2735 100%);
  border-bottom:1px solid var(--vwh-dark-line);
  box-shadow:0 1px 0 color-mix(in srgb,var(--vwh-accent) 22%,transparent);
}
.vwh-head__bar{
  display:flex;align-items:center;gap:clamp(14px,3vw,30px);
  min-height:66px;padding-block:9px;
}
.vwh-logo{display:inline-flex;align-items:center;flex:none;line-height:0;border-radius:6px}
.vwh-logo img{width:auto;height:40px;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--vwh-accent) 45%,transparent))}

.vwh-nav{margin-left:auto;display:flex;align-items:center}
.vwh-nav__list{display:flex;align-items:center;gap:clamp(6px,1.4vw,20px);list-style:none;margin:0;padding:0}
.vwh-nav__list a{
  position:relative;display:inline-block;padding:8px 4px;
  color:var(--vwh-dark-ink);text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.005em;
  transition:color .16s ease;
}
.vwh-nav__list a::after{           /* animated active/hover rail — no reflow */
  content:"";position:absolute;left:2px;right:2px;bottom:2px;height:2px;
  background:var(--vwh-accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
  box-shadow:0 0 10px var(--vwh-glow);
}
.vwh-nav__list a:hover,.vwh-nav__list a:focus-visible{color:#fff}
.vwh-nav__list a:hover::after,.vwh-nav__list a:focus-visible::after{transform:scaleX(1)}
.vwh-nav__list a[aria-current="page"]{color:#fff}
.vwh-nav__list a[aria-current="page"]::after{transform:scaleX(1)}

/* burger (base hidden; shown <=900px via critical inline css) */
.vwh-burger{
  margin-left:auto;color:var(--vwh-dark-ink);
  background:color-mix(in srgb,#ffffff 6%,transparent);
  border:1px solid var(--vwh-dark-rail);border-radius:var(--vwh-r-sm);
  width:48px;height:44px;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.vwh-burger:hover{background:color-mix(in srgb,var(--vwh-accent) 18%,transparent);border-color:var(--vwh-accent)}

/* ===========================================================================
   CTA BUTTONS  (.vwh-cta / --solid / --ghost) — glowing arena button
   ========================================================================= */
.vwh-cta{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  flex:none;
  padding:.74em 1.5em;min-height:48px;
  font-family:var(--vwh-fbody);font-weight:700;font-size:1rem;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border-radius:var(--vwh-r);border:1px solid transparent;
  color:var(--vwh-cta-ink);
  background:linear-gradient(180deg,color-mix(in srgb,var(--vwh-accent) 26%,var(--vwh-cta)) 0%,var(--vwh-cta) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#ffffff 28%,transparent);
  transition:transform .14s ease,filter .16s ease;
}
.vwh-cta::before{                  /* pre-rendered glow halo — toggled by opacity */
  content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;
  background:radial-gradient(60% 120% at 50% 110%,var(--vwh-glow),transparent 70%);
  box-shadow:0 8px 26px color-mix(in srgb,var(--vwh-accent) 50%,transparent);
  opacity:0;transition:opacity .18s ease;
}
.vwh-cta::after{content:"\2192";font-weight:700;transform:translateX(0);transition:transform .16s ease}
.vwh-cta:hover,.vwh-cta:focus-visible{transform:translateY(-2px);filter:brightness(1.05)}
.vwh-cta:hover::before,.vwh-cta:focus-visible::before{opacity:1}
.vwh-cta:hover::after,.vwh-cta:focus-visible::after{transform:translateX(3px)}
.vwh-cta:active{transform:translateY(1px)}

.vwh-cta--ghost{
  background:transparent;color:var(--vwh-accent);
  border-color:color-mix(in srgb,var(--vwh-accent) 60%,transparent);
  box-shadow:none;
}
.vwh-cta--ghost:hover,.vwh-cta--ghost:focus-visible{color:#fff;
  background:color-mix(in srgb,var(--vwh-accent) 14%,transparent)}

/* header CTA sits at the far right, compact */
.vwh-head__bar>.vwh-cta{flex:none;padding-block:.6em;min-height:44px}

/* body CTA always centred at any depth (section/td/p) */
.vwh-ctarow{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:1.5em 0}
.vwh-main>.vwh-cta,
.vwh-main :not(.vwh-hero__cta):not(.vwh-nav__cta):not(.vwh-ctarow)>.vwh-cta{
  display:flex;width:fit-content;margin:1.4em auto;
}
/* inside .vwh-ctarow the row already centres + spaces — kill the button's own vertical margin
   (it was stacking on top of the row margin → huge empty gap around the CTA) */
.vwh-ctarow>.vwh-cta{margin:0}

/* ===========================================================================
   HERO — wide arena unit, dark base + accent glow
   ========================================================================= */
.vwh-hero{
  position:relative;overflow-x:clip;
  background:
    radial-gradient(120% 120% at 88% -10%,color-mix(in srgb,var(--vwh-accent) 16%,transparent),transparent 55%),
    linear-gradient(165deg,#0b1f2c 0%,#0e2735 55%,#102c3c 100%);
  color:var(--vwh-dark-ink);
  border-bottom:1px solid var(--vwh-dark-line);
}
.vwh-hero::before{                 /* depth glow behind media, no h-overflow */
  content:"";position:absolute;inset:0 0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 60% at 26% 52%,color-mix(in srgb,var(--vwh-accent) 24%,transparent),transparent 70%);
}
.vwh-hero__inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,430px) minmax(0,1fr);
  grid-template-rows:1fr auto auto auto auto 1fr;
  column-gap:clamp(26px,4vw,52px);row-gap:14px;
  align-items:center;
  padding-block:clamp(30px,4.4vw,46px);
}
.vwh-hero__media{
  grid-column:1;grid-row:1 / -1;align-self:center;
  position:relative;margin:0;width:100%;max-width:430px;
  aspect-ratio:1/1;border-radius:var(--vwh-r-lg);overflow:hidden;
  border:1px solid var(--vwh-dark-rail);
  box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--vwh-accent) 26%,transparent),
             0 0 60px color-mix(in srgb,var(--vwh-accent) 28%,transparent);
}
.vwh-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.vwh-hero__cap{
  position:absolute;left:12px;bottom:12px;z-index:2;
  display:inline-block;
  padding:.4em .8em;border-radius:999px;
  background:color-mix(in srgb,#06151d 72%,transparent);
  border:1px solid color-mix(in srgb,var(--vwh-accent) 55%,transparent);
  color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  backdrop-filter:blur(2px);
}
.vwh-hero__h1{
  grid-column:2;grid-row:2;align-self:end;margin:0;
  font-size:var(--vwh-t-h1);line-height:1.06;letter-spacing:-.02em;color:#fff;
  text-wrap:balance;
}
.vwh-hero__lead{
  grid-column:2;grid-row:3;margin:0;max-width:52ch;
  font-size:var(--vwh-t-lead);line-height:1.55;color:var(--vwh-dark-ink-2);
}
.vwh-hero__facts{                  /* accent-framed metric strip */
  grid-column:2;grid-row:4;margin:.2em 0 0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 8px;
  padding:13px 20px;border-radius:var(--vwh-r);
  background:color-mix(in srgb,#ffffff 5%,transparent);
  border:1px solid var(--vwh-dark-rail);border-top:2px solid var(--vwh-accent);
}
.vwh-hero__fact-k{
  margin:0;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--vwh-dark-ink-2);
}
.vwh-hero__fact-v{
  margin:0 18px 0 0;font-family:var(--vwh-fdisplay);font-weight:400;
  font-size:1.15rem;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.vwh-hero__fact-v:last-of-type{margin-right:0}
.vwh-hero__cta{grid-column:2;grid-row:5;align-self:start;justify-self:start;display:flex;margin:.2em 0 0}

/* ===========================================================================
   FOOTER — dark arena
   ========================================================================= */
.vwh-foot{
  margin-top:clamp(40px,6vw,72px);
  background:linear-gradient(180deg,#0c2230 0%,#091a25 100%);
  color:var(--vwh-dark-ink-2);
  border-top:2px solid var(--vwh-accent);
}
.vwh-foot__inner{padding-block:clamp(34px,4vw,52px)}
.vwh-foot__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--vwh-dark-line);
}
.vwh-foot__logo img{height:38px;width:auto;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--vwh-accent) 40%,transparent))}
.vwh-foot__age{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;font-weight:700;color:#fff;
  background:color-mix(in srgb,var(--vwh-deep) 60%,#0c2230);
  border:2px solid var(--vwh-accent);
}
.vwh-foot__cols{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.vwh-foot__h{
  margin:0 0 .9em;font-family:var(--vwh-fbody);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.12em;color:#fff;
}
.vwh-foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55em}
.vwh-foot__list a{
  color:var(--vwh-dark-ink-2);text-decoration:none;font-size:.94rem;
  transition:color .15s ease,padding-left .15s ease;
}
.vwh-foot__list a:hover,.vwh-foot__list a:focus-visible{color:var(--vwh-accent);padding-left:4px}
.vwh-foot__disc{
  margin:28px 0 0;padding-top:22px;border-top:1px solid var(--vwh-dark-line);
  font-size:.86rem;line-height:1.6;color:var(--vwh-dark-ink-2);
}
.vwh-foot__legalline{margin:.7em 0 0;font-size:.82rem;line-height:1.6;color:color-mix(in srgb,var(--vwh-dark-ink-2) 78%,transparent)}
.vwh-foot__legalline a{color:var(--vwh-accent);text-decoration:none}
.vwh-foot__legalline a:hover{text-decoration:underline}

/* ===========================================================================
   COOKIE BANNER
   ========================================================================= */
.vwh-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:linear-gradient(180deg,#0e2735 0%,#0a1d28 100%);
  border-top:2px solid var(--vwh-accent);
  box-shadow:0 -10px 30px rgba(0,0,0,.32);
}
.vwh-cookie[hidden]{display:none}
.vwh-cookie__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  padding-block:16px;
}
.vwh-cookie__txt{margin:0;font-size:.9rem;line-height:1.55;color:var(--vwh-dark-ink);max-width:62ch}
.vwh-cookie__txt a{color:var(--vwh-accent);text-decoration:underline;text-underline-offset:2px}
.vwh-cookie__btns{display:flex;gap:10px;flex-wrap:wrap}
.vwh-cookie__btn{
  cursor:pointer;padding:.6em 1.2em;min-height:44px;border-radius:var(--vwh-r-sm);
  font-weight:700;font-size:.9rem;
  background:transparent;color:var(--vwh-dark-ink);
  border:1px solid var(--vwh-dark-rail);transition:background .15s ease,border-color .15s ease}
.vwh-cookie__btn:hover{border-color:var(--vwh-accent);background:color-mix(in srgb,var(--vwh-accent) 12%,transparent)}
.vwh-cookie__btn--ok{
  background:var(--vwh-cta);color:#fff;border-color:transparent;
  box-shadow:0 0 18px color-mix(in srgb,var(--vwh-accent) 40%,transparent)}
.vwh-cookie__btn--ok:hover{filter:brightness(1.06);background:var(--vwh-cta)}

/* ===========================================================================
   BREADCRUMBS
   ========================================================================= */
.vwh-crumbs{padding-block:14px}
.vwh-crumbs__list{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45em;
  list-style:none;margin:0;padding:0;font-size:.84rem;color:var(--vwh-ink-3);
}
.vwh-crumbs__item{display:inline-flex;align-items:center;gap:.45em}
.vwh-crumbs__item+.vwh-crumbs__item::before{
  content:"\203A";color:var(--vwh-accent-2);font-weight:700;opacity:.8}
.vwh-crumbs__item a{color:var(--vwh-ink-2);text-decoration:none}
.vwh-crumbs__item a:hover{color:var(--vwh-link);text-decoration:underline}
.vwh-crumbs__item [aria-current="page"]{color:var(--vwh-ink);font-weight:600}

/* ===========================================================================
   BYLINE
   ========================================================================= */
.vwh-byline{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-block:18px;padding:16px 20px;
  background:var(--vwh-surface);border:1px solid var(--vwh-hairline);
  border-top:2px solid var(--vwh-accent);border-radius:var(--vwh-r);
}
.vwh-byline__photo{
  flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid color-mix(in srgb,var(--vwh-accent) 50%,transparent);
}
.vwh-byline__meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.vwh-byline__names{margin:0;font-size:.96rem;line-height:1.4}
.vwh-byline__author{color:var(--vwh-ink);font-weight:700;text-decoration:none}
.vwh-byline__author:hover{color:var(--vwh-link);text-decoration:underline}
.vwh-byline__role{color:var(--vwh-ink-2)}
.vwh-byline__rev{margin:0;font-size:.86rem;color:var(--vwh-ink-3)}
.vwh-byline__rev a{color:var(--vwh-link);text-decoration:none}
.vwh-byline__rev a:hover{text-decoration:underline}
.vwh-byline__dates{margin:.2em 0 0;font-size:.8rem;color:var(--vwh-ink-3);line-height:1.7}
.vwh-byline__dates dt,.vwh-byline__dates dd{display:inline;margin:0}
.vwh-byline__dates dt{font-weight:700;color:var(--vwh-ink-2)}
.vwh-byline__dates dt::after{content:":\00a0"}
.vwh-byline__dates dd{font-variant-numeric:tabular-nums;margin-right:16px}

/* ===========================================================================
   PROSE — editorial body
   ========================================================================= */
.vwh-prose{                      /* own container — content pages mount .vwh-prose w/o .vwh-main parent */
  width:100%;max-width:var(--vwh-wrap);margin-inline:auto;
  padding-inline:clamp(16px,4vw,30px);
  color:var(--vwh-ink);
}
/* when .vwh-prose already sits inside a container (.vwh-main / .vwh-wrap), drop the
   duplicate width cap + side padding so the content keeps its single centred column */
.vwh-main .vwh-prose,.vwh-wrap .vwh-prose{max-width:none;margin-inline:0;padding-inline:0}
.vwh-prose>:first-child{margin-top:0}

/* vertical rhythm (applies to .vwh-main pages too) */
.vwh-prose p,.vwh-main p{margin-top:1em;line-height:1.66}
.vwh-prose h2,.vwh-main h2{margin-top:1.7em;color:var(--vwh-ink)}
.vwh-prose h3,.vwh-main h3{margin-top:1.35em;color:var(--vwh-ink)}
.vwh-prose h2{
  padding-top:.1em;font-size:var(--vwh-t-h2);
  scroll-margin-top:84px;
}
.vwh-prose h3{font-size:var(--vwh-t-h3);scroll-margin-top:84px}
.vwh-prose section{margin-top:clamp(26px,3.6vw,44px);scroll-margin-top:84px}
.vwh-prose section>h2:first-child{margin-top:.2em}

/* H2 gets a short accent tick to the left — editorial signature */
.vwh-prose section>h2{position:relative}
.vwh-prose section>h2::before{
  content:"";position:absolute;left:-14px;top:.18em;width:4px;height:.78em;
  background:var(--vwh-accent);border-radius:2px;
  box-shadow:0 0 10px var(--vwh-glow);
}
@media(max-width:760px){.vwh-prose section>h2::before{display:none}}

/* lede / verdict — signature double accent rail */
.vwh-lede{
  position:relative;margin:.2em 0 .5em;padding-left:1.35em;
  font-size:var(--vwh-t-lead);line-height:1.62;color:var(--vwh-ink);font-weight:500;
}
.vwh-lede::before{content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:3px;
  background:var(--vwh-accent);border-radius:2px;box-shadow:0 0 10px var(--vwh-glow)}
.vwh-lede::after{content:"";position:absolute;left:7px;top:.32em;bottom:.32em;width:1px;
  background:var(--vwh-hairline)}

/* prose links — underline grows from baseline */
.vwh-prose a:not(.vwh-cta){
  color:var(--vwh-link);text-decoration:none;font-weight:600;
  background-image:linear-gradient(var(--vwh-accent),var(--vwh-accent));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s ease,color .15s ease;padding-bottom:1px;
}
.vwh-prose a:not(.vwh-cta):hover,
.vwh-prose a:not(.vwh-cta):focus-visible{background-size:100% 2px;color:var(--vwh-accent)}

/* unordered lists — accent diamond markers */
.vwh-prose ul{list-style:none;margin:1.05em 0;padding:0;display:flex;flex-direction:column;gap:.52em}
.vwh-prose ul li{position:relative;padding-left:1.7em;line-height:1.55;color:var(--vwh-ink-2)}
.vwh-prose ul li::before{
  content:"";position:absolute;left:1px;top:.55em;width:9px;height:9px;
  border:2px solid var(--vwh-accent);border-radius:2px;transform:rotate(45deg);
}

/* ordered lists — glowing number chips (absolute marker, text flows freely) */
.vwh-prose ol{list-style:none;margin:1.15em 0;padding:0;counter-reset:vwh-ol;
  display:flex;flex-direction:column;gap:.72em}
.vwh-prose ol>li{position:relative;padding-left:2.7em;line-height:1.62;counter-increment:vwh-ol;color:var(--vwh-ink-2)}
.vwh-prose ol>li strong{color:var(--vwh-ink)}
.vwh-prose ol>li::before{
  content:counter(vwh-ol);position:absolute;left:0;top:.02em;
  width:1.85em;height:1.85em;display:flex;align-items:center;justify-content:center;
  font-family:var(--vwh-fdisplay);font-size:.82rem;color:#fff;
  background:var(--vwh-cta);border-radius:8px;
  box-shadow:0 0 12px color-mix(in srgb,var(--vwh-accent) 38%,transparent);
}

/* ===========================================================================
   TABLES (bare <table>, usually inside .vwh-tablewrap)
   ========================================================================= */
.vwh-tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6em 0;
  border:1px solid var(--vwh-hairline);border-top:2px solid var(--vwh-accent);
  border-radius:var(--vwh-r);background:var(--vwh-surface);
}
.vwh-prose table,.vwh-main table,.vwh-tablewrap table{
  width:100%;min-width:520px;border-collapse:collapse;
  font-size:.95rem;background:var(--vwh-surface);
}
.vwh-prose caption{caption-side:top;text-align:left;font-size:.85rem;color:var(--vwh-ink-3);padding:0 0 .5em}
.vwh-prose th,.vwh-prose td,.vwh-tablewrap th,.vwh-tablewrap td{
  padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--vwh-hairline-2);font-variant-numeric:tabular-nums;
}
.vwh-prose thead th,.vwh-tablewrap thead th{
  background:var(--vwh-surface-2);color:var(--vwh-ink);
  font-family:var(--vwh-fbody);font-weight:700;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  border-bottom:1px solid var(--vwh-hairline);
}
.vwh-prose tbody td,.vwh-tablewrap tbody td{color:var(--vwh-ink-2)}
.vwh-prose tbody td:first-child,.vwh-tablewrap tbody td:first-child{font-weight:600;color:var(--vwh-ink)}
.vwh-prose tbody tr,.vwh-tablewrap tbody tr{transition:background .14s ease}
.vwh-prose tbody tr:hover,.vwh-tablewrap tbody tr:hover{background:color-mix(in srgb,var(--vwh-accent) 7%,transparent)}
.vwh-prose tbody tr:last-child td,.vwh-tablewrap tbody tr:last-child td{border-bottom:0}

/* ===========================================================================
   CONTENT FIGURES — centred, ~74%, never cropped
   ========================================================================= */
.vwh-figure,.vwh-prose figure{
  width:min(74%,780px);margin-block:1.7em;margin-inline:auto !important;
}
.vwh-figure img,.vwh-prose figure img{
  width:100%;height:auto;display:block;border-radius:var(--vwh-r);
  border:1px solid var(--vwh-hairline);
}
.vwh-figure figcaption,.vwh-prose figcaption{
  margin-top:.55em;font-size:.85rem;line-height:1.5;color:var(--vwh-ink-3);text-align:center;
}

/* ===========================================================================
   SLOTS SHOWCASE  (img sizing comes from parts/slots.php inline css)
   ========================================================================= */
.vwh-slots{margin-block:clamp(28px,4vw,46px)}
.vwh-slots__inner{padding-inline:0}
.vwh-slots__h{margin:0 0 .85em;font-size:var(--vwh-t-h2)}
.vwh-slots__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.vwh-slot{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  background:var(--vwh-surface);border:1px solid var(--vwh-hairline);
  border-top:2px solid var(--vwh-accent-2);border-radius:var(--vwh-r);overflow:hidden;
  text-decoration:none;color:var(--vwh-ink);
  transition:transform .16s ease,border-color .16s ease;
}
.vwh-slot::before{                 /* dosed accent glow on hover */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  box-shadow:0 14px 30px color-mix(in srgb,var(--vwh-accent) 32%,transparent);
  opacity:0;transition:opacity .18s ease;
}
.vwh-slot:hover,.vwh-slot:focus-visible{transform:translateY(-4px);border-top-color:var(--vwh-accent)}
.vwh-slot:hover::before,.vwh-slot:focus-visible::before{opacity:1}
.vwh-slots .vwh-slot .vwh-slot__img{transition:transform .28s ease;background:var(--vwh-surface-2)}
.vwh-slot:hover .vwh-slot__img{transform:scale(1.05)}
.vwh-slot__name{
  display:block;padding:10px 12px;font-size:.84rem;font-weight:600;line-height:1.3;
  color:var(--vwh-ink);border-top:1px solid var(--vwh-hairline-2);
}

/* ===========================================================================
   AUTHOR PAGE  (.vwh-authorpage — full-width article, portrait left)
   ========================================================================= */
.vwh-authorpage{max-width:none}
.vwh-authorpage p{max-width:none}
.vwh-authorpage__photo{
  float:left;width:208px;height:auto;aspect-ratio:3/4;object-fit:cover;
  margin:.3em 28px 12px 0;border-radius:var(--vwh-r-lg);
  border:1px solid var(--vwh-hairline);border-top:3px solid var(--vwh-accent);
  box-shadow:0 12px 30px rgba(13,34,48,.14);
}
.vwh-authorpage h2{clear:none}

/* ===========================================================================
   404
   ========================================================================= */
.vwh-404__code{
  margin:0 0 .1em;font-family:var(--vwh-fdisplay);line-height:.9;
  font-size:clamp(4.5rem,18vw,9rem);color:var(--vwh-accent);
  letter-spacing:-.03em;text-shadow:0 0 44px var(--vwh-glow);
}

/* ===========================================================================
   MOTION — hero entrance (GPU only, CLS=0)
   ========================================================================= */
@media(prefers-reduced-motion:no-preference){
  .vwh-hero__media,.vwh-hero__h1,.vwh-hero__lead,.vwh-hero__facts,.vwh-hero__cta{
    animation:vwh-rise .6s cubic-bezier(.2,.7,.2,1) both;
  }
  .vwh-hero__h1{animation-delay:.05s}
  .vwh-hero__lead{animation-delay:.11s}
  .vwh-hero__facts{animation-delay:.17s}
  .vwh-hero__cta{animation-delay:.23s}
}
@keyframes vwh-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ===========================================================================
   RESPONSIVE  — tablet / mobile menu drawer
   ========================================================================= */
@media(max-width:900px){
  .vwh-burger{position:relative;z-index:90}
  .vwh-head__bar>.vwh-cta{font-size:.92rem;padding:.55em 1em;min-height:42px}

  /* off-canvas right drawer (display toggled by inline critical css) */
  .vwh-nav.is-open::before{
    content:"";position:fixed;inset:0;z-index:70;pointer-events:none;
    background:rgba(6,17,24,.58);
  }
  .vwh-nav__list{
    position:fixed;top:0;right:0;z-index:80;
    width:min(82vw,330px);max-width:100vw;height:100vh;height:100dvh;
    flex-direction:column;align-items:stretch;gap:0;
    padding:78px 22px 28px;overflow-y:auto;
    background:linear-gradient(180deg,#0e2735,#0a1c27);
    border-left:2px solid var(--vwh-accent);
    box-shadow:-22px 0 50px rgba(0,0,0,.5);
  }
  .vwh-nav__list li{width:100%;border-bottom:1px solid var(--vwh-dark-line)}
  .vwh-nav__list a{display:block;padding:15px 4px;font-size:1.06rem;font-weight:600;color:var(--vwh-dark-ink)}
  .vwh-nav__list a::after{display:none}
  .vwh-nav__list a:hover,.vwh-nav__list a:focus-visible,
  .vwh-nav__list a[aria-current="page"]{color:var(--vwh-accent)}
}

/* hero stacks; image capped so CTA stays above the fold */
@media(max-width:760px){
  .vwh-hero__inner{
    display:flex;flex-direction:column;align-items:stretch;
    grid-template-columns:none;grid-template-rows:none;
    column-gap:0;row-gap:14px;
  }
  .vwh-hero__media{
    order:1;align-self:center;width:auto;max-width:100%;max-height:42vh;
    aspect-ratio:1/1;
  }
  .vwh-hero__media img{width:auto;max-height:42vh;object-fit:contain;margin-inline:auto}
  .vwh-hero__h1{order:2;align-self:auto}
  .vwh-hero__cta{order:3;align-self:stretch;justify-content:center}
  .vwh-hero__lead{order:4;max-width:none}
  .vwh-hero__facts{order:5}
}

/* ===========================================================================
   RESPONSIVE — footer / slots / author / general
   ========================================================================= */
@media(max-width:860px){
  .vwh-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .vwh-foot__cols{grid-template-columns:1fr;gap:22px}
  .vwh-slots__grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .vwh-figure,.vwh-prose figure{width:100%}
  .vwh-authorpage__photo{float:none;width:160px;margin:0 0 16px}
  .vwh-byline{gap:12px 14px}
  .vwh-cookie__inner{flex-direction:column;align-items:flex-start}
  .vwh-cookie__btns{width:100%}
  .vwh-cookie__btn{flex:1 1 auto;text-align:center}
}
@media(max-width:420px){
  .vwh-head__bar>.vwh-cta{display:none}    /* keep masthead tidy on tiny screens */
  .vwh-hero__fact-v{font-size:1.05rem}
}

/* ===========================================================================
   REDUCED MOTION — kill all movement
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}