/* ============================================================
   YUU AMEMIYA — Visual Identity in code
   white / ink #141414 / blue #738dcc / aqua #54bbd4 / pink #e199db
   雨・膜・三重円・ゆらぎ・循環
============================================================ */
:root{
  --white:#ffffff;
  --ink:#141414;
  --blue:#738dcc;
  --aqua:#54bbd4;
  --pink:#e199db;
  --line:rgba(115,141,204,.28);
  --line-soft:rgba(115,141,204,.14);
  --depth:0; /* 0=雲 → 1=海  scroll depth */
  --serif:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho','MS Mincho',serif;
  --sans:'Raleway','Shippori Mincho B1',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:.12em;
  line-height:2.05;
  font-size:15px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(115,141,204,.18)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;letter-spacing:inherit;background:none;border:none;cursor:pointer;color:inherit}

/* ---------- language switching ---------- */
body.en .jp{display:none !important}
body:not(.en) .en{display:none !important}
body.en{letter-spacing:.04em;line-height:1.9}
body.en .prose{font-family:var(--sans);font-weight:300}

/* ---------- fixed atmosphere layers ---------- */
#rain{position:fixed;inset:0;z-index:1;pointer-events:none}
.sea{
  position:fixed;left:0;right:0;bottom:0;height:55vh;z-index:0;pointer-events:none;
  background:linear-gradient(to top, rgba(84,187,212,.22), rgba(115,141,204,.08) 55%, transparent);
  opacity:var(--depth);
  transition:opacity .4s linear;
}
.blob{position:fixed;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;opacity:.5}
.blob-a{width:46vw;height:46vw;top:-12vw;right:-10vw;
  background:radial-gradient(circle at 40% 40%, rgba(115,141,204,.14), rgba(225,153,219,.10) 55%, transparent 70%);
  animation:drift1 26s ease-in-out infinite alternate}
.blob-b{width:40vw;height:40vw;bottom:6vh;left:-14vw;
  background:radial-gradient(circle at 60% 50%, rgba(84,187,212,.12), rgba(115,141,204,.08) 60%, transparent 75%);
  animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,5vh) scale(1.12)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(7vw,-6vh) scale(1.08)}}

/* ---------- intro (膜が開く) ---------- */
.intro{
  position:fixed;inset:0;background:var(--white);z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity 1.4s ease, visibility 1.4s;
}
.intro.gone{opacity:0;visibility:hidden}
.intro svg{width:120px;height:120px}
.intro .stroke{fill:none;stroke:rgba(20,20,20,.34);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:600;animation:draw 2.2s ease forwards}
.intro p{font-size:12px;letter-spacing:.55em;color:rgba(20,20,20,.45);padding-left:.55em;
  opacity:0;animation:fadein 1.6s .6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 26px;transition:background .5s, backdrop-filter .5s, box-shadow .5s;
}
header.scrolled{background:rgba(255,255,255,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:34px;height:34px;opacity:.55}
.brand span{font-family:var(--sans);font-weight:300;font-size:13px;letter-spacing:.32em}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{font-size:11.5px;letter-spacing:.3em;color:rgba(20,20,20,.62);position:relative;padding:4px 0}
nav.main a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--blue);transition:right .5s ease}
nav.main a:hover::after{right:0}
.head-tools{display:flex;align-items:center;gap:14px}
.tool-btn{
  font-size:10.5px;letter-spacing:.25em;color:rgba(20,20,20,.55);
  border:1px solid var(--line-soft);border-radius:999px;padding:6px 14px 6px 16px;
  transition:color .4s, border-color .4s, background .4s;
}
.tool-btn:hover{color:var(--blue);border-color:var(--line)}
.tool-btn.active{color:var(--blue);border-color:var(--line);background:rgba(115,141,204,.06)}
.menu-btn{display:none}

/* mobile menu overlay */
.overlay{
  position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .6s, visibility .6s;
}
.overlay.open{opacity:1;visibility:visible}
.overlay nav{display:flex;flex-direction:row-reverse;gap:9vw;height:60vh;align-items:center}
.overlay a{writing-mode:vertical-rl;}
body.en .overlay a{writing-mode:horizontal-tb;font-family:var(--sans)}
.overlay a{font-size:17px;letter-spacing:.5em;color:rgba(20,20,20,.75)}
.overlay .close{position:absolute;top:22px;right:26px;font-size:12px;letter-spacing:.3em;color:rgba(20,20,20,.5)}

/* ---------- water-cycle rail ---------- */
.rail{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;
  height:48vh;display:flex;flex-direction:column;justify-content:space-between;align-items:center;
}
.rail::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-soft)}
.rail span{
  position:relative;z-index:1;background:transparent;font-size:10.5px;letter-spacing:.2em;
  color:rgba(20,20,20,.35);writing-mode:vertical-rl;padding:6px 0;transition:color .5s;
}
.rail span.now{color:var(--blue)}
.rail .indicator{
  position:absolute;left:50%;top:0;width:7px;height:10px;transform:translate(-50%,-4px);
  background:var(--blue);opacity:.7;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  transition:top .15s linear;
}

