/* ============================================================================
   Research Lunch Club — Base
   @font-face (local Onest), modern reset, base element typography.
   Load order: tokens.css -> base.css -> components.css
   ========================================================================== */

/* ---- Onest (local) -------------------------------------------------------- */
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/Onest/Onest-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/Onest/Onest-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Onest/Onest-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Onest/Onest-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Onest/Onest-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/Onest/Onest-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/Onest/Onest-Black.ttf") format("truetype");
}

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking);
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip; /* safety net against decorative bleed on small screens */
  /* Sticky footer: nav + main + footer stack; main grows so the footer is
     always pinned to the bottom of the viewport, even on short pages. The
     decorative shape sprite is position:absolute, so it stays out of flow. */
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
/* Consistent top gap between the floating nav and the first card on every
   page, regardless of whether the page opens with .hero, .cities-fest or
   .section. */
main > section:first-child { padding-top: var(--space-6); }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* ---- Headings & text ------------------------------------------------------ */
h1, h2, h3, h4 {
  font-weight: var(--fw-black);
  line-height: var(--lh-head);
  letter-spacing: var(--tracking);
  color: var(--text);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lead); }

p { text-wrap: pretty; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

strong, b { font-weight: var(--fw-bold); }

ul, ol { padding-left: 1.2em; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

::selection { background: var(--rlc-orange); color: #fff; }

/* ---- Shared layout helpers ------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(32px, 4.5vw, 56px); }
/* Stacked sections otherwise double their padding (e.g. 115+115 ≈ 230px between
   content on desktop). Collapse the top padding when a section follows another so
   the gap is one section's rhythm, not two. The previous section's padding-bottom
   still provides ample breathing room. */
.section + .section { padding-top: 0; }

.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;
}

/* Type utilities */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: var(--fw-xbold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--text-muted); font-weight: var(--fw-regular); }
.muted { color: var(--text-muted); }
/* WCAG: in-text links must be distinguishable by more than colour — underline
   links sitting inside body copy (paragraphs, FAQ answers, hero notes). */
.faq-a a, .hero__note a, .lead a, p a { text-decoration: underline; text-underline-offset: 2px; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 60ch; }
.measure-narrow { max-width: 46ch; }