/* ============================================================
   RUM & DASH — FAMILY ALBUM
   夜のシアター写真集 × 海外モダン（awwwards系）
   Display: Fraunces / JP: Zen Old Mincho / Label: IBM Plex Mono
   ============================================================ */

:root{
  --night:#0B0B0E;
  --night2:#101014;
  --paper:#F2EDE4;
  --mut:rgba(242,237,228,.52);
  --line:rgba(242,237,228,.14);
  --rum:#FF6B4A;
  --dash:#B8A9E8;
  --disp:"Fraunces",serif;
  --min:"Zen Old Mincho",serif;
  --mono:"IBM Plex Mono",monospace;
  --sans:"Zen Kaku Gothic New",sans-serif;
  --pad:clamp(20px,5vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--night);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--rum);color:var(--night)}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- grain（劇場の空気） ---------- */
body::after{
  content:"";position:fixed;inset:-100%;z-index:98;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(9) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}12%{transform:translate(-3%,2%)}25%{transform:translate(2%,-3%)}
  37%{transform:translate(-2%,-2%)}50%{transform:translate(3%,3%)}62%{transform:translate(-3%,0)}
  75%{transform:translate(2%,2%)}87%{transform:translate(0,-3%)}
}

/* ---------- opening（表紙が開く） ---------- */
.op{position:fixed;inset:0;z-index:200}
.op.done{visibility:hidden}
.op-half{position:absolute;top:0;bottom:0;width:50.5%;background:var(--night);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1)}
.op-l{left:0}.op-r{right:0}
.op.open .op-l{transform:translateX(-101%)}
.op.open .op-r{transform:translateX(101%)}
.op-spine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1px;height:0;
  background:linear-gradient(180deg,transparent,rgba(242,237,228,.5),transparent);
  animation:opSpine 1.6s cubic-bezier(.16,1,.3,1) .7s forwards}
@keyframes opSpine{to{height:64vh}}
.op-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.6vh;text-align:center;transition:opacity .45s ease}
.op-presents{font-family:var(--mono);font-size:10px;letter-spacing:.5em;color:var(--mut);
  opacity:0;animation:opFade 1s ease .2s forwards}
.op-title{font-family:var(--disp);font-style:italic;font-weight:420;font-variation-settings:"opsz" 144;
  font-size:clamp(44px,7.5vw,104px);line-height:1;letter-spacing:-.01em;
  opacity:0;transform:translateY(26px);animation:opRise 1s cubic-bezier(.16,1,.3,1) .85s forwards}
.op-title span{color:var(--rum)}
.op-sub{font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--mut);
  opacity:0;transform:translateY(14px);animation:opRise 1s cubic-bezier(.16,1,.3,1) 1.1s forwards}
.op-count{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--mut)}
.op.open .op-center,.op.open .op-spine,.op.open .op-count{opacity:0}
@keyframes opFade{to{opacity:.8}}
@keyframes opRise{to{opacity:1;transform:none}}
/* 2回目以降（同セッション）は短縮 */
.op.fast .op-half{transition-duration:.55s}
.op.fast .op-center,.op.fast .op-spine,.op.fast .op-count{display:none}

/* ---------- progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--paper);opacity:.85}

/* ---------- header ---------- */
.hd{
  position:fixed;z-index:110;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:18px var(--pad);mix-blend-mode:difference;
}
.hd-logo{font-family:var(--disp);font-weight:600;font-size:18px;text-decoration:none;letter-spacing:.02em}
.hd-logo span{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.3em;margin-left:10px;opacity:.7}
.hd-right{display:flex;gap:26px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;opacity:.85}
.hd-count b{font-weight:500}
@media (max-width:780px){.hd-loc{display:none}}

/* ---------- FV ---------- */
.fv{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.fv-photo{
  position:absolute;top:6svh;right:calc(var(--pad)*.75);bottom:6svh;width:min(42vw,560px);
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.6s ease .9s,transform 2.8s cubic-bezier(.16,1,.3,1) .9s;
}
.fv-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--night) 0%,transparent 34%)}
body.ready .fv-photo{opacity:.92;transform:scale(1)}
.fv-inner{position:relative;z-index:2;padding:0 var(--pad);width:100%}
.fv-label{font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--mut);margin-bottom:3.2vh}
.fv-title{font-family:var(--disp);font-weight:460;font-variation-settings:"opsz" 144;
  font-size:clamp(52px,10.5vw,164px);line-height:.94;letter-spacing:-.015em}
