:root{
  /* Hiiro LP QUICK EDIT: 色を変えるときはここだけ編集 */
  color-scheme:dark;
  --bg:#080d13;
  --fg:#e9f0f3;
  --muted:#8c9da8;
  --cyan:#34d7e8;
  --hero-fade-start:76%; /* 大きいほど下の方から暗くなる */
  --hero-fade-mid:91%;
  --hero-fade-mid-opacity:.22;
  --hero-fade-end-opacity:1;
  --body-copy-size:clamp(16px,1.8vw,20px);
  --section-space:clamp(110px,14vw,210px);
}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}a{color:inherit}.hero{position:relative;width:100%;height:100svh;min-height:520px;overflow:hidden;background:#080d13}.hero-video,.hero-fallback,.hero-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-video{z-index:1}
/* 動画の最下部だけを次のセクションと同じ色へ溶かす。動画の文字も薄くなるため強さは控えめ。 */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent var(--hero-fade-start),rgba(8,13,19,var(--hero-fade-mid-opacity)) var(--hero-fade-mid),rgba(8,13,19,var(--hero-fade-end-opacity)) 100%)}.hero-fallback{z-index:0}.hero-fallback img{display:block}.scroll-cue{position:absolute;z-index:3;left:50%;bottom:max(19px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:#f1f7fa;font-size:9px;letter-spacing:.25em;text-shadow:0 1px 8px #000;white-space:nowrap}.scroll-line{width:1px;height:28px;background:linear-gradient(var(--cyan),transparent)}.section{padding:var(--section-space) 28px;background:radial-gradient(ellipse at 83% 8%,rgba(34,143,170,.07),transparent 45%),var(--bg)}.section-alt{background:radial-gradient(ellipse at 14% 42%,rgba(44,153,182,.09),transparent 55%),#0b131b}.section-inner{max-width:740px;margin:auto}.eyebrow{color:var(--cyan);letter-spacing:.24em;font-size:10px;margin:0 0 28px}.section h2{font-size:clamp(23px,3.5vw,38px);font-weight:300;letter-spacing:.1em;margin:0 0 72px}.section-en{display:block;color:var(--muted);font-size:10px;letter-spacing:.22em;margin-top:14px}.verse{padding-left:clamp(0px,5vw,64px);border-left:1px solid rgba(52,215,232,.2)}.verse p{font-size:var(--body-copy-size);line-height:2.25;letter-spacing:.08em;margin:0 0 54px}.verse p:last-child{margin-bottom:0}.verse strong{font-weight:400;color:#e7fcff}footer{border-top:1px solid #23313b;padding:36px 7vw 52px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:11px;letter-spacing:.13em}footer span:first-child{color:var(--cyan);font-size:22px;letter-spacing:.25em}footer small{margin-left:auto;font-size:9px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.reveal{opacity:0;transform:translateY(22px);transition:opacity 850ms ease,transform 850ms ease}.reveal.visible{opacity:1;transform:none}@media(max-width:700px){.hero{height:100svh;min-height:0}.hero-video,.hero-fallback img{object-position:center center}.section{padding:110px 26px}.section h2{margin-bottom:60px}.verse{padding-left:17px}.verse p{font-size:16px;margin-bottom:45px}footer small{width:100%;margin-left:0}.scroll-cue{bottom:max(10px,env(safe-area-inset-bottom));font-size:8px;opacity:.75}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll-line{height:18px}}

/* PRESENCE / LINE */
.presence{background:radial-gradient(ellipse at 75% 20%,rgba(52,215,232,.085),transparent 55%),var(--bg);padding-bottom:clamp(120px,15vw,220px)}
.presence-copy{margin-bottom:62px}
.line-button{display:flex;align-items:center;justify-content:space-between;gap:35px;width:min(100%,360px);padding:20px 24px;border:1px solid rgba(52,215,232,.56);background:rgba(15,42,51,.58);color:var(--fg);text-decoration:none;letter-spacing:.14em;font-size:15px;transition:background .2s,border-color .2s,transform .2s}
.line-button:hover,.line-button:focus-visible{background:rgba(25,78,90,.76);border-color:var(--cyan);transform:translateY(-2px)}
.line-button:focus-visible,.footer-line:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.line-button span:last-child{color:var(--cyan);font-size:19px}
.connect-note{color:var(--muted);font-size:10px;letter-spacing:.13em;margin:18px 0 0;line-height:1.8}
.footer-line{color:var(--fg);text-decoration:none;border-bottom:1px solid rgba(52,215,232,.5);padding-bottom:3px}
.footer-handle{color:var(--cyan)}
@media(max-width:700px){:root{--hero-fade-start:81%;--hero-fade-mid:94%;--hero-fade-mid-opacity:.16}.presence-copy{margin-bottom:45px}.line-button{width:100%}}

/* v0.4: セクションの継ぎ目をなくし、動画内の右下コピーを隠さない */
:root{--section-glow-strength:.09}
/* 元のhero::afterは動画に焼き込まれた右下文字を暗くしていたので無効化 */
.hero::after{display:none}
/* すべての観測ログを同じベース色でつなぎ、光だけを各セクション内でフェード */
.section,.section-alt,.presence{position:relative;isolation:isolate;background:var(--bg)}
.section::before,.section-alt::before,.presence::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 83% 35%,rgba(34,143,170,.085),transparent 65%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.section-alt::before{background:radial-gradient(ellipse at 14% 45%,rgba(44,153,182,.11),transparent 65%)}
.presence::before{background:radial-gradient(ellipse at 75% 40%,rgba(52,215,232,.085),transparent 65%)}

/* v0.5: fade only the very bottom of the hero; preserve baked-in lower-right typography */
.hero::after{display:block;inset:auto 0 0;height:clamp(38px,7vh,82px);background:linear-gradient(to bottom,rgba(8,13,19,0) 0%,rgba(8,13,19,.08) 38%,rgba(8,13,19,.35) 75%,var(--bg) 100%)}
/* Music section: same continuous base, glow masked out at both section edges */
.music::before{background:radial-gradient(ellipse at 80% 44%,rgba(52,215,232,.12),transparent 67%)}
.music-intro{padding-left:clamp(0px,5vw,64px);border-left:1px solid rgba(52,215,232,.2);margin-bottom:75px}
.music-intro p{font-size:var(--body-copy-size);line-height:2.15;letter-spacing:.08em;margin:0 0 38px}
.mv-panel{border:1px solid rgba(95,155,169,.23);background:rgba(8,17,25,.6)}
.mv-stage{aspect-ratio:16/9;position:relative;background:radial-gradient(ellipse at 65% 40%,#142e39 0%,#0c1922 45%,#070b11 100%);overflow:hidden}
.mv-stage video{width:100%;height:100%;display:block;object-fit:contain;background:#05080b}
.mv-stage video[hidden]{display:none}
.mv-cover{width:100%;height:100%;display:block;object-fit:cover;background:#05080b}
.mv-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;color:#e9f0f3}
.mv-mark{font-size:clamp(20px,4vw,44px);font-weight:200;letter-spacing:.35em;color:var(--cyan)}
.mv-signal{font-size:9px;letter-spacing:.25em;color:#a1b5bf}
.mv-word{font-size:clamp(36px,8vw,80px);font-weight:200;letter-spacing:.17em}
.mv-status{font-size:11px;letter-spacing:.15em;color:#93a5ae}
.mv-caption{padding:28px 32px;display:flex;align-items:end;justify-content:space-between;gap:16px}
.mv-caption .eyebrow{margin-bottom:9px;font-size:9px}.mv-caption h3{font-weight:300;font-size:29px;letter-spacing:.13em;margin:0 0 12px}.mv-desc,.mv-index{font-size:10px;letter-spacing:.13em;color:var(--muted);margin:0}
@media(max-width:700px){.hero::after{height:clamp(26px,5vh,48px)}.music-intro{padding-left:17px;margin-bottom:50px}.music-intro p{font-size:16px}.mv-caption{padding:22px 19px}.mv-index{font-size:9px}.mv-status{font-size:9px}}

/* v0.6: video-to-observation transition, preserving the original hero video */
.hero::after{
  display:block;
  inset:0;
  height:auto;
  background:
    radial-gradient(ellipse 74% 54% at 17% 91%,rgba(8,13,19,.68) 0%,rgba(8,13,19,.18) 60%,transparent 100%),
    linear-gradient(to bottom,transparent 48%,rgba(8,13,19,.07) 60%,rgba(8,13,19,.24) 74%,rgba(8,13,19,.53) 87%,rgba(8,13,19,.9) 97%,var(--bg) 100%);
}
/* Navigation lives at the top-right: video contains the Hiiro title at top-left. */
.site-header{position:absolute;z-index:12;top:0;right:0;left:0;pointer-events:none;padding:clamp(17px,3vw,36px) clamp(18px,3.4vw,56px)}
.desktop-nav{pointer-events:auto;display:flex;align-items:center;justify-content:flex-end;gap:clamp(15px,2.1vw,34px)}
.desktop-nav a{font-size:10px;letter-spacing:.18em;text-decoration:none;color:#eaf5f8;text-shadow:0 1px 12px rgba(0,0,0,.75);transition:color .2s}
.desktop-nav a:hover,.desktop-nav a:focus-visible{color:var(--cyan)}
.desktop-nav .nav-line{border:1px solid rgba(223,245,250,.65);border-radius:100px;padding:12px 18px;background:rgba(8,13,19,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;letter-spacing:.08em}
.menu-toggle,.mobile-nav{display:none}
#identity,#observe,#music,#presence,#top{scroll-margin-top:20px}
@media(max-width:700px){
  .hero::after{background:linear-gradient(to bottom,transparent 62%,rgba(8,13,19,.09) 75%,rgba(8,13,19,.31) 87%,rgba(8,13,19,.78) 97%,var(--bg) 100%)}
  .site-header{padding:18px 18px}
  .desktop-nav{display:none}
  .menu-toggle{pointer-events:auto;display:flex;flex-direction:column;justify-content:center;gap:5px;margin-left:auto;width:43px;height:43px;border:1px solid rgba(223,245,250,.6);border-radius:50%;background:rgba(8,13,19,.37);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);align-items:center;cursor:pointer}
  .menu-toggle span{width:17px;height:1px;background:#f2f8fa;display:block}
  .mobile-nav:not([hidden]){pointer-events:auto;display:flex;flex-direction:column;gap:0;position:absolute;top:70px;right:18px;width:min(255px,calc(100vw - 36px));padding:12px 22px;background:rgba(8,13,19,.94);border:1px solid rgba(52,215,232,.28);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .mobile-nav a{padding:13px 0;color:#edf5f7;text-decoration:none;letter-spacing:.17em;font-size:12px;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-nav .mobile-line{color:var(--cyan);border-bottom:0}
}
@media(min-width:701px) and (max-width:1020px){.desktop-nav{gap:13px}.desktop-nav a{font-size:9px}.desktop-nav .nav-line{padding:10px 13px}}
@media(prefers-reduced-motion:reduce){.desktop-nav a{transition:none}}

/* v0.8: navigation floats above all sections, always fully transparent. */
.site-header,.site-header.is-scrolled{position:fixed;top:0;left:0;right:0;z-index:30;background:transparent;box-shadow:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}
#top,#identity,#where,#observe,#music,#presence{scroll-margin-top:85px}
#top{scroll-margin-top:0}
.mobile-brand{display:none}
@media(max-width:700px){
 .site-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;min-height:66px}
 .mobile-brand{pointer-events:auto;display:block;text-decoration:none;color:var(--cyan);font-size:22px;font-weight:300;letter-spacing:.22em;text-shadow:0 1px 12px rgba(0,0,0,.7)}
 .menu-toggle{margin-left:auto}
 .mobile-nav:not([hidden]){top:64px;right:18px}
 #identity,#where,#observe,#music,#presence{scroll-margin-top:68px}
}

/* v0.9: visual breathing spaces between the observation logs; no unapproved Hiiro art substituted. */
.visual-slot{margin:clamp(74px,10vw,150px) 0 0;position:relative;border:1px solid rgba(105,166,179,.2);background:#0b1820;overflow:hidden}
.visual-slot>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.visual-slot>img[hidden]{display:none}
.visual-placeholder{min-height:260px;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:25px;background:radial-gradient(ellipse at 62% 36%,rgba(39,115,136,.23),transparent 65%),linear-gradient(135deg,#101e27,#080d13)}
.visual-overline{font-size:10px;letter-spacing:.28em;color:var(--cyan)}
.visual-placeholder-title{font-size:clamp(19px,3.4vw,34px);font-weight:200;letter-spacing:.16em;color:#d8e8ed}
.visual-placeholder-note{font-size:11px;letter-spacing:.1em;color:#899da8}
.visual-slot figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:18px 24px;color:var(--muted);font-size:10px;letter-spacing:.1em;line-height:1.7}
.visual-slot figcaption span:first-child{color:var(--cyan);letter-spacing:.18em}
@media(max-width:700px){.visual-slot{margin-top:78px}.visual-placeholder{min-height:210px;aspect-ratio:4/5}.visual-slot>img{aspect-ratio:4/5}.visual-slot figcaption{padding:17px;display:block}.visual-slot figcaption span{display:block}.visual-slot figcaption span+span{margin-top:6px}}


/* v1.0: text and visuals share a scene; ABOUT remains text-only. */
#where .section-inner,#observe .section-inner,#music .section-inner{max-width:1200px}
#where .scene-pair,#observe .scene-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;column-gap:clamp(36px,5vw,100px)}
#where .verse,#observe .verse{min-width:0}
#where .verse p,#observe .verse p{font-size:clamp(15px,1.35vw,18px);margin-bottom:clamp(22px,3vw,39px);line-height:2.15}
#where .visual-slot,#observe .visual-slot{margin:0;align-self:center;border:0;background:transparent;min-width:0}
#where .visual-slot>img,#observe .visual-slot>img{aspect-ratio:4/5;object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
#where .visual-placeholder,#observe .visual-placeholder{aspect-ratio:4/5;min-height:360px;border:1px solid rgba(105,166,179,.13);-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
#where .visual-slot figcaption,#observe .visual-slot figcaption{padding:16px 4px;border:0}
#observe .scene-pair>.verse{grid-column:2;grid-row:1}
#observe .scene-pair>.visual-slot{grid-column:1;grid-row:1}
#where .section-inner>h2,#observe .section-inner>h2{margin-bottom:clamp(40px,5vw,76px)}
.music-pair{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.45fr);gap:clamp(35px,5vw,90px);align-items:center}
.music-pair .music-intro{margin-bottom:0}.music-pair .mv-panel{min-width:0}
.music-pair .mv-caption{padding:20px 24px}
@media(max-width:700px){
 #where .scene-pair,#observe .scene-pair,.music-pair{display:flex;flex-direction:column;align-items:stretch;gap:42px}
 #where .visual-slot,#observe .visual-slot{width:100%;margin:0}
 #where .visual-placeholder,#observe .visual-placeholder{min-height:220px;aspect-ratio:4/5}
 #where .verse p,#observe .verse p{font-size:16px;margin-bottom:43px}
 #where .scene-pair>.verse,#observe .scene-pair>.verse{order:0;width:100%}
 #where .scene-pair>.visual-slot,#observe .scene-pair>.visual-slot{order:1}
 .music-pair .music-intro{width:100%}.music-pair .mv-panel{width:100%}
}

/* v1.1: one desktop scene = heading + concise text + visual in the same viewport. */
@media(min-width:701px){
  #where,#observe{padding:clamp(70px,9vh,105px) 28px clamp(60px,8vh,95px)}
  #where .section-inner>h2,#observe .section-inner>h2{margin-bottom:clamp(30px,4vh,46px)}
  #where .eyebrow,#observe .eyebrow{margin-bottom:18px}
  #where .scene-pair,#observe .scene-pair{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,88px)}
  #where .verse,#observe .verse{padding-left:clamp(20px,3vw,42px)}
  #where .verse p,#observe .verse p{font-size:clamp(15px,1.22vw,18px);line-height:1.9;margin-bottom:clamp(18px,2.5vh,27px)}
  #where .visual-placeholder,#observe .visual-placeholder{aspect-ratio:5/4;min-height:0;max-height:clamp(280px,43vh,410px)}
  #where .visual-slot>img,#observe .visual-slot>img{aspect-ratio:5/4;max-height:clamp(280px,43vh,410px)}
  #where .visual-slot figcaption,#observe .visual-slot figcaption{padding-top:11px;padding-bottom:0}
}
@media(max-width:700px){
  #where .verse p,#observe .verse p{margin-bottom:25px;line-height:1.95}
  #where .scene-pair,#observe .scene-pair{gap:34px}
  #where .section-inner>h2,#observe .section-inner>h2{margin-bottom:45px}
}

/* v1.2 desktop: each observation is a distinct screen. Preserve v1.0 portrait visuals. */
@media (min-width:701px){
  #identity{min-height:100svh;display:flex;align-items:center;padding:clamp(74px,9vh,105px) 28px clamp(48px,7vh,80px)}
  #identity .section-inner{width:100%;max-width:740px}
  #identity .eyebrow{margin-bottom:clamp(13px,2vh,22px)}
  #identity h2{margin-bottom:clamp(25px,4vh,38px)}
  #identity .verse p{font-size:clamp(16px,1.35vw,19px);line-height:1.72;margin-bottom:clamp(14px,2.5vh,23px)}
  #identity .verse p:last-child{margin-bottom:0}
  #where,#observe{min-height:100svh;padding:clamp(78px,10vh,105px) 28px clamp(70px,10vh,110px)}
  #where .visual-placeholder,#observe .visual-placeholder{aspect-ratio:4/5;min-height:360px;max-height:none}
  #where .visual-slot>img,#observe .visual-slot>img{aspect-ratio:4/5;max-height:none}
}
/* Short desktop screens: retain readable text without clipping. */
@media (min-width:701px) and (max-height:720px){
  #identity{padding-top:64px;padding-bottom:40px}
  #identity h2{margin-bottom:20px}
  #identity .verse p{line-height:1.6;margin-bottom:13px}
}

/* v1.3: make the identity's closing line the visual conclusion.
   Keep the 002/003 alternating portrait scenes and let each breathe before the next log.
   Desktop only; MUSIC layout and mobile rules remain unchanged. */
@media (min-width:701px){
  #identity .verse p:last-child{margin-top:clamp(7px,1.3vh,13px)}
  #identity .verse p:last-child strong{
    display:inline-block;
    font-size:clamp(23px,2.05vw,30px);
    line-height:1.45;
    letter-spacing:.105em;
    color:#f3f9fb;
  }
  #where,#observe{
    min-height:112svh;
    padding-top:clamp(82px,10vh,110px);
    padding-bottom:clamp(100px,14vh,155px);
  }
  #where .section-inner>h2,#observe .section-inner>h2{
    margin-bottom:clamp(36px,5vh,56px);
  }
  #where .scene-pair,#observe .scene-pair{
    align-items:center;
  }
  #where .visual-placeholder,#observe .visual-placeholder,
  #where .visual-slot>img,#observe .visual-slot>img{
    aspect-ratio:4/5;
    max-height:none;
  }
  #music{padding-top:clamp(105px,14vh,165px)}
}
@media (min-width:701px) and (max-height:720px){
  #identity .verse p:last-child{margin-top:4px}
  #identity .verse p:last-child strong{font-size:clamp(21px,1.9vw,27px)}
}

/* v1.4 desktop refinement: 002/003 visuals 10% smaller, preserving 4:5
   and the alternating staircase. Raise the complete MUSIC/MV card slightly. */
@media (min-width:701px){
  #where .scene-pair>.visual-slot,
  #observe .scene-pair>.visual-slot{
    width:90%;
    max-width:90%;
  }
  #where .scene-pair>.visual-slot{justify-self:end}
  #observe .scene-pair>.visual-slot{justify-self:start}
  #music .music-pair>.mv-panel{transform:translateY(-40px)}
}
@media (min-width:701px) and (max-height:720px){
  #music .music-pair>.mv-panel{transform:translateY(-25px)}
}

/* v1.8 desktop layout: keep original portrait art intact and fit each scene in view. */
@media (min-width:701px){
  #where,#observe{
    min-height:100svh;
    padding-top:clamp(62px,8vh,80px);
    padding-bottom:clamp(42px,6vh,62px);
  }
  #where .eyebrow,#observe .eyebrow{margin-bottom:14px}
  #where .section-inner>h2,#observe .section-inner>h2{
    margin-bottom:clamp(24px,3.5vh,36px);
  }
  #where .scene-pair>.visual-slot,
  #observe .scene-pair>.visual-slot{
    width:auto;
    max-width:100%;
  }
  #where .visual-slot>img,#observe .visual-slot>img{
    display:block;
    width:auto;
    height:auto;
    max-height:min(52svh,450px);
    max-width:100%;
    aspect-ratio:auto;
    object-fit:contain;
  }
  #where .visual-slot figcaption,#observe .visual-slot figcaption{
    padding-top:10px;
    padding-bottom:0;
  }
  #music{padding-top:clamp(75px,9vh,105px)}
  #music .section-inner>h2{margin-bottom:clamp(48px,6vh,66px)}
  #music .music-pair>.mv-panel{transform:translateY(-65px)}
}
@media (min-width:701px) and (max-height:720px){
  #where,#observe{padding-top:48px;padding-bottom:36px}
  #where .visual-slot>img,#observe .visual-slot>img{max-height:49svh}
  #music .music-pair>.mv-panel{transform:translateY(-48px)}
}

/* v1.9 desktop fine-tuning: 002/003 portraits between v1.7 and v1.8; raise MV. */
@media (min-width:701px){
  #where .visual-slot>img,#observe .visual-slot>img{
    max-height:min(62svh,530px);
  }
  #music .music-pair>.mv-panel{transform:translateY(-110px)}
}
@media (min-width:701px) and (max-height:720px){
  #where .visual-slot>img,#observe .visual-slot>img{max-height:57svh}
  #music .music-pair>.mv-panel{transform:translateY(-85px)}
}

/* v2.0 desktop: enlarge 002/003 portraits modestly, preserving full images and captions.
   MUSIC / MV remains exactly as in v1.9. */
@media (min-width:701px){
  #where .visual-slot>img,#observe .visual-slot>img{
    max-height:min(65.5svh,560px);
  }
}
@media (min-width:701px) and (max-height:720px){
  #where .visual-slot>img,#observe .visual-slot>img{
    max-height:60svh;
  }
}

