/* ==========================================================================
   BASE  (loaded first on every page)
   1. Design tokens   2. Reset and element defaults   3. Typography
   4. Utilities       5. Reduced motion
   ========================================================================== */

/* 1. DESIGN TOKENS ------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* colour */
  --bg: #0c100f;
  --paper: #f3f3ec;
  --muted: #b7bdb6;
  --moss: #b5c979;
  --line: #454b40;
  --eyebrow: #c6d8b1;

  /* layout */
  --shell-max: 1280px;
  --header-height: 78px;

  /* type */
  --font-sans: 'Segoe UI', Arial, sans-serif;
  --font-mono: Consolas, monospace;
}
@media (max-width: 600px) { :root { --header-height: 76px; } }

/* 2. RESET AND ELEMENT DEFAULTS ------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--font-sans);font-weight:400;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--moss);outline-offset:6px}
small{margin-left:3px;font-size:9px;letter-spacing:.03em;color:#aebc9c}
[aria-disabled]{cursor:default;color:#8f988d}

/* 3. TYPOGRAPHY ---------------------------------------------------------- */
h1{margin:0 0 12px;font-size:clamp(46px,5.8vw,83px);font-weight:400;letter-spacing:-.045em;line-height:1.12}
h3{margin:0 0 12px;font-size:clamp(24px,2.65vw,38px);font-weight:400;letter-spacing:-.045em;line-height:1.14}
.eyebrow{margin:0 0 15px;font-size:11px;font-weight:500;line-height:1.8;letter-spacing:.22em;text-transform:uppercase;color:var(--eyebrow)}
@media (max-width: 600px) {
  h1{font-size:clamp(38px,9.1vw,54px);letter-spacing:-.05em}
  h3{font-size:30px}
}

/* 4. UTILITIES ----------------------------------------------------------- */
/* html: <a class="skip"> */
.skip{position:fixed;top:-80px;left:12px;z-index:10;padding:14px;background:#18251a}
.skip:focus{top:12px}

/* 5. REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}
  *{transition:none!important}
}