@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--ink:#20211e;--paper:#eeede8;--line:#c7c7bf;--accent:#b94b36}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans','Noto Sans TC','Microsoft JhengHei',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #e37458;outline-offset:5px}.skip{position:fixed;z-index:100;top:-100px;left:10px;background:white;padding:12px}.skip:focus{top:10px}.header{position:absolute;top:0;left:0;width:100%;z-index:4;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:33px 5.3%}.wordmark{font-size:18px;font-weight:700;letter-spacing:.09em;line-height:1}.wordmark i{font-style:normal;color:#db6b50}.wordmark span{display:block;font-size:7px;letter-spacing:.23em;margin-top:7px;font-weight:500}.header nav{display:flex;gap:38px;font-size:12px;letter-spacing:.06em}.header nav a{padding:8px 0;border-bottom:1px solid transparent}.header nav a:hover{border-color:currentColor}.header nav span{margin-left:7px}.hero{position:relative;height:min(920px,100svh);min-height:680px;color:#fff;background:#1b1b1b;overflow:hidden}.hero-media,.hero-shade{position:absolute;inset:0}.hero-img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.045);transition:opacity 1.2s ease,transform 8s ease}.hero-img.is-active{opacity:1;transform:scale(1)}.hero-shade{background:linear-gradient(90deg,rgba(8,9,8,.75),rgba(8,9,8,.17) 70%),linear-gradient(0deg,rgba(8,9,8,.65),transparent 32%,rgba(8,9,8,.35))}.hero-inner{position:absolute;left:9.5%;top:50%;transform:translateY(-43%)}.micro{font-size:10px;letter-spacing:.19em;font-weight:600}.hero h1{font-size:clamp(54px,7.4vw,112px);font-weight:500;letter-spacing:.04em;line-height:1.22;margin:30px 0}.hero h1 span{font-weight:300}.hero-sub{font-size:13px;line-height:1.9;color:#ecece3}.explore{display:inline-flex;align-items:center;gap:46px;margin-top:30px;border-bottom:1px solid #ddd;padding:0 0 14px;font-size:12px}.explore b{font-size:19px;font-weight:400}.hero-bottom{position:absolute;bottom:32px;left:5.3%;right:5.3%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;font-size:10px;letter-spacing:.12em}.hero-controls{display:flex;align-items:center;justify-content:center;gap:16px}.hero-controls button{border:0;background:none;color:white;font-size:19px;padding:8px}.hero-controls #pause{font-size:12px}.scroll-note{text-align:right}.wrap{width:min(89%,1400px);margin:auto}.section-label{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;font-size:10px;letter-spacing:.14em;color:#777b73}.manifesto{padding:140px 0 150px}.manifesto-copy{width:70%;margin:95px 0 0 auto}.muted{color:#92968c}.manifesto h2,.about h2,.contact h2{font-weight:400;font-size:clamp(38px,4.7vw,70px);line-height:1.45;letter-spacing:.04em;margin:24px 0 50px}.manifesto h2 span{color:#9b9d94}.manifesto-bottom{display:flex;justify-content:space-between;align-items:end}.manifesto-bottom p{line-height:2.1;color:#74776f;font-size:14px}.hand{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:23px;color:var(--accent);transform:rotate(-7deg)}.works{padding-bottom:150px}.work-heading{display:flex;justify-content:space-between;align-items:end;margin:95px 0 70px}.work-heading h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(76px,10vw,145px);line-height:.82;font-weight:500;letter-spacing:-.06em;margin:25px 0 0}.work-heading h2 em{font-weight:500}.work-heading>p{font-size:13px;line-height:2;color:#777b73}.filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:35px;padding:18px 0;margin-bottom:55px;overflow-x:auto}.filters button{white-space:nowrap;background:none;border:0;color:#999c93;padding:3px 0;font-size:13px}.filters button.active{color:var(--ink)}.filters sup{font-size:9px;margin-left:4px;color:#a4a69e}.gallery{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:100px;align-items:start}.work{grid-column:span 5}.work:nth-child(4n+1){grid-column:span 7}.work:nth-child(4n+2){grid-column:9 / span 4;margin-top:120px}.work:nth-child(4n+3){grid-column:2 / span 4}.work:nth-child(4n+4){grid-column:7 / span 6;margin-top:120px}.work[hidden]{display:none}.work-button{display:block;padding:0;border:0;background:none;text-align:left;width:100%;color:inherit}.work-image{display:block;position:relative;overflow:hidden;background:#d7d7d1;aspect-ratio:4/3}.work:nth-child(4n+2) .work-image,.work:nth-child(4n+3) .work-image{aspect-ratio:4/5}.work-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}.work-button:hover img{transform:scale(1.045);filter:brightness(.8)}.zoom{position:absolute;right:16px;bottom:16px;width:43px;height:43px;border:1px solid #fff;color:#fff;display:grid;place-items:center;border-radius:50%;font-size:19px;opacity:0;transform:translateY(8px);transition:.3s}.work-button:hover .zoom,.work-button:focus-visible .zoom{opacity:1;transform:none}.work-info{display:flex;justify-content:space-between;align-items:end;padding-top:17px}.work-info small{display:block;color:#91948a;font-size:9px;letter-spacing:.12em}.work-info strong{display:block;font-size:17px;font-weight:500;margin-top:8px}.work-number{font:italic 17px Georgia,serif;color:#a5a79d}.more{margin-top:130px;border-top:1px solid var(--ink);padding-top:20px;display:flex;justify-content:space-between;align-items:center}.more>span{font-size:9px;letter-spacing:.17em;color:#999}.more a{font-size:14px}.more b{font-size:25px;font-weight:400;margin-left:30px}.statement{min-height:620px;position:relative;display:grid;place-items:center;color:white;text-align:center;background:#222;overflow:hidden}.statement-image{position:absolute;inset:0;background:linear-gradient(#10110fa8,#10110fa8),url('https://jason-photographic-studies-gray.pages.dev/assets/home-carousel/hc02-desktop.webp') center/cover}.statement-copy{position:relative}.statement-copy>p:nth-child(2){font:500 clamp(45px,6vw,90px)/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.035em;margin:35px 0}.statement-copy small{font-size:12px;letter-spacing:.1em}.about{padding:145px 0}.about-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:12%;margin-top:100px}.about h2 em,.contact h2 em{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:1.2em}.name{font-size:12px;letter-spacing:.08em}.name span{color:var(--accent)}.about-body{padding-top:25px;max-width:470px}.about-body p{color:#777b73;line-height:2.2;font-size:14px}.about-body .about-lead{font-size:22px;color:var(--ink);margin:0 0 35px}.about-body a{display:inline-block;margin-top:25px;border-bottom:1px solid;padding-bottom:10px;font-size:10px;letter-spacing:.12em}.contact{background:#191b19;color:#efefe9;padding:70px 0 0}.contact .section-label{border-color:#5c5e59;color:#aaa}.contact-layout{padding:115px 0 140px;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:end}.contact h2{margin-bottom:0}.contact-layout>div:nth-child(2) p{font-size:13px;color:#a3a89e;line-height:2}.contact-layout a{display:flex;justify-content:space-between;border-bottom:1px solid #a5a99e;padding:25px 0;font-size:clamp(18px,2vw,26px)}.footer{border-top:1px solid #5c5e59;display:flex;justify-content:space-between;align-items:end;padding:40px 0;font-size:10px;letter-spacing:.08em;color:#aaa}.footer .wordmark{color:#eee}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}dialog{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:#141514;color:white}dialog::backdrop{background:#111}dialog[open]{display:flex;flex-direction:column}.viewer-top,.viewer-bottom{display:flex;justify-content:space-between;align-items:center;margin:0 4%;padding:25px 0;font-size:10px;letter-spacing:.15em}.viewer-top{border-bottom:1px solid #444}.viewer-top button,.viewer-arrow{border:0;color:white;background:none}.viewer-top button{font-size:11px;letter-spacing:.1em}.viewer-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:30px;padding:24px 4%}.viewer-content img{max-width:calc(100% - 100px);max-height:100%;object-fit:contain}.viewer-arrow{font-size:26px;padding:15px}.viewer-bottom{border-top:1px solid #444}.viewer-bottom h2{font-size:20px;font-weight:400;letter-spacing:0;margin:8px 0 0}.viewer-bottom span{color:#aaa}@media(max-width:700px){.header{padding:25px 6%;align-items:start}.wordmark{font-size:14px}.wordmark span{font-size:6px}.header nav{gap:17px;font-size:11px}.hero{min-height:640px;height:90svh}.hero-inner{left:7%;top:48%}.hero h1{font-size:clamp(44px,10vw,72px)}.hero-bottom{left:6%;right:6%;grid-template-columns:1fr auto}.scroll-note{display:none}.hero-controls{gap:8px}.manifesto{padding:90px 0}.manifesto-copy{width:100%;margin-top:65px}.manifesto h2,.about h2,.contact h2{font-size:clamp(34px,8vw,52px)}.manifesto-bottom{align-items:start;gap:20px}.hand{font-size:16px;white-space:nowrap}.works{padding-bottom:90px}.work-heading{margin:65px 0 45px;display:block}.work-heading h2{font-size:80px}.work-heading>p{margin-top:35px}.filters{gap:25px;margin-bottom:30px}.gallery{grid-template-columns:repeat(2,1fr);gap:45px 15px}.work,.work:nth-child(n){grid-column:auto;margin:0}.work:nth-child(4n+1),.work:nth-child(4n+4){grid-column:span 2}.work:nth-child(n) .work-image{aspect-ratio:4/3}.work:nth-child(4n+2) .work-image,.work:nth-child(4n+3) .work-image{aspect-ratio:4/5}.work-info strong{font-size:14px}.work-info small{font-size:8px}.more{margin-top:80px;gap:20px}.more>span{display:none}.statement{min-height:440px}.about{padding:90px 0}.about-layout{grid-template-columns:1fr;gap:30px;margin-top:65px}.about h2{margin-bottom:25px}.contact-layout{grid-template-columns:1fr;gap:50px;padding:80px 0}.footer{gap:25px;flex-wrap:wrap}.viewer-content{gap:0;padding:10px 0}.viewer-content img{max-width:calc(100% - 80px)}.viewer-arrow{padding:10px;font-size:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-img,.reveal,.work-image img,.zoom{transition:none}.reveal{opacity:1;transform:none}}
/* Art direction: bold studio identity and image-led composition. */
:root{--accent:#ec5437;--paper:#eae9e3}
.header{padding-top:26px;mix-blend-mode:normal}.wordmark{font-size:15px;letter-spacing:.04em}.wordmark span{font-size:7px;letter-spacing:.16em}.header nav a:last-child{border:1px solid #ffffff85;padding:10px 16px;margin-top:-10px;border-radius:24px}.hero{height:100svh;min-height:720px;background:#141514}.hero-media{inset:12% 5% 12% 32%;overflow:hidden}.hero-img{object-position:center}.hero-shade{background:linear-gradient(90deg,#141514 0%,#141514dc 28%,transparent 75%),linear-gradient(0deg,#141514 0%,transparent 28%,#14151455 100%)}.hero-type{position:absolute;left:4%;top:13%;font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(110px,18.5vw,290px);line-height:.79;letter-spacing:-.045em;color:#f1f0ea;opacity:.91;pointer-events:none}.hero-type span{display:block;margin-left:12%;color:transparent;-webkit-text-stroke:1px #f5f3e9;opacity:.78}.hero-inner{left:9%;top:auto;bottom:13%;transform:none}.hero-inner .micro{color:#ea7058}.hero h1{font-size:clamp(38px,5.2vw,72px);line-height:1.25;margin:18px 0}.hero-sub{border-left:2px solid var(--accent);padding-left:14px}.explore{margin-top:17px}.hero-side{position:absolute;right:2%;top:35%;writing-mode:vertical-rl;font-size:9px;letter-spacing:.18em;color:#eee}.hero-bottom{border-top:1px solid #ffffff55;padding-top:16px;bottom:23px}.work-heading h2{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;line-height:.82;letter-spacing:-.035em;font-size:clamp(80px,11.5vw,160px)}.work-heading h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--ink)}.work-heading .micro{color:var(--accent)}.filters button.active{color:var(--accent)}.section-label span:first-child{color:var(--accent)}.work:nth-child(4n+2){margin-top:80px}.work-image{background:#b9b9b2}.work-button:hover img{transform:scale(1.065)}.work-info strong{font-weight:600}.zoom{background:var(--accent);border-color:var(--accent)}.statement-copy>p:nth-child(2){font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;letter-spacing:.015em}.statement-copy>p:nth-child(2) em{font-style:normal;color:transparent;-webkit-text-stroke:1px white}.contact{background:#e8563c;color:#1b1b19}.contact .section-label{border-color:#822e20;color:#281c17}.contact .section-label span:first-child{color:#281c17}.contact-layout>div:nth-child(2) p{color:#39221c}.contact-layout a,.footer{border-color:#7a3024}.footer,.footer .wordmark{color:#291b18}.contact-layout a span{transition:transform .3s}.contact-layout a:hover span{transform:translate(5px,-5px)}
@media(max-width:700px){.header{padding-top:22px}.header nav a:last-child{border:0;padding:8px 0;margin:0}.hero{height:88svh;min-height:650px}.hero-media{inset:16% 0 17% 16%}.hero-shade{background:linear-gradient(90deg,#141514dd,transparent 90%),linear-gradient(0deg,#141514,transparent 50%)}.hero-type{top:18%;left:4%;font-size:clamp(76px,19vw,140px)}.hero-inner{left:7%;bottom:18%}.hero h1{font-size:clamp(38px,9vw,58px)}.hero-side{display:none}.hero-bottom{bottom:16px}.work-heading h2{font-size:clamp(75px,18vw,110px)}.work:nth-child(4n+2){margin-top:0}}
.viewer-bottom a{font-size:11px;letter-spacing:.05em;border-bottom:1px solid #aaa;padding:8px 0}.viewer-bottom a[hidden]{display:none}
/* Interactive black camera-inspired photo machine */
.header{position:absolute;z-index:4;color:#f3f1ea}.machine-hero{min-height:100svh;background:#dddcd4;position:relative;display:grid;grid-template-columns:minmax(230px,.7fr) minmax(520px,1.3fr);align-items:center;gap:4%;padding:120px 7% 90px;overflow:hidden}.machine-hero:before{content:'IMAGE / MACHINE';position:absolute;left:-.03em;bottom:-.16em;font:900 clamp(100px,17vw,250px)/1 Impact,'Arial Narrow',sans-serif;letter-spacing:-.035em;color:#cfcec6;white-space:nowrap;pointer-events:none}.machine-intro,.machine-wrap,.machine-hint{position:relative;z-index:1}.machine-kicker{font-size:10px;letter-spacing:.18em;color:#847e75}.machine-intro h1{font-size:clamp(37px,4.5vw,68px);line-height:1.3;letter-spacing:.02em;font-weight:500;margin:30px 0}.machine-intro h1 em{font-style:normal;color:#8e332b}.machine-intro>p:not(.machine-kicker){font-size:13px;line-height:2.1;color:#67675f}.machine-intro>a{display:inline-flex;gap:35px;border-bottom:1px solid #34332f;padding:15px 0;font-size:12px;margin-top:25px}.machine-intro>a span{font-size:19px}.machine-wrap{padding:45px 15px 25px}.machine{position:relative;background:linear-gradient(135deg,#383a38 0%,#1e201f 20%,#111312 72%,#343633 100%);border:2px solid #0b0c0b;border-radius:24px 24px 32px 32px;box-shadow:inset 2px 2px 1px #73747080,inset -6px -6px 12px #0009,0 35px 50px #2d2d283e;max-width:760px;margin:auto;padding:18px 24px 24px;color:#ebe9df}.camera-prism{position:absolute;top:-31px;left:24%;width:31%;height:33px;background:linear-gradient(#333,#171817);clip-path:polygon(10% 100%,20% 0,80% 0,90% 100%);text-align:center;color:#aaa;font-size:8px;letter-spacing:.24em;padding-top:12px}.camera-prism:before{content:''}.machine-top{height:47px;display:flex;justify-content:space-between;align-items:start}.machine-top strong{font-size:15px;letter-spacing:.08em}.machine-top i{color:#e45c48;font-style:normal}.machine-top small{display:block;font-size:7px;letter-spacing:.22em;color:#a3a79f;margin-top:5px}.machine-light{font-size:8px;letter-spacing:.12em;color:#8e968c}.machine-light b{display:inline-block;width:7px;height:7px;background:#f35f44;border-radius:50%;box-shadow:0 0 10px #ff7258;margin-right:5px}.machine-face{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:16px}.display-frame{padding:13px;background:#0a0d0d;border:3px solid #4b4c48;border-radius:9px;box-shadow:inset 0 0 20px #000}.display-heading,.display-foot{display:flex;justify-content:space-between;color:#a8b2a9;font-size:7px;letter-spacing:.15em;padding:4px 3px 10px}.display-foot{padding:11px 3px 2px}.machine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.machine-item{min-width:0;padding:0;background:#262b28;border:1px solid #555e55;color:#eee;text-align:left;transition:transform .25s,border-color .25s,box-shadow .25s}.machine-item:hover,.machine-item:focus-visible,.machine-item.selected{border-color:#e9674c;box-shadow:0 0 16px #e65b3344;transform:translateY(-3px)}.machine-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:#242724}.machine-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.machine-item:hover img{transform:scale(1.08)}.machine-item-meta{display:flex;align-items:center;gap:5px;padding:6px;font-size:8px}.machine-item-meta b{color:#ff9279}.machine-item-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.machine-item-meta i{margin-left:auto;font-style:normal}.machine-control{background:linear-gradient(145deg,#333532,#1d1f1d);border:1px solid #565853;border-radius:8px;padding:12px;display:flex;flex-direction:column;align-items:stretch}.machine-control p{margin:0 0 10px;font-size:9px;line-height:1.35;letter-spacing:.13em;color:#c0c4bb}.machine-control p strong{color:white;font-size:15px}.screen{min-height:49px;background:#101e1b;border:2px inset #535b51;padding:6px;color:#b9e9c8;display:flex;flex-direction:column;gap:4px}.screen small{font-size:7px;letter-spacing:.1em}.screen span{font-size:10px;line-height:1.3}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}.keypad button{border:1px solid #626660;background:linear-gradient(#50534f,#292c29);border-radius:4px;color:white;padding:8px 2px;font-size:10px;box-shadow:0 3px 0 #111}.keypad button:hover,.keypad button:focus-visible{background:#bd513d}.keypad button:active{transform:translateY(2px);box-shadow:0 1px 0 #111}.control-note{font-size:9px;line-height:1.5;color:#aeb4aa;margin-top:12px}.camera-lens{width:76px;height:76px;margin:auto auto 0;border-radius:50%;background:repeating-radial-gradient(circle,#121412 0 5px,#484b47 6px 9px,#151716 10px 13px);box-shadow:0 4px 9px #0009;display:grid;place-items:center}.camera-lens div{width:40px;height:40px;border:2px solid #454a45;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8bacad,#1b343a 25%,#101715 55%,#050605);display:grid;place-items:center}.camera-lens span{font-size:4px;color:#aeb7af}.machine-base{margin-top:16px;display:flex;align-items:center;justify-content:space-between;background:#0d0f0e;border:1px solid #4c4e4a;border-radius:6px;padding:12px 16px;box-shadow:inset 0 4px 9px #000}.machine-base span,.machine-base strong{display:block;font-size:8px;letter-spacing:.14em;color:#9fa69d}.machine-base strong{font-size:10px;color:#e9ebe3;margin-top:5px}.machine-base a{font-size:9px;letter-spacing:.1em;border-bottom:1px solid #a7aea4;padding-bottom:5px}.machine-shadow{width:80%;height:18px;margin:-5px auto 0;background:#262822;filter:blur(20px);opacity:.35}.machine-hint{position:absolute;bottom:27px;left:7%;right:7%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:#767970}.machine-hero~.manifesto{padding-top:140px}.header:has(+ main .machine-hero){color:#222}.header:has(+ main .machine-hero) nav a:last-child{border-color:#444}
@media(max-width:900px){.machine-hero{grid-template-columns:1fr;padding:120px 6% 70px;gap:20px}.machine-intro h1{font-size:clamp(35px,6vw,55px);margin:15px 0}.machine-wrap{padding:35px 0 30px}.machine{max-width:650px}.machine-hint{bottom:20px}.machine-hero:before{font-size:23vw}.machine-hero~.manifesto{padding-top:90px}}
@media(max-width:520px){.machine-hero{padding-top:110px}.machine-intro>p:not(.machine-kicker){font-size:12px}.machine{padding:13px 12px 15px;border-radius:16px}.machine-top{height:43px}.machine-top strong{font-size:12px}.machine-light{font-size:7px}.machine-face{grid-template-columns:minmax(0,1fr) 88px;gap:7px}.display-frame{padding:6px;border-width:2px}.display-heading,.display-foot{font-size:5px;letter-spacing:.03em}.machine-grid{gap:4px}.machine-item-meta{font-size:7px;padding:4px 3px}.machine-item-meta i{display:none}.machine-control{padding:6px}.machine-control p{font-size:7px}.machine-control p strong{font-size:10px}.screen{min-height:42px;padding:4px}.screen span{font-size:8px}.keypad{gap:3px;margin-top:6px}.keypad button{font-size:9px;padding:6px 0}.control-note{font-size:8px;margin-top:7px}.camera-lens{width:44px;height:44px}.camera-lens div{width:23px;height:23px}.camera-lens span{display:none}.machine-base{margin-top:8px;padding:8px}.machine-base span,.machine-base a{font-size:7px}.machine-base strong{font-size:8px}.camera-prism{top:-22px;height:24px;font-size:6px;padding-top:8px}.machine-hint{font-size:7px}.machine-hero:before{bottom:-.05em}}
@media(prefers-reduced-motion:reduce){.machine-item,.machine-photo img,.keypad button{transition:none}}
/* 全站暗色視覺 */
:root{--ink:#ecebe4;--paper:#151715;--line:#41443e;--accent:#e8795f}
body{background:var(--paper);color:var(--ink)}
.machine-hero{background:#1b1e1c}
.machine-hero:before{color:#242824}
.machine-kicker{color:#a3aaa0}
.machine-intro h1 em{color:#ec967d}
.machine-intro>p:not(.machine-kicker){color:#b6bcb1}
.machine-intro>a{border-color:#b3b9ad;color:#eeeee7}
.machine-hint{color:#a0a99c}
.header:has(+ main .machine-hero){color:#f3f1ea}
.header:has(+ main .machine-hero) nav a:last-child{border-color:#a8aca4}
.section-label{color:#a6aea1}
.muted{color:#a0aa9c}
.manifesto h2 span{color:#a9b0a4}
.manifesto-bottom p,.work-heading>p,.about-body p{color:#b4bcb0}
.hand,.work-heading .micro,.section-label span:first-child{color:var(--accent)}
.work-heading h2 em{-webkit-text-stroke:1px #ecebe4}
.filters button{color:#9ca599}.filters button.active{color:#f18d75}
.filters sup{color:#929c90}
.work-image{background:#292e29}
.work-info small,.work-number,.more>span{color:#a0a89d}
.more{border-color:#92988e}
.statement{background:#111}
.about-body .about-lead{color:#ecebe4}
.contact{background:#252b27;color:#ecebe4}
.contact .section-label{border-color:#606a60;color:#afb9ac}
.contact .section-label span:first-child{color:#e8795f}
.contact-layout>div:nth-child(2) p{color:#b3bcb0}
.contact-layout a,.footer{border-color:#606a60}
.footer,.footer .wordmark{color:#d3d8ce}
/* 攝影棚：背景布、棚燈和地面光影 */
.machine-hero{background:radial-gradient(ellipse at 68% 33%,#4a4d47 0%,#292c29 27%,#171a18 60%,#111311 100%);isolation:isolate}
.machine-hero:after{content:'';position:absolute;z-index:0;inset:auto 0 0;height:24%;background:linear-gradient(180deg,#171917 0%,#242723 20%,#111311 100%);border-top:1px solid #858b772b;box-shadow:0 -14px 70px #0008;pointer-events:none}
.machine-hero:before{color:#d2d9c4;opacity:.035}
.machine-wrap:before{content:'';position:absolute;z-index:-1;left:-14%;right:-7%;top:-12%;bottom:8%;background:radial-gradient(ellipse at 50% 40%,#e8ead91c,transparent 65%);filter:blur(15px);pointer-events:none}
.machine-shadow{height:25px;width:88%;filter:blur(16px);opacity:.6;background:#000}
.machine{box-shadow:inset 2px 2px 1px #b3b6aa55,inset -6px -6px 12px #000b,0 35px 60px #000b,0 0 65px #ced0b91a}
.machine-light b{animation:studio-pulse 3s ease-in-out infinite}
.machine-intro:before{content:'●  STUDIO LIGHT / ON';display:block;color:#b7bca9;font-size:9px;letter-spacing:.17em;margin-bottom:26px}
.machine-kicker{color:#aeb4a6}
.machine-intro h1 em{color:#d79b7d}
.machine-intro>p:not(.machine-kicker){color:#c4c8bc}
.machine-hint{color:#aeb4a8}
.manifesto,.works,.about{position:relative}
.statement-image{background:linear-gradient(90deg,#101310b8,#10131072),linear-gradient(0deg,#101310b3,transparent 60%),url('https://jason-photographic-studies-gray.pages.dev/assets/home-carousel/hc02-desktop.webp') center/cover}
@keyframes studio-pulse{0%,100%{opacity:.65;box-shadow:0 0 5px #ff7258}50%{opacity:1;box-shadow:0 0 15px #ff7258}}
@media(prefers-reduced-motion:reduce){.machine-light b{animation:none}}
/* 失焦的棚內器材輪廓，置於所有互動內容後方 */
.studio-equipment{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(5px);opacity:.24}
.softbox{position:absolute;border:9px solid #a2aaa2;background:linear-gradient(135deg,#d6d9c8aa,#707b7070 58%,#222b25);box-shadow:0 0 38px #dce4ca25,inset 0 0 22px #19211caa}
.softbox:before,.softbox:after{content:'';position:absolute;inset:0;border:1px solid #d0d5c25e}.softbox:before{transform:rotate(45deg) scale(.72)}.softbox:after{transform:rotate(-45deg) scale(.72)}
.softbox-left{width:150px;height:205px;left:4%;top:17%;transform:rotate(-15deg)}
.softbox-right{width:118px;height:164px;right:3%;top:14%;transform:rotate(18deg)}
.studio-stand{position:absolute;width:5px;background:linear-gradient(90deg,#151b17,#b5bbb0,#222b24);height:52%;bottom:8%;transform-origin:bottom center}
.studio-stand:before,.studio-stand:after{content:'';position:absolute;width:4px;height:25%;bottom:-1px;left:0;background:#a4aaa0;transform-origin:bottom}
.studio-stand:before{transform:rotate(31deg)}.studio-stand:after{transform:rotate(-31deg)}
.stand-left{left:13%;transform:rotate(-4deg)}.stand-right{right:11%;transform:rotate(4deg)}
.backdrop-stand{position:absolute;right:18%;top:6%;width:4px;height:70%;background:#788379;opacity:.6}.backdrop-stand span{position:absolute;right:-50px;top:4px;width:55vw;height:4px;background:#899288}
.studio-case{position:absolute;left:3%;bottom:12%;width:110px;height:70px;border:5px solid #818b80;border-radius:5px;background:#333b35;transform:rotate(-3deg);box-shadow:inset 0 0 20px #101410}
.studio-case:before{content:'';position:absolute;left:30%;top:-15px;width:40%;height:12px;border:4px solid #8f998e;border-bottom:0;border-radius:5px 5px 0 0}
@media(max-width:700px){.studio-equipment{opacity:.16;filter:blur(6px)}.softbox-left{left:-65px;top:23%;width:115px;height:155px}.softbox-right{right:-30px;top:35%;width:80px;height:110px}.stand-left{left:5%}.stand-right{right:4%}.studio-case{left:-40px;width:90px}}
/* Gallery wall: recessed mats, frames and subtle pools of light */
.works{position:relative;isolation:isolate}
.works:before{content:'';position:absolute;z-index:-1;inset:0 calc((min(89vw, 1400px) - 100vw)/2);background:radial-gradient(ellipse 25% 15% at 18% 34%,#858b7540,transparent 80%),radial-gradient(ellipse 25% 15% at 78% 44%,#858b7535,transparent 80%),radial-gradient(ellipse 25% 15% at 35% 76%,#858b7530,transparent 80%),linear-gradient(90deg,#1c1e1b,#292b27 50%,#191b19);pointer-events:none}
.gallery{row-gap:120px}
.work-image{aspect-ratio:auto!important;padding:clamp(12px,1.8vw,26px);border:clamp(7px,.8vw,12px) solid #171815;background:#d8d4c7;box-shadow:inset 0 0 0 2px #eeeadd,inset 0 0 0 4px #aaa79c,0 2px 2px #000c,0 16px 30px #0009,3px 3px 0 #4a4a41;overflow:visible}
.work-image img{height:auto;max-height:570px;aspect-ratio:auto;object-fit:contain;background:#1d1e1b;box-shadow:0 1px 5px #0008;transition:filter .4s}
.work-button:hover img{transform:none;filter:brightness(.9)}
.work-button:hover .work-image{box-shadow:inset 0 0 0 2px #eeeadd,inset 0 0 0 4px #aaa79c,0 4px 4px #000b,0 22px 40px #000a,3px 3px 0 #5d5c51}
.work-info{margin-top:7px;padding:14px 12px;border-left:2px solid #a37b60;background:#13151299;max-width:285px}
.work-info small{color:#a7aea1}.work-info strong{color:#e8e7df;font-weight:400}.work-number{color:#c6aa8c}
.zoom{right:clamp(17px,2vw,30px);bottom:clamp(17px,2vw,30px);background:#1d211ed9;border-color:#d1d4c7}
@media(max-width:700px){.works:before{inset:0 -6.2vw}.gallery{row-gap:52px}.work-image{padding:10px;border-width:6px}.work-info{padding:10px 9px}.work-info strong{font-size:13px}.work-image img{max-height:none}}
/* Studio atmosphere: fictional scene, kept subdued behind the content. */
.about h2 em{font-family:'DM Sans','Noto Sans TC','Microsoft JhengHei',sans-serif;font-style:normal;font-weight:600;letter-spacing:-.045em;font-size:1.06em}
.manifesto,.about{isolation:isolate}
.manifesto::before,.about::before{content:'';position:absolute;z-index:-1;inset:0 calc((min(89vw, 1400px) - 100vw)/2);background:linear-gradient(rgba(17,20,18,.80),rgba(17,20,18,.86)),url('assets/studio-atmosphere.webp') center/cover no-repeat;filter:blur(3px);pointer-events:none}
.manifesto::before{background-position:35% center}
.about::before{background-position:65% center}
.works::before{background:linear-gradient(rgba(18,20,18,.84),rgba(18,20,18,.88)),url('assets/studio-atmosphere.webp') center/cover no-repeat;filter:blur(4px)}
.statement-image{background:linear-gradient(rgba(12,15,13,.68),rgba(12,15,13,.76)),url('assets/studio-atmosphere.webp') 68% center/cover no-repeat;filter:blur(3px);transform:scale(1.02)}
.contact{position:relative;isolation:isolate;background:#171a18;overflow:hidden}
.contact::before{content:'';position:absolute;z-index:-1;inset:-8px;background:linear-gradient(rgba(20,24,21,.82),rgba(20,24,21,.88)),url('assets/studio-atmosphere.webp') 32% center/cover no-repeat;filter:blur(4px);pointer-events:none}
@media(max-width:700px){.manifesto::before,.about::before{inset:0 -6.2vw}.works::before{inset:0 -6.2vw}.statement-image{background-position:58% center}}
/* 首頁與藝廊：可辨識但退居背景的棚內桌拍場景 */
.machine-hero{background:linear-gradient(90deg,rgba(13,16,14,.83),rgba(13,16,14,.58) 58%,rgba(13,16,14,.66)),url('assets/studio-atmosphere.webp') center/cover no-repeat}
.machine-hero:after{background:linear-gradient(0deg,rgba(12,14,12,.78),transparent);border:0;box-shadow:none;height:30%}
.studio-equipment{display:none}
.machine-wrap:before{background:radial-gradient(ellipse at 50% 40%,#d5ddcb1c,transparent 65%)}
.works::before{background-image:linear-gradient(rgba(17,20,18,.72),rgba(17,20,18,.76)),url('assets/studio-atmosphere.webp');background-size:auto 100%,auto 900px;background-repeat:no-repeat,repeat-y;background-position:center top,center top;filter:blur(3px)}
@media(max-width:900px){.machine-hero{background-position:center,68% center}.works::before{background-size:auto 100%,auto 700px}}
/* Motion choreography */
@media (prefers-reduced-motion:no-preference){
 .machine-hero{background-size:auto,110% auto;animation:studio-breathe 20s ease-in-out infinite alternate}
 .machine-intro .machine-kicker,.machine-intro h1,.machine-intro>p:not(.machine-kicker),.machine-intro>a{animation:intro-rise .9s both cubic-bezier(.2,.65,.2,1)}
 .machine-intro h1{animation-delay:.12s}.machine-intro>p:not(.machine-kicker){animation-delay:.24s}.machine-intro>a{animation-delay:.34s}
 .machine-wrap{animation:machine-arrive 1.2s both cubic-bezier(.2,.65,.2,1)}
 .machine-item{animation:slot-reveal .65s backwards ease-out}.machine-item:nth-child(2){animation-delay:.08s}.machine-item:nth-child(3){animation-delay:.16s}.machine-item:nth-child(4){animation-delay:.24s}.machine-item:nth-child(5){animation-delay:.32s}.machine-item:nth-child(6){animation-delay:.4s}
 .camera-lens{transition:transform .7s cubic-bezier(.2,.7,.2,1)}.machine:hover .camera-lens{transform:rotate(24deg)}
 .reveal{transition:opacity .9s ease,transform .9s cubic-bezier(.18,.7,.2,1);transform:translateY(35px)}.reveal.visible{transform:none}
 .work-button .work-image{transition:transform .45s ease,box-shadow .45s ease}.work-button:hover .work-image,.work-button:focus-visible .work-image{transform:translateY(-7px)}
 .work-button .work-info{transition:transform .4s ease}.work-button:hover .work-info{transform:translateX(6px)}
 .filters button{transition:color .25s ease,transform .25s ease}.filters button:hover{transform:translateY(-2px)}
 dialog[open]{animation:viewer-in .3s ease both}dialog[open] .viewer-content img{animation:photo-in .45s cubic-bezier(.2,.7,.2,1) both}
 .statement-image{animation:statement-drift 22s ease-in-out infinite alternate}
 .footer a,.more a,.about-body a{transition:color .25s ease}.footer a:hover,.more a:hover,.about-body a:hover{color:#f18d75}
}
@keyframes intro-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes machine-arrive{from{opacity:0;transform:translateY(32px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slot-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}
@keyframes photo-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes studio-breathe{from{background-size:auto,110% auto}to{background-size:auto,116% auto}}
@keyframes statement-drift{from{transform:scale(1.03)}to{transform:scale(1.09)}}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){.machine-hero{animation:none;background-size:auto,cover}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
/* Different studio moments as the visitor moves down the page. */
.machine-hero{background-image:linear-gradient(90deg,rgba(13,16,14,.80),rgba(13,16,14,.57) 58%,rgba(13,16,14,.66)),url('assets/studio-tabletop.webp')}
.manifesto::before{background-image:linear-gradient(rgba(17,20,18,.75),rgba(17,20,18,.82)),url('assets/studio-setup.webp');background-position:center,center}
.works::before{background-color:#171a18;background-image:linear-gradient(rgba(18,21,18,.68),rgba(18,21,18,.70)),url('assets/studio-workroom.webp'),url('assets/studio-tabletop.webp'),url('assets/studio-setup.webp');background-position:center,center top,center center,center bottom;background-size:100% 100%,auto 34%,auto 34%,auto 34%;background-repeat:no-repeat;filter:blur(3px)}
.statement-image{background-image:linear-gradient(rgba(12,15,13,.62),rgba(12,15,13,.7)),url('assets/studio-setup.webp');background-position:center,center}
.about::before{background-image:linear-gradient(rgba(17,20,18,.76),rgba(17,20,18,.84)),url('assets/studio-workroom.webp');background-position:center,center}
.contact::before{background-image:linear-gradient(rgba(20,24,21,.76),rgba(20,24,21,.86)),url('assets/studio-tabletop.webp');background-position:center,center}
@media(max-width:900px){.machine-hero{background-position:center,65% center}.works::before{background-size:100% 100%,auto 34%,auto 34%,auto 34%}}
/* A camera that feels active while remaining calm and usable. */
.display-frame{position:relative;overflow:hidden}
.display-frame::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.2;background:linear-gradient(180deg,transparent 0%,#cbe6d400 43%,#cbe6d454 49%,#cbe6d400 55%,transparent 100%);transform:translateY(-100%)}
.camera-lens{position:relative;overflow:hidden}
.camera-lens::after{content:'';position:absolute;width:18%;height:55%;left:28%;top:14%;border-radius:50%;background:linear-gradient(90deg,transparent,#c1efff88,transparent);transform:rotate(35deg);filter:blur(2px);opacity:.45;pointer-events:none}
.screen{position:relative;overflow:hidden}
.screen::after{content:'';position:absolute;left:-60%;top:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,#c2f7d529,transparent);transform:skewX(-20deg);pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 .display-frame::after{animation:camera-scan 6s linear infinite}
 .screen::after{animation:screen-sweep 5s ease-in-out infinite}
 .camera-lens div{animation:lens-focus 5s ease-in-out infinite}
 .camera-lens::after{animation:lens-glint 5s ease-in-out infinite}
 .machine.is-capturing .display-frame{animation:capture-flash .65s ease-out}
 .machine.is-capturing .camera-lens{animation:capture-focus .65s ease-out}
 .machine.is-capturing .machine-light b{animation:capture-light .18s steps(2,end) 3}
 .machine.is-capturing .selected .machine-photo img{animation:selected-shot .65s ease-out}
}
@keyframes camera-scan{0%,12%{transform:translateY(-100%);opacity:0}18%{opacity:.22}70%{opacity:.18}85%,100%{transform:translateY(100%);opacity:0}}
@keyframes screen-sweep{0%,45%{left:-60%}80%,100%{left:140%}}
@keyframes lens-focus{0%,100%{transform:scale(.92)}45%,60%{transform:scale(1.08)}}
@keyframes lens-glint{0%,100%{opacity:.25;transform:rotate(35deg) translateX(-5px)}50%{opacity:.8;transform:rotate(35deg) translateX(8px)}}
@keyframes capture-flash{0%,100%{box-shadow:inset 0 0 20px #000}35%{box-shadow:inset 0 0 32px #dceee688,0 0 20px #dceee63a}}
@keyframes capture-focus{0%,100%{transform:scale(1)}35%{transform:scale(.91) rotate(15deg)}70%{transform:scale(1.06) rotate(-8deg)}}
@keyframes capture-light{50%{opacity:.2}}
@keyframes selected-shot{0%,100%{filter:brightness(1)}35%{filter:brightness(1.7)}}
/* Dimensional camera body and capture sequence */
.machine{transform:perspective(1300px) rotateY(-3deg) rotateX(1deg);transform-origin:center;background:linear-gradient(112deg,#5a5c56 0%,#282b28 3%,#151816 17%,#101311 72%,#30342f 94%,#090b09 100%);box-shadow:inset 2px 2px 2px #ffffff55,inset -9px -8px 13px #000c,10px 13px 0 #0b0d0b,18px 28px 32px #000b,0 35px 65px #0009}
.machine:before{content:'';position:absolute;inset:8px 7px;border-radius:18px 18px 26px 26px;border:1px solid #ffffff20;pointer-events:none}
.camera-grip{position:absolute;right:-10px;top:15%;height:66%;width:34px;border-radius:4px 24px 24px 4px;background:repeating-linear-gradient(90deg,#151815 0 2px,#30332e 3px 4px);box-shadow:inset -5px 0 7px #000,6px 4px 12px #0008;z-index:-1}
.camera-dial{position:absolute;top:-13px;height:15px;border-radius:5px 5px 0 0;background:repeating-linear-gradient(90deg,#111 0 3px,#555951 4px 5px);border:1px solid #55584f;box-shadow:0 -3px 1px #151715}.camera-dial-left{left:9%;width:11%}.camera-dial-right{right:10%;width:8%}
.camera-lens{width:90px;height:90px;background:repeating-radial-gradient(circle,#101310 0 5px,#5a5e57 6px 8px,#181b18 9px 13px,#3b403a 14px 16px);box-shadow:inset 2px 2px 5px #ddd5,inset -4px -4px 8px #000,0 6px 10px #000c}
.camera-lens div{width:50px;height:50px;background:radial-gradient(circle at 34% 26%,#bed2ca,#648d99 10%,#192f39 25%,#13201f 43%,#050807 68%);box-shadow:inset 0 0 0 3px #080a08,inset 0 0 10px #91b7b265}
.print-slot{position:absolute;left:18%;right:25%;top:8px;height:7px;background:#050605;border-radius:4px;box-shadow:0 1px 1px #8b918177}.machine-base{position:relative;padding-top:26px;min-height:68px;overflow:hidden}.print-paper{position:absolute;width:72px;height:55px;top:-54px;left:50%;transform:translateX(-50%);border:5px solid #eee;border-bottom-width:12px;background-size:cover;background-position:center;box-shadow:0 4px 9px #000a;opacity:0}
@media(prefers-reduced-motion:no-preference){.machine.is-capturing .print-paper{animation:camera-print 1.4s ease-in-out both}.machine.is-capturing .display-frame::before{content:'';position:absolute;z-index:4;inset:0;background:#060906;pointer-events:none;animation:shutter-cycle 1.4s ease both}.machine.is-capturing .camera-lens{animation:focus-capture 1.4s cubic-bezier(.3,.1,.2,1) both}.machine.is-capturing .screen{animation:screen-record 1.4s ease both}}
@keyframes shutter-cycle{0%,28%{opacity:0}32%{opacity:.9}40%,100%{opacity:0}}@keyframes focus-capture{0%,100%{transform:scale(1)}15%{transform:scale(1.14) rotate(24deg)}28%{transform:scale(.95) rotate(-8deg)}45%{transform:scale(1.08) rotate(12deg)}70%{transform:scale(1)}}@keyframes screen-record{0%,100%{box-shadow:none}30%,55%{box-shadow:0 0 16px #d0ffe09c}}@keyframes camera-print{0%,36%{opacity:0;top:-54px}40%{opacity:1;top:-48px}75%,100%{opacity:1;top:5px}}
@media(max-width:520px){.machine{transform:perspective(900px) rotateY(-2deg);box-shadow:inset 2px 2px 2px #ffffff45,inset -6px -6px 9px #000b,6px 8px 0 #0b0d0b,12px 18px 25px #0009}.camera-grip{width:20px;right:-6px}.camera-lens{width:48px;height:48px}.camera-lens div{width:28px;height:28px}.machine-base{padding-top:18px;min-height:56px}.print-paper{width:50px;height:42px;border-width:3px;border-bottom-width:8px}}