/* Verifica Prima - cobiarc.com
   Style: myth_fact_digest (dials V4 / M3 / D4). Contrast layout, risograph-friendly.
   Values centralised; dark palette re-assigned via prefers-color-scheme. */

:root {
  --vp-bg: #FAF8F5;
  --vp-surface: #FFFFFF;
  --vp-text: #1F1D1A;
  --vp-muted: #57524B;
  --vp-accent: #5C500F;
  --vp-accent-strong: #463D0A;
  --vp-accent-tint: rgba(92, 80, 15, 0.10);
  --vp-accent-tint-strong: rgba(92, 80, 15, 0.18);
  --vp-border: #DDD7CD;
  --vp-panel: #F3EFE7;

  --vp-font-heading: "Barlow", Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", sans-serif;
  --vp-font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --vp-fs-1: 0.8125rem;    /* 13px */
  --vp-fs-2: 0.875rem;     /* 14px */
  --vp-fs-3: 1.0625rem;    /* 17px body */
  --vp-fs-4: 1.3325rem;    /* ~21px h3 */
  --vp-fs-5: 1.665rem;     /* ~27px h2 */
  --vp-fs-6: 2.08rem;      /* ~33px h1 */

  --vp-radius: 6px;
  --vp-border-w: 1px;
  --vp-space: 8px;
  --vp-speed: 180ms;
  --vp-shadow: 0 1px 2px rgba(60, 52, 20, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --vp-bg: #181614;
    --vp-surface: #23201D;
    --vp-text: #ECEBE9;
    --vp-muted: #C3BEB7;
    --vp-accent: #BAA32C;
    --vp-accent-strong: #CFB946;
    --vp-accent-tint: rgba(186, 163, 44, 0.14);
    --vp-accent-tint-strong: rgba(186, 163, 44, 0.24);
    --vp-border: #47433E;
    --vp-panel: #26221E;
    --vp-shadow: 0 1px 3px rgba(10, 8, 2, 0.5);
  }
}

/* ---------- local fonts: Barlow + Fira Sans (SIL OFL 1.1, self-hosted) ---------- */
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-padding-top: calc(var(--vp-space) * 2);
  scroll-padding-bottom: calc(var(--vp-space) * 2);
}

body {
  margin: 0;
  background: var(--vp-bg);
  color: var(--vp-text);
  font-family: var(--vp-font-body);
  font-size: var(--vp-fs-3);
  line-height: 1.6;
  hyphens: auto;
}

h1, h2, h3, h4 {
  font-family: var(--vp-font-heading);
  color: var(--vp-text);
  line-height: 1.22;
  margin: calc(var(--vp-space) * 4) 0 calc(var(--vp-space) * 2);
  text-wrap: balance;
}
h1 { font-size: var(--vp-fs-6); font-weight: 700; margin-top: calc(var(--vp-space) * 2); }
h2 { font-size: var(--vp-fs-5); font-weight: 600; }
h3 { font-size: var(--vp-fs-4); font-weight: 600; }
h4 { font-size: var(--vp-fs-3); font-weight: 700; }
p { margin: 0 0 calc(var(--vp-space) * 2); text-wrap: pretty; }
a { color: var(--vp-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--vp-accent-strong); }
ul, ol { padding-left: calc(var(--vp-space) * 3); }
li { margin-bottom: var(--vp-space); }
img { max-width: 100%; height: auto; }
figure { margin: calc(var(--vp-space) * 3) 0; }
blockquote { margin: calc(var(--vp-space) * 3) 0; padding: 0 var(--vp-space) 0 calc(var(--vp-space) * 2); border-left: 3px solid var(--vp-accent); color: var(--vp-text); }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--vp-fs-2); }
table { border-collapse: collapse; width: 100%; font-size: var(--vp-fs-2); font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--vp-muted); font-size: var(--vp-fs-2); padding-bottom: var(--vp-space); }
th, td { border: var(--vp-border-w) solid var(--vp-border); padding: var(--vp-space) calc(var(--vp-space) * 1.5); text-align: left; vertical-align: top; }
hr { border: 0; border-top: var(--vp-border-w) solid var(--vp-border); margin: calc(var(--vp-space) * 4) 0; }