/* ---------- generic section ---------- */
main{position:relative;z-index:2}
section{position:relative;padding:19vh 8vw;max-width:1180px;margin:0 auto}
.sec-head{display:flex;align-items:flex-start;gap:6vw;margin-bottom:9vh}
.v-label{
  writing-mode:vertical-rl;font-size:14px;letter-spacing:.62em;color:var(--blue);
  min-height:150px;border-left:1px solid var(--line-soft);padding-left:18px;
}
body.en .v-label{writing-mode:horizontal-tb;border-left:none;border-bottom:1px solid var(--line-soft);
  padding:0 0 10px;min-height:0;font-family:var(--sans);font-weight:300;letter-spacing:.45em;font-size:12px}
.sec-en{font-family:var(--sans);font-weight:200;font-size:clamp(26px,4vw,42px);letter-spacing:.3em;color:rgba(20,20,20,.85);line-height:1.5}
.sec-note{font-size:12px;color:rgba(20,20,20,.45);letter-spacing:.28em;margin-top:10px}

/* reveal = 霧が晴れる */
.rv{opacity:0;transform:translateY(26px);filter:blur(10px);
  transition:opacity 1.4s ease, transform 1.4s ease, filter 1.4s ease}
.rv.on{opacity:1;transform:none;filter:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* ---------- hero ---------- */
#sora{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 6vw;max-width:none}
.hero-logo{width:min(46vw,300px);height:auto;opacity:.16;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-58%);pointer-events:none;
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-58%) scale(1)}50%{transform:translate(-50%,-58%) scale(1.04)}}
.hero-inner{position:relative;z-index:2}
.hero-kicker{font-size:12px;letter-spacing:.7em;color:var(--blue);padding-left:.7em;margin-bottom:3.2vh}
h1.hero-name{font-family:var(--sans);font-weight:200;letter-spacing:.42em;padding-left:.42em;
  font-size:clamp(34px,7.2vw,76px);line-height:1.25;color:var(--ink)}
