/* ============================================================
   Cloud Nine — tokens
   Direction: "Altitude". The site is a slow ascent; the palette
   runs from pre-dawn ground to luminous summit, with a single
   warm accent standing in for daybreak.
   ============================================================ */

:root {
  /* --- Atmosphere ------------------------------------------ */
  --nightfall: #0b1020;
  --stratus: #16223a;
  --altitude: #2e4468;
  /* Light enough to clear 4.5:1 against the lightest the sky
     ever gets (--altitude), as well as the darkest. */
  --haze: #a5b5cd;
  --cirrus: #c9d6e8;
  --summit: #f5f3ee;

  /* Warm dawn accent. Used sparingly: a horizon rule, a hover
     state, one mark per screen at most. */
  --daybreak: #e3b77f;
  --daybreak-deep: #946428;

  /* --- Surfaces & text ------------------------------------- */
  --ink: var(--nightfall);
  --ink-soft: #46536e;
  --hairline-dark: rgba(201, 214, 232, 0.14);
  --hairline-light: rgba(11, 16, 32, 0.12);

  /* --- Type ------------------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
    "Georgia", serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", sans-serif;
  /* Reserved for numerals and altitude readouts only — never for
     general eyebrow labels. */
  --font-readout: "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
    monospace;

  /* Fluid scale, 390px → 1440px viewport */
  --step--1: clamp(0.78rem, 0.75rem + 0.12vw, 0.85rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.42vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.85vw, 2.1rem);
  --step-3: clamp(1.95rem, 1.6rem + 1.5vw, 3rem);
  --step-4: clamp(2.5rem, 1.9rem + 2.6vw, 4.4rem);
  --step-5: clamp(3.1rem, 2rem + 4.6vw, 6.6rem);

  --lh-tight: 1.04;
  --lh-display: 1.12;
  --lh-body: 1.62;

  /* --- Space ----------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.35rem;
  --s-4: 2rem;
  --s-5: 3.1rem;
  --s-6: 4.8rem;
  --s-7: 7.4rem;
  --s-8: 11rem;

  --section-y: clamp(3.6rem, 2.4rem + 4.4vw, 6.6rem);
  --gutter: clamp(1.35rem, 0.6rem + 3.2vw, 4.5rem);
  --measure: 34rem;
  --max-w: 78rem;

  /* --- Motion ---------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur: 480ms;
  --dur-slow: 900ms;

  --rail-w: 4.5rem;
}

/* ============================================================
   Reset
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

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

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

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

a {
  color: inherit;
}

:where(h1, h2, h3, h4) {
  font-weight: 400;
  text-wrap: balance;
}

:where(p) {
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}