@import url("../styles.css");

.project-detail-page{overflow:visible!important;overflow-x:clip!important}
.project-detail-hero{padding:58px 0 72px}
.project-detail-back{display:inline-block;margin-bottom:32px;color:var(--muted);font-size:13px}
.project-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(38px,5vw,76px);align-items:stretch}
.project-detail-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.project-detail-kicker{margin-bottom:18px;color:var(--muted);font-family:var(--label-font);font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.project-detail-copy h1{margin:0;font-size:clamp(54px,5.8vw,90px);font-weight:850;letter-spacing:-.065em;line-height:.96}
.project-detail-copy h1 em{color:var(--blue);font-family:var(--editorial-font);font-weight:400}
.project-detail-lead{max-width:680px;margin:28px 0 0;color:var(--muted);font-size:20px;line-height:1.58}
.project-detail-cover{min-height:560px;height:100%;overflow:hidden;background:var(--ice)}
.project-detail-cover img{filter:grayscale(.25) contrast(1.03)}
.project-detail-layout{display:grid;grid-template-columns:220px minmax(0,780px);gap:clamp(50px,9vw,150px);justify-content:center;padding-top:100px;padding-bottom:130px}
.project-detail-aside{position:sticky;top:110px;align-self:start;display:grid;gap:10px}
.project-detail-aside nav{display:grid;gap:10px}
.project-detail-aside a{color:var(--muted);font-size:13px;line-height:1.4;transition:color .18s ease}
.project-detail-aside a:hover{color:var(--blue)}
.project-detail-body{min-width:0}
.project-detail-body h2{margin:0 0 22px;font-size:clamp(38px,4.6vw,62px);letter-spacing:-.055em;line-height:1.03}
.project-detail-body p{margin:0 0 22px;color:var(--muted);font-size:18px;line-height:1.75}
.project-detail-body blockquote{margin:46px 0;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--editorial-font);font-size:clamp(28px,3.4vw,44px);font-style:italic;line-height:1.25}
.project-detail-body h2:not(:first-child){margin-top:74px}
.project-detail-end{margin-top:86px;padding-top:42px;border-top:1px solid var(--line)}
.project-detail-end h3{max-width:650px;margin:16px 0 24px;font-size:clamp(36px,4.5vw,58px);letter-spacing:-.05em;line-height:1.03}

@media(max-width:900px) and (min-width:761px){
  .project-detail-grid{grid-template-columns:1fr}
  .project-detail-cover{min-height:0;height:min(68vw,560px)}
  .project-detail-layout{grid-template-columns:180px minmax(0,1fr);gap:36px}
  .project-detail-aside{top:96px}
}
@media(max-width:760px){
  .project-detail-hero{padding:30px 0 36px}
  .project-detail-back{margin-bottom:24px}
  .project-detail-grid{grid-template-columns:1fr;gap:22px}
  .project-detail-copy h1{font-size:clamp(44px,11vw,68px)}
  .project-detail-lead{font-size:18px}
  .project-detail-cover{min-height:0;height:min(78vw,420px)}
  .project-detail-layout{grid-template-columns:1fr;gap:26px;padding-top:48px;padding-bottom:68px}
  .project-detail-aside{position:static;border-bottom:1px solid var(--line);padding-bottom:20px}
  .project-detail-body h2:not(:first-child){margin-top:46px}
}