/* =========================================================
   BASE — tokens, reset, type, helpers
   ========================================================= */
:root {
  --red: #ff3a1d;
  --red-deep: #c91f08;
  --black: #000000;
  --paper: #f2eee6;
  --gutter: clamp(16px, 2.4vw, 40px);
  --f: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.76, 0, .24, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--red);
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--f);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.2;
  background: var(--red);
  color: var(--black);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--black); color: var(--red); }

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

/* ---------- Type ---------- */
.display {
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -.045em;
}
.h2 {
  font-weight: 900;
  font-stretch: 114%;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.04em;
  font-size: clamp(2.6rem, 9vw, 9.5rem);
}
.label {
  font-size: clamp(.72rem, .9vw, .9rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  display: flex;
  gap: .8em;
  align-items: center;
}
.label span:first-child { opacity: .55; }
.tag {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: clamp(.7rem, .85vw, .85rem);
  font-weight: 800; text-transform: uppercase;
  border: 2px solid currentColor; border-radius: 99px;
  padding: .45em .9em;
}
.dot {
  width: .6em; height: .6em; border-radius: 50%;
  background: currentColor; display: inline-block;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(.4); opacity: .4; } }

/* split-text masks (built by js/utils.js) */
.js [data-split] { visibility: hidden; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .03em .1em; margin: -.12em -.03em -.1em; }
.wi, .ch { display: inline-block; will-change: transform; }
.wi { transform-origin: 0 100%; }
.lw { display: inline; }

/* generic art box (generated svg or real image) */
.art { position: relative; overflow: hidden; background: var(--black); }
.art svg, .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.main { position: relative; z-index: 1; background: var(--red); }
.section { padding: clamp(5rem, 14vw, 14rem) var(--gutter); position: relative; }
.dark { background: var(--black); color: var(--red); }
.paper { background: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}

/* Keep every black identical: dark blocks share one compositing treatment so
   GPU-transformed layers (3D ring, pins) don't render a slightly different black. */
.dark, .ring__pin, .ring__scene, .pin-spacer:has(> .dark) { background-color: var(--black); }
.dark { transform: translateZ(0); }