/* ==========================================================================
   BOALD — Base: reset, document defaults, Client-First structure, type
   ========================================================================== */

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
}
/* Lenis owns smooth scrolling; native smooth only as reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: style weight;
}

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

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

a { color: var(--c-sand-deep); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-strong); }

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

::selection { background: var(--c-sand); color: var(--c-ink); }

/* ==========================================================================
   Client-First structure
   page-wrapper › main-wrapper › section_* › padding-global › container-large
   ========================================================================== */
.page-wrapper { overflow: clip; }
/* Fixed full-screen background layer — crossfades color in place so no
   section edge scrolls during the dark→light transition */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #f5f5f5;
  pointer-events: none;
}
.main-wrapper { position: relative; z-index: 1; }

/* Every section is a full-width band that owns its own theme (data-theme="light|dark").
   Without the script, each section paints its own background. With it, motion.js adds
   html.js-theme and the fixed .page-bg crossfades between section themes instead. */
.section {
  position: relative;
  background-color: var(--bg);
  color: var(--text-body);
}
html.js-theme .main-wrapper > .section { background-color: transparent; }
/* data-theme-edge="hard": the section keeps its own background, so its top edge is a hard line, not a crossfade */
html.js-theme .main-wrapper > .section[data-theme-edge="hard"] { background-color: var(--bg); }

/* The one content width (CEO, 2026-10-12): every content section's column is the gutter plus the column inset,
   so all sections share the same left and right edge (1131px at 1440, 1280px at 1728, stops at 1472px).
   No section sets another width. The navbar and footer override it with the edge gutter in chrome.css */
.padding-global {
  padding-inline: calc(var(--page-gutter) + var(--inset-extra));
}
/* Lift section content above the global .bg-lines hairlines (z1) */
.section > .padding-global { position: relative; z-index: 2; }

/* Vertical section rhythm */
.padding-section-large  { padding-block: var(--section-pad-block); }
.padding-section-medium { padding-block: clamp(4rem, 10vw, 9rem); }
.padding-section-small  { padding-block: clamp(2.5rem, 6vw, 5rem); }

/* Centered content columns */
.container-large {
  width: 100%;
  max-width: var(--container-large);
  margin-inline: auto;
}
.container-text {
  width: 100%;
  max-width: var(--container-text);
  margin-inline: auto;
}

/* Spacing utilities (Client-First) */
.margin-bottom.margin-xsmall  { margin-bottom: var(--sp-sm); }
.margin-bottom.margin-small   { margin-bottom: var(--sp-md); }
.margin-bottom.margin-medium  { margin-bottom: var(--sp-xl); }
.margin-bottom.margin-large   { margin-bottom: var(--sp-3xl); }

/* ==========================================================================
   Typography utilities
   ========================================================================== */
.text-display-xl,
.text-display-lg {
  font-weight: 500;
  line-height: var(--lh-ghost);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.text-display-xl { font-size: var(--fs-display-xl); }
.text-display-lg { font-size: var(--fs-display-lg); }

.text-h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
.text-h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
.text-h3-feature {
  font-size: var(--fs-h3-feature);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
.text-h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
.text-lead {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-tight);
  color: var(--text-body);
  text-wrap: pretty;
}
.text-quote {
  font-size: var(--fs-quote);
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  text-wrap: pretty;
}
.text-body-lg {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--text-body);
  text-wrap: pretty;
}
.text-body {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--text-body);
  text-wrap: pretty;
}
.text-body.is-italic { font-style: italic; }
/* running text never runs longer than a comfortable line (--measure, about 70 characters) */
.text-lead, .text-body-lg, .text-body, .text-caption { max-width: var(--measure); }
.text-lead { max-width: var(--measure-lead); }

.text-stat {
  font-size: var(--fs-stat);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--text-strong);
}

/* Tracked mono eyebrow */
.text-eyebrow {
  display: inline-block;
  font-family: var(--font-mono); font-variation-settings: "MONO" var(--mono-axis);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow-color);
}

.text-caption {
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.42;
  color: var(--text-muted);
}

/* colour helpers — text colour always comes from the section theme */
.is-muted  { color: var(--text-muted); }
.is-strong { color: var(--text-strong); }

/* a heading for screen readers and search engines where the design shows only an eyebrow */
.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; }

/* visible [NEEDS] marker for facts still owed — must never ship */
.needs { background: #fff3b0; color: #202020; font-family: var(--font-mono); font-variation-settings: "MONO" var(--mono-axis); font-size: 0.8em; padding: 0.1em 0.35em; border-radius: 4px; }

/* Multi-paragraph body blocks keep readable spacing */
.prose > * + * { margin-top: 1em; }

/* ==========================================================================
   Global background overlays — film grain + three vertical lines
   ========================================================================== */
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
.bg-lines {
  position: fixed;
  inset: 0;
  /* lives inside .main-wrapper: above section backgrounds (z-auto), below
     lifted section content (z2) so foreground objects pass over the lines */
  z-index: 1;
  pointer-events: none;
}
.bg-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  /* dark bands: whisper-subtle cream */
  background: rgba(247,247,242,0.05);
  transition: background 0.5s ease;
}
/* light bands: ink at an alpha that actually reads on white */
body.on-light .bg-lines span { background: rgba(30,28,29,0.045); }
.bg-lines span:nth-child(1) { left: 25%; }
.bg-lines span:nth-child(2) { left: 50%; }
.bg-lines span:nth-child(3) { left: 75%; }