/* ==========================================================================
   Reset, document, and the shared section scaffolding

   Rules that apply to bare elements, plus the .section / .section-label
   wrapper that every page reuses.
   ========================================================================== */


/* ---- Reset and document ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
/* Pins the page while the lightbox is open; js/main.js restores the offset. */
body.scroll-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}


/* ---- Section wrapper ---- */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}
/* ---- Section headings ---- */
.section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 70px var(--gutter);
}
/* Figma gives every section heading as Instrument Serif 28px (style_759798de),
   which is also what `.context-copy h2` already used. Confirmed independently
   against designs/desktop-home.png: "Case Studies" measures 115px of ink there,
   and 28px renders 115.1px where 38px renders 156.6px. */
/* Warm brown, not the near-black --text these inherited. The section headings
   on the cream ground all sample in the #5B4E3D-#6B5C4A band: "What shipped"
   (429:153853) #5B4E3D, "What Made This Work" (429:156013) #6B5C4A, "Key
   Stages" #6B5C4A on 84.51 (436:188674) and #5B4E3D on Calendly (429:155982).
   The file is not self-consistent inside that band, so all of them take one
   token, --text-body, rather than carrying a second near-identical value.
   .stages-head h2 uses the same token, which is what makes the headings match
   across all five pages.

   .context-copy h2 is deliberately left out: "Context & Problem" is #2C2416
   in the file (429:152127), a genuinely darker heading, and it keeps --text. */
.section h2, .made-this-work-copy h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--text-body);
  margin: 0 0 40px;
}


/* ---- Section label (eyebrow) ---- */
.section-label {
  font-family: var(--font-mono);
  /* 11px is the design value. style_1247d49d in the 2026 frames is Geist Mono
     Regular 11px UPPER, and it is the style behind every eyebrow on every
     page: the at-a-glance keys, "Leading through it", "Program", "Screens and
     System Diagram", "Insights and principles". The site shipped 12px.

     The footer is the one place the file really does use 12px (429:156695),
     so it keeps its own size below rather than pulling the base back up. */
  font-size: 11px;
  letter-spacing: 0.08em;
  /* Accent by default. Every eyebrow in the 2026 frames is #3185FC -- the
     at-a-glance keys, "Leading through it", "Program", "Screens and System
     Diagram", "Insights and principles" and the footer's "Get in touch" all
     sample it. The old default was --text-muted, so the two labels that never
     got the .accent class -- the footer on all five pages, and "Selected
     projects" on the home page -- rendered warm grey against a blue design. */
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
/* Kept so the class already in the markup stays meaningful; it no longer
   changes anything. Do not give it a second colour -- override on the section
   instead, the way .impact-head does for the dark ground. */
.section-label.accent { color: var(--accent); }


/* ---- Mono eyebrow and link arrow ---- */
.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.link-arrow {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 14px;
}