:root{--ink:#10333c;--sea:#082c36;--deep:#041c25;--sand:#f2efe5;--gold:#e7ca87;--muted:#bdced0;--nav-height:87px;--reading:0;--reef:0;--shore-copy:1;--sea-copy:0;--waterline:110%;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 18px)}
body{margin:0;background:var(--sand);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
img{height:auto}
figure,p,h1,h2,h3{margin:0}
p{line-height:1.65}
h1,h2,h3,.brand strong{font-family:Georgia,'Times New Roman',serif;font-weight:400}
h1,h2{letter-spacing:-.045em;line-height:.96}
h1{font-size:clamp(5rem,8.25vw,8rem)}
h2{font-size:clamp(3.5rem,6vw,6.2rem)}
h3{letter-spacing:-.035em;line-height:1.03}
em{font-weight:400}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #d39422;outline-offset:6px}
[hidden]{display:none!important}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:100;background:var(--sand);color:var(--ink);padding:16px}
.site-nav{position:fixed;z-index:50;inset:0 0 auto;background:rgba(4,28,37,.94);color:var(--sand);backdrop-filter:blur(16px)}
.nav-top{min-height:84px;max-width:1680px;margin:auto;padding:12px 4.4%;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0;min-height:48px}
.brand-mark{font-family:Georgia,serif;font-size:46px;line-height:1;color:var(--gold);transform:rotate(-8deg)}
.brand strong{font-size:22px;letter-spacing:.01em;display:block}
.brand small{display:block;text-transform:uppercase;font-size:8px;letter-spacing:.17em;margin-top:7px;line-height:1.5}
.brand small span{margin:0 5px;color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:14px;justify-content:center;margin-left:auto}
.nav-links a{font-size:12px;white-space:nowrap;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 7px;position:relative;color:#d9e4e2}
.nav-links a::after{content:'';position:absolute;left:7px;right:7px;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .2s}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-short{display:none}
.motion-toggle{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 0 0 16px;white-space:nowrap;border:0;border-left:1px solid #53696d;background:none;color:var(--sand);font-size:11px}
.motion-toggle:disabled{cursor:default;color:#bdced0}
.motion-icon{font-size:15px;color:var(--gold)}
.reading-track{height:2px;background:#24444b}
.reading-track span{height:100%;display:block;background:var(--gold);transform:scaleX(var(--reading));transform-origin:left}
.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:11px;font-weight:400;line-height:1.7}
.subtitle{font-family:Georgia,'Times New Roman',serif;font-size:23px;line-height:1.3;letter-spacing:.01em}
.section-width{width:min(1260px,88%);margin-inline:auto}
.voyage{background:var(--deep);color:var(--sand)}
.voyage-stage{position:relative}
.scene{position:relative;min-height:900px;height:100svh;isolation:isolate;overflow:hidden;background:var(--deep)}
.motion-frame{position:absolute;inset:0;background:var(--deep);overflow:hidden}
.motion-frame>.poster,.motion-frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.motion-frame>video{opacity:0;transition:opacity .65s ease}
.motion-frame.is-ready>video{opacity:1}
.motion-frame.is-failed>video{opacity:0}
.play-scene{position:absolute;right:22px;bottom:22px;z-index:8;border:1px solid #e1decf;background:var(--deep);color:var(--sand);min-height:44px;padding:10px 18px;font-size:12px}
.play-scene span{margin-left:16px}
.shore-frame .play-scene{top:58%;bottom:auto}
.reef-scene .play-scene{bottom:160px}
.shore-shade,.reef-shade,.discovery-shade,.return-shade{position:absolute;inset:0;pointer-events:none}
.shore-shade{background:linear-gradient(90deg,rgba(3,28,35,.75),rgba(3,28,35,.14) 43%,transparent 70%),linear-gradient(0deg,rgba(3,28,35,.85),transparent 32%,transparent 70%,rgba(3,28,35,.15))}
.shore-title{position:absolute;left:6%;top:19%;max-width:600px}
.shore-title .eyebrow{color:var(--gold);margin-bottom:24px}
.shore-title h1 em{color:var(--gold)}
.shore-title .subtitle{margin-top:20px}
.shore-intro{position:absolute;left:6%;bottom:13%;max-width:380px;font-size:15px}
.shore-intro .eyebrow{color:var(--gold);margin-bottom:12px}
.reef-shade{background:linear-gradient(90deg,rgba(2,26,35,.92),rgba(2,26,35,.58) 30%,rgba(2,26,35,.08) 72%),linear-gradient(0deg,var(--deep),transparent 30%)}
.sea-copy{position:absolute;left:6%;top:25%;max-width:430px}
.sea-copy .eyebrow{color:var(--gold);margin-bottom:25px}
.sea-copy h2 em{color:#b9e4dc}
.sea-copy>p:last-child{max-width:350px;margin-top:30px;font-size:16px}
.interpretation{font-size:11px;line-height:1.6;font-style:italic;font-family:Georgia,'Times New Roman',serif;letter-spacing:.01em}
.scene-credit{position:absolute;left:6%;right:6%;bottom:100px;color:#e5efeb;max-width:480px}
.voyage-footer{position:absolute;z-index:6;left:6%;right:6%;bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--sand)}
.journey-position{font-size:10px;letter-spacing:.13em;text-transform:uppercase;display:flex;gap:12px;align-items:center}
.position-dot{height:6px;width:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 5px #e7ca8718}
.text-link{display:inline-flex;gap:20px;align-items:center;min-height:44px;font-size:12px}
.text-link span{font-size:20px}
.waterline{display:none}
.scroll-story .voyage{height:250svh}
.scroll-story .voyage-stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden}
.scroll-story .scene{position:absolute;inset:0;height:100%;min-height:0}
.scroll-story .reef-scene{pointer-events:none}
.scroll-story .reef-scene.is-active{pointer-events:auto}
.discovery-stage{position:relative;min-height:950px;height:110svh;max-height:1250px;background:var(--deep);color:var(--sand);isolation:isolate;overflow:hidden}
.reef-ball-frame{left:25%;top:5%;height:78%;width:75%}
.reef-ball-frame>.poster,.reef-ball-frame>video{object-fit:contain}
.discovery-shade{background:linear-gradient(90deg,var(--deep) 5%,rgba(4,28,37,.88) 23%,transparent 57%),linear-gradient(0deg,var(--deep) 7%,transparent 45%,var(--deep) 100%)}
.discovery-copy{position:absolute;top:17%;left:6%;max-width:360px}
.discovery-copy .eyebrow{color:var(--gold);margin-bottom:30px}
.discovery-copy h2{font-size:clamp(4rem,6vw,6.3rem)}
.discovery-copy h2 em{color:#b9e4dc}
.discovery-copy>p:last-child{font-size:16px;max-width:295px;margin-top:26px}
.habitat-explorer{position:absolute;z-index:5;left:6%;right:6%;bottom:105px;border-top:1px solid #67827e;display:grid;grid-template-columns:1fr 1fr;gap:8%;padding-top:26px}
.habitat-tabs{display:flex;gap:26px}
.habitat-tabs button{min-height:52px;padding:12px 0;background:none;color:#bacdc9;border:0;border-bottom:1px solid transparent;font-family:Georgia,'Times New Roman',serif;font-size:23px}
.habitat-tabs button span{display:block;font-family:Arial,sans-serif;font-size:9px;letter-spacing:.15em;margin-bottom:8px;color:var(--gold)}
.habitat-tabs button[aria-selected=true]{color:var(--sand);border-color:var(--gold)}
.habitat-panel h3{font-size:26px;color:var(--gold);margin-bottom:12px}
.habitat-panel p{font-size:16px;max-width:390px}
.habitat-panels{display:grid;gap:20px}
.enhanced .habitat-panel h3{display:none}
.discovery-credit{position:absolute;bottom:33px;left:6%;right:6%;color:#bdced0}
.field-guide{background:var(--sand);padding:110px 0 100px}
.field-intro{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:end;padding-bottom:84px;border-bottom:1px solid #b7c2bb}
.field-intro .eyebrow{margin-bottom:25px;color:#446663}
.field-intro h2 em{color:#527567}
.field-intro>p{max-width:390px;font-size:17px;padding-bottom:8px}
.encounter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:7%;align-items:center;margin:0 auto;padding:90px 0 65px;width:min(1440px,88%);position:relative}
.encounter-copy{position:relative;padding-left:26px;border-left:1px solid #b7c2bb}
.species-index{font-size:10px;letter-spacing:.18em;color:#527567;display:block;margin-bottom:30px}
.encounter h3{font-size:clamp(2.5rem,4.2vw,4.7rem)}
.encounter h3 em{color:#527567}
.encounter-copy p{font-size:15px;max-width:260px;margin-top:24px}
.encounter-figure{min-width:0}
.landscape-frame{position:relative;aspect-ratio:16/9;width:100%}
.encounter-figure figcaption{margin-top:17px;max-width:580px;color:#43615f}
.porpoise-encounter{padding-block:65px 90px}
.respect{text-align:center;padding:125px 0 95px;border-top:1px solid #b7c2bb}
.respect .eyebrow{color:#527567;margin-bottom:34px}
.respect h2 em{color:#527567}
.respect-lines{margin-top:48px;font-size:17px}
.respect-lines p+p{margin-top:12px}
.shore-symbol{display:block;font-family:Georgia,serif;font-size:60px;color:#8b9d8c;margin-top:36px}
.return-shore{position:relative;min-height:650px;height:80svh;max-height:1000px;background:var(--sea);color:var(--sand);overflow:hidden;isolation:isolate}
.return-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.return-shade{background:linear-gradient(90deg,rgba(4,28,37,.9),rgba(4,28,37,.48) 45%,rgba(4,28,37,.12)),linear-gradient(0deg,rgba(4,28,37,.6),transparent 55%)}
.return-copy{position:absolute;left:6%;top:25%;max-width:530px}
.return-copy .eyebrow{color:var(--gold);margin-bottom:28px}
.return-copy h2{font-size:clamp(3.5rem,5.5vw,5.5rem)}
.return-copy .subtitle{font-size:22px;color:var(--gold);margin-top:20px}
.return-copy>p:last-of-type{margin-top:18px;font-size:13px}
.shore-link{display:inline-flex;align-items:center;justify-content:space-between;gap:70px;margin-top:40px;min-height:52px;padding:12px 0;border-block:1px solid #d0dbd5;font-size:13px}
.shore-link>span[aria-hidden]{font-size:25px;color:var(--gold)}
.site-footer{background:var(--deep);color:#d1ded9;min-height:94px;display:flex;align-items:center;justify-content:space-between;padding:20px 6%;gap:24px;font-size:11px;letter-spacing:.02em}
@media(min-width:1700px){.shore-title{top:21%}.shore-intro{bottom:17%}}
@media(max-width:1100px){.nav-top{gap:20px;padding-inline:4%}.nav-links{gap:6px}.nav-links a{font-size:11px;padding-inline:5px}.brand strong{font-size:19px}.brand-mark{font-size:36px}.brand{gap:10px}.motion-toggle{font-size:10px;padding-left:12px}.shore-intro{max-width:330px}.habitat-tabs{gap:22px}.habitat-tabs button{font-size:21px}}
@media(max-width:900px){:root{--nav-height:113px}.nav-top{display:grid;grid-template-columns:1fr auto;gap:0;min-height:111px;padding:8px 5% 0}.brand{min-height:52px}.nav-links{grid-row:2;grid-column:1/-1;margin:0;justify-content:space-between}.nav-links a{font-size:12px;min-width:44px;justify-content:center}.motion-toggle{grid-column:2;grid-row:1}.nav-wide{display:none}.nav-short{display:inline}.scene{min-height:800px}.shore-frame{background:linear-gradient(180deg,#214954,#0b3741)}.shore-frame>.poster,.shore-frame>video{object-fit:contain;object-position:center 57%}.shore-shade{background:linear-gradient(180deg,rgba(4,28,37,.62) 0,transparent 40%,transparent 68%,rgba(4,28,37,.9) 100%)}.shore-title{top:16%;left:6%}.shore-title h1{font-size:clamp(4rem,10vw,6rem)}.shore-title .eyebrow{margin-bottom:18px}.shore-title .subtitle{font-size:21px;margin-top:18px}.shore-intro{bottom:12%;max-width:560px}.shore-intro p{font-size:15px}.sea-copy{top:22%;max-width:390px}.sea-copy h2{font-size:5rem}.sea-copy>p:last-child{font-size:15px}.reef-shade{background:linear-gradient(90deg,rgba(2,26,35,.86),rgba(2,26,35,.05)),linear-gradient(0deg,var(--deep),transparent 40%)}.discovery-stage{height:1050px;min-height:0;max-height:none}.reef-ball-frame{left:0;top:30%;height:auto;width:100%;aspect-ratio:16/9}.discovery-shade{background:linear-gradient(180deg,var(--deep) 10%,transparent 40%,transparent 62%,var(--deep) 85%)}.discovery-copy{top:100px;max-width:none;right:6%;display:grid;grid-template-columns:1fr 1fr;column-gap:35px;align-items:end}.discovery-copy .eyebrow{grid-column:1/-1;margin-bottom:20px}.discovery-copy h2{font-size:4.7rem}.discovery-copy>p:last-child{margin:0;max-width:300px;font-size:15px}.habitat-explorer{gap:35px;grid-template-columns:1fr 1fr;bottom:100px}.habitat-tabs{gap:20px}.habitat-tabs button{font-size:21px}.habitat-panel p{font-size:15px}.field-guide{padding-block:90px}.field-intro{gap:45px;align-items:center;padding-bottom:60px}.field-intro h2{font-size:4.5rem}.field-intro>p{font-size:15px}.encounter{grid-template-columns:1fr 1.65fr;gap:6%;padding-block:65px}.encounter-copy{padding-left:16px}.encounter-copy p{font-size:14px}.encounter h3{font-size:2.6rem}.species-index{margin-bottom:22px}.respect{padding-block:90px 65px}.respect h2{font-size:4.8rem}.return-image{object-fit:contain;object-position:center 65%}.return-shade{background:linear-gradient(180deg,var(--deep),transparent 65%,var(--deep) 100%)}.return-copy{top:15%}.return-copy h2{font-size:4.8rem}}
@media(max-width:600px){:root{--nav-height:106px}.nav-top{min-height:104px;padding:5px 6% 0}.brand strong{font-size:19px}.brand-mark{font-size:32px}.brand small{font-size:7px;letter-spacing:.12em;margin-top:5px}.brand{gap:9px}.nav-links a{font-size:11px;padding-inline:2px}.motion-toggle{padding-left:9px;font-size:10px;gap:6px}.motion-icon{font-size:13px}.scene{min-height:780px}.scroll-story .voyage{height:235svh}.scroll-story .voyage-stage{min-height:740px}.shore-title{top:148px}.shore-title h1{font-size:clamp(3.8rem,16vw,4.4rem)}.shore-title .eyebrow{font-size:9px;letter-spacing:.17em;margin-bottom:17px}.shore-title .subtitle{font-size:19px;margin-top:14px}.shore-frame>.poster,.shore-frame>video{object-position:center 54%}.shore-shade{background:linear-gradient(180deg,rgba(4,28,37,.38),transparent 40%,transparent 65%,rgba(4,28,37,.86) 87%)}.shore-intro{left:6%;right:6%;bottom:90px;max-width:none}.shore-intro .eyebrow{font-size:9px;margin-bottom:9px}.shore-intro p{font-size:13px;line-height:1.7;max-width:350px}.voyage-footer{bottom:22px;gap:10px}.journey-position{font-size:8px;letter-spacing:.09em;gap:9px}.text-link{font-size:11px;gap:12px}.sea-copy{top:23%;left:6%;right:6%;max-width:330px}.sea-copy .eyebrow{font-size:9px;margin-bottom:24px}.sea-copy h2{font-size:4rem}.sea-copy>p:last-child{font-size:14px;max-width:270px;margin-top:27px}.reef-shade{background:linear-gradient(90deg,rgba(2,26,35,.84),rgba(2,26,35,.28)),linear-gradient(0deg,var(--deep),transparent 45%)}.scene-credit{bottom:95px;font-size:10px;max-width:300px}.discovery-stage{height:1010px}.discovery-copy{top:80px;display:block}.discovery-copy .eyebrow{font-size:10px;margin-bottom:23px}.discovery-copy h2{font-size:4.3rem}.discovery-copy>p:last-child{font-size:14px;max-width:295px;margin-top:24px}.reef-ball-frame{top:43%;aspect-ratio:16/9}.discovery-shade{background:linear-gradient(180deg,var(--deep) 12%,transparent 48%,transparent 59%,var(--deep) 78%)}.habitat-explorer{bottom:106px;display:block;padding-top:18px}.habitat-tabs{justify-content:space-between;gap:12px}.habitat-tabs button{font-size:22px;min-width:76px;text-align:left;padding-block:7px 12px}.habitat-tabs button span{font-size:8px;margin-bottom:7px}.habitat-panels{margin-top:24px;min-height:52px}.habitat-panel p{font-size:15px;max-width:310px}.discovery-credit{font-size:10px;bottom:36px}.field-guide{padding:76px 0 68px}.field-intro{display:block;padding-bottom:48px}.field-intro .eyebrow{font-size:10px;margin-bottom:20px}.field-intro h2{font-size:3.8rem}.field-intro>p{font-size:15px;margin-top:27px;max-width:310px;padding:0}.encounter{display:flex;flex-direction:column;align-items:stretch;gap:30px;width:100%;padding:54px 0 26px}.encounter-copy{margin-inline:6%;padding-left:20px}.species-index{font-size:9px;margin-bottom:15px}.encounter h3{font-size:3.2rem}.encounter h3 br{display:none}.encounter h3 em::before{content:' '}.encounter-copy p{font-size:14px;max-width:310px;margin-top:18px}.encounter-figure figcaption{margin:15px 6% 0;font-size:10px}.porpoise-encounter{padding-block:65px 35px}.respect{padding:76px 0 53px}.respect .eyebrow{font-size:10px;margin-bottom:28px}.respect h2{font-size:3.5rem}.respect-lines{font-size:14px;margin-top:32px}.respect-lines p+p{margin-top:10px}.shore-symbol{margin-top:24px}.return-shore{height:790px;min-height:0}.return-image{object-position:center 69%}.return-shade{background:linear-gradient(180deg,var(--deep) 0,rgba(4,28,37,.6) 34%,transparent 60%,transparent 76%,var(--deep) 100%)}.return-copy{top:90px;left:6%;right:6%}.return-copy .eyebrow{font-size:10px;margin-bottom:23px}.return-copy h2{font-size:3.5rem}.return-copy .subtitle{font-size:18px;margin-top:18px}.return-copy>p:last-of-type{font-size:12px;margin-top:15px}.shore-link{margin-top:29px;min-height:48px}.site-footer{align-items:flex-start;flex-direction:column;gap:5px;padding-block:25px;font-size:10px}.site-footer .text-link{font-size:11px}}
/* Keep captions with their images and preserve spacious portrait framing. */
.species-index,.respect .eyebrow{color:#43615f}
/* Hide neighbouring artwork at the edges of the supplied brochure extracts.
   The original image files remain unchanged. */
.discovery-credit{top:68%;bottom:auto;left:42%;max-width:580px;padding:8px 12px;background:rgba(4,28,37,.86);color:#e5efeb}
html:not(.enhanced) .habitat-explorer{display:block}
html:not(.enhanced) .habitat-panels{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media(min-width:601px) and (max-width:900px){.shore-title{top:15%}.shore-title h1{font-size:4.5rem}.shore-frame>.poster,.shore-frame>video{object-position:center 65%}.shore-intro{bottom:80px}.discovery-credit{top:calc(30% + 56.25vw + 10px);left:6%;right:6%;padding:0;background:none}}
@media(max-width:600px){.shore-title{top:140px}.shore-frame>.poster,.shore-frame>video{object-position:center 57%}.shore-intro p{font-size:14px;line-height:1.65}.discovery-credit{top:calc(43% + 56.25vw + 14px);left:6%;right:6%;padding:0;background:none}html:not(.enhanced) .discovery-stage{height:1180px}html:not(.enhanced) .reef-ball-frame{top:400px}html:not(.enhanced) .discovery-credit{top:calc(400px + 56.25vw + 14px)}html:not(.enhanced) .habitat-panels{grid-template-columns:1fr;gap:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.reading-track{display:none}.motion-frame>video{display:none}}
@media print{.site-nav,.voyage-footer,.play-scene,.site-footer{display:none!important}.scene{height:700px}.motion-frame>video{display:none}.scroll-story .voyage{height:auto}.scroll-story .voyage-stage{height:auto;position:relative}.scroll-story .scene{position:relative;height:700px;opacity:1}.scroll-story .shore-title,.scroll-story .shore-intro,.scroll-story .sea-copy{opacity:1;transform:none}.waterline{display:none!important}}

/* Revision after producer rejection: a connected marine journey, with content
   sized to the usable viewport instead of fixed, oversized brochure spreads. */
body{background:var(--deep)}
main{padding-top:var(--nav-height)}
html{scroll-padding-top:var(--nav-height)}
.scroll-story .voyage{height:235svh}
.scroll-story .voyage-stage{top:var(--nav-height);height:calc(100svh - var(--nav-height));min-height:0}
.shore-title{top:10%}
.shore-intro{bottom:17%;max-width:370px}
.shore-title h1{font-size:clamp(4.2rem,7.5vw,7.6rem)}
.sea-copy{top:15%}
.voyage-footer{bottom:20px}
.scene-credit{bottom:88px}
.discovery-stage{height:calc(100svh - var(--nav-height));min-height:660px;max-height:none}
.reef-ball-frame{inset:0;width:100%;height:100%}
.reef-ball-frame>.poster,.reef-ball-frame>video{object-fit:cover;object-position:center}
.discovery-shade{background:linear-gradient(90deg,rgba(4,28,37,.96),rgba(4,28,37,.8) 27%,transparent 63%),linear-gradient(0deg,var(--deep),transparent 45%,var(--deep) 100%)}
.discovery-copy{top:12%;max-width:330px}
.discovery-copy h2{font-size:clamp(3.8rem,5.9vw,6rem)}
.discovery-copy .eyebrow{margin-bottom:22px}
.habitat-explorer{bottom:66px;right:auto;width:min(730px,88%);grid-template-columns:auto 1fr;align-items:center;gap:38px;padding-top:18px;border-color:#68898b}
.habitat-tabs{gap:24px}
.habitat-tabs button{font-size:23px}
.habitat-panel p{font-size:16px}
.discovery-credit{top:auto;bottom:20px;left:6%;right:6%;max-width:none;padding:0;background:none;color:#dce8e5}
.reef-discovery[data-habitat=growth] .habitat-explorer{border-color:#afcda1}
.reef-discovery[data-habitat=habitat] .habitat-explorer{border-color:var(--gold)}
.field-guide{background:var(--deep);color:var(--sand);padding:0}
.field-intro{min-height:380px;padding-block:80px 65px;border:0;gap:9%;align-items:center}
.field-intro .eyebrow{color:var(--gold);margin-bottom:18px}
.field-intro h2{font-size:clamp(3.6rem,5.6vw,5.5rem)}
.field-intro h2 em,.encounter h3 em{color:#b9e4dc}
.field-intro>p{font-size:16px;color:#d8e5e1;max-width:350px}
.encounter{display:block;width:100%;margin:0;padding:0;background:var(--deep)}
.scroll-story .encounter{height:132svh}
.encounter-stage{position:relative;min-height:650px;height:calc(100svh - var(--nav-height));isolation:isolate;overflow:hidden;background:var(--deep)}
.scroll-story .encounter-stage{position:sticky;top:var(--nav-height);min-height:0}
.encounter-figure{position:absolute;inset:0;z-index:0}
.landscape-frame{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%;z-index:auto}
.encounter .landscape-frame::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,28,37,.97),rgba(4,28,37,.82) 23%,rgba(4,28,37,.12) 64%),linear-gradient(0deg,var(--deep),transparent 28%,transparent 76%,var(--deep))}
.encounter-copy{position:absolute;z-index:2;top:32%;left:6%;margin:0;padding:0;border:0;max-width:340px;transform:translateY(var(--encounter-drift,0px))}
.encounter h3{font-size:clamp(3.3rem,5.8vw,5.8rem)}
.encounter h3 br{display:block}
.encounter h3 em::before{content:none}
.encounter-copy p{font-size:16px;max-width:290px;margin-top:28px;color:#e5ece7}
.encounter .species-index{color:var(--gold);margin-bottom:24px}
.encounter-figure figcaption{position:absolute;z-index:3;left:6%;right:6%;bottom:27px;margin:0;max-width:560px;color:#e5ece7}
.encounter .play-scene{bottom:84px;right:6%;z-index:4}
.porpoise-encounter .encounter-copy{z-index:2}
.respect{width:100%;max-width:none;background:var(--sand);border:0;padding:75px 6% 90px}
.respect::before{content:'';display:block;width:72px;height:1px;background:#708d82;margin:0 auto 60px}
.respect-lines{margin-top:35px}
.respect .eyebrow{color:#43615f}
.return-shore{height:calc(100svh - var(--nav-height));min-height:580px}
.return-copy{top:20%}
html:not(.enhanced) .habitat-explorer{bottom:60px}
html:not(.enhanced) .discovery-stage{min-height:850px}
@media(min-width:901px) and (max-height:740px){
  .nav-top{min-height:68px;padding-block:5px}
  .shore-title{top:7%}.shore-title h1{font-size:4.3rem}.shore-title .eyebrow{margin-bottom:14px}.shore-title .subtitle{font-size:20px;margin-top:12px}
  .shore-intro{bottom:70px;font-size:13px;max-width:350px}.shore-intro .eyebrow{margin-bottom:6px}
  .sea-copy{top:10%;max-width:370px}.sea-copy h2{font-size:4rem}.sea-copy .eyebrow{margin-bottom:15px}.sea-copy>p:last-child{font-size:14px;margin-top:20px;max-width:330px}
  .scene-credit{bottom:74px;font-size:10px}.voyage-footer{bottom:12px}
  .discovery-stage{min-height:480px}.discovery-copy{top:8%}.discovery-copy h2{font-size:3.5rem}.discovery-copy>p:last-child{font-size:14px;max-width:275px;margin-top:18px}
  .encounter-copy{top:22%}.encounter h3{font-size:4rem}.encounter-copy p{font-size:14px;margin-top:20px}
  .return-shore{min-height:490px}.return-copy{top:15%}.return-copy h2{font-size:4rem}
}
@media(min-width:601px) and (max-width:900px){
  .shore-title{top:5%;left:6%}.shore-title h1{font-size:4.4rem}.shore-title .eyebrow{margin-bottom:15px}
  .shore-frame>.poster,.shore-frame>video{object-position:center 54%}
  .shore-intro{bottom:85px;max-width:540px}
  .sea-copy{top:15%}.scene-credit{bottom:85px}
  .discovery-stage{height:900px}.reef-ball-frame{inset:280px 0 auto;height:auto;aspect-ratio:16/9}.reef-ball-frame>.poster,.reef-ball-frame>video{object-fit:contain}
  .discovery-shade{background:linear-gradient(180deg,var(--deep),transparent 32%,transparent 62%,var(--deep) 84%)}
  .discovery-copy{top:65px;left:6%;right:6%;max-width:none;gap:35px}.discovery-copy h2{font-size:4rem}.discovery-copy>p:last-child{font-size:15px}
  .habitat-explorer{bottom:95px;width:88%;gap:25px;grid-template-columns:1fr 1fr}.habitat-tabs{gap:20px}.habitat-tabs button{font-size:22px}
  .discovery-credit{bottom:36px;top:auto;left:6%;right:6%}
  .field-intro{min-height:360px;padding-block:70px;gap:40px}.field-intro h2{font-size:4rem}
  .encounter-stage{min-height:700px}.encounter-copy{top:14%;max-width:350px}.encounter h3{font-size:4.5rem}
  .encounter .landscape-frame::after{background:linear-gradient(180deg,rgba(4,28,37,.92),rgba(4,28,37,.4) 45%,transparent 62%,var(--deep)),linear-gradient(90deg,rgba(4,28,37,.35),transparent)}
  .encounter .landscape-frame>.poster,.encounter .landscape-frame>video{object-fit:contain;object-position:center 73%}
    .return-shore{height:880px}.return-copy{top:10%}.return-image{object-position:center 71%}
}
@media(max-width:600px){
  .shore-title{top:30px;left:6%}.shore-title h1{font-size:clamp(3.4rem,15vw,4rem)}.shore-title .eyebrow{margin-bottom:13px}.shore-title .subtitle{font-size:18px;margin-top:13px}
  .shore-frame>.poster,.shore-frame>video{object-position:center 53%}
  .shore-intro{bottom:69px;font-size:14px}.shore-intro p{font-size:14px;line-height:1.6}.shore-intro .eyebrow{margin-bottom:7px}
  .voyage-footer{bottom:10px}.scene-credit{bottom:80px}.sea-copy{top:13%}.sea-copy h2{font-size:3.6rem}
  .discovery-stage{height:840px;min-height:0}.discovery-copy{top:48px;max-width:none;display:block}.discovery-copy h2{font-size:3.6rem}.discovery-copy .eyebrow{margin-bottom:20px}.discovery-copy>p:last-child{margin-top:22px;font-size:14px}
  .reef-ball-frame{inset:320px 0 auto;height:auto;width:100%;aspect-ratio:16/9}.reef-ball-frame>.poster,.reef-ball-frame>video{object-fit:contain}
  .discovery-shade{background:linear-gradient(180deg,var(--deep),transparent 38%,transparent 57%,var(--deep) 77%)}
  .habitat-explorer{bottom:115px;width:88%;display:block;padding-top:17px}.habitat-tabs{gap:12px;justify-content:space-between}.habitat-tabs button{font-size:22px}.habitat-panels{min-height:50px;margin-top:20px}.habitat-panel p{font-size:15px}
  .discovery-credit{top:auto;bottom:43px;left:6%;right:6%;font-size:11px}
  .field-intro{display:block;min-height:0;padding-block:35px 65px}.field-intro h2{font-size:3.5rem}.field-intro>p{font-size:15px;margin-top:24px;max-width:310px}
  .scroll-story .encounter{height:115svh}.encounter-stage{height:calc(100svh - var(--nav-height));min-height:690px}
  .encounter-copy{top:36px;left:6%;right:6%;max-width:none;margin:0;padding:0}.encounter h3{font-size:3.6rem}.encounter .species-index{font-size:10px;margin-bottom:18px}.encounter-copy p{font-size:15px;max-width:300px;margin-top:21px}
  .encounter .landscape-frame{top:40%;bottom:auto;height:43%;mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent)}
  .encounter .landscape-frame>.poster,.encounter .landscape-frame>video{object-fit:cover;object-position:60% center}
  .encounter .landscape-frame::after{background:linear-gradient(180deg,rgba(4,28,37,.12),transparent 20%,transparent 80%,rgba(4,28,37,.15))}
  .encounter-figure figcaption{left:6%;right:6%;bottom:34px;font-size:11px;margin:0;max-width:320px}
      .respect{padding:25px 6% 55px}.respect::before{margin-bottom:55px}.respect h2{font-size:3.3rem}.respect-lines{font-size:15px}
  .return-shore{height:750px;min-height:0}.return-copy{top:65px}.return-copy h2{font-size:3.3rem}.return-image{object-position:center 74%}
  html:not(.enhanced) .discovery-stage{height:1060px;min-height:0}html:not(.enhanced) .reef-ball-frame{top:320px}html:not(.enhanced) .discovery-credit{top:auto;bottom:25px}html:not(.enhanced) .habitat-explorer{bottom:100px}
}
@media(prefers-reduced-motion:reduce){.encounter-copy{transform:none}}
@media print{main{padding-top:0}.encounter,.scroll-story .encounter{height:auto}.encounter-stage,.scroll-story .encounter-stage{position:relative;top:0;height:650px}.field-guide{print-color-adjust:exact}}

/* V3.2 — waterline reveal, layered chapters and M06 motion.
   Chapter heights, overlaps and the waterline position are written by journey.js
   only in the scroll-story mode. Reduced motion, Save-Data and no-JS keep the
   static, unpinned story above. */
.reef-discovery{position:relative;background:var(--deep);color:var(--sand)}
.field-guide,.respect{position:relative}
.motion-frame>.veil{position:absolute;inset:0;z-index:1;background:var(--deep);opacity:0;pointer-events:none;transition:opacity .55s ease-out}
.motion-frame.is-dipping>.veil{opacity:.96;transition:opacity .4s ease-in}

/* Shore to sea: below the waterline only the reef is drawn, above it only the
   shore. The reef rises with the line, so its own surface sits under the seam. */
.scroll-story .voyage-stage{--dive:0;--wl-y:120%;--wl-clip:100%;--reef-y:100%;--shore-y:0px;--shore-copy:1;--sea-copy:0;--line-visible:0}
.scroll-story .reef-scene{-webkit-clip-path:inset(var(--wl-clip) 0 0 0);clip-path:inset(var(--wl-clip) 0 0 0)}
.scroll-story .reef-scene>.motion-frame{transform:translate3d(0,var(--reef-y),0);will-change:transform}
.scroll-story .shore-frame{transform:translate3d(0,var(--shore-y),0);will-change:transform}
.scroll-story .shore-shade{opacity:var(--shore-copy)}
.scroll-story .shore-title,.scroll-story .shore-intro{opacity:var(--shore-copy);transform:translate3d(0,var(--shore-y),0)}
.scroll-story .sea-copy{opacity:var(--sea-copy);transform:translate3d(0,calc((1 - var(--sea-copy)) * 22px),0)}
.scroll-story .waterline{display:block;position:absolute;z-index:3;left:0;right:0;top:0;height:0;transform:translate3d(0,var(--wl-y),0);opacity:var(--line-visible);pointer-events:none;will-change:transform}
.waterline::before,.waterline::after{content:'';position:absolute;left:0;right:0}
.waterline::before{bottom:0;height:46px;background:linear-gradient(180deg,rgba(214,238,234,0),rgba(214,238,234,.16) 70%,rgba(236,248,245,.42))}
.waterline::after{top:-1px;height:130px;background:linear-gradient(180deg,rgba(244,252,250,.92) 0,rgba(198,236,230,.62) 2px,rgba(104,178,182,.36) 11px,rgba(28,96,108,.22) 38%,rgba(4,28,37,0))}

/* Each marine chapter stays in place while the next slides over it, entering
   through a short dip to deep water rather than a gap or a ghosted overlap. */
.scroll-story .discovery-stage{position:sticky;top:var(--nav-height)}
.scroll-story .reef-discovery::before,.scroll-story .field-guide::before,.scroll-story .encounter+.encounter::before,.scroll-story .respect::after{content:'';position:absolute;z-index:5;left:0;right:0;bottom:100%;height:88px;background:linear-gradient(180deg,rgba(4,28,37,0),var(--deep));pointer-events:none}
.scroll-story .field-intro{min-height:0;padding-block:clamp(56px,10vh,96px)}

/* M06: the porpoise swims left to right, so its words sit in the open water. */
.porpoise-encounter .landscape-frame>.poster,.porpoise-encounter .landscape-frame>video{object-position:30% center}
@media(min-width:901px){
  .porpoise-encounter .encounter-copy{left:auto;right:6%}
  .porpoise-encounter .landscape-frame::after{background:linear-gradient(270deg,rgba(4,28,37,.96),rgba(4,28,37,.78) 23%,rgba(4,28,37,.1) 58%),linear-gradient(0deg,var(--deep),transparent 28%,transparent 76%,var(--deep))}
  .porpoise-encounter .encounter-figure figcaption{left:auto;right:6%;text-align:right}
  .porpoise-encounter .play-scene{right:auto;left:6%}
}
@media(min-width:601px) and (max-width:900px){.porpoise-encounter .landscape-frame>.poster,.porpoise-encounter .landscape-frame>video{object-position:center 73%}}
@media(max-width:600px){
  .porpoise-encounter .landscape-frame>.poster,.porpoise-encounter .landscape-frame>video{object-position:24% center}
  /* Phone shoreline: a larger, art-directed crop that keeps the whole house,
     feathered into the water colour instead of a hard letterbox strip. */
  .shore-scene{background:linear-gradient(180deg,#1d4550,#0b3741 62%,#072c35)}
  .shore-frame{inset:auto 0;top:29%;height:44%;background:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}
  .shore-frame>.poster,.shore-frame>video{object-fit:cover;object-position:46% 50%}
  .shore-frame .play-scene{top:auto;bottom:16%}
}
.return-frame{z-index:0;background:transparent}
/* Keep the V3.1 return framing now that the image sits in a motion frame. */
@media(max-width:900px){.return-frame>.return-image{object-fit:contain;object-position:center 71%}}
@media(max-width:600px){.return-frame>.return-image{object-position:center 74%}}
@media(min-width:601px) and (max-width:900px){.return-frame>.return-image{object-position:center 90%}}
@media(min-width:601px) and (max-width:900px){
  .shore-scene{background:linear-gradient(180deg,#1d4550,#0b3741 62%,#072c35)}
  .shore-frame{inset:auto 0;top:21%;height:55%;background:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent)}
  .shore-frame>.poster,.shore-frame>video{object-fit:cover;object-position:46% 50%}
  .shore-frame .play-scene{top:auto;bottom:14%}
}
@media print{.waterline,.veil{display:none!important}.scroll-story .reef-scene{clip-path:none}.scroll-story .reef-scene>.motion-frame,.scroll-story .shore-frame{transform:none}}

/* V3.3 — M08 eelgrass and M09 sugar kelp habitat chapters (new copy is CANDIDATE).
   They reuse the encounter stage, so pinning, slide-over and playback are unchanged. */
.habitat-eyebrow{color:var(--gold);margin-bottom:22px}
.habitat-encounter h3{font-size:clamp(3rem,4.6vw,4.6rem)}
.habitat-encounter .encounter-copy{max-width:380px}
.habitat-encounter .encounter-copy p{max-width:330px}
/* Approved field-guide entries for kelp and mussels, shown in the habitat where both appear. */
.field-notes{position:absolute;z-index:3;display:grid;gap:18px}
.field-note{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.note-art{display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--sand);box-shadow:0 0 0 1px rgba(231,202,135,.5)}
.note-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.35);transform-origin:50% 85%}
.field-note .species-index{color:var(--gold);font-size:10px;letter-spacing:.18em;margin:2px 0 6px}
.field-note h4{margin:0 0 6px;font:400 22px/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.02em;color:var(--sand)}
.field-note p{margin:0;font-size:14px;line-height:1.5;color:#dce8e5;max-width:290px}
/* Stewardship now follows M09 directly: it rises out of deep water into the brochure cream. */
.respect{background:linear-gradient(var(--deep),var(--sand) 120px);padding-top:170px}
@media(min-width:901px){
  .habitat-encounter .encounter-copy{left:auto;right:6%;top:16%}
  /* Lighter than the species chapters, so the sunlit shallows stay luminous behind the copy panel. */
  .habitat-encounter .landscape-frame::after{background:linear-gradient(270deg,rgba(4,28,37,.9),rgba(4,28,37,.68) 26%,rgba(4,28,37,.06) 56%),linear-gradient(0deg,var(--deep),transparent 26%,transparent 92%,rgba(4,28,37,.55))}
  .habitat-encounter .encounter-figure figcaption{left:auto;right:6%;text-align:right}
  .habitat-encounter .play-scene{right:auto;left:6%}
  .kelp-encounter .field-notes{right:6%;bottom:76px;width:min(380px,34%)}
}
@media(min-width:901px) and (max-height:740px){
  .habitat-encounter .encounter-copy{top:8%}
  .habitat-encounter h3{font-size:2.8rem}
  .habitat-encounter .encounter-copy p{font-size:13px;margin-top:16px}
  .habitat-eyebrow{margin-bottom:12px}
  .kelp-encounter .field-notes{bottom:58px;gap:10px}
  .kelp-encounter .field-note{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .kelp-encounter .note-art{width:40px;height:40px}
  .field-note h4{font-size:18px;margin-bottom:3px}
  .field-note .species-index{margin-bottom:3px}
  .field-note p{font-size:13px}
}
@media(min-width:601px) and (max-width:900px){
  .kelp-encounter .landscape-frame>.poster,.kelp-encounter .landscape-frame>video{object-position:center 66%}
  .kelp-encounter .field-notes{left:0;right:0;bottom:56px;padding:24px 6% 0;grid-template-columns:1fr 1fr;gap:28px;background:linear-gradient(rgba(4,28,37,0),rgba(4,28,37,.62) 45%)}
}
@media(max-width:600px){
  .habitat-eyebrow{font-size:10px;margin-bottom:14px}
  .habitat-encounter h3{font-size:clamp(2.5rem,11.6vw,2.9rem)}
  .habitat-encounter .encounter-copy p{font-size:14px;margin-top:16px}
  .eelgrass-encounter .landscape-frame>.poster,.eelgrass-encounter .landscape-frame>video{object-position:25% center}
  .kelp-encounter .landscape-frame>.poster,.kelp-encounter .landscape-frame>video{object-position:20% center}
  /* M09 carries two field notes below its picture, so its stage is taller and pins by its lower edge. */
  .kelp-encounter .encounter-stage{height:calc(100svh - var(--nav-height) + 200px)}
  .kelp-encounter .landscape-frame{top:calc((100svh - var(--nav-height)) * .4);height:calc((100svh - var(--nav-height)) * .43)}
  .kelp-encounter .field-notes{left:6%;right:6%;top:calc((100svh - var(--nav-height)) * .85 + 8px);gap:16px}
  .kelp-encounter .field-note{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .kelp-encounter .note-art{width:44px;height:44px}
  .field-note h4{font-size:20px}
  .respect{padding-top:140px}
}

/* V3.3.1 — cinematic mobile polish. Phone hero: title, photograph and welcome copy
   share one vertical flow, so the photograph always fills the space between them
   and fades into the water colour at both ends instead of meeting a dark band. */
@media(max-width:600px){
  .shore-scene{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(26px,4svh,40px) 0 calc(60px + env(safe-area-inset-bottom,0px))}
  .shore-title,.shore-intro{position:relative;inset:auto;margin:0 6%;max-width:none;z-index:2}
  .shore-title{flex:none;order:-1}
  .shore-title .eyebrow{margin-bottom:16px}
  .shore-title h1{line-height:.98}
  .shore-title .subtitle{margin-top:16px}
  .shore-frame{position:relative;inset:auto;flex:1 1 0;min-height:200px;max-height:96vw;margin:-30px 0 -54px;z-index:0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 68%,transparent 100%)}
  .shore-frame>.poster,.shore-frame>video{object-position:46% 52%}
  .shore-intro{flex:none;order:1}
  .shore-intro .eyebrow{margin-bottom:10px}
  /* Light, text-only shading: the property itself is no longer darkened. */
  .shore-shade{background:linear-gradient(180deg,transparent 74%,rgba(4,28,37,.34) 100%)}
  /* Welcome Ashore, its sentence and Explore the reef read as one sequence. */
  .voyage-footer{flex-direction:row-reverse;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}

/* Resting frames on touch screens. journey.js gives each pinned chapter a longer
   hold on phones and tablets; these rules make each held frame a complete composition. */
@media(max-width:600px){
  /* Reef Ball fits one phone screen, so its title, Reef Ball and tabs hold together. */
  .discovery-stage{height:max(calc(100svh - var(--nav-height)),690px)}
  .discovery-copy{top:26px}
  .discovery-copy .eyebrow{margin-bottom:16px}
  .discovery-copy h2{font-size:3.3rem}
  .discovery-copy>p:last-child{margin-top:16px}
  .reef-ball-frame{inset:262px 0 auto}
  .habitat-explorer{bottom:88px}
  .discovery-credit{bottom:26px}
  /* Kelp forest: one canvas taller than the screen. The forest is held first; the
     notes then rise into view (journey.js moves --reveal), and are held in turn. */
  .kelp-encounter .encounter-stage{height:calc(100svh - var(--nav-height));--reveal:0px;--reveal-p:0}
  html:not(.scroll-story) .kelp-encounter .encounter-stage{height:calc(100svh - var(--nav-height) + (100svh - var(--nav-height)) * .38 - 24px)}
  .kelp-encounter .encounter-figure{bottom:auto;height:calc(100% + (100svh - var(--nav-height)) * .38 - 24px)}
  html:not(.scroll-story) .kelp-encounter .encounter-figure{height:100%}
  .kelp-encounter .landscape-frame{top:calc((100svh - var(--nav-height)) * .38);height:calc((100svh - var(--nav-height)) * .5)}
  .kelp-encounter .encounter-figure figcaption{top:calc((100svh - var(--nav-height)) * .88 + 10px);bottom:auto}
  .kelp-encounter .field-notes{top:calc((100svh - var(--nav-height)) * .88 + 70px)}
  .scroll-story .kelp-encounter .encounter-figure,.scroll-story .kelp-encounter .field-notes{transform:translate3d(0,calc(var(--reveal) * -1),0)}
  .scroll-story .kelp-encounter .encounter-copy{transform:translate3d(0,calc(var(--reveal) * -1),0);opacity:calc(clamp(0,(var(--arrive,1) - .42) * 3.4,1) * clamp(0,1 - var(--reveal-p) * 1.8,1))}
  /* Stewardship fills the screen as one composition when it settles. */
  .respect{min-height:calc(100svh - var(--nav-height));display:flex;flex-direction:column;justify-content:center;padding-bottom:64px}
}
/* "What You May Spot" becomes a full-screen title card on touch layouts, so it is a
   resting frame of its own rather than always sharing the screen with the seal. */
@media(max-width:900px){
  .scroll-story .field-intro{min-height:calc(100svh - var(--nav-height));display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;padding-block:48px}
  .scroll-story .field-intro>p{margin-top:24px}
}
/* An arriving chapter's words fade in as it slides up (journey.js sets --arrive on touch layouts). */
@media(max-width:900px){
  .scroll-story .encounter-copy,.scroll-story .discovery-copy{opacity:clamp(0,(var(--arrive,1) - .42) * 3.4,1)}
}