/* ==========================================================================
   Base — reset, typography, layout primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-text);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "calt";
  transition: background-color var(--t-3) var(--ease-out), color var(--t-3) var(--ease-out);
}

h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input, textarea {
  border: 0;
  background: none;
  outline: none;
  min-width: 0;
}

/* Placeholders are words, so they use a text colour (4.5:1), not the fainter mark colour. */
input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--line);
}

::selection {
  background: color-mix(in srgb, var(--accent-vivid) 26%, transparent);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible {
  outline: none;
}

[hidden] {
  display: none !important;
}

/* ── Typography ─────────────────────────────────────────────────────────── */

.t-display {
  font: 600 clamp(44px, 7.4vw, 92px) / 1.02 var(--font-display);
  letter-spacing: -0.038em;
}

.t-title-1 {
  font: 600 clamp(34px, 4.6vw, 56px) / 1.06 var(--font-display);
  letter-spacing: -0.032em;
}

.t-title-2 {
  font: 600 clamp(26px, 3vw, 36px) / 1.12 var(--font-display);
  letter-spacing: -0.026em;
}

.t-title-3 {
  font: 600 22px/1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.t-headline {
  font: 600 17px/1.35 var(--font-text);
  letter-spacing: -0.014em;
}

.t-lead {
  font: 400 clamp(18px, 1.7vw, 22px) / 1.42 var(--font-text);
  letter-spacing: -0.014em;
  color: var(--ink-2);
}

.t-body {
  font: 400 16px/1.5 var(--font-text);
}

.t-callout {
  font: 400 15px/1.47 var(--font-text);
}

.t-sub {
  font: 400 14px/1.43 var(--font-text);
}

.t-caption {
  font: 400 13px/1.38 var(--font-text);
  letter-spacing: -0.002em;
}

.t-micro {
  font: 500 12px/1.33 var(--font-text);
  letter-spacing: 0.004em;
}

.t-eyebrow {
  font: 600 14px/1.3 var(--font-text);
  letter-spacing: -0.006em;
  color: var(--ink-3);
}

.c-2 { color: var(--ink-2); }
.c-3 { color: var(--ink-3); }
.c-4 { color: var(--ink-4); }
.c-accent { color: var(--accent); }
.c-warn { color: var(--warn); }
.c-danger { color: var(--danger); }
.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strike {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--ink-3);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { --content: 760px; }
.container--mid { --content: 980px; }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row--top { align-items: flex-start; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1 1 0; min-width: 0; }
.center { text-align: center; }

.g-1 { gap: 4px; }
.g-2 { gap: 8px; }
.g-3 { gap: 12px; }
.g-4 { gap: 16px; }
.g-5 { gap: 20px; }
.g-6 { gap: 24px; }
.g-8 { gap: 32px; }
.g-10 { gap: 40px; }
.g-12 { gap: 48px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font: 500 14px/1 var(--font-text);
  transform: translateY(-64px);
  transition: transform var(--t-2) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
}

[data-reveal].is-in {
  opacity: 1;
  animation: reveal-in var(--t-5) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* ── View transitions ───────────────────────────────────────────────────── */

@view-transition {
  navigation: none;
}

::view-transition-old(root) {
  animation: vt-out 160ms var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: vt-in 320ms var(--ease-out) both;
}

::view-transition-group(hero-art) {
  animation-duration: 440ms;
  animation-timing-function: var(--ease-sheet);
}

::view-transition-old(hero-art),
::view-transition-new(hero-art) {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@keyframes vt-out {
  to { opacity: 0; }
}

@keyframes vt-in {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal] {
    opacity: 1;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Server-rendered copy of a public page: what visitors without JavaScript (and simple crawlers) read. */
.prerender { max-width: 720px; margin: 0 auto; padding: var(--s-12) var(--gutter); }
.prerender img { max-width: 100%; height: auto; border-radius: var(--r-lg); }
.prerender ul { padding-left: 1.2em; }
.prerender li { margin: 6px 0; }
html.js .prerender { display: none; }