@font-face{font-family:PoseidonSourceSans;src:url('/poseidon/fonts/SourceSans3-Variable.ttf') format('truetype');font-display:swap;font-weight:100 900}@font-face{font-family:PoseidonInstrument;src:url('/poseidon/fonts/InstrumentSans-Variable.ttf') format('truetype');font-display:swap;font-weight:100 900}
:root{font-family:PoseidonSourceSans,Arial,sans-serif;font-synthesis:none;color:#f0f1df;background:#122f38;scroll-behavior:smooth;--gold:#f2c879;--muted:#c8d9d8;--line:#dfefee30}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:6px}#world,.scrim,.vignette{position:fixed;inset:0;pointer-events:none}#world{background:radial-gradient(ellipse at 70% 40%,#31636d,#0a2835)}#world canvas{display:block;width:100%;height:100%}.scrim{background:linear-gradient(90deg,#071e29cc, #071e2955 35%,transparent 68%);z-index:1}.vignette{z-index:1;background:linear-gradient(180deg,#061d2940,transparent 18%,transparent 75%,#051c2870)}header{position:fixed;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:24px 4.5%;gap:20px}.brand{font-family:PoseidonInstrument,Arial,sans-serif;display:flex;align-items:center;gap:10px;font-size:26px;font-weight:600;letter-spacing:-1.1px}.brand img{width:40px;height:40px;object-fit:contain;flex-shrink:0}.top-actions{display:flex;align-items:center;gap:30px}.chapters-button{border:0;background:transparent;font-size:12px;padding:12px 0}.chapters-button span{margin-left:15px;font-size:14px}.store{display:block;padding:10px;background:transparent}.store img{display:block;width:144px;height:48px;object-fit:contain}main{position:relative;z-index:2}section{height:115svh;min-height:740px;position:relative;display:flex;align-items:center;padding:100px 8% 140px}.copy{max-width:620px;will-change:opacity,transform}.eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 30px}h1,h2{font-family:PoseidonInstrument,Arial,sans-serif;font-weight:600;font-size:clamp(68px,7.5vw,112px);line-height:1.02;letter-spacing:-.035em;margin:0 0 30px;text-wrap:balance}h1{font-size:clamp(86px,9vw,140px)}h1 em{font-style:normal;font-size:.76em}h2{font-size:clamp(61px,6.5vw,94px)}.description{font-size:17px;line-height:1.65;font-weight:400;color:var(--muted);letter-spacing:-.015em;margin:0 0 28px}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;font-size:12px;font-weight:600;border:0;border-bottom:1px solid var(--line);padding:0 0 12px;background:transparent}.text-link span{font-size:22px;font-weight:400}.fine{font-size:10px;line-height:1.8;color:#c5d7d3b0;margin:20px 0 0;max-width:360px}.tags{display:flex;gap:20px;font-size:11px;color:var(--muted)}.tags span+span{border-left:1px solid var(--line);padding-left:20px}.scene-caption{position:absolute;right:5%;bottom:150px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:11px;letter-spacing:.01em;color:#e4eeea90;pointer-events:none}.scene-caption span{font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#e4eeea}.scene-caption:before{content:'';width:35px;height:1px;background:var(--line);margin-bottom:8px}.segmented{display:flex;flex-wrap:wrap;gap:7px}.segmented button{padding:11px 16px;border:1px solid var(--line);border-radius:5px;background:#0b243b45;font-size:12px;backdrop-filter:blur(10px);transition:background .25s,color .25s}.segmented button[aria-pressed=true],.segmented button[data-selected]{background:var(--gold);color:#182e33;border-color:var(--gold)}.quiz-feedback{font-size:12px;line-height:1.6;max-width:340px;min-height:55px;margin:18px 0 0;color:var(--gold)}.replay{display:block;margin-top:28px;font-size:11px;color:var(--muted)}footer{position:fixed;bottom:0;left:0;right:0;z-index:8;padding:22px 4.5% 25px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:linear-gradient(transparent,#051b2840)}.chapter-current{display:flex;align-items:center;gap:15px;font-size:10px;min-width:230px}.chapter-current>span:first-child{font-variant-numeric:tabular-nums;color:var(--gold);font-size:12px}.separator{width:30px;height:1px;background:var(--line)}.steps{display:flex;gap:7px}.steps a{width:26px;height:32px;position:relative;display:grid;place-items:center}.steps a:before{content:'';width:18px;height:2px;border-radius:2px;background:#d5e3dd50;transition:background .3s,height .3s}.steps a[aria-current]:before{background:var(--gold);height:4px}.steps a span{position:absolute;top:-16px;font-size:8px;opacity:0}.steps a:hover span,.steps a:focus-visible span{opacity:1}.motion{display:flex;align-items:center;gap:10px;justify-content:flex-end;min-width:160px;border:0;background:transparent;font-size:10px}.motion>span:first-child{display:grid;place-items:center;border:1px solid var(--line);width:32px;height:32px;border-radius:50%;font-size:14px}.motion-label{color:var(--muted)}dialog{border:1px solid #c6dbd230;border-radius:12px;width:min(560px,90vw);max-height:85svh;padding:30px;background:#102c36;color:#e7eee5;box-shadow:0 25px 100px #0006}dialog::backdrop{background:#061521b0;backdrop-filter:blur(12px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;font-family:PoseidonInstrument,Arial,sans-serif;font-size:26px;margin-bottom:22px}.dialog-head button{border:0;background:transparent;font-size:30px;padding:0 8px}dialog nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}dialog nav a{padding:13px 10px;border-bottom:1px solid var(--line);font-size:12px}dialog nav a span{color:var(--gold);margin-right:12px;font-size:10px}dialog nav a:hover{background:#ffffff0a}dialog>p{font-size:11px;color:var(--muted);margin:26px 0 0}#fallback:not([hidden]){position:fixed;bottom:85px;left:5%;right:5%;z-index:9;background:#163341;border:1px solid #b6d2d450;border-radius:6px;padding:14px;font-size:12px}.no-js{position:fixed;top:100px;left:5%;z-index:20}body[data-scene='5'] .scrim,body[data-scene='6'] .scrim,body[data-scene='7'] .scrim{background:linear-gradient(90deg,#061e2ae0,#061e2960 45%,transparent 78%)}
@media(min-width:1500px){section{padding-left:10%}.copy{max-width:680px}}
@media(max-width:700px){header{padding:12px 5%;gap:8px}.brand{font-size:21px;gap:7px}.brand img{width:32px;height:32px}.top-actions{gap:4px}.chapters-button{font-size:0;order:2;width:30px}.chapters-button span{font-size:15px;margin:0}.store{padding:10px}.store img{width:126px;height:42px}section{height:110svh;min-height:790px;align-items:flex-start;padding:122px 7% 120px}.copy{max-width:100%}.eyebrow{font-size:9px;letter-spacing:.14em;margin-bottom:18px}h1{font-size:78px;margin-bottom:20px}h2{font-size:clamp(42px,11.7vw,51px);margin-bottom:18px;line-height:1.03}.description{font-size:13px;line-height:1.65;margin-bottom:20px}.text-link{font-size:11px;gap:23px;padding-bottom:9px}.text-link span{font-size:18px}.fine{font-size:9px;margin-top:13px}.tags{font-size:10px;gap:12px}.tags span+span{padding-left:12px}.segmented{gap:6px}.segmented button{font-size:11px;padding:10px 12px}.quiz-feedback{font-size:11px;max-width:290px}.scene-caption{right:7%;bottom:130px;font-size:9px;gap:6px}.scene-caption span{font-size:8px}.scene-caption:before{display:none}footer{padding:16px 6% max(18px,env(safe-area-inset-bottom));gap:12px;flex-wrap:wrap}.chapter-current{min-width:0;font-size:9px;gap:10px;flex:1}.separator{width:20px}.motion{min-width:0}.motion-label{display:none}.steps{order:3;width:100%;justify-content:space-between;gap:3px}.steps a{height:17px;flex:1}.steps a:before{width:100%;height:2px}.steps a span{display:none}.scrim,body[data-scene='5'] .scrim,body[data-scene='6'] .scrim,body[data-scene='7'] .scrim{background:linear-gradient(180deg,#061c28d9,#061d2970 37%,transparent 67%)}.vignette{background:linear-gradient(transparent 75%,#061b28b0)}dialog{padding:22px}dialog nav{grid-template-columns:1fr}dialog nav a{padding:10px}.final-download{max-width:290px;font-size:11px}}
@media(max-width:370px){.brand{font-size:19px}.store img{width:120px;height:40px}.store{padding:7px}header{padding-left:4%;padding-right:4%}h2{font-size:46px}h1{font-size:72px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*{transition:none!important}.copy{will-change:auto}}
/* Keep the phone view focused on the scene and the primary actions. */
@media(max-width:700px){.scene-caption{display:none}.fine{color:#cbdcd7d0}footer{background:linear-gradient(transparent,#051b28c9)}.steps a{height:28px}.scrim,body[data-scene='5'] .scrim,body[data-scene='6'] .scrim,body[data-scene='7'] .scrim{background:linear-gradient(180deg,#061c28e6,#061d2999 43%,transparent 68%)}}
dialog nav a{display:flex;align-items:center;gap:12px}dialog nav a small{color:var(--gold);font-size:10px}dialog nav a span{margin-left:auto;margin-right:0}.steps a.passed:before{background:#f2c87977}

.vessel-picker{margin-bottom:20px}.vessel-picker button{padding:10px 13px}@media(max-width:700px){.vessel-picker{gap:5px;margin-bottom:15px}.vessel-picker button{padding:9px 10px;font-size:10px}#title-3{font-size:43px}}

/* The native chart fills the viewport; scrolling moves across its printed detail. */
#carte{height:320svh;min-height:2100px;padding:0;display:block}
.chart-sticky{position:sticky;top:0;height:100svh;min-height:560px;padding:0;pointer-events:none}
.chart-intro{position:absolute;top:115px;left:4.5%;padding:20px 24px;background:#f6f5e8e8;color:#17333e;max-width:420px;border-left:2px solid #17333e}
.chart-intro .eyebrow{color:#53676b;margin-bottom:12px;font-size:9px}
#title-5{font-size:48px;letter-spacing:-.05em;margin-bottom:12px}
#carte .description{color:#425c62;font-size:13px;line-height:1.5;margin:0}
.chart-console{position:absolute;left:4.5%;bottom:100px;width:410px;max-width:91%;padding:16px 20px;background:#102c36ed;color:#f0f1df;pointer-events:auto}
.chart-views{display:flex;margin:0 0 12px;gap:6px}.chart-views button{font-size:11px;flex:1;white-space:nowrap}
.chart-zoom-track{height:2px;background:#c5d7d333;margin-bottom:12px}.chart-zoom-track i{display:block;height:100%;background:#f2c879;transform-origin:left;transform:scaleX(var(--chart-progress,0))}
.chart-console-bottom{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:10px}
#chart{font:inherit;border:0;background:none;color:#f2c879;cursor:pointer;padding:5px 0;white-space:nowrap}
.chart-credit{position:absolute;right:4.5%;bottom:100px;padding:7px 10px;background:#f6f5e8e8;color:#27434b;font-size:9px;line-height:1.6;margin:0;text-align:right}
body[data-scene='5'] .scrim,body[data-scene='5'] .vignette{opacity:0}
@media(max-width:700px){#carte{height:340svh;min-height:1900px}.chart-sticky{min-height:0}.chart-intro{top:95px;left:5%;padding:14px 16px;max-width:280px}#title-5{font-size:34px;margin-bottom:8px}.chart-intro .eyebrow{font-size:8px;margin-bottom:8px}#carte .description{font-size:11px}.chart-console{left:5%;bottom:112px;width:90%;max-width:none;padding:12px}.chart-views{gap:3px}.chart-views button{font-size:10px;padding:8px 6px}.chart-console-bottom{font-size:9px;gap:7px}.chart-credit{right:5%;bottom:72px;font-size:8px;padding:4px 7px}}

body[data-scene='5'] header{background:linear-gradient(#061e2ad9,transparent)}body[data-scene='5'] footer{background:linear-gradient(transparent,#061e2aeb)}

/* VHF controls share their state with the physical shafts and LCD. */
.radio-panel{max-width:345px;margin:0 0 25px}.radio-topline{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}#radio-power{background:var(--gold);border:1px solid var(--gold);border-radius:5px;color:#182e33;padding:11px 14px;font-size:12px}#radio-power[aria-pressed=true]{background:#143b3b;color:#d9f2df;border-color:#6eaa92}.channel-control{display:flex;align-items:center;gap:9px;font-size:11px}.channel-control button{width:30px;height:34px;border:1px solid var(--line);background:#112f38;border-radius:4px;font-size:19px}.channel-control output{font-size:16px;font-variant-numeric:tabular-nums;color:var(--gold)}.radio-ranges{display:grid;grid-template-columns:1fr 1fr;gap:20px}.radio-ranges label{font-size:11px;color:var(--muted)}.radio-ranges output{float:right;font-size:10px;font-variant-numeric:tabular-nums}.radio-ranges input{display:block;width:100%;margin:9px 0 0;accent-color:var(--gold);height:22px;cursor:ew-resize}.radio-ranges input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}#radio:disabled{opacity:.4;cursor:default}#radio-interactions{position:fixed;inset:0;z-index:4;pointer-events:none}#radio-interactions[hidden]{display:none}.radio-hotspot{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:1px solid transparent;background:transparent;pointer-events:auto;touch-action:none;padding:0;cursor:pointer}.radio-hotspot[role=slider]{cursor:grab}.radio-hotspot:hover,.radio-hotspot:focus-visible,.radio-hotspot.dragging{border-color:#f2c879cc;background:#f2c87915;box-shadow:0 0 0 4px #f2c87918;outline:none}.radio-hotspot.dragging{cursor:grabbing}
@media(max-width:700px){#vhf{padding-top:108px}#title-6{font-size:43px;margin-bottom:14px}#vhf .description{font-size:12px;margin-bottom:15px}.radio-panel{max-width:320px;margin-bottom:14px}.radio-topline{margin-bottom:10px;gap:12px}#radio-power{font-size:11px;padding:10px 12px}.radio-ranges{gap:16px}.radio-ranges input{margin-top:4px}#radio-status{font-size:9px;max-width:310px}body[data-scene='6'] .scrim{background:linear-gradient(180deg,#061c28ef,#061d2999 47%,transparent 65%)}}

/* Three weather acts in one uninterrupted, native scrolling scene. */
#meteo{height:480svh;min-height:3100px;display:block;padding:0}.weather-sticky{height:100svh;min-height:620px;position:sticky;top:0;display:flex;align-items:center;padding:100px 8% 120px}.weather-sticky .copy{max-width:570px}.weather-timeline{position:relative;display:flex;width:min(360px,100%);padding-bottom:18px;gap:34px}.weather-timeline button{border:0;background:none;padding:8px 0;color:#d3e0db80;font-size:13px;display:flex;gap:9px;align-items:baseline;transition:color .25s}.weather-timeline button span{font-size:9px;font-variant-numeric:tabular-nums}.weather-timeline button[aria-current]{color:var(--gold)}.weather-track{position:absolute;bottom:0;left:0;right:0;height:1px;background:#d3e0db35}.weather-track i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--weather-progress,0))}.weather-note{min-height:36px;max-width:360px;margin-top:18px}.weather-scroll{font-size:8px;letter-spacing:.15em;color:#d3e0db8c;margin-top:28px;display:flex;align-items:center;gap:20px}.weather-scroll span{font-size:19px}.weather-sticky .scene-caption{bottom:130px}body[data-scene='4'] .scrim{background:linear-gradient(90deg,#071e29c9,#071e2940 38%,transparent 65%)}
@media(min-width:1500px){.weather-sticky{padding-left:10%}}
@media(max-width:700px){#meteo{height:500svh;min-height:3300px}.weather-sticky{min-height:0;padding:115px 7% 110px;align-items:flex-start}.weather-sticky h2{font-size:45px;margin-bottom:16px}.weather-sticky .description{margin-bottom:14px}.weather-timeline{width:285px;gap:32px;padding-bottom:10px}.weather-timeline button{font-size:11px}.weather-note{font-size:10px;margin-top:12px;min-height:30px}.weather-scroll{margin-top:14px;font-size:7px}body[data-scene='4'] .scrim{background:linear-gradient(180deg,#061c28da,#061d2970 33%,transparent 57%)}}

#chenal{height:270svh;min-height:2000px;display:block;padding:0}.harbor-sticky{position:sticky;top:0;height:100svh;min-height:650px;display:flex;align-items:center;padding:100px 8% 120px}.harbor-sticky .copy{max-width:560px}.channel-key{display:flex;gap:27px;margin:0 0 24px;font-size:11px;color:#d8e5df}.channel-key span{display:flex;align-items:center;gap:8px}.port-symbol{width:9px;height:12px;background:#f16a59;border-radius:1px}.starboard-symbol{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid #74d5a4}.harbor-daylight{position:relative;display:flex;gap:20px;align-items:center;max-width:310px;margin-top:26px;padding-bottom:14px}.harbor-daylight button{border:0;background:none;font-size:10px;padding:7px 0;color:#d2ded9a0}.harbor-daylight button[aria-current]{color:var(--gold)}.harbor-daylight>span{color:#d2ded970}.harbor-track{height:1px;position:absolute;bottom:0;left:0;right:0;background:#d2ded930}.harbor-track i{display:block;height:1px;background:var(--gold);transform:scaleX(var(--harbor-progress,0));transform-origin:left}.harbor-hint{margin-top:12px}.harbor-sticky .scene-caption{bottom:130px}
@media(min-width:1500px){.harbor-sticky{padding-left:10%}}
@media(max-width:700px){#chenal{height:280svh;min-height:2100px}.harbor-sticky{min-height:0;padding:110px 7% 100px;align-items:flex-start}.harbor-sticky h2{font-size:44px;margin-bottom:14px}.harbor-sticky .description{font-size:12px;margin-bottom:14px}.channel-key{font-size:10px;gap:24px;margin-bottom:15px}.harbor-daylight{margin-top:16px;padding-bottom:8px;max-width:280px}.harbor-daylight button{font-size:10px}.harbor-hint{font-size:8px}body[data-scene='2'] .scrim{background:linear-gradient(180deg,#061c28dc,#061d2966 40%,transparent 65%)}}

#inspect-vessel{display:block;margin-top:.65rem}
@media(max-width:700px){#nuit #rotate,#nuit #inspect-vessel{display:inline-flex;width:calc(50% - 8px);font-size:10px;gap:6px;vertical-align:middle;margin-top:0}#nuit #rotate{margin-right:12px}}

/* A sustained orbit keeps the fleet readable while the viewer scrolls. */
#nuit{height:400svh;min-height:2800px;display:block;padding:0}.fleet-sticky{position:sticky;top:0;height:100svh;min-height:650px;display:flex;align-items:center;padding:100px 8% 120px}.fleet-scroll{margin:0 0 24px;color:#f2c879}.fleet-sticky .scene-caption{bottom:130px}
@media(max-width:700px){#nuit{height:420svh;min-height:2800px}.fleet-sticky{min-height:0;align-items:flex-start;padding:110px 7% 100px}.fleet-sticky h2{font-size:44px}.fleet-scroll{font-size:10px;margin-bottom:16px}.fleet-sticky .scene-caption{bottom:110px}}

/* An uninterrupted scroll passage, between the ten chapters. */
#sea-passage{height:140svh;position:relative;pointer-events:none}
#passage-label{position:fixed;left:0;right:0;bottom:18%;text-align:center;font-size:12px;letter-spacing:.12em;color:#e4eeea;opacity:0;text-shadow:0 2px 18px #02111e;margin:0;padding:0 24px}
body.at-sea .scrim{background:linear-gradient(180deg,#061c2830,transparent 55%,#061c2830)}
body.at-sea #nuit .copy,body.at-sea #nuit .scene-caption{opacity:var(--arrival-copy,0);pointer-events:none}
@media(max-width:700px){#sea-passage{height:120svh}#passage-label{bottom:21%;font-size:10px}}
@media(prefers-reduced-motion:reduce){#sea-passage{height:12svh}#passage-label{display:none}}

#bay-passage{height:160svh;pointer-events:none}#bay-passage-label{position:fixed;bottom:18%;left:5%;right:5%;text-align:center;opacity:0;font-size:12px;letter-spacing:.1em;text-shadow:0 2px 18px #02111e}
body.to-bay .scrim{background:linear-gradient(90deg,#071e2955,transparent 65%)}
body.to-bay #meteo .copy,body.to-bay #meteo .scene-caption{opacity:var(--bay-arrival,0);pointer-events:none}
@media(max-width:700px){#bay-passage-label{font-size:10px;bottom:21%}}
@media(prefers-reduced-motion:reduce){#bay-passage{height:12svh}#bay-passage-label{display:none}}

/* Match the chart crossfade without dimming the outgoing scene abruptly. */
#world .chart-crossfade{position:absolute;inset:0;pointer-events:none}
.scrim,.vignette{transition:opacity .75s ease-in-out}
@media(prefers-reduced-motion:reduce){.scrim,.vignette{transition:none}}

/* Scroll choreography: power, volume, squelch, channel, then the message. */
#vhf{height:360svh;min-height:2400px;padding:0;display:block}
.radio-sticky{position:sticky;top:0;height:100svh;min-height:700px;display:flex;align-items:center;padding:100px 8% 140px}
.radio-sequence{font-size:11px;color:var(--gold);margin:0 0 22px;max-width:345px;padding-bottom:12px;border-bottom:1px solid var(--line);position:relative}
.radio-sequence:after{content:'';position:absolute;bottom:-1px;left:0;height:2px;width:calc(var(--radio-progress,0)*100%);background:var(--gold)}
@media(min-width:1500px){.radio-sticky{padding-left:10%}}
@media(max-width:700px){#vhf{height:380svh;min-height:2400px;padding:0}.radio-sticky{align-items:flex-start;padding:108px 7% 120px;min-height:700px}.radio-sequence{font-size:10px;margin-bottom:12px;padding-bottom:8px}}

/* Reveal the cardinal arrangement, then pull back through the same sea to Alcyon. */
#comprendre{height:300svh;min-height:2100px;padding:0;display:block}
.cardinal-sticky{position:sticky;top:0;height:100svh;min-height:640px;display:flex;align-items:center;padding:100px 8% 140px}
#finale-passage{height:90svh;pointer-events:none}
@media(min-width:1500px){.cardinal-sticky{padding-left:10%}}
@media(max-width:700px){#comprendre{height:320svh}.cardinal-sticky{align-items:flex-start;padding:120px 7% 120px}}
@media(prefers-reduced-motion:reduce){#finale-passage{height:12svh}}

/* Continuous reef orbit, emergence and forward approach to the harbour. */
#reef-passage{height:260svh;pointer-events:none}
#reef-passage-label{position:fixed;bottom:18%;left:5%;right:5%;text-align:center;opacity:0;font-size:12px;letter-spacing:.1em;text-shadow:0 2px 18px #02111e}
body.from-reef .scrim{background:linear-gradient(180deg,#061c2820,transparent 55%,#061c2830)}
body.from-reef #chenal .copy,body.from-reef #chenal .scene-caption{opacity:var(--reef-arrival,0)}
@media(max-width:700px){#reef-passage{height:280svh}#reef-passage-label{font-size:10px;bottom:21%}}
@media(prefers-reduced-motion:reduce){#reef-passage{height:12svh}#reef-passage-label{display:none}}

/* Longer, situational headlines keep room for the demonstration beside them. */
#reperes h1{font-size:clamp(54px,5.4vw,82px);max-width:680px;line-height:1.04}
.brand-signature{font-family:PoseidonInstrument,Arial,sans-serif;font-size:24px;letter-spacing:-.035em;margin:0 0 20px;color:var(--gold)}
#reperes .eyebrow{margin-bottom:14px}
#surface h2,#chenal h2,#nuit h2,#meteo h2,#vhf h2,#comprendre h2,#large h2{font-size:clamp(48px,4.7vw,70px);line-height:1.06;letter-spacing:-.035em}
.copy .description{max-width:490px}
#meteo h2,#vhf h2,#comprendre h2{font-size:clamp(46px,4.1vw,62px)}
@media(max-width:700px){
 #reperes h1{font-size:clamp(32px,9.1vw,44px)}
 .brand-signature{font-size:20px;margin-bottom:14px}
 #surface h2,#chenal h2,#nuit h2,#meteo h2,#vhf h2,#comprendre h2,#large h2{font-size:clamp(30px,8.4vw,42px);margin-bottom:16px}
 #meteo h2,#vhf h2,#comprendre h2{font-size:clamp(28px,7.5vw,38px)}
}

/* Inspect and operate the equipment in the aft cockpit, at a readable scroll pace. */
#securite{height:340svh;min-height:2400px;display:block;padding:0}
.safety-sticky{position:sticky;top:0;height:100svh;min-height:650px;display:flex;align-items:center;padding:100px 8% 120px}
@media(max-width:700px){#securite{height:360svh;min-height:2400px}.safety-sticky{min-height:0;align-items:flex-start;padding:110px 7% 100px}#securite .description{max-width:340px}}

/* Optional soundtrack, independent of the animation pause control. */
.playback-controls{display:flex;align-items:center;gap:20px}.playback-controls .motion{min-width:0}.music-toggle{display:flex;align-items:center;gap:9px;border:0;background:transparent;font-size:11px;padding:0;min-height:44px}.music-symbol{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;font-size:17px}.music-toggle[aria-pressed=true] .music-symbol{color:#182e33;background:var(--gold);border-color:var(--gold)}.music-toggle:disabled{opacity:.5;cursor:default}.music-label{color:var(--muted)}.music-status{position:fixed;z-index:12;right:5%;bottom:94px;max-width:300px;font-size:12px;line-height:1.5;background:#102c36f5;color:#f0f1df;border-radius:6px}.music-status:not(:empty){padding:14px;border:1px solid var(--line)}
@media(max-width:700px){.playback-controls{gap:12px}.music-label{display:none}.music-status{bottom:120px;left:5%;right:5%;max-width:none}.music-toggle,.playback-controls .motion{min-width:44px;min-height:44px;justify-content:center}}

/* Large download badge at the end of the crossing. */
#large .final-download{display:inline-block;width:252px;max-width:100%;line-height:0;border-radius:13px}
#large .final-download img{display:block;width:100%;height:auto}
#large .final-download:hover{opacity:.88}
@media(max-width:700px){#large .final-download{width:216px;border-radius:11px}}