.detail-main{background:#050606;color:var(--text);min-height:100vh}
.detail-hero{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.38fr);min-height:100svh;border-bottom:1px solid var(--line)}
.detail-copy{padding:132px var(--gutter) 54px;display:flex;flex-direction:column;justify-content:space-between;gap:44px}
.detail-index{font:11px var(--mono);color:var(--lime);letter-spacing:.14em;text-transform:uppercase}
.detail-title{font-size:clamp(4rem,9vw,9.5rem);font-weight:500;line-height:.9;letter-spacing:-.07em;text-transform:uppercase;margin:0}
.detail-title em{font-family:var(--serif);font-weight:400;text-transform:none}
.detail-intro{max-width:430px;color:#c7c9c4;font-size:clamp(1rem,1.4vw,1.35rem)}
.detail-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border-top:1px solid var(--line);padding-top:24px;font:10px var(--mono);text-transform:uppercase;color:#aeb1ad}
.detail-meta b{display:block;color:var(--text);font-weight:400;margin-top:5px}
.detail-visual{position:relative;overflow:hidden;border-left:1px solid var(--line);background:#0b0c0d}
.detail-visual img{filter:saturate(.88) contrast(1.08)}
.detail-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,6,.22),transparent 45%,rgba(5,6,6,.2));pointer-events:none}
.detail-badge{position:absolute;right:34px;bottom:34px;width:116px;height:116px;border:1px solid var(--lime);border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--lime);font:10px/1.35 var(--mono);text-transform:uppercase}
.case-section{display:grid;grid-template-columns:.72fr 1.28fr;border-bottom:1px solid var(--line);min-height:520px}
.case-label{padding:46px var(--gutter);font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.case-content{padding:46px var(--gutter);border-left:1px solid var(--line)}
.case-content h2{font-size:clamp(2.5rem,5vw,6rem);line-height:.94;letter-spacing:-.06em;text-transform:uppercase;font-weight:400;margin:0 0 34px}
.case-content p{max-width:680px;color:#c3c5c1;font-size:clamp(1rem,1.35vw,1.3rem)}
.detail-gallery{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;background:var(--line);margin-top:44px}
.detail-gallery figure{margin:0;background:#070808;min-height:380px;position:relative;overflow:hidden}
.detail-gallery img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.detail-gallery figure:hover img{transform:scale(1.035)}
.detail-gallery figcaption{position:absolute;left:22px;bottom:20px;font:10px var(--mono);text-transform:uppercase;color:var(--lime)}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:42px}
.principle{padding:28px;border-right:1px solid var(--line)}
.principle:last-child{border-right:0}
.principle span{font:11px var(--mono);color:var(--lime)}
.principle h3{font-size:1.35rem;line-height:1.05;text-transform:uppercase;font-weight:400;margin:22px 0 14px}
.principle p{font-size:.92rem;color:#989d99}
.next-case{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:230px;border-bottom:1px solid var(--line)}
.next-case a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px var(--gutter);min-height:230px;border-right:1px solid var(--line);transition:background .3s}
.next-case a:hover{background:#0c0f0e}
.next-case span{font:10px var(--mono);color:var(--lime);text-transform:uppercase}
.next-case strong{font-size:clamp(1.9rem,3.5vw,4rem);line-height:.95;text-transform:uppercase;font-weight:400}
.detail-footer{padding:26px var(--gutter);display:flex;justify-content:space-between;font:9px var(--mono);text-transform:uppercase;color:#888}
.experiment-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.experiment-detail-card{background:#090a0a;min-height:640px;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.experiment-detail-card img{height:360px;object-fit:cover;margin:-32px -32px 34px;width:calc(100% + 64px)}
.experiment-detail-card h2{font-size:clamp(2rem,3vw,3.4rem);line-height:.95;text-transform:uppercase;font-weight:400;margin:0}
.experiment-detail-card p{color:#b9bcb8;max-width:360px}
@media (max-width:900px){
  .detail-hero,.case-section,.next-case{grid-template-columns:1fr}
  .detail-copy{min-height:560px;padding:104px 24px 40px}
  .detail-visual{height:62vh;border-left:0;border-top:1px solid var(--line)}
  .case-label,.case-content{padding:34px 24px}
  .case-content{border-left:0;border-top:1px solid var(--line)}
  .detail-gallery,.principle-grid,.experiment-list{grid-template-columns:1fr}
  .principle{border-right:0;border-bottom:1px solid var(--line)}
  .next-case a{border-right:0;border-bottom:1px solid var(--line);padding:34px 24px}
  .detail-footer{padding:22px 24px;flex-direction:column;gap:12px}
}