.brand img { mix-blend-mode:multiply; }
/* Water intro → family → ascent → skyline. Text remains editable HTML. */
header { height:84px; background:transparent; backdrop-filter:none; border-color:#ffffff30; }
header.scrolled { background:#ffffffed; backdrop-filter:blur(14px); }
.hero-track { height:480svh; background:#9aaec8; }
.hero-stage { height:100svh; min-height:560px; isolation:isolate; background:#7b93b5; }
.hero-poster,#hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero-poster { z-index:-3; filter:none; }
#hero-video { z-index:-1; background:transparent; }
.hero-atmosphere { display:none; }
.hero-stage.still #hero-video,.hero-stage.still .hero-atmosphere { display:none; }
.hero-intro { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; color:white; text-align:center; padding:90px 24px 110px; pointer-events:none; text-shadow:0 2px 20px #4b637d25; }
.intro-kicker { font-size:clamp(22px,2.25vw,34px); font-weight:300; letter-spacing:-.055em; margin:0; }
.intro-rule { height:70px; width:1px; background:#ffffffa0; margin:30px 0; }
.intro-title { font-size:clamp(38px,4.1vw,62px); line-height:1.3; font-weight:300; letter-spacing:-.055em; margin:0; }
.intro-en { font-size:10px; letter-spacing:.27em; margin-top:26px; opacity:.65; }
.hero-copy { position:absolute; top:18%; left:6.5%; right:auto; width:80%; max-width:930px; translate:none; transform:translateY(24px); text-align:left; color:white; opacity:0; visibility:hidden; text-shadow:0 2px 22px #16406b45; }
.hero-copy .eyebrow { font-size:10px; letter-spacing:.25em; font-weight:400; opacity:.8; }
.hero-copy h1 { font-size:clamp(34px,4vw,64px); font-weight:300; line-height:1.3; letter-spacing:-.045em; margin:22px 0 24px; }
.hero-copy h1 strong { font-weight:400; }
.hero-copy .hero-project { font-size:clamp(14px,1.5vw,23px); line-height:1.6; letter-spacing:.11em; margin:0; font-weight:300; }
.hero-project br { display:none; }
.hero-project b { font-weight:400; }
.hero-copy .hero-korean { font-size:15px; letter-spacing:-.03em; margin:7px 0 0; opacity:.85; }
.hero-copy .line-link { display:inline-flex; gap:40px; font-size:12px; padding:0 0 9px; margin-top:30px; border-color:#ffffff80; }
.hero-copy .line-link span { font-size:18px; }
.hero-chapters { position:absolute; right:3.5%; top:50%; display:flex; flex-direction:column; gap:18px; transform:translateY(-50%); }
.hero-chapters button { border:0; background:none; color:white; padding:7px 0; display:flex; align-items:center; justify-content:flex-end; gap:10px; font-size:10px; text-shadow:0 1px 5px #173c64; }
.hero-chapters button>span { opacity:0; transition:opacity .2s; }
.hero-chapters i { width:17px; height:1px; background:#ffffff70; transition:width .2s; }
.hero-chapters em { font-style:normal; width:24px; opacity:.6; }
.hero-chapters [aria-pressed=true] i { width:34px; background:white; }
.hero-chapters [aria-pressed=true]>span,.hero-chapters button:hover>span { opacity:1; }
.hero-chapters [aria-pressed=true] em { opacity:1; }
.hero-bottom { bottom:53px; left:6.5%; right:6.5%; text-shadow:0 1px 10px #173c6440; }
.hero-bottom .scroll-cue { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:13px; font-size:9px; letter-spacing:.18em; white-space:nowrap; }
.hero-bottom .scroll-cue i { display:block; width:1px; height:42px; margin:0; background:#ffffff80; }
.hero-count { font-size:12px; font-weight:400; letter-spacing:.1em; }
.hero-count em { font-size:10px; margin:0 8px; }
.hero-skip { margin-left:auto; padding:8px 0; border:0; border-bottom:1px solid #ffffff60; background:none; color:white; font-size:11px; letter-spacing:.04em; }
.hero-skip>span { margin-left:18px; }
.cg-label { right:6.5%; bottom:16px; font-size:10px; opacity:.72; }
.progress { height:2px; background:#ffffff15; }
.progress i { background:#ffffffb0; }
.hero-loading { position:absolute; bottom:100px; left:50%; transform:translateX(-50%); margin:0; color:white; font-size:11px; letter-spacing:.08em; }
.hero-loading[hidden] { display:none; }
.hero-track.is-unavailable { height:100svh; }
.still .hero-chapters,.still .scroll-cue,.still .hero-count { display:none; }
@media(min-width:761px) and (max-height:740px) {
  .hero-copy { top:18%; }
  .hero-copy h1 { font-size:42px; margin:14px 0 15px; }
  .hero-copy .hero-project { font-size:15px; }
  .hero-copy .hero-korean { font-size:12px; }
  .hero-copy .line-link { margin-top:17px; }
}
@media(max-width:760px) {
  header { height:72px; }
  .hero-track { height:510svh; }
  .hero-stage { min-height:520px; }
  /* Keep the family and full orbit in view on a tall phone screen. */
  .hero-atmosphere { display:block; position:absolute; z-index:-2; inset:-5%; width:110%; height:110%; object-fit:cover; filter:blur(22px) brightness(.78); }
  #hero-video { top:calc(32% * var(--wide, 0)); left:calc(-15% * var(--wide, 0)); bottom:auto; width:calc(100% + 30% * var(--wide, 0)); height:calc(100% - 64% * var(--wide, 0)); object-fit:cover; mask-image:linear-gradient(to bottom, rgba(0,0,0,var(--edge,1)), #000 8%, #000 92%, rgba(0,0,0,var(--edge,1))); }
  .hero-poster { object-position:55% 50%; filter:brightness(.8); }
  .hero-intro { padding:80px 22px 170px; justify-content:center; }
  .intro-kicker { font-size:21px; }
  .intro-rule { height:48px; margin:24px 0; }
  .intro-title { font-size:36px; }
  .intro-en { font-size:8px; letter-spacing:.19em; margin-top:22px; }
  .hero-copy { top:16%; left:7%; right:auto; width:86%; max-width:none; }
  .hero-copy h1 { font-size:32px; margin:14px 0 20px; }
  .hero-copy .eyebrow { font-size:8px; }
  .hero-copy .hero-project { font-size:13px; letter-spacing:.08em; }
  .hero-copy .hero-korean { font-size:12px; }
  .hero-copy .line-link { display:none; }
  .hero-chapters { right:7%; top:auto; bottom:133px; flex-direction:row; gap:12px; transform:none; }
  .hero-chapters button { padding:10px 0; }
  .hero-chapters button>span,.hero-chapters em { display:none; }
  .hero-chapters i { width:16px; }
  .hero-chapters [aria-pressed=true] i { width:30px; }
  .hero-bottom { left:7%; right:7%; bottom:55px; }
  .hero-count { display:block; font-size:11px; }
  .hero-bottom .scroll-cue { font-size:8px; }
  .hero-bottom .scroll-cue i { height:28px; }
  .hero-skip { font-size:10px; letter-spacing:0; }
  .cg-label { left:7%; right:7%; bottom:15px; font-size:9px; }
  .hero-loading { bottom:105px; white-space:nowrap; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-track { height:100svh; }
  .hero-chapters i,.hero-chapters button>span { transition:none; }
}

/* Paint the small water image first; reveal video only when a frame is decoded. */
#hero-video{opacity:0;transition:opacity .18s linear}
.hero-stage.video-ready #hero-video{opacity:1}
.hero-stage.still #hero-video{opacity:0}
@media(prefers-reduced-motion:reduce){#hero-video{transition:none}}

/* A fixed portrait composition: no family-scene zoom or aspect-ratio morph. */
.hero-stage{background:#10253b}
.hero-backdrop{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:blur(28px) brightness(.38);z-index:-4;pointer-events:none}
.hero-film{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100%,calc(100svh * 9 / 16));aspect-ratio:9/16;z-index:-1;overflow:hidden;background:#10253b}
.hero-film .hero-poster,.hero-film #hero-video{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center;filter:none;mask-image:none;z-index:0}
.hero-film #hero-video{z-index:1;opacity:0;transition:opacity .2s linear}
.hero-stage.video-ready #hero-video{opacity:1}
.hero-stage.still #hero-video{display:none}
.hero-playback{position:absolute;left:6.5%;bottom:110px;background:#10253b80;border:1px solid #ffffff70;border-radius:20px;padding:9px 13px;color:#fff;font-size:11px;min-height:36px}
.hero-playback[hidden]{display:none}
@media(max-width:760px){
 .hero-track{height:510svh;min-height:520px}
 .hero-stage{height:100svh;min-height:520px}
 .hero-film{width:min(100%,calc(100svh * 9 / 16))}
 .hero-intro{padding-bottom:120px}
 .hero-copy{top:17%;left:7%;width:86%;text-shadow:0 2px 15px #10253b99}
 .hero-playback{left:7%;bottom:108px}
 .hero-chapters{bottom:103px}
 .hero-loading{bottom:151px}
 .hero-count{display:block}
 .hero-bottom .scroll-cue{display:flex}
}
@media(prefers-reduced-motion:reduce){.hero-film #hero-video{transition:none}}
/* Keep the navigation legible above the darker portrait-film surround. */
header{background:#ffffffed;border-color:#d8dfdc80}

/* Keep the static accessibility/error fallback shorter than the scroll story. */
.hero-track.is-unavailable{height:100svh}
@media(prefers-reduced-motion:reduce){.hero-track{height:100svh}}

/* Restore the original wide, full-viewport hero on desktop only. */
@media(min-width:761px){
 .hero-film{inset:0;left:0;top:0;transform:none;width:100%;height:100%;aspect-ratio:auto}
 .hero-film .hero-poster,.hero-film #hero-video{object-fit:cover;object-position:50% 50%}
 .hero-backdrop{display:none}
 .hero-playback{display:none}
 header:not(.scrolled){background:transparent;border-color:#ffffff30}
}