@font-face {
  font-family: "Noet Sans";
  src: url("/assets/fonts/sourcesans3-subset-r01.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Noet Serif";
  src: url("/assets/fonts/sourceserif4-subset-r01.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Noet Serif";
  src: url("/assets/fonts/noet-serif-italic-r01.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}
:root {
  color: #061b21;
  background: #efece6;
  font-family: "Noet Sans", Arial, sans-serif;
  font-synthesis: none;
  --gutter: clamp(24px, 5.5vw, 100px);
}
* { box-sizing: border-box; }
body { margin: 0; }
::selection { color: #061b21; background: #e2e850; }
.page { min-height: 100svh; display: flex; flex-direction: column; }
.masthead {
  padding: clamp(32px, 5vh, 64px) var(--gutter) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: block; width: clamp(190px, 23vw, 355px); height: auto; }
.edition { font-size: 15px; line-height: 1.35; margin: 0 0 2px; }
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 5vw;
  padding: clamp(72px, 11vh, 140px) var(--gutter);
}
.eyebrow { font-size: 15px; margin: 0 0 28px; }
h1 {
  font-size: clamp(58px, 7.7vw, 132px);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.055em;
  margin: 0;
}
h1 span {
  display: inline-block;
  margin-top: 4px;
  padding-left: .48em;
  font-family: "Noet Serif", Georgia, serif;
  font-weight: 410;
  letter-spacing: -.065em;
}
h1 em { font-weight: inherit; }
.introduction { align-self: center; padding-top: 56px; max-width: 440px; }
.lead { font-size: clamp(23px, 2.1vw, 31px); line-height: 1.28; letter-spacing: -.02em; margin: 0; }
.work-in-progress { border-left: 6px solid #e2e850; margin-top: 36px; padding: 1px 0 1px 22px; }
.work-in-progress p { font-size: 16px; line-height: 1.45; margin: 0; }
.work-in-progress .status { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
footer {
  margin: 0 var(--gutter);
  border-top: 1px solid #061b21;
  padding: 20px 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
}
footer p { margin: 0; }
@media (max-width: 760px) {
  .edition { display: none; }
  .brand { width: clamp(210px, 48vw, 300px); }
  main { display: block; padding-top: 68px; padding-bottom: 64px; }
  h1 { font-size: clamp(48px, 10.8vw, 80px); }
  .eyebrow { font-size: 13px; margin-bottom: 22px; }
  .introduction { padding-top: 42px; max-width: 36ch; }
  .lead { font-size: 24px; }
  .work-in-progress { margin-top: 28px; }
  footer { font-size: 12px; }
}
@media (forced-colors: active) {
  .work-in-progress { border-color: CanvasText; }
}