/* VEXOFORM web components. Plain HTML and CSS, so the Ghost theme and the platform can share
   them. Load after tokens.css. Every value comes from a token; only motion lives here. */
:root {
  --motion-fast: .18s ease;
}
@media (max-width: 640px) {
  :root { --text-display: 36px; --text-h1: 32px; --text-h2: 26px; }
}

/* Base: opt in with class="vx-base" on <body>, so frameworks keep their own reset. */
.vx-base {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.vx-base *, .vx-base *::before, .vx-base *::after { box-sizing: border-box; }
.vx-base :where(h1, h2, h3, h4) {
  font-family: var(--font-display); color: inherit; margin: 0; text-wrap: balance;
}
.vx-base :where(h1) { font-size: var(--text-h1); line-height: 1.2; font-weight: 700; }
.vx-base :where(h2) { font-size: var(--text-h2); line-height: 1.27; font-weight: 700; }
.vx-base :where(h3) { font-size: var(--text-h3); line-height: 1.36; font-weight: 600; }
.vx-base :where(h4) { font-size: var(--text-h4); line-height: 1.44; font-weight: 600; }
.vx-base :where(a) { color: var(--link); }
.vx-base :where(a:hover) { color: var(--link-hover); }
.vx-base :where(img) { max-width: 100%; height: auto; display: block; }

/* Focus: one ring everywhere. .vx-on-dark swaps its colour. */
.vx-base :focus-visible, .vx-btn:focus-visible, .vx-input:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.vx-on-dark { --focus: var(--focus-on-dark); color: var(--on-dark); }

/* Layout */
.vx-container {
  width: 100%; max-width: calc(var(--container-max) + 2 * var(--space-6));
  margin-inline: auto; padding-inline: var(--space-6);
}
.vx-band { padding-block: var(--space-24); }
.vx-band--canvas { background: var(--canvas); }
.vx-band--dark { background: var(--anthrazit-core); }
.vx-band--dark a:not(.vx-btn) { color: var(--on-dark); }
@media (max-width: 640px) {
  .vx-container { padding-inline: var(--space-4); }
  .vx-band { padding-block: var(--space-12); }
}
/* The construction grid from the styleguide's blueprint look. Behind media, never behind text. */
.vx-grid {
  background-color: var(--surface);
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--space-6) var(--space-6);
}

/* Small type */
.vx-display {
  font-family: var(--font-display); font-size: var(--text-display); line-height: 1.07;
  font-weight: 700; letter-spacing: -.01em; margin: 0; text-wrap: balance;
}
.vx-lead { font-size: var(--text-lead); line-height: 1.6; color: var(--muted); margin: 0; }
.vx-on-dark .vx-lead { color: var(--on-dark-muted); }
.vx-eyebrow {
  font-family: var(--font-display); font-size: var(--text-eyebrow); font-weight: 600; line-height: 1.45;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.vx-on-dark .vx-eyebrow { color: var(--on-dark-muted); }
.vx-claim { font-family: var(--font-display); font-weight: 500; color: inherit; }
.vx-meta { font-size: var(--text-small); line-height: 1.43; color: var(--muted); }
.vx-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Button */
.vx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px var(--space-5);
  border: 1px solid var(--action); border-radius: var(--radius-md);
  background: var(--action); color: var(--on-action);
  font-family: var(--font-body); font-size: var(--text-body); font-weight: 500; line-height: 1.25;
  text-decoration: none; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast);
}
.vx-btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--on-action); }
.vx-btn--secondary { background: transparent; border-color: var(--control); color: var(--action); }
.vx-btn--secondary:hover { background: var(--canvas); border-color: var(--action); color: var(--action-hover); }
.vx-btn--quiet { background: transparent; border-color: transparent; color: var(--action); }
.vx-btn--quiet:hover { background: var(--canvas); border-color: transparent; color: var(--action-hover); }
.vx-btn--sm { min-height: 36px; padding: 6px var(--space-3); font-size: var(--text-small); }
.vx-btn[disabled], .vx-btn[aria-disabled="true"] {
  background: var(--sunken); border-color: var(--line); color: var(--muted); cursor: not-allowed;
}
.vx-on-dark .vx-btn { background: var(--on-dark); border-color: var(--on-dark); color: var(--anthrazit-core); }
.vx-on-dark .vx-btn:hover { background: var(--steel-gray); border-color: var(--steel-gray); color: var(--anthrazit-core); }
.vx-on-dark .vx-btn--secondary, .vx-on-dark .vx-btn--quiet { background: transparent; color: var(--on-dark); }
.vx-on-dark .vx-btn--secondary { border-color: var(--on-dark-muted); }
.vx-on-dark .vx-btn--quiet { border-color: transparent; }
.vx-on-dark .vx-btn--secondary:hover, .vx-on-dark .vx-btn--quiet:hover {
  background: rgba(255, 255, 255, .1); color: var(--on-dark);
}

