/* ngin8r

   Deep navy, one grotesk, amber reserved for the one thing you can click.
   Archivo is variable on the width axis, so display and body are the same
   family at different widths rather than two families. */

/* Archivo, self hosted so the page pulls nothing off-origin.
   SIL Open Font License 1.1, see archivo-OFL.txt. One variable file covers
   every width and weight used here. Latin subset only; the copy is ASCII. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --ground:    #16224A;
  --raised:    #1C2857;
  --type:      #EEF0F7;
  --type-soft: #A2AAC8;
  --rule:      #2E3D74;
  --accent:    #F5C45E;

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --t-small:   0.875rem;                        /* 14 */
  --t-body:    1.0625rem;                       /* 17 */
  --t-lead:    1.25rem;                         /* 20 */
  --t-sub:     clamp(1.15rem, 2vw, 1.6rem);     /* 18 - 26 */
  --t-title:   clamp(1.75rem, 3.4vw, 2.9rem);   /* 28 - 46 */
  --t-display: clamp(2.5rem, 6.4vw, 5.25rem);   /* 40 - 84 */

  --gutter: clamp(20px, 5vw, 76px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--type);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul { margin: 0; }

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

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

::selection { background: var(--accent); color: var(--ground); }

body > header,
body > main,
body > footer {
  max-width: calc(1180px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 30px 26px;
}

.wordmark {
  font-size: 1.3rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.02em;
}

.masthead-link {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--type-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule);
  transition: color .18s ease, border-color .18s ease;
}
.masthead-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: end;
  padding-block: clamp(48px, 7vw, 104px) clamp(56px, 8vw, 116px);
}

/* The sentence loses its grip as it descends, and bottoms out on the word it
   is about. The faint end still clears AA against the ground. */
h1 {
  font-size: var(--t-display);
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 14ch;
  text-wrap: balance;
  color: var(--type);
  background: linear-gradient(176deg, var(--type) 30%, var(--type-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 { color: transparent; }
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--type-soft);
  max-width: 28ch;
  padding-bottom: 0.35rem;
}

/* ---------- questions ---------- */

.questions {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
  gap: clamp(30px, 5vw, 76px);
  padding-bottom: clamp(56px, 8vw, 116px);
}

.question-list { list-style: none; padding: 0; }

.question-list li {
  font-size: var(--t-sub);
  font-weight: 500;
  font-stretch: 104%;
  line-height: 1.35;
  letter-spacing: -0.015em;
  padding-block: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--rule);
}
.question-list li:last-child { border-bottom: 1px solid var(--rule); }

/* ---------- the close ---------- */

.close {
  background: var(--raised);
  border-radius: 3px;
  padding: clamp(36px, 5vw, 68px);
  margin-bottom: clamp(48px, 7vw, 96px);
}

.thesis {
  font-size: var(--t-title);
  font-weight: 600;
  font-stretch: 108%;
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin-bottom: clamp(32px, 4.4vw, 56px);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
}

.cta-copy { max-width: 44ch; }
.cta-note { color: var(--type-soft); font-size: var(--t-small); margin-top: 0.8em; }

.button {
  flex: none;
  display: inline-block;
  padding: 16px 30px;
  background: var(--accent);
  color: var(--ground);
  border-radius: 2px;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.2;
  transition: filter .18s ease;
}
.button:hover { filter: brightness(1.08); }
.button:focus-visible { outline-offset: 4px; }

/* ---------- colophon ---------- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  padding-block: 26px 36px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--type-soft);
}

.footer-wordmark { color: var(--type); font-size: 1.1rem; }

/* ---------- utility ---------- */

.skip {
  position: absolute;
  left: 20px;
  top: -80px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--ground);
  font-weight: 600;
  z-index: 10;
}
.skip:focus { top: 14px; }

@media (max-width: 860px) {
  .hero,
  .questions { grid-template-columns: 1fr; align-items: start; }
  h1 { max-width: 17ch; }
  .lead { max-width: 46ch; padding-bottom: 0; }
  .button { width: 100%; text-align: center; }
}

@media (max-width: 560px) {
  .masthead { padding-block: 22px 20px; }
  .colophon > span:nth-child(2) { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}