/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:var(--ink);color:var(--soul);isolation:isolate}
.hero__media,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;z-index:-2}
.hero video{opacity:0;transition:opacity 1.2s ease}
.hero video.ready{opacity:1}
/* a light scrim keeps the header and buttons readable over bright frames of the film */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,28,28,.45) 0,rgba(28,28,28,0) 120px),
             linear-gradient(0deg,rgba(28,22,40,.62) 0%,rgba(28,22,40,0) 48%)}
/* the film has bright white costumes behind the headline: a little more shade while it plays */
.hero:has(video.ready)::after{
  background:linear-gradient(180deg,rgba(28,28,28,.45) 0,rgba(28,28,28,0) 120px),
             linear-gradient(0deg,rgba(28,22,40,.74) 0%,rgba(28,22,40,.38) 42%,rgba(28,22,40,0) 66%)}
.hero__body{width:100%;padding-block:0 clamp(40px,9vh,96px);display:grid;gap:clamp(20px,2.4vw,28px)}
.hero h1{color:var(--soul);font-size:clamp(28px,3.47vw,50px);line-height:1.42;max-width:19.5em}
html[lang="en"] .hero h1{line-height:1.16;max-width:17em}
.hero :focus-visible{outline-color:var(--hope)}
@media (prefers-reduced-motion:no-preference){
  .resolve{animation:resolve 1s var(--ease-out) both;animation-delay:calc(var(--i,0) * 140ms + 150ms)}
  @keyframes resolve{from{opacity:.12;filter:blur(12px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
}

/* ---------- statement ---------- */
.statement{padding-block:clamp(88px,13vw,180px) clamp(72px,10vw,140px)}
.statement .shell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:clamp(32px,3.4vw,48px)}
.statement__text{grid-column:2 / 12;font-size:clamp(24px,2.9vw,42px);line-height:1.65;letter-spacing:.01em}
html[lang="en"] .statement__text{line-height:1.36}
.statement__text b{font-weight:400;color:var(--body)}
.statement__sub{grid-column:4 / 10;font-size:clamp(15px,1.25vw,18px);line-height:1.9}
.statement__photo{grid-column:5 / 13;margin:0}
.statement__photo img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 50%}
@media (max-width:767px){.statement__text,.statement__sub,.statement__photo{grid-column:1 / -1}}

/* ---------- Hibikimeguri ---------- */
.meguri{padding-block:clamp(40px,6vw,80px) clamp(96px,12vw,170px)}
.meguri .shell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px)}
.placard{grid-column:1 / 7;align-self:start;position:sticky;top:calc(76px + 6vh);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,2.6vw,40px)}
.placard__name{writing-mode:vertical-rl;font-size:clamp(64px,6.9vw,100px);line-height:1;letter-spacing:.14em;color:var(--heading);margin:0}
.placard__copy{display:grid;gap:18px;align-content:start;padding-top:.4em}
.placard__copy h3{font-size:clamp(20px,1.8vw,26px);line-height:1.5}
html[lang="en"] .placard__copy h3{line-height:1.25}
.placard__copy .note{font-size:14px;color:var(--muted);letter-spacing:.04em}
.placard__copy p{max-width:30em}
.procession{grid-column:8 / 13;display:grid;gap:clamp(72px,10vw,140px);padding-top:clamp(40px,8vw,120px)}
.station{margin:0;display:grid;gap:16px}
.station:nth-child(1){width:84%}
.station:nth-child(2){width:72%;justify-self:end}
.station:nth-child(3){width:90%;justify-self:start;margin-left:6%}
.aperture{overflow:hidden;aspect-ratio:4/5;background:var(--deep)}
.aperture img{width:100%;height:100%;object-fit:cover}
.station:nth-child(1) .aperture img{object-position:50% 48%}
.station:nth-child(2) .aperture img{object-position:35% 79%}
.station:nth-child(3) .aperture img{object-position:50% 44%}
.station figcaption{display:flex;align-items:baseline;gap:14px}
.station .word{font-family:var(--display);color:var(--heading);font-size:clamp(22px,2.4vw,34px);line-height:1.3}
.station .gloss{font-size:13px;color:var(--muted);letter-spacing:.04em}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .aperture{animation:iris linear both;animation-timeline:view();animation-range:entry 5% cover 50%}
    .aperture img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  }
}
@keyframes iris{from{clip-path:circle(20% at 50% 56%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes settle{from{transform:scale(1.16)}to{transform:scale(1)}}
.io .aperture{clip-path:circle(22% at 50% 56%);transition:clip-path 1.5s var(--ease-out)}
.io .aperture img{transform:scale(1.14);transition:transform 1.8s var(--ease-out)}
.io .aperture.open{clip-path:circle(75% at 50% 50%)}
.io .aperture.open img{transform:none}
@media (max-width:899px){
  .placard{grid-column:1 / -1;position:static}
  .procession{grid-column:1 / -1;padding-top:64px}
  .station:nth-child(n){width:100%;margin-left:0}
  .station:nth-child(2){width:82%}
}

/* ---------- mist ---------- */
.mist{position:relative;margin:0;height:clamp(340px,52.8vw,760px);overflow:hidden;background:var(--ink)}
.mist img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.mist::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,24,30,.5) 0%,rgba(20,24,30,0) 40%)}
.mist figcaption{position:absolute;z-index:1;left:0;right:0;bottom:clamp(28px,5vw,64px)}
.mist .display{color:var(--soul);font-size:clamp(24px,2.9vw,42px);line-height:1.4;max-width:16em}

