/* Final checkpoint: social destinations and the existing playable Shadow. */
.contact-section{padding-bottom:42px}
.outro-grid{display:block;padding:24px 0;border-top:1px solid #d9607555}
.outro-heading{font-size:clamp(52px,6vw,88px);line-height:.96;letter-spacing:-.01em;text-shadow:0 4px 24px #000}
.outro-grid .shadow-encounter--signoff{margin:0;min-width:0;background:linear-gradient(120deg,#16121acc,transparent);border:1px solid #8d405b44;padding:14px 18px;border-radius:8px}
.outro-grid .shadow-hint{left:18px;bottom:12px;font-size:10px}
.outro-grid .shadow-runway{bottom:44px}
.outro-grid .shadow-copy{padding-top:18px}
.outro-grid .shadow-signoff{font-size:36px}
.outro-socials{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.outro-socials a{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:22px 24px;background:linear-gradient(145deg,#241722e8,#0c0d15ed);border:1px solid #79506366;border-radius:6px;box-shadow:inset 0 1px #ffffff0a;transition:transform .2s,border-color .2s,background .2s}
.outro-socials a:hover{transform:translateY(-4px);border-color:#ed6687;background:#291724}
.outro-socials strong{font-family:var(--heading);font-size:29px;font-weight:600;line-height:1.2}
.outro-socials small{font:11px var(--mono);color:#bdaab8}
.outro-socials .social-arrow{grid-column:2;grid-row:1 / 3;align-self:center;font-size:27px;color:#f57c97}
footer.site-footer{display:block;margin:0 5.5%;padding:24px 0 28px;background:transparent;border-top:1px solid #a86d8240;color:#baaab6}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:22px}
.site-footer .footer-brand{font-family:var(--heading);font-size:36px;font-weight:700;letter-spacing:-.015em;color:#efdfeb}
.footer-controls{display:flex;align-items:center;gap:24px}
.footer-controls a,.footer-controls button{font:11px var(--mono);color:#d7bdce;border:0;background:transparent;padding:10px 0;cursor:pointer}
.footer-controls a:hover,.footer-controls button:hover{color:#ff7396}
.footer-meta{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;border-top:1px solid #75516924;padding-top:16px}
.site-footer .footer-meta p{margin:0;font-size:12px}
.site-footer .fan-note{margin:0;font-size:11px;max-width:none;color:#a18c9a}
/* A short, optional ring pickup opens a portal into the portfolio. */
#ring-entrance{inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;background:radial-gradient(ellipse at 50% 48%,#351425,#100c1a 58%,#06080f);overflow:hidden}
#ring-entrance:not([open]){display:none}
#ring-entrance::backdrop{background:#070810}
.entrance-open{overflow:hidden}
.entrance-hud{position:absolute;top:30px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;gap:16px;z-index:3;font:11px var(--mono);color:#bd9fae;letter-spacing:.09em}
.entrance-hud button{background:#20131ecc;color:#eec4d2;border:1px solid #8d4d6866;padding:10px 16px;font:11px var(--mono)}
.entrance-content{position:absolute;inset:17% 5% auto;text-align:center;z-index:2;pointer-events:none}
.entrance-content .eyebrow{color:#fa7b9b;margin:0 0 20px}
.entrance-content h2{font-size:clamp(48px,7vw,98px);line-height:.9;letter-spacing:-.025em;text-shadow:0 4px #60162b,0 12px 35px #b71d4933}
.entrance-content h2 span{color:#f56787}
.entrance-stage{position:absolute;top:45%;left:50%;width:min(100%,1000px);height:260px;transform:translateX(-50%);perspective:600px}
.entrance-floor{position:absolute;left:-20%;right:-20%;top:64%;height:80vh;transform-origin:top;transform:rotateX(65deg);background:linear-gradient(#f76f8b55 1px,transparent 1px),linear-gradient(90deg,#f76f8b44 1px,transparent 1px);background-size:50px 35px;mask-image:linear-gradient(#000,transparent 70%);animation:entrance-road .65s linear infinite}
@keyframes entrance-road{to{background-position:0 35px}}
#entrance-runner{position:absolute;inset:0;width:100%;height:240px;object-fit:contain;pointer-events:none}
#entrance-ring{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:86px;height:105px;background:none;border:0;padding:0;perspective:500px;z-index:2}
.pickup-ring{position:absolute;inset:8px 14px;border:9px solid #ffc96a;border-radius:50%;box-shadow:inset 3px 0 #a96522,4px 2px #a96522,0 0 26px #ffae3d55;animation:pickup-spin 1.8s ease-in-out infinite;transition:opacity .15s}
@keyframes pickup-spin{0%,100%{transform:rotateY(-25deg) translateY(0)}50%{transform:rotateY(40deg) translateY(-7px)}}
.ring-collected .pickup-ring{opacity:0}
.pickup-score{position:absolute;inset:20px 0 auto;font:700 28px var(--heading);color:#ffe0a1;opacity:0;pointer-events:none}
.ring-collected .pickup-score{animation:pickup-score 1s ease-out both}
@keyframes pickup-score{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:0 -75px}}
.entrance-portal{position:absolute;left:50%;top:calc(45% + 90px);width:110px;height:110px;margin:-55px;border:2px solid #86dafa;border-radius:50%;opacity:0;box-shadow:0 0 40px #5da8ff66,inset 0 0 30px #ff428355;pointer-events:none;z-index:1}
.ring-collected .entrance-portal{animation:entrance-portal 1.2s cubic-bezier(.15,.7,.4,1) both}
@keyframes entrance-portal{0%{opacity:0;transform:scale(.4)}15%{opacity:.8}100%{opacity:0;transform:scale(24)}}
#entrance-caption{position:absolute;bottom:12%;left:5%;right:5%;text-align:center;font:11px var(--mono);color:#ceafbb;letter-spacing:.08em;z-index:2}
.ring-collected .entrance-content{animation:entrance-title-out 1.2s ease both}
@keyframes entrance-title-out{0%,25%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -25px}}
@media(max-width:900px){.outro-grid{grid-template-columns:1fr;gap:24px}.outro-grid .shadow-encounter--signoff{max-width:none;min-height:225px}.outro-socials a{padding:18px}.outro-socials small{font-size:10px}}
@media(max-width:600px){.outro-heading{font-size:clamp(48px,12vw,68px)}.outro-socials{grid-template-columns:1fr}.outro-socials a{padding:18px 22px}.outro-socials strong{font-size:26px}.footer-top{align-items:flex-start;flex-direction:column;gap:10px}.footer-meta{align-items:flex-start;flex-direction:column}.footer-controls{gap:22px}.site-footer .fan-note{font-size:10px}.entrance-content{top:21%}.entrance-content h2{font-size:clamp(43px,11vw,65px)}.entrance-stage{top:44%}.entrance-hud{top:20px;font-size:9px}.entrance-hud button{font-size:10px}#entrance-caption{font-size:10px;bottom:14%}.entrance-portal{top:calc(44% + 90px)}}
@media(max-height:540px){.entrance-content{top:18%}.entrance-content .eyebrow{margin-bottom:12px;font-size:10px}.entrance-content h2{font-size:42px}.entrance-stage{top:32%}#entrance-caption{bottom:5%}.entrance-hud{top:12px}.entrance-portal{top:calc(32% + 90px)}}
@media(prefers-reduced-motion:reduce){#entrance-replay{display:none}}

/* Shadow speaks from the side of each full, usable runway. */
.shadow-encounter{--speech-offset:180px}
.shadow-copy.speech-bubble{position:relative;top:10px;margin-left:var(--speech-offset);width:fit-content;max-width:calc(100% - var(--speech-offset) - 8px);padding:10px 14px;background:#251622;border:2px solid #b36583;border-radius:3px;box-shadow:4px 4px 0 #6c2946,7px 7px 0 #08090c99,inset 0 2px #ffd9ec14;z-index:1}
.speech-bubble::before{content:"";position:absolute;left:-8px;top:30px;width:13px;height:13px;background:#251622;border-left:1px solid #b36583;border-bottom:1px solid #b36583;transform:rotate(45deg)}
.shadow-copy.speech-bubble .about-lead{position:relative;font-family:"Pixelify Sans",monospace;font-size:17px;line-height:1.3;color:#f3dfe9;margin:0;text-shadow:1px 2px #08090c}
.outro-grid .shadow-encounter--signoff{width:100%;max-width:none;min-height:230px;--speech-offset:190px}
.outro-grid .shadow-copy.speech-bubble{top:22px;padding:11px 17px}
.outro-grid .speech-bubble .shadow-signoff{font-family:"Pixelify Sans",monospace;font-size:clamp(23px,2.5vw,30px);font-weight:500;line-height:1.1;letter-spacing:0;margin:0;text-transform:none;color:#ffe5ed;text-shadow:2px 2px #090a10}
.outro-grid .speech-bubble::before{top:23px}
@media(min-width:761px) and (max-width:1100px){.shadow-encounter{--speech-offset:145px}.outro-grid .shadow-encounter--signoff{--speech-offset:160px}.shadow-copy.speech-bubble{padding:10px 12px}.shadow-copy.speech-bubble .about-lead{font-size:16px}}
@media(max-width:480px){.shadow-encounter{--speech-offset:135px;min-height:240px}.shadow-copy.speech-bubble{top:15px;padding:9px 10px;max-width:calc(100% - var(--speech-offset) - 2px)}.shadow-copy.speech-bubble .about-lead{font-size:15px;line-height:1.3}.speech-bubble::before{top:31px}.outro-grid .shadow-encounter--signoff{--speech-offset:140px;min-height:230px;padding-inline:12px}.outro-grid .shadow-copy.speech-bubble{padding:10px 12px;top:27px}.outro-grid .speech-bubble .shadow-signoff{font-size:24px}.outro-grid .speech-bubble::before{top:20px}}

/* Mobile layout corrections: let grid tracks shrink to the available width. */
.shadow-encounter.is-running .shadow-copy.speech-bubble{visibility:hidden;opacity:0}
.about-section{grid-template-columns:repeat(2,minmax(0,1fr))}
.about-intro,.profile-details,.project-card,.outro-socials a{min-width:0}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px}
.shadow-encounter{--sprite-height:170px;--road-bottom:30px;--speech-offset:158px}
.shadow-copy.speech-bubble,.outro-grid .shadow-copy.speech-bubble{position:absolute;left:var(--speech-offset);top:calc(100% - var(--road-bottom) - var(--sprite-height)*.47 - 24px);margin-left:0;max-width:calc(100% - var(--speech-offset) - 12px)}
.speech-bubble::before,.outro-grid .speech-bubble::before{top:18px}
.outro-grid .shadow-encounter--signoff{--road-bottom:44px;--speech-offset:165px}
footer.site-footer{padding:24px 22px 28px;background:linear-gradient(135deg,#110d16f5,#090b13f5);border:1px solid #72526666;border-radius:8px 8px 0 0}
.site-footer .footer-meta p{color:#d4c3cf}
.site-footer .fan-note{color:#bfaaba;font-size:12px;line-height:1.6}
.footer-controls a,.footer-controls button{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
@media(min-width:761px) and (max-width:1100px){.shadow-encounter{--sprite-height:155px;--speech-offset:139px}.outro-grid .shadow-encounter--signoff{--speech-offset:146px}}
@media(max-width:760px){
 .about-section{grid-template-columns:minmax(0,1fr)}
 .about-intro h2{font-size:clamp(46px,12vw,60px)}
 .site-header nav{gap:4px}
 .site-header nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding-inline:8px;font-size:14px}
 .site-header .brand{min-height:44px;gap:6px}
 .profile-meta,.detail-block h3,.detail-block p{overflow-wrap:anywhere}
 .site-footer .footer-meta p{font-size:12px}
 .site-footer .fan-note{font-size:12px}
 .footer-controls{flex-wrap:wrap;gap:6px 20px}
}
@media(max-width:480px){
 .shadow-encounter{--sprite-height:155px;--speech-offset:124px}
 .outro-grid .shadow-encounter--signoff{--speech-offset:130px}
 .shadow-copy.speech-bubble .about-lead{font-size:16px;line-height:1.35}
 .shadow-copy.speech-bubble{padding:9px 10px}
 .site-header{padding-inline:5%}
 .site-header .brand{font-size:28px}
 .site-header .brand-mark{font-size:30px}
 .site-header nav a{padding-inline:7px;font-size:13px}
 footer.site-footer{padding-inline:18px}
}

/* Echo Shadow's dialogue lettering in mission labels and game controls. */
.project-card{background:linear-gradient(145deg,#211923fa,#101014fa 58%)}
.project-card .card-copy{background:#101014f2}
.project-card .card-copy>p:not(.project-kind){color:#d8cfd6}
.site-header{
 width:calc(100% - 11%);max-width:840px;height:64px;margin:12px auto;padding:6px;
 gap:8px;background:linear-gradient(110deg,#16101cf2,#0b1019ed);
 border:1px solid #74425880;border-radius:10px;box-shadow:0 8px 24px #0005;
}
.site-header nav{flex:1;min-width:0;gap:4px}
.site-header nav a{
 display:flex;flex:1;align-items:center;justify-content:center;gap:8px;
 min-height:48px;padding:8px 14px;border-radius:5px;
 font:500 18px/1.2 "Pixelify Sans",monospace;color:#eee5ec;
 transition:background .18s,color .18s;
}
.site-header nav a span{margin:0;color:#b87892;font-size:11px}
.site-header nav a:hover,.site-header nav a:focus-visible{background:#f3355020;color:#ff91a8}
.site-header .header-contact{
 display:flex;flex-shrink:0;align-items:center;justify-content:center;gap:10px;
 min-height:48px;padding:8px 18px;border:1px solid #a84e6780;border-radius:5px;
 background:#47182d66;color:#ffd5e2;font:500 17px/1.2 "Pixelify Sans",monospace;
}
.site-header .header-contact .contact-label{font:inherit;color:inherit}
.site-header .header-contact:hover{background:#70233f88}
@media(max-width:760px){
 .site-header{width:calc(100% - 24px);height:58px;margin:8px auto;padding:4px;gap:4px;border-radius:8px}
 .site-header nav{gap:2px}
 .site-header nav a{min-width:0;min-height:48px;padding:8px 6px;font-size:16px;gap:0}
 .site-header nav a span{display:none}
 .site-header .header-contact{min-width:48px;min-height:48px;padding:8px 10px;gap:5px;font-size:16px}
 .site-header .header-contact .contact-label{display:none}
 .site-header .header-contact::before{content:"X"}
 .site-header .header-contact>span:last-child{font-size:16px}
}
.link-arrow{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em}
.link-arrow--down{transform:rotate(90deg)}
.hero-content{margin-top:148px}
.section{padding-inline:5.5%;background:transparent}
.section-title-panel{
 width:fit-content;max-width:100%;padding:22px 24px;
 border-left:2px solid #f3355099;
 background:linear-gradient(100deg,#08090ce8,#08090ca3 65%,transparent);
}
@media(min-width:1700px){.hero-content{margin-top:156px}}
@media(min-width:761px) and (max-width:1100px){.hero-content{margin-top:136px}}
@media(max-width:760px){
 .hero-content{margin-top:68px}
 .section{padding-inline:6%}
 .section-title-panel{padding:16px}
}
.hero #hero-title{
 font-family:"Pixelify Sans",monospace;
 font-weight:600;
 font-size:clamp(64px,6.6vw,96px);
 letter-spacing:-.035em;
 line-height:1;
}
@media(max-width:760px){
 .hero #hero-title{font-size:clamp(43px,11.5vw,78px);letter-spacing:-.04em}
}
.section .eyebrow,
.project-card .card-top>span:first-child,
.mission-prompt,
.hero-actions .button,
#game-dialog .button,
.footer-controls a,
.footer-controls button,
.outro-socials strong{
 font-family:"Pixelify Sans",monospace;
 font-weight:500;
 letter-spacing:.01em;
 text-shadow:1px 2px #08090c;
}
.section .eyebrow{font-size:16px;line-height:1.5}
.project-card .card-top>span:first-child,.mission-prompt{font-size:15px;line-height:1.4}
.hero-actions .button,#game-dialog .button{font-size:19px;line-height:1.25}
.footer-controls a,.footer-controls button{font-size:16px;line-height:1.4}
.outro-socials strong{font-size:28px;line-height:1.2}
@media(max-width:760px){
 .hero-actions .button,#game-dialog .button{font-size:17px}
 .outro-socials strong{font-size:26px}
}