/* ==========================================================================
   Rediza — Reset & base typography
   ========================================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* the JS engine owns scrolling; see scroll.js */
  background: var(--ink);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--t-hi);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, textarea, select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

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

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; height: 1px; background: var(--rule); }

::selection { background: var(--ai-1); color: #fff; }

/* --- Headings ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: 600;
}
.h1 { font-size: var(--fs-h1); line-height: 1.0;  letter-spacing: var(--tr-display); }
.h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: var(--tr-display); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--fg-mid);
  font-weight: 400;
  max-width: 46ch;
  text-wrap: pretty;
}

.body   { color: var(--fg-mid); max-width: var(--measure); text-wrap: pretty; }
.small  { font-size: var(--fs-small); color: var(--fg-mid); }

/* Eyebrow / kicker — the tiny tracked-out label above section headings */
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 590;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--fg-lo);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}
.eyebrow--plain::before { display: none; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
}

/* Gradient text — used sparingly, on one phrase per page at most */
.grad-ai {
  background: linear-gradient(100deg, var(--mint), var(--ai-1) 45%, var(--ai-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-trip {
  background: linear-gradient(100deg, var(--trip), var(--trip-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Focus & skip link --------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--ai-1);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 999;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: #000;
  font-size: var(--fs-small);
  font-weight: 590;
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .site-nav, .cursor, canvas, .marquee { display: none !important; }
  body, .on-dark { background: #fff !important; color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}