/* MYOKO WORKS — Projects page (load after home.css + about.css) */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Chapter index under hero */
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));border-top:1px solid var(--border);margin-bottom:0}
.chapters a{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:24px;row-gap:4px;align-items:baseline;padding:32px 32px 32px 0;border-bottom:1px solid var(--border);color:var(--text)}
.chapters a+a{padding-left:32px;border-left:1px solid var(--border)}
.chapters a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-cine)}
.chapters a:hover{color:var(--text)}
.chapters a:hover::after{transform:scaleX(1)}
.chapters__no{grid-row:1/3;font-family:var(--serif);font-size:2.6rem;font-weight:300;line-height:1;color:var(--primary-light);transition:transform .6s var(--ease-cine)}
.chapters a:hover .chapters__no{transform:translateY(-4px)}
.chapters__en{min-width:0;font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-50)}
.chapters__jp{grid-column:2;min-width:0;text-wrap:balance;font-family:var(--serif-jp);font-size:clamp(1rem,1.4vw,1.15rem);letter-spacing:.04em}
.chapters__count{grid-row:1/3;grid-column:3;white-space:nowrap;font-size:.75rem;letter-spacing:.15em;color:var(--text-50)}
.chapters__count::before{content:"( "}.chapters__count::after{content:" )"}
.page-hero{padding-bottom:0}
.page-hero__body{margin-bottom:96px}

/* Owned cases: sticky media beside scrolling text */
.case{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:96px;align-items:start}
.case+.case{margin-top:160px;padding-top:160px;border-top:1px solid var(--border)}
.case--reverse .case__media{order:2}
.case__media{position:sticky;top:120px;margin:0}
.case__photo img{aspect-ratio:4/3}
.case__panel{aspect-ratio:4/3;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease-cine),border-color .3s var(--ease)}
.case__body{display:flex;flex-direction:column;align-items:flex-start;gap:32px;max-width:620px}
.case__body>*{width:100%;margin:0}
.case__body>.text-link{width:auto}
.case__body .platform__title{margin-bottom:24px}
.case__list-title{margin-bottom:16px!important}
.js .is-in>.case__panel .panel__word em{clip-path:inset(0 -10% 0 0)}

/* Regional works */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:64px 32px}
.work{display:flex;flex-direction:column;align-items:flex-start}
.work__media{display:block;width:100%;border-radius:12px;overflow:hidden;margin-bottom:32px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.work__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s var(--ease-cine)}
.work:hover .work__media img{transform:scale(1.04)}
.work__meta{display:flex;align-items:center;gap:16px;width:100%;margin-bottom:16px;font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--primary-light)}
.work__meta span:first-child{font-family:var(--serif);font-size:1.3rem;font-weight:300;letter-spacing:0}
.work__meta::after{content:"";flex:1;height:1px;background:var(--border);order:1}
.work__meta span:last-child{order:2}
.work__title{font-family:var(--serif-jp);font-size:1.5rem;line-height:1.5;letter-spacing:.04em;margin-bottom:16px}
.work__text{font-size:.95rem;line-height:1.9;color:var(--text-soft);margin-bottom:24px;flex:1;text-wrap:pretty}
.work__link{font-size:.85rem;letter-spacing:.1em}
.work__link span{display:inline-block;transition:transform .4s var(--ease)}
.work:hover .work__link span{transform:translate(3px,-3px)}

/* Work reveal: image unveils bottom-up, then the text rises */
.js .work[data-reveal]{opacity:1;transform:none}
.js .work .work__media{clip-path:inset(100% 0 0 0 round 12px);transition:clip-path 1.5s var(--ease-cine);transition-delay:calc(var(--i,0)*90ms)}
.js .work.is-in .work__media{clip-path:inset(0 0 0 0 round 12px)}
.js .work .work__media img{transform:scale(1.15)}
.js .work.is-in .work__media img{transform:scale(1);transition:transform 1.8s var(--ease-cine)}
.js .work.is-in:hover .work__media img{transform:scale(1.04);transition-duration:.9s}
.js .work>*:not(.work__media){opacity:0;transform:translate3d(0,16px,0);transition:opacity 1s var(--ease-cine),transform 1.2s var(--ease-cine);transition-delay:calc(var(--i,0)*90ms + 400ms)}
.js .work.is-in>*:not(.work__media){opacity:1;transform:none}

@media (max-width:1023px){
  .case{grid-template-columns:1fr;gap:48px}
  .case--reverse .case__media{order:0}
  .case__media{position:static}
  .case+.case{margin-top:96px;padding-top:96px}
  .case__body{max-width:none}
}
@media (max-width:767px){
  .page-hero__body{margin-bottom:64px}
  .chapters a,.chapters a+a{padding:24px 0;border-left:0}
  .chapters__no{font-size:2rem}
  .case__photo img,.case__panel{aspect-ratio:3/2}
  .works{gap:56px}
}
@media (prefers-reduced-motion:reduce){
  .js .work .work__media{clip-path:none!important}
  .js .work>*,.js .work .work__media img{opacity:1!important;transform:none!important}
  .case__panel{transform:none!important}
}