/* One global navigation at any width. This file follows the legacy page styles. */
:root { --nav-height: 78px; --bottom-height: 76px; --bottom-space: calc(var(--bottom-height) + env(safe-area-inset-bottom, 0px)); }
html { scroll-padding-top: 100px; scroll-padding-bottom: calc(var(--bottom-space) + 20px); }
.zw-header { position:sticky; inset:0 0 auto; z-index:50; height:var(--nav-height); background:rgba(251,248,243,.98); border-bottom:1px solid var(--line); }
.zw-header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(1440px,calc(100% - 64px)); height:100%; margin:auto; }
.zw-header .brand { flex:0 0 auto; min-width:0; gap:8px; }
.zw-header .brand-mark { width:33px; height:40px; }
.zw-header .brand-words b { font-size:29px; line-height:1; }
.zw-header .brand-words small { font-size:8px; letter-spacing:.3em; }
.zw-desktop-nav,.zw-header-actions { display:flex; align-items:center; gap:6px; }
.zw-header .nav-link,.nav-disclosure>summary { display:flex; align-items:center; justify-content:center; gap:7px; border-radius:7px; padding:12px 10px; color:var(--ink); font:500 13px/1.4 var(--sans); text-decoration:none; white-space:nowrap; }
.zw-desktop-nav>.nav-link>.icon { display:none; }
.nav-link:hover,.nav-disclosure>summary:hover { background:var(--tint,#f1e8df); color:var(--brand); }
.nav-link[aria-current="page"] { background:#f1e8df; color:var(--brand); font-weight:600; }
.nav-disclosure { position:relative; border:0; padding:0; background:transparent; }
.nav-disclosure>summary { cursor:pointer; list-style:none; margin:0; min-height:44px; }
.nav-disclosure>summary::-webkit-details-marker { display:none; }
.nav-disclosure>summary::after { display:none; }
.nav-disclosure>summary>.icon { width:14px; height:14px; transition:transform .15s; }
.nav-disclosure[open]>summary>.icon { transform:rotate(180deg); }
.nav-flyout { position:absolute; top:calc(100% + 10px); left:0; min-width:245px; padding:12px; border:1px solid var(--line); background:var(--paper,#fff); border-radius:14px; box-shadow:0 16px 42px rgb(75 39 23 / .12); }
.zw-header-actions .nav-flyout { left:auto; right:0; }
.nav-flyout .nav-link { justify-content:flex-start; padding:12px; }
.nav-flyout .nav-link .icon { width:18px; height:18px; color:var(--copper); flex-shrink:0; }
.zw-header-cta .nav-link { background:var(--brand); color:white; padding:12px 16px; }
.zw-header-cta .icon { width:16px; height:16px; }
.zw-header .nav-link:focus-visible,.nav-disclosure>summary:focus-visible,.zw-bottom .nav-link:focus-visible { outline:2px solid var(--copper); outline-offset:3px; }
.zw-bottom { display:none; }
.nav-more { color:var(--ink); border:1px solid var(--line); background:#fbf8f3; width:min(610px,100vw); padding:24px; max-height:82dvh; }
.nav-more::backdrop { background:rgb(43 33 29 / .38); backdrop-filter:blur(3px); }
.nav-more-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.nav-more-heading .eyebrow { font-size:9px; margin-bottom:7px; }
.nav-more-heading h2 { font-size:30px; }
.nav-more-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:20px 0; }
.nav-more-grid .nav-link { display:flex; align-items:center; gap:10px; min-height:54px; font:500 13px/1.4 var(--sans); border:1px solid var(--line); border-radius:10px; padding:12px; background:#fffefa; overflow-wrap:anywhere; }
.nav-more-grid .icon { flex:0 0 19px; width:19px; height:19px; color:var(--copper); }
.nav-demo-label { font-size:11px; color:var(--muted); }
.nav-modal-open { overflow:hidden; }
@media (min-width:1024px) and (max-width:1199px) {
 .zw-header-inner { width:calc(100% - 36px); gap:8px; }
 .zw-header .nav-link,.nav-disclosure>summary { font-size:12px; padding:11px 8px; }
 .zw-desktop-nav,.zw-header-actions { gap:2px; }
 .zw-header .brand-words b { font-size:25px; }
 .zw-header .brand-mark { width:28px; }
 .zw-header-cta .nav-link>.icon { display:none; }
}
@media (max-width:1023px) {
 :root { --nav-height:0px; }
 html { scroll-padding-top:16px; }
 body,body[data-page^="atelier-"] { padding-top:0; padding-bottom:var(--bottom-space); }
 body>.site-header.zw-header { display:none!important; }
 body>.bottom-nav.zw-bottom { display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; inset:auto 0 0; z-index:60; height:var(--bottom-space); padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); background:rgba(251,248,243,.98); box-shadow:0 -6px 25px rgb(75 39 23 / .045); transform:none; }
 .zw-bottom .nav-link { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; border:0; border-radius:11px; font:500 10px/1.2 var(--sans); color:var(--muted); text-decoration:none; text-align:center; }
 .zw-bottom .icon { width:21px; height:21px; }
 .zw-bottom .nav-link.nav-highlight { background:#4b2717; color:#fffdf8; margin-inline:5px; box-shadow:0 4px 10px rgb(75 39 23 / .12); }
 .zw-bottom [aria-current="page"] { color:var(--brand); background:#f1e8df; }
 .nav-more[open] { position:fixed; inset:auto 0 0; max-width:100%; width:100%; max-height:85dvh; margin:0; padding:22px 18px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius:22px 22px 0 0; overflow:auto; overscroll-behavior:contain; }
 .nav-keyboard-open body>.zw-bottom { display:none!important; }
 .nav-keyboard-open body { padding-bottom:16px; }
 .toast { bottom:calc(var(--bottom-space) + 12px); }
 .site-footer { padding-bottom:24px; }
 /* Toolbar is contextual content, not another fixed global navigation. */
 body[data-page^="atelier-"] .sp-mobile-tools { position:static; margin:0; border-block:1px solid #ddd8d1; padding:10px; }
 body[data-page^="atelier-"] .sp-canvas-area { padding-bottom:16px; }
 body[data-page^="atelier-"] .sp-app { min-height:calc(100dvh - var(--bottom-space)); }
 body[data-page^="atelier-"] .sp-viewport { min-height:440px; }
}
@media print { .zw-header,.zw-bottom,.nav-more { display:none!important; } body { padding:0!important; } }