:root {
  --abyss:#071719;
  --deep:#0d292b;
  --foam:#dce8e4;
  --mineral:#839a94;
  --coral:#e76d59;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:clip;background:var(--abyss);color:var(--foam);font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.grain{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:.055;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.loader{position:fixed;inset:0;z-index:300;background:var(--coral);color:var(--abyss);display:grid;place-items:center;clip-path:inset(0);transition:clip-path 1.05s var(--ease) .2s,visibility 0s 1.3s}
.loader.done{clip-path:inset(0 0 100% 0);visibility:hidden}
.loader-ring{width:110px;height:110px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;position:relative}
.loader-ring::after{content:"";position:absolute;inset:14px;border:1px solid currentColor;border-radius:50%;opacity:.4}
.loader-ring i{position:absolute;inset:-8px;border:1px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 1.2s linear infinite}
.loader-ring span{font:28px/1 SFMono-Regular,Consolas,monospace}
.loader p{position:absolute;top:calc(50% + 80px);font:8px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.25em}
@keyframes spin{to{transform:rotate(360deg)}}

.nav{position:fixed;top:0;left:0;width:100%;height:76px;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 2.6vw;color:var(--foam);mix-blend-mode:difference}
.mark{display:flex;gap:10px;align-items:center;justify-self:start}
.mark svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1}
.mark span{font-size:8px;line-height:1.05;font-weight:700;letter-spacing:.09em}
.nav-depth{display:flex;align-items:center;gap:18px;font:7px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.16em}
.nav-depth i{width:46px;height:1px;background:currentColor;opacity:.55}
.nav-dive{justify-self:end;display:flex;align-items:center;gap:15px;font:8px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.16em}
.nav-dive i{position:relative;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font:normal 14px/1 Arial}
.nav-dive i::before{content:"";position:absolute;inset:-6px;border:1px solid currentColor;border-radius:50%;border-left-color:transparent;transition:transform .5s var(--ease)}
.nav-dive:hover i::before{transform:rotate(180deg)}

.sonar-cursor{position:fixed;left:0;top:0;z-index:220;width:38px;height:38px;border:1px solid rgba(220,232,228,.65);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.sonar-cursor::before{content:"";position:absolute;inset:6px;border:1px solid rgba(220,232,228,.3);border-radius:50%}
.sonar-cursor i{position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--coral);border-radius:50%;transform:translate(-50%,-50%)}
.sonar-cursor.active{width:64px;height:64px;border-color:var(--coral);transition:width .3s,height .3s,border-color .3s}

.dive-theatre{height:760vh;position:relative;background:var(--foam)}
.dive-stage{position:sticky;top:0;height:100dvh;overflow:hidden;background:var(--foam);color:var(--abyss);isolation:isolate}
.ocean-mask{position:absolute;z-index:1;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);clip-path:circle(18vmin at 70% 52%);background:var(--deep);overflow:hidden;will-change:clip-path}
#ocean{position:absolute;inset:0;width:100%;height:100%}
.caustics{position:absolute;inset:-25%;background:repeating-radial-gradient(ellipse at 45% -10%,transparent 0 40px,rgba(220,232,228,.075) 41px 43px,transparent 44px 76px);filter:blur(9px);transform:rotate(-9deg) scale(1.2);mix-blend-mode:screen;opacity:.7}
.surface-line{position:absolute;left:-10%;top:8%;width:120%;height:12%;background:linear-gradient(180deg,rgba(220,232,228,.32),transparent);filter:blur(8px);transform:skewY(-2deg)}

.surface-copy{position:absolute;z-index:5;left:3.2vw;top:24%;max-width:62vw;pointer-events:none}
.surface-copy>p,.dive-copy>p,.statement>p,.log-head>p,.systems-title>p,.contact>p{margin:0 0 24px;font:8px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.22em;font-weight:600}
.surface-copy h1{margin:0;font-size:clamp(88px,14vw,220px);font-weight:700;line-height:.7;letter-spacing:-.075em}
.surface-copy h1 span{color:transparent;-webkit-text-stroke:1.2px var(--abyss)}
.surface-copy small{display:block;margin-top:36px;max-width:290px;font-size:12px;line-height:1.45}

