:root{--ink:#101010;--paper:#f3f2ef;--white:#f8f7f4;--muted:#999a9c;--accent:#f04b35;--line:#ffffff35}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:clip;overscroll-behavior-x:none;background:#101010}body{margin:0;overflow-x:clip;background:var(--ink);color:var(--white);font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}body.viewing{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.3;cursor:default}img{max-width:100%;display:block}header{position:absolute;top:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:82px;padding:0 4vw;border-bottom:1px solid #ffffff20}.wordmark{font-size:22px;letter-spacing:.08em;font-weight:700}.wordmark span{font-size:12px;vertical-align:top;margin-left:3px}nav{display:flex;gap:36px;font-size:14px}nav a:hover{color:var(--accent)}.header-role{justify-self:end;font:12px monospace;letter-spacing:.1em}.hero{height:100svh;min-height:720px;max-height:1200px;position:relative;isolation:isolate;overflow:hidden;background:#0c1115}.hero-image{position:absolute;inset:0 0 0 24%;z-index:-2}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:59% center;filter:brightness(.72) saturate(.72)}.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c1115 0%,#0c11159c 20%,transparent 65%),linear-gradient(0deg,#0c1115b3,transparent 55%)}.hero-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#ffffff0b calc(25% - 1px),#ffffff0b 25%)}.meta{position:absolute;left:4vw;right:4vw;display:flex;justify-content:space-between;font:12px monospace;letter-spacing:.11em;color:#d2d2d2}.hero-top{top:111px}.hero-bottom{bottom:28px;align-items:center}.hero-bottom a{font-family:inherit;font-size:14px;color:#fff}.hero-bottom b{font-size:24px;color:var(--accent);margin-left:18px}.hero-copy{position:absolute;top:23%;left:6vw}.role{display:flex;align-items:center;gap:12px;margin:0 0 28px;font-size:14px;letter-spacing:.12em}.role i{height:7px;width:32px;background:var(--accent)}h1{font-size:clamp(84px,10.4vw,170px);letter-spacing:-.055em;line-height:1.12;margin:0;font-weight:800}h1 span{display:block;color:transparent;-webkit-text-stroke:1.3px #f3f4f5;font-weight:700}.thesis{font-size:clamp(17px,1.5vw,23px);line-height:1.9;border-left:2px solid var(--accent);padding-left:18px;margin-top:32px;color:#eee}.hero-index{position:absolute;right:4vw;bottom:100px;width:220px;border-top:1px solid #ffffff70}.hero-index a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #ffffff40;font-size:14px}.hero-index span{font:12px monospace;color:#bbb}.works{padding:90px 6vw 130px}.section-line{display:flex;justify-content:space-between;border-top:1px solid #ffffff60;padding-top:16px;font:12px monospace;letter-spacing:.11em}.section-line span:last-child{font-family:inherit}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:66px 0 65px}.eyebrow{font:12px monospace;letter-spacing:.13em;color:var(--muted);margin:0 0 15px}.section-heading h2{font-size:clamp(52px,6.6vw,106px);letter-spacing:-.05em;line-height:1.15;margin:0;font-weight:700}.accent{color:var(--accent)}.section-heading>p{font-size:17px;line-height:1.8;color:#a6a6a6;margin:0 0 6px}.film-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:92px 40px}.film-card{grid-column:span 6;min-width:0}.film-card:first-child{grid-column:1/span 8}.film-card:nth-child(2){grid-column:9/span 4;align-self:end}.film-card:nth-child(3){grid-column:1/span 7}.film-card:nth-child(4){grid-column:9/span 4;grid-row:2/span 2}.film-card:nth-child(5){grid-column:1/span 7}.media{width:100%;position:relative;display:block;background:#161616;border:0;padding:0;overflow:hidden;text-align:left;color:#fff;aspect-ratio:16/9}.media img{height:100%;width:100%;object-fit:cover;transition:transform .65s,filter .65s}.media:after{content:"";position:absolute;inset:0;border:1px solid #ffffff28;pointer-events:none;background:linear-gradient(0deg,#0006,transparent 30%)}.media:hover img{transform:scale(1.025);filter:brightness(.85)}.number{position:absolute;top:15px;left:16px;font:13px monospace;text-shadow:0 1px 10px #000}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:1px solid #ffffff90;background:#1113;display:grid;place-items:center;border-radius:50%;font-size:17px;padding-left:3px;transition:background .3s}.media:hover .play{background:var(--accent);border-color:var(--accent)}.view{position:absolute;right:16px;bottom:15px;font-size:13px;z-index:1}.duration{position:absolute;left:16px;bottom:15px;font:12px monospace;z-index:1}.caption{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-top:22px;margin-top:20px;border-top:1px solid #ffffff40}.caption h3{font-size:clamp(22px,2.3vw,37px);font-weight:500;line-height:1.35;letter-spacing:-.025em;margin:0}.caption>p{font-size:14px;line-height:1.9;color:#a6a6a6;margin:0;max-width:200px}.film-card:nth-child(2) .caption,.portrait .caption{display:block}.film-card:nth-child(2) .caption>p,.portrait .caption>p{margin-top:12px}.portrait{padding-top:40px}.portrait .media{aspect-ratio:3/4}.portrait .media img{object-fit:contain}.designs{background:var(--paper);color:var(--ink);padding-top:92px}.designs .section-line{border-color:#222}.designs .eyebrow{color:#656565}.designs .section-heading>p{color:#626262}.design-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:100px 36px}.design-card{grid-column:span 6;min-width:0}.design-card:first-child{grid-column:1/-1}.design-card:first-child .media{aspect-ratio:2.15}.design-card:first-child .media img{object-position:center}.design-card .caption{border-color:#999}.design-card .caption h3{font-size:clamp(23px,2.5vw,40px)}.text-button{border:0;background:none;white-space:nowrap;padding:4px 0;border-bottom:1px solid;font-size:14px;margin-top:26px}.design-card .media img{object-fit:contain;background:#ddd}.design-card:first-child .media img{object-fit:cover}footer{background:#e5e3de;color:#191919;padding:70px 6vw 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}footer p{font-size:16px;line-height:1.9;margin-top:18px}footer>a{font-size:14px}.footer-line{width:100%;border-top:1px solid #9b9a98;margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;font:12px monospace;letter-spacing:.1em}dialog{width:min(1420px,94vw);max-height:94svh;padding:0;border:1px solid #555;background:#111;color:#fff}dialog::backdrop{background:#000e;backdrop-filter:blur(8px)} /* 1018AN: 弹层改非模态 show() 以放行原生全屏；遮罩与层级自绘 */ body.viewing::before{content:'';position:fixed;inset:0;background:#000e;backdrop-filter:blur(8px);z-index:98} #viewer[open]{position:fixed;inset:0;margin:auto;z-index:99}.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px;border-bottom:1px solid #333}.viewer-bar h2{font-size:20px;font-weight:500;margin:0}.viewer-bar button,#gallery-nav button{background:none;border:1px solid #666;padding:10px 16px;font-size:14px} .viewer-bar button[hidden]{display:none!important}.viewer-bar button:hover,#gallery-nav button:not(:disabled):hover{background:#333}#viewer-content{display:grid;place-items:center;background:#080808;min-height:100px}#viewer-content img,#viewer-content video{display:block;width:100%;max-height:74svh;object-fit:contain}#gallery-nav{display:flex;align-items:center;justify-content:space-between;padding:15px 22px}#gallery-nav[hidden]{display:none}#count{font:14px monospace}.error{padding:20px}.skip{position:fixed;top:-100px;z-index:100;background:#fff;color:#000;padding:12px}.skip:focus{top:0}@media(prefers-reduced-motion:no-preference){.revealed{animation:rise .65s both}@keyframes rise{from{opacity:.3;translate:0 22px}to{opacity:1;translate:0 0}}}@media(max-width:900px){.header-role{display:none}header{grid-template-columns:1fr auto}.hero{min-height:700px}.hero-copy{top:25%}.hero-index{width:170px}.film-grid,.design-grid{gap:64px 26px}.film-card:first-child{grid-column:1/-1}.film-card:nth-child(2),.film-card:nth-child(3),.film-card:nth-child(4),.film-card:nth-child(5){grid-column:span 6;grid-row:auto;align-self:start}.portrait{padding-top:0}.portrait .media{aspect-ratio:16/9}.caption{display:block}.caption>p{margin-top:14px}.section-heading>p{font-size:15px}.text-button{margin-top:15px}.hero-image{left:10%}}@media(max-width:600px){header{height:70px;padding:0 22px}nav{gap:20px;font-size:14px}.wordmark{font-size:20px}.hero{height:880px;max-height:none;min-height:100svh}.hero-top{top:93px;left:24px;right:24px}.hero-top span:last-child{display:none}.hero-image{inset:0 -55% 0 0;opacity:.6}.hero-image img{object-position:60% center}.hero-image:after{background:linear-gradient(90deg,#0c1115b3,transparent),linear-gradient(0deg,#0c1115,transparent 70%)}.hero-copy{left:25px;top:180px}.role{font-size:13px;margin-bottom:28px;gap:9px}h1{font-size:clamp(80px,20vw,118px);letter-spacing:-.055em;line-height:1.14}.thesis{margin-top:30px;font-size:18px}.hero-index{left:25px;right:25px;width:auto;bottom:91px;display:flex;gap:30px}.hero-index a{flex:1;gap:10px;border-bottom:0}.hero-bottom{left:25px;right:25px;font-size:10px}.hero-bottom>span{max-width:150px;font-size:11px;line-height:1.7}.works{padding:60px 24px 80px}.section-line{font-size:12px}.section-line span:last-child{display:none}.section-heading{display:block;margin:40px 0}.section-heading h2{font-size:53px}.section-heading>p{margin-top:20px}.section-heading>p br{display:none}.film-grid,.design-grid{display:block}.film-card+.film-card,.design-card+.design-card{margin-top:54px}.caption{margin-top:16px;padding-top:17px}.caption h3,.design-card .caption h3{font-size:26px}.caption>p{font-size:15px;max-width:none}.portrait .media{aspect-ratio:3/4;max-height:600px}.design-card:first-child .media{aspect-ratio:16/9}.design-card:first-child .media img{object-fit:contain}.section-heading .eyebrow{margin-bottom:14px}footer{padding:50px 24px 25px}.footer-line{font-size:10px;gap:20px;line-height:1.8}.viewer-bar{padding:13px;gap:10px}.viewer-bar h2{font-size:16px}.viewer-bar button{padding:9px;white-space:nowrap}#gallery-nav{padding:12px;gap:8px}#gallery-nav button{padding:10px;font-size:13px}.play{width:52px;height:52px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} /* Refined cover and project introductions */ .hero-image{inset:0}.hero-image img{object-position:center;filter:none}.hero-image:after{background:linear-gradient(90deg,#09090955,transparent 70%),linear-gradient(0deg,#08080875,transparent 40%)}.hero{background:#0a0a0a}.hero-grid{opacity:.4}.hero-copy h1{text-shadow:0 5px 38px #0005}.hero-copy{top:23%}.caption{display:block}.caption>p{max-width:100%;font-size:16px;line-height:1.9;margin-top:18px;color:#aaa}.project-intro{font-size:16px;line-height:1.9;font-weight:400;color:#595959;margin:18px 0 0;max-width:800px}.design-card:first-child .media{aspect-ratio:16/9}.design-card .media img,.design-card:first-child .media img{object-fit:contain}.design-card .text-button{margin-top:18px}.viewer-bar{position:sticky;top:0;background:#111;z-index:2}#viewer-intro{margin:0;padding:22px 24px;color:#bcbcbc;font-size:16px;line-height:1.9;border-top:1px solid #333}.film-card:nth-child(2) .caption h3,.portrait .caption h3{font-size:clamp(24px,2.3vw,36px)} @media(max-width:600px){.hero-image{inset:0;opacity:1}.hero-image img{object-position:66% center}.hero-image:after{background:linear-gradient(90deg,#070707bd,#07070715),linear-gradient(0deg,#070707 0%,transparent 50%)}.hero-copy{top:180px}.caption>p,.project-intro{font-size:16px;line-height:1.85}.hero-index{background:#08080844}.design-card:first-child .media{aspect-ratio:16/9}#viewer-intro{padding:18px;font-size:15px}} /* Video sequence: teacher, character, campus, lifestyle, craft */ @media(min-width:901px){.film-card:nth-child(3){grid-column:1/span 6;grid-row:auto}.film-card:nth-child(4){grid-column:7/span 6;grid-row:auto}.film-card:nth-child(5){grid-column:3/span 8;grid-row:auto}}.film-card .media{aspect-ratio:16/9}.film-card .media img{object-fit:cover} /* Light editorial portfolio layout */ .films,.designs{background:#f8f7f2;color:#0a0a0a}.films .section-line,.designs .section-line{border-color:#151515}.works .section-heading{border-bottom:2px solid #181818;padding-bottom:24px;margin-bottom:36px}.works .section-heading h2{font-weight:850;font-size:clamp(48px,5.4vw,82px);letter-spacing:-.05em}.works .accent{display:none}.film-grid,.design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:74px 24px}.film-card,.film-card:first-child,.film-card:nth-child(2),.film-card:nth-child(3),.film-card:nth-child(4),.film-card:nth-child(5),.design-card,.design-card:first-child{grid-column:auto;grid-row:auto;margin:0;padding:0;align-self:start}.film-card .caption,.design-card .caption{border:0;margin:0;padding-top:22px}.caption h3,.film-card:nth-child(2) .caption h3,.design-card .caption h3{font-size:clamp(25px,2.55vw,40px);font-weight:800;line-height:1.3;letter-spacing:-.035em}.film-type{font:12px monospace;letter-spacing:.13em;color:#777;margin:0 0 12px;line-height:1.6}.films .section-heading .eyebrow{color:#777}.play{font:12px monospace;letter-spacing:.12em;padding:0;width:78px;height:78px}.number{background:#111b;top:12px;left:12px;padding:9px 11px}.media{border:1px solid #777}.design-card .text-button{font-size:13px}.section-line{color:#777}.works{padding-top:65px}.section-heading{margin-top:36px}.view,.duration{display:none} @media(max-width:600px){.film-grid,.design-grid{grid-template-columns:1fr;gap:48px}.film-card+.film-card,.design-card+.design-card{margin-top:0}.works .section-heading h2{font-size:48px}.caption h3,.film-card:nth-child(2) .caption h3,.design-card .caption h3{font-size:27px}.film-type{font-size:12px}.play{width:60px;height:60px}.works .section-heading{padding-bottom:20px}} /* Featured opening works span the full row. */ .film-card:first-child,.design-card:first-child{grid-column:1 / -1}.film-card:first-child .media,.design-card:first-child .media{aspect-ratio:16/9}.film-card:first-child .caption h3,.design-card:first-child .caption h3{font-size:clamp(30px,3vw,48px)}.design-card .film-type{font:12px monospace;letter-spacing:.13em;color:#777;margin:0 0 12px;line-height:1.6} @media(max-width:600px){.film-card:first-child .caption h3,.design-card:first-child .caption h3{font-size:29px}} /* Player refinements: play button, loading state, larger video */ .play{display:grid;place-items:center;border-radius:50%;background:#111a;border:1px solid #ffffff90;color:#fff;transition:background .3s,border-color .3s,transform .3s} .play svg{margin-left:3px} .media:hover .play{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.1)} #viewer-content{position:relative} .loading-hint{position:absolute;inset:0;display:grid;place-items:center;margin:0;font:13px monospace;letter-spacing:.2em;color:#9a9a9a;pointer-events:none} #viewer-content img,#viewer-content video{max-height:80svh} @media(max-width:600px){#viewer-content img,#viewer-content video{max-height:70svh}.play{width:56px;height:56px}.play svg{width:20px;height:20px}} /* Hero-to-works transition: hero grounds into the paper tone of the works section */ .hero-image:after{background:linear-gradient(0deg,#f8f7f2 0%,#f8f7f2f2 6%,#f8f7f2b3 13%,transparent 26%),linear-gradient(90deg,#09090955,transparent 70%)} .hero-bottom{color:#2c2c2c} .hero-bottom a{color:#0a0a0a} .hero-index{border-top-color:#10101059} .hero-index a{border-bottom-color:#10101040;color:#0a0a0a} .hero-index span{color:#6b6b6b} @media(max-width:600px){.hero-image:after{background:linear-gradient(0deg,#f8f7f2 0%,#f8f7f2f0 5%,#f8f7f2b3 12%,transparent 30%),linear-gradient(90deg,#070707bd,#07070715)}.hero-index{background:none}} /* Unified design covers: fill the 16:9 frame, no letterboxing */ .design-card .media img,.design-card:first-child .media img{object-fit:cover;background:#e8e6e1} /* Contact block in footer */ .contact-list{display:flex;flex-direction:column;gap:10px;font-size:15px;letter-spacing:.02em} .contact-list a:hover{color:var(--accent)} @media(max-width:600px){.contact-list{font-size:14px}} /* Work tags & one-line intro (reference: biannana.xyz card format) */ .film-tags,.design-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none} .film-tags span,.design-tags span{font-size:12px;letter-spacing:.06em;color:#555;border:1px solid #b9b6af;padding:5px 12px;border-radius:999px;white-space:nowrap} .film-intro,.design-intro{font-size:15px;line-height:1.85;color:#555;margin:14px 0 0;max-width:620px} @media(max-width:600px){.film-tags span,.design-tags span{font-size:11px;padding:4px 10px}.film-intro,.design-intro{font-size:14px}} /* Motion system (reference: biannana.xyz) */ @keyframes hero-img-enter{0%{opacity:0;filter:blur(8px);transform:scale(1.07)}to{opacity:1;filter:blur(0);transform:scale(1)}} @keyframes hero-breathe{0%{transform:scale(1)}to{transform:scale(1.035)}} @keyframes copy-enter{0%{opacity:0;clip-path:inset(0 0 100%);translate:0 38px}to{opacity:1;clip-path:inset(0);translate:0}} @keyframes rise-in{0%{opacity:0;translate:0 38px}to{opacity:1;translate:0}} @keyframes cue-drop{0%,to{opacity:1;translate:0}50%{opacity:.45;translate:0 7px}} @keyframes media-reveal{0%{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}} @media(prefers-reduced-motion:no-preference){ .hero-image img{animation:hero-img-enter 1.3s cubic-bezier(.16,1,.3,1) both,hero-breathe 9s ease-in-out 1.4s infinite alternate} .hero-copy .role{animation:rise-in .9s cubic-bezier(.16,1,.3,1) .35s both} .hero-copy h1{animation:copy-enter 1.1s cubic-bezier(.16,1,.3,1) .5s both} .hero-copy .thesis{animation:copy-enter 1.1s cubic-bezier(.16,1,.3,1) .78s both} .hero-index{animation:rise-in 1s cubic-bezier(.16,1,.3,1) .95s both} .hero-bottom{animation:rise-in 1s cubic-bezier(.16,1,.3,1) 1.1s both} .hero-bottom b{animation:cue-drop 2.2s ease-in-out 2.2s infinite} .film-card.revealed .media,.design-card.revealed .media{animation:media-reveal 1.05s cubic-bezier(.16,1,.3,1) both} .film-card.revealed .caption,.design-card.revealed .caption{animation:rise-in .75s cubic-bezier(.16,1,.3,1) .22s both} } /* New media long-form section */ .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .media-grid .media{aspect-ratio:9/16} .media-grid .media img{object-fit:cover;object-position:top center} @media(max-width:900px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.media-grid .caption h3{font-size:16px}.media-grid .text-button{font-size:11px;white-space:normal}} .long-scroll{max-height:80svh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none}.long-scroll::-webkit-scrollbar{display:none} #viewer-content .long-scroll img{width:100%;max-height:none;display:block} #viewer-content{position:relative} .long-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;pointer-events:none;background:#111c;border:1px solid #ffffff55;color:#fff;font-size:13px;letter-spacing:.06em;padding:10px 18px;border-radius:999px;display:flex;align-items:center;gap:9px;backdrop-filter:blur(6px);transition:opacity .4s} .long-hint b{display:inline-block;animation:hint-drop 1.4s ease-in-out infinite} @keyframes hint-drop{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}} .long-hint.hide{opacity:0} @media(prefers-reduced-motion:reduce){.long-hint b{animation:none}} /* 视频作品：一尺有度通栏开场，其余一行三个 */ @media(min-width:601px){.film-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.film-grid .film-card:first-child{grid-column:1/-1}.film-grid .film-card.portrait .media{aspect-ratio:3/4}.film-grid .film-card.portrait .media img{object-fit:contain}} /* 会议设计与新媒体区：首卡不放大独占一行 */ #conference .design-card:first-child,#media .design-card:first-child{grid-column:auto} #media .design-card:first-child .media{aspect-ratio:9/16} #media .design-card:first-child .media img{object-position:top center} #media .design-card .caption h3,#media .design-card:first-child .caption h3{font-size:clamp(25px,2.55vw,40px)} /* 蛋品大会：竖向连页浏览 */ .stack-scroll{max-height:80svh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:26px 30px 10px} .stack-item{margin:0 0 36px} .stack-item img{width:100%;display:block} .stack-label{font:12px monospace;letter-spacing:.12em;color:#8fa0ad;text-align:center;margin:12px 0 0} .stack-note{font:12px monospace;letter-spacing:.14em;color:#6d7f8c;text-align:center;margin:0 0 10px} @media(prefers-reduced-motion:reduce){.stack-scroll{scroll-behavior:auto}} .media video{width:100%;height:100%;object-fit:cover;display:block;background:#161616} /* 2026-09-22: responsive navigation and isolated, scroll-safe viewers. */ header{gap:24px}header nav{min-width:0;gap:clamp(14px,2.2vw,36px);white-space:nowrap} #viewer{overflow:hidden;max-height:94svh;display:none;flex-direction:column;touch-action:pan-y;overscroll-behavior:none} #viewer[open]{display:flex} .viewer-bar,#gallery-nav{flex-shrink:0} #viewer-content{min-height:0;flex:1;overflow:hidden;touch-action:pan-y} #viewer-content>.long-scroll,#viewer-content>.stack-scroll{width:100%;max-height:calc(94svh - 160px);overscroll-behavior:contain} #viewer-content .stack-scroll img{height:auto;max-height:none;object-fit:contain} #viewer-content>img,#viewer-content>video{max-height:calc(94svh - 160px);object-fit:contain} .viewer-bar h2{overflow-wrap:anywhere}.viewer-bar button{flex-shrink:0} .hero-index{background:#f8f7f2e8;padding:0 14px;border-top:1px solid #24242450} .film-intro,.design-intro{font-size:16px} @media(max-width:1100px){.header-role{display:none}header{grid-template-columns:auto minmax(0,1fr)}header nav{justify-self:end;max-width:100%;overflow-x:auto;padding:12px 2px;scrollbar-width:thin}} @media(max-width:600px){ header{padding:0 20px;gap:20px}header nav{justify-self:stretch;gap:20px;font-size:14px} .hero{height:auto;min-height:960px;padding-bottom:40px}.hero-copy{top:165px} .hero-index{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;bottom:95px;left:24px;right:24px;padding:0 12px} .hero-index a{min-width:0;font-size:12px;padding:11px 0;border-bottom:1px solid #2222}.hero-index span{font-size:12px} .media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px} #media .design-card .caption h3,#media .design-card:first-child .caption h3{font-size:20px} .film-tags span,.design-tags span{font-size:12px}.film-intro,.design-intro{font-size:16px} .media-grid .text-button{font-size:14px}.contact-list{width:100%;margin:22px 0} .stack-scroll{padding:16px 12px 0}.long-hint{font-size:12px;max-width:90%;width:max-content;white-space:normal} } @media(max-width:360px){.media-grid{grid-template-columns:1fr}.hero-index{grid-template-columns:1fr 1fr}.hero-index a{font-size:11px}} /* Library cover */ .hero{height:100svh;min-height:760px;background:#060606} .hero-image{inset:0;opacity:1}.hero-image img{object-fit:cover;object-position:66% center;filter:none}.hero-image:after{background:linear-gradient(90deg,#0004,transparent 62%),linear-gradient(0deg,#000b,transparent 24%)}.hero-grid{display:none} .hero-copy{left:6vw;top:30%;width:43%}.hero-copy h1{font-size:clamp(60px,6.3vw,108px);line-height:1.18;letter-spacing:.015em;color:#f6f0e6;text-shadow:none}.hero-copy h1 span{-webkit-text-stroke:1px #b9afa0;color:transparent;font-size:.9em;letter-spacing:.05em;margin-top:7px}.hero-copy .role{color:#c0aa8e;font-size:13px;letter-spacing:.14em}.hero-copy .role i{background:#d98b39;width:24px;height:3px}.hero-copy .thesis{font-size:17px;color:#bcb7b0;border-color:#b77836;margin-top:27px} .hero-index{left:6vw;right:6vw;bottom:82px;width:auto;display:flex;gap:32px;background:transparent;backdrop-filter:none;padding:0;border:0}.hero-index a{flex:1;padding:13px 0;border-top:1px solid #ffffff40;border-bottom:0;font-size:12px;gap:12px}.hero-index span{color:#be9a70}.hero-bottom b{color:#d98b39} @media(max-width:600px){.hero{height:980px;min-height:100svh}.hero-image{inset:0}.hero-image img{object-position:72% top;height:65%;opacity:.9}.hero-image:after{background:linear-gradient(0deg,#060606 30%,transparent 65%)}.hero-copy{top:auto;bottom:265px;left:25px;width:calc(100% - 50px)}.hero-copy h1{font-size:51px}.hero-copy h1 span{display:inline;margin-left:16px;font-size:.85em}.hero-copy .role{font-size:12px;margin-bottom:18px}.hero-copy .thesis{font-size:15px;margin-top:20px}.hero-index{left:25px;right:25px;bottom:95px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 23px}.hero-index a{font-size:12px;padding:10px 0}.hero-top{font-size:10px}} .hero-index a{color:#eee6dc}.hero-bottom{color:#bdb4a8}.hero-index a:hover{color:#e6a65d} /* 删除展开按钮后收紧卡片行距 */ .film-grid,.design-grid{row-gap:22px} .works{padding-bottom:48px} .caption{padding-top:12px;margin-top:10px} .works{padding-top:48px} .section-heading{margin:36px 0 36px} /* videos: 2x2 equal */ #films .film-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #films .film-card:first-child{grid-column:auto} #films .film-card:first-child .media{aspect-ratio:16/9} #films .film-card:first-child .caption h3{font-size:clamp(25px,2.55vw,40px)} #films .film-card:nth-child(2),#films .film-card:nth-child(3),#films .film-card:nth-child(4),#films .film-card:nth-child(5){grid-column:auto} @media(min-width:601px){#films .film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#films .film-card:first-child{grid-column:auto}} /* design: 2x2 equal */ #design .design-card:first-child{grid-column:auto} #design .design-card:first-child .caption h3{font-size:clamp(25px,2.55vw,40px)} /* typography harmony: conference/brand/book first-card titles match the rest */ #conference .design-card:first-child .caption h3,#brand .design-card:first-child .caption h3,#book .design-card:first-child .caption h3{font-size:clamp(25px,2.55vw,40px)} /* ============================================================ Dark gallery theme — ref: Origin Financial (refero.design) near-black canvas · whisper serif display · mono labels · flat surfaces (color steps, no shadows) · chroma only in artwork ============================================================ */ :root{--canvas:#0f1011;--canvas-deep:#090a0b;--panel:#161719;--line:#2e2e2e;--txt:#f5f5f7;--body:#9f9fa0;--dim:#6a6b6b;--serif:Georgia,"Songti SC","STSong","Times New Roman",serif} body{background:var(--canvas);color:var(--txt)} .films,.designs,.works{background:var(--canvas);color:var(--txt)} .works .section-line{border-color:var(--line);color:var(--dim)} .works .section-heading{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:34px} .works .section-heading .eyebrow{color:var(--dim)} .works .section-heading h2,.designs .section-heading h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,5.6vw,86px);line-height:.98;letter-spacing:.005em;color:var(--txt)} h1{font-family:var(--serif);font-weight:400} .hero-copy h1{letter-spacing:.02em} .hero-copy h1 span{-webkit-text-stroke:1px #8d8577} .caption h3,.film-card:nth-child(2) .caption h3,.design-card .caption h3,#media .design-card .caption h3,#media .design-card:first-child .caption h3,#conference .design-card:first-child .caption h3,#brand .design-card:first-child .caption h3,#book .design-card:first-child .caption h3,#design .design-card:first-child .caption h3,#films .film-card:first-child .caption h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.1vw,32px);line-height:1.22;letter-spacing:.01em;color:var(--txt)} .film-type{font-size:11px;color:var(--dim)} .film-intro,.design-intro{color:var(--body)} .film-tags span,.design-tags span{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.09em;color:var(--body);border:1px solid var(--line);border-radius:999px;background:transparent} .film-card .caption,.design-card .caption{border:0} .media{border:1px solid var(--line);border-radius:14px} .media:after{border:0;background:linear-gradient(0deg,#00000066,transparent 30%);border-radius:inherit} .media img{border-radius:inherit} .media:hover{border-color:#3f4041} .number{background:#000000a6;border:1px solid var(--line);border-radius:8px;color:#cacaca} .view{color:#cacaca} .play{border-color:#ffffff88;background:#0f101199;backdrop-filter:blur(4px)} .media:hover .play{background:var(--txt);border-color:var(--txt);color:#000} .text-button{color:#cacaca;border-color:var(--line)} .text-button:hover{color:var(--txt)} footer{background:var(--canvas-deep);color:var(--body)} footer p{color:#cacaca} footer .contact-list a{color:#cacaca} footer .contact-list a:hover{color:var(--txt)} footer>a:hover{color:var(--txt)} .footer-line{border-color:var(--line);color:var(--dim)} .skip{background:var(--txt);color:#000} @media(max-width:600px){ .works .section-heading h2{font-size:44px} .caption h3,.design-card .caption h3{font-size:24px} .film-intro,.design-intro{color:var(--body)} .film-tags span,.design-tags span{color:var(--body);border-color:var(--line)} } button:focus-visible,a:focus-visible{outline-color:#cacaca} /* ============================================================ Origin rebuild: centered hero · layout rhythm · motion ============================================================ */ .works{max-width:1280px;margin:0 auto;padding:104px 40px 160px} .works .section-heading{margin:60px 0 52px} .works .section-heading h2{font-weight:300;font-size:clamp(50px,6.4vw,88px);line-height:.95;letter-spacing:.005em} /* --- hero: Origin-style centered statement --- */ .hero{height:auto;min-height:0;max-height:none;overflow:visible;padding:158px 6vw 72px;background:var(--canvas)} .hero-image,.hero-grid{display:none} .hero-copy{position:static;max-width:1150px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center} .hero-copy .role{margin:0 0 36px;color:var(--dim);font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.24em} .hero-copy .role i{width:28px;height:1px;background:var(--dim)} h1{font-size:clamp(46px,6.6vw,92px);font-weight:400;line-height:1.04;letter-spacing:.01em;text-shadow:none} h1 em{font-style:italic;letter-spacing:.015em} .hero-copy h1{text-shadow:none} .hero-copy .thesis{margin:36px 0 0;padding:0;border:0;font-size:clamp(15px,1.2vw,18px);line-height:1.75;color:var(--body);max-width:600px} .hero-cta{display:flex;gap:14px;margin-top:42px} .btn-primary{background:#fff;color:#000;border-radius:8px;padding:15px 32px;font-size:14px;font-weight:500;transition:transform .35s cubic-bezier(.2,.6,.2,1)} .btn-primary:hover{transform:translateY(-2px)} .btn-ghost{border:1px solid var(--line);color:var(--body);border-radius:8px;padding:15px 26px;font-size:14px;transition:color .3s,border-color .3s} .btn-ghost:hover{color:var(--txt);border-color:var(--body)} .hero-panel{position:relative;max-width:1150px;margin:78px auto 0;border-radius:30px;overflow:hidden;border:1px solid var(--line)} .hero-panel img{width:100%;height:auto;aspect-ratio:21/10;object-fit:cover;display:block} .panel-tag{position:absolute;left:28px;bottom:24px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.2em;color:#ffffffd9;text-shadow:0 1px 12px #000} .hero-index{position:static;width:auto;max-width:1150px;margin:0 auto;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(6,1fr)} .hero-index a{display:flex;justify-content:space-between;align-items:baseline;padding:22px 16px 8px 0;border-bottom:0;font-size:13px;color:var(--body);transition:color .3s} .hero-index a:hover{color:var(--txt)} .hero-index span{color:var(--dim);font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px} .hero-top,.hero-bottom{display:none} @media(max-width:900px){.hero-index{grid-template-columns:repeat(3,1fr)}.hero-index a:nth-child(n+4){border-top:1px solid var(--line)}} @media(max-width:600px){.hero{padding:118px 24px 56px}.hero-index{grid-template-columns:repeat(2,1fr)}.hero-index a{padding:18px 12px 8px 0}} /* --- captions: 3 layers, editorial voice --- */ .film-intro{display:none} .caption h3,.film-card:nth-child(2) .caption h3,.design-card .caption h3{font-size:clamp(21px,1.9vw,30px);line-height:1.25} .film-type{font-size:10.5px;letter-spacing:.22em;margin-bottom:10px} .design-intro{font-size:14.5px;line-height:1.8;max-width:520px;margin-top:10px} .film-tags span,.design-tags span{font-size:10.5px;letter-spacing:.12em;padding:6px 13px} /* --- motion: heading reveal + smooth media zoom --- */ @media(prefers-reduced-motion:no-preference){ .works .section-line.revealed,.works .section-heading.revealed{animation:rise .8s cubic-bezier(.16,1,.3,1) both} .hero-cta{animation:rise-in .9s cubic-bezier(.16,1,.3,1) 1s both} .hero-panel{animation:rise-in 1.1s cubic-bezier(.16,1,.3,1) .9s both} } .media img{transition:transform .9s cubic-bezier(.16,1,.3,1)} .media:hover img{transform:scale(1.045);filter:brightness(.9)} /* fix: h1 shrink-wrap inside flex column */ .hero-copy h1{width:100%;font-size:clamp(44px,5.6vw,80px)} .hero-copy .thesis{max-width:640px} .hero-copy{width:auto} /* ============================================================ Pass 2 — closer to Origin: glass pill nav · centered statements · sans captions · pill badge · panel cards ============================================================ */ body{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif} html{scroll-padding-top:110px} /* floating glass pill nav */ header{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1240px,94vw);height:58px;border:1px solid #ffffff14;border-radius:14px;background:#111214c4;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px 0 22px;z-index:60} header .wordmark{font-size:16px;letter-spacing:.1em} header .wordmark span{font-size:9px} nav{display:flex;gap:4px} nav a{font-size:13px;font-weight:400;color:var(--body);padding:9px 14px;border-radius:8px;transition:color .25s,background .25s} nav a:hover{color:var(--txt);background:#ffffff0f} .nav-cta{justify-self:end;background:#fff;color:#000;border-radius:9px;padding:10px 18px;font-size:13px;font-weight:500;transition:transform .3s cubic-bezier(.2,.6,.2,1)} .nav-cta:hover{transform:translateY(-1px)} .header-role{display:none} @media(max-width:900px){nav{display:none}header{grid-template-columns:1fr auto}} @media(max-width:600px){header{top:10px;height:52px;padding:0 8px 0 16px}} /* hero pill badge (ref: $99 / LIMITED TIME pill) */ .hero-badge{display:inline-flex;align-items:center;gap:12px;margin:0 0 42px;padding:7px 8px 7px 18px;border:1px solid var(--line);border-radius:999px;background:#ffffff09;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.18em;color:var(--body)} .badge-chip{background:var(--txt);color:#000;border-radius:999px;padding:5px 11px;font-weight:500;font-size:10px;letter-spacing:.16em} .hero-copy .role{display:none} h1{font-size:clamp(50px,7vw,94px)} /* centered statement headings, no rule lines */ .works .section-line{display:none} .works .section-heading{display:block;text-align:center;border-bottom:0;padding-bottom:0;margin:64px 0 68px} .works .section-heading .eyebrow{text-align:center;letter-spacing:.24em;margin-bottom:18px} .works .section-heading h2{font-size:clamp(44px,5.6vw,78px);line-height:1} @media(max-width:600px){.works .section-heading{margin:48px 0 44px}} /* captions: sans voice like ref cards ("Stay on budget") */ .caption h3,.film-card:nth-child(2) .caption h3,.design-card .caption h3{font-family:"Helvetica Neue","PingFang SC",sans-serif;font-weight:500;font-size:clamp(19px,1.6vw,25px);letter-spacing:-.01em;line-height:1.35} .film-type{color:var(--dim);font-size:10.5px;letter-spacing:.2em;margin-bottom:9px} .design-intro{color:var(--body);font-size:14px;line-height:1.75;max-width:480px;margin-top:10px} .film-tags span,.design-tags span{color:var(--body)} /* card panels: rounder, quieter border, gentle lift */ .media{border-radius:20px;border:1px solid #26272a;background:var(--panel);transition:border-color .35s,transform .55s cubic-bezier(.2,.6,.2,1)} .media:hover{transform:translateY(-4px);border-color:#3a3b3e} .number{border-radius:7px;background:#000000b3} .hero-panel{border-radius:24px} .btn-primary,.btn-ghost{border-radius:9px;font-size:13.5px} /* footer: bigger wordmark, quieter meta */ footer .wordmark{font-size:30px;letter-spacing:.06em} /* Refero Origin snapshot: full-bleed cloud cover */ header{position:absolute;top:24px;left:2%;transform:none;width:96%;height:56px;border:0;border-radius:0;background:#ffffff08;backdrop-filter:blur(14px);padding:0 0 0 16px;grid-template-columns:1fr auto 1fr} header nav{gap:12px}header nav a{color:#fff;font:12px ui-monospace,Menlo,monospace;padding:12px 8px}.nav-cta{padding:17px 23px;border-radius:8px;font:12px ui-monospace,Menlo,monospace}.wordmark{color:white} .hero.origin-sky{height:max(900px,100svh);min-height:900px;max-height:none;padding:0;position:relative;overflow:hidden;isolation:isolate;background:#0f1011} .sky-background{position:absolute;inset:0;z-index:-2;background:url('assets/origin-clouds.jpg') center/cover}.sky-background video{width:100%;height:100%;object-fit:cover;display:block} .origin-sky:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,21,30,.08) 0%,rgba(10,21,30,.2) 28%,rgba(13,21,27,.60) 70%,#0f1011 100%);pointer-events:none} .origin-sky .hero-copy{position:absolute;top:27%;left:0;bottom:auto;width:100%;max-width:none;margin:0;padding:0 24px;text-align:center;display:flex;align-items:center;flex-direction:column} .origin-sky .hero-badge{color:#21465b;background:#d1f4ff;border:0;border-radius:8px;font:12px ui-monospace,Menlo,monospace;letter-spacing:.045em;padding:7px 12px;margin:0 0 25px;display:block} .origin-sky .hero-copy h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(52px,6vw,96px);line-height:1.03;letter-spacing:-.035em;color:#fff;width:auto;margin:0;text-shadow:none}.origin-sky h1 em{font-weight:400;font-style:italic} .origin-sky .hero-copy .thesis{font-size:16px;line-height:1.5;color:#c4d1d9;margin:26px 0 0;border:0;padding:0;max-width:600px}.thesis strong{font-weight:400;color:#fff} .origin-sky .hero-cta{margin-top:25px;animation:none}.origin-sky .btn-primary{padding:17px 25px;font-size:14px;border-radius:8px} .portfolio-prompt{margin-top:40px;width:min(590px,90vw);min-height:80px;padding:9px 10px 9px 32px;border-radius:50px;background:#ffffff20;backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:16px;text-align:left;gap:15px;transition:background .25s}.portfolio-prompt:hover{background:#ffffff30}.prompt-arrow{width:60px;height:60px;flex-shrink:0;border-radius:50%;background:#ffffff2b;display:grid;place-items:center;font-size:30px;font-weight:300} .hero-note{color:#adbac4;font-size:14px;margin:25px 0 24px;letter-spacing:.05em}.hero-credentials{display:flex;gap:40px;justify-content:center}.hero-credentials>div{display:flex;flex-direction:column;gap:8px;text-align:center;color:#e9eef1;min-width:130px}.hero-credentials b{font:26px Georgia,serif;font-weight:400}.hero-credentials span{font-size:12px;letter-spacing:.09em} .sky-toggle{position:absolute;bottom:25px;right:3%;color:#b5bdc4;font-size:12px;border:1px solid #ffffff30;padding:9px 13px;background:#0f101140;border-radius:8px} .works{padding-top:80px;padding-bottom:90px}.film-intro,.design-intro{font-size:16px;line-height:1.75}.film-type,.eyebrow{font-size:12px}.film-tags span,.design-tags span{font-size:12px}.media{border-radius:24px}.caption h3,.design-card .caption h3{font-family:'PingFang SC',sans-serif;font-size:26px;font-weight:400}.accent{color:inherit} @media(max-width:900px){header{grid-template-columns:1fr auto}header nav{display:none}.origin-sky .hero-copy h1{font-size:clamp(46px,8vw,76px)}} @media(max-width:600px){header{top:16px;left:4%;width:92%;padding-left:8px}.hero.origin-sky{height:900px;min-height:100svh}.origin-sky .hero-copy{top:24%;padding:0 20px}.origin-sky .hero-copy h1{font-size:52px;line-height:1.04;max-width:370px}.origin-sky .hero-badge{font-size:11px;letter-spacing:.02em;margin-bottom:26px}.origin-sky .hero-copy .thesis{font-size:15px;margin-top:25px}.portfolio-prompt{margin-top:36px;min-height:66px;padding-left:20px;font-size:14px}.prompt-arrow{width:46px;height:46px;font-size:25px}.hero-note{font-size:12px}.hero-credentials{gap:20px}.works{padding:65px 24px}.nav-cta{padding:14px 18px}} @media(prefers-reduced-motion:reduce){.sky-background video{display:none}.sky-toggle{display:none}} /* Curated portfolio: image first, fewer labels */ .curated.works{padding:70px 40px 90px;max-width:1280px}.curated .section-heading{margin:0 0 40px;text-align:left;display:flex;align-items:end;justify-content:space-between;gap:24px}.curated .section-heading h2{font-size:clamp(32px,3.8vw,54px);font-weight:300}.curated .section-heading p{font-size:14px;color:#929397;margin:0;max-width:none}.curated .number,.curated .view{display:none}.curated .media{border-radius:12px}.curated .caption{padding:0;margin:20px 0 0;border:0}.curated .caption h3,.curated .design-card .caption h3,#films.curated .film-card:first-child .caption h3{font:400 22px/1.5 'PingFang SC',sans-serif;letter-spacing:0}.curated .design-intro{font-size:14px;color:#929397;margin:8px 0 0;max-width:none;line-height:1.7}.curated .design-intro:empty{display:none} #films.curated .film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 26px}#films.curated .film-card{grid-column:auto;grid-row:auto;margin:0}#films.curated .film-card:first-child{grid-column:1/-1}#films.curated .film-card:first-child .media{aspect-ratio:2.05}#films.curated .film-card:first-child img{object-position:center 42%}#films.curated .film-card:first-child .caption>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px} .selected-grid{display:grid;gap:80px}.selected-grid .design-card{margin:0}.selected-grid .media{aspect-ratio:16/9}.selected-grid .media img{object-fit:cover}.selected-grid .caption>div{display:flex;align-items:baseline;justify-content:space-between;gap:32px}.selected-grid .design-intro{max-width:460px}.additional-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 26px}.additional-grid .design-card{margin:0;grid-column:auto}.additional-grid .media{aspect-ratio:16/10}.additional-grid .caption h3{font-size:19px}.additional-grid .media img{object-fit:cover} .media-showcase.works{max-width:none;padding-left:0;padding-right:0;overflow:hidden}.media-showcase .section-heading{max-width:1200px;margin:0 auto 24px;padding:0 40px}.media-deck{--card:320px;display:flex;align-items:start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:calc(50% - var(--card)/2);padding:36px calc(50% - var(--card)/2) 35px;gap:0;scrollbar-width:none;overscroll-behavior-x:contain;perspective:1400px}.media-deck::-webkit-scrollbar{display:none}.media-deck .design-card{flex:0 0 var(--card);width:var(--card);margin:0 -22px;scroll-snap-align:center;transform:scale(.87) rotateY(-9deg);opacity:.45;transition:transform .45s,opacity .45s;position:relative;z-index:1;animation:none!important}.media-deck .design-card:first-child{margin-left:0}.media-deck .design-card:last-child{margin-right:0}.media-deck .design-card.is-active{transform:scale(1);opacity:1;z-index:3}.media-deck .design-card.is-before{transform:scale(.87) rotateY(9deg)}.media-deck .media{aspect-ratio:9/14;border-radius:12px;border:1px solid #ffffff26;box-shadow:0 18px 45px #0007}.media-deck .media img{object-fit:cover;object-position:top}.media-deck .media:hover{transform:none}.media-deck .caption{text-align:center;transition:opacity .3s;opacity:0}.media-deck .is-active .caption,.media-deck .design-card:focus-within .caption{opacity:1}#media .media-deck .caption h3{font-size:20px;font-family:'PingFang SC',sans-serif}.deck-controls{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:8px}.deck-controls button{border:1px solid #ffffff35;border-radius:50%;width:46px;height:46px;background:transparent;color:#fff;font-size:20px}.deck-controls button:hover{background:#ffffff16}.deck-controls span{color:#a8a8ab;font:13px ui-monospace,monospace;letter-spacing:.12em}#project-summary{margin:0;padding:14px 22px;color:#bcbcc1;font-size:14px;line-height:1.7;border-bottom:1px solid #ffffff15;flex-shrink:0}#project-summary[hidden]{display:none} @media(max-width:700px){.curated.works{padding:50px 24px 60px}.curated .section-heading{display:block;margin-bottom:28px}.curated .section-heading p{margin-top:16px}#films.curated .film-grid{grid-template-columns:1fr;gap:32px}#films.curated .film-card:first-child .media{aspect-ratio:16/9}.selected-grid{gap:42px}.selected-grid .caption>div,#films.curated .film-card:first-child .caption>div{display:block}.additional-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}.additional-grid .caption h3{font-size:17px}.additional-grid .design-intro{font-size:13px}.curated .caption h3{font-size:20px}.media-showcase.works{padding-left:0;padding-right:0}.media-showcase .section-heading{padding:0 24px}.media-deck{--card:260px}.media-deck .design-card{margin-left:-18px;margin-right:-18px}#project-summary{max-height:none;overflow:visible}} @media(prefers-reduced-motion:reduce){.media-deck .design-card{transition:none}} .additional-grid .design-card:first-child .media{aspect-ratio:16/10}.additional-grid .design-card:first-child .media img{object-fit:cover} /* Clear project categories and quiet contact sheets */ .category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 30px}.category-grid .design-card{grid-column:auto;margin:0;min-width:0}.category-grid .design-card .media,.category-grid .design-card:first-child .media{aspect-ratio:16/10;border-radius:12px;background:#171819}.category-grid .design-card .media img{object-fit:contain;background:#171819;transform:none;filter:none}.category .section-heading{border-top:1px solid #ffffff20;padding-top:28px}.category .section-heading p{font:12px ui-monospace,monospace;letter-spacing:.06em}.category-grid .caption h3,.category-grid .design-card:first-child .caption h3{font:400 22px/1.5 'PingFang SC',sans-serif}.category-grid .design-intro{max-width:540px}.hover-counter{position:absolute;right:14px;bottom:14px;background:#101112c9;color:#fff;border:1px solid #ffffff26;padding:7px 10px;border-radius:5px;font:12px ui-monospace,monospace;z-index:4;pointer-events:none}.category .media:hover{transform:none;border-color:#ffffff55}.category .media:after{background:none}.category .media .hover-counter:before{content:'预览 ';color:#aeb0b3} #viewer .stack-scroll{padding:18px 22px;width:100%;max-height:calc(94svh - 180px)}#viewer .stack-item{margin-bottom:20px}#viewer .stack-item img{height:auto;max-height:none;object-fit:contain}.stack-label{font-size:13px;color:#babcc0;letter-spacing:.03em} @media(max-width:700px){.category-grid{grid-template-columns:1fr;gap:34px}.category-grid .caption h3,.category-grid .design-card:first-child .caption h3{font-size:21px}.category .section-heading{display:flex;align-items:center}.category .section-heading p{margin:0}.hover-counter{font-size:12px}#viewer .stack-scroll{padding:12px 8px}} /* Tonal chapters: unified dark canvas (Mercury style). */ .curated.works{--txt:#f3f3f5;--body:#bbbcc6;--dim:#8c8e9a;--line:#ffffff19;--card:#20212b;--image:#18191f;max-width:none;margin:0;padding:104px max(32px,calc((100% - 1200px)/2));background:#171721;color:var(--txt)} .curated .section-heading{display:flex;align-items:end;justify-content:space-between;text-align:left;border:0;padding:0;margin:0 0 42px;gap:32px} .curated .section-title{min-width:160px}.curated .chapter-label{display:block;font:12px/1.5 'PingFang SC',sans-serif;letter-spacing:.08em;color:var(--dim);margin-bottom:18px} .curated .section-heading h2{font:400 clamp(34px,4vw,52px)/1.15 'PingFang SC',sans-serif;letter-spacing:-.035em;color:var(--txt)} .curated .section-heading .chapter-intro{font:400 15px/1.8 'PingFang SC',sans-serif;letter-spacing:0;color:var(--body);max-width:290px;margin:0 0 3px} .category-grid{gap:24px}#films.curated .film-grid{gap:24px} .category-grid .design-card,#films.curated .film-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px;overflow:hidden;transition:box-shadow .25s,border-color .25s} .category-grid .design-card:hover,#films.curated .film-card:hover{border-color:var(--dim);box-shadow:0 12px 36px #00000008} .category-grid .design-card .media,.category-grid .design-card:first-child .media,#films.curated .media{border:0;border-radius:10px;background:var(--image);transform:none} .category-grid .design-card .media img{background:var(--image)} .curated .category-grid .caption,#films.curated .caption{margin:0;padding:24px 14px 20px;min-height:112px} .curated .caption h3,.curated .design-card .caption h3,.category-grid .design-card:first-child .caption h3,#films.curated .film-card:first-child .caption h3{color:var(--txt);font:400 21px/1.45 'PingFang SC',sans-serif} .curated .design-intro{color:var(--body);font-size:13px;margin-top:10px;line-height:1.75} #films.curated .film-card:first-child .caption>div{align-items:center} #brand .category-grid,#book .category-grid{grid-template-columns:1fr} #brand .category-grid .design-card,#book .category-grid .design-card{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);align-items:center} #brand .category-grid .caption,#book .category-grid .caption{padding:32px} #media.media-showcase{padding-left:0;padding-right:0;background:#1a1b24} #media .section-heading{max-width:1200px;padding:0;margin:0 auto 42px;width:calc(100% - 64px)} #media .media-deck .caption h3{color:var(--txt)} @media(max-width:700px){.curated.works{padding:64px 20px}.curated .section-heading{display:block;margin-bottom:28px}.curated .chapter-label{margin-bottom:12px}.curated .section-heading .chapter-intro{margin-top:20px;max-width:100%;font-size:14px}.category-grid,#films.curated .film-grid{gap:20px}.category-grid .design-card,#films.curated .film-card{padding:8px;border-radius:16px}.curated .category-grid .caption,#films.curated .caption{padding:18px 10px;min-height:0}.curated .caption h3,.curated .design-card .caption h3,.category-grid .design-card:first-child .caption h3,#films.curated .film-card:first-child .caption h3{font-size:19px}#brand .category-grid .design-card,#book .category-grid .design-card{display:block}#brand .category-grid .caption,#book .category-grid .caption{padding:20px 12px}#media .section-heading{width:calc(100% - 40px);padding:0;margin-bottom:22px}#films.curated .film-card:first-child .caption>div{display:block}} /* Unified cards: stable covers, consistent type and concise descriptions. */ .curated .category-grid .media img,.curated .film-grid .media img{width:100%;height:100%;object-fit:cover;background:transparent} .curated .caption,.curated .caption h3,.curated .design-intro,.curated .chapter-label,.curated .chapter-intro{font-family:'PingFang SC','Microsoft YaHei',sans-serif} .category-grid .caption>div{display:grid;grid-template-rows:auto auto;align-content:start;gap:8px} .category-grid .caption h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:3em;margin:0} .category-grid .design-intro{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:13px;line-height:1.65} .category-grid .design-card .media,.category-grid .design-card:first-child .media{overflow:hidden} .category-grid .design-card .media img{transition:transform .55s cubic-bezier(.2,.6,.2,1)} .category-grid .design-card .media:hover img{transform:scale(1.025);filter:none} .hover-counter{font-family:'PingFang SC',sans-serif;letter-spacing:.02em} .category .media .hover-counter:before{content:'查看 · ';color:#c8c9ce} #media .media-deck{cursor:grab} #media .media-deck:active{cursor:grabbing} #media .media-deck:after{content:attr(data-position);position:sticky;right:24px;align-self:flex-end;flex:0 0 auto;color:#b9bac2;font:12px/1 'PingFang SC',sans-serif;letter-spacing:.08em;padding:9px 12px;border:1px solid #ffffff24;border-radius:999px;background:#15161ecc;backdrop-filter:blur(10px)} #media .media-deck .caption{min-height:96px} #media .media-deck .caption h3{font-family:'PingFang SC','Microsoft YaHei',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #media .media-deck .design-intro{display:block;font-family:'PingFang SC','Microsoft YaHei',sans-serif;font-size:13px;line-height:1.6;color:var(--body);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media(max-width:700px){.category-grid .caption h3{min-height:0}.category-grid .design-intro{-webkit-line-clamp:2}#media .media-deck .caption{min-height:88px}#media .media-deck:after{right:12px}} /* Refined film control, featured exhibition and hover-led media browsing. */ #films .play{width:62px;height:62px;padding:0;border:1px solid #ffffff45;border-radius:50%;background:#0b11174f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 30px #0005,inset 0 0 0 1px #ffffff12;display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s,box-shadow .3s} #films .play svg{width:19px;height:19px;transform:translateX(2px);filter:drop-shadow(0 2px 5px #0006)} #films .play svg path{fill:#fff} #films .media:hover .play{transform:translate(-50%,-50%) scale(1.08);background:#ffffff24;border-color:#ffffffa3;box-shadow:0 14px 36px #0006,inset 0 0 0 1px #ffffff24} #films .media:focus-visible .play{background:#fff;border-color:#fff;color:#111} #design .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} #design .category-grid .design-card:first-child{grid-column:1/-1} #design .category-grid .design-card:first-child .media{aspect-ratio:2.15/1} #design .category-grid .design-card:not(:first-child) .caption h3{font-size:19px;min-height:3em} #design .category-grid .design-card:not(:first-child) .design-intro{font-size:12.5px} .media-deck .design-card:hover{transform:scale(1.035) rotateY(0);opacity:1;z-index:6} .media-deck .design-card:hover .caption{opacity:1} .media-deck .design-card:hover .media{border-color:#ffffff65;box-shadow:0 24px 58px #0009} @media(max-width:700px){#films .play{width:54px;height:54px}#films .play svg{width:17px;height:17px}#design .category-grid{grid-template-columns:1fr;gap:20px}#design .category-grid .design-card:first-child{grid-column:auto}#design .category-grid .design-card:first-child .media{aspect-ratio:16/10}#design .category-grid .design-card:not(:first-child) .caption h3{font-size:19px;min-height:0}.media-deck .design-card:hover{transform:scale(1);opacity:1}} /* Play mark redrawn from the supplied reference: larger, balanced and crisp. */ #films .play{width:68px;height:68px;border:3px solid #fff;background:#0a0c1066;box-shadow:0 10px 30px #0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} #films .play svg{width:31px;height:31px;transform:none;filter:none;overflow:visible} #films .play svg path{fill:#fff} #films .media:hover .play{transform:translate(-50%,-50%) scale(1.06);background:#0a0c1085;border-color:#fff;box-shadow:0 14px 36px #0008} @media(max-width:700px){#films .play{width:60px;height:60px;border-width:3px}#films .play svg{width:27px;height:27px}} /* Final proportion pass: native 9:16 media covers and a lighter play mark. */ .media-deck .media{aspect-ratio:9/16} .media-deck .media img{width:100%;height:100%;object-fit:cover;object-position:center top} #films .play{width:60px;height:60px;border:2px solid #fffffff0;background:#0a0c102e;box-shadow:0 6px 18px #0004;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} #films .play svg{width:25px;height:25px} #films .media:hover .play{transform:translate(-50%,-50%) scale(1.05);background:#0a0c1052;box-shadow:0 8px 22px #0005} @media(max-width:700px){#films .play{width:54px;height:54px;border-width:2px}#films .play svg{width:23px;height:23px}} /* Preserve the same visible ratio on every media card; depth comes from scale only. */ .media-deck .design-card{transform:scale(.9);opacity:.5} .media-deck .design-card.is-before{transform:scale(.9)} .media-deck .design-card.is-active{transform:scale(1);opacity:1} .media-deck .design-card:hover{transform:scale(1.035);opacity:1} /* Fix stuck :hover on transformed overlapping deck cards — JS-managed highlight instead */ .media-deck .design-card:hover{transform:scale(.9);opacity:.5;z-index:1} .media-deck .design-card:hover .caption{opacity:0} .media-deck .design-card:hover .media{border-color:#ffffff26;box-shadow:0 18px 45px #0007} .media-deck .design-card.is-hover{transform:scale(1.035);opacity:1;z-index:6} .media-deck .design-card.is-hover .caption{opacity:1} .media-deck .design-card.is-hover .media{border-color:#ffffff65;box-shadow:0 24px 58px #0009} /* Cover integrity pass: full 16:9 covers (no crop), equal card heights, 2-col design grid */ #design .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #design .category-grid .design-card:first-child{grid-column:auto} #design .category-grid .design-card:first-child .media{aspect-ratio:16/9} .category-grid .design-card .media,.category-grid .design-card:first-child .media{aspect-ratio:16/9} #brand .category-grid .design-card .media,#book .category-grid .design-card .media{aspect-ratio:16/9} .category-grid .design-intro{-webkit-line-clamp:2} .category-grid .design-card{align-self:stretch} /* Deck v2: plain row — hover highlights only the hovered card, no slide-linked scaling */ .media-deck{gap:24px;padding:8px max(32px,calc((100% - 1200px)/2)) 16px;scroll-snap-type:none;perspective:none;align-items:stretch} .media-deck .design-card{margin:0;transform:none;opacity:1;z-index:auto;scroll-snap-align:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s} .media-deck .design-card.is-active,.media-deck .design-card.is-before{transform:none;opacity:1} .media-deck .caption{opacity:1;transition:none;text-align:left} .media-deck .design-card:hover{transform:scale(1.04);opacity:1;z-index:6} .media-deck .design-card:hover .media{border-color:#ffffff65;box-shadow:0 24px 58px #0009} #media .media-deck:after{display:none} @media(max-width:700px){.media-deck{--card:260px;padding:8px 20px 16px}.media-deck .design-card:hover{transform:none}#design .category-grid{grid-template-columns:1fr;gap:20px}#design .category-grid .design-card:first-child .media{aspect-ratio:16/9}} /* Core strengths closing section: numbered capability grid + resume CTA */ #strengths{background:#0f1011;color:#f3f3f5;padding:110px max(32px,calc((100% - 1200px)/2)) 120px;text-align:center} #strengths .strengths-eyebrow{font:12px/1.5 'PingFang SC',sans-serif;letter-spacing:.35em;color:#8c8e9a;margin:0 0 22px;text-transform:uppercase} #strengths h2{font:400 clamp(34px,4.5vw,58px)/1.1 'Helvetica Neue',sans-serif;font-weight:300;letter-spacing:.18em;margin:0 0 84px;color:#f3f3f5} #strengths .strengths-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 96px;text-align:left;max-width:1040px;margin:0 auto} #strengths .strength .num{display:block;font:400 64px/1 Georgia,serif;color:#3c3d45;transition:color .35s;letter-spacing:.02em} #strengths .strength:hover .num{color:#6d6f7c} #strengths .strength h3{font:400 22px/1.5 'PingFang SC',sans-serif;color:#f3f3f5;margin:20px 0 0} #strengths .strength p{font:400 14px/1.9 'PingFang SC',sans-serif;color:#929397;margin:14px 0 0;max-width:420px} #strengths .strengths-cta{margin-top:96px} #strengths .strengths-cta a{display:inline-block;padding:16px 34px;border:1px solid #ffffff45;border-radius:999px;font:400 15px/1 'PingFang SC',sans-serif;letter-spacing:.06em;color:#f3f3f5;transition:background .3s,border-color .3s} #strengths .strengths-cta a:hover{background:#ffffff14;border-color:#ffffff80} @media(max-width:700px){#strengths{padding:72px 24px 80px}#strengths h2{margin-bottom:52px;letter-spacing:.12em}#strengths .strengths-grid{grid-template-columns:1fr;gap:48px}#strengths .strength .num{font-size:52px}#strengths .strengths-cta{margin-top:64px}} /* Page 2 — Experience overview: visual card left, headline + stat grid right */ #experience{background:#0f1011;color:#f3f3f5;padding:110px max(32px,calc((100% - 1240px)/2))} #experience .exp-wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:64px;align-items:stretch} #experience .exp-visual{margin:0;position:relative;border-radius:20px;overflow:hidden;background:#17181c;min-height:420px} #experience .exp-visual img{width:100%;height:100%;object-fit:cover;display:block} #experience .exp-visual figcaption{position:absolute;left:22px;bottom:20px;font:400 12px/1.7 'PingFang SC',sans-serif;letter-spacing:.12em;color:#fff;text-shadow:0 2px 12px #0009} #experience .exp-eyebrow{font:12px/1.5 'PingFang SC',sans-serif;letter-spacing:.3em;color:#8c8e9a;margin:6px 0 26px;text-transform:uppercase} #experience h2{font:800 clamp(52px,6.5vw,96px)/0.98 'Helvetica Neue',sans-serif;letter-spacing:-.02em;margin:0;color:#f3f3f5;text-transform:uppercase} #experience .exp-intro{font:400 15px/2 'PingFang SC',sans-serif;color:#b6b7bf;margin:34px 0 0;max-width:640px} #experience .exp-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px} #experience .stat{border:1px solid #ffffff1c;background:#17181dcc;border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s} #experience .stat:hover{border-color:#ffffff45} #experience .stat b{font:700 22px/1.2 'PingFang SC',sans-serif;color:#f3f3f5;letter-spacing:.01em} #experience .stat span{font:400 12.5px/1.7 'PingFang SC',sans-serif;color:#929397} /* Page 3 — Career path: dotted timeline + employer cards */ #career{background:#0f1011;color:#f3f3f5;padding:20px max(32px,calc((100% - 1240px)/2)) 120px} #career .career-eyebrow{font:12px/1.5 'PingFang SC',sans-serif;letter-spacing:.35em;color:#8c8e9a;margin:0 0 14px} #career h2{font:400 clamp(34px,4vw,52px)/1.15 Georgia,"Songti SC","STSong",serif;letter-spacing:.06em;margin:0 0 66px;color:#f3f3f5} #career .career-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:34px} #career .career-line{position:absolute;top:0;left:0;right:0;height:1px;background:#ffffff2e} #career .career-card{position:relative;background:#17181ce0;border:1px solid #ffffff14;border-radius:16px;padding:26px 22px;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s} #career .career-card:hover{transform:translateY(-6px);border-color:#ffffff40;box-shadow:0 18px 44px #0007} #career .career-card:before{content:"";position:absolute;top:-38px;left:26px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #f04b3533} #career .career-card h3{font:500 17px/1.5 'PingFang SC',sans-serif;color:#f3f3f5;margin:0 0 14px;min-height:2.9em} #career .career-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} #career .career-card .tag{font:400 11px/1 'PingFang SC',sans-serif;letter-spacing:.04em;padding:7px 11px;border-radius:999px;border:1px solid #ffffff2b;color:#b6b7bf} #career .career-card .tag.time{border-color:#f04b3570;color:#f08a76;background:#f04b3512} #career .career-card p{font:400 13px/1.9 'PingFang SC',sans-serif;color:#929397;margin:0} @media(max-width:900px){#experience .exp-wrap{grid-template-columns:1fr;gap:36px}#experience .exp-visual{min-height:280px;aspect-ratio:4/3}#career .career-track{grid-template-columns:1fr;gap:20px;padding-top:0}#career .career-line{display:none}#career .career-card:before{display:none}#career .career-card h3{min-height:0}} /* ===== 20260923 修订：统一标题字体 + 新媒体区悬停放大高亮 ===== */ /* 作品标题统一为与"感恩答谢会"一致的 Inter 无衬线（覆盖首卡衬线规则） */ .works .caption h3, .works .design-card:first-child .caption h3, .works .film-card:first-child .caption h3, .works .film-card:nth-child(2) .caption h3{font-family:'PingFang SC','Microsoft YaHei',sans-serif!important;font-weight:400!important;font-size:clamp(19px,1.9vw,26px)!important;line-height:1.45!important;letter-spacing:0!important} /* 新媒体区：全部卡片平铺展示，无叠放、无滑动缩放 */ #media .media-deck{flex-wrap:nowrap;justify-content:center;gap:20px;overflow:visible;scroll-snap-type:none;padding:16px max(24px,calc((100% - 1280px)/2)) 24px} #media .media-deck .design-card{margin:0;transform:none!important;opacity:1!important;scroll-snap-align:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s} #media .media-deck .design-card.is-active,#media .media-deck .design-card.is-before{transform:none!important;opacity:1!important} /* 悬停放大 + 高亮 */ #media .media-deck .design-card:hover{transform:scale(1.06)!important;opacity:1!important;z-index:6} #media .media-deck .design-card:hover .media{border-color:#ffffff65!important;box-shadow:0 24px 58px #0009!important} #media .media-deck .design-card:hover .caption{opacity:1} #media .media-deck .caption{opacity:1;text-align:center} /* 一横排等宽：六张卡片同排展示，均分宽度 */ #media .media-deck .design-card{flex:1 1 0;width:auto;max-width:230px} @media(max-width:900px){#media .media-deck{flex-wrap:wrap}} /* ===== 20260923 修订二：展陈区首卡放大 ===== */ /* 展陈设计：国博首卡放大独占一行，其余三张并排放置（与影像区首卡结构一致） */ #design .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #design .category-grid .design-card:first-child{grid-column:1/-1} #design .category-grid .design-card:first-child .media{aspect-ratio:2/1} /* 新媒体区：仅保留标题，下方说明已移除 */ #media .media-deck .design-intro{display:none} @media(max-width:900px){#design .category-grid{grid-template-columns:1fr}#design .category-grid .design-card:first-child{grid-column:auto}#design .category-grid .design-card:first-child .media{aspect-ratio:16/9}} /* ===== 20260923 修订三：新媒体标题缩小 + 品牌横向图集 ===== */ /* 新媒体视觉：章节标题缩小 */ #media .section-heading h2{font-size:clamp(32px,4vw,58px)!important} /* ===== 20260923 修订五：国博首卡介绍自适应宽度 ===== */ /* 首卡介绍不限定窄宽，随屏幕宽度自然排布（宽屏一行展示，窄屏自动换行） */ #design .category-grid .design-card:first-child .design-intro{max-width:none;-webkit-line-clamp:3} /* ===== 20260923 修订六：新媒体错落排版 + 长图手机式预览 ===== */ /* 新媒体区：卡片一横排但高低错落、微倾斜，悬停上移放大高亮，其余自动变暗 */ #media .media-deck{align-items:flex-start;padding-top:40px;padding-bottom:52px} #media .media-deck .design-card:nth-child(odd){transform:translateY(0) rotate(-1.2deg)!important} #media .media-deck .design-card:nth-child(even){transform:translateY(34px) rotate(1.2deg)!important} #media .media-deck:hover .design-card:not(:hover){opacity:.7} #media .media-deck .design-card:hover{transform:translateY(-14px) rotate(0deg) scale(1.09)!important;opacity:1!important;z-index:8} #media .media-deck .design-card .media{box-shadow:0 14px 34px #00000066} #media .media-deck .design-card:hover .media{border-color:#ffffff80!important;box-shadow:0 32px 68px #000000aa!important} /* 长图弹窗：以手机比例居中展示，两侧留深色背景，不再铺满电脑全屏 */ #viewer .long-scroll{display:flex;justify-content:center;align-items:flex-start;padding:26px 16px 42px;background:radial-gradient(120% 90% at 50% 0%,#14151a 0%,#080808 70%)} #viewer-content .long-scroll img{flex:0 0 auto;width:min(620px,94vw)!important;min-width:min(620px,94vw);height:auto!important;max-height:none!important;object-fit:fill;border-radius:22px;border:1px solid #ffffff24;box-shadow:0 26px 66px #000000cc} /* 20260923 修订七：彻底移除卡片右下角"查看 · N 张"角标 */ .hover-counter{display:none!important} /* ===== 20260923 修订八：影片区三张卡片等高对齐 ===== */ #films.curated .film-grid{align-items:stretch} #films.curated .film-card{align-self:stretch;display:flex;flex-direction:column} #films.curated .film-card .caption{flex:1;display:flex;flex-direction:column} #films.curated .film-card .design-intro{display:block;white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;max-width:none} /* 20260924 final UX pass: recruiter-first hierarchy and responsive navigation. */ html{scroll-padding-top:88px;scroll-behavior:auto} main>section{scroll-margin-top:88px} .hero.origin-sky{height:84svh;min-height:720px} /* Stable horizontal media rail at every width. */ #media .media-deck{display:flex;flex-wrap:nowrap!important;justify-content:flex-start;gap:22px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-padding-inline:max(24px,calc((100vw - 300px)/2));padding:40px max(24px,calc((100vw - 1200px)/2)) 58px;perspective:none} #media .media-deck .design-card,#media .media-deck .design-card:nth-child(odd),#media .media-deck .design-card:nth-child(even){flex:0 0 clamp(250px,22vw,300px)!important;width:clamp(250px,22vw,300px)!important;max-width:none;margin:0;transform:none!important;opacity:1;scroll-snap-align:center} #media .media-deck .design-card.is-active,#media .media-deck .design-card.is-before{transform:none!important;opacity:1!important} #media .media-deck:hover .design-card:not(:hover){opacity:.62} #media .media-deck .design-card:hover{transform:translateY(-10px) scale(1.04)!important;opacity:1!important;z-index:8} #media .media-deck .design-card:hover .caption{opacity:1} /* Featured museum project, with three supporting projects kept in one row. */ #design .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} #design .category-grid .design-card:first-child{grid-column:1/-1} #design .category-grid .design-card:first-child .media{aspect-ratio:2/1} /* One-project chapters stay concise. */ #brand.curated,#book.curated{padding-top:76px;padding-bottom:82px} @media(min-width:700px) and (max-width:1100px){ #design .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} #design .category-grid .design-card:first-child{grid-column:1/-1} #design .category-grid .design-card:first-child .media{aspect-ratio:2/1} #design .category-grid .design-card:not(:first-child) .caption{padding-left:8px;padding-right:8px} #design .category-grid .design-card:not(:first-child) .caption h3{font-size:17px!important} #design .category-grid .design-card:not(:first-child) .design-intro{font-size:12px;-webkit-line-clamp:3} } @media(max-width:699px){ html{scroll-padding-top:74px} main>section{scroll-margin-top:74px} .hero.origin-sky{height:82svh;min-height:680px} header nav.pill-nav{display:flex!important;position:static;left:auto;right:auto;bottom:auto;z-index:91;gap:4px;padding:6px;overflow-x:auto;background:#111318e8;border:1px solid #ffffff20;border-radius:14px;box-shadow:none;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);scrollbar-width:none} header,body>header{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border:0;box-shadow:none;transform:none!important;left:0!important;right:0!important;margin:0 auto;width:calc(100% - 24px)!important} header .wordmark{position:relative;z-index:91;display:none} header nav.pill-nav::-webkit-scrollbar{display:none} header nav.pill-nav a{flex:0 0 auto;padding:11px 13px;border-radius:9px;font-size:12px;color:#d7d8dc} header nav.pill-nav a:active{background:#ffffff14;color:#fff} #design .category-grid{grid-template-columns:1fr;gap:20px} #design .category-grid .design-card:first-child{grid-column:auto} #design .category-grid .design-card:first-child .media{aspect-ratio:16/9} #media .media-deck{gap:16px;scroll-padding-inline:13vw;padding:26px 13vw 42px} #media .media-deck .design-card,#media .media-deck .design-card:nth-child(odd),#media .media-deck .design-card:nth-child(even){flex-basis:74vw!important;width:74vw!important;transform:none!important} #media .media-deck:hover .design-card:not(:hover){opacity:1} #media .media-deck .design-card:hover{transform:none!important} #brand.curated,#book.curated{padding-top:56px;padding-bottom:62px} } /* Desktop media gallery restored to the original staggered six-card composition. */ @media(min-width:900px){ #media .media-deck{display:flex;flex-wrap:nowrap!important;justify-content:center;align-items:flex-start;gap:20px;overflow:visible;scroll-snap-type:none;padding:40px max(24px,calc((100% - 1280px)/2)) 52px;perspective:none} #media .media-deck .design-card,#media .media-deck .design-card:nth-child(odd),#media .media-deck .design-card:nth-child(even){flex:1 1 0!important;width:auto!important;max-width:230px!important;margin:0;scroll-snap-align:none;opacity:1!important;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s,box-shadow .3s} #media .media-deck .design-card:nth-child(odd){transform:translateY(0) rotate(-1.2deg)!important} #media .media-deck .design-card:nth-child(even){transform:translateY(34px) rotate(1.2deg)!important} #media .media-deck .design-card.is-active,#media .media-deck .design-card.is-before{opacity:1!important} #media .media-deck:hover .design-card:not(:hover){opacity:.7!important} #media .media-deck .design-card:hover{transform:translateY(-14px) rotate(0) scale(1.09)!important;opacity:1!important;z-index:8} #media .media-deck .design-card:hover .media{border-color:#ffffff80!important;box-shadow:0 32px 68px #000a!important} } /* Tablet and mobile keep the same artwork at a readable swipe size. */ @media(max-width:899px){ #media .media-deck{display:flex;flex-wrap:nowrap!important;justify-content:flex-start;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory} #media .media-deck .design-card,#media .media-deck .design-card:nth-child(odd),#media .media-deck .design-card:nth-child(even){flex:0 0 min(74vw,290px)!important;width:min(74vw,290px)!important;max-width:none;transform:none!important;scroll-snap-align:center;opacity:1!important} #media .media-deck:hover .design-card:not(:hover){opacity:1!important} #media .media-deck .design-card:hover{transform:none!important} } /* Hero quick-access bar: functional category navigation instead of a decorative field. */ .origin-sky .hero-cta{display:none} .portfolio-prompt{width:min(780px,92vw);min-height:76px;margin-top:34px;padding:10px 10px 10px 26px;border:1px solid #ffffff55;border-radius:999px;background:#152b3b70;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;align-items:center;gap:18px;color:#fff;text-align:left;box-shadow:0 14px 38px #07111a2e} .portfolio-prompt:hover{background:#18364a80} .prompt-label{flex:0 0 auto;font:400 13px/1 'PingFang SC',sans-serif;letter-spacing:.08em;color:#c7d4dc;padding-right:18px;border-right:1px solid #ffffff2b} .prompt-links{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;flex:1} .prompt-links a{display:block;padding:10px 13px;border-radius:999px;font:400 13px/1 'PingFang SC',sans-serif;color:#f1f5f7;white-space:nowrap;transition:background .25s,color .25s} .prompt-links a:hover,.prompt-links a:focus-visible{background:#ffffff1c;color:#fff;outline:none} .portfolio-prompt .prompt-arrow{width:54px;height:54px;flex:0 0 54px;border-radius:50%;background:#ffffff24;display:grid;place-items:center;font-size:24px;line-height:1;color:#fff;transition:background .25s,transform .25s} .portfolio-prompt .prompt-arrow:hover{background:#ffffff36;transform:translateY(2px)} @media(max-width:699px){ .portfolio-prompt{width:min(350px,92vw);min-height:0;margin-top:28px;padding:10px 10px 10px 18px;gap:10px} .prompt-label{display:none} .prompt-links{justify-content:flex-start;overflow-x:auto;scrollbar-width:none} .prompt-links::-webkit-scrollbar{display:none} .prompt-links a{padding:10px 11px;font-size:12px} .portfolio-prompt .prompt-arrow{width:44px;height:44px;flex-basis:44px;font-size:20px} } /* Hero statement: navigation is handled by the header, so this stays as a quiet visual signature. */ .portfolio-prompt{width:min(620px,90vw);min-height:78px;margin-top:36px;padding:9px 10px 9px 30px;justify-content:space-between;gap:16px;border-color:#ffffff50;background:#152b3b66;box-shadow:0 14px 38px #07111a26;font:400 16px/1.5 'PingFang SC',sans-serif;letter-spacing:.02em} .portfolio-prompt:hover{background:#152b3b66} .portfolio-prompt>.prompt-arrow{width:56px;height:56px;flex:0 0 56px;background:#ffffff20;font-size:24px;transform:none} @media(max-width:699px){ .portfolio-prompt{width:min(350px,90vw);min-height:64px;margin-top:28px;padding:8px 8px 8px 18px;font-size:13px;white-space:nowrap} .portfolio-prompt>.prompt-arrow{width:46px;height:46px;flex-basis:46px;font-size:20px} } /* Homepage: full-bleed, restrained hero inspired by the supplied Mercury reference. */ header{position:absolute;top:0;left:0;right:0;width:100%;height:88px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;gap:28px;border:0;background:linear-gradient(180deg,#07131d52,transparent);backdrop-filter:none;border-radius:0;box-shadow:none} header .wordmark{justify-self:start;color:#f2f4f7;font:500 17px/1 'PingFang SC',sans-serif;letter-spacing:.11em} header nav.pill-nav{justify-self:center;gap:8px;padding:5px;border-radius:999px;background:#10172238;border:1px solid #ffffff1f;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} header nav.pill-nav a{padding:10px 15px;border-radius:999px;color:#e7ebef;font:400 13px/1 'PingFang SC',sans-serif;transition:background .25s,color .25s} header nav.pill-nav a:hover{background:#ffffff14;color:#fff} header .nav-cta{justify-self:end;padding:12px 20px;border-radius:999px;background:#5266eb;color:#fff;font:500 13px/1 'PingFang SC',sans-serif;box-shadow:none;transition:background .25s,transform .25s} header .nav-cta:hover{background:#6073f0;transform:translateY(-1px)} .hero.origin-sky{height:100svh;min-height:720px;max-height:none;background:#171721} .origin-sky .sky-background:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a13204d 0%,#11152224 38%,#11131d9c 82%,#171721 100%),linear-gradient(90deg,#11131d26,#11131d0d)} .origin-sky:after{background:radial-gradient(circle at 50% 43%,transparent 0,#10141c24 55%,#11131d70 100%)} .origin-sky .hero-copy{position:absolute;inset:0;width:min(780px,90vw);height:max-content;margin:auto;padding:36px 0 0;text-align:center;display:flex;align-items:center;flex-direction:column} .origin-sky .hero-badge{margin:0 0 28px;padding:0;border:0;border-radius:0;background:transparent;color:#d8e0e7;font:500 11px/1 ui-monospace,monospace;letter-spacing:.18em} .origin-sky .hero-copy h1{width:auto;margin:0;color:#f2f2f5;font-family:'PingFang SC',sans-serif;font-size:clamp(58px,6.4vw,92px);font-weight:480;line-height:1.02;letter-spacing:-.045em;text-shadow:none} .origin-sky .hero-copy h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.02em} .origin-sky .hero-copy .thesis{max-width:560px;margin:30px 0 0;padding:0;color:#d5d8de;font:400 clamp(15px,1.25vw,18px)/1.7 'PingFang SC',sans-serif} .origin-sky .hero-copy .thesis strong{display:inline-block;margin-bottom:3px;color:#f5f5f7;font-weight:480} .portfolio-prompt,.hero-note,.hero-credentials{display:none!important} .hero-scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;color:#d2d5dc;font:500 10px/1 ui-monospace,monospace;letter-spacing:.16em} .hero-scroll b{width:36px;height:36px;border:1px solid #ffffff55;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:400;transition:transform .25s,background .25s} .hero-scroll:hover b{transform:translateY(3px);background:#ffffff14} .sky-toggle{bottom:24px;right:3%;border-color:#ffffff26;background:#15182166;color:#c4c7cf;border-radius:999px} @media(max-width:900px){header{grid-template-columns:1fr auto}.origin-sky .hero-copy h1{font-size:clamp(54px,9vw,78px)}} @media(max-width:699px){ header{height:72px;padding:0 20px;background:linear-gradient(180deg,#07131d70,transparent)} header .wordmark{font-size:15px} header .nav-cta{padding:11px 15px;font-size:12px} .hero.origin-sky{height:100svh;min-height:680px} .origin-sky .hero-copy{width:min(350px,88vw);padding-top:4px} .origin-sky .hero-badge{font-size:9px;margin-bottom:22px;letter-spacing:.14em} .origin-sky .hero-copy h1{font-size:clamp(49px,15vw,64px);line-height:1.03} .origin-sky .hero-copy .thesis{font-size:14px;line-height:1.7;margin-top:24px;max-width:310px} .hero-scroll{bottom:88px} .hero-scroll span{display:none} .sky-toggle{display:none} } /* ===== 20260924 修订九：Mercury 风格首页复刻 ===== */ /* 顶部导航：固定 + 深色毛玻璃 */ body>header{position:fixed;top:0;left:0;right:0;z-index:50;height:72px;border-bottom:1px solid #ffffff14;background:#14141cd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .nav-cta{background:#5266eb!important;color:#fff!important;border-radius:999px!important;padding:10px 22px!important;border:0!important} /* 首屏：sticky 吸附，下方内容滚动时覆盖其上 */ .hero{position:sticky;top:0;z-index:1;background:#171721} .sky-background img.hero-bg{width:100%;height:100%;object-fit:cover;display:block} .works,footer{position:relative;z-index:2;background:#101010} /* 居中版式（Mercury 排版） */ .hero-copy{position:absolute;inset:0;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw} .hero-badge{display:inline-block;font:500 12px/1 'PingFang SC',sans-serif;letter-spacing:.14em;color:#c3c3cc;background:#101014b3;border:1px solid #ffffff1f;border-radius:999px;padding:9px 18px;margin:0 0 34px} .hero h1,.hero #title{font:500 clamp(44px,6vw,68px)/1.12 'Helvetica Neue','PingFang SC',sans-serif!important;letter-spacing:.01em;color:#ededf3;margin:0 0 22px;max-width:900px;font-style:normal} .hero .thesis{font:400 clamp(15px,1.5vw,18px)/1.65 'PingFang SC',sans-serif;color:#c3c3cc;margin:0;max-width:640px} .hero .thesis strong{font-weight:500;color:#ededf3} .hero-cta{display:flex;gap:14px;justify-content:center;margin-top:38px} .hero .btn-primary{background:#5266eb;color:#fff;border-radius:999px;padding:15px 34px;font-size:14px;font-weight:500;text-decoration:none} .hero .btn-primary:hover{background:#4355da;transform:none} .btn-ghost{display:inline-block;background:transparent;color:#ededf3;border:1px solid #e2e3ed59;border-radius:999px;padding:15px 34px;font-size:14px;text-decoration:none;transition:border-color .25s,background .25s} .btn-ghost:hover{border-color:#e2e3eda6;background:#ffffff0d} /* 底部信息胶囊（对应 Mercury 底部说明条） */ .hero-foot{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:3} .hero-foot span{display:inline-block;font:12px/1 'PingFang SC',sans-serif;letter-spacing:.05em;color:#c3c3cc;background:#101014cc;border:1px solid #ffffff1f;border-radius:999px;padding:11px 22px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} @media(max-width:760px){.hero-cta{flex-direction:column;align-items:center}.hero-foot{width:max-content;max-width:92vw}} /* ===== 20260924 修订十：首页文字版式对齐 Mercury ===== */ /* 副标题两行统一为柔和的灰白调（Mercury 副文案单色） */ .hero .thesis strong{font-weight:500;color:#c3c3cc} /* 大标题收紧字重与行距，贴近 Mercury display 感觉 */ .hero h1,.hero #title{font-weight:500!important;letter-spacing:0!important} /* 胶囊与 headline 间距微调 */ .hero-badge{margin:0 0 30px} /* ===== 20260924 修订十一：Mercury 动效 + 规格对齐 ===== */ /* 背景：开场缓慢推近（Ken Burns），营造 Mercury 电影感 */ .sky-background img.hero-bg{animation:hero-zoom 2.4s cubic-bezier(.16,1,.3,1) both;will-change:transform} @keyframes hero-zoom{from{transform:scale(1.12);opacity:.55}to{transform:scale(1);opacity:1}} /* 文字与按钮：错峰淡入上移 */ .hero-badge,.hero h1,.hero .thesis,.hero-cta,.hero-foot{animation:hero-rise .9s cubic-bezier(.16,1,.3,1) both} .hero h1{animation-delay:.18s} .hero .thesis{animation-delay:.34s} .hero-cta{animation-delay:.5s} .hero-foot{animation-delay:.66s} @keyframes hero-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .hero-foot{animation-name:hero-rise-c} @keyframes hero-rise-c{from{opacity:0;transform:translate(-50%,26px)}to{opacity:1;transform:translate(-50%,0)}} @media(prefers-reduced-motion:reduce){.sky-background img.hero-bg,.hero-badge,.hero h1,.hero .thesis,.hero-cta,.hero-foot{animation:none}} /* 规格对齐：副标题 18px Ivory；区块画布 Onyx #171721 */ .hero .thesis{font-size:18px;color:#ededf3;line-height:1.5} .hero .thesis strong{font-weight:500;color:#ededf3} .works,footer{background:#171721} .mercury-exact-placeholder{display:none} /* Mercury reference homepage: exact card proportions, type hierarchy and motion. */ body{background:#171721} main{background:#171721;padding-top:1px} header{top:clamp(22px,4vw,54px);left:50%;right:auto;width:min(1200px,calc(100% - 48px));height:70px;padding:0 26px;transform:translateX(-50%);grid-template-columns:1fr auto 1fr;background:transparent;border:0;z-index:20} header .wordmark{font-size:15px;letter-spacing:.16em} header nav.pill-nav{padding:0;gap:12px;background:transparent;border:0;backdrop-filter:none} header nav.pill-nav a{padding:10px 12px;font-size:12px;color:#f1f1f3} header .nav-cta{padding:11px 18px;font-size:12px;background:#5266eb;border-radius:32px} .hero.origin-sky{width:min(1200px,calc(100% - 48px));height:min(760px,calc(100svh - 72px));min-height:650px;margin:36px auto 82px;border-radius:38px;overflow:hidden;background:#171721;box-shadow:0 22px 60px #17172125} .origin-sky .sky-background{inset:0} .origin-sky .sky-background video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;animation:mercury-bg 14s ease-in-out infinite alternate} .origin-sky .sky-background:after{background:linear-gradient(180deg,#11132218 0%,#1717210d 45%,#17172142 100%)} .origin-sky:after{background:radial-gradient(circle at 50% 30%,transparent 0,#17172114 62%,#17172138 100%)} .origin-sky .hero-copy{inset:116px 0 auto;width:min(680px,86%);height:auto;margin:0 auto;padding:0} .origin-sky .hero-badge{margin:0 0 28px;font-size:10px;letter-spacing:.18em;color:#f0f0f2} .origin-sky .hero-copy h1{font-family:'PingFang SC',sans-serif;font-size:clamp(46px,6vw,86px);font-weight:560;line-height:1.1;letter-spacing:-.02em;color:#f3f3f5} .origin-sky .hero-copy .thesis{margin-top:20px;max-width:560px;color:#ececf0;font-size:16px;line-height:1.55;font-weight:400} .origin-sky .hero-cta{display:flex;margin-top:28px;align-items:center;justify-content:center;gap:0} .origin-sky .hero-cta a{min-width:164px;padding:14px 22px;border:1px solid #e2e3edaa;color:#ededf3;background:#27273550;font:400 14px/1 'PingFang SC',sans-serif;box-shadow:none;transition:filter .25s} .origin-sky .hero-cta a:first-child{border-radius:32px 0 0 32px;border-right:0} .origin-sky .hero-cta a:last-child{min-width:112px;border-color:#5266eb;border-radius:0 32px 32px 0;background:#5266eb;color:#fff} .origin-sky .hero-cta a:hover{filter:brightness(1.08);transform:none} .hero-foot{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:max-content;max-width:84%;padding:10px 28px;border-radius:999px;background:#171721d9;color:#c3c3cc;font:400 9px/1 ui-monospace,monospace;letter-spacing:.08em;text-align:center;backdrop-filter:blur(10px)} .sky-toggle{display:none} @keyframes mercury-bg{from{transform:scale(1.015)}to{transform:scale(1.055)}} @keyframes mercury-card-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} @keyframes mercury-copy-in{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}} @media(prefers-reduced-motion:no-preference){.hero.origin-sky{animation:mercury-card-in .9s cubic-bezier(.16,1,.3,1) both}.origin-sky .hero-badge{animation:mercury-copy-in .7s .28s both}.origin-sky .hero-copy h1{animation:mercury-copy-in .9s .42s both}.origin-sky .hero-copy .thesis{animation:mercury-copy-in .8s .58s both}.origin-sky .hero-cta{animation:mercury-copy-in .8s .72s both}.hero-foot{animation:mercury-copy-in .8s .86s both}} @media(max-width:900px){header{width:calc(100% - 32px);top:22px;padding:0 18px}.hero.origin-sky{width:calc(100% - 32px);height:calc(100svh - 32px);min-height:660px;margin:16px auto 60px;border-radius:28px}.origin-sky .hero-copy{inset:110px 0 auto}} @media(max-width:699px){body{background:#171721}header{width:calc(100% - 24px);height:62px;top:12px;padding:0 14px}.hero.origin-sky{width:calc(100% - 24px);height:calc(100svh - 24px);min-height:680px;margin:12px auto 48px;border-radius:24px}.origin-sky .sky-background video{object-position:center bottom}.origin-sky .hero-copy{inset:98px 0 auto;width:88%}.origin-sky .hero-badge{margin-bottom:22px;font-size:8px}.origin-sky .hero-copy h1{font-size:34px;line-height:1.18}.origin-sky .hero-copy .thesis{font-size:13px;line-height:1.6;margin-top:18px}.origin-sky .hero-cta{margin-top:22px}.origin-sky .hero-cta a{min-width:134px;padding:13px 16px;font-size:12px}.origin-sky .hero-cta a:last-child{min-width:86px}.hero-foot{bottom:16px;padding:9px 14px;font-size:7px;white-space:nowrap}} /* Final specificity fixes for the existing sticky-header theme. */ body>header{position:absolute;top:clamp(22px,4vw,54px);left:50%;right:auto;width:min(1200px,calc(100% - 48px));height:70px;padding:0 26px;transform:translateX(-50%);background:transparent;border:0;backdrop-filter:none} .hero.origin-sky{position:relative;top:auto;z-index:1} .origin-sky .hero-copy h1,.hero #title{font-size:clamp(34px,3.35vw,46px)!important;line-height:1.16!important;white-space:nowrap} .hero-foot{left:50%!important;right:auto!important;transform:translateX(-50%)!important;animation:none!important} @media(prefers-reduced-motion:no-preference){.hero-foot span{display:block;animation:mercury-copy-in .8s .86s both}} @media(max-width:900px){body>header{width:calc(100% - 32px);top:22px;padding:0 18px}} @media(max-width:699px){body>header{width:calc(100% - 24px);height:62px;top:12px;padding:0 14px}.origin-sky .hero-copy h1,.hero #title{font-size:32px!important;white-space:normal}} /* ===== 20260924 修订十三：对齐 Mercury 原站（满幅 + 山峦背景 + 克制动效） ===== */ /* 首屏：满幅全屏，去圆角/边距/投影 */ .hero.origin-sky{width:100%!important;height:100svh!important;min-height:680px!important;margin:0!important;border-radius:0!important;box-shadow:none!important} /* 背景：山峦图持续缓慢推近（模拟 Mercury 视频背景的流动感） */ .sky-background img.hero-bg{width:100%;height:100%;object-fit:cover;display:block;animation:hero-drift 26s ease-in-out infinite alternate} @keyframes hero-drift{from{transform:scale(1)}to{transform:scale(1.07)}} /* 文案位置：中上区域（对齐 Mercury 标题高度） */ .origin-sky .hero-copy{inset:0;width:min(780px,92vw);height:max-content;margin:auto;padding:0 24px 14vh} /* 大标题：对齐 Mercury 字号 */ .origin-sky .hero-copy h1,.hero #title{font-size:clamp(40px,4.6vw,58px)!important;line-height:1.15!important;white-space:normal!important} /* 按钮：两个独立胶囊（Mercury 式），取消连体分段样式 */ .origin-sky .hero-cta{gap:14px!important} .origin-sky .hero-cta a,.origin-sky .hero-cta a:first-child,.origin-sky .hero-cta a:last-child{border-radius:999px!important;min-width:0!important;padding:15px 32px!important;font-size:14px!important;border:1px solid #e2e3ed59!important} .origin-sky .hero-cta a.btn-ghost{background:#ffffff08!important;color:#ededf3!important} .origin-sky .hero-cta a.btn-primary{background:#5266eb!important;border-color:#5266eb!important;color:#fff!important} /* 开屏动画：快速淡入、弱错峰（Mercury 克制感） */ .origin-sky .hero-copy h1{animation:hero-fade .7s .08s both} .origin-sky .hero-copy .thesis{animation:hero-fade .7s .18s both} .origin-sky .hero-cta{animation:hero-fade .7s .28s both} .hero-foot span{animation:hero-fade .7s .38s both} @keyframes hero-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.sky-background img.hero-bg{animation:none}} /* 标题保持一行（Mercury 标题不换行） */ .origin-sky .hero-copy h1,.hero #title{white-space:nowrap!important;font-size:clamp(30px,4.4vw,58px)!important} /* ===== 20260924 修订十四：页脚联系图标重设计 ===== */ footer .contact-list a{display:inline-flex;align-items:center;gap:10px} footer .contact-list .ci{width:15px;height:15px;flex:0 0 auto;opacity:.75} footer .contact-list a:hover .ci{opacity:1} /* ===== 20260924 修订十五：Mercury 原版 scrub 视频背景 ===== */ .origin-sky .sky-background video.hero-video{width:100%;height:100%;object-fit:cover;display:block;animation:none;transform:none} /* ===== 20260924 修订十六：区块英文副标 + 滚动渐入 ===== */ /* eyebrow 英文小标：小字号、宽字距、弱化色（Mercury 式引导） */ .curated .section-title .eyebrow{display:block;font:500 11px/1 ui-monospace,monospace;letter-spacing:.22em;color:#6f7480;margin-bottom:14px;text-transform:uppercase} .curated .section-title{min-width:160px} /* chapter-intro 英文副标：克制字号，右对齐留白 */ .curated .section-heading .chapter-intro{max-width:340px;color:#9aa0ab} /* 滚动渐入：区块标题、卡片初始隐藏，进入视口后浮现 */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .reveal.is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ===== 20260925 修订十九：新媒体卡片标题缩小 ===== */ #media .media-deck .caption h3{font-size:clamp(15px,1.5vw,18px)!important;letter-spacing:.01em!important} /* ===== 20260925 修订二十：CTA 中文化 + 微信二维码 ===== */ .cta-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center} .qr-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:0;border-radius:16px;padding:14px 14px 11px;cursor:zoom-in;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s} .qr-card img{width:132px;height:132px;display:block;border-radius:8px} .qr-card span{font:500 12px/1 'PingFang SC',sans-serif;color:#171721;letter-spacing:.06em} .qr-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #00000066} #qr-dialog{border:0;border-radius:20px;padding:0;background:transparent;max-width:94vw} #qr-dialog::backdrop{background:#0b0c10dd;backdrop-filter:blur(6px)} .qr-dialog-inner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px} .qr-dialog-inner img{width:min(430px,82vw);border-radius:16px;display:block} .qr-dialog-inner p{color:#f3f3f5;font:400 14px/1 'PingFang SC',sans-serif;margin:0;letter-spacing:.05em} #qr-close{background:#ffffff1f;border:1px solid #ffffff38;color:#f3f3f5;border-radius:999px;padding:9px 18px;font:500 13px 'PingFang SC',sans-serif;cursor:pointer} #qr-close:hover{background:#ffffff33} /* ===== 20260925 修订十八：页脚大字 CTA（Mercury 式收束） ===== */ .cta-banner{position:relative;z-index:2;background:#171721;padding:130px 6vw 120px;text-align:center}.cta-inner{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px} .cta-banner h2{font:500 clamp(40px,7vw,86px)/1.05 'PingFang SC',sans-serif;letter-spacing:-.03em;color:#f5f5f7;margin:0} .cta-banner p{font:400 clamp(15px,1.6vw,18px)/1.7 'PingFang SC',sans-serif;color:#9aa0ab;letter-spacing:.01em;margin:0;max-width:520px} .cta-banner .cta-btn{font-size:15px;padding:16px 30px} @media(max-width:600px){.cta-banner{padding:90px 22px 84px}.cta-banner h2 br{display:none}} /* Balanced Chinese closing title: equal-length lines and a lighter reading rhythm. */ .cta-banner .cta-inner{gap:30px} .cta-banner h2{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(32px,4.6vw,60px);font-weight:300;line-height:1.48;letter-spacing:.06em;text-align:center;color:#ededf3} .cta-banner h2 span{display:block;padding-left:.06em;white-space:nowrap} .cta-banner p{font-size:14px;font-weight:400;color:#9297a1;line-height:1.8} .cta-banner .cta-actions{margin-top:10px} @media(max-width:600px){.cta-banner h2{font-size:clamp(28px,7.7vw,40px)}.cta-banner .cta-inner{gap:24px}.cta-banner p{font-size:12px;max-width:290px}} .cta-banner h2{white-space:nowrap;font-size:clamp(22px,4.2vw,60px);letter-spacing:.01em;line-height:1.4} @media(max-width:600px){.cta-banner h2{font-size:clamp(16px,5.1vw,30px);letter-spacing:0}} /* Closing headline: medium weight for clear title hierarchy. */ .cta-banner h2{font-weight:500} /* ===== 20260925 修订：内页设计说明完整展开，不滚动截断 ===== */ #project-summary{max-height:none!important;overflow:visible!important;white-space:normal} /* ===== 20260925 修订：简介内迁封面，完整展开不截断 ===== */ .category-grid .design-intro,.selected-grid .design-intro,#book .design-intro,.curated .design-intro{display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important;max-width:100%!important;white-space:normal} #design .category-grid .design-card:first-child .design-intro{max-width:100%!important;-webkit-line-clamp:unset!important} /* ===== 20260925 修订：首卡标题单行不折行 ===== */ #films.curated .film-card:first-child .caption>div{flex-wrap:wrap;row-gap:8px} #films.curated .film-card:first-child .caption h3{flex:0 0 auto;max-width:100%} @media(min-width:901px){ #films.curated .film-card:first-child .caption h3{white-space:nowrap} } /* ===== 20260925 修订：新媒体长图按屏浏览 + 尺寸档位 ===== */ #viewer .long-scroll{--long-w:468px;position:relative;scroll-snap-type:y proximity;scroll-padding-top:26px} #viewer-content .long-scroll img{flex:0 0 auto;width:100%!important;min-width:0;height:auto!important;max-height:none!important;object-fit:fill;border-radius:22px;border:1px solid #ffffff24;box-shadow:0 26px 66px #000000cc} .long-snap{position:absolute;left:0;right:0;height:2px;scroll-snap-align:start;pointer-events:none} .long-progress{position:absolute;right:18px;bottom:14px;z-index:3;pointer-events:none;background:#111c;border:1px solid #ffffff55;color:#fff;font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;padding:9px 14px;border-radius:999px;backdrop-filter:blur(6px)} @media(max-width:700px){ .long-progress{right:12px;bottom:54px;padding:8px 12px;font-size:11px} } /* ===== 20260925 修订：区块说明行（AI 视频区） ===== */ .section-note{margin:14px 0 0;font:400 13px/1.6 'PingFang SC',sans-serif;letter-spacing:.06em;color:#8b8b94} @media(max-width:600px){.section-note{font-size:12px;margin-top:10px}} /* ===== 20260925 修订：作品删减后的栅格自适应（补回作品会自动恢复） ===== */ @media(min-width:901px){ #design .category-grid:has(.design-card:nth-child(3):last-child), #films.curated .film-grid:has(.film-card:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} #films.curated .film-grid:has(.film-card:nth-child(3):last-child) .film-card:nth-child(3){grid-column:auto} } /* ===== 20260925 修订：新媒体区一行短注 ===== */ .media-note{margin:8px 0 0;font:400 12px/1.55 'PingFang SC',sans-serif;letter-spacing:.04em;color:var(--muted,#8b8b94)} @media(max-width:700px){.media-note{font-size:11px}} /* ===== 20260925 修订：短片弹窗 · 视频下方剪辑时间轴 ===== */ #viewer{height:94svh} .film-stage{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;overflow-y:auto;gap:12px;padding:12px 18px 18px} #viewer-content .film-stage>video{flex:0 0 auto;min-height:0;width:min(100%,calc((94svh - 118px) * 16 / 9));height:auto;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:10px}#viewer-content .film-stage>.film-sequel-label{flex:0 0 auto;width:100%;margin:18px 0 0;padding:0;font:500 12px/1.6 'PingFang SC',sans-serif;letter-spacing:.12em;color:#9aa0aa;text-align:left} .film-timeline{margin:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;width:100%} #viewer-content .film-timeline img{display:block;width:min(920px,100%);height:auto;max-height:none;border-radius:8px;border:1px solid #ffffff1f} .film-timeline figcaption{font:400 11px/1.5 'PingFang SC',sans-serif;letter-spacing:.14em;color:#7c7c86} @media(max-width:700px){ #viewer-content .film-timeline img{width:100%} .film-timeline figcaption{font-size:10px;letter-spacing:.08em} } .film-stage{justify-content:flex-start} .film-stage{align-self:stretch;height:100%;min-height:0;overscroll-behavior:contain} #viewer-content .film-timeline img{width:min(860px,100%)} /* ===== 20260925 修订：短片弹窗 · 分镜脚本（可折叠） ===== */ .film-script{flex:0 0 auto;width:min(860px,100%);margin:0;border-top:1px solid #ffffff14;padding-top:11px} .film-script summary{cursor:pointer;list-style:none;font:400 11px/1.5 'PingFang SC',sans-serif;letter-spacing:.14em;color:#9aa0aa} .film-script summary::-webkit-details-marker{display:none} .film-script summary::before{content:'+ ';color:#6c7078} .film-script[open] summary::before{content:'- '} .script-table{margin-top:12px;display:flex;flex-direction:column} .script-row{display:grid;grid-template-columns:66px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid #ffffff0f} .script-row:last-child{border-bottom:0} .script-row .st{font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7c7c86;letter-spacing:.04em} .script-row .sv{font:400 12px/1.7 'PingFang SC',sans-serif;color:#c9c9cf} .script-row .sa{margin-top:2px;font:400 11px/1.6 'PingFang SC',sans-serif;color:#8b8b94} @media(max-width:700px){ .script-row{grid-template-columns:56px 1fr;gap:9px;padding:8px 0} .script-row .sv{font-size:12px} .script-row .sa{font-size:11px} } /* ===== 20260925 修订：短片弹窗 · 项目背景/我的角色/方法亮点 ===== */ .film-brief{flex:0 0 auto;width:min(860px,100%);display:flex;flex-direction:column;gap:9px} .brief-row{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:start;background:#141416;border:1px solid #ffffff12;border-radius:12px;padding:13px 16px} .brief-row.no-tag{grid-template-columns:1fr} .brief-tag{font:500 11px/2 'PingFang SC',sans-serif;letter-spacing:.18em;color:#e8e6f2;white-space:nowrap} .brief-row p{margin:0;font:400 13px/1.75 'PingFang SC',sans-serif;color:#b9b9c2;letter-spacing:.02em} @media(max-width:700px){ .brief-row{grid-template-columns:1fr;gap:6px;padding:11px 12px} .brief-tag{font-size:10px;letter-spacing:.10em} .brief-row p{font-size:12px} } /* ===== 20260925 修订：短片弹窗 · 项目背景模块小标题 ===== */ /* Project context follows the opening image in the scrollable gallery. */ .gallery-brief{margin:24px auto 32px} /* Film details share one reading column beneath the full-size player. */ .film-stage{--film-detail-width:94%;gap:24px;padding-bottom:36px} .film-stage>.film-brief,.film-stage>.film-script,.film-stage>.film-timeline{width:var(--film-detail-width)} .film-stage>.film-brief{gap:0;margin-top:8px} .film-stage .brief-row{grid-template-columns:100px minmax(0,1fr);gap:24px;background:none;border:0;border-radius:0;padding:20px 0} .film-stage .brief-row+.brief-row{border-top:1px solid #ffffff14} .film-stage .brief-row p{max-width:none;font-size:14px;line-height:1.9} .film-stage .brief-tag{font-size:12px;line-height:2.2;letter-spacing:.08em} .film-stage>.film-script{padding-top:20px} .film-stage .film-script summary{font-size:12px;line-height:1.8;letter-spacing:.06em} #viewer-content .film-stage .film-timeline img{width:100%} .film-stage .film-timeline{align-items:flex-start;gap:10px} .film-stage .film-timeline figcaption{letter-spacing:.06em} @media(max-width:700px){ .film-stage{--film-detail-width:100%;gap:20px;padding:12px 14px 28px} .film-stage .brief-row{grid-template-columns:1fr;gap:8px;padding:16px 0} .film-stage .brief-row p{font-size:13px;line-height:1.85} .film-stage .brief-tag{font-size:12px;line-height:1.6} } /* Match timeline heading to the script heading; allow copy to fill its column. */ .film-stage .film-timeline figcaption{font:400 12px/1.8 'PingFang SC',sans-serif;letter-spacing:.06em;color:#9aa0aa;text-align:left} /* Native disclosure for editing timeline, matching the storyboard control. */ .film-stage details.film-timeline{display:block} .film-stage .film-timeline>summary{cursor:pointer;list-style:none;font:400 12px/1.8 'PingFang SC',sans-serif;letter-spacing:.06em;color:#9aa0aa;text-align:left} .film-stage .film-timeline>summary::-webkit-details-marker{display:none} .film-stage .film-timeline>summary::before{content:'+ ';color:#6c7078} .film-stage .film-timeline[open]>summary::before{content:'− '} .film-stage .film-timeline[open]>summary{margin-bottom:14px} /* Compact conference case, isolated from global header/footer rules. */ .egg-case{width:100%;max-width:1120px;margin:28px auto 40px;padding:24px clamp(12px,3vw,36px);color:#e9edf0;text-align:left;box-sizing:border-box} .egg-case *{min-width:0;box-sizing:border-box} .egg-case h3{font:500 13px/1.6 "PingFang SC",sans-serif;color:#e3e6eb;margin:0 0 10px;letter-spacing:.04em} .egg-case p{font:400 14px/1.85 "PingFang SC",sans-serif;color:#a7adb6;margin:0;overflow-wrap:anywhere} .egg-case-context{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:24px} .egg-case-concept{border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff18;padding:24px 0} .egg-case-heading{display:flex;align-items:baseline;gap:20px}.egg-case-heading h3{margin:0}.egg-case-heading p{font-size:12px;color:#818b98} .egg-case-flow{display:grid;grid-template-columns:1fr 24px 1fr 24px 1.6fr;align-items:center;gap:12px;padding:20px 0 6px;text-align:center}.egg-case-flow>div{display:flex;flex-direction:column;align-items:center;justify-content:center} .egg-case-number{display:block;font:300 58px/1.1 Arial,sans-serif;color:#9bcae8}.egg-case-flow strong{display:block;font-size:23px;line-height:1.5;font-weight:500;color:#edbb8b}.egg-case-flow span{display:block;font-size:12px;line-height:1.7;color:#a7adb6;margin-top:8px;overflow-wrap:anywhere}.egg-case-flow i{font-style:normal;color:#606d7b;font-size:20px} .egg-case-delivery{display:grid;grid-template-columns:90px 1fr;gap:20px;padding-top:22px}.egg-case-delivery h3{margin:3px 0 0} @media(max-width:700px){.egg-case{margin:16px auto 28px;padding:16px 10px}.egg-case-context{gap:20px}.egg-case p{font-size:12px;line-height:1.8}.egg-case-context{padding-bottom:20px}.egg-case-concept{padding:20px 0}.egg-case-heading{display:block}.egg-case-heading p{margin-top:5px}.egg-case-flow{grid-template-columns:1fr 16px 1fr 16px 1.5fr;gap:6px}.egg-case-number{font-size:42px}.egg-case-flow strong{font-size:17px}.egg-case-flow span{font-size:11px}.egg-case-delivery{grid-template-columns:1fr;gap:7px}} @media(max-width:420px){.egg-case-context{grid-template-columns:1fr;gap:18px}.egg-case-flow strong{font-size:15px}} /* H5 invite: title + five-page strip + one compact footer row. */ .egg-h5{width:min(1029px,100%);margin:36px auto 60px;padding:0 24px} .egg-h5 .stack-label{margin:16px 0 0} .egg-h5-pages{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(157px,216px);gap:14px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x} .egg-h5-pages::-webkit-scrollbar{display:none} .egg-h5-pages img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid #ffffff20} /* Footer row: link / QR + small data note. */ .egg-h5-note{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px} .egg-h5-link{display:inline-block;padding:10px 18px;border:1px solid #ffffff45;border-radius:6px;font-size:13px;white-space:nowrap} .egg-h5-link:hover{background:#ffffff12} .egg-h5-scan{display:flex;align-items:center;gap:12px;color:#969eaa;font-size:12px} #viewer-content .egg-h5-scan img{width:56px;height:56px;max-height:none;border-radius:5px;flex:0 0 auto} .egg-h5-meta{margin:0;font-size:12px;line-height:1.7;color:#969eaa;text-align:right} @media(max-width:600px){ .egg-h5{padding:0 12px;margin:24px auto 40px} .egg-h5-pages{grid-auto-columns:minmax(132px,150px);gap:10px} .egg-h5-note{flex-direction:column;align-items:flex-start;gap:14px;margin-top:16px} .egg-h5-meta{text-align:left} #viewer-content .egg-h5-scan img{width:48px;height:48px} } /* Desktop shows QR; touch devices open the link directly instead. */ .egg-h5-note .egg-h5-link{display:none} @media(hover:none) and (pointer:coarse){ .egg-h5-note .egg-h5-link{display:inline-block} .egg-h5-note .egg-h5-scan{display:none} } /* ===== 20260926 修订：蛋品大会会刊翻页 ===== */ .journal{margin:26px auto 8px;width:min(860px,100%)} .journal-frame{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:2212/1490;touch-action:pan-y;cursor:grab} .journal-frame:active{cursor:grabbing} .journal-track{display:flex;height:100%;transition:transform .58s cubic-bezier(.16,.84,.28,1)} .journal-spread{flex:0 0 100%;height:100%;display:flex;gap:2px;background:#0f0f12;transform:scale(.97);opacity:.6;transition:transform .58s cubic-bezier(.16,.84,.28,1),opacity .58s ease;transform-origin:center} .journal-spread.active{transform:scale(1);opacity:1} .journal-spread.single .journal-page{flex:0 0 50%;max-width:50%} .journal-spread.single.first,.journal-spread.single.last{justify-content:center} .journal-page{flex:1 1 50%;height:100%;display:flex;align-items:center;justify-content:center;background:#0f0f12;overflow:hidden} .journal-page img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none} .journal-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px} .journal-btn{width:34px;height:34px;border-radius:50%;border:1px solid #ffffff22;background:#1a1a1f;color:#e8e6f2;font-size:18px;line-height:1;cursor:pointer;transition:opacity .2s,background .2s} .journal-btn:hover:not(:disabled){background:#2a2a31} .journal-btn:disabled{opacity:.3;cursor:default} .journal-dots{display:flex;gap:7px} .journal-dots i{width:6px;height:6px;border-radius:50%;background:#ffffff2a;transition:background .2s,transform .2s} .journal-dots i.on{background:#e8a64c;transform:scale(1.25)} .journal-num{font:500 12px/1 'PingFang SC',sans-serif;color:#8a8a94;letter-spacing:.06em;min-width:44px;text-align:center} @media(max-width:700px){.journal-frame{border-radius:10px}.journal-bar{gap:10px;margin-top:10px}} /* ===== 20260926 修订：会刊备注小字 ===== */ .journal-note{margin:10px 0 0;text-align:center;font:400 12px/1.5 'PingFang SC',sans-serif;letter-spacing:.08em;color:#7c7c86} .journal .journal-bar{margin-top:8px} /* Match the journal to the gallery width without a surrounding panel. */ #viewer .journal{width:100%;max-width:none;margin:24px auto 12px} #viewer .journal-frame{border:0;border-radius:0;background:transparent;box-shadow:none} #viewer .journal-spread,#viewer .journal-page{background:transparent} #viewer-content .journal-page img{width:100%;height:100%;max-height:none;object-fit:contain;border:0;border-radius:0} /* Fit a complete journal spread and controls inside the viewer. */ #viewer .journal-frame{height:min(74svh,820px);aspect-ratio:auto;width:100%} #viewer .journal-page{min-width:0;flex:0 0 calc(50% - 1px)} #viewer .journal-btn{width:42px;height:42px;font-size:25px;display:inline-flex;align-items:center;justify-content:center} @media(max-width:700px){#viewer .journal-frame{height:auto;aspect-ratio:2212/1490}} #viewer .journal-frame{height:auto;width:min(100%,calc(74svh * 1.4846));aspect-ratio:2212/1490;margin-inline:auto} /* Place pagination beside the journal, outside the artwork. */ #viewer .journal-stage{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:20px;width:min(100%,calc(74svh * 1.4846 + 124px));margin-inline:auto} #viewer .journal-stage .journal-frame{width:100%;margin:0} #viewer .journal-stage .journal-btn{flex-shrink:0} @media(max-width:700px){#viewer .journal-stage{grid-template-columns:32px minmax(0,1fr) 32px;gap:8px}#viewer .journal-stage .journal-btn{width:32px;height:32px;font-size:22px}} /* ===== 20260926 修订：展陈区 3 卡时强制两列（覆盖 700-1100px 的三列断点） ===== */ @media(min-width:701px){ #design .category-grid:has(.design-card:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important} #design .category-grid:has(.design-card:nth-child(3):last-child) .design-card:first-child{grid-column:1/-1} } /* ===== 20260926 修订：展陈区 3 卡时强制两列（覆盖 700-1100px 的三列断点） ===== */ @media(min-width:701px){ #design .category-grid:has(.design-card:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important} #design .category-grid:has(.design-card:nth-child(3):last-child) .design-card:first-child{grid-column:1/-1} } /* ===== 20260926 分组标题：展区内按 空间效果图/立面版式 分节 ===== */ #viewer .stack-section{font:600 13px/1.4 -apple-system,"PingFang SC",sans-serif;letter-spacing:.08em;color:#b8c4ce;margin:34px 0 4px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)} #viewer .stack-scroll .stack-item+.stack-section,#viewer .stack-scroll .gallery-brief+.stack-section{margin-top:46px} #viewer .stack-intro{font:13px/1.8 -apple-system,"PingFang SC",sans-serif;color:#9aa8b3;margin:0 0 14px;max-width:640px} #viewer .stack-scroll .stack-section:first-child,#viewer .stack-scroll .stack-section:first-of-type{margin-top:2px} /* ===== 20260926 修订：弹窗内容顶对齐（去顶部黑区）、导语文字全宽自适应 ===== */ #viewer-content>.stack-scroll{align-self:start} #viewer .stack-intro{max-width:none} /* ===== 20260926 分区强化：展区标题加红色侧条、加大字号与间距，分区一眼可辨 ===== */ #viewer .stack-scroll .stack-section{font-size:16px;font-weight:700;letter-spacing:.06em;color:#fff;margin:56px 0 6px;padding:2px 0 12px 14px;border-bottom:1px solid rgba(255,255,255,.22);border-left:3px solid var(--accent)} #viewer .stack-scroll .stack-section:first-of-type{margin-top:2px} #viewer .stack-intro{margin-bottom:18px} /* ===== 20260926 蛋品大会内页文字块：排版对齐视频区（小标题+段落、分隔线、窄屏堆叠） ===== */ #viewer .egg-brief{width:min(860px,100%);margin:28px auto 40px;gap:0} #viewer .egg-brief .brief-row{grid-template-columns:100px minmax(0,1fr);gap:24px;background:none;border:0;border-radius:0;padding:20px 0} #viewer .egg-brief .brief-row+.brief-row{border-top:1px solid #ffffff14} #viewer .egg-brief .brief-row p{max-width:none;font-size:14px;line-height:1.9} #viewer .egg-brief .brief-tag{font-size:12px;line-height:2.2;letter-spacing:.08em} @media(max-width:700px){ #viewer .egg-brief .brief-row{grid-template-columns:1fr;gap:8px;padding:16px 0} #viewer .egg-brief .brief-row p{font-size:13px;line-height:1.85} #viewer .egg-brief .brief-tag{font-size:12px;line-height:1.6} } #viewer .egg-brief .brief-row p+p{margin-top:10px} /* ===== 20260926 核心创意流程图回归：挂在蛋品大会「我的角色」下方 ===== */ #viewer .egg-brief .egg-idea{margin-top:18px} #viewer .egg-brief .egg-idea h3{font:500 14px/1.6 "PingFang SC",sans-serif;color:#e8e6f2;margin:0 0 4px;letter-spacing:.04em} #viewer .egg-brief .egg-idea .egg-idea-sub{margin:0;font-size:13px;color:#818b98} /* ===== 20260927 内容页底部黑条：stack 滚动区占满弹窗剩余高度（原 max-height 预留了翻页导航高度，stack 视图导航隐藏导致底部留黑） ===== */ #viewer-content>.stack-scroll{align-self:stretch;height:100%;max-height:none} /* ===== 20260927 核心创意独立成行：与我的角色同级，标签列标题+内容列副标题/流程图 ===== */ #viewer .egg-brief .egg-idea-sub{margin:2px 0 0;font-size:14px;line-height:1.9;color:#b9b9c2;letter-spacing:.02em} #viewer .egg-brief .brief-row .egg-case-flow{padding:14px 0 4px} /* Clear, high-contrast journal controls. */ #viewer .journal-stage{grid-template-columns:56px minmax(0,1fr) 56px;gap:22px;width:min(100%,calc(74svh * 1.4846 + 156px))} #viewer .journal-stage .journal-btn{width:56px;height:56px;background:#f3f3f5;color:#141419;border:1px solid #fff;font-size:36px;font-weight:600;box-shadow:0 3px 16px #0005;opacity:1} #viewer .journal-stage .journal-btn:hover:not(:disabled){background:#fff;box-shadow:0 0 0 4px #ffffff30} #viewer .journal-stage .journal-btn:focus-visible{outline:3px solid #e8a64c;outline-offset:4px} #viewer .journal-stage .journal-btn:disabled{background:#33343b;color:#91919b;border-color:#55555e;box-shadow:none;opacity:1} @media(max-width:700px){#viewer .journal-stage{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}#viewer .journal-stage .journal-btn{width:40px;height:40px;font-size:28px}} /* Subtle journal controls with a clear outline. */ #viewer .journal-stage .journal-btn{width:48px;height:48px;justify-self:center;background:rgba(35,36,43,.8);color:#f1f1f5;border:1px solid rgba(255,255,255,.35);font-size:30px;font-weight:400;box-shadow:none;transition:background .2s,border-color .2s,transform .2s} #viewer .journal-stage .journal-btn:hover:not(:disabled){background:#363740;border-color:rgba(255,255,255,.7);box-shadow:none;transform:scale(1.04)} #viewer .journal-stage .journal-btn:disabled{background:rgba(30,31,37,.5);border-color:rgba(255,255,255,.12);color:#666772;box-shadow:none} @media(max-width:700px){#viewer .journal-stage .journal-btn{width:38px;height:38px;font-size:26px}} #viewer .journal-stage .journal-btn{padding:0;display:grid;place-items:center;line-height:1}#viewer .journal-btn svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* Unified artwork captions, with navigation guidance secondary. */ #viewer .stack-label,#viewer .journal-caption{font:400 13px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.03em;color:#babcc0;text-align:center} #viewer .stack-label{margin:12px 0 0} #viewer .journal-note{margin:12px 0 0;text-align:center;letter-spacing:normal} #viewer .journal-caption{display:block} #viewer .journal-instruction{display:block;margin-top:4px;font:400 11px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.02em;color:#85858f} #viewer .journal .journal-bar{margin-top:10px} /* ===== 20260927 gallery-brief 扁平化：与蛋品大会文字块同款式（去卡片盒子，标签列+分隔线） ===== */ #viewer .gallery-brief .brief-row{grid-template-columns:100px minmax(0,1fr);gap:24px;background:none;border:0;border-radius:0;padding:20px 0} #viewer .gallery-brief .brief-row+.brief-row{border-top:1px solid #ffffff14} #viewer .gallery-brief .brief-row p{max-width:none;font-size:14px;line-height:1.9} #viewer .gallery-brief .brief-tag{font-size:12px;line-height:2.2;letter-spacing:.08em} @media(max-width:700px){ #viewer .gallery-brief .brief-row{grid-template-columns:1fr;gap:8px;padding:16px 0} #viewer .gallery-brief .brief-row p{font-size:13px;line-height:1.85} #viewer .gallery-brief .brief-tag{font-size:12px;line-height:1.6} } .cta-banner .contact-actions{display:flex;align-items:center;justify-content:center;gap:64px;width:min(640px,100%)} .contact-direct{flex:1;min-width:0;text-align:left}.cta-banner .contact-detail{display:grid;grid-template-columns:1fr auto;gap:5px 18px;width:100%;padding:14px 0;border:0;border-bottom:1px solid #ffffff20;border-radius:0;background:none;color:#ededf3;text-align:left;cursor:pointer;font-family:inherit} .contact-detail span{grid-column:1/-1;font-size:12px;color:#9297a1}.contact-detail strong{font-size:18px;font-weight:500}.contact-detail small{font-size:12px;color:#a9adb7;align-self:center}.contact-detail:hover small{color:#fff}.contact-resume{display:inline-block;margin-top:22px;padding:10px 18px;border:1px solid #ffffff45;border-radius:6px;color:#ededf3;font-size:14px}#contact-feedback{display:block;min-height:18px;margin-top:8px;font-size:12px;color:#b7bdc7} @media(max-width:600px){.cta-banner .contact-actions{flex-direction:column;gap:24px}.contact-direct{width:100%}.contact-detail strong{font-size:16px}} footer #footer-copy-phone,footer #footer-copy-email{display:inline-flex;align-items:center;gap:10px;border:0;padding:0;background:none;color:#cacaca;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}footer #footer-copy-phone .ci,footer #footer-copy-email .ci{width:15px;height:15px;flex:0 0 auto;opacity:.75}footer #footer-copy-phone:hover,footer #footer-copy-email:hover{color:var(--txt)}footer #footer-copy-status,footer #footer-copy-email-status{font-size:12px;color:#aab2be}footer #footer-copy-status:empty,footer #footer-copy-email-status:empty{display:none} /* 20260927 修订：内页首屏文字块顶边距收拢，消除标题栏下方黑档 */ #viewer .stack-scroll>.film-brief:first-child{margin-top:2px} /* 20260927 修订：核心创意流程图大元素统一占位高度，三列小字对齐 */ .egg-case-flow .egg-case-number,.egg-case-flow strong{height:64px;display:flex;align-items:center;justify-content:center} @media(max-width:700px){.egg-case-flow .egg-case-number,.egg-case-flow strong{height:48px}} #viewer .gallery-brief .brief-row p{white-space:pre-line} /* Tighten the ending and align the two footer columns. */ .cta-banner{padding-bottom:44px} footer#contact{padding-top:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:start} footer#contact>div:first-child{margin-top:36px} footer#contact>.contact-list{margin:0;padding-top:0;align-items:flex-start;justify-self:end} footer#contact .wordmark{display:none} footer#contact p{margin:0;font-size:15px;line-height:1.6;letter-spacing:.02em;color:#cacaca} footer#contact p+p{margin-top:12px} footer#contact .contact-list{line-height:1.6;gap:12px} footer#contact .footer-line{grid-column:1/-1;margin-top:32px;padding-top:18px} @media(max-width:600px){.cta-banner{padding-bottom:28px}footer#contact{padding-top:24px;grid-template-columns:1fr;row-gap:24px}footer#contact>div:first-child{margin-top:0}footer#contact>.contact-list{justify-self:start;width:auto}footer#contact .footer-line{margin-top:4px}} /* Add a little breathing room above the footer. */ .cta-banner{padding-bottom:68px} @media(max-width:600px){.cta-banner{padding-bottom:44px}} /* ===== 20261009 品牌与插画区：三卡横向排布 ===== */ #brand .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} #brand .category-grid .design-card{display:block} #brand .category-grid .design-card .media{aspect-ratio:16/9} #brand .category-grid .caption{padding:20px 14px} @media(max-width:900px){#brand .category-grid{grid-template-columns:1fr}} /* ===== 20261009 萌杰马翻页：分「书籍 / 漫画版」两段，各带标题与独立翻页 ===== */ #viewer .book-journal{width:100%;max-width:none;margin:24px auto 12px} #viewer .book-seg{margin:0 0 40px} #viewer .book-seg-title{font:600 15px/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.06em;color:#fff;margin:0 0 14px;padding:2px 0 10px 12px;border-left:3px solid var(--accent);border-bottom:1px solid rgba(255,255,255,.18)} #viewer .book-seg .journal-frame{height:min(74svh,820px);aspect-ratio:auto;width:min(100%,calc(74svh * 1.4846));margin-inline:auto} #viewer .book-seg .journal-stage{grid-template-columns:48px minmax(0,1fr) 48px;gap:20px;width:min(100%,calc(74svh * 1.4846 + 136px))} #viewer .book-seg .journal-note{margin-top:10px} @media(max-width:700px){ #viewer .book-seg-title{font-size:14px;margin-bottom:10px} #viewer .book-seg{margin-bottom:28px} #viewer .book-seg .journal-frame{height:auto;aspect-ratio:2212/1490} #viewer .book-seg .journal-stage{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px} } /* ===== 萌杰马书籍版：封面与内页统一高度（保持横版，内页等比放大） ===== */ #viewer .book-journal .journal-frame{aspect-ratio:2212/1490;width:min(100%,calc(74svh * 1.4846));height:auto;margin-inline:auto} #viewer .book-journal .journal-spread.single .journal-page{flex:0 0 100%;max-width:100%} #viewer .book-journal .journal-stage{width:min(100%,calc(74svh * 1.4846 + 136px))} @media(max-width:700px){#viewer .book-journal .journal-frame{height:auto;aspect-ratio:2212/1490}} /* ===== 一尺有度：角色与场景设定（AIGC 资产） ===== */ #viewer .film-assets{flex:0 0 auto;width:min(860px,100%);margin:0;border-top:1px solid #ffffff14;padding-top:11px} #viewer .film-assets summary{cursor:pointer;list-style:none;font:400 11px/1.5 'PingFang SC',sans-serif;letter-spacing:.14em;color:#9aa0aa} #viewer .asset-grp{margin-top:14px;display:flex;flex-direction:column;gap:9px} #viewer .asset-grp-title{font:500 12px/1.6 'PingFang SC',sans-serif;color:#e8e6f2;margin:0} #viewer .asset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #viewer .asset-item{margin:0;display:flex;flex-direction:column;gap:6px} #viewer .asset-item img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid #ffffff12;display:block} #viewer .asset-item figcaption{font:400 11px/1.6 'PingFang SC',sans-serif;color:#8b8b94;text-align:center} #viewer .asset-note{margin:4px 0 0;font:400 11px/1.6 'PingFang SC',sans-serif;color:#7c7c86;text-align:center} @media(max-width:700px){#viewer .asset-grid{grid-template-columns:1fr}} /* ===== 分镜脚本：景别标签 + 运镜行 ===== */ #viewer .script-row .sh{display:flex;flex-direction:column;gap:2px} #viewer .script-row .sg{display:inline-block;align-self:flex-start;font:500 10px/1.6 'PingFang SC',sans-serif;letter-spacing:.08em;color:#e8e6f2;background:#2a2a30;border:1px solid #ffffff1f;border-radius:6px;padding:1px 8px;margin-bottom:4px} #viewer .script-row .scam{margin-top:2px;font:400 11px/1.6 'PingFang SC',sans-serif;color:#6f6f78} #viewer .asset-grid.pt2{grid-template-columns:repeat(2,minmax(0,1fr))} #viewer .asset-grid.pt2 .asset-item img{aspect-ratio:3/4;object-fit:cover} #viewer .asset-difficulty{margin-top:2px;display:flex;flex-direction:column;gap:8px;background:#ffffff08;border:1px solid #ffffff12;border-radius:12px;padding:12px 14px} #viewer .asset-difficulty p{margin:0;font:400 12px/1.7 "PingFang SC",sans-serif;color:#c9c8d1} #viewer .asset-difficulty b{font-weight:600;color:#e8e6f2;margin-right:6px} #viewer .asset-difficulty .asset-solution{margin-top:4px;padding-top:10px;border-top:1px dashed #ffffff1f;color:#e8e6f2} #viewer .asset-difficulty .asset-diff-row{margin:0;font:400 12px/1.7 "PingFang SC",sans-serif;color:#c9c8d1} #viewer .asset-difficulty .asset-solve-row{margin:-2px 0 0;padding-left:12px;border-left:2px solid #ffffff2b;font:400 12px/1.7 "PingFang SC",sans-serif;color:#9b9aa6} #viewer .asset-difficulty b{font-weight:600;color:#e8e6f2;margin-right:6px} #viewer .asset-difficulty .asset-prompt{margin-top:6px;border-top:1px dashed #ffffff1f;padding-top:10px} #viewer .asset-difficulty .asset-prompt summary{cursor:pointer;font:500 12px/1.6 "PingFang SC",sans-serif;color:#e8e6f2} #viewer .asset-difficulty .asset-prompt p{margin:8px 0 0;font:400 11.5px/1.8 "PingFang SC",sans-serif;color:#9b9aa6;background:#ffffff06;border-radius:8px;padding:10px 12px} /* 五列分镜：景别 badge + 运镜 + 该镜提示词折叠 */ .script-row .sh{display:flex;flex-direction:column;gap:2px} .script-row .sg{align-self:flex-start;font:500 10px/1.5 'PingFang SC',sans-serif;letter-spacing:.08em;color:#e8e6f2;background:#ffffff10;border:1px solid #ffffff1c;border-radius:6px;padding:1px 7px;margin-bottom:3px} .script-row .scam{margin-top:4px;font:400 11px/1.6 'PingFang SC',sans-serif;color:#6f7a86} .script-row .shot-prompt{margin-top:7px;border-top:1px dashed #ffffff1f;padding-top:6px} .script-row .shot-prompt summary{cursor:pointer;font:500 10.5px/1.6 'PingFang SC',sans-serif;letter-spacing:.06em;color:#9aa0aa} .script-row .shot-prompt p{margin:6px 0 0;font:400 11px/1.8 'PingFang SC',sans-serif;color:#8b8b94;background:#ffffff05;border-radius:8px;padding:9px 11px} #viewer .asset-grid.pt3{grid-template-columns:repeat(3,minmax(0,1fr))} #viewer .asset-grid.pt3 .asset-item img{aspect-ratio:3/4;object-fit:cover} #viewer .asset-grid.pt3{grid-template-columns:repeat(3,minmax(0,1fr))} #viewer .asset-grid.pt3 .asset-item img{aspect-ratio:3/4;object-fit:cover} /* AI 应用子分组标题 */ .ai-app-head{margin:84px 0 36px;padding-top:44px;border-top:1px solid #ffffff22;display:flex;align-items:end;justify-content:space-between;gap:24px} .ai-app-head .section-title{min-width:0} .ai-app-head h3{font:400 clamp(34px,4vw,52px)/1.15 'PingFang SC',sans-serif;letter-spacing:-.035em;color:var(--txt);margin:0} .ai-app-head .section-note{font:400 15px/1.8 'PingFang SC',sans-serif;color:#a6a6a6;margin:0;max-width:460px} @media(max-width:700px){.ai-app-head{display:block;margin:40px 0 20px}.ai-app-head .section-note{margin-top:10px}} /* AI 应用 · 大横幅主角卡 */ .app-showcase:not(.category-grid){margin:0 0 8px} .app-showcase:not(.category-grid) .design-card{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:0;background:var(--card);border:1px solid #ffffff2a;border-radius:22px;overflow:hidden;transition:box-shadow .25s,border-color .25s} .app-showcase:not(.category-grid) .design-card:hover{border-color:#ffffff45;box-shadow:0 18px 48px #00000022} .app-showcase:not(.category-grid) .media{aspect-ratio:auto;height:100%;min-height:340px;border:0;border-radius:0;background:var(--image)} .app-showcase:not(.category-grid) .media img{width:100%;height:100%;object-fit:cover} .app-showcase:not(.category-grid) .caption{display:flex;align-items:center;padding:40px 44px} .app-showcase:not(.category-grid) .caption>div{display:flex;flex-direction:column;align-items:flex-start;gap:14px} .app-showcase:not(.category-grid) .app-badge{display:inline-flex;align-items:center;gap:8px;font:500 12px/1.4 'PingFang SC',sans-serif;letter-spacing:.04em;color:#8fe3b4;background:#8fe3b41a;border:1px solid #8fe3b43d;border-radius:999px;padding:6px 14px} .app-showcase:not(.category-grid) .app-badge .dot{width:7px;height:7px;border-radius:50%;background:#35d07f;box-shadow:0 0 0 0 #35d07f;animation:app-dot 2s infinite} @keyframes app-dot{0%{box-shadow:0 0 0 0 #35d07f99}70%{box-shadow:0 0 0 7px #35d07f00}100%{box-shadow:0 0 0 0 #35d07f00}} .app-showcase:not(.category-grid) .caption h3{font:400 clamp(26px,2.6vw,40px)/1.2 'PingFang SC',sans-serif;letter-spacing:-.01em;color:var(--txt);margin:0} .app-showcase:not(.category-grid) .design-intro{font:400 15px/1.8 'PingFang SC',sans-serif;color:#b7b6c0;margin:0;max-width:46ch} .app-showcase:not(.category-grid) .app-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .app-showcase:not(.category-grid) .app-tags span{font:500 12px/1.5 'PingFang SC',sans-serif;letter-spacing:.02em;color:#d6d5de;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;padding:5px 12px} @media(max-width:820px){.app-showcase:not(.category-grid) .design-card{grid-template-columns:1fr}.app-showcase:not(.category-grid) .media{min-height:0;aspect-ratio:16/9}.app-showcase:not(.category-grid) .caption{padding:28px 24px}} /* AI 应用子分组标题（覆盖 .works .section-heading 的 margin） */ .works .ai-app-head{margin:88px 0 40px;padding-top:46px;border-top:1px solid #ffffff22;display:flex;align-items:end;justify-content:space-between;gap:24px} /* AI 应用子分组标题（覆盖 .works .section-heading 的 margin） */ .works .ai-app-head{margin:88px 0 40px;padding-top:46px;border-top:1px solid #ffffff22;display:flex;align-items:end;justify-content:space-between;gap:24px} /* 品牌设计区：一排两个（上下结构） */ #brand .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} #brand .category-grid .design-card{display:block} #brand .category-grid .design-card .media{aspect-ratio:16/9} #brand .category-grid .caption{padding:20px 16px} @media(max-width:700px){#brand .category-grid{grid-template-columns:1fr}} /* AI 应用区：一排两个（左AI生图占位 · 右小程序），对齐 film-card 竖版样式：图上文下 */ .app-showcase.category-grid .design-card{display:block;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px;overflow:hidden;transition:box-shadow .25s,border-color .25s} .app-showcase.category-grid .design-card:hover{border-color:var(--dim);box-shadow:0 12px 36px #00000008} .app-showcase.category-grid .media{aspect-ratio:16/9;min-height:0;height:auto;border-radius:12px;overflow:hidden;background:var(--image)} .app-showcase.category-grid .media img{width:100%;height:100%;object-fit:cover} .app-showcase.category-grid .caption{display:block;padding:20px 16px} .app-showcase.category-grid .caption>div{display:flex;flex-direction:column;align-items:flex-start;gap:7px} .app-showcase.category-grid .title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%} .app-showcase.category-grid .title-row .app-badge{flex-shrink:0} .app-showcase.category-grid .title-row h3{min-height:0;display:block;line-height:1.25;margin:0} .app-showcase.category-grid .title-row h3{min-height:0;display:block;line-height:1.25;margin:0} .app-showcase.category-grid .app-badge{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1.4 'PingFang SC',sans-serif;letter-spacing:.08em;color:#8f8f97} .app-showcase.category-grid .app-badge .dot{width:6px;height:6px;border-radius:50%;background:#35d07f;animation:app-dot 2.4s infinite} .app-showcase.category-grid .app-badge.mute .dot{background:#8a8a92;animation:none} /* apptitle-1014f: AI 应用区两卡标题统一 */ .app-showcase.category-grid .caption h3,.app-showcase.category-grid .design-card:first-child .caption h3{display:block;min-height:0;font:400 21px/1.3 'PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:-.01em;color:var(--txt);margin:0} /* film6-1014h: AI 视频区下方影片改为横向滑动浏览 */ .film-rail{grid-column:1/-1;display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:4px 4px 14px;scrollbar-width:thin;scrollbar-color:#3a3a44 transparent} .film-rail::-webkit-scrollbar{height:6px} .film-rail::-webkit-scrollbar-thumb{background:#3a3a44;border-radius:99px} .film-rail::-webkit-scrollbar-thumb:hover{background:#4a4a56} .film-rail::-webkit-scrollbar-track{background:transparent} .film-rail .film-card{flex:0 0 40%;scroll-snap-align:start;min-width:0} .film-rail .film-card:first-child .media{aspect-ratio:16/9!important} .film-rail .film-card:first-child img{object-position:center!important} .film-rail .film-card:first-child .caption>div{display:block!important} .film-rail .film-card:first-child .caption h3{white-space:normal!important} .film-rail .film-card:first-child .caption h3,.film-rail .film-card:nth-child(2) .caption h3{font-family:'PingFang SC','Microsoft YaHei',sans-serif!important;font-weight:400!important;font-size:clamp(19px,1.9vw,26px)!important;line-height:1.45!important;letter-spacing:0!important} @media(max-width:900px){.film-rail .film-card{flex:0 0 86%}} /* 播放器内的补充图片（剪辑时间轴等） */ .film-extra{margin:24px 0 0} .film-extra img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:#0b0b0f} .film-extra figcaption{margin-top:10px;font-size:13px;line-height:1.7;color:var(--body)} /* align-1015C: desktop hero refinement — 撤底部胶囊（CTA 相关规则随 align-1015H 移除按钮后自然失效） */ @media(min-width:761px){ .hero-foot{display:none} } /* align-1015H: hero CTA 撤除，改为底部下滑箭头 */ .scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.45);border-radius:50%;color:#f2f2f7;background:rgba(10,14,20,.18);backdrop-filter:blur(4px);animation:scroll-hint-float 2.2s ease-in-out infinite;transition:background .25s,border-color .25s} .scroll-hint:hover{background:rgba(10,14,20,.42);border-color:rgba(255,255,255,.75)} @keyframes scroll-hint-float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}} @media(prefers-reduced-motion:reduce){.scroll-hint{animation:none}}.film-prompt-list>summary{cursor:pointer;list-style:none;font:500 12px/1.8 'PingFang SC',sans-serif;letter-spacing:.14em;color:#9aa0aa}.film-prompt-list[open]>summary{margin-bottom:14px}.film-prompt-list .prompt-row{display:grid;grid-template-columns:66px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid #ffffff0f}.film-prompt-list .prompt-row:last-child{border-bottom:0}.film-prompt-list .prompt-row .st{font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7c7c86;letter-spacing:.04em}.film-prompt-list .prompt-box{display:flex;flex-direction:column;gap:6px}.film-prompt-list .prompt-box .sg{display:inline-block;align-self:flex-start;font:500 11px/1.5 'PingFang SC',sans-serif;letter-spacing:.06em;color:#e8e6f2;background:#ffffff10;border:1px solid #ffffff1c;border-radius:6px;padding:2px 9px}.film-prompt-list .prompt-box .prompt-text{margin:0;font:400 13px/1.8 'PingFang SC',sans-serif;color:#c9c9cf;white-space:pre-line}@media(max-width:700px){.film-prompt-list .prompt-row{grid-template-columns:48px 1fr;gap:9px}.film-prompt-list .prompt-box .prompt-text{font-size:12px}}.film-act-list>summary{cursor:pointer;list-style:none;font:500 12px/1.8 'PingFang SC',sans-serif;letter-spacing:.14em;color:#9aa0aa}.film-act-list[open]>summary{margin-bottom:6px}.film-act-list .act-block{margin-top:14px;padding-top:12px;border-top:1px solid #ffffff14}.film-act-list .act-block:first-child{margin-top:0}.film-act-list .act-head{font:600 12px/1.6 'PingFang SC',sans-serif;letter-spacing:.04em;color:#e8e6f2;margin-bottom:6px}.film-act-list .script-note{margin:0 0 10px;font:500 12px/1.8 'PingFang SC',sans-serif;letter-spacing:.14em;color:#9aa0aa}.film-act-list .act-row{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid #ffffff0c}.film-act-list .act-row:last-child{border-bottom:0}.film-act-list .act-row .st{font:11px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7c7c86;letter-spacing:.02em}.film-act-list .act-cell{display:flex;flex-direction:column;gap:2px}.film-act-list .act-cell .sv{font:400 12.5px/1.7 'PingFang SC',sans-serif;color:#c9c9cf}.film-act-list .act-cell .sa{margin-top:2px;font:400 11.5px/1.6 'PingFang SC',sans-serif;color:#8b8b94}@media(max-width:700px){.film-act-list .act-row{grid-template-columns:72px 1fr;gap:9px}.film-act-list .act-cell .sv{font-size:12px}}/* 品牌与插画区：插画首卡放大独占一行，下面两卡并排（参考展陈） */#brand .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}#brand .category-grid .design-card:first-child{grid-column:1/-1}#brand .category-grid .design-card:first-child .media{aspect-ratio:2/1}#brand .category-grid .design-card:first-child .design-intro{max-width:none;-webkit-line-clamp:3}#brand .category-grid .design-card:not(:first-child) .caption h3{font-size:19px;min-height:3em}#brand .category-grid .design-card:not(:first-child) .design-intro{font-size:12.5px}@media(max-width:700px){#brand .category-grid{grid-template-columns:1fr;gap:20px}#brand .category-grid .design-card:first-child{grid-column:auto}#brand .category-grid .design-card:first-child .media{aspect-ratio:16/9}#brand .category-grid .design-card:not(:first-child) .caption h3{font-size:19px;min-height:0}#brand .category-grid .design-card:not(:first-child) .design-intro{font-size:12.5px}} /* 全屏弹窗兜底：viewer 整体进入全屏时视频铺满 */ #viewer:fullscreen .film-stage>video{width:min(100vw,calc(100vh * 16 / 9));max-height:calc(100vh - 120px)} /* 关闭按钮：圆形 X 图标 */ #close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid #444;border-radius:50%;color:#c8ccd2;background:#1b1b22;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease} #close svg{display:block} #close:hover{background:#e5484d;border-color:#e5484d;color:#fff;transform:rotate(90deg)} #close:active{transform:rotate(90deg) scale(.94)} #close:focus-visible{outline:2px solid #6aa6ff;outline-offset:2px} /* 视觉优化 1018M：底部 CTA 层次感 + 标题强调 */ .cta-banner{background:radial-gradient(120% 140% at 50% 118%,#2a2a38 0%,#1b1b24 34%,#171721 62%)} .cta-banner h2{letter-spacing:.04em} .cta-banner h2 em{font-style:normal;color:var(--accent)} .cta-inner::before{content:"";display:block;width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.75;margin:0 auto} /* 1018O: 全屏/矮窗口防裁切——vh 回退 + 视频高度约束 */ @supports not (height: 94svh){ dialog{max-height:94vh} #viewer{height:auto;max-height:94vh} #viewer-content .film-stage>video{width:min(100%,calc((94vh - 118px) * 16 / 9));max-height:calc(94vh - 118px)} } #viewer-content .film-stage>video{max-height:calc(94svh - 118px)} #viewer:fullscreen{height:100%;max-height:100%} #viewer:fullscreen .viewer-bar{position:static} #viewer:fullscreen .film-stage>video{width:min(100%,calc((100vh - 140px) * 16 / 9));max-height:calc(100vh - 140px)} /* 1020m: 简历按钮与其它 tab 统一（无底色无图标） */ .pill-nav a.nav-resume{transition:color .25s,transform .25s} .pill-nav a.nav-resume:hover{color:#fff} .pill-nav a.nav-resume:active{transform:translateY(0)} /* 导航选中态（scrollspy）：PC 与手机端统一 */ nav.pill-nav a.active{color:#fff;font-weight:600} nav.pill-nav a.active:hover{color:#fff} /* 1018Q: 移动端导航回顶部两行布局 + 回到顶部按钮 */ @media(max-width:699px){ header,body>header{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto;padding:10px 12px 8px;row-gap:8px} header .wordmark{justify-self:start} header nav.pill-nav{width:100%} html{scroll-padding-top:118px} main>section{scroll-margin-top:118px} } #back-top{position:fixed;right:14px;bottom:18px;z-index:88;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #ffffff30;background:#111318cc;color:#f1f1f3;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s,background .25s,border-color .25s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer} #back-top.show{opacity:1;pointer-events:auto;transform:none} #back-top:hover{background:var(--accent);border-color:var(--accent);color:#fff} #back-top svg{display:block} /* 1018T: 统一并加大各区块标题与内容间距(实测14px过紧) */ .curated .section-heading{margin-bottom:56px} #media .section-heading{margin-bottom:48px} /* 1018T: 会议/品牌区卡片标题区固定最小高度，避免折行导致底部不对齐 */ #conference .category-grid .caption h3,#brand .category-grid .caption h3{min-height:2.9em;display:flex;align-items:center} /* 1018T: 页脚站内导航小链接 */ /* 1018T: 新媒体长图卡统一暗色蒙层，hover 提亮(平衡整页明暗) */ #media .media-deck .media{position:relative;overflow:hidden} #media .media-deck .media::after{content:"";position:absolute;inset:0;background:#00000040;pointer-events:none;transition:background .35s ease} #media .media-deck .design-card:hover .media::after{background:#00000014} /* 1018U: 深色原生控件 + 弹窗焦点圈 + QR关闭按钮统一圆形X */ :root{color-scheme:dark} #viewer:focus,#qr-dialog:focus,#viewer:focus-visible,#qr-dialog:focus-visible{outline:none} #qr-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid #444;border-radius:50%;color:#c8ccd2;background:#1b1b22;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease} #qr-close svg{display:block} #qr-close:hover{background:#e5484d;border-color:#e5484d;color:#fff;transform:rotate(90deg)} #qr-close:active{transform:rotate(90deg) scale(.94)}