/* =========================================================
   Base — design tokens, reset, typography
   Breakpoints follow the source design: 900 / 640 / 420 px.
   ========================================================= */

:root {
  /* Colors — neutral palette */
  --bg:              #F4F1EA;
  --bg-alt:          #FBFAF6;
  --bg-warm:         #EFEBE1;
  --border:          #E2DDD2;
  --border-strong:   #D9D3C7;

  /* Ink */
  --ink:             #1A1714;
  --ink-secondary:   #4A443C;
  --ink-muted:       #6E665B;
  --ink-faint:       #9C948A;

  /* Accent */
  --accent:          #B0572F;
  --accent-warm:     #FFDBAF;

  /* Dark surfaces */
  --dark:            #1A1714;
  --dark-deep:       #16130F;
  --dark-deeper:     #0B0B0C;
  --dark-border:     #34302A;
  --dark-border-alt: #3A352E;
  --dark-text:       #F4F1EA;
  --dark-text-mute:  #CFC8BC;
  --dark-text-faint: #9A9387;

  /* Semantic */
  --success:         #4E7A52;
  --success-bg:      #ECF2EC;
  --success-border:  #CFE0CF;
  --danger:          #B5473A;
  --danger-bg:       #F8EDEB;
  --danger-border:   #EBD3CE;
  --warning:         #D99B3C;
  --warning-bg:      #FBF3E9;
  --warning-border:  #E9C98F;

  /* Typography */
  --font-display:    "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:     "Open Sans", -apple-system, sans-serif;

  /* Layout */
  --page-max:        1200px;
  --content-max:     1180px;
  --study-max:       1100px;
  --gutter:          40px;

  /* Radius */
  --radius-card:     16px;
  --radius-sm:       10px;
  --radius-pill:     100px;

  /* Motion */
  --ease-out:        cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

img { max-width: 100%; display: block; }

button { font-family: inherit; }

/* Prevent grid children with intrinsic min-width from overflowing */
.hero-grid > *, .about-grid > *, .work-grid-2 > *, .feat-card > *,
.cs-row > *, .cs-2col > *, .cs-3col > *, .cs-hscroll > *,
.cs-innersplit > * { min-width: 0; }

/* Uppercase small-caps label */
.eyebrow {
  font-family: var(--font-accent);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow--tight { letter-spacing: 0.12em; font-size: 12px; }
.eyebrow--accent { color: var(--accent); }