/* ============================================================================
   BASE — reset, canvas, typography, atmosphere, utilities
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  overflow-x: clip;
  min-height: 100svh;
  position: relative;
}

/* Lock scroll while a drawer or modal owns the screen. */
body[data-scroll-locked] { overflow: hidden; }

img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

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

::selection { background: var(--sage-300); color: var(--ink); }

/* ---------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------*/

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 90;
  text-wrap: balance;
}

.display-1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.display-2 { font-size: var(--t-h2); line-height: var(--lh-snug);  letter-spacing: var(--tr-snug); }
.display-3 { font-size: var(--t-h3); line-height: var(--lh-snug);  letter-spacing: var(--tr-snug); }
.display-4 { font-size: var(--t-h4); line-height: 1.24;            letter-spacing: var(--tr-snug); }
.display-mega {
  font-size: var(--t-mega);
  line-height: 0.86;
  letter-spacing: -0.045em;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 144;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.008em;
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose { max-width: var(--measure); text-wrap: pretty; }
.prose-sm { max-width: var(--measure-sm); text-wrap: pretty; }

/* The mono eyebrow. Used for every section index, spec label and datum —
   it is the site's "field notes" voice against the display serif. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .5;
  flex: none;
}
.eyebrow--bare::before { display: none; }

.caption {
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--ink-3);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Ink-weight helpers */
.tone-ink   { color: var(--ink); }
.tone-mute  { color: var(--ink-3); }
.tone-faint { color: var(--ink-4); }

/* An italic, slightly wonky emphasis — the botanical flourish in running text */
.flourish {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100;
  color: var(--sage-700);
}

/* Gradient sunlight text, used once per page at most */
.sunlit {
  background: linear-gradient(96deg, var(--sage-700) 0%, var(--sage-500) 32%, var(--ribbon-harvest) 68%, var(--terracotta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------*/

.shell      { width: var(--shell); margin-inline: auto; }

.section { position: relative; padding-block: var(--section-y); }
.section--tall { padding-block: var(--section-y-lg); }
.section--flush-top { padding-block-start: 0; }

/* Banded surfaces. Kept as modifiers on .section so specificity stays flat. */
.section--mist  { background: var(--mist); }
.section--paper-warm { background: var(--paper-warm); }
.section--oat   { background: linear-gradient(180deg, var(--oat-soft), var(--oat)); }

/* Soft organic seam between bands instead of a hard edge */
.seam {
  position: absolute; left: 0; right: 0; height: 90px;
  pointer-events: none; z-index: 1;
}
.seam--top    { top: -1px; }
.seam--bottom { bottom: -1px; transform: scaleY(-1); }
.seam svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------------------
   Atmosphere: grain, aurora, botanical fields
   -------------------------------------------------------------------------*/

/* Page-wide paper grain. Fixed so it reads as the surface, not the content. */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 3;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='220' height='220' filter='url(%23n)' opacity='.5'/></svg>");
  animation: grain-drift 8s steps(6) infinite;
}
@keyframes grain-drift {
  0%,100% { transform: translate(0,0); }
  16%  { transform: translate(-2%, 1%); }
  33%  { transform: translate(1%, -2%); }
  50%  { transform: translate(-1%, 2%); }
  66%  { transform: translate(2%, 1%); }
  83%  { transform: translate(-2%, -1%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* Aurora / mesh gradient field — drifting sunlight through mist. */
.aurora {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.aurora__blob--a {
  width: 46vw; height: 46vw; left: -12vw; top: -14vw;
  background: radial-gradient(circle at 40% 40%, var(--sage-300), transparent 68%);
  animation: drift-a 26s var(--e-inout) infinite alternate;
}
.aurora__blob--b {
  width: 40vw; height: 40vw; right: -10vw; top: 6vw;
  background: radial-gradient(circle at 60% 40%, #F6E3BE, transparent 68%);
  animation: drift-b 32s var(--e-inout) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(9vw, 6vw, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-8vw, 9vw, 0) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .aurora__blob { animation: none; } }

/* Faint hairline grid — the "surveyor's field", anchors the airy layout. */
.field-lines {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .8;
}

/* ---------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------*/

:focus-visible {
  outline: 2px solid var(--sage-600);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed;
  top: var(--s-4); left: var(--s-4);
  z-index: 1000;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--d-base) var(--e-spring);
}
.skip-link:focus-visible { transform: translateY(0); }

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

/* ---------------------------------------------------------------------------
   Scroll-reveal primitives (driven by IntersectionObserver in main.js)
   -------------------------------------------------------------------------*/

[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--d-lazy) var(--e-out),
    transform var(--d-lazy) var(--e-out),
    filter var(--d-lazy) var(--e-out),
    clip-path var(--d-lazy) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translate3d(0, 34px, 0); }
[data-reveal="down"]  { transform: translate3d(0, -26px, 0); }
[data-reveal="left"]  { transform: translate3d(38px, 0, 0); }
[data-reveal="right"] { transform: translate3d(-38px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="blur"]  { filter: blur(12px); transform: translate3d(0, 16px, 0); }
[data-reveal="mask"]  { clip-path: inset(0 0 100% 0); transform: translate3d(0, 20px, 0); }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; filter: none; clip-path: none; }
}

/* Word-by-word display reveal (spans injected by main.js) */
.split-line { display: block; overflow: hidden; padding-block: 0.06em; }
.split-word {
  display: inline-block;
  transform: translate3d(0, 108%, 0) rotate(3deg);
  opacity: 0;
  transition:
    transform 1.05s var(--e-out),
    opacity .7s var(--e-out);
  transition-delay: var(--word-delay, 0ms);
}
.is-split-in .split-word { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .split-word { transform: none; opacity: 1; }
}