/* ============================================================================
   CHROMVAULT — BASE
   Reset, document, typography, chrome material engine, utility primitives.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The single most common mobile bug in a design like this: a wide decorative
     element pushing the page sideways. Clip it at the root, once. */
  overflow-x: clip;
  min-height: 100vh;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(10, 10, 11, 0.06);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Keyboard focus must be visible on every interactive surface, including the
   ones sitting on chrome — hence the double ring. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
.on-chrome:focus-visible {
  outline-color: var(--ink);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
}

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

/* ── Type roles ────────────────────────────────────────────────────────── */

.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 125%;         /* Archivo is a variable width axis */
  line-height: 0.86;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--ink);
}

.t-mega { font-size: var(--t-mega); }
.t-xxl  { font-size: var(--t-xxl); }
.t-xl   { font-size: var(--t-xl); }
.t-lg   { font-size: var(--t-lg); line-height: 1.02; }

.label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
/* A short chrome rule instead of a bullet — the material doing structural work. */
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--chrome-ramp);
  flex: none;
}

.lead {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 46ch;
}

/* Prices are data. Mono keeps digits aligned and reads as "spec sheet",
   which is exactly the register a rare-goods shop wants. */
.price {
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.price-was {
  font-family: var(--f-mono);
  color: var(--ink-4);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.price-off {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px;
}

/* ============================================================================
   CHROME MATERIAL ENGINE
   ----------------------------------------------------------------------------
   Three composable treatments. Everything metallic on the site is one of these,
   which is what keeps it a system rather than scattered gradients.

     .chrome-text     — a ramp clipped to glyphs
     .chrome-surface  — a lit object with edge highlight and rolloff
     .chrome-rule     — a hairline of metal used for structure
   ========================================================================== */

.chrome-text {
  background: var(--chrome-ramp-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Metal against paper needs a contact shadow or it looks pasted on. */
  filter: drop-shadow(0 2px 1px rgba(10, 10, 11, 0.18))
          drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.9));
}

/* Iridescent variant. Two hues at low opacity over the metal — controlled,
   never a rainbow sweep. */
.chrome-text.irid {
  background:
    linear-gradient(96deg,
      rgba(184, 198, 255, 0.55) 4%,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 201, 228, 0.5) 74%,
      rgba(255, 255, 255, 0) 96%),
    var(--chrome-ramp-text);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Fallback: if background-clip:text is unsupported the text would vanish.
   Detect support and only then go transparent. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome-text {
    background: none;
    color: var(--chrome-deep);
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
}

.chrome-surface {
  position: relative;
  background: var(--chrome-ramp);
  box-shadow: var(--sh-metal);
  isolation: isolate;
}
/* The specular sweep: a soft diagonal highlight that reads as a reflected
   light source. Sits above the ramp, below content. */
.chrome-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0.78) 44%,
      rgba(255, 255, 255, 0.1) 55%,
      rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
/* Faint iridescent bloom in the shadow half — where real chrome picks up
   colour from its surroundings. */
.chrome-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 96%, rgba(184, 198, 255, 0.4), transparent 58%),
    radial-gradient(110% 80% at 92% 8%, rgba(255, 201, 228, 0.34), transparent 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}
.chrome-surface > * { position: relative; z-index: 2; }

.chrome-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--chrome-mid) 12%,
    var(--chrome-spec) 34%,
    var(--chrome-low) 52%,
    var(--chrome-lit) 72%,
    transparent
  );
}

/* Metal-edged frame for imagery. The 1px inner ring is what sells "milled
   object" rather than "div with a gradient border". */
.chrome-frame {
  position: relative;
  background: var(--chrome-ramp);
  padding: 1px;
}
.chrome-frame::after {
  content: '';
  position: absolute;
  inset: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1px 0 rgba(60, 65, 72, 0.3);
  pointer-events: none;
  z-index: 3;
}

/* ── Layout primitives ─────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-tight { max-width: 1100px; }

.section { padding-block: clamp(var(--s8), 9vw, var(--s11)); }
.section-sm { padding-block: clamp(var(--s7), 6vw, var(--s9)); }

/* Section head: eyebrow + title on the left, action on the right, chrome rule
   spanning underneath. Used verbatim on every rail so the page has rhythm. */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}
.sec-head-main { display: flex; flex-direction: column; gap: var(--s3); }
.sec-head + .chrome-rule { margin-bottom: var(--s6); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }

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

.desk-only { display: none; }
.mob-only { display: initial; }
@media (min-width: 900px) {
  .desk-only { display: initial; }
  .mob-only { display: none !important; }
}

/* ── Reveal on scroll ────────────────────────────────────────────────────
   Opacity + a short translate only. No blur, no scale — those cost real frames
   on mid-range Android, and this is a shop. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--d-4) var(--e-out), transform var(--d-4) var(--e-out);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.in { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Skip link */
.skip {
  position: fixed;
  top: -100px;
  left: var(--s4);
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) var(--s4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: top var(--d-2) var(--e-out);
}
.skip:focus-visible { top: var(--s4); outline-offset: 2px; }