.fv-line{display:block;overflow:hidden}
.fv-line i{display:block;font-style:normal;transform:translateY(112%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.fv-line:nth-child(2) i{transition-delay:.09s}
.fv-line:nth-child(3) i{transition-delay:.18s}
body.ready .fv-line i{transform:translateY(0)}
.fv-line-em i{font-style:italic;font-weight:340;color:var(--rum)}
.fv-jp{font-family:var(--min);font-size:clamp(14px,1.6vw,20px);letter-spacing:.14em;margin-top:4vh;
  opacity:0;transition:opacity 1.2s ease 1.5s}
body.ready .fv-jp{opacity:.9}
.fv-cue{position:absolute;left:var(--pad);bottom:26px;z-index:2;display:flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:.18em;color:var(--mut)}
.fv-cue span{display:block;width:52px;height:1px;background:var(--mut);transform-origin:left;animation:cue 2.2s ease infinite}
@keyframes cue{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}
@media (max-width:780px){
  .fv-photo{top:auto;bottom:0;right:0;left:30%;width:auto;height:52svh}
  .fv-photo::after{background:linear-gradient(180deg,var(--night) 0%,transparent 45%),linear-gradient(90deg,var(--night) 0%,transparent 50%)}
  .fv-inner{align-self:flex-start;padding-top:16svh}
}

/* ---------- chapter head（共通） ---------- */
.ch{position:relative;padding-top:clamp(100px,16vh,190px)}
.ch-head{position:relative;padding:0 var(--pad);margin-bottom:clamp(48px,9vh,110px)}
.ch-num{
  position:absolute;top:-.34em;right:calc(var(--pad)*.5);z-index:0;
  font-family:var(--disp);font-weight:560;font-size:clamp(120px,24vw,340px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(242,237,228,.13);user-select:none;
}
.ch-tt{position:relative;z-index:1;max-width:760px}
.ch-label{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--mut);margin-bottom:2.4vh}
.ch-label b{color:var(--paper);font-weight:500}
.ch-who{display:inline-block;margin-left:14px;padding:3px 10px;border:1px solid var(--line);border-radius:99px;font-size:9px;letter-spacing:.24em}
.who-rum{color:var(--rum);border-color:rgba(255,107,74,.4)}
.who-dash{color:var(--dash);border-color:rgba(184,169,232,.4)}
.who-both{color:var(--paper)}
.ch-hl{font-family:var(--min);font-weight:700;font-size:clamp(26px,4.2vw,52px);line-height:1.42;letter-spacing:.05em;margin-bottom:2.6vh}
.ch-body{font-size:clamp(13px,1.25vw,15px);line-height:2.1;letter-spacing:.06em;color:var(--mut);max-width:34em}
.ch-data{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--mut);margin-top:2.4vh;padding-top:2vh;border-top:1px solid var(--line);max-width:34em}

/* reveal（IO） */
.rv{opacity:0;transform:translateY(46px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
figure.rv{transition-duration:1.2s}
.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.12);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.rv.in img{transform:scale(1)}

/* ---------- CH.01 RUN（横流れ＝大技） ---------- */
.hstrip-wrap{position:relative}
.hstrip{display:flex;align-items:center;gap:clamp(18px,3vw,44px);padding:0 var(--pad);will-change:transform}
.hs-item{flex:0 0 auto}
.hs-item figure{overflow:hidden;background:var(--night2)}
.hs-item img{height:clamp(300px,58vh,640px);width:auto}
.hs-item.pt img{height:clamp(340px,66vh,720px)}
.hs-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--mut);margin-top:10px}
.hs-end{flex:0 0 auto;padding-right:var(--pad)}
.hs-end p{font-family:var(--disp);font-style:italic;font-weight:340;font-size:clamp(24px,3vw,40px);color:var(--mut);white-space:nowrap}
@media (min-width:781px){
  .hstrip-wrap{height:auto}
  .hstrip-wrap.pin{height:var(--pinh)}
  .hstrip-wrap.pin .hstrip{position:sticky;top:0;height:100svh;align-items:center}
}
@media (max-width:780px){
  .hstrip{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .hs-item{scroll-snap-align:center}
  .hs-item img{height:56svh}
}

/* ---------- CH.02 WATCH（静・間） ---------- */
.stills{display:flex;flex-direction:column;gap:clamp(80px,16vh,200px);padding:0 var(--pad)}
.still{width:100%}
.still figure{overflow:hidden;background:var(--night2)}
.still img{width:100%;height:auto}
.still-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--mut);margin-top:12px}
/* 非対称の置き方（海外モダンの余白） */
.still:nth-child(6n+1){width:min(62%,760px);align-self:flex-start}
.still:nth-child(6n+2){width:min(46%,560px);align-self:flex-end}
.still:nth-child(6n+3){width:min(72%,900px);align-self:center}
.still:nth-child(6n+4){width:min(44%,520px);align-self:flex-start;margin-left:6%}
.still:nth-child(6n+5){width:min(58%,720px);align-self:flex-end;margin-right:4%}
.still:nth-child(6n){width:100%}
@media (max-width:780px){
  .stills{gap:64px}
  .still:nth-child(n){width:100%;margin:0}
  .still:nth-child(6n+2),.still:nth-child(6n+4){width:74%}
  .still:nth-child(6n+2){align-self:flex-end}
}

