/* BrowBestiie design tokens. Single source of truth for colour, type and spacing.
   Reference look: soft luxury minimal in WHITE, BLACK and SILVER, the Refy Beauty
   register (decision 2026-09-07, replaces the earlier warm beige). Every neutral is
   cool or dead neutral, never warm: the photography carries the only warmth on the
   page, and a beige hairline beside a cool grey reads as a mistake, not a palette.
   The accent is silver #a4a4aa, from the swatch Nikodem picked. */

:root {
  /* colour */
  --ink: #111113;
  --ink-soft: #5a5a60;
  --ink-muted: #8a8a92;
  --bg: #ffffff;
  --bg-alt: #f2f2f4; /* the grey band ground */
  --bg-deep: #111113;
  --line: #e4e4e8;
  --line-strong: #c9c9d0;
  --accent: #a4a4aa;
  --accent-soft: #d3d3d9;
  --on-dark: #f6f6f8;

  /* type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-thai: "Noto Sans Thai", "Thonburi", sans-serif;

  --fs-hero: clamp(2.75rem, 9vw, 6.5rem);
  /* one size for every page title: BROWBESTIIE MENU, BROWBESTIIE POLICY and
     COME SAY HELLO. They ran at three different clamps and measured 54, 51
     and 64px on the same screen. */
  --fs-h1: clamp(1.65rem, 5.6vw, 3.4rem);
  --fs-h2: clamp(1.7rem, 3.8vw, 2.9rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.5rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.05rem);
  --fs-small: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  --lh-tight: 1.12;
  --lh-body: 1.75;
  --ls-wide: 0.24em;
  --ls-mid: 0.12em;

  /* space and layout */
  --maxw: 1280px;
  --maxw-narrow: 860px;
  --pad-x: clamp(20px, 5vw, 72px);
  --section-y: clamp(64px, 9vw, 132px);
  --gap: clamp(16px, 2.5vw, 32px);
  --header-h: 76px;
  --announce-h: 40px;
  --radius: 2px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.45s;
}

@media (max-width: 860px) { :root { --header-h: 62px; --announce-h: 36px; } }

/* Thai needs more leading (marks sit above and below the line) and never
   uppercase or wide tracking, which break its composed glyphs. */
:root[lang="th"] {
  /* Latin faces stay FIRST. A browser resolves fonts per character, so Jost
     and Cormorant cover the Latin and Noto Sans Thai picks up every Thai
     glyph they do not have. With Noto first it was rendering the Latin too,
     which is why BROWBESTIIE came out heavier and narrower on the Thai
     page: the wordmark is Latin, and it was silently changing typeface. */
  --font-display: "Cormorant Garamond", "Noto Sans Thai", serif;
  --font-sans: "Jost", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, sans-serif;
  --lh-tight: 1.4;
  --lh-body: 1.95;
  --ls-wide: 0.04em;
  --ls-mid: 0.02em;
}
:root[lang="th"] .u-caps,
:root[lang="th"] .eyebrow,
:root[lang="th"] .btn,
:root[lang="th"] .brand,
:root[lang="th"] .field-label,
:root[lang="th"] .section-title--caps,
:root[lang="th"] .primary-nav a,
:root[lang="th"] .nav-extra-link,
:root[lang="th"] .footer-col h4,
:root[lang="th"] .col-head,
:root[lang="th"] .footer-motto,
:root[lang="th"] .footer-contact small,
:root[lang="th"] .lang-switch button,
:root[lang="th"] .hero-eyebrow,
:root[lang="th"] .nav-extra a,
:root[lang="th"] .nav-extra button { text-transform: none; }
/* Wordmark zostaje lacinski w obu jezykach, wiec .hero-title i .footer-brand
   celowo NIE tracą wersalików. To nazwa marki, nie zdanie do przetłumaczenia. */

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: var(--lh-tight); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }