/* Gallery masthead and directional navigation. */
body .header{position:sticky;top:0;z-index:40;height:100px;padding:0 4.5%;border-bottom:1px solid var(--line);background:var(--paper);transform-origin:50% 0;transform:perspective(1200px) translate3d(0,0,0) rotateX(0deg);transition:transform .68s cubic-bezier(.45,0,.2,1);will-change:transform}
body.narrative-home .header{background:linear-gradient(120deg,#20251ff5,#30312bf0);border-color:#c1b79b40;backdrop-filter:blur(18px)}
body .header.nav-hidden{transform:perspective(1200px) translate3d(0,-105%,0) rotateX(-6deg);pointer-events:none}
/* Keyboard focus reveals the header through navigation.js focusin; retained focus must not override scroll hiding. */
body .header .brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex-shrink:0}
body .header .brand strong{font-size:27px;letter-spacing:.17em;font-weight:400}
body .header .brand>span{display:block;font:italic 16px/1.3 var(--serif);letter-spacing:.04em;opacity:.75}
body .header .desktop-nav{display:flex;margin:0 25px;gap:clamp(18px,2.5vw,42px)}
body .header .desktop-nav a{font-size:15px;font-weight:400;line-height:1.4;min-height:48px;display:flex;align-items:center;padding:12px 2px;white-space:nowrap}
body.narrative-home .header .desktop-nav a{color:#f5f1e7}
body .header .desktop-nav a::after{background:currentColor;opacity:.7}
body .header .desktop-nav a[aria-current=page]::after,body .header .desktop-nav a:hover::after{transform:scaleX(1)}
body .header .header-actions{gap:20px}
body .mobile-menu{position:fixed;top:100px;bottom:0;overflow:auto;z-index:39;padding:32px 7% 60px;background:var(--paper);display:flex;flex-direction:column;gap:0;counter-reset:gallery-menu}
body.narrative-home .mobile-menu{background:linear-gradient(135deg,#252b24,#38372e);color:#f5f1e7}
body .mobile-menu a{counter-increment:gallery-menu;display:flex;align-items:center;gap:24px;min-height:85px;padding:18px 0;border-bottom:1px solid #a7aa9040;font:400 clamp(24px,5vw,34px)/1.4 var(--kserif)}
body .mobile-menu a::before{content:'0' counter(gallery-menu);font:italic 15px var(--serif);opacity:.6}
body .mobile-menu a::after{content:'↗';margin-left:auto;font:24px var(--serif);opacity:.65}
body .mobile-menu a[aria-current=page]{color:var(--green)}
@media(max-width:1100px){body .header .desktop-nav{gap:18px;margin:0 16px}body .header .desktop-nav a{font-size:14px}body .header .motion-text{display:none}}
@media(min-width:901px){body .mobile-menu{display:none!important}body .header .menu-toggle{display:none}}
@media(max-width:900px){
 body .header{height:88px;padding:0 5%;gap:12px;display:flex}
 body .header .desktop-nav{display:none}
 body .header .brand strong{font-size:23px}body .header .brand>span{display:block;font-size:14px}
 body .header .header-actions{gap:12px}
 body .header .motion-toggle{display:none}
 body .header .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;width:60px;height:52px;padding:3px 0;position:relative}
 body .header .menu-toggle::before{content:'MENU';font:10px/1.2 var(--sans);letter-spacing:.14em;margin-bottom:6px}
 body .header .menu-toggle span{width:27px;margin:3px 0;background:currentColor}
 body .header .menu-toggle[aria-expanded=true]::before{content:'CLOSE'}
 body .mobile-menu{top:88px}
 html{scroll-padding-top:110px}
}
@media(prefers-reduced-motion:reduce){body .header{transition:none}}

@media(max-width:900px){body .header .menu-toggle{width:70px;height:48px;border:1px solid currentColor;border-radius:2px;padding:7px 11px;align-items:center;opacity:1}body .header .menu-toggle::before{font-size:11px;font-weight:600;letter-spacing:.06em}body.narrative-home .header .menu-toggle{color:#fff7e6;background:#ffffff0c}body .header .header-actions{gap:10px}}
/* All destinations remain expanded; language selection is secondary. */
body .header .header-actions{position:relative}
body .header .language-toggle{display:flex;align-items:center;gap:7px;min-width:44px;min-height:44px;padding:8px;font:11px var(--sans);letter-spacing:.04em;color:inherit}
body .header .language-toggle::after{content:'⌄';font-size:14px}
body .header .language-switch{position:absolute;right:0;top:calc(100% + 10px);padding:8px 12px;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 24px #0003;z-index:3}
body.narrative-home .header .language-switch{background:#272c25;border-color:#b8c0ad66;color:#f5f1e7}
body .header .menu-toggle,body .mobile-menu{display:none!important}
@media(max-width:900px){
 body .header{height:auto;min-height:125px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:14px 5% 0}
 body .header .brand{grid-column:1;grid-row:1}
 body .header .header-actions{grid-column:2;grid-row:1;align-self:start}
 body .header .desktop-nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%;margin:0;border-top:1px solid var(--line)}
 body .header nav.desktop-nav a{justify-content:center;min-height:44px;padding:10px 0;font-size:clamp(11px,3vw,13px);white-space:nowrap;text-align:center;word-break:normal;line-height:1.4}
 body .header .desktop-nav a::after{bottom:5px}
 body.narrative-home .header .desktop-nav{border-color:#b8c0ad30}
 html{scroll-padding-top:145px}
}

/* A restrained return control, available on long pages after leaving the top. */
.gallery-back-top{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:35;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid currentColor;border-radius:50%;background:var(--paper,#252a23);color:var(--ink,#eee9dc);font:400 21px/1 var(--sans);box-shadow:0 3px 15px #0002;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}
.gallery-back-top.is-visible{opacity:.8;visibility:visible;pointer-events:auto;transform:none}
.gallery-back-top:hover,.gallery-back-top:focus-visible{opacity:1}
.gallery-back-top:focus-visible{outline:2px solid currentColor;outline-offset:4px}
body .site-footer{padding-bottom:max(82px,calc(68px + env(safe-area-inset-bottom)))}
@media(max-width:900px){
 body .header nav.desktop-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
 html[lang=en] body .header nav.desktop-nav a{font-size:clamp(10px,2.8vw,13px)}
 html[lang=ja] body .header nav.desktop-nav a{font-size:clamp(10px,2.8vw,13px)}
}
@media(prefers-reduced-motion:reduce){.gallery-back-top{transition:none}}

/* Keep the same five destinations in one calm, evenly spaced footer row. */
.gallery-site .site-footer nav{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;align-self:start;gap:clamp(18px,2.6vw,36px);font:400 14px/1.5 var(--sans)}
.gallery-site .site-footer nav a{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;white-space:nowrap;text-align:left}
@media(max-width:900px){
 .gallery-site .site-footer nav{grid-column:1/-1;width:100%;justify-content:space-between;gap:12px;font-size:clamp(12px,3.2vw,14px);padding-block:4px}
}

/* Circular flags retain full country artwork and accessible language names. */
body .header .language-switch{gap:4px}
body .header .language-switch a{width:44px;min-width:44px;height:44px;opacity:1}
body .header .language-flag{display:block;width:20px;height:20px;border-radius:50%;object-fit:contain;background:#fff;box-shadow:0 0 0 1px #ffffff35}
body .header .language-switch a[aria-current]::after{display:none}
body .header .language-switch a[aria-current] .language-flag{outline:1px solid currentColor;outline-offset:3px}
body .header .language-switch a:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:50%}


.gallery-music{font-size:12px;white-space:nowrap;min-height:40px;padding:8px 0;color:inherit;border:0;background:none}.gallery-music[aria-pressed="true"]{text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){body .header .header-actions{flex-wrap:wrap;justify-content:flex-end;max-width:210px}.gallery-music{font-size:11px;min-height:30px}body .header .motion-toggle{display:none}}
/* Compact garden entrance and a single audio control. */
body .header .motion-toggle[hidden]{display:none!important}
.gallery-music{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:0;min-height:42px;line-height:1.2}
body .header .header-actions{align-items:center}
.music-credit{font-size:11px;opacity:.7}
.music-bars{display:flex;align-items:center;gap:3px;height:14px}.music-bars i{display:block;width:2px;height:4px;background:currentColor}
.gallery-music[aria-pressed="true"] .music-bars i{animation:music-level 1s ease-in-out infinite alternate}.music-bars i:nth-child(2){animation-delay:-.35s!important}.music-bars i:nth-child(3){animation-delay:-.7s!important}
@keyframes music-level{to{height:13px}}
@media(prefers-reduced-motion:reduce){.gallery-music .music-bars i{animation:none!important}}

/* Music stays above the independently scrolling page content. */
.gallery-music .music-label{font-size:9px;line-height:1.2}
.gallery-music .music-bars{height:22px;gap:4px}
.gallery-music .music-bars i{width:3px;height:7px}
@keyframes music-level{to{height:22px}}
html.music-content body>.header,html.music-content body>.mobile-menu{display:none!important}
body.music-shell{overflow:hidden;height:100dvh}
body.music-shell>:not(.header):not(.gallery-content-frame):not(audio):not(script):not(style){display:none!important}
body.music-shell>.header{transform:none!important;position:relative;pointer-events:auto}
.gallery-content-frame{position:fixed;left:0;top:var(--shell-header-height,100px);width:100%;height:calc(100dvh - var(--shell-header-height,100px));border:0;background:#252a23}

body .header .language-flag{object-fit:cover;background:transparent;box-shadow:none}
body .header .language-switch a[hreflang="en"] .language-flag{object-position:35% center}

@media(max-width:900px){body .header nav.desktop-nav{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Translated labels need their own space, including the garden's two-word name. */
@media(max-width:1200px){
 html:not(:lang(ko)) body .header{height:auto;min-height:125px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 8px;padding:14px 5% 0}
 html:not(:lang(ko)) body .header .brand{grid-column:1;grid-row:1;min-width:0}
 html:not(:lang(ko)) body .header .brand strong{letter-spacing:0;font-size:clamp(19px,5vw,27px)}
 html:not(:lang(ko)) body .header .header-actions{grid-column:2;grid-row:1;gap:8px}
 html:not(:lang(ko)) body .header nav.desktop-nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:.8fr .8fr 1.45fr 1.3fr 1fr;gap:6px;width:100%;min-width:0;margin:0;border-top:1px solid var(--line)}
 html:not(:lang(ko)) body .header nav.desktop-nav a{min-width:0;min-height:52px;justify-content:center;padding:8px 0;font-size:clamp(10px,2.8vw,13px);line-height:1.35;white-space:normal;text-align:center;overflow-wrap:normal;word-break:normal}
 html:lang(ja) body .header nav.desktop-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
 html:lang(ja) body .header nav.desktop-nav a{line-break:strict}
 html:not(:lang(ko)) .gallery-site .site-footer nav{grid-column:1/-1;display:grid;grid-template-columns:.8fr .8fr 1.45fr 1.3fr 1fr;gap:10px;width:100%;font-size:clamp(10px,2.8vw,14px)}
 html:not(:lang(ko)) .gallery-site .site-footer nav a{min-width:0;white-space:normal;overflow-wrap:normal;line-height:1.5}
 html:lang(ja) .gallery-site .site-footer nav{grid-template-columns:repeat(5,minmax(0,1fr))}
}