/* Shared extras: star fields, sub-page layout, footer columns. Loaded after the base styles. */
.stars.paused i,.stars.paused .shoot{animation-play-state:paused}
.band,footer{position:relative;overflow:hidden}
.band .w,footer .w{position:relative;z-index:1}
.band .stars{z-index:0}
footer .stars{opacity:.55}
/* shooting stars */
.stars .shoot{position:absolute;display:block;width:110px;height:2px;left:-12%;top:14%;opacity:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,243,210,0),#FFF3D2);filter:drop-shadow(0 0 4px rgba(255,236,190,.9));
  transform:rotate(16deg);animation:shoot 12s linear infinite;animation-delay:4s;will-change:transform,opacity}
.stars .shoot.b{top:34%;left:30%;width:80px;animation-duration:17s;animation-delay:11s}
@keyframes shoot{0%{opacity:0;transform:translate3d(0,0,0) rotate(16deg)}1.5%{opacity:1}9%{opacity:0;transform:translate3d(46vw,13vw,0) rotate(16deg)}100%{opacity:0;transform:translate3d(46vw,13vw,0) rotate(16deg)}}
/* small sparkle before section labels */
.sh .k::before,.k2::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.55em;vertical-align:-.12em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23F2C46B' d='M50 0C54 30 70 46 100 50C70 54 54 70 50 100C46 70 30 54 0 50C30 46 46 30 50 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(255,226,150,.85));animation:tw 3.8s ease-in-out infinite}
/* ornament divider */
.orn{display:flex;align-items:center;gap:16px;max-width:360px;margin:0 auto;padding:6px 16px}
.orn::before,.orn::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,rgba(242,196,107,0),#F2C46B)}
.orn::after{background:linear-gradient(270deg,rgba(242,196,107,0),#F2C46B)}
.orn svg{flex:none;filter:drop-shadow(0 0 6px rgba(255,226,150,.9));animation:tw 4.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sh .k::before,.k2::before,.orn svg{animation:none}.stars .shoot{display:none}}
/* sub-page hero */
.hero.inner .w{padding-block:48px 56px;align-items:center}
.hero.inner .hero-logo{margin:0 auto;width:min(360px,100%)}
@media (max-width:900px){.hero.inner .hero-logo{display:none}.hero.inner .w{padding-block:30px 40px}.hero.inner .stars{opacity:.55}}
.hero.inner h1{font-size:clamp(34px,5.2vw,58px);max-width:19em;margin-bottom:14px}
.hero.inner p.lead{margin-bottom:0}
.crumbs{margin:0 0 16px;font:600 15px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-mut)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--gold)}
.crumbs .sep{opacity:.55;margin:0 8px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cta-row .btn.line{color:var(--on-navy)}
/* reading sections */
.prose{max-width:46em}
.prose p{margin:0 0 16px;line-height:1.7}
.prose ul{margin:0 0 18px;padding-left:22px}
.prose li{margin:7px 0;line-height:1.6}
.prose a{color:var(--gold)}
.prose .sh{margin-bottom:20px}
.prose h3{margin:26px 0 8px}
.fig{margin:6px 0 26px;border:2px solid var(--line);background:var(--card)}
.fig img{display:block;width:100%;height:auto}
.fig figcaption{padding:8px 14px;color:var(--mut);font-size:14.5px;border-top:2px solid var(--line)}
.more{display:inline-block;font:700 17px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.more::after{content:" \2192"}
.more:hover{text-decoration:underline}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;margin:6px 0 20px}
.rel a{display:block;border:2px solid var(--line);background:var(--card);padding:14px 16px;text-decoration:none;font:700 20px var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.rel a:hover{border-color:var(--gold);color:var(--gold)}
.rel a small{display:block;margin-top:5px;color:var(--mut);font:400 15px/1.4 var(--body);text-transform:none;letter-spacing:0}
.areas li{padding:0}
.areas li a,.areas li.cur{display:block;padding:8px 16px;text-decoration:none;color:inherit}
.areas li:hover{border-color:var(--gold)}
.areas li a:hover{color:var(--gold)}
.callout{border:2px solid var(--line);border-left:6px solid var(--gold);background:var(--card);padding:16px 20px;margin:0 0 22px}
.callout p{margin:0}
/* footer with four columns */
footer .cols{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
@media (max-width:900px){footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){footer .cols{grid-template-columns:minmax(0,1fr)}}
footer .cols p a{color:var(--on-navy)}