/* Navigation fills the space left by the removed masthead branding. */
body,#main{background:#000}
.masthead{grid-template-columns:minmax(0,1fr) auto;min-height:84px;padding:16px clamp(24px,4vw,64px);gap:20px}
.masthead nav{grid-column:1;grid-row:1;justify-self:start;justify-content:flex-start;width:auto;margin:0;gap:clamp(18px,2.4vw,36px)}
.masthead .header-actions{grid-column:2;grid-row:1;justify-self:end;margin:0}

#beginning.forest-hero.video-hero{display:block;position:relative;aspect-ratio:2944/1248;min-height:0;height:auto;padding:0;background:#000}
#beginning.video-hero .hero-picture{position:absolute;inset:0;display:block;aspect-ratio:2944/1248;width:100%;height:100%;margin:0}
#beginning.video-hero .hero-film{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center top}
#beginning.video-hero .hero-heading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;max-width:none;width:100%;height:100%;padding:clamp(10px,1.25vw,24px) 4.5vw 0;text-align:center;z-index:3;pointer-events:none}
#beginning.video-hero .hero-title-block{width:max-content;max-width:100%;text-align:center}
#beginning.video-hero .eyebrow{font:700 clamp(21px,2.2vw,36px)/1.3 Fell,Georgia,serif;letter-spacing:2.5px;text-transform:none;color:#fff;margin:0 0 10px;max-width:none;text-align:center;text-shadow:0 2px 1px #000,0 3px 10px #000c}
#beginning.video-hero h1{font:700 clamp(64px,10.8vw,192px)/1.06 Uncial,Georgia,serif;letter-spacing:.025em;max-width:none;margin:0;padding:0 4px 6px 0;color:#fff;-webkit-text-stroke:1.5px #07170e;paint-order:stroke fill;text-shadow:0 5px 0 #07170e,0 12px 16px #000c;filter:drop-shadow(0 7px 5px #000b)}
#beginning.video-hero .hero-vignette{display:block;inset:0;z-index:2;background:linear-gradient(90deg,#0004,transparent 53%);pointer-events:none}
#beginning.forest-hero.video-hero .hero-picture:after{height:18%;min-height:20px;max-height:none;background:linear-gradient(to bottom,transparent 0%,#0001 20%,#0005 48%,#000d 78%,#000 100%);z-index:2;pointer-events:none}
#beginning.video-hero .video-stars{z-index:1}
#river{--river-overlap:clamp(10px,1.25vw,24px);margin-top:calc(-1 * var(--river-overlap));background:#000;mask-image:linear-gradient(to bottom,transparent 0%,#000 6%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 6%)}
#river:before{height:6%;min-height:12px;max-height:50px;background:linear-gradient(to bottom,#000c 0%,#0006 28%,transparent 100%)}
@media(max-width:900px){
 .masthead{grid-template-columns:1fr;min-height:118px;padding:12px 22px 14px;gap:6px}
 .masthead .header-actions{grid-column:1;grid-row:1;justify-self:end}
 .masthead nav{grid-column:1;grid-row:2;justify-self:center;justify-content:center;flex-wrap:wrap;width:100%;gap:3px 25px;white-space:normal}
 .masthead nav button,.masthead nav a{font-size:14px;min-height:40px;padding:8px 0;white-space:nowrap}
}
@media(max-width:600px){
 .masthead{min-height:0;padding:12px 18px 15px;gap:5px}
 .masthead nav{gap:0 18px}
 .masthead nav button,.masthead nav a{font-size:13px;min-height:39px}
 #beginning.forest-hero.video-hero{display:block;aspect-ratio:2944/1248;padding:0}
 #beginning.video-hero .hero-picture{position:absolute;inset:0;order:initial;aspect-ratio:2944/1248;height:100%;width:100%;margin:0}
 #beginning.video-hero .hero-heading{position:absolute;inset:0;order:initial;padding:4px 4vw 0;align-items:center;justify-content:flex-start;text-align:center}
 #beginning.video-hero .eyebrow{font-size:19px;line-height:1.3;letter-spacing:1.2px;margin:0 0 5px;max-width:none}
 #beginning.video-hero h1{font-size:clamp(36px,11.2vw,70px);line-height:1.05;max-width:none;letter-spacing:.01em;-webkit-text-stroke:.7px #07170e;text-shadow:0 2px 0 #07170e,0 4px 7px #000b;padding:0 3px 3px 0}
 #beginning.video-hero .hero-vignette{display:block;background:linear-gradient(90deg,#0005,transparent 60%)}
}

/* Let the full middle painting breathe before the parchment begins. */
#riddles.crypt-art-only{margin-top:0;padding:0 0 var(--scene-blend);background:#000;mask-image:linear-gradient(to bottom,transparent,#000 clamp(10px,1.5vw,26px));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 clamp(10px,1.5vw,26px))}

/* The river painting feathers into both adjoining scenes at its natural size. */
:root{--river-edge-fade:clamp(16px,3.2vw,60px)}
#river{mask-image:linear-gradient(to bottom,transparent 0,#000 var(--river-edge-fade),#000 calc(100% - var(--river-edge-fade)),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--river-edge-fade),#000 calc(100% - var(--river-edge-fade)),transparent 100%)}
#riddles.crypt-art-only{margin-top:calc(-1 * var(--river-edge-fade));mask-image:linear-gradient(to bottom,transparent,#000 var(--river-edge-fade));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--river-edge-fade))}

