@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
:root {
  --green: #164a3b;
  --text: #f5f7f5;
  --sage: #c5d3cc;
  --brass: #f0bd24;
  --brass-hover: #f4c94a;
  --brass-text: #1e1803;
  --gutter: clamp(24px, 5vw + 8px, 80px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--green); }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: max(clamp(28px, 1.5vw + 22px, 44px), env(safe-area-inset-top)) max(clamp(28px, 1.2vw + 22px, 40px), env(safe-area-inset-bottom));
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  background: var(--green);
  color: var(--text);
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* The 16vw cap only bites under about 300 px, as when a phone is zoomed to 200%. */
.lockup { display: block; height: min(clamp(48px, 1.35vw + 45px, 64px), 16vw); width: auto; }
main { margin: auto 0; padding: 48px 0; max-width: 820px; }
h1 {
  margin-bottom: 0.33em;
  /* The 14vw cap keeps the longest word on a phone screen when text is set to 200%. */
  font-size: min(clamp(2.5rem, 1.85rem + 2.667vw, 4.25rem), 14vw);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.sub {
  margin-bottom: 1.6em;
  color: var(--sage);
  font-size: clamp(1.125rem, 0.986rem + 0.571vw, 1.5rem);
  line-height: 1.45;
}
.button {
  display: inline-block;
  padding: 0.95em 1.5em;
  border-radius: 10px;
  background: var(--brass);
  color: var(--brass-text);
  font-size: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
.button:hover { background: var(--brass-hover); }
.button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
footer { color: var(--sage); font-size: clamp(0.8125rem, 0.763rem + 0.19vw, 0.9375rem); }
h1 + .button { margin-top: 1.25rem; }