/* Site-wide design tokens. Every page links this file before style.css,
   so these are the single source of truth for colour, spacing and type —
   change a value here and every page follows. */
:root {
  /* Colour — one text colour for everything. */
  --bg: #ffffff;
  --text: #362727;
  /* Subtext colour: the text colour at 50% opacity. Done as a colour (not
     the opacity property) so it can't fight the fade-in reveal. */
  --text-subtle: rgb(54 39 39 / 50%);

  /* Page-edge margin — top, left, right, and bottom of the browser all
     match this. The gutter *between* grid columns is a separate, smaller
     value (--gutter) and stays independent of this. */
  --margin: 20px;
  --gutter: 10px;
  --row-gap: 20px;

  /* logo/nav row height = margin (top pad) + 44px (icon/nav height) +
     margin (bottom pad), so both edges of that row match --margin too. */
  --bar-h: calc(var(--margin) * 2 + 44px);

  /* Vertical spacing on project pages. Gaps *inside* a group of media
     are just the gutter (10px); these are the bigger steps between things. */
  --space-s: 15px;  /* a heading or paragraph → the media it introduces */
  --space-m: 40px;  /* header → intro paragraph */
  --space-intro: 80px; /* intro paragraph → the first media */
  --space-l: 150px; /* one group/section → the next (shrinks by breakpoint, see below) */
  --space-bottom: 100px; /* empty space at the very bottom of a project page */

  /* Type families. Sans is Instrument Sans (Medium, plus Regular for
     subtext); serif is Instrument Serif (used in italic). */
  --font-sans: 'Instrument Sans', sans-serif;
  --font-serif: 'Instrument Serif', serif;
  --tracking-sans: -0.03em;

  /* Type scale. Use via the .t-* classes in style.css. */
  --title-size: 46px;
  --title-lh: 52px;
  --h1-size: 20px;
  --h1-lh: 26px;
  --body-size: 28px;
  --body-lh: 33px;
  --subtext-size: 16px;
  --subtext-lh: 21px;
  /* Space between a body-text line's baseline and the bottom of its line
     box. The line box carries extra leading under the letters, so a gap
     measured from the box looks wider than it is; this is how much to
     pull back to measure from the text instead. It's (line height −
     size × 0.679) ÷ 2, where 0.679 is Instrument Sans's ascent minus
     descent — so it follows the body size/line height automatically. */
  --body-baseline-gap: calc((var(--body-lh) - var(--body-size) * 0.679) / 2);
}

/* Breakpoints (viewport width):
     above 1440px  desktop      — the values above
     901–1440px    laptop
     561–900px     tablet
     up to 560px   phone
   The title shrinks on smaller screens so the paragraph still fits its
   columns, and the padding between blocks tightens. */
@media (max-width: 1440px) {
  :root { --space-l: 120px; }
}
@media (max-width: 900px) {
  :root { --title-size: 36px; --title-lh: 42px; --space-l: 100px; }
}
@media (max-width: 560px) {
  :root { --title-size: 32px; --title-lh: 38px; --space-l: 80px; }
}