/* The star field sits behind the centered page, including below the fold. */
body{background:#040509;isolation:isolate}
.night-sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#040509 url(assets/estrelas.svg) repeat center top / 1050px 840px}
.spiral,.deep-field{position:absolute;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 29%,#000b 63%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 29%,#000b 63%,transparent 100%)}
.spiral{width:clamp(230px,27vw,660px);aspect-ratio:2.3;top:22%;left:calc(7.1% - clamp(115px,13.5vw,330px));background-image:url(assets/galaxia-espiral.jpg);filter:saturate(.58) contrast(1.12);transform:rotate(-37deg);opacity:.76}
.deep-field{width:clamp(220px,31vw,800px);aspect-ratio:1.6;right:calc(4% - clamp(110px,15.5vw,400px));top:62%;background-image:url(assets/campo-profundo.jpg);filter:saturate(.46) contrast(1.18);transform:rotate(28deg);opacity:.50}
.site{box-shadow:0 0 0 1px #81827b38,0 0 24px #000a}

/* Soft clay face, darker lower edge, then a short cast shadow on the paper. */
:root{
 --clay-speckle:url(assets/granulado.png);
 --face:#eae1d2;--ridge:#bdb09b;--foot:#968974;--cast:#372d233f;
}
.button.dark,.button.gold,.mobile-menu,.nav-schools,.circle,.clay-stamp,.close,summary span{
 --edge:3px;
 background-color:var(--face);background-image:var(--clay-speckle);background-size:114px;
 border:0;
 box-shadow:inset 1px 2px 2px #fffc, inset -1px -2px 3px #2e211d30,
  0 var(--edge) 0 var(--ridge),0 calc(var(--edge) + 1px) 0 var(--foot),
  1px calc(var(--edge) + 4px) 6px var(--cast);
}
.button.dark{--face:#233f59;--ridge:#132c40;--foot:#0a1b2b;--cast:#0d213d49}
.button.gold{--face:#f8bd32;--ridge:#c88b19;--foot:#92631b;--cast:#0006}
.button.dark,.button.gold,.nav-schools,.mobile-menu{border-radius:26px 29px 25px 27px / 26px 25px 28px 28px;transition:transform .16s,filter .16s}
.button.dark,.button.gold{padding:8px 10px 8px 19px;min-height:43px;gap:13px}
.button.dark{box-shadow:inset 1px 2px 2px #8ba6b87d,inset -1px -2px 3px #0006,0 3px 0 var(--ridge),0 4px 0 var(--foot),1px 7px 8px var(--cast)}
.button.dark:hover,.button.gold:hover,.nav-schools:hover,.mobile-menu:hover,.close:hover{background-color:var(--face);background-image:var(--clay-speckle);filter:brightness(1.065)}
.button.dark:active,.button.gold:active,.nav-schools:active,.mobile-menu:active,.route:active,.close:active{transform:translateY(2px);filter:brightness(.98)}
.clay-stamp,.circle,summary span{display:inline-grid;place-items:center;flex:none;border-radius:46% 51% 49% 48% / 49% 46% 52% 49%}
.clay-stamp,.circle{--face:#edb032;--ridge:#b38129;--foot:#866223;--cast:#091a2938;--edge:1px;color:#172c3d}
.clay-stamp{width:26px;height:26px}
.clay-stamp .icon,.circle .icon{width:16px;height:16px;filter:drop-shadow(0 1px .2px #fff6)}
.clay-stamp .icon use,.circle .icon use{stroke-width:2}
.button.gold .clay-stamp{--face:#ffe0a0;--ridge:#c6963e;--foot:#916e2c}
nav{gap:clamp(14px,2.65cqw,36px)}
nav a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
nav a:not(.nav-schools):hover .nav-icon{transform:translateY(-2px) rotate(-4deg)}
.nav-icon,.module-icon{display:block;width:clamp(30px,3.7cqw,52px);height:clamp(30px,3.7cqw,52px);object-fit:contain;transition:transform .18s;filter:drop-shadow(0 1px 1px #44302030)}
.nav-schools{--face:#e8dcca;--ridge:#c4b49b;--foot:#a0917b;--edge:2px;padding:5px 14px 5px 7px}
.mast{gap:15px}
.mobile-menu{padding:8px 13px}
.menu-bars{position:relative;display:inline-block;width:13px;height:10px;border-top:2px solid;border-bottom:2px solid;border-radius:2px}
.menu-bars::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid;border-radius:2px}
.route{background-color:#f0eadf;background-image:var(--clay-speckle);background-size:164px;border-radius:15px 17px 15px 17px / 16px 15px 18px 16px;
 box-shadow:inset 1px 2px 3px #fff,inset -1px -3px 4px #baac963d,0 3px 0 #c6baa4,0 5px 0 #9c927f,1px 9px 9px #0005}
.route:hover{background:#f6f0e4 var(--clay-speckle) repeat 0 0 / 164px}
.route .circle{width:30px;height:30px;--edge:2px}
.route:not(.books) .circle{--face:#f1b638;--ridge:#c49437;--foot:#9b7736}
.route.books .circle{--face:#dfd2b9;--ridge:#c0aa85;--foot:#9a896c}
.route .tag i{height:3px;border-radius:3px;background:#c9652b;box-shadow:0 1px 0 #8d4c26}
.module-tabs{background:#ddd5c7 var(--clay-speckle) repeat 0 0 / 140px;box-shadow:inset 1px 2px 3px #32261727,inset -1px -1px 1px #fff8;padding:6px;gap:7px}
.module-tabs button,.module-tabs button[aria-selected="false"]:hover{background:#f1eadf var(--clay-speckle) repeat 0 0 / 145px;box-shadow:inset 0 1px 2px #fff,0 2px 0 #baaa92,0 3px 3px #30231331;padding:7px 9px;border-radius:9px 11px 9px 10px}
.module-tabs button[aria-selected="true"]{background:#263e54 var(--clay-speckle) repeat 0 0 / 126px;box-shadow:inset 1px 1.5px 2px #8195a666,0 2px 0 #142d41,0 3px 3px #192b3940}
.module-icon{width:clamp(24px,3.1cqw,44px);height:clamp(24px,3.1cqw,44px)}
.close{--edge:2px;--face:#ede2cd;}
summary{padding-right:4px}
summary span{--edge:1px;--face:#e5d8c2;width:24px;height:24px}
summary span::before,summary span::after{top:11px;left:6px;width:12px;background:#39424a}
.back .clay-stamp{--face:#e5d6bd;--ridge:#ae9f8d;--foot:#82786a}
@media(max-width:1100px) and (min-width:761px){
 nav{gap:13px}nav a{gap:4px}nav .nav-icon{width:26px;height:26px}.nav-schools{padding-right:10px}
}
@media(max-width:760px){
 .night-sky{background-size:630px 504px}.spiral{width:32vw;left:-8vw;top:20vh}.deep-field{width:40vw;right:-17vw;top:72vh}
 nav.open{padding:9px;gap:4px}
 nav a,nav .nav-schools{justify-content:flex-start;gap:9px}
 .nav-icon{width:30px;height:30px}
 .module-tabs{gap:4px;padding:4px}
 .module-tabs button{gap:3px;padding:7px 3px}.module-icon{width:26px;height:26px}
 .route .circle{width:24px;height:24px}.circle .icon{width:14px;height:14px}
 .back .clay-stamp{width:22px;height:22px}
}
@media(max-width:560px){
 .module-tabs button{display:grid;justify-items:center;align-content:center;gap:3px}.module-tabs button span{display:none}
 .module-icon{width:24px;height:24px}.button.dark,.button.gold{padding:7px 8px 7px 14px}.circle .icon{width:12px}.route .circle{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){.nav-icon,.button.dark,.button.gold,.nav-schools,.mobile-menu{transition:none}}