/* ============================================
   base.css — reset + body + .container (pipeline/templates/code/base-template.md)
============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: clip;             /* clip, not hidden — hidden breaks position: sticky */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  min-width: 320px;
  /* NO max-width (user rule 2026-10-19) — the 1920 cap lives on .container. */
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

ul, ol { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  text-transform: inherit;
  letter-spacing: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* PAGE GUTTER — brief-page §1 (mobile 20 DRAWN @390, desktop 80 INVENTED @1440) */
:root {
  --gutter: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 80px);
}

@media (min-width: 768px) {
  :root {
    /* no tablet layer: M-767 → M-max (FD-184) */
    --gutter: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 80px);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: clamp(57px, calc(80px * (var(--max-vw) / var(--vw-base))), 107px);
  }
}

/* CONTAINER — defined ONLY HERE. max-width 1920 IS the page cap (FD-W). */
.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--bleed { padding-left: 0; padding-right: 0; }

/* FULL-WIDTH BAND — header + footer only (user rule 2026-10-19). */
.container--full {
  --page-inset: max(0px, (100% - 1920px) / 2);
  max-width: none;
  padding-left: calc(var(--gutter) + var(--page-inset));
  padding-right: calc(var(--gutter) + var(--page-inset));
}
.container--full.container--bleed {
  padding-left: var(--page-inset);
  padding-right: var(--page-inset);
}

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

/* ---------------------------------------------------------------------------
   Scroll reveal — the same fade-up as the main site (`fadeup` in
   src/app/AnimationsInit.tsx) and the other /lp/ landings, so they read as one
   family. js/main.js marks the blocks with [data-animate].

   Gated on .js-reveal, set by an inline script in <head> before the first
   paint: if main.js never runs, the page stays visible instead of blank.
   --------------------------------------------------------------------------- */
:root.js-reveal [data-animate] {
  /* y 50 -> 0 over 0.8s on GSAP power2.out, as its CSS cubic-bezier */
  --reveal-shift: 50px;
  --reveal-duration: 0.8s;
  --reveal-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

/* Images travel further and slower, like `image-fadeup` (y 80 -> 0 over 1s) */
:root.js-reveal [data-animate="image"] {
  --reveal-shift: 80px;
  --reveal-duration: 1s;
}

:root.js-reveal [data-animate].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  :root.js-reveal [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* A line break drawn in the mobile frame only: <br class="br-mobile">. Keep a
   space before it in the markup, so the words stay apart once it is hidden. */
@media (min-width: 768px) {
  .br-mobile { display: none; }
}

/* Keep a hyphenated compound on one line ("high-risk"): browsers break after a hyphen. */
.nowrap { white-space: nowrap; }