.vp-container { max-width: 1080px; margin: 0 auto; padding: 0 calc(var(--vp-space) * 3); }
.vp-prose { max-width: 68ch; }
.vp-narrow { max-width: 52rem; margin: 0 auto; }
.vp-muted { color: var(--vp-muted); }
.vp-small { font-size: var(--vp-fs-2); }
.vp-tiny { font-size: var(--vp-fs-1); color: var(--vp-muted); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--vp-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.vp-skip {
  position: absolute; left: calc(var(--vp-space) * 2); top: -100px;
  background: var(--vp-surface); color: var(--vp-accent);
  padding: var(--vp-space) calc(var(--vp-space) * 2); border: var(--vp-border-w) solid var(--vp-accent);
  border-radius: var(--vp-radius); z-index: 60; transition: top var(--vp-speed) ease;
}
.vp-skip:focus { top: var(--vp-space); }

/* ---------- header / nav ---------- */
.vp-header {
  border-bottom: var(--vp-border-w) solid var(--vp-border);
  background: var(--vp-bg);
}
.vp-header-in { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--vp-space) * 2); min-height: 72px; flex-wrap: wrap; padding-top: calc(var(--vp-space) * 1); padding-bottom: calc(var(--vp-space) * 1); }
.vp-brand {
  font-family: var(--vp-font-heading); font-weight: 700; font-size: var(--vp-fs-4);
  color: var(--vp-text); text-decoration: none; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--vp-space);
}
.vp-brand:hover { color: var(--vp-accent); }
.vp-nav-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--vp-space); margin: 0; padding: 0; }
.vp-nav-list a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 calc(var(--vp-space) * 1.5);
  color: var(--vp-text); text-decoration: none; font-size: var(--vp-fs-2); font-weight: 600;
  border-radius: var(--vp-radius);
}
.vp-nav-list a:hover { color: var(--vp-accent); background: var(--vp-accent-tint); }
.vp-nav-list a[aria-current="page"] { color: var(--vp-accent); box-shadow: inset 0 -2px 0 var(--vp-accent); border-radius: var(--vp-radius) var(--vp-radius) 0 0; }

.vp-crumbs { font-size: var(--vp-fs-2); margin: calc(var(--vp-space) * 3) 0 0; }
.vp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--vp-space); margin: 0; padding: 0; }
.vp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--vp-space); color: var(--vp-muted); text-decoration: none; }
.vp-crumbs a:hover { color: var(--vp-accent); }
.vp-crumbs .vp-sep { color: var(--vp-muted); }

/* ---------- sections ---------- */
.vp-section { padding: calc(var(--vp-space) * 6) 0; border-bottom: var(--vp-border-w) solid var(--vp-border); }
.vp-section:last-of-type { border-bottom: 0; }
.vp-kicker { font-size: var(--vp-fs-2); font-weight: 600; color: var(--vp-accent); margin: 0 0 var(--vp-space); }
.vp-meta { font-size: var(--vp-fs-2); color: var(--vp-muted); margin: 0 0 calc(var(--vp-space) * 2); }

/* hero: myth vs fact contrast, asymmetric at V4 */
.vp-hero-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: calc(var(--vp-space) * 5); align-items: center; }
.vp-hero h1 { text-wrap: balance; }
.vp-hero-lead { font-size: var(--vp-fs-4); color: var(--vp-muted); max-width: 60ch; }
.vp-hero-links { list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--vp-space) * 2); margin: calc(var(--vp-space) * 3) 0 0; padding: 0; }
.vp-hero-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 calc(var(--vp-space) * 2); border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); background: var(--vp-surface); font-weight: 600; font-size: var(--vp-fs-2); text-decoration: none; color: var(--vp-text); transition: background var(--vp-speed) ease, color var(--vp-speed) ease, border-color var(--vp-speed) ease, transform var(--vp-speed) ease; }
.vp-hero-links a:hover { color: var(--vp-accent); border-color: var(--vp-accent); background: var(--vp-accent-tint); }
.vp-hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); box-shadow: var(--vp-shadow); }
.vp-hero-caption { font-size: var(--vp-fs-1); color: var(--vp-muted); margin: var(--vp-space) 0 0; }

/* statement after hero */
.vp-statement { border-left: 3px solid var(--vp-accent); padding: 0 calc(var(--vp-space) * 2); max-width: 68ch; }