/* Form field */
.vx-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vx-label { font-size: var(--text-small); line-height: 1.43; font-weight: 500; color: var(--ink); }
.vx-input {
  width: 100%; min-height: 44px; padding: 10px var(--space-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--control); border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-body);
}
.vx-input::placeholder { color: var(--muted); opacity: 1; }
.vx-input:hover { border-color: var(--muted); }
.vx-input[aria-invalid="true"] { border-color: var(--danger); }
.vx-input[disabled] { background: var(--sunken); color: var(--muted); cursor: not-allowed; }
textarea.vx-input { min-height: 120px; resize: vertical; }
.vx-help { font-size: var(--text-caption); line-height: 1.33; color: var(--muted); margin: 0; }
.vx-error { font-size: var(--text-caption); line-height: 1.33; color: var(--danger); font-weight: 500; margin: 0; }
.vx-form-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.vx-form-row > .vx-field { flex: 1 1 220px; }

/* Card. Make the whole card clickable with .vx-card-link on the title's link. */
.vx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-5); }
.vx-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-fast), transform var(--motion-fast);
}
.vx-card:has(.vx-card-link):hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.vx-card-media { aspect-ratio: 3 / 2; background-color: var(--sunken); border-bottom: 1px solid var(--line); }
.vx-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-card-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.vx-card-title {
  font-family: var(--font-display); font-size: var(--text-h4); line-height: 1.44; font-weight: 600;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.vx-card-link { color: inherit; text-decoration: none; }
.vx-card-link:hover { color: var(--link-hover); }
.vx-card-link::after { content: ""; position: absolute; inset: 0; }
.vx-card-text { font-size: var(--text-small); line-height: 1.43; color: var(--muted); margin: 0; }
.vx-card-foot { margin-top: auto; padding-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; }

/* Chip */
.vx-chip {
  display: inline-flex; align-items: center; padding: 2px 9px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--text-caption); line-height: 1.33; letter-spacing: .04em; color: var(--muted); text-decoration: none;
}
a.vx-chip:hover { border-color: var(--control); color: var(--ink); }

/* Alert. Always opens with a word that names the status. */
.vx-alert {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--info-tint); border-radius: var(--radius-md);
  font-size: var(--text-small); line-height: 1.43; color: var(--ink);
}
.vx-alert-label { font-weight: 600; color: var(--link); }
.vx-alert--danger { background: var(--danger-tint); }
.vx-alert--danger .vx-alert-label { color: var(--danger); }
.vx-alert--warning { background: var(--warning-tint); }
.vx-alert--warning .vx-alert-label { color: var(--warning); }
.vx-alert--success { background: var(--success-tint); }
.vx-alert--success .vx-alert-label { color: var(--success); }

/* Header, shared by the site and the platform. Below 700px the nav folds into .vx-menu. */
.vx-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.vx-header-inner {
  display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-height);
  width: 100%; max-width: calc(var(--container-max) + 2 * var(--space-6)); margin-inline: auto; padding-inline: var(--space-6);
}
.vx-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; flex: 0 0 auto; }
.vx-brand:hover { color: var(--ink); }
.vx-brand svg { height: 32px; width: auto; display: block; }
.vx-wordmark { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 700; letter-spacing: .1em; line-height: 1; }
.vx-nav { display: flex; align-items: center; gap: var(--space-1); }
.vx-nav ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.vx-nav a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-small); font-weight: 500; line-height: 1.43; color: var(--ink); text-decoration: none;
}
.vx-nav a:hover { background: var(--canvas); color: var(--ink); }
.vx-nav a[aria-current="page"], .vx-nav .nav-current a { color: var(--link); text-decoration: underline; text-underline-offset: 4px; }
.vx-header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.vx-menu { display: none; position: relative; }
.vx-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md); color: var(--ink);
}
.vx-menu > summary::-webkit-details-marker { display: none; }
.vx-menu > summary:hover { background: var(--canvas); }
.vx-menu-panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 20; min-width: 220px; padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-menu);
}
.vx-menu-panel .vx-nav, .vx-menu-panel .vx-nav ul { flex-direction: column; align-items: stretch; }
.vx-menu-panel .vx-btn { width: 100%; margin-top: var(--space-2); }
@media (max-width: 700px) {
  .vx-header-inner { padding-inline: var(--space-4); }
  .vx-header-inner > .vx-nav, .vx-header-actions { display: none; }
  .vx-menu { display: block; margin-left: auto; }
}

