/* ==========================================================================
   BASE - tokens, type scale, reset, layout, buttons, motion primitives
   4-point system: every size, space, radius, line height and duration is a
   multiple of 4. Tracking (em), opacity and easing curves are ratios, and
   hairlines stay 1px.
   ========================================================================== */

:root {
  /* Colour */
  --bg: #F6F5F1;
  --surface: #FFFFFF;
  --well: #ECEAE4;
  --well-2: #E3E1DA;
  --ink: #0F0F0F;
  --ink-2: #5A5954;
  --ink-3: #8C8B85;
  --line: rgba(15, 15, 15, 0.09);
  --line-2: rgba(15, 15, 15, 0.05);
  --accent: #2F54FF;
  --accent-2: #8C9CFF;
  --accent-soft: rgba(47, 84, 255, 0.1);
  --accent-deep: #1A329E;
  --accent-deep-2: #0F1D5C;
  --blue: var(--accent);
  --positive: #129C54;
  --danger: #DC4438;

  /* Dark sections */
  --deep: #0C0C0E;
  --deep-2: #151518;
  --deep-line: rgba(255, 255, 255, 0.09);
  --on-deep: #F5F4F0;
  --on-deep-2: rgba(245, 244, 240, 0.58);

  --shadow-s: 0 2px 4px rgba(15, 15, 15, 0.04), 0 4px 8px -4px rgba(15, 15, 15, 0.08);
  --shadow-m: 0 2px 4px rgba(15, 15, 15, 0.04), 0 12px 32px -12px rgba(15, 15, 15, 0.16);
  --shadow-l: 0 4px 8px rgba(15, 15, 15, 0.04), 0 24px 56px -24px rgba(15, 15, 15, 0.2), 0 64px 120px -64px rgba(15, 15, 15, 0.24);

  /* Radius */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --r-xl: 40px;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Besley", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 96px;  --lh-display: 96px;
  --fs-h1: 56px;       --lh-h1: 60px;
  --fs-h2: 36px;       --lh-h2: 44px;
  --fs-h3: 24px;       --lh-h3: 32px;
  --fs-lead: 20px;     --lh-lead: 32px;
  --fs-body: 16px;     --lh-body: 28px;
  --fs-small: 14px;    --lh-small: 24px;
  --fs-label: 14px;    --lh-label: 20px;
  --fs-micro: 12px;    --lh-micro: 16px;

  /* Motion */
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 480ms;
  --t-slower: 800ms;
  --t-slowest: 1200ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --gutter: 48px;
  --maxw: 1200px;
  --nav-h: 72px;
  --section: 160px;

  color-scheme: light;
}