/* verdict groups + cards */
.vp-group { margin-bottom: calc(var(--vp-space) * 6); }
.vp-group h3 { display: flex; align-items: baseline; gap: calc(var(--vp-space) * 2); flex-wrap: wrap; }
.vp-verdict { font-size: var(--vp-fs-2); font-weight: 600; color: var(--vp-muted); font-family: var(--vp-font-body); }
.vp-cards { list-style: none; margin: calc(var(--vp-space) * 2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--vp-space) * 4); }
.vp-cards.vp-one-wide { grid-template-columns: minmax(0, 1fr); }
.vp-card {
  display: grid; grid-template-rows: auto auto; background: var(--vp-surface);
  border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius);
  box-shadow: var(--vp-shadow); overflow: hidden; text-decoration: none; color: var(--vp-text);
  transition: transform var(--vp-speed) ease, border-color var(--vp-speed) ease;
}
.vp-card:hover { transform: translateY(-2px); border-color: var(--vp-accent); }
.vp-card-media { margin: 0; }
.vp-card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.vp-card-body { padding: calc(var(--vp-space) * 2) calc(var(--vp-space) * 2.5) calc(var(--vp-space) * 3); }
.vp-card-body h4 { margin: 0 0 var(--vp-space); font-size: var(--vp-fs-4); line-height: 1.3; }
.vp-card-body p { margin: 0; font-size: var(--vp-fs-2); color: var(--vp-muted); }

/* rows with 1:1 thumb */
.vp-rows { list-style: none; margin: calc(var(--vp-space) * 2) 0 0; padding: 0; display: grid; gap: calc(var(--vp-space) * 2); }
.vp-row { display: block; text-decoration: none; color: var(--vp-text); border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); background: var(--vp-surface); transition: border-color var(--vp-speed) ease; }
.vp-row:hover { border-color: var(--vp-accent); }
.vp-row a { text-decoration: none; }
.vp-row-in { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: calc(var(--vp-space) * 2.5); align-items: center; padding: calc(var(--vp-space) * 1.5); }
.vp-row-in img { width: 96px; height: 96px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--vp-radius); display: block; }
.vp-row-body h4 { margin: 0 0 4px; font-size: var(--vp-fs-3); }
.vp-row-body p { margin: 0; font-size: var(--vp-fs-2); color: var(--vp-muted); }

/* two-col myth/fact */
.vp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--vp-space) * 3); margin: calc(var(--vp-space) * 3) 0; }
.vp-duo > div { border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); padding: calc(var(--vp-space) * 2.5); background: var(--vp-surface); }
.vp-duo-credenza { border-left: 4px solid var(--vp-muted); }
.vp-duo-esame { border-left: 4px solid var(--vp-accent); }
.vp-duo h3 { margin-top: 0; font-size: var(--vp-fs-4); }
.vp-duo p:last-child { margin-bottom: 0; }

/* article body */
.vp-article-body { padding: calc(var(--vp-space) * 4) 0 calc(var(--vp-space) * 6); }
.vp-hero-img { width: 100%; max-width: 480px; aspect-ratio: 4 / 5; object-fit: cover; border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); box-shadow: var(--vp-shadow); display: block; margin: calc(var(--vp-space) * 3) 0 var(--vp-space); }
.vp-toc { border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); background: var(--vp-panel); padding: calc(var(--vp-space) * 2) calc(var(--vp-space) * 3); margin: calc(var(--vp-space) * 3) 0; }
.vp-toc h2 { font-size: var(--vp-fs-3); margin: 0 0 var(--vp-space); }
.vp-toc ol { padding-left: calc(var(--vp-space) * 3); }
.vp-toc li { margin: 0; }
.vp-toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--vp-fs-2); text-decoration: none; padding: 0 var(--vp-space); }
.vp-toc a:hover { color: var(--vp-accent-strong); text-decoration: underline; }
.vp-note { border: var(--vp-border-w) solid var(--vp-border); border-left: 4px solid var(--vp-accent); border-radius: var(--vp-radius); background: var(--vp-panel); padding: calc(var(--vp-space) * 2) calc(var(--vp-space) * 2.5); margin: calc(var(--vp-space) * 3) 0; }
.vp-note p { margin: 0; font-size: var(--vp-fs-2); }
.vp-note + h2, .vp-note + h3 { margin-top: calc(var(--vp-space) * 4); }
.vp-xref { border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); padding: calc(var(--vp-space) * 2) calc(var(--vp-space) * 2.5); margin: calc(var(--vp-space) * 3) 0; background: var(--vp-surface); }
.vp-xref h2, .vp-xref h3 { margin-top: 0; font-size: var(--vp-fs-4); }
.vp-xref ul { margin: 0; padding-left: calc(var(--vp-space) * 3); }
.vp-xref li { font-size: var(--vp-fs-2); }
.vp-pn { margin-top: calc(var(--vp-space) * 6); border-top: var(--vp-border-w) solid var(--vp-border); padding-top: calc(var(--vp-space) * 3); }
.vp-pn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--vp-space) * 2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vp-pn a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--vp-text); border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); padding: calc(var(--vp-space) * 1.5) calc(var(--vp-space) * 2); background: var(--vp-surface); min-height: 44px; transition: border-color var(--vp-speed) ease; }
.vp-pn a:hover { border-color: var(--vp-accent); }
.vp-pn-label { font-size: var(--vp-fs-1); color: var(--vp-muted); }
.vp-pn-title { font-size: var(--vp-fs-2); font-weight: 600; }
.vp-ref { font-size: var(--vp-fs-1); color: var(--vp-muted); }
.vp-refs { font-size: var(--vp-fs-2); list-style: none; padding-left: calc(var(--vp-space) * 1); }
.vp-refs li { margin-bottom: var(--vp-space); }
.vp-refs a { display: inline-flex; align-items: center; min-height: 44px; }
.vp-verdict-line { font-size: var(--vp-fs-2); color: var(--vp-muted); margin: 0 0 calc(var(--vp-space) * 2); }

