:root{
  --ink:#E9F4F5;--muted:#B4CED3;--rule:rgba(233,244,245,.22);--accent:#8CF3DD;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#0F4C5C;color:var(--ink);font:400 1.0625rem/1.7 "Albert Sans","Helvetica Neue",Arial,sans-serif}
a{color:var(--ink);text-decoration-color:var(--rule);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
#sea{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#gauge{position:fixed;top:calc(24px + env(safe-area-inset-top,0px));right:28px;z-index:3;font:500 .8rem var(--mono);color:var(--muted)}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;position:relative;z-index:1}
.side{position:sticky;top:0;height:100vh;padding:48px 32px 36px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:44px}
.orb{display:block;width:120px;height:120px;margin-left:-8px}
.nav{display:flex;flex-direction:column;gap:14px}
.nav a{text-decoration:none;color:var(--muted);font-size:1.2rem;position:relative;align-self:flex-start;transition:transform .3s ease,color .3s ease,text-shadow .3s ease}
.nav a::before{content:"";position:absolute;left:-16px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.3);transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease}
.nav a:hover,.nav a:focus-visible{color:var(--ink);transform:translateX(8px);text-shadow:0 0 14px rgba(140,243,221,.75)}
.nav a:hover::before,.nav a:focus-visible::before{opacity:.7;transform:scale(1);box-shadow:0 0 10px var(--accent)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::before{opacity:1;transform:scale(1);box-shadow:0 0 12px 2px var(--accent)}
.social{margin-top:auto;display:flex;gap:18px;border-top:1px solid var(--rule);padding-top:20px;font-size:.95rem}
.social a{color:var(--muted);text-decoration:none;display:inline-block;transition:transform .3s ease,color .3s ease,text-shadow .3s ease}
.social a:hover,.social a:focus-visible{color:var(--accent);transform:translateY(-3px);text-shadow:0 0 12px rgba(140,243,221,.8)}
@media (prefers-reduced-motion:reduce){.nav a,.social a{transition:none}.nav a:hover,.nav a:focus-visible,.social a:hover,.social a:focus-visible{transform:none}}
main{padding:80px 56px 36vh 104px;max-width:900px}
h1,.sec h2,.row h3{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400}
h1{font-size:clamp(3rem,8vw,5.6rem);letter-spacing:.01em;line-height:1.08;margin:0 0 24px}
.head{margin-bottom:128px}
.hint{color:var(--muted);margin:0}
.sec{margin-bottom:160px;max-width:720px}
.sec h2{position:relative;display:flex;align-items:center;gap:20px;font-size:1.95rem;line-height:1.1;margin:0 0 32px}
.sec h2::after{content:"";flex:1;height:1px;background:var(--rule)}
.d{position:absolute;left:-72px;top:50%;transform:translateY(-50%);font:500 .75rem var(--mono);color:var(--muted);white-space:nowrap}
p{margin:0 0 14px;max-width:62ch}
.about{font-size:1.25rem;line-height:1.65;font-weight:300}
.row{display:grid;grid-template-columns:1fr auto;gap:2px 24px;margin-bottom:72px}
.row h3{font-size:1.9rem;line-height:1.15;margin:0}
.row .date{font:500 .8rem var(--mono);color:var(--muted);align-self:center}
.row .meta{grid-column:1/-1;color:var(--muted);margin:0}
.row .desc{grid-column:1/-1;margin:10px 0 8px}
.row .links{grid-column:1/-1;display:flex;gap:20px}
.carousel{position:relative;margin:0 0 20px;max-width:720px}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:4px;border:1px solid var(--rule)}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;margin:0;background:#02080F}
.slide .frame{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.slide img{max-width:100%;max-height:100%;display:block}
.slide figcaption{padding:10px 14px;font-size:.92rem;color:var(--muted);border-top:1px solid var(--rule)}
.cbtn{position:absolute;top:calc(50% - 28px);width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:rgba(2,12,20,.7);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;transition:box-shadow .3s,color .3s}
.cbtn:hover,.cbtn:focus-visible{color:var(--accent);box-shadow:0 0 12px rgba(140,243,221,.7);outline:none}
.cbtn.prev{left:10px}.cbtn.next{right:10px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--rule);transition:background .3s}
.dots span.on{background:var(--accent)}
.sec.tall{min-height:90vh}
.part{margin:0 0 56px}
.part ul.plain{margin:0 0 14px;padding-left:1.1em;max-width:62ch}
.part ul.plain li{margin-bottom:8px}
.part h3{font-size:1.05rem;font-weight:600;margin:0 0 6px}
.tools{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:6px 0 14px}
.tools li{border:1px solid var(--rule);border-radius:99px;padding:2px 12px;font-size:.9rem;color:var(--muted)}
.video{position:relative;aspect-ratio:16/9;max-width:640px;margin:0 0 10px;background:#02080F;border-radius:4px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contact{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:1.15rem}
#projects.rv-on .rv{opacity:0;transform:translateY(20px);transition:opacity 1.1s ease,transform 1.1s ease}
#projects.rv-on .rv.in{opacity:1;transform:none}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;padding:24px 20px 8px;border:0;gap:16px}
  .orb{width:72px;height:72px}
  .nav{flex-direction:row;gap:20px}
  .nav a::before{display:none}
  .nav a:hover,.nav a:focus-visible{transform:none}
  .nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
  .social{margin-top:0;border:0;padding-top:0}
  main{padding:32px 20px 36vh}
  .d{display:none}
  .head{margin-bottom:88px}.sec{margin-bottom:112px}
}

/* dive-in intro */
#dive{display:none}
.diving #dive{display:block;position:fixed;inset:0;z-index:100;overflow:hidden;background:linear-gradient(#c9f3f5 0%,#5fc3d1 18%,#1d7f93 40%,#0F4C5C 70%,#0F4C5C 100%);background-size:100% 400%;animation:divebg 2.4s cubic-bezier(.6,0,.4,1) forwards,divefade 2.9s ease forwards}
@keyframes divebg{from{background-position:50% 0}to{background-position:50% 100%}}
@keyframes divefade{0%,84%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
#dive i{position:absolute;bottom:-40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(255,255,255,.08) 60%);animation:bub linear forwards}
@keyframes bub{to{transform:translateY(-115vh)}}
@media (prefers-reduced-motion:reduce){.diving #dive{display:none}}