.contents-project { background:#000; color:#fff; font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; }
.contents-intro { position:relative; height:100svh; }
.contents-stage { position:relative; height:100svh; overflow:clip; isolation:isolate; background:#000; }
.contents-project[data-motion-mode="scroll"] .contents-intro { height:200svh; }
.contents-project[data-motion-mode="scroll"] .contents-stage { position:sticky; top:0; background:#c0c0c0; }
.contents-stairs { position:absolute; inset:0; display:flex; pointer-events:none; }
.contents-step { flex:1; height:100%; background:#000; transform-origin:50% 100%; }
.contents-step + .contents-step { margin-left:-1px; }
.contents-project .contents-title { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; color:#fff; font-size:clamp(34px,9.2vw,144px); line-height:1; font-weight:700; letter-spacing:.045em; mix-blend-mode:difference; }
.contents-title .gooey-text-layer { width:max-content; max-width:96%; }
.contents-menu { --gallery-height:clamp(380px,72svh,640px); width:min(94%,1600px); margin-inline:auto; padding-block:24px 110px; }
.contents-gallery { display:flex; height:var(--gallery-height); }
.contents-card { display:flex; flex:1; min-width:0; padding:12px 0; border-left:1px solid #ffffff28; color:#727272; text-decoration:none; overflow:hidden; transition:flex .6s cubic-bezier(.22,1,.36,1),color .3s; }
.contents-card:last-child { border-right:1px solid #ffffff28; }
.contents-card.is-active { flex:5; color:#fff; }
.contents-card-label { --label-width:clamp(36px,4vw,60px); --label-font:clamp(19px,2.1vw,30px); flex:0 0 var(--label-width); position:relative; }
.contents-card-name,.contents-card-year { position:absolute; margin:0; white-space:nowrap; }
.contents-card-name { bottom:0; left:calc((var(--label-width) + var(--label-font)) / 2); width:max-content; transform:rotate(-90deg); transform-origin:0 100%; font-size:var(--label-font); line-height:1; font-weight:500; letter-spacing:.015em; }
.contents-card-year { top:0; left:50%; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg); font-size:clamp(14px,1.5vw,22px); line-height:1; opacity:0; transition:opacity .3s; }
.contents-card.is-active .contents-card-year { opacity:1; }
.contents-card-media { display:flex; flex:1; min-width:0; align-items:center; justify-content:center; padding-right:16px; }
.contents-card-media img { display:block; width:min(100%,calc((var(--gallery-height) - 24px) * .8)); height:auto; aspect-ratio:4/5; border-radius:var(--surface-radius); opacity:0; transform:translateX(18px); transition:opacity .35s,transform .6s cubic-bezier(.22,1,.36,1); }
.contents-card.is-active .contents-card-media img { opacity:1; transform:translateX(0); }
.contents-card:focus-visible { outline:1px solid #fff; outline-offset:5px; border-radius:var(--surface-radius); }
@media (max-width:700px) {
 .contents-menu { --gallery-height:clamp(360px,68svh,500px); padding-block:12px 70px; }
 .contents-card { flex:0 0 28px; }
 .contents-card.is-active { flex:1; }
 .contents-card-label { --label-width:28px; --label-font:16px; }
 .contents-card-year { font-size:12px; }
 .contents-card-media { padding-right:8px; }
}
@media (prefers-reduced-motion:reduce) { .contents-card,.contents-card-year,.contents-card-media img { transition:none; } }