/* ==========================================================================
   base.css — fonts, tokens, reset. Loads FIRST, on every page.

   WHY IT IS ONE FILE. If two pages each own a copy of @font-face and :root,
   whichever loaded last dictates them for the rest of the session. One file,
   loaded once, is the only arrangement that cannot drift.
   ========================================================================== */

/* ---- FONTS ---------------------------------------------------------------
   PP Formula Condensed Black — the only face in the design (every label is
   12px of it). Licensed file, served from fonts/.

   WOFF, NOT WOFF2, for now: the woff2 encoder was not available where the
   file was converted. woff is zlib-compressed and supported everywhere; it is
   ~49KB. Converting to woff2 later saves roughly a quarter — swap the src and
   the preload in index.html together.

   font-display: swap — text paints immediately in the fallback and reflows
   when the real face lands. That reflow is why NOTHING may be measured before
   document.fonts.ready (see js/anim.js).
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'PP Formula Condensed';
  src:url('../fonts/pp-formula-condensed-black.woff') format('woff');
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  --font-main:'PP Formula Condensed','Arial Narrow','Helvetica Neue Condensed',Impact,sans-serif;

  /* ---- COLOUR: one token per ROLE, never per value ----------------------
     Verbatim from the Figma file (it has no colour styles, so these were read
     off the layers themselves). */
  --c-ground:#000000;      /* frame fill */
  --c-ink:#fdf4df;         /* every label, the logo, the headline */
  --c-ink-soft:#faf1dd;    /* the SELECTED thumbnail's fill — a hair off --c-ink in the file, kept */
  --c-line:#56524a;        /* the HUD brackets and thumbnail corners */
  --c-line-soft:#c3bdb0;   /* inner corners of the selected thumbnail */
  --c-accent:#ff0000;      /* the 23px underline on the selected thumbnail — pure red in the file */

  /* ---- TYPE --------------------------------------------------------------
     One size in the whole frame: 12px, leading 85%.

     TRACKING IS 0 AND KERNING IS OFF, AGAINST THE FILE'S NUMBERS, BECAUSE THE
     FILE'S PIXELS SAY SO. The text nodes read "tracking -2%", but their
     rendered INK in Figma is as wide as the untracked, unkerned string:
     "Worn in the name of your health" inks 135.86px in Figma; in the browser
     it advances 127.6 with -0.02em, 135 with 0, 136 with 0 and no kerning.
     Eight labels were compared and "0 + no kerning" matched all eight to
     within a pixel; -0.02em was 4-8px short on every one. */
  --ui-12:12px;
  --ui-lh:.85;
  --ui-track:0em;

  /* ---- SPACING -----------------------------------------------------------
     The frame runs on a 5px inset: logo, nav bar, brackets, the right
     column's edge, the thumbnails, the scan button. */
  --gut:5px;

  /* ---- THE DESIGN FRAME -------------------------------------------------
     A RECORD, NOT A LEVER. The percentages in sections.css are pre-divided
     literals (867/1440 is written as 60.2083%). Changing these changes
     nothing on screen. Frame: "Index", node 15197:341. */
  --frame:1440;
  --frame-h:900;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-main);
  font-weight:900;
  color:var(--c-ink);
  background:var(--c-ground);
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

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

/* ---- THE ANTI-FLASH RULE -------------------------------------------------
   Anything JS will animate in starts hidden, and js/anim.js removes the class
   from <html> once the fonts are ready and the first timeline is built. If JS
   never runs, the class is never added in the first place (it is set by the
   inline head script only when JS is alive), so the page degrades to plain
   visible text rather than a blank screen.
   -------------------------------------------------------------------------- */
html.is-booting [data-anim]{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  html.is-booting [data-anim]{ opacity:1; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* THE PAGE TRANSITION (js/transition.js): the browser's own cross-page
   view transition — the old page is held as a picture over the new one,
   and the new page tears it in half down the middle (the tear is drawn by
   js/transition.js as a clip on the old picture) */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:none; z-index:2; }
::view-transition-new(root){ animation:none; }
::view-transition-group(root){ animation:nf-hold .8s linear; background:#000; }   /* the torn edges: black, the site's only dissolve colour */
@keyframes nf-hold{ from{ opacity:1; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation:none; } }

/* TEXTURED TITLES — every big title on the site carries the hero
   headline's concrete: the same seamless tile (js/texture.js: --tex-img /
   --tex-size, fine specks) multiplied into the title's own colour, cut to
   the letters. One element, its own background: no extra layer and no
   blend with what is behind it (cheap to paint, nothing per frame). */
.ct-w, .gm-tx, .ft-title, .st-card__title, .tk-about, .tk-title, .tk-endword{
  --tx-ink:var(--c-ink);
  color:transparent;
  /* the title's own colour, exactly, with the concrete's specks on it (js/texture.js --tex-specks) */
  background-image:var(--tex-specks, none), linear-gradient(var(--tx-ink), var(--tx-ink));
  background-size:var(--tex-size, 768px), 100% 100%;
  background-repeat:repeat, no-repeat;
  -webkit-background-clip:text; background-clip:text;
}
.st-card__title{ --tx-ink:#3e0101; }
.tk-about, .tk-title, .tk-endword{ --tx-ink:#000; }