/* ============ Film plates — The Navigators suite ============
   Ambient autoplay loops woven through the page in varied forms:
   full-bleed hero, letterbox bands, side plates beside text, background
   embeds behind content, floating insets, and a closing plate. All plates
   fail open to their posters (no JS / reduced motion / load error). */

/* ---- shared plate anatomy ---- */
.film-band, .fp-media, .film-bg__plate{ position:relative; overflow:hidden; background:#0B1D17 }
.film-band video, .fp-media video, .film-bg__plate video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* ---- letterbox band (wake, weather) ---- */
.film-band{ height:46vh; min-height:340px }
.fb-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,20,15,.10) 0%, rgba(6,20,15,.08) 45%, rgba(6,20,15,.78) 100%) }
.film-band:not(.film-band--hero):not(.film-band--head):not(.film-band--close) .fb-scrim{
  background:linear-gradient(180deg, rgba(6,20,15,.16), rgba(6,20,15,.10) 55%, rgba(6,20,15,.34)) }
.fb-cap{ position:absolute; left:0; right:0; bottom:26px; pointer-events:none; z-index:3 }
.fb-cap .wrap{ max-width:1320px; margin:0 auto; padding:0 40px }
.fb-cap span{ font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
  font-size:clamp(17px,1.35vw,21px); letter-spacing:.01em; color:rgba(247,244,236,.88) }

/* ---- JUNCTIONS: no bridging gradients, ever. -------------------------------
   Warm cream and cold film-black have no good midpoint — interpolating between
   them passes through dead olive, which reads as a printing fault and veils the
   footage. So plates keep honest, crisp edges and the CONTENT carries the eye
   across: a film that heads a section holds that section's title, and the paper
   below opens straight into body copy. A brass plate-rule declares each cut as
   deliberate, the way a hairline sits under a tipped-in plate in a monograph.
   (Scrims INSIDE a frame are fine and stay — they seat text on the image and
   follow the picture's own tonality. It is only surface-to-surface blending
   that is banned.) */
.fb-overlay, .fb-head, .fb-close{ z-index:3 }
.film-band + section, section + .film-band{ border-top:1px solid rgba(201,168,76,.42) }
/* ...but never between two DARK surfaces. A hairline works where paper meets
   film; where the dark Record runs into dark footage it draws a box around the
   clip instead of declaring an edge. Let those two darks simply continue. */
.pedigree + .film-band, .film-band + .pedigree{ border-top:0 }

/* ---- OCCLUSION: the page slides over the film -------------------------------
   The strongest gradient-free transition there is. Inside an .occl-pair the film
   PINS at the top of the viewport while the section beneath it scrolls up and
   covers it — one opaque surface passing over another, the way a sheet of paper
   is drawn across a window. Nothing blends; the transition happens in motion and
   time rather than in pixels of colour. The pair bounds the pin, so the film
   releases at the end of the section that covered it instead of staying stuck
   behind the rest of the document. The brass plate-rule rides up on the
   covering section's top edge — a hairline sweeping across the frame.
   The covering section MUST be opaque, or the film shows through it. */
.occl-pair{ position:relative }
.occl-pair > .film-band{ position:sticky; top:0; z-index:0 }
.occl-pair > section:not(.film-band){ position:relative; z-index:1 }
@media (prefers-reduced-motion: reduce){
  .occl-pair > .film-band{ position:relative } /* plain stacked plates */
}

/* ---- full-bleed hero ---- */
.film-band--hero{ height:100vh; height:100svh; min-height:600px }
/* Scrim weighted to the LEFT, where the type lives, instead of a bar across the
   foot: the harbour's sun path and skyline stay bright on the right — the reason
   to use this frame at all — while the headline gets a dense ground to sit on.
   This is a scrim inside the picture, not a bridge between surfaces. */
.film-band--hero .fb-scrim{
  background:
    linear-gradient(180deg, rgba(6,20,15,0) 45%, rgba(6,20,15,.42) 100%),
    linear-gradient(90deg, rgba(6,20,15,.80) 0%, rgba(6,20,15,.52) 34%, rgba(6,20,15,0) 68%) }
