.ocean-chapters .projects .porthole-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:50px 34px;margin-top:54px}
.porthole-project{flex:0 1 calc((100% - 68px)/3);min-width:0;text-align:center;--port-accent:#9fe7e4}
.porthole-project:nth-child(2){--port-accent:#c5b4ee}.porthole-project:nth-child(3){--port-accent:#b8e8cb}.porthole-project:nth-child(4){--port-accent:#bfb5f4}
.porthole-open{display:block;width:100%;border:0;padding:0;color:#effaff;background:none;text-align:center}
.porthole-frame{position:relative;display:block;aspect-ratio:1;border-radius:50%;padding:19px;background:conic-gradient(from 25deg,#1a3847,#68909b 13%,#183b4e 25%,#071a2b 43%,#5e8993 61%,#173848 78%,#1a3847);border:1px solid #8dcbd0aa;box-shadow:0 20px 45px #0008,inset 0 0 0 5px #0a2532,inset 0 0 0 6px #95c7ce66,0 0 25px color-mix(in srgb,var(--port-accent) 12%,transparent);transition:transform .4s,box-shadow .4s}
.porthole-glass{display:block;position:relative;width:100%;height:100%;overflow:hidden;border-radius:50%;border:2px solid var(--port-accent);background:#071c30;box-shadow:0 0 12px var(--port-accent),inset 0 0 18px #000a}
.porthole-glass>img{width:100%;height:100%;object-fit:cover;object-position:48% 15%;transition:transform .6s;display:block}
.porthole-glass:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:50%;background:linear-gradient(135deg,#b7f5ff25,transparent 45%,#06152936);box-shadow:inset 0 0 25px #00122299}
.porthole-bolts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:#9ebbc1;stroke:#0b2430;stroke-width:1.5}
.porthole-overlay{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px;background:#031725d9;opacity:0;transition:opacity .3s}
.porthole-overlay span{font-size:15px;line-height:1.5}.porthole-overlay b{font-size:12px;letter-spacing:.07em;margin-top:18px;color:var(--port-accent);font-weight:500}
.porthole-name{display:block;font-family:Georgia,serif;font-size:clamp(24px,2.3vw,35px);letter-spacing:-.04em;margin-top:25px;line-height:1.1}
.porthole-kind{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#b8cedb;margin-top:12px;line-height:1.5}
.porthole-link{display:block;font-size:13px;color:var(--port-accent);margin-top:13px;text-decoration:underline;text-underline-offset:5px}
.porthole-open:focus-visible{outline-offset:9px;border-radius:20px}.porthole-open:focus-visible .porthole-overlay{opacity:1}
.porthole-monogram{display:grid;place-items:center;width:100%;height:100%;font-family:Georgia,serif;font-size:95px;background:radial-gradient(ellipse at 35% 20%,#3c4673,#081e36 75%);color:#c8bdf6}
@media(hover:hover) and (pointer:fine){.porthole-open:hover .porthole-frame{transform:translateY(-8px);box-shadow:0 28px 55px #0009,0 0 30px color-mix(in srgb,var(--port-accent) 24%,transparent),inset 0 0 0 5px #0a2532,inset 0 0 0 6px #95c7ce66}.porthole-open:hover .porthole-overlay{opacity:1}.porthole-open:hover img{transform:scale(1.06)}}
.project-dialog{width:min(1050px,calc(100% - 40px));max-height:calc(100dvh - 48px);padding:0;border:1px solid #a0d9e577;border-radius:24px;background:linear-gradient(145deg,#102f42,#091a2d 70%);color:#eaf8fa;box-shadow:0 35px 100px #000a;overflow:auto}
.project-dialog::backdrop{background:#010b17cc;backdrop-filter:blur(9px)}
.project-dialog-close{position:sticky;top:16px;margin:16px 16px -60px auto;display:block;width:44px;height:44px;z-index:2;border-radius:50%;border:1px solid #acdade66;background:#081c32ed;color:#efffff;font-size:26px}
.project-dialog-content{padding:45px}.project-dialog h2{font-size:clamp(34px,4vw,55px);padding-right:45px}.project-dialog .project-kind{color:#a6dbdf;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.project-dialog .project-lead{font-size:17px;color:#c4dce5;margin:18px 0 26px;max-width:740px;line-height:1.7}
.project-screenshot{width:100%;height:auto;border-radius:12px;border:1px solid #89bec344;display:block;background:#081626}
.project-detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:30px}.project-dialog h3{font-size:25px;letter-spacing:-.035em;margin-bottom:12px}.project-dialog p,.project-dialog li{font-size:15px;color:#c4dce5;line-height:1.75}.project-dialog ul{margin:0;padding-left:18px}.project-dialog li+li{margin-top:7px}.project-dialog .project-visit{margin-top:30px;display:inline-flex;background:linear-gradient(110deg,#b7ece0,#b9d7ed);color:#082739;border:0}
@media(max-width:1000px){.porthole-project{flex-basis:calc((100% - 34px)/2);max-width:380px}}
@media(max-width:600px){.ocean-chapters .projects .porthole-grid{gap:42px;margin-top:36px}.porthole-project{flex-basis:100%;max-width:310px}.porthole-name{font-size:30px}.porthole-frame{padding:17px}.project-dialog{width:calc(100% - 22px);max-height:calc(100dvh - 24px);border-radius:18px}.project-dialog-content{padding:30px 22px}.project-detail-columns{grid-template-columns:1fr;gap:24px}.project-dialog .project-lead{font-size:16px}.project-dialog-close{top:10px;margin-top:10px;margin-right:10px}}
@media(prefers-reduced-motion:reduce){.porthole-frame,.porthole-glass>img,.porthole-overlay{transition:none}}

/* Polished steel, inset glass and specular reflections from the selected concept. */
.ocean-chapters .projects .porthole-grid{gap:58px 65px}
.porthole-project{flex-basis:calc((100% - 65px)/2);max-width:440px}
.porthole-project:nth-child(2){--port-accent:#91e4f3}.porthole-project:nth-child(3){--port-accent:#b6a3fa}.porthole-project:nth-child(4){--port-accent:#8cded8}
.porthole-frame{padding:27px;border:2px solid #97ccd68c;background:conic-gradient(from 20deg,#173449 0deg,#a1bcc5 30deg,#365564 63deg,#102d40 105deg,#1b485b 138deg,#85aeb9 177deg,#203848 205deg,#081b2d 237deg,#588595 281deg,#cfebed 307deg,#3b7180 329deg,#173449 360deg);box-shadow:0 28px 50px #0009,0 0 38px color-mix(in srgb,var(--port-accent) 24%,transparent),inset 0 0 0 3px #061929,inset 0 0 0 5px #648d9daa,inset 0 0 0 8px #0b2635,inset 0 0 0 9px #acc8ce66}
.porthole-frame:before{content:'';position:absolute;inset:-5px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 28% 9%,#dfffff88,transparent 15%),radial-gradient(ellipse at 85% 77%,#adf6ff4d,transparent 18%);mix-blend-mode:screen}
.porthole-glass{border:3px solid var(--port-accent);box-shadow:0 0 6px #efffff,0 0 18px var(--port-accent),0 0 0 5px #041b2d,inset 0 0 22px #001020aa}
.porthole-glass:after{z-index:2;background:linear-gradient(125deg,transparent 9%,#e3ffff30 12%,#f5ffff55 15%,#caffff18 19%,transparent 27%,transparent 53%,#b8edff18 56%,transparent 63%),radial-gradient(ellipse at 28% 15%,#cffaff25,transparent 58%);box-shadow:inset 0 0 26px #02172699}
.porthole-bolts{z-index:3;filter:drop-shadow(0 1px 1px #000a)}.porthole-bolts circle{fill:#a6c0c8;stroke:#092234;stroke-width:.7}
.porthole-overlay{padding:30px;background:linear-gradient(135deg,#041a30de,#040f20ed)}
@media(hover:hover) and (pointer:fine){.porthole-open:hover .porthole-frame{box-shadow:0 35px 60px #000a,0 0 55px color-mix(in srgb,var(--port-accent) 34%,transparent),inset 0 0 0 3px #061929,inset 0 0 0 5px #87afbf,inset 0 0 0 8px #0b2635,inset 0 0 0 9px #acc8ce66}}
@media(max-width:1000px){.ocean-chapters .projects .porthole-grid{gap:46px 30px}.porthole-project{flex-basis:calc((100% - 30px)/2);max-width:400px}.porthole-frame{padding:23px}}
@media(max-width:600px){.ocean-chapters .projects .porthole-grid{gap:44px}.porthole-project{flex-basis:100%;max-width:320px}.porthole-frame{padding:23px}}
/* Deep-sea portholes: dark metal, coloured inner light and floating bubbles. */
.porthole-project{--port-accent:#78eed1}.porthole-project:nth-child(2){--port-accent:#67dfff}.porthole-project:nth-child(3){--port-accent:#c39aff}.porthole-project:nth-child(4){--port-accent:#ffc375}
.porthole-frame{padding:31px;border:2px solid #507789;background:repeating-conic-gradient(from 12deg,#ffffff03 0deg 1deg,transparent 1deg 4deg),conic-gradient(from 20deg,#071f32,#386176 12%,#102a3d 23%,#041522 40%,#254b61 58%,#06192a 73%,#3a6074 86%,#071f32);box-shadow:0 28px 50px #000b,0 0 26px color-mix(in srgb,var(--port-accent) 18%,transparent),inset 0 0 0 3px #071522,inset 0 0 0 5px #6293a077,inset 0 0 0 9px #061c2a,inset 0 0 0 11px #284a5c,inset 0 0 0 13px #020f1d}
.porthole-frame:before{inset:3px;background:radial-gradient(ellipse at 33% 3%,#b5ecff66,transparent 17%),radial-gradient(ellipse at 87% 77%,#7dc8df26,transparent 18%);z-index:3}
.porthole-glass{border:2px solid var(--port-accent);box-shadow:0 0 5px #dcffff,0 0 15px var(--port-accent),0 0 0 5px #020f1d,0 0 0 7px #45798b,inset 0 0 35px #001020cc;isolation:isolate}
.porthole-glass:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 48% -10%,color-mix(in srgb,var(--port-accent) 60%,transparent),transparent 58%),radial-gradient(ellipse at 50% 110%,color-mix(in srgb,var(--port-accent) 24%,transparent),transparent 58%);mix-blend-mode:screen;box-shadow:inset 0 0 30px color-mix(in srgb,var(--port-accent) 60%,transparent)}
.porthole-glass:after{z-index:2;background:linear-gradient(120deg,transparent 15%,#e3ffff18 21%,#f5ffff30 23%,transparent 30%),radial-gradient(ellipse at 50% 50%,transparent 45%,#01132288 100%);box-shadow:inset 0 0 24px #011322aa}
.porthole-glass>img{filter:brightness(.88) saturate(.85)}
.porthole-overlay{z-index:4}.porthole-bolts circle{r:1.65;fill:#142d3d;stroke:#668894;stroke-width:.6}.porthole-bolts{filter:drop-shadow(0 2px 2px #000e)}
.porthole-bubbles{position:absolute;inset:-24px;pointer-events:none;z-index:5}
.porthole-bubbles i{position:absolute;width:var(--size,12px);height:var(--size,12px);border-radius:50%;border:1px solid color-mix(in srgb,var(--port-accent) 48%,transparent);background:radial-gradient(circle at 28% 25%,#eeffff99 0 7%,transparent 22%),radial-gradient(circle at 65% 72%,transparent 38%,#95dbef22 69%,#bdf2ff55 84%,transparent 100%);box-shadow:inset -2px -2px 4px #73cce12b,0 0 8px color-mix(in srgb,var(--port-accent) 14%,transparent);animation:porthole-bubble-drift 7s ease-in-out infinite alternate}
.porthole-bubbles i:nth-child(1){left:6%;top:20%;--size:15px;animation-delay:-2s}.porthole-bubbles i:nth-child(2){right:3%;top:32%;--size:22px;animation-delay:-4s}.porthole-bubbles i:nth-child(3){right:9%;top:9%;--size:10px;animation-delay:-1s}.porthole-bubbles i:nth-child(4){left:18%;top:1%;--size:8px;animation-delay:-5s}.porthole-bubbles i:nth-child(5){right:0;top:64%;--size:11px;animation-delay:-3s}.porthole-bubbles i:nth-child(6){left:0;top:63%;--size:20px;animation-delay:-6s}.porthole-bubbles i:nth-child(7){right:22%;top:0;--size:6px;animation-delay:-2.5s}
@keyframes porthole-bubble-drift{from{transform:translate3d(-2px,7px,0);opacity:.45}to{transform:translate3d(3px,-9px,0);opacity:.9}}
@media(hover:hover) and (pointer:fine){.porthole-open:hover .porthole-frame{box-shadow:0 35px 60px #000b,0 0 45px color-mix(in srgb,var(--port-accent) 30%,transparent),inset 0 0 0 3px #071522,inset 0 0 0 5px #6293a077,inset 0 0 0 9px #061c2a,inset 0 0 0 11px #284a5c,inset 0 0 0 13px #020f1d}}
@media(max-width:600px){.porthole-frame{padding:25px}.porthole-bubbles{inset:-15px}.porthole-bubbles i:nth-child(2){--size:16px}.porthole-bubbles i:nth-child(6){--size:14px}}
@media(prefers-reduced-motion:reduce){.porthole-bubbles i{animation:none}}
/* Long page previews scroll inside the glass, without obscuring them on hover. */
.porthole-glass>img{height:auto;min-height:100%;object-fit:initial;object-position:initial;transform:translateY(0);will-change:auto;transition:transform 1.1s ease-out}
@media(hover:hover) and (pointer:fine){.porthole-open:hover img{transform:translateY(0)}.porthole-open:hover .porthole-overlay{opacity:0}}
.porthole-open:focus-visible .porthole-overlay{opacity:0}
.porthole-glass.is-preview-scrolling>img{will-change:transform}
@media(prefers-reduced-motion:reduce){.porthole-glass>img{transition:none!important}}
/* Compact horizontal gallery. Only the page preview moves on hover. */
.ocean-chapters .projects .porthole-grid{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:44px;margin-top:0;padding:32px 24px 22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;overscroll-behavior-x:contain;scrollbar-width:none}
.porthole-grid::-webkit-scrollbar{display:none}
.porthole-project{flex:0 0 calc((100% - 44px)/2);max-width:none;scroll-snap-align:start;scroll-snap-stop:normal}
.porthole-open .porthole-frame{transform:none!important}
.project-carousel{margin-top:30px;min-width:0}
.project-carousel-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:24px;padding-inline:24px;color:#b8cedb}
.project-carousel-status{font-size:12px;letter-spacing:.08em;margin:0}
.project-carousel-arrows{display:flex;gap:10px}
.project-carousel-arrows button{width:46px;height:46px;border-radius:50%;border:1px solid #91d5e45c;background:#092336aa;color:#dcf8ff;font-size:25px;transition:background .2s,border-color .2s}
.project-carousel-arrows button:hover:not(:disabled){background:#164557;border-color:#9fe7e4}
.project-carousel-arrows button:disabled{opacity:.3;cursor:default}
@media(min-width:1100px){.porthole-project{flex-basis:calc((100% - 44px)/2)}.porthole-frame{max-width:440px;margin-inline:auto}}
@media(max-width:600px){.ocean-chapters .projects .porthole-grid{gap:30px;padding:25px 20px 18px;scroll-padding-inline:20px}.porthole-project{flex:0 0 calc(100% - 28px);max-width:none}.porthole-frame{max-width:320px;margin-inline:auto}.project-carousel-toolbar{padding-inline:20px;justify-content:space-between}.project-carousel{margin-inline:-16px;margin-top:18px}.project-carousel-arrows button{width:42px;height:42px}.porthole-name{font-size:28px}}
/* Navigation sits at the viewport edges, centred beside the portholes. */
.project-carousel{position:relative}
.project-carousel-toolbar{justify-content:center;min-height:18px}
.project-carousel-arrows{display:contents}
.project-carousel-arrows button{position:absolute;top:var(--project-arrow-y,240px);transform:translateY(-50%);z-index:6;background:#092336ed;box-shadow:0 4px 18px #00101b66}
#project-prev{left:calc((100% - 100vw)/2 + 20px)}
#project-next{right:calc((100% - 100vw)/2 + 20px)}
@media(max-width:600px){.project-carousel-toolbar{justify-content:center}.project-carousel-arrows button{width:38px;height:44px;font-size:23px}#project-prev{left:calc((100% - 100vw)/2 + 9px)}#project-next{right:calc((100% - 100vw)/2 + 9px)}}
/* Tall open chevrons, without an arrow shaft, circle or background. */
.project-carousel-arrows button{display:grid;place-items:center;width:48px;height:116px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#c9f5f7;transition:color .2s,opacity .2s}
.project-carousel-arrows button:hover:not(:disabled){background:none;border:0;color:#fff}
.project-carousel-arrows svg{display:block;width:30px;height:100px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.project-carousel-arrows button:disabled{opacity:.25}
@media(max-width:600px){.project-carousel-arrows button{width:36px;height:88px}.project-carousel-arrows svg{width:24px;height:76px}}