.project-breadcrumb {
  display:flex;
  gap:13px;
  align-items:center;
  font:11px Code,monospace;
  color:var(--muted);
  margin-bottom:30px;
  flex-wrap:wrap
}
.project-breadcrumb a:hover {
  color:var(--ink)
}
.project-intro {
  padding-bottom:45px
}
.project-intro h1 {
  font-size:clamp(52px,7.9vw,113px)
}
.project-intro .tag-list {
  margin-top:25px
}
.project-hero-art .project-art {
  aspect-ratio:2.55;
  padding:40px;
  transform:none
}
.project-hero-art .art-title {
  font-size:clamp(72px,11vw,160px);
  max-width:80%
}
.project-hero-art .art-mark {
  width:57%;
  top:-10%;
  right:3%
}
.project-hero-art .art-label,.project-hero-art .art-bottom {
  font-size:12px
}
.project-body {
  display:grid;
  grid-template-columns:270px 1fr;
  gap:80px;
  align-items:start
}
.project-facts {
  position:sticky;
  top:120px;
  margin:0
}
.project-facts>div {
  border-top:1px solid var(--line);
  padding:21px 0
}
.project-facts dt {
  font:11px Code,monospace;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px
}
.project-facts dd {
  margin:0;
  font-size:15px
}
.project-facts .btn {
  margin-top:16px
}
.project-story h2 {
  font-size:38px;
  margin-bottom:20px
}
.project-story p {
  font-size:17px;
  margin-bottom:22px;
  max-width:775px
}
.project-story section+section {
  border-top:1px solid var(--line);
  margin-top:40px;
  padding-top:36px
}
.focus-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  margin-top:27px
}
.focus-item {
  background:var(--surface);
  border:1px solid var(--line);
  padding:25px
}
.focus-item span {
  font:11px Code,monospace;
  color:var(--muted)
}
.focus-item h3 {
  font-size:22px;
  margin:28px 0 13px
}
.focus-item p {
  font-size:15px;
  margin:0
}
.project-next {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.project-next h2 {
  font-size:clamp(32px,4.4vw,60px);
  margin-top:14px
}
.project-next a:hover h2 {
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:7px
}
@media(max-width:950px) {
  .project-body {
    grid-template-columns:215px 1fr;
    gap:40px
  }
  .project-hero-art .project-art {
    aspect-ratio:2.2
  }
}
@media(max-width:650px) {
  .project-intro h1 {
    font-size:clamp(48px,12vw,75px)
  }
  .project-hero-art .project-art {
    aspect-ratio:1.2;
    padding:25px
  }
  .project-hero-art .art-title {
    font-size:66px;
    max-width:95%
  }
  .project-hero-art .art-mark {
    width:100%;
    right:-30%;
    top:0
  }
  .project-hero-art .art-label,.project-hero-art .art-bottom {
    font-size:10px
  }
  .project-body {
    grid-template-columns:1fr;
    gap:40px
  }
  .project-facts {
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 25px
  }
  .project-facts .btn {
    align-self:start
  }
  .project-story h2 {
    font-size:33px
  }
  .project-story p {
    font-size:16px
  }
  .focus-list {
    grid-template-columns:1fr
  }
  .project-next {
    display:block
  }
  .project-next>.text-link {
    margin-top:25px
  }
}