/* base.css — reset, typography, buttons, focus, skip link. Tokens live in tokens.css. */

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

html {
  background: var(--void);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 12px;
}
/* ≥ 1680 px: the rem grows with the width (16 → 21 px at 2560) */
@media (min-width: 1680px) {
  html { font-size: min(calc(100% + (100vw - 1680px) * .0057), 131.25%); }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--bone-200);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; margin: 0; }
a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 360; text-wrap: balance; }

::selection { background: rgba(217, 84, 26, .55); color: var(--fire-10); }

/* symbols missing from the latin subset */
.sym { font-family: var(--font-symbol); font-style: normal; font-weight: 400; display: inline-block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- focus (DESIGN §5) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--fire-8);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* ---------- skip link ---------- */
.skip {
  position: fixed;
  top: 12px; left: 12px;
  z-index: var(--z-skip);
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--grad-btn);
  color: var(--ink-on-fire);
  font-weight: 500; letter-spacing: .02em; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus, .skip:focus-visible { transform: none; }

/* final "." of the footer wordmark (logo_html) */
.logo__dot { color: var(--fire-6); }

/* ---------- buttons (DESIGN §5) ---------- */
.btn-fire {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 52px; padding: 0 28px;
  border: 0; border-radius: var(--r-pill);
  background-image: var(--grad-btn);
  color: var(--ink-on-fire);
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 22px -10px rgba(217, 84, 26, .6);
  transition: box-shadow var(--d-xs) var(--ease-stroke), transform var(--d-xs) var(--ease-stroke);
}
.btn-fire--lg { height: 56px; }
.btn-fire:hover, .btn-fire:focus-visible {
  background-image: var(--grad-btn-hover);
  box-shadow: var(--sh-btn-hover);
  transform: translateY(-1px);
}
.btn-fire:focus-visible { box-shadow: var(--sh-btn-hover), var(--focus-ring); }
.btn-fire:active { transform: translateY(0); }
.btn-fire .sym { transition: transform var(--d-xs) var(--ease-stroke); }
.btn-fire:hover .sym, .btn-fire:focus-visible .sym { transform: translateX(4px); }
.btn-fire .glyph { width: 20px; height: 20px; flex: none; fill: currentColor; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 40px; padding: 0 18px;
  border: 1px solid var(--pig-ochre);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--bone-100);
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-xs) var(--ease-stroke), border-color var(--d-xs) var(--ease-stroke), transform var(--d-xs) var(--ease-stroke);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(192, 138, 62, .12); border-color: var(--fire-7); }
.btn-ghost .sym { transition: transform var(--d-xs) var(--ease-stroke); }
.btn-ghost:hover .sym { transform: translateX(4px); }

/* ---------- shared text styles ---------- */
.eyebrow {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-eyebrow);
  line-height: 1.4; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pig-ochre-lt);
}
.eyebrow .sym { color: var(--fire-7); margin-right: .35em; }

.title-fire {
  background: var(--grad-fire-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-bottom: .08em; /* keeps descenders inside the clipped gradient box */
}
.title-fire.is-revealed { filter: var(--display-glow); }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--bone-200); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}