/* ============================================================
   STACKERFOX - reset, typography, shared primitives
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* smooth scrolling is driven by js/scroll.js */
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.5;
  /* clip, not hidden: overflow-x:hidden makes body a scroll container,
     which silently breaks position:sticky for the stacking layers */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-4) var(--ease-out),
              color var(--dur-4) var(--ease-out);
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

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

::selection { background: var(--ink); color: var(--ground); }

/* ---------- typography ---------- */

/* Display weight is 700, not 800: the reference keeps 800 for the wordmark
   and a couple of overlay headings only. Leading stays under 1 so the big
   blocks read as slabs, loosening as the type gets smaller. */
.t-hero,
.t-xxl,
.t-xl,
.t-section,
.t-caps,
.t-lg {
  font-weight: 700;
  letter-spacing: var(--track-lg);
  line-height: 0.9;
  text-wrap: balance;
}

.t-hero    { font-size: var(--t-hero);    line-height: 0.9;  letter-spacing: var(--track-hero); }
.t-xxl     { font-size: var(--t-xxl);     line-height: 0.94; letter-spacing: var(--track-xl); }
.t-xl      { font-size: var(--t-xl);      line-height: 0.94; letter-spacing: var(--track-xl); }
/* the reference's section headline: a shade smaller and looser than the
   rotator headline, which is the only one that runs at the t-xl band */
.t-section { font-size: var(--t-section); line-height: 0.96; letter-spacing: var(--track-xl); }
/* the one uppercase display band - the reference keeps 800 for these */
.t-caps    { font-size: var(--t-caps);    line-height: 0.95; letter-spacing: var(--track-xl);
             font-weight: 800; text-transform: uppercase; }
.t-lg      { font-size: var(--t-lg);      line-height: 0.94; letter-spacing: var(--track-lg); }

/* the caps voice: used for eyebrows, chips, meta and readouts.
   it is the reference's structural language, so it stays systematic.
   mono tracks positive, the exact inverse of the display face. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  line-height: 1.4;
}

.mono-lc {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
}

.lede {
  /* the reference's panel copy sits at 15px from tablets down */
  font-size: clamp(0.94rem, 1.25vw, 1.32rem);
  line-height: 1.5;
  font-weight: 500;
  max-width: 34ch;
}

.dim { color: var(--ink-soft); }

/* the page scrolls, but the browser's scrollbar is not drawn */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- layout primitives ---------- */

.wrap {
  padding-inline: var(--gutter);
  width: 100%;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

/* full-bleed colour blocks. the page is one continuous colour story:
   ground -> bone -> void and back, never two accents at once */
/* --accent-text is the accent colour that is actually readable on this
   ground. Small type never uses --signal directly, so contrast holds
   in every palette without per-section overrides. */
.block-ground { background: var(--ground); color: var(--ink);  --accent-text: var(--ink-soft); }
.block-bone   { background: var(--bone);   color: var(--ink);  --accent-text: var(--signal-deep); }
.block-void   { background: var(--void);   color: var(--bone); --accent-text: var(--signal-lift); }
:root { --accent-text: var(--signal-deep); }
.block-void .dim { color: rgb(var(--ground-rgb) / 0.74); }

.stack-head {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  grid-template-columns: 1fr;
  align-items: end;
}

/* the reference reads as one column through 1024 and splits above it */
@media (min-width: 1025px) {
  .stack-head { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* ---------- eyebrow ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
}

.block-void .eyebrow { color: rgb(var(--ground-rgb) / 0.7); }

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.eyebrow.is-bare::before { display: none; }

/* ---------- buttons ---------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--ground);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-3) var(--ease-back);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  transform: translateY(101%);
  transition: transform var(--dur-3) var(--ease-out);
}

.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn .btn-arrow {
  transition: transform var(--dur-2) var(--ease-back);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1.5px solid rgb(var(--ink-rgb) / 0.28);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.8em 1.4em;
}
.btn-ghost::after { background: var(--ink); }
.btn-ghost:hover { color: var(--ground); }

.block-void .btn-ghost {
  --btn-fg: var(--bone);
  border-color: rgb(var(--ground-rgb) / 0.32);
}
.block-void .btn-ghost::after { background: var(--ground); }
.block-void .btn-ghost:hover { color: var(--void); }

.btn-solid-light {
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
}
.btn-solid-light::after { background: var(--ground); }

/* ---------- chips and badges ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgb(var(--ink-rgb) / 0.9);
  color: var(--bone);
  backdrop-filter: blur(6px);
}

.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ground);
  flex: none;
}

.tag-outline {
  display: inline-flex;
  align-items: center;
  padding: 0.62em 1.1em;
  border: 1.4px solid currentColor;
  border-radius: var(--r-pill);
}

/* ---------- rules ---------- */

.rule {
  height: 1px;
  background: rgb(var(--ink-rgb) / 0.16);
  border: 0;
}
.block-void .rule { background: rgb(var(--ground-rgb) / 0.2); }

/* ---------- reveal system ----------
   every revealable element starts here; js/motion.js flips .is-in */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 26px), 0);
  transition:
    opacity var(--dur-4) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--dur-4) var(--ease-out) var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* line-by-line display reveal */
/* the negative tracking pulls the last glyph's ink past the line's box, so
   the mask overhangs on the right or a final full stop gets sliced */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; padding-right: 0.12em; margin-right: -0.12em; }
.line-mask > span {
  display: block;
  width: max-content;   /* content width, so initFit can measure the real line */
  transform: translate3d(0, 110%, 0);
  transition: transform 1s var(--ease-out) var(--line-delay, 0s);
  will-change: transform;
}
.is-in .line-mask > span,
.line-mask.is-in > span { transform: translate3d(0, 0, 0); }

/* ---------- utility ---------- */

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

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ground);
  border-radius: var(--r-pill);
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* film grain. fixed + pointer-events none so it never repaints on scroll */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: var(--grain-src);
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .line-mask > span { transform: none; }
  .grain { display: none; }
}