/* Home is an immersive exhibition. Works retains its independent browsing grid. */
.eye-active:not(.gallery-entry) .experience-header{background:transparent;color:#fff;text-shadow:0 1px 16px #0005}
.eye-active:not(.gallery-entry) .experience-header .signature-eye{content:url('assets/identity/eye-on-dark.svg')}
.eye-world{background:#08090c}
.gallery-intro{overflow:clip}
#eye-world .gallery-cinema{display:block;min-height:0;height:100%;padding:0;gap:0;overflow:hidden;background:#08090c;color:#fff}
#eye-world .gallery-cinema .gallery-media{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;gap:0;transform:translateY(calc(var(--travel,0)*12%));will-change:transform}
.gallery-cinema picture{display:block;width:100%;height:100%}
#eye-world .gallery-cinema img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;transform:scale(calc(1 + var(--distance,0)*.07));user-select:none}
.gallery-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0003 0%,transparent 20%,transparent 50%,#0002 73%,#0009 100%)}
#eye-world .gallery-cinema .gallery-caption{position:absolute;inset:auto 0 0;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:28px;padding:0 clamp(28px,4.5vw,88px) calc(42px + env(safe-area-inset-bottom));border:0;width:100%;height:auto;max-width:none;box-sizing:border-box;transform:translateY(calc(var(--travel,0)*-45px));opacity:calc(1 - var(--distance,0)*.65)}
.gallery-cinema .gallery-copy{max-width:min(76vw,1050px)}
#eye-world .gallery-cinema .gallery-edition{display:block;margin:0 0 18px;color:inherit;opacity:.75;font:11px/1.5 var(--sans);letter-spacing:.08em}
#eye-world .gallery-cinema .gallery-open{display:flex;align-items:baseline;gap:22px;width:auto;max-width:100%;color:inherit}
#eye-world .gallery-cinema .gallery-open h2{font:500 clamp(50px,6.3vw,112px)/.98 var(--display);letter-spacing:-.055em;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;margin:0}
#eye-world .gallery-cinema .gallery-open>span{display:block;font-size:clamp(30px,3.8vw,60px);margin:0;transition:transform .5s cubic-bezier(.16,1,.3,1)}
#eye-world .gallery-cinema .gallery-open:hover>span{transform:translate(6px,-6px)}
#eye-world .gallery-cinema .gallery-credit{font-size:13px;line-height:1.5;letter-spacing:0;margin:20px 0 0;opacity:.85}
#eye-world .gallery-cinema .gallery-next{width:auto;border:0;padding:8px 0;gap:18px;font-size:12px;min-width:70px;min-height:48px;align-items:center;flex:none;color:inherit}
#eye-world .gallery-cinema .gallery-next span{font-size:32px;transition:transform .4s}
.gallery-cinema .gallery-next:hover span{transform:translateY(5px)}
.gallery-cinema button:focus-visible{outline:2px solid currentColor;outline-offset:8px}
.gallery-cinema.is-media-unavailable .gallery-media{display:none}
#eye-world .gallery-cinema img[hidden]{display:none}
/* A minimal introduction, with the rhythm carried by typography. */
#index-drawer #panel-about{min-height:calc(100dvh - 96px);display:flex;flex-direction:column}
#index-drawer #panel-about[hidden]{display:none}
.about-identity{display:grid;grid-template-columns:minmax(140px,.65fr) 1.35fr;align-items:start;align-content:center;gap:7vw;flex:1;min-height:58vh;padding:56px 0 80px}
.about-identity h2{font:400 clamp(40px,4vw,56px)/1.25 var(--sans);letter-spacing:-.045em;margin:10px 0 0}
.about-identity h2>span{display:block;font:400 11px/1.2 var(--display);letter-spacing:.08em;margin:13px 0 0 2px;opacity:.65}
.about-professions p{font:500 clamp(32px,3.6vw,58px)/1.2 var(--display);letter-spacing:-.04em;word-spacing:.06em;margin:0;padding:10px 0;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.about-professions p:hover{transform:translateX(12px)}
#index-drawer[open] .about-professions p{animation:profession-enter .8s cubic-bezier(.16,1,.3,1) both}
#index-drawer[open] .about-professions p:nth-child(2){animation-delay:.08s}#index-drawer[open] .about-professions p:nth-child(3){animation-delay:.16s}
@keyframes profession-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
#detail .detail-gallery figure.media-unavailable{display:none}
#detail .detail-gallery:empty{display:none}
@media(max-width:800px) and (orientation:portrait){
 #eye-world .gallery-cinema .gallery-caption{padding:0 24px calc(30px + env(safe-area-inset-bottom));gap:18px}
 .gallery-cinema .gallery-copy{max-width:calc(100% - 60px)}
 #eye-world .gallery-cinema .gallery-open{gap:10px}
 #eye-world .gallery-cinema .gallery-open h2{font-size:clamp(37px,10vw,72px);line-height:1.02;word-break:normal}
 #eye-world .gallery-cinema .gallery-open>span{font-size:26px}
 #eye-world .gallery-cinema .gallery-edition{margin-bottom:12px;font-size:10px}
 #eye-world .gallery-cinema .gallery-credit{margin-top:13px;font-size:11px}
 #eye-world .gallery-cinema .gallery-next{flex-direction:column-reverse;gap:7px;min-width:40px;font-size:10px}
 .gallery-shade{background:linear-gradient(180deg,#0003 0%,transparent 20%,transparent 55%,#0002 73%,#0009 100%)}
 .about-identity{grid-template-columns:1fr;gap:42px;padding:40px 0 64px;align-content:center}
 .about-identity h2{font-size:38px;margin:0}
 .about-professions p{font-size:clamp(30px,6.8vw,48px);padding:7px 0}
}

/* Original character artwork gets space of its own, without cropping. */
#eye-world .gallery-character{background:#7752e8}
#eye-world .gallery-character .gallery-media{inset:5% 4% 5% 38%;width:auto;height:auto}
#eye-world .gallery-character img{object-fit:contain;filter:drop-shadow(0 24px 24px #341b681f)}
.gallery-character .gallery-shade{background:none}
@media(max-width:800px) and (orientation:portrait){
 #eye-world .gallery-character .gallery-media{inset:10% 4% 20%;width:auto;height:auto}
}
@media(max-height:520px) and (orientation:landscape){
 #eye-world .gallery-cinema .gallery-caption{padding-bottom:22px}
 #eye-world .gallery-cinema .gallery-open h2{font-size:46px}
 #eye-world .gallery-cinema .gallery-edition{margin-bottom:8px}
 #eye-world .gallery-cinema .gallery-credit{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
 #eye-world .gallery-cinema .gallery-media,#eye-world .gallery-cinema img,#eye-world .gallery-cinema .gallery-caption{transform:none;opacity:1;will-change:auto}
 #index-drawer[open] .about-professions p{animation:none}.about-professions p{transition:none}
}

#eye-world .gallery-cinema.gallery-dark-ink{color:#121619}
.gallery-dark-ink .gallery-shade{background:none}
.eye-active.gallery-dark-ink:not(.gallery-entry) .experience-header{color:#121619;text-shadow:none}
.eye-active.gallery-dark-ink:not(.gallery-entry) .experience-header .signature-eye{content:url('assets/identity/eye.svg')}

.gallery-cinema .gallery-companion{display:none}
@media(max-width:800px) and (orientation:portrait){
 #eye-world .gallery-cinema.has-mobile-pair .gallery-media{display:grid;grid-template-rows:1fr 1fr;gap:0}
 .gallery-cinema.has-mobile-pair picture{min-height:0;overflow:hidden}
 .gallery-cinema .gallery-companion{display:block}
 #eye-world .gallery-cinema .gallery-companion img{object-position:43% 50%}
 #eye-world .gallery-cinema.companion-unavailable .gallery-media{grid-template-rows:1fr}
 #eye-world .gallery-cinema.companion-unavailable .gallery-companion{display:none}
}

@media (min-width:801px) and (max-width:1100px) and (orientation:portrait){
  #eye-world .gallery-character .gallery-media{inset:10% 12% 20%;width:auto;height:auto}
}

/* Keep the opening mobile crop while native browser chrome changes height.
   The soft image backdrop extends only the newly exposed edges. */
#eye-world .gallery-cinema>.gallery-backdrop{display:none}
@media(max-width:800px) and (orientation:portrait){
 #eye-world .gallery-cinema>.gallery-backdrop{display:block;position:absolute;inset:-18px;width:calc(100% + 36px);height:calc(100% + 36px);filter:blur(14px);transform:none;pointer-events:none}
 #eye-world .gallery-cinema:not(.gallery-character) .gallery-media{inset:auto 0;top:0;height:var(--gallery-art-height,100%);transform:none;opacity:1;will-change:auto}
 #eye-world .gallery-cinema img{transform:none}
 #eye-world .gallery-character>.gallery-backdrop{display:none}
}

@media(max-width:800px) and (orientation:portrait){
 #eye-world .gallery-portrait-right img{object-position:100% 50%}
}

@media(max-width:800px) and (orientation:portrait){
 #eye-world.gallery-extended .gallery-cinema:not(.gallery-character) .gallery-media{mask-image:linear-gradient(#000 calc(100% - 36px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
}

@media(min-width:801px) and (max-width:1100px) and (orientation:portrait){
 #eye-world .gallery-portrait-right img{object-position:100% 50%;transform:scale(1.04);transform-origin:right center}
}

@media(max-width:1100px) and (orientation:portrait){
 #eye-world .gallery-packaging-portrait img{object-position:76% 50%}
}

/* Rabbit Kim: one continuous paper surface, with the full drawing intact. */
#eye-world .gallery-cinema[data-work^="rabbit-persona-"]{background:#f1ede3 url('/rabbit-paper.png') center/cover;color:#121619;isolation:isolate}
#eye-world .gallery-cinema[data-work^="rabbit-persona-"] .gallery-media{inset:4% 2% 12%;width:auto;height:auto;transform:none;mask-image:none;-webkit-mask-image:none;mix-blend-mode:multiply}
#eye-world .gallery-cinema[data-work^="rabbit-persona-"] img{object-fit:contain;transform:none;filter:brightness(1.08);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
#eye-world .gallery-cinema[data-work^="rabbit-persona-"]>.gallery-backdrop,
#eye-world .gallery-cinema[data-work^="rabbit-persona-"] .gallery-shade{display:none}
#eye-world .gallery-cinema[data-work^="rabbit-persona-"] .gallery-open h2{font-size:clamp(38px,5vw,76px)}
@media(max-width:800px) and (orientation:portrait){
 #eye-world .gallery-cinema[data-work^="rabbit-persona-"] .gallery-media{inset:0;width:100%;height:var(--gallery-art-height,100%)}
 #eye-world .gallery-cinema[data-work^="rabbit-persona-"] img{mask-image:none;-webkit-mask-image:none}
}