:root{--ground:#e8e9e5;--ink:#171916;--accent:#c7ff39;--muted:#5b5e56;--gutter:36px;--gap:14px;--font:Arial,"Microsoft YaHei","PingFang SC",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:94px}body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:transparent;padding:0}a,button{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:5px}p,h1,h2,h3{margin:0}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;flex:none}img{display:block;max-width:100%}[hidden]{display:none!important}.page-pad{padding-left:var(--gutter);padding-right:var(--gutter)}.skip-link{position:fixed;z-index:100;top:8px;left:36px;padding:12px 20px;background:var(--accent);transform:translateY(-150%)}.skip-link:focus{transform:none}
.media{display:block;position:relative;overflow:hidden;width:100%;height:100%;background:#d6d8d1}.media>img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.65,.2,1)}.atlas-image{position:absolute!important;width:300%!important;height:200%!important;max-width:none!important;left:calc(var(--col)*-100%);top:calc(var(--row)*-100%);object-fit:fill!important}
.archive{padding-top:112px;padding-bottom:85px;scroll-margin-top:0}.archive-heading{display:flex;align-items:center;gap:34px;margin-bottom:40px}.archive-heading h2{font-size:clamp(45px,5vw,86px);letter-spacing:-.065em;line-height:1.12;font-weight:800}.archive-heading p{font-size:20px;letter-spacing:-.02em}.archive-heading .arrow-square{margin-left:auto}.archive-toolbar{display:flex;align-items:center;gap:28px;margin-bottom:26px}.filter-group{display:flex;align-items:center;gap:26px}.filter{padding:5px 0;color:var(--muted);font-size:17px;transition:color .2s}.filter.active{font-weight:700;color:var(--ink)}.filter.active::after{content:"";display:block;height:5px;background:var(--accent);margin-top:3px}.filter:hover{color:var(--ink)}.platform-label{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}select{border:0;background:transparent;padding:6px 20px 6px 4px;font-size:14px;max-width:150px;cursor:pointer}.result-count{font-size:16px;white-space:nowrap;min-width:82px;text-align:right}.archive-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:34px var(--gap);align-items:start}.work-card{display:block;text-align:left;min-width:0;width:100%;position:relative}.work-card .media{aspect-ratio:1/1}.work-card:hover .media:not(.is-atlas)>img{transform:scale(1.035)}.work-card:hover .media.is-atlas{filter:brightness(1.05)}.work-card:hover .card-title{opacity:.65}.card-title{display:block;font-size:15px;font-weight:600;line-height:1.4;margin-top:10px;transition:opacity .2s}.card-kind{display:block;font-size:13px;color:var(--muted);margin-top:3px}.play-label{position:absolute;bottom:10px;right:10px;width:29px;height:29px;background:var(--ground);display:flex;align-items:center;justify-content:center}.play-label svg{height:14px;width:14px;fill:var(--ink);stroke:none}.archive-note{margin-top:42px;color:var(--muted);font-size:14px}.empty-state{padding:90px 0 120px}.empty-state h3{font-size:30px;margin-bottom:14px}.empty-state p{margin-bottom:24px}.empty-state .text-button{display:block;margin-top:20px}.plain-link{display:inline-flex;gap:18px;padding:12px 0;font-size:16px;font-weight:600}.plain-link:hover{text-decoration:underline;text-underline-offset:6px}.media.failed{display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:15px}.media.failed::after{content:"画面暂时无法加载";font-size:14px}

dialog{border:0;padding:0;color:var(--ink);background:var(--ground);max-width:calc(100vw - 72px);max-height:calc(100svh - 72px);overflow:auto}dialog::backdrop{background:rgb(18 20 17 / .82)}.dialog-close{position:absolute;right:18px;top:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ground);z-index:2}.dialog-close:hover{background:var(--accent)}#work-dialog{width:1240px}.work-layout{display:grid;grid-template-columns:1.45fr 1fr;min-height:620px}.work-media{background:#d8dad4;min-width:0;display:flex;align-items:center;justify-content:center;min-height:480px}.work-media .media{aspect-ratio:1;max-height:calc(100svh - 72px);height:auto;width:100%}.work-media .media:not(.is-atlas)>img{object-fit:contain}.work-media video{display:block;width:100%;height:100%;max-height:calc(100svh - 72px);object-fit:contain;background:#151715}.work-info{padding:78px 36px 30px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}.work-kind{font-size:14px;color:var(--muted);margin-bottom:18px}#work-title{font-size:36px;letter-spacing:-.04em;line-height:1.25;margin-bottom:24px}.work-description{font-size:16px;line-height:1.9;max-width:34em}.work-method{font-size:14px;color:var(--muted);margin-top:28px;line-height:1.8}.work-source{margin-top:26px}.work-pagination{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:48px;margin-top:auto;font-size:14px}.work-pagination button{padding:10px 0}.work-pagination button:not(:disabled):hover{text-decoration:underline;text-underline-offset:5px}.work-position{color:var(--muted);font-size:13px}body.dialog-open{overflow:hidden}
#contact-dialog{
 width:min(384px,calc(100vw - 32px),calc((100svh - 32px) * 2 / 3));
 aspect-ratio:2/3;
 max-height:calc(100svh - 32px);
 border-radius:24px;
}
#contact-dialog[open]{display:grid;align-content:center;justify-items:center;gap:clamp(12px,3svh,24px)}
#contact-title{
 margin:0;
 font-family:"Studio Light","PingFang SC","Microsoft YaHei",sans-serif;
 font-size:18px;
 font-weight:300;
 letter-spacing:.12em;
 text-align:center;
}
.contact-qr{
 display:block;
 width:min(276px,80%);
 height:auto;
 border-radius:14px;
 background:#fff;
}
@media(min-width:1700px){:root{--gutter:44px;--gap:18px}.site-header{height:82px}.card-title{font-size:17px}.card-kind{font-size:14px}.archive-toolbar{margin-bottom:32px}}
@media(max-width:1050px){:root{--gutter:24px}.archive-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.archive-toolbar{flex-wrap:wrap}.platform-label{margin-left:0}.result-count{margin-left:auto}.work-layout{grid-template-columns:1fr 1fr}.work-info{padding:70px 24px 24px}.work-media{min-height:400px}.work-pagination{gap:5px}.archive-heading{gap:20px}.archive-heading p{font-size:17px}}
@media(max-width:700px){:root{--gutter:18px;--gap:10px}.site-header{height:64px}.brand{font-size:25px}.site-header nav{gap:24px;font-size:15px}.intro{font-size:16px;max-width:270px;line-height:1.5}.arrow-square{width:40px;height:40px}.archive{padding-top:70px}.archive-heading{align-items:flex-start;flex-wrap:wrap;gap:15px;margin-bottom:25px}.archive-heading h2{font-size:42px}.archive-heading p{font-size:15px;order:3;flex-basis:100%}.archive-heading .arrow-square{margin-top:3px}.archive-toolbar{gap:14px;margin-bottom:20px}.filter-group{gap:20px;width:100%;justify-content:space-between}.filter{font-size:15px}.platform-label{font-size:13px}.result-count{font-size:14px}.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:25px}.card-title{font-size:14px}.card-kind{font-size:12px}.archive-note{font-size:13px;line-height:1.8}dialog{max-width:calc(100vw - 24px);max-height:calc(100svh - 24px)}.work-layout{display:block;min-height:0}.work-media{min-height:0;max-height:60svh}.work-media .media{width:100%;max-height:none}.work-media video{max-height:60svh}.work-info{padding:28px 24px}.work-kind{margin-bottom:12px}#work-title{font-size:28px;margin-bottom:16px}.work-description{font-size:15px}.work-pagination{padding-top:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.resources{padding-top:100px;padding-bottom:70px;background:#dde0d8}
.resources-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:64px}
.resources-heading h2{font-size:clamp(36px,4.7vw,74px);line-height:1.2;letter-spacing:-.06em;font-weight:600}
.resources-heading p{font-size:18px;max-width:20em}
.featured-resources{display:grid;grid-template-columns:1fr 1fr;gap:65px 50px}
.resource-feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;min-width:0}
.resource-lead{grid-column:1/-1;grid-template-columns:.8fr 1.6fr;gap:60px;padding-bottom:20px}
.resource-stat{font-size:clamp(45px,4.5vw,80px);line-height:1;letter-spacing:-.07em;font-weight:700;margin-bottom:12px}
.resource-lead .resource-stat{font-size:clamp(74px,8.2vw,150px)}
.resource-label{font-size:14px;color:#4a4e43;margin-bottom:32px}
.resource-copy h3{font-size:26px;line-height:1.3;letter-spacing:-.04em;margin-bottom:10px}
.resource-lead h3{font-size:36px}.resource-kind{font-size:14px;color:#4a4e43;margin-bottom:8px}
.resource-pictures{display:flex;align-items:center;gap:16px;min-width:0}
.resource-pictures .media{height:auto;aspect-ratio:var(--ratio);background:transparent;flex:var(--ratio) 1 0%;min-width:0}
.resource-pictures .media>img{object-fit:contain;width:100%;height:auto}
.resource-pictures:has(>.media:only-child){justify-content:center}.resource-pictures>.media:only-child{max-width:calc(520px * var(--ratio));flex:0 1 auto}
.resource-pictures .media:nth-child(2){align-self:flex-end;margin-top:60px}
.resource-lead .resource-pictures .media:nth-child(2){margin-top:70px;align-self:center}
.resource-lead .resource-pictures .media:nth-child(3){align-self:flex-end;margin-bottom:35px}
.metrics-date{font-size:13px;color:var(--muted);margin-top:45px}
.archive-summary{font-size:15px;color:var(--muted);margin-top:-18px;margin-bottom:36px}
.archive-toolbar{margin-bottom:16px}
.archive-search{display:flex;align-items:center;gap:13px;margin:0 0 38px;font-size:14px;color:var(--muted)}
.archive-search input{font:inherit;background:#dfe1da;border:0;border-radius:0;padding:12px 16px;min-width:230px;width:30%;margin-right:auto;color:var(--ink)}
.archive-search input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.archive-search input::placeholder{color:#656a5e}
.archive-grid{display:block;position:relative;min-height:100px}
.work-card{position:absolute;min-width:0}
.work-card .media{height:auto;aspect-ratio:1}
.work-card .media:not(.is-atlas)>img{height:auto;width:100%;object-fit:contain}
.work-card:hover .media:not(.is-atlas)>img{transform:none}
.work-card:hover .media{filter:brightness(.95)}
.card-title{font-size:15px;line-height:1.5;margin-top:12px}
.card-stat{display:block;font-size:13px;margin-top:6px;color:#3f4b2b}
.load-more{display:flex;justify-content:space-between;gap:60px;align-items:center;padding:16px 24px;background:var(--accent);font-size:17px;margin:42px auto 0}
.work-visual{min-width:0;align-self:start;background:#d8dad4}
.work-media{height:min(71svh,720px);min-height:0;overflow:auto}
.work-media .media{display:flex;justify-content:center;align-items:center;aspect-ratio:auto!important;height:100%;max-height:none;width:100%;background:transparent}
.work-media .media:not(.is-atlas)>img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.work-media .media.is-atlas{height:auto;width:min(100%,71svh);aspect-ratio:1!important;display:block}
.work-thumbnails{display:flex;align-items:center;gap:9px;overflow-x:auto;padding:14px;min-width:0;scrollbar-width:thin}
.work-thumbnails:empty{display:none}
.work-thumbnails>button{flex:0 0 64px;height:80px;background:transparent;opacity:.6;padding:3px}
.work-thumbnails>button.selected{opacity:1;background:var(--accent)}
.work-thumbnails>button:hover{opacity:1}.work-thumbnails .media{height:100%;aspect-ratio:auto!important;background:transparent}
.work-thumbnails .media>img{object-fit:contain}
.work-info{padding-top:66px}.work-metrics{display:flex;flex-wrap:wrap;gap:16px 22px;margin-bottom:22px;width:100%}
.work-metrics:empty{display:none}.work-metrics>span{display:flex;flex-direction:column;gap:6px}.work-metrics strong{font-size:28px;font-weight:600;letter-spacing:-.05em}.work-metrics small{font-size:13px;color:var(--muted)}
.metric-captured{font-size:12px;color:var(--muted);width:100%}
@media(min-width:1700px){}
@media(max-width:1050px){.resources-heading{display:block}.resources-heading p{margin-top:20px}.resource-lead{gap:28px}.featured-resources{column-gap:30px}.resource-feature:not(.resource-lead){display:block}.resource-feature:not(.resource-lead) .resource-pictures{margin-top:25px}.archive-search{flex-wrap:wrap}.archive-search input{min-width:190px}.resource-stat{font-size:48px}}
@media(max-width:700px){.resources{padding-top:55px;padding-bottom:45px}.resources-heading{margin-bottom:40px}.resources-heading h2{font-size:33px}.resources-heading p{font-size:16px}.featured-resources{display:block}.resource-feature,.resource-lead{display:block;margin-bottom:48px}.resource-lead .resource-stat{font-size:80px}.resource-lead h3{font-size:28px}.resource-label{margin-bottom:24px}.resource-pictures{margin-top:24px;gap:10px}.resource-lead .resource-pictures .media:nth-child(3){margin-bottom:0}.resource-lead .resource-pictures .media:nth-child(2){margin-top:35px}.archive-summary{margin-top:0;font-size:13px;line-height:1.8}.archive-search{gap:8px;margin-bottom:24px}.archive-search input{width:calc(100% - 75px);min-width:0;margin-right:0}.archive-search select{font-size:13px;padding-right:6px;max-width:150px}.archive-search>label:first-child{width:56px}.card-title{font-size:14px}.card-stat{font-size:12px}.work-media{height:54svh}.work-media .media.is-atlas{width:min(100%,54svh)}.work-thumbnails>button{height:65px;flex-basis:52px}.work-info{padding:28px 24px}.work-metrics strong{font-size:24px}.metrics-date{line-height:1.8}.load-more{font-size:16px}}

/* Cosmic / 2026 — immersive work, quiet interface. */
:root{color-scheme:dark;--ground:#0a0a0c;--ink:#f4f4f6;--accent:#9bbddd;--muted:#aaaab3;--gutter:clamp(22px,6vw,112px);--font:Arial,"Microsoft YaHei","PingFang SC",sans-serif;--surface:#141418;--stroke:#303037}
html{scroll-padding-top:110px;scrollbar-color:#53535f #101014}body{overflow-x:clip}::selection{background:#9bbddd;color:#0a0a0c}input{caret-color:var(--accent)}button,a,input,select{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent)}h1,h2,h3{letter-spacing:-.03em}em{font-family:Georgia,"Times New Roman",serif;font-weight:400}.page-pad{max-width:1600px;margin-inline:auto}.skip-link{color:#0a0a0c;z-index:1000}
.site-header{position:fixed;z-index:30;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;padding:8px 9px 8px 19px;border:1px solid #ffffff20;border-radius:99px;background:#151519d9;backdrop-filter:blur(16px);width:max-content;max-width:calc(100% - 28px);transition:background .3s,box-shadow .3s}.site-header.scrolled{background:#151519f2;box-shadow:0 12px 30px #0005}.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;white-space:nowrap}.brand-orbit{width:7px;height:7px;border-radius:50%;background:linear-gradient(90deg,#89aacc,#4e85bf)}.site-header nav{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:400}.site-header nav a,.nav-contact{padding:11px 17px;border-radius:99px;white-space:nowrap;transition:background .2s,color .2s}.site-header nav a{color:#bcbcc4}.site-header nav a:hover,.site-header nav a[aria-current]{color:#fff;background:#ffffff0d}.nav-contact{background:#eeeef1;color:#111116}.nav-contact span{margin-left:8px}.nav-contact:hover{background:#b9d0e7}
.cosmic-hero{position:relative;min-height:740px;height:100svh;max-height:1300px;isolation:isolate;display:grid;place-items:center;overflow:hidden}.hero-backdrop{position:absolute;inset:0;z-index:-2;background:#17131a}.hero-backdrop img,.hero-backdrop video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.hero-backdrop img{filter:brightness(.6)}.hero-backdrop video{opacity:0;transition:opacity .8s}.hero-backdrop video.ready{opacity:1}.cosmic-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08080c50 0%,#08080c58 35%,#08080c9c 72%,var(--ground) 100%)}.pill{display:inline-flex;justify-content:center;align-items:center;gap:24px;border:1px solid #ffffff40;border-radius:99px;padding:14px 25px;font-size:13px;background:#10101440;transition:transform .25s,border-color .25s,background .25s}.pill.primary{background:#f4f4f6;color:#101014;border-color:#f4f4f6}.pill:hover{transform:translateY(-3px);border-color:var(--accent);background:#252c36}.pill.primary:hover{background:#bdd4ea}.hero-bottom{position:absolute;bottom:36px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#b6b4c0;letter-spacing:.05em}.scroll-link{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px}.scroll-link span{font-size:20px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:54px}.section-heading h2,.resources-heading h2{font-size:clamp(30px,3.2vw,48px);font-weight:500;line-height:1.25;letter-spacing:-.03em}.section-heading em,.resources-heading em{display:block;font-size:.85em;color:#aaaab8;margin-top:10px}.section-heading p,.resources-heading p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:20px}.section-heading .pill{flex:none}.selected-label{display:flex;flex-direction:column;gap:8px;margin-top:20px}.selected-label strong{font-size:clamp(18px,1.6vw,25px);font-weight:500;line-height:1.5}.selected-label>span,.selected-label small{font-size:12px;color:var(--muted);font-weight:400}
.resources{background:transparent;padding-top:96px;padding-bottom:96px;border-top:1px solid #ffffff12}.resources-heading{align-items:flex-end;margin-bottom:60px}.resources-heading p{max-width:24em}.featured-resources{gap:50px 40px}.resource-feature{align-items:start}.resource-lead{grid-template-columns:.8fr 1.4fr;padding-bottom:45px}.resource-copy{display:flex;flex-direction:column;align-items:flex-start}.resource-copy h3{order:-2;font-size:24px;font-weight:500}.resource-kind{order:-1;margin-bottom:28px}.resource-stat,.resource-lead .resource-stat{font-size:clamp(38px,4vw,62px);font-weight:400;letter-spacing:-.03em;color:#c1d6ed}.resource-label,.resource-kind{color:var(--muted);font-size:12px;line-height:1.8}.resource-label{margin-bottom:14px}.resource-copy .plain-link{font-size:13px}.resource-pictures .media{border-radius:10px}.metrics-date{line-height:1.8;font-size:12px}
.archive{padding-top:95px;border-top:1px solid #ffffff12}.archive-heading h2{font-size:clamp(36px,4vw,58px);font-weight:500;letter-spacing:-.03em}.archive-heading p{font-size:14px;color:var(--muted)}.arrow-square{display:flex;justify-content:center;align-items:center;width:44px;height:44px;border-radius:50%;background:#202026;color:var(--ink)}.archive-summary{font-size:13px;margin-bottom:30px}.archive-toolbar{gap:20px}.filter-group{gap:6px}.filter{padding:10px 17px;border:1px solid transparent;border-radius:99px;font-size:14px}.filter.active{background:#23232b;border-color:#ffffff14;font-weight:400}.filter.active:after{display:none}.archive-search{margin-top:24px;padding:18px 0;border-top:1px solid #ffffff12}.archive-search input{background:#19191f;border:1px solid #33333b;border-radius:9px;font-size:13px;color:var(--ink)}.archive-search input::placeholder{color:#a4a4b0}select{background:#17171d;border-radius:6px;color:#ccc}.card-stat{color:#a5bed8}.media{background:#19191e}.work-card .media{border-radius:10px}.work-card:hover .media{filter:brightness(1.08)}.card-title{font-weight:400}.load-more{background:#eeeef1;color:#111116;border-radius:99px;font-size:14px;gap:35px}.play-label{border-radius:50%}.archive-note{font-size:12px}.result-count{font-size:13px}
.text-button:hover{opacity:.75}
dialog{border:1px solid #ffffff25;border-radius:18px;background:#141419;color:var(--ink)}dialog::backdrop{background:#030308da;backdrop-filter:blur(8px)}.dialog-close{border-radius:50%;background:#24242d;color:var(--ink)}.dialog-close:hover{background:#3c4857}.work-visual,.work-media{background:#0c0c10}.work-layout{min-height:580px}.work-thumbnails>button{border-radius:6px}.work-thumbnails>button.selected{background:#809db9}.work-description{color:#c1c1cc}.work-info{padding-bottom:32px}.work-method{font-size:13px}#work-title{font-size:28px;letter-spacing:-.03em}.work-metrics strong{font-size:25px;color:#bad0e6}.work-pagination{font-size:12px}.work-source{font-size:14px}.work-info a{overflow-wrap:anywhere}.work-thumbnails .media{border-radius:3px}
@media(min-width:1700px){:root{--gutter:100px}.site-header{height:auto}.card-title{font-size:15px}}
@media(max-width:1050px){:root{--gutter:36px}.resource-lead{grid-template-columns:.8fr 1.2fr}.section-heading{gap:24px}.archive-toolbar{flex-wrap:wrap}.resources-heading p{margin-top:20px}}
@media(max-width:700px){:root{--gutter:22px}.site-header{top:14px;gap:12px;padding:6px 7px 6px 13px}.brand{font-size:15px;gap:6px}.site-header nav{gap:0;font-size:11px}.site-header nav a,.nav-contact{padding:10px 11px}.nav-contact span{display:none}.cosmic-hero{height:94svh;min-height:650px}.pill{font-size:12px;padding:13px 21px;gap:18px}.hero-bottom{bottom:27px;font-size:9px}.scroll-link{position:static;transform:none}.hero-backdrop video{display:none}.resources,.archive{padding-top:64px;padding-bottom:65px}.section-heading{display:block;margin-bottom:32px}.section-heading h2,.resources-heading h2{font-size:29px}.section-heading p{font-size:13px;max-width:26em}.section-heading .pill{margin-top:22px}.selected-label{margin-top:14px}.selected-label strong{font-size:18px}.resource-lead .resource-stat{font-size:48px}.resource-lead h3{font-size:25px}.resource-feature{margin-bottom:40px}.resource-kind{margin-bottom:20px}.resources-heading{margin-bottom:36px}.resource-pictures{margin-top:22px}.archive-heading h2{font-size:36px}.archive-summary{font-size:12px}.filter-group{gap:2px}.filter{font-size:12px;padding:9px 11px}.archive-search{font-size:12px;gap:8px}.archive-search input{width:calc(100% - 72px);padding:11px}.archive-search select{max-width:130px}.archive-toolbar{gap:14px}.card-title{font-size:13px}.card-kind,.card-stat{font-size:11px}.archive-note{font-size:11px}.work-info{padding:26px 20px}.work-layout{min-height:0}.work-media{height:48svh}.work-description{font-size:14px}.dialog-close{top:12px;right:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-backdrop video{display:none}}
/* Bound portrait previews without cropping their original compositions. */




/* Reference-led editorial chapters */
.chapter-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#aaaab3;margin-bottom:36px}.services-section{scroll-margin-top:94px;background:#fafbf9;color:#141416;border-radius:44px;padding-top:90px;padding-bottom:80px}.services-section .chapter-label{color:#595961}.services-section>h2{font-family:Arial,sans-serif;font-size:clamp(58px,13vw,200px);line-height:1;letter-spacing:-.075em;margin:0 0 80px;font-weight:900}.service-row{display:grid;grid-template-columns:1fr 1.4fr 2fr;gap:32px;align-items:baseline;border-top:1px solid #c9cbc9;padding:40px 0}.service-row>span{font-size:12px;letter-spacing:.12em}.service-row h3{font-size:28px;margin:0}.service-row p{line-height:1.9;color:#55565c;margin:0}.service-contact{background:#141416;color:white;border:0;border-radius:40px;padding:18px 28px;margin-top:25px;cursor:pointer}.projects-section{padding-top:120px;padding-bottom:120px}.film-projects{display:grid;gap:40px}.film-project{position:sticky;top:105px;display:block;width:100%;background:#101114;color:#f4f4f6;border:1px solid #61636b;border-radius:32px;text-align:left;padding:32px;cursor:pointer;box-shadow:0 -15px 30px #0a0a0c55}.project-top{display:flex;align-items:center;gap:28px;margin-bottom:28px}.project-number{font-size:64px;line-height:1;font-weight:800;color:#cdd6e4;letter-spacing:-.07em}.project-top small{display:block;font-size:11px;color:#aaaab3;letter-spacing:.12em;margin-bottom:10px}.project-top strong{font-size:26px;font-weight:500}.project-play{margin-left:auto;border:1px solid #73767f;padding:15px 25px;border-radius:40px;font-size:13px}.film-project>img{width:100%;height:54vh;object-fit:contain;background:#08090a;border-radius:20px;display:block}.film-project:hover .project-play{background:#e0e8f5;color:#101114}.archive-heading h2{font-size:clamp(48px,7vw,100px)}
@media(min-width:1000px){.film-project:nth-child(3n+2){top:118px}.film-project:nth-child(3n){top:130px}}
@media(max-width:700px){.projects-section{padding-top:70px;padding-bottom:70px}.services-section{border-radius:24px;padding-top:55px}.services-section>h2{margin-bottom:40px}.service-row{grid-template-columns:1fr;gap:15px;padding:28px 0}.film-project{position:relative;top:auto!important;padding:16px;border-radius:22px}.project-number{font-size:36px}.project-top{gap:14px;flex-wrap:wrap}.project-top strong{font-size:20px}.project-play{padding:10px 14px}.film-project>img{height:40vh}}
@media(prefers-reduced-motion:reduce){.film-project{position:relative;top:auto!important}}

/* Creative-process hero: consistent contrast across dark studio and bright renders. */
.hero-backdrop{background:#141619}
.hero-backdrop img{filter:none}
.hero-backdrop img,.hero-backdrop video{object-position:50% 50%}
.cosmic-hero:before{background:linear-gradient(180deg,rgba(8,10,14,.40) 0%,rgba(8,10,14,.48) 24%,rgba(8,10,14,.64) 64%,#0a0a0c 100%)}
.hero-bottom{color:#d2d5df}
.cosmic-hero .pill:not(.primary){background:#10141bb8;backdrop-filter:blur(8px)}
@media(max-width:700px){.hero-backdrop img{object-position:35% 50%}.cosmic-hero:before{background:linear-gradient(180deg,#080a0e55 0%,#080a0e88 30%,#080a0eb8 68%,#0a0a0c 100%)}}

/* Quiet interface: artwork first, context on demand. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid #ffffff30;border-radius:50%;color:var(--ink)}
.icon-button svg{width:20px;height:20px}
.icon-button:hover{background:#29323e}
.site-header nav{font-size:14px}
.pill{font-size:14px;min-height:44px}
.hero-bottom .scroll-link{background:transparent;backdrop-filter:none}
.section-heading h2,.resources-heading h2,.archive-heading h2{font-size:clamp(34px,4vw,58px);font-weight:400;line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.section-heading,.resources-heading{margin-bottom:44px}
.resource-feature{align-items:center}
.resource-copy h3{font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.55;margin-bottom:12px}
.resource-copy .plain-link{font-size:14px;font-weight:400;color:#c0cddd;min-height:44px}
.featured-resources{row-gap:64px}
.resource-lead{padding-bottom:0}
/* Usage figures belong to the featured resource, with a quieter unit and scope. */
.resource-copy .resource-stat{display:flex;align-items:baseline;gap:8px;margin:10px 0 12px;color:#f5f5f7;font-size:clamp(40px,4.3vw,64px);font-weight:600;line-height:1.05;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.resource-lead .resource-stat{font-size:clamp(64px,6.4vw,96px)}
.resource-stat strong{font:inherit}
.resource-stat span{font-size:20px;font-weight:400;letter-spacing:0}
.resource-copy .resource-label{font-size:13px;line-height:1.8;color:#aaaab8;margin:0 0 18px}
.resource-snapshot{margin-top:40px;font-size:12px;line-height:1.8;color:#aaaab8}
@media(max-width:700px){.resource-copy .resource-stat{font-size:56px;margin-top:8px}.resource-lead .resource-stat{font-size:72px}.resource-stat span{font-size:18px}.resource-snapshot{margin-top:30px}}


.services-section>h2{font-family:var(--font);font-size:clamp(44px,6vw,88px);letter-spacing:-.04em;line-height:1.2;font-weight:400;margin-bottom:56px}
.service-row{grid-template-columns:1fr 1.15fr;gap:9vw;padding:36px 0;align-items:center}
.service-row h3{font-size:clamp(22px,2vw,28px);font-weight:400;line-height:1.5}
.service-row p{font-size:17px;max-width:30em}
.project-top{gap:24px;margin-bottom:24px}
.project-top strong{font-size:26px;line-height:1.5}
.project-play{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border-radius:50%}
.project-play svg{width:20px;height:20px}
.archive-heading{margin-bottom:40px}
.archive-toolbar{gap:16px;margin-bottom:0}
.filter{min-height:44px}
.archive-search{display:grid;grid-template-columns:minmax(200px,1fr) auto auto;gap:12px;margin-top:20px;margin-bottom:36px;padding-top:20px;padding-bottom:0}
.archive-search input{width:100%;min-width:0;margin:0;font-size:15px;padding:12px 16px}
.archive-search select,.platform-label select{font-size:14px;min-height:44px;max-width:none;padding:10px 28px 10px 12px}
.card-title{font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:400}
.card-kind{font-size:13px;margin-top:7px}
.work-metrics small,.metric-captured,.work-method,.work-kind{font-size:14px}
.work-description{font-size:16px}
.work-source{font-size:15px;min-height:44px}
.work-pagination button{min-height:44px}


@media(max-width:700px){
 .site-header{gap:10px;padding-left:14px}
 .site-header nav{font-size:13px}
 .site-header nav a,.nav-contact{padding:11px 12px}
 .section-heading h2,.resources-heading h2,.archive-heading h2{font-size:34px}
 .section-heading,.resources-heading{margin-bottom:32px}
 .resource-copy h3{font-size:24px}
 .resource-feature{margin-bottom:44px}
 .resource-feature:last-child{margin-bottom:0}
 .services-section>h2{font-size:44px;margin-bottom:32px}
 .service-row{grid-template-columns:1fr;gap:12px;padding:28px 0}
 .service-row p{font-size:16px}
 .project-top{flex-wrap:nowrap;gap:14px;margin-bottom:18px}
 .project-top strong{font-size:20px}
 .project-play{width:44px;height:44px}
 .archive-toolbar{gap:16px}
 .filter{font-size:14px;padding:10px 12px}
 .archive-search{grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
 .archive-search input{grid-column:1/-1;width:100%}
 .archive-search select{width:100%;max-width:none}
 .card-title{font-size:14px}
 .card-kind{font-size:13px}
 
}
@media(max-width:360px){.site-header{gap:5px;padding-left:10px}.site-header nav a,.nav-contact{padding-inline:9px}.site-header nav{font-size:12px}.filter{padding-inline:8px}}

/* Featured tools: three equal photographic collections. */
#resources .featured-resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(62px,6vw,96px) clamp(24px,3vw,52px)}
#resources .resource-feature{display:flex;flex-direction:column;align-items:stretch;gap:28px;grid-column:auto;padding:0;margin:0;min-width:0}
#resources .resource-pictures{order:-1;display:flex;align-items:center;gap:8px;margin:0;padding:18px 0 30px;min-width:0}
#resources .resource-pictures .media{flex:var(--ratio) 1 0%;align-self:center;margin:0;border-radius:6px;min-width:0;box-shadow:0 12px 28px #0003}
#resources .resource-pictures .media:nth-child(2){transform:translateY(18px)}
#resources .resource-pictures .media>img{display:block;width:100%;height:auto;object-fit:contain}
#resources .resource-copy{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 12px;margin-top:auto;border-top:1px solid #ffffff26;padding-top:23px}
#resources .resource-copy h3{grid-column:1/-1;order:0;font-size:clamp(20px,1.65vw,28px);line-height:1.45;margin:0 0 24px;letter-spacing:.045em}
#resources .resource-copy .resource-stat{grid-column:1;grid-row:2;font-size:clamp(42px,4.2vw,70px);font-weight:700;letter-spacing:-.055em;margin:0 0 8px;gap:7px}
#resources .resource-stat span{font-size:15px;color:#c4c4cb}
#resources .resource-copy .resource-label{grid-column:1;grid-row:3;margin:0;font-size:12px}
#resources .resource-copy .plain-link{grid-column:2;grid-row:2/4;align-self:end;font-size:12px;color:#dddde3;padding:12px 0;white-space:nowrap}
#resources .resource-snapshot{margin-top:44px}
@media(max-width:1050px) and (min-width:701px){#resources .resource-copy h3{font-size:20px;margin-bottom:15px}#resources .resource-copy .resource-stat{font-size:44px}}
@media(max-width:700px){#resources .featured-resources{grid-template-columns:1fr;gap:48px}#resources .resource-feature{gap:20px}#resources .resource-pictures{gap:6px;padding:0 0 18px}#resources .resource-pictures .media:nth-child(2){transform:translateY(14px)}#resources .resource-copy{padding-top:20px}#resources .resource-copy h3{font-size:24px;margin-bottom:18px}#resources .resource-copy .resource-stat{font-size:56px}#resources .resources-heading{margin-bottom:36px}}

/* Traveling image wave: transform only, with stable text and layout. */
#resources .resource-pictures{padding-top:24px;padding-bottom:32px}
#resources .resource-pictures .image-ready{animation:resource-wave 4.8s ease-in-out infinite;animation-delay:var(--wave-delay,0s);animation-play-state:paused}
#resources.wave-running .resource-pictures .media{animation-play-state:running}
@keyframes resource-wave{0%,100%{transform:translateY(-16px)}50%{transform:translateY(16px)}}
@media(max-width:700px){@keyframes resource-wave{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}}}
@media(prefers-reduced-motion:reduce){#resources .resource-pictures .image-ready{animation:none}}

/* Keep the wave frame frozen while a card is drawn from its stable slot. */
#resources .resources-heading{display:flex;justify-content:center;text-align:center;margin-bottom:clamp(100px,10vw,155px)}
#resources .resources-heading h2{font-family:"Studio Thin","Studio Light","Microsoft YaHei",sans-serif;font-size:clamp(40px,4.2vw,74px);font-weight:100;line-height:1.3;letter-spacing:-.025em;text-wrap:balance}
#resources .resource-pictures .media{position:relative;overflow:visible}
#resources .resource-pictures .media>img{border-radius:6px;transition:translate .48s cubic-bezier(.22,1,.36,1),filter .48s;pointer-events:none}
@media(hover:hover) and (pointer:fine){
 #resources:has(.resource-pictures .media:hover) .resource-pictures .media{animation-play-state:paused}
 #resources .resource-pictures .media:hover{z-index:2}
 #resources .resource-pictures .media:hover>img{translate:0 -25%;filter:drop-shadow(0 18px 18px #0006)}
 #resources .resource-pictures .media:hover::after{content:'';position:absolute;inset:-25% 0 0;z-index:1}
}
@media(prefers-reduced-motion:reduce){#resources .resource-pictures .media>img{transition:none}}

/* The title follows the preceding workflow heading at every breakpoint. */
@media(min-width:1700px){#resources .resources-heading h2{font-size:72px}}
@media(max-width:1100px){#resources .resources-heading h2{font-size:42px}}
#resources .resource-image{padding:0;border:0;cursor:zoom-in;background:transparent}
#resources .resource-image:focus-visible{outline:2px solid #fff;outline-offset:6px}
#resources:has(.resource-image:focus-visible) .resource-pictures .media{animation-play-state:paused}
@keyframes resource-preview-in{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

#resources-title>span{display:block;white-space:nowrap}
@media(max-width:360px){#resources .resources-heading h2{font-size:clamp(32px,12vw,42px)}}

#resources-title>span+span{margin-top:.38em}
#resources-title strong{font-family:"Studio Light","Microsoft YaHei",sans-serif;font-weight:600}

/* Single-image and case video previews share a transparent stage. */
:is(#workflow-dialog,.image-preview){
 width:100vw;height:100svh;max-width:none;max-height:none;margin:0;
 padding:64px 16px 16px;border:0;border-radius:0;background:transparent;
 box-shadow:none;overflow:hidden;
}
:is(#workflow-dialog,.image-preview)[open]{display:grid;place-items:center}
:is(#workflow-dialog,.image-preview)::backdrop{background:#000d;backdrop-filter:blur(8px)}
#workflow-dialog .vf-viewer-bar{position:absolute;top:0;left:0;margin:0}
#workflow-dialog .vf-viewer-content{display:contents}
#workflow-dialog .vf-viewer-content>video,.image-preview-media img{
 display:block;width:auto;height:auto;max-width:calc(100vw - 32px);
 max-height:var(--image-height,calc(100svh - 80px));margin:0;object-fit:contain;
 border:0;border-radius:clamp(16px,2vw,24px);background:transparent;
 animation:resource-preview-in .38s cubic-bezier(.22,1,.36,1) both;
}
:is(#workflow-dialog,.image-preview) :is(.vf-close,.dialog-close){
 position:fixed;top:12px;right:16px;z-index:2;width:44px;height:44px;
 display:grid;place-items:center;border:0;border-radius:50%;background:#151519;color:#fff;
}
:is(#workflow-dialog,.image-preview) :is(.vf-close,.dialog-close):hover{background:#303039}
.image-preview{--image-height:calc(100svh - 80px)}
.image-preview.has-source{--image-height:calc(100svh - 138px)}
.image-preview-stage{display:grid;justify-items:center;gap:14px;min-width:0;pointer-events:none}
.image-preview-media,.image-preview-link,.image-preview-error{pointer-events:auto}
.image-preview-media>.media{width:auto;height:auto;aspect-ratio:auto!important;background:transparent}
.image-preview-media>.is-atlas{
 width:min(calc(100vw - 32px),var(--image-height));aspect-ratio:1!important;
 border-radius:clamp(16px,2vw,24px);
 animation:resource-preview-in .38s cubic-bezier(.22,1,.36,1) both;
}
.image-preview-media .atlas-image{max-height:none;border-radius:0;animation:none}
.image-preview-error{margin:0;padding:32px 24px;border-radius:16px;background:#151519;color:#fff}
.image-preview-link{
 display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:0 17px;
 color:#f4f4f6;background:#151519;border:1px solid #ffffff38;border-radius:999px;
 font-size:13px;font-weight:500;white-space:nowrap;
}
.image-preview-link:hover{background:#25252c;border-color:#ffffff80}
.image-preview-link:focus-visible,.image-preview .dialog-close:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){
 #workflow-dialog .vf-viewer-content>video,.image-preview-media img,.image-preview-media>.is-atlas{animation:none}
}


#workflow-dialog .vf-viewer-content>video{width:min(var(--native-width,300px),calc(100vw - 32px),calc((100svh - 80px) * var(--media-ratio,1)));aspect-ratio:var(--media-ratio,auto)}

/* Six collaboration directions: retain the editorial two-column layout. */
.services-section>h2{margin-bottom:24px}
.services-intro{font-size:clamp(17px,1.5vw,21px);line-height:1.8;color:#55565c;max-width:36em;margin:0 0 56px}
.service-row h3{display:flex;align-items:baseline;gap:20px;min-width:0}
.service-number{flex:none;font-size:13px;letter-spacing:.08em;color:#55565c;font-variant-numeric:tabular-nums}
.service-row p{min-width:0}
@media(max-width:1000px) and (min-width:701px){.service-row{grid-template-columns:1fr 1.15fr;gap:4vw}.service-row h3{font-size:22px;gap:14px}}
@media(max-width:700px){.services-section>h2{margin-bottom:20px}.services-intro{margin-bottom:36px}.service-row h3{gap:16px}.service-row p{padding-left:34px}}

/* Compact footer after the final gallery. */
footer.page-pad{max-width:none;background:var(--ground);color:var(--muted);padding-block:0 20px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1376px;margin-inline:auto;padding-top:12px;border-top:1px solid #ffffff18;font-size:14px}
.footer-bottom>span{color:var(--ink);white-space:nowrap}
.footer-bottom>div{display:flex;gap:clamp(12px,2vw,28px)}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.footer-bottom a:hover{text-decoration:underline;text-underline-offset:.25em}
.footer-filing{max-width:1376px;margin-inline:auto;font-size:12px}
.footer-filing a{display:inline-flex;align-items:center;min-height:44px}
.footer-filing a:hover{text-decoration:underline;text-underline-offset:.25em}
@media(max-width:540px){
 .footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;font-size:13px}
 .footer-bottom>span{grid-column:1/-1}
}