/* =========================================================
   brand.css — the teaser's design tokens, extracted
   =========================================================

   The teaser (lab/layouts/three-acts.html) is the brand reference. Everything
   in this file is lifted from lab/layouts/three-acts.css so the info site can
   read as its next chapter rather than as a different site.

   Load order matters: styles.css, then brand.css, then the page's own sheet.
   brand.css only redefines tokens, so it must come after styles.css declares
   them and before anything that depends on the result.

   NOTE: three-acts.css still carries its own copy of these declarations and has
   deliberately NOT been changed — it is approved and live, and the safest way
   to guarantee "the teaser renders identically" is to not touch its files at
   all. Once the info site is signed off, three-acts.css should drop its copy
   and load this file instead. Until then, keep the two in sync by hand.
   ========================================================= */

/* ---------- 1. Brand face ----------
   UNIQLO Pro, the face uniqlo.com uses (client-supplied, UniqloProFamily).
   Helvetica Neue stays as the fallback, which is also uniqlo.com's own. */
@font-face {
  font-family: "UNIQLO Pro";
  src: url("/assets/fonts/UniqloProRegular.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UNIQLO Pro";
  src: url("/assets/fonts/UniqloProBold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "UNIQLO Pro", "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", sans-serif;

  /* ---------- 2. Type scale ----------
     UNIQLO Pro sets small, so body text steps up: 18px body, 15px small.
     --step-1 through --step-4 are inherited from styles.css unchanged. */
  --step--1: 0.9375rem;
  --step-0: 1.125rem;

  /* ---------- 3. The map-grid texture ----------
     From the teaser's act-1 street grid. Reused here as a very quiet ground
     behind the key art, at the same weights the teaser draws it. */
  --grid-line: #f0f0f0;
  --grid-line-soft: #f5f5f5;
  --grid-step: 72px;
}

/* ---------- 4. Header + lockup ----------
   The lockup drives the header height, exactly as on the teaser. */
:root {
  --logo-h: clamp(64px, 5.6vw, 80px);
  --header-h: calc(var(--logo-h) + 32px);
}
.header .logo img { height: var(--logo-h); max-height: none; }

/* ---------- 5. Buttons ----------
   19px bold counts as large text, so white on #ff0000 (4:1) meets WCAG AA. */
.btn:not(.btn-sm) { font-size: 1.1875rem; }

/* ---------- 6. Reusable grid texture ----------
   The teaser's Union Square grid, flattened into a repeating background.
   Deliberately faint: it is a ground, never a pattern you look at. */
.brand-grid {
  background-color: var(--white);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-soft) 1px, transparent 1px);
  background-size: var(--grid-step) var(--grid-step);
}