/* Shared by every page: tokens, base type, load/scroll motion. */
:root {
  --paper: #eeeeec;
  --ink: #111112;
  --ink-2: #5d5d61;
  --line: #cfcfcc;
  --surface: #e4e4e1;
  --accent: #2337e6;
  --photo-blend: multiply;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --gap: clamp(16px, 2vw, 28px);
  --max: 1320px;
  /* Side margin: roomier on phones and tablets, 40px from mid-size up */
  --gutter: clamp(24px, 6vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f0f10; --ink: #ececea; --ink-2: #9a9a9e; --line: #2a2a2d; --surface: #1a1a1c; --accent: #8f9bff;
    --photo-blend: normal; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f0f10; --ink: #ececea; --ink-2: #9a9a9e; --line: #2a2a2d; --surface: #1a1a1c; --accent: #8f9bff;
  --photo-blend: normal; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--paper); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.wrap { max-width: var(--max); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.label {
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.top {
  padding-block: clamp(20px, 3vw, 36px) 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.top a { transition: color .3s var(--ease); }
.top a:hover { color: var(--ink); }

/* Scroll progress hairline */
.progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: calc(2px + env(safe-area-inset-top, 0px));
  border-top: env(safe-area-inset-top, 0px) solid var(--paper);
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Split headline: each word or letter rises out of its own mask */
.split .m { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.split .m > span { display: inline-block; }

.fineprint { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@keyframes rise   { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes draw   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes figIn {
  from { clip-path: inset(18% 6% 18% 6% round 2px); opacity: .2; }
  to   { clip-path: inset(0 0 0 0 round 2px); opacity: 1; }
}
@keyframes zoomOut { from { transform: scale(1.12); } to { transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  .top { animation: fade .9s var(--ease) .1s both; }
  .split .m > span { animation: rise 1.1s var(--ease) both; animation-delay: calc(.15s + var(--i) * 70ms); }
  .load { animation: fadeUp 1s var(--ease) both; animation-delay: calc(.6s + var(--i, 0) * 120ms); }

  @supports (animation-timeline: view()) {
    .progress { animation: draw linear both; animation-timeline: scroll(root); }
    .reveal { animation: fadeUp linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .reveal.row { animation-name: rowIn; }
    .reveal.fig { animation-name: figIn; animation-range: entry 0% cover 40%; }
    .reveal.fig .media { animation: zoomOut linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
  /* Fallback for browsers without scroll timelines: motion.js toggles these */
  .reveal.is-pending { opacity: 0; transform: translateY(28px); }
  .reveal.is-shown   { transition: opacity 1s var(--ease), transform 1s var(--ease); }
}