/* =============================================================================
   NEW YORK BARBERS — base.css
   Tokens, fonts, reset, typography and layout helpers.
   Brand: NYB Brand Guidelines v2 (2026). Two colours only — black and white.
   Colour enters ONLY through photography. Bison (display) + Montserrat (body).
   See PROJECT-BRIEF.md §6 and decision log D1–D11.
   ============================================================================= */

/* ---------- Fonts (self-hosted woff2) ------------------------------------- */
/* Bison: client-supplied licence. Only Bold is used for display. */
@font-face { font-family: "Bison"; src: url("/assets/fonts/bison-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens --------------------------------------------------------- */
:root {
  /* Colour — the ONLY two brand colours. Everything else is a functional alpha
     of these two (rules, muted text, legibility scrims). Never a brand graphic. */
  --c-black: #000;            /* brand black — text, blocks, heavy bars */
  --c-white: #fff;            /* brand white — grounds, reversed text */
  --c-muted: rgb(0 0 0 / .64);        /* secondary text on white (≈5.9:1) */
  --c-muted-inv: rgb(255 255 255 / .70); /* secondary text on black (≈10:1) */
  --c-rule: rgb(0 0 0 / .16);         /* hairline rule on white */
  --c-rule-inv: rgb(255 255 255 / .22); /* hairline rule on black */
  --c-placeholder: #111;      /* image placeholder before load (dark, no CLS) */

  /* Type */
  --f-display: "Bison", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --f-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-cap: 0.72rem;                                   /* captions / eyebrows */
  --fs-sm: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --fs-base: clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  --fs-h4: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h3: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --fs-h2: clamp(2.6rem, 1.9rem + 3.2vw, 5.2rem);
  --fs-mega: clamp(3.25rem, 1.6rem + 7.4vw, 9rem);
  --lh-display: 0.9;
  --lh-body: 1.6;
  --track-display: 0.005em;
  --track-cap: 0.2em;          /* brand: captions Montserrat 600, 0.2em */

  /* Space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);    /* vertical rhythm between sections */

  /* Rules — brand "heavy bar" + "hairline rule" */
  --bar: 6px;
  --hair: 1px;

  /* Layout */
  --wrap: 1440px;
  --gut: clamp(1.25rem, 0.6rem + 3.2vw, 4.5rem);
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;
}
@media (min-width: 960px) { :root { --header-h: 88px; } }

/* ---------- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; background: var(--c-white); color: var(--c-black); font-family: var(--f-body); font-size: var(--fs-base); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Focus (visible on every interactive element) ------------------- */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--c-white); }

/* ---------- Accessibility helpers ----------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gut); top: -100px; z-index: 200; background: var(--c-black); color: var(--c-white); padding: .8rem 1.1rem; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.skip:focus { top: .75rem; }

/* ---------- Typography ----------------------------------------------------- */
/* Display: Bison, always uppercase, tight. */
.d-mega, .d-h2, .d-h3, .d-h4 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-display); line-height: var(--lh-display); }
.d-mega { font-size: var(--fs-mega); }
.d-h2 { font-size: var(--fs-h2); }
.d-h3 { font-size: var(--fs-h3); line-height: .95; }
.d-h4 { font-size: var(--fs-h4); line-height: 1; }

/* Caption / eyebrow: Montserrat 600, 0.2em tracking, uppercase (brand p4). */
.cap { font-family: var(--f-body); font-size: var(--fs-cap); font-weight: 600; letter-spacing: var(--track-cap); text-transform: uppercase; line-height: 1.5; }
.cap .star, .star { font-size: .9em; letter-spacing: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.55; font-weight: 400; }
.muted { color: var(--c-muted); }
.on-dark .muted, .muted-inv { color: var(--c-muted-inv); }
.measure { max-width: 34rem; }
.prose > * + * { margin-top: 1em; }

/* ---------- Layout --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--section); }
.on-dark { background: var(--c-black); color: var(--c-white); }

/* Hairline + heavy bar (brand supporting elements) */
.rule { border: 0; border-top: var(--hair) solid var(--c-rule); margin: 0; }
.on-dark .rule { border-top-color: var(--c-rule-inv); }
.bar { border: 0; border-top: var(--bar) solid var(--c-black); margin: 0; }
.on-dark .bar { border-top-color: var(--c-white); }

/* Section heading block: eyebrow → headline (brand: label → headline → one line) */
.sec-head { display: grid; gap: var(--s-4); align-content: start; }
.sec-head .cap { display: flex; align-items: center; gap: .6em; }

/* ---------- Photography --------------------------------------------------- */
/* D1: full colour is the default. .is-mono only where type sits on the photo. */
.ph { position: relative; overflow: hidden; background: var(--c-placeholder); }
.ph picture { display: block; width: 100%; height: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--mono img { filter: grayscale(1) contrast(1.08); }

/* ---------- Progressive enhancement: reveal only when JS is running (D5) -- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}