/* ============================================================
   Base — fonts, reset, root typography, utilities
   Loaded after tokens.css.
   ============================================================ */

/* ---- Self-hosted fonts ---------------------------------- */
@font-face {
  font-family: "Biennale";
  /* ?v=2 = licensed full Biennale Bold (replaces the demo). The version query busts any
     browser/CDN cache still holding the old 25KB demo binary at the same filename. */
  src: url("../fonts/Biennale-Bold.otf?v=2") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hello Imperfect";
  src: url("../fonts/HelloImperfect.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gabarito";
  src: url("../fonts/Gabarito-Variable.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--color-link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--color-link-hover); }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---- Headings ------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }
p { text-wrap: pretty; }
p + p { margin-top: var(--space-sm); }

/* ---- Layout helpers ------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--flow, var(--space-sm)); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 60ch; }
.measure-sm { max-width: 46ch; }
/* Composition line-break: forces an exact wrap on larger screens, collapses to a
   normal space on phones so desktop-pinned breaks don't wrap awkwardly. */
@media (max-width: 600px) { br.br-desk { display: none; } }

/* Color-block sections */
.bg-white  { background: var(--c-white); }
.bg-cream  { background: var(--c-cream); }
.bg-cream-warm { background: var(--c-cream-warm); }
.bg-cream-pale { background: var(--c-cream-pale); }
.bg-ivory  { background: var(--c-ivory); }
.bg-sage-pale { background: var(--c-sage-pale); }
.bg-mint   { background: var(--c-mint); }
.bg-olive  { background: var(--c-olive); color: var(--color-on-dark); }
.bg-orange { background: var(--c-orange); color: var(--c-white); }
.bg-lime   { background: var(--c-lime); color: var(--c-olive); }
.bg-blue   { background: var(--c-blue); }
.bg-blue-pale { background: var(--c-blue-pale); } /* slate wash (newsletter / About testimonials) */
.on-dark, .bg-olive h1, .bg-olive h2, .bg-olive h3, .bg-olive h4 { color: var(--color-on-dark); }
.bg-orange h1, .bg-orange h2, .bg-orange h3 { color: var(--c-white); }

/* Eyebrow / kicker label */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-200);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-orange);
}
.bg-olive .eyebrow, .bg-orange .eyebrow { color: var(--c-lime); }

/* Text accents */
.hl-orange { color: var(--c-orange); }
.hl-lime { color: var(--c-lime); }
/* ============================================================
   HIGHLIGHT BAR  ·  .hl-mark
   The reusable "colored bar behind text" treatment (a marker/underline
   that sits behind the words, shorter than the letters). Used site-wide
   — when a screenshot shows text with a colored bar behind/under it, that
   is .hl-mark. It works across multiple lines and never drops behind a
   section background (painted as the text's own background, not a pseudo).
     Color  → use a modifier (--lime / --blue / --muted / --peach), or set --hl-color.
     Tune   → --hl-height (thickness) and --hl-pos (vertical position).
   ============================================================ */
.hl-mark {
  --hl-color: var(--c-lime);
  --hl-height: 0.34em;   /* bar bottom terminates at the bottom of the letters — site-wide default */
  --hl-pos: 76%;
  background-image: linear-gradient(var(--hl-color), var(--hl-color));
  background-repeat: no-repeat;
  background-size: 100% var(--hl-height);
  background-position: 0 var(--hl-pos);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: 0.04em;
}
.hl-mark--lime  { --hl-color: var(--c-lime); }
.hl-mark--blue  { --hl-color: var(--c-blue); }
.hl-mark--muted { --hl-color: rgba(168, 184, 199, 0.55); } /* --c-blue, faint */
.hl-mark--slate { --hl-color: rgba(118, 128, 124, 0.72); }  /* solid slate-gray bar — Speaking hero "Understand and Articulate" */
.hl-mark--lime-soft { --hl-color: rgba(214, 216, 42, 0.5); } /* --c-lime, faint — for white text on olive */
.hl-mark--peach { --hl-color: rgba(233, 104, 45, 0.42); } /* --c-orange, faint */
.hl-mark--salmon { --hl-color: var(--c-tint-salmon); }     /* solid salmon bar — Founders "Since 2014" */
.hl-mark--workshops { --hl-color: rgba(36, 44, 31, 0.45); --hl-height: 0.22em; --hl-pos: 86%; } /* dark-olive bar under Workshop §3 "WORKSHOPS" */
.hl-mark--olive { --hl-color: var(--c-olive); }            /* solid dark-olive-green bar — Workshop hero "in Real-Time." (cream text over it) */
.hl-mark--orange { --hl-color: var(--c-orange); }          /* solid orange — inner-page hero title over photo */
.hl-mark--white { --hl-color: rgba(255, 255, 255, 0.30); } /* faint white, for text over photos */

/* Accessibility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-sm); top: -100%;
  background: var(--c-olive); color: var(--c-cream);
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm); z-index: 200;
}
.skip-link:focus { top: var(--space-sm); }
:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}