/* ---------- CH.03 PACK ---------- */
.pack-king{position:relative;margin:0;overflow:hidden}
.pack-king img{width:100%;height:100svh;object-fit:cover;will-change:transform}
.pack-king figcaption{position:absolute;left:var(--pad);bottom:24px;font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--paper);opacity:.8}
.pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px);padding:clamp(48px,9vh,110px) var(--pad) 0;align-items:start}
.pack-grid .still:nth-child(2){margin-top:clamp(60px,12vh,150px)}
.pack-echo{padding:clamp(70px,13vh,160px) var(--pad);text-align:center;
  font-family:var(--disp);font-style:italic;font-weight:340;font-size:clamp(26px,4.4vw,58px);color:var(--paper)}
.pack-echo i{background:linear-gradient(90deg,var(--rum),var(--dash));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:780px){.pack-grid{grid-template-columns:1fr}.pack-grid .still:nth-child(2){margin-top:0}}

/* ---------- CH.04 DAYS ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:clamp(70px,12vh,150px)}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:mq 30s linear infinite}
.marquee-track span{font-family:var(--disp);font-weight:400;font-style:italic;font-size:clamp(16px,2vw,24px);letter-spacing:.06em;color:var(--mut)}
@keyframes mq{to{transform:translateX(-50%)}}
.days-grid{columns:3;column-gap:clamp(16px,2.4vw,36px);padding:0 var(--pad)}
.days-item{break-inside:avoid;margin-bottom:clamp(28px,4vh,52px);position:relative}
.days-item figure{overflow:hidden;background:var(--night2)}
.days-item img{width:100%;height:auto;transition:transform .8s cubic-bezier(.16,1,.3,1)}
@media (pointer:fine){.days-item:hover img{transform:scale(1.045)}}
.days-cap{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--mut);margin-top:9px}
.days-new{color:var(--night);background:var(--rum);padding:2px 7px;border-radius:2px;font-weight:500;letter-spacing:.14em}
@media (max-width:1080px){.days-grid{columns:2}}
@media (max-width:560px){.days-grid{columns:2;column-gap:12px}}

/* ---------- EPILOGUE ---------- */
.epi{position:relative;margin-top:clamp(100px,18vh,220px);min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.epi-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
.epi::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,var(--night) 0%,rgba(11,11,14,.2) 45%,rgba(11,11,14,.88) 100%)}
.epi-inner{position:relative;z-index:2;width:100%;padding:24vh var(--pad) 8vh;text-align:center}
.epi-hl{font-family:var(--min);font-weight:700;font-size:clamp(26px,4vw,48px);letter-spacing:.1em;margin-bottom:3vh}
.epi-body{font-size:clamp(12px,1.2vw,14px);line-height:2.3;letter-spacing:.08em;color:var(--mut);margin-bottom:9vh}
.epi-noend{font-family:var(--disp);font-style:italic;font-weight:380;font-variation-settings:"opsz" 144;
  font-size:clamp(38px,7vw,104px);line-height:1.04;letter-spacing:-.01em;margin-bottom:2.4vh}
.epi-noend-jp{font-family:var(--min);font-size:clamp(13px,1.4vw,17px);letter-spacing:.2em;color:var(--mut);margin-bottom:9vh}
.epi-links{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:9vh}
.epi-links-label{font-family:var(--mono);font-size:9px;letter-spacing:.5em;color:var(--mut);margin-bottom:6px}
.epi-link{display:flex;align-items:baseline;gap:14px;padding:14px 22px;min-width:min(420px,84vw);
  justify-content:space-between;border:1px solid var(--line);text-decoration:none;
  transition:border-color .35s ease,background .35s ease}
.epi-link b{font-family:var(--disp);font-weight:560;font-size:15px;letter-spacing:.04em;color:var(--paper)}
.epi-link span{font-family:var(--sans);font-size:10px;letter-spacing:.12em;color:var(--mut)}
.epi-link i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--mut);transition:transform .35s ease,color .35s ease}
.epi-link:hover{border-color:rgba(242,237,228,.45);background:rgba(242,237,228,.04)}
.epi-link:hover i{transform:translate(3px,-3px);color:var(--rum)}
.epi-meta{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--mut);margin-bottom:14px}
.epi-credit{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--mut)}
.epi-credit a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--line)}

/* ---------- reduced motion（全演出即時表示） ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .op{display:none}
  .fv-photo{opacity:.92;transform:none}
  .fv-line i{transform:none}
  .fv-jp{opacity:.9}
  .rv{opacity:1;transform:none}
  .rv-img img{transform:none}
  .hstrip-wrap.pin{height:auto}
  .hstrip-wrap.pin .hstrip{position:static;height:auto;overflow-x:auto}
}