/*
 * Shared primitives of the subpages (src/site/): the homepage's editorial voice (Editorial headings, eyebrow
 * with a coral rule, white cards with a hairline ring, ink pills) rebuilt on the design tokens only, so pages
 * do not depend on any variant's scoped CSS. Components add their own scoped styles on top.
 */
.site-main {
  --s-section: clamp(56px, 8vw, 112px);
  --s-display: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);
  --s-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --s-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --s-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  /* The homepage's header is fixed over the page (variant B sets its height on :root). */
  --s-header: var(--vb-header-h, 72px);
}

.s-container {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
}

.s-section { padding-block: var(--s-section); }
.s-section + .s-section { padding-block-start: 0; }
/* A page's first block starts under the fixed header, as the homepage hero does. */
.s-page-head { padding-block-start: calc(var(--s-header) + clamp(24px, 4vw, 56px)); }

.s-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
}
.s-eyebrow::before {
  content: '';
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-coral-strong);
}

.s-display {
  font-size: var(--s-display);
  font-weight: 740;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.s-h2 {
  font-size: var(--s-h2);
  font-weight: 740;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.s-h3 {
  font-size: var(--s-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-heading);
}
.s-lead {
  font-size: var(--s-lead);
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
}
.s-prose { line-height: 1.7; color: var(--color-ink-soft); text-wrap: pretty; }
.s-prose p + p { margin-top: var(--space-4); }
.s-accent { color: var(--color-coral-text); }

.s-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-card);
}

.s-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.s-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--ring-line);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
  text-decoration: none;
}
.s-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-coral-strong);
}
a.s-chip { transition: box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
a.s-chip:hover { color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink-25); }

.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.s-btn--ink { background: var(--color-ink); color: var(--color-surface); }
.s-btn--ink:hover { background: var(--color-ink-soft); }
.s-btn--line { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--ring-line); }
.s-btn--line:hover { box-shadow: 0 0 0 1px var(--color-ink-25); }
.s-btn:active { transform: translateY(1px); }

.s-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-coral-text);
  text-decoration: none;
}
.s-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.s-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); list-style: none; padding: 0; }
.s-crumbs li + li::before { content: '/'; margin-inline-end: var(--space-2); color: var(--color-line); }
.s-crumbs a { color: inherit; text-decoration: none; }
.s-crumbs a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Markdown bodies (blog posts, legal pages): one reading column, the site's type. */
.s-article { font-size: var(--text-lg); line-height: 1.75; color: var(--color-ink-soft); }
.s-article > * + * { margin-top: var(--space-5); }
.s-article h2 {
  margin-top: var(--space-12);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  font-weight: 740;
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}
.s-article h3 {
  margin-top: var(--space-8);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
}
.s-article h2 + *, .s-article h3 + * { margin-top: var(--space-3); }
.s-article strong { font-weight: 700; color: var(--color-ink); }
.s-article a { color: var(--color-coral-text); text-underline-offset: 0.2em; }
.s-article ul, .s-article ol { display: grid; gap: var(--space-2); padding-inline-start: 1.25em; }
.s-article ul li::marker { color: var(--color-coral-strong); }
.s-article img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--elevation-card); }
.s-article blockquote { padding-inline-start: var(--space-6); border-inline-start: 2px solid var(--color-coral); color: var(--color-ink); }
.s-article ol li::marker { font-weight: 700; color: var(--color-coral-text); }
/* Tables (guides, comparisons): ruled rows; on phones the table scrolls sideways instead of squeezing. */
.s-article table { width: 100%; border-collapse: collapse; font-size: var(--text-base); line-height: 1.5; }
.s-article th, .s-article td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); text-align: start; vertical-align: top; }
.s-article th { font-weight: 700; color: var(--color-ink); border-bottom-width: 2px; }
.s-article td:first-child { font-weight: 600; color: var(--color-ink); }
@media (max-width: 639px) { .s-article table { display: block; overflow-x: auto; } }