@font-face {
  font-family: Bricolage;
  src: url('/assets/bricolage-grotesque.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --forest: #254e40;
  --lime: #dceb8b;
  --paper: #f7f6f2;
  --gutter: clamp(24px, 5vw, 80px);
}
* { box-sizing: border-box; }
html { background: var(--forest); }
body {
  margin: 0;
  color: var(--paper);
  background: var(--forest);
  font-family: Bricolage, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { color: var(--forest); background: var(--lime); }
p { margin: 0; }
.page {
  width: min(100%, 1600px);
  min-height: 100svh;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
}
.opening {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 86px;
  font-size: 1rem;
  border-bottom: 1px solid rgb(220 235 139 / 45%);
}
.opening p:first-child { color: var(--lime); }
.wordmark {
  display: flex;
  align-items: baseline;
  padding-block: clamp(30px, 4vw, 64px) clamp(42px, 5.5vw, 88px);
  color: var(--lime);
  font-size: clamp(72px, 17.5vw, 280px);
  line-height: .94;
  letter-spacing: -.04em;
  font-variation-settings: 'opsz' 96, 'wdth' 90;
}
.wordmark-beaver { font-weight: 750; }
.wordmark-tech { font-weight: 350; margin-left: .025em; }
.message {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: 8%;
  padding-block: 0 clamp(46px, 6vw, 96px);
  flex: 1;
}
h1 {
  margin: 0;
  font-size: clamp(2.75rem, 5.5vw, 5.5rem);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: -.035em;
}
.next { display: block; margin-top: .65em; color: var(--lime); font-size: .8em; font-weight: 400; text-wrap: balance; }
.support {
  align-self: end;
  max-width: 22ch;
  padding-top: 20px;
  margin-bottom: .15em;
  font-size: clamp(1.125rem, 1.65vw, 1.65rem);
  line-height: 1.45;
  border-top: 1px solid rgb(220 235 139 / 45%);
}
.closing { height: 26px; border-top: 1px solid rgb(220 235 139 / 45%); }
@media (max-width: 760px) {
  .opening { min-height: 70px; font-size: .875rem; }
  .wordmark { padding-block: 32px 54px; font-size: 17.5vw; }
  .message { grid-template-columns: 1fr; gap: 36px; padding-bottom: 44px; }
  h1 { font-size: clamp(2.5rem, 7.6vw, 4rem); }
  .support { max-width: none; width: 100%; font-size: 1.125rem; }
  .support br { display: none; }
}
@media (max-width: 440px) {
  .wordmark { flex-direction: column; align-items: flex-start; font-size: 26vw; line-height: .88; gap: 6px; padding-block: 32px 48px; }
  .wordmark-tech { align-self: flex-end; margin-left: 0; }
  h1 { font-size: clamp(2rem, 8.8vw, 2.5rem); }
}