/* v2.1 desktop: bring the observation portraits toward the center and use
   remaining vertical space. Keep full uncropped images and MUSIC unchanged. */
@media (min-width:701px){
  #where .scene-pair>.visual-slot,
  #observe .scene-pair>.visual-slot{
    justify-self:center;
  }
  #where .visual-slot>img,
  #observe .visual-slot>img{
    max-height:min(72svh,610px);
  }
}
@media (min-width:701px) and (max-height:720px){
  #where .visual-slot>img,
  #observe .visual-slot>img{
    max-height:65svh;
  }
}

/* v2.2 desktop: retain v2.1 composition; remove captions, use the released
   vertical space for larger portraits, and fine-tune only text positions. */
@media (min-width:701px){
  #where .scene-pair>.verse{margin-left:clamp(22px,2.6vw,38px)}
  #observe .section-inner>.eyebrow,
  #observe .section-inner>h2{margin-left:clamp(35px,4.7vw,72px)}
  #where .visual-slot>img{max-height:min(75svh,635px)}
  #observe .visual-slot>img{max-height:min(76svh,645px)}
}
@media (min-width:701px) and (max-height:720px){
  #where .visual-slot>img,#observe .visual-slot>img{max-height:68svh}
}

/* v2.3 desktop: align section 002 heading AND body divider to the
   same horizontal origin as the section 003 heading. No other layout changes. */
