/* Reuse Hand/Elite exactly as supplied. Only the scenery moves. */
.blog-universe{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#090506;opacity:0;transform:scale(1.035);transition:opacity .75s .9s,transform 1.65s cubic-bezier(.2,.7,.2,1);isolation:isolate}
/* Procedural atmosphere: CSS light and a small canvas star field, no bitmap. */
.cosmic-nebula{position:absolute;inset:-18%;background:
 radial-gradient(ellipse 24% 39% at 76% 39%,rgba(194,22,44,.43),transparent 76%),
 radial-gradient(ellipse 46% 13% at 67% 56%,rgba(217,27,43,.34),transparent 78%),
 radial-gradient(ellipse 22% 42% at 88% 78%,rgba(137,10,32,.52),transparent 77%),
 radial-gradient(ellipse 37% 16% at 48% 25%,rgba(128,16,32,.3),transparent 78%);
 transform-origin:70% 50%;animation:cosmic-tide 65s ease-in-out infinite alternate;animation-play-state:paused}
.cosmic-nebula::before{content:'';position:absolute;inset:4%;background:
 radial-gradient(ellipse 43% 8% at 70% 47%,rgba(244,56,70,.2),transparent 72%),
 radial-gradient(ellipse 17% 44% at 75% 51%,rgba(7,3,8,.6),transparent 70%);transform:rotate(-24deg)}
.cosmic-stars{position:absolute;inset:0;width:100%;height:100%}
.blog-universe::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 65%)}
@keyframes cosmic-tide{from{transform:translate(-1.5%,1%) rotate(-5deg) scale(1)}to{transform:translate(2.5%,-1.5%) rotate(4deg) scale(1.06)}}
.blog-heading{position:absolute;top:50%;left:5%;z-index:10;transition:top 1.35s cubic-bezier(.2,.7,.2,1),color .75s}
.blog-heading-line{display:flex;align-items:center;gap:1.3cqw}
.blog-heading .blog-title{position:relative;top:auto;left:auto;max-width:none;margin:0}
.blog-expand{width:6.5cqw;min-width:48px;min-height:44px;padding:0;transform:rotate(-5deg);transition:transform .4s}
.blog-expand svg{display:block;width:100%;overflow:visible}
.arrow-ink{fill:var(--red);stroke:white;stroke-width:1.5;stroke-linejoin:round}
.arrow-scratch{fill:none;stroke:#111;stroke-width:1.2;stroke-linecap:round}
.blog-expand:hover{transform:rotate(2deg) translateX(4px)}
.blog-expand[aria-expanded=true]{transform:rotate(-90deg)}
.blog-collapse{color:inherit;font:inherit;font-size:clamp(12px,1.2cqw,16px);padding:10px 0;text-decoration:underline;text-underline-offset:5px}
.blog-collapse[hidden]{display:none}
.blog-collapse>span:first-child{color:var(--red);margin-right:.5em}
#blog-writing{visibility:hidden;opacity:0;transform:translateY(20px);transition:opacity .6s,transform .8s,visibility 0s .6s}
/* Return the portrait to its resting position before revealing it. The sky
   remains full-frame behind it, so no moving rectangular edge exposes white. */
#blog .galaxy-art{transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .75s .9s;transform-origin:center bottom}
.blog-expanded .blog-universe{opacity:1;transform:scale(1);transition:opacity .6s,transform 1.5s cubic-bezier(.2,.7,.2,1)}
.stage:not([data-page=blog]) .blog-universe{transition:opacity .35s}
.blog-expanded .cosmic-nebula{animation-play-state:running}
.blog-motion-paused .cosmic-nebula{animation-play-state:paused}
.stage.blog-expanded #blog .galaxy-art{transform:translateY(115vh);opacity:0;pointer-events:none;transition:transform 1.5s cubic-bezier(.4,0,.2,1),opacity .6s}
.blog-expanded .blog-heading{top:18%;color:white}
.blog-expanded #blog-writing{display:block;position:absolute;left:6%;top:39%;bottom:15%;width:54%;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ed1726 #161012;visibility:visible;opacity:1;transform:none;transition:opacity .7s .7s,transform .9s .65s,visibility 0s;padding:6px 22px 18px 6px;margin:0;color:#fff;font-size:clamp(14px,1.35cqw,19px)}
.blog-expanded #blog-posts li{padding:0 0 1.5em;margin:0 0 1.5em;border-bottom:1px solid #c7202c}
.blog-expanded #blog-posts a{color:white;font-family:Hand,cursive;font-size:clamp(30px,3.1cqw,48px);text-transform:uppercase;line-height:1.25}
.blog-expanded #blog-posts a:hover{color:#ff5864;text-decoration:none}
.blog-expanded #blog-posts time{color:#ddd}
.blog-expanded .post-excerpt{line-height:1.8;color:#fff}
.blog-empty{line-height:1.7}
.blog-expanded .masthead{background:none}
.blog-expanded .site-name,.blog-expanded .nav-item,.blog-expanded .nav-item[aria-current=page] span,.blog-expanded .nav-item:hover span,.blog-expanded .menu-toggle{color:#fff}
.blog-expanded .restore-cake{background:#fff;border-radius:50%}
@media(max-width:560px){
 #blog .mobile-flow{height:100dvh;min-height:100dvh;padding:0;display:block}
 #blog .galaxy-art{position:absolute;bottom:-22px;left:-60%;width:220%;margin:0}
 .blog-heading{top:18%;left:7%}
 .blog-heading-line{gap:14px}
 .blog-heading .blog-title{font-size:13cqw}
 .blog-expand{width:55px}
 .blog-collapse{font-size:12px;padding-top:14px}
 .blog-expanded .blog-heading{top:17%}
 .blog-expanded #blog-writing{top:34%;bottom:16%;left:7%;width:80%;font-size:14px;padding-right:12px}
 .blog-expanded #blog-posts a{font-size:31px}
 .blog-expanded #blog-posts li{padding-bottom:1.1em;margin-bottom:1.1em}
 .blog-universe::after{background:linear-gradient(90deg,rgba(0,0,0,.12),transparent)}
 .cosmic-nebula{inset:-10% -45%}
 .blog-expanded .masthead nav{background:#100609;border-color:#ed1726;box-shadow:2px 3px 0 #ed1726}
 .blog-expanded .masthead nav::before{border-color:#ed1726}
}
@media(prefers-reduced-motion:reduce){
 .blog-universe,.blog-heading,#blog .galaxy-art,#blog-writing,.blog-expand{transition:none!important}
 .cosmic-nebula{animation:none!important}
}