:root { --dive-paper:var(--color-paper); --dive-ivory:#fffdf5; --dive-gutter:clamp(24px,6vw,100px); }
html { scroll-behavior:auto; }
.journey { position:relative; height:650svh; }
.journey-stage { position:sticky; top:0; height:100svh; overflow:hidden; isolation:isolate; background:var(--dive-paper); }
.surface-world { position:absolute; inset:0; z-index:3; background:var(--dive-paper); }
.portfolio-home .hero { height:100%; min-height:0; }
.underwater { position:absolute; inset:0; z-index:1; visibility:hidden; overflow:hidden; }
.depth-paint { position:absolute; inset:0; }
.depth-paint img { display:block; width:100%; height:100%; object-fit:fill; }
.sailboat { position:absolute; z-index:2; right:12%; bottom:15%; width:clamp(94px,9vw,150px); display:block; pointer-events:auto; transform-origin:50% 90%; text-align:center; }
.sailboat img { width:100%; height:auto; display:block; }
.sailboat span { display:block; font-size:12px; color:var(--ink); margin-top:6px; }
.sailboat:focus-visible { outline:2px solid var(--pen); outline-offset:6px; }
.portfolio-home .wave-far { z-index:1; }
.portfolio-home .wave-middle { z-index:3; }
.portfolio-home .wave-near { z-index:4; }
.water-mix { position:absolute; inset:0; z-index:4; pointer-events:none; visibility:hidden; }
.ribbon { position:absolute; left:-40%; width:180%; height:54%; overflow:hidden; mix-blend-mode:multiply; mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 92%,transparent); }
.ribbon img { position:absolute; width:100%; height:300%; max-width:none; object-fit:fill; }
.ribbon-one { top:-8%; }
.ribbon-two { top:25%; }
.ribbon-three { top:58%; }
.ribbon-one img { top:0; }
.ribbon-two img { top:-100%; }
.ribbon-three img { top:-200%; }
.swimmer { position:absolute; z-index:3; left:0; top:0; width:clamp(300px,38vw,640px); aspect-ratio:1.5; pointer-events:none; }
.swimmer>img { position:absolute; inset:0; width:100%; height:100%; }
.stroke-b { opacity:0; }
.fish { position:absolute; z-index:2; width:clamp(60px,7vw,112px); pointer-events:none; }
.fish img { width:100%; display:block; }
.fish-gold { left:14%; top:24%; }
.fish-purple { right:14%; top:56%; z-index:4; width:clamp(75px,10vw,145px); }
.reef { position:absolute; bottom:3%; width:40%; height:52%; overflow:hidden; pointer-events:none; z-index:5; transform-origin:50% 100%; }
.reef img { position:absolute; bottom:0; width:250%; height:125%; object-fit:fill; }
.reef-left { left:4%; opacity:.65; width:24%; height:36%; }
.reef-left img { left:0; }
.reef-right { right:4%; width:30%; height:46%; }
.reef-right img { right:0; }
.work-heading { position:absolute; left:var(--dive-gutter); bottom:15%; z-index:6; color:var(--dive-ivory); }
.work-kicker { margin:0 0 20px; font-size:12px; line-height:1.5; }
.work-heading h2 { margin:0; font-family:Switzer,Arial,sans-serif; font-style:normal; font-weight:400; font-size:clamp(80px,11vw,180px); line-height:1.05; letter-spacing:-.035em; }
.work-heading .works-entry { position:relative; display:block; padding:8px 0; margin:0; font-size:inherit; color:inherit; text-decoration:none; }
.works-entry-arrow { position:absolute; left:calc(100% + 18px); top:.32em; width:.37em; height:.37em; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.works-entry-hint { display:block; width:max-content; margin-top:20px; padding-bottom:10px; border-bottom:1px solid currentColor; font-size:13px; line-height:1.4; letter-spacing:0; }
.works-entry:hover .works-entry-arrow,.works-entry:focus-visible .works-entry-arrow { transform:translate(5px,-5px); }
.works-entry:active .works-entry-arrow { transform:translate(8px,-8px); }
.work-heading a:focus-visible { outline:2px solid currentColor; outline-offset:8px; }
.breath { position:absolute; left:0; top:0; width:1px; height:1px; z-index:4; pointer-events:none; }
.breath i { position:absolute; width:9px; height:10px; border:1px solid rgba(250,255,251,.95); border-radius:46% 54% 51% 49%; box-shadow:0 0 0 1px rgba(39,100,130,.22),inset 1px 1px 2px rgba(255,255,250,.5); background:radial-gradient(circle at 28% 25%,rgba(255,255,250,.65),transparent 48%); opacity:0; }
.breath i:nth-child(2) { width:4px;height:5px; }
.breath i:nth-child(3) { width:9px;height:10px; }
.breath i:nth-child(4) { width:3px;height:4px; }
.breath i:nth-child(5) { width:6px;height:7px; }
.dive-end { display:none; }
.dive-end a { color:inherit; padding:12px 0; }
@media(max-width:600px) {
 .journey { height:580svh; }
 .sailboat { width:82px; right:10%; bottom:24%; }
 .sailboat span { font-size:11px; }
 .swimmer { width:76vw; }
 .work-heading { left:9%; bottom:18%; }
 .work-heading h2 { font-size:22vw; }
 .work-kicker { font-size:11px; margin-bottom:14px; }
 .work-heading a { font-size:13px; margin-top:14px; }
 .reef { width:45%; height:40%; bottom:5%; }
 .reef-right { width:41%; }
 .reef-left { opacity:.4; }
 .ribbon { width:230%; left:-65%; }
 .dive-end { align-items:flex-start; flex-direction:column; }
}
@media(max-width:540px) and (max-height:740px) { .sailboat { bottom:16%; width:70px; } }
@media(max-width:540px) and (max-height:640px) {
 .portfolio-home .hero-copy { top:178px; }
 .portfolio-home .intro { margin-top:15px; font-size:15px; }
 .portfolio-home .wave-far { top:78%; }
 .portfolio-home .wave-middle { top:86%; }
 .portfolio-home .wave-near { top:94%; }
 .sailboat { bottom:15%; width:65px; }
 .portfolio-home .gull-two { top:70%; }
}
/* Reduced motion is a readable two-section page, not a frozen pinned film. */
.dive-static .journey { height:auto; }
.dive-static .journey-stage { position:relative; height:auto; overflow:visible; }
.dive-static .surface-world { position:relative; height:100svh; min-height:680px; }
.dive-static .underwater { position:relative; height:100svh; min-height:640px; visibility:visible; }
.dive-static .water-mix { display:none; }
.dive-static .swimmer { left:30%; top:25%; }
.dive-static .breath { display:none; }

/* Pigment density matches the airy watercolor opening. */
.depth-paint img { opacity:.55; filter:saturate(.66); }
.swimmer>img { filter:saturate(.72); }
.stroke-a,.stroke-b { mix-blend-mode:multiply; }
.fish img { opacity:.84; filter:saturate(.9); }
.reef img { opacity:var(--water-plant-opacity); filter:saturate(var(--water-plant-saturation)); }
.work-heading { color:#153e50; }
@media(max-width:600px) {
 .depth-paint { inset:0; mask-image:url("./media/depth-soft.webp"); mask-size:100% 100%; mask-repeat:no-repeat; }
 .depth-paint img { object-fit:fill; width:156%; margin-left:-28%; }
 .reef-right { right:5%;width:30%;height:35%; }
 .reef-left { left:5%;width:26%;height:25%; }
}

/* The foreground water is opaque until the camera passes underneath it. */
.surface-details { position:absolute; inset:0; z-index:3; pointer-events:none; }
.surface-details a { pointer-events:auto; }
.mix-backing { position:absolute; inset:0 0 -30%; background:#b2d8dd; }
.sailboat { bottom:11%; }
.boat-arrow { position:absolute; left:58%; top:46%; width:30px; height:38px; color:#65452c; animation:boat-cue 1.6s ease-in-out infinite alternate; pointer-events:none; }
.boat-arrow path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes boat-cue { from {opacity:.22; transform:translateY(-2px);} to {opacity:.9; transform:translateY(3px);} }
.hero[data-reduced-motion=true] .boat-arrow { animation:none; }
.portfolio-home:has(.pause[aria-pressed=true]) .boat-arrow { animation-play-state:paused; }
@media(max-width:600px) { .sailboat {bottom:15%;} .boat-arrow {width:24px;height:30px;left:55%;top:42%;} }
@media(max-width:540px) and (max-height:740px) { .sailboat {bottom:9%;} }
@media(prefers-reduced-motion:reduce) { .boat-arrow {animation:none;} }

/* Place the waterline across the lower hull, not underneath the boat. */
.sailboat {bottom:9.7%;}
@media(max-width:600px) {.sailboat {bottom:13%;}}
@media(max-width:540px) and (max-height:740px) {.sailboat {bottom:7%;}}

/* Water between the painted bands; white pigment mixes into pale turquoise. */
.water-mix {isolation:isolate;}
.boat-arrow {left:59%;top:47%;width:26px;height:34px;color:#224c59;animation:boat-cue 1.9s ease-in-out infinite;}
.boat-arrow path {fill:currentColor;stroke:none;}
@keyframes boat-cue {
  0%,100% {opacity:.25;transform:translateY(-2px);}
  55%,75% {opacity:.9;transform:translateY(3px);}
}
@media(max-width:600px) {.boat-arrow {left:55%;top:44%;width:22px;height:28px;}}

/* Reuse the actual watercolor alpha, not a blurred rectangular section. */
.mix-backing,
.ribbon {
  mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%),url('./media/depth-soft.webp');
  mask-size:100% 100%,128% 100%;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-composite:add;
}
.journey.is-diving .surface-world {
  mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%),url('./media/depth-soft.webp');
  mask-size:100% 100%,128% 100%;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-composite:add;
}
.dive-static .surface-world {mask-image:none;}

/* Review refinements: controls recede; the artwork stays unobstructed. */
.playback-buttons {display:flex;gap:8px;margin-bottom:20px;}
.playback-buttons button {flex:1;min-height:44px;padding:10px 12px;}
.work-heading h2:focus {outline:none;}
.work-heading h2:focus-visible {outline:2px solid currentColor;outline-offset:10px;}
@media(max-width:600px) {
 .portfolio-home .director-panel {left:0;right:auto;max-width:calc(100vw - 24px);}
}

/* Optical depth belongs to the painting; all text sits above these layers. */
.water-refraction {position:absolute;inset:0;width:100%;height:100%;opacity:.55;filter:saturate(.66);pointer-events:none;}
.depth-paint.has-water-refraction>img {opacity:0;}
.depth-haze {position:absolute;inset:83% 0 0;z-index:5;pointer-events:none;}
.depth-haze i {position:absolute;inset:0;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask-image:linear-gradient(to bottom,transparent,#000 80%),url('./media/depth-soft.webp');mask-size:100% 100%,128% 100%;mask-position:center;mask-repeat:no-repeat;mask-composite:intersect;}
.depth-haze i:nth-child(2) {backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);mask-image:linear-gradient(to bottom,transparent 55%,#000),url('./media/depth-soft.webp');}
@media(max-width:600px) {
 .water-refraction {width:156%;left:-28%;}
 .depth-haze {top:86%;}
}

.fish-purple {right:12%;top:47%;width:clamp(90px,10vw,155px);}
.fish-butterfly {right:23%;top:56%;width:clamp(70px,7.8vw,124px);z-index:2;}
.fish-distant {right:8%;top:36%;width:clamp(45px,5vw,78px);z-index:1;}
.fish-distant img {opacity:.42;filter:saturate(.5);}
@media(max-width:600px) {
 .fish-purple {right:9%;top:34%;width:90px;}
 .fish-butterfly {right:26%;top:43%;width:66px;}
 .fish-distant {right:6%;top:24%;width:48px;}
}

/* Responsive review: one continuous water mass and readable short-screen layouts. */
.portfolio-home .masthead a{display:inline-flex;align-items:center;min-height:44px}
.portfolio-home .masthead{padding-top:18px;align-items:center}
.portfolio-home a:focus-visible{outline:2px solid var(--pen);outline-offset:5px}
.sailboat{bottom:12%;width:clamp(104px,10vw,158px)}
.sailboat .boat-label{position:absolute;top:-28px;left:50%;transform:translateX(-50%);margin:0;padding:4px 2px;font-size:12px;font-weight:500;line-height:1.3;color:var(--pen);border-bottom:1px solid #153e5060;white-space:nowrap}
.sailboat:hover .boat-label,.sailboat:focus-visible .boat-label{border-bottom-color:currentColor}
.water-mix{inset:-12% 0;mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 84%,transparent),url('./media/depth-soft.webp');mask-size:100% 100%,130% 115%;mask-position:center;mask-repeat:no-repeat;mask-composite:intersect;-webkit-mask-composite:source-in}
.mix-backing{inset:0;background:#9acbd4;mask-image:none}
.ribbon{mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:add;height:58%}
.ribbon-one{top:-9%}.ribbon-two{top:24%}.ribbon-three{top:57%}
.swimmer{width:min(38vw,95svh,640px)}
.work-heading{color:var(--dive-ivory);bottom:16%}
.work-heading a{min-height:44px}
.work-heading .works-entry::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.work-heading .works-entry:hover::after,.work-heading .works-entry:focus-visible::after{transform:scaleX(1)}
.depth-paint img,.water-refraction{opacity:var(--water-pigment-opacity);filter:saturate(var(--water-pigment-saturation))}
.depth-paint.has-water-refraction>img{opacity:0}
.dive-end{padding-bottom:84px}
@media(max-width:600px){
 .swimmer{width:min(76vw,68svh)}
 .portfolio-home .masthead{padding-top:9px}
 .portfolio-home .wave-far{top:72%}.portfolio-home .wave-middle{top:81%}.portfolio-home .wave-near{top:90%}
 .sailboat{bottom:14%;width:92px;right:9%}
 .sailboat .boat-label{font-size:11px;top:-23px}
 .work-heading{bottom:17%;left:9%}
 .fish-purple{right:5%;top:37%;width:78px}.fish-butterfly{right:21%;top:47%;width:60px}
 .fish-distant{right:9%;top:25%}
}
@media(max-width:540px) and (max-height:740px){
 .portfolio-home .wave-far{top:76%}.portfolio-home .wave-middle{top:85%}.portfolio-home .wave-near{top:94%}
 .sailboat{bottom:10%;width:78px}
 .portfolio-home .gull-two{top:70%}
}
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
 .portfolio-home .masthead{padding:4px 24px;font-size:11px}
 .portfolio-home .hero-copy{top:60px;left:24%;right:12%}
 .portfolio-home .signature{font-size:min(18vw,34svh);line-height:1.25}
 .portfolio-home .intro{font-size:14px;line-height:1.4;width:76%;margin-top:10px}
 .portfolio-home .sun-cta{top:70px;left:30px;gap:4px}
 .portfolio-home .sun-art{width:68px}
 .portfolio-home .gull-one{width:60px;top:18%;right:7%}
 .portfolio-home .gull-two{width:48px;top:55%;left:13%}
 .portfolio-home .wave-far{top:75%}.portfolio-home .wave-middle{top:84%}.portfolio-home .wave-near{top:93%}
 .sailboat{width:72px;right:8%;bottom:8%}
 .sailboat .boat-label{top:-24px;font-size:11px}
 .swimmer{width:55svh}
 .work-heading{bottom:12%;left:8%}.work-heading h2{font-size:20svh}
 .work-heading a{margin-top:4px;font-size:12px}
 .fish-gold{width:52px;top:17%}.fish-purple{width:66px;top:35%}.fish-butterfly{width:50px;top:55%}
 .portfolio-home .director-panel{left:0;right:auto;max-height:75svh;overflow-y:auto}
}
.dive-static .swimmer{left:20%;top:22%}

@media(prefers-reduced-motion:reduce){.work-heading .works-entry::after{transition:none}}

.ribbon{mix-blend-mode:normal}.ribbon img{filter:saturate(.72);opacity:.92}
@media(max-width:540px){.portfolio-home .navigation a:first-child{display:none}}
/* The actual projects page is revealed underneath the dissolving painting. */
html{scrollbar-gutter:stable}.works-portal{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;visibility:hidden;background:#f5f6f8;pointer-events:none}.works-portal.is-arriving{visibility:visible}.works-portal.is-arriving:not([inert]){pointer-events:auto}
/* The gallery owns the viewport only after the explicit seabed click. */
.is-opening-works .journey-stage{position:fixed;inset:0;width:100%;height:100dvh;z-index:40}
.works-open .underwater,.works-open .surface-world,.works-open .water-mix{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
@media(max-width:600px){.works-entry-arrow{left:calc(100% + 12px)}.works-entry-hint{margin-top:16px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.works-entry-arrow{transition:none}}