.dive-copy{position:absolute;z-index:6;left:4vw;top:31%;width:47vw;color:var(--foam);opacity:0;transform:translateY(40px);pointer-events:none}
.dive-copy-right{left:auto;right:4vw;text-align:right}
.dive-copy-center{left:50%;top:24%;width:88vw;text-align:center;transform:translate(-50%,40px)}
.dive-copy h2{margin:0;font-size:clamp(60px,8.5vw,138px);font-weight:400;line-height:.82;letter-spacing:-.065em}
.dive-copy small{display:block;margin-top:28px;max-width:320px;font-size:12px;line-height:1.5;color:rgba(220,232,228,.74)}
.dive-copy-right small{margin-left:auto}.dive-copy-center h2{font-size:clamp(62px,10vw,164px)}

.depth-scale{position:absolute;z-index:8;right:2.5vw;top:20%;height:60%;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:12px;color:var(--foam);font:7px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.14em;mix-blend-mode:difference}
.depth-track{position:relative;width:1px;height:100%;background:rgba(220,232,228,.25)}
.depth-track i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--coral);transform-origin:top;transform:scaleY(0)}
.depth-track b{position:absolute;left:50%;top:0;width:9px;height:9px;border-radius:50%;background:var(--coral);transform:translate(-50%,-50%)}
.pressure{position:absolute;z-index:8;left:3vw;bottom:24px;display:flex;align-items:baseline;gap:14px;color:var(--foam);mix-blend-mode:difference;font:7px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.pressure b{font-size:24px;font-weight:400;letter-spacing:-.06em}.pressure i{font-style:normal}
.stage-coordinates{position:absolute;z-index:8;right:6vw;bottom:27px;display:flex;gap:28px;color:var(--foam);mix-blend-mode:difference;font:7px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.14em}

.habitat{position:absolute;left:50%;top:58%;width:min(62vw,860px);height:min(42vw,560px);transform:translate(-50%,-50%) scale(.7);opacity:0;filter:drop-shadow(0 35px 45px rgba(0,0,0,.45))}
.habitat-halo{position:absolute;left:50%;top:50%;width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(231,109,89,.2),transparent 66%);transform:translate(-50%,-50%);filter:blur(20px)}
.habitat-core{position:absolute;z-index:4;left:50%;top:50%;width:25%;aspect-ratio:1;border:1px solid rgba(220,232,228,.72);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(231,109,89,.62),rgba(13,41,43,.92) 55%);display:grid;place-items:center}
.habitat-core::before,.habitat-core::after{content:"";position:absolute;border:1px solid rgba(220,232,228,.3);border-radius:50%}.habitat-core::before{inset:10%}.habitat-core::after{inset:-9%;border-style:dashed}
.habitat-core b{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 25px var(--coral)}
.habitat-core span{position:absolute;bottom:19%;font:6px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.18em}
.module{position:absolute;z-index:3;width:34%;height:22%;border:1px solid rgba(220,232,228,.62);border-radius:999px;background:linear-gradient(180deg,rgba(131,154,148,.42),rgba(7,23,25,.82));box-shadow:inset 0 0 35px rgba(220,232,228,.06);display:grid;place-items:center}
.module::before,.module::after{content:"";position:absolute;top:12%;bottom:12%;width:1px;background:rgba(220,232,228,.35)}
.module::before{left:18%}.module::after{right:18%}
.module i{position:absolute;inset:28% 23%;border:1px solid rgba(220,232,228,.34);border-radius:999px;background:rgba(220,232,228,.04)}
.module span{font:8px/1 SFMono-Regular,Consolas,monospace;color:var(--foam)}
.module-left{left:0;top:39%;transform:translateX(-75%) rotate(-4deg)}
.module-right{right:0;top:39%;transform:translateX(75%) rotate(4deg)}
.module-top{left:33%;top:0;transform:translateY(-100%) rotate(90deg)}
.module-bottom{left:33%;bottom:0;transform:translateY(100%) rotate(90deg)}
.connector{position:absolute;z-index:2;background:rgba(220,232,228,.65)}
.connector-h{left:17%;right:17%;height:2px;top:50%}.connector-v{top:22%;bottom:22%;width:2px;left:50%}