@media (min-width:701px){
  #where .section-inner>.eyebrow,
  #where .section-inner>h2,
  #where .scene-pair>.verse{
    margin-left:clamp(35px,4.7vw,72px);
  }
}

/* v2.4 desktop rhythm: more air between observation chapters, less dead
   space between the One MV and PRESENCE. Keep v2.3 X alignment, art and MV. */
@media (min-width:701px){
  #identity{min-height:110svh;padding-bottom:clamp(95px,13vh,140px)}
  #where,#observe{
    min-height:116svh;
    padding-top:clamp(88px,11vh,120px);
    padding-bottom:clamp(120px,17vh,170px);
  }
  #music{padding-top:clamp(115px,15vh,170px);padding-bottom:clamp(92px,12vh,125px)}
  #presence{padding-top:clamp(95px,12vh,130px)}
}
@media (min-width:701px) and (max-height:720px){
  #identity{min-height:105svh;padding-bottom:80px}
  #where,#observe{min-height:110svh;padding-top:72px;padding-bottom:100px}
  #music{padding-top:100px;padding-bottom:80px}
  #presence{padding-top:90px}
}


/* v2.8 — two-part desktop PRESENCE flow. Mobile remains unchanged. */
.presence-mobile{display:none}
@media (min-width:701px){
  #presence{padding-top:clamp(105px,14vh,155px);padding-bottom:clamp(120px,16vh,180px)}
  #first-signal{padding-top:clamp(110px,15vh,170px);padding-bottom:clamp(125px,17vh,190px)}
  .presence-grid{max-width:1200px;display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%)}
  .presence-heading{padding:10px 34px 0 0}
  #presence .presence-heading{margin-left:clamp(35px,4.7vw,72px)}
  .presence-heading h2{font-size:clamp(34px,4.3vw,58px);line-height:1.6;letter-spacing:.08em;margin:clamp(42px,6vw,65px) 0 0;font-weight:300}
  .presence-heading .section-en{margin-top:16px}
  .presence-details{min-width:0;border-left:1px solid rgba(52,215,232,.22);padding:10px 0 0 clamp(28px,4vw,60px)}
  .presence-index{color:var(--cyan);font-size:10px;letter-spacing:.22em;margin:0 0 25px}
  .presence-details h3{color:var(--fg);font-weight:300;font-size:clamp(20px,2.15vw,29px);line-height:1.8;letter-spacing:.045em;margin:0}
  .presence-details h3 strong{font-weight:500}
  .presence-meaning-copy>p:not(.presence-index){color:#b4c3ca;font-size:clamp(16px,1.45vw,19px);line-height:2.1;letter-spacing:.055em;margin:clamp(30px,4vw,48px) 0 0}
  .presence-meaning-copy .presence-outcome{color:var(--fg);font-size:clamp(18px,1.8vw,23px);line-height:2}
  .signal-heading h2{line-height:1.75}
  .presence-example{color:var(--fg);font-size:clamp(18px,1.8vw,23px);line-height:1.9;letter-spacing:.045em;margin:0 0 14px}
  .signal-question{border-top:1px solid rgba(160,180,190,.22);margin-top:clamp(34px,4.5vw,52px);padding-top:clamp(34px,4.5vw,52px)}
  .presence-invitation{color:#b4c3ca;font-size:clamp(16px,1.45vw,19px);line-height:1.9;letter-spacing:.05em;margin:18px 0 0}
  .presence-details .line-button{margin-top:clamp(34px,4.5vw,48px);width:min(100%,385px)}
}
@media (max-width:700px){.presence-desktop{display:none}.presence-mobile{display:block}}

/* v2.9 — balance the desktop chapters. Mobile remains unchanged. */
@media (min-width:701px){
  #identity .identity-layout{
    width:100%;
    max-width:1200px;
    display:grid;
    grid-template-columns:minmax(0,45%) minmax(0,55%);
    align-items:start;
  }
  #identity .identity-heading{
    padding:0 34px 0 0;
    margin:clamp(105px,13vh,145px) 0 0 clamp(35px,4.7vw,72px);
  }
  #identity .identity-heading h2{
    font-size:clamp(34px,4.3vw,58px);
    line-height:1.45;
    letter-spacing:.08em;
    margin:0;
    font-weight:300;
  }
  #identity .identity-heading .section-en{margin-top:16px}
  #identity .identity-copy{
    min-width:0;
    border-left:1px solid rgba(52,215,232,.22);
    padding:10px 0 0 clamp(28px,4vw,60px);
  }
  #identity .identity-copy p{
    font-size:clamp(16px,1.35vw,19px);
    line-height:1.72;
    margin-bottom:clamp(14px,2.5vh,23px);
  }

  #first-signal .signal-heading{
    grid-column:2;
    grid-row:1;
    padding:10px 0 0 clamp(28px,4vw,60px);
    margin:0 0 0 clamp(48px,5vw,75px);
  }
  #first-signal .signal-details{
    grid-column:1;
    grid-row:1;
    border-left:0;
    border-right:1px solid rgba(52,215,232,.22);
    padding:10px clamp(28px,4vw,60px) 0 0;
  }
}

