.project-open{overflow:hidden}
.project-grid--portfolio{
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:315px;
  gap:16px;
}
.project-grid--portfolio .project-card{isolation:isolate;border-radius:2px;outline:none}
.project-grid--portfolio .project-card:nth-child(1){grid-column:1/8;grid-row:1/3}
.project-grid--portfolio .project-card:nth-child(2){grid-column:8/13;grid-row:1}
.project-grid--portfolio .project-card:nth-child(3){grid-column:8/13;grid-row:2}
.project-grid--portfolio .project-card:nth-child(4){grid-column:1/6;grid-row:3/5}
.project-grid--portfolio .project-card:nth-child(5){grid-column:6/13;grid-row:3/5}
.project-grid--portfolio .project-card:after{inset:22% 0 0;background:linear-gradient(transparent,rgba(4,15,8,.82))}
.project-grid--portfolio .project-card:focus-visible{outline:3px solid var(--acid);outline-offset:4px}
.project-grid--portfolio .project-card img{filter:saturate(.88);will-change:transform}
.project-grid--portfolio .project-card:hover img,
.project-grid--portfolio .project-card:focus img{filter:saturate(1)}
.project-grid--portfolio .project-meta{left:26px;right:26px;bottom:25px}
.project-grid--portfolio .project-meta h3{font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.05;max-width:520px}
.project-grid--portfolio .project-meta small{float:none;display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.32);color:#fff}
.project-grid--portfolio .project-meta small b{font-size:1rem}
.project-count{position:absolute;z-index:3;right:16px;top:16px;padding:8px 11px;border-radius:999px;background:rgba(251,252,248,.9);color:var(--ink);font-size:.61rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}

.project-dialog{
  width:min(1180px,95vw);
  max-width:none;
  height:min(820px,88vh);
  max-height:none;
  margin:auto;
  padding:0;
  border:0;
  border-radius:3px;
  overflow:visible;
  background:#10130f;
  color:#fff;
}
.project-dialog::backdrop{background:rgba(3,10,5,.94);backdrop-filter:blur(8px)}
.project-dialog>.project-close{
  position:fixed;
  z-index:10;
  right:22px;
  top:16px;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(7,22,12,.7);
  color:#fff;
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.project-dialog>.project-viewer{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  align-items:stretch;
  margin:0;
}
.project-stage{min-width:0;min-height:0;position:relative;display:grid;place-items:center;background:#090b08;overflow:hidden}
.project-dialog #lightboxImage{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;user-select:none}
.project-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(7,18,10,.6);color:#fff;font-size:1.1rem;backdrop-filter:blur(6px);transition:.2s}
.project-arrow:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.project-prev{left:18px}.project-next{right:18px}
.project-dots{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:7px;padding:8px 10px;border-radius:999px;background:rgba(8,18,10,.48);backdrop-filter:blur(6px)}
.project-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.42)}
.project-dots button.is-active{background:var(--acid);transform:scale(1.35)}
.project-detail{padding:42px 31px 31px;background:var(--green);display:flex;flex-direction:column}
.project-detail>span{font-size:.61rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--acid)}
.project-detail h3{font:400 clamp(1.8rem,3vw,2.65rem)/1.02 var(--display);margin:18px 0 32px}
.project-detail dl{margin:0;display:grid}
.project-detail dl>div{display:flex;justify-content:space-between;gap:15px;border-top:1px solid rgba(255,255,255,.17);padding:15px 0}
.project-detail dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.55)}
.project-detail dd{margin:0;font-size:.77rem;text-align:right}
.project-detail>p{margin:auto 0 16px;color:rgba(255,255,255,.55);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
.project-detail .project-brief{width:100%;border:0;min-height:52px;font-size:.7rem}

@media(max-width:900px){
  .project-grid--portfolio{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:430px}
  .project-grid--portfolio .project-card:nth-child(n){grid-column:auto;grid-row:auto}
  .project-grid--portfolio .project-card:nth-child(1),
  .project-grid--portfolio .project-card:nth-child(5){grid-column:1/-1}
  .project-dialog{width:96vw;height:90vh}
  .project-dialog>.project-viewer{grid-template-columns:minmax(0,1fr) 270px}
  .project-detail{padding:34px 24px 24px}
}

@media(max-width:640px){
  .project-grid--portfolio{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .project-grid--portfolio .project-card:nth-child(n){grid-column:auto;grid-row:auto;height:auto;min-height:0;aspect-ratio:4/5}
  .project-grid--portfolio .project-card:nth-child(1),
  .project-grid--portfolio .project-card:nth-child(5){aspect-ratio:1/1}
  .project-grid--portfolio .project-meta{left:19px;right:19px;bottom:18px}
  .project-grid--portfolio .project-meta h3{font-size:1.45rem}
  .project-count{right:12px;top:12px}

  .project-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0}
  .project-dialog>.project-viewer{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .project-stage{min-height:0}
  .project-detail{padding:20px 20px max(20px,env(safe-area-inset-bottom));min-height:225px}
  .project-detail h3{font-size:1.8rem;margin:10px 0 16px}
  .project-detail dl{grid-template-columns:1fr 1fr;gap:12px}
  .project-detail dl>div{display:block;padding:11px 0}
  .project-detail dd{text-align:left;margin-top:5px}
  .project-detail>p{position:absolute;right:20px;margin-top:1px}
  .project-detail .project-brief{min-height:48px;margin-top:8px}
  .project-dialog>.project-close{right:12px;top:calc(10px + env(safe-area-inset-top));width:42px;height:42px}
  .project-arrow{width:42px;height:42px}
  .project-prev{left:10px}.project-next{right:10px}
}

@media(prefers-reduced-motion:reduce){
  .project-grid--portfolio .project-card img{transition:none}
}