.fb-overlay{ position:absolute; left:0; right:0; bottom:0; padding:0 0 72px }
.fb-overlay .wrap-narrow{ max-width:960px; margin:0 auto; padding:0 40px }
.fb-overlay .eyebrow{ color:#E8CF80 }
.fb-overlay h1{ font-family:'Playfair Display',serif; font-weight:300;
  font-size:clamp(34px,3.6vw,56px); line-height:1.1; letter-spacing:-.02em;
  color:#F7F4EC; margin:18px 0 0; max-width:24ch; text-wrap:balance }
.fb-overlay h1 em{ font-style:italic; font-weight:400; color:#E8CF80 }
.fb-overlay .ab-sub{ margin:22px 0 0; font-size:clamp(16px,1.15vw,19px); line-height:1.7;
  color:rgba(247,244,236,.82); max-width:52ch }
.fb-overlay .id-strip{ margin-top:32px; font-family:'Be Vietnam Pro',system-ui,sans-serif;
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(232,207,128,.82) }

/* ---- section-opener plate: a place, not a block ----------------------------
   These were 60vh strips, and a strip shows BOTH its horizontal edges at once,
   which is exactly what makes a film read as a rectangle pasted onto the page.
   At full height you never see two edges together, so the film stops being an
   object and becomes somewhere you have arrived — the same reason the side
   plates fill their column. */
.film-band--head{ height:100vh; height:100svh; min-height:520px }
.film-band--head video{ object-position:60% 50% } /* keeps both figures when width-cropped on mobile */
.film-band--head .fb-scrim{
  background:linear-gradient(180deg, rgba(6,20,15,.14) 0%, rgba(6,20,15,.10) 40%, rgba(6,20,15,.82) 100%) }
.fb-head{ position:absolute; left:0; right:0; bottom:0; padding:0 0 44px }
.fb-head .wrap{ max-width:1320px; margin:0 auto; padding:0 40px }
.fb-head h2{ font-family:'Playfair Display',serif; font-weight:300;
  font-size:clamp(30px,3vw,46px); line-height:1.12; letter-spacing:-.02em;
  color:#F7F4EC; margin:16px 0 0; text-wrap:balance }
.fb-head h2 em{ font-style:italic; font-weight:400; color:#E8CF80 }
.fb-head .eyebrow{ color:#E8CF80 }
.fb-head .fb-line{ display:block; margin-top:14px; font-family:'Playfair Display',serif;
  font-style:italic; font-weight:400; font-size:clamp(16px,1.25vw,20px);
  color:rgba(247,244,236,.85) }

/* ---- split section: text beside a bleeding side plate (cockpit, story) ---- */
.fp-split{ display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); align-items:stretch }
.fp-split--left{ grid-template-columns:minmax(0,54fr) minmax(0,46fr) }
/* The outer pad tracks the 1320 page grid so the column lines up with the
   full-width sections — but CAPPED. Uncapped, every extra pixel of viewport
   width became empty left margin instead of measure: at 1920 the column was
   883px wide with 340px of it blank, and the text measure (479px) was no wider
   than at 1280. The cap turns that surplus into breathing room on the inside
   edge, where it belongs, next to the film. */
.fp-split .fp-copy{ display:flex; flex-direction:column; justify-content:center;
  padding:64px 56px 64px clamp(40px, calc((100vw - 1320px)/2 + 40px), 120px) }
.fp-split--left .fp-copy{ padding:64px clamp(40px, calc((100vw - 1320px)/2 + 40px), 120px) 64px 56px }
/* Side plates fill the viewport while their section is being read, so their
   horizontal edges are off screen during the read — the only edge you see is the
   clean vertical one against the text column. The top/bottom margins are paper
   GUTTERS: they guarantee a full-width band of page between this plate and any
   film above or below it, so two photographs never butt (which reads as a
   glitch, not an edit). No feathering, no blending. */
.fp-split .fp-media{ position:sticky; top:0; height:100vh; height:100svh;
  align-self:start; margin:64px 0 120px } /* 64 = .fp-copy padding-top: the
  plate's top edge sits on the same line as the text block's, so the two columns
  start together instead of missing each other by a few pixels */
/* --fit: a true one-screen spread. The section is exactly one viewport and the
   plate fills its column MINUS the paper gutters, so nothing scrolls within the
   section — the copy and the film are read together as a single opening.
   (Without this the section is 100vh + gutters tall, so the page scrolls past
   it even when the text itself fits the screen easily.) Sections whose copy is
   genuinely longer than a screen — the alignment ledger — keep the sticky plate
   instead, so the film holds its shape while the list scrolls. */
.fp-split--fit{ min-height:100vh; min-height:100svh }
.fp-split--fit .fp-media{ position:relative; top:auto; height:auto; align-self:stretch }

@media (max-width:980px){
  .fp-split, .fp-split--left{ grid-template-columns:1fr }
  .fp-split .fp-media{ position:static; height:54vw; order:-1; align-self:auto }
  .fp-split .fp-copy, .fp-split--left .fp-copy{ padding:64px 28px }
}

/* ---- background embed: content floats over live footage (record) ---- */
.film-bg{ position:relative }
.film-bg__plate{ position:absolute; inset:0 }
/* flat veil, not an edge-fade: it seats the counters on the footage and holds
   an even density right to the section's own crisp edges */
.film-bg__plate::after{ content:''; position:absolute; inset:0;
  background:rgba(6,18,14,.76) }
.film-bg > .wrap, .film-bg > div:not(.film-bg__plate){ position:relative; z-index:1 }

/* ---- floating inset plate inside a content section (winch) ---- */
.fp-head-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:56px; align-items:center; margin-bottom:72px }
.fp-inset{ position:relative; overflow:hidden; background:#0B1D17; aspect-ratio:16/9;
  box-shadow:0 30px 70px -30px rgba(6,20,15,.45) }
.fp-inset video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.fp-inset::after{ content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(232,207,128,.28) }
@media (max-width:980px){
  .fp-head-grid{ grid-template-columns:1fr; gap:36px; margin-bottom:52px }
}

/* ---- closing plate: the page ends inside the film (home port) ---- */
.film-band--close{ height:88vh; min-height:620px }
.film-band--close .fb-scrim{
  background:linear-gradient(180deg, rgba(6,20,15,.30) 0%, rgba(6,20,15,.16) 40%, rgba(6,20,15,.86) 100%) }
.fb-close{ position:absolute; inset:0; display:flex; align-items:flex-end }
.fb-close .wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0 40px 84px }
.fb-close .eyebrow{ color:#E8CF80 }
.fb-close h2{ font-family:'Playfair Display',serif; font-weight:300;
  font-size:clamp(34px,3.6vw,54px); line-height:1.1; letter-spacing:-.02em;
  color:#F7F4EC; margin:18px 0 0; max-width:22ch; text-wrap:balance }
.fb-close h2 em{ font-style:italic; font-weight:400; color:#E8CF80 }
.fb-close p{ margin:20px 0 0; font-size:clamp(16px,1.15vw,19px); line-height:1.7;
  color:rgba(247,244,236,.80); max-width:52ch }
.fb-close .cta-row{ margin-top:40px; display:flex; gap:14px; flex-wrap:wrap }

@media (max-width:720px){
  .film-band{ height:38vh; min-height:250px }
  .film-band--hero{ height:86vh }
  .film-band--head{ height:52vh; min-height:360px }
  .film-band--close{ height:82vh; min-height:540px }
  .fb-overlay{ padding-bottom:52px }
  .fb-cap .wrap, .fb-head .wrap, .fb-close .wrap{ padding-left:28px; padding-right:28px }
  .fb-close .wrap{ padding-bottom:64px }
}