/* Footer: always the dark band, with the reversed logo. */
.vx-footer { background: var(--anthrazit-core); border-top: 1px solid rgba(255, 255, 255, .2); padding-block: var(--space-16) var(--space-8); }
.vx-footer-top { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: space-between; align-items: flex-start; }
.vx-footer-logo { width: 220px; max-width: 100%; height: auto; display: block; }
.vx-footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.vx-footer-nav ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.vx-footer a { color: var(--on-dark); font-size: var(--text-small); text-decoration: none; }
.vx-footer a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }
.vx-footer-base {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: space-between;
  margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: var(--text-caption); line-height: 1.33; color: var(--on-dark-muted);
}

/* Prose: long-form article content, including the classes Ghost's editor emits. */
.vx-prose { font-size: var(--text-prose); line-height: 1.67; color: var(--ink); max-width: var(--prose-max); margin-inline: auto; overflow-wrap: break-word; }
.vx-prose > * { margin-block: 0; }
.vx-prose > * + * { margin-top: var(--space-5); }
.vx-prose > * + h2 { margin-top: var(--space-12); }
.vx-prose > * + h3 { margin-top: var(--space-10); }
.vx-prose > * + h4 { margin-top: var(--space-8); }
.vx-prose h2, .vx-prose h3, .vx-prose h4 { font-family: var(--font-display); text-wrap: balance; }
.vx-prose h2 { font-size: var(--text-h2); line-height: 1.27; font-weight: 700; }
.vx-prose h3 { font-size: var(--text-h3); line-height: 1.36; font-weight: 600; }
.vx-prose h4 { font-size: var(--text-h4); line-height: 1.44; font-weight: 600; }
.vx-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.vx-prose a:hover { color: var(--link-hover); }
.vx-prose strong { font-weight: 600; }
.vx-prose ul, .vx-prose ol { padding-left: var(--space-6); }
.vx-prose li + li { margin-top: var(--space-2); }
.vx-prose blockquote {
  margin-inline: 0; padding-block: var(--space-5); border-block: 1px solid var(--line-strong);
  font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.45; font-weight: 500;
}
.vx-prose hr { border: 0; border-top: 1px solid var(--line-strong); margin-block: var(--space-12); }
.vx-prose code { font-family: var(--font-mono); font-size: .85em; background: var(--sunken); padding: .1em .35em; border-radius: var(--radius-sm); }
.vx-prose pre {
  background: var(--anthrazit-core); color: var(--on-dark); padding: var(--space-4); border-radius: var(--radius-md);
  overflow-x: auto; font-size: var(--text-small); line-height: 1.6;
}
.vx-prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.vx-prose img { max-width: 100%; height: auto; display: block; }
.vx-prose figure { margin-inline: 0; }
.vx-prose figcaption { margin-top: var(--space-2); font-size: var(--text-caption); line-height: 1.33; color: var(--muted); text-align: left; }
.vx-table-wrap { overflow-x: auto; }
.vx-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: 1.43; font-variant-numeric: tabular-nums; }
.vx-prose th { background: var(--line-strong); text-align: left; font-weight: 600; }
.vx-prose th, .vx-prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.vx-prose .kg-width-wide { width: min(90vw, var(--container-max)); max-width: none; margin-inline: calc(50% - min(45vw, calc(var(--container-max) / 2))); }
.vx-prose .kg-width-full { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.vx-prose .kg-width-wide img, .vx-prose .kg-width-full img { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .vx-card, .vx-btn { transition: none; }
  .vx-card:has(.vx-card-link):hover { transform: none; }
}