/* ==========================================================================
   Global — root scaling, typography primitives, shared utilities
   ==========================================================================
   The Figma canvas is 1920px wide and laid out with absolute geometry.
   The root font-size is tied to the viewport so 1rem === 10px at 1920px,
   which reproduces the composition exactly at the design width and scales
   it proportionally on narrower desktops.

   That scaling is where the desktop branch has to stop, and the reason is
   arithmetic: a 2rem paragraph is 20px at 1920, 15px at 1440, 14.2px at 1366
   and 10.7px at 1024.  Every tablet held in landscape was therefore being
   served a faithful composition in type nobody could read, with 40px buttons
   rendered at 21px.  1367px is the first desktop width; 1366px and below get
   the purpose-built flow layouts in responsive.css, on a flat 10px root, so
   type is the size it says it is.  (A 13-inch iPad in landscape is 1366px --
   that is where the line comes from.)
   ========================================================================== */

html {
  font-size: 10px;
  scroll-behavior: auto;
}

/* Above the tablet line the whole page is one scale: every measurement in the
   design is in rem, so the layout is the 1920 drawing at whatever size the
   screen is.

   It used to stop growing at 1921, on the reasoning that type should not keep
   getting bigger on a large monitor.  What that actually did was split the
   page in two: a `left` in rem froze at its 1920 value while a
   `calc(50% + …)` or a `left: 50%` carried on travelling with the middle of
   the screen.  Measured at 2560 against 1920, 277 elements across the 13
   templates stayed behind while the rest moved — the header centred itself
   while the body clung to the left edge, the Discover link slid behind its
   bottle, and About's philosophy photograph came down on top of its own
   heading.  Every one of those is the same fault.

   Letting it keep scaling is what the 1367-1920 band already does, so there is
   no width at which the two coordinate systems can disagree.  The other way
   out is a centred container at the design width — which the header already
   builds with .site-header__inner — but that needs all 69 full-bleed elements
   to break back out to 100vw, and the client chose the scale. */
@media (min-width: 1367px) {
  html { font-size: 0.5208333vw; } /* 10px @ 1920, and on past it */
}

body {
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

/* 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; }

/* Layout shell ----------------------------------------------------------- */
/* Sections keep the 1920 design canvas centred on wider screens while
   full-bleed media still spans the whole viewport. */
.canvas {
  position: relative;
  width: 100%;
  max-width: var(--design-width);
  margin-inline: auto;
}

.bleed {
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

/* Typography primitives -------------------------------------------------- */
.eyebrow {
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: var(--fs-ui-lg);
  font-weight: var(--fw-medium);
  line-height: normal;
  text-transform: uppercase;
  color: var(--c-ink);
}

.display {
  font-family: var(--f-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  text-transform: uppercase;
}

.lead {
  font-family: var(--f-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.lead p + p { margin-top: var(--lh-lead); }

/* Editorial paragraph: Bricolage Grotesque Light with Barlow Condensed
   emphasis, exactly as composed in Figma. */
.editorial {
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-editorial);
  line-height: var(--lh-editorial);
  /* Figma's codegen reports opsz 14, but Figma itself renders Bricolage at its
     natural optical size; pinning opsz 14 sets the line ~8% too wide. */
  font-variation-settings: 'wdth' 100;
  font-optical-sizing: auto;
  color: var(--c-ink);
}

.editorial em,
.editorial strong {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

.editorial em.is-medium,
.editorial strong.is-medium {
  font-weight: var(--fw-medium);
}

/* Accessibility ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--page-x);
  z-index: 200;
  padding: 1rem 2rem;
  background: var(--c-ink);
  color: var(--c-page);
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
}

.skip-link:focus { top: 1rem; }

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

/* Emphasis variants used inside the animated editorial paragraphs --------- */
.editorial em.is-bricolage {
  font-family: var(--f-editorial);
  font-weight: var(--fw-medium);
  font-style: normal;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 100;
}

.editorial em.is-sentence { text-transform: none; }

.editorial p + p { margin-top: var(--lh-editorial); }

/* Word / line reveal masks -----------------------------------------------

   The word wrapper deliberately does NOT clip: the editorial reveal resolves
   each word out of a blur (Figma prototype), and `overflow: hidden` would cut
   the blur halo off at the word's own box and leave a visible rectangle. */
.w {
  display: inline-block;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.w > i { display: inline-block; font-style: inherit; will-change: filter, opacity; }

/* The display statements are not animated (no Figma layer marks them so), so
   their lines are plain blocks — no mask, nothing to clip a descender. */
[data-lines] > span { display: block; }

/* Figma sets the line breaks in the editorial paragraphs by hand; they are
   reproduced at the design width and released on narrow viewports. */
@media (max-width: 1366px) { br.lb { display: none; } }

/* At the design width the breaks are authored, so the lines must not re-wrap
   (Figma marks these frames whitespace-nowrap). */
@media (min-width: 1367px) { .editorial { white-space: nowrap; } }