* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0a1628; }
@font-face {
  font-family: "NC Source Serif";
  src: url("/assets/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NC Space Grotesk";
  src: url("/assets/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
.page {
  --background: #f8f7f4;
  --ink: #0a1628;
  --secondary: #626a75;
  --gutter: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  background: var(--background);
  color: var(--ink);
  font-family: "NC Space Grotesk", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.header { padding: 24px var(--gutter) 20px; }
.headerInner { width: 100%; max-width: 1280px; margin-inline: auto; }
.logo { display: block; width: 140px; height: 32px; object-fit: contain; object-position: left center; }
.content { display: flex; align-items: center; padding: 36px max(28px, var(--gutter)) 72px; }
.composition { width: min(100%, 610px); margin-inline: auto; }
.message h1 {
  margin: 0;
  max-width: 19ch;
  font-family: "NC Source Serif", Georgia, serif;
  font-size: clamp(37px, 4.4vw, 57px);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}
.message p { margin: 28px 0 0; color: var(--secondary); font-size: 16px; line-height: 1.65; letter-spacing: -0.01em; }
.footer { width: 100%; max-width: calc(1280px + var(--gutter) * 2); margin-inline: auto; padding: 0 var(--gutter) 27px; font-size: 12px; letter-spacing: -0.01em; color: var(--secondary); }
.navy { --background: #0a1628; --ink: #f8f7f4; --secondary: #adb9c8; }
.navy .composition { width: min(100%, 680px); text-align: center; }
.navy .message h1 { margin-inline: auto; max-width: 19ch; font-size: clamp(38px, 4.6vw, 60px); }
.stone { --background: #eae5dc; --ink: #302e2a; --secondary: #686258; }
.stone .composition { width: min(100%, 780px); }
.stone .message h1 { font-size: clamp(38px, 4.3vw, 59px); max-width: 19ch; }
@media (min-width: 640px) {
  .page { --gutter: 32px; }
  .header { padding-top: 32px; padding-bottom: 24px; }
  .logo { width: 180px; height: 41px; }
}
@media (min-width: 768px) {
  .page { --gutter: 48px; }
  .logo { width: 220px; height: 50px; }
}
@media (min-width: 1024px) { .page { --gutter: 80px; } }
@media (min-width: 1280px) { .page { --gutter: 112px; } }
@media (max-width: 640px) {
  .content { padding-top: 45px; padding-bottom: 85px; }
  .message h1, .navy .message h1, .stone .message h1 { font-size: clamp(35px, 9.3vw, 47px); line-height: 1.18; max-width: 18ch; }
  .message p { max-width: 27ch; font-size: 15px; margin-top: 25px; }
  .navy .message p { margin-inline: auto; }
}