@import url('../fonts.css');
:root{--ink:#19314d;--muted:#52657b;--blue:#2855be;--paper:#f8fafc;--line:#ccd5df;--serif:'Noto Serif SC','Songti SC',serif;--sans:'Schibsted Grotesk','Microsoft YaHei',sans-serif;--pad:clamp(24px,6.5vw,110px);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:#8da1b7 #edf1f5;scroll-padding-top:76px}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased}::selection{color:#142940;background:#c8dcff}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{outline-offset:6px}a:focus-visible,button:focus-visible{outline:3px solid #557ee4}img{display:block;max-width:100%;height:auto}p,h1,h2,h3,figure{margin:0}h1,h2,h3{text-wrap:balance;font-weight:500}h1,h2{font-family:var(--serif)}h1{font-size:clamp(52px,6.5vw,94px);line-height:1.3;letter-spacing:-.015em}h2{font-size:clamp(30px,3.2vw,46px);line-height:1.55}h3{font-size:20px;line-height:1.6}p{text-wrap:pretty}button[hidden],[hidden]{display:none!important}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.quiet-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:14px;border-bottom:1px solid #9eafc3}.quiet-link:hover{color:var(--blue);border-color:var(--blue)}.preview-nav{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:12px var(--pad);background:#e7edf4;color:#2f4866;font-size:12px;line-height:1.6}.preview-nav nav{display:flex;gap:8px}.preview-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:5px 13px;border-radius:25px}.preview-nav a[aria-current=page]{background:var(--ink);color:white}.preview-nav a:hover{background:#cedaeb}.preview-nav a[aria-current=page]:hover{background:#2b4f7a}.project-header{display:flex;align-items:center;justify-content:space-between;padding:24px var(--pad);font-size:14px;gap:24px}.back{display:inline-flex;align-items:center;gap:10px;min-height:44px}.back .icon{width:18px;height:18px}.signature{font-family:var(--serif);font-size:25px;font-weight:600}.header-note{font-size:12px;color:var(--muted)}.inner{max-width:1360px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}.caption{display:flex;justify-content:space-between;gap:25px;margin-top:19px;font-size:12px;color:var(--muted);line-height:1.8}.caption .quiet-link{font-size:12px;min-height:30px;white-space:nowrap}.caption .icon{width:15px;height:15px}.read-copy{font-size:17px;line-height:2;color:#425972;max-width:560px}.read-copy p+p{margin-top:22px}.project-meta{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding:34px 0;border-top:1px solid var(--line)}.project-meta dt{font-size:12px;color:var(--muted);margin-bottom:11px}.project-meta dd{margin:0;font-size:14px;line-height:1.9}.reading-pair{display:grid;grid-template-columns:.85fr 1.15fr;gap:10vw;align-items:start}.reading-pair h2{max-width:400px}.artwork-link{display:block;cursor:zoom-in;position:relative}.artwork-link:after{content:'查看原图';position:absolute;bottom:15px;right:15px;background:#fff;color:var(--ink);padding:7px 13px;border-radius:24px;font-size:12px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;box-shadow:0 6px 18px #00000012}.artwork-link:hover:after,.artwork-link:focus-visible:after{opacity:1;transform:none}.project-end{padding-top:85px;padding-bottom:90px;border-top:1px solid var(--line)}.project-end h2{font-size:36px}.project-end p{color:var(--muted);font-size:15px;margin-top:20px;max-width:600px}.end-links{display:flex;gap:35px;flex-wrap:wrap;margin-top:30px}.copyright{font-size:12px;color:var(--muted);margin-top:75px}.image-error{padding:35px;background:#e9eff6;color:var(--ink)}
/* A — a composed, editorial project story. */
.editorial{background:#fafbfc}.editorial .project-header{max-width:1540px;margin:auto}.a-intro{padding-top:64px;padding-bottom:54px;display:grid;grid-template-columns:1.05fr 1fr;gap:8vw;align-items:end}.a-intro h1{font-size:clamp(58px,6.1vw,88px)}.a-title-note{font-family:'Bodoni Moda',Georgia,serif;font-size:29px;line-height:1.5;color:#65758b;margin-top:20px}.a-lead{font-size:19px;line-height:1.95;max-width:470px}.a-lead small{display:block;color:var(--muted);font-size:13px;margin-top:22px}.a-cover{padding:0 var(--pad);max-width:1540px;margin:auto}.a-cover .artwork-link{background:#dce6ee;padding:38px 5.2% 0;overflow:hidden}.a-cover img{width:100%;box-shadow:0 15px 40px #00000014}.a-cover .caption{padding:0 0 15px}.a-facts{margin-top:36px}.a-story{padding-top:100px;padding-bottom:60px}.a-story .reading-pair{margin-bottom:60px}.a-process{display:grid;grid-template-columns:1.3fr .7fr;gap:5vw;align-items:center;margin-top:65px}.a-process figure{min-width:0}.a-process img{width:100%}.a-process h3{font-family:var(--serif);font-size:28px;margin-bottom:20px}.a-process p{font-size:15px;color:var(--muted);line-height:2}.a-process .process-detail{margin-top:30px;padding-top:23px;border-top:1px solid var(--line);font-size:13px}.a-delivery{padding-top:95px;padding-bottom:95px;background:#eaf0f6}.a-delivery .reading-pair{margin-bottom:65px}.poster-pair{display:grid;grid-template-columns:1fr 1fr;gap:8vw;max-width:1000px;margin:auto;align-items:start}.poster-pair figure:nth-child(2){margin-top:95px}.poster-pair .artwork-link{max-width:410px;margin:auto}.poster-pair img{box-shadow:0 15px 30px #00000010}.poster-pair figcaption{margin-top:20px;font-size:13px;line-height:1.9;color:var(--muted)}.poster-pair figcaption strong{font-weight:500;color:var(--ink);display:block;font-size:16px;margin-bottom:8px}.a-guide{padding-top:95px;padding-bottom:100px}.guide-heading{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:42px}.guide-heading h2{font-size:35px}.guide-heading p{max-width:410px;font-size:15px;color:var(--muted)}.guide-series{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:start}.guide-series img{width:100%}.guide-series figcaption{font-size:12px;color:var(--muted);margin-top:13px}.guide-series .artwork-link:after{right:8px;bottom:8px;padding:5px 9px;font-size:12px}.a-scope{background:#f0f3f7;padding-top:65px;padding-bottom:70px}.a-scope .read-copy{font-size:16px}.a-scope h2{font-size:30px}.a-scope+.project-end{border-top:0}
/* B — explore a workflow, then see its visual output. */
.journey{background:#f5f7fa}.b-cover{background:#18314d;color:#f6f8fc;overflow:hidden}.journey .project-header{color:#e8eff9}.journey .signature{color:white}.journey .header-note{color:#c0d0e3}.b-intro{padding-top:60px;padding-bottom:70px;display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;align-items:center;max-width:1600px}.b-intro h1{font-size:clamp(46px,4.8vw,68px);line-height:1.45}.b-intro .project-name{font-size:16px;color:#bacce3;margin-top:27px}.b-intro .b-summary{font-size:15px;line-height:2;max-width:380px;color:#d3dfed;margin-top:24px}.b-intro .quiet-link{color:#edf3fd;border-color:#8199b7;margin-top:30px}.b-cover-visual{position:relative;padding-top:40px;padding-bottom:40px}.b-cover-visual img{width:100%;box-shadow:0 24px 45px #00000020}.b-cover-visual figcaption{margin-top:20px;display:flex;justify-content:space-between;gap:20px;color:#bbcee5;font-size:12px}.b-opening{padding-top:50px;padding-bottom:60px}.b-opening .project-meta{border:0;margin:0;padding:0}.b-opening .project-meta dd{font-size:15px}.b-opening .project-meta dt{font-size:12px}.b-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:6vw;max-width:1440px;margin:auto;padding:35px var(--pad) 80px}.b-side{align-self:stretch}.b-side nav{position:sticky;top:40px;display:flex;flex-direction:column;align-items:start;gap:18px;padding-top:12px}.b-side a{font-size:14px;color:var(--muted);padding:7px 0;min-height:40px;border-bottom:1px solid transparent}.b-side a[aria-current=location]{color:var(--blue);border-color:var(--blue)}.b-content{min-width:0}.b-section{padding-bottom:100px;scroll-margin-top:35px}.b-section>h2{max-width:660px}.b-section .read-copy{font-size:17px;max-width:650px;margin-top:27px}.b-section .read-copy p+p{margin-top:20px}.b-section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end}.b-section-heading p{max-width:310px;font-size:14px;color:var(--muted)}.workflow-tabs{display:flex;gap:26px;flex-wrap:wrap;margin-top:45px;margin-bottom:25px;border-bottom:1px solid var(--line)}.workflow-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:12px 0;font-size:14px;color:var(--muted);margin-bottom:-1px;min-height:46px}.workflow-tabs button[aria-selected=true]{border-color:var(--blue);color:var(--blue)}.workflow-tabs button:hover{color:var(--ink)}.workflow-panel img{width:100%;background:#dce5ef}.workflow-panel .workflow-comment{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px;margin-top:24px}.workflow-comment h3{font-size:18px;line-height:1.7}.workflow-comment p{font-size:14px;color:var(--muted);line-height:1.9}.workflow-panel .quiet-link{font-size:12px;margin-top:20px}.b-output{padding-top:15px}.b-output .read-copy{font-size:16px}.b-collection{display:grid;grid-template-columns:1fr .83fr;gap:35px;margin-top:45px;align-items:start}.b-collection figure:nth-child(2){margin-top:100px}.b-collection img{box-shadow:0 16px 32px #00000013}.b-collection figcaption{margin-top:18px;font-size:13px;color:var(--muted)}.b-guide{margin-top:70px}.b-guide h3{font-family:var(--serif);font-size:27px}.b-guide>p{font-size:14px;color:var(--muted);margin-top:18px;max-width:560px}.b-guide .guide-series{margin-top:30px;grid-template-columns:repeat(5,minmax(135px,1fr));gap:14px;overflow-x:auto;padding-bottom:20px}.b-close{border-top:1px solid var(--line);padding-top:45px}.b-close .read-copy{font-size:16px}.journey .project-end{background:#e5edf6;border:0}.journey .project-end h2{font-size:38px}.b-content .b-section:last-child{padding-bottom:25px}
/* The selection page is a review artifact, separate from the portfolio. */
.comparison{background:#f4f7fa}.comparison-main{max-width:1280px;margin:auto;padding:70px var(--pad) 90px}.comparison h1{font-size:49px}.comparison-intro{font-size:17px;color:var(--muted);max-width:760px;margin-top:26px}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:50px}.comparison-grid article{min-width:0}.comparison-grid .preview-cover{display:block;aspect-ratio:1.6;overflow:hidden;background:#e2e9f1}.preview-cover img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}.preview-cover:hover img{transform:scale(1.025)}.comparison-grid h2{font-size:29px;margin-top:25px}.comparison-grid p{font-size:15px;color:var(--muted);margin-top:15px;max-width:440px;line-height:1.9}.comparison-grid .quiet-link{margin-top:20px}.review-notes{margin-top:65px;border-top:1px solid var(--line);padding-top:30px;font-size:14px;color:var(--muted);max-width:800px}.review-notes p+p{margin-top:15px}
@media(min-width:761px) and (max-width:1050px){:root{--pad:40px}.a-intro{gap:6vw}.a-lead{font-size:17px}.a-intro h1{font-size:65px}.project-meta{gap:25px}.reading-pair{gap:6vw}.b-intro{grid-template-columns:.9fr 1.1fr;gap:5vw}.b-intro h1{font-size:44px}.b-layout{grid-template-columns:120px minmax(0,1fr);gap:35px}.workflow-tabs{gap:20px}.b-section-heading{display:block}.b-section-heading p{max-width:520px;margin-top:20px}.b-collection{gap:24px}.poster-pair{gap:6vw}.guide-heading{gap:30px}.guide-heading p{max-width:330px}}
@media(max-width:760px){:root{--pad:24px}body{font-size:15px}.preview-nav{padding-top:9px;padding-bottom:9px;gap:14px;font-size:12px}.preview-nav>span{max-width:175px}.preview-nav nav{gap:3px;flex-shrink:0}.preview-nav a{padding:5px 11px}.project-header{padding-top:17px;padding-bottom:17px;gap:15px}.header-note{display:none}.signature{font-size:23px}.back{font-size:13px}.a-intro{display:block;padding-top:42px;padding-bottom:35px}.a-intro h1{font-size:52px}.a-title-note{font-size:23px;margin-top:15px}.a-lead{font-size:17px;margin-top:32px}.a-lead small{font-size:12px;margin-top:20px}.a-cover{padding:0 16px}.a-cover .artwork-link{padding:17px 16px 0}.caption{font-size:12px;margin-top:14px;gap:16px}.caption .quiet-link{font-size:12px}.a-facts{margin-top:15px}.project-meta{grid-template-columns:1fr;gap:21px;padding:28px 0;margin:0}.project-meta>div{display:grid;grid-template-columns:70px 1fr;gap:18px}.project-meta dt{margin:0;font-size:12px}.project-meta dd{font-size:13px}.a-story{padding-top:45px;padding-bottom:20px}.reading-pair{display:block}.reading-pair h2{font-size:29px}.reading-pair .read-copy{margin-top:25px}.read-copy{font-size:16px;line-height:1.95}.a-story .reading-pair{margin-bottom:35px}.a-process{display:flex;flex-direction:column;align-items:stretch;gap:25px;margin-top:40px}.a-process h3{font-size:24px;margin-bottom:15px}.a-process p{font-size:14px}.a-process .process-detail{margin-top:20px;padding-top:20px;font-size:13px}.a-delivery{padding-top:48px;padding-bottom:45px}.a-delivery .reading-pair{margin-bottom:35px}.poster-pair{gap:24px;grid-template-columns:1fr 1fr}.poster-pair figure:nth-child(2){margin-top:65px}.poster-pair figcaption{font-size:12px;margin-top:15px}.poster-pair figcaption strong{font-size:14px}.artwork-link:after{display:none}.a-guide{padding-top:48px;padding-bottom:50px}.guide-heading{display:block;margin-bottom:27px}.guide-heading h2{font-size:28px}.guide-heading p{font-size:14px;margin-top:20px}.guide-series{grid-template-columns:repeat(5,160px);gap:14px;overflow-x:auto;padding-bottom:20px}.guide-series figcaption{font-size:12px}.a-scope{padding-top:40px;padding-bottom:45px}.a-scope h2{font-size:27px}.a-scope .read-copy{font-size:15px}.project-end{padding-top:48px;padding-bottom:45px}.project-end h2{font-size:30px}.project-end p{font-size:14px}.end-links{gap:23px;margin-top:25px}.copyright{margin-top:45px}.b-intro{display:block;padding-top:35px;padding-bottom:35px}.b-intro h1{font-size:44px;line-height:1.45}.b-intro .project-name{margin-top:22px;font-size:14px}.b-intro .b-summary{font-size:14px;margin-top:18px;max-width:none}.b-intro .quiet-link{margin-top:20px}.b-cover-visual{margin-top:20px;padding-top:15px;padding-bottom:0}.b-cover-visual figcaption{font-size:12px;margin-top:15px}.b-opening{padding-top:30px;padding-bottom:25px}.b-opening .project-meta dd{font-size:13px}.b-layout{display:block;padding-top:10px;padding-bottom:25px}.b-side{margin-bottom:38px}.b-side nav{position:static;flex-direction:row;gap:27px;border-bottom:1px solid var(--line);padding-top:0}.b-side a{font-size:13px}.b-section{padding-bottom:55px}.b-section>h2{font-size:30px}.b-section .read-copy{font-size:15px;margin-top:23px}.b-section-heading{display:block}.b-section-heading h2{font-size:29px}.b-section-heading p{max-width:none;margin-top:18px;font-size:14px}.workflow-tabs{gap:22px;margin-top:29px;margin-bottom:20px}.workflow-tabs button{font-size:13px}.workflow-panel .workflow-comment{display:block;margin-top:21px}.workflow-comment h3{font-size:18px}.workflow-comment p{font-size:14px;margin-top:14px}.b-collection{gap:23px;margin-top:32px}.b-collection figure:nth-child(2){margin-top:65px}.b-collection figcaption{font-size:12px;margin-top:14px}.b-guide{margin-top:40px}.b-guide h3{font-size:25px}.b-guide .guide-series{grid-template-columns:repeat(5,160px);margin-top:24px}.b-close{padding-top:30px}.journey .project-end h2{font-size:31px}.comparison-main{padding-top:40px;padding-bottom:50px}.comparison h1{font-size:35px}.comparison-intro{font-size:15px;margin-top:23px}.comparison-grid{grid-template-columns:1fr;gap:45px;margin-top:35px}.comparison-grid h2{font-size:27px}.comparison-grid p{font-size:14px}.review-notes{margin-top:45px;padding-top:25px;font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:760px){.b-side nav{overflow-x:auto;gap:25px}.b-side nav a{white-space:nowrap;flex-shrink:0}}
/* A short opening sequence; no overlay, scroll lock, sound, or waiting state. */
.opening-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}.opening-line>span{display:inline-block}.b-cover-visual .artwork-link{transition:transform .7s var(--ease)}.opening-replay{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#d1dff1;padding:4px 0;border:0;border-bottom:1px solid #8fa7c3;min-height:34px;font-size:12px;line-height:1.6;white-space:nowrap}.opening-replay:hover{color:white;border-color:white}.b-intro>.b-cover-visual figcaption{align-items:center}.b-intro>div>.quiet-link .icon{transition:transform .25s var(--ease)}.b-intro>div>.quiet-link:hover .icon{transform:translateY(4px)}
@media(prefers-reduced-motion:reduce){.b-cover-visual .artwork-link{transform:none!important}.opening-line{overflow:visible}}
@media(prefers-reduced-motion:reduce){.opening-replay{display:none}}
/* The complete B case: typography, workflow continuity, and project navigation. */
.text-reveal-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}.text-reveal-line>span{display:inline-block}.workflow-tabs{position:relative}.workflow-tabs:after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:var(--tab-width,56px);background:var(--blue);transform:translateX(var(--tab-x,0px));transition:transform .35s var(--ease),width .35s var(--ease);pointer-events:none}.workflow-tabs button[aria-selected=true]{border-bottom-color:transparent}.workflow-visual{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1902/878;background:#e5ebe9}.workflow-visual>#workflow-image{width:100%;height:100%;object-fit:contain}.workflow-visual>.workflow-outgoing{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}.workflow-state{font-size:13px;color:var(--muted);margin-top:15px}.workflow-detail{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px;align-items:center;border-top:1px solid var(--line);padding-top:38px;margin-top:50px}.workflow-detail h3{font-family:var(--serif);font-size:26px;line-height:1.65}.workflow-detail p{font-size:14px;color:var(--muted);line-height:1.95;margin-top:19px}.focus-window{display:block;aspect-ratio:2.35;overflow:hidden;background:#f5f5ed}.focus-window img{width:180%;max-width:none;transform:translate(-18.75%,-39%);height:auto}.workflow-detail figcaption{font-size:12px;color:var(--muted);margin-top:15px}.more-deliverables{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:55px}.more-deliverables summary{display:flex;justify-content:space-between;align-items:center;gap:25px;cursor:pointer;padding:23px 0;font-family:var(--serif);font-size:24px;list-style:none}.more-deliverables summary::-webkit-details-marker{display:none}.more-deliverables summary small{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:8px}.more-deliverables[open] summary .icon{transform:rotate(180deg)}.more-deliverables summary .icon{transition:transform .25s}.delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 32px;align-items:start;padding-top:15px;padding-bottom:35px}.delivery-grid img{width:100%;height:auto}.delivery-grid figcaption{font-size:13px;color:var(--muted);margin-top:15px}.case-progress{height:3px;background:#85aaf9;position:fixed;top:0;left:0;right:0;z-index:70;transform-origin:left;transform:scaleX(0);pointer-events:none}.production>.project-header{position:sticky;top:0;z-index:40;background:#18314d;color:#edf4ff;padding-top:14px;padding-bottom:14px}.header-contact-link{font-size:13px;display:inline-flex;align-items:center;gap:13px;min-height:44px}.production .b-side nav{top:100px}.b-side .side-return{margin-top:20px;border-top:1px solid var(--line);padding-top:18px;font-size:12px}.production .b-cover-visual img{view-transition-name:visual-terminal-hero}
@view-transition{navigation:auto}
@media(max-width:760px){.workflow-detail{display:flex;flex-direction:column;gap:25px;align-items:stretch;padding-top:28px;margin-top:35px}.workflow-detail h3{font-size:23px}.workflow-detail h3 br{display:none}.workflow-detail p{font-size:14px;margin-top:16px}.focus-window{aspect-ratio:2.1}.more-deliverables{margin-top:35px}.more-deliverables summary{font-size:21px;padding-top:20px;padding-bottom:20px}.delivery-grid{gap:28px 20px}.delivery-grid figcaption{font-size:12px}.production>.project-header{padding-top:11px;padding-bottom:11px;gap:15px}.production .back{font-size:12px}.production .signature{font-size:22px}.header-contact-link{font-size:12px;gap:8px}.header-contact-link .icon{width:17px;height:17px}.production .b-side nav{position:static}.b-side .side-return{display:none}}
@media(prefers-reduced-motion:reduce){.text-reveal-line{overflow:visible}.workflow-tabs:after{transition:none}.workflow-outgoing{display:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

.case-use-story{margin:35px 0 55px}.case-use-story h3{font:500 22px/1.6 var(--sans);margin-bottom:18px}