@font-face{
  font-family:"Fraunces";
  src:url("https://www.opportunitylabs.io/assets/fonts/FrauncesVF.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#FAF9F6;
  --ink:#111111;
  --muted:#6C6C6C;
  --rule:rgba(17,17,17,.10);
  --max:66ch;
  --step--3:clamp(.63rem,.6rem + .05vw,.7rem);
  --step--2:clamp(.75rem,.73rem + .1vw,.84rem);
  --step--1:clamp(.88rem,.86rem + .2vw,.96rem);
  --step-0:clamp(1rem,.98rem + .3vw,1.125rem);
  --step-5:clamp(4rem,3.3rem + 4vw,5rem);
  --lh-tight:1.15;
  --lh-body:1.55;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2.5rem;
  --space-5:4rem;
  --space-6:6rem;
  --space-8:12rem;
}

*{box-sizing:border-box}
html{hanging-punctuation:first last;text-rendering:optimizeLegibility}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 var(--step-0)/var(--lh-body) "Geist", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-wrap:pretty;
}
.container{max-width:var(--max);margin:0 auto;padding:var(--space-5) var(--space-2) var(--space-4)}
.flow>*+*{margin-top:var(--space-3)}
.major-section{margin-top:var(--space-8)}
.site-head{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"brand menu" "lede menu";
  column-gap:var(--space-3);
  align-items:start;
  max-width:var(--max);
  margin:0 auto;
  padding:var(--space-3) var(--space-2) 0;
}
.brand a{grid-area:brand;display:inline-block;text-decoration:none}
.brand img{display:block;height:auto;max-width:280px;width:100%}
.lede{grid-area:lede;margin:0;color:var(--muted);font-size:var(--step--1);padding-left:.4rem}
.site-menu{grid-area:menu;position:relative;justify-self:end;width:max-content}
.site-menu summary{list-style:none}
.site-menu summary::-webkit-details-marker{display:none}
.menu-toggle{display:inline-flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border:1px solid var(--rule);background:#fffdfa;cursor:pointer}
.menu-toggle-label{font-size:var(--step--2);line-height:1.2;text-transform:uppercase;letter-spacing:.12em}
.menu-toggle-icon{display:grid;gap:.26rem;width:1.15rem}
.menu-toggle-icon span{display:block;width:100%;height:1px;background:var(--ink);transform-origin:center;transition:transform .18s ease,opacity .18s ease}
.site-menu[open] .menu-toggle-icon span:nth-child(1){transform:translateY(.36rem) rotate(45deg)}
.site-menu[open] .menu-toggle-icon span:nth-child(2){opacity:0}
.site-menu[open] .menu-toggle-icon span:nth-child(3){transform:translateY(-.36rem) rotate(-45deg)}
.nav{
  position:absolute;
  top:calc(100% + .75rem);
  right:0;
  z-index:20;
  min-width:min(20rem,calc(100vw - 2rem));
  display:grid;
  gap:var(--space-2);
  padding:var(--space-3);
  border:1px solid var(--rule);
  background:#fffdfa;
  box-shadow:0 14px 35px rgba(17,17,17,.08);
}
.site-menu:not([open]) .nav{display:none}
.nav a{display:inline-block;width:fit-content;font-size:var(--step--2);line-height:1.35;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:.15rem}
.nav a:focus-visible,.nav a:hover{border-color:var(--rule)}
h1,h2,h3{font-family:"Fraunces", Georgia, serif;font-weight:600;letter-spacing:0;margin:0}
h2{font-size:var(--step-5);line-height:var(--lh-tight);padding-top:var(--space-4);border-top:1px solid var(--rule)}
h3{font-size:var(--step-0);margin-top:var(--space-3)}
.label{font-family:"Geist", sans-serif;text-transform:uppercase;letter-spacing:.08em;font-weight:500;color:var(--muted)}
.dash-list{padding-left:.5rem;list-style:none;margin:0}
.dash-list li{position:relative;margin:.6rem 0;padding-left:1rem}
.dash-list li::before{content:"-";position:absolute;left:0;top:0}
a{color:inherit;text-decoration-thickness:.06em;text-underline-offset:.2em}
iframe{display:block;border:1px solid var(--rule);background:#fffdfa}
.site-foot{
  max-width:var(--max);
  margin:var(--space-8) auto 0;
  padding:var(--space-4) var(--space-2);
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:var(--step--2);
  display:flex;
  gap:var(--space-2);
  justify-content:space-between;
  flex-wrap:wrap;
}
@media (max-width:640px){
  :root{--step-5:clamp(2.75rem,15vw,4rem);--space-8:8rem}
  .site-head{grid-template-columns:1fr;grid-template-areas:"brand" "lede" "menu";gap:var(--space-1)}
  .site-menu{justify-self:start;margin-top:var(--space-2)}
  .nav{left:0;right:auto}
}