.creatures{position:absolute;inset:0;opacity:0}.jelly{position:absolute;width:46px;height:36px;border-radius:50% 50% 42% 42%;border-top:1px solid rgba(231,109,89,.9);background:radial-gradient(ellipse at 50% 20%,rgba(231,109,89,.32),transparent 70%);filter:drop-shadow(0 0 14px rgba(231,109,89,.3))}
.jelly::before,.jelly::after{content:"";position:absolute;top:80%;width:1px;height:45px;background:linear-gradient(var(--coral),transparent)}
.jelly::before{left:34%;transform:rotate(8deg)}.jelly::after{right:34%;transform:rotate(-8deg)}
.j1{left:13%;top:33%;transform:scale(.7)}.j2{right:16%;top:18%;transform:scale(1.1)}.j3{right:28%;bottom:18%;transform:scale(.5)}
.ray{position:absolute;left:18%;top:64%;width:150px;height:42px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(220,232,228,.23));clip-path:polygon(0 48%,42% 0,70% 33%,100% 50%,70% 67%,42% 100%)}

.statement{min-height:115dvh;background:var(--coral);color:var(--abyss);position:relative;overflow:hidden;padding:11vw 4vw;display:flex;flex-direction:column;justify-content:center}
.statement h2{position:relative;z-index:2;margin:0;font-size:clamp(78px,13.6vw,216px);line-height:.73;font-weight:700;letter-spacing:-.075em}
.statement small{position:absolute;left:56%;bottom:9%;width:280px;font-size:12px;line-height:1.5}
.statement-orbit{position:absolute;right:-7vw;top:8%;width:43vw;aspect-ratio:1;border:1px solid rgba(7,23,25,.42);border-radius:50%}
.statement-orbit::before,.statement-orbit::after{content:"";position:absolute;border:1px solid rgba(7,23,25,.24);border-radius:50%}.statement-orbit::before{inset:12%}.statement-orbit::after{inset:28%}
.statement-orbit i{position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--abyss)}
.statement-orbit b{position:absolute;left:50%;top:50%;width:1px;height:50%;background:var(--abyss);transform-origin:top;transform:rotate(36deg)}
.statement-orbit span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:8vw;font-weight:700;letter-spacing:-.08em}

