/* vzndesigns.io · site styles on VZN Designs v3.
   Every colour, type role, space, radius and motion value comes from vzn-tokens.css.
   The one exception is the block of "fixed" values right below: spec 04 asks for bands and
   media areas that stay black in both themes, and vzn-tokens.css has no fixed token for
   their ink, muted, line and inset colours. They mirror the dark-theme values exactly. */

:root {
  --site-black: var(--vzn-sidebar-bg);            /* #0B0B0A, both themes */
  --site-black-soft: var(--vzn-sidebar-text);     /* #C9C4B8 */
  --site-black-gold: var(--vzn-sidebar-active-text); /* #D4B35A */
  --site-black-ink: #F1EEE6;                      /* dark text */
  --site-black-muted: #9A958A;                    /* dark muted */
  --site-black-line: #3A372F;                     /* dark lineStrong */
  --site-black-inset: #1F1D1A;                    /* dark surfaceAlt */

  --site-nav-h: 69px;
  --site-section-y: var(--vzn-space-9);           /* 96 */
}
@media (max-width: 879px) { :root { --site-nav-h: 121px; } }
@media (max-width: 639px) { :root { --site-section-y: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--vzn-bg);
  color: var(--vzn-text);
  font: var(--vzn-site-body);
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
[id] { scroll-margin-top: calc(var(--site-nav-h) + var(--vzn-space-4)); }

.wrap { max-width: var(--vzn-site-max); margin: 0 auto; padding: 0 var(--vzn-gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--vzn-space-4); top: -100px; z-index: 100;
  background: var(--vzn-accent); color: var(--vzn-accent-text); font-weight: 700;
  padding: var(--vzn-space-3) var(--vzn-space-4); border-radius: var(--vzn-radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--vzn-space-2); }

/* ---------- type roles ---------- */
.eyebrow {
  display: block; font: var(--vzn-site-eyebrow); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--vzn-gold);
}
.h-section { font: var(--vzn-site-section); letter-spacing: -0.02em; text-wrap: balance; }
.lead { font: var(--vzn-site-lead); color: var(--vzn-text-soft); max-width: 640px; }
.soft { color: var(--vzn-text-soft); }
.mono { font-family: var(--vzn-font-mono); }
.prose-link, .prose a {
  color: var(--vzn-gold); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* ---------- icons ---------- */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-16 { width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vzn-space-2);
  min-height: var(--vzn-control-h-touch); min-width: 72px; padding: 0 18px;
  border-radius: var(--vzn-radius-sm); border: 1px solid transparent;
  font: 700 15px/20px var(--vzn-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 120ms var(--vzn-ease), border-color 120ms var(--vzn-ease);
}
.btn-primary { background: var(--vzn-accent); color: var(--vzn-accent-text); }
.btn-primary:hover { background: color-mix(in srgb, var(--vzn-accent) 50%, var(--vzn-accent-pressed)); }
.btn-primary:active { background: var(--vzn-accent-pressed); }
.btn-secondary { background: transparent; color: var(--vzn-text); border-color: var(--vzn-line-strong); }
.btn-secondary:hover { background: color-mix(in srgb, var(--vzn-surface-alt) 50%, transparent); }
.btn-secondary:active { background: var(--vzn-surface-alt); }
.btn-md { min-height: 48px; padding: 0 20px; font-size: 16px; }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn-xl { min-height: 56px; padding: 0 28px; font: 800 18px/22px var(--vzn-font-sans); }
.btn-block { width: 100%; }

.icon-btn {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--vzn-text); border: 1px solid var(--vzn-line-strong);
  border-radius: var(--vzn-radius-sm); cursor: pointer; padding: 0;
  transition: background-color 120ms var(--vzn-ease);
}
.icon-btn:hover { background: color-mix(in srgb, var(--vzn-surface-alt) 50%, transparent); }
.icon-btn:active { background: var(--vzn-surface-alt); }
.icon-btn .icon { width: 20px; height: 20px; }
.theme-toggle .ico { display: none; }
.theme-toggle[data-next="light"] .ico-light,
.theme-toggle[data-next="dark"] .ico-dark,
.theme-toggle[data-next="system"] .ico-system { display: block; }

