@font-face {
  font-family: "Young Serif";
  src: url("/fonts/young-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --paper: #faf6ee;
  --ink: #26221d;
  --muted: #5f574d;
  --blue: #2d4f78;   /* rubber-stamp ink on a paper bag */
  --line: #d8cfbf;
  --display: "Young Serif", Georgia, serif;
  --text: "Alegreya", Georgia, serif;
  --measure: 36rem;
  --page: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.25rem;
  line-height: 1.6;
  padding: 0 20px;
}
img { display: block; width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

/* Header */
.top {
  max-width: var(--page); margin: 0 auto;
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--ink);
}
.wordmark { font-family: var(--display); font-size: 1.45rem; color: var(--ink); text-decoration: none; }

/* Tagline */
.opening { max-width: var(--page); margin: 0 auto; padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 5vw, 56px); }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 17ch; letter-spacing: -0.01em; }
.underlined { position: relative; white-space: nowrap; }
.underlined svg {
  position: absolute; left: 0; right: 0.4em; bottom: -0.12em; width: calc(100% - 0.4em); height: 0.22em; overflow: visible;
}
.underlined path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.wide { max-width: var(--page); margin: 0 auto; }

/* Headline: the lead-in to the three crises */
.headline {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 64px);
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.3;
}

/* The three crises */
.issues { max-width: 1040px; margin: 0 auto; }
.issue {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px clamp(28px, 5vw, 64px);
  padding: clamp(32px, 5vw, 48px) 0;
  border-top: 1px solid var(--ink);
}
.issue:last-child { border-bottom: 1px solid var(--ink); }
.issue h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.issue-body { max-width: var(--measure); }

/* Two more concepts, side by side */
.pair {
  max-width: var(--page); margin: 0 auto;
  padding-top: clamp(64px, 9vw, 112px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px);
}
.pair img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Closing */
.hello {
  max-width: 1040px; margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) 0 clamp(64px, 9vw, 104px);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hello-text { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.35; }

.bottom {
  max-width: var(--page); margin: 0 auto;
  padding: 18px 0 32px; border-top: 1px solid var(--ink);
  font-size: 1rem; color: var(--muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px;
}

@media (max-width: 760px) {
  .issue { grid-template-columns: 1fr; }
  .hello { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 1.15rem; padding: 0 16px; }
  .wordmark { font-size: 1.25rem; }
  /* Same stroke as the SVG, as a background so it follows the text if it wraps */
  .underlined {
    white-space: normal; padding-bottom: 0.14em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 3, 70 12, 105 7 S 170 3, 197 8' fill='none' stroke='%232d4f78' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat left bottom / 100% 0.22em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .underlined svg { display: none; }
}