/* ---------- join ---------- */
.join{padding-block:clamp(96px,12vw,170px)}
.join .shell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:clamp(40px,5vw,72px)}
.join__head{grid-column:1 / 10;display:grid;gap:20px}
.join__head .lead{color:var(--muted)}
.join__head h2{font-size:clamp(28px,3.4vw,48px);line-height:1.45}
html[lang="en"] .join__head h2{line-height:1.18}
.ways{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
.group{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:clamp(12px,2vw,28px);padding-block:clamp(24px,3vw,36px);border-bottom:1px solid var(--rule)}
.group h3{font-size:clamp(17px,1.4vw,20px);line-height:1.5;padding-top:clamp(14px,1.4vw,20px)}
.group ul{list-style:none;margin:0;padding:0;display:grid}
.way{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 24px;text-decoration:none;padding:clamp(14px,1.4vw,20px) clamp(10px,1.4vw,20px);border-radius:14px;isolation:isolate;transition:transform .16s var(--ease-ui)}
.way::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--hover-fill);clip-path:inset(0 100% 0 0 round 14px);transition:clip-path .45s var(--ease-ui)}
.way:active{transform:scale(.99)}
.way .label{font-family:var(--display);color:var(--heading);font-size:clamp(22px,2.4vw,34px);line-height:1.3}
.way .detail{grid-column:1;font-size:14.5px;color:var(--muted);max-width:38em}
.way .arrow{grid-row:1 / span 2;grid-column:2;width:clamp(36px,3vw,44px);height:clamp(36px,3vw,44px);border-radius:999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--heading);color:var(--heading);transition:background-color .25s ease,color .25s ease}
.way .arrow svg{width:46%;height:46%;transition:transform .3s var(--ease-ui)}
@media (hover:hover) and (pointer:fine){
  .way:hover::before{clip-path:inset(0 0 0 0 round 14px)}
  .way:hover .arrow{background:var(--heading);color:var(--bg)}
  .way:hover .arrow svg{transform:translate(2px,-2px)}
}
@media (max-width:767px){
  .join__head{grid-column:1 / -1}
  .group{grid-template-columns:minmax(0,1fr)}
  .group h3{padding-top:0;padding-bottom:4px}
  .way{padding-inline:0}
}

/* ---------- about ---------- */
.about{padding-block:clamp(40px,6vw,80px) clamp(96px,12vw,170px)}
.about .shell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);row-gap:40px}
.about__photo{grid-column:1 / 6;margin:0}
.about__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:44% 100%}
.about__text{grid-column:7 / 13;align-self:center;display:grid;gap:20px}
.about__text h2{font-size:clamp(24px,2.9vw,42px);margin-bottom:8px}
.about__text p{max-width:34em}
.about__text .footnote{color:var(--muted)}
@media (max-width:767px){
  .about__photo,.about__text{grid-column:1 / -1}
  .about__photo img{aspect-ratio:4/3}
}