/* First-person prologue. Deliberate scene beats; native, reversible scrolling. */
:root{--bg:#081218;--deep:#050d12;--surface:#101f26;--ink:#eee9df;--accent:#c9b48e}
.header,.header.reading{background:transparent;border:0;backdrop-filter:none;box-shadow:none}
.header .brand img{width:38px;height:38px;object-fit:contain}.header .project-name{letter-spacing:.07em;font-size:11px}.header nav{gap:22px;text-shadow:0 1px 10px #000}
.voyage{height:370svh;background:#06131d}.voyage .opening-stage{height:100svh;min-height:0;background:#06131d}
.voyage .hero-scene{transform:none!important}.voyage .hero-bow,.voyage .ocean-canvas{transform:none;object-position:center;object-fit:cover}
.voyage .hero-shade{pointer-events:none;background:linear-gradient(180deg,#04101b25,transparent 46%,#030d1840),linear-gradient(90deg,transparent 40%,#030d1830)}
.voyage-copy{position:absolute;right:9%;top:23%;max-width:620px;text-shadow:0 2px 28px #02090f88;pointer-events:none}
.voyage-overline{font:400 12px/1.8 Thmanyah,sans-serif;color:#d6c5a6;margin-bottom:20px}
.voyage-sentence{font:400 clamp(35px,5.1vw,76px)/1.48 ThmanyahDisplay,serif;letter-spacing:0}.voyage-sentence em{color:var(--ink)}
.voyage-life{opacity:0;visibility:hidden}.voyage .hero-title{top:17%;inset-inline:5%;text-align:center;pointer-events:none}
.voyage .hero-title h1{font-size:clamp(38px,11.8vw,180px);font-weight:400;line-height:1.15;letter-spacing:-.055em;text-shadow:0 4px 28px #02090f44}
.voyage .hero-arabic{font-size:clamp(24px,2.4vw,36px);line-height:1.8;margin-top:14px}
.enhanced:not(.motion-off) .voyage .hero-title{opacity:0;visibility:hidden}
.voyage-bottom{position:absolute;inset:auto 5% 26px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;font-size:11px}
.voyage .opening-date{position:static;font-size:11px;color:#e2d8c6;text-shadow:0 1px 9px #000}
.voyage .begin{justify-self:center;display:flex;flex-direction:column;gap:12px;margin:0;padding:12px 20px 0;min-height:60px;border:0;color:#f2eadc;font-size:12px;text-shadow:0 2px 10px #000}
.voyage .begin span{font-size:12px}.scroll-stroke{height:33px;width:1px;background:#d8c6a1;transform-origin:top}
.voyage-art{text-align:left;color:#d2c9b9;font-size:10px;text-shadow:0 2px 10px #000}
.yard-reveal{position:absolute;inset:0;clip-path:inset(44% 0 56%);pointer-events:none;background:var(--bg)}
.yard-reveal img{width:100%;height:100%;object-fit:cover;object-position:center}
.yard-shade{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 35%,#07131b30),linear-gradient(90deg,transparent 30%,#06101890)}
.yard-caption{position:absolute;right:9%;bottom:16%;opacity:0;visibility:hidden;pointer-events:none}
.yard-caption>p:last-child{font:400 clamp(33px,4.8vw,70px)/1.55 ThmanyahDisplay,serif;text-shadow:0 3px 30px #0008}
.yard-caption em{color:var(--ink)}
.prologue{padding-block:100px 90px}.chapter-one-heading{max-width:1280px;margin:0 auto 70px;padding:0 var(--space)}.chapter-one-heading>span{color:var(--accent);font-size:13px}.chapter-one-heading h2{margin-top:16px;max-width:850px}
.signature-logo{display:block;width:100px;margin:55px auto 30px}.signature-logo img{width:100%;height:auto}.nathar-ending .signature-title{font-size:clamp(64px,9vw,138px);line-height:1.35;margin:0 0 35px}.nathar-ending .nathar-description{margin-top:20px}
footer .brand img{width:44px;height:44px;object-fit:contain}
@media(max-width:767px){
 .header{gap:14px;padding-inline:22px}.header .project-name{font-size:9px}.header nav{gap:14px}.header .brand img{width:34px;height:34px}
 .voyage{height:330svh}.voyage-copy{right:26px;left:22px;top:23%;max-width:none}.voyage-sentence{font-size:clamp(34px,8.8vw,58px);line-height:1.55}.voyage-overline{font-size:11px;margin-bottom:13px}
 .voyage .hero-title{top:24%;inset-inline:20px}.voyage .hero-title h1{font-size:11.4vw;letter-spacing:-.05em}.voyage .hero-arabic{font-size:26px;max-width:300px;margin:20px auto 0;line-height:1.65}
 .voyage-bottom{inset:auto 24px 20px;grid-template-columns:1fr 1fr;gap:12px}.voyage .begin{grid-column:1/-1;grid-row:1;justify-self:center;padding-bottom:10px}.voyage .opening-date{font-size:9px}.voyage-art{font-size:9px}
 .yard-caption{right:26px;left:24px;bottom:16%}.yard-caption>p:last-child{font-size:36px}.yard-reveal img{object-position:49% center}
 .prologue{padding-block:65px 60px}.chapter-one-heading{margin-bottom:45px}.chapter-one-heading h2{font-size:39px}.signature-logo{width:85px}
}
@media(max-height:550px){.voyage-copy{top:23%}.voyage-sentence{font-size:34px;line-height:1.35}.voyage-overline{font-size:10px;margin-bottom:8px}.voyage .hero-title{top:24%}.voyage .hero-title h1{font-size:10vw}.voyage .hero-arabic{font-size:22px;margin-top:8px}.voyage-bottom{bottom:12px}.voyage .begin{gap:5px;padding-top:0;min-height:40px}.scroll-stroke{height:20px}.yard-caption{bottom:15%}.yard-caption>p:last-child{font-size:35px}}
/* Full composition for reduced motion, no JS, or a failed animation library. */
body:not(.enhanced) .voyage,body.motion-off .voyage{height:auto}
body:not(.enhanced) .voyage .opening-stage,body.motion-off .voyage .opening-stage{position:relative;height:100svh;min-height:560px}
body:not(.enhanced) .voyage .hero-title,body.motion-off .voyage .hero-title{opacity:1!important;visibility:visible!important;transform:none!important;top:19%}
body:not(.enhanced) .voyage-copy,body.motion-off .voyage-copy,body:not(.enhanced) .yard-reveal,body.motion-off .yard-reveal,body:not(.enhanced) .yard-caption,body.motion-off .yard-caption{display:none}
body:not(.enhanced) .voyage-bottom,body.motion-off .voyage-bottom{visibility:visible!important;opacity:1!important}
@media print{.voyage-copy,.voyage-bottom,.yard-reveal,.yard-caption{display:none!important}.voyage .hero-title{opacity:1!important;visibility:visible!important}}
/* Authored interludes, not another zoom on every photograph. */
.story-passage{position:relative;min-height:75svh;height:850px;max-height:100svh;overflow:hidden;margin:0 0 90px;background:var(--deep)}
.story-passage>img{width:100%;height:100%;object-fit:cover}.story-passage:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 30%,transparent 70%,var(--bg)),linear-gradient(90deg,transparent,#04101b80)}
.passage-copy{position:absolute;z-index:1;right:8%;bottom:20%;max-width:700px;font:400 clamp(29px,4vw,58px)/1.65 ThmanyahDisplay;text-shadow:0 2px 25px #000}.passage-copy p+p{color:#e2d5bd}
.story-passage figcaption{position:absolute;z-index:1;bottom:25px;left:5%;font-size:10px;color:var(--muted)}
.wreck-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,#02080daf calc(var(--searchlight,-20%) - 32%),transparent var(--searchlight,-20%),#02080daf calc(var(--searchlight,-20%) + 32%))}
.wreck-title{z-index:2}
.beyond{height:440svh}.beyond-stage{isolation:isolate;background:#050b13}
.sea-return{position:absolute;inset:0;z-index:3;pointer-events:none}.sea-return{overflow:hidden}.sea-return:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#02080c80,transparent 55%,#03091355)}
.horizon-line{position:absolute;z-index:4;right:8%;top:20%;max-width:650px;font:400 clamp(32px,4.7vw,66px)/1.6 ThmanyahDisplay;text-shadow:0 2px 20px #000;pointer-events:none}
.beyond .sky-world{z-index:2;pointer-events:none;clip-path:inset(0)}.beyond .room-world{z-index:1;pointer-events:none}.beyond .journey-promo{z-index:5}
.beyond .sky-dark{background:linear-gradient(0deg,#04101b65,#02081022)}
.nathar-ending{--sans:Thmanyah,sans-serif;text-align:right;background:#05090d}.nathar-ending .nathar-paths{display:block;margin:0;padding-top:64px}.nathar-ending .nathar-paths a{font-size:inherit}.nathar-ending .nathar-star-signature h2{margin:0;letter-spacing:0}.nathar-bridge-title{font:400 clamp(25px,3vw,36px)/1.6 ThmanyahDisplay;margin:0 0 22px}
.nathar-ending .nathar-home img{height:64px;max-width:64px}.nathar-ending .nathar-chat{color:#201c17}.nathar-ending .nathar-bottom>a:last-child{font-size:11px}
body:not(.enhanced) .sea-return,body.motion-off .sea-return,body:not(.enhanced) .horizon-line,body.motion-off .horizon-line{display:none}
body:not(.enhanced) .beyond .sky-world,body.motion-off .beyond .sky-world{opacity:1!important;clip-path:none!important}
body:not(.enhanced) .wreck-scene:after,body.motion-off .wreck-scene:after{display:none}
@media(max-width:767px){.beyond{height:380svh}.horizon-line{right:26px;left:24px;top:19%;font-size:35px}.story-passage{height:80svh;min-height:480px;margin-bottom:60px}.passage-copy{right:24px;left:24px;bottom:18%;font-size:32px}.story-passage figcaption{font-size:9px;left:24px;bottom:20px}.nathar-ending .nathar-paths{padding-top:60px}.nathar-ending .nathar-star-signature h2{font-size:52px}}
@media(max-height:550px){.horizon-line{font-size:32px}.passage-copy{font-size:32px}.story-passage{min-height:360px}}
@media print{.story-passage{height:220px;min-height:0}.passage-copy{font-size:20px}.sea-return,.horizon-line{display:none}}
.beyond .sky-world{--sky-aperture-x:180%;--sky-aperture-y:160%;mask-image:radial-gradient(ellipse var(--sky-aperture-x) var(--sky-aperture-y) at 15% 25%,#000 65%,transparent 100%)}
.nathar-ending .nathar-path-group>a{display:block}.nathar-ending .nathar-path-group>a>span,.nathar-ending .nathar-path-group>a>small{display:block}.nathar-ending .nathar-bridge-title{color:var(--ink)}
body:not(.enhanced) .beyond .sky-world,body.motion-off .beyond .sky-world{mask-image:none}
/* Crop baked-in letterboxing in the supplied galaxy asset; this is not scroll zoom. */
.beyond .sky-world>img{transform:scale(1.34)}

/* Exclusive scene art: hold the photograph before the narrative enters. */
.story-passage>picture{display:block;width:100%;height:100%}
.story-passage>picture img{display:block;width:100%;height:100%;object-fit:cover}
.departure-passage{margin-top:50px}.departure-passage>img{object-position:57% center}
.departure-passage:after{background:linear-gradient(0deg,#071218ed,transparent 68%)}
.watch-passage .passage-copy{max-width:480px;bottom:15%}
.mail-passage .passage-copy{max-width:560px;bottom:12%}
.mail-passage:after{background:linear-gradient(0deg,#04101bf0,transparent 65%)}
/* Empty ocean after the wreck. The same sky remains behind its descending horizon. */
.beyond .sky-world{opacity:1}
.sea-return{inset:43% 0 0;background:#07131c;border-top:1px solid #7593a133}
.sea-return:after{background:linear-gradient(0deg,#03080d99,transparent 80%)}
.open-sea{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#112333,#071620 22%,#030b11)}
.sea-reflection{position:absolute;inset:0;background:radial-gradient(ellipse at 60% -10%,#b6d5df35,transparent 55%)}
.sea-ripples{position:absolute;inset:-25% -5%;background:repeating-linear-gradient(178deg,transparent 0 17px,#5f85941a 18px,transparent 20px 39px);transform:perspective(360px) rotateX(35deg);opacity:.6}
@media(max-width:767px){.departure-passage>img{object-position:59% center}.watch-passage img{object-position:60% center}.mail-passage img{object-position:55% center}.collision-stage .approach{object-position:63% center}.watch-passage .passage-copy,.mail-passage .passage-copy{font-size:29px;bottom:14%}.sea-return{inset-block-start:42%}}

.atlantic-sky{position:absolute;inset:0;background:#040d17 url('media/atlantic-night.svg') center/cover no-repeat;z-index:1}
.sea-return{border-top:0;box-shadow:0 -9px 28px #112333;mask-image:linear-gradient(transparent,#000 12px)}
body:not(.enhanced) .atlantic-sky,body.motion-off .atlantic-sky{display:none}