:root {
  color-scheme:light;
  --paper:#f4f3ed;
  --ink:#243d33;
  --muted:#606b62;
  --line:#d5dad1;
  --accent:#365b41
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-underline-offset:5px
}
a:focus-visible {
  outline:3px solid #986422;
  outline-offset:6px
}
p {
  line-height:1.7
}
h1,h2,h3,p {
  margin:0
}
a,button {
  -webkit-tap-highlight-color:transparent
}
.page {
  max-width:1200px;
  margin:auto;
  padding:0 52px
}
header {
  height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.wordmark {
  font-size:28px;
  font-weight:800;
  letter-spacing:-2px;
  text-decoration:none
}
.wordmark span {
  color:#9e673f
}
nav {
  display:flex;
  gap:34px;
  font-size:14px
}
nav a {
  text-decoration:none;
  padding:12px 0
}
nav a:hover,.text-link:hover {
  text-decoration:underline
}
.skip {
  position:absolute;
  top:-100px;
  left:16px;
  padding:12px;
  background:var(--ink);
  color:white;
  z-index:10
}
.skip:focus {
  top:12px
}
.hero {
  padding:65px 0 70px
}
.eyebrow,.index,.small-note,.project-meta,.project-art>span,.job-heading>span,footer,.hero-note>span:last-child {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}
.eyebrow {
  font-size:12px;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:10px
}
.dot {
  width:7px;
  height:7px;
  background:#6b8258;
  border-radius:50%
}
.location {
  color:var(--muted)
}
h1 {
  font-size:clamp(58px,7.2vw,92px);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-5px;
  margin:29px 0 30px
}
h1>span {
  color:#7b886b
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:flex-end
}
.role {
  font-weight:600;
  font-size:17px;
  margin-bottom:10px
}
.intro {
  max-width:550px;
  font-size:17px;
  color:var(--muted)
}
.button {
  display:inline-flex;
  align-items:center;
  gap:40px;
  padding:15px 20px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-size:14px;
  margin-top:26px;
  border:1px solid var(--ink);
  transition:background .15s
}
.button:hover {
  background:#41644e
}
.hero-note {
  padding-left:28px;
  border-left:1px solid var(--line);
  min-width:225px;
  margin-bottom:4px
}
.big-number {
  display:block;
  font-size:66px;
  letter-spacing:-4px;
  line-height:1.2
}
.hero-note>span:last-child {
  font-size:11px;
  line-height:1.7;
  color:var(--muted)
}
section[id] {
  scroll-margin-top:20px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:25px 0;
  border-top:1px solid var(--line)
}
.section-heading h2 {
  font-size:19px;
  letter-spacing:-.4px;
  font-weight:500
}
.index {
  font-size:12px;
  color:var(--muted);
  margin-right:15px
}
.small-note {
  font-size:11px;
  color:var(--muted)
}
.projects {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:78px
}
.project {
  border:1px solid var(--line);
  background:#fafaf5;
  overflow:hidden
}
.project-art {
  height:180px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.speech .project-art {
  background:#dfe8dc;
  color:#526c4a
}
.nudgy .project-art {
  background:#ede3d2;
  color:#997143
}
.project-art>span {
  position:absolute;
  bottom:16px;
  font-size:9px;
  letter-spacing:1.6px
}
.soundwave {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:-8px
}
.soundwave i {
  display:block;
  width:4px;
  border-radius:4px;
  height:24px;
  background:currentColor
}
.soundwave i:nth-child(3n) {
  height:72px
}
.soundwave i:nth-child(4n) {
  height:100px
}
.soundwave i:nth-child(5n) {
  height:45px
}
.soundwave i:nth-child(7n) {
  height:84px
}
.spiral {
  height:150px;
  width:290px;
  transform:translate(30px,-25px)
}
.project-content {
  padding:27px 28px 29px
}
.project-meta {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:space-between;
  color:var(--muted)
}
.project-meta>span {
  color:#5c6558
}
.project h3 {
  font-size:30px;
  font-weight:500;
  letter-spacing:-1px;
  margin:19px 0 12px
}
.project p {
  color:var(--muted);
  font-size:15px;
  min-height:77px
}
.project-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:18px;
  font-size:14px;
  text-decoration:none;
  font-weight:600
}
.project-link:hover {
  text-decoration:underline
}
.project-link>span {
  font-size:22px
}
.text-link {
  font-size:12px;
  text-decoration:none
}
.experience-layout {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:75px;
  padding:18px 0 64px
}
.expertise h3 {
  font-size:32px;
  letter-spacing:-1px;
  font-weight:500;
  line-height:1.2;
  margin-bottom:22px
}
.expertise p,.timeline article>p:last-child {
  font-size:14px;
  color:var(--muted)
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  list-style:none;
  padding:0;
  margin:23px 0 0
}
.tags li {
  font-size:11px;
  padding:7px 10px;
  border:1px solid #cbd2c5;
  border-radius:2px
}
.timeline article {
  padding:0 0 24px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line)
}
.timeline article:last-child {
  border:0;
  padding:0;
  margin:0
}
.job-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px
}
.job-heading h3 {
  font-size:18px;
  font-weight:600
}
.job-heading>span {
  font-size:11px;
  white-space:nowrap;
  color:var(--muted)
}
.job-role {
  font-size:12px;
  margin:8px 0 12px
}
.community {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:75px;
  background:#e7eadf;
  border-top:1px solid #d6ddcd;
  padding:34px;
  margin:0 -34px 64px
}
.community .eyebrow {
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  margin:3px 0 16px
}
.community h2 {
  font-size:29px;
  font-weight:500;
  letter-spacing:-1px
}
.community p {
  font-size:14px
}
.community-note {
  color:var(--muted);
  margin-top:13px
}
.connect {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:75px;
  padding-bottom:65px
}
.connect h2 {
  font-size:44px;
  letter-spacing:-2px;
  font-weight:500;
  line-height:1.1;
  margin:22px 0 18px
}
.connect p {
  font-size:14px;
  color:var(--muted)
}
.socials a {
  display:flex;
  gap:16px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size:18px
}
.socials a:first-child {
  border-top:1px solid var(--line)
}
.socials a:hover {
  color:#52773d
}
.socials .handle {
  margin-left:auto;
  font-family:ui-monospace,monospace;
  font-size:11px;
  color:var(--muted)
}
footer {
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid var(--line);
  padding:26px 0 32px;
  font-size:10px;
  color:var(--muted)
}
footer a {
  text-decoration:none
}
@media(min-width:1500px) {
  .hero {
    padding-top:80px
  }

}
@media(max-width:800px) {
  .page {
    padding:0 28px
  }
  header {
    height:88px
  }
  h1 {
    letter-spacing:-3px
  }
  .hero {
    padding:45px 0 50px
  }
  .hero-note {
    min-width:180px
  }
  .small-note {
    display:none
  }
  .experience-layout,.community,.connect {
    gap:35px
  }
  .project-content {
    padding:22px
  }
  .project p {
    min-height:102px
  }
  .community {
    margin-left:-12px;
    margin-right:-12px;
    padding:25px
  }
  .projects {
    gap:16px
  }
  .project h3 {
    font-size:27px
  }

}
@media(max-width:600px) {
  .page {
    padding:0 22px
  }
  nav {
    gap:20px;
    font-size:12px
  }
  .hero .eyebrow {
    font-size:10px;
    gap:7px
  }
  .location {
    letter-spacing:0
  }
  h1 {
    font-size:clamp(46px,11vw,65px);
    letter-spacing:-2.5px;
    margin:28px 0
  }
  .hero-bottom {
    display:block
  }
  .hero-note {
    display:none
  }
  .role {
    font-size:15px
  }
  .intro {
    font-size:16px
  }
  .button {
    margin-top:22px
  }
  .section-heading h2 {
    font-size:17px
  }
  .index {
    margin-right:8px;
    font-size:10px
  }
  .projects,.experience-layout,.community,.connect {
    grid-template-columns:1fr
  }
  .projects {
    gap:24px;
    margin-bottom:48px
  }
  .project-art {
    height:160px
  }
  .project p {
    min-height:0
  }
  .project-content {
    padding:24px
  }
  .project h3 {
    font-size:29px
  }
  .experience-layout {
    padding:8px 0 42px;
    gap:35px
  }
  .expertise h3 {
    font-size:30px
  }
  .text-link {
    font-size:10px
  }
  .community {
    gap:22px;
    margin-bottom:42px
  }
  .connect {
    gap:26px;
    padding-bottom:42px
  }
  .connect h2 {
    font-size:39px
  }
  .socials a {
    padding:18px 0
  }
  footer {
    flex-wrap:wrap;
    font-size:9px
  }
  footer>span:nth-child(2) {
    display:none
  }

}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }

}
@media print {
  body {
    background:white;
    color:#111
  }
  .page {
    padding:0
  }
  nav,.button,.hero-note,.project-art,.skip,footer {
    display:none
  }
  .hero {
    padding:20px 0
  }
  h1 {
    font-size:42px
  }
  .projects {
    margin-bottom:25px
  }
  .project,.timeline article,.community {
    break-inside:avoid
  }
  .experience-layout,.connect {
    padding-bottom:20px
  }
  .community {
    margin-bottom:25px
  }
  .connect h2 {
    font-size:28px
  }
  a {
    color:inherit
  }

}