/* One entrance, one menu, generous space for the work. */
.eye-active .experience-header{height:94px;padding:22px 3.6vw;display:flex;align-items:center;justify-content:space-between}
.eye-active .experience-signature{font-size:44px;gap:4px}
.menu-toggle{width:64px;height:56px;padding:12px;display:flex;flex-direction:column;justify-content:center;gap:8px;align-items:center;flex:none}
.menu-toggle span{width:36px;height:4px;background:currentColor;display:block;transition:transform .3s}
#menu-trigger{position:absolute;left:50%;transform:translateX(-50%)}
.menu-toggle:hover span:first-child{transform:translateX(4px)}
.menu-toggle:hover span:last-child{transform:translateX(-4px)}
.is-close span:first-child{transform:translateY(6px) rotate(45deg)}
.is-close span:last-child{transform:translateY(-6px) rotate(-45deg)}
.is-close:hover span:first-child{transform:translateY(6px) rotate(135deg)}
.is-close:hover span:last-child{transform:translateY(-6px) rotate(45deg)}
.header-all-works{font-size:15px;min-height:48px;display:flex;align-items:center;gap:18px}
.main-menu{inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;padding:0 3.6vw;background:#08090c;color:#f8f8f4;overflow:auto}
.main-menu[open]{display:grid;grid-template-rows:110px minmax(0,1fr) 72px}
.main-menu::backdrop{background:#08090c}
.menu-top{display:flex;position:relative;align-items:center;justify-content:space-between}
.menu-signature{display:flex;align-items:center;gap:4px;font:600 44px/1 var(--display);letter-spacing:-.055em}
.menu-signature img{width:40px;height:34px}
#menu-close{position:absolute;left:50%;transform:translateX(-50%)}
.menu-location{font-size:12px;line-height:1.4;text-align:right}
.main-menu nav{display:flex;flex-direction:column;justify-content:center}
.main-menu nav a{flex:1;min-height:80px;display:flex;align-items:center;border-top:1px solid #ffffff30;gap:4.5vw;color:inherit;text-decoration:none;padding:4px 0}
.main-menu nav a:last-child{border-bottom:1px solid #ffffff30}
.menu-number{font-size:11px;align-self:center;opacity:.45}
.menu-word{font:500 clamp(66px,11vh,150px)/.95 var(--display);letter-spacing:-.065em;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.menu-arrow{margin-left:auto;font:400 clamp(40px,7vh,80px)/1 var(--sans);transition:transform .35s,color .35s}
.main-menu nav a:hover .menu-word,.main-menu nav a:focus-visible .menu-word{transform:translateX(12px)}
.main-menu nav a:hover .menu-arrow,.main-menu nav a:focus-visible .menu-arrow{transform:translate(5px,-5px);color:#ff4c00}
.menu-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#9b9b9b}
.main-menu[open] .menu-word{animation:menu-arrive .6s cubic-bezier(.2,.8,.2,1) both}
.main-menu[open] a:nth-child(2) .menu-word{animation-delay:.045s}.main-menu[open] a:nth-child(3) .menu-word{animation-delay:.09s}.main-menu[open] a:nth-child(4) .menu-word{animation-delay:.135s}
@keyframes menu-arrive{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
#index-drawer{inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;background:#faf9f6;padding:0 3.6vw}
#index-drawer::backdrop{background:#faf9f6}
.index-top{padding:36px 0 28px;align-items:center;position:relative}
#index-title{font:500 clamp(46px,5vw,86px)/1 var(--display);letter-spacing:-.06em}
.page-menu{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-size:13px;min-height:48px}
.page-menu span{font-size:24px}
.index-tabs[hidden]{display:none}
.index-tabs{background:#faf9f6;padding:15px 0 22px;margin:0;border-bottom:1px solid #17171526;gap:28px}
.index-tabs button{padding:4px 0;background:none!important;border:0!important;border-radius:0!important;font-size:17px;opacity:.4;min-height:44px}
.index-tabs button[aria-selected=true]{opacity:1;text-decoration:underline;text-underline-offset:9px;text-decoration-thickness:1px}
#index-drawer .section-shell{max-width:1800px;margin:auto;padding-left:0;padding-right:0}
#index-drawer .section-intro{margin-top:38px}
#index-drawer .project-grid{gap:48px 24px}
#index-drawer .work-image{background:transparent;border-radius:0}
#index-drawer .work-image img{object-fit:contain}
#index-drawer[data-section=about]{background:#ddff3f}
#index-drawer[data-section=about] .about-section{max-width:1600px}
.gallery-media,.gallery-caption{max-width:1920px}
.gallery-scene:not(.gallery-intro){padding:112px 3.6vw 28px;gap:24px}
.gallery-open h2{font-size:clamp(32px,3.4vw,66px);line-height:1.05}
.gallery-credit{font-size:12px}
.gallery-media{gap:18px}
.gallery-honey .gallery-frame{position:static;display:flex;aspect-ratio:auto;width:auto;height:100%;max-width:none;flex:1;overflow:visible}
.gallery-honey .gallery-frame img{position:static;left:auto;top:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.gallery-object .gallery-frame:nth-child(2){flex:.55}
.gallery-object .gallery-frame:nth-child(2) img{max-height:75%}
.gallery-frame.is-label img{clip-path:circle(49.9%);aspect-ratio:1}
@media(min-width:901px){
 .gallery-film .gallery-media{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:14px 22px}
 .gallery-film .gallery-frame:first-child{grid-row:1 / 3}
 .gallery-film .gallery-frame:only-child{grid-column:1 / 3}
 .gallery-film .gallery-frame:nth-child(2):last-child{grid-row:1 / 3;align-items:end;padding-bottom:3vh}
 .gallery-film .gallery-frame{width:100%;height:100%;overflow:hidden}
 .gallery-film .gallery-frame img{width:100%;height:100%;object-fit:contain}
 .gallery-portrait-film .gallery-media{gap:28px;max-width:1500px}
 .gallery-portrait-film .gallery-frame{flex:1}
 #archive-list{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
 .eye-active .experience-header{height:76px;padding:12px 20px}
 .eye-active .experience-signature{font-size:36px;gap:3px}.signature-eye{width:32px;height:28px}
 .header-all-works{font-size:12px;gap:8px}.menu-toggle{width:52px;height:48px}.menu-toggle span{width:29px;height:3px;gap:8px}
 .is-close span:first-child{transform:translateY(5.5px) rotate(45deg)}.is-close span:last-child{transform:translateY(-5.5px) rotate(-45deg)}
 .main-menu{padding:0 22px}.main-menu[open]{grid-template-rows:92px minmax(0,1fr) 64px}
 .menu-signature{font-size:36px;gap:3px}.menu-signature img{width:32px;height:28px}.menu-location{font-size:9px}
 .menu-word{font-size:clamp(64px,13vw,105px)}.main-menu nav a{gap:24px}.menu-arrow{font-size:44px}.menu-foot{font-size:11px}
 #index-drawer{padding:0 20px}.index-top{padding:22px 0}#index-title{font-size:46px}.page-menu{left:auto;right:76px;transform:none;font-size:11px}.page-menu span{font-size:20px}
 .index-tabs{gap:24px}.index-tabs button{font-size:15px}#index-drawer .section-intro{margin-top:22px}#index-drawer .project-grid{gap:28px 14px}
 .gallery-scene:not(.gallery-intro){padding:90px 18px 24px;gap:22px}
 .gallery-film .gallery-media{display:flex;flex-direction:column;gap:10px}
 .gallery-film .gallery-frame{max-height:calc(50% - 5px);height:auto;width:100%;flex:0 1 auto}
 .gallery-film .gallery-frame:nth-child(n+3){display:none}
 .gallery-film img{width:100%;max-height:calc((100dvh - 260px)/2 - 5px)}
 .gallery-object .gallery-frame:nth-child(2){display:none}
 .gallery-open h2{font-size:33px}.gallery-credit{font-size:10px}
}
@media(max-width:390px){.header-all-works{font-size:10px}.eye-active .experience-signature{font-size:34px}.menu-word{font-size:64px}.gallery-open h2{font-size:29px}}
@media(max-height:600px) and (min-width:701px){.main-menu[open]{grid-template-rows:70px minmax(0,1fr) 40px}.main-menu nav a{min-height:60px}.menu-word{font-size:52px}.gallery-scene:not(.gallery-intro){padding-top:80px;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.gallery-caption{flex-direction:row;align-items:end}.gallery-open h2{font-size:24px}.gallery-credit{margin-top:4px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.main-menu *{animation:none!important;transition:none!important}.gallery-media{transform:none!important}.gallery-copy{transform:none!important}}
/* The colour world is dark; every authored work retains a quiet light canvas. */
.gallery-intro{background:#08090c;color:#f8f8f5}
.gallery-intro #colour-art{transition:opacity .7s ease,filter .7s ease}
.gallery-intro.is-discovering #colour-art{opacity:0;filter:blur(12px)}
.gallery-intro .colour-pause,.gallery-intro .colour-scroll{color:#f8f8f5}
.gallery-intro .colour-pause{opacity:.45}
.gallery-intro .colour-fallback-surface{box-shadow:inset -22px -28px 42px #21104645,inset 16px 22px 36px #ffffff80,0 0 90px #9d45ff16}
.gallery-intro.is-discovering .colour-fallback-surface{opacity:0;transition:opacity .7s}
@media(prefers-reduced-motion:reduce){.gallery-intro #colour-art{transition:none}}

.planet-contour{position:absolute;z-index:0;pointer-events:none;left:50%;top:48%;width:max(112vw,100vh);aspect-ratio:2.25;border:1.2px solid #fffffff2;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--orbit-angle,-26deg)) scale(var(--orbit-scale,1));opacity:.84;transition:opacity .6s;will-change:transform}
.is-discovering .planet-contour{opacity:0}
@media(max-width:700px){.planet-contour{width:210vw;aspect-ratio:2.1;border-width:1px;top:48%;transform:translate(-50%,-50%) rotate(calc(var(--orbit-angle,-26deg) - 8deg)) scale(var(--orbit-scale,1))}}
@media(prefers-reduced-motion:reduce){.planet-contour{transition:none;will-change:auto}}
.gallery-frame{position:relative}
.gallery-year{position:absolute;left:12px;bottom:12px;color:#fff;background:#08090c88;padding:5px 7px;font:11px/1 var(--sans);letter-spacing:.03em}
.series-films{margin:50px 0 0}
.series-film{padding:48px 0 16px;border-top:1px solid #16161630}
.series-film-heading{display:flex;align-items:baseline;gap:28px;margin-bottom:20px}
.series-year{font:500 clamp(28px,4vw,60px)/1 var(--display);letter-spacing:-.04em}
.series-film-heading h3{font:500 clamp(25px,3vw,46px)/1.05 var(--display);letter-spacing:-.045em}
.series-film-heading p{font-size:12px;margin-top:12px}
.series-description{font-size:13px;line-height:1.8;max-width:700px;margin:20px 0 30px;word-break:keep-all}
.series-film .detail-gallery{margin-top:36px}
@media(max-width:700px){.series-film{padding-top:30px}.series-film-heading{gap:16px}.series-film-heading p{font-size:10px}.series-description{font-size:11px}.gallery-year{font-size:9px;padding:4px 6px;bottom:8px;left:8px}}
.gallery-film .gallery-frame:has(.gallery-year){flex-direction:column;align-items:stretch;justify-content:center}
.gallery-film .gallery-frame:has(.gallery-year) img{height:auto;max-height:calc(100% - 24px);min-height:0}
.gallery-year{position:static;align-self:flex-start;background:none;color:#64635f;margin-top:9px;padding:0;font-size:11px}
.series-film{padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px)}
.series-film .detail-gallery:empty{display:none}
.series-discipline{margin:16px 0 0;font-size:12px;line-height:1.5;letter-spacing:.01em}
.series-approach{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin:0 clamp(24px,4vw,64px) 64px;padding-top:40px;border-top:1px solid #17171529}
.series-approach-item>span{font-size:11px;color:#65645f}
.series-approach-item h3{font:500 clamp(24px,2.4vw,36px)/1.1 var(--display);letter-spacing:-.04em;margin:18px 0 15px}
.series-approach-item p{font-size:12px;line-height:1.8;word-break:keep-all}
.series-source-cover{display:block;text-decoration:none;color:inherit;margin:32px 0}
.series-source-cover img{display:block;width:100%;max-height:65vh;object-fit:contain}
.series-source-cover span{display:block;font-size:13px;margin-top:15px}
@media(max-width:700px){.series-approach{grid-template-columns:1fr;gap:28px;margin-bottom:40px;padding-top:28px}.series-approach-item h3{margin:9px 0;font-size:26px}.series-approach-item p{font-size:11px}.series-discipline{font-size:10px}}
.series-opening{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(32px,5vw,80px) clamp(24px,4vw,64px)}
.series-opening .detail-heading{padding:0}
.series-opening .detail-heading h2{font-size:clamp(52px,6.5vw,100px)}
.series-opening .detail-summary{display:flex;flex-direction:column;gap:0;margin-top:28px}
.series-opening .series-discipline{margin:14px 0 24px;color:#64635f}
.series-opening .detail-ko{font-size:13px;line-height:1.9;word-break:keep-all}
.series-keyvisual img{width:100%;height:auto;object-fit:contain}
.series-keyvisual figcaption{display:flex;justify-content:space-between;gap:14px;margin-top:14px;font-size:10px;line-height:1.5;color:#64635f}
#detail{background:#faf9f6}
@media(min-width:901px){#detail{width:min(1600px,calc(100% - 64px))}}
@media(max-width:900px){.series-opening{grid-template-columns:1fr;gap:30px}.series-opening .detail-heading h2{font-size:clamp(46px,9vw,72px)}.series-opening .detail-ko{font-size:12px}.series-keyvisual figcaption{font-size:9px}.series-opening .detail-summary{margin-top:20px}}

/* Compact signature and project-first covers. */

#index-drawer .work-ducks .work-image img{padding:18px;background:transparent}

#index-drawer .work-saem .work-image img{background:#f3f2ef;object-fit:contain}
.gallery-image-button[data-image-project="saem"] img[src*="thesam-logo"]{aspect-ratio:16/9;object-fit:contain;padding:clamp(28px,8vw,120px);background:#f3f2ef}
#index-drawer .agency-intro{align-items:end}
.agency-experience{font-size:13px;line-height:1.9;word-break:keep-all;max-width:370px}
#panel-about footer{justify-content:flex-end}
#panel-about footer>div{width:100%;display:flex;justify-content:space-between}
@media(max-width:700px){.agency-experience{font-size:11px;margin-top:22px}#index-drawer .work-ducks .work-image img{padding:8px}}
/* Small responses beyond the entrance: type, navigation and the work index. */
#about-title>span{display:block;will-change:transform;transform:translateX(var(--intent-x,0px))}
#about-title>span+span{transform:translateX(var(--instinct-x,0px))}
.section-intro h2 em,.agency-intro h2 em{display:inline-block;transform-origin:0 80%;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.section-intro h2:hover em,.agency-intro h2:hover em{transform:translateX(10px) skewX(-3deg)}
.work-caption h3,.film-meta h3{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.work-button:hover .work-caption h3,.film-card:hover .film-meta h3{transform:translateX(6px)}
.open-project,.film-play,.hello-button>span,.source-link>span{transition:transform .5s cubic-bezier(.16,1,.3,1),background .35s}
.work-button:hover .open-project,.film-card:hover .film-play{transform:rotate(-12deg);background:#ddff3f;color:#171715}
.hello-button:hover>span,.source-link:hover>span{transform:translate(5px,-5px)}
.index-tabs button{transition:opacity .25s,translate .35s}.index-tabs button:active{translate:0 2px}
.main-menu nav a{position:relative;isolation:isolate;overflow:hidden}
.main-menu nav a::before{content:'';position:absolute;z-index:-1;inset:0;background:#ddff3f;transform:translateY(101%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.main-menu nav a:hover::before,.main-menu nav a:focus-visible::before{transform:translateY(0)}
.main-menu nav a:active .menu-word{transform:translateX(18px)}
@media(hover:none){.work-button:active .open-project{transform:rotate(-12deg);background:#ddff3f}.section-intro h2:hover em,.agency-intro h2:hover em{transform:none}}
@media(prefers-reduced-motion:reduce){#about-title>span,#about-title>span+span{transform:none!important;will-change:auto}.section-intro h2 em,.agency-intro h2 em,.work-caption h3,.film-meta h3,.open-project,.film-play,.hello-button>span,.source-link>span,.index-tabs button,.main-menu nav a::before{transition:none!important;transform:none!important}.main-menu nav a::before{display:none}}

/* Optical center of the custom lowercase letters, alongside the symbol. */
.menu-signature>span{display:block;translate:0 -.06em}
.main-menu nav a:focus-visible{outline:2px solid #ddff3f;outline-offset:4px}

.main-menu nav a:hover,.main-menu nav a:focus-visible{color:#171715}

/* Owner-controlled thumbnails retain their crop in every index. */
#index-drawer .work-image.has-crop img{width:100%;height:100%}

.gallery-frame-caption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:6px 9px;background:#08090ca6;color:#fff;font:11px/1.4 var(--sans);border-radius:3px}