:root{
  --bg:#fff;
  --fg:#0a0a0a;
  --muted:#777772;
  --line:#d7d7d2;
  --page:clamp(20px,3.4vw,56px);
  --gap:clamp(12px,1.4vw,24px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.page-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  padding-left:var(--page);
  padding-right:var(--page);
}
.topbar{
  min-height:76px;
  align-items:center;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  z-index:10;
}
.wordmark-small{grid-column:1 / span 2;width:40px}
.top-meta{grid-column:4 / span 3;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nav{grid-column:9 / -1;display:flex;justify-content:flex-end;gap:24px;font-size:13px}
.nav a{border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--fg)}

.hero{
  min-height:calc(100vh - 76px);
  grid-template-rows:auto 1fr auto;
  padding-top:28px;
  padding-bottom:28px;
  position:relative;
}
.hero-index{grid-column:1 / span 2;font-size:12px;font-weight:700}
.hero-meta{grid-column:9 / -1;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.hero-wordmark{
  grid-column:1 / span 10;
  align-self:center;
  width:100%;
  margin-top:-3vh;
}
.hero-mark{
  grid-column:12;
  align-self:center;
  justify-self:end;
  width:54px;
  margin-top:-3vh;
}
.hero-copy{
  grid-column:1 / span 5;
  align-self:end;
  font-size:clamp(17px,1.45vw,22px);
  line-height:1.5;
  letter-spacing:-.015em;
}
.hero-copy p{margin:0 0 4px}
.hero-cn{font-weight:600}
.hero-foot{
  grid-column:7 / -1;
  align-self:end;
  display:flex;
  justify-content:space-between;
  padding-top:14px;
  border-top:1px solid var(--fg);
  font-size:11px;
  letter-spacing:.04em;
}

.section{
  padding-top:96px;
  padding-bottom:96px;
  border-top:1px solid var(--fg);
}
.section-no{grid-column:1;font-size:11px;color:var(--muted);padding-top:7px}
.section-title{grid-column:2 / span 4;margin-bottom:54px}
.section-title h2{margin:0;font-size:clamp(28px,3vw,48px);font-weight:500;letter-spacing:-.045em}

.project-row{
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:1fr 4fr 4fr 1.5fr;
  gap:var(--gap);
  padding:24px 0 30px;
  border-top:1px solid var(--line);
  align-items:start;
}
.project-row:last-child{border-bottom:1px solid var(--line)}
.project-code,.project-state,.eyebrow{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.project-main h3{margin:8px 0 0;font-size:clamp(25px,2.4vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1}
.project-desc{font-size:15px;line-height:1.65;max-width:560px}
.project-state{text-align:right}
.project-row:hover .project-main h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

.index-row{
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:1fr 7fr 2fr 1fr;
  gap:var(--gap);
  padding:20px 0;
  border-top:1px solid var(--line);
  align-items:baseline;
}
.index-row:last-child{border-bottom:1px solid var(--line)}
.index-row span{font-size:11px;color:var(--muted)}
.index-row strong{font-size:clamp(18px,1.65vw,26px);font-weight:500;letter-spacing:-.025em}
.index-row:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

.notes-copy{
  grid-column:5 / span 5;
  font-size:clamp(18px,1.5vw,24px);
  line-height:1.55;
  letter-spacing:-.02em;
}
.notes-copy p{margin:0 0 18px}
.arrow-link{grid-column:11 / -1;align-self:end;font-size:13px;border-bottom:1px solid var(--fg);padding-bottom:4px;justify-self:end}

.about-lead{
  grid-column:2 / span 5;
  margin:0;
  font-size:clamp(30px,3.4vw,54px);
  line-height:1.15;
  letter-spacing:-.045em;
}
.about-body{
  grid-column:8 / -1;
  font-size:17px;
  line-height:1.7;
}
.about-body p{margin:0 0 18px}

.footer{
  border-top:1px solid var(--fg);
  min-height:150px;
  padding-top:24px;
  padding-bottom:28px;
  align-content:start;
  font-size:11px;
  color:var(--muted);
}
.footer-wordmark{grid-column:1 / span 3;width:min(220px,100%)}
.footer>div:nth-child(2){grid-column:5 / span 3}
.footer>div:nth-child(3){grid-column:9 / span 2}
.footer>div:nth-child(4){grid-column:11 / -1;text-align:right}

@media(max-width:900px){
  .page-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .topbar{min-height:66px}
  .wordmark-small{grid-column:1 / span 2;width:36px}
  .top-meta{display:none}
  .nav{grid-column:3 / -1;gap:14px;font-size:12px}
  .nav a:nth-child(2),.nav a:nth-child(3){display:none}

  .hero{min-height:760px;grid-template-rows:auto 1fr auto auto}
  .hero-index{grid-column:1 / span 2}
  .hero-meta{grid-column:3 / -1;display:block;text-align:right}
  .hero-meta span{display:block}
  .hero-wordmark{grid-column:1 / -1;margin-top:0;align-self:center}
  .hero-mark{grid-column:4;width:40px;align-self:start;margin-top:22px}
  .hero-copy{grid-column:1 / -1;font-size:18px}
  .hero-foot{grid-column:1 / -1;margin-top:28px}

  .section{padding-top:64px;padding-bottom:64px}
  .section-no{grid-column:1}
  .section-title{grid-column:2 / -1;margin-bottom:38px}
  .project-row{grid-column:1 / -1;grid-template-columns:1fr 3fr;padding:22px 0}
  .project-code{grid-column:1}
  .project-main{grid-column:2}
  .project-desc{grid-column:2;margin-top:8px}
  .project-state{grid-column:2;text-align:left;margin-top:4px}
  .index-row{grid-column:1 / -1;grid-template-columns:1fr 3fr}
  .index-row span:nth-child(3),.index-row span:nth-child(4){display:none}
  .notes-copy{grid-column:2 / -1}
  .arrow-link{grid-column:2 / -1;justify-self:start;margin-top:22px}
  .about-lead{grid-column:1 / -1;margin-bottom:34px}
  .about-body{grid-column:2 / -1}
  .footer{min-height:190px;row-gap:16px}
  .footer-wordmark{grid-column:1 / span 2}
  .footer>div:nth-child(2){grid-column:3 / -1}
  .footer>div:nth-child(3){grid-column:1 / span 2}
  .footer>div:nth-child(4){grid-column:3 / -1;text-align:left}
}

@media(max-width:560px){
  .nav{display:none}
  .wordmark-small{grid-column:1 / span 3;width:34px}
  .hero{min-height:700px}
  .hero-wordmark{transform:scale(1.08);transform-origin:left center}
  .hero-copy{font-size:16px}
}
/* Projects dual view */
.view-switch{
  grid-column:10 / -1;
  justify-self:end;
  align-self:start;
  display:flex;
  gap:8px;
  padding-top:10px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.view-button{
  appearance:none;
  border:0;
  padding:0 0 3px;
  background:none;
  color:var(--muted);
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
  border-bottom:1px solid transparent;
}
.view-button:hover,.view-button.is-active{color:var(--fg);border-color:var(--fg)}
.projects-list,.projects-grid{grid-column:2 / -1}
.projects-list .project-row{grid-column:auto}
.projects-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  border:1px solid var(--fg);
  min-height:460px;
}
.projects-grid[hidden],.projects-list[hidden]{display:none}
.project-card{
  min-height:460px;
  padding:28px;
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--fg);
}
.project-card:first-child{border-left:0}
.project-card h3{
  margin:44px 0 18px;
  font-size:clamp(32px,3vw,56px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:600;
}
.project-card p{
  margin:0;
  max-width:620px;
  font-size:15px;
  line-height:1.65;
}
.project-card-foot{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
}
@media(max-width:900px){
  .view-switch{grid-column:4; padding-top:4px}
  .projects-list,.projects-grid{grid-column:1 / -1}
  .projects-grid{grid-template-columns:1fr 1fr}
  .project-card,.project-card:first-child{min-height:380px;border-left:1px solid var(--fg);border-top:1px solid var(--fg)}
  .project-card:nth-child(odd){border-left:0}
  .project-card:nth-child(-n+2){border-top:0}
  .project-card-wide{grid-column:1 / -1}
}
@media(max-width:560px){
  .view-switch{grid-column:3 / -1}
  .projects-grid{grid-template-columns:1fr}
  .project-card,.project-card:first-child,.project-card:nth-child(odd){
    min-height:330px;border-left:0;border-top:1px solid var(--fg)
  }
  .project-card:first-child{border-top:0}
  .project-card-wide{grid-column:auto}
  .project-card h3{font-size:34px;margin-top:34px}
}