/* source / method grid on home */
.vp-source-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--vp-space) * 6); }
.vp-source-grid h2 { margin-top: 0; }
.vp-flags { list-style: none; margin: calc(var(--vp-space) * 2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: calc(var(--vp-space) * 2); }
.vp-flags li { display: flex; gap: var(--vp-space); align-items: baseline; font-size: var(--vp-fs-2); color: var(--vp-muted); margin: 0; }
.vp-flags svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--vp-accent); }

/* faq */
.vp-faq details { border-bottom: var(--vp-border-w) solid var(--vp-border); padding: calc(var(--vp-space) * 1.5) 0; }
.vp-faq summary { cursor: pointer; font-weight: 600; font-family: var(--vp-font-heading); min-height: 44px; display: flex; align-items: center; }
.vp-faq p { margin: var(--vp-space) 0 0; color: var(--vp-muted); }

/* ---------- cookie banner ---------- */
.vp-cookie {
  background: var(--vp-panel); color: var(--vp-text);
  border-top: var(--vp-border-w) solid var(--vp-border);
  padding: calc(var(--vp-space) * 1.5) 0 calc(var(--vp-space) * 2);
  z-index: 50;
}
.vp-cookie[hidden] { display: none; }
.vp-cookie-fixed { position: fixed; left: 0; right: 0; bottom: 0; box-shadow: 0 -1px 4px rgba(60, 52, 20, 0.18); }
.vp-cookie-in { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: calc(var(--vp-space) * 2); align-items: center; position: relative; }
.vp-cookie-icon { color: var(--vp-accent); width: 20px; height: 20px; }
.vp-cookie-icon svg { width: 20px; height: 20px; display: block; }
.vp-cookie-text { min-width: 0; }
.vp-cookie-title { margin: 0; font-family: var(--vp-font-heading); font-size: var(--vp-fs-2); font-weight: 700; line-height: 1.3; color: var(--vp-text); }
.vp-cookie-line { margin: 0; font-size: var(--vp-fs-1); line-height: 1.35; padding-right: calc(var(--vp-space) * 6); }
.vp-cookie-actions { display: flex; flex-wrap: nowrap; gap: calc(var(--vp-space) * 0.75); align-items: center; }
.vp-cookie-actions .vp-btn { white-space: nowrap; padding: var(--vp-space) var(--vp-space); font-size: var(--vp-fs-1); }
.vp-cookie-close {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--vp-muted); cursor: pointer; border-radius: var(--vp-radius);
  transition: color var(--vp-speed) ease, background var(--vp-speed) ease;
}
.vp-cookie-close:hover { color: var(--vp-accent); background: var(--vp-accent-tint); }
.vp-cookie-close svg { width: 20px; height: 20px; }

