/* Fixed tree navigation. Canopy, repeating trunk tiles and root base are independent. */
:root{--sidebar-width:clamp(240px,22vw,320px)}
.site-frame{position:relative;display:block;width:100%;max-width:none;min-height:100dvh;margin:0;overflow:visible;border:0;border-radius:0;box-shadow:none;background:transparent}
.site-frame::after,.site-body::after{content:none}
.site-body{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:100dvh;margin-left:var(--sidebar-width);padding:0 26px 0 20px}
.site-body>.shell{flex:1;width:100%;max-width:1280px;margin:0 auto;padding-bottom:18px}
.site-sidebar{
 position:fixed;inset:0 auto 0 0;z-index:40;width:var(--sidebar-width);height:100dvh;
 margin:0;padding:0;border:0;background:transparent;box-shadow:none;overflow:hidden;
 /* Follow the canopy's aspect ratio so the trunk never starts below the art. */
 --crown-limit:clamp(84px,20dvh,174px);--crown-height:min(var(--crown-limit),calc(var(--sidebar-width)*325/680));--base-height:clamp(90px,29dvh,280px);--foot-height:24px;
 --sign-height:clamp(28px,calc((100dvh - var(--crown-height) - var(--base-height) - 64px)/var(--sign-count,7)),56px);
}
.tree-scene{position:relative;isolation:isolate;display:grid;grid-template-rows:var(--crown-height) minmax(0,1fr) var(--base-height) var(--foot-height);width:100%;height:100%;padding:0;overflow:hidden}
.tree-trunk{
 position:absolute;z-index:-1;top:calc(var(--crown-height)*.58);bottom:calc(var(--base-height)*.3);left:3%;width:94%;
 background-image:url('../images/pawe-trunk-botanical-tile.webp');
 background-position:center top;background-size:100% auto;background-repeat:repeat-y;
 mask-image:linear-gradient(transparent,#000 24px,#000 calc(100% - 24px),transparent);
 pointer-events:none;
}
.tree-crown{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;width:100%;height:100%;margin:0;line-height:0;filter:drop-shadow(0 5px 7px #68407322)}
.tree-crown img{display:block;width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center top;mask-image:url('../images/pawe-canopy-blend-mask.svg');mask-size:100% 100%;mask-repeat:no-repeat}
.wood-nav{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:4px;min-height:0;width:100%;max-width:none;margin:0;padding:0 9px;pointer-events:auto}
.wood-sign{--sign-shift:-3px;--sign-tilt:-.6deg;position:relative;display:block;flex:0 1 var(--sign-height);width:100%;height:var(--sign-height);min-height:26px;max-height:56px;margin:0;transform:translateX(var(--sign-shift)) rotate(var(--sign-tilt));filter:drop-shadow(0 3px 3px #63403b44);transition:transform .15s ease,filter .15s ease}
.wood-sign:nth-child(even){--sign-shift:3px;--sign-tilt:.6deg;width:94%}
.wood-sign__board{position:absolute;inset:0;display:block;background:url('../images/pawe-sign-wood.webp') center/100% 100% no-repeat}
.wood-sign.is-active .wood-sign__board{background-image:url('../images/pawe-sign-purple.webp')}
.wood-sign__inner{position:absolute;inset:0 30px;display:flex;align-items:center;justify-content:center;gap:11px;color:#45265e;text-shadow:none;font:900 clamp(14px,1.12vw,18px)/1.1 'Nunito',sans-serif}
.wood-sign__label{flex:0 1 auto;min-width:0;white-space:nowrap;text-align:center}
.sign-icon{flex:none;width:24px;height:24px}
.wood-sign.is-active .wood-sign__inner{color:#fff8e9;text-shadow:none}
.wood-sign:hover{transform:translate(var(--sign-shift),-2px) rotate(0);filter:drop-shadow(0 4px 4px #63403b55) brightness(1.06)}
.wood-sign:focus-visible,.tree-crown:focus-visible{outline:3px solid #fff1be;outline-offset:-3px;border-radius:10px}
.tree-base{position:relative;z-index:1;min-height:0;width:100%;overflow:hidden;pointer-events:none}
.tree-roots{position:absolute;inset:auto 0 0;display:block;width:100%;height:auto;max-height:74%;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(transparent,#000 25%)}
.tree-friend{position:absolute;inset:0 0 7%;display:flex;justify-content:center;align-items:flex-end;margin:0;padding:0}
.tree-friend img{display:block;max-width:90%;width:auto;height:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px #51304d22)}
.side-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;margin:0;padding:0 5px 3px;color:#684477;text-align:center;font:700 10px/1.2 'Nunito',sans-serif}
.mobile-menu-heading,.menu-toggle,.sidebar-scrim{display:none}
@media(min-width:1041px) and (max-height:620px){
 .site-sidebar{--crown-limit:clamp(76px,18dvh,110px);--base-height:clamp(72px,21dvh,130px);--foot-height:20px}
 .wood-sign__inner{font-size:13px;gap:7px}
 .sign-icon{width:20px;height:20px}
 .side-bottom{font-size:9px}
}
@media(min-width:1041px) and (max-height:430px){
 .site-sidebar{--crown-limit:clamp(44px,15dvh,68px);--base-height:clamp(42px,16dvh,72px);--foot-height:14px;--sign-height:clamp(22px,calc((100dvh - var(--crown-height) - var(--base-height) - 54px)/var(--sign-count,7)),32px)}
 .wood-sign{min-height:22px}
 .wood-sign__inner{font-size:12px;gap:6px}
 .sign-icon{width:16px;height:16px}
 .side-bottom{font-size:8px}
}
/* Preserve room for the existing hero copy alongside the fixed desktop tree. */
@media(min-width:1041px) and (max-width:1280px){
 .hero-scene{min-height:360px}
 .hero-message{width:min(420px,50%);right:3%}
}
@media(max-width:1040px){
 .site-body{margin-left:0;padding:0 12px}
 .site-body>.shell{width:100%;max-width:980px}
 .site-sidebar{inset:0 auto 0 0;z-index:90;width:min(310px,calc(100vw - 40px));height:100dvh;padding:22px 16px;background:linear-gradient(160deg,#fff8f1,#f4e5f4);box-shadow:12px 0 40px #43245233;overflow-y:auto;transform:translateX(-110%);transition:transform .2s ease}
 .sidebar-open{overflow:hidden}
 .sidebar-open .site-sidebar{transform:translateX(0)}
 .mobile-menu-heading{display:flex;align-items:center;gap:9px;padding:0 0 20px;border-bottom:1px solid #dfcadd;color:#55346c}
 .mobile-menu-heading img{width:44px;height:44px;border-radius:14px;object-fit:cover}
 .mobile-menu-heading strong{display:block;font:600 22px/1.1 'Fredoka',sans-serif}
 .mobile-menu-heading small{display:block;margin-top:4px;font:700 11px 'Nunito',sans-serif;color:#8c6c95}
 .mobile-menu-close{display:grid;place-items:center;flex:none;margin-left:auto;width:32px;height:32px;border:1px solid #dac4dc;border-radius:50%;background:#fff9fd;color:#69417e;font-size:20px}
 .tree-scene{display:block;height:auto;min-height:0;overflow:visible}
 .tree-crown,.tree-trunk,.tree-base{display:none}
 .wood-nav{display:flex;align-items:stretch;gap:8px;margin:20px 0 0;padding:0}
 .wood-sign,.wood-sign:nth-child(even){flex:none;width:100%;height:auto;min-height:48px;max-height:none;margin:0;transform:none;filter:none}
 .wood-sign--group{margin-top:10px}
 .wood-sign__board,.wood-sign.is-active .wood-sign__board{position:relative;inset:auto;display:flex;min-height:48px;border:1px solid #e7d5e4;border-radius:14px;background:#fffcf8}
 .wood-sign__inner{position:relative;inset:auto;display:flex;justify-content:flex-start;width:100%;padding:14px;gap:13px;font-size:15px;text-shadow:none;color:#624178}
 .wood-sign__label{flex:1;text-align:left}
 .wood-sign.is-active .wood-sign__board{background:#80539d;border-color:#80539d}
 .wood-sign.is-active .wood-sign__inner{color:#fffaf4;text-shadow:none}
 .wood-sign:hover{transform:none;filter:none}
 .wood-sign:focus-visible{outline:3px solid #9c76b8;outline-offset:2px}
 .side-bottom{margin-top:26px;padding:0;font-size:11px;color:#96779e}
 .menu-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid #fff8fc59;border-radius:999px;background:#ffffff18;color:#fff8ef;font:800 13px 'Fredoka',sans-serif}
 .sidebar-scrim{position:fixed;inset:0;z-index:80;width:100%;height:100%;padding:0;border:0;background:#321b4773;backdrop-filter:blur(3px)}
 .sidebar-open .sidebar-scrim{display:block}
}
@media(prefers-reduced-motion:reduce){.wood-sign,.site-sidebar{transition:none}}
@media(prefers-reduced-motion:reduce) and (min-width:1041px){.wood-sign:hover{transform:translateX(var(--sign-shift)) rotate(var(--sign-tilt))}}
