@layer base {
  /* mattemotto: hueso, cyan, navy. la hoja respira en bloques. */

  html {
    font-family: var(--font-sans);
    font-size: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  :root {
    /* fixed-topbar height — used to push body content below and to pull
       the hero up under the topbar via negative margin. mattemotto: el
       cintillo flota; el contenido lo respeta; el héroe lo atraviesa. */
    --topbar-h: clamp(3.5rem, 5.5vw, 4.4rem);
  }
  body {
    background: var(--surface-page);
    color: var(--on-bone);
    font-family: var(--font-sans);
    font-feature-settings: var(--font-feat);
    font-size: var(--fs-300);
    line-height: var(--lh-prose);
    letter-spacing: var(--tracking-normal);
    font-weight: 400;
    padding-block-start: var(--topbar-h);
  }
  /* hero overlaps the fixed topbar so the photo bleeds behind the glass */
  .hero { margin-block-start: calc(-1 * var(--topbar-h)); }

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

  h1, h2, h3, h4, .display {
    font-family: var(--font-sans);
    color: currentColor;
    text-wrap: balance;
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
    line-height: var(--lh-tight);
  }
  h1, .display { font-size: var(--fs-800); }
  h2 { font-size: var(--fs-700); }
  h3 { font-size: var(--fs-500); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.018em; }
  h4 { font-size: var(--fs-400); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.012em; }

  /* — wordmark · the orange BikeFit hero word.
     Sized like the legacy, integrated into a lockup. NEVER a 14vw stamp. */
  .wordmark {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: var(--fs-wordmark);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--orange);
  }

  p { max-inline-size: var(--measure); }

  a {
    color: currentColor;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--orange);
    text-underline-offset: 0.2em;
    transition:
      text-decoration-color var(--dur-quick) var(--ease-out-quint),
      color                 var(--dur-quick) var(--ease-out-quint);
  }
  a:hover { text-decoration-color: currentColor; }

  strong, b { font-weight: 700; }

  hr { border: 0; block-size: 1px; background: var(--hairline-on-bone); margin-block: var(--space-2xl); }

  img, svg { display: block; max-inline-size: 100%; }

  /* — eyebrow · ALL-CAPS section label. Manrope, not mono. — */
  .eyebrow {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--fs-100);
    font-weight: 700;
    color: var(--orange);
  }
  .section--cyan .eyebrow { color: var(--ink); }
  .section--ink  .eyebrow { color: var(--orange); }

  /* — measurement-only mono. used for: numerals, prices, coords, dimensions. — */
  .num   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .mono  { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
  .coord { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-mono); }
  .measure {
    font-family: var(--font-mono);
    font-size: var(--fs-mono-200);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--on-bone-quiet);
  }

  @view-transition { navigation: auto; }
  ::view-transition-group(root) {
    animation-duration: var(--dur-medium);
    animation-timing-function: var(--ease-out-quint);
  }

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

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}