/* Photo wall close view. Every print/tag is the same physical node when held. */
.huala-detail { color:#343b2b; }
.huala-detail .huala-wall-background { inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.huala-detail .huala-wall { --board-top:clamp(210px,25svh,280px); --board-width:min(76vw,calc((100svh - var(--board-top) - 90px)*2.065)); min-height:100svh; padding:0; }
.huala-detail .wall-board-group { position:absolute; top:var(--board-top); left:calc((100% - var(--board-width))/2); width:var(--board-width); aspect-ratio:2.065; }
.huala-detail .huala-board { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; filter:drop-shadow(7px 16px 12px #57391a38); }
.huala-detail .huala-board-second { display:none; }
.huala-detail .wall-print-slot { top:6.2%; width:22%; max-width:none; aspect-ratio:auto; z-index:10; }
.huala-detail .wall-slot-1 { left:3.3%; --print-angle:-1.2deg; }
.huala-detail .wall-slot-2 { left:27.1%; --print-angle:1deg; }
.huala-detail .wall-slot-3 { left:50.9%; --print-angle:-.7deg; }
.huala-detail .wall-slot-4 { left:74.7%; --print-angle:1.1deg; }
.huala-detail .wall-print { padding:4px; border:0; border-radius:1px; background:#fff9e9; --pickup-perspective:1400px; --pickup-tilt:0deg; --pickup-angle:var(--print-angle); }
.huala-detail .wall-print:not(.is-lifted) { box-shadow:3px 6px 6px #58391b48,0 1px 2px #58391b40; }
.huala-detail .wall-print img { height:auto; }
.huala-detail .huala-pocket,.huala-detail .huala-clip,.huala-detail .huala-intro-clip { position:absolute; z-index:12; pointer-events:none; user-select:none; }
.huala-detail .huala-pocket { width:23.5%; height:10.6%; top:77.5%; filter:drop-shadow(0 4px 3px #50321b40); }
.huala-detail .huala-clip { width:3.3%; height:5.6%; top:3%; filter:drop-shadow(1px 2px 1px #54351650); }
.huala-detail .huala-pocket.wall-fixture-1 { left:2.55%; }
.huala-detail .huala-pocket.wall-fixture-2 { left:26.35%; }
.huala-detail .huala-pocket.wall-fixture-3 { left:50.15%; }
.huala-detail .huala-pocket.wall-fixture-4 { left:73.95%; }
.huala-detail .huala-clip.wall-fixture-1 { left:12.65%; }
.huala-detail .huala-clip.wall-fixture-2 { left:36.45%; }
.huala-detail .huala-clip.wall-fixture-3 { left:60.25%; }
.huala-detail .huala-clip.wall-fixture-4 { left:84.05%; }
.huala-detail .wall-intro { position:absolute; left:calc((100% - var(--board-width))/2 + 14px); top:clamp(76px,8svh,100px); width:clamp(340px,29vw,460px); min-height:0; margin:0; padding:23px 28px 22px; border-radius:2px; color:#38442f; --pickup-perspective:1400px; --pickup-tilt:0deg; --pickup-angle:-2deg; z-index:15; }
.huala-detail .wall-intro:not(.is-lifted) { box-shadow:3px 7px 7px #61432145,0 1px 2px #61432135; }
.huala-detail .wall-intro:after { display:none; }
.huala-detail .wall-intro-heading { display:flex; align-items:center; gap:17px; }
.huala-detail .wall-app-icon { width:46px; height:46px; flex-shrink:0; border-radius:11px; }
.huala-detail .wall-intro h1 { font:600 clamp(26px,2.1vw,32px)/1.3 'Kaiti SC','STKaiti','KaiTi',serif; letter-spacing:.1em; }
.huala-detail .wall-intro-slogan { margin:10px 0 0; font:400 clamp(16px,1.2vw,20px)/1.5 'Kaiti SC','STKaiti','KaiTi',serif; letter-spacing:.04em; }
.huala-detail .wall-intro-reading { display:none; margin-top:23px; padding-top:20px; border-top:1px solid #a4a27365; color:#35412e; font-size:16px; line-height:1.9; }
.huala-detail .wall-intro-reading p+p { margin-top:15px; }
.huala-detail .wall-intro-sign { margin-top:24px!important; color:#61623d; font-family:'Kaiti SC','STKaiti','KaiTi',serif; }
.huala-detail .wall-intro.is-reading-letter .wall-intro-reading { display:block; }
.huala-detail .huala-intro-clip { width:34px; height:28px; top:calc(clamp(76px,8svh,100px) - 16px); left:calc((100% - var(--board-width))/2 + 175px); z-index:18; filter:drop-shadow(1px 2px 1px #54351650); }
.huala-detail .huala-photo-hint { right:10%; bottom:24px; top:auto; font-size:20px; color:#48432d; transform:rotate(-3deg); }
#huala-zoom-close { padding:9px 22px; border-radius:25px; font:17px/1.4 'Kaiti SC','STKaiti','KaiTi',serif; }
.huala-detail .desk-photo-controls { color:#333c2b; }
.huala-detail .desk-photo-controls p { display:table; margin:0 auto 9px; padding:4px 10px; border-radius:13px; color:#35412e; background:#fff0d5e6; text-shadow:none; }
.huala-detail .desk-photo-controls button { color:#39442e; }
.huala-detail .wall-print-slot.has-lifted-print { z-index:60; }
.huala-detail.photo-lifted .wall-print-slot:has(.is-lifted) { z-index:65; }
.huala-detail .wall-intro.is-lifted { z-index:65; }
.huala-detail .wall-intro.is-returning { z-index:60; }
.huala-detail.object-lifted :is(.huala-board,.huala-pocket,.huala-clip,.huala-intro-clip) { filter:brightness(.88); }
body.huala-detail-open .room,body.huala-detail-returning .room { transform-origin:20% 42%; }
.huala-detail.is-open .huala-wall-background { animation:wall-room-arrive 1050ms cubic-bezier(.2,.65,.25,1) both; }
.huala-detail.is-open .huala-wall { animation:wall-content-arrive 1050ms cubic-bezier(.2,.65,.25,1) both; }
@keyframes wall-room-arrive { 0% { opacity:0; transform:scale(.88) translateX(-3%); } 24% { opacity:.25; } 100% { opacity:1; transform:none; } }
@keyframes wall-content-arrive { 0%,18% { opacity:0; transform:scale(.88) translateX(-3%); } 100% { opacity:1; transform:none; } }
@media(max-width:850px) {
 .huala-detail .huala-wall-background { object-position:42% center; }
 .huala-detail .huala-wall { --mobile-board-width:min(88vw,600px); --mobile-row-height:calc(var(--mobile-board-width)*.94); min-height:calc(420px + var(--mobile-row-height)*2); }
 .huala-detail .wall-intro { left:8%; top:110px; width:min(84%,460px); padding:21px 23px; margin:0; --pickup-tilt:0deg; --pickup-angle:-2deg; }
 .huala-detail .wall-intro h1 { font-size:27px; }
 .huala-detail .wall-intro-slogan { font-size:17px; }
 .huala-detail .wall-app-icon { width:44px; height:44px; }
 .huala-detail .huala-intro-clip { top:94px; left:45%; width:32px; height:26px; }
 .huala-detail .wall-board-group { top:290px; left:calc((100% - var(--mobile-board-width))/2); width:var(--mobile-board-width); height:calc(var(--mobile-row-height)*2 + 46px); aspect-ratio:auto; }
 .huala-detail .huala-board { top:0; height:var(--mobile-row-height); }
 .huala-detail .huala-board-second { display:block; top:calc(var(--mobile-row-height) + 46px); }
 .huala-detail .wall-print-slot { top:20px; width:43%; max-width:none; }
 .huala-detail .wall-slot-1,.huala-detail .wall-slot-3 { left:4.2%; }
 .huala-detail .wall-slot-2,.huala-detail .wall-slot-4 { left:52.8%; }
 .huala-detail .wall-slot-3,.huala-detail .wall-slot-4 { top:calc(var(--mobile-row-height) + 66px); }
 .huala-detail .wall-print { padding:4px; --pickup-tilt:0deg; --pickup-perspective:1400px; }
 .huala-detail .huala-pocket { width:46%; height:calc(var(--mobile-board-width)*.09); top:calc(var(--mobile-row-height) - var(--mobile-board-width)*.20); }
 .huala-detail .huala-pocket.wall-fixture-1,.huala-detail .huala-pocket.wall-fixture-3 { left:2.7%; }
 .huala-detail .huala-pocket.wall-fixture-2,.huala-detail .huala-pocket.wall-fixture-4 { left:51.3%; }
 .huala-detail .huala-pocket.wall-fixture-3,.huala-detail .huala-pocket.wall-fixture-4 { top:calc(var(--mobile-row-height)*2 + 46px - var(--mobile-board-width)*.20); }
 .huala-detail .huala-clip { top:11px; width:7%; height:calc(var(--mobile-board-width)*.057); }
 .huala-detail .huala-clip.wall-fixture-1,.huala-detail .huala-clip.wall-fixture-3 { left:22.2%; }
 .huala-detail .huala-clip.wall-fixture-2,.huala-detail .huala-clip.wall-fixture-4 { left:70.8%; }
 .huala-detail .huala-clip.wall-fixture-3,.huala-detail .huala-clip.wall-fixture-4 { top:calc(var(--mobile-row-height) + 57px); }
 .huala-detail .huala-photo-hint { top:251px; right:9%; bottom:auto; font-size:17px; }
 .huala-detail .desk-return { top:calc(365px + var(--mobile-row-height)*2); bottom:auto; font-size:17px; white-space:nowrap; }
 .huala-detail .wall-intro.is-reading-letter .wall-intro-reading { font-size:16px; line-height:1.9; }
 .huala-detail .wall-intro-reading p+p { margin-top:14px; }
}
@media(prefers-reduced-motion:reduce) { .huala-detail.is-open .huala-wall-background,.huala-detail.is-open .huala-wall { animation:none!important; transform:none!important; } }