@charset "UTF-8";
:root{--navy:#081823;--deep:#05121b;--gold:#e4c58a;--soft:#f7ecd7;--muted:#b9c2c5;--line:#bba16b55;--serif:"Noto Serif TC","PMingLiU",serif;--sans:"Microsoft JhengHei",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--navy);color:var(--soft);font:17px/1.9 var(--sans);background-image:radial-gradient(ellipse at 80% 30%,#18324366,transparent 55%)}a{color:inherit;text-decoration:none}button,summary{cursor:pointer}button{font:inherit;color:inherit}img{display:block;max-width:100%;height:auto}h1,h2,h3,h4,p,figure{margin:0}button,a,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:6px}::selection{background:var(--gold);color:var(--navy)}[hidden]{display:none!important}.wrap{width:min(1240px,88%);margin-inline:auto}.skip{position:fixed;left:16px;top:-100px;z-index:100;background:var(--gold);color:var(--navy);padding:12px}.skip:focus{top:10px}.masthead{width:100%;padding:20px 6%;display:flex;align-items:center;gap:28px;background:#071721ef;border-bottom:1px solid var(--line);position:relative;z-index:5}.wordmark{font:11px/1.5 Georgia,serif;letter-spacing:4px;color:var(--gold);position:relative;padding-right:60px}.wordmark span{font:22px var(--serif);position:absolute;left:75px;top:5px;letter-spacing:2px;width:54px}nav{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:15px;white-space:nowrap}nav a{transition:color .2s}nav a:hover{color:var(--gold)}.nav-contact{border-bottom:1px solid var(--gold);padding-bottom:4px}#motion-toggle{font-size:12px;background:none;border:1px solid var(--line);padding:6px 10px;white-space:nowrap}.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#06131c44,#06131c22 65%,var(--navy)),url(assets/gallery-desk.webp) center/cover no-repeat;padding-top:52px}.hero-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}.eyebrow{font:12px/1.6 Georgia,serif;letter-spacing:3px;color:var(--gold)}.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(90px,12vw,164px);line-height:1.2;letter-spacing:.07em;color:var(--gold);margin-top:12px;text-shadow:0 4px 35px #000}.hero-side{font-size:16px;letter-spacing:3px;line-height:2.2;border-left:1px solid var(--gold);padding-left:30px;color:#f6e8ce;text-shadow:0 2px 10px #000}.hero-tagline{text-align:center;padding:30px 5% 10px;text-shadow:0 2px 12px #000}.hero-tagline h2{font-size:clamp(16px,1.8vw,23px);font-weight:400;letter-spacing:3px}.hero-tagline p{letter-spacing:6px;margin-top:12px;color:var(--gold);font-size:19px}.book-stage{padding:28px 0 35px;perspective:1600px;position:relative}.open-book{width:94%;margin:auto;display:grid;grid-template-columns:1fr 1fr;position:relative;transform:rotateX(16deg) rotateZ(-2deg);transform-origin:50% 85%;filter:drop-shadow(0 28px 24px #000c);border-bottom:9px solid #bca67f;border-radius:3px 5px 12px 9px;transition:transform 1s var(--ease)}.open-book:before{content:"";position:absolute;inset:8px -10px -20px;background:#4b3527;z-index:-1;border-radius:2px 3px 10px 6px;box-shadow:0 5px #20170f,0 8px 2px #af9061}.book-page{position:relative;background:#e9ddc6;padding:20px 22px 14px;color:#172b32;border-bottom:5px double #cbbca1;overflow:hidden;display:flex;flex-direction:column}.page-left{border-radius:8px 28px 0 6px;transform:skewY(1.3deg);background:linear-gradient(95deg,#e9ddc6,#fff7e6 65%,#c5b597)}.page-right{border-radius:28px 8px 6px 0;transform:skewY(-1.3deg);background:linear-gradient(85deg,#b9a98b,#fff7e6 20%,#e9ddc6)}.page-art{aspect-ratio:1.4;display:grid;place-items:center;background:#008c9c;overflow:hidden;box-shadow:inset 0 0 20px #0002}.page-art img{width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease)}.page-right .page-art{background:#073b3b}.book-page>span{display:block;text-align:center;font:25px/1.5 var(--serif);margin-top:12px;letter-spacing:4px}.book-page small{display:block;font:9px/1.7 Georgia,serif;letter-spacing:1.4px;margin-top:3px}.book-spine{position:absolute;top:0;bottom:0;left:50%;width:24px;background:linear-gradient(90deg,transparent,#36281966,transparent);transform:translateX(-50%);pointer-events:none}.hero-bottom{display:flex;justify-content:space-between;padding:22px 0 28px;font-size:13px;letter-spacing:2px;color:#d6c8aa}.hero-bottom a{color:var(--gold)}.section{padding-top:82px;padding-bottom:80px;border-top:1px solid var(--line);scroll-margin-top:20px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:35px}.section-heading>p{color:var(--muted);font-size:15px;max-width:400px}.chapter{display:flex;gap:23px;align-items:center}.chapter>span{font:66px/1 Georgia,serif;color:var(--gold);font-weight:400}.chapter h2{font:42px/1.5 var(--serif);font-weight:500;letter-spacing:4px}.chapter .eyebrow{margin-bottom:5px}.selected-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:24px}.selected-piece{min-width:0}.selected-image{height:270px;overflow:hidden;background:#163439;position:relative}.selected-image img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}.selected-image.brand-image,.selected-image.puyuan-image{background:#057780}.selected-image.brand-image img,.selected-image.puyuan-image img{object-fit:contain}.selected-image.puyuan-image{background:#083734}.selected-piece>span{display:block;margin-top:17px;font:11px/1.5 Georgia,serif;letter-spacing:2px;color:var(--gold)}.selected-piece h3{font:25px/1.6 var(--serif);letter-spacing:2px;margin-top:6px}.selected-piece h3 b{float:right;font:24px var(--sans);font-weight:400}.selected-piece>p{font-size:14px;color:var(--muted);margin-top:5px}.project-files{margin-top:45px;border-top:1px solid var(--line)}.project-file{border-bottom:1px solid var(--line);scroll-margin-top:20px}.project-file>summary{display:flex;align-items:center;gap:24px;list-style:none;padding:22px 0}.project-file>summary::-webkit-details-marker{display:none}.project-file>summary span{font:10px Georgia,serif;letter-spacing:1px;color:var(--gold)}.project-file>summary h3{font-size:16px;font-weight:400}.project-file>summary b{margin-left:auto;font-size:25px;font-weight:400;color:var(--gold)}.project-file[open]>summary b{transform:rotate(45deg)}.project-content{padding:30px;background:#102732;margin-bottom:28px}.project-content h3{font:33px/1.6 var(--serif);color:var(--gold);margin:15px 0}.project-content h4{font-size:23px;margin-bottom:12px}.project-content p{font-size:16px;color:#d1d8d8}.project-content .case-index{display:none}.project-content .shang-layout,.project-content .people-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:35px;align-items:start}.project-content .credits{display:grid;grid-template-columns:90px 1fr;gap:12px;font-size:14px;margin:20px 0}.credits dd{margin:0}.project-content .kicker{font-size:12px;letter-spacing:2px}.shang-details,.puyuan-prints{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:32px}.puyuan-note{grid-column:1/-1}.project-content figcaption,.photo-caption{font-size:13px;color:var(--muted);margin-top:12px}.brand-spread figcaption span,.photo-caption span{display:block;color:var(--gold)}.project-content details{margin-top:20px}.project-content details>summary{padding:15px 0;color:var(--gold)}.project-content .details-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:20px 0}.details-grid b{display:block;margin-bottom:12px}.project-content .puyuan-heading{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}.puyuan-heading>.kicker{grid-column:1/-1}.room-stage{margin-top:20px}.zoom{display:block;position:relative}.zoom-mark{position:absolute;right:12px;bottom:12px;padding:7px 13px;background:#071721e8;border:1px solid var(--gold);color:var(--gold);font-size:12px}.text-link{display:inline-block;color:var(--gold);border-bottom:1px solid var(--gold);font-size:15px;padding:5px 0;margin-top:18px}.scope-note{font-size:12px!important;color:#aebbc0!important;margin-top:27px;max-width:900px}.film-feature{display:grid;grid-template-columns:.8fr 1.6fr;gap:45px;align-items:center}.film-copy>p{font-size:16px;color:#d0d7d8;margin:28px 0}.film-copy>small{display:block;color:var(--muted);font-size:12px;margin-top:22px}.outline-button,.gold-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:9px 21px;border:1px solid var(--gold);font-size:15px;line-height:1.6;transition:background .2s,color .2s}.gold-button{background:var(--gold);color:#10202b}.outline-button:hover,.gold-button:hover{background:#f5e1b7;color:var(--navy)}.film-hero{position:relative;display:block;height:420px;overflow:hidden;background:#18242b}.film-hero>img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.8;transition:transform .8s}.film-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0003,transparent 60%),linear-gradient(0deg,#0009,transparent 45%);pointer-events:none}.film-title{position:absolute;right:30px;bottom:60px;z-index:1;font:32px/1.7 var(--serif);text-shadow:0 2px 10px #000}.play{display:grid;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border:1px solid #fff;border-radius:50%;background:#06121b55;color:white;font:24px var(--sans);z-index:1;padding-left:4px}.film-caption{position:absolute;bottom:18px;left:22px;font:11px Georgia,serif;letter-spacing:2px;z-index:1;color:white}.film-strip-layout{display:grid;grid-template-columns:30px 1fr 30px;gap:16px;align-items:center;margin-top:28px}.film-strip{display:flex;overflow:auto;gap:14px;padding:16px 0 11px;border-top:8px dashed #88724c88;border-bottom:8px dashed #88724c88;scroll-snap-type:x mandatory;scrollbar-color:#957f55 transparent}.film-strip>a{position:relative;flex:0 0 calc((100% - 56px)/5);scroll-snap-align:start;min-width:120px}.film-strip img{width:100%;height:116px;object-fit:cover;object-position:50% 30%;transition:filter .3s}.film-strip span{display:block;font-size:12px;color:#d5c3a5;margin-top:5px}.strip-control{border:0;background:none;color:var(--gold);font-size:36px;min-height:44px}.ai-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:40px}.ai-evidence img{width:100%;border:1px solid #c1cbd044}.ai-evidence h3{font:25px/1.6 var(--serif);color:var(--gold);margin-top:20px}.ai-evidence>p{font-size:15px;color:var(--muted)}.ai-workflow{border-left:1px solid var(--line);padding-left:35px}.ai-workflow>h3{font:25px/1.5 var(--serif);color:var(--gold);letter-spacing:2px}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:24px 0}.workflow>li{position:relative}.workflow>li+li:before{content:"›";position:absolute;left:-13px;top:6px;color:var(--gold);font-size:23px}.workflow li>span{display:grid;place-items:center;width:48px;height:48px;background:var(--gold);color:var(--navy);border-radius:50%;font:18px Georgia,serif;margin-bottom:14px}.workflow h4,.application-links h4{font-size:16px;font-weight:500;white-space:nowrap}.workflow p,.application-links p{font-size:13px;color:var(--muted);margin-top:8px}.applications-title{margin-top:28px}.application-links{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}.application-links a>span{font:38px Georgia,serif;color:var(--gold);display:block;line-height:1.4;margin-bottom:7px}.application-links a:hover h4{color:var(--gold)}.documents-section{background:linear-gradient(90deg,#071721f5 20%,#07172199),url(assets/gallery-desk.webp) center/cover;overflow:hidden}.document-intro{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.document-intro>div>p{font-size:16px;color:var(--muted);margin-top:26px}.document-display{display:grid;grid-template-columns:1fr 1fr;padding:16px;background:#efe3cd;transform:perspective(1100px) rotateX(18deg) rotateZ(-7deg);gap:16px;box-shadow:0 12px #9a8564,0 25px 35px #0009}.document-display>div{display:flex;flex-direction:column;gap:12px;justify-content:center}.document-display img{width:100%;height:112px;object-fit:cover}.document-display>div:last-child img{height:auto;max-height:230px;object-fit:contain}.document-display span{font:8px Georgia,serif;letter-spacing:1px;color:#26363b;text-align:center}.document-list{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:65px}.document-list article{border-top:1px solid var(--line);padding-top:22px}.document-list article>span{font:11px Georgia,serif;letter-spacing:2px;color:var(--gold)}.document-list h3{font:25px/1.6 var(--serif);margin-top:12px}.document-list p{font-size:14px;color:var(--muted);margin-top:8px}.document-actions{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap}.about-section{display:grid;grid-template-columns:1fr 1.1fr;gap:60px}.about-section h2{font:36px/1.8 var(--serif);color:var(--gold);margin-top:20px}.about-section p:not(.eyebrow){font-size:16px;color:#cbd3d5}.about-section p+p{margin-top:18px}.skills-line{border-top:1px solid var(--line);padding-top:20px;margin-top:30px;font-size:14px;color:var(--gold);letter-spacing:1px}.contact-section{background:linear-gradient(90deg,#071721ee,#16263277),url(assets/gallery-desk.webp) center 20%/cover;padding:70px 0 60px;border-top:1px solid var(--line)}.contact-intro{font-size:18px;color:#d9d6ca;margin:25px 0}.line-button{display:inline-flex;gap:20px;align-items:center;min-height:56px;background:#079b56;border:1px solid #48c288;border-radius:3px;padding:12px 30px;color:white;font-size:19px;box-shadow:0 6px 24px #0004;transition:background .2s}.line-button>span{border-radius:50%;width:34px;height:34px;background:white;color:#078d4b;display:grid;place-items:center;font:bold 10px Arial}.line-button:hover{background:#087d48}.contact-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-top:1px solid var(--line);padding-top:25px;margin-top:38px;font-size:14px}.contact-bottom>div>span{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}.contact-bottom>div>a{overflow-wrap:anywhere}.contact-bottom button{font-size:12px;border:1px solid var(--line);background:none;padding:4px 10px;margin-left:10px}.qr-details summary{color:var(--gold);padding:5px 0}.qr-details img{width:170px;margin-top:18px}.contact-bottom #copy-status{font-size:12px;color:var(--gold);min-height:24px;margin-top:8px}footer{padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}footer>a{color:var(--gold)}.step-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line)}.step-tabs button{background:none;border:0;padding:10px 0;font-size:15px}.step-tabs button[aria-selected=true]{color:var(--gold);border-bottom:2px solid}.step-panel{position:relative;padding:25px 0;min-height:230px}.step-number{font:70px Georgia,serif;opacity:.15;position:absolute;right:0;top:5px}.step-tags{display:flex;gap:15px;margin-top:15px;font-size:13px;color:var(--gold)}.connection-line{width:100%;height:70px;color:var(--gold);stroke:currentColor;stroke-width:1}.scope-note{line-height:1.8}.quiet,.archive-note{font-size:12px!important;color:var(--muted)!important}.project-content .room-stage img{width:100%}.project-content .role-note{font-size:13px!important;margin-top:18px}.project-content .little-arrow{display:none}.project-content .case-title h3 span,.project-content h3 span{color:var(--gold)}dialog{padding:0;border:1px solid var(--line);background:#0e2531;color:var(--soft);width:min(1250px,94vw);max-height:94vh}dialog::backdrop{background:#000d;backdrop-filter:blur(6px)}.lightbox-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;background:#0e2531}.lightbox-bar h2{font-size:16px}.lightbox-bar button{border:1px solid var(--line);background:none;padding:7px 15px;font-size:14px;white-space:nowrap}.lightbox-stage{padding:20px;display:grid;place-items:center}.lightbox-stage img{max-height:74vh;width:auto;object-fit:contain}.lightbox-stage+p{font-size:13px;padding:12px 24px}.lightbox-stage+p a{color:var(--gold);margin-left:10px}.modal-open{overflow:hidden}
@media(hover:hover){.selected-piece:hover img{transform:scale(1.025)}.book-page:hover img{transform:scale(1.025)}.film-hero:hover img{transform:scale(1.025)}.open-book:hover{transform:rotateX(10deg) rotateZ(-1deg)}}
@media(min-width:900px){body:not(.reduce-motion) .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}body:not(.reduce-motion) .reveal.visible{opacity:1;transform:none}}
@media(max-width:1100px){nav{gap:18px;font-size:13px}.masthead{gap:20px;padding-inline:5%}.wordmark span{display:none}.wordmark{padding-right:0}.selected-image{height:210px}.chapter h2{font-size:35px}.chapter>span{font-size:57px}.ai-layout{gap:25px}.ai-workflow{padding-left:25px}.workflow{gap:13px}.workflow h4,.application-links h4{font-size:14px}.workflow p,.application-links p{font-size:12px}.film-feature{gap:30px;grid-template-columns:.9fr 1.4fr}.film-hero{height:360px}}
@media(max-width:760px){html{scroll-padding-top:20px}.wrap{width:88%}.masthead{padding:15px 6%;gap:12px;flex-wrap:wrap}.wordmark{font-size:10px;letter-spacing:3px}nav{order:3;width:100%;overflow-x:auto;gap:23px;font-size:13px;padding:10px 0 0;scrollbar-width:none}#motion-toggle{margin-left:auto;font-size:11px}.hero{padding-top:35px;background-position:55% center}.hero-heading{gap:14px;align-items:start}.hero h1{font-size:clamp(76px,16vw,124px);letter-spacing:.03em;margin-top:12px}.hero .eyebrow{font-size:8px;letter-spacing:2px}.hero-side{font-size:12px;letter-spacing:1px;padding-left:14px;margin-top:30px;max-width:140px}.hero-tagline{padding-top:25px}.hero-tagline h2{font-size:14px;letter-spacing:1px;max-width:310px;margin:auto;line-height:2}.hero-tagline p{font-size:16px;letter-spacing:3px}.book-stage{width:94%;padding:26px 0 25px}.open-book{width:96%;transform:rotateX(10deg) rotateZ(-2deg);border-bottom-width:5px}.book-page{padding:10px 9px 9px}.book-page>span{font-size:18px;letter-spacing:1px;margin-top:10px}.book-page small{font-size:6px;letter-spacing:.3px;line-height:1.7}.page-art{aspect-ratio:1.05}.book-spine{width:15px}.open-book:before{inset:3px -4px -11px}.hero-bottom{font-size:10px;letter-spacing:1px;padding:15px 0 25px}.section{padding:50px 0;scroll-margin-top:10px}.section-heading{display:block;margin-bottom:25px}.section-heading>p{margin-top:23px;font-size:14px}.chapter{gap:15px}.chapter>span{font-size:47px}.chapter h2{font-size:30px;letter-spacing:2px;line-height:1.5}.eyebrow{font-size:9px;letter-spacing:2px}.selected-grid{grid-template-columns:1fr 1fr;gap:22px 16px}.selected-piece:nth-child(3){grid-column:1/-1}.selected-image{height:auto;aspect-ratio:1.05}.selected-piece:nth-child(3) .selected-image{aspect-ratio:1.65}.selected-piece>span{font-size:9px;letter-spacing:1px;margin-top:12px}.selected-piece h3{font-size:21px;letter-spacing:0}.selected-piece h3 b{font-size:19px}.selected-piece>p{font-size:12px}.project-files{margin-top:30px}.project-file>summary{gap:12px;padding:18px 0}.project-file>summary span{display:none}.project-file>summary h3{font-size:14px;max-width:90%;line-height:1.8}.project-content{padding:18px;margin-bottom:20px}.project-content .shang-layout,.project-content .people-layout,.project-content .puyuan-heading{grid-template-columns:1fr;gap:20px}.project-content h3{font-size:29px}.project-content p{font-size:15px}.project-content .credits{font-size:12px;grid-template-columns:65px 1fr}.shang-details,.puyuan-prints{grid-template-columns:1fr;gap:20px}.project-content .details-grid{grid-template-columns:1fr}.project-content figcaption{font-size:12px}.film-feature{display:flex;flex-direction:column;gap:25px;align-items:stretch}.film-copy>p{font-size:15px;margin:22px 0}.film-copy>small{font-size:11px;margin-top:16px}.film-copy>small br{display:none}.film-hero{height:310px}.film-title{font-size:26px;right:20px;bottom:60px}.play{width:60px;height:60px;font-size:22px}.film-strip-layout{gap:8px;grid-template-columns:22px 1fr 22px;margin-top:20px}.film-strip>a{min-width:110px}.film-strip img{height:90px}.film-strip{border-width:6px;gap:10px}.film-strip span{font-size:11px}.strip-control{font-size:30px}.ai-layout{grid-template-columns:1fr;gap:30px}.ai-workflow{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:24px}.ai-evidence h3{font-size:23px}.ai-evidence>p{font-size:14px}.ai-workflow>h3{font-size:23px}.workflow{gap:17px}.workflow li>span{width:43px;height:43px;font-size:16px}.workflow h4{font-size:15px}.workflow p{font-size:12px}.application-links h4{font-size:14px}.application-links p{font-size:12px}.documents-section{padding:50px 0}.document-intro{grid-template-columns:1fr;gap:35px}.document-display{width:90%;margin:auto;gap:10px;padding:10px}.document-display img{height:90px}.document-list{grid-template-columns:1fr;gap:32px;margin-top:45px}.document-list h3{font-size:23px}.document-list p{font-size:14px}.document-actions{gap:12px;margin-top:18px}.outline-button,.gold-button{font-size:14px;min-height:44px;padding:9px 18px}.about-section{display:block}.about-section h2{font-size:29px;margin-bottom:24px}.about-section p:not(.eyebrow){font-size:15px}.skills-line{font-size:13px}.contact-section{padding:48px 0 35px}.contact-intro{font-size:16px;margin:23px 0}.line-button{font-size:17px;padding:10px 25px}.contact-bottom{grid-template-columns:1fr;gap:25px;margin-top:30px;font-size:14px}.contact-bottom button{display:block;margin:10px 0 0}.qr-details summary{font-size:13px}.qr-details img{width:150px}footer{flex-wrap:wrap;font-size:10px;gap:10px;padding:20px 0}footer p{order:3;width:100%}.lightbox-bar{padding:12px}.lightbox-bar h2{font-size:13px}.lightbox-bar button{font-size:12px;padding:6px 9px}.lightbox-stage{padding:10px}.lightbox-stage+p{font-size:12px;padding:12px}.scope-note{font-size:11px!important}.zoom-mark{font-size:11px;padding:5px 9px}}
.reduce-motion *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reduce-motion .reveal{opacity:1!important;transform:none!important}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}}
/* 2026-10-27 — Architectural evening gallery; original work remains intact. */
:root{--navy:#071724;--deep:#04111b;--gold:#e3c58d;--soft:#f2e6d0;--muted:#b9c5ca;--line:#d2b47855}body{background-color:var(--navy);background-image:radial-gradient(ellipse at 0 20%,#18344955,transparent 55%),radial-gradient(ellipse at 95% 65%,#21394b44,transparent 60%)}.masthead{background:#061622;min-height:84px;padding-block:17px}.masthead .wordmark{color:#dbc08c}.masthead .nav-contact{color:var(--gold)}.corridor-hero{padding:0;min-height:690px;isolation:isolate;background:#071724;display:flex;align-items:center;position:relative;border-bottom:1px solid var(--line)}.hero-scene{position:absolute;z-index:-2;inset:0;background:url(assets/architectural-corridor.webp) center/cover no-repeat}.corridor-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#04111a22 15%,#04111a11 45%,transparent 65%),linear-gradient(0deg,#071724 0%,transparent 22%)}.hero-content{position:relative;padding-block:60px 55px}.corridor-hero .eyebrow{letter-spacing:5px;font-size:11px;color:var(--gold)}.corridor-hero h1{font-size:clamp(105px,12.5vw,180px);letter-spacing:.06em;line-height:1.15;margin:22px 0 22px;font-family:var(--serif);font-weight:500;color:var(--gold);text-shadow:0 5px 24px #0005}.corridor-hero h2{font-family:var(--serif);font-size:clamp(24px,2.3vw,35px);font-weight:400;letter-spacing:4px;color:var(--soft);line-height:1.7}.hero-intro{font-size:17px;line-height:2;letter-spacing:2px;max-width:510px;border-left:1px solid var(--gold);padding-left:20px;margin-top:28px;color:#dce2de;text-shadow:0 2px 12px #000}.hero-capabilities{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(530px,50%);margin-top:38px}.hero-capabilities a{color:var(--gold);font-size:16px;letter-spacing:2px;padding-left:18px;line-height:1.7;border-left:1px solid var(--line)}.hero-capabilities a:first-child{padding-left:0;border:0}.hero-capabilities small{display:block;font-size:13px;letter-spacing:1px;color:#d7c5a2;margin-top:3px}.hero-capabilities a:hover{color:#fff0c8}.hero-scroll{display:inline-flex;align-items:center;gap:20px;margin-top:35px;color:#d2c09b;font-size:12px;letter-spacing:3px}.hero-scroll>span{font:25px Georgia,serif}.hero-vertical{position:absolute;right:4%;top:80px;writing-mode:vertical-rl;letter-spacing:5px;color:#e4cb9d;font-size:12px;border-left:1px solid var(--line);padding:4px 0 4px 13px;text-shadow:0 2px 10px #000}.section{padding-block:65px}.chapter>span{font-size:55px;color:#cfb478}.chapter h2{font-size:40px;font-weight:400;letter-spacing:5px}.section-heading{margin-bottom:30px}.section-heading>p{font-size:15px;letter-spacing:1px;line-height:1.9}.title-rule{display:inline-block;width:55px;height:1px;background:var(--gold);margin:0 0 12px 25px;opacity:.65}.gallery-selection{grid-template-columns:.85fr 1.45fr;grid-template-rows:1fr 1fr;column-gap:25px;row-gap:23px}.gallery-selection .selected-piece:nth-child(1){grid-column:1;grid-row:1}.gallery-selection .selected-piece:nth-child(2){grid-column:1;grid-row:2}.gallery-selection .selected-piece:nth-child(3){grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column}.gallery-selection .selected-piece:nth-child(3) .selected-image{flex:1;min-height:460px;height:100%}.gallery-selection .selected-image{height:200px;border:1px solid #c4b58b33}.gallery-selection .selected-image.brand-image{background:#258f9b}.gallery-selection .selected-image.puyuan-image{background:#073c40}.gallery-selection .selected-piece>span{font-size:10px;margin-top:10px}.gallery-selection .selected-piece h3{font-size:24px;margin-top:3px}.gallery-selection .selected-piece>p{font-size:13px;margin-top:3px}.project-file>summary h3{color:#d6c6a6}.film-hero{height:360px;border:1px solid var(--line)}.film-title{background:linear-gradient(90deg,transparent,#08182388);padding:10px 18px;right:10px}.film-strip{background:#040f17;border-color:#84714c77}.film-copy .chapter{gap:18px}.film-copy .chapter>span{font-size:49px}.ai-section .chapter h2{font-size:36px;letter-spacing:3px}.ai-workflow{border-left-color:#c6a66966}.ai-evidence .zoom{border:1px solid var(--line)}.ai-evidence h3{font-size:23px}.workflow>li>span{box-shadow:inset 0 1px 7px #ffefc7}.documents-section{background:linear-gradient(90deg,#071724fc 12%,#071724aa 55%,#07172433),url(assets/gallery-desk.webp) center/cover no-repeat}.document-intro{grid-template-columns:.9fr 1.1fr;gap:70px}.portfolio-volume{padding:28px 25px 40px;perspective:1000px}.volume-cover{position:relative;background:linear-gradient(135deg,#163249,#071624 65%);padding:32px 26px 35px;transform:rotateY(-12deg) rotateX(12deg) rotateZ(8deg);box-shadow:-10px 8px 0 #b8aa91,-15px 10px 0 #183246,0 30px 35px #0009;border:1px solid #57718a55}.volume-cover:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:#ccad6a77}.volume-cover>span{font:8px Georgia,serif;letter-spacing:2px;color:var(--gold);display:block}.volume-cover strong{font:26px/1.7 var(--serif);color:#ead3a4;font-weight:400;letter-spacing:3px;display:block;margin:24px 0 28px}.volume-images{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.volume-images img{height:85px;width:100%;object-fit:contain;background:#113a45}.volume-cover>small{display:block;font:8px Georgia,serif;color:#b4c1c5;letter-spacing:1px;margin-top:20px}.document-list{margin-top:28px}.document-list h3{font-size:23px}.contact-section{position:relative;isolation:isolate;background:linear-gradient(90deg,#061722cc,#06172222),url(assets/architectural-corridor.webp) center 60%/cover no-repeat;padding:65px 0 45px;min-height:490px}.contact-section:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#071724ee,transparent 70%)}.contact-invitation{display:inline-block;border:1px solid #d0b68177;background:#0a2037a6;padding:30px 40px 32px;backdrop-filter:blur(3px);min-width:460px}.contact-invitation .chapter>span{display:none}.contact-invitation .chapter h2{font-size:44px;letter-spacing:7px}.contact-intro{font-size:16px;line-height:2;letter-spacing:1px;margin:20px 0}.line-button{border-radius:40px;background:#102834cc;border:1px solid var(--gold);color:#ead6ab;gap:17px;padding:11px 25px}.line-button>span{background:var(--gold);color:#092030}.line-button:hover{background:#254457}.contact-bottom{border-top-color:#d0b68144;background:#071724a3;padding:22px 25px 10px;margin-top:30px}.about-section{padding-top:55px;padding-bottom:55px}.about-section h2{font-size:32px}.contact-invitation .eyebrow{font-size:10px}
@media(min-width:1600px){.corridor-hero{min-height:760px}.hero-scene{background-position:center 45%}}@media(max-width:1100px){.hero-content{padding-block:50px}.corridor-hero{min-height:650px}.hero-capabilities{width:53%;gap:8px}.hero-capabilities a{font-size:14px;letter-spacing:1px;padding-left:12px}.hero-capabilities small{font-size:12px}.hero-intro{font-size:16px;max-width:420px}.corridor-hero h2{font-size:27px}.hero-vertical{right:3%}.gallery-selection .selected-image{height:180px}.gallery-selection .selected-piece:nth-child(3) .selected-image{min-height:420px}.chapter h2{font-size:35px}.ai-section .chapter h2{font-size:30px}.document-intro{gap:40px}.volume-cover strong{font-size:22px}.volume-cover{padding:26px 22px}.contact-invitation{min-width:430px}}
@media(max-width:760px){.corridor-hero{min-height:710px;align-items:flex-end}.hero-scene{background-position:68% top;background-size:auto 100%;opacity:.9}.corridor-hero:after{background:linear-gradient(90deg,#04111acd,transparent 100%),linear-gradient(0deg,#071724 0%,#071724b3 40%,transparent 85%)}.hero-content{padding:44px 0 35px}.corridor-hero .eyebrow{font-size:9px;letter-spacing:3px}.corridor-hero h1{font-size:clamp(90px,22vw,145px);letter-spacing:.04em;margin:22px 0 18px}.corridor-hero h2{font-size:24px;letter-spacing:2px;max-width:100%;line-height:1.7}.hero-intro{font-size:15px;letter-spacing:1px;line-height:1.9;padding-left:16px;max-width:100%;margin-top:23px}.hero-capabilities{width:100%;gap:10px;margin-top:30px}.hero-capabilities a{font-size:13px;padding-left:10px;letter-spacing:.5px}.hero-capabilities small{font-size:11px;letter-spacing:0}.hero-scroll{margin-top:25px;font-size:11px}.hero-vertical{top:25px;right:5%;font-size:9px;letter-spacing:4px;padding-left:9px}.section{padding-block:45px}.chapter>span{font-size:43px}.chapter h2{font-size:30px;letter-spacing:3px}.title-rule{width:30px;margin:0 0 10px 12px}.section-heading>p{font-size:14px;letter-spacing:0}.gallery-selection{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:20px 15px}.gallery-selection .selected-piece:nth-child(1){grid-column:1;grid-row:1}.gallery-selection .selected-piece:nth-child(2){grid-column:2;grid-row:1}.gallery-selection .selected-piece:nth-child(3){grid-column:1/-1;grid-row:2;display:block}.gallery-selection .selected-image{height:auto;aspect-ratio:1.05}.gallery-selection .selected-piece:nth-child(3) .selected-image{height:auto;min-height:0;aspect-ratio:1.6}.gallery-selection .selected-piece>span{font-size:8px;letter-spacing:1px}.gallery-selection .selected-piece h3{font-size:20px}.gallery-selection .selected-piece>p{font-size:12px}.film-hero{height:290px}.film-title{font-size:24px;padding:8px 12px}.film-copy .chapter>span{font-size:43px}.ai-section .chapter h2{font-size:27px;letter-spacing:1px}.ai-section .chapter>span{font-size:38px}.ai-section .chapter{gap:12px}.document-intro{grid-template-columns:1fr;gap:10px}.portfolio-volume{padding:25px 22px 35px;max-width:430px;margin:auto;width:95%}.volume-cover{padding:25px 22px}.volume-cover strong{font-size:23px;letter-spacing:2px;margin:20px 0}.volume-images img{height:75px}.volume-cover>span{font-size:7px}.volume-cover>small{font-size:7px}.document-list{margin-top:30px}.document-list h3{font-size:22px}.contact-section{padding:40px 0 30px;min-height:0;background-position:65% center}.contact-invitation{min-width:0;width:100%;padding:25px 23px}.contact-invitation .chapter h2{font-size:35px;letter-spacing:5px}.contact-intro{font-size:15px;letter-spacing:0}.line-button{font-size:16px;padding:10px 20px}.contact-bottom{padding:18px 20px 10px;margin-top:20px}.about-section h2{font-size:29px}.contact-invitation .eyebrow{font-size:9px}.contact-invitation .chapter{gap:0}}
@media(max-width:370px){.hero-capabilities{grid-template-columns:1fr 1fr;row-gap:15px}.hero-capabilities a:nth-child(3){padding-left:0;border-left:0}.corridor-hero h2{font-size:22px}.ai-section .chapter h2{font-size:24px}}
/* Motion and interaction finish — subtle, readable, never blocks navigation. */
#hero-title .name-char{display:inline-block;opacity:1;transform:none;filter:none}.intro-active:not(.reduce-motion) #hero-title .name-char{animation:name-emerge 1750ms cubic-bezier(.22,.68,.2,1) both}.intro-active:not(.reduce-motion) #hero-title .name-char:nth-child(2){animation-delay:280ms}@keyframes name-emerge{from{opacity:0;transform:translateY(12px);filter:blur(7px)}45%{opacity:.65}to{opacity:1;transform:translateY(0);filter:blur(0)}}
body.motion-ready:not(.reduce-motion) .reveal{opacity:0;transform:translateY(16px);transition:opacity 650ms var(--ease),transform 650ms var(--ease);transition-delay:var(--reveal-delay,0ms)}body.motion-ready:not(.reduce-motion) .reveal.visible{opacity:1;transform:translateY(0)}.hero-content{animation:none}.project-action{display:flex!important;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;margin-top:15px!important;font:13px/1.7 var(--sans)!important;letter-spacing:1px!important;color:var(--gold)!important}.project-action i{font:24px/1 var(--sans);font-style:normal;transition:transform 250ms var(--ease)}.selected-piece{position:relative;outline:1px solid transparent;outline-offset:9px;border-radius:1px;transition:outline-color 250ms,background 250ms,box-shadow 250ms}.selected-piece h3 b{display:none}.selected-piece .selected-image:after{content:"閱讀 PDF ↗";position:absolute;right:12px;bottom:12px;background:#071724ed;color:#f2daaa;border:1px solid #dcc18a88;padding:7px 12px;font-size:12px;opacity:0;transform:translateY(5px);transition:opacity 250ms,transform 250ms;pointer-events:none}.selected-image{position:relative}.selected-piece:focus-visible{outline:2px solid var(--gold);outline-offset:9px}.selected-piece:focus-visible .selected-image:after{opacity:1;transform:none}.selected-piece:focus-visible .project-action i{transform:translate(3px,-3px)}.project-content .zoom:after{content:"閱讀 PDF ↗";position:absolute;right:12px;bottom:12px;background:#071724eb;border:1px solid var(--gold);color:var(--gold);padding:8px 13px;font-size:13px;opacity:0;transform:translateY(5px);transition:opacity 220ms,transform 220ms;pointer-events:none}.project-content .zoom .zoom-mark{display:none}.project-content .zoom:focus-visible:after{opacity:1;transform:none}.zoom{border:1px solid transparent;transition:border-color 240ms,box-shadow 240ms;overflow:hidden}.zoom>img{transition:transform 550ms var(--ease),filter 350ms}.zoom:focus-visible{border-color:var(--gold)}.zoom-mark{transition:color 250ms,background 250ms,border-color 250ms,transform 250ms}.ai-evidence .zoom{border:1px solid var(--line)}.ai-evidence .zoom:focus-visible .zoom-mark{background:var(--gold);color:var(--navy);transform:translateY(-2px)}.outline-button,.gold-button,.line-button{transition:background 220ms,color 220ms,border-color 220ms,box-shadow 220ms,transform 200ms}.outline-button:focus-visible{background:var(--gold);color:var(--navy)}.gold-button:focus-visible{background:#ffe5b3;color:#071724;box-shadow:0 0 0 4px #e4c58a22}.line-button:focus-visible{background:var(--gold);color:#071724}.outline-button:active,.gold-button:active,.line-button:active{transform:translateY(1px);filter:brightness(.93)}.text-link{position:relative;transition:color 220ms,border-color 220ms}.text-link:focus-visible{color:#fff0ce;border-color:#fff0ce}.hero-capabilities a{transition:color 200ms,background 220ms,border-color 220ms}.hero-capabilities a:focus-visible{background:#d5bc8317;color:#fff0c8}.hero-capabilities small{transition:color 200ms}nav a{position:relative;padding-bottom:6px}nav a:not(.nav-contact):after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease)}nav a[aria-current=location]{color:var(--gold)}nav a[aria-current=location]:after,nav a:focus-visible:after{transform:scaleX(1)}.project-file>summary{transition:background 220ms,color 220ms,padding-inline 220ms}.project-file>summary b{transition:transform 240ms}.project-file>summary:focus-visible{background:#bda16c12}.step-tabs button{transition:color 200ms,background 200ms;border-radius:2px}.strip-control{border:1px solid transparent;transition:border-color 200ms,background 200ms,color 200ms;border-radius:2px}.strip-control:focus-visible{border-color:var(--gold);background:#c5a36d14}.film-strip>a{overflow:hidden}.film-strip img{transition:transform 400ms var(--ease),filter 250ms}.film-strip>a:focus-visible img{filter:brightness(1.12)}.film-hero:focus-visible .play{background:var(--gold);color:#071724;border-color:var(--gold);transform:translate(-50%,-50%) scale(1.08)}.play{transition:background 220ms,color 220ms,transform 220ms}.film-caption{transition:color 220ms}.application-links>a{padding:10px 6px;outline:1px solid transparent;outline-offset:4px;transition:background 250ms,outline-color 250ms}.application-links>a:focus-visible{background:#cdb17b12;outline:1px solid var(--gold)}.portfolio-volume{display:block;cursor:pointer}.portfolio-volume .volume-cover{transition:transform 600ms var(--ease),box-shadow 400ms}.portfolio-volume:focus-visible .volume-cover{box-shadow:-10px 8px #b8aa91,-15px 10px #183246,0 28px 40px #000b,0 0 0 2px #e4c58a}.contact-bottom a:not(.line-button){transition:color 200ms}.contact-bottom button,#motion-toggle{transition:background 220ms,color 220ms,border-color 220ms}.contact-bottom button:focus-visible,#motion-toggle:focus-visible{background:var(--gold);color:#071724}.qr-details>summary{transition:color 200ms}.project-action,.film-caption,.zoom-mark{-webkit-user-select:none;user-select:none}
@media(hover:hover) and (pointer:fine){.selected-piece:hover{outline-color:#dcc18a99;background:#e5c78d08;box-shadow:0 8px 24px #0002}.selected-piece:hover .selected-image:after{opacity:1;transform:none}.selected-piece:hover .project-action i{transform:translate(3px,-3px)}.selected-piece:hover .project-action{color:#ffdfa3!important}.selected-piece:hover img{transform:scale(1.025)}.project-content .zoom:hover:after{opacity:1;transform:none}.zoom:hover{border-color:var(--gold);box-shadow:0 5px 25px #0003}.zoom:hover>img{transform:scale(1.018)}.ai-evidence .zoom:hover .zoom-mark{background:var(--gold);color:var(--navy);transform:translateY(-2px)}.outline-button:hover{background:var(--gold);color:var(--navy);box-shadow:0 5px 20px #0003;transform:translateY(-2px)}.gold-button:hover{background:#ffe3ab;box-shadow:0 5px 20px #0004;transform:translateY(-2px)}.line-button:hover{background:#e4c58a;color:#071724;box-shadow:0 7px 26px #0005;transform:translateY(-2px)}.line-button:hover>span{background:#071724;color:var(--gold)}.text-link:hover{color:#ffe5b6;border-color:#ffe5b6}.hero-capabilities a:hover{color:#ffe5b6;background:#d5bc8317;border-color:var(--gold)}.hero-capabilities a:hover small{color:#ffe5b6}nav a:hover:after{transform:scaleX(1)}.project-file>summary:hover{background:#bda16c12;padding-inline:10px}.project-file>summary:hover h3{color:#ffe5b6}.step-tabs button:hover{background:#c5a36d16;color:var(--gold)}.strip-control:hover{border-color:var(--gold);background:#c5a36d14;color:#ffe5b6}.film-strip>a:hover img{filter:brightness(1.12);transform:scale(1.025)}.film-hero:hover .play{background:var(--gold);color:#071724;border-color:var(--gold);transform:translate(-50%,-50%) scale(1.08)}.film-hero:hover .film-caption{color:#ffe5b6}.application-links>a:hover{background:#cdb17b12;outline-color:#dac18c77}.portfolio-volume:hover .volume-cover{transform:rotateY(-8deg) rotateX(8deg) rotateZ(5deg) translateY(-5px);box-shadow:-10px 8px #b8aa91,-15px 10px #183246,0 32px 40px #000b}.contact-bottom a:hover{color:#ffe5b6}.contact-bottom button:hover,#motion-toggle:hover{background:var(--gold);color:#071724;border-color:var(--gold)}.qr-details>summary:hover{color:#ffe5b6}}
@media(hover:none){.project-action{font-size:13px!important}.project-content .zoom:after{opacity:1;transform:none;font-size:11px;padding:5px 9px}.selected-piece .selected-image:after{display:none}.project-file>summary{min-height:56px}.step-tabs button{min-height:44px}.strip-control{border-color:var(--line)}.contact-bottom button,#motion-toggle{min-height:36px}}
.reduce-motion .name-char{animation:none!important;filter:none!important;opacity:1!important;transform:none!important}.reduce-motion .reveal{opacity:1!important;transform:none!important}.reduce-motion .selected-piece:hover img,.reduce-motion .zoom:hover>img,.reduce-motion .film-hero:hover img,.reduce-motion .film-strip>a:hover img{transform:none!important}.reduce-motion .portfolio-volume:hover .volume-cover{transform:rotateY(-12deg) rotateX(12deg) rotateZ(8deg)}
@media(prefers-reduced-motion:reduce){#hero-title .name-char{animation:none!important;filter:none!important;opacity:1!important;transform:none!important}body.motion-ready .reveal{opacity:1!important;transform:none!important}.selected-piece:hover img,.zoom:hover>img,.film-hero:hover img,.film-strip>a:hover img{transform:none!important}}
@media(max-width:760px){nav a{min-height:40px;display:inline-flex;align-items:center}.text-link{min-height:44px;align-items:center;display:inline-flex}.application-links a{min-height:130px}#motion-toggle,.contact-bottom button{min-height:40px}.film-strip>a{padding-bottom:4px}.qr-details>summary{min-height:44px;display:flex;align-items:center}}

/* Hero editorial sequence: all supporting copy completes by 1.63s; name by 2.03s. */
.hero-intro-line{display:block}
.intro-active:not(.reduce-motion) .hero-content>.eyebrow{animation:hero-copy-emerge 650ms var(--ease) 80ms both}
.intro-active:not(.reduce-motion) .hero-vertical{animation:hero-side-emerge 1050ms var(--ease) 220ms both}
.intro-active:not(.reduce-motion) .hero-content>h2{animation:hero-copy-emerge 850ms var(--ease) 380ms both}
.intro-active:not(.reduce-motion) .hero-intro-line{animation:hero-copy-emerge 800ms var(--ease) both}
.intro-active:not(.reduce-motion) .hero-intro-line:nth-child(1){animation-delay:550ms}
.intro-active:not(.reduce-motion) .hero-intro-line:nth-child(2){animation-delay:690ms}
.intro-active:not(.reduce-motion) .hero-intro-line:nth-child(3){animation-delay:830ms}
@keyframes hero-copy-emerge{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes hero-side-emerge{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.reduce-motion .hero-content>.eyebrow,.reduce-motion .hero-content>h2,.reduce-motion .hero-intro-line,.reduce-motion .hero-vertical{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
@media(prefers-reduced-motion:reduce){.hero-content>.eyebrow,.hero-content>h2,.hero-intro-line,.hero-vertical{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}}

/* User-selected courtyard replaces the hero right side; keep original left wall. */
.hero-scene:after{content:"";position:absolute;inset:0;background:url(assets/hero-courtyard-user.webp) center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 37%,#000 58%);mask-image:linear-gradient(90deg,transparent 37%,#000 58%)}
@media(max-width:760px){.hero-scene:after{background-position:68% top;background-size:auto 100%;-webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 55%);mask-image:linear-gradient(90deg,transparent 10%,#000 55%)}}

/* Contact scene updated to the user-selected courtyard; replace QR disclosure with phone. */
.contact-section{background:linear-gradient(90deg,#061722dd,#06172233),url(assets/hero-courtyard-user.webp) center 60%/cover no-repeat}
.phone-contact>span{display:block;font-size:12px;color:var(--muted);margin-bottom:10px}
.phone-contact>a{display:inline-flex;align-items:center;gap:22px;min-height:44px;font-size:22px;letter-spacing:2px;color:var(--gold);border-bottom:1px solid var(--line);padding:3px 0;transition:color 220ms,border-color 220ms}
.phone-contact>a>span{font-size:20px;transition:transform 220ms var(--ease)}
.phone-contact>a:focus-visible{color:#fff0ce;border-color:var(--gold)}
@media(hover:hover){.phone-contact>a:hover{color:#fff0ce;border-color:var(--gold)}.phone-contact>a:hover>span{transform:translate(3px,-3px)}}
@media(max-width:760px){.contact-section{background-position:65% center}.phone-contact>a{font-size:21px}}
/* Scroll-triggered cover lift: one gentle visit to the hover pose, then settle. */
.portfolio-volume.book-arrival .volume-cover{animation:book-lift-once 1200ms cubic-bezier(.22,.68,.2,1) both}
@keyframes book-lift-once{0%,100%{transform:rotateY(-12deg) rotateX(12deg) rotateZ(8deg);box-shadow:-10px 8px 0 #b8aa91,-15px 10px 0 #183246,0 30px 35px #0009}45%,60%{transform:rotateY(-8deg) rotateX(8deg) rotateZ(5deg) translateY(-5px);box-shadow:-10px 8px 0 #b8aa91,-15px 10px 0 #183246,0 32px 40px #000b}}
.reduce-motion .portfolio-volume.book-arrival .volume-cover{animation:none!important}@media(prefers-reduced-motion:reduce){.portfolio-volume.book-arrival .volume-cover{animation:none!important}}
/* Secondary channels only: preserve the LINE invitation and its styles. */
#contact .secondary-contacts{gap:22px;padding:26px 0 0;background:transparent;border-top:1px solid #c6b17f55;align-items:start}
#contact .contact-channel{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:18px;padding:22px 24px;border:1px solid #bfa77545;background:linear-gradient(120deg,#0c2130cf,#0c213085);min-height:132px;box-shadow:0 8px 25px #00000014;transition:border-color 240ms,background 240ms,box-shadow 240ms}
#contact .contact-channel:before{content:"";position:absolute;width:26px;height:1px;background:#e4c58a;top:-1px;left:24px;opacity:.8}
#contact .channel-icon{display:grid;place-items:center;width:38px;height:44px;color:#d9bf8c;margin:0;padding:0;flex-basis:auto}
#contact .channel-icon svg{width:26px;height:26px;transition:transform 240ms var(--ease)}
#contact .channel-content{min-width:0}
#contact .channel-label{display:block;color:#b9b7a9;font-size:10px;line-height:1.8;letter-spacing:2px;margin-bottom:8px}
#contact .channel-link{display:flex;align-items:center;gap:14px;justify-content:space-between;min-height:32px;padding:0;border:0;font-weight:400;letter-spacing:.3px;color:#e5d5b4;line-height:1.6;transition:color 220ms}
#contact .phone-link{font:23px/1.6 Georgia,serif;letter-spacing:2px}
#contact .email-link{font-size:17px;letter-spacing:0;overflow-wrap:anywhere}
#contact .channel-arrow{font:20px/1 var(--sans);color:#c7ad78;flex-shrink:0;transition:transform 240ms var(--ease),color 240ms}
#contact .channel-hint{display:block;font-size:11px;color:#9babb2;line-height:1.8;margin-top:5px;letter-spacing:.5px}
#contact .email-channel{grid-template-columns:38px minmax(0,1fr) 40px;gap:16px}
#contact .channel-copy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:40px;min-height:52px;padding:5px 2px;margin:0;border:0;border-left:1px solid #c3aa753b;background:transparent;color:#d2bb8e;font-size:10px;line-height:1.4;transition:color 200ms,background 200ms}
#contact .channel-copy svg{width:17px;height:17px}
#contact .contact-feedback{grid-column:1/-1;min-height:0;height:0;overflow:hidden;padding:0;margin:0;color:#d8c08d;font-size:12px;line-height:1.7}
#contact .contact-feedback:not(:empty){height:auto;min-height:22px}
#contact .contact-channel:focus-within{border-color:#d7bf86aa;background:#102b3ae0}
#contact .channel-link:focus-visible{color:#fff0c7;outline-offset:5px}
@media(hover:hover){#contact .contact-channel:hover{border-color:#d7bf8699;box-shadow:0 9px 26px #0003}#contact .contact-channel:hover .channel-icon svg{transform:translateY(-2px)}#contact .channel-link:hover{color:#fff0c7}#contact .channel-link:hover .channel-arrow{transform:translate(3px,-3px);color:#ffe4ae}#contact .channel-copy:hover{background:#e4c58a12;color:#ffe4ae}}
@media(max-width:1100px){#contact .email-link{font-size:15px}#contact .contact-channel{padding:20px 18px;gap:13px}#contact .email-channel{gap:12px;grid-template-columns:30px minmax(0,1fr) 35px}#contact .channel-icon{width:30px}}
@media(max-width:760px){#contact .secondary-contacts{grid-template-columns:1fr;gap:14px;padding:22px 0 0}#contact .contact-channel{min-height:118px;padding:18px;grid-template-columns:32px minmax(0,1fr);gap:15px}#contact .email-channel{grid-template-columns:32px minmax(0,1fr) 36px;gap:12px}#contact .channel-label{font-size:9px;letter-spacing:1.5px;margin-bottom:5px}#contact .phone-link{font-size:22px;min-height:40px}#contact .email-link{font-size:15px;min-height:40px}#contact .channel-icon svg{width:24px;height:24px}#contact .channel-copy{width:36px;min-height:52px}#contact .channel-hint{font-size:10px;margin-top:2px}}
@media(max-width:760px){#contact .email-channel{grid-template-columns:32px minmax(0,1fr);gap:15px}#contact .email-channel .channel-label{padding-right:52px}#contact .email-link{font-size:14px;gap:8px}#contact .email-channel .channel-copy{position:absolute;right:12px;top:10px;width:52px;min-height:28px;flex-direction:row;gap:4px;border-left:0}#contact .email-channel .channel-copy svg{width:13px;height:13px}}

/* One continuous journey: each step retains the completed path before it. */
.connection-line [data-line-step] path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 650ms cubic-bezier(.3,.6,.3,1);transition-delay:var(--draw-delay,0ms)}
.connection-line [data-line-step] circle{opacity:0;transition:opacity 200ms ease;transition-delay:calc(var(--draw-delay,0ms) + 460ms)}
.connection-line [data-line-step="0"] circle{transition-delay:var(--draw-delay,0ms)}
.connection-line .is-drawn path{stroke-dashoffset:0}
.connection-line .is-drawn circle{opacity:1}
.reduce-motion .connection-line path,.reduce-motion .connection-line circle{transition:none!important}
@media(prefers-reduced-motion:reduce){.connection-line path,.connection-line circle{transition:none!important}}

/* Six current portfolios / FB operating evidence. Keep the established site language. */
.hero-capabilities{grid-template-columns:repeat(5,minmax(0,1fr));width:min(790px,75%)}
.advertising-section{border-block:1px solid var(--line);background:linear-gradient(125deg,#0a202e,#102b3b88 65%,#081823)}
.advertising-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:65px;align-items:start}.advertising-copy h3{font:clamp(28px,3vw,40px)/1.7 var(--serif);letter-spacing:2px;color:var(--gold);margin:17px 0 24px}.advertising-copy>p:not(.kicker){font-size:16px;color:var(--muted)}
.ad-responsibilities{margin:25px 0 28px}.ad-responsibilities>div{display:grid;grid-template-columns:106px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.ad-responsibilities dt{font-size:14px;color:var(--gold)}.ad-responsibilities dd{margin:0;color:var(--muted);font-size:14px}
.advertising-art{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:12px}.ad-original{display:block;border:1px solid #d2b67b55;background:#051521;transition:border-color .25s,transform .35s}.ad-original-second{margin-top:60px}.ad-original img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}.ad-original>span{display:block;font-size:11px;color:var(--gold);padding:10px 12px;border-top:1px solid var(--line)}
.advertising-results{margin-top:52px;padding-top:25px;border-top:1px solid var(--line)}.results-heading{display:flex;gap:20px;justify-content:space-between;align-items:center}.results-heading>p:last-child{font-size:12px;color:var(--muted)}.ad-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding:30px 0}.ad-metrics>div{border-left:1px solid var(--line);padding-left:25px}.ad-metrics strong{font:clamp(31px,4.4vw,58px)/1.3 Georgia,serif;letter-spacing:1px;color:var(--gold);display:block}.ad-metrics span{display:block;font-size:14px;color:var(--soft);margin-top:8px}.results-context{display:flex;align-items:center;justify-content:space-between;gap:30px}.results-context p{font-size:12px;line-height:1.9;color:var(--muted)}
.communication-evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:42px 0 25px}.communication-evidence>a{border-top:1px solid var(--line);padding-top:20px;transition:background .25s}.communication-evidence span{font-size:10px;color:var(--gold);letter-spacing:1px}.communication-evidence h4{font:21px/1.7 var(--serif);margin-top:10px}.communication-evidence p{font-size:14px!important;margin-top:13px;color:var(--muted)}.communication-evidence b{font-size:12px;color:var(--gold);font-weight:400;display:block;margin-top:16px}
.film-portfolio-link{display:inline-flex;margin-top:20px;font-size:13px}.ai-case-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:45px}.ai-case-card{display:flex;flex-direction:column;border:1px solid var(--line);background:#102c3c55;transition:border-color .25s,background .25s}.ai-case-card>img{width:100%;height:170px;object-fit:contain;background:#112a39}.ai-case-card>div:last-child{padding:23px 25px}.ai-case-card span:not(.rule-journey span){font-size:10px;letter-spacing:2px;color:var(--gold)}.ai-case-card h3{font:25px/1.7 var(--serif);margin-top:10px}.ai-case-card p{font-size:14px;color:var(--muted);margin-top:12px}.ai-case-card b{display:block;font-weight:400;font-size:12px;color:var(--gold);margin-top:20px}.rule-journey{min-height:170px;display:flex;align-items:center;justify-content:center;gap:20px;padding:20px;background:linear-gradient(110deg,#19394a55,#0e2330)}.rule-journey span{font:22px var(--serif);border:1px solid var(--line);padding:14px 19px;color:var(--gold)}.rule-journey i{font-style:normal;font-size:21px;color:var(--gold)}
.portfolio-library{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.portfolio-library .document-card{padding:0;border:1px solid var(--line);background:#0a1b26b8;overflow:hidden;transition:border-color .25s,box-shadow .25s}.document-preview{position:relative;display:block;overflow:hidden;background:#0b2530}.document-preview img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;transition:transform .45s}.document-preview>span{position:absolute;right:8px;bottom:8px;padding:3px 8px;background:#071724ed;border:1px solid var(--line);color:var(--gold);font:9px/1.8 Georgia,serif;letter-spacing:1px}.document-card-copy{padding:23px 24px 24px}.document-card-copy>span{font:9px/1.6 Georgia,serif;letter-spacing:1.5px;color:var(--gold)}.portfolio-library h3{font-size:23px;line-height:1.7;margin-top:10px}.portfolio-library p{font-size:13px;line-height:1.9;min-height:75px}.portfolio-library .document-actions{margin-top:17px}.portfolio-library .text-link{font-size:13px}.document-card-1{--document-accent:#c1c5a1}.document-card-2{--document-accent:#568d77}.document-card-3{--document-accent:#b39368}.document-card-4{--document-accent:#9bac93}.document-card-5{--document-accent:#7e9cb4}.document-card-6{--document-accent:#a4c7dd}.document-card:before{content:"";display:block;height:2px;background:var(--document-accent)}
.ad-original:focus-visible,.ai-case-card:focus-visible,.communication-evidence>a:focus-visible{border-color:var(--gold)}
@media(hover:hover){.ad-original:hover{border-color:var(--gold);transform:translateY(-4px)}.ai-case-card:hover{border-color:var(--gold);background:#163b4a66}.communication-evidence>a:hover{background:#bd9b6410}.portfolio-library .document-card:hover{border-color:#d7bc8199;box-shadow:0 8px 25px #0004}.document-preview:hover img{transform:scale(1.025)}}
@media(max-width:1100px){.masthead{gap:20px}nav{gap:18px;font-size:13px}.advertising-layout{gap:35px}.advertising-copy h3{font-size:30px}.portfolio-library{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-capabilities{width:85%}}
@media(max-width:760px){.hero-capabilities{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 10px}.hero-capabilities a:nth-child(4){padding-left:0;border-left:0}.hero-capabilities a:nth-child(3){border-left:1px solid var(--line);padding-left:10px}.advertising-layout{grid-template-columns:1fr;gap:25px}.advertising-copy h3{font-size:29px}.advertising-copy>p:not(.kicker){font-size:14px}.advertising-art{gap:12px;padding-top:0}.ad-original-second{margin-top:28px}.ad-original>span{font-size:10px;padding:7px 9px}.ad-responsibilities>div{grid-template-columns:95px 1fr}.ad-responsibilities dt,.ad-responsibilities dd{font-size:13px}.advertising-results{margin-top:30px}.results-heading{align-items:start;flex-direction:column;gap:7px}.ad-metrics{gap:10px;padding:24px 0}.ad-metrics>div{padding-left:10px}.ad-metrics strong{font-size:clamp(24px,6.5vw,37px);letter-spacing:0}.ad-metrics span{font-size:11px}.results-context{display:block}.results-context p{font-size:11px}.results-context .text-link{font-size:12px;margin-top:13px}.communication-evidence{grid-template-columns:1fr;gap:20px;margin-top:30px}.communication-evidence h4{font-size:20px}.communication-evidence p{font-size:13px!important}.ai-case-grid{grid-template-columns:1fr;gap:20px;margin-top:30px}.ai-case-card>img{height:auto;min-height:120px}.ai-case-card>div:last-child{padding:21px}.ai-case-card h3{font-size:23px}.rule-journey{min-height:130px;gap:13px}.rule-journey span{font-size:19px;padding:11px 16px}.portfolio-library{grid-template-columns:1fr;gap:24px}.document-card-copy{padding:21px}.portfolio-library p{min-height:0}.portfolio-library h3{font-size:23px}.portfolio-library .document-actions{margin-top:14px}nav{gap:16px}.film-copy .film-portfolio-link{min-height:44px;margin-top:12px}.masthead nav{max-width:100%}}
.reduce-motion .ad-original:hover,.reduce-motion .document-preview:hover img{transform:none}@media(prefers-reduced-motion:reduce){.ad-original:hover,.document-preview:hover img{transform:none}}

.advertising-art{align-items:start}@media(max-width:760px){.advertising-section .chapter h2{font-size:26px;letter-spacing:1px}}