@font-face{font-family:Manrope;src:url('assets/Manrope.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
/* Font hierarchy: elegant serif display, small technical accents, clean sans body. */
@font-face{font-family:Orbitron;src:url('assets/Orbitron.ttf') format('truetype');font-style:normal;font-weight:400 900;font-display:swap}
:root{--font-display:'Times New Roman',Times,Georgia,serif;--font-accent:Orbitron,sans-serif;--font-body:Manrope,system-ui,sans-serif}
body{font-family:var(--font-body)}
.film h1,.sea-intro h2,.statement h2,.chapter h2,.two-up h3,.contact h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.045em;line-height:1.02}
.film h1{font-size:clamp(76px,8.4vw,128px);max-width:850px;margin:24px 0 36px;line-height:.94}
.film h1 em,.statement h2 em,.contact em{font-family:var(--font-display);font-size:1em;font-style:italic;font-weight:400;letter-spacing:-.045em;line-height:inherit}
.sea-intro h2{font-size:clamp(80px,8.4vw,128px)}
.statement h2{font-size:clamp(44px,5vw,72px)}
.chapter h2{font-size:56px}.two-up h3{font-size:42px}
.contact h2{font-size:clamp(76px,8.4vw,128px)}
.film-copy>.label,.sea-intro-copy>.label{font-family:var(--font-accent);font-size:11px;font-weight:400;letter-spacing:.10em;line-height:1.7}
@media(max-width:700px){.film h1{font-size:68px;line-height:.97;margin-top:24px;max-width:100%}.film-copy>.label,.sea-intro-copy>.label{font-size:9px;letter-spacing:.07em}.sea-intro h2{font-size:64px}.statement h2{font-size:42px}.chapter h2{font-size:42px}.two-up h3{font-size:36px}.contact h2{font-size:64px}}

.label{font-family:var(--font-accent);font-weight:400;letter-spacing:.07em}.back{font-family:var(--font-body)}

/* Keep the opening column clear of the boat and its mast. */
.film h1{font-size:clamp(70px,7.6vw,112px);max-width:520px}
.film-bottom{max-width:480px;gap:32px}.film-bottom p{margin:0;font-size:17px}
.scene-pixels{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}
.camera-off .scene-pixels{display:none}
@media(max-width:700px){.film h1{font-size:62px;line-height:.96;margin-bottom:24px}.film-image{object-position:44% 50%}.film-copy{padding-top:36px}.film-bottom{position:relative;inset:auto;display:block;width:175px}.film-bottom p{font-size:14px;line-height:1.6}.film-bottom .circle{margin-top:24px}.film-copy>.label{font-size:8px}.film-foot>span{max-width:145px}}
@media(prefers-reduced-motion:reduce){.scene-pixels{display:none}}

@media(max-width:700px){header nav .extra{display:inline}header nav{gap:16px;font-size:13px}}

/* One continuous dark grid, followed by three measured reading beats. */
.sea-sequence{height:320svh}.work{padding-top:36px;padding-bottom:72px}
.work .chapter,.work .two-up article{display:grid;grid-template-columns:1fr 2fr 1.3fr;gap:32px;align-items:start;padding:88px 0;border-bottom:1px solid #ffffff25}
.work .two-up{display:block;padding:0}.work .two-up h3{font-size:56px;line-height:1.03;letter-spacing:-.04em;margin:0}.work .two-up p{margin:0;max-width:none}
.motion #work article.reveal{opacity:var(--entry-opacity,0);transform:translateY(var(--entry-shift,28px));transition:none}
@media(max-width:700px){.sea-sequence{height:300svh}.work{padding-top:24px}.work .chapter,.work .two-up article{grid-template-columns:1fr;gap:24px;padding:56px 0}.work .two-up h3{font-size:42px}}
.camera-off .sea-sequence{height:100svh}
@media(prefers-reduced-motion:reduce){.sea-sequence{height:100svh}.motion #work article.reveal{opacity:1;transform:none}}

/* Original whole-scene halftone treatment informed by General Learning. */
.sea-sequence{background:#030609}.sea-sequence .film{mask-image:radial-gradient(circle at center,#000 var(--dot-radius,5px),transparent calc(var(--dot-radius,5px) + .2px));mask-size:var(--dot-cell,6px) var(--dot-cell,6px);filter:grayscale(var(--scene-mono,0))}
.camera-off .sea-sequence .film{mask-image:none;filter:none}
@media(prefers-reduced-motion:reduce){.sea-sequence .film{mask-image:none;filter:none}}

/* Full-scene particle contraction and release, revealing the real Work section. */
.sea-sequence{background:transparent;z-index:3;pointer-events:none}.sea-sequence .film{mask-image:none;filter:none;background:rgba(3,6,9,var(--scene-bg,1))}.film header,.film [data-camera],.film-copy a,.sea-intro a{pointer-events:auto}
.film-image,.shade,.film header,.film .sea-intro,.film-foot,.film:after,.sea-progress{visibility:visible;filter:opacity(var(--scene-original,1))}.scene-pixels{opacity:var(--scene-canvas,0)}
.work{position:relative;z-index:2;margin-top:-100svh}
.camera-off .work{margin-top:0}.camera-off .film-image,.camera-off .shade,.camera-off .film header,.camera-off .film-foot{filter:none}
@media(prefers-reduced-motion:reduce){.work{margin-top:0}.film-image,.shade,.film header,.film-foot{filter:none}}

/* Extra scroll distance gives the stationary dot scene and rotating disc their own beats. */
@media(prefers-reduced-motion:no-preference){body:not(.camera-off) .sea-sequence{height:460svh}}

/* September refinement: keep the existing composition and simplify the digital release. */
.film-foot{justify-content:flex-end}.story-coming{padding:80px 7vw;background:#030609;border-top:1px solid #ffffff25}.story-coming h2{font:400 clamp(42px,5vw,72px)/1.05 var(--font-display);margin:0 0 24px;letter-spacing:-.045em}.story-coming p{color:#b7c7d1}.highlights-heading{font:400 clamp(56px,6vw,88px)/1 var(--font-display);margin:48px 0 64px;letter-spacing:-.045em}.highlights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}.highlight-card{border-top:1px solid #ffffff25;padding:24px 0}.highlight-card h3{font:400 36px/1.1 var(--font-display);margin:24px 0 16px}.highlight-card p{color:#c5cdd2;font-size:16px}.highlight-card .text-link{font-size:14px}.highlight-card .label{font-size:10px}.highlight-card img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:24px}.highlights-grid a:focus-visible{outline:2px solid white;outline-offset:6px}@media(max-width:700px){.highlights-grid{grid-template-columns:1fr;gap:24px}.story-coming{padding:64px 24px}.highlights-heading{margin:32px 0 48px}}
@media(prefers-reduced-motion:no-preference){body:not(.camera-off) .sea-sequence{height:380svh}}