/* ========================================================================
   NXT02 — base.css
   Tokens · Reset · Typography
   Aesthetic: artisanal warmth — terracotta on cream, hand-set
   ======================================================================== */

:root {
  /* Color palette — warm, lived-in, with saffron accent */
  --cream:        #F5EDD8;
  --cream-warm:   #ECE2C6;
  --cream-deep:   #DDD0AC;
  --paper:        #FBF6E8;

  --terra:        #B85450;
  --terra-deep:   #8B3A36;
  --terra-soft:   #D4827E;

  --roast:        #2B1810;
  --roast-soft:   #3D2A1D;
  --umber:        #5D3A29;

  --saffron:      #E8A82C;
  --saffron-deep: #C28612;
  --olive:        #8FA686;
  --moss:         #5D7853;

  /* Typography */
  --font-display: "EB Garamond", "Cormorant Garamond", "Times New Roman", serif;
  --font-body:    "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-script:  "Caveat", "Bradley Hand", cursive;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", monospace;

  /* Sizing */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 17px;
  --fs-lg:   19px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  48px;
  --fs-4xl:  72px;
  --fs-5xl:  120px;

  /* Layout */
  --container-max: 1280px;
  --gutter: 32px;
  --gutter-mobile: 20px;
  --section-pad: clamp(80px, 10vw, 160px);

  /* Borders */
  --hairline: 1px solid var(--roast);
  --hairline-soft: 1px solid var(--cream-deep);
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 32px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:    480ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--roast);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--saffron); color: var(--roast); }

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--roast);
}

h1 { font-size: clamp(56px, 9vw, 144px); font-weight: 400; }
h2 { font-size: clamp(40px, 6vw, 88px); font-weight: 400; }
h3 { font-size: clamp(28px, 3vw, 48px); font-weight: 500; }
h4 { font-size: clamp(22px, 2vw, 32px); font-weight: 500; }

p { line-height: 1.6; }

.serif    { font-family: var(--font-display); }
.sans     { font-family: var(--font-body); }
.script   { font-family: var(--font-script); }
.italic   { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "✦";
  color: var(--saffron);
  font-size: 12px;
}

.note {
  font-family: var(--font-script);
  font-size: 28px;
  color: var(--terra);
  line-height: 1;
  display: inline-block;
  transform: rotate(-3deg);
}

/* Marker highlight — like a yellow highlighter pen */
.mark {
  background: linear-gradient(180deg, transparent 55%, rgba(232, 168, 44, 0.55) 55%);
  padding: 0 4px;
}
.mark--terra {
  background: linear-gradient(180deg, transparent 55%, rgba(184, 84, 80, 0.35) 55%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}