﻿.case-page{background:var(--warm);color:var(--charcoal)}
.case-header{padding:24px 6.5vw;display:flex;align-items:center;justify-content:space-between;background:var(--charcoal);color:var(--warm);gap:24px;border-bottom:1px solid rgb(233 227 217 / .14)}
.case-brand{font-family:var(--display);font-size:33px;font-weight:800;letter-spacing:-.04em;line-height:1}
.case-header-right{display:flex;align-items:center;gap:35px}
.case-back{font-size:10px;letter-spacing:.06em;padding-block:12px}
.case-hero{background:var(--charcoal);color:var(--warm);padding:54px 6.5vw 42px}
.case-kicker{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:9px;letter-spacing:.12em;line-height:1.7;color:var(--muted)}
.case-status{display:inline-flex;align-items:center;gap:9px;color:var(--warm)}
.case-status:before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--accent)}
.case-title,.case-wordmark,html[lang=zh-CN] .case-wordmark{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:clamp(52px,15.6vw,250px);font-weight:800;line-height:.86;letter-spacing:-.025em;white-space:nowrap;margin:49px 0 41px;color:var(--warm)}
.case-hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end}
.case-tagline{font-family:var(--display);font-size:clamp(39px,5.3vw,78px);font-weight:800;line-height:.94;letter-spacing:-.015em;margin:0}
.case-tagline span{color:var(--accent)}
.case-hero-description{max-width:580px}
.case-subtitle{font-size:clamp(18px,1.7vw,26px);line-height:1.5;margin:0 0 12px;letter-spacing:-.025em}
.case-intro{font-size:12px;line-height:1.95;color:var(--muted);margin:0;max-width:490px}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;padding-top:22px;border-top:1px solid rgb(233 227 217 / .18)}
.case-tags span{font-size:8px;letter-spacing:.06em;border:1px solid rgb(233 227 217 / .28);padding:5px 10px}
.case-cover{margin:0;background:var(--charcoal);padding:0 6.5vw 26px}
.case-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#080a0b;border:1px solid rgb(233 227 217 / .16)}
.case-cover figcaption{padding-top:13px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.08em;line-height:1.8}
.case-overview{padding:95px 6.5vw;display:grid;grid-template-columns:1fr 1.4fr;gap:8vw}
.case-section-heading{min-width:0}
.case-section-number{display:block;color:var(--accent);font-family:monospace;font-size:11px;letter-spacing:.03em;margin-bottom:25px}
.case-section-title{font-family:var(--display);font-size:clamp(38px,4.7vw,68px);line-height:.96;letter-spacing:-.02em;font-weight:800;margin:0;white-space:pre-line}
.case-overview-copy{font-size:14px;line-height:2;max-width:740px;padding-top:38px}
.case-overview-copy>p:first-child{margin-top:0}
.case-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid rgb(16 19 20 / .23);margin:30px 0 0;padding-top:23px}
.case-facts dt{font-size:8px;letter-spacing:.12em;font-weight:700}
.case-facts dd{font-size:11px;line-height:1.7;margin:10px 0 0}
.case-systems{padding:75px 6.5vw 85px;background:var(--light,#f2eee7)}
.case-systems-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.case-systems-heading p{font-size:11px;line-height:1.8;margin:0;max-width:240px}
.case-system{display:grid;grid-template-columns:.85fr 1fr 1.5fr;gap:35px;padding:33px 0;border-top:1px solid rgb(16 19 20 / .23);align-items:start}
.case-system:last-child{border-bottom:1px solid rgb(16 19 20 / .23)}
.case-system-label{display:flex;gap:17px;align-items:baseline;font-size:8px;letter-spacing:.05em;line-height:1.8}
.case-system-label b{font-family:var(--display);font-size:28px;line-height:1;color:var(--accent)}
.case-system h3{font-size:21px;font-weight:400;line-height:1.5;margin:0;letter-spacing:-.025em}
.case-system p{font-size:12px;line-height:2;margin:0}
.case-gallery{padding:80px 6.5vw 90px;background:var(--charcoal);color:var(--warm)}
.case-gallery-head{display:flex;justify-content:space-between;gap:35px;margin-bottom:38px;align-items:flex-end}
.case-gallery-head p{font-size:11px;max-width:285px;line-height:1.9;color:var(--muted);margin:0}
.gallery-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.gallery-grid figure{margin:0;min-width:0}
.gallery-button{border:1px solid rgb(233 227 217 / .18);background:#080a0b;padding:0;width:100%;position:relative;display:block}
.gallery-button img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.gallery-button>span{position:absolute;bottom:10px;right:10px;display:grid;place-items:center;width:30px;height:30px;background:var(--warm);color:var(--charcoal);border:1px solid rgb(16 19 20 / .2);font-size:18px;transition:background .2s,color .2s}
.gallery-button:hover>span{background:var(--accent);color:var(--warm)}
.gallery-grid figcaption{display:flex;justify-content:space-between;gap:15px;margin-top:13px;font-size:8px;line-height:1.9;letter-spacing:.025em;color:var(--muted)}
.gallery-grid figcaption>span:last-child{white-space:nowrap}
.case-process{background:var(--surface);color:var(--warm);padding:75px 6.5vw 85px;display:grid;grid-template-columns:1fr 1.4fr;gap:8vw}
.case-process-copy{padding-top:37px}
.case-process p{font-size:13px;line-height:2;max-width:730px;margin:0 0 18px;color:var(--muted)}
.case-process p.case-process-label{font-size:9px;letter-spacing:.1em;color:var(--accent);margin-bottom:19px}
.case-process p:last-child{margin-bottom:0}
.case-next{padding:60px 6.5vw;display:flex;justify-content:space-between;align-items:center;gap:30px}
.case-next h2{font-family:var(--display);font-size:clamp(36px,4.2vw,60px);line-height:1;margin:0 0 16px;letter-spacing:-.02em}
.case-next a{display:inline-block;font-size:11px;border-bottom:1px solid var(--ink);padding:8px 0}
.case-next>span{font-family:var(--display);font-size:80px;color:var(--charcoal);line-height:1}
.case-footer{background:var(--charcoal);color:var(--warm);padding:25px 6.5vw;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:9px}
.case-footer a{border-bottom:1px solid rgb(233 227 217 / .35);padding-block:5px}
.case-footer>span{color:var(--muted);letter-spacing:.04em}
.image-dialog{border:1px solid rgb(233 227 217 / .25);background:var(--surface);padding:45px 22px 20px;width:min(1400px,95vw);max-width:95vw;max-height:94svh;color:var(--warm)}
.image-dialog::backdrop{background:rgb(16 19 20 / .92);backdrop-filter:blur(8px)}
.image-dialog img{width:100%;max-height:76svh;object-fit:contain}
.image-dialog p{font-size:10px;line-height:1.8;margin:15px 2px 0}
.dialog-close{position:absolute;right:7px;top:0;background:transparent;color:var(--warm);border:0;font-size:27px;width:44px;height:44px;line-height:1}
.credits-main{color:var(--charcoal);max-width:960px;margin:0 auto;padding:65px 25px 90px}
.credits-main h1{font-family:var(--display);font-size:90px;line-height:1;margin:0 0 45px}
.credits-main h2{font-size:22px;line-height:1.5;margin-top:40px}
.credits-main p{font-size:14px;line-height:2}
.credits-main a{text-decoration:underline;text-underline-offset:4px}
.credits-main .small{font-size:11px;opacity:.7}
html[lang=zh-CN] .case-section-title,html[lang=zh-CN] .case-next h2{font-family:var(--body);font-size:clamp(28px,3vw,42px);line-height:1.4;font-weight:700;letter-spacing:-.04em}
html[lang=zh-CN] .case-subtitle{line-height:1.7;font-size:clamp(17px,1.55vw,24px)}
html[lang=zh-CN] .credits-main h1{font-family:var(--body);font-size:55px;line-height:1.3}
@media(max-width:1000px){
  .case-overview,.case-process{gap:5vw;grid-template-columns:1fr 1.35fr}
  .case-system{gap:24px;grid-template-columns:.9fr 1fr 1.4fr}
  .case-system-label{gap:10px;font-size:7px}
  .case-system h3{font-size:18px}
  .case-system p{font-size:11px}
  .gallery-grid{gap:16px}
  .gallery-grid figcaption{display:block}
  .gallery-grid figcaption>span{display:block}
}
@media(max-width:700px){
  .case-header{padding:18px 7vw;gap:16px}
  .case-brand{font-size:29px}
  .case-header-right{gap:16px}
  .case-back{font-size:8px;letter-spacing:0;white-space:nowrap}
  .case-hero{padding:35px 7vw 27px}
  .case-kicker{font-size:7px;gap:12px;line-height:1.8;letter-spacing:.06em}
  .case-status{gap:6px}
  .case-status:before{width:4px;height:4px}
  .case-title,.case-wordmark,html[lang=zh-CN] .case-wordmark{font-size:15.4vw;line-height:.9;letter-spacing:-.025em;margin:31px 0 28px}
  .case-hero-bottom{grid-template-columns:1fr;gap:25px}
  .case-tagline{font-size:44px}
  .case-subtitle,html[lang=zh-CN] .case-subtitle{font-size:18px;line-height:1.65;max-width:400px;margin-bottom:10px}
  .case-intro{font-size:11px;line-height:1.95;max-width:430px}
  .case-tags{gap:7px;margin-top:24px;padding-top:18px}
  .case-tags span{font-size:7px;padding:4px 8px}
  .case-cover{padding:0 7vw 22px}
  .case-cover figcaption{font-size:7px;gap:15px;letter-spacing:.02em;padding-top:10px}
  .case-cover figcaption>span:last-child{white-space:nowrap}
  .case-overview{display:block;padding:48px 7vw}
  .case-section-number{font-size:10px;margin-bottom:18px}
  .case-section-title{font-size:42px}
  .case-overview-copy{padding-top:26px;font-size:12px}
  .case-facts{gap:13px;margin-top:25px;padding-top:20px}
  .case-facts dt{font-size:7px}
  .case-facts dd{font-size:10px}
  .case-systems{padding:45px 7vw 49px}
  .case-systems-heading{display:block;margin-bottom:26px}
  .case-systems-heading p{font-size:10px;margin-top:17px}
  .case-system{grid-template-columns:1fr;gap:13px;padding:25px 0}
  .case-system-label{font-size:8px;gap:13px}
  .case-system-label b{font-size:26px}
  .case-system h3{font-size:21px}
  .case-system p{font-size:11px;line-height:2}
  .case-gallery{padding:48px 7vw 50px}
  .case-gallery-head{display:block;margin-bottom:25px}
  .case-gallery-head p{font-size:10px;max-width:350px;margin-top:19px}
  .gallery-grid{grid-template-columns:1fr;gap:29px}
  .gallery-grid figcaption{display:flex;font-size:7px;gap:12px;margin-top:11px}
  .gallery-button>span{width:25px;height:25px;right:7px;bottom:7px;font-size:16px}
  .case-process{display:block;padding:48px 7vw 50px}
  .case-process-copy{padding-top:27px}
  .case-process p{font-size:11px;line-height:2}
  .case-process p.case-process-label{font-size:8px;margin-bottom:16px}
  .case-next{padding:44px 7vw;gap:15px}
  .case-next h2{font-size:35px}
  .case-next a{font-size:10px}
  .case-next>span{font-size:55px}
  .case-footer{padding:22px 7vw;font-size:8px;gap:18px;flex-wrap:wrap}
  .case-footer>span{order:3;flex-basis:100%;font-size:7px;margin-top:0}
  .case-footer>a:last-child{margin-left:auto}
  .image-dialog{padding:44px 10px 15px}
  .image-dialog p{font-size:9px;margin-top:12px}
  .credits-main{padding:45px 7vw 65px}
  .credits-main h1{font-size:65px}
  .credits-main h2{font-size:19px}
  .credits-main p{font-size:12px}
  html[lang=zh-CN] .case-section-title,html[lang=zh-CN] .case-next h2{font-size:28px;line-height:1.45}
  html[lang=zh-CN] .credits-main h1{font-size:39px}
}
@media(prefers-reduced-motion:reduce){html:not([data-motion="full"]) .gallery-button>span{transition:none}}