/* ---------- nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--vzn-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vzn-line);
}
.nav {
  max-width: var(--vzn-site-max); margin: 0 auto; padding: var(--vzn-space-3) var(--vzn-gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--vzn-space-2) var(--vzn-space-6);
}
.brand {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--vzn-wordmark);
  text-decoration: none; border-radius: var(--vzn-radius-sm);
}
.brand svg { height: 22px; width: auto; fill: currentColor; }
.nav-links {
  order: 2; flex: 1 1 auto; display: flex; justify-content: center; gap: 4px 12px;
}
.nav-links a {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 4px; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 500 15px/20px var(--vzn-font-sans); color: var(--vzn-text-soft); text-decoration: none;
  border-radius: var(--vzn-radius-sm);
}
.nav-links a:hover { color: var(--vzn-text); }
.nav-actions { order: 3; margin-left: auto; display: flex; align-items: center; gap: var(--vzn-space-2); }
@media (max-width: 879px) {
  .nav-actions { order: 2; }
  .nav-links {
    order: 3; flex: 1 1 calc(100% + 2 * var(--vzn-gutter)); justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; margin: 0 calc(var(--vzn-gutter) * -1); padding: 0 var(--vzn-gutter);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
}

/* ---------- sections ---------- */
.section { padding: var(--site-section-y) 0; }
.section > .wrap { display: flex; flex-direction: column; gap: 40px; }
.band { background: var(--vzn-surface); border-top: 1px solid var(--vzn-line); border-bottom: 1px solid var(--vzn-line); }
.rule-top { border-top: 1px solid var(--vzn-line); }
.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.section-head .lead { margin-top: var(--vzn-space-2); }

/* ---------- hero ---------- */
.hero { padding: var(--site-section-y) 0 112px; }
@media (max-width: 639px) { .hero { padding: 64px 0 var(--site-section-y); } }
.hero .wrap { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font: var(--vzn-site-hero); letter-spacing: -0.03em; max-width: 1040px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--vzn-gold); }
.hero .lead { max-width: 680px; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--vzn-space-3); }
.gold-rule { display: block; width: 120px; height: 2px; background: var(--vzn-gold-fill); margin-top: var(--vzn-space-5); }

.vitals {
  list-style: none; margin: var(--vzn-space-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--vzn-space-4);
}
.vital {
  background: var(--vzn-surface); border-radius: var(--vzn-radius-md); box-shadow: var(--vzn-elev-card);
  padding: var(--vzn-space-5); display: flex; flex-direction: column; gap: var(--vzn-space-3);
}
.figure {
  align-self: flex-start; font: 800 clamp(40px, 5vw, 56px)/1.05 var(--vzn-font-sans); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; padding-bottom: 6px; border-bottom: 3px solid var(--vzn-gold-fill);
}
.figure sup { font-size: 0.5em; vertical-align: 0.7em; margin-left: 2px; }
.vital .label { font: 400 16px/25px var(--vzn-font-sans); color: var(--vzn-text-soft); }
.vital .src { font: var(--vzn-mono); color: var(--vzn-muted); letter-spacing: 0.04em; margin-top: auto; }

/* ---------- diagnosis ---------- */
.split { display: flex; flex-wrap: wrap; gap: var(--vzn-space-7) var(--vzn-space-8); align-items: flex-start; }
.split > * { min-width: 0; }
.split .copy { flex: 3 1 420px; display: flex; flex-direction: column; gap: 20px; max-width: 680px; }
.split .copy p { color: var(--vzn-text-soft); }
.split .copy strong { color: var(--vzn-text); font-weight: 700; }
.hypothesis { flex: 2 1 300px; display: flex; flex-direction: column; gap: var(--vzn-space-3); }
.hypothesis::before { content: ""; width: 64px; height: 2px; background: var(--vzn-gold-fill); }
.hypothesis .tag { font: var(--vzn-label); letter-spacing: var(--vzn-ls-label); text-transform: uppercase; color: var(--vzn-gold); }
.hypothesis p { font: 700 clamp(20px, 2.2vw, 24px)/1.45 var(--vzn-font-sans); letter-spacing: -0.01em; }

