/* ============================================================================
   VRSN — BASE
   Reset, typography primitives, and the brand's graphic system as utilities.
   ========================================================================== */

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

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink-4) var(--ink);
}

body {
  font-family: var(--f-text);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100svh;
}

body.is-locked { overflow: hidden; }

/* `hidden` tiene que ganar siempre: cualquier regla de autor con display
   (grid, flex, block) pisa el display:none del agente de usuario, y el
   elemento «oculto» se sigue viendo. Pasó con el estado de éxito del formulario
   de avisos, que aparecía encima del propio formulario. */
[hidden] { display: none !important; }

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

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

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

/* --- TYPE PRIMITIVES ------------------------------------------------------ */

/* Display: wide, heavy, tight — exactly how the manual sets a headline.      */
.display {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' var(--wdth-display), 'wght' var(--wght-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.024em;
  font-feature-settings: 'ss01';
}
.display--tight { line-height: 0.76; letter-spacing: -0.035em; }

/* The mono layer: product codes, sizes, meta, labels. Never body copy.       */
.mono {
  font-family: var(--f-mono);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.mono--tight { letter-spacing: 0.08em; }

.lede { font-size: var(--step-1); line-height: 1.42; font-weight: 300; letter-spacing: -0.005em; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.red { color: var(--red); }

.u-hide { display: none !important; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- THE GRAPHIC SYSTEM --------------------------------------------------- */
/* The manual's diagonal element, tokenised so it scales anywhere.            */
.slashes {
  background-image: repeating-linear-gradient(
    var(--slash-angle),
    currentColor 0 calc(var(--slash-pitch) * var(--slash-w)),
    transparent calc(var(--slash-pitch) * var(--slash-w)) var(--slash-pitch)
  );
}

/* A hairline that reads as a measuring rule, used on the HUD and section tops */
.rule { height: 1px; background: var(--line); width: 100%; }

/* --- MEDIA ---------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 1);
  background-size: cover;
  background-position: center;
  background-color: var(--ink-2);
}
.media picture { display: contents; }
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.media.is-loaded img { opacity: 1; }
.media--fill { aspect-ratio: auto; height: 100%; }

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

.section { padding-block: var(--sp-6); }
.section--tall { padding-block: var(--sp-7); }

/* The section marker used throughout: index · label · rule                   */
.marker {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.marker > .rule { flex: 1; }
.marker__i { color: var(--red); }

/* --- REVEALS -------------------------------------------------------------- */
/* Text reveal: words rise behind a mask. One idea, used consistently.        */
/* The mask box is the line box, which is shorter than the glyphs whenever
   line-height is tight (display type here runs at 0.76–0.82). Padding widens
   the clip without moving anything, and the negative margin keeps layout
   identical; the travel goes to 140% so the word still starts fully hidden. */
.w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-block: 0.18em; margin-block: -0.18em;
}
.w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(140%);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 38ms);
}
.is-in .w > i { transform: translateY(0); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* Image reveal: a mask lifts rather than a fade — more editorial.            */
.reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-out); }
.reveal-img.is-in { clip-path: inset(0 0 0% 0); }

@media (prefers-reduced-motion: reduce) {
  .w > i, .reveal, .reveal-img { transition: none !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
}