@media (width < 1280px) {
  :root { --fs-display: 80px; --lh-display: 80px; }
}
@media (width < 1024px) {
  :root {
    --fs-display: 64px; --lh-display: 64px;
    --fs-h1: 44px;      --lh-h1: 48px;
    --fs-h2: 32px;      --lh-h2: 40px;
    --gutter: 32px;
    --section: 120px;
  }
}
@media (width < 640px) {
  :root {
    --fs-display: 48px; --lh-display: 52px;
    --fs-h1: 36px;      --lh-h1: 40px;
    --fs-h2: 28px;      --lh-h2: 36px;
    --fs-h3: 20px;      --lh-h3: 28px;
    --fs-lead: 20px;    --lh-lead: 28px;
    --gutter: 20px;
    --section: 96px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* clip, not hidden: hidden would make html a scroll container and fight Lenis.
   Without this, iOS lets the page pan sideways and spring back on a swipe. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; overscroll-behavior-x: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(47, 84, 255, 0.16); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 12px 16px; border-radius: 1000px;
  background: var(--ink); color: #fff; font-size: var(--fs-label);
  transform: translateY(-160%);
  transition: transform var(--t-base) var(--ease-out);
}
.skip-link:focus { transform: none; }

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

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

/* ---------- Type scale ---------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.044em; font-weight: 500; }
.t-h1      { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.036em; font-weight: 500; }
.t-h2      { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.028em; font-weight: 500; }
.t-h3      { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.02em; font-weight: 500; }
.t-lead    { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: -0.012em; }
.t-body    { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small   { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-label   { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 500; color: var(--ink-3); }
.t-micro   { font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-micro); letter-spacing: 0; color: var(--ink-3); }

.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* Serif accent: a sturdier optical size so it sits with Geist */
em.serif,
.t-display em,
.t-h1 em,
.t-h2 em,
.t-h3 em,
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* Masked lines for display type. The padding gives italic overhangs and
   descenders room, the negative margin keeps the layout unchanged. */
.line {
  display: block;
  overflow: clip;
  padding: 0 32px 32px;
  margin: 0 -32px -32px;
}
.line > span { display: block; }
.line.word { display: inline-block; vertical-align: top; }

/* 32px of overhang is wider than the page gutter on a phone, so the line box
   pokes past the viewport and gives iOS something to pan to. 16px sits inside
   the gutter and still clears the italic. */
@media (width < 768px) {
  .line { padding-inline: 16px; margin-inline: -16px; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 24px;
  border-radius: 1000px;
  font-size: var(--fs-body);
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition:
    scale var(--t-fast) var(--ease-out),
    background-color var(--t-base) ease,
    color var(--t-base) ease,
    box-shadow var(--t-base) ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { scale: 0.96; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--sm { --btn-h: 40px; padding: 0 16px; font-size: var(--fs-label); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #2A2A2A; }
  .btn--ghost:hover { background: var(--well); box-shadow: inset 0 0 0 1px transparent; }
}

.i-arrow { width: 16px; height: 16px; flex: none; transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a:hover > .i-arrow, button:hover > .i-arrow { transform: translateX(4px); }
  a:hover > .i-arrow--down { transform: translateY(4px); }
  a:hover > .i-arrow--ne { transform: translate(4px, -4px); }
}

/* Text roll on hover (labels are wrapped by core.js) */
.roll { position: relative; display: inline-flex; overflow: hidden; line-height: 20px; vertical-align: top; }
.roll > span { display: block; transition: translate 560ms var(--ease-out); }
.roll > span + span { position: absolute; left: 0; top: 0; translate: 0 120%; }
@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover > .roll > span:first-child { translate: 0 -120%; }
  :is(a, button):hover > .roll > span + span { translate: 0 0; }
}

/* Swappable icon pair (copy → check) */
.swap { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }
.swap svg { position: absolute; width: 16px; height: 16px; transition: opacity 200ms ease, scale 320ms var(--ease-out), filter 200ms ease; }
.swap .i-done { opacity: 0; scale: 0.5; filter: blur(4px); }
.is-copied .swap .i-copy { opacity: 0; scale: 0.5; filter: blur(4px); }
.is-copied .swap .i-done { opacity: 1; scale: 1; filter: none; }

/* Underline link */
.link { position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content; }
.link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 480ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* ---------- Motion primitives ---------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 960ms var(--ease-out), transform 960ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

.motion [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(12% 4% 0 4% round var(--r-l));
  transition: clip-path var(--t-slowest) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.motion [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0 round var(--r-l)); }

.motion [data-reveal="lines"] { opacity: 1; transform: none; }
.motion [data-reveal="lines"] .line > span {
  transform: translate3d(0, 120%, 0);
  transition: transform 1120ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion [data-reveal="lines"].is-in .line > span { transform: none; }

/* Page intro (first view per session, or after a page wipe) */
.motion .intro .line > span {
  animation: line-rise var(--t-slowest) var(--ease-out) both;
  animation-delay: calc(120ms + var(--i, 0) * 80ms);
}
.motion .intro [data-intro] {
  animation: fade-rise 1120ms var(--ease-out) both;
  animation-delay: calc(400ms + var(--i, 0) * 80ms);
}
.skip-intro .intro .line > span,
.skip-intro .intro [data-intro] { animation: none !important; }

@keyframes line-rise { from { transform: translate3d(0, 120%, 0); } }
@keyframes fade-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(8px); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 4ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .motion [data-reveal],
  .motion [data-reveal] .line > span { transform: none !important; clip-path: none !important; }
}