/* ---------- services ---------- */
.services { display: flex; flex-wrap: wrap; gap: var(--vzn-space-4); list-style: none; margin: 0; padding: 0; }
.svc {
  flex: 1 1 320px; min-width: 0; background: var(--vzn-bg); border: 1px solid var(--vzn-line);
  border-radius: var(--vzn-radius-md); padding: var(--vzn-space-5); display: flex; flex-direction: column; gap: var(--vzn-space-3);
}
.svc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--vzn-space-3); }
.svc-n { font: 400 13px/16px var(--vzn-font-mono); color: var(--vzn-gold); }
.svc-proto { font: 400 12.5px/18px var(--vzn-font-mono); color: var(--vzn-muted); }
.svc h3 { font: var(--vzn-site-card-title); letter-spacing: -0.01em; }
.svc .for { font: 400 16px/25px var(--vzn-font-sans); color: var(--vzn-text-soft); }
.svc .deliv-label { font: var(--vzn-label); letter-spacing: var(--vzn-ls-label); text-transform: uppercase; color: var(--vzn-muted); margin-top: var(--vzn-space-2); }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--vzn-space-2); }
.ticks li { display: flex; gap: 10px; font: 400 15px/22px var(--vzn-font-sans); color: var(--vzn-text-soft); }
.ticks .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--vzn-gold); stroke-width: 2.2; }
.svc .outcome {
  margin-top: auto; padding-top: var(--vzn-space-4); border-top: 1px solid var(--vzn-line);
  font: 400 15px/22px var(--vzn-font-sans); color: var(--vzn-text-soft);
}
.svc .ticks + .outcome { margin-top: auto; }
.svc .ticks { margin-bottom: var(--vzn-space-2); }
.svc .outcome b { color: var(--vzn-text); font-weight: 700; }
.inset {
  background: var(--vzn-surface-alt); border-radius: var(--vzn-radius-sm); padding: var(--vzn-space-4) 20px;
  font: 400 16px/26px var(--vzn-font-sans); color: var(--vzn-text-soft); max-width: 880px;
}
.inset strong { color: var(--vzn-text); font-weight: 700; }

