@font-face {
  font-family: "Overpass"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("assets/fonts/overpass-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Overpass"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("assets/fonts/overpass-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/overpass-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Overpass Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/overpass-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --c-primary: #F2BC3C;     --c-page: #E6E0CF;        --c-ink: #4D5B66;         --c-ink-light: #FFF6E1;   --c-slate: #525F69;       --c-blue: #4E78A7;        --c-blue-deep: #4773A4;   --c-orange: #EAA551;      --c-hero-hl: #FFFBF1;     --c-project-hl: #FFF8E6;  --c-turbine-text: #FFFAEE;
  --c-rule: #F5F1E8;
  --c-marker: #C8CC5E;
  --frame-rule: var(--c-rule);
  --frame-marker: var(--c-marker);

  --sans: "Overpass", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: 10px;  --frame: 10px;        --bar: 56px;          --edge: var(--frame); }
@media (min-width: 1200px) {
  :root {
    --uv: calc(min(100vw, 1728px) / 1728); --frame: calc(20 * var(--uv));
    --bar: calc(94 * var(--uv));
    --edge: calc((100% - 1688 * var(--uv)) / 2);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.35;
  font-feature-settings: "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 200; padding: 8px 14px; background: var(--c-ink); color: var(--c-ink-light); }
.skip:focus { left: 8px; }

.page {
  container-type: inline-size;
  max-width: 1728px;
  margin: 0 auto;
  padding: var(--gutter) var(--gutter) 0;
}

.navbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--bar); padding: 0 14px;
}
.nav { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  border: 2px solid var(--c-slate); border-radius: 999px;
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; line-height: 1;
  color: var(--c-slate); text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.pill:hover { background: var(--c-slate); color: var(--c-primary); }
.nav-toggle { display: none; }

.nav-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.nav-layer .navbar { position: absolute; top: var(--frame); left: var(--edge); right: var(--edge); }
.nav-layer[data-nav="yellow"] { --nav-fill: var(--c-primary); }
.nav-layer[data-nav="stone"] { --nav-fill: var(--c-page); }
.nav-layer .pill { background: var(--nav-fill); }
.nav-layer .pill.is-hover { background: var(--c-slate); color: var(--nav-fill); }
@media (prefers-reduced-motion: reduce) { .pill, .nav-toggle span { transition: none; } }

.frame { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.frame-mat { position: absolute; inset: 0; border: var(--frame) solid var(--c-page); }
.frame-rule { position: absolute; left: 0; right: 0; top: calc(var(--frame) + var(--bar)); height: 2px; background: var(--frame-rule); }
.marker { position: absolute; top: -2.5px; width: 7px; height: 7px; background: var(--frame-marker); }
.marker:first-child { left: calc(var(--edge) - 3.5px); }
.marker:last-child { right: calc(var(--edge) - 3.5px); }

@media (max-width: 699px) {
  .site-header {
    position: relative; flex-wrap: wrap;
    margin: var(--gutter) var(--gutter) 0; padding: 14px 14px 16px;
    background: var(--c-primary);
  }
  .site-header::after {
    content: ""; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); bottom: -4.5px; height: 7px;
    background:
      linear-gradient(var(--frame-marker), var(--frame-marker)) left calc(var(--gutter) - 3.5px) center / 7px 7px no-repeat,
      linear-gradient(var(--frame-marker), var(--frame-marker)) right calc(var(--gutter) - 3.5px) center / 7px 7px no-repeat,
      linear-gradient(var(--frame-rule), var(--frame-rule)) center / 100% 2px no-repeat;
  }
  .page { padding-top: 2px; }
  .frame, .nav-layer { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 46px; height: 32px; padding: 0;
    border: 2px solid var(--c-slate); border-radius: 999px; background: transparent; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--c-slate); transition: transform .2s ease, opacity .2s ease; }
  .is-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .is-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .js-nav .site-header .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 12px; }
  .js-nav .site-header.is-open .nav { display: flex; }
}
@media (min-width: 700px) {
  html { scroll-padding-top: calc(var(--frame) + var(--bar) + 2px); }
  .site-header { position: fixed; z-index: 100; top: var(--frame); left: var(--edge); right: var(--edge); }
  .nav { flex-wrap: nowrap; }
  .site-header .pill { background: var(--c-page); }
  .js-nav .site-header .pill,
  .js-nav .site-header .pill:hover { color: transparent; border-color: transparent; background: transparent; }
  .js-nav .site-header .pill::selection { background: transparent; }
}

.site-footer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px;
  padding: 36px 18px 48px;
  font-weight: 500; font-size: 13px; letter-spacing: 0.045em; line-height: 1.43;
  color: var(--c-ink);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-brand { grid-column: 1 / -1; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 35px; margin-top: 1.43em; font-size: 1.1em; letter-spacing: 0; line-height: normal; }
.footer-label { font-weight: 600; }


@media (min-width: 1200px) {
  .navbar { padding: 0 calc(36 * var(--uv)); gap: 0; }
  .nav { gap: calc(72 * var(--uv)); }
  .pill { height: calc(32 * var(--uv)); padding: 0 calc(20 * var(--uv)); border-width: calc(2 * var(--uv)); font-size: calc(17 * var(--uv)); }
  .pill--brand { padding: 0 calc(24 * var(--uv)); }

  .frame-rule { height: calc(2 * var(--uv)); }
  .marker { top: calc(-3 * var(--uv)); width: calc(7 * var(--uv)); height: calc(7 * var(--uv)); }
  .marker:first-child { left: calc(var(--edge) - 3 * var(--uv)); }
  .marker:last-child { right: calc(var(--edge) - 3 * var(--uv)); }

  .site-footer {
    grid-template-columns: calc(441 * var(--u)) calc(192 * var(--u)) auto;
    gap: 0;
    padding: calc(42 * var(--u)) 0 calc(67 * var(--u)) calc(65 * var(--u));
    font-size: max(11px, 12 * var(--u));
  }
  .footer-brand { grid-column: auto; padding-right: 24px; }
}