.hero-tag{margin-top:3.4vh;font-size:clamp(13px,1.6vw,16px);letter-spacing:.34em;color:rgba(20,20,20,.7)}
.hero-sub{margin-top:1.6vh;font-size:12px;letter-spacing:.26em;color:rgba(20,20,20,.45)}
.scroll-cue{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.scroll-cue small{font-size:10px;letter-spacing:.42em;color:rgba(20,20,20,.4);writing-mode:vertical-rl}
.scroll-cue .fall{width:1px;height:56px;background:var(--line-soft);position:relative;overflow:hidden}
.scroll-cue .fall::after{content:'';position:absolute;left:0;top:-12px;width:1px;height:12px;background:var(--blue);
  animation:falling 1.8s ease-in infinite}
@keyframes falling{to{transform:translateY(70px)}}

/* ---------- prose blocks ---------- */
.prose{max-width:680px;font-size:14.5px}
.prose p{margin-bottom:2em}
.prose .lead{font-size:clamp(17px,2.4vw,22px);letter-spacing:.22em;line-height:2.2;color:var(--ink)}
.who{font-size:12.5px;letter-spacing:.3em;color:rgba(20,20,20,.55);margin-bottom:3em}

/* ---------- statement ---------- */
#omoi .prose{max-width:720px}
.statement-close{margin-top:4em;font-size:clamp(15px,2vw,18px);letter-spacing:.3em;line-height:2.6;color:var(--blue)}

/* ---------- worlds ---------- */
.worlds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:34px 30px}
.card{position:relative;display:block}
.card .ph{
  position:relative;overflow:hidden;aspect-ratio:5/4;
  border-radius:58% 42% 53% 47% / 45% 55% 45% 55%;
  border:0;
  background:transparent;
  isolation:isolate;
  filter:drop-shadow(0 18px 42px rgba(115,141,204,.13));
  -webkit-mask-image:
    radial-gradient(ellipse 56% 47% at 50% 52%, #000 0 55%, rgba(0,0,0,.78) 68%, transparent 84%),
    radial-gradient(circle at 25% 42%, #000 0 24%, rgba(0,0,0,.56) 36%, transparent 52%),
    radial-gradient(circle at 76% 36%, #000 0 23%, rgba(0,0,0,.52) 35%, transparent 51%),
    radial-gradient(circle at 63% 77%, #000 0 21%, rgba(0,0,0,.48) 33%, transparent 49%);
  mask-image:
    radial-gradient(ellipse 56% 47% at 50% 52%, #000 0 55%, rgba(0,0,0,.78) 68%, transparent 84%),
    radial-gradient(circle at 25% 42%, #000 0 24%, rgba(0,0,0,.56) 36%, transparent 52%),
    radial-gradient(circle at 76% 36%, #000 0 23%, rgba(0,0,0,.52) 35%, transparent 51%),
    radial-gradient(circle at 63% 77%, #000 0 21%, rgba(0,0,0,.48) 33%, transparent 49%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  transition:border-radius 1.2s cubic-bezier(.22,1,.36,1), filter .8s, transform .8s;
}
.card:nth-child(3n) .ph{border-radius:45% 55% 52% 48% / 56% 43% 57% 44%}
.card:nth-child(3n+1) .ph{border-radius:54% 46% 42% 58% / 48% 58% 42% 52%}
.card:hover .ph{border-radius:50% 50% 45% 55% / 55% 45% 55% 45%;filter:drop-shadow(0 24px 62px rgba(115,141,204,.20));transform:translateY(-4px)}
.card .ph::after{
  content:'';position:absolute;inset:-18%;z-index:3;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255,255,255,.72), rgba(255,255,255,.46) 34%, rgba(255,255,255,.12) 62%, transparent 76%),
    radial-gradient(circle at 28% 30%, rgba(84,187,212,.16), transparent 36%),
    radial-gradient(circle at 72% 70%, rgba(225,153,219,.12), transparent 36%);
  filter:blur(12px);
  opacity:.86;
  transition:opacity .9s ease, filter .9s ease;
}
.card img{width:100%;height:100%;object-fit:cover;transform:scale(1.13);filter:blur(3.2px) saturate(.9) contrast(.98);
  transition:transform 1.6s cubic-bezier(.22,1,.36,1), filter 1.1s ease, opacity 1.1s ease}
.card:hover img{transform:scale(1.18);filter:blur(1.1px) saturate(1.02) contrast(1.02)}
.card .veil{position:absolute;inset:-22%;z-index:2;border-radius:inherit;
  background:radial-gradient(ellipse at 50% 50%, rgba(245,248,248,.62), rgba(238,246,247,.38) 42%, rgba(255,255,255,.12) 66%, transparent 82%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity 1.1s ease, transform 1.1s ease}
.card:hover .veil,.card.clear .veil{opacity:.38;transform:scale(1.08)}
.card figcaption{padding:18px 8px 0;text-align:center}
.card .w-tag{font-size:11px;letter-spacing:.22em;color:var(--aqua);display:block;margin-bottom:6px}
.card .w-title{font-size:14.5px;letter-spacing:.2em;color:var(--ink)}
.card .w-go{display:inline-block;margin-top:8px;font-size:10px;letter-spacing:.4em;color:rgba(20,20,20,.35);
  font-family:var(--sans);transition:color .4s}
.card:hover .w-go{color:var(--blue)}

/* ---------- media ---------- */
.media-list{max-width:760px}
.media-list a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;
  padding:22px 6px;border-bottom:1px solid var(--line-soft);
  transition:background .5s, padding-left .5s;
}
.media-list a:first-child{border-top:1px solid var(--line-soft)}
.media-list a:hover{background:rgba(115,141,204,.045);padding-left:16px}
.media-list .m-src{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.28em;
  color:var(--blue);min-width:170px;text-transform:uppercase}
.media-list .m-title{font-size:13px;letter-spacing:.14em;color:rgba(20,20,20,.78);flex:1}

/* ---------- links (道標) ---------- */
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px}
.links-grid a{
  position:relative;padding:26px 22px 26px 38px;border:1px solid transparent;border-radius:24px;
  transition:border-color .5s, background .5s;
}
.links-grid a:hover{border-color:var(--line-soft);background:rgba(255,255,255,.5)}
.links-grid a::before{content:'';position:absolute;left:16px;top:34px;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--blue);opacity:.55;transition:background .4s, transform .4s}
.links-grid a:hover::before{background:var(--blue);transform:scale(1.3)}
.l-name{display:block;font-family:var(--sans);font-weight:300;font-size:14px;letter-spacing:.24em;color:var(--ink)}
.l-desc{display:block;font-size:11.5px;letter-spacing:.16em;color:rgba(20,20,20,.5);margin-top:6px}

/* ---------- contact / sea ---------- */
#umi{text-align:center;padding-bottom:10vh}
#umi .sec-en{margin-bottom:5vh}
#umi p{font-size:13.5px;letter-spacing:.26em;color:rgba(20,20,20,.65)}
.contact-actions{margin-top:6vh;display:flex;flex-direction:column;align-items:center;gap:30px}
.contact-mail{
  display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:16px 46px;font-size:13px;letter-spacing:.36em;padding-left:calc(46px + .36em);
  color:var(--ink);transition:background .6s,color .6s,box-shadow .6s;
}
.contact-mail:hover{background:rgba(115,141,204,.10);box-shadow:0 10px 36px rgba(115,141,204,.18)}
.sns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px}
.sns a{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.32em;color:rgba(20,20,20,.5);
  transition:color .4s}
.sns a:hover{color:var(--blue)}

/* ---------- return to sky / footer ---------- */
.heaven{display:flex;flex-direction:column;align-items:center;gap:18px;padding:14vh 0 10vh;position:relative;z-index:2}
.heaven button{
  width:118px;height:118px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.34em;padding-left:.34em;color:rgba(20,20,20,.65);
  background:rgba(255,255,255,.4);backdrop-filter:blur(4px);
  transition:box-shadow .7s, color .7s, transform .7s;
}
.heaven button:hover{box-shadow:0 0 0 14px rgba(115,141,204,.07), 0 0 0 28px rgba(115,141,204,.04);color:var(--blue);transform:translateY(-6px)}
.heaven small{font-size:10px;letter-spacing:.3em;color:rgba(20,20,20,.35)}
footer{position:relative;z-index:2;text-align:center;padding:0 0 7vh;font-size:10.5px;letter-spacing:.3em;color:rgba(20,20,20,.4)}
footer .f-logo{width:30px;margin:0 auto 16px;opacity:.35}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .rail{display:none}
  nav.main{display:none}
  .menu-btn{display:inline-block}
  section{padding:15vh 7vw}
  .sec-head{gap:8vw;margin-bottom:7vh}
}
@media (max-width:720px){
  .rev-card.long{grid-column:span 1}
}
@media (max-width:560px){
  body{font-size:14px}
  section{padding:13vh 6.5vw}
  .sec-head{flex-direction:row}
  .v-label{min-height:110px;font-size:12.5px}
  .worlds-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .card figcaption{padding-top:12px}
  .card .w-tag{font-size:9.5px}
  .card .w-title{font-size:12px}
  .media-list .m-src{min-width:100%}
  header{padding:14px 18px}
}
@media (max-width:400px){
  .worlds-grid{grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;filter:none}
  #rain{display:none}
}

/* ============================================================
   SUB PAGES — 川の各支流
============================================================ */
.crumb{position:fixed;top:74px;left:26px;z-index:45;font-size:10.5px;letter-spacing:.3em;
  color:rgba(20,20,20,.5);display:flex;align-items:center;gap:8px;transition:color .4s}
.crumb:hover{color:var(--blue)}
.crumb::before{content:'';width:26px;height:1px;background:var(--line)}

.w-hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:0;max-width:none}
.w-hero .kv{position:absolute;inset:0}
.w-hero .kv img{width:100%;height:100%;object-fit:cover}
.w-hero .kv::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.88), rgba(255,255,255,.30) 46%, rgba(255,255,255,.96))}
.w-hero-inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 8vw 10vh}
.w-tagline-v{position:absolute;z-index:2;right:7vw;top:16vh;writing-mode:vertical-rl;
  font-size:clamp(16px,2.2vw,23px);letter-spacing:.5em;color:rgba(20,20,20,.8)}