/* ---------- method ---------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--vzn-space-5);
}
.steps li { border-top: 2px solid var(--vzn-gold-fill); padding-top: 20px; display: flex; flex-direction: column; gap: var(--vzn-space-2); }
.steps .n { font: 400 13px/16px var(--vzn-font-mono); color: var(--vzn-muted); }
.steps .name { font: 800 24px/30px var(--vzn-font-sans); letter-spacing: -0.01em; }
.steps .desc { font: 400 16px/25px var(--vzn-font-sans); color: var(--vzn-text-soft); }
.note-card {
  background: var(--vzn-surface); border-radius: var(--vzn-radius-md); box-shadow: var(--vzn-elev-card);
  padding: var(--vzn-space-5); display: flex; gap: var(--vzn-space-4); align-items: flex-start; max-width: 880px;
  font: 400 16px/26px var(--vzn-font-sans); color: var(--vzn-text-soft);
}
.note-card .icon { width: 24px; height: 24px; color: var(--vzn-gold); margin-top: 1px; }
.note-card b { color: var(--vzn-text); }

/* ---------- about (always black) ---------- */
.on-black { background: var(--site-black); color: var(--site-black-ink); }
.on-black .eyebrow { color: var(--site-black-gold); }
.on-black :focus-visible { outline-color: var(--site-black-gold); }
.about { display: flex; flex-wrap: wrap; gap: var(--vzn-space-7); align-items: center; }
.portrait {
  flex: 1 1 280px; max-width: 420px; aspect-ratio: 4 / 5; border-radius: var(--vzn-radius-lg);
  background: var(--site-black-inset); border: 1px solid var(--site-black-line);
  display: flex; align-items: flex-end; padding: 20px;
  font: 400 13px/18px var(--vzn-font-sans); color: var(--site-black-muted);
}
.portrait.has-photo { padding: 0; overflow: hidden; }
.portrait.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.about-copy { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.about-copy p { color: var(--site-black-soft); max-width: 640px; }
.about-copy strong { color: var(--site-black-ink); font-weight: 700; }
.about-name { font: var(--vzn-site-card-title); margin-top: var(--vzn-space-2); }
.cred { font: var(--vzn-mono); letter-spacing: 0.06em; color: var(--site-black-gold); margin-top: -12px; }
.orgs {
  display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 0; padding: var(--vzn-space-4) 0 0;
  border-top: 1px solid var(--site-black-line); font: var(--vzn-mono); letter-spacing: 0.05em; color: var(--site-black-muted);
}

/* ---------- proof ---------- */
.cases { display: flex; flex-direction: column; gap: var(--vzn-space-4); }
.case {
  background: var(--vzn-surface); border: 1px solid var(--vzn-line); border-radius: var(--vzn-radius-md);
  overflow: hidden; display: flex; flex-wrap: wrap;
}
.case-media {
  flex: 1 1 320px; min-width: 0; background: var(--site-black); display: flex; align-items: center; justify-content: center;
}
.case-media img { width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.case-body { flex: 1 1 380px; min-width: 0; padding: var(--vzn-space-6); display: flex; flex-direction: column; gap: var(--vzn-space-3); }
@media (max-width: 639px) { .case-body { padding: var(--vzn-space-5); } }
@media (min-width: 900px) { .case-flip .case-media { order: 2; } }
.case-kicker { font: var(--vzn-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vzn-gold); }
.case h3 { font: var(--vzn-site-card-title); letter-spacing: -0.01em; }
.case p { font: 400 16px/25px var(--vzn-font-sans); color: var(--vzn-text-soft); }
.stats { display: flex; flex-wrap: wrap; gap: var(--vzn-space-5) var(--vzn-space-6); list-style: none; margin: auto 0 0; padding: var(--vzn-space-4) 0 0; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .num {
  align-self: flex-start; font: 800 30px/36px var(--vzn-font-sans); font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--vzn-gold-fill); padding-bottom: 2px; color: var(--vzn-text);
}
.stat .lbl { font: 400 13px/18px var(--vzn-font-sans); color: var(--vzn-muted); max-width: 160px; }
.subhead { display: flex; flex-direction: column; gap: 10px; margin-top: var(--vzn-space-7); }
.subhead h3 { font: 800 clamp(24px, 2.6vw, 30px)/1.2 var(--vzn-font-sans); letter-spacing: -0.015em; }

/* ---------- field notes ---------- */
.notes-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--vzn-space-3) var(--vzn-space-6); }
.notes-head .section-head { flex: 1 1 480px; }
.quiet-link {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  color: var(--vzn-gold); font-weight: 700; text-decoration: none; border-radius: var(--vzn-radius-sm);
}
.quiet-link:hover, .quiet-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.note-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--vzn-line); }
.note-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--vzn-space-5);
  padding: var(--vzn-space-5) 0; border-top: 1px solid var(--vzn-line);
  color: var(--vzn-text); text-decoration: none; transition: background-color 120ms var(--vzn-ease);
}
.note-row:hover { background: color-mix(in srgb, var(--vzn-surface-alt) 50%, transparent); }
.note-row:active { background: var(--vzn-surface-alt); }
.note-row .tag { width: 140px; flex: none; font: 400 14px/20px var(--vzn-font-sans); color: var(--vzn-muted); }
.note-row .body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.note-row .title { font: 700 24px/32px var(--vzn-font-sans); letter-spacing: -0.01em; }
.note-row .dek { font: 400 16px/25px var(--vzn-font-sans); color: var(--vzn-text-soft); }
.note-row .read { display: inline-flex; align-items: center; gap: 4px; font: 700 14px/20px var(--vzn-font-sans); color: var(--vzn-gold); white-space: nowrap; }
.note-row .read .icon { width: 16px; height: 16px; }
.note-row:hover .title, .note-row:focus-visible .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- book a call ---------- */
.book { padding: var(--vzn-space-10) 0; }
@media (max-width: 639px) { .book { padding: var(--vzn-space-9) 0; } }
.book .wrap { gap: var(--vzn-space-5); }
.book h2 { font: 800 clamp(36px, 6vw, 72px)/1.05 var(--vzn-font-sans); letter-spacing: -0.03em; max-width: 900px; text-wrap: balance; }
.book .lead-17 { font: var(--vzn-site-body); color: var(--vzn-text-soft); max-width: 640px; }
.book-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--vzn-space-4);
  margin-top: var(--vzn-space-6); align-items: start;
}
.card {
  background: var(--vzn-surface); border-radius: var(--vzn-radius-md); box-shadow: var(--vzn-elev-card);
  padding: var(--vzn-space-6); display: flex; flex-direction: column; gap: var(--vzn-space-4); min-width: 0;
}
@media (max-width: 639px) { .card { padding: var(--vzn-space-5); } }
.card h3 { font: var(--vzn-site-card-title); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.card h3 .icon { width: 24px; height: 24px; color: var(--vzn-gold); }
.card > p { font: 400 16px/25px var(--vzn-font-sans); color: var(--vzn-text-soft); }
.card .btn-xl { align-self: flex-start; }
.office-hours {
  margin-top: var(--vzn-space-2); padding-top: 20px; border-top: 1px solid var(--vzn-line);
  font: 400 15px/24px var(--vzn-font-sans); color: var(--vzn-text-soft);
}
.office-hours b { color: var(--vzn-text); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: 600 13px/18px var(--vzn-font-sans); color: var(--vzn-text); }
.field input, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--vzn-radius-sm);
  background: var(--vzn-surface); border: 1px solid var(--vzn-line-strong); color: var(--vzn-text);
  font: var(--vzn-body); font-size: 16px; transition: border-color 160ms var(--vzn-ease), box-shadow 160ms var(--vzn-ease);
}
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--vzn-muted); opacity: 1; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--vzn-gold); box-shadow: 0 0 0 3px var(--vzn-accent-soft);
}
.cform { gap: 20px; }
.cform .btn { align-self: flex-start; min-height: 48px; padding: 0 24px; font-size: 16px; }
.cform .field input { background: var(--vzn-bg); }
.cform .field textarea { background: var(--vzn-bg); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--vzn-line); }
.foot {
  max-width: var(--vzn-site-max); margin: 0 auto; padding: var(--vzn-space-6) var(--vzn-gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--vzn-space-4);
  font: 400 14px/20px var(--vzn-font-sans); color: var(--vzn-muted);
}
.foot-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vzn-space-2) var(--vzn-space-4); }
.foot .brand svg { height: 16px; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vzn-space-5); list-style: none; margin: 0; padding: 0; }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--vzn-text-soft); text-decoration: none; border-radius: var(--vzn-radius-sm); }
.foot-links a:hover { color: var(--vzn-text); text-decoration: underline; text-underline-offset: 3px; }
.foot-links .icon { width: 18px; height: 18px; }