.vp-btn {
  font-family: var(--vp-font-body); font-weight: 600; font-size: var(--vp-fs-2);
  min-height: 44px; min-width: 44px; padding: var(--vp-space) calc(var(--vp-space) * 2);
  border-radius: var(--vp-radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--vp-speed) ease, color var(--vp-speed) ease, border-color var(--vp-speed) ease, transform var(--vp-speed) ease;
}
.vp-btn-primary { background: var(--vp-accent); color: var(--vp-bg); border: var(--vp-border-w) solid var(--vp-accent); }
.vp-btn-primary:hover { background: var(--vp-accent-strong); border-color: var(--vp-accent-strong); transform: translateY(-1px); }
.vp-btn-ghost { background: var(--vp-surface); color: var(--vp-accent); border: var(--vp-border-w) solid var(--vp-accent); }
.vp-btn-ghost:hover { background: var(--vp-accent-tint); }
.vp-btn-text { background: transparent; color: var(--vp-accent); border: var(--vp-border-w) solid transparent; text-decoration: underline; text-underline-offset: 3px; }
.vp-btn-text:hover { background: var(--vp-accent-tint); }

/* dialog */
.vp-cookie-dialog {
  width: min(92vw, 480px); border: var(--vp-border-w) solid var(--vp-border);
  border-radius: var(--vp-radius); background: var(--vp-surface); color: var(--vp-text);
  padding: calc(var(--vp-space) * 3);
}
.vp-cookie-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.vp-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--vp-space); }
.vp-dialog-head h2 { font-size: var(--vp-fs-4); margin: 0; }
.vp-dialog-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--vp-muted); cursor: pointer; border-radius: var(--vp-radius); }
.vp-dialog-close:hover { color: var(--vp-accent); background: var(--vp-accent-tint); }
.vp-dialog-close svg { width: 20px; height: 20px; }
.vp-dialog-intro { font-size: var(--vp-fs-2); color: var(--vp-muted); margin: calc(var(--vp-space) * 2) 0; }
.vp-cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--vp-space) * 1.5); }
.vp-cat { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--vp-space) * 2); border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); padding: calc(var(--vp-space) * 1.5) calc(var(--vp-space) * 2); background: var(--vp-bg); }
.vp-cat-name { margin: 0; font-weight: 600; font-size: var(--vp-fs-2); }
.vp-cat-desc { margin: 0; font-size: var(--vp-fs-1); color: var(--vp-muted); }
.vp-badge { background: var(--vp-accent-tint); color: var(--vp-accent); font-size: var(--vp-fs-1); font-weight: 600; padding: 4px calc(var(--vp-space) * 1.5); border-radius: 999px; }
.vp-switch { flex: 0 0 auto; width: 52px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; }
.vp-switch-ui { display: block; width: 44px; height: 24px; border-radius: 999px; background: var(--vp-border); border: var(--vp-border-w) solid var(--vp-border); position: relative; transition: background var(--vp-speed) ease; }
.vp-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--vp-surface); transition: transform var(--vp-speed) ease; }
.vp-switch[aria-checked="true"] .vp-switch-ui { background: var(--vp-accent); border-color: var(--vp-accent); }
.vp-switch[aria-checked="true"] .vp-switch-ui::after { transform: translateX(18px); }
.vp-dialog-actions { display: flex; gap: calc(var(--vp-space) * 1.5); margin-top: calc(var(--vp-space) * 3); flex-wrap: wrap; }
.vp-dialog-foot { font-size: var(--vp-fs-1); color: var(--vp-muted); margin: calc(var(--vp-space) * 2) 0 0; }

