@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/dmsans-0.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/bricolagegrotesque-0.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --paper: #f2e9d5;
  --ink: #293a4b;
  --accent: #ffba55;
  --muted: #516171;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
h1, p { margin: 0; }
img { display: block; max-width: 100%; }
.page { display: flex; flex-direction: column; min-height: 100svh; width: min(100%, 1500px); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 5rem); }
.header { display: flex; justify-content: center; padding-block: 2rem 1rem; }
.logo { width: clamp(112px, 10vw, 148px); height: auto; mix-blend-mode: darken; }
.hero { flex: 1; display: grid; place-items: center; padding-block: 3rem 5rem; text-align: center; }
.copy { width: 100%; max-width: 50rem; }
h1 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(4rem, 7.6vw, 7.5rem); font-weight: 650; line-height: 0.98; letter-spacing: -0.065em; }
.highlight { display: inline-block; position: relative; isolation: isolate; }
.highlight::after { content: ""; position: absolute; z-index: -1; left: -0.015em; right: -0.06em; bottom: 0.005em; height: 0.155em; background: var(--accent); border-radius: 55% 25% 50% 25%; transform: rotate(-2deg); }
.intro, .message { max-width: 30ch; margin: 2rem auto 0; font-size: clamp(1.25rem, 1.9vw, 1.65rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.025em; }
.message { max-width: 40ch; margin-top: 1.25rem; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.4rem 1.6rem; border-top: 1px solid rgb(41 58 75 / 18%); font-size: 0.75rem; line-height: 1.6; }
.footer > p:first-child { letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 900px) {
  h1 { font-size: clamp(3.5rem, 7.7vw, 5.5rem); }
}

@media (max-width: 700px) {
  .header { padding-block: 1.5rem 1rem; }
  .logo { width: 112px; }
  .hero { padding-block: 2rem 3.5rem; }
  h1 { font-size: clamp(3.6rem, 16.3vw, 5.5rem); }
  .intro, .message { margin-top: 1.5rem; font-size: 1.375rem; max-width: 25ch; }
  .message { margin-top: 1rem; max-width: 34ch; }
  .footer { flex-wrap: wrap; gap: 0.5rem 1rem; padding-block: 1.25rem; }
}

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