.dive-log{position:relative;background:var(--foam);color:var(--abyss);padding:12vw 4vw 14vw}
.log-head{padding-left:21%;margin-bottom:18vh}.log-head h2{margin:0;font-size:clamp(66px,10vw,160px);line-height:.82;font-weight:400;letter-spacing:-.07em}
.log-line{position:absolute;left:12%;top:29vw;bottom:10vw;width:1px;background:rgba(7,23,25,.2)}
.log-line i{position:absolute;top:0;left:0;width:2px;height:100%;background:var(--coral);transform-origin:top;transform:scaleY(0)}
.log-entry{position:relative;display:grid;grid-template-columns:1.65fr 1fr;gap:6vw;align-items:center;margin-bottom:24vh;padding-left:16%}
.log-entry:nth-of-type(even){grid-template-columns:1fr 1.65fr;padding-left:3%;padding-right:12%}.log-entry:nth-of-type(even) .log-visual{order:2}
.log-visual{height:min(55vw,700px);position:relative;overflow:hidden;background:var(--deep)}
.log-copy span,.log-copy small{font:8px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.17em}.log-copy h3{margin:28px 0 20px;font-size:clamp(42px,6vw,95px);line-height:.86;letter-spacing:-.06em;font-weight:700}.log-copy p{margin:0 0 42px;max-width:310px;font-size:13px;line-height:1.5}
.thermal{background:radial-gradient(circle at 52% 76%,rgba(231,109,89,.55),transparent 24%),linear-gradient(180deg,#16373a,#071719)}
.thermal i{position:absolute;left:50%;bottom:-8%;width:12%;height:72%;border-radius:50% 50% 0 0;background:linear-gradient(90deg,#0b1b1d,var(--coral),#0b1b1d);filter:blur(5px);transform-origin:bottom}.thermal i:nth-child(1){transform:translateX(-120%) rotate(-14deg)}.thermal i:nth-child(2){transform:translateX(-15%) scaleY(.78)}.thermal i:nth-child(3){transform:translateX(80%) rotate(13deg) scaleY(.9)}
.thermal b{position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 85%,transparent 0 42px,rgba(220,232,228,.18) 43px 44px)}
.forest{background:linear-gradient(180deg,#071719,#102f31)}.forest i{position:absolute;bottom:-5%;width:2px;height:72%;background:linear-gradient(transparent,var(--coral));transform-origin:bottom}.forest i::before{content:"";position:absolute;top:0;left:-5px;width:11px;height:11px;border-radius:50%;background:var(--coral);box-shadow:0 0 22px var(--coral)}.forest i:nth-child(1){left:18%;transform:rotate(-8deg)}.forest i:nth-child(2){left:40%;height:56%;transform:rotate(5deg)}.forest i:nth-child(3){left:63%;height:80%;transform:rotate(-3deg)}.forest i:nth-child(4){left:82%;height:48%;transform:rotate(9deg)}
.forest b{position:absolute;left:50%;top:22%;width:45%;aspect-ratio:1;border:1px solid rgba(220,232,228,.16);border-radius:50%;transform:translateX(-50%)}
.trench{background:linear-gradient(165deg,#173b3c 0 42%,#071719 42% 100%)}.trench i{position:absolute;left:-10%;right:-10%;top:42%;height:1px;background:rgba(220,232,228,.6);transform:rotate(-2deg)}.trench b{position:absolute;left:58%;top:30%;width:4px;height:4px;border-radius:50%;background:var(--coral);box-shadow:0 0 24px 6px var(--coral)}.trench em{position:absolute;left:59%;top:31%;width:36%;height:1px;background:linear-gradient(90deg,var(--coral),transparent);transform:rotate(12deg);transform-origin:left}

.systems{background:var(--abyss);padding:12vw 4vw 14vw;display:grid;grid-template-columns:1fr 1.4fr;gap:10vw}
.systems-title{position:sticky;top:25vh;align-self:start}.systems-title h2{margin:0;font-size:clamp(80px,11vw,176px);line-height:.72;letter-spacing:-.07em}
.system-field{border-top:1px solid rgba(220,232,228,.3)}
.system-field article{min-height:245px;padding:28px 0;border-bottom:1px solid rgba(220,232,228,.3);display:grid;grid-template-columns:52px 1fr 90px;grid-template-rows:auto 1fr;gap:22px;position:relative;overflow:hidden}
.system-field article::before{content:"";position:absolute;inset:0;background:var(--coral);transform:translateX(-101%);transition:transform .55s var(--ease)}.system-field article:hover::before{transform:translateX(0)}
.system-field article>*{position:relative;z-index:1}.system-field article>span{font:8px/1 SFMono-Regular,Consolas,monospace}.system-field h3{margin:0;font-size:clamp(32px,4.5vw,68px);letter-spacing:-.05em}.system-field p{grid-column:2;margin:0;align-self:end;max-width:280px;font-size:12px;line-height:1.5}.system-field i{grid-column:3;grid-row:1/3;align-self:center;justify-self:end;font:normal 18px/1 SFMono-Regular,Consolas,monospace}

.contact{height:120dvh;min-height:780px;background:var(--deep);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#contact-ocean{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hatch{position:absolute;left:50%;top:48%;width:min(52vw,670px);aspect-ratio:1;border:1px solid rgba(220,232,228,.35);border-radius:50%;transform:translate(-50%,-50%)}
.hatch::before,.hatch::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(220,232,228,.16)}.hatch::before{inset:8%}.hatch::after{inset:23%}
.hatch i{position:absolute;left:50%;top:50%;width:1px;height:50%;background:rgba(220,232,228,.28);transform-origin:top}.hatch i:first-child{transform:rotate(45deg)}.hatch i:nth-child(2){transform:rotate(225deg)}.hatch b{position:absolute;left:50%;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--coral)}
.contact>p,.contact h2,.contact-link{position:relative;z-index:2}.contact h2{margin:0;font-size:clamp(104px,18vw,280px);font-weight:700;line-height:.65;letter-spacing:-.08em}.contact-link{margin-top:72px;display:flex;align-items:center;gap:22px;font:8px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.18em}.contact-link i{width:58px;height:58px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font:normal 16px/1 Arial;transition:transform .45s var(--ease),background .3s,color .3s}.contact-link:hover i{transform:rotate(90deg);background:var(--coral);color:var(--abyss);border-color:var(--coral)}
.contact footer{position:absolute;left:3vw;right:3vw;bottom:22px;padding-top:17px;border-top:1px solid rgba(220,232,228,.25);display:flex;justify-content:space-between;font:7px/1 SFMono-Regular,Consolas,monospace;letter-spacing:.15em}

@media(max-width:760px){
  .sonar-cursor{display:none}.nav{height:64px;padding:10px 16px;grid-template-columns:1fr auto}.nav-depth{display:none}.mark svg{width:40px;height:40px}.nav-dive span{display:none}.nav-dive i{width:40px;height:40px}
  .dive-theatre{height:660vh}.ocean-mask{clip-path:circle(19vmin at 69% 43%)}
  .surface-copy{left:18px;top:23%;max-width:94vw}.surface-copy h1{font-size:25vw;line-height:.72}.surface-copy small{max-width:220px;font-size:11px}.surface-copy>p{margin-bottom:18px}
  .dive-copy,.dive-copy-right{left:18px;right:18px;top:24%;width:auto;text-align:left}.dive-copy-center{left:50%;right:auto;width:calc(100% - 36px);text-align:center}.dive-copy h2{font-size:15.5vw}.dive-copy small{max-width:240px}.dive-copy-right small{margin-left:0}
  .depth-scale{right:16px;top:18%;height:62%}.pressure{left:18px;bottom:18px}.stage-coordinates{display:none}
  .habitat{width:120vw;height:82vw;top:60%}.jelly{transform:scale(.55)}.ray{width:100px}
  .statement{min-height:100dvh;padding:110px 18px}.statement h2{font-size:20vw}.statement small{left:42%;bottom:8%;width:200px}.statement-orbit{width:86vw;right:-35vw;top:12%}.statement-orbit span{font-size:18vw}
  .dive-log{padding:110px 18px}.log-head{padding-left:0;margin-bottom:15vh}.log-head h2{font-size:18vw}.log-line{display:none}
  .log-entry,.log-entry:nth-of-type(even){display:block;padding:0;margin-bottom:20vh}.log-entry:nth-of-type(even) .log-visual{order:initial}.log-visual{height:120vw}.log-copy{padding-top:28px}.log-copy h3{font-size:15vw}.log-copy p{font-size:12px}
  .systems{display:block;padding:110px 18px}.systems-title{position:relative;top:auto;margin-bottom:90px}.systems-title h2{font-size:23vw}.system-field article{min-height:190px;grid-template-columns:32px 1fr 60px;gap:10px}.system-field h3{font-size:10vw}.system-field p{font-size:11px}.system-field i{font-size:13px}
  .contact{height:110dvh;min-height:760px}.hatch{width:92vw}.contact h2{font-size:27vw}.contact-link{margin-top:58px}.contact footer{left:18px;right:18px}.contact footer span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.dive-theatre{height:100dvh}.ocean-mask{clip-path:circle(100% at 50% 50%)!important}.surface-copy{color:var(--foam)}.surface-copy h1 span{-webkit-text-stroke-color:var(--foam)}.dive-copy,.depth-scale{display:none}.habitat{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important}.module-left{transform:none!important}.module-right{transform:none!important}.module-top{transform:rotate(90deg)!important}.module-bottom{transform:rotate(90deg)!important}}