/* 響きめぐり 第二弾「Ephemeral／幻」archive page (2026-06).
   Rebuilt from the production's Canva site, so it keeps that design's own palette and fonts instead of the
   site's colour roles: it is a record of the production's look and stays the same in light and dark mode
   (the site header and footer still follow the theme). Phone layout: panels stack with a 15px inset. */
.eph-page{
  --e-navy:#2A256A; --e-lav:#EDE2FD; --e-cream:#F9FFD7; --e-purple:#7D61AC; --e-plum:#3D2E57; --e-lilac:#C3A1F4; --e-ink:#0A0A14;
  --e-sans:"Noto Sans JP",var(--sans); --e-mincho:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif; --e-didot:"Bodoni Moda","Didot",serif;
}
.eph{background:var(--e-navy);color:#fff;font-family:var(--e-sans);font-weight:400;line-height:1.6}
/* resets wrapped in :where() so they never outweigh the component styles below */
:where(.eph) :is(h1,h2,p,ul,ol,dl,dd,figure){margin:0}
:where(.eph) :is(ul,ol){list-style:none;padding:0}
:where(.eph) h2{font-family:inherit;color:inherit;letter-spacing:0}
.eph-didot,.eph-stagger,.eph-num,.eph-dow,.eph-presents{font-family:var(--e-didot);font-weight:400}
.eph-mincho,.eph-series{font-family:var(--e-mincho);font-weight:300}

/* ---------- hero ---------- */
.eph-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;text-align:center;
  min-height:clamp(526px,70vw,946px);padding:clamp(72px,9vw,110px) 16px clamp(40px,5vw,70px);
  background:radial-gradient(120% 90% at 50% 40%,#1E1A55 0%,#14103C 55%,var(--e-ink) 100%)}
/* hero film (720p, muted loop) fades in once playing; a scrim keeps the text readable over bright frames */
.eph-hero__film{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.eph-hero__film.ready{opacity:1}
.eph-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(90% 80% at 50% 45%,rgba(10,10,20,.25),rgba(10,10,20,.6))}
.eph-hero__cal{position:absolute;z-index:-1;left:50%;top:50%;height:90%;width:auto;transform:translate(-50%,-50%);opacity:.32;pointer-events:none}
.eph-hero__body{display:grid;justify-items:center;gap:clamp(4px,.6vw,8px);width:100%}
.eph-hero__logo{width:clamp(64px,12.4vw,168px);height:auto}
.eph-presents{color:var(--e-lav);font-size:clamp(10.5px,2.07vw,28px);letter-spacing:.03em;line-height:1}
.eph-series{font-size:clamp(14px,2.57vw,34.7px);line-height:1.3}
.eph-mark{width:min(88vw,max(315px,62vw),835px);margin:clamp(30px,8vw,110px) 0 clamp(14px,3.5vw,45px)!important}
.eph-mark img{width:100%;height:auto}
.eph-piece{font-size:clamp(13px,2.27vw,30.7px);line-height:1.66;font-weight:500}
.eph-tickets{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(15px,1.7vw,23px);margin-top:clamp(18px,3.2vw,44px)}
.eph-btn{display:inline-grid;place-items:center;min-width:clamp(191px,17.6vw,238px);min-height:clamp(45px,4.2vw,57px);padding:0 22px;border-radius:999px;
  background:var(--e-lav);color:#000;font-weight:700;font-size:clamp(15.6px,1.48vw,20px);text-decoration:underline;text-underline-offset:.2em;transition:transform .16s var(--ease-ui),background-color .2s ease}
.eph-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.eph-btn:hover{background:#fff}}
.eph :focus-visible{outline:2px solid var(--e-cream);outline-offset:3px}

/* ---------- two-panel sections ---------- */
.eph-split{display:grid;grid-template-columns:1fr 1fr;min-height:56.25vw}
.eph-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;justify-items:center;text-align:center;
  gap:clamp(14px,1.6vw,22px);padding:clamp(40px,4.2vw,58px) clamp(16px,3.5vw,52px) clamp(48px,5vw,70px)}
.eph-panel--dates{background:url(/img/ephemeral-2026-06/bg-sparkle.jpg) center/cover;color:var(--e-navy)}
.eph-panel--about{background:url(/img/ephemeral-2026-06/bg-about.jpg) center/cover;color:var(--e-cream);align-content:center}
.eph-panel--trailer{background:var(--e-navy);align-content:center;padding-inline:0}
.eph-panel--purple{background:var(--e-purple)}
.eph-panel--plum{background:var(--e-plum)}
.eph-panel--lilac{background:var(--e-lilac)}
.eph-panel--black{background:#000;color:var(--e-cream)}
.eph-panel--options{color:var(--e-cream);justify-items:start;text-align:left;padding-inline:clamp(30px,7.5vw,101px)}
.eph-panel--options::before,.eph-panel--notes::before{content:"";position:absolute;inset:0;z-index:-1;background:center/cover no-repeat}
.eph-panel--options::before{background-image:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.62)),url(/img/ephemeral-2026-06/piano.jpg)}
.eph-panel--notes::before{background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url(/img/ephemeral-2026-06/violinist.jpg);background-position:70% 50%}
.eph-panel--notes{align-content:center}

/* butterfly films behind the schedule and notes panels: loaded only near the screen (site.js video[data-src]) */
.eph-film{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.eph-film.ready{opacity:.75}
.eph-film--glow{mix-blend-mode:screen}
.eph-film--glow.ready{opacity:.9}

/* labels and section heads */
.eph-label{background:var(--e-navy);color:#fff;width:min(100%,384px);font-size:clamp(24px,2.27vw,30.7px);font-weight:500;line-height:1.4;padding:.08em .4em}
.eph-label.eph-didot{font-size:clamp(27.7px,2.57vw,34.7px);font-weight:400}
.eph-head{display:flex;justify-content:center;align-items:baseline;gap:.4em;width:100%;padding:.1em .5em;background:var(--e-navy);color:#fff;line-height:1.3}
.eph-head .eph-didot{font-size:clamp(28px,3.16vw,42.7px)}
.eph-head small{font-size:clamp(16.8px,1.58vw,21.3px)}
.eph-head--light{background:var(--e-lav);color:var(--e-navy)}
.eph-head--purple{background:var(--e-purple)}

/* dates */
.eph-days{display:flex;justify-content:center;gap:clamp(18px,2.4vw,32px);line-height:1}
.eph-days p{display:grid;justify-items:center}
/* Bodoni Moda picks its hairline "display" design at large sizes (opsz 96), where the 4's diagonal nearly vanishes.
   A smaller optical size keeps the Didot contrast but makes the hairlines readable. */
.eph-num{font-size:clamp(86px,8.5vw,115px);line-height:.95;font-variation-settings:"opsz" 18}
.eph-dow{font-size:clamp(39px,3.7vw,50px);line-height:1.1;font-variation-settings:"opsz" 24}
.eph-times{font-size:clamp(15.8px,1.48vw,20px);line-height:1.63}
.eph-times b{font-weight:700}
.eph-venues{font-size:clamp(16.8px,1.58vw,21.3px);line-height:1.6}
.eph-venues a{color:inherit;text-decoration:underline}
.eph-mincho{font-size:clamp(28px,3.65vw,49.3px);line-height:1.3;margin-bottom:.4em!important}
.eph-about{font-weight:700;font-size:clamp(14.6px,1.38vw,18.7px);line-height:2.2}
.eph-about + .eph-about{margin-top:1.1em}

/* trailer */
.eph-trailer-title{font-size:clamp(22px,2.07vw,28px);letter-spacing:.085em}
.eph-trailer{position:relative;display:block;width:100%}
.eph-trailer img:first-child{width:100%;aspect-ratio:16/9;object-fit:cover}
.eph-trailer-player{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.eph-play{position:absolute;left:50%;top:50%;width:clamp(53px,8vw,108px);height:auto;transform:translate(-50%,-50%);transition:transform .2s var(--ease-ui)}
@media (hover:hover) and (pointer:fine){.eph-trailer:hover .eph-play{transform:translate(-50%,-50%) scale(1.06)}}

/* people */
.eph-people{display:grid;grid-template-columns:repeat(2,minmax(0,278px));gap:clamp(16px,1.6vw,21px);justify-content:center}
.eph-person{display:grid;gap:4px;color:var(--e-lav)}
.eph-person img{width:100%;aspect-ratio:7/8;object-fit:cover;object-position:50% 22%;margin-bottom:12px}
.eph-person figcaption{display:grid;font-size:clamp(16.8px,1.58vw,21.3px);line-height:1.36}
.eph-name{font-weight:700}
.eph-person p{text-align:left;font-size:clamp(14.6px,1.38vw,18.7px);line-height:1.4;margin-top:12px!important}
.eph-person--wide{width:min(100%,583px);justify-items:center}
.eph-person--wide img{width:min(100%,278px)}

/* creatives */
.eph-credits{display:grid;gap:clamp(18px,1.8vw,24px);color:#fff}
.eph-credits div{display:grid;justify-items:center}
.eph-credits dt{font-size:clamp(14.6px,1.38vw,18.7px)}
.eph-credits dd{font-weight:700;font-size:clamp(16.8px,1.58vw,21.3px)}
.eph-sponsor img{width:clamp(140px,13.5vw,182px);height:auto;margin-bottom:6px}
.eph-sponsor dt{font-size:clamp(16.8px,1.58vw,21.3px)}

/* staggered Didot titles (Time / Schedule, About / Options) */
.eph-stagger{display:flex;align-items:flex-start;font-size:clamp(52px,5.6vw,76px);line-height:1.05;letter-spacing:-.01em;color:var(--e-cream);margin-bottom:.15em!important}
.eph-stagger span + span{margin-left:-.18em;transform:translateY(.33em)}

/* schedule */
.eph-schedule{display:grid;gap:clamp(19px,1.8vw,26px);margin-top:clamp(16px,2vw,28px)!important}
.eph-schedule li{display:grid;justify-items:center}
.eph-schedule b{font-weight:700;font-size:clamp(16.8px,1.58vw,21.3px);line-height:1.6}
.eph-schedule span{font-size:clamp(11.6px,1.09vw,14.7px);line-height:1.63}
.eph-schedule small{font-size:clamp(9.5px,.89vw,12px);line-height:1.6}

/* options + notes */
.eph-options{display:grid;gap:clamp(18px,2vw,30px);margin-top:clamp(18px,2.3vw,32px)!important}
.eph-options li{display:grid}
.eph-options b{font-weight:400;font-size:clamp(23px,2.17vw,29.3px);line-height:1.6}
.eph-options span{font-size:clamp(14.7px,1.38vw,18.7px);line-height:1.6}
.eph-notes-title{font-size:clamp(16.8px,1.58vw,21.3px)}
.eph-notes{font-size:clamp(12.6px,1.18vw,16px);line-height:2.05;font-weight:500}

/* closing */
.eph-closing{display:grid;justify-items:center;gap:clamp(20px,2.6vw,36px);text-align:center;padding:clamp(100px,10.8vw,146px) 16px clamp(80px,8vw,110px);
  background:radial-gradient(40% 50% at 78% 70%,rgba(47,211,230,.28),transparent 70%),radial-gradient(30% 40% at 90% 85%,rgba(176,92,255,.3),transparent 70%),var(--e-navy)}
.eph-contact{font-weight:700;font-size:clamp(24px,2.27vw,30.7px);line-height:1.3;padding-bottom:.6em;position:relative}
.eph-contact a{color:inherit;text-decoration:underline;text-underline-offset:.22em}
.eph-contact::after{content:"";position:absolute;left:50%;bottom:0;width:85px;height:1px;background:currentColor;transform:translateX(-50%)}
.eph-days--light{color:#fff;gap:clamp(36px,18vw,250px)}
.eph-tickets--big .eph-btn{min-width:clamp(251px,22.9vw,309px);min-height:clamp(59px,5.4vw,73px);font-size:clamp(17px,1.48vw,20px)}

/* ---------- phones: single column, panels inset 15px (as in the original) ---------- */
@media (max-width:767px){
  .eph-split{grid-template-columns:1fr;min-height:0;padding:10px 15px;gap:15px}
  .eph-panel{padding-inline:16px}
  .eph-panel--trailer{padding-inline:0}
  .eph-panel--options{padding-inline:30px}
  .eph-people{grid-template-columns:minmax(0,222px);gap:40px}
  .eph-person--wide img{width:222px}
  .eph-tickets{flex-direction:column;align-items:center}
  .eph-stagger{font-size:clamp(38px,13vw,52px)}
  .eph-days{gap:30px}
  .eph-num{font-size:clamp(64px,21vw,80px)}
  .eph-days--light{gap:44px}
}