/* One footer on every guest page. Only the transparent treetops overlap. */
@font-face{font-family:VeluweFooter;src:url('/outputs/veluwe-font/VeluweDisplay-Regular.woff2?v=0.4-16faabf3f13c') format('woff2');font-weight:400;font-display:swap}
:root{--forest-tree-height:clamp(76px,8vw,128px);--forest-overlap:calc(var(--forest-tree-height) - 16px)}
.forest-footer{--footer-paper:#f3e6c8;--footer-green:#042e1e;position:relative;z-index:8;isolation:isolate;margin:0;color:var(--footer-paper);background:transparent;font-family:system-ui,sans-serif}
/* Begin the fill below source row 270, where the tree painting is opaque.
   Percentage margins follow the footer width, including narrower page stages. */
.forest-footer::before{content:"";position:absolute;inset:0;z-index:-2;margin-top:max(0px,calc(15.22% - var(--forest-overlap)));background:var(--footer-green);pointer-events:none}
.forest-footer__scene{position:relative;isolation:isolate;display:grid;grid-template-rows:auto auto;padding-top:clamp(48px,5vw,80px);background:transparent}
.forest-footer__skyline{position:absolute;z-index:-1;top:calc(-1 * var(--forest-overlap));left:0;width:100%;height:auto;pointer-events:none;user-select:none}
.forest-footer__filters{position:absolute;pointer-events:none}
.forest-footer__treeline{display:block;width:100%;height:auto;max-width:none;filter:url(#footer-paper-cutout);mask-image:none;-webkit-mask-image:none}
.forest-footer__skyline::after{display:none}
.forest-footer__content{position:relative;z-index:3;width:min(1060px,86%);margin-inline:auto;padding-bottom:clamp(38px,4vw,64px)}
.forest-footer__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:clamp(20px,4vw,64px);width:100%;margin:0;text-align:center;transform:translateY(clamp(36px,5.5vw,88px))}
.forest-footer__column{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;font:400 clamp(13px,1.2vw,19px)/1.5 system-ui,sans-serif;letter-spacing:0}
.forest-footer__column h3{display:grid;align-content:end;justify-items:center;min-height:2.8em;max-width:100%;margin:0 0 10px;font:400 clamp(25px,2.3vw,37px)/1.05 VeluweFooter,Impact,sans-serif;letter-spacing:.025em;white-space:normal;text-wrap:balance;color:var(--footer-paper)}
.forest-footer__column h3::after{content:"";display:block;width:1.25em;height:1px;margin:.55em auto 0;background:currentColor;opacity:.65}
.forest-footer a,.forest-footer__mode{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:0;margin:0;border:0;background:none;color:var(--footer-paper);font:inherit;line-height:1.45;letter-spacing:0;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer}
.forest-footer__mode:disabled{opacity:.5;cursor:wait}
.forest-footer__column a::after,.forest-footer__mode::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transition:transform 180ms ease}
.forest-footer__column a:hover::after,.forest-footer__column a:focus-visible::after,.forest-footer__mode:hover::after,.forest-footer__mode:focus-visible::after{transform:scaleX(1)}
.forest-footer a:focus-visible,.forest-footer button:focus-visible{outline:2px solid var(--footer-paper);outline-offset:4px}
.forest-footer__art{position:relative;height:clamp(160px,34vw,520px);isolation:isolate;overflow:hidden;pointer-events:none;user-select:none}
.forest-footer__wordmark{position:absolute;z-index:1;top:0;left:7%;width:86%;height:auto;fill:var(--footer-paper);font:400 400px/1 VeluweFooter,sans-serif;mask:url('/assets/lettering/hero-ink-v03.webp') center/520px repeat}
.forest-footer__foreground{position:absolute;z-index:2;bottom:0;left:0;display:block;width:100%;height:auto;max-width:none;pointer-events:none}
[data-theme=night] .forest-footer{--footer-green:#072218;background:#123c32 url('/assets/stays/night/forest-pigment-v02.webp') center/cover}
[data-theme=night] .forest-footer__treeline{filter:url(#footer-paper-cutout) brightness(.77) saturate(.85)}
[data-theme=night] .forest-footer__foreground{filter:brightness(.76) saturate(.87)}
.forest-footer__scene,.forest-footer__skyline::after{transition:background-color 240ms ease}
/* Reserve the shallow overlap inside content, never by adding a paper strip. */
body:has(>.forest-footer) .shop-preview__content{padding-bottom:calc(clamp(42px,4.7vw,80px) + var(--forest-overlap))}
body.utility-page:has(>.forest-footer) .utility-policy{padding-bottom:calc(64px + var(--forest-overlap))}
body.pond-page:has(>.forest-footer) .water{padding-bottom:var(--forest-overlap)}
/* The map remains a full viewport stage; the shared footer is in normal flow. */
html:has(>body.map-page>.forest-footer),html:has(>body.map-page>.forest-footer)>body.map-page{height:auto;min-height:100%;overflow:visible}
body.map-page:has(>.forest-footer)>.map-viewport{position:relative;inset:auto;height:100svh;min-height:600px;touch-action:pan-y}
body.map-page:has(>.forest-footer) .map-bottom{bottom:calc(24px + var(--forest-overlap))}
body.map-page:has(>.forest-footer) .map-controls{bottom:calc(95px + var(--forest-overlap))}
body.woodland-shop:has(>.forest-footer) .shop-night__outside{bottom:calc(24px + var(--forest-overlap))}
body.woodland-shop:has(>.forest-footer) .conversation .replies{bottom:calc(20px + var(--forest-overlap))}
body.woodland-shop:has(>.forest-footer) .berry-shelf__actions{bottom:calc(20px + var(--forest-overlap))}
@media(max-width:760px){
 .forest-footer__content{width:92%;padding-bottom:30px}
 .forest-footer__nav{gap:12px}
 .forest-footer__column{font-size:clamp(12px,2.5vw,16px);gap:3px}
 .forest-footer__column h3{font-size:clamp(19px,4.8vw,28px);letter-spacing:.015em;margin-bottom:6px}
 body.map-page:has(>.forest-footer) .mobile-houses{bottom:calc(92px + var(--forest-overlap))}
 body.map-page:has(>.forest-footer) .map-heading{bottom:calc(160px + var(--forest-overlap))}
 body.map-page:has(>.forest-footer) .map-controls{bottom:calc(156px + var(--forest-overlap))}
}
@media(prefers-reduced-motion:reduce){.forest-footer__column a::after,.forest-footer__mode::after,.forest-footer__scene,.forest-footer__skyline::after{transition:none}}

/* Keep the final section’s real label above the asynchronously added paint. */
body:has(>.forest-footer) .shop-preview__cta-label{z-index:2}

/* Original warm round fireflies on every shared footer, visible only at night.
   The labels remain above the light field and keep their full touch targets. */
.forest-footer .footer-fireflies,.forest-footer .footer-firefly-reflection{position:absolute;z-index:2;max-width:none;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 480ms ease,visibility 480ms}
.forest-footer .footer-fireflies{inset:0;width:100%;height:100%;overflow:hidden}
[data-theme="night"] .forest-footer .footer-fireflies{opacity:1;visibility:visible}
[data-theme="night"] .forest-footer .footer-firefly-reflection{opacity:.7;visibility:visible}
@media(prefers-reduced-motion:reduce){.forest-footer .footer-fireflies,.forest-footer .footer-firefly-reflection{transition:none}}

/* Shared music attribution: a simple footer control and a readable paper dialog. */
.footer-music-credits{position:fixed;inset:0;width:min(540px,calc(100vw - 28px));max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);margin:auto;padding:0 28px 22px;border:1px solid #71503945;border-radius:8px;background:#f3e6c8;color:#123c32;color-scheme:light;font:15px/1.6 system-ui,sans-serif;overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 90px #092e2855}
.footer-music-credits::backdrop{background:#092e28b8}
.footer-music-credits__header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 16px;background:#f3e6c8}
.footer-music-credits h2{margin:0;color:#0756a6;font:400 clamp(32px,7vw,40px)/1.05 VeluweFooter,Impact,sans-serif}
.footer-music-credits__close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #123c3240;border-radius:50%;padding:0;background:#f3e6c8;color:#123c32;font:28px/1 system-ui,sans-serif;cursor:pointer}
.footer-music-credits__tracks{display:grid;gap:20px}
.footer-music-credits section{border-top:1px solid #123c3230;padding-top:16px;min-width:0}
.footer-music-credits__setting{margin:0 0 6px;font:600 10px/1.5 system-ui,sans-serif;letter-spacing:.12em;color:#715039}
.footer-music-credits h3{margin:0 0 8px;font:400 23px/1.2 Georgia,serif;color:#123c32}
.footer-music-credits section>p:last-child{margin:0;overflow-wrap:anywhere}
.footer-music-credits a{color:#0756a6;text-decoration-thickness:1px;text-underline-offset:3px}
.footer-music-credits a:hover{text-decoration-thickness:2px}
.footer-music-credits :is(a,button):focus-visible{outline:2px solid #0756a6;outline-offset:4px}
.footer-music-credits__note{margin:22px 0 0;font-size:12px;line-height:1.6;color:#715039}
html.veluwe-cursor-active .footer-music-credits,html.veluwe-cursor-active .footer-music-credits *{cursor:auto!important}
html.veluwe-cursor-active .footer-music-credits :is(a,button){cursor:pointer!important}
@media(max-width:400px){.footer-music-credits{padding-inline:18px}.footer-music-credits__header{gap:10px}.footer-music-credits h2{font-size:32px}}

/* Carry the tree painting's pigment through the footer instead of a flat fill.
   One continuous texture, with the original artwork fading into it below the trees. */
.forest-footer::before{
 background:var(--footer-green) url('/assets/footer/forest-pigment-extension-v1.webp') center/cover no-repeat;
}
.forest-footer__treeline{
 -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
}
[data-theme=night] .forest-footer::before{filter:brightness(.77) saturate(.85)}
