/* Martia — the bridge between the ported landing and the Next.js app shell.
   The four files above this one are byte-identical copies of apps/web-v2, so
   every adjustment the engine needs lives here. Loaded last, only on `/`.

   Why each rule exists:

   1. _app.tsx wraps every page in a div carrying next/font's Inter Tight class
      (an element-level `font-family`) and its own --font-sans. Inheritance
      beats the draft's `body` rule, so the landing root has to restate both
      type tokens; the values come from next/font (see pages/index.tsx), which
      already appends the draft's own fallbacks — the ones repeated below only
      matter if the font class is missing.
   2. globals.css sets `html, body { max-width: 100vw; overflow-x: hidden }` in
      @layer base. An overflow scroll container breaks `position: sticky`, and
      the feature deck and the app fan are sticky scenes. `clip` gives the same
      no-horizontal-scroll guarantee without creating a scrollport.
   3. globals.css turns on Inter's ss01/cv11 features on `body`; DM Sans has no
      such features and should not be asked for them. Its `:root` --font-sans
      (Inter Tight) also loads after tokens.css and wins, so `body` itself
      resolved to Inter Tight. No visible text inherits from body — every page
      in the design renders inside `.landing-v2` — but Next's route announcer
      is an inline element straight in <body>, and laying out its line made
      the browser download body's font: an Inter Tight file on every visit.
      Body takes the landing's own, preloaded DM Sans instead (next/font keeps
      the family name, as tokens.css assumes too). */

.landing-v2 {
  --font-sans: var(--landing-v2-sans), system-ui, sans-serif;
  --font-serif: var(--landing-v2-serif), Georgia, serif;
  font-family: var(--font-sans);
  line-height: 1.6;
}

html,
body {
  max-width: none;
  overflow-x: clip;
}

body {
  font-family: "DM Sans", system-ui, sans-serif;
  font-feature-settings: normal;
}

/* 4. Footer language switcher (components/landing-v2/Footer.tsx). Lives in the
   bottom bar (.footer-legal), inherits its type scale, and reuses the footer
   columns' link interaction (opacity + underline on hover — never a border or
   color change). The current edition is a non-interactive span, set heavier
   instead of dimmed. Colors stay on tokens: ink at reduced opacity matches the
   legal line's muted tone on the --blue footer. */
.footer-lang ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.footer-lang a,
.footer-lang .is-current {
  color: var(--ink);
  text-decoration: none;
}

.footer-lang a {
  opacity: 0.65;
  transition: opacity 0.25s ease;
}

.footer-lang a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-lang .is-current {
  font-weight: 600;
}

/* 5. Backdrop photographs (components.css `.streaks--*`, sections.css
   `.map--europe .map-dots`). A background image starts downloading on the
   first style pass, so the draft sent a phone for ~700 KB of blurred
   photographs (1 MB with the Europe map) of sections screens below the hero,
   on the same line as the hero photograph, before the first paint. They are
   held back until landing-behavior.ts marks the backdrop `is-near`: after the
   window load event, about a screen before the visitor reaches it (all of
   them under reduced motion or without IntersectionObserver), or at once for
   the section a link opens the page on. Scoped to `.js`, so a visitor without
   JavaScript — whom no script will ever mark — keeps every image. */
.js .streaks:not(.is-near),
.js .map--europe .map-dots:not(.is-near) {
  background-image: none;
}