/* ============================================================
   Type variants — alternate font pairings for the same design.

   Every display face here is a current, widely-used choice in
   brand/marketing studio work, not a random pick:

     Space Grotesk  — the default. Technical grotesque, the house
                      face of a lot of product/growth studios.
     Outfit         — clean geometric. The safest "modern agency"
                      look; reads well at poster sizes and at 15px.
     Plus Jakarta   — warm humanist geometric. The SaaS/startup
                      standard; friendlier than Outfit, still sharp.
     Sora           — techier geometric with squared terminals.
                      Leans product/platform rather than campaign.
     Manrope        — quiet, refined, very even colour. The pick when
                      you want the work to shout and the type not to.
     Schibsted      — contemporary grotesque with a slight edge to the
                      letterforms. Newsroom-modern; sharper than Outfit.
     Syne           — extended, slightly odd display face used by
                      creative/branding studios that want character.
     Bricolage      — contemporary editorial grotesque; the current
                      "design-forward" pick, more personality.
     Fraunces       — soft, characterful variable serif. Warm and
                      brand-led; the friendliest serif of the set.
     DM Serif       — classic high-contrast editorial pairing with
                      DM Sans underneath. Traditional, trustworthy.
     Instrument     — serif display against a sans body. Premium,
                      editorial, reads as consultancy rather than ads.
     Oswald         — condensed poster face. Maximum shout on the
                      uppercase hero, tightest horizontal footprint —
                      and unlike most condensed display faces it ships
                      real weights, so nothing gets faux-bolded.

   Body text stays Inter except where a pairing brings its own
   (DM Serif + DM Sans), so the display face is the main variable
   you are judging.

   Activate with ?font=<key>, or use the dropdown in the bar.
   No key = default.

   --hero-vw / --hero-max are tuned per variant because the hero
   headline is uppercase and each face sets to a different width —
   the longest line ("BRANDS THAT") must stay on one row. The values
   are derived from measured glyph widths, not guessed.
   ============================================================ */

/* ---- Switcher bar (preview tool — delete with js/font-switcher.js) ---- */
:root { --fontbar-h: 52px; }

.fontbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--fontbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: #12100f;
  border-bottom: 1px solid rgba(250, 245, 239, 0.12);
  overflow-x: auto;
  scrollbar-width: none;
}
.fontbar::-webkit-scrollbar { display: none; }
.fontbar__label {
  flex: none;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 245, 239, 0.45);
  padding-right: 4px;
}
.fontbar__select {
  flex: none;
  max-width: 260px;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(250, 245, 239, 0.22);
  border-radius: 8px;
  background-color: rgba(250, 245, 239, 0.06);
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf5ef' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.fontbar__select:hover { border-color: rgba(250, 245, 239, 0.45); }
.fontbar__select:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
/* the native option list must stay dark-on-light or it is unreadable */
.fontbar__select option { background-color: #fff; color: #12100f; }
.fontbar__note {
  flex: none;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11.5px;
  color: rgba(250, 245, 239, 0.5);
  white-space: nowrap;
}
@media (max-width: 900px) { .fontbar__note { display: none; } }

.fontbar__hide {
  flex: none;
  margin-left: auto;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(250, 245, 239, 0.1);
  color: rgba(250, 245, 239, 0.7);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.fontbar__hide:hover { background: rgba(250, 245, 239, 0.2); color: #fff; }

/* push the site's own fixed nav below the bar while it's on screen */
html[data-fontbar] .nav { top: var(--fontbar-h); }
@media (max-width: 640px) {
  :root { --fontbar-h: 46px; }
  .fontbar__select { max-width: 190px; }
}

/* ============ The pairings ============ */

/* Outfit + Inter — clean geometric, the safe modern-agency default */
html[data-font="outfit"] {
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 6.4vw;
  --hero-max: 95px;
}

/* Plus Jakarta Sans + Inter — warmer, friendlier, SaaS/startup standard */
html[data-font="jakarta"] {
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 6.4vw;
  --hero-max: 94px;
}

/* Sora + Inter — squared, product-platform energy */
html[data-font="sora"] {
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 5.9vw;
  --hero-max: 87px;
}

/* Manrope + Inter — quiet and even; lets the work do the talking */
html[data-font="manrope"] {
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 6.4vw;
  --hero-max: 95px;
}

/* Schibsted Grotesk + Inter — contemporary grotesque with an edge */
html[data-font="schibsted"] {
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 6.0vw;
  --hero-max: 88px;
}

/* Syne + Inter — extended display with real character; creative-studio energy */
html[data-font="syne"] {
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 5.4vw;
  --hero-max: 80px;
}

/* Bricolage Grotesque + Inter — contemporary editorial grotesque */
html[data-font="bricolage"] {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 7.0vw;
  --hero-max: 103px;
}

/* Fraunces + Inter — soft characterful serif, warm and brand-led.
   Has an optical-size axis, so its width does not scale linearly —
   this size was measured at the rendered size, not extrapolated. */
html[data-font="fraunces"] {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 6.0vw;
  --hero-max: 88px;
}

/* DM Serif Display + DM Sans — classic editorial pairing */
html[data-font="dmserif"] {
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --hero-vw: 6.8vw;
  --hero-max: 100px;
}
html[data-font="dmserif"] .hero__title { letter-spacing: -0.005em; }

/* Instrument Serif + Inter — serif headline against a sans body; premium/editorial */
html[data-font="instrument"] {
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 8.8vw;
  --hero-max: 130px;
}
html[data-font="instrument"] .hero__title { letter-spacing: 0; }
html[data-font="instrument"] h1,
html[data-font="instrument"] h2,
html[data-font="instrument"] h3 { letter-spacing: -0.005em; }

/* Oswald + Inter — condensed poster face, maximum shout on the caps hero */
html[data-font="oswald"] {
  --font-display: "Oswald", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero-vw: 7.5vw;
  --hero-max: 111px;
}
html[data-font="oswald"] .hero__title { letter-spacing: 0.005em; }

/* Single-weight families (Instrument Serif, DM Serif Display) —
   stop the browser faux-bolding them into mush */
html[data-font="instrument"] h1,
html[data-font="instrument"] h2,
html[data-font="instrument"] h3,
html[data-font="instrument"] .stat strong,
html[data-font="dmserif"] h1,
html[data-font="dmserif"] h2,
html[data-font="dmserif"] h3,
html[data-font="dmserif"] .stat strong { font-weight: 400; }