@font-face{font-family:"Archivo";src:url("/fonts/Archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/InstrumentSans.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  --paper:#F5F7EE;--border:#C8CDB8;
  --ink:#0A0B08;--ink-2:#4A5240;--ink-3:#6F7968;
  --lime:#BEFF4A;--lime-ink:#3D5800;
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;
  font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;font-size:1.0625rem;line-height:1.5}
main{flex:1;width:100%;max-width:80rem;margin:0 auto;container-type:inline-size;
  padding:clamp(1.75rem,6vw,5rem) clamp(1rem,6vw,5rem) clamp(2rem,5vw,4rem)}

.name{margin:0 0 clamp(1rem,3vw,2rem);
  font-family:"Archivo",system-ui,sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;
  font-size:clamp(2.25rem,9.6vw,9.5rem);line-height:.88;letter-spacing:-.015em}
@supports (font-size:1cqw){.name{font-size:clamp(2.25rem,11cqw,10.5rem)}}
.name span{display:block;white-space:nowrap}
.name .stop{display:inline-block;width:.16em;height:.16em;margin-left:.06em;background:var(--lime);vertical-align:baseline}

.role{margin:0;max-width:44ch;color:var(--ink-2);font-size:clamp(1.0625rem,1.6vw,1.375rem)}

.lede{margin:clamp(2rem,5vw,4rem) 0 clamp(1.5rem,4vw,3rem);max-width:30ch;
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.375rem,2.6vw,2.25rem);line-height:1.25}

.work{margin:0;border-top:1px solid var(--border)}
.work>div{display:grid;grid-template-columns:minmax(10rem,16rem) 1fr;gap:.25rem 2rem;padding:1rem 0;border-bottom:1px solid var(--border)}
.work dt{margin:0;font-weight:600}
.work dd{margin:0;max-width:52ch;color:var(--ink-2)}

.civic{margin:1.5rem 0 0;max-width:52ch;color:var(--ink-2)}

footer{width:100%;max-width:80rem;margin:0 auto;padding:1.25rem clamp(1rem,6vw,5rem) 2rem;
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;color:var(--ink-3);font-size:.9375rem}
footer p{margin:0}

a{color:inherit;text-decoration-color:var(--border);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink);text-decoration-color:var(--ink)}
a:focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px;border-radius:2px}

.notfound .lede{margin-top:clamp(1rem,3vw,2rem)}

@media (max-width:40rem){
  .work>div{grid-template-columns:1fr;gap:.125rem}
}