/* About stays within the DNA space; Blog opens its existing overlay. */
.contact-end{display:grid;grid-template-columns:1fr auto;align-content:end;align-items:end;gap:48px 24px}
.home-about{grid-column:1 / -1;max-width:460px;pointer-events:auto;scroll-margin-top:110px;text-shadow:0 2px 25px #000}
.home-about h2{font-size:clamp(28px,4vw,48px);font-weight:400;letter-spacing:-.04em;margin:16px 0}
.home-about .description{margin-bottom:0}
.contact-end>.contact-link{justify-self:end;white-space:nowrap}
.category-list .about-link{margin-top:12px;font:12px monospace;padding:8px 14px;min-height:36px;display:flex;align-items:center;color:#89949e;border-left:1px solid transparent}
.category-list .about-link:hover{color:#eef3f3}
@media(max-width:700px){
  .contact-end{gap:36px 16px}
  .category-list .about-link{font-size:10px;min-height:28px;padding:6px 10px}
  .category-list{top:60svh}
}
@media(max-width:700px) and (max-height:650px){
  .category-list{top:54svh}
  .category-list .about-link{min-height:25px;padding:5px 10px}
}

.footer-actions{display:flex;align-items:center;gap:12px;pointer-events:auto;justify-self:end}
.settings-toggle{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff50;border-radius:50%;background:#0007;backdrop-filter:blur(8px)}
.settings-toggle:hover{border-color:var(--accent)}
#site-settings{position:fixed;inset:auto 8vw calc(13vh + 64px) auto;margin:0;width:min(260px,86vw);padding:20px;background:#0b141af5;color:var(--ink);border:1px solid #ffffff40;border-radius:12px;box-shadow:0 12px 40px #0008}
#site-settings .eyebrow{margin:0 0 12px}
#motion{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;font:12px monospace}
#motion::after{content:'OFF';color:var(--muted);font-size:10px}
#motion[aria-pressed=true]::after{content:'ON';color:var(--accent)}
@media(max-width:700px){.footer-actions{gap:8px}.footer-actions .contact-link{gap:16px;padding:0 18px}.settings-toggle{width:44px;height:44px}#site-settings{right:7vw;bottom:calc(15vh + 64px)}}

/* Extend the scene behind iPhone system chrome; keep controls in the safe area. */
header{padding-top:calc(30px + env(safe-area-inset-top,0px));padding-left:max(4vw,env(safe-area-inset-left,0px));padding-right:max(4vw,env(safe-area-inset-right,0px))}
#room,.full-page{padding-top:calc(30px + env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));padding-left:max(5vw,env(safe-area-inset-left,0px));padding-right:max(5vw,env(safe-area-inset-right,0px))}
.navigation{bottom:calc(28px + env(safe-area-inset-bottom,0px));left:max(4vw,env(safe-area-inset-left,0px));right:max(4vw,env(safe-area-inset-right,0px))}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
#fallback{top:calc(95px + env(safe-area-inset-top,0px))}
@media(max-width:700px){
 header{padding-top:calc(18px + env(safe-area-inset-top,0px));padding-left:max(6vw,env(safe-area-inset-left,0px));padding-right:max(6vw,env(safe-area-inset-right,0px))}
 .full-page{padding-top:calc(20px + env(safe-area-inset-top,0px));padding-left:max(6vw,env(safe-area-inset-left,0px));padding-right:max(6vw,env(safe-area-inset-right,0px))}
 .navigation{bottom:calc(14px + env(safe-area-inset-bottom,0px));left:max(6vw,env(safe-area-inset-left,0px));right:max(6vw,env(safe-area-inset-right,0px))}
}

/* Dark translucent glass keeps the DNA visible without competing with the text. */
#contact-page{background:transparent;isolation:isolate}
#contact-page::backdrop{background:rgba(3,8,13,.56);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.contact-open #world{filter:none}
.contact-open .sticky,.contact-open #story{visibility:hidden}
#contact-page .contact-content{min-height:78svh;text-align:center;text-shadow:0 2px 18px #0008}
#contact-page .page-top{text-shadow:0 2px 12px #0008}
#contact-page .page-top button{background:#ffffff08;border-color:#ffffff40}
@media(max-width:700px){#contact-page .contact-content h2{font-size:clamp(58px,15vw,96px)}}

/* Star accents share the existing DNA universe; no separate opening backdrop. */
#star-arrival{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;background:transparent}
/* Warm haze and a long vertical flare echo the reference while staying on the DNA particle. */
.north-star{z-index:2;position:absolute;left:58%;top:36%;width:4px;height:4px;border-radius:50%;filter:blur(1.8px)}
/* The core stays luminous; only the surrounding haze and flare breathe. */
.north-star>span{position:absolute;inset:-32px;border-radius:50%}
.north-star>span::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at center,#fff6dbe6 0%,#ffedbb85 15%,#ead1a445 28%,#d8bfa41a 46%,transparent 72%);box-shadow:0 0 22px 8px #e9d5b508;animation:polaris-breathe 8s ease-in-out infinite}
.north-star>span::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fffffa 0%,#fffff2 22%,#fff8e8e6 42%,#fff2cf70 62%,transparent 80%)}
.north-star::before,.north-star::after{animation:polaris-breathe 8s ease-in-out infinite;content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#fffff2 0%,#fff4d8b3 12%,#f5dfaa59 36%,#ebd4ac14 59%,transparent 74%)}
.north-star::before{width:3px;height:150px}.north-star::after{height:4px;width:72px;opacity:.5}




@keyframes polaris-breathe{0%,100%{filter:brightness(.6)}50%{filter:brightness(1.5)}}
body.reduced .north-star::before,body.reduced .north-star::after,body.reduced .north-star>span::before{animation:none}
@media(prefers-reduced-motion:reduce){.north-star::before,.north-star::after,.north-star>span::before{animation:none}}
.page-open #star-arrival,.inside #star-arrival{visibility:hidden}