/* =========================================================
   Base — reset + element defaults
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote {
  margin: 0;
}

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

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

button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--c-blush);
  color: var(--c-paper);
}

/* ---------- Typography utilities ----------
   Botanica is a caps-only display face (per the style guide).
   All `.display-*` text is uppercased so lowercase characters
   don't fall back to the serif.

   Color inherits from the enclosing surface — Ink on Paper, Paper on Dark, etc.
   Do not hard-code a color here. */
.display,
.display-xl,
.display-l,
.display-m,
.display-s {
  font-family: var(--f-display);
  font-weight: 400;
  color: inherit;
  text-transform: uppercase;
}

.display      { line-height: var(--lh-tight); letter-spacing: 0.015em; }
.display-xl   { font-size: var(--t-display-xl); line-height: var(--lh-tight); letter-spacing: 0.012em; }
.display-l    { font-size: var(--t-display-l);  line-height: var(--lh-tight); letter-spacing: 0.014em; }
.display-m    { font-size: var(--t-display-m);  line-height: var(--lh-snug);  letter-spacing: 0.018em; }
.display-s    { font-size: var(--t-display-s);  line-height: var(--lh-snug);  letter-spacing: 0.02em;  }

.eyebrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.lede {
  font-size: var(--t-body-l);
  line-height: var(--lh-body);
  color: inherit;
}

/* Long-form narrative — used on About page story section and similar. */
.prose {
  font-size: var(--t-body-l);
  line-height: var(--lh-loose);
  color: var(--c-text);
  max-width: 62ch;
}
.prose p + p { margin-top: var(--s-5); }
.prose p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-size: 3.4em;
  line-height: 0.9;
  float: left;
  padding-right: var(--s-3);
  padding-top: 0.1em;
  color: var(--c-blush);
}
.surface-dark .prose p:first-of-type::first-letter,
.surface-ink .prose p:first-of-type::first-letter,
.surface-velvet .prose p:first-of-type::first-letter { color: var(--c-gold); }

.caption {
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}

/* Color helpers */
.t-ink     { color: var(--c-ink); }
.t-velvet  { color: var(--c-velvet); }
.t-blush   { color: var(--c-blush); }
.t-gold    { color: var(--c-gold); }
.t-paper   { color: var(--c-paper); }
.t-muted   { color: var(--c-text-muted); }

/* Surfaces */
.surface-paper  { background: var(--c-paper);  color: var(--c-ink); }
.surface-white  { background: var(--c-white);  color: var(--c-ink); }
.surface-nude   { background: var(--c-nude);   color: var(--c-ink); }
.surface-dark   { background: var(--c-dark);   color: var(--c-dark-text); }
.surface-ink    { background: var(--c-ink);    color: var(--c-paper); }
.surface-velvet { background: var(--c-velvet); color: var(--c-paper); }
.surface-sage   { background: var(--c-sage);   color: var(--c-paper); }
.surface-blush  { background: var(--c-blush);  color: var(--c-paper); }

/* Dark-surface treatment — applies to any dark surface uniformly. */

/* Eyebrows: Paper-bright on every dark surface (gold contrast fails on
   most darks at small sizes — Paper is the safe brand-consistent choice). */
.surface-dark .eyebrow,
.surface-ink .eyebrow,
.surface-velvet .eyebrow,
.surface-sage .eyebrow,
.surface-blush .eyebrow,
.hero--dark .eyebrow,
.hero--ink .eyebrow,
.hero--velvet .eyebrow,
.hero--sage .eyebrow,
.hero--blush .eyebrow { color: var(--c-paper); }

/* Muted text on any dark surface */
.surface-dark .t-muted,
.surface-ink .t-muted,
.surface-velvet .t-muted,
.surface-sage .t-muted,
.surface-blush .t-muted { color: rgba(247, 242, 235, 0.75); }

/* Hairlines on dark surfaces */
.surface-dark .hr-ink,
.surface-ink .hr-ink,
.surface-velvet .hr-ink,
.surface-sage .hr-ink,
.surface-blush .hr-ink { background: rgba(247, 242, 235, 0.20); }

/* Surface-aware muted text — any class using `var(--c-text-muted)`
   (.caption, .sec-head__aside, .card__meta, .field__label, .serve-card__body,
   .split__body, .triage__desc, etc.) automatically reads in the right tone
   on whatever surface it sits on. Define muted-on-light as the default, then
   override the variable inside dark surfaces. */
.surface-dark,
.surface-ink,
.surface-velvet,
.surface-sage,
.surface-blush,
.hero--dark,
.hero--ink,
.hero--velvet,
.hero--sage,
.hero--blush {
  --c-text-muted: rgba(247, 242, 235, 0.75);
}

/* Containers */
.container       { max-width: var(--container-max);    margin: 0 auto; padding-left: var(--container-x); padding-right: var(--container-x); }
.container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--container-x); padding-right: var(--container-x); }
.container-text  { max-width: var(--container-text);   margin: 0 auto; padding-left: var(--container-x); padding-right: var(--container-x); }

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section-tight { padding-top: calc(var(--section-y) * 0.6); padding-bottom: calc(var(--section-y) * 0.6); }

/* Gold hairlines */
.hr-gold {
  height: 1px;
  background: var(--c-gold);
  border: 0;
  margin: 0;
}
.hr-ink {
  height: 1px;
  background: var(--c-line);
  border: 0;
}

/* Visually hidden (a11y) */
.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;
}