/* Preserve every frame edge and dissolve the ground into the castle night. */
#beginning.forest-hero.video-hero .hero-picture:after{height:22%;background:linear-gradient(to bottom,transparent 0%,#0002 28%,#0009 66%,#000 100%)}

/* Quiet white pulses centered on the stars already drawn in the film. */
#beginning.video-hero .video-stars i{width:clamp(10px,1.8vw,32px);height:clamp(10px,1.8vw,32px);background:radial-gradient(circle,#fff9 0%,#fff3 18%,transparent 68%);border-radius:50%;filter:none;opacity:0;animation:film-star-breathe var(--speed) ease-in-out var(--delay) infinite}
#beginning.video-hero .video-stars i:before,#beginning.video-hero .video-stars i:after{display:none}
@keyframes film-star-breathe{0%,30%,70%,100%{opacity:0}48%{opacity:.65}55%{opacity:.25}}
#beginning.video-hero .hero-heading{padding-top:0}
#beginning.video-hero .eyebrow{margin:8px 0 0}
@media(max-width:600px){#beginning.video-hero .hero-heading{padding-top:0}#beginning.video-hero .eyebrow{font-size:clamp(12px,3.5vw,19px);margin:3px 0 0}}
@media(prefers-reduced-motion:reduce){#beginning.video-hero .video-stars i{animation:none;opacity:0}}
.still #beginning.video-hero .video-stars i{animation:none;opacity:0}

/* A broad soft shade keeps the title clear above the star field. */
#beginning.video-hero .hero-title-block{position:relative;isolation:isolate}
#beginning.video-hero .hero-title-block:before{content:"";position:absolute;z-index:-1;inset:-20% -22% -30%;pointer-events:none;background:radial-gradient(ellipse at center,#000d 0%,#000b 32%,#0007 52%,transparent 74%)}
#beginning.video-hero h1{text-shadow:0 5px 0 #07170e,0 5px 12px #000,0 10px 28px #000,0 16px 48px #000d}
#beginning.video-hero .eyebrow{text-shadow:0 2px 2px #000,0 3px 10px #000,0 5px 22px #000}
/* Independent glints brighten the existing stars without moving them. */
#beginning.video-hero .video-stars i{width:clamp(12px,2.2vw,40px);height:clamp(12px,2.2vw,40px);background:radial-gradient(circle,#ffffffe6 0%,#ffffff80 9%,#ffffff26 25%,transparent 68%);animation:hero-starlight var(--speed) ease-in-out var(--delay) infinite}
#beginning.video-hero .video-stars i:before{display:block;content:"";position:absolute;inset:23%;background:#fff;clip-path:polygon(50% 0,56% 43%,100% 50%,56% 57%,50% 100%,44% 57%,0 50%,44% 43%)}
@keyframes hero-starlight{0%,18%,78%,100%{opacity:.02;transform:translate(-50%,-50%) scale(.8)}38%{opacity:.85;transform:translate(-50%,-50%) scale(1.08)}48%{opacity:.22;transform:translate(-50%,-50%) scale(.9)}58%{opacity:.6;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){#beginning.video-hero .video-stars i{animation:none;opacity:.12}}
.still #beginning.video-hero .video-stars i{animation:none;opacity:.12}

/* Clear, staggered glints remain visible throughout the slow forest loop. */
#beginning.video-hero .video-stars{z-index:2;mix-blend-mode:screen}
#beginning.video-hero .video-stars i{animation-name:hero-star-glimmer;filter:drop-shadow(0 0 4px #fff9)}
@keyframes hero-star-glimmer{0%,100%{opacity:.08;transform:translate(-50%,-50%) scale(.7)}35%{opacity:.22}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}65%{opacity:.25;transform:translate(-50%,-50%) scale(.85)}}
@media(prefers-reduced-motion:reduce){#beginning.video-hero .video-stars i{animation:none;opacity:.15}}
.still #beginning.video-hero .video-stars i{animation:none;opacity:.15}

#beginning.video-hero .hero-rare-shooting-star{position:absolute;left:28%;top:9%;z-index:2;width:clamp(50px,8vw,135px);height:2px;border-radius:50%;background:linear-gradient(90deg,transparent,#d7edff 75%,#fff);box-shadow:2px 0 4px #d8f4ff;opacity:0;pointer-events:none;transform:rotate(24deg);animation:hero-rare-shooting-pass 113s linear 0s infinite}
@keyframes hero-rare-shooting-pass{0%,48%{opacity:0;transform:translate(0,0) rotate(24deg)}48.15%{opacity:1}49.25%{opacity:0;transform:translate(24vw,10vw) rotate(24deg)}49.3%,100%{opacity:0;transform:translate(24vw,10vw) rotate(24deg)}}
@media(prefers-reduced-motion:reduce){#beginning.video-hero .hero-rare-shooting-star{display:none}}.still #beginning.video-hero .hero-rare-shooting-star{display:none}