:root {
  --bg:#f9f9f7;
  --text:#222725;
  --muted:#6d7470;
  --line:#dedfda;
  --accent:#b66b43;
  --nav:#4e5752;
  --body-copy:#515a54;
  --hero-copy:#535b55;
  --lead:#333a35;
  --max:1120px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.7
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--accent)
}
.site-header {
  max-width:var(--max);
  margin:auto;
  padding:30px 36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  border-bottom:1px solid var(--line)
}
.brand {
  font-size:21px;
  font-weight:700;
  letter-spacing:-.8px;
  white-space:nowrap
}
.brand-dot,.accent {
  color:var(--accent)
}
nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px 24px
}
nav a {
  font-size:12px;
  font-weight:600;
  color:var(--nav)
}
.menu-toggle {
  display:none
}
main {
  max-width:var(--max);
  margin:auto;
  padding:0 36px
}
.hero {
  padding:130px 0 140px;
  max-width:780px
}
.eyebrow,.section-label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
  color:var(--accent)
}
h1 {
  font-size:clamp(65px,10vw,126px);
  line-height:1.04;
  letter-spacing:-6px;
  margin:23px 0 28px;
  font-weight:650
}
h2 {
  font-size:clamp(32px,4vw,47px);
  line-height:1.2;
  letter-spacing:-1.7px;
  margin:0 0 32px;
  font-weight:600
}
h3 {
  font-size:19px;
  letter-spacing:-.5px;
  line-height:1.35;
  margin:0 0 9px
}
p {
  font-size:16px;
  color:var(--body-copy);
  margin:0 0 19px;
  max-width:690px
}
.hero-subtitle {
  font-size:clamp(21px,2.8vw,30px);
  line-height:1.45;
  color:var(--hero-copy);
  max-width:670px;
  margin-bottom:35px
}
.lead {
  font-size:21px;
  color:var(--lead);
  line-height:1.5
}
.text-link {
  font-size:14px;
  font-weight:700;
  border-bottom:1px solid var(--accent);
  padding-bottom:5px
}
.section {
  border-top:1px solid var(--line);
  padding:80px 0 100px;
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:35px;
  scroll-margin-top:25px
}
.section-label {
  padding-top:11px
}
.section-content {
  max-width:730px
}
.muted {
  color:var(--muted)
}
.small {
  font-size:13px
}
.project {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:18px;
  padding:27px 0;
  border-top:1px solid var(--line)
}
.project-number {
  font-size:12px;
  color:var(--accent);
  font-weight:700
}
.project p {
  margin:0 0 8px
}
.project a {
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:4px
}
footer {
  max-width:var(--max);
  margin:auto;
  padding:32px 36px 55px;
  border-top:1px solid var(--line);
  display:flex;
  gap:18px;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted)
}
@media(max-width:850px) {
  .site-header {
  align-items:flex-start;
  flex-wrap:wrap
}
.menu-toggle {
  display:block;
  background:none;
  border:0;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  margin-left:auto
}
nav {
  display:none;
  width:100%;
  flex-direction:column;
  gap:12px
}
nav.open {
  display:flex
}
.section {
  grid-template-columns:1fr;
  gap:20px
}
.section-label {
  padding:0
}
.hero {
  padding:95px 0 110px
}
h1 {
  letter-spacing:-3px
}

}
@media(max-width:540px) {
  .site-header,main,footer {
  padding-left:22px;
  padding-right:22px
}
.section {
  padding:65px 0
}
.hero {
  padding:85px 0 100px
}
footer {
  flex-direction:column
}
h1 {
  font-size:62px
}

}


:root {
  color-scheme:light
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#171a18;
  --text:#f5f6f2;
  --muted:#a4ada6;
  --line:#353c36;
  --accent:#e2a07b;
  --nav:#d4dbd5;
  --body-copy:#c2cbc3;
  --hero-copy:#cbd3cc;
  --lead:#e1e7e1
}

.brand-dot,.accent {
  color:var(--accent)
}

a:hover {
  color:var(--accent)
}

.theme-toggle {
  flex-shrink:0;
  order:3;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 13px;
  background:var(--bg);
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap
}

.theme-toggle:hover {
  border-color:var(--accent);
  color:var(--accent)
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}

@media(max-width:850px) {
  .theme-toggle {
  order:0;
  margin-left:auto
}
.menu-toggle {
  margin-left:0
}
nav {
  order:4
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

}


.theme-toggle,.menu-toggle {
  min-height:44px;
}

@media(max-width:540px) {
  .site-header {
  gap:12px
}
.brand {
  margin-right:auto
}
.theme-toggle {
  margin-left:0
}

}