/* FLIGHT / LOCATION / TYPOGRAPHY — reusable graphic families. */
.title-destination { font-family:var(--font-destination,var(--font-script)); font-size:clamp(7rem,17vw,18rem); letter-spacing:-.055em; line-height:1.3; }
.hero-title h1 { margin:-.15em 0 .12em; }
.hero .hero-title { margin-top:-1rem; }
.hero-title>.meta { letter-spacing:.6em; }
.title-film { font-weight:300; font-size:clamp(2.7rem,6vw,6rem); line-height:.96; letter-spacing:-.065em; }
.title-film strong { font-weight:800; }
.motion-line { display:block; overflow:hidden; padding:.08em .1em .14em 0; margin:-.08em -.1em -.14em 0; }
.motion-line>span { display:block; }
.title-coordinate { display:flex; align-items:center; gap:1rem; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }
.title-coordinate:before { content:''; height:1px; width:2rem; background:currentColor; }
.info-flight { display:flex; align-items:center; gap:1.5rem; padding:1.5rem 0; max-width:390px; }
.info-flight .airport-code { display:block; font-size:2.7rem; font-weight:300; line-height:1.1; letter-spacing:-.06em; }
.info-flight small { font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; }
.flight-connector { flex:1; display:flex; align-items:center; gap:.7rem; min-width:45px; }
.flight-connector:before,.flight-connector:after { content:''; height:1px; flex:1; background:currentColor; opacity:.5; }
.flight-connector svg { width:1.1rem; height:1.1rem; }
.travel-window { display:flex; gap:1rem; align-items:center; margin-top:2rem; }
.travel-window .meta { font-size:.65rem; }
.travel-dates { display:flex; gap:.45rem; list-style:none; padding:0; margin:0; }
.travel-dates li { font-size:.7rem; width:1.55rem; height:1.7rem; display:grid; place-items:center; border-bottom:1px solid var(--color-line); }
.travel-dates .on-trip { border-color:var(--color-accent-ink); color:var(--color-accent-ink); }
.info-locator { position:absolute; left:var(--gutter); top:2.5rem; z-index:5; color:white; display:flex; gap:1rem; align-items:center; }
.locator-cross { width:1rem; height:1rem; border-left:1px solid currentColor; border-top:1px solid currentColor; }
.info-locator strong { display:block; font-size:.72rem; letter-spacing:.2em; }
.info-locator small { font-size:.65rem; letter-spacing:.06em; }
.info-weather { column-gap:1.3rem; }
.info-weather .statistic { font-size:6rem; }
.info-weather .travel-icon { stroke-width:1; }
.info-weather .weather-detail { padding-top:.7rem; border-top:1px solid #ffffff60; }
.graphic-overlay { position:relative; color:white; }
.graphic-overlay .graphic-panel { position:relative; z-index:2; }
.reel-caption { display:flex; align-items:center; gap:1rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
.reel-caption:before { content:''; width:6px; height:6px; border:1px solid var(--color-accent); border-radius:50%; }
/* The map is the one extended pinned scene. Reef strips remain a triggered cut. */
.reef-sequence { height:calc(var(--journal-svh, 1svh) * 85); min-height:550px; }
.reef-frame { position:relative; height:100%; min-height:0; }
.reef-trigger { top:27%; }
.reef-intro .title-editorial { letter-spacing:-.055em; }
.night-scene .photo { border-radius:0; }
.night-scene .photo-caption { bottom:2.3rem; }
/* FLAT MAP — all map coordinates live in a single equirectangular plane. */
.map-journey { position:relative; color:var(--color-white); background:#020712; }
.map-journey.map-ready:not(.map-demo):not(.map-still) { height:calc(var(--journal-svh, 1svh) * 270); }
.map-stage { position:relative; height:calc(var(--journal-svh, 1svh) * 100); min-height:600px; overflow:hidden; isolation:isolate; background:#020712; }
.map-ready:not(.map-demo):not(.map-still)>.map-stage { position:sticky; top:0; }
.map-sheet { display:block; width:100%; height:100%; }
.is-map-ready .map-sheet { position:absolute; top:0; left:0; width:2400px; height:2100px; max-width:none; transform-origin:0 0; }
.map-route-draw { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; }
.map-waypoint { fill:var(--color-accent); }
.map-static-label { fill:white; font:40px var(--font-sans); letter-spacing:3px; }
.is-map-ready .map-static-label { display:none; }
.map-stage:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#02071290,transparent 45%),linear-gradient(0deg,#020712d9,transparent 25%,transparent 85%,#02071280); pointer-events:none; z-index:2; }
.map-heading { position:absolute; top:7rem; left:var(--gutter); z-index:4; max-width:390px; }
.map-heading .title-film { font-size:clamp(2.5rem,4.8vw,5.2rem); margin:1.7rem 0; }
.map-heading .title-coordinate { color:#dce7eb; }
.map-heading .meta { font-size:.65rem; }
.map-heading .map-lead { max-width:260px; font-size:.8rem; color:#c4d0d3; line-height:1.8; }
.map-marker { position:absolute; top:0; left:0; z-index:3; display:none; pointer-events:none; }
.is-map-ready .map-marker { display:block; }
.marker-node { position:absolute; width:8px; height:8px; left:-4px; top:-4px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 0 5px #67d2df20; }
.marker-label { position:absolute; left:18px; top:-10px; width:max-content; max-width:160px; color:white; text-shadow:0 1px 10px #000; }
.marker-label strong { display:block; font-weight:600; font-size:.8rem; letter-spacing:.16em; line-height:1.6; }
.marker-label small { display:block; font-size:.65rem; letter-spacing:.05em; color:#d1e1e4; line-height:1.7; }
.map-marker.label-left .marker-label { left:auto; right:18px; text-align:right; }
.map-flight-head { display:none; position:absolute; top:0; left:0; z-index:3; transform-origin:0 0; color:white; pointer-events:none; }
.is-map-ready .map-flight-head { display:block; }
.map-flight-head .travel-icon { position:absolute; left:-10px; top:-10px; width:20px; height:20px; stroke-width:1.3; }
.map-footer { position:absolute; left:var(--gutter); right:var(--gutter); bottom:2.25rem; z-index:4; display:flex; justify-content:space-between; align-items:end; gap:2rem; }
.map-footer .info-flight { padding:0; width:290px; }
.map-footer .airport-code { font-size:2.2rem; }
.map-footer .flight-note { display:block; font-size:.65rem; color:#c4d0d3; margin-top:1rem; letter-spacing:.04em; }
.map-progress { width:240px; }
.map-progress .meta { font-size:.65rem; letter-spacing:.13em; }
.map-progress-track { margin-top:.85rem; height:1px; width:100%; background:#ffffff40; }
.map-progress-fill { display:block; height:1px; width:100%; transform-origin:left; background:var(--color-accent); }
.map-skip { display:inline-block; margin-top:1.2rem; font-size:.7rem; border-bottom:1px solid #ffffff80; padding-bottom:.2rem; }
.map-still.map-journey { height:auto; }
.map-demo .map-stage { height:650px; min-height:500px; }
.map-demo .map-heading { top:2rem; }
.map-demo .map-heading .title-film { font-size:3.2rem; }
.map-demo .map-heading .map-lead { display:none; }
.map-demo-controls { display:flex; gap:1rem; padding:1.25rem 1.5rem; align-items:center; flex-wrap:wrap; background:var(--color-paper); color:var(--color-ink); }
.map-demo-controls label { font-size:.8rem; }
.map-demo-controls input { flex:1; min-width:140px; accent-color:var(--color-accent-ink); }
.map-demo-controls output { min-width:3ch; font-size:.75rem; }
.map-demo-controls button { background:transparent; padding:.5rem .75rem; border:1px solid var(--color-line); font-size:.75rem; }
.map-demo-controls .map-seeks { display:flex; gap:.4rem; }
/* STYLE LAB: visible effect first; compact recipes on demand. */
.lab-family-note { display:flex; gap:1rem; align-items:baseline; justify-content:space-between; padding:1rem 0 2rem; color:var(--color-muted); font-size:.85rem; }
.lab-family-note .meta { color:var(--color-accent-ink); white-space:nowrap; font-size:.65rem; }
.lab-mode { display:inline-block; font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:var(--color-muted); margin-bottom:.8rem; }
.lab-detail details { margin-top:1rem; border-top:1px solid var(--color-line); padding-top:.6rem; }
.lab-detail summary { cursor:pointer; font-size:.75rem; padding:.4rem 0; }
.lab-detail pre { max-height:290px; }
.lab-actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.lab-stage--photo { background:#0b1111; isolation:isolate; }
.lab-stage--photo>img { position:absolute; inset:0; opacity:.42; }
.lab-stage--photo>.graphic-panel { position:relative; z-index:2; }
.lab-wide { grid-column:1/-1; min-width:0; }
.lab-wide .lab-detail { border:1px solid var(--color-line); }
.lab-workflow { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; border-top:1px solid var(--color-line); padding-top:1.5rem; }
.lab-workflow p { font-size:.8rem; margin:0; }
.lab-workflow strong { display:block; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.5rem; }
.transition-shot { position:relative; overflow:hidden; width:100%; aspect-ratio:16/10; background:#102825; isolation:isolate; }
.transition-shot>img { position:absolute; inset:0; }
.shot-to { z-index:1; }
.shot-from { z-index:2; opacity:0; }
.shot-echo { position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none; }
.shot-echo img { position:absolute; inset:0; }
.transition-caption { position:absolute; z-index:5; bottom:1.25rem; left:1.25rem; color:white; text-shadow:0 1px 15px #000; }
.lab-stage .transition-shot { height:300px; }
@media(max-width:1000px) {
  .map-heading { max-width:270px; }
  .map-heading .title-film { font-size:3.4rem; }
  .map-heading .map-lead { display:none; }
  .map-demo .map-heading { max-width:200px; }
  .map-demo .map-heading .title-film { font-size:2.5rem; }
}
@media(max-width:760px) {
  .hero .title-destination { font-size:clamp(5.5rem,24vw,11rem); }
  .hero-title h1 { margin:.05em 0 .2em; }
  .closing-content .title-destination { font-size:clamp(5.5rem,23vw,10rem); }
  .travel-window { margin-top:1.5rem; flex-wrap:wrap; }
  .info-flight { max-width:300px; gap:1rem; }
  .info-flight .airport-code { font-size:2.2rem; }
  .scene-title .info-weather { display:grid; }
  .scene-title .info-weather .statistic { font-size:3.2rem; }
  .scene-title .info-weather .weather-detail { display:none; }
  .scene-title .info-weather>div:nth-child(3) { display:none; }
  .scene-title .info-weather { grid-template-columns:1fr; flex-shrink:0; }
  .scene-title .info-weather .statistic { line-height:1.1; }
  .scene-title>div:first-child { min-width:0; }
  .scene-title .info-weather .meta { font-size:.6rem; }
  .scene-title { align-items:end; gap:1rem; }
  .scene-title .title-film { font-size:2.8rem; }
  .info-locator { top:1.5rem; }
  .map-journey.map-ready:not(.map-demo):not(.map-still) { height:calc(var(--journal-svh, 1svh) * 250); }
  .map-stage { height:calc(var(--journal-svh, 1svh) * 100); min-height:620px; }
  .map-heading { top:5rem; max-width:240px; }
  .map-heading .title-film { font-size:2.35rem; margin:.8rem 0; }
  .map-heading .title-coordinate { font-size:.6rem; }
  .map-heading .title-coordinate:before { width:1rem; }
  .map-heading .meta { font-size:.6rem; }
  .map-footer { bottom:1.5rem; gap:1rem; align-items:end; }
  .map-footer .info-flight { width:145px; gap:.6rem; }
  .map-footer .airport-code { font-size:1.65rem; }
  .map-footer .info-flight small { font-size:.55rem; }
  .map-footer .flight-connector { min-width:30px; gap:.2rem; }
  .map-footer .flight-note { display:none; }
  .map-progress { width:140px; }
  .map-progress .meta { font-size:.58rem; letter-spacing:.05em; }
  .map-skip { font-size:.65rem; }
  .marker-label strong { font-size:.72rem; }
  .marker-label small { font-size:.6rem; }
  .map-demo .map-stage { height:650px; }
  .map-demo .map-heading { top:1.5rem; }
  .map-demo .map-heading .title-film { font-size:2rem; }
  .map-demo-controls { gap:.6rem; padding:1rem; }
  .map-demo-controls input { min-width:100px; }
  .map-demo-controls .map-seeks { width:100%; }
  .lab-workflow { grid-template-columns:1fr; gap:1rem; }
  .lab-family-note { display:block; }
  .lab-family-note .meta { margin-bottom:.5rem; }
  .lab-stage .transition-shot { height:260px; }
  .reef-sequence { height:calc(var(--journal-svh, 1svh) * 80); min-height:500px; }
}
html.motion-off .map-journey.map-ready:not(.map-demo):not(.map-still) { height:auto; }
html.motion-off .map-ready:not(.map-demo):not(.map-still)>.map-stage { position:relative; }