@charset "UTF-8";
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/bricolage-grotesque.ttf") format("truetype");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
:root {
  --green: #8ec898;
  --ink: #3b4a55;
  --cream: #f4efe5;
  --gutter: clamp(24px, 4.4vw, 80px);
  font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--green);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; -webkit-font-smoothing: antialiased; }
p { margin: 0; }
a { color: inherit; }
.campaign { display: flex; flex-direction: column; min-height: 100svh; }
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 3svh, 36px) var(--gutter);
}
.brand { display: block; width: 118px; flex: none; }
.brand img { display: block; width: 100%; height: auto; }
.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.origin { font-size: 15px; font-weight: 550; letter-spacing: -.02em; }
.statement {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26%;
  align-items: end;
  column-gap: 3%;
  padding: clamp(16px, 4svh, 42px) var(--gutter) clamp(20px, 5svh, 76px);
}
h1 {
  margin: 0;
  font-size: min(13.5vw, 24svh, 210px);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  line-height: .88;
  letter-spacing: -.035em;
}
h1 > span { display: block; width: max-content; }
h1 > span:nth-child(2) { padding-left: .38em; }
.period { color: var(--cream); }
.thought {
  margin-bottom: .16em;
  padding-bottom: 7px;
  font-size: clamp(25px, 2.7vw, 46px);
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -.05em;
}
.signoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(14px, 3svh, 32px) var(--gutter);
  background: var(--ink);
  color: var(--cream);
}
.better { font-size: clamp(24px, min(3.7vw, 5svh), 60px); font-weight: 650; line-height: 1; letter-spacing: -.055em; }
.soon { font-size: 17px; font-weight: 500; letter-spacing: -.025em; }
@media (min-width: 1800px) {
  :root { --gutter: max(80px, calc((100vw - 1660px) / 2)); }
  h1 { font-size: min(200px, 24svh); }
}
@media (max-width: 1000px) {
  .statement { grid-template-columns: 1fr; align-content: center; gap: clamp(20px, 4svh, 50px); padding-top: clamp(16px, 3svh, 36px); padding-bottom: clamp(20px, 4svh, 55px); }
  h1 { font-size: min(17vw, 18svh); }
  .thought { justify-self: end; font-size: clamp(24px, 4svh, 34px); padding-right: 3%; }
}
@media (max-width: 560px) {
  :root { --gutter: 24px; }
  .masthead { padding-top: clamp(16px, 3svh, 27px); padding-bottom: clamp(16px, 3svh, 27px); }
  .brand { width: 92px; }
  .origin { font-size: 12px; }
  .statement { padding-top: clamp(16px, 3svh, 40px); padding-bottom: clamp(20px, 4svh, 46px); gap: clamp(20px, 4svh, 44px); }
  h1 { font-size: min(18.2vw, 17svh); line-height: .92; letter-spacing: -.035em; }
  h1 > span:nth-child(2) { padding-left: .27em; }
  .thought { justify-self: end; font-size: clamp(23px, 4svh, 29px); padding: 0; }
  .signoff { padding-top: clamp(16px, 3svh, 29px); padding-bottom: clamp(16px, 3svh, 31px); gap: 16px; }
  .better { font-size: clamp(26px, 4.5svh, 32px); }
  .soon { font-size: 13px; }
}
@media (max-height: 560px) and (min-width: 561px) {
  .masthead { padding-top: 12px; padding-bottom: 12px; }
  .brand { width: 76px; }
  .statement { grid-template-columns: minmax(0, 1fr) 32%; align-content: end; gap: 3%; padding-top: 12px; padding-bottom: 12px; }
  h1 { font-size: min(12vw, 21svh); }
  .thought { font-size: clamp(20px, 5svh, 28px); }
  .signoff { padding-top: 12px; padding-bottom: 12px; }
  .better { font-size: clamp(22px, 5svh, 28px); }
  .soon { font-size: 13px; }
}