.project-strips,.corridor-projects { display:grid; gap:var(--gap); padding:calc(var(--gap) / 2); }
.project-slot {
  overflow:hidden; min-width:0; 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:132px; padding:24px clamp(24px,3vw,44px);
  display:grid; grid-template-columns:32px minmax(0,1fr) 28px; gap:22px; align-items:center;
  border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; font-family:var(--font-body);
}
.project-index { align-self:center; font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.04em; opacity:.76; }
.project-name { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:18px; row-gap:8px; min-width:0; }
.project-name-cn { font-size:clamp(26px,2.45vw,38px); line-height:1.25; font-weight:650; letter-spacing:-.035em; overflow-wrap:anywhere; }
.project-name-en { font-size:16px; line-height:1.35; font-weight:450; letter-spacing:0; }
.project-toggle { font-size:26px; 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 620ms cubic-bezier(.22,.8,.25,1); }
.project-detail-inner { min-height:0; overflow:hidden; padding:0 clamp(24px,3vw,44px); display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,42%); gap:clamp(24px,4vw,64px); align-items:start; }
.project-detail-inner > * { opacity:0; transform:translateY(12px); transition:opacity 280ms cubic-bezier(.22,.8,.25,1),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:32px; }
.project-slot[data-open="true"] .project-detail-inner > * { opacity:1; transform:none; }
.project-slot[data-open="true"] .project-toggle { transform:rotate(45deg); }
.project-copy { padding-left:54px; }
.project-detail p { max-width:680px; margin:0 0 22px; font-size:17px; line-height:1.8; }
.project-detail ul { margin:0 0 28px; padding:0; display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.project-detail li { padding:7px 11px; border:1px solid color-mix(in srgb,currentColor 35%,transparent); border-radius:999px; font-size:13px; line-height:1.4; }
.project-open { padding:13px 20px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:600 14px/1.4 var(--font-body); cursor:pointer; }
.project-open span { margin-left:20px; }
.project-shot { width:100%; height:auto; aspect-ratio:1/1; margin:0; overflow:hidden; border:2px solid #000; border-radius:12px; box-shadow:none; background:#fff; }
.project-shot img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; -webkit-mask-image:none; mask-image:none; }
.corridor-projects .project-summary { min-height:116px; padding:20px clamp(18px,2vw,30px); grid-template-columns:24px minmax(0,1fr) 24px; gap:14px; }
.corridor-projects .project-name { display:grid; gap:5px; }
.corridor-projects .project-name-cn { font-size:clamp(22px,1.9vw,29px); }
.corridor-projects .project-name-en { font-size:14px; }
.corridor-projects .project-detail-inner { grid-template-columns:1fr; gap:22px; padding-inline:clamp(18px,2vw,30px); }
.corridor-projects .project-copy { padding-left:38px; }
.corridor-projects .project-shot { width:calc(100% - 38px); margin-left:38px; }
.site-footer { min-height:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 20px; padding:30px 20px; color:#5d6262; font-size:12px; line-height:1.5; }
.site-footer a { color:inherit; font:400 12px/1.5 var(--font-body); 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:2px solid #000; border-radius:24px; background:var(--page-background); color:var(--ink); box-shadow:none; font-family:var(--font-body); }
.project-dialog::backdrop { background:#2633324d; backdrop-filter:blur(4px); }
.project-dialog h2 { margin:14px 0 22px; font-size:32px; }
.project-dialog p { margin:0; font-size:20px; line-height:1.7; }
.dialog-kicker { font-size:13px; letter-spacing:.08em; }
.dialog-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; font-size:24px; cursor:pointer; }
@media (max-width:900px) {
  .project-summary,.corridor-projects .project-summary { grid-template-columns:24px minmax(0,1fr) 22px; min-height:108px; gap:12px; padding:20px 18px; }
  .project-name,.corridor-projects .project-name { display:grid; gap:6px; }
  .project-name-cn,.corridor-projects .project-name-cn { font-size:23px; }
  .project-name-en,.corridor-projects .project-name-en { font-size:14px; }
  .project-index { font-size:11px; }
  .project-detail-inner,.corridor-projects .project-detail-inner { grid-template-columns:1fr; padding-inline:18px; gap:22px; }
  .project-copy,.corridor-projects .project-copy { padding-left:0; }
  .project-detail p { font-size:16px; line-height:1.8; }
  .project-detail li { font-size:13px; padding:7px 9px; }
  .project-shot,.corridor-projects .project-shot { width:100%; margin:0; height:auto; aspect-ratio:1/1; }
  .site-footer { padding:24px 16px; column-gap:14px; }
  .project-dialog { padding:34px 24px; }
}
@media (prefers-reduced-motion:reduce) { .project-detail,.project-detail-inner > *,.project-toggle { transition:none; } }