.projects-hero{padding:9vw 6vw 7vw;border-bottom:1px solid var(--line)}
.projects-hero-title{display:grid;grid-template-columns:2.2fr 1fr;gap:8vw;align-items:end;margin-top:5vw}
.projects-hero h1{font-family:Manrope,sans-serif;font-weight:300;letter-spacing:-.055em;line-height:.92;font-size:clamp(4rem,8.2vw,9rem);margin:0}
.projects-hero h1 em,.project-method h2 em{font-family:Georgia,serif;font-weight:400}
.projects-hero-title>p{color:#555;line-height:1.7;margin:0 0 .75rem;max-width:530px}
.projects-index{padding:7vw 3.5vw 12vw;background:#fff}
.projects-toolbar{display:grid;grid-template-columns:1fr 3fr;gap:4vw;align-items:start;margin-bottom:5vw}
.project-filters{display:flex;flex-wrap:wrap;gap:.65rem}
.project-filters button{appearance:none;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--ink);padding:.8rem 1.1rem;font:600 .64rem "DM Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.project-filters button:hover,.project-filters button:focus-visible{border-color:var(--ink)}
.project-filters button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.projects-gallery{display:grid;grid-template-columns:1fr 1fr;gap:7vw 2.2vw}
.portfolio-card{min-width:0}
.portfolio-card[hidden]{display:none}
.portfolio-card figure{margin:0;overflow:hidden;background:#deddd7;aspect-ratio:4/3}
.portfolio-card.portfolio-feature{grid-column:1/-1}
.portfolio-card.portfolio-feature figure{aspect-ratio:2/1}
.portfolio-card.portfolio-tall figure{aspect-ratio:4/5}
.portfolio-card figure img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.portfolio-card:hover figure img{transform:scale(1.025)}
.portfolio-code-art{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.5rem,3vw,3.5rem);box-sizing:border-box;background:#181918!important;color:#fff;isolation:isolate;position:relative}
.portfolio-code-art:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0 49.7%,rgba(205,20,9,.75) 49.8% 50.2%,transparent 50.3%),repeating-linear-gradient(90deg,transparent 0 11%,rgba(255,255,255,.06) 11% 11.15%);z-index:-1}
.portfolio-code-art strong{font:300 clamp(5rem,13vw,12rem)/.8 Manrope,sans-serif;letter-spacing:-.08em;color:#cd1409}
.portfolio-code-art span,.portfolio-code-art small{font:600 .65rem/1.5 "DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.14em}
.portfolio-code-light{background:#ecebe6!important;color:#171817}
.portfolio-code-light:before{background:linear-gradient(135deg,transparent 0 49.7%,rgba(205,20,9,.8) 49.8% 50.2%,transparent 50.3%),repeating-linear-gradient(90deg,transparent 0 11%,rgba(0,0,0,.07) 11% 11.15%)}
.portfolio-copy{display:grid;grid-template-columns:1.4fr 1fr auto;gap:2.5vw;padding:1.25rem 0;border-bottom:1px solid var(--line);align-items:start}
.portfolio-copy h2{font-family:Manrope,sans-serif;font-size:clamp(1.7rem,2.4vw,3rem);font-weight:300;letter-spacing:-.04em;margin:.5rem 0 .2rem}
.portfolio-copy p{margin:0;color:#666;line-height:1.55}
.portfolio-copy>p{font-size:.88rem;padding-top:.2rem}
.portfolio-copy>span,.portfolio-type{font-size:.64rem!important;text-transform:uppercase;letter-spacing:.1em}
.portfolio-type{color:var(--ink)!important;font-weight:600}
.portfolio-facts{display:flex;flex-wrap:wrap;gap:.45rem 1rem;list-style:none;margin:1rem 0 0;padding:0}
.portfolio-facts li{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#777}
.portfolio-facts li+li{position:relative}
.portfolio-facts li+li:before{content:"·";position:absolute;left:-.65rem;color:#aaa}
.business-location{display:inline-block;margin-top:.15rem;color:#666;line-height:1.45;border-bottom:1px solid transparent;transition:border-color .2s}
.business-location:hover,.business-location:focus-visible{border-bottom-color:var(--ink);color:var(--ink)}
.business-location span{margin-left:.35rem}
.portfolio-card-link{display:block}
.portfolio-card-link:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.civic-card-graphic{display:grid!important;grid-template-columns:1fr 1.55fr;align-items:stretch;background:#cd1409!important;color:#fff}
.civic-card-stat,.civic-card-boston{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,6rem)}
.civic-card-stat{border-right:1px solid rgba(255,255,255,.42)}
.civic-card-stat strong{font-family:Manrope,sans-serif;font-size:clamp(6rem,13vw,14rem);font-weight:300;letter-spacing:-.09em;line-height:.72}
.civic-card-stat span,.civic-card-boston span{font-size:clamp(.72rem,1vw,.9rem);text-transform:uppercase;letter-spacing:.14em;line-height:1.5}
.civic-card-stat span{margin-top:2.5rem}
.civic-card-boston strong{font-family:Manrope,sans-serif;font-size:clamp(4.5rem,11vw,12rem);font-weight:300;letter-spacing:-.08em;line-height:.82;margin:.9rem 0 1.4rem}
.civic-portfolio-card:hover .civic-card-graphic{background:#b61108!important}
.cb-card-graphic{background:#171817!important}
.cb-card-graphic .civic-card-stat strong{color:#cd1409}
.cb-portfolio-card:hover .cb-card-graphic{background:#262724!important}
.civic-portfolio-card .portfolio-copy>span{white-space:nowrap}
.project-method{padding:11vw 6vw;display:grid;grid-template-columns:1fr 2fr 1fr;gap:5vw;background:var(--paper)}
.project-method h2{font-family:Manrope,sans-serif;font-weight:300;letter-spacing:-.05em;line-height:.98;font-size:clamp(3rem,5vw,6rem);margin:0}
.project-method>p:last-child{color:#555;line-height:1.7;margin:0;padding-top:1rem}

@media(max-width:900px){
  .projects-hero{padding:18vw 6vw 14vw}
  .projects-hero-title{grid-template-columns:1fr;margin-top:12vw}
  .projects-hero-title>p{margin-top:1rem}
  .projects-index{padding:16vw 6vw 20vw}
  .projects-toolbar{grid-template-columns:1fr;margin-bottom:12vw}
  .project-filters{margin-top:1rem}
  .projects-gallery{grid-template-columns:1fr;gap:16vw}
  .portfolio-card.portfolio-feature{grid-column:auto}
  .portfolio-card.portfolio-feature figure,.portfolio-card figure{aspect-ratio:4/5}
  .portfolio-copy{grid-template-columns:1fr auto;gap:.8rem}
  .portfolio-copy>p{grid-column:1/-1}
  .civic-card-graphic{grid-template-columns:1fr!important}
  .civic-card-stat,.civic-card-boston{padding:2rem}
  .civic-card-stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.42)}
  .civic-card-stat strong{font-size:clamp(6rem,34vw,9rem)}
  .civic-card-stat span{margin-top:1rem}
  .civic-card-boston strong{font-size:clamp(4rem,21vw,6.5rem)}
  .project-method{grid-template-columns:1fr;padding:20vw 6vw}
  .project-method h2{margin:1.5rem 0}
}