/* ============================================================
   LA BARQUETTE — BASE
   Reset, base typography (ported from the DS), layout primitives, buttons.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html, body { background: var(--bg); color: var(--fg1); }
body {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rojo); color: var(--offwhite); }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--edge); }
.section { padding-block: var(--section-y); }
.section--light { background: var(--bg-light); color: var(--fg-on-light); }

/* ============================================================
   TYPOGRAPHY — three families, three jobs
   ============================================================ */

/* Display (Utility Pro) — the BIG words and numbers */
.t-display, .t-h0 {
  font-family: var(--font-display); font-weight: 700;
  line-height: .86; letter-spacing: var(--track-tight);
  font-size: clamp(4rem, 13vw, 13rem); color: var(--fg1);
}
.t-h1, h1 {
  font-family: var(--font-display); font-weight: 700;
  line-height: .94; letter-spacing: var(--track-snug);
  font-size: clamp(2.5rem, 7vw, 6rem); text-transform: uppercase; color: var(--fg1);
}
.t-h2, h2 {
  font-family: var(--font-display); font-weight: 700;
  line-height: .94; letter-spacing: var(--track-snug);
  font-size: clamp(2.2rem, 5.5vw, 4.2rem); text-transform: uppercase;
}
/* H3 (Babcock) — section headings, card titles */
.t-h3, h3 {
  font-family: var(--font-stamp);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
}
/* Body (Citrine) */
.t-body, p {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.65;
}
.t-body-italic { font-family: var(--font-body); font-style: italic; font-weight: 500; }

/* Eyebrow / label (Babcock, tracked, red) */
.t-eyebrow {
  font-family: var(--font-stamp); font-size: .72rem;
  letter-spacing: var(--track-label); color: var(--red); text-transform: uppercase;
}
/* Tag (small Babcock) */
.t-tag {
  font-family: var(--font-stamp); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
}
/* The signature italic accent — Citrine italic inside display headlines */
.t-script {
  font-family: var(--font-body); font-weight: 500; font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: .8em; color: var(--cream);
}

/* ============================================================
   BUTTONS — 2px capsules, wipe-fill hover, never opacity-fade
   ============================================================ */
.btn {
  --btn-fg: var(--offwhite);
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-stamp); font-weight: 700;
  font-size: .92rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 30px; border: 1px solid transparent; border-radius: var(--radius-xs);
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease-hero), box-shadow .35s var(--ease-hero), color .35s var(--ease-hero);
  color: var(--btn-fg); background: transparent;
}
.btn > * { position: relative; z-index: 1; }
.btn .arw { transition: transform .35s var(--ease-hero); }
.btn:hover .arw { transform: translateX(5px); }
.btn:active { transform: translateY(-1px) scale(.97); }

/* Filled: offwhite wipes in horizontally, text turns red */
.btn--fill { background: var(--rojo); color: var(--offwhite); box-shadow: var(--shadow-cta); }
.btn--fill::before {
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--offwhite);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-hero);
}
.btn--fill:hover { color: var(--rojo); transform: translateY(-3px); box-shadow: var(--shadow-cta-hover); }
.btn--fill:hover::before { transform: scaleX(1); }

/* Ghost: hairline, offwhite circle scales from the centre, text turns chocolate */
.btn--ghost { border-color: var(--hairline-dark); color: var(--fg1); }
.btn--ghost::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%;
  width: 140%; aspect-ratio: 1; border-radius: 50%; background: var(--offwhite);
  transform: translate(-50%, -50%) scale(0); transition: transform .5s var(--ease-hero);
}
.btn--ghost:hover { color: var(--chocolate); transform: translateY(-3px); }
.btn--ghost:hover::before { transform: translate(-50%, -50%) scale(1); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}