/* vovnov — tokens (from the vovnov design system) */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --paper-overlay: rgba(255, 255, 255, 0.95);
  --ink: #333333;
  --ink-strong: #000000;
  --ink-muted: #6e6e6e;
  --line: #e5e5e5;
  --line-strong: var(--ink-strong);
  --fill: #f2f2f2;
  --fill-strong: #d4d4d4;

  --font-sans: "Onest", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-16: 64px;
  --gutter-page: max(16px, 5.86vw);
  --section-gap: max(96px, 15.6vw);
  --radius-0: 0; --radius-full: 9999px;
  --avatar: 120px; --border: 1px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111111; --paper-overlay: rgba(17, 17, 17, 0.95);
    --ink: #d9d9d9; --ink-strong: #ffffff; --ink-muted: #9b9b9b;
    --line: #2b2b2b; --fill: #1c1c1c; --fill-strong: #3a3a3a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111111; --paper-overlay: rgba(17, 17, 17, 0.95);
  --ink: #d9d9d9; --ink-strong: #ffffff; --ink-muted: #9b9b9b;
  --line: #2b2b2b; --fill: #1c1c1c; --fill-strong: #3a3a3a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); }
img { max-width: 100%; display: block; }
figure { margin: 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* vovnov components. Colors, spacing and radii come from tokens.css.
   Layout: 12 columns inside a 5.86vw page margin; labels own columns 1–4, content starts at column 5. */

.vv { font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
.vv a { color: inherit; text-decoration: none; }
.vv a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: var(--border); }
.vv :focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 3px; }
.vv p, .vv h1, .vv h2, .vv h3, .vv h4 { margin: 0; }

/* Type, fluid from the 1024px reference */
.vv-display   { font-weight: 400; font-size: clamp(40px, 5.5vw, 96px); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.vv-statement { font-weight: 300; font-size: clamp(36px, 5vw, 88px);   line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.vv-title     { font-weight: 300; font-size: clamp(32px, 4.5vw, 80px); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.vv-subhead   { font-weight: 400; font-size: clamp(20px, 2.2vw, 36px); line-height: 1; }
.vv-lead      { font-weight: 400; font-size: clamp(18px, 2vw, 32px);   line-height: 1.25; max-width: 22em; }
.vv-link-lg   { font-weight: 400; font-size: clamp(16px, 1.8vw, 28px); line-height: 1.1; }
.vv-body      { font-weight: 400; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.3; max-width: 34em; }
.vv-caption   { font-weight: 400; font-size: clamp(13px, 1.3vw, 18px); line-height: 1.25; }
.vv-micro     { font-weight: 400; font-size: 10px; line-height: 1.3; color: var(--ink-muted); }
.vv-muted     { color: var(--ink-muted); }

/* Page and grid */
.vv-page { padding-left: max(16px, 5.86vw); padding-right: max(16px, 5.86vw); }
.vv-section { padding-block: max(96px, 15.6vw) 0; }
.vv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-16); }
.vv-grid > .vv-label { grid-column: 1 / 5; }
.vv-grid > .vv-content { grid-column: 5 / 13; min-width: 0; display: grid; gap: var(--space-16); }
.vv-label { font-weight: 400; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.3; text-transform: lowercase; }
@media (max-width: 720px) {
  .vv-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .vv-grid > .vv-label, .vv-grid > .vv-content { grid-column: 1 / -1; }
}

/* Header */
.vv-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-4) var(--space-6); padding-block: var(--space-6); }
.vv-header a { font-size: clamp(13px, 1.3vw, 18px); line-height: 1.25; text-transform: lowercase; }
.vv-header .vv-logo { font-size: 18px; letter-spacing: 0.015em; }
.vv-header a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.18em; }

/* Values: label + short text per column */
.vv-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-8) var(--space-6); }
.vv-value { display: grid; gap: var(--space-4); align-content: start; }
.vv-value h4 { font-weight: 400; font-size: clamp(13px, 1.3vw, 18px); line-height: 1.25; text-transform: lowercase; }
.vv-value p { font-size: clamp(15px, 1.5vw, 22px); line-height: 1.3; }

/* Button: an outlined rectangle with an arrow. Inverts on hover. */
.vv-button { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-6); border: var(--border) solid var(--line-strong); border-radius: var(--radius-0);
  background: transparent; color: var(--ink-strong); font: inherit; font-size: clamp(16px, 1.8vw, 28px); line-height: 1.1; cursor: pointer; text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease; }
.vv-button:hover { background: var(--ink-strong); color: var(--paper); text-decoration: none; }
.vv-button .vv-arrow { font-size: 1.1em; line-height: 1; }
.vv-button--block { display: flex; width: 100%; justify-content: space-between; box-sizing: border-box; }
.vv-button--sm { padding: var(--space-2) var(--space-4); font-size: clamp(13px, 1.3vw, 18px); }
@media (prefers-reduced-motion: reduce) { .vv-button { transition: none; } }

/* Team: circular portraits with first names */
.vv-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-8) var(--space-6); }
.vv-person { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.vv-avatar { width: var(--avatar); max-width: 100%; aspect-ratio: 1; border-radius: var(--radius-full); background: var(--fill); object-fit: cover; display: grid; place-items: center; overflow: hidden; color: var(--ink-muted); }
.vv-person figcaption { font-size: clamp(13px, 1.3vw, 18px); line-height: 1.25; }

/* Media grid: square-cornered photography, tight gaps */
.vv-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.vv-tile { position: relative; aspect-ratio: 4 / 5; max-width: 100%; background: var(--fill); overflow: hidden; border-radius: var(--radius-0); }
.vv-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-tile figcaption { position: absolute; left: 0; bottom: 0; padding: var(--space-2) 0; }
@media (max-width: 560px) { .vv-media { grid-template-columns: minmax(0, 1fr); } }

/* Footer: one giant uppercase wordmark and a meta row */
.vv-footer { display: grid; gap: var(--space-6); padding-block: var(--space-16) var(--space-6); }
.vv-wordmark { font-weight: 400; font-size: 16vw; line-height: 0.85; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink-strong); white-space: nowrap; margin-left: -0.04em; }
.vv-footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-4) var(--space-6); font-size: clamp(13px, 1.3vw, 18px); line-height: 1.25; }

/* Consent bar */
.vv-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper-overlay);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6);
  padding-block: var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, 5.86vw); padding-right: max(16px, 5.86vw); }
.vv-consent p { font-size: clamp(13px, 1.3vw, 18px); line-height: 1.25; max-width: 48em; }
.vv-consent a { text-decoration: underline; }
.vv-consent--static { position: static; }