@font-face{font-family:ScrollFantasy;src:url('../font/CinzelDecorative-Bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:ScrollInk;src:url('../font/Caveat-variable.ttf') format('truetype');font-display:swap}
body .site-header.nav-parchment,body.site-wide .site-header.nav-parchment{position:fixed;top:20px;right:max(20px,calc((100% - 1500px)/2 + 20px));left:auto;transform:none;width:185px;height:58px;min-height:0;display:block;margin:0;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;z-index:100;overflow:visible;--scroll-height:430px}
body.site-wide .site-header.nav-parchment{right:20px}
body .nav-parchment .nav-scroll-toggle{position:relative;inset:auto;display:grid;place-items:center;width:100%;height:58px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#edc986;cursor:pointer;perspective:500px}
body .nav-parchment .nav-scroll-word{display:block;width:auto;height:auto;background:none;font:700 29px/1.4 ScrollFantasy,Georgia,serif;letter-spacing:.005em;color:#e7c47f;background:linear-gradient(175deg,#fff1c4 5%,#e7c88c 32%,#c49851 55%,#f5d995 72%,#9b7138);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 #724f2c) drop-shadow(0 2px 0 #5a3b22) drop-shadow(0 3px 0 #382515) drop-shadow(0 6px 4px #0009);transform:perspective(500px) rotateX(8deg);transition:filter .3s}
body .nav-parchment .nav-scroll-toggle:hover .nav-scroll-word{filter:drop-shadow(0 1px 0 #724f2c) drop-shadow(0 2px 0 #5a3b22) drop-shadow(0 3px 0 #382515) drop-shadow(0 6px 4px #0009) drop-shadow(0 0 8px #f1c98135)}
body .nav-parchment .nav-scroll-toggle:focus-visible{outline:1px solid #ebcc8e;outline-offset:3px;border-radius:5px}
body .nav-parchment .nav-scroll-panel{position:absolute;right:-6px;top:52px;width:300px;height:0;overflow:hidden;visibility:hidden;pointer-events:none;filter:drop-shadow(0 9px 12px #0005);transition:height 1.05s cubic-bezier(.22,.72,.2,1),visibility 0s 1.05s}
body.menu-open .nav-parchment .nav-scroll-panel{height:var(--scroll-height);visibility:visible;pointer-events:auto;transition:height 1.05s cubic-bezier(.22,.72,.2,1),visibility 0s}
body .nav-parchment .nav-scroll-paper{position:absolute;inset:0 0 auto;height:var(--scroll-height)}
body .nav-parchment .nav-scroll-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none;user-select:none}
body .nav-parchment .nav-scroll-roller{position:absolute;bottom:0;left:0;width:100%;height:42px;background:url('./pergamena-navbar-v1.png') center bottom / 100% var(--scroll-height) no-repeat;pointer-events:none;filter:drop-shadow(0 2px 2px #0003)}
body .nav-parchment .main-nav{position:absolute;left:18%;right:18%;top:17%;bottom:17%;display:flex;flex-direction:column;align-items:stretch;justify-content:space-evenly;gap:0;width:auto;height:auto;margin:0;padding:0;background:none;border:0;box-shadow:none}
body .nav-parchment .main-nav>a,body .nav-parchment .main-nav>.nav-shop{position:relative;inset:auto;display:flex;flex:1 1 0;align-items:center;justify-content:center;gap:0;width:100%;min-width:0;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#48301e;font:700 26px/1.05 ScrollInk,'Segoe Print',Georgia,serif;letter-spacing:-.01em;text-shadow:0 .4px .3px #42291455;transform:rotate(-.5deg);transition:color .2s}
body .nav-parchment .main-nav>a:nth-child(even){transform:rotate(.45deg)}
body .nav-parchment .main-nav>a:not(.nav-shop):after{display:none}
body .nav-parchment .main-nav .nav-cart{display:none}
body .nav-parchment .main-nav>a:hover,body .nav-parchment .main-nav>a.active,body .nav-parchment .main-nav>a:focus-visible{color:#8b2f20;background:none;box-shadow:none}
body .nav-parchment .main-nav>a:focus-visible{outline:1px dashed #865432;outline-offset:-3px}
body .nav-parchment .main-nav>a.active:before{content:'✦';position:absolute;left:-8px;font:14px/1 Georgia,serif;color:#865432}
@media(max-width:700px){body .site-header.nav-parchment,body.site-wide .site-header.nav-parchment{top:12px;right:12px;width:160px;height:52px;--scroll-height:380px}body .nav-parchment .nav-scroll-toggle{height:52px}body .nav-parchment .nav-scroll-word{font-size:25px}body .nav-parchment .nav-scroll-panel{top:46px;right:-3px;width:260px}body .nav-parchment .main-nav>a,body .nav-parchment .main-nav>.nav-shop{font-size:24px}}
@media(max-height:550px){body .site-header.nav-parchment{--scroll-height:320px}body .nav-parchment .nav-scroll-panel{width:245px}body .nav-parchment .main-nav>a,body .nav-parchment .main-nav>.nav-shop{font-size:22px}}
@media(prefers-reduced-motion:reduce){body .nav-parchment .nav-scroll-panel,body .nav-parchment .nav-scroll-word{transition:none}}

/* Manuscript lettering: restrained italic serif, etched into the parchment. */
body .nav-parchment .main-nav>a,body .nav-parchment .main-nav>.nav-shop{font-family:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;font-size:22px;font-style:italic;font-weight:400;letter-spacing:.012em;text-shadow:0 .3px .3px rgba(65,36,17,.32);transform:none}
body .nav-parchment .main-nav>a:nth-child(even){transform:none}
/* No floating demonstration label outside the scroll. */
.nav-discovery{display:none!important}
/* Esplora +20%, with a slow gold halo that signals interaction. */
body .site-header.nav-parchment,body.site-wide .site-header.nav-parchment{width:222px;height:70px}
body .nav-parchment .nav-scroll-toggle{height:70px;isolation:isolate}
body .nav-parchment .nav-scroll-word{font-size:34.8px;position:relative;z-index:1}
body .nav-parchment .nav-scroll-toggle:before{content:'';position:absolute;inset:-6px -18px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,214,135,.28) 0%,rgba(255,190,71,.14) 38%,transparent 70%);filter:blur(6px);z-index:-1;pointer-events:none;animation:scroll-invitation-glow 3.2s ease-in-out infinite}
body .nav-parchment .nav-scroll-toggle:after{content:'';position:absolute;inset:-2px -10px;background:radial-gradient(ellipse 7px 3px at 9% 53%,#ffe8abcf,transparent),radial-gradient(ellipse 4px 6px at 81% 19%,#ffe6a6a6,transparent),radial-gradient(ellipse 5px 3px at 92% 65%,#ffe6a6bf,transparent),radial-gradient(ellipse 3px 4px at 28% 83%,#fff0b4b3,transparent);filter:blur(1px);pointer-events:none;animation:scroll-invitation-sparks 4.6s ease-in-out infinite;z-index:0}
body .nav-parchment .nav-scroll-toggle:hover:before,body .nav-parchment .nav-scroll-toggle:focus-visible:before{background:radial-gradient(ellipse at center,rgba(255,222,151,.39),rgba(255,197,87,.18) 45%,transparent 72%)}
body .nav-parchment .nav-scroll-panel{top:64px}
@keyframes scroll-invitation-glow{0%,100%{opacity:.48;transform:scale(.94)}50%{opacity:1;transform:scale(1.07)}}
@keyframes scroll-invitation-sparks{0%,100%{opacity:.15;transform:translateX(-3px)}45%{opacity:.9;transform:translateX(3px)}75%{opacity:.4;transform:translateX(0)}}
@media(max-width:700px){body .site-header.nav-parchment,body.site-wide .site-header.nav-parchment{width:192px;height:62px}body .nav-parchment .nav-scroll-toggle{height:62px}body .nav-parchment .nav-scroll-word{font-size:30px}body .nav-parchment .nav-scroll-panel{top:56px}body .nav-parchment .main-nav>a,body .nav-parchment .main-nav>.nav-shop{font-size:21px}}
@media(max-height:550px){body .nav-parchment .main-nav>a,body .nav-parchment .main-nav>.nav-shop{font-size:20px}}
@media(prefers-reduced-motion:reduce){body .nav-parchment .nav-scroll-toggle:before,body .nav-parchment .nav-scroll-toggle:after{animation:none;opacity:.65}}

/* Larger wizard lettering and a strongly inked fantasy face. */
body .site-header.nav-parchment,body.site-wide .site-header.nav-parchment{width:256px;height:80px}
body .nav-parchment .nav-scroll-toggle{height:80px}
body .nav-parchment .nav-scroll-word{font-size:40.02px}
body .nav-parchment .main-nav>a,body .nav-parchment .main-nav>.nav-shop{font-family:ScrollFantasy,Georgia,serif;font-size:19px;font-weight:700;font-style:normal;letter-spacing:.012em;color:#482817;text-shadow:0 .4px .2px #40231055}
/* One lower roller only; hide the copy baked into the complete artwork. */
body .nav-parchment .nav-scroll-art{clip-path:inset(0 0 10% 0)}
body .nav-parchment .nav-scroll-roller{height:calc(var(--scroll-height)*.105);filter:none;opacity:0;transition:opacity .16s .62s}
body.menu-open .nav-parchment .nav-scroll-roller{opacity:1;transition:opacity .18s .13s}
body .nav-parchment .nav-scroll-panel{top:74px;opacity:0;transition:height 1.1s cubic-bezier(.45,0,.55,1),opacity .16s .6s,visibility 0s 1.1s}
body.menu-open .nav-parchment .nav-scroll-panel{height:var(--scroll-height);opacity:1;visibility:visible;transition:height 1.45s cubic-bezier(.4,0,.2,1),opacity .18s,visibility 0s}
@media(max-width:700px){body .site-header.nav-parchment,body.site-wide .site-header.nav-parchment{width:221px;height:71px}body .nav-parchment .nav-scroll-toggle{height:71px}body .nav-parchment .nav-scroll-word{font-size:34.5px}body .nav-parchment .nav-scroll-panel{top:65px}body .nav-parchment .main-nav>a,body .nav-parchment .main-nav>.nav-shop{font-size:17px}}
@media(prefers-reduced-motion:reduce){body .nav-parchment .nav-scroll-panel,body.menu-open .nav-parchment .nav-scroll-panel,body .nav-parchment .nav-scroll-roller,body.menu-open .nav-parchment .nav-scroll-roller{transition:none}}

.nav-wizard-aura{position:absolute;left:-44px;top:-29px;width:calc(100% + 88px);height:calc(100% + 58px);pointer-events:none;z-index:0;mix-blend-mode:screen}
body .nav-parchment .nav-scroll-toggle:before{animation:none;opacity:.45}
body .nav-parchment .nav-scroll-toggle:after{display:none}
body.menu-open .nav-parchment .nav-scroll-panel{transition:height 1.45s cubic-bezier(.4,0,.2,1),opacity .2s .22s,visibility 0s}

/* The paper body ends behind the moving roller, including transparent sprite margins. */
body .nav-parchment .nav-scroll-paper{height:100%;overflow:hidden;clip-path:inset(0 0 calc(var(--scroll-height)*.085) 0)}
body .nav-parchment .nav-scroll-art{height:var(--scroll-height)}
body .nav-parchment .main-nav{top:calc(var(--scroll-height)*.17);bottom:auto;height:calc(var(--scroll-height)*.66)}

/* No ghosted paper or lettering while rewinding. Hide before the rolls flatten. */
body .nav-parchment .nav-scroll-panel{opacity:1;visibility:hidden;transition:height 1.1s cubic-bezier(.45,0,.55,1),visibility 0s .8s}
body.menu-open .nav-parchment .nav-scroll-panel{opacity:1;visibility:visible;transition:height 1.45s cubic-bezier(.4,0,.2,1),visibility 0s}
body .nav-parchment .nav-scroll-roller,body.menu-open .nav-parchment .nav-scroll-roller{opacity:1;transition:none}

/* The complete Esplora group grows 15%; particle cores are scaled separately in JS. */
body .site-header.nav-parchment,body.site-wide .site-header.nav-parchment{width:294.4px;height:92px}
body .nav-parchment .nav-scroll-toggle{height:92px}
body .nav-parchment .nav-scroll-word{font-size:46.023px;transform:none}
body .nav-parchment .nav-scroll-panel{top:86px}
.nav-wizard-foreground{z-index:2;mix-blend-mode:screen}
@media(max-width:700px){body .site-header.nav-parchment,body.site-wide .site-header.nav-parchment{width:254.15px;height:81.65px}body .nav-parchment .nav-scroll-toggle{height:81.65px}body .nav-parchment .nav-scroll-word{font-size:39.675px}body .nav-parchment .nav-scroll-panel{top:75.65px}}

/* A softer, more transparent version of the original frosted navbar glass. */
body .nav-parchment .nav-scroll-toggle:before,
body .nav-parchment .nav-scroll-toggle:hover:before,
body .nav-parchment .nav-scroll-toggle:focus-visible:before{
 inset:-12px -20px;border-radius:18px;
 background:linear-gradient(112deg,rgba(222,223,243,.025),rgba(183,184,211,.012) 50%,rgba(216,217,242,.02));
 backdrop-filter:blur(38px) saturate(110%);-webkit-backdrop-filter:blur(38px) saturate(110%);
 box-shadow:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(0deg,transparent,#000 24%,#000 76%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(0deg,transparent,#000 24%,#000 76%,transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect;
 filter:none;opacity:1;animation:none;z-index:-1;
}

/* A separate tightly rolled silhouette blends into the travelling paper. */
body .nav-parchment .nav-scroll-panel{
 height:calc(var(--scroll-height)*.115);opacity:0;visibility:hidden;
 transition:height 1.1s cubic-bezier(.45,0,.55,1),opacity .14s 1.02s,visibility 0s 1.16s;
}
body.menu-open .nav-parchment .nav-scroll-panel{
 height:var(--scroll-height);opacity:1;visibility:visible;
 transition:opacity .12s ease-out,height 1.45s cubic-bezier(.42,.015,.2,1),visibility 0s;
}
body .nav-parchment .nav-scroll-closed{
 position:absolute;top:0;left:0;width:100%;height:calc(var(--scroll-height)*.115);
 background:url('./pergamena-navbar-v1.png') center top / 100% var(--scroll-height) no-repeat;
 clip-path:polygon(0 0,100% 0,100% 100%,94% 100%,91% 87%,75% 90%,50% 92%,25% 90%,9% 87%,6% 100%,0 100%);
 pointer-events:none;z-index:3;opacity:1;transition:opacity .12s .96s;
}
body.menu-open .nav-parchment .nav-scroll-closed{opacity:0;transition:opacity .15s .1s}
body .nav-parchment .nav-scroll-paper{
 opacity:0;transition:opacity .12s .96s;
 clip-path:inset(0 0 min(calc(var(--scroll-height)*.085),max(0px,calc(100% - var(--scroll-height)*.115))) 0);
}
body.menu-open .nav-parchment .nav-scroll-paper{opacity:1;transition:opacity .15s .1s}
body .nav-parchment .nav-scroll-roller{opacity:0;transition:opacity .12s .8s}
body.menu-open .nav-parchment .nav-scroll-roller{opacity:1;transition:opacity .16s .27s}
@media(prefers-reduced-motion:reduce){
 body .nav-parchment .nav-scroll-panel,body.menu-open .nav-parchment .nav-scroll-panel,
 body .nav-parchment .nav-scroll-paper,body.menu-open .nav-parchment .nav-scroll-paper,
 body .nav-parchment .nav-scroll-closed,body.menu-open .nav-parchment .nav-scroll-closed,
 body .nav-parchment .nav-scroll-roller,body.menu-open .nav-parchment .nav-scroll-roller{transition:none}
}

/* Start with the complete lower roll; it always covers the travelling paper edge. */
body .nav-parchment .nav-scroll-panel{height:calc(var(--scroll-height)*.105)}
body.menu-open .nav-parchment .nav-scroll-panel{height:var(--scroll-height)}
body .nav-parchment .nav-scroll-closed{display:none}
body .nav-parchment .nav-scroll-roller,
body.menu-open .nav-parchment .nav-scroll-roller{opacity:1;transition:none;z-index:2}
body .nav-parchment .nav-scroll-paper{clip-path:inset(0 0 calc(var(--scroll-height)*.085) 0)}
/* Let the frosted layer sample the actual scene behind the header. */
body .nav-parchment .nav-scroll-toggle{isolation:auto;perspective:none}
body .nav-parchment .nav-scroll-toggle:before{z-index:0}
body .nav-parchment .nav-scroll-toggle:before{
 -webkit-mask-image:radial-gradient(ellipse at center,#000 35%,rgba(0,0,0,.85) 55%,transparent 73%);
 mask-image:radial-gradient(ellipse at center,#000 35%,rgba(0,0,0,.85) 55%,transparent 73%);
 -webkit-mask-composite:source-over;mask-composite:add;
}
/* Filter the scene in its own layer, outside the native button rendering. */
body .nav-parchment .nav-scroll-toggle:before{display:none}
.nav-parchment .nav-scroll-frost{
 position:absolute;inset:-12px -20px;pointer-events:none;z-index:0;
 background:rgba(210,215,225,.018);
 backdrop-filter:blur(38px) saturate(110%);-webkit-backdrop-filter:blur(38px) saturate(110%);
 -webkit-mask-image:radial-gradient(ellipse at center,#000 35%,rgba(0,0,0,.85) 55%,transparent 73%);
 mask-image:radial-gradient(ellipse at center,#000 35%,rgba(0,0,0,.85) 55%,transparent 73%);
}
body .nav-parchment .nav-scroll-toggle{z-index:1}

/* A wide Gaussian-like falloff, reaching zero well before the layer boundary. */
.nav-parchment .nav-scroll-frost{
 inset:-52px -80px;background:transparent;
 -webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.95) 0%,rgba(0,0,0,.88) 14%,rgba(0,0,0,.68) 28%,rgba(0,0,0,.43) 42%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.015) 80%,transparent 92%);
 mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.95) 0%,rgba(0,0,0,.88) 14%,rgba(0,0,0,.68) 28%,rgba(0,0,0,.43) 42%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.015) 80%,transparent 92%);
}

/* Preserve the scene colour instead of a neutral-looking frosted haze. */
.nav-parchment .nav-scroll-frost{
 background:transparent;
 backdrop-filter:blur(38px) saturate(155%) brightness(1.04);
 -webkit-backdrop-filter:blur(38px) saturate(155%) brightness(1.04);
}