.w-kicker{font-family:var(--sans);font-weight:300;font-size:11px;letter-spacing:.5em;color:var(--blue);
  text-transform:uppercase;margin-bottom:2.4vh}
h1.w-title{font-family:var(--sans);font-weight:200;font-size:clamp(30px,5.6vw,60px);
  letter-spacing:.16em;line-height:1.32;color:var(--ink)}
h1.w-title .jp-title{font-family:var(--serif);font-weight:400;letter-spacing:.22em}
.w-catch{margin-top:2.6vh;font-size:clamp(14px,1.8vw,17px);letter-spacing:.3em;color:rgba(20,20,20,.72)}

.w-lead{font-size:15px;line-height:2.3}
.w-quote-mark{font-family:var(--sans);font-weight:200;font-size:46px;color:var(--line);line-height:1;margin-bottom:18px}

/* chapters — 三部作 */
.chapters{border-bottom:1px solid var(--line-soft)}
.chap{display:grid;grid-template-columns:170px 1fr;gap:48px;padding:8vh 0;border-top:1px solid var(--line-soft)}
.chap .yr{font-family:var(--sans);font-weight:200;font-size:17px;letter-spacing:.16em;color:var(--blue)}
.chap .fmt{display:block;margin-top:14px;font-size:10px;letter-spacing:.32em;color:rgba(20,20,20,.42);
  font-family:var(--sans);text-transform:uppercase}
.chap .circ{margin-top:26px;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);
  position:relative;opacity:.7}
.chap .circ::after{content:'';position:absolute;inset:12px;border-radius:50%;border:1px solid var(--line)}
.chap .circ::before{content:'';position:absolute;inset:22px;border-radius:50%;border:1px solid var(--line)}
.chap h3{font-size:clamp(17px,2.2vw,21px);letter-spacing:.26em;font-weight:500;margin-bottom:1.4em;line-height:2}
.chap blockquote{font-size:13px;letter-spacing:.14em;color:rgba(20,20,20,.55);line-height:2.3;
  border-left:1px solid var(--line);padding:4px 0 4px 20px;margin:0 0 1.8em}
