/* Only the final deep-water band is changed. All art and story above it stay intact. */
.deep-darkness{position:absolute;inset:79% 0 0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,#020b13 48%,#01060d 78%,#01050b)}
.deep-illumination{position:absolute;inset:79% 0 0;z-index:2;pointer-events:none;overflow:hidden}
.deep-lure-halo{position:absolute;width:210px;height:210px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff2b776 0%,#dceabb23 8%,#88c3ae10 30%,transparent 68%);mix-blend-mode:screen}
.deep-beam{position:absolute;overflow:visible;filter:blur(12px);opacity:.8}
.deep-reef{position:absolute;bottom:0;left:0;width:100%;height:clamp(160px,29vw,420px);z-index:2;object-fit:fill;pointer-events:none;user-select:none;opacity:.91}
.scene .route:has([data-species="deep-sea-anglerfish"]){top:calc(94% - 70px)!important;z-index:3}
.scene [data-species="deep-sea-anglerfish"]{left:63%!important;width:24%!important;filter:drop-shadow(-8px -8px 18px #c4d7aa0c)}
.scene .contact{left:13%;width:43%;padding:32px 36px;background:transparent;box-shadow:none;border:0!important;border-radius:8px;color:#e9ead1}
.scene .contact h2{font-size:clamp(34px,4vw,58px);letter-spacing:-.04em;margin:0 0 23px}
.scene .contact>a{font-size:clamp(14px,1.35vw,20px);display:inline-flex;align-items:center;gap:10px;padding:7px 0;color:#f1eccf}
.scene .contact .project-links{display:flex;gap:25px;margin-top:20px}.scene .contact .project-links a{padding:6px 0;color:#a3c0b6}
.scene .contact a:hover{color:#f5d99a}.scene .contact a:focus-visible{outline:2px solid #e6c98f;outline-offset:5px}
.scene .closing{z-index:4}.scene footer{z-index:4}
@media(max-width:900px) and (min-width:601px){.scene .contact{padding:24px;left:9%;width:47%}.scene .contact h2{font-size:34px}}
@media(max-width:600px){
 .scene .route:has([data-species="deep-sea-anglerfish"]){top:calc(95% - 180px)!important}
 .scene [data-species="deep-sea-anglerfish"]{left:57%!important;width:35%!important}
 .scene .contact{left:8%;width:84%;padding:24px;background:transparent}
 .scene .contact h2{font-size:34px;margin-bottom:15px}.scene .contact>a{font-size:16px}.scene .contact .project-links{margin-top:14px;gap:25px}
 .deep-reef{height:155px;width:160%;max-width:none;left:-30%;object-fit:fill}.deep-lure-halo{width:150px;height:150px}
}

/* Bottom composition: the message lives in the open centre of the seabed,
   not beside the fish. Pixel gutters remain useful on short mobile widths. */
.scene{--contact-floor-gap:120px;--contact-box-height:220px;--angler-box-height:240px;--angler-card-gap:24px}
.scene .contact{top:auto!important;bottom:var(--contact-floor-gap);left:50%;transform:translateX(-50%);width:min(440px,60%);padding:20px 24px;text-align:center}
.scene .contact h2{font-size:clamp(32px,3.2vw,44px);margin-bottom:16px}
.scene .contact .project-links{justify-content:center;gap:26px;margin-top:14px}
.scene .contact>a{font-size:17px}
.scene .route:has([data-species="deep-sea-anglerfish"]){top:calc(100% - var(--contact-floor-gap) - var(--contact-box-height) - var(--angler-box-height) - var(--angler-card-gap))!important;height:0!important}
.scene [data-species="deep-sea-anglerfish"]{left:58%!important;width:clamp(150px,20%,290px)!important}
.scene .closing{top:auto!important;bottom:30px;left:10%;width:80%;margin:0;line-height:1}
.scene .closing a{margin:0;padding:10px 8px;min-height:40px;display:inline-flex;align-items:center;font-size:9px}
.scene footer{bottom:10px;justify-content:center;font-size:7px;letter-spacing:1.5px;pointer-events:none}
@media(max-width:600px){
 .scene{--contact-floor-gap:104px;--angler-card-gap:18px}
 .scene .contact{left:50%;width:84%;max-width:360px;padding:16px 10px}
 .scene .contact h2{font-size:32px;margin-bottom:12px}
 .scene .contact>a{font-size:16px;min-height:44px;padding:5px 0}
 .scene .contact .project-links{gap:24px;margin-top:8px}
 .scene .contact .project-links a{min-height:44px;display:inline-flex;align-items:center}
 .scene [data-species="deep-sea-anglerfish"]{left:54%!important;width:38%!important}
 .scene .closing{bottom:26px}
 .scene footer{bottom:7px;font-size:6px}
}