/* ---------- forms ---------- */
.vp-form { margin: calc(var(--vp-space) * 3) 0; display: grid; gap: calc(var(--vp-space) * 2.5); max-width: 60ch; }
.vp-field { display: grid; gap: 4px; }
.vp-field label { font-weight: 600; font-size: var(--vp-fs-2); }
.vp-field input, .vp-field textarea {
  font-family: var(--vp-font-body); font-size: var(--vp-fs-3); color: var(--vp-text);
  background: var(--vp-surface); border: var(--vp-border-w) solid var(--vp-border);
  border-radius: var(--vp-radius); padding: calc(var(--vp-space) * 1.25); min-height: 44px;
}
.vp-field textarea { min-height: 9rem; resize: vertical; }
.vp-field input:focus-visible, .vp-field textarea:focus-visible { outline: 3px solid var(--vp-accent); outline-offset: 1px; }
.vp-hint { font-size: var(--vp-fs-1); color: var(--vp-muted); }
.vp-radio-set { border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); padding: calc(var(--vp-space) * 2); display: grid; gap: 0; }
.vp-radio-set legend { font-weight: 600; font-size: var(--vp-fs-2); padding: 0 var(--vp-space); }
.vp-radio { display: flex; gap: var(--vp-space); align-items: center; min-height: 44px; }
.vp-radio label { flex: 1 1 auto; display: flex; align-items: center; min-height: 44px; font-weight: 400; font-size: var(--vp-fs-2); cursor: pointer; }
.vp-check { display: flex; gap: var(--vp-space); align-items: center; min-height: 44px; font-size: var(--vp-fs-2); }
.vp-check label { flex: 1 1 auto; display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.vp-check label a { display: inline-flex; align-items: center; min-height: 44px; }
.vp-mailto-note { font-size: var(--vp-fs-1); color: var(--vp-muted); margin: 0; min-height: 1.4em; }
.vp-form .vp-btn { justify-self: start; }

/* identity grid */
.vp-gloss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: calc(var(--vp-space) * 1.5) calc(var(--vp-space) * 3); margin: calc(var(--vp-space) * 2) 0; }
.vp-gloss dt { font-weight: 600; color: var(--vp-muted); font-size: var(--vp-fs-2); }
.vp-gloss dd { margin: 0; overflow-wrap: anywhere; }

.vp-contact-img { width: 100%; max-width: 480px; aspect-ratio: 1 / 1; object-fit: cover; border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); box-shadow: var(--vp-shadow); display: block; margin: calc(var(--vp-space) * 3) 0 var(--vp-space); }
.vp-table-scroll { overflow-x: auto; border: var(--vp-border-w) solid var(--vp-border); border-radius: var(--vp-radius); background: var(--vp-surface); padding: calc(var(--vp-space) * 2); margin: calc(var(--vp-space) * 2) 0; }
.vp-table-scroll table { min-width: 760px; }
.vp-table-scroll:focus-visible { outline: 3px solid var(--vp-accent); outline-offset: 2px; }
.vp-toc ol { list-style: none; padding-left: calc(var(--vp-space) * 2); }
.vp-toc li { margin: var(--vp-space) 0; }

/* ---------- footer ---------- */
.vp-footer { border-top: var(--vp-border-w) solid var(--vp-border); background: var(--vp-panel); margin-top: calc(var(--vp-space) * 8); padding: calc(var(--vp-space) * 5) 0 calc(var(--vp-space) * 6); }
.vp-footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--vp-space) * 5); }
.vp-foot-brand { font-family: var(--vp-font-heading); font-weight: 700; font-size: var(--vp-fs-4); margin: 0 0 var(--vp-space); }
.vp-foot-note { font-size: var(--vp-fs-2); color: var(--vp-muted); margin: 0 0 calc(var(--vp-space) * 2); max-width: 44ch; }
.vp-foot-id { font-size: var(--vp-fs-1); color: var(--vp-muted); margin: 0; overflow-wrap: anywhere; }
.vp-foot-h { font-family: var(--vp-font-heading); font-weight: 700; font-size: var(--vp-fs-3); margin: 0 0 calc(var(--vp-space) * 2); }
.vp-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vp-footer nav li { margin: 0 0 var(--vp-space); }
.vp-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--vp-fs-2); color: var(--vp-text); text-decoration: none; padding: 0 var(--vp-space); border-radius: var(--vp-radius); }
.vp-footer nav a:hover { color: var(--vp-accent); background: var(--vp-accent-tint); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .vp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .vp-hero-media { order: -1; max-width: 520px; }
  .vp-source-grid { grid-template-columns: minmax(0, 1fr); gap: calc(var(--vp-space) * 4); }
  .vp-footer-grid { grid-template-columns: minmax(0, 1fr); gap: calc(var(--vp-space) * 4); }
  .vp-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .vp-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vp-header-in { min-height: 64px; }
  .vp-hero-lead { font-size: var(--vp-fs-3); }
  .vp-gloss { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vp-cookie { padding: calc(var(--vp-space) * 0.5) 0; }
  .vp-cookie-in { grid-template-columns: minmax(0, 1fr); gap: calc(var(--vp-space) * 0.5); }
  .vp-cookie-icon { display: none; }
  .vp-cookie-actions { width: 100%; }
  .vp-cookie-actions .vp-btn { flex: 0 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .vp-skip { transition: none; }
}