/* A quiet masthead with a castle on the horizon and a day/night celestial orbit. */
body:not(.title-screen):not(.reading) #header{--masthead:#f7f5ef;--masthead-ink:#252c34;--masthead-muted:#87867f;--masthead-line:#d8d4cb;--masthead-red:#95544e;height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;padding:0;gap:0;background:var(--masthead);border-bottom-color:var(--masthead-line)}
body[data-theme=night]:not(.title-screen):not(.reading) #header{--masthead:#151a20;--masthead-ink:#e4e1d7;--masthead-muted:#898e95;--masthead-line:#343a40;--masthead-red:#ba7c70}
body:not(.title-screen):not(.reading) #header>.brand{grid-column:1;grid-row:1;max-width:none;width:fit-content;margin:18px 0 18px max(5vw,calc((100vw - 1230px)/2));color:var(--masthead-ink)}
body:not(.title-screen):not(.reading) #header>.brand small{color:var(--masthead-muted)}
body:not(.title-screen):not(.reading) #header>.header-tools{grid-column:2;grid-row:1;margin:18px max(5vw,calc((100vw - 1230px)/2)) 18px 20px;color:var(--masthead-ink)}
body:not(.title-screen):not(.reading) #header>.header-tools select{color:var(--masthead-ink)}
.site-banner{grid-column:1/-1;grid-row:2;position:relative;overflow:hidden;color:var(--masthead-ink);background:var(--masthead)}
.site-banner-inner{position:relative;width:min(1230px,90%);min-height:300px;margin:auto;display:flex;align-items:center;padding:28px 0 34px;border-top:1px solid var(--masthead-line)}
.site-banner-copy{position:relative;z-index:1;max-width:65%;text-shadow:0 1px 12px var(--masthead),0 0 3px var(--masthead)}
.site-banner-kicker{display:block;font:500 10px/1.5 var(--sans);letter-spacing:.3em;color:var(--masthead-red);margin-bottom:20px}
.site-banner-title{font:500 clamp(2.5rem,4vw,4rem)/1.28 var(--serif);letter-spacing:-.055em;color:var(--masthead-ink);margin:0;word-break:keep-all}
.site-banner-title>span{display:block}
.site-banner-intro{font:400 .82rem/1.9 var(--serif);color:var(--masthead-ink);opacity:.72;margin:24px 0 0;word-break:keep-all}
.masthead-scenery{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.masthead-sky{position:absolute;inset:0 0 0 auto;width:min(960px,72%);overflow:hidden;pointer-events:none;--orbit-x:clamp(225px,35vw,560px);--orbit-y:202px}
.masthead-castle{position:absolute;inset:0 auto 0 0;width:min(960px,72%);opacity:.48;-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.8) 38%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.8) 38%,transparent 100%);transition:opacity 1.8s ease}
.masthead-castle img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 52%;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 65%);mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 65%);filter:saturate(.66);transition:filter 1.8s ease}
.masthead-orbit{position:absolute;left:15%;top:90%;width:0;height:0;transform:rotate(0deg);transform-origin:0 0;transition:transform 1.8s cubic-bezier(.55,0,.25,1)}
.masthead-sun,.masthead-moons{position:absolute;transition:opacity 1.1s ease}
.masthead-sun{--sun-size:300px;left:calc(min(816px,61.2vw) - var(--sun-size) * .3);top:calc(-1 * var(--orbit-y) + 12px);width:var(--sun-size);transform:translate(-50%,-50%);opacity:.9}
.masthead-sun img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 80%);mask-image:linear-gradient(90deg,#000 45%,transparent 80%)}
.masthead-moons{--moon-span:340px;--moon-x:calc(min(816px,61.2vw) - var(--moon-span) * .42);left:calc(-1 * var(--moon-x));top:var(--orbit-y);width:var(--moon-span);height:calc(var(--moon-span) * .7);-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 78%,transparent 100%);transform:translate(-50%,-50%) rotate(180deg);opacity:0}
.masthead-blue{position:absolute;left:0;top:0;width:68%;height:auto}
.masthead-red{position:absolute;right:0;bottom:0;width:41%;height:auto}
body[data-theme=night] .masthead-orbit{transform:rotate(-180deg)}
body[data-theme=night] .masthead-sun{opacity:0}
body[data-theme=night] .masthead-moons{opacity:1}
body[data-theme=night] .masthead-castle{opacity:.55}
body[data-theme=night] .masthead-castle img{filter:saturate(.53) brightness(.58)}
body:not(.title-screen):not(.reading) #header,.site-banner{transition:background-color 1.4s ease,color 1.4s ease}
.site-banner-title,.site-banner-kicker,.site-banner-intro{transition:color 1.4s ease}
body:not(.title-screen):not(.reading) #header>nav{grid-column:1/-1;grid-row:3;order:initial;width:min(1230px,90%);height:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:auto;padding:0;border-top:1px solid var(--masthead-line);background:transparent}
body:not(.title-screen):not(.reading) #header>nav button{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;font-size:.9rem;color:var(--masthead-muted);margin:0;padding:16px 8px;border:0}
body:not(.title-screen):not(.reading) #header>nav button.active,body:not(.title-screen):not(.reading) #header>nav button:hover{color:var(--masthead-ink)}
body:not(.title-screen):not(.reading) #header>nav button.active:after{content:'';position:absolute;bottom:0;left:50%;width:28px;height:3px;background:var(--masthead-red);transform:translateX(-50%)}
.nav-index{font:500 .63rem var(--sans);color:var(--masthead-muted);opacity:.7}
body:not(.title-screen):not(.reading) .page{padding-top:44px}
@media(max-width:850px){
 .site-banner-inner{min-height:280px}
 .masthead-castle{width:75%}
 .masthead-sky{width:75%;--orbit-x:42vw;--orbit-y:196px}
 .masthead-sun{--sun-size:230px;left:calc(63.75vw - var(--sun-size) * .3)}
 .masthead-moons{--moon-span:290px;--moon-x:calc(63.75vw - var(--moon-span) * .42)}
 .site-banner-title{font-size:2.55rem}
}
@media(max-width:600px){
 body:not(.title-screen):not(.reading) #header>.brand{margin:15px 0 15px 5vw;font-size:.88rem;gap:8px}
 body:not(.title-screen):not(.reading) #header>.header-tools{margin:15px 5vw 15px 10px;gap:2px}
 .site-banner-inner{min-height:236px;padding:26px 0 28px}
 .site-banner-copy{max-width:none}
 .site-banner-kicker{font-size:9px;letter-spacing:.24em;margin-bottom:14px}
 .site-banner-title{font-size:clamp(1.7rem,7.5vw,2.45rem);line-height:1.42;letter-spacing:-.06em;text-shadow:0 1px 12px var(--masthead),0 0 3px var(--masthead)}
 .site-banner-intro{font-size:.72rem;margin-top:16px;max-width:280px;line-height:1.8;color:var(--masthead-ink);opacity:.72;text-shadow:0 0 8px var(--masthead),0 0 3px var(--masthead)}
 .masthead-sky{inset:0 -10px 0 auto;width:92%;--orbit-x:74vw;--orbit-y:176px}
 .masthead-castle{left:-10px;width:92%;opacity:.44;-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 38%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 38%,transparent 100%)}
 .masthead-castle img{object-position:43% 55%;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.18),#000 70%);mask-image:linear-gradient(180deg,rgba(0,0,0,.18),#000 70%)}
 .masthead-orbit{left:0;top:100%}
 .masthead-sun{--sun-size:clamp(130px,42vw,180px);left:calc(92vw - 10px - var(--sun-size) * .3);top:calc(-1 * var(--orbit-y) + var(--sun-size) * .3 - 60px)}
 .masthead-moons{--moon-span:clamp(210px,64vw,270px);--moon-x:calc(92vw - 10px - var(--moon-span) * .42)}
 body[data-theme=night] .masthead-castle{opacity:.55}
 body:not(.title-screen):not(.reading) #header>nav{width:90%;height:58px}
 body:not(.title-screen):not(.reading) #header>nav button{font-size:.79rem;padding:15px 0;gap:5px}
 .nav-index{font-size:.5rem}
 body:not(.title-screen):not(.reading) .page{padding-top:32px}
}