/* base.css — newTudo-home · PAGE-SCAFFOLD is the sole owner of the global frame.
   Source: pipeline/templates/code/base-template.md + brief-page.md §1 (gutter 240 D / 16 M, anchor 390, FD-184). */

/* ============================================
   CSS RESET
============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: clip;             /* clip, not hidden — hidden breaks position: sticky (header is sticky, BA-H1) */
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);   /* PAGE_FIX 1 (FD-EA): anchors land below the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  min-width: 320px;
  /* No cap on <body> (user rule 2026-10-19): the 1920 page cap lives on `.container`, which every top-level block
     carries (FD-V, tools/container_gate.py) — so header / footer bands can paint past 1920 (.container--full below). */
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  background: var(--color-bg);
  -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; }
}

/* ============================================
   CONTAINER — defined ONLY HERE, once, nowhere else (FD-V: on every top-level
   <section>/<header>/<footer> ITSELF; never on an inner wrapper).
   Horizontal padding = --gutter (tokens.css, per band):
     mobile  clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 240px)
     tablet  clamp(21.66px, calc(21.66px + (var(--max-vw) - 768px) * 0.025), 240px)
     desktop clamp(128px, calc(240px * (var(--max-vw) / var(--vw-base))), 240px)
   Never a `padding` shorthand on a .container section (it wipes the gutter).
============================================ */
.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Bleed override — keeps the 1920 cap, removes the horizontal padding. The section itself
   paints the full-width background; its inner .<slug>__content wrapper carries the Figma paddings. */
.container--bleed {
  padding-left: 0;
  padding-right: 0;
}

/* FULL-WIDTH BAND — header, the announcement bar above it, footer ONLY (user rule 2026-10-19).
   Above 1920 the band's BACKGROUND (colour, bg image, texture) runs to the viewport edge, while its CONTENT stays in
   the same 1920 frame as every other section: --page-inset = the space outside that frame on each side (0 at <= 1920,
   so nothing changes up to 1920). Pattern A: inset + gutter on the band itself. Pattern B-edge (.container--bleed):
   inset only — the inner .<slug>__content keeps carrying the gutter. A bg <img> at `inset: 0` covers the padding box,
   i.e. the full width. */
.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);
}