/* Tokens. Reuse these; don't add one-off values. */
:root {
  --color-ink: #141414;
  --color-muted: #5f5e5a;
  --color-rule: #d6d4ce;
  --color-paper: #fff;
  --color-plate: #eeede9;

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(2.5rem, 6vw, 4.75rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 8rem;

  --measure: 36rem;
  --page: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--color-paper); color: var(--color-ink); }

body {
  margin: 0 auto;
  max-width: var(--page);
  padding: 0 var(--space-3);
  font: var(--text-base) / 1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 0.2em; }

img, video { display: block; width: 100%; height: auto; background: var(--color-plate); }

/* Mono labels: wordmark, meta, section labels, captions */
.wordmark, .meta, h2, figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-ink);
}

.wordmark {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.meta { color: var(--color-muted); text-transform: uppercase; }

main { padding-bottom: var(--space-4); }

/* Intro: headline and text beside the photograph */
.intro {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-4) 0 var(--space-5);
}

h1 {
  max-width: 12ch;
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

p { max-width: var(--measure); margin: 0 0 var(--space-2); }

.lead { font-size: var(--text-lg); line-height: 1.4; }

/* Numbered sections: label column, body column */
.section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0 var(--space-5);
  border-top: 1px solid var(--color-ink);
}

h2 {
  margin: 0;
  font-weight: 600;
  line-height: 1.6;
  text-transform: uppercase;
}

.body { grid-column: 2; }

/* Figures */
figure { margin: 0; }

figcaption {
  padding-top: var(--space-1);
  line-height: 1.5;
  color: var(--color-muted);
}

figcaption strong { display: block; color: var(--color-ink); font-weight: 600; text-transform: uppercase; }

.grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-2);
  margin-top: var(--space-3);
}

.note { grid-column: 2; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }

.demo { grid-column: 1 / -1; margin-top: var(--space-3); }

.site-footer {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.site-footer p { margin: 0; }

@media (max-width: 52rem) {
  .intro, .section { grid-template-columns: 1fr; }
  .intro { gap: var(--space-3); padding-bottom: var(--space-4); }
  .section { padding-bottom: var(--space-4); }
  .body, .note { grid-column: 1; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 34rem) {
  body { padding: 0 var(--space-2); }
  .grid { grid-template-columns: 1fr; }
}