/* ---------- field-note article (notes/*.html) ---------- */
.article-nav { max-width: var(--vzn-site-max); margin: 0 auto; padding: var(--vzn-space-3) var(--vzn-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--vzn-space-4); }
.article-nav .nav-actions { order: 0; gap: var(--vzn-space-4); }
.article-nav .nav-actions > a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; color: var(--vzn-text-soft); font: 500 15px/20px var(--vzn-font-sans); text-decoration: none; border-radius: var(--vzn-radius-sm); }
.article-nav .nav-actions > a:not(.btn):hover { color: var(--vzn-text); }
.article-layout {
  max-width: var(--vzn-site-max); margin: 0 auto; padding: 72px var(--vzn-gutter) var(--vzn-space-10);
  display: flex; flex-wrap: wrap; gap: var(--vzn-space-8); align-items: flex-start;
}
@media (max-width: 639px) { .article-layout { padding-top: var(--vzn-space-7); padding-bottom: var(--vzn-space-9); } }
.article { flex: 999 1 560px; min-width: 0; max-width: var(--vzn-article-measure); display: flex; flex-direction: column; gap: var(--vzn-space-5); font: var(--vzn-article-body); }
@media (max-width: 639px) { .article { font: 400 17px/28px var(--vzn-font-sans); } }
.article h1 { font: var(--vzn-article-title); letter-spacing: -0.025em; text-wrap: balance; }
.article .dek { font: var(--vzn-article-dek); color: var(--vzn-text-soft); }
@media (max-width: 639px) { .article .dek { font-size: 19px; line-height: 30px; } }
.article .byline { font: 400 14px/20px var(--vzn-font-sans); color: var(--vzn-muted); }
.article .divider { height: 1px; background: var(--vzn-line); margin: var(--vzn-space-2) 0; border: 0; }
.article h2 { font: var(--vzn-article-h2); letter-spacing: -0.3px; margin-top: var(--vzn-space-4); }
.article h3 { font: 700 22px/30px var(--vzn-font-sans); margin-top: var(--vzn-space-2); }
.article ul, .article ol { padding-left: var(--vzn-space-5); display: flex; flex-direction: column; gap: var(--vzn-space-2); }
.article a:not(.btn) { color: var(--vzn-gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article code { font: 400 16px/1 var(--vzn-font-mono); background: var(--vzn-surface-alt); padding: 2px 6px; border-radius: 4px; }
.article pre { font: 400 14px/22px var(--vzn-font-mono); background: var(--vzn-surface-alt); border-radius: var(--vzn-radius-md); padding: var(--vzn-space-4); overflow-x: auto; }
.article pre code { background: none; padding: 0; font-size: inherit; line-height: inherit; }
.pull { margin: var(--vzn-space-4) 0; display: flex; flex-direction: column; gap: var(--vzn-space-3); }
.pull::before { content: ""; width: 64px; height: 2px; background: var(--vzn-gold-fill); }
.pull blockquote { font: var(--vzn-article-quote); letter-spacing: -0.01em; }
@media (max-width: 639px) { .pull blockquote { font-size: 24px; line-height: 33px; } }
.article figure.media { display: flex; flex-direction: column; gap: 10px; margin-top: var(--vzn-space-4); }
.article figure.media img, .article figure.media .ph { border-radius: var(--vzn-radius-md); border: 1px solid var(--vzn-line); }
.article figure.media .ph { height: 280px; background: var(--vzn-surface-alt); display: flex; align-items: center; justify-content: center; padding: var(--vzn-space-4); text-align: center; color: var(--vzn-text-soft); font: 400 15px/22px var(--vzn-font-sans); }
.article figcaption { font: var(--vzn-article-caption); color: var(--vzn-muted); }
.article-end { margin-top: var(--vzn-space-5); padding-top: var(--vzn-space-5); border-top: 1px solid var(--vzn-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--vzn-space-4); }
.article-end span { font: 400 17px/26px var(--vzn-font-sans); color: var(--vzn-text-soft); }
.article-aside {
  flex: 1 1 280px; min-width: 0; background: var(--vzn-surface); border: 1px solid var(--vzn-line); border-radius: var(--vzn-radius-md);
  padding: 20px; display: flex; flex-direction: column; gap: var(--vzn-space-2);
}
.article-aside .vzn-label { margin-bottom: var(--vzn-space-2); }
.article-aside ul { list-style: none; margin: 0; padding: 0; }
.article-aside li + li { border-top: 1px solid var(--vzn-line); }
.article-aside a { display: flex; flex-direction: column; gap: 2px; padding: var(--vzn-space-3) 0; min-height: 44px; text-decoration: none; color: var(--vzn-text); border-radius: var(--vzn-radius-sm); }
.article-aside a .t { font: 700 15px/22px var(--vzn-font-sans); }
.article-aside a .m { font: 400 13px/18px var(--vzn-font-sans); color: var(--vzn-muted); }
.article-aside a:hover .t, .article-aside a:focus-visible .t { text-decoration: underline; text-underline-offset: 3px; }

/* theme cross-fade (spec 05: 200 ms, whole screen) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--vzn-dur-base); animation-timing-function: var(--vzn-ease); }