/* Use the approved concept itself: its bronze, lettering, shadows and ground stay together. */
.navigation-footer>.navigation-panel{--footer-space:clamp(20px,2svh,40px);--footer-feather:clamp(80px,10vw,160px);height:auto;min-height:80svh;padding-bottom:0;background:transparent}
/* Keep the approved spacing while each theme fades directly into the shared floor. */
.footer-transition{position:relative;min-height:max(12svh,var(--footer-overlap));overflow:hidden;overflow:clip;pointer-events:none}
.footer-transition>.footer-timber-plane{visibility:hidden}
.navigation-footer>.navigation-panel::before,
:root[data-theme="forest"] .navigation-footer>.navigation-panel::before{content:none}
/* The actual full-resolution image is decoded by the loading gate. Keep the
   same bottom-centred crop and feather as the former CSS background. */
.navigation-footer .footer-ground{display:block;position:absolute;inset:calc(var(--footer-overlap) - var(--footer-feather)) 0 0;z-index:-2;pointer-events:none;overflow:hidden;background:#080703;
 mask-image:linear-gradient(to bottom,transparent,#0000000a calc(var(--footer-feather)*.15),#00000038 calc(var(--footer-feather)*.35),#0000008c calc(var(--footer-feather)*.55),#000000d6 calc(var(--footer-feather)*.75),#000000fa calc(var(--footer-feather)*.9),#000 var(--footer-feather))}
.navigation-footer .footer-ground>img{position:absolute;left:50%;bottom:0;display:block;width:auto;max-width:none;height:var(--concept-ground-height,140%);transform:translateX(-50%);pointer-events:none;user-select:none}
/* Keep the scene at a shared screen proportion, with room to grow on short
   screens. Spare space centres the artwork while the controls stay below it. */
.navigation-footer .footer-scene{position:relative;isolation:isolate;display:flex;flex-direction:column;flex:1 0 auto;width:calc(100% + 10vw);margin-inline:-5vw;padding:0 5vw var(--footer-space);overflow:hidden;overflow:clip}
.navigation-footer .footer-content{flex:1 0 auto;padding:0}
.navigation-footer :is(.footer-signoff,.footer-bottom){flex:none}
.navigation-footer .footer-destinations{padding:0}
.footer-bronze{
 position:relative;isolation:isolate;
 width:min(100vw,max(480px,calc(45svh * 1157 / 480)));aspect-ratio:1157/480;
 margin:0;left:50%;transform:translateX(-50%);container-type:inline-size;
 overflow:hidden;overflow:clip;
}
/* Leave more of the forest visible when the homepage reaches its end. */
body[data-page="home"] .navigation-footer>.navigation-panel{min-height:60svh}
@media(forced-colors:none){
 body[data-page="home"] .footer-bronze{width:min(100vw,max(480px,calc(36svh * 1157 / 480)))}
}
.footer-bronze picture,.footer-bronze picture img{display:block;width:100%;pointer-events:none;user-select:none}
.footer-bronze picture img{position:absolute;left:0;top:2.083333%;height:auto;max-width:none;transform:none;mask-image:none}
/* Artwork is the original scene from y=690 through y=1160. Its 10px inset
   preserves the previous 480px frame, sculpture position and hover geometry. */
.footer-bronze .bronze-art{
 position:absolute;inset:0;height:100%;overflow:hidden;
 /* Fade the empty atmosphere before the sculpture begins at 19%. */
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 83.3333%,#000d 88%,#0006 94%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 83.3333%,#000d 88%,#0006 94%,transparent 100%);
}
.footer-bronze .bronze-art img{-webkit-mask-image:url('/assets/footer-concept/scene-blend-v2.svg');mask-image:url('/assets/footer-concept/scene-blend-v2.svg');-webkit-mask-size:100% 100%;mask-size:100% 100%;mask-repeat:no-repeat;mask-mode:alpha}
.bronze-menu{list-style:none;margin:0;padding:0}
.bronze-menu>li{display:contents}
.navigation-footer .bronze-link{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;color:#edc99a;text-decoration:none;opacity:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.bronze-link[data-destination="approach"]{left:16%;top:30%;width:34%;height:37%}
.bronze-link[data-destination="contact"]{left:62%;top:50%;width:32%;height:29%}
.bronze-accessible-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.navigation-footer .bronze-link:focus-visible{outline:1px solid #f3d5a4;outline-offset:-6px;border-radius:0}
.navigation-footer .footer-pointer-trail{display:none}

/* Inner destinations return to the opening scene with one quiet Home link. */
.navigation-footer[data-footer-home]>.navigation-panel{min-height:60svh}
.navigation-footer[data-footer-home] .footer-content{display:grid;align-items:center}
.footer-home{display:grid;place-items:center;min-height:clamp(160px,26svh,320px);width:100%;padding-block:24px}
.navigation-footer .footer-home-link{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:64px;padding:16px 28px;color:#e1d2b6;font:400 clamp(30px,4vw,52px)/1.2 Cinzel,Georgia,serif;letter-spacing:.08em;text-decoration:none;text-shadow:0 2px 16px #0009;transition:color .2s ease}
.footer-home-arrow{font-family:Georgia,serif;font-size:.7em;line-height:1;letter-spacing:0;transition:transform .2s ease}
.navigation-footer .footer-home-link:focus-visible{outline:1px solid currentColor;outline-offset:6px;border-radius:0}
@media(hover:hover) and (pointer:fine){
 .navigation-footer .footer-home-link:hover{color:#fff0d5}
 .footer-home-link:hover .footer-home-arrow{transform:translateX(-4px)}
}
@media(prefers-reduced-motion:reduce){.navigation-footer .footer-home-link,.footer-home-arrow{transition:none}.footer-home-link:hover .footer-home-arrow{transform:none}}
@media(forced-colors:active){.navigation-footer .footer-home-link{color:LinkText;text-shadow:none}.navigation-footer .footer-home-link:focus-visible{outline:2px solid Highlight}}

/* Restore the earlier footer scale and five items below the existing rule. */
.navigation-footer .navigation-panel .footer-signoff{position:relative;z-index:5;padding-block:var(--footer-space)}
.navigation-footer .navigation-panel .footer-bottom{
 position:relative;z-index:5;
 --footer-control-width:112px;--footer-symbol-size:48px;--footer-meta-font:12px;--footer-meta-width:calc(6 * var(--footer-meta-font));
 width:calc(100% + 10vw);max-width:none;margin-inline:-5vw;
 grid-template-columns:var(--footer-meta-width) var(--footer-control-width) var(--footer-symbol-size) var(--footer-control-width) var(--footer-meta-width);
 justify-content:space-evenly;column-gap:0;
}
.navigation-footer .footer-bottom>:is(.navigation-theme,.language-picker){width:var(--footer-control-width);max-width:none;justify-self:center}
.navigation-footer .footer-bottom :is(.footer-identity,.footer-year){font-family:Cinzel,"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-size:var(--footer-meta-font)}
.navigation-footer .footer-bottom .footer-year{justify-self:start}
.navigation-footer .footer-bottom .footer-identity{justify-self:end}
.navigation-footer .footer-bottom::before{width:90vw}
body[data-page="home"] .navigation-footer .navigation-panel .footer-descriptor{font-size:clamp(12px,.8vw,24px);letter-spacing:.12em}
.navigation-footer .footer-bottom .footer-brand-icon{width:var(--footer-symbol-size);height:var(--footer-symbol-size);justify-self:center}
.navigation-footer .footer-bottom .footer-brand-icon img{width:100%;height:100%}
/* Render the original icon directly; retain the system-color mask in high contrast. */
@media(forced-colors:none){
 .navigation-footer .footer-bottom .footer-brand-icon{-webkit-mask:none;mask:none}
 .navigation-footer .footer-bottom .footer-brand-icon img{visibility:visible}
 .navigation-footer .footer-bottom .footer-icon-bands{display:none}
}
/* Scale the whole photograph uniformly; the scene mask protects bronze and contact shadows. */
@media(max-width:767px){
 .navigation-footer .navigation-panel .footer-bottom{--footer-control-width:clamp(76px,22vw,100px);--footer-symbol-size:32px;--footer-meta-font:clamp(9px,2.5vw,11px)}
}
/* Bring the bronze closer to the forest on phones. Let the footer fit its
   content so flex centering cannot recreate the space removed at the join. */
@media(max-width:767px) and (forced-colors:none){
 :root[data-theme="forest"] body[data-page="home"] .navigation-footer>.navigation-panel{
  min-height:0;--footer-feather:clamp(112px,22vw,144px);
 }
 :root[data-theme="forest"] body[data-page="home"] .footer-transition{
  min-height:max(var(--footer-overlap),clamp(28px,4svh,40px));
 }
}
/* Let the forest fill the existing control row without moving its neighbours. */
@media(forced-colors:none){
 .navigation-footer .footer-bottom .theme-picker:has(>.theme-trigger[data-scene="forest"]){grid-template-columns:minmax(0,1fr)}
 .navigation-footer .footer-bottom .theme-trigger[data-scene="forest"]{width:124px;min-width:0;justify-self:center}
 .navigation-footer .footer-bottom .theme-trigger[data-scene="forest"] .theme-token{height:40px}
}
/* Use spare grid spacing on phones while keeping clearance from the centre icon. */
@media(max-width:767px) and (forced-colors:none){
 .navigation-footer .footer-bottom .theme-trigger[data-scene="forest"]{width:min(124px,calc((100vw - 2 * var(--footer-meta-width) + var(--footer-control-width) - var(--footer-symbol-size))/3 - 8px))}
}
@media(max-height:540px) and (min-width:600px){.navigation-footer>.navigation-panel{--footer-space:14px}}
.artwork-unavailable .bronze-art{visibility:hidden}
.artwork-unavailable .bronze-accessible-label{position:static;width:auto;height:auto;margin:0;clip-path:none;white-space:normal;font:400 clamp(16px,3cqw,72px)/1.3 Cinzel,Georgia,serif;text-align:center}
@media(forced-colors:active){
 .navigation-footer .footer-ground{display:none!important}
 .navigation-footer>.navigation-panel{background:Canvas}
 .navigation-footer>.navigation-panel::before{display:none}
 .footer-bronze{aspect-ratio:auto;width:90%;margin:20px auto;left:auto;transform:none;mask-image:none}
 .footer-bronze picture,.footer-bronze::after{display:none}
 .bronze-menu{display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:24px}
 .navigation-footer .bronze-link{position:static;width:auto;height:auto;min-height:44px;padding:12px;color:LinkText;border:1px solid LinkText}
 .bronze-accessible-label{position:static;width:auto;height:auto;margin:0;clip-path:none;white-space:normal}
 .navigation-footer .bronze-link:focus-visible{outline:2px solid Highlight;outline-offset:4px}
}