/* GoodFellaz Klagenfurt — design tokens.
   THE source of truth. Every colour, size, duration and easing lives here.
   A hard-coded hex or px value anywhere else in this project is a defect.
   Written from DESIGN.md before any layout code existed. Do not drift. */

/* Metric-compatible fallback for Barlow Condensed. */
@font-face {
  font-family: "Barlow Condensed Fallback";
  src: local("Arial Narrow"), local("Helvetica Neue Condensed"), local("Arial");
  size-adjust: 89%;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}

:root {
  /* ---- Colour ------------------------------------------------------------
     Legal pairings and measured ratios are in DESIGN.md § Colour.
     red is a LIGHT SOURCE, not an ink: 3.85:1 on ground, so never body copy.
     yellow is a chapter-card ground ONLY, never an accent.                   */
  --ground:      #0A0806;
  --surface:     #14100C;
  --oxblood:     #6E1218;
  --red:         #D42127;
  --tungsten:    #E8B76A;
  --bone:        #EFE7D8;
  --muted:       #A6A095;
  --yellow:      #F2C300;

  /* ---- Type families ---------------------------------------------------- */
  --font-display: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --font-data:    Manrope, system-ui, sans-serif;
  --font-body:    Manrope, system-ui, sans-serif;
  --font-quote:   Manrope, system-ui, sans-serif;

  /* ---- Type ladder — perfect fifth, 1.500. Pick a step, never interpolate. */
  --t-16:  1rem;
  --t-24:  1.5rem;
  --t-36:  2.25rem;
  --t-54:  3.375rem;
  --t-81:  5.0625rem;
  --t-122: 7.625rem;
  --t-183: 11.4375rem;

  /* Fluid roles. rem terms are present so text zoom still works (WCAG 1.4.4). */
  /* Ceiling raised from 15rem: at the 1920 target 15vw is 288px, and a 15rem
     cap was clipping it to 240px — the doctrine's own "timid hero" failure,
     arriving through the clamp rather than through the vw. 18rem clears 1920. */
  /* Width-fitted, not a guessed vw. Anton uppercase at --tr-display renders
     "GOODFELLAZ" at 4.152x its font-size (measured), so the wordmark spans
     the full measure and the hero reads edge to edge. 15vw put it at 1196px
     inside a 1920px frame — a wordmark that stopped short of the picture it
     sits on.

     The divisor here is 4.28, not 4.152: 100vw INCLUDES the scrollbar, so
     fitting to 4.152 overshoots the layout width by the scrollbar and the
     last glyph is shaved off by .hero's overflow. This is the fallback path.
     The exact fit is the container-query rule in sections.css, which measures
     the real content box. */
  /* --t-hero-max is also read by fitHeroWordmark() in motion.js as a hard
     ceiling, so a bad measurement can never grow the hero past it. */
  --t-hero-max: 32rem;
  --t-hero:    clamp(3.5rem, calc((100vw - 2 * var(--gutter)) / 4.28), var(--t-hero-max));
  /* Was 20vw/17.125rem, which rendered 274px against the hero's 240px: a
     decorative divider outshouting the brand. A chapter card is subordinate
     to the wordmark by definition, so it is capped below it. */
  --t-chapter: 13.25rem;
  --t-section: 7rem;
  --t-quote:   3rem;
  --t-body: 1.125rem;
  /* The manifesto is the page's only pinned statement and was rendering at
     --t-quote/34ch — 845px inside a 1680px stage, 44% of a 1920 screen, with
     the rest empty. It is display type, not body copy, and gets its own step. */
  --t-manifest: clamp(2rem, 7.6vw, 11rem);

  /* Small text roles from DESIGN.md § typography that were omitted from the
     first cut of this file. Added during the build so base.css carries no
     literals — see .olympus/07-qa.md § deviations. */
  --t-label:   0.875rem;
  --tr-quote:  -0.01em;        /* quote tracking; also the heroTrack scrub end state */

  /* ---- Type metrics ----------------------------------------------------- */
  --lh-hero:      0.95;
  --lh-display:   0.95;
  --lh-quote:     1.25;
  --lh-body:      1.6;
  --lh-ui:        1.35;
  --tr-display:  -0.025em;
  --tr-section:  -0.025em;
  --tr-body:      0;
  --tr-label:     0.14em;
  --measure:      62ch;
  --measure-quote: 34ch;

  /* ---- Space ------------------------------------------------------------ */
  --s-4:   4px;
  --s-8:   8px;
  --s-16: 16px;
  --s-32: 32px;
  --s-64: 64px;
  --s-128: 128px;
  --gutter: 40px;
  --section-pad: 128px;     /* block padding of every <main> section; 64 on phones */
  --tr-cta-narrow: 0.02em;  /* CTA tracking on phones, so the label holds one line */
  --chapter-height: 65svh;
  --footer-display: 22vw;
  /* Der Laden: the text column is sized to its content and ends on the right
     gutter; the photograph takes the rest. Equal columns left a 284px void
     right of the copy at 1920 and only 64px between picture and text. */
  /* Fits the viewport with the section's padding: 768 at 1080 tall, 644 at
     1440x900, never below 26rem. A fixed 768 overran a 900px screen. */
  --shop-media-height: clamp(26rem, calc(100svh - 2 * var(--section-pad)), 48rem);
  --shop-gap: 128px;
  --shop-text: 38rem;
  --shop-focus: 50% 60%;   /* keeps bottle and tin whole in the wider crop */
  --quote-after: 80px;

  /* ---- Layout caps ----------------------------------------------------------
     Container and component width ceilings the build needs and the first cut
     of this file did not carry. See .olympus/07-qa.md § deviations. */
  /* Was 1680px, then 1800px. 1800 was meant to sit the contained measure
     60px off each edge as a "deliberate break" — but the nav, hero type,
     ritual track and footer all hold the 40px gutter, and with a 17px
     scrollbar the offset came out at 51px: three left edges on one page,
     11–20px apart, which reads as a mistake. 1840 = 1920 − 2 × gutter, so at
     the target every contained block shares the gutter edge; wider screens
     still centre it. */
  --wrap:        1840px;   /* content container */
  --w-coldopen:   420px;   /* cold-open film strip cap — § 00 */
  /* A fixed cap can only ever leave slack inside --wrap, and it did twice
     (220px, then 310px against a 1680px measure). The grid now runs five
     1fr columns and the token is the floor the row may not fall below. */
  --w-crew:       240px;   /* crew card floor — § 07 */

  /* ---- Form ------------------------------------------------------------- */
  --radius: 0;              /* zero, everywhere. Not negotiable. */
  --rule:   1px;
  --letterbox: 2.39;        /* every piece of media, bars included */

  /* ---- Motion ----------------------------------------------------------- */
  --dur-micro: 150ms;
  --dur-move:  400ms;
  --dur-scene: 800ms;
  --dur-slam:  120ms;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-slam:   cubic-bezier(.34, 1.56, .64, 1);
  --stagger:   60ms;        /* capped at 8 elements */
  --scrub:     1;           /* smoothed, never 0 */
  --scrub-slow: 1.4;        /* the hero handoff and the chapter wipes */

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring: 2px solid var(--red);
  --focus-offset: 2px;
}

@media (max-width: 1439px) {
  :root { --t-section: 5.5rem; --t-quote: 2.5rem; --gutter: 32px; --shop-gap: 64px; }
}
/* --t-chapter below 900 is a no-JS floor that always fits; fitChapterTitles()
   grows it to 96% of the card's measure once fonts are in. The desktop
   13.25rem never scaled down and ran off both edges of a phone. */
@media (max-width: 900px) {
  :root { --t-section: 4rem; --t-quote: 2rem; --gutter: 24px; --chapter-height: 45svh; --quote-after: 48px;
          --t-chapter: 10vw; --shop-media-height: min(60svh, 110vw); }
}
@media (max-width: 560px) {
  :root { --t-section: 2.75rem; --t-quote: 1.5rem; --t-body: 1rem; --t-label: 0.8125rem; --gutter: 20px;
          --section-pad: 64px; }
}

/* Over a yellow chapter ground crimson is not separable from the surface —
   the ring switches to ground. See DESIGN.md § Accessibility. */
.chapter--yellow :focus-visible {
  outline-color: var(--ground);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-move:  0ms;
    --dur-scene: 0ms;
    --dur-slam:  0ms;
  }
}