.project-strips { display:grid; gap:var(--gap); padding:calc(var(--gap) / 2); }
.project-slot {
  overflow:hidden; border:2px solid var(--block-stroke); border-radius:var(--radius); background:var(--slot-color); color:var(--slot-ink,var(--ink));
  box-shadow:var(--block-shadow);
}
.project-summary {
  width:100%; min-height:clamp(104px,13vw,164px); padding:clamp(20px,3.2vw,46px);
  display:grid; grid-template-columns:64px minmax(0,1fr) minmax(150px,.42fr) 36px; gap:20px; align-items:center;
  border:0; background:transparent; color:inherit; text-align:left; cursor:pointer;
  font-family:var(--font-body);
}
.project-index,.project-type { font-size:13px; letter-spacing:.08em; color:color-mix(in srgb,currentColor 78%,transparent); }
.project-name { font-size:clamp(24px,3.4vw,52px); line-height:1.08; font-weight:700; letter-spacing:-.035em; }
.project-toggle { font-size:28px; font-weight:300; text-align:right; transition:transform 420ms cubic-bezier(.22,.8,.25,1); }
.project-detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows 520ms cubic-bezier(.22,.8,.25,1); }
.project-detail-inner { min-height:0; overflow:hidden; padding:0 clamp(20px,3.2vw,46px); display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,38%); gap:clamp(24px,4vw,72px); align-items:center; }
.project-detail-inner > * { opacity:0; transform:translateY(12px); transition:opacity 260ms ease,transform 420ms cubic-bezier(.22,.8,.25,1); }
.project-slot[data-open="true"] .project-detail { grid-template-rows:1fr; }
.project-slot[data-open="true"] .project-detail-inner { padding-bottom:clamp(24px,3vw,44px); }
.project-slot[data-open="true"] .project-detail-inner > * { opacity:1; transform:none; }
.project-slot[data-open="true"] .project-toggle { transform:rotate(45deg); }
.project-detail p { max-width:820px; margin:0 0 24px 84px; font-size:clamp(16px,1.7vw,22px); line-height:1.65; }
.project-detail ul { margin:0 0 28px 84px; padding:0; display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.project-detail li { padding:8px 13px; border:1px solid color-mix(in srgb,currentColor 35%,transparent); border-radius:999px; font-size:13px; }
.project-open { margin-left:84px; padding:12px 18px; border:0; border-radius:999px; background:var(--ink); color:#f8f4ed; font:600 14px/1 var(--font-body); cursor:pointer; }
.project-open span { margin-left:18px; }
.project-shot { width:100%; height:auto; aspect-ratio:3/2; margin:0; overflow:hidden; border-radius:12px; align-self:end; }
.project-shot img {
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect;
}
.site-footer { min-height:clamp(260px,38svh,520px); display:flex; align-items:flex-end; justify-content:center; gap:18px; padding:80px 24px 38px; color:#49605e; font-size:13px; }
.site-footer a { color:inherit; font:400 13px/1.5 var(--font-body); letter-spacing:.04em; text-decoration:none; }
.site-footer a:hover { color:var(--ink); }
.project-summary:focus-visible,.project-open:focus-visible,.dialog-close:focus-visible { outline:2px solid var(--ink); outline-offset:-4px; }
.project-dialog { width:min(520px,calc(100% - 32px)); padding:42px; border:0; border-radius:24px; background:var(--ground); color:var(--ink); box-shadow:0 16px 48px color-mix(in srgb,var(--ink) 22%,transparent); font-family:var(--font-body); }
.project-dialog::backdrop { background:#2633324d; backdrop-filter:blur(4px); }
.project-dialog h2 { margin:14px 0 22px; font-size:42px; }
.project-dialog p { margin:0; font-size:20px; line-height:1.7; }
.dialog-kicker { font-size:13px; letter-spacing:.1em; }
.dialog-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border:0; border-radius:50%; background:#f8f4ed; font-size:24px; cursor:pointer; }
@media (max-width:700px) {
  .project-summary { grid-template-columns:36px minmax(0,1fr) 30px; gap:10px; padding:20px 16px; }
  .project-type { display:none; }
  .project-index { font-size:11px; }
  .project-name { font-size:24px; }
  .project-detail p,.project-detail ul,.project-open { margin-left:46px; }
  .project-detail-inner { grid-template-columns:1fr; gap:18px; }
  .project-shot { height:220px; margin-left:46px; width:calc(100% - 46px); }
  .project-dialog { padding:34px 24px; }
}
@media (prefers-reduced-motion:reduce) { .project-detail,.project-detail-inner > *,.project-toggle { transition:none; } }