/* Shared by every page: tokens, spacing scale, header, footer, section labels, text links */
:root {
  --ink: #1A1714;
  --accent: #D66300;
  --accent-deep: #9A5214;
  --hairline: #C6C5C4;
  --muted-1: #57524B;
  --muted-2: #645D53;
  --muted-3: #6F6759;
  --paper: #FFFFFF;
  --font-sans: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --gutter: 72px;

  /* Spacing scale. Every gap on the site uses one of these steps. */
  --space-2xs: 4px;
  --space-xs: 8px;    /* number → label, title → subtitle */
  --space-s: 16px;    /* eyebrow → title, image → caption, rule → section label */
  --space-m: 24px;    /* paragraph → paragraph, body → link */
  --space-l: 40px;    /* image → text, text → figure */
  --space-xl: 64px;   /* section label → content, column gaps */
  --space-2xl: 80px;  /* between items within a section */
  --space-3xl: 104px; /* between sections */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .7; }
p { text-wrap: pretty; }

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header and footer share one layout */
.site-header,
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
}

.site-header {
  padding: var(--space-l) 0 var(--space-m);
  border-bottom: 1px solid var(--hairline);
}

.site-footer {
  margin-top: var(--space-3xl);
  padding: var(--space-m) 0 var(--space-xl);
  border-top: 1px solid var(--hairline);
}

.site-logo {
  font: 400 20px/1 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px var(--space-l);
  font: 400 12.5px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Section label: "Featured Work", "The Problem" */
.section-label {
  margin: 0;
  font: 400 20px/1.4 var(--font-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Underlined uppercase link: "Read the case study", "Read article" */
.text-link {
  display: inline-block;
  font: 400 12px/1 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
}

@media (max-width: 1100px) {
  :root { --gutter: 40px; }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 80px;
  }
  .site-header { padding: var(--space-m) 0 var(--space-s); }
  .site-nav { gap: 10px 20px; font-size: 11.5px; }
}