@font-face{font-family:Barlow Condensed;src:url('assets/BarlowCondensed-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
:root{color-scheme:dark;--ivory:#f5f5eb;--muted:rgba(245,245,235,.72);--line:rgba(245,245,235,.34);font-family:Arial,Helvetica,sans-serif;color:var(--ivory);background:#174d62}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #fff;outline-offset:7px}button:disabled{cursor:wait}button,span,a{-webkit-user-select:none;user-select:none}.experience{position:relative;isolation:isolate;height:100svh;min-height:360px;overflow:hidden}.sea-fallback,#ocean,.atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.sea-fallback{z-index:-4;background:linear-gradient(#7fabbc 0%,#c3d3d1 36%,#b1c7cb 39%,#397b8d 40%,#164f66 66%,#123b50 100%)}#ocean{z-index:-3;display:block;opacity:0;transition:opacity 1.3s ease}.scene-ready #ocean{opacity:1}.atmosphere{z-index:-2;background:linear-gradient(180deg,rgba(0,28,47,.13) 0%,transparent 29%,transparent 48%,rgba(1,30,45,.12) 65%,rgba(1,19,31,.48) 100%)}.masthead{position:absolute;top:max(30px,env(safe-area-inset-top));left:3.6%;right:3.6%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:22px;text-shadow:0 1px 15px #132f4b44}.wordmark{font-size:23px;font-weight:700;letter-spacing:.075em}.brand-dot{font-size:9px;vertical-align:top;padding-left:2px}.brand-caption{font:9px 'Courier New',monospace;letter-spacing:.22em;opacity:.72;border-left:1px solid var(--line);padding-left:22px}.sound-button{display:flex;gap:13px;align-items:center;border:1px solid var(--line);border-radius:99px;padding:14px 19px;background:#173c4b12;backdrop-filter:blur(8px);font:10px 'Courier New',monospace;letter-spacing:.12em;transition:background .25s,border-color .25s;min-height:44px}.sound-button:hover{background:#ffffff15;border-color:#ffffff80}.sound-icon{height:15px;display:flex;gap:3px;align-items:center}.sound-icon i{display:block;width:1px;background:currentColor;height:4px}.sound-icon i:nth-child(2),.sound-icon i:nth-child(4){height:9px}.sound-icon i:nth-child(3){height:14px}.sound-button[aria-pressed=true] .sound-icon i{animation:soundbar 1.1s ease-in-out infinite alternate}.sound-button[aria-pressed=true] .sound-icon i:nth-child(2){animation-delay:-.3s}.sound-button[aria-pressed=true] .sound-icon i:nth-child(3){animation-delay:-.7s}.sound-button[aria-pressed=true] .sound-icon i:nth-child(4){animation-delay:-.4s}.sound-button[aria-pressed=true] .sound-icon i:nth-child(5){animation-delay:-.9s}.title-group{position:absolute;top:51%;left:3.5%;right:3.5%;transform:translateY(-20%);text-align:center;text-shadow:0 3px 32px #001b2c25}.eyebrow{display:flex;align-items:center;justify-content:center;gap:17px;font:10px 'Courier New',monospace;letter-spacing:.24em;color:var(--muted);margin:0 0 15px}.eyebrow .eyebrow-rule{height:1px;width:30px;background:var(--line)}h1{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:500;font-size:clamp(66px,15.6vw,265px);letter-spacing:-.025em;line-height:.86;margin:0;white-space:nowrap}.subtitle{margin:28px 0 0;font-size:clamp(14px,1.25vw,21px);font-weight:400;letter-spacing:.035em;line-height:1.5}.horizon-marker{position:absolute;top:39%;display:flex;gap:13px;align-items:center;opacity:.65}.horizon-marker b{font:9px 'Courier New',monospace}.horizon-marker span{display:block;width:30px;height:1px;background:var(--line)}.marker-left{left:3.6%}.marker-right{right:3.6%}.surface-footer{position:absolute;left:3.6%;right:3.6%;bottom:max(30px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;gap:20px;font:9px 'Courier New',monospace;letter-spacing:.1em;color:var(--muted)}.location{display:flex;gap:11px;align-items:start;line-height:1.5}.position-dot{display:block;flex:0 0 auto;width:5px;height:5px;background:#e1eadc;border-radius:50%;margin-top:4px;box-shadow:0 0 0 4px #e1eadc12}.location-detail{display:block;opacity:.6;letter-spacing:.15em;font-size:8px;margin-top:6px}.look-hint{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:11px;align-items:center;white-space:nowrap;bottom:3px;font-size:8px;opacity:.65}.look-hint svg{stroke:currentColor;fill:none;stroke-width:.8}.motion-button{display:flex;gap:10px;align-items:center;border:0;background:none;font:9px 'Courier New',monospace;letter-spacing:.1em;color:var(--muted);padding:12px 0 12px 12px;margin-bottom:-12px;min-height:44px}.motion-button:hover{color:white}.motion-icon{width:9px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}.motion-button[aria-pressed=true] .motion-icon{height:0;border:5px solid transparent;border-left:8px solid currentColor;border-right:0;width:8px}.status{position:absolute;bottom:90px;left:20%;right:20%;margin:0;text-align:center;font-size:12px;color:var(--ivory)}.fallback-message{position:absolute;bottom:20%;width:100%;text-align:center;font-size:13px}.scene-ready .title-group{animation:title-in 1.5s .15s both}.scene-ready .masthead,.scene-ready .surface-footer{animation:fade-in 1.6s both}@keyframes title-in{from{opacity:0;filter:blur(5px);translate:0 12px}to{opacity:1;filter:blur(0);translate:0 0}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes soundbar{to{transform:scaleY(.35)}}
@media(max-width:700px){.masthead{left:6%;right:6%;top:max(24px,env(safe-area-inset-top))}.wordmark{font-size:19px}.brand{gap:0}.brand-caption{display:none}.sound-button{font-size:8px;gap:9px;padding:12px 13px}.title-group{top:52%;left:4%;right:4%;transform:translateY(-30%)}h1{font-size:16.2vw;letter-spacing:-.035em}.eyebrow{font-size:8px;letter-spacing:.17em;gap:10px;margin-bottom:20px}.eyebrow .eyebrow-rule{width:15px}.subtitle{max-width:270px;margin:23px auto 0;font-size:14px;line-height:1.7;letter-spacing:.02em;text-wrap:balance}.surface-footer{left:6%;right:6%;bottom:max(25px,env(safe-area-inset-bottom));font-size:8px}.look-hint{display:none}.location-detail{font-size:7px}.motion-button{font-size:8px}.marker-left{left:6%}.marker-right{right:6%}.horizon-marker span{width:15px}.status{left:10%;right:10%;font-size:11px}}
@media(max-height:500px) and (min-width:701px){.masthead{top:18px}.surface-footer{bottom:20px}.title-group{top:49%}h1{font-size:19vh}.subtitle{margin-top:17px}.eyebrow{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.look-hint{display:none}}

/* Revision 02: white typography, stronger local contrast, a single progressive entrance. */
.atmosphere{background:linear-gradient(180deg,rgba(0,28,47,.23) 0%,transparent 27%,transparent 42%,rgba(1,24,39,.16) 54%,rgba(1,19,31,.48) 100%)}
.brand{text-shadow:0 1px 3px #04233560,0 2px 14px #04233545}
.brand-caption{opacity:.92;font-size:10px}
.sound-button{background:#092b403b;border-color:#ffffff66;font-size:11px;text-shadow:0 1px 4px #0b293d88}
.title-group{isolation:isolate}
.title-group::before{content:'';position:absolute;z-index:-1;inset:-38px 2% -44px;background:radial-gradient(ellipse at center,rgba(2,28,44,.20),transparent 65%);mask-image:radial-gradient(ellipse closest-side,#000 20%,transparent 100%);pointer-events:none}
.scene-ready .title-group{animation:none}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;color:#fff;margin-bottom:20px;text-shadow:0 1px 3px #001a2c,0 0 12px #001a2ccc,0 0 25px #001a2c66}
.eyebrow-text{display:inline-block;white-space:pre}
.eyebrow .eyebrow-rule{background:#ffffffaa;box-shadow:0 1px 5px #001b2c99}
.reveal-letter{display:inline-block;white-space:pre;vertical-align:baseline}
h1{text-shadow:0 2px 18px #001c2c38}
.scene-ready h1 .reveal-letter{animation:letter-arrive 1.15s cubic-bezier(.2,.7,.15,1) both;animation-delay:calc(.55s + var(--letter-index)*.055s)}
.scene-ready .eyebrow .reveal-letter{animation:console-letter .25s ease both;animation-delay:calc(.15s + var(--letter-index)*.025s)}
.subtitle{color:#fff;text-shadow:0 1px 3px #001a2caa,0 2px 18px #001a2c70}
.subtitle span{display:inline-block;white-space:nowrap}
.scene-ready .subtitle span{animation:phrase-arrive .95s ease both;animation-delay:1.6s}
.scene-ready .subtitle span:nth-child(2){animation-delay:1.95s}
.scene-ready .subtitle span:nth-child(3){animation-delay:2.3s}
.surface-footer{color:rgba(255,255,248,.88);text-shadow:0 1px 4px #001a2caa}
.location-detail{opacity:.85}.look-hint{opacity:.85}
@keyframes letter-arrive{from{opacity:0;transform:translateY(.12em);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes console-letter{from{opacity:0}to{opacity:1}}
@keyframes phrase-arrive{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:700px){.eyebrow{font-size:9px;letter-spacing:.14em;margin-bottom:20px}.sound-button{font-size:9px}.subtitle{max-width:320px;font-size:14px;line-height:1.8}.title-group::before{inset:-32px -4% -45px}.look-hint{display:none}}
@media(prefers-reduced-motion:reduce){.scene-ready .reveal-letter,.scene-ready .subtitle span{animation:none!important;opacity:1;transform:none;filter:none}}

/* The dive is a distinct, intentional action: a luminous olive-leaf control. */
.horizon-marker{top:39.8%}
#fish-layer{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}.atmosphere{z-index:-1}
.title-group{top:42%;transition:opacity .65s,filter .7s,translate .7s}
.dive-action{position:absolute;top:74%;left:50%;transform:translate(-50%,-5%);display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .45s,translate .6s;z-index:2}
.dive-button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;min-width:244px;min-height:68px;padding:13px 14px 13px 27px;border:1px solid #e8f6c5;border-radius:44px 12px 44px 44px;background:linear-gradient(120deg,#dceca8,#bddb8c);color:#123d37;box-shadow:0 7px 32px #002a354d,inset 0 1px 1px #fff9;isolation:isolate;transition:transform .25s,box-shadow .25s,filter .25s}
.dive-button::before{content:'';position:absolute;inset:-6px;border:1px solid #d8eca57a;border-radius:49px 17px 49px 49px;pointer-events:none;animation:dive-pulse 3s 2.8s ease-out infinite}
.dive-button:hover{transform:translateY(-3px);box-shadow:0 10px 40px #002a3577,inset 0 1px 1px #fff9;filter:brightness(1.07)}
.dive-button:active{transform:translateY(0)}.dive-button:disabled{filter:saturate(.6);cursor:wait}.dive-button:disabled::before{animation:none}
.dive-copy{display:flex;flex-direction:column;align-items:start;gap:4px}.dive-caption{font:8px 'Courier New',monospace;letter-spacing:.09em;opacity:.85}#dive-label{font:500 25px 'Barlow Condensed',sans-serif;line-height:1;letter-spacing:.085em}
.dive-symbol{display:grid;place-items:center;width:40px;height:40px;border:1px solid #1d4b3840;border-radius:50%;background:#f2fbd733}.dive-symbol svg{width:27px;height:27px;stroke:currentColor;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}.dive-status{font:9px 'Courier New',monospace;letter-spacing:.06em;white-space:nowrap;text-shadow:0 1px 5px #003c4a}
@keyframes dive-pulse{0%{opacity:.7;transform:scale(1)}65%,100%{opacity:0;transform:scale(1.14,1.35)}}
.underwater-copy{position:absolute;top:22%;left:7%;opacity:0;transform:translateY(12px);pointer-events:none;text-shadow:0 2px 14px #00343f66;transition:opacity 1.7s .2s,transform 1.7s .2s}.underwater-copy p{font:9px 'Courier New',monospace;letter-spacing:.15em;margin:0 0 13px}.underwater-copy h2{font:500 clamp(34px,4.2vw,68px) 'Barlow Condensed',sans-serif;margin:0;letter-spacing:.01em}
.return-button{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:12px 22px 12px 15px;border:1px solid #e5f0b57a;border-radius:35px 10px 35px 35px;background:#d6e9a8ed;color:#163f3b;font:10px 'Courier New',monospace;letter-spacing:.05em;box-shadow:0 5px 25px #00364244;white-space:nowrap;transition:background .2s}.return-button[hidden]{display:none}.return-button span{font-size:23px}.return-button:hover{background:#edf8d4}
body[data-state=diving] .title-group,body[data-state=returning] .title-group,body[data-state=underwater] .title-group{opacity:0;filter:blur(5px);translate:0 -20px;pointer-events:none}
body[data-state=diving] .dive-action,body[data-state=returning] .dive-action,body[data-state=underwater] .dive-action{opacity:0;translate:0 16px;pointer-events:none}
body[data-state=diving] .horizon-marker,body[data-state=returning] .horizon-marker,body[data-state=underwater] .horizon-marker{opacity:0}
body[data-state=underwater] .underwater-copy{opacity:1;transform:translateY(0)}
body[data-state=diving] .masthead,body[data-state=returning] .masthead,body[data-state=diving] .surface-footer,body[data-state=returning] .surface-footer{opacity:.35!important;transition:opacity .5s}
body[data-state=underwater] .atmosphere{background:linear-gradient(180deg,#00374545,transparent 30%,transparent 65%,#002b4055)}
.motion-button:disabled{opacity:.5}.status{z-index:5;bottom:175px}
@media(max-width:700px){.title-group{top:42%}.dive-action{top:68%;gap:14px}.dive-button{min-height:68px;min-width:236px}#dive-label{font-size:25px}.underwater-copy{top:22%;left:7%}.underwater-copy p{max-width:190px;line-height:1.7;font-size:8px}.return-button{bottom:110px;font-size:9px}.surface-footer{gap:12px}.motion-button{font-size:7px}}
@media(max-height:550px) and (min-width:701px){.title-group{top:39%}.dive-action{top:72%;gap:8px}.dive-button{min-height:56px;padding:9px 12px 9px 23px}#dive-label{font-size:23px}.dive-status{font-size:8px}.dive-caption{font-size:7px}.surface-footer{bottom:18px}.underwater-copy{top:24%}.return-button{bottom:75px}}
@media(max-height:440px){.title-group{top:32%}.eyebrow{display:none}.subtitle{margin-top:12px}.dive-action{top:62%}.dive-status{display:none}.dive-button{min-height:52px}.underwater-copy{top:25%}.underwater-copy h2{font-size:32px}.underwater-copy p{margin-bottom:6px}.return-button{bottom:62px}}
@media(prefers-reduced-motion:reduce){.dive-button::before{animation:none!important;opacity:.65}.title-group,.dive-action,.underwater-copy{transition:opacity .3s!important;filter:none!important;translate:none!important;transform:none}.dive-action{transform:translateX(-50%)}.underwater-copy{transform:none}}

/* v05: one flowing composition keeps subtitle and action apart at every size. */
.experience{touch-action:pinch-zoom}
.surface-intro{position:absolute;inset:24% 3.5% max(86px,11%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.4vh,28px);pointer-events:none}
.surface-intro .title-group{position:relative;inset:auto;width:100%;transform:none;flex:none}
.surface-intro h1{font-size:min(15.6vw,25svh,265px)}
.surface-intro .dive-action{position:relative;inset:auto;transform:none;flex:none;gap:0;pointer-events:auto}
.dive-button{display:block;position:relative;width:310px;height:145px;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;color:#e2efb6;box-shadow:none;filter:drop-shadow(0 2px 3px #063e46aa);isolation:auto;animation:mask-breathe 3.6s ease-in-out infinite}
.dive-button::before{display:none}
.dive-mask{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:5.5;stroke-linejoin:round;stroke-linecap:round}
.mask-strap{stroke-width:3.5}.mask-snorkel{stroke-width:6}.mask-bubble{stroke-width:2}
.dive-button #dive-label{position:absolute;left:9%;right:26%;top:54%;transform:translateY(-50%);font:500 27px 'Barlow Condensed',sans-serif;letter-spacing:.075em;line-height:1;text-align:center;color:inherit;text-shadow:0 1px 3px #053740}
.dive-button:hover{background:none;color:#f4ffdb;transform:translateY(-3px);box-shadow:none;filter:drop-shadow(0 0 10px #ddebaf77)}
.dive-button:active{transform:scale(.98)}.dive-button:disabled{animation:none;opacity:.62;filter:drop-shadow(0 2px 3px #063e46aa)}
.dive-button:focus-visible{outline:2px solid #f4ffdc;outline-offset:5px;border-radius:24px}
.dive-status{margin-top:-4px;font-size:9px}
.mask-bubble{animation:mask-bubbles 3.6s infinite ease-out}.bubble-two{animation-delay:.6s}
@keyframes mask-breathe{0%,100%{opacity:1;filter:drop-shadow(0 2px 3px #063e46aa)}50%{opacity:.8;filter:drop-shadow(0 0 12px #e2efb677)}}
@keyframes mask-bubbles{0%,15%{opacity:0;translate:0 5px}45%{opacity:.9}85%,100%{opacity:0;translate:0 -9px}}
.touch-hint{display:none;position:absolute;left:5%;right:5%;bottom:70px;text-align:center;font:8px 'Courier New',monospace;letter-spacing:.06em;color:#ffffffc9;text-shadow:0 1px 5px #003846;pointer-events:none;opacity:0;margin:0;transition:opacity .6s}
body[data-state=underwater] .touch-hint{opacity:1}
body[data-state=diving] .surface-intro,body[data-state=returning] .surface-intro,body[data-state=underwater] .surface-intro{pointer-events:none}
@media(max-width:700px){.surface-intro{inset:27% 4% max(90px,12%);gap:18px;justify-content:center}.surface-intro h1{font-size:16.2vw}.surface-intro .subtitle{margin:22px auto 0}.dive-button{width:284px;height:133px}.dive-button #dive-label{font-size:25px}.dive-status{font-size:8px}.touch-hint{display:block}.surface-intro .eyebrow{margin-bottom:18px}}
@media(pointer:coarse){.touch-hint{display:block}.look-hint{display:none}}
@media(max-height:560px) and (min-width:701px){.surface-intro{inset:22% 4% 74px;gap:8px}.surface-intro h1{font-size:min(15vw,23svh)}.surface-intro .subtitle{margin-top:18px}.dive-button{width:250px;height:117px}.dive-button #dive-label{font-size:23px}.surface-intro .eyebrow{margin-bottom:14px}.dive-status{font-size:8px}}
@media(max-height:440px){.surface-intro{inset:20% 4% 55px;gap:2px}.surface-intro h1{font-size:min(15vw,24svh)}.surface-intro .subtitle{margin-top:10px;font-size:12px}.dive-button{width:215px;height:100px}.dive-button #dive-label{font-size:21px}.dive-status{display:none}.touch-hint{bottom:48px;font-size:7px}.return-button{bottom:72px}}
@media(prefers-reduced-motion:reduce){.dive-button,.mask-bubble{animation:none!important}.mask-bubble{opacity:.7}.surface-intro .title-group,.surface-intro .dive-action{transform:none}.touch-hint{display:none}}

/* v06: a lighter, lower mobile action; desktop keeps the approved composition. */
@media(max-width:700px) and (min-height:441px){
  .surface-intro{gap:clamp(34px,6svh,54px);padding-top:24px}
  .surface-intro .dive-action{align-items:center;align-self:center}
  .dive-button{width:224px;height:105px}
  .dive-button #dive-label{font-size:21px;letter-spacing:.065em}
  .dive-status{font-size:8px;margin-top:0}
}

/* v08: a clear invitation, then the first narrated stop. */
[hidden]{display:none!important}
#journey-layer{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0}
.atmosphere{z-index:0;pointer-events:none}.masthead,.surface-footer{z-index:4}
body:not([data-state=surface]):not([data-state=preparing]) .surface-intro{opacity:0;pointer-events:none}
body:not([data-state=surface]):not([data-state=preparing]) .horizon-marker{opacity:0}
.underwater-copy{top:15.5%;left:5%;right:5%;text-align:center;transform:translateY(12px);text-shadow:0 2px 20px #00313f80;z-index:1}
.underwater-copy .journey-kicker{font:9px 'Courier New',monospace;letter-spacing:.22em;margin:0 auto 13px;max-width:none;color:#e3f6f0}
.underwater-copy h2{font:500 clamp(46px,6vw,88px)/.99 'Barlow Condensed',sans-serif;letter-spacing:-.012em;margin:0 auto;max-width:1050px;text-wrap:balance}
.outline-heading{display:block;font-size:.55em;text-transform:uppercase;letter-spacing:.045em;color:#e5f7f5;margin-bottom:8px;-webkit-text-stroke:1px #e5f7f5}
@supports(-webkit-text-stroke:1px white){.outline-heading{color:transparent}}
.sea-heading{display:block;color:#e8fbf7}
.underwater-copy .journey-description{font:400 13px/1.7 Arial,sans-serif;letter-spacing:.015em;max-width:440px;margin:20px auto 0;color:#f0f7ef}
.journey-start{position:absolute;bottom:137px;left:50%;transform:translateX(-50%);z-index:3;border:0;padding:8px 4px 12px;background:none;text-align:left;color:#e2efb6;text-shadow:0 2px 12px #063844;white-space:nowrap;min-height:60px}
.start-prefix{display:block;font:8px 'Courier New',monospace;letter-spacing:.2em;margin-bottom:9px;color:#f3f8e5;opacity:.95}
.start-title{display:flex;align-items:center;gap:25px;font:500 31px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.025em}
.start-arrow{font:28px Arial,sans-serif;transition:transform .3s}.start-rule{display:block;height:1px;background:#e2efb688;margin-top:11px;transform-origin:left;animation:journey-invite 3.4s ease-in-out infinite}
.journey-start:hover .start-arrow{transform:translate(3px,-3px)}.journey-start:hover .start-rule{background:#f0ffd1}.journey-start:disabled{opacity:.5;cursor:wait}
@keyframes journey-invite{0%,100%{transform:scaleX(.68);opacity:.55}50%{transform:scaleX(1);opacity:1}}
.return-button{bottom:78px;left:50%;transform:translateX(-50%);min-height:44px;gap:7px;border:0;border-radius:0;padding:10px 13px;background:none!important;box-shadow:none;color:#eaf7eecc;font:9px 'Courier New',monospace;letter-spacing:.1em;text-shadow:0 1px 8px #00394a}.return-button span{font-size:14px}.return-button:hover{color:white;text-decoration:underline;text-underline-offset:5px}
.touch-hint{bottom:63px;font-size:7px;left:auto;right:5%;width:auto;opacity:0!important}
.journey-progress{position:absolute;top:50%;left:10%;right:10%;z-index:3;text-align:center;font:11px 'Courier New',monospace;letter-spacing:.15em;text-shadow:0 2px 16px #002b3e}
.chapter{position:absolute;top:22%;left:8%;width:min(460px,42%);z-index:2;text-shadow:0 2px 25px #002a35b0;animation:chapter-arrive 1.2s both}
.chapter-kicker{display:flex;align-items:center;gap:12px;font:9px 'Courier New',monospace;letter-spacing:.13em;color:#d7eee8;margin:0 0 19px}.chapter-kicker span{font-size:12px;color:#e2efb6}.chapter-kicker i{display:block;width:24px;height:1px;background:#e2efb688}
.chapter h2{font:500 clamp(55px,5.9vw,86px)/.98 'Barlow Condensed',sans-serif;letter-spacing:-.01em;margin:0 0 22px;color:#f0f8ef;outline-offset:12px}
.chapter-lead{font:400 17px/1.5 Arial,sans-serif;letter-spacing:.01em;margin:0 0 13px;color:#f4f5e6}
.chapter-body{font:400 13px/1.85 Arial,sans-serif;max-width:355px;color:#e2f0e8;margin:0 0 20px}
.narration-replay{display:inline-flex;align-items:center;gap:10px;border:1px solid #e2efb65c;border-radius:40px;background:#00364538;min-height:44px;padding:10px 15px;font:9px 'Courier New',monospace;letter-spacing:.08em;color:#e2efb6}.narration-replay span{font:20px Arial}.narration-replay:hover{background:#e2efb61c}.narration-replay:disabled{opacity:.65}
.chapter-source{display:block;width:fit-content;color:#d7eee8;font:10px/1.5 Arial,sans-serif;margin-top:15px;text-decoration-color:#d7eee85c;text-underline-offset:4px;padding:7px 0}
.journey-back{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:3;border:0;background:none;color:#e2efb6;min-height:44px;padding:10px 15px;font:500 18px 'Barlow Condensed',sans-serif;letter-spacing:.03em;white-space:nowrap;text-shadow:0 1px 12px #002e3d}.journey-back span{margin-right:12px}.journey-back:hover{text-decoration:underline;text-underline-offset:6px}
body[data-state=chapter] .return-button{bottom:65px}
body[data-state=chapter] .look-hint{display:none}
body[data-state=chapter] .atmosphere{background:linear-gradient(90deg,#002a3d99 0%,#002a3d33 44%,transparent 78%),linear-gradient(0deg,#00283b70,transparent 27%)}
body[data-state=journey-entering] .atmosphere,body[data-state=journey-returning] .atmosphere{background:transparent}
body[data-state=journey-entering] .underwater-copy,body[data-state=journey-returning] .underwater-copy,body[data-state=chapter] .underwater-copy{opacity:0;transition:opacity .35s;pointer-events:none}
body[data-state=journey-entering] .masthead,body[data-state=journey-returning] .masthead,body[data-state=journey-entering] .surface-footer,body[data-state=journey-returning] .surface-footer{opacity:.5!important}
@keyframes chapter-arrive{from{opacity:0;translate:0 15px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:none}}
@media(max-width:700px){
  .underwater-copy{top:16%;left:7%;right:7%}.underwater-copy h2{font-size:clamp(39px,12.6vw,54px);max-width:390px}.outline-heading{font-size:.53em;letter-spacing:.055em;margin-bottom:8px}
  .underwater-copy .journey-kicker{font-size:7px;letter-spacing:.13em;margin-bottom:12px}.underwater-copy .journey-description{font-size:11px;line-height:1.65;margin-top:16px;max-width:300px}
  .journey-start{bottom:127px}.start-title{font-size:28px}.start-prefix{font-size:7px}.return-button{bottom:72px;font-size:8px}.touch-hint{display:none}
  .chapter{top:18%;left:8%;width:84%}.chapter-kicker{font-size:8px;gap:8px;margin-bottom:16px}.chapter h2{font-size:clamp(44px,13vw,62px);margin-bottom:19px}.chapter-lead{font-size:14px;margin-bottom:10px}.chapter-body{font-size:12px;line-height:1.75;max-width:310px;margin-bottom:16px}
  .chapter-source{font-size:10px;margin-top:8px}.narration-replay{font-size:8px}.journey-back{bottom:111px;font-size:16px}body[data-state=chapter] .return-button{bottom:67px}
  body[data-state=chapter] .atmosphere{background:linear-gradient(180deg,#002c3960,#002f4266 42%,transparent 78%,#00293c77)}
}
@media(max-height:700px) and (max-width:700px){.underwater-copy{top:15%}.underwater-copy h2{font-size:clamp(36px,11.3vw,46px)}.underwater-copy .journey-description{margin-top:12px}.journey-start{bottom:117px}.return-button{bottom:66px}.chapter{top:15%}.chapter h2{font-size:43px;margin-bottom:14px}.chapter-kicker{margin-bottom:12px}.chapter-lead{font-size:13px}.chapter-body{font-size:11px;line-height:1.65;margin-bottom:10px}.chapter-source{margin-top:3px}.journey-back{bottom:98px}body[data-state=chapter] .return-button{bottom:59px}}
@media(max-height:480px) and (min-width:701px){.underwater-copy{top:21%;text-align:left;left:7%;right:48%}.underwater-copy h2{font-size:41px}.underwater-copy .journey-kicker{font-size:7px}.underwater-copy .journey-description{font-size:11px;margin-top:12px}.journey-start{left:75%;bottom:104px}.return-button{left:75%;bottom:56px}.chapter{top:22%;width:74%;display:grid;grid-template-columns:1fr 1fr;column-gap:25px;left:7%}.chapter-kicker{grid-column:1/-1;margin-bottom:12px}.chapter h2{grid-column:1;grid-row:2/5;font-size:48px}.chapter-lead,.chapter-body{grid-column:2;font-size:11px}.chapter-body{margin:0}.narration-replay{grid-column:2;width:fit-content;min-height:36px}.chapter-source{grid-column:2;margin:0}.journey-back{left:auto;right:4%;bottom:68px;transform:none;font-size:15px}body[data-state=chapter] .return-button{left:auto;right:4%;bottom:27px;transform:none}.surface-footer .location{font-size:7px}.chapter h2 br{display:block}}
@media(prefers-reduced-motion:reduce){.start-rule,.chapter{animation:none}.start-arrow{transition:none}}

/* v08 loading: reveal one complete scene, then fetch the later journey. */
body:not(.scene-ready) .experience{visibility:hidden}
.preloader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;background:radial-gradient(ellipse at 50% 30%,#146d7a 0%,#064253 47%,#022b3b 100%);color:#eff7ed;transition:opacity .65s ease,visibility .65s}
.scene-ready .preloader{opacity:0;visibility:hidden;pointer-events:none}
.loader-brand{position:absolute;top:max(36px,env(safe-area-inset-top));font:700 20px Arial,sans-serif;letter-spacing:.1em}
.loader-brand span{display:block;margin-top:9px;font:8px 'Courier New',monospace;letter-spacing:.3em;opacity:.7}
.loader-sea{position:relative;width:72px;height:42px;margin-bottom:27px;overflow:hidden}
.loader-sea span{position:absolute;left:-12px;width:96px;height:22px;border-top:1px solid #d6edc7;border-radius:50%;animation:loader-swell 2.5s ease-in-out infinite alternate;opacity:.8}
.loader-sea span:nth-child(2){top:12px;animation-delay:-.8s;opacity:.55}.loader-sea span:nth-child(3){top:24px;animation-delay:-1.6s;opacity:.3}
.loader-title{font:500 clamp(35px,7vw,52px)/1.1 'Barlow Condensed','Arial Narrow',sans-serif;margin:0 0 17px;letter-spacing:.015em}
.loading-detail{font:10px/1.8 'Courier New',monospace;letter-spacing:.055em;max-width:300px;min-height:36px;margin:0;color:#d0e6e3}
.loader-track{width:135px;height:1px;background:#e2efb62e;margin-top:22px;overflow:hidden}.loader-track span{display:block;height:100%;width:0;background:#e2efb6;transition:width .4s ease}
.loading-retry{margin-top:24px;border:1px solid #e2efb66b;background:transparent;border-radius:30px;padding:12px 19px;min-height:44px;font-size:12px;color:#e2efb6}
.load-failed .loader-sea span{animation:none}
@keyframes loader-swell{from{transform:translateX(-7px) rotate(-4deg)}to{transform:translateX(7px) rotate(4deg)}}

/* v09: native scroll drives the 3D camera; controls stay fixed and readable. */
body[data-state=chapter] .experience{touch-action:pinch-zoom}
.route-scroll{position:absolute;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y pinch-zoom;outline:none}
.route-scroll::-webkit-scrollbar{display:none}.route-distance{height:930svh;min-height:4700px;pointer-events:none}
.route-scroll:focus-visible{outline:1px solid #e2efb640;outline-offset:-8px}
body[data-state=chapter] .chapter{pointer-events:none;opacity:var(--route-opacity,1);animation:none;transition:opacity .12s linear}
.chapter a,.chapter button{pointer-events:auto}.chapter[inert] a,.chapter[inert] button{pointer-events:none}
body[data-state=chapter] .chapter h2{animation:chapter-title-arrive 1.15s both}
body[data-state=chapter] .chapter-kicker{font-size:8px;letter-spacing:.09em}
body[data-state=chapter] .chapter{top:23%}
body[data-state=chapter] .atmosphere{background:linear-gradient(90deg,#002b3c45,transparent 55%),linear-gradient(0deg,#001f2e80,transparent 28%);z-index:0}
.route-caption{position:absolute;top:31%;left:8%;width:min(410px,40%);z-index:2;pointer-events:none;opacity:var(--route-opacity,0);color:#f0f8ef;text-shadow:0 2px 28px #001a2aaa}
.route-caption h2{font:500 clamp(45px,5vw,75px)/1.04 'Barlow Condensed',sans-serif;margin:0 0 20px;letter-spacing:-.01em}
.route-caption>p:last-of-type{font:14px/1.75 Arial,sans-serif;max-width:320px;color:#e1f1e9}
.route-blue{top:31%;left:15%;width:70%;text-align:center}.route-blue>p:last-of-type{margin:20px auto}.route-blue .chapter-kicker{justify-content:center}
.route-restart{pointer-events:auto;border:0;background:transparent;padding:14px 6px;font:12px Arial,sans-serif;min-height:44px;color:#e2efb6;text-decoration:underline;text-underline-offset:6px}.route-blue[inert] .route-restart{pointer-events:none}
.route-controls{position:absolute;z-index:4;bottom:88px;left:50%;width:250px;transform:translateX(-50%);text-shadow:0 1px 8px #002332;text-align:center}
#route-instruction{font:8px 'Courier New',monospace;letter-spacing:.13em;color:#e9f5e9;display:block;margin-bottom:13px}#route-instruction>span{font:14px Arial,sans-serif;margin-left:10px}
.route-meter{display:flex;align-items:center;gap:14px;font:8px 'Courier New',monospace;color:#e2efb6}
#route-position{appearance:none;-webkit-appearance:none;width:100%;height:20px;background:transparent;cursor:ew-resize;margin:0;padding:0;touch-action:auto}
#route-position::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,#e2efb6 var(--route-percent,0%),#d7ede84d var(--route-percent,0%))}
#route-position::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;margin-top:-4px;background:#e2efb6;border-radius:50%;box-shadow:0 0 0 5px #e2efb618}
#route-position::-moz-range-track{height:1px;background:#d7ede84d}#route-position::-moz-range-progress{height:1px;background:#e2efb6}#route-position::-moz-range-thumb{width:9px;height:9px;background:#e2efb6;border:0;border-radius:50%}
#route-position:focus-visible{outline:1px solid #e2efb6;outline-offset:7px}
body[data-state=chapter] .journey-back{left:3.6%;top:88px;bottom:auto;transform:none;font:11px Arial,sans-serif;padding:10px 0;min-height:36px}
body[data-state=chapter] .return-button{right:3.6%;left:auto;top:88px;bottom:auto;transform:none;font-size:9px;min-height:36px;padding:10px 0}
.journey-progress{top:auto;bottom:18%;font-size:9px;color:#d6eeed;opacity:.75}
@keyframes chapter-title-arrive{from{opacity:0;filter:blur(4px);translate:0 10px}to{opacity:1;filter:blur(0);translate:0 0}}
@media(max-width:700px){
 body[data-state=chapter] .chapter{top:22%;left:8%;width:84%}.chapter-kicker i{width:17px}
 body[data-state=chapter] .chapter-kicker{font-size:7px;letter-spacing:.07em;gap:7px}
 body[data-state=chapter] .journey-back{left:6%;top:78px;font-size:10px}body[data-state=chapter] .return-button{right:6%;top:78px;font-size:8px}
 .route-controls{bottom:79px;width:225px}#route-instruction{font-size:7px;margin-bottom:9px}
 .route-caption{left:8%;width:84%;top:31%}.route-caption h2{font-size:49px}.route-caption>p:last-of-type{font-size:12px;max-width:255px}.route-blue{left:10%;width:80%;text-align:center}
 .journey-progress{bottom:20%;font-size:8px}
}
@media(max-height:600px) and (max-width:700px){body[data-state=chapter] .chapter{top:22%}.chapter-body{max-width:280px}.chapter-source{font-size:9px}.route-controls{bottom:70px}.route-caption h2{font-size:43px}}
@media(max-height:480px) and (min-width:701px){
 body[data-state=chapter] .chapter{top:24%;width:72%;left:7%}body[data-state=chapter] .chapter h2{font-size:44px}
 body[data-state=chapter] .journey-back{top:auto;bottom:22px;left:35%;right:auto;font-size:9px}body[data-state=chapter] .return-button{top:auto;bottom:22px;right:30%;font-size:8px}
 .route-controls{left:auto;right:4%;transform:none;bottom:77px;width:185px}.route-caption{top:25%;left:7%;width:50%}.route-caption h2{font-size:43px}.route-blue{left:15%;width:70%}
}
@media(prefers-reduced-motion:reduce){body[data-state=chapter] .chapter h2{animation:none}}

/* Compact desktop panels need the same breathing room as a small tablet. */
@media(min-width:701px) and (max-width:1000px) and (min-height:481px) and (max-height:700px){
 body[data-state=chapter] .chapter{top:23%;width:52%}
 body[data-state=chapter] .chapter-kicker{margin-bottom:12px;font-size:7px}
 body[data-state=chapter] .chapter h2{font-size:46px;margin-bottom:14px}
 .chapter-lead{font-size:14px;margin-bottom:10px}
 .chapter-body{font-size:11px;line-height:1.65;max-width:325px;margin-bottom:12px}
 .narration-replay{min-height:40px;font-size:8px}
 .chapter-source{font-size:9px;margin-top:4px;padding:4px 0}
 .route-controls{left:auto;right:4%;transform:none;bottom:83px;width:190px}
 .route-caption h2{font-size:46px}
}

/* v10 · Living pauses, field notes and an encounter with Caretta caretta. */
body[data-route-held=true] .route-scroll{overflow-y:hidden}
body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:25%;left:7%;width:min(480px,43%);text-align:left}
body[data-state=chapter] .chapter h2,.route-caption h2{font-size:clamp(48px,5.7vw,80px);margin-bottom:18px;line-height:1}
.chapter-lead{font-size:16px;line-height:1.5;margin-bottom:12px}
.chapter-body,.route-caption>p:last-of-type{font:13px/1.8 Arial,sans-serif;max-width:340px;margin:0 0 19px;color:#ebf3ee}
.chapter-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;pointer-events:auto}
.chapter-actions button{pointer-events:auto}
.discover-link{display:inline-flex;align-items:center;gap:11px;min-height:44px;border:0;padding:0;background:transparent;color:#e2efb6;font:500 22px/1.2 'Barlow Condensed',sans-serif;text-align:left}
.discover-link>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #e2efb699;border-radius:50%;font:22px Arial,sans-serif;transition:transform .3s,background .3s}
.discover-link:hover>span{transform:rotate(90deg);background:#e2efb624}
.chapter-actions .narration-replay{border:0;background:transparent;min-height:44px;padding:8px 0;font-size:8px;color:#d9eae5}
.route-caption[inert] button{pointer-events:none}
.chapter h2:focus,.route-caption h2:focus{outline:none}
.route-turtle{background:none}.route-end{background:none}
.route-controls{bottom:78px;left:50%;right:auto;width:290px;transform:translateX(-50%)}
.route-continue{border:0;border-bottom:1px solid #e2efb680;background:none;display:flex;gap:20px;align-items:center;justify-content:center;margin:0 auto 14px;padding:7px 0 12px;min-height:48px;color:#edf9c5;font:500 24px 'Barlow Condensed',sans-serif;letter-spacing:.025em;text-shadow:0 2px 16px #002636}
.route-continue>span{font:24px Arial,sans-serif;animation:continue-breathe 2.7s ease-in-out infinite}
.route-continue:hover{color:#fff;border-color:#fff}.route-continue:focus-visible,.discover-link:focus-visible{outline:1px solid #e2efb6;outline-offset:7px}
.narration-status{min-height:12px;display:block;font:7px/1.6 'Courier New',monospace;letter-spacing:.1em;color:#d4e9e3;margin-bottom:5px}
.narration-status:empty{display:none}.is-speaking::before{content:'≋';display:inline-block;margin-right:8px;color:#e2efb6;font-size:12px;vertical-align:middle}
body[data-route-held=true] .route-meter{opacity:.45}
body[data-route-held=true] #route-instruction{font-size:7px}
.route-caption .chapter-kicker{justify-content:flex-start}
@keyframes continue-breathe{0%,100%{transform:translateY(-2px);opacity:.65}50%{transform:translateY(3px);opacity:1}}
.nature-dialog{color:#eff5e9;background:#063c49;border:1px solid #adc7b646;padding:0;width:min(1050px,91vw);max-width:none;max-height:89svh;overflow:auto;overscroll-behavior:contain;box-shadow:0 25px 120px #00191dd9;border-radius:3px;scrollbar-width:thin;scrollbar-color:#8ea49a #063c49}
.nature-dialog::backdrop{background:#001d2bc4;backdrop-filter:blur(7px)}
.nature-layout{display:grid;grid-template-columns:.95fr 1.05fr;min-height:580px}
.nature-visual{position:sticky;top:0;height:min(740px,89svh);min-height:580px;margin:0;background:#0a6370;overflow:hidden}
.nature-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#003340bb,transparent 30%);pointer-events:none}
.nature-visual img{width:100%;height:100%;object-fit:cover;display:block}
.nature-visual figcaption{position:absolute;bottom:22px;left:24px;right:24px;z-index:1;font:9px/1.6 Arial,sans-serif;color:#f1f8ef;text-shadow:0 1px 8px #00272b}
.nature-content{padding:49px 40px 33px}
.nature-content .chapter-kicker{font-size:8px;letter-spacing:.12em;margin-bottom:16px;padding-right:15px}
.nature-content h2{font:500 clamp(35px,4vw,56px)/1 'Barlow Condensed',sans-serif;letter-spacing:-.01em;color:#eff5e9;margin:0 0 20px;outline:none}
.nature-intro{font:13px/1.8 Arial,sans-serif;color:#d4e5dd;margin:0 0 25px}
.nature-facts{margin:0 0 25px;display:grid;grid-template-columns:1fr;gap:0}
.nature-facts dt{font:500 21px 'Barlow Condensed',sans-serif;color:#e2efb6;padding-top:14px;border-top:1px solid #ccdfcd24}
.nature-facts dd{font:12px/1.75 Arial,sans-serif;color:#d4e5dd;margin:5px 0 15px}
.nature-fragile{border-left:2px solid #e5d4a1;padding-left:15px;margin:22px 0}
.nature-fragile>span{font:8px 'Courier New',monospace;letter-spacing:.13em;color:#e5d4a1}
.nature-fragile p{font:13px/1.8 Arial,sans-serif;margin:9px 0;color:#eff2e4}
.nature-care{font:500 24px/1.25 'Barlow Condensed',sans-serif;margin:20px 0 24px;color:#e2efb6}
.nature-sources{font:10px/1.7 Arial,sans-serif;color:#bcd5ce;margin:20px 0}.nature-sources summary{cursor:pointer;padding:10px 0;min-height:35px}
.nature-sources ul{padding-left:15px;line-height:1.9}.nature-sources a{color:#d7e7d8;text-underline-offset:3px}
.nature-close{position:sticky;float:right;top:12px;margin:12px 12px -56px 0;z-index:5;display:grid;place-items:center;width:44px;height:44px;border:1px solid #f4ffe34d;border-radius:50%;background:#073b47df;color:#eff9e8;font-size:19px}
.nature-close:hover{background:#205362}.nature-close:focus-visible{outline:2px solid #e2efb6;outline-offset:2px}
.nature-return{display:flex;align-items:center;gap:20px;min-height:44px;border:0;border-bottom:1px solid #e2efb66b;padding:8px 0;background:transparent;color:#e2efb6;font:500 22px 'Barlow Condensed',sans-serif}
@media(max-width:1000px) and (min-width:701px){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{width:47%;top:25%}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:clamp(44px,6vw,58px)}
 .chapter-body,.route-caption>p:last-of-type{font-size:12px;max-width:320px}
 .chapter-actions{gap:10px}.discover-link{font-size:20px}
 .route-controls{left:auto;right:5%;transform:none;width:260px;bottom:75px}.route-continue{font-size:22px}
 .nature-layout{grid-template-columns:.85fr 1.15fr}.nature-content{padding:45px 28px 25px}
}
@media(max-width:700px){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:21%;left:8%;width:84%}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:clamp(42px,12vw,58px);margin-bottom:14px}
 .chapter-lead{font-size:13px;margin-bottom:10px}.chapter-body,.route-caption>p:last-of-type{font-size:12px;line-height:1.7;max-width:295px;margin-bottom:13px}
 .chapter-actions{gap:12px}.discover-link{font-size:21px;min-height:44px}.discover-link>span{width:27px;height:27px;font-size:20px}
 .chapter-actions .narration-replay{font-size:7px}.chapter-actions .narration-replay>span{font-size:16px}
 .route-controls{bottom:72px;left:50%;right:auto;transform:translateX(-50%);width:265px}.route-continue{font-size:22px;margin-bottom:10px;padding-bottom:10px}
 .narration-status{font-size:6px}#route-instruction{font-size:6px;margin-bottom:7px}
 .nature-dialog{width:94vw;max-height:94svh}.nature-layout{display:block;min-height:0}
 .nature-visual{position:relative;height:250px;min-height:0}.nature-visual img{object-position:center 48%}.nature-visual figcaption{font-size:8px;bottom:15px;left:23px}
 .nature-content{padding:27px 24px 28px}.nature-content h2{font-size:42px}.nature-content .chapter-kicker{font-size:7px}.nature-intro{font-size:13px}.nature-facts dt{font-size:22px}.nature-facts dd{font-size:12px}
 .nature-close{top:10px;margin:10px 10px -54px 0}
}
@media(max-height:690px) and (max-width:700px){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:21%}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:42px;margin-bottom:11px}
 .chapter-lead{font-size:12px}.chapter-body,.route-caption>p:last-of-type{font-size:11px;line-height:1.65;max-width:285px;margin-bottom:10px}
 .chapter-kicker{margin-bottom:12px}.discover-link{font-size:19px}.chapter-actions{gap:10px}
 .route-controls{bottom:65px}.route-continue{font-size:21px;min-height:44px;margin-bottom:7px}.narration-status{margin-bottom:2px}
}
@media(max-height:480px) and (min-width:701px){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{display:block;top:24%;left:6%;width:52%}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:40px;margin-bottom:10px}
 body[data-state=chapter] .chapter h2 br{display:none}.chapter-lead{font-size:11px;margin-bottom:7px}.chapter-lead br{display:none}.chapter-body,.route-caption>p:last-of-type{font-size:11px;max-width:370px;line-height:1.6;margin-bottom:7px}
 .chapter-actions{gap:17px}.discover-link{font-size:18px}.chapter-kicker{margin-bottom:10px}
 .route-controls{left:auto;right:4%;transform:none;width:240px;bottom:85px}.route-continue{font-size:20px}
 .nature-dialog{max-height:94svh}.nature-visual{height:94svh;min-height:0}.nature-content{padding:30px 26px}
}
@media(prefers-reduced-motion:reduce){.route-continue>span{animation:none}.discover-link>span{transition:none}.nature-dialog::backdrop{backdrop-filter:none}}
/* Route map and the tactile invitation remain legible over the sea. */
.journey-map{position:absolute;right:3.7%;top:27%;width:115px;z-index:3;pointer-events:none;color:#d5eeea}
.map-caption{font:7px 'Courier New',monospace;letter-spacing:.16em;display:block;margin:0 0 18px 9px;color:#cbe5dd9c}
.map-trace{position:relative;width:100%;height:min(38svh,300px)}.map-trace svg{width:42px;height:100%;overflow:visible}.map-line,.map-progress{fill:none;stroke:#cce8e14d;stroke-width:.7}.map-progress{stroke:#dcebaf;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
.map-trace ol{list-style:none;margin:0;padding:0;position:absolute;inset:0}.map-trace li{position:absolute;top:var(--point);left:18px;transform:translateY(-50%);display:flex;align-items:center;gap:13px;opacity:.5}
.map-dot{width:4px;height:4px;display:block;flex:none;border-radius:50%;background:#d2e9e5;margin-left:-2px}.map-label{font:8px 'Courier New',monospace;letter-spacing:.08em;display:flex;gap:8px;white-space:nowrap}.map-label>span{font:9px Arial,sans-serif;letter-spacing:0}.map-trace .is-current{opacity:1;color:#e2efb6}.map-trace .is-current .map-dot{width:6px;height:6px;margin-left:-3px;background:#e2efb6;box-shadow:0 0 0 5px #e2efb617,0 0 12px #e2efb680}.map-trace .is-visited{opacity:.9}.map-end-label{font:8px Arial,sans-serif;margin-top:4px}
body[data-route-held=false] #route-instruction{display:flex;flex-direction:column-reverse;align-items:center;gap:13px;font-size:8px;letter-spacing:.16em;color:#e2efb6;margin-bottom:14px}
body[data-route-held=false] #route-instruction>span{display:grid;place-items:center;margin:0;width:48px;height:48px;border:1px dashed #e2efb663;border-radius:50%;font-size:22px;animation:continue-breathe 2.7s ease-in-out infinite}
.nature-visual figcaption a{color:#e4f1de;text-underline-offset:3px}
@media(max-width:1000px) and (min-width:701px){.journey-map{width:83px;right:3%;top:26%}.map-label{gap:5px}.map-label>span{font-size:8px}}
@media(max-width:700px){.journey-map{width:28px;right:3%;top:29%}.map-caption,.map-label{display:none}.map-trace{height:29svh}.map-trace svg{width:28px}.map-trace li{left:12px}.map-dot{width:3px;height:3px}.map-trace .is-current .map-dot{width:5px;height:5px}.chapter-actions{max-width:96%}body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{width:79%}body[data-route-held=false] #route-instruction{font-size:7px;gap:10px}body[data-route-held=false] #route-instruction>span{width:43px;height:43px;font-size:20px}}
@media(max-height:480px) and (min-width:701px){.journey-map{top:20%;height:130px;right:3%;width:85px}.map-trace{height:130px}.map-caption{display:none}.map-label{font-size:7px}.map-label>span{font-size:8px}.map-end-label{display:none}.route-controls{right:5%;bottom:67px}body[data-route-held=false] #route-instruction>span{width:35px;height:35px;font-size:19px}}
@media(prefers-reduced-motion:reduce){body[data-route-held=false] #route-instruction>span{animation:none}}
@media(orientation:landscape) and (max-height:480px) and (max-width:700px){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{display:block;left:6%;top:22%;width:57%}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:34px;margin-bottom:8px}.chapter h2 br,.route-caption h2 br{display:none}
 body[data-state=chapter] .chapter-kicker{font-size:6px;margin-bottom:9px}.chapter-lead{font-size:10px;line-height:1.5;margin-bottom:7px}.chapter-lead br{display:none}
 .chapter-body,.route-caption>p:last-of-type{font-size:10px;line-height:1.55;max-width:330px;margin-bottom:5px}
 .chapter-actions{gap:15px}.discover-link{font-size:17px;min-height:36px}.discover-link>span{width:24px;height:24px}.chapter-actions .narration-replay{min-height:36px;font-size:6px}
 .route-controls{left:auto;right:4%;transform:none;width:205px;bottom:53px}.route-continue{font-size:18px;min-height:40px;gap:13px}.narration-status{font-size:5px}body[data-route-held=true] #route-instruction{font-size:5px}
 .journey-map{top:20%;right:3%;width:28px}.map-trace{height:108px}.map-caption,.map-label{display:none}
 body[data-state=chapter] .journey-back{top:auto;bottom:18px;left:32%;font-size:8px}body[data-state=chapter] .return-button{top:auto;bottom:18px;right:29%;font-size:7px}
 .surface-footer{bottom:18px}.surface-footer .location{font-size:6px}.surface-footer .location-detail{font-size:5px}.motion-button{font-size:6px}
 .nature-layout{display:grid;grid-template-columns:.9fr 1.1fr}.nature-visual{position:sticky;top:0;height:94svh}.nature-content{padding:28px 20px}.nature-content h2{font-size:34px}.nature-content .chapter-kicker{font-size:6px}.nature-intro{font-size:11px}.nature-facts dd{font-size:11px}.nature-visual figcaption{font-size:6px;left:15px;right:15px}
}
@media(max-width:360px) and (orientation:portrait){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:21%;left:7%;width:80%}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:36px;margin-bottom:8px}.chapter-lead{font-size:11px;margin-bottom:8px}.chapter-body,.route-caption>p:last-of-type{font-size:10px;line-height:1.6;margin-bottom:6px}.chapter-kicker{margin-bottom:10px}
 .chapter-actions{gap:9px}.discover-link{font-size:18px}.chapter-actions .narration-replay{font-size:6px;gap:4px}.chapter-actions .narration-replay>span{font-size:13px}.discover-link>span{width:23px;height:23px;font-size:17px}
 .route-controls{bottom:62px;width:248px}.route-continue{font-size:20px}.narration-status{font-size:5.5px}
}
.credits-link{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;min-height:32px;padding:12px 7px;color:#d6e6de9e;font:6px 'Courier New',monospace;letter-spacing:.08em;text-underline-offset:4px}
body[data-state=chapter] .credits-link{display:block}
@media(orientation:landscape) and (max-height:480px){body[data-state=chapter] .credits-link{left:50%;bottom:27px;font-size:5px}}

/* v11 · A photograph at every pause; a clear invitation to listen. */
.sound-button{gap:12px;background:#123e4eee;border-color:#f5c777b0;padding:12px 19px;box-shadow:0 4px 24px #062c4533;text-shadow:none}
.sound-signal{position:relative;display:block;flex:none;width:12px;height:12px;border-radius:50%;background:#ffd082;box-shadow:0 0 12px #ffc76c80}
.sound-signal::after{content:'';position:absolute;inset:-5px;border:1px solid #ffd08288;border-radius:50%}
.sound-copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.sound-copy #sound-label{font:bold 10px/1.2 Arial,sans-serif;letter-spacing:.09em;color:#fff0d1}
#sound-hint{font:9px/1.2 Arial,sans-serif;letter-spacing:0;color:#eff5eecc}.sound-button .sound-icon{display:none}
body[data-state=surface] .sound-button[aria-pressed=false]:not(:disabled) .sound-signal::after{animation:listen-beacon 2.5s ease-out infinite}
.sound-button[aria-pressed=true]{border-color:#b8e4a775;background:#123e4edb}.sound-button[aria-pressed=true] .sound-signal{background:#b6e5a1;box-shadow:0 0 12px #b6e5a160}.sound-button[aria-pressed=true] .sound-signal::after{border-color:#b6e5a14d}
.sound-button[aria-pressed=true] .sound-copy #sound-label{color:#e6f7d9}.sound-button:hover{background:#235563;border-color:#fff0d1}.sound-button:focus-visible{outline:2px solid #ffd082;outline-offset:5px}
@keyframes listen-beacon{0%{transform:scale(.85);opacity:1}80%,100%{transform:scale(2);opacity:0}}
body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:23%;width:36%;max-width:420px}
body[data-state=chapter] .chapter h2,.route-caption h2{font-size:clamp(44px,4.6vw,66px);margin-bottom:14px}
.chapter-body,.route-caption>p:last-of-type{max-width:360px;line-height:1.65;margin-bottom:16px}
.field-card{width:min(100%,340px);margin:0;pointer-events:auto;text-shadow:none}
.field-open{position:relative;display:block;overflow:hidden;width:100%;padding:0;border:1px solid #d8edce88;background:#064d60;text-align:left;color:#edf6e0;box-shadow:0 12px 40px #002c3630;transition:border-color .25s,box-shadow .25s}
.field-open img{display:block;width:100%;height:clamp(125px,21svh,190px);object-fit:cover;object-position:50% 52%;background:#07586a}
.field-open img:not([src]){visibility:hidden}
.field-card[data-photo-state=loading] .field-open::before,.field-card[data-photo-state=error] .field-open::before{position:absolute;inset:30% 15px auto;content:'Preparando la fotografía…';font:11px/1.5 Arial,sans-serif;color:#dae9e1;text-align:center}
.field-card[data-photo-state=error] .field-open::before{content:'La foto no ha cargado. Pulsa para reintentar.'}
.field-open::after{content:'';position:absolute;top:0;left:0;right:0;height:55px;background:linear-gradient(#00293699,transparent);pointer-events:none}
.field-caption{position:absolute;top:14px;left:15px;z-index:1;font:8px/1.2 'Courier New',monospace;letter-spacing:.12em;color:white;text-shadow:0 1px 6px #002d39}
.field-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;padding:0 0 0 16px;background:#073b49ec;font:10px/1.2 Arial,sans-serif;font-weight:bold;letter-spacing:.1em;color:#e6efbc;border-top:1px solid #d8edce66}
.field-cta>span{display:grid;place-items:center;align-self:stretch;min-width:46px;border-left:1px solid #d8edce66;font:25px/1 Arial,sans-serif;color:#e6efbc;transition:background .25s, color .25s}
.field-open:hover{border-color:#eff7ce;box-shadow:0 9px 32px #002c3666}.field-open:hover .field-cta>span{background:#dce9aa;color:#183e3f}
.field-open:focus-visible{outline:2px solid #e7f3ba;outline-offset:4px}.field-card figcaption{font:7px/1.4 Arial,sans-serif;color:#c6ddd5;margin-top:6px}.field-card figcaption a{color:inherit;text-underline-offset:2px}.field-refuge img{object-position:50% 78%}
.chapter-actions .narration-replay{min-height:36px;font-size:7px;letter-spacing:.08em;margin-top:3px}
.route-caption[inert] .field-card,.chapter[inert] .field-card{pointer-events:none}
.nature-dialog::backdrop{background:#001d2b85;backdrop-filter:none}
@media(max-width:1000px) and (min-width:701px){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{width:41%;top:22%;max-width:350px}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:48px}.field-card{width:300px;max-width:100%}.field-open img{height:18svh}.chapter-body,.route-caption>p:last-of-type{font-size:12px}
 .route-controls{width:240px;right:5%;bottom:72px}
}
@media(max-width:700px){
 .sound-button{gap:11px;padding:10px 13px;min-height:49px}.sound-signal{width:10px;height:10px}.sound-copy #sound-label{font-size:9px;letter-spacing:.07em}#sound-hint{font-size:8px}.sound-copy{gap:4px}
 .sound-button[aria-pressed=true] #sound-hint{max-width:150px}
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:19%;left:8%;width:79%;max-width:360px}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:clamp(34px,10.4vw,43px);margin-bottom:9px;line-height:.99}
 body[data-state=chapter] .chapter-kicker{margin-bottom:10px;font-size:7px;line-height:1.5}
 .chapter-body,.route-caption>p:last-of-type{font-size:11px;line-height:1.6;margin-bottom:12px;max-width:320px}
 .field-card{width:100%}.field-open img{height:clamp(88px,17svh,150px)}.field-cta{min-height:44px;font-size:9px;padding-left:13px}.field-caption{font-size:7px;top:11px;left:13px}.field-card figcaption{font-size:6px;margin-top:4px}
 .chapter-actions .narration-replay{font-size:6px;min-height:32px;margin-top:0}.chapter-actions .narration-replay>span{font-size:15px}
}
@media(max-width:700px) and (max-height:690px) and (orientation:portrait){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:18.5%}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:36px;margin-bottom:8px}
 .chapter-body,.route-caption>p:last-of-type{font-size:10px;line-height:1.55;margin-bottom:9px}.field-open img{height:15svh}.field-card figcaption{font-size:5.5px}
 body[data-state=chapter] .chapter-kicker{font-size:6px;margin-bottom:8px}
 .route-controls{bottom:61px}.route-continue{font-size:20px}
}
@media(max-width:360px) and (orientation:portrait){
 body[data-state=chapter] .journey-back,body[data-state=chapter] .return-button{top:72px}
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:20%;left:7%;width:80%}
 body[data-state=chapter] .chapter h2,.route-caption h2{font-size:31px}.chapter-body,.route-caption>p:last-of-type{font-size:9px}.field-open img{height:14svh;min-height:76px}.field-cta{font-size:8px}.field-caption{font-size:6px}
 .sound-copy #sound-label{font-size:8px}#sound-hint{font-size:7px}.sound-button{padding:10px 11px}.sound-button[aria-pressed=true] #sound-hint{max-width:125px}
}
@media(orientation:landscape) and (max-height:530px){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:22%;left:6%;width:78%;max-width:none;display:grid;grid-template-columns:1fr .9fr;column-gap:25px;align-content:start}
 body[data-state=chapter] .chapter-kicker{grid-column:1;grid-row:1;font-size:6px;margin-bottom:8px}
 body[data-state=chapter] .chapter h2,.route-caption h2{grid-column:1;grid-row:2;font-size:34px;margin-bottom:9px}.chapter h2 br,.route-caption h2 br{display:none}
 .chapter-body,.route-caption>p:last-of-type{grid-column:1;grid-row:3;font-size:10px;line-height:1.55;margin:0}.field-card{grid-column:2;grid-row:1/5;width:100%;max-width:285px}.field-open img{height:23svh;min-height:82px}.field-cta{min-height:44px;font-size:8px}.field-caption{font-size:6px}.field-card figcaption{font-size:5px}
 .chapter-actions{grid-column:1;grid-row:4}.chapter-actions .narration-replay{min-height:32px;font-size:6px}
 .route-controls{right:5%;bottom:48px;left:auto;transform:none;width:220px}.route-continue{font-size:18px;min-height:40px;margin-bottom:4px}.narration-status{font-size:5px}
 .sound-button{padding:8px 13px;min-height:44px}.sound-copy #sound-label{font-size:8px}#sound-hint{font-size:7px}
 body[data-state=chapter] .route-end{display:block;width:50%}
}
@media(prefers-reduced-motion:reduce){.sound-signal::after{animation:none!important}.field-open,.field-cta>span{transition:none}}

/* A living point of curiosity, anchored to the schooling fish. */
.school-info{position:absolute;left:78%;top:66%;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;min-width:106px;min-height:68px;padding:0;border:0;background:none;color:#e8f2c0;text-shadow:0 1px 9px #002d40;transition:left .65s ease-out,top .65s ease-out;touch-action:manipulation}
.school-info[hidden]{display:none}.school-question{position:relative;display:grid;place-items:center;width:45px;height:45px;border:1px solid #e5f2bcb3;border-radius:50%;background:#073e4b88;box-shadow:inset 0 0 16px #bce9dc16,0 0 20px #05283844;font:500 27px/1 'Barlow Condensed',sans-serif}
.school-question::after{position:absolute;inset:-6px;border:1px dashed #d0eaca65;border-radius:50%;content:'';animation:school-beacon 3.8s ease-in-out infinite}
.school-label{font:8px/1.3 'Courier New',monospace;letter-spacing:.08em;white-space:nowrap;background:#063646ab;padding:5px 7px;border-radius:2px}.school-label>span{font-size:11px;margin-left:3px}
.school-info:hover .school-question,.school-info:focus-visible .school-question{background:#dfeeb5;color:#164449;border-color:#eff6d7}.school-info:focus-visible{outline:1px solid #e2efb6;outline-offset:7px;border-radius:8px}.school-info:disabled{opacity:.65}
@keyframes school-beacon{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.13);opacity:1}}
@media(max-width:700px){.school-info{gap:6px;min-width:85px}.school-label{font-size:6px;padding:4px}.school-question{width:44px;height:44px;font-size:25px}}
@media(orientation:landscape) and (max-height:530px){.school-info{min-width:85px;gap:5px}.school-label{font-size:6px}.school-question{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.school-info{transition:none}.school-question::after{animation:none}}

/* Photos belong to the pause, never to the swim between encounters. */
.field-card{position:relative}
body[data-route-held=true] .experience,body[data-route-held=true] .route-scroll{touch-action:pinch-zoom}
body[data-route-held=false] .field-card,body[data-route-held=false] .photo-restore,.field-card[hidden],.photo-restore[hidden]{display:none!important}
.photo-dismiss{position:absolute;top:7px;right:7px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border:1px solid #edf5e876;background:#063c4aca;color:#eff6e3;border-radius:50%;font:24px/1 Arial,sans-serif;padding:0;pointer-events:auto}
.photo-dismiss:hover{background:#dcebbb;color:#174748}.field-caption{max-width:calc(100% - 67px);line-height:1.5}
.photo-restore{border:0;border-bottom:1px solid #dcebbb77;background:none;color:#e6efbc;font:7px/1.3 'Courier New',monospace;letter-spacing:.05em;padding:8px 0;min-height:36px;pointer-events:auto}
@media(max-width:700px){.photo-dismiss{width:44px;height:44px;top:3px;right:3px}.photo-restore{min-height:44px;font-size:6px}}
/* Full route: clear discoveries, an explanatory heat comparison, then daylight. */
.route-distance{height:2850svh;min-height:14500px}
.journey-map{top:23%;width:130px}.map-trace{height:min(48svh,375px)}.map-label{font-size:7px}.map-label>span{font-size:8px}
.discovery-point{left:78%;top:66%}.discovery-point .school-label{max-width:150px;text-align:center;line-height:1.5}
.heat-comparison{position:absolute;right:14%;top:39%;z-index:4;width:260px;padding:20px 22px;border:1px solid #acdcd84f;background:#023d4bd9;color:#edf4da;display:grid;gap:10px;box-shadow:0 12px 55px #00192744}
.heat-comparison[hidden]{display:none}.heat-comparison label{font:9px/1.5 'Courier New',monospace;letter-spacing:.12em}.heat-comparison input{width:100%;accent-color:#dbeaa9;min-height:36px}.heat-comparison>span{font:24px/1.1 'Barlow Condensed',sans-serif}.heat-comparison small{font:9px/1.4 Arial,sans-serif;color:#bed5cf}
.return-veil{position:absolute;inset:0;z-index:30;background:#047181;pointer-events:none;opacity:0;transition:opacity .75s ease-in-out}.return-veil.is-covering{opacity:1;pointer-events:auto}
body[data-complete=true][data-state=surface] .surface-intro{display:none}
.journey-finale{position:absolute;inset:20% 10% auto;text-align:center;color:#f7faf0;z-index:4;text-shadow:0 3px 30px #003344b3;max-height:72svh;overflow:auto;scrollbar-width:thin;pointer-events:auto}
.journey-finale[hidden]{display:none}.journey-finale .eyebrow{justify-content:center;font-size:9px;letter-spacing:.18em}.journey-finale h2{font:500 clamp(50px,5.8vw,84px)/1.02 'Barlow Condensed',sans-serif;margin:18px 0}.journey-finale h2 em{font-style:normal;color:#eef5cc}.journey-finale>p:not(.eyebrow){max-width:580px;margin:16px auto;font:15px/1.65 Arial,sans-serif}.journey-finale .final-line{font-size:12px!important}.final-actions{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap;margin:22px 0}.final-actions button,.final-actions a{border:0;background:none;color:#f3f6df;font:12px/1.5 Arial,sans-serif;min-height:44px;padding:10px 0;text-decoration:underline;text-underline-offset:7px}.final-actions #final-care{padding:13px 23px;border:1px solid #e9efc1;text-decoration:none;background:#064d56c9}.collection-epilogue{border-top:1px solid #e1ecd459;padding:16px 0;margin:18px auto 0;max-width:600px}.collection-epilogue>span{font:9px/1.4 'Courier New',monospace;letter-spacing:.12em}.collection-epilogue p{font:22px/1.2 'Barlow Condensed',sans-serif;margin:9px 0}
@media(max-width:700px){.journey-map{top:24%;right:3%;width:28px}.map-trace{height:39svh}.map-label{display:none}.discovery-point{left:82%;top:69%}.discovery-point .school-label{font-size:5px;max-width:90px}.heat-comparison{top:auto;bottom:27%;right:10%;width:73%;padding:10px 14px;gap:4px}.heat-comparison label{font-size:7px}.heat-comparison>span{font-size:18px}.heat-comparison small{font-size:7px}.heat-comparison input{min-height:28px}body[data-route-zone=calor] .discovery-point{display:none}.journey-finale{inset:17% 7% auto;max-height:74svh}.journey-finale h2{font-size:44px}.journey-finale>p:not(.eyebrow){font-size:12px;margin:13px auto}.journey-finale .eyebrow{font-size:7px}.final-actions{gap:8px 20px;margin:14px 0}.final-actions button,.final-actions a{font-size:10px}.collection-epilogue{padding:11px 0;margin-top:10px}.collection-epilogue p{font-size:19px}}
@media(max-height:530px) and (min-aspect-ratio:1/1){.journey-map{top:22%;width:28px}.map-label{display:none}.map-trace{height:43svh}.discovery-point{left:55%;top:68%}.heat-comparison{top:65%;bottom:auto;right:auto;left:6%;width:39%;padding:8px 12px;grid-template-columns:1fr 1fr;gap:2px 10px}.heat-comparison label,.heat-comparison small{font-size:6px}.heat-comparison>span{font-size:14px}.journey-finale{inset:19% 10% auto;max-height:74svh}.journey-finale h2{font-size:39px}.journey-finale>p:not(.eyebrow){font-size:11px;margin:10px auto}.collection-epilogue{margin-top:10px;padding:10px 0}}
@media(prefers-reduced-motion:reduce){.return-veil{transition-duration:.15s}}
img[data-field-photo="arrastre"],.nature-dialog[data-story="arrastre"] #nature-image{object-fit:contain;background:#082c3b}
@media(max-width:700px) and (orientation:portrait){
 .heat-comparison{bottom:23.5%;right:13%;width:79%;padding:6px 10px;gap:1px 8px;grid-template-columns:1fr 1fr}
 .heat-comparison label{font-size:6px;grid-column:1/-1}
 .heat-comparison input{grid-column:1/-1;height:30px;min-height:30px;margin:0}
 .heat-comparison>span{font-size:13px;align-self:center}
 .heat-comparison small{font-size:6px;line-height:1.3}
 body[data-route-zone=calor] .chapter-actions{display:none}
 body[data-route-zone=calor] .field-open img{height:12svh;min-height:72px}
}
@media(max-width:360px) and (max-height:620px) and (orientation:portrait){
 body[data-route-zone=calor] #route-calor{top:19%}
 body[data-route-zone=calor] #route-calor h2{font-size:28px}
 body[data-route-zone=calor] .field-open img{height:11svh;min-height:63px}
 .heat-comparison{bottom:25%;padding:5px 9px}
}

/* v15 · One route, one next step. The sea has room to breathe. */
body[data-state=chapter] .route-meter{display:none}
body[data-state=chapter] .narration-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-state=chapter] .return-button{display:none}
body[data-state=chapter] .journey-back{top:83px;left:3.6%;bottom:auto;font-size:10px;opacity:.8}
body[data-state=chapter] .route-controls{left:50%;right:auto;bottom:25px;width:180px;transform:translateX(-50%)}
body[data-state=chapter] .route-continue{display:flex;flex-direction:column;gap:9px;border:0;padding:0;margin:0 auto;background:none;color:#d9f3eb;min-height:79px;font:10px Arial,sans-serif}
.route-continue[hidden]{display:none!important}
body[data-state=chapter] .advance-ring{display:grid;place-items:center;width:55px;height:55px;border:1px solid #c8f4e68c;border-radius:50%;background:#04344555;box-shadow:0 0 0 6px #a2d9d908;transition:background .2s,border-color .2s;animation:none}
.advance-ring svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;animation:advance-current 2.5s ease-in-out infinite}
.route-continue .advance-label{font:10px/1.4 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;animation:none}
.route-continue:hover .advance-ring{background:#c8f4e62b;border-color:#e3fff8}
body[data-state=chapter][data-route-held=false] #route-instruction{display:flex;flex-direction:column;gap:9px;margin:0;color:#dbefe9;align-items:center}
body[data-state=chapter][data-route-held=false] #route-instruction>.advance-ring{margin:0;font-size:inherit}
body[data-state=chapter] #route-instruction>.advance-label{font:8px/1.4 Arial,sans-serif;letter-spacing:.12em;margin:0;border:0;width:auto;height:auto;animation:none;border-radius:0}
body[data-route-held=true] #route-instruction{display:none}
.route-continue .scroll-alternative{font:8px/1.2 Arial,sans-serif;letter-spacing:.05em;text-transform:none;opacity:.72;margin-top:-4px;animation:none}
body[data-state=chapter] .journey-map{top:24%;right:3.5%;width:35px}
body[data-state=chapter] .map-trace{height:51svh;max-height:390px}
body[data-state=chapter] .map-caption,body[data-state=chapter] .map-label{display:none}
body[data-state=chapter] .surface-footer{bottom:25px;align-items:center;pointer-events:none}
body[data-state=chapter] .surface-footer button,body[data-state=chapter] .surface-footer a{pointer-events:auto}
body[data-state=chapter] .location{align-items:center;gap:14px;font:10px/1.5 Arial,sans-serif;letter-spacing:.12em}
body[data-state=chapter] .location-detail{font:8px/1.6 Arial,sans-serif;letter-spacing:.06em;margin-top:5px;opacity:.75}
#mediterranean-hud{display:none}
body[data-state=chapter] #mediterranean-hud{display:block;width:110px;height:80px;flex:none}
body[data-state=chapter] .position-dot{display:none}
body[data-state=chapter] .credits-link{left:auto;right:0;bottom:-8px;transform:none;font-size:7px}
body[data-state=chapter] .motion-button{min-height:44px;margin:0;padding:0 0 14px;font:8px/1.4 Arial,sans-serif;letter-spacing:.05em}
body[data-state=chapter] #sound-hint{display:none}
body[data-state=chapter] .sound-button{min-height:44px;padding:11px 16px}
body[data-state=chapter] .school-label{display:none}
body[data-state=chapter] .school-info{min-width:44px;min-height:44px}
body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:23%;left:7%;width:80%;max-width:none;display:grid;grid-template-columns:43% 34%;column-gap:21%;align-content:start}
body[data-state=chapter] .chapter-kicker{grid-column:1;grid-row:1;font:8px/1.5 'Courier New',monospace;letter-spacing:.12em;margin:0 0 14px}
body[data-state=chapter] .chapter h2,body[data-state=chapter] .route-caption h2{grid-column:1;grid-row:2;font-size:clamp(38px,4.5vw,62px);line-height:1.03;margin:0 0 18px}
body[data-state=chapter] .chapter-body,body[data-state=chapter] .route-caption>p:last-of-type{grid-column:1;grid-row:3;max-width:370px;font:13px/1.65 Arial,sans-serif;margin:0;color:#edf5f0}
body[data-state=chapter] .field-card{grid-column:2;grid-row:1/5;width:100%;align-self:start;margin-top:0}
body[data-state=chapter] .field-open img{height:24svh;max-height:200px;min-height:125px}
body[data-state=chapter] .field-caption{font-size:7px}
body[data-state=chapter] .field-card figcaption{font-size:7px;line-height:1.5}
body[data-state=chapter] .chapter-actions{grid-column:1;grid-row:4;margin-top:8px}
body[data-state=chapter] .chapter-actions .narration-replay{font:9px/1.3 Arial,sans-serif;letter-spacing:.05em;min-height:44px}
body[data-state=chapter] .photo-restore{grid-column:2;grid-row:1;align-self:start;justify-self:start;font:9px Arial,sans-serif;min-height:44px}
body[data-state=chapter] .heat-comparison{top:23%;right:13%;bottom:auto;width:40%;padding:12px 18px 15px;display:block;background:#032e4394;border-color:#9adbd450;box-shadow:none}
body[data-state=chapter] .heat-comparison[hidden]{display:none}
.heat-adjust{display:grid;gap:4px;grid-template-columns:1fr auto;align-items:center}
.heat-adjust label{grid-column:1/-1;font:9px/1.5 Arial,sans-serif;letter-spacing:.1em}
.heat-adjust input{width:100%;min-height:44px;margin:0;accent-color:#f3b88d}
.heat-adjust>span{font:12px/1.4 Arial,sans-serif;color:#e7ede4;text-align:right}
body[data-state=chapter][data-route-zone=calor] .field-card{grid-column:1;grid-row:5;width:180px;margin-top:12px}
body[data-state=chapter][data-route-zone=calor] .field-open img{height:85px;min-height:85px}
body[data-state=chapter][data-route-zone=calor] .field-caption{display:none}
body[data-state=chapter][data-route-zone=calor] .field-cta{font-size:8px;padding-left:10px}
body[data-state=chapter][data-route-zone=calor] .chapter-actions{display:none}
@keyframes advance-current{0%,100%{transform:translateY(2px);opacity:.65}50%{transform:translateY(-2px);opacity:1}}
@media(max-width:700px) and (orientation:portrait){
 body[data-state=chapter] .journey-back{left:6%;top:75px;font-size:9px}
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{display:grid;grid-template-columns:1fr;column-gap:0;top:18.5%;left:7%;width:80%;max-width:none}
 body[data-state=chapter] .chapter-kicker{font-size:6px;line-height:1.4;margin-bottom:8px}
 body[data-state=chapter] .chapter h2,body[data-state=chapter] .route-caption h2{font-size:34px;line-height:1.02;margin-bottom:10px}
 body[data-state=chapter] .chapter-body,body[data-state=chapter] .route-caption>p:last-of-type{font-size:11px;line-height:1.5;max-width:310px;margin:0}
 body[data-state=chapter] .field-card{grid-column:1;grid-row:4;width:100%;margin-top:13px}
 body[data-state=chapter] .field-open{display:grid;grid-template-columns:42% 1fr;align-items:stretch}
 body[data-state=chapter] .field-open img{height:76px;min-height:76px;max-height:none}
 body[data-state=chapter] .field-caption{display:none}
 body[data-state=chapter] .field-cta{font-size:9px;min-height:76px;border-top:0;border-left:1px solid #d8edce66;padding:0 7px 0 12px;justify-content:flex-start;gap:5px}
 body[data-state=chapter] .field-cta>span{display:none}
 body[data-state=chapter] .photo-dismiss{top:17px;right:1px;width:40px;height:40px;border:0;background:none;font-size:23px}
 body[data-state=chapter] .field-cta{padding-right:40px;line-height:1.6}
 body[data-state=chapter] .field-card figcaption{font-size:5.5px;margin-top:4px;line-height:1.4}
 body[data-state=chapter] .chapter-actions{grid-row:5;margin:0}
 body[data-state=chapter] .chapter-actions .narration-replay{font-size:9px;min-height:36px;padding:4px 0}
 body[data-state=chapter] .photo-restore{grid-column:1;grid-row:4;font-size:8px}
 body[data-state=chapter] .route-controls{bottom:19px;width:145px}
 body[data-state=chapter] .advance-ring{width:48px;height:48px}
 body[data-state=chapter] .route-continue{gap:7px;min-height:69px}
 .route-continue .advance-label{font-size:8px}
 body[data-state=chapter] #route-instruction>.advance-label{font-size:6px}
 body[data-state=chapter] .surface-footer{bottom:23px;gap:8px;align-items:center}
 body[data-state=chapter] .location{display:block;font-size:7px;letter-spacing:.06em;width:110px}
 body[data-state=chapter] #mediterranean-hud{width:75px;height:47px;margin-bottom:3px}
 body[data-state=chapter] .location-detail{font-size:6px;line-height:1.4;max-width:105px;margin-top:4px}
 body[data-state=chapter] .motion-button{font-size:6px;width:76px;letter-spacing:0;gap:8px;line-height:1.7;padding-bottom:0}
 body[data-state=chapter] .credits-link{bottom:-19px;font-size:5.5px}
 body[data-state=chapter] .journey-map{top:23%;width:26px;right:3%}
 body[data-state=chapter] .map-trace{height:49svh;max-height:390px}
 body[data-state=chapter] .heat-comparison{top:47%;bottom:auto;right:13%;width:80%;padding:7px 10px 8px}
 .heat-adjust label{font-size:7px}.heat-adjust>span{font-size:9px}.heat-adjust input{min-height:36px}
 body[data-state=chapter][data-route-zone=calor] .field-card{width:100%;grid-row:4;margin-top:10px}
 body[data-state=chapter][data-route-zone=calor] .field-open img{height:44px;min-height:44px}
 body[data-state=chapter][data-route-zone=calor] .field-cta{min-height:44px;font-size:7px}
 body[data-state=chapter][data-route-zone=calor] .photo-dismiss{top:0;height:44px}
 body[data-state=chapter][data-route-zone=calor] .field-card figcaption{display:none}
}
@media(max-width:360px) and (orientation:portrait){
 body[data-state=chapter] .chapter h2,body[data-state=chapter] .route-caption h2{font-size:29px}
 body[data-state=chapter] .chapter-body,body[data-state=chapter] .route-caption>p:last-of-type{font-size:9px}
 body[data-state=chapter] .field-card{margin-top:10px}
 body[data-state=chapter] .field-open img{height:65px;min-height:65px}
 body[data-state=chapter] .field-cta{min-height:65px;font-size:7px;padding-left:8px}
 body[data-state=chapter] .photo-dismiss{top:11px}
 body[data-state=chapter] .chapter-actions .narration-replay{min-height:30px}
 body[data-state=chapter] .location{width:90px;font-size:6px}
 body[data-state=chapter] #mediterranean-hud{width:60px;height:38px}
 body[data-state=chapter] .motion-button{width:64px;font-size:5.5px}
 body[data-state=chapter] .heat-comparison{top:48%;padding:5px 8px}
}
@media(orientation:landscape) and (max-height:530px){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:25%;left:6%;width:80%;grid-template-columns:47% 38%;column-gap:13%}
 body[data-state=chapter] .chapter h2,body[data-state=chapter] .route-caption h2{font-size:31px;margin-bottom:8px}
 body[data-state=chapter] .chapter-kicker{font-size:6px;margin-bottom:7px}
 body[data-state=chapter] .chapter-body,body[data-state=chapter] .route-caption>p:last-of-type{font-size:9px;line-height:1.5}
 body[data-state=chapter] .field-open img{height:22svh;min-height:66px}
 body[data-state=chapter] .field-caption{font-size:5px}
 body[data-state=chapter] .field-card figcaption{font-size:5px}
 body[data-state=chapter] .chapter-actions{margin:0}
 body[data-state=chapter] .chapter-actions .narration-replay{font-size:6px;min-height:30px}
 body[data-state=chapter] .route-controls{bottom:12px;width:150px}
 body[data-state=chapter] .route-continue{min-height:59px;gap:5px}
 body[data-state=chapter] .advance-ring{width:38px;height:38px}
 body[data-state=chapter] .advance-label{font-size:7px}
 body[data-state=chapter] .surface-footer{bottom:15px}
 body[data-state=chapter] #mediterranean-hud{width:70px;height:45px}
 body[data-state=chapter] .location{font-size:7px;gap:9px}
 body[data-state=chapter] .location-detail{font-size:6px;max-width:150px}
 body[data-state=chapter] .motion-button{font-size:6px}
 body[data-state=chapter] .journey-back{top:64px;left:3.6%;font-size:8px}
 body[data-state=chapter] .heat-comparison{top:24%;width:42%;right:13%;padding:7px 12px}
 body[data-state=chapter][data-route-zone=calor] .field-card{width:150px;margin-top:8px}
 body[data-state=chapter][data-route-zone=calor] .field-open img{height:45px;min-height:45px}
 .heat-adjust label{font-size:6px}.heat-adjust>span{font-size:9px}.heat-adjust input{min-height:28px}
}
@media(prefers-reduced-motion:reduce){.advance-ring svg{animation:none}}
.care-entry{margin-left:auto;margin-right:28px;padding:12px 0;min-height:44px;border:0;background:none;color:#f5fbef;font:11px/1.4 Arial,sans-serif;letter-spacing:.03em;text-shadow:0 1px 8px #003143}
.care-entry:hover{text-decoration:underline;text-underline-offset:6px}.care-entry[hidden]{display:none}
.sound-button,body[data-state=chapter] .sound-button{background:#143e4a66;border-color:#dbefe84d;padding:10px 14px;min-height:44px;gap:9px;box-shadow:none;backdrop-filter:blur(5px)}
.sound-signal{width:6px;height:6px;background:#d4e3dd;box-shadow:none}.sound-signal::after{display:none}
.sound-copy #sound-label{font:8px/1.4 Arial,sans-serif;letter-spacing:.08em;color:#edf6e7}
#sound-hint{display:none}.sound-button[aria-pressed=true]{background:#143e4a66;border-color:#dbefe84d}.sound-button[aria-pressed=true] .sound-signal{background:#bde4b7;box-shadow:0 0 8px #bde4b740}
@media(max-width:700px){.care-entry{font-size:9px;margin-right:13px}.sound-button,body[data-state=chapter] .sound-button{padding:9px 10px;gap:7px}.sound-copy #sound-label{font-size:7px}.sound-signal{width:5px;height:5px}}
body[data-route-zone=arrastre] .narration-replay{display:none}
.trawl-control{position:absolute;z-index:4;top:56%;left:7%;width:330px;padding:14px 16px;border:1px solid #bddec554;background:#043849dc;display:grid;gap:5px;color:#edf5e8}
body[data-state=finale] #journey-layer{opacity:1;visibility:visible}
body[data-state=finale] #fish-layer,body[data-state=finale] .surface-intro,body[data-state=finale] .underwater-copy,body[data-state=finale] .horizon-marker,body[data-state=finale] .touch-hint,body[data-state=finale] .look-hint,body[data-state=finale] .surface-footer{display:none}
body[data-state=finale] #journey-finale{inset:0;max-height:none;padding:115px 7% 55px;text-align:left;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;background:linear-gradient(90deg,#012537ad,#012a3d82);text-shadow:none}
body[data-state=finale] .masthead{z-index:5;pointer-events:none}
body[data-state=finale] .masthead button{pointer-events:auto}
@media(max-width:700px){body[data-state=finale] #journey-finale{padding:108px 7% 40px}}
.trawl-control[hidden]{display:none}
.trawl-control label{font:10px/1.5 Arial,sans-serif;letter-spacing:.1em;display:flex;justify-content:space-between}
.trawl-control input{width:100%;margin:0;min-height:44px;accent-color:#e0d5aa}
.trawl-control>span{font:14px/1.4 'Barlow Condensed',sans-serif}
.trawl-control small{font:9px/1.5 Arial,sans-serif;color:#c4d7d2}
@media(max-width:700px) and (orientation:portrait){
 .trawl-control{top:54%;left:7%;width:80%;padding:10px 12px;gap:3px}
 .trawl-control label{font-size:8px}.trawl-control input{min-height:36px}.trawl-control small{font-size:7px}.trawl-control>span{font-size:12px}
 body[data-state=chapter][data-route-zone=arrastre] .field-open img{height:50px;min-height:50px}
 body[data-state=chapter][data-route-zone=arrastre] .field-cta{min-height:50px}
 body[data-state=chapter][data-route-zone=arrastre] .photo-dismiss{top:3px}
 body[data-state=chapter][data-route-zone=arrastre] .chapter-actions{display:none}
 body[data-state=chapter][data-route-zone=calor] .heat-comparison{top:53%;}
 body[data-route-zone=calor] .med-map-svg{max-height:128px}
 body[data-route-zone=calor] .med-map-caption{font-size:6px!important;margin-top:3px!important}
}
@media(max-width:360px) and (orientation:portrait){
 .trawl-control{top:55%;padding:7px 10px;gap:2px}.trawl-control small{font-size:6px}
 body[data-state=chapter][data-route-zone=calor] .heat-comparison{top:52%}
 body[data-route-zone=calor] .med-map-svg{max-height:98px}
 .heat-adjust label{font-size:6px}.heat-adjust>span{font-size:8px}
}
@media(orientation:landscape) and (max-height:530px){
 .trawl-control{top:64%;left:6%;width:39%;padding:7px 10px;grid-template-columns:1fr 1fr;gap:2px 8px}
 .trawl-control label{grid-column:1;font-size:6px}.trawl-control input{grid-column:2;grid-row:1/3;min-height:36px}
 .trawl-control>span{grid-column:1;font-size:11px}.trawl-control small{grid-column:1/-1;font-size:6px}
 body[data-state=chapter][data-route-zone=arrastre] .chapter-actions{display:none}
}

/* Mobile reading and touch targets. Full photo attribution remains in details/credits. */
.dive-cue{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;padding:7px 13px;border-radius:30px;background:#06384b70;color:#f3fadf;font:11px/1.4 Arial,sans-serif;letter-spacing:.025em;text-shadow:0 1px 5px #012c3d}
.dive-cue svg{width:18px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:dive-invite 2.4s ease-in-out infinite}
.dive-button:disabled .dive-cue{display:none}
@keyframes dive-invite{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.dive-cue svg{animation:none}}
.field-card figcaption{display:none!important}
@media(max-width:700px){
 .surface-footer .location{font:10px/1.45 Arial,sans-serif;letter-spacing:.07em;color:#f3faf3;padding:8px 10px;border:1px solid #bce2df25;border-radius:5px;background:#0735477d;text-shadow:0 1px 5px #001f2c;gap:8px}
 .surface-footer .location-detail{font:9px/1.4 Arial,sans-serif;letter-spacing:.035em;color:#e3f0eb;opacity:1;margin-top:4px}
 body[data-state=chapter] .location{font:10px/1.45 Arial,sans-serif;letter-spacing:.04em;width:126px;padding:7px 8px}
 body[data-state=chapter] .location-detail{font:9px/1.4 Arial,sans-serif;max-width:none;letter-spacing:.025em;opacity:1;margin-top:4px}
 body[data-state=chapter] #mediterranean-hud{width:72px;height:38px;margin-bottom:4px}
 body[data-state=underwater] .return-button{bottom:85px;font-size:10px;letter-spacing:.07em;min-height:44px;padding:8px 14px;color:#f2f9ee;background:#07354799!important;border:1px solid #bdded82e;border-radius:25px}
 body[data-state=underwater] .journey-start{bottom:144px;min-width:220px;max-width:calc(100% - 48px);min-height:76px;padding:12px 18px;border:1px solid #c6f2dbad;border-radius:14px 4px 14px 14px;background:linear-gradient(120deg,#075968e8,#053d50e8);box-shadow:0 7px 24px #002c3a45;text-shadow:0 1px 5px #002d3a;color:#eef7d6}
 body[data-state=underwater] .journey-start .start-prefix{font:8px/1.4 Arial,sans-serif;letter-spacing:.12em;margin-bottom:6px;color:#d9eee7}
 body[data-state=underwater] .journey-start:not(:disabled){min-height:64px}
 body[data-state=underwater] .journey-start:not(:disabled) .start-prefix{display:none}
 body[data-state=underwater] .journey-start .start-title{font-size:28px;gap:22px;justify-content:space-between}
 body[data-state=underwater] .journey-start .start-arrow{font-size:23px;color:#eaf5c5}
 body[data-state=underwater] .journey-start .start-rule{display:none}
 body[data-state=underwater] .journey-start:hover{background:#075968;border-color:#e2f7ce}
 body[data-state=chapter] .chapter-kicker{font-size:10px;line-height:1.4;letter-spacing:.09em;color:#d9f0e6;margin-bottom:8px}
 body[data-state=chapter] .chapter-body,body[data-state=chapter] .route-caption>p:last-of-type{font-size:clamp(13px,3.55vw,14px);line-height:1.45;max-width:none;color:#f2f7f1;text-shadow:0 1px 8px #002b3de0}
 body[data-state=chapter] .field-cta{font-size:10px;letter-spacing:.075em;line-height:1.45;padding:0 0 0 12px;gap:7px;min-height:44px;justify-content:space-between}
 body[data-state=chapter] .field-cta>span{display:grid;place-items:center;flex:0 0 44px;min-width:44px;min-height:44px;align-self:stretch;border-left:1px solid #c8e8da66;background:#bde9d30d;font:27px/1 Arial,sans-serif;color:#eaf4c8}
 body[data-state=chapter] .photo-dismiss{left:calc(42% - 46px);right:auto;top:2px;width:44px;height:44px;border:0;border-radius:50%;background:#033846b8;font:24px/1 Arial,sans-serif;color:#f3faf0;text-shadow:0 1px 4px #002332}
 body[data-state=chapter] .chapter-actions .narration-replay{font-size:10px;min-height:44px}
 body[data-state=chapter] .photo-restore{font-size:10px;min-height:44px}
}
@media(max-width:700px) and (orientation:portrait){
 body[data-state=chapter] .field-card{margin-top:11px}
 body[data-state=chapter][data-route-zone=calor] .heat-comparison{top:56%;padding:7px 10px}
 body[data-route-zone=calor] .med-map-svg{max-height:112px}
 .heat-adjust label{font-size:8px}.heat-adjust>span{font-size:10px}.heat-adjust input{min-height:40px}
 .trawl-control{top:57%;padding:9px 12px;gap:3px}
 .trawl-control label{font-size:9px}.trawl-control input{min-height:40px}.trawl-control small{font-size:8px;line-height:1.4}
 body[data-state=chapter][data-route-zone=calor] .field-cta,body[data-state=chapter][data-route-zone=arrastre] .field-cta{font-size:9px;min-height:44px;padding-left:12px}
 body[data-state=chapter][data-route-zone=calor] .photo-dismiss,body[data-state=chapter][data-route-zone=arrastre] .photo-dismiss{top:0}
}
@media(max-width:360px) and (orientation:portrait){
 body[data-state=chapter] .chapter,body[data-state=chapter] .route-caption{top:17.5%}
 body[data-state=chapter] .chapter-kicker{font-size:9px;line-height:1.35;margin-bottom:6px}
 body[data-state=chapter] .chapter-body,body[data-state=chapter] .route-caption>p:last-of-type{font-size:13px;line-height:1.4}
 body[data-state=chapter] .field-card{margin-top:9px}
 body[data-state=chapter] .field-open img{height:60px;min-height:60px}
 body[data-state=chapter] .field-cta{font-size:9px;min-height:60px;padding-left:9px;gap:4px}
 body[data-state=chapter] .location{width:108px;font-size:9px;padding:6px 7px;letter-spacing:.01em}
 body[data-state=chapter] .location-detail{font-size:8px;line-height:1.35}
 body[data-state=chapter] #mediterranean-hud{width:60px;height:31px;margin-bottom:3px}
 body[data-state=chapter][data-route-zone=calor] #route-calor{top:17.5%}
 body[data-state=chapter][data-route-zone=calor] .heat-comparison{top:57%;padding:5px 8px}
 body[data-route-zone=calor] .med-map-svg{max-height:75px}
 .heat-adjust label{font-size:7px}.heat-adjust>span{font-size:9px}
 .trawl-control{top:58%;padding:7px 10px;gap:2px}
 .trawl-control small{font-size:7px}
 body[data-state=chapter][data-route-zone=arrastre] .field-open img{height:44px;min-height:44px}
}

/* Mobile photo cards: the photograph leads, with a quiet full-width action below. */
@media(max-width:700px){
 body[data-state=chapter] .chapter[data-reading-panel],body[data-state=chapter] .route-caption[data-reading-panel]{max-height:calc(81.5svh - 118px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b8dcd563 transparent;pointer-events:auto;padding-right:3px;touch-action:pinch-zoom}
 body[data-state=chapter] .field-open{display:block;width:100%}
 body[data-state=chapter] .field-open img,body[data-state=chapter][data-route-zone=arrastre] .field-open img,body[data-state=chapter][data-route-zone=calor] .field-open img{display:block;width:100%;height:clamp(124px,23svh,195px);min-height:124px;max-height:195px;object-fit:cover}
 body[data-state=chapter] .field-cta,body[data-state=chapter][data-route-zone=arrastre] .field-cta,body[data-state=chapter][data-route-zone=calor] .field-cta{display:flex;min-height:44px;height:44px;padding:0 12px;gap:12px;border:0;border-top:1px solid #c8e8da45;font:10px/1.4 Arial,sans-serif;letter-spacing:.06em;justify-content:space-between;background:#043645b3}
 body[data-state=chapter] .field-cta>span{flex:none;min-width:24px;min-height:0;align-self:center;border:0;background:none;font-size:23px;color:#dfedc6}
 body[data-state=chapter] .photo-dismiss,body[data-state=chapter][data-route-zone=arrastre] .photo-dismiss,body[data-state=chapter][data-route-zone=calor] .photo-dismiss{left:7px;right:auto;top:7px;width:48px;height:48px;border:1px solid #e5f1e582;border-radius:50%;background:#073542c9;font:29px/1 Arial,sans-serif;box-shadow:0 2px 9px #001a2940}
 body[data-state=chapter] .field-card{max-width:none;margin-top:12px}
 body[data-state=chapter] .chapter-actions{margin-top:3px}
 body[data-state=chapter] .chapter[data-reading-panel] .trawl-control,body[data-state=chapter] .route-caption[data-reading-panel] .trawl-control,body[data-state=chapter] .route-caption[data-reading-panel] .heat-comparison{position:static;grid-column:1;grid-row:6;width:100%;margin:14px 0 8px;padding:10px 12px}
 body[data-state=chapter][data-route-zone=arrastre] .chapter-actions,body[data-state=chapter][data-route-zone=calor] .chapter-actions{display:flex}
 body[data-state=chapter][data-route-zone=calor] .narration-replay{display:none}
 body[data-state=chapter] .photo-restore[hidden]{display:none}
}
@media(max-width:360px) and (orientation:portrait){
 body[data-state=chapter] .chapter[data-reading-panel],body[data-state=chapter] .route-caption[data-reading-panel]{max-height:calc(82.5svh - 110px)}
 body[data-state=chapter] .field-card{margin-top:9px}
}
@media(max-width:700px) and (orientation:landscape){
 body[data-state=chapter] .chapter[data-reading-panel],body[data-state=chapter] .route-caption[data-reading-panel]{top:24%;max-height:calc(76svh - 82px)}
}

/* v21: leave room for the orbiting cetacean on portrait phones. */
@media(max-width:700px) and (orientation:portrait){
 body[data-state=chapter]:is([data-route-zone=rorcual],[data-route-zone=cachalote]) .field-open{display:grid;grid-template-columns:38% 1fr;align-items:stretch}
 body[data-state=chapter]:is([data-route-zone=rorcual],[data-route-zone=cachalote]) .field-open img{height:84px;min-height:84px;max-height:84px}
 body[data-state=chapter]:is([data-route-zone=rorcual],[data-route-zone=cachalote]) .field-cta{height:auto;min-height:84px;border-top:0;border-left:1px solid #c8e8da45;padding:0 10px;gap:8px;font-size:9px}
 body[data-state=chapter]:is([data-route-zone=rorcual],[data-route-zone=cachalote]) .field-caption{display:none}
}

/* The live reef is visible through the surface shader's animated waterline. */
.live-reef #journey-layer{z-index:-3}
.live-reef #ocean{z-index:-2}
.live-reef #fish-layer{visibility:hidden}