.gallery{padding-block:clamp(36px,5vw,74px) 60px}
.gallery-heading{margin-bottom:clamp(21px,4vw,40px)}
.gallery-heading h1{font:600 clamp(36px,6vw,74px)/1.15 var(--serif);letter-spacing:-.06em;margin:0 0 8px}
.gallery-heading p{color:#cfc0b1;margin:0;font-size:15px}
.gallery-scenes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.gallery-scene{grid-column:span 4;position:relative;display:flex;align-items:end;isolation:isolate;overflow:hidden;min-height:390px;color:#fff5e6;background:#23181f;--actor-x:62%;--actor-width:95%;--veil:#170e17;--tone:#e6c39b}
.gallery-scene::after{content:"";position:absolute;inset:8px;border:1px solid #ffe8bd45;pointer-events:none;z-index:3}
.gallery-room,.gallery-character{position:absolute;pointer-events:none;user-select:none}
.gallery-room{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3;transition:filter .35s,transform .5s;filter:brightness(.83)}
.gallery-character{bottom:0;left:var(--actor-x);width:var(--actor-width);height:100%;object-fit:contain;object-position:center bottom;transform:translateX(-50%);filter:drop-shadow(0 5px 14px #1d1316a0);z-index:-2;transition:transform .45s}
.gallery-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--veil) 0%,#160e17d1 17%,#140d1433 52%,transparent 76%)}
.gallery-copy{padding:clamp(16px,2.8vw,37px);max-width:37ch}
.gallery-name{color:var(--tone);font-weight:700;font-size:14px;margin:0 0 5px}
.gallery-copy h2{font:600 clamp(25px,2.65vw,39px)/1.18 var(--serif);letter-spacing:-.045em;text-wrap:balance;margin:0 0 7px}
.gallery-intro{color:#f6e8db;font-size:14px;line-height:1.6;margin:0 0 14px;max-width:30ch}
.gallery-enter{display:inline-flex;align-items:center;min-height:40px;padding:4px 12px;border:1px solid #efd5b27a;background:#21181cb8;font-size:13px;font-weight:650}
.gallery-scene:is(:hover,:focus-visible) .gallery-room{filter:brightness(1.06);transform:scale(1.04)}
.gallery-scene:is(:hover,:focus-visible) .gallery-character{transform:translateX(-50%) translateY(-4px)}
.gallery-scene:is(:hover,:focus-visible) .gallery-enter{background:#f0ddbf;color:#291c23}
.gallery-scene[data-reader=gihwa]{grid-column:span 7;min-height:490px;--actor-x:70%;--actor-width:73%;--veil:#28161e;border-radius:58px 2px 2px 2px}
.gallery-scene[data-reader=hwaryeong]{grid-column:span 5;--actor-x:59%;--actor-width:101%;--veil:#270f17;--tone:#f4ba8b;border-radius:2px 58px 2px 2px}
.gallery-scene[data-reader=munyeong]{--actor-x:68%;--veil:#141c2c;--tone:#d5d4ed}
.gallery-scene[data-reader=baekhwa]{--actor-x:59%;--veil:#222026;--tone:#f0e6cf;border-radius:115px 115px 2px 2px}
.gallery-scene[data-reader=iseon]{--actor-x:64%;--veil:#272119;--tone:#ebd2a2}
.gallery-scene[data-reader=okbun]{grid-column:span 5;--actor-x:64%;--veil:#23241a;--tone:#e1d5a4;border-radius:2px 2px 2px 46px}
.gallery-scene[data-reader=cheongap]{grid-column:span 7;--actor-x:72%;--actor-width:73%;--veil:#13182c;--tone:#e4c89d;border-radius:2px 2px 46px 2px}
.gallery-scene[data-reader=gihwa]::before,.gallery-scene[data-reader=cheongap]::before{background:linear-gradient(90deg,var(--veil) 0%,#160e17b8 28%,transparent 70%),linear-gradient(0deg,var(--veil),transparent 55%)}
.gallery-arrival{animation:gallery-arrival .42s ease-out both}
@keyframes gallery-arrival{from{opacity:.45;translate:0 8px}to{opacity:1;translate:0}}
@media(max-width:900px) and (min-width:701px){
 .gallery-scene{grid-column:span 6;min-height:395px}
 .gallery-scene[data-reader]{grid-column:span 6}
 .gallery-scene[data-reader=cheongap]{grid-column:span 12}
}
@media(max-width:700px){
 .gallery{width:calc(100% - 30px);padding-block:32px 40px}
 .gallery-scenes{display:flex;flex-direction:column;gap:20px}
 .gallery-scene[data-reader]{min-height:clamp(430px,130vw,610px);--actor-width:99%;--actor-x:55%;border-radius:0}
 .gallery-scene[data-reader=gihwa]{border-radius:48px 0 0 0;--actor-x:60%}
 .gallery-scene[data-reader=hwaryeong]{margin-left:12px;border-radius:0 43px 0 0;--actor-x:49%}
 .gallery-scene[data-reader=munyeong]{margin-right:16px;--actor-x:57%}
 .gallery-scene[data-reader=baekhwa]{border-radius:85px 85px 0 0;--actor-x:51%}
 .gallery-scene[data-reader=iseon]{margin-left:15px;--actor-x:52%}
 .gallery-scene[data-reader=okbun]{margin-right:10px;border-radius:0 0 0 43px}
 .gallery-scene[data-reader=cheongap]{border-radius:0 0 43px 0;--actor-x:60%}
 .gallery-scene[data-reader]::before{background:linear-gradient(0deg,var(--veil),#160e17eb 15%,#160e1759 41%,transparent 68%)}
 .gallery-copy{padding:19px 19px 24px}
 .gallery-copy h2{font-size:clamp(26px,7.4vw,40px)}
 .gallery-character{height:94%}
 .gallery-room{object-position:54% center}
}
@media(prefers-reduced-motion:reduce){.gallery-scene,.gallery-room,.gallery-character{animation:none!important;transition:none!important}}

/* The entrance reads as a wall of illustrated covers. */
.gallery-page{background:radial-gradient(ellipse at 25% 0%,#2d162e,transparent 38rem),var(--night)}
.gallery{padding-top:clamp(36px,5vw,72px)}
.gallery-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;border-bottom:1px solid #bc94694d;padding-bottom:20px}
.gallery-heading h1{color:var(--paper);margin:0}
.gallery-heading p{color:var(--gold);padding-bottom:4px}
.gallery-scenes{gap:8px}
.gallery-scene[data-reader]{border-radius:0}
.gallery-scene::after{inset:0;border-color:#e6c48c40}
.gallery-room{filter:brightness(.59) saturate(.86)}
.gallery-scene:is(:hover,:focus-visible) .gallery-room{filter:brightness(.81) saturate(.98)}
.gallery-copy{max-width:31ch}
.gallery-enter{padding:0;background:none;border:0;border-bottom:1px solid var(--tone);color:var(--tone)}
.gallery-scene:is(:hover,:focus-visible) .gallery-enter{background:none;color:#fff}
@media(max-width:700px){
  .gallery-heading{display:block;padding-bottom:16px}
  .gallery-heading p{margin-top:8px}
  .gallery-scenes{gap:12px}
  .gallery-scene[data-reader]{margin-inline:0;min-height:clamp(390px,112vw,530px)}
}