@font-face {
  font-family: "Red Hat Text";
  src: url("fonts/red-hat-text.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("fonts/noto-serif-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f7f5ed;
  --ink: #252c28;
  --muted: #596258;
  --mint: #98dfac;
  --pink: #fc90b7;
  --gold: #e7b63b;
  --olive: #99a62c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Red Hat Text", sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--mint); color: var(--ink); }

.page {
  position: relative;
  isolation: isolate;
  min-height: max(820px, 100svh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 52px 5.55% 30px;
}

.masthead, .introduction { position: relative; z-index: 1; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { display: block; width: 206px; height: auto; }
.masthead-note { font-size: 13px; color: var(--muted); letter-spacing: .015em; }

.introduction {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
  margin-top: clamp(112px, 15vh, 170px);
  padding-bottom: 300px;
}

h1 { margin: 0; font-size: clamp(70px, 7.8vw, 130px); font-weight: 500; line-height: 1.04; letter-spacing: -.065em; }
.first-line { display: block; white-space: nowrap; }
h1 em { display: block; font-family: "Noto Serif", serif; font-weight: 400; font-size: .98em; letter-spacing: -.075em; line-height: 1.2; }
.description { flex-shrink: 0; width: 32%; max-width: 370px; margin: 0 1px 10px 0; font-size: 18px; line-height: 1.6; letter-spacing: -.015em; }
.description p { margin: 0; }
.foundations { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.foundations li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 15px; align-items: start; }
.foundations svg { width: 24px; height: 24px; margin-top: 1px; fill: none; stroke: #71805c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.foundations h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.foundations p { color: var(--muted); font-size: 14px; line-height: 1.5; letter-spacing: 0; }

.sky { position: absolute; z-index: 0; inset: auto 0 0; height: 280px; pointer-events: none; }
.sun { position: absolute; right: 5.55%; bottom: -190px; width: clamp(380px, 42vw, 620px); aspect-ratio: 1; background: var(--gold); opacity: .23; border-radius: 50%; }
.cloud {
  position: absolute;
  bottom: var(--ground);
  left: 0;
  width: calc(100% + var(--tile));
  background-repeat: repeat-x;
  background-size: var(--tile) 100%;
  animation: drift var(--duration) linear infinite;
}
.cloud::after { content: ""; position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: max(0px, calc(var(--ground) + 1px)); background: var(--cloud-fill); }
.cloud-far { --tile: max(65vw, 624px); --duration: 140s; --ground: 150px; --cloud-fill: #eee4df; height: 110px; background-image: url("cloud-far.svg"); }
.cloud-middle { --tile: max(105vw, 1008px); --duration: 75s; --ground: 60px; --cloud-fill: #d4e6d5; height: 175px; background-image: url("cloud-middle.svg"); }
.cloud-near { --tile: max(200vw, 1920px); --duration: 40s; --ground: -40px; --cloud-fill: var(--paper); height: 250px; background-image: url("cloud-near.svg"); }

/* Depth changes both apparent size and speed. The extra tile covers each loop. */
@keyframes drift { to { transform: translateX(calc(0px - var(--tile))); } }

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
}

@media (min-width: 1800px) {
  .page { padding-inline: max(5.55%, calc((100vw - 1600px) / 2)); }
}

@media (max-width: 1050px) {
  .page { min-height: max(880px, 100svh); padding: 40px 7% 26px; }
  .introduction { flex-direction: column; align-items: flex-start; gap: 30px; margin-top: 106px; padding-bottom: 330px; }
  h1 { font-size: clamp(62px, 9.4vw, 96px); }
  .description { width: 100%; max-width: 440px; margin: 0; font-size: 18px; }
  .sky { height: 270px; }
  .sun { right: 7%; bottom: -130px; }
}

@media (max-width: 540px) {
  .page { min-height: max(780px, 100svh); padding: 30px 7.7% 23px; }
  .logo { width: 160px; }
  .masthead-note { display: none; }
  .introduction { margin-top: 76px; gap: 30px; padding-bottom: 278px; }
  h1 { font-size: clamp(40px, 12.5vw, 67px); line-height: 1.05; letter-spacing: -.065em; }
  .first-line { white-space: normal; }
  h1 em { margin-top: 3px; white-space: nowrap; }
  .description { max-width: 360px; font-size: 16px; line-height: 1.6; }
  .sky { height: 233px; }
  .sun { width: min(380px, 84vw); right: 4vw; bottom: -40px; }
  .cloud-far { height: 75px; --ground: 145px; }
  .cloud-middle { height: 125px; --ground: 80px; }
  .cloud-near { height: 190px; --ground: -5px; }
}