.chap p{font-size:14px;margin-bottom:1.6em}

/* buttons */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:3.2em}
.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:11px 30px;
  font-size:11.5px;letter-spacing:.3em;padding-left:calc(30px + .3em);color:rgba(20,20,20,.72);
  transition:background .5s,color .5s,box-shadow .5s}
.pill:hover{background:rgba(115,141,204,.08);color:var(--ink);box-shadow:0 8px 28px rgba(115,141,204,.16)}
.pill.solid{background:rgba(115,141,204,.10)}

/* two-column essay */
.duo{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:7vw;align-items:start}
.duo h2{font-size:clamp(19px,2.6vw,26px);letter-spacing:.26em;font-weight:500;line-height:2.1}
@media (max-width:820px){.duo{grid-template-columns:1fr;gap:5vh}}

/* gallery — 記憶の水面 */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:24px}
.g-item{position:relative;overflow:hidden;aspect-ratio:1/1;
  border-radius:46% 54% 52% 48% / 50% 48% 52% 50%;border:1px solid var(--line-soft);
  box-shadow:0 12px 40px rgba(115,141,204,.08);transition:border-radius 1.1s cubic-bezier(.22,1,.36,1)}
.g-item:nth-child(2n){border-radius:54% 46% 48% 52% / 48% 54% 46% 52%}
.g-item:nth-child(3n){border-radius:50% 50% 56% 44% / 44% 56% 50% 50%}
.g-item:hover{border-radius:50%}
.g-item img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
.g-item:hover img{transform:scale(1.12)}
.g-item .veil{position:absolute;inset:0;background:rgba(255,255,255,.38);backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);transition:opacity 1s ease}
.g-item:hover .veil,.g-item.clear .veil{opacity:0}

/* film */
.films{display:grid;gap:34px}
.film{position:relative;aspect-ratio:16/9;border-radius:30px;overflow:hidden;
  border:1px solid var(--line-soft);box-shadow:0 16px 50px rgba(115,141,204,.10)}
.film iframe{width:100%;height:100%;border:0;display:block}
.film-cap{margin-top:12px;font-size:11px;letter-spacing:.28em;color:rgba(20,20,20,.5);text-align:center}
@media(min-width:900px){.films.multi{grid-template-columns:1fr 1fr}.films.multi .film.wide{grid-column:1/-1}}

/* poster (葬像展) */
.poster{max-width:560px;margin:0 auto;border:1px solid var(--line-soft);border-radius:26px;
  overflow:hidden;box-shadow:0 20px 70px rgba(115,141,204,.14)}

/* next world navigation — 川は流れる */
.flow-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  border-top:1px solid var(--line-soft);padding-top:8vh;margin-top:4vh}
.flow-nav a{display:flex;flex-direction:column;gap:8px}
.flow-nav .dir{font-family:var(--sans);font-size:10px;letter-spacing:.38em;color:rgba(20,20,20,.4);
  text-transform:uppercase}
.flow-nav .ttl{font-size:14px;letter-spacing:.18em;color:var(--ink);transition:color .4s}
.flow-nav a:hover .ttl{color:var(--blue)}
.flow-nav .to-river{justify-self:center;text-align:center;width:84px;height:84px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.22em;padding-left:.22em;color:rgba(20,20,20,.6);
  transition:box-shadow .6s,color .6s}
.flow-nav .to-river:hover{color:var(--blue);box-shadow:0 0 0 12px rgba(115,141,204,.06)}
.flow-nav .nx{text-align:right;align-items:flex-end}
@media(max-width:640px){.flow-nav{grid-template-columns:1fr 1fr}
 .flow-nav .to-river{display:none}}

/* worldlines — 体験小説の年表 */
.wl-wrap{position:relative;max-width:760px;margin:0 auto;padding:6vh 0}
.wl-wrap::before{content:'';position:absolute;left:90px;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom, transparent, var(--line) 8%, var(--line) 92%, transparent)}
.wl{position:relative;display:grid;grid-template-columns:90px 1fr;gap:42px;padding:4.4vh 0}
.wl .yr{font-family:var(--sans);font-weight:200;font-size:20px;letter-spacing:.14em;color:var(--blue);text-align:right;padding-right:0}
.wl::after{content:'';position:absolute;left:86.5px;top:calc(4.4vh + 11px);width:8px;height:8px;border-radius:50%;
  border:1px solid var(--blue);background:#fff}
.wl.real::after{background:var(--blue)}
.wl .ev{font-size:13.5px;letter-spacing:.16em;line-height:2.2}
.wl .ev a{border-bottom:1px solid var(--line);transition:color .4s,border-color .4s}
.wl .ev a:hover{color:var(--blue);border-color:var(--blue)}
.wl .ev small{display:block;font-size:11px;color:rgba(20,20,20,.48);letter-spacing:.2em}
@media(max-width:560px){.wl{grid-template-columns:64px 1fr;gap:24px}.wl-wrap::before{left:72px}.wl::after{left:68.5px}.wl .yr{font-size:16px}}

/* keywords (profile) */
.kw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:2px}
.kw{padding:30px 26px;border-radius:26px;border:1px solid transparent;transition:border-color .5s,background .5s}
.kw:hover{border-color:var(--line-soft);background:rgba(255,255,255,.55)}
.kw dt{font-size:15px;letter-spacing:.34em;color:var(--blue);margin-bottom:12px}
.kw dd{font-size:12.5px;letter-spacing:.14em;color:rgba(20,20,20,.66);line-height:2.1}