@media (min-width:701px) and (max-height:720px){
  #identity .identity-heading{
    margin-top:75px;
  }
}

/* v2.17 — two-part mobile PRESENCE flow and menu-only mobile header. */
@media (max-width:700px){
  .site-header{justify-content:flex-end}
  #presence,#first-signal-mobile{
    min-height:100svh;
    display:flex;
    align-items:center;
    padding-top:105px;
    padding-bottom:110px;
  }
  .mobile-presence-layout{width:100%}
  .mobile-presence-layout>.eyebrow{margin-bottom:24px}
  .mobile-presence-layout>h2{
    font-size:28px;
    line-height:1.65;
    letter-spacing:.09em;
    margin:0 0 48px;
  }
  .mobile-presence-layout>h2 .section-en{margin-top:12px}
  .mobile-presence-details{
    border-left:1px solid rgba(52,215,232,.22);
    padding-left:17px;
  }
  .mobile-presence-details .presence-index{
    color:var(--cyan);
    font-size:9px;
    letter-spacing:.22em;
    margin:0 0 24px;
  }
  .mobile-presence-details h3{
    color:var(--fg);
    font-size:19px;
    font-weight:300;
    line-height:1.85;
    letter-spacing:.045em;
    margin:0;
  }
  .mobile-presence-details h3 strong{font-weight:500}
  .mobile-presence-meaning>p:not(.presence-index){
    color:#b4c3ca;
    font-size:15px;
    line-height:2;
    letter-spacing:.045em;
    margin:30px 0 0;
  }
  .mobile-presence-meaning .presence-outcome{
    color:var(--fg);
    font-size:17px;
  }
  .mobile-signal-details .presence-example{
    color:var(--fg);
    font-size:16px;
    line-height:1.95;
    letter-spacing:.04em;
    margin:0 0 13px;
  }
  .mobile-signal-details .signal-question{
    border-top:1px solid rgba(160,180,190,.22);
    margin-top:34px;
    padding-top:34px;
  }
  .mobile-signal-details .presence-invitation{
    color:#b4c3ca;
    font-size:15px;
    line-height:1.9;
    letter-spacing:.045em;
    margin:16px 0 0;
  }
  .mobile-signal-details .line-button{
    width:100%;
    margin-top:36px;
  }
}

