/* An opening artwork, with no site chrome across the colour. */
body.gallery-entry .experience-header{display:none}
.gallery-intro{background:#faf9f6;display:block;padding:0!important;min-height:300px;overflow:hidden;isolation:isolate}
#colour-art[hidden]{display:none}
#colour-art{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1}
.colour-slogan{position:absolute;left:50%;top:48.25%;z-index:2;display:block;color:#000;font:500 clamp(11px,1.05vw,15px)/1.6 var(--sans);letter-spacing:-.025em;white-space:pre;text-align:center;pointer-events:none;user-select:none;transform:translate(-50%,-50%) translate(var(--slogan-x,0px),var(--slogan-y,0px)) rotate(var(--slogan-turn,0deg)) scale(var(--slogan-scale-x,1),var(--slogan-scale-y,1));transform-origin:center;will-change:transform;transition:opacity .5s ease}
.gallery-intro.is-discovering .colour-slogan,.gallery-intro.has-discovery .colour-slogan{opacity:0}
.colour-fallback .colour-slogan{top:49%;transform:translate(-50%,-50%);will-change:auto}
.colour-touch{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;cursor:grab;border:0;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;user-select:none}
.colour-touch.is-touching{cursor:grabbing}
.gallery-intro .colour-touch:focus-visible{outline:1px solid #7352ee;outline-offset:-12px}
.colour-fallback-surface{display:block;position:absolute;left:50%;top:49%;width:min(76vw,65vh,680px);height:auto;aspect-ratio:1;background:linear-gradient(110deg,#f60351 0%,#fc268e 20%,#ffd9e9 37%,#fafb83 50%,#d4fa13 62%,#4824ed 82%,#a65df4);border-radius:48% 52% 49% 51%;transform:translate(-50%,-50%) rotate(-12deg);filter:hue-rotate(var(--colour-turn,0deg));box-shadow:inset -22px -28px 42px #21104645,inset 16px 22px 36px #ffffff80;transition:filter .8s,border-radius .8s}
.colour-ready .colour-fallback-surface{visibility:hidden}
.colour-discovery{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:70px 25px 90px}
.discovered-work{display:flex;flex-direction:column;align-items:center;max-width:100%;width:min(52vw,700px);padding:0;pointer-events:auto;text-align:left;touch-action:pan-y pinch-zoom;color:#20201e;transition:opacity .2s}
.discovered-work[hidden]{display:none}.discovered-work:disabled{cursor:default;pointer-events:none}
.discovered-work img{height:auto;width:auto;max-width:100%;max-height:49svh;object-fit:contain;user-select:none}
.discovered-work[data-kind=label] img{clip-path:circle(49.95%);aspect-ratio:1;max-height:47svh}
.discovered-caption{display:flex;align-items:baseline;justify-content:center;gap:14px;width:100%;margin-top:22px;font:500 clamp(20px,2vw,30px)/1.1 var(--display);letter-spacing:-.035em;text-wrap:balance;text-align:center}
#discovered-credit{display:block;margin-top:8px;font:11px/1.5 var(--sans);color:#62615d;text-align:center}
.colour-next{position:absolute;z-index:4;bottom:calc(18px + env(safe-area-inset-bottom));left:calc(50% - 24px);height:48px;width:48px;font:30px/1 var(--sans);color:#272727}
.colour-next[hidden]{display:none}
.has-discovery.colour-fallback .colour-fallback-surface{transform:translate(-50%,-50%) rotate(-22deg) scale(.7);opacity:.18}
#index-drawer .footer-wordmark{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:.16em;white-space:nowrap;width:max-content;max-width:100%;font-size:clamp(54px,13vw,130px)}
#index-drawer .footer-wordmark .footer-eye{display:block;flex:none;width:.75em;height:.66em;max-width:none;margin:0;vertical-align:initial}
.colour-pause,.colour-scroll{position:absolute;z-index:3;bottom:calc(18px + env(safe-area-inset-bottom));min-height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;padding:0;color:#272727}
.colour-pause{left:22px;font:15px var(--sans);opacity:.55}.colour-pause:hover,.colour-pause:focus-visible{opacity:1}.colour-scroll{right:22px;font:34px/1 var(--sans);transition:transform .3s}.colour-scroll:hover{transform:translateY(4px)}
.eye-active .experience-header{height:80px;background:#faf9f6}
.eye-active .experience-header nav{gap:28px}.eye-active .experience-header nav button{min-width:44px;min-height:44px;gap:6px;justify-content:center}.eye-active .experience-header a{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
.gallery-scene:not(.gallery-intro) .gallery-media{transform:scale(calc(1 - var(--distance,0)*.035)) translateY(calc(var(--distance,0)*18px));opacity:calc(1 - var(--distance,0)*.14)}
.gallery-scene:not(.gallery-intro) .gallery-copy{transform:translateY(calc(var(--distance,0)*12px))}
.section-eye{display:none}.footer-eye{width:50px;height:42px;vertical-align:middle;margin-left:18px}.chat-identity-eye{width:36px;height:30px;object-fit:contain}
/* About has its own typographic scale; the eye remains a small signature. */
body:has(#panel-about:not([hidden])) #index-drawer{width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;background:#e1ff35;color:#1b241a}
body:has(#panel-about:not([hidden])) #index-drawer .index-tabs{background:#e1ff35;color:#1b241a;border-color:#1b241a30}
body:has(#panel-about:not([hidden])) #index-drawer .index-tabs button[aria-selected=true]{border-color:#1b241a}
#index-drawer #panel-about{background:transparent}
#index-drawer .about-main{grid-template-columns:1.15fr 1fr;gap:8vw;margin:60px 0 70px}
#index-drawer .about-heading h2{font:500 clamp(48px,6.2vw,106px)/.99 var(--display);letter-spacing:-.065em}
#index-drawer .about-heading h2>span{display:block;white-space:nowrap}
.about-heading h2 em{font-family:var(--display);font-style:normal;font-weight:500}
#index-drawer .about-heading>p{font-size:13px;margin-bottom:30px}.about-eye{display:none}
#index-drawer .about-copy{padding:65px 0 0;max-width:520px}#index-drawer .about-copy>p:first-child{font-size:clamp(25px,3.2vw,46px);line-height:1.12;letter-spacing:-.035em}#index-drawer .about-copy>p[lang=ko]{font-size:13px;line-height:1.9;margin-top:30px}#index-drawer .about-name{margin-top:48px}#index-drawer .hello-button{background:#1b241a;color:#fff;border-radius:26px;margin-top:35px}#index-drawer .email-link{color:inherit}#index-drawer .about footer{border-color:#1b241a30}
@media(max-width:700px){
 .eye-active .experience-header{height:74px;padding:calc(10px + env(safe-area-inset-top)) 18px 10px}.eye-active .experience-signature{font-size:23px;gap:6px}.signature-eye{width:29px;height:25px}.eye-active .experience-header nav{gap:8px}.eye-active .experience-header nav button,.eye-active .experience-header nav a{font-size:12px;gap:4px}.experience-header .talk-indicator,.experience-header #index-trigger>span{display:none}
 .colour-fallback-surface{width:80vw;height:auto;transform:translate(-50%,-50%) rotate(8deg)}.colour-pause{left:15px}.colour-scroll{right:15px}
 .colour-discovery{padding:64px 28px 86px}.discovered-work{width:100%}.discovered-work img{max-height:46svh}.discovered-work[data-kind=label] img{max-height:43svh}.discovered-caption{font-size:23px;margin-top:18px;gap:10px}#discovered-credit{max-width:260px;font-size:10px}
 #index-drawer .about-main{grid-template-columns:1fr;gap:44px;margin:38px 0 50px}#index-drawer .about-heading h2{font-size:clamp(42px,12.3vw,80px)}#index-drawer .about-copy{padding:0;max-width:none}#index-drawer .about-copy>p:first-child{font-size:32px}#index-drawer .about-copy>p[lang=ko]{font-size:12px}#index-drawer .about-name{margin-top:30px}
}
@media(max-width:370px){.eye-active .experience-header nav{gap:3px}.eye-active .experience-signature{font-size:21px}}
@media(max-height:480px) and (min-width:701px){.colour-discovery{padding:30px 16px 58px}.discovered-work{width:46vw}.discovered-work img,.discovered-work[data-kind=label] img{max-height:49svh}.discovered-caption{font-size:18px;margin-top:10px}#discovered-credit{margin-top:4px;font-size:9px}.colour-next,.colour-pause,.colour-scroll{bottom:8px}}
@media(prefers-reduced-motion:reduce){.colour-fallback-surface,.colour-scroll{transition:none}.colour-slogan{transform:translate(-50%,-50%);transition:none;will-change:auto}.gallery-scene .gallery-media,.gallery-scene .gallery-copy{transform:none!important;opacity:1!important}}

#index-drawer .about-heading>p.intent-translation{margin:24px 0 0;font:15px/1.7 var(--sans);letter-spacing:-.025em}

#index-drawer .about-copy{padding-top:24px}#index-drawer .about-name{margin-top:0}
@media(max-width:700px){#index-drawer .about-copy{padding-top:0}}