/* page hero (simple, for profile/news/music) */
.p-hero{min-height:46svh;display:flex;flex-direction:column;justify-content:flex-end;
  max-width:1180px;padding-bottom:2vh}
.p-hero .w-kicker{margin-bottom:2vh}

.portrait{max-width:300px;border-radius:48% 52% 50% 50%/52% 48% 52% 48%;overflow:hidden;
  border:1px solid var(--line-soft);box-shadow:0 16px 50px rgba(115,141,204,.12)}

@media (max-width:820px){
  .chap{grid-template-columns:1fr;gap:18px}
  .chap .circ{display:none}
  .w-hero{min-height:82svh}
  .w-hero-inner{padding:0 8vw 8vh 22vw}
  .w-tagline-v{position:absolute;left:7vw;right:auto;top:auto;bottom:23vh;writing-mode:vertical-rl;
    max-height:42vh;line-height:1.9;letter-spacing:.24em;font-size:12px;white-space:nowrap;
    display:block;margin:0;color:var(--blue)}
  .crumb{top:64px;left:18px}
}
@media (max-width:420px){
  .w-hero-inner{padding-left:24vw}
  .w-tagline-v{left:6vw;bottom:25vh;font-size:11px;letter-spacing:.2em}
}

/* round 3 */
.hero-mark{
  width:min(34vw,310px);
  max-height:32vh;
  object-fit:contain;
  opacity:.64;
  margin:4vh auto 2vh;
  position:relative;
  z-index:2;
}
.scroll-cue{bottom:28px!important;z-index:3;pointer-events:none}
#sora .hero-inner{padding-bottom:clamp(118px,17vh,178px)}
@media(max-height:780px){.scroll-cue{display:none}}
.p-copy{font-size:clamp(24px,4.4vw,40px);font-weight:500;letter-spacing:.18em;line-height:1.9;margin-bottom:.6em}
.p-sub{font-size:13.5px;letter-spacing:.22em;line-height:2.2;color:rgba(20,20,20,.6);margin-bottom:3em}
.pillars{display:flex;flex-direction:column;gap:26px}
.pillar{display:flex;align-items:center;gap:26px}
.pl-circle{flex:0 0 92px;width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:17px;letter-spacing:.22em;font-weight:500;color:#3a4a6b;
  background:radial-gradient(circle at 35% 30%,rgba(115,141,204,.18),rgba(84,187,212,.10));
  border:1px solid rgba(115,141,204,.25)}
.pl-desc{font-size:13px;letter-spacing:.16em;line-height:2.1;color:rgba(20,20,20,.7)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.stat{border:1px solid var(--line-soft);border-radius:22px;padding:30px 24px;display:flex;flex-direction:column;gap:10px;text-align:center;
  background:linear-gradient(180deg,rgba(115,141,204,.04),transparent)}
.st-k{font-size:11.5px;letter-spacing:.18em;color:rgba(20,20,20,.55);line-height:1.9}
.st-v{font-size:15px;font-weight:500;letter-spacing:.2em;line-height:1.9;color:#2c3a58}
.rev-label{text-align:center;font-size:11px;letter-spacing:.42em;color:rgba(20,20,20,.5);margin-bottom:2.2em}
.rev-rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;-webkit-overflow-scrolling:touch}
.rev{flex:0 0 min(560px,86%);scroll-snap-align:center;margin:0 auto;border:1px solid var(--line-soft);border-radius:26px;
  padding:38px 34px;font-size:clamp(14px,2vw,17px);letter-spacing:.2em;line-height:2.4;color:rgba(20,20,20,.78);
  background:linear-gradient(180deg,rgba(84,187,212,.05),transparent)}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:1120px;margin:0 auto}
.rev-card{border:1px solid var(--line-soft);border-radius:24px;padding:28px 24px;background:rgba(255,255,255,.54);
  box-shadow:0 12px 36px rgba(115,141,204,.08)}
