/* ===== 作品詳細ページ ===== */
.work-wrap{max-width:840px;margin:0 auto;padding:0 24px}
.prose{max-width:36em}

.head{margin:96px 0 40px}
.head .eyebrow{
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.72rem;
  letter-spacing:.08em;color:var(--sub);font-feature-settings:'tnum';
}
.head h1{font-size:2rem;font-weight:400;line-height:1.4;margin-top:8px;letter-spacing:.01em}

.hero{margin:0 0 56px}
.hero .media{aspect-ratio:16/9}
.media{background:var(--thumb);overflow:hidden}
.media img,.media iframe{width:100%;height:100%;object-fit:cover;border:0}
.image-zoom-trigger{
  background:transparent;border:0;cursor:zoom-in;display:block;height:100%;padding:0;width:100%
}
.image-zoom-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.media.empty span{
  display:block;padding:8px 10px;
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.7rem;color:var(--sub)
}
.media.video-placeholder{display:grid;place-items:center;position:relative}
.media.video-placeholder .video-thumbnail{inset:0;position:absolute}
.media.empty.video-placeholder span{
  position:relative;z-index:1;padding:6px 9px;background:rgba(0,0,0,.62);color:#fff;text-align:center
}

.image-lightbox{
  background:transparent;border:0;box-sizing:border-box;height:auto;inset:0;margin:0;
  max-height:none;max-width:none;padding:32px;position:fixed;width:auto
}
.image-lightbox[open]{display:grid;place-items:center}
.image-lightbox::backdrop{background:rgba(0,0,0,.68)}
.image-lightbox img{
  border:1px solid #fff;box-sizing:border-box;max-height:calc(100vh - 64px);max-width:100%;
  object-fit:contain
}
.image-lightbox-close{
  background:#fff;border:0;color:#111;cursor:pointer;font-size:18px;height:32px;line-height:1;
  position:fixed;right:12px;top:12px;width:32px;z-index:1
}
.image-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:3px}

.lead{max-width:100%;font-size:1rem;margin-bottom:48px}
.lead p + p{margin-top:1.2em}

.meta{border-top:1px solid var(--line);margin-bottom:96px}
.meta dl{display:grid;grid-template-columns:10em 1fr}
.meta dt,.meta dd{padding:10px 8px;border-bottom:1px solid var(--line);font-size:.82rem}
.meta dt{font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.72rem;letter-spacing:.08em;color:var(--sub)}
.meta dd a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.meta dd a:hover{text-decoration-color:var(--ink)}

.body-block p{max-width:100%;font-size:.9rem;margin:0 0 1.2em}
.body-block p:last-child{margin-bottom:0}
.body-para{margin:0 0 56px}
.body-row{display:grid;gap:24px;align-items:start;margin:0 0 56px}
.body-row--1{grid-template-columns:1fr}
.body-row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.body-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.body-row--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.body-row>*{margin:0;min-width:0}

figure{margin:0 0 56px}
figure .media{aspect-ratio:3/2}
figure:not(.video) .media--aspect-3-2{aspect-ratio:3/2}
figure:not(.video) .media--aspect-16-9{aspect-ratio:16/9}
figure:not(.video) .media--fit-contain img{object-fit:contain}
figure:not(.video) .media--fit-cover img{object-fit:cover}
figure:not(.video) .media--bordered{border:1px solid #000;box-sizing:border-box}
figure.video .media{aspect-ratio:16/9}
figure.embed .fusion-embed{aspect-ratio:4/3}
figure.embed .fusion-embed--4-3{aspect-ratio:4/3}
figure.embed .fusion-embed--16-9{aspect-ratio:16/9}
.media.fusion-embed-placeholder{display:grid;place-items:center}
.media.empty.fusion-embed-placeholder span{text-align:center}
figcaption{
  margin-top:10px;
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.78rem;color:var(--sub);
  line-height:1.6;
}
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 56px}
.fig-pair figure{margin:0}

.section-label{
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:1.05rem;font-weight:500;
  letter-spacing:.08em;color:var(--sub);margin:0 0 24px;
}

.credits{border-top:1px solid var(--line);padding-top:24px;margin:96px 0 0;font-size:.82rem;color:var(--sub)}
.credits h2{
  font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.08em;color:var(--sub);margin-bottom:12px;
}

.pager{
  display:flex;justify-content:space-between;
  margin:96px 0 0;border-top:1px solid var(--line);padding-top:24px;
}
.pager a{display:block}
.pager .dir{font-family:'IBM Plex Mono','IBM Plex Sans JP',monospace;font-size:.7rem;letter-spacing:.08em;color:var(--sub);display:block}
.pager .name{font-size:.95rem}
.pager .prev{text-align:right;margin-left:auto}
.pager a:hover .name{text-decoration:underline;text-underline-offset:3px}

@media (min-width:641px) and (max-width:900px){
  .body-row--3,.body-row--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .head{margin:64px 0 32px}
  .head h1{font-size:1.5rem}
  .meta dl{grid-template-columns:7.5em 1fr}
  .body-row{grid-template-columns:1fr;gap:40px}
  .fig-pair{grid-template-columns:1fr;gap:56px}
  .image-lightbox{padding:16px}
  .image-lightbox img{max-height:calc(100vh - 32px)}
}