:root{--ink:#131e33;--soft:#576579;--blue:#245fae;--line:#d9e1ee;--paper:#fff;--tint:#f4f7fc;--navy:#10162d}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
button,a,[tabindex]{outline-offset:5px}
:focus-visible{outline:2px solid var(--blue)}
h1,h2,h3,h4,p,figure,dl{margin:0}
h4{font-size:18px;line-height:1.5;font-weight:650}
.portfolio-case--grc{--portfolio-focus:var(--blue);--portfolio-brand:var(--ink);--portfolio-brand-accent:var(--blue);--portfolio-footer-bg:var(--tint);--portfolio-footer-color:var(--soft);--portfolio-footer-line:var(--line);--portfolio-h3-size:22px;--portfolio-lead-size:20px;--grc-canvas-width:max(1200px,100vw);--grc-content-left:max(144px,calc((var(--grc-canvas-width) - 1280px)/2));--grc-content-right:var(--grc-content-left);--grc-content-width:calc(var(--grc-canvas-width) - var(--grc-content-left) - var(--grc-content-right));--portfolio-content-width:var(--grc-content-width);min-width:1200px}
/* One case-scoped content grid; the exhibition/hero backgrounds remain full bleed. */
.portfolio-case--grc{--grc-chapter-space:96px;--grc-chapter-title-size:44px;--grc-body-size:16px;--grc-caption-size:14px;--portfolio-h2-size:var(--grc-chapter-title-size);--portfolio-body-size:var(--grc-body-size)}
.portfolio-case--grc .wrap,.portfolio-case--grc .portfolio-footer__inner{width:var(--grc-content-width);margin-inline:var(--grc-content-left) var(--grc-content-right)}
.portfolio-mark{padding:5px 9px;background:rgba(255,255,255,.94);border-radius:3px}
.scroll-progress{background:var(--blue)}
.arch-index{position:fixed;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;z-index:30;max-height:calc(100vh - 48px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.arch-index a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#536479;font-size:12px;background:transparent;border-radius:3px}
.arch-index a i{border:1px solid #8696ac;border-radius:50%}
.arch-index a.on{color:var(--blue);font-weight:700}
.arch-index a.on i{background:var(--blue);border-color:var(--blue)}
/* Transparent rail; each item follows the surface behind it at chapter joins. */
.arch-index a.is-over-dark{color:#adbed9}
.arch-index a.is-over-dark.on{color:#e9bc6a}
.arch-index a.is-over-dark.on i{background:#e9bc6a;border-color:#e9bc6a}
.arch-index>a{flex-shrink:0}
.arch-index a:focus-visible{outline-offset:-2px}
.theme-index{display:flex;flex-direction:column;flex-shrink:0;margin:0 0 6px 8px;padding:4px 0;border-left:1px solid var(--line)}
.theme-index[hidden]{display:none}
.portfolio-case .arch-index .theme-index a{width:100%;min-height:44px;padding:0 8px;justify-content:flex-start;font-size:12px;line-height:1.4;font-weight:400;color:#66758a;background:transparent;border-radius:0}
.portfolio-case .arch-index .theme-index a:hover{color:var(--blue);background:#f4f7fc}
.portfolio-case .arch-index .theme-index a.is-active{color:var(--blue);background:#edf3fc;font-weight:650;box-shadow:inset 2px 0 0 currentColor}
.eyebrow{color:var(--blue);font:600 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.hero{position:relative;overflow:hidden;background:#091426;color:#f5f7ff;padding:112px 0 var(--grc-chapter-space)}
.hero-background{position:absolute;inset:0;pointer-events:none;background:#091426}
.hero-background::before{content:"";position:absolute;inset:0;background:url("assets/presentation/封面原素材.webp") center 48%/cover no-repeat;opacity:.52}
.hero-background::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,15,31,.97) 0%,rgba(6,15,31,.93) 27%,rgba(6,15,31,.56) 64%,rgba(6,15,31,.72) 100%),linear-gradient(0deg,#091426 0%,transparent 28%,transparent 78%,rgba(9,20,38,.42) 100%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:80px;align-items:center}
.hero-copy{min-width:0;padding-bottom:18px}
.hero-project{display:flex;align-items:baseline;gap:18px;font-size:20px;font-weight:600;line-height:1.6;color:#e4eaf5;margin-bottom:30px}
.hero-project>span{font:500 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#e9bc6a;flex:none}
.portfolio-case .hero-copy h1{font-size:var(--portfolio-h1-size);line-height:1.1;letter-spacing:.015em;white-space:nowrap;width:max-content}
.hero-copy .portfolio-lead{margin-top:26px;font-weight:500;max-width:500px;color:#f0f4ff}
.hero-description{margin-top:18px;color:#bdc9dc;max-width:none}
.hero-role{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:28px;color:#d5deed;font-size:14px;line-height:1.7}
.hero-role>span{font-size:12px;color:#9eafc8}
.hero-evidence{position:relative;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr) minmax(0,.72fr);align-items:start;gap:18px;min-width:0;width:100%;max-width:630px;height:clamp(540px,calc(var(--grc-canvas-width)*.415),600px);padding-top:26px;justify-self:end}
.visual-label{font-size:14px;line-height:1.7;font-weight:600;margin-bottom:18px;color:var(--soft)}
.hero-mobile{position:relative;min-width:0;width:100%}
.hero-mobile--july{margin-top:66px}
.hero-mobile--home{margin-top:0}
.hero-mobile--double{margin-top:82px}
.hero-evidence .screen-surface{border-color:#ffffff29;border-radius:9px;box-shadow:0 20px 48px rgba(2,8,19,.38)}
.hero-mobile figcaption{color:#c0ccdf;font-size:12px;line-height:1.7;text-align:center;margin-top:16px}
.hero-mobile--home figcaption{color:#edf2fb}
body.is-hero .portfolio-mark{background:transparent;--portfolio-brand:#edf3ff;--portfolio-brand-accent:#e9bc6a}
body.is-hero :focus-visible{outline-color:#e9bc6a}
figcaption{margin-top:16px;font-size:14px;line-height:1.65;color:var(--soft)}
.chapter{padding-block:var(--grc-chapter-space)}
.chapter-tint{background:var(--tint)}
.chapter-head{max-width: none;margin-bottom:56px}
.chapter-head h2{margin-top:18px;letter-spacing:-.025em;text-wrap: wrap}
.chapter-head .portfolio-lead{max-width: none;margin-top:16px;color:var(--soft)}
/* Short chapter summaries can use the heading width without forcing a new line. */
.chapter-head .portfolio-lead--short{max-width:none}
.chapter p,.chapter h3,.chapter h4{overflow-wrap:break-word}
.image-button{position:relative;display:block;width:100%;padding:0;border:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:default;text-align:left}
.image-viewport{display:block;width:100%;min-width:0;background:var(--navy)}
.image-viewport img{width:100%;height:auto}
.screen-surface{display:block;overflow:hidden;background:var(--navy);border:1px solid #273651;border-radius:12px;box-shadow:0 12px 30px rgba(15,30,54,.1)}
.source-crop{position:relative;overflow:hidden;border-radius:3px;isolation:isolate}
.source-crop::before{content:"";display:block;padding-top:var(--crop-height)}
.source-crop img{position:absolute;max-width:none;height:auto}
.context-intro{display:grid;gap:32px;margin-bottom:56px}
.context-intro-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:start}
.context-intro-row p{max-width: none;color:var(--soft)}
.context-goals>.context-intro-row{margin-bottom:32px}
.context-comparison{max-width:880px;margin-left:184px}
.comparison>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;padding:20px 0;border-bottom:1px solid var(--line)}
.comparison>.comparison-label{padding-top:0;color:var(--blue);font-size:14px;font-weight:600}
.comparison p{color:var(--soft)}
.navigation-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;align-items:start}
.navigation-flow>figure{min-width:0}
.navigation-flow .image-button,.navigation-flow figcaption{max-width:300px;margin-inline:auto}
.step-label{display:flex;gap:14px;align-items:baseline;font-size:18px;font-weight:600;margin-bottom:24px}
.step-label>span{font:500 16px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--blue)}
.decision-note{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:48px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:42px}
.decision-note p{color:var(--soft)}
.route-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:32px}
.route-summary p{margin-top:10px;color:var(--soft)}
.chapter-footnote{margin-top:26px;font-size:14px;color:var(--soft)}
.legacy-anchor{display:block;height:0}
.theme-case+.theme-case{margin-top:76px;padding-top:68px;border-top:1px solid var(--line)}
.case-heading{margin-bottom:36px}
.portfolio-case .case-heading h3{margin-top:12px;font-size:28px;line-height:1.4;text-wrap:balance}
.theme-layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:56px;align-items:start}
.source-column{min-width:0}
.case-reason{margin-top:30px}
.case-reason h4:not(:first-child){margin-top:24px}
.case-reason p{margin-top:10px;color:var(--soft);max-width:600px}
.single-phone{width:100%;max-width:350px;justify-self:end}
.theme-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.theme-phones figure{width:100%;max-width:310px;justify-self:end}
.exhibition-scene{--crop-height:33.333333%;background:#091426}
.exhibition-scene img{width:100%;left:0;top:-3.125%}
.zone-device-screen{--crop-height:209.066667%}
.zone-device-screen img{width:100%;left:0;top:0}
#case-june .june-conversion{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:22px 28px;align-items:center;padding:28px;background:#091426;color:#f3f6ff}
#case-june .june-conversion figure{min-width:0}
#case-june .june-conversion .visual-label{color:#c1ccdf}
#case-june .june-scene .exhibition-scene{border-radius:0}
#case-june .june-overview .screen-surface{border-color:#35415c;box-shadow:0 16px 30px #02091850}
#case-june .june-correspondence{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:24px;padding-top:22px;border-top:1px solid #43516980;font-size:16px;line-height:1.7;color:#d8e1f0}
#case-june .june-connector{position:relative;width:64px;flex:none;border-top:1px solid #e8b954}
#case-june .june-connector::after{content:"";position:absolute;right:0;top:-4px;width:7px;height:7px;border-top:1px solid #e8b954;border-right:1px solid #e8b954;transform:rotate(45deg)}
#case-june .june-summary{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;margin-top:32px}
#case-june .june-summary h4,#case-june .june-detail-copy h4{font-size:22px;line-height:1.5}
#case-june .june-summary p,#case-june .june-detail-copy>p:not(.visual-label){color:var(--soft);max-width:700px}
#case-june .june-detail{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:80px;align-items:center;margin-top:52px;padding-top:44px;border-top:1px solid var(--line)}
#case-june .june-detail-copy{min-width:0;max-width:660px}
#case-june .june-detail-copy>p:not(.visual-label){margin-top:18px}
#case-june .june-detail-points{display:grid;gap:14px;margin-top:26px;font-size:14px;color:var(--blue)}
#case-june .june-detail-points span{display:flex;align-items:center;gap:12px}
#case-june .june-detail-points span::before{content:"";width:18px;flex:none;border-top:1px solid currentColor}
#case-june .june-device{width:100%;min-width:0}
@media(max-width:1239px){#case-june .june-conversion{grid-template-columns:minmax(0,1fr) 240px;padding:24px;gap:24px}#case-june .june-detail{grid-template-columns:minmax(0,1fr) 280px;gap:40px}}
.graph-map{display:flex;gap:16px 36px;flex-wrap:wrap;font-size:14px;color:var(--soft);padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:56px}
.graph-group+.graph-group{margin-top:76px;padding-top:64px;border-top:1px solid var(--line)}
.graph-heading{display:grid;grid-template-columns:28px minmax(0,1fr);gap:20px;margin-bottom:34px;align-items:start}
.detail-number{font:500 16px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--blue);padding-top:7px}
.portfolio-case .graph-heading h3{font-size:28px;line-height:1.4;text-wrap:balance}
.graph-heading p{margin-top:14px;color:var(--soft);max-width:850px}
.graph-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
.graph-figure{min-width:0}
.graph-figure .visual-label{margin-bottom:16px;font-size:14px}
.graph-crop{position:relative;overflow:hidden;aspect-ratio:var(--crop-w)/var(--crop-h);border-radius:5px;isolation:isolate;background:var(--navy)}
.graph-crop img{position:absolute;max-width:none;height:auto;width:calc(100% * var(--source-w) / var(--crop-w));left:calc(-100% * var(--crop-x) / var(--crop-w));top:calc(-100% * var(--crop-y) / var(--crop-h))}
.graph-source-stack{display:grid;gap:22px}
.graph-figure figcaption{margin-top:14px;color:var(--soft);max-width:580px}
.graph-marks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;color:var(--blue);font-size:14px;line-height:1.7}
.graph-marks span{display:inline-flex;align-items:baseline;gap:9px}
.graph-marks span::before{content:"";display:inline-block;width:16px;flex:none;border-top:1px solid currentColor;transform:translateY(-4px)}
.graph-example{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.graph-example-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;margin-bottom:26px;align-items:start}
.portfolio-case .graph-example-head h4,.portfolio-case .graph-support>h4{font-size:22px;line-height:1.5}
.graph-example-head p,.graph-support>p{color:var(--soft)}
.graph-source-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:start;margin-bottom:36px}
.graph-principles{display:grid;gap:26px}
.graph-principles p{color:var(--soft);margin-top:10px;max-width:580px}
.graph-principles h4{font-size:18px}
.graph-support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start;border-top:1px solid var(--line);margin-top:44px;padding-top:30px}
.graph-support{min-width:0}
.graph-support>p{margin-top:12px;margin-bottom:26px}
.graph-link-source .graph-principles{margin-top:30px}
.graph-footnote{font-size:14px;color:var(--soft);border-top:1px solid var(--line);padding-top:26px;margin-top:44px}
@media(max-width:1239px){.graph-compare,.graph-support-grid{gap:32px}.graph-heading{gap:16px}.graph-example-head,.graph-source-intro{grid-template-columns:minmax(0,1fr);gap:24px}.graph-source-intro .graph-figure{max-width:680px}.graph-source-intro .graph-principles{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.graph-marks{gap:8px 16px}}
.visual-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:44px}
.visual-notes p{margin-top:14px;color:var(--soft)}
.theme-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px;align-items:start}
.theme-gallery figure{width:100%;max-width:330px;justify-self:center;min-width:0}
.theme-gallery .screen-surface{aspect-ratio:750/1400;background:#101429}
.theme-gallery figcaption{min-height:calc(2em*1.65)}
.evidence-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.evidence-summary p{margin-top:16px;color:var(--soft)}
.scope-note{display:grid;grid-template-columns:160px minmax(0,1fr);gap:30px;margin-top:30px}
.scope-note b{font-size:16px;color:var(--blue)}
.scope-note p{color:var(--soft);max-width:880px}
@media(max-width:1239px){.theme-layout,.detail-layout,.curve-extension{grid-template-columns:minmax(0,1fr);gap:32px}.single-phone{max-width:350px;justify-self:center}.theme-phones{max-width:680px;width:100%;margin-inline:auto}.theme-phones figure{justify-self:center}.source-column .image-button,.chart-copy>.image-button{max-width:660px}.case-reason{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px 24px}.case-reason h4:not(:first-child),.case-reason p{margin-top:0}.reading-summary{grid-template-columns:minmax(0,1fr);gap:26px}.reading-summary>figure{max-width:660px}.hero-grid{gap:40px}.hero-meta{gap:22px}.navigation-flow{gap:30px}.decision-note{grid-template-columns:minmax(0,1fr);gap:16px}.curve-extension .phone-pair{max-width:680px}.comparison p{max-width:340px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(prefers-reduced-motion:reduce){.portfolio-case--grc *,.portfolio-case--grc *::before,.portfolio-case--grc *::after{transition:none!important}}
/* Desktop-only presentation; compact laptop and short-window safeguards remain. */
@media(max-height:760px){
  .portfolio-case--grc{--grc-chapter-title-size:36px}
}
@media(min-height:700px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  .chapter-head{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px 24px;align-items:center}
  .chapter-head h2{margin-top:0}
  .chapter-head .portfolio-lead{grid-column:1/-1;margin-top:0}
}