.rev-card.long{grid-column:span 2}
.rev-card blockquote{font-size:14px;letter-spacing:.15em;line-height:2.25;color:rgba(20,20,20,.74);margin:0}
.rev-card small{display:block;margin-top:16px;font-family:var(--sans);font-size:10px;letter-spacing:.28em;color:var(--blue)}
.player{aspect-ratio:auto;height:352px;background:transparent}
.player iframe{border-radius:14px}
.track-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:1180px;margin:0 auto}
.track-card{border:1px solid var(--line-soft);border-radius:24px;padding:18px;background:rgba(255,255,255,.58);
  box-shadow:0 14px 42px rgba(115,141,204,.09)}
.track-card iframe{width:100%;height:152px;border:0;border-radius:14px;display:block}
.track-card .track-meta{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-top:14px}
.track-card strong{font-size:12.5px;letter-spacing:.18em;line-height:1.8}
.track-card span{font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:var(--blue)}
.films.multi{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px}
.disco-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.disc{border:1px solid var(--line-soft);border-radius:20px;padding:26px 22px;display:flex;flex-direction:column;gap:8px;
  transition:background .5s,box-shadow .5s,transform .5s}
.disc:hover{background:rgba(115,141,204,.06);box-shadow:0 10px 32px rgba(115,141,204,.13);transform:translateY(-3px)}
.d-kind{font-family:var(--sans);font-weight:300;font-size:10.5px;letter-spacing:.3em;color:var(--blue)}
.d-name{font-size:14.5px;font-weight:500;letter-spacing:.14em;line-height:1.9}
.d-play{font-family:var(--sans);font-weight:300;font-size:10px;letter-spacing:.3em;color:rgba(20,20,20,.4);margin-top:6px}
.disc:hover .d-play{color:var(--aqua)}
.bio-era{font-family:var(--sans);font-weight:300;font-size:15px;letter-spacing:.3em;margin:3.2em 0 1.2em;color:#2c3a58}
.bio-era small{display:block;font-size:10.5px;letter-spacing:.18em;color:rgba(20,20,20,.45);margin-top:8px}
.lecture{font-size:12px;letter-spacing:.1em;line-height:2.5;color:rgba(20,20,20,.66)}

/* round 2 */
.brand-logo{height:34px;width:auto;display:block;opacity:.85}
.hero-logo{display:none!important}
#sora{position:relative;overflow:hidden}
.hero-kv{position:absolute;inset:0;z-index:-1;background:url(deer.jpg) center 30%/cover no-repeat;
  opacity:.85;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 40%,transparent 96%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 40%,transparent 96%)}
.stmt-deer{position:relative;overflow:hidden;border-radius:34px}
.stmt-deer::before{content:'';position:absolute;inset:0;z-index:-1;background:url(deer.jpg) center/cover no-repeat;opacity:.55}
/* news strip near FV */
#shirase .news-list{max-width:880px}
.news-list{display:flex;flex-direction:column}
.news-row{display:grid;grid-template-columns:108px 1fr auto;gap:22px;align-items:baseline;
  padding:20px 6px;border-bottom:1px solid var(--line-soft);transition:background .4s}
a.news-row:hover{background:rgba(115,141,204,.05)}
.n-date{font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.16em;color:var(--blue)}
.n-title{font-size:13.5px;letter-spacing:.12em;line-height:2}
.n-go{color:rgba(20,20,20,.35);font-size:13px}
a.news-row:hover .n-go{color:var(--blue)}
@media(max-width:560px){.news-row{grid-template-columns:1fr;gap:4px}}
/* media collage */
.collage{border-radius:26px;overflow:hidden;border:1px solid var(--line-soft);
  box-shadow:0 18px 60px rgba(115,141,204,.12)}
.collage img{width:100%;display:block}
.media-line{margin-top:22px;font-size:12px;letter-spacing:.2em;line-height:2.3;color:rgba(20,20,20,.62);text-align:center}
/* card videos */
.ph{position:relative}
.ph video.card-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease, filter .9s ease, transform 1.1s ease;z-index:1;transform:scale(1.12);filter:blur(3.6px) saturate(.9) contrast(.92)}
.ph video.card-v.on{opacity:.72}
.card:hover .ph video.card-v.on{opacity:.9;filter:blur(1.4px) saturate(1) contrast(1);transform:scale(1.17)}
.ph .veil{z-index:2}
.kv-video{width:100%;height:100%;object-fit:cover;display:block}
/* music page */
.music-logo{height:84px;width:auto;margin-bottom:3vh;opacity:.85}
.big-quote{max-width:760px;margin:0 auto;text-align:center;font-size:clamp(16px,2.4vw,21px);
  letter-spacing:.22em;line-height:2.3;color:rgba(20,20,20,.75)}
.big-quote small{display:block;margin-top:18px;font-size:11px;letter-spacing:.3em;color:rgba(20,20,20,.45)}
.listen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px}
.listen{padding:34px 30px;border:1px solid var(--line-soft);border-radius:26px;display:flex;flex-direction:column;gap:10px;
  transition:background .5s,box-shadow .5s}