/* v3.0 local review — audience hook, outcome chapter, expanded music story,
   reciprocal conversation, and quiet social footer. */
#for-you,#after-observation,#first-signal,#first-signal-mobile{scroll-margin-top:85px}
.title-line{display:block}
.split-layout{max-width:1200px}
.mv-one-copy{color:#b4c3ca;font-size:13px;line-height:1.85;letter-spacing:.055em;margin:0 0 16px}
.presence-response{color:#b4c3ca;font-size:clamp(15px,1.3vw,18px);line-height:1.95;letter-spacing:.05em;margin:0 0 30px}
.footer-social{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap}
.footer-social a{color:var(--fg);text-decoration:none;font-size:10px;letter-spacing:.16em;transition:color .2s}
.footer-social a:hover,.footer-social a:focus-visible{color:var(--cyan)}
.footer-social a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.footer-copyright{width:100%;margin:12px 0 0;text-align:center;color:rgba(139,157,169,.58);font-size:9px;letter-spacing:.14em}
.visual-interlude{min-height:auto;padding:clamp(38px,5vh,55px) 0;display:flex;align-items:center;background:var(--bg)}
.interlude-frame{position:relative;width:100%;max-width:none;margin:0;overflow:hidden;background:#080d13}
.interlude-frame::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 26px rgba(8,13,19,.52)}
.observation-panorama{display:flex;width:100%;aspect-ratio:5/1;overflow:hidden;background:#080d13}
.interlude-panel{position:relative;flex:0 0 36%;min-width:0;overflow:hidden;background:#080d13}
.interlude-panel+.interlude-panel{margin-left:-4%}
.interlude-panel img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82) brightness(.8) contrast(1.05)}
.interlude-thailand{z-index:1;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%)}
.interlude-new-york{z-index:2;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 19%,#000 81%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 19%,#000 81%,transparent 100%)}
.interlude-egypt{z-index:3;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 100%)}
.interlude-frame figcaption{position:absolute;z-index:4;left:clamp(20px,3vw,42px);bottom:clamp(18px,2.8vw,36px);color:rgba(194,226,232,.72);font-size:9px;letter-spacing:.24em}

@media (min-width:701px){
  .desktop-nav{gap:clamp(10px,1.35vw,22px)}
  .desktop-nav a{font-size:9px}
  .desktop-nav .nav-line{padding:11px 16px}
  .title-line{white-space:nowrap}
  .hook,.after-observation{min-height:110svh;display:flex;align-items:center;padding-top:clamp(90px,12vh,140px);padding-bottom:clamp(100px,14vh,160px)}
  .split-layout{width:100%;display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);align-items:start}
  .split-heading{padding:8px 34px 0 0;margin-left:clamp(35px,4.7vw,72px)}
  .split-heading h2{font-size:clamp(32px,4vw,56px);line-height:1.55;letter-spacing:.075em;margin:clamp(35px,5vw,58px) 0 0}
  .split-copy{min-width:0;border-left:1px solid rgba(52,215,232,.22);padding:8px 0 0 clamp(28px,4vw,60px)}
  .split-copy p{font-size:clamp(16px,1.35vw,19px);line-height:1.9;margin-bottom:clamp(18px,3vh,30px)}
  .hook .split-copy p:last-child{color:#eef8fa;font-size:clamp(18px,1.65vw,22px)}
  .hook .split-heading h2{font-size:clamp(32px,3.15vw,44px);line-height:2.25}

  .after-layout .split-heading{grid-column:2;grid-row:1;margin-left:clamp(48px,5vw,75px);padding:8px 0 0 clamp(28px,4vw,60px)}
  .after-layout .split-heading h2{line-height:1.8}
  .after-layout .split-copy{grid-column:1;grid-row:1;border-left:0;border-right:1px solid rgba(52,215,232,.22);padding:8px clamp(28px,4vw,60px) 0 0}

  #music{min-height:auto;padding-top:clamp(115px,14vh,165px);padding-bottom:clamp(120px,16vh,185px)}
  #music .music-pair{grid-template-columns:minmax(300px,.9fr) minmax(0,1.25fr);align-items:end}
  #music .music-pair>.music-intro,
  #music .music-pair>.mv-panel{align-self:end}
  #music .music-pair>.music-intro{transform:translateY(-20px)}
  #music .music-pair>.mv-panel{transform:translateY(-55px);margin-top:0}
  #music .music-intro p{font-size:clamp(15px,1.25vw,18px);line-height:1.9;margin-bottom:24px}
  #music .mv-caption{align-items:flex-end}

  #presence{min-height:110svh;display:flex;align-items:center}
  #presence .presence-grid{width:100%}
  #presence .presence-heading{margin-left:0;padding-right:clamp(38px,5vw,72px)}
  #presence .presence-heading h2{font-size:clamp(36px,3.9vw,54px);line-height:1.87}
  #first-signal{min-height:110svh;display:flex;align-items:center}
}

@media (min-width:701px) and (max-width:1120px){
  .desktop-nav{gap:9px}
  .desktop-nav a{font-size:8px;letter-spacing:.13em}
  .desktop-nav .nav-line{padding:10px 12px}
}

@media (max-width:700px){
  #for-you,#after-observation,#first-signal-mobile{scroll-margin-top:68px}
  .hook,.after-observation{padding-top:125px;padding-bottom:130px}
  .split-heading h2{font-size:28px;line-height:1.65;margin-bottom:52px}
  .split-copy p{line-height:2;margin-bottom:34px}
  .hook .split-copy p:last-child{color:#eef8fa;font-size:17px}
  #music .music-pair>.mv-panel{transform:none}
  #music .music-intro p{line-height:1.95;margin-bottom:30px}
  .mv-one-copy{font-size:12px;line-height:1.8}
  .presence-response{font-size:15px;line-height:1.9;margin-bottom:27px}
  footer{align-items:flex-start;flex-direction:column;gap:24px;padding-bottom:max(52px,env(safe-area-inset-bottom))}
  .footer-social{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:20px 28px}
  footer small{width:auto}
  .visual-interlude{min-height:auto;padding:0 0 125px}
  .interlude-frame{width:100%}
  .interlude-frame::after{box-shadow:inset 0 0 48px 12px rgba(8,13,19,.5)}
  .observation-panorama{display:flex;flex-direction:column;aspect-ratio:auto}
  .interlude-panel{flex:none;width:100%;height:auto;aspect-ratio:4/3;overflow:hidden;margin-left:0!important}
  .interlude-panel+.interlude-panel{margin-top:-12%}
  .interlude-thailand{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%)}
  .interlude-new-york{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 19%,#000 81%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 19%,#000 81%,transparent 100%)}
  .interlude-egypt{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 100%)}
  .interlude-panel img{object-position:center}
  .interlude-frame figcaption{left:22px;bottom:20px;font-size:8px}
}

/* Navigation lands on the exact start of each chapter. The fixed header is
   intentionally overlaid, so no offset is needed. */
#top,
#for-you,
#identity,
#where,
#observe,
#music,
#after-observation,
#presence,
#first-signal,
#first-signal-mobile{scroll-margin-top:0}

@media (max-width:700px){
  #for-you,
  #identity,
  #music,
  #after-observation,
  #presence{scroll-margin-top:-100px}
}

/* Scroll slightly farther into the later chapters so more of each page
   remains visible below the fixed navigation. */
@media (min-width:701px){
  #observe{scroll-margin-top:-55px}
  #after-observation{scroll-margin-top:-55px}
  #music,
  #presence{scroll-margin-top:-90px}
}

/* Mobile hero: preserve all typography baked into the video and place the
   scroll prompt in its own breathing space below the moving image. */
@media (max-width:700px){
  .hero{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:720 / 1286;
    margin-bottom:82px;
    overflow:visible;
  }
  .hero-video,
  .hero-fallback{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .hero::after{
    display:none;
  }
  .scroll-cue{
    bottom:-61px;
    color:var(--muted);
    opacity:1;
    text-shadow:none;
  }
  .scroll-line{
    height:24px;
  }

  /* Mobile index: keep every chapter visible instead of hiding it in a
     hamburger. Its narrow, translucent rail stays secondary to the story. */
  .site-header{
    display:none;
    min-height:0;
    padding:0;
  }
  .mobile-nav,
  .mobile-nav:not([hidden]){
    pointer-events:auto;
    position:sticky;
    top:10px;
    right:10px;
    width:max-content;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:0;
    padding:10px 10px 10px 13px;
    border:0;
    border-left:1px solid rgba(52,215,232,.22);
    background:rgba(8,13,19,.36);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    z-index:12;
    margin-left:auto;
    margin-right:10px;
  }
  .mobile-nav a{
    min-height:29px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:5px 0;
    border:0;
    color:rgba(233,240,243,.7);
    font-size:8px;
    line-height:1;
    letter-spacing:.15em;
    text-shadow:0 1px 8px rgba(0,0,0,.75);
  }
  .mobile-nav .mobile-line{
    color:var(--cyan);
    margin-top:3px;
    font-size:8px;
  }
  .mobile-body-menu-toggle{
    position:fixed;
    z-index:30;
    top:10px;
    right:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(233,240,243,.28);
    border-radius:50%;
    background:rgba(8,13,19,.5);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    appearance:none;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  .mobile-body-menu-toggle span{
    display:block;
    width:17px;
    height:1px;
    background:rgba(233,240,243,.78);
    transition:transform .2s ease,opacity .2s ease;
  }
  .mobile-body-menu-toggle.is-visible{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .mobile-body-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .mobile-body-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mobile-body-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .mobile-body-nav:not([hidden]){
    position:fixed;
    z-index:29;
    top:59px;
    right:18px;
    width:max-content;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    padding:9px 12px 10px 16px;
    border-left:1px solid rgba(52,215,232,.22);
    background:rgba(8,13,19,.72);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
  }
  .mobile-body-nav a{
    min-height:29px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:5px 0;
    color:rgba(233,240,243,.72);
    font-size:8px;
    line-height:1;
    letter-spacing:.15em;
    text-decoration:none;
  }
  .mobile-body-nav .mobile-line{color:var(--cyan);margin-top:3px}
}

@media (min-width:701px){.mobile-body-menu-toggle,.mobile-body-nav{display:none}}

/* Phone landscape: use the full desktop composition and keep both edges in
   frame instead of filling the viewport by cropping the video. */
@media (orientation:landscape) and (max-height:700px) and (pointer:coarse){
  .hero-video,
  .hero-fallback,
  .hero-fallback img{
    object-fit:contain;
    object-position:center center;
    background:var(--bg);
  }
}

/* Final hero composition: clean motion footage with independent artwork.
   Text remains inside viewport-safe margins at every aspect ratio. */
.hero-overlays{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}
.hero-gradient{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
}
.hero-gradient-top{z-index:0}
.hero-gradient-bottom{z-index:1}
.hero-brand-art,
.hero-tagline-art{
  position:absolute;
  z-index:2;
  display:block;
  height:auto;
  filter:drop-shadow(0 1px 10px rgba(0,0,0,.28));
}
.hero-brand-art{
  top:clamp(20px,3.5vh,42px);
  left:clamp(10px,1.5vw,30px);
  width:clamp(205px,17vw,285px);
}
.hero-tagline-desktop{
  right:clamp(10px,2vw,38px);
  bottom:clamp(60px,9vh,110px);
  width:clamp(270px,23vw,380px);
}
.hero-tagline-mobile{display:none}
.scroll-cue{z-index:4}

@media (orientation:portrait){
  .hero-brand-art{
    top:max(26px,env(safe-area-inset-top));
    left:clamp(22px,5.5vw,52px);
    width:min(42vw,235px);
  }
  .hero-tagline-desktop{display:none}
  .hero-tagline-mobile{
    display:block;
    left:clamp(22px,5.5vw,52px);
    bottom:clamp(26px,5.5vh,62px);
    width:min(56vw,315px);
  }
}

@media (orientation:landscape) and (max-width:1180px){
  .hero-brand-art{
    top:clamp(14px,3vh,26px);
    left:clamp(8px,1vw,14px);
    width:clamp(180px,19vw,225px);
  }
  .hero-tagline-desktop{
    right:clamp(8px,1.2vw,16px);
    bottom:clamp(48px,8vh,78px);
    width:clamp(245px,27vw,320px);
  }
}

@media (orientation:landscape) and (max-height:700px) and (pointer:coarse){
  .hero-brand-art{
    top:10px;
    left:max(8px,env(safe-area-inset-left));
    width:min(21vw,220px);
  }
  .hero-tagline-desktop{
    right:max(8px,env(safe-area-inset-right));
    bottom:24px;
    width:min(25vw,260px);
  }
}