/* Icon-led pages share the network landscape from the top of main. */
:is(.page-about,.page-contact,.page-terms,.page-privacy) #main:before{top:0}
.page-about .about-hero,.page-contact .contact-intro,:is(.page-terms,.page-privacy) .legal-hero,
html[data-theme=light] .page-about .about-hero,html[data-theme=light] .page-contact .contact-intro,
html[data-theme=light] :is(.page-terms,.page-privacy) .legal-hero{background:color-mix(in srgb,var(--surface) 65%,transparent)}
/* A self-contained error destination. Keep navigation, omit the long footer. */
.page-notfound{padding-bottom:0}
.page-notfound .site-footer{display:none}
.page-notfound #main{min-height:calc(100svh - var(--site-header-height,84px))}
.page-notfound .error-page{max-width:1100px;min-height:calc(100svh - var(--site-header-height,84px));grid-template-columns:1fr 1.1fr;gap:32px;padding-block:clamp(18px,4vh,46px)}
.page-notfound .error-code{font-size:clamp(64px,8vw,104px);margin-bottom:18px}
.page-notfound .error-page h1{font-size:clamp(28px,3.1vw,42px)}
.page-notfound .error-page p{font-size:14px;line-height:1.8}
.page-notfound .error-scene{max-width:530px;width:100%;justify-self:center}
.lost-explorer{display:block;width:100%;height:auto;overflow:visible}
.lost-network{stroke:#548fb74d}.lost-node{fill:var(--surface);stroke:#55a8d7}
.lost-sign-face{fill:#0d2b43;stroke:#5b9abe;stroke-width:1.5}
html[data-theme=light] .lost-sign-face{fill:#e0eff9;stroke:#537f9d}
html[data-theme=light] .lost-network{stroke:#356c9240}
.explorer-standing,.explorer-question{opacity:0}
.explorer-seated{opacity:1}
/* The complete story only runs where motion is welcome. A long final pause
   gives the seated pose time to read, without a constant distracting loop. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 html:not([data-effects=off]) .explorer-standing{animation:explorer-arrive 14s linear infinite}
 html:not([data-effects=off]) .explorer-leg{transform-origin:247px 262px;animation:explorer-step 14s ease-in-out infinite}
 html:not([data-effects=off]) .explorer-leg-back{animation-name:explorer-step-back}
 html:not([data-effects=off]) .explorer-head{transform-origin:248px 195px;animation:explorer-look 14s ease-in-out infinite}
 html:not([data-effects=off]) .explorer-question{animation:explorer-puzzle 14s ease-in-out infinite}
 html:not([data-effects=off]) .explorer-seated{animation:explorer-sit 14s ease-in-out infinite}
 html:not([data-effects=off]) .explorer-sob{transform-origin:245px 310px;animation:explorer-sob 1.8s ease-in-out infinite}
 html:not([data-effects=off]) .explorer-tears{animation:explorer-tears 1.8s ease-in infinite}
 .page-idle .lost-explorer *{animation-play-state:paused!important}
}
@keyframes explorer-arrive{0%{opacity:0;transform:translateX(-110px)}4%{opacity:1}27%,48%{opacity:1;transform:translateX(0)}52%,97%{opacity:0;transform:translateX(0)}100%{opacity:0;transform:translateX(-110px)}}
@keyframes explorer-step{0%,7%,14%,21%{transform:rotate(-9deg)}3.5%,10.5%,17.5%,24.5%{transform:rotate(9deg)}28%,100%{transform:rotate(0)}}
@keyframes explorer-step-back{0%,7%,14%,21%{transform:rotate(9deg)}3.5%,10.5%,17.5%,24.5%{transform:rotate(-9deg)}28%,100%{transform:rotate(0)}}
@keyframes explorer-look{0%,28%{transform:rotate(0)}33%{transform:rotate(-9deg)}39%{transform:rotate(6deg)}45%,100%{transform:rotate(0)}}
@keyframes explorer-puzzle{0%,28%{opacity:0;transform:translateY(5px)}34%,46%{opacity:1;transform:translateY(0)}51%,100%{opacity:0}}
@keyframes explorer-sit{0%,48%{opacity:0;transform:translateY(-8px)}54%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes explorer-sob{0%,100%{transform:rotate(-1deg)}30%,65%{transform:rotate(1.5deg)}45%{transform:rotate(-1.5deg)}}
@keyframes explorer-tears{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media(max-width:700px){
 .page-notfound .error-page{min-height:calc(100svh - var(--site-header-height,72px));grid-template-columns:1fr;align-content:center;gap:0;padding:12px 20px calc(105px + env(safe-area-inset-bottom));text-align:center}
 .page-notfound .error-scene{width:min(76vw,320px,30svh);grid-row:1}
 .page-notfound .error-code{font-size:clamp(42px,7svh,64px);letter-spacing:-3px;margin:0 0 10px}
 .page-notfound .error-page .eyebrow{font-size:8px;letter-spacing:.15em}
 .page-notfound .error-page h1{font-size:clamp(23px,6.5vw,30px);line-height:1.16;margin:10px 0 12px}
 .page-notfound .error-page p{font-size:12px;line-height:1.7;max-width:340px;margin:0 auto 18px}
 .page-notfound .detail-actions{justify-content:center;gap:8px}
 .page-notfound .detail-actions .btn{font-size:11px;padding:10px 13px;min-height:42px}
}
@media(max-height:540px) and (min-width:701px){
 .page-notfound .error-page{padding-block:16px;max-width:950px}
 .page-notfound .error-scene{max-width:min(390px,76svh)}
 .page-notfound .error-code{font-size:50px;margin-bottom:8px}
 .page-notfound .error-page h1{font-size:27px;margin-block:10px}
 .page-notfound .error-page p{font-size:12px;margin-bottom:15px}
}
@media(max-width:700px) and (max-height:650px){
 .page-notfound .error-scene{width:145px}
 .page-notfound .error-code{font-size:40px;margin-bottom:7px}
 .page-notfound .error-page h1{font-size:23px;margin-block:8px}
 .page-notfound .error-page p{font-size:11px;margin-bottom:12px}
}
/* Short landscape displays need side-by-side content, still without motion. */
@media(max-width:700px) and (max-height:450px){
 .page-notfound .error-page{grid-template-columns:1fr 1.35fr;gap:14px;padding:12px 18px 88px}
 .page-notfound .error-scene{grid-column:1;width:min(30vw,180px)}
 .page-notfound .error-copy{grid-column:2;grid-row:1}
 .page-notfound .error-code{font-size:30px}.page-notfound .error-page h1{font-size:20px}
 .page-notfound .error-page .eyebrow{display:none}.page-notfound .error-page p{line-height:1.45;font-size:10px}
 .page-notfound .detail-actions .btn{padding:8px;font-size:10px;min-height:36px}
}