.listen:hover{background:rgba(115,141,204,.06);box-shadow:0 10px 36px rgba(115,141,204,.12)}
.listen .l-name{font-family:var(--sans);font-weight:300;font-size:17px;letter-spacing:.22em}
.listen .l-desc{font-size:11.5px;letter-spacing:.14em;color:rgba(20,20,20,.55);line-height:2}
.gigs{list-style:none;columns:2;column-gap:5vw;max-width:980px}
.gigs li{font-size:12.5px;letter-spacing:.12em;line-height:2.2;padding:7px 0;border-bottom:1px solid var(--line-soft);break-inside:avoid}
@media(max-width:720px){.gigs{columns:1}}
/* other page */
.o-list{display:flex;flex-direction:column;gap:8vh;max-width:980px;margin:0 auto}
.o-item{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5vw;align-items:center}
.o-item:nth-child(2n){direction:rtl}.o-item:nth-child(2n) .o-body{direction:ltr}.o-item:nth-child(2n) .o-ph{direction:ltr}
.o-ph{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:44% 56% 50% 50%/52% 46% 54% 48%;
  border:1px solid var(--line-soft);box-shadow:0 14px 46px rgba(115,141,204,.10)}
.o-ph img{width:100%;height:100%;object-fit:cover}
.o-ph .veil{position:absolute;inset:0;background:rgba(255,255,255,.3);backdrop-filter:blur(1.5px);transition:opacity 1s}
.o-item:hover .o-ph .veil{opacity:0}
.o-body h3{font-size:clamp(16px,2.2vw,20px);letter-spacing:.22em;font-weight:500;margin-bottom:1.2em;line-height:2}
.o-body p{font-size:13px;letter-spacing:.12em;line-height:2.3;color:rgba(20,20,20,.72);margin-bottom:1.6em}
.o-item:not(:has(.o-ph)){grid-template-columns:1fr}
@media(max-width:760px){.o-item{grid-template-columns:1fr;gap:3vh}}

/* more pages */
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:1040px;margin:0 auto}
.more-card{border:1px solid var(--line-soft);border-radius:24px;padding:30px 26px;background:rgba(255,255,255,.56);
  transition:transform .5s, box-shadow .5s, border-color .5s}
.more-card:hover{transform:translateY(-4px);box-shadow:0 16px 42px rgba(115,141,204,.13);border-color:var(--line)}
.more-card .k{font-family:var(--sans);font-size:11px;letter-spacing:.32em;color:var(--blue);text-transform:uppercase}
.more-card h3{font-size:18px;letter-spacing:.2em;line-height:1.8;margin:12px 0 10px}
.more-card p{font-size:12.5px;letter-spacing:.13em;line-height:2.1;color:rgba(20,20,20,.64)}
.more-section{border-top:1px solid var(--line-soft);padding-top:10vh;margin-top:8vh}
.more-section:first-child{border-top:0;padding-top:0;margin-top:0}
.more-section .duo{align-items:center}

/* internal document pages */
.embed-shell{padding-top:4vh}
.embed-frame-wrap{max-width:1040px;margin:0 auto;border:1px solid var(--line-soft);border-radius:30px;
  overflow:hidden;background:rgba(255,255,255,.58);box-shadow:0 18px 58px rgba(115,141,204,.12)}
.local-embed{width:100%;min-height:680px;border:0;display:block;background:#fff}
.embed-note{max-width:760px;margin:28px auto 0;text-align:center;font-size:12px;letter-spacing:.16em;
  line-height:2.1;color:rgba(20,20,20,.56)}

/* relation art */
.relation-hero-img{max-width:980px;margin:3vh auto 0;border-radius:42% 58% 51% 49%/48% 52% 50% 50%;
  overflow:hidden;border:1px solid var(--line-soft);box-shadow:0 22px 72px rgba(115,141,204,.14)}
.relation-hero-img img{width:100%;height:auto;display:block}
.relation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1120px;margin:0 auto}
.relation-card{position:relative;border:1px solid var(--line-soft);border-radius:26px;padding:30px 26px;
  background:rgba(255,255,255,.58);box-shadow:0 12px 36px rgba(115,141,204,.07)}
.relation-card .num{font-family:var(--sans);font-size:10px;letter-spacing:.35em;color:var(--blue)}
.relation-card h3{font-size:17px;letter-spacing:.18em;line-height:1.85;margin:12px 0 8px}
.relation-card .concept{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;color:rgba(20,20,20,.42);
  text-transform:uppercase;margin-bottom:16px}
.relation-card p{font-size:12.8px;letter-spacing:.12em;line-height:2.15;color:rgba(20,20,20,.68)}
.relation-card.feature{grid-column:1/-1}
@media(max-width:640px){
  .local-embed{min-height:620px}
  .embed-frame-wrap{border-radius:22px}
  .relation-hero-img{border-radius:36% 64% 48% 52%/48% 52% 45% 55%}
}