/* Tokens, reset, layout and type. Loaded on every page. */

:root {
  --ink: #141416;
  --ink-2: #3d3b37;
  --ink-3: #55524c;
  --slate: #5c6473;
  --stone: #8a877e;
  --stone-2: #a5a49d;
  --paper: #fbfbf9;
  --sand: #f4f3ef;
  --sand-2: #f7f6f2;
  --white: #fff;
  --line: #eae7df;
  --line-2: #e2ded4;
  --line-3: #d9d6cd;
  --blue: #3b74e8;
  --blue-deep: #0e3f8f;
  --blue-mid: #1c5fd0;
  --blue-soft: #7fa8f5;
  --blue-tint: #eef3fd;
  --gold: #f5c842;
  --amber: #8a6d00;
  --gold-line: #d9c98a;
  --night: #141a26;
  --night-2: #1a2130;
  --night-card: #1e2636;
  --night-line: #2d374d;
  --night-deep: #0b0f17;
  --night-ink: #f4f2ec;
  --night-body: rgb(240 238 232 / 72%);
  --night-muted: #8f97a8;
  --night-soft: #c8cbd4;
  --font: 'Poppins', system-ui, sans-serif;
  --serif: 'Playfair Display', serif;
  --maxw: 1712px;
  --gutter: 56px;
  --section-y: 104px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html { scroll-behavior: smooth; }

/* Breathing room above sections reached through #links. */
[id] { scroll-margin-top: 24px; }

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

img,
picture,
video,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

h1,
h2,
h3,
h4,
p,
figure { margin: 0; }

ul,
ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Keeps a hyphenated word on one line ("drop-offs"). */
.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- layout ---------- */

.container { max-width: var(--maxw); margin: 0 auto; width: 100%; }

.section { padding: var(--section-y) var(--gutter); }
.section--tight-bottom { padding-bottom: 0; }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--sand-2 { background: var(--sand-2); }
.section--white { background: var(--white); }

.section--night,
.section--night-glow,
.section--night-2 { color: var(--night-ink); background: var(--night); }

.section--night-glow {
  background: radial-gradient(1000px 520px at 15% 0%, rgb(76 134 240 / 16%), transparent 56%), var(--night);
}

.section--night-2 {
  background: radial-gradient(1000px 520px at 15% 0%, rgb(76 134 240 / 16%), transparent 56%), var(--night-2);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* ---------- section heads ---------- */

.head-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: start;
  margin-bottom: 52px;
}
.head-split--end { align-items: end; }
.head-split > p { padding-top: 6px; }
.head-split--end > p { padding: 0 0 6px; }

.head-center { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.head-center .lead { margin: 22px auto 0; max-width: 600px; font-size: 16px; }
.head-stack { max-width: 840px; margin-bottom: 52px; }
.head-stack .lead { margin-top: 20px; }

/* ---------- type ---------- */

.eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.eyebrow--gold { color: var(--gold); }
.eyebrow--blue { font-size: 16px; font-weight: 600; letter-spacing: .1em; color: var(--blue); margin-bottom: 20px; }

.display-1 {
  font-weight: 800;
  font-size: clamp(38px, 4vw, 64px);
  line-height: 1.06;
  letter-spacing: -2.2px;
  margin-bottom: 26px;
  text-wrap: pretty;
}

.display-2 {
  font-weight: 600;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.06;
  letter-spacing: -1.6px;
}
.display-2--lg { font-size: clamp(30px, 3.2vw, 50px); letter-spacing: -1.8px; }

.lead { font-size: 16.5px; line-height: 1.65; color: var(--slate); text-wrap: pretty; }
.lead--lg { font-size: 18px; line-height: 1.6; color: var(--ink-3); max-width: 780px; }
.accent { color: var(--blue); }
.accent-gold { color: var(--gold); }
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -1px; }

/* Any dark section carries .on-dark, which flips the shared type colours. */
.on-dark { color: var(--night-ink); }
.on-dark .lead { color: var(--night-body); }
.on-dark .accent { color: var(--blue-soft); }
.on-dark .eyebrow { color: var(--gold); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  :root { --gutter: 32px; --section-y: 80px; }

  /* Headings are set tight for large desktop sizes; open them up as they get smaller.
     The :not() keeps the EDGE case study's wordmark-style title as designed. */
  h1:not(.eg-hero__title) { line-height: 1.1; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head-split { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --section-y: 64px; }

  /* Line breaks placed for the desktop layout leave orphans on phones; let headings wrap naturally. */
  h1 br,
  h2 br,
  h3 br { display: none; }

  h1,
  h2,
  h3 { text-wrap: balance; }

  h1:not(.eg-hero__title) { line-height: 1.14; letter-spacing: -.02em; }

  /* h2[class] outranks the single-class heading styles in page CSS. */
  h2,
  h2[class] { line-height: 1.15; letter-spacing: -.02em; }
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
}