/* 作品の表示。単独のページ（/works/<slug>/、body.work）と、トップから開く重ね（.wko）の両方で使う。
   .wk の中は暗い面：画面いっぱいのカバー（画像か動画）→ 本文 → コピーライト */
.wk{--bg:#0f0e0d;--ink:#efece6;--ink2:rgba(239,236,230,.8);--mute:rgba(239,236,230,.52);--line:rgba(239,236,230,.12);--line2:rgba(239,236,230,.24);--chip:#efece6;--chip-ink:#141311;--red:#ff3b30;
  --gut:clamp(20px,4.4vw,64px);--jp:"Noto Sans JP",system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--mono:"Geist Mono",ui-monospace,monospace;--ease:cubic-bezier(.2,.7,.2,1);
  display:block;background:var(--bg);color:var(--ink);font-family:"Geist","Noto Sans JP",system-ui,sans-serif;font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wk a{color:inherit;text-decoration:none}
.wk img{display:block;max-width:100%}
/* 単独のページ：ヘッダーは暗い面の上のガラス */
html:has(body.work){background:#0f0e0d}
body.work{background:#0f0e0d}
body.work .cap,body.work .sheet{color:#f1eee8;background:rgba(22,19,17,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 1.5px 1.5px 1px -1px rgba(255,255,255,.55),inset -1px -1px 1px -1px rgba(255,255,255,.22),0 18px 44px -18px rgba(0,0,0,.6)}
body.work .cta{background:#f1eee8;color:#151311}
body.work .nav a[aria-current="page"]{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.preview{position:fixed;left:50%;top:80px;z-index:30;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:var(--red);color:#fff;font-size:12px}

/* ---------- カバー ---------- */
.wk-hero{position:relative;height:100vh;height:100svh;min-height:480px;overflow:hidden;background:#0b0a0a;isolation:isolate}
.wk-media{position:absolute;inset:0;z-index:-2;background:#141312 center/cover no-repeat}
.wk-media.ph{background-image:url(/img/work-placeholder.jpg)} /* 絵のない作品：控えめなロゴを敷く */
.wk-media .wk-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .7s}
.wk-media .wk-img.in,.no-js .wk-media .wk-img{opacity:1}
.wk-media .wk-vid{position:absolute;left:50%;top:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);max-width:none;transform:translate(-50%,-50%);border:0;pointer-events:none;object-fit:cover}
.wk-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,7,7,.5) 0,rgba(8,7,7,.1) 22%,rgba(8,7,7,.34) 44%,rgba(8,7,7,.86) 70%,rgba(8,7,7,.97) 100%)}
.wk-title{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(64px,10vh,120px);max-width:1100px}
.wk-kind{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:rgba(239,236,230,.72);margin-bottom:14px}
.wk-title h1{font-family:var(--jp);font-weight:500;font-size:clamp(26px,4.2vw,62px);line-height:1.25;letter-spacing:-.015em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.wk-en{margin-top:8px;font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.6vw,23px);color:rgba(239,236,230,.7)}
.wk-sub{margin-top:10px;font-size:15px;line-height:1.8;color:var(--ink2)}
.wk-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:13px;color:var(--ink2)}
.wk-meta span:first-child{font-family:var(--mono)}
/* コピーライト：カバーの上では右下に薄く。受託した作品を正しく引用するための表記 */
.wk-copy{position:absolute;right:var(--gut);bottom:18px;max-width:min(60%,640px);text-align:right;font-size:10.5px;line-height:1.6;color:rgba(239,236,230,.5);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.wk-scroll{position:absolute;left:var(--gut);bottom:16px;display:flex;align-items:center;gap:10px;height:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,236,230,.6)}
.wk-scroll i{position:absolute;left:calc(100% + 10px);top:4px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid rgba(239,236,230,.8);opacity:0;animation:wkcue 2.6s cubic-bezier(.4,0,.4,1) infinite}
.wk-scroll i + i{animation-delay:1.3s}
@keyframes wkcue{0%{transform:translateY(0);opacity:0}30%{opacity:.9}100%{transform:translateY(16px);opacity:0}}

/* ---------- 本文 ---------- */
.wk-content{padding:clamp(48px,7vw,96px) var(--gut) clamp(40px,5vw,64px)}
.w-body{max-width:860px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.2vw,40px)}
.b-text p{font-size:15.5px;line-height:2.05;color:var(--ink2)}
.b-text p+p{margin-top:1.1em}
.b-text a{border-bottom:1px solid var(--line2)}
.w-lead p{font-size:clamp(16px,1.35vw,18.5px);color:var(--ink)}
.w-empty{font-size:14px;color:var(--mute)}
.b-h1{margin-top:clamp(20px,3vw,44px);font-family:var(--jp);font-weight:500;font-size:clamp(24px,2.6vw,36px);line-height:1.4;letter-spacing:-.01em}
.b-h2{margin-top:8px;font-family:var(--jp);font-weight:500;font-size:clamp(18px,1.7vw,23px);line-height:1.5;padding-left:14px;border-left:2px solid var(--ink)}
.b-info,.b-credits{padding:22px 26px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.b-info h3,.b-credits h3{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.08em;color:var(--mute);margin-bottom:10px}
.b-info dl,.b-credits dl{display:grid;grid-template-columns:minmax(7em,auto) minmax(0,1fr);gap:0 24px}
.b-info dt,.b-info dd,.b-credits dt,.b-credits dd{padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.75}
.b-info dt:first-of-type,.b-info dt:first-of-type + dd,.b-credits dt:first-of-type,.b-credits dt:first-of-type + dd{border-top:0}
.b-info dt,.b-credits dt{color:var(--mute)}
.b-credits dl{grid-template-columns:minmax(9em,34%) minmax(0,1fr)}
.b-credits dt,.b-credits dd{font-size:13px;padding:7px 0}
/* 画像（大）とギャラリーと動画は、本文の幅より広く出す */
.b-image,.b-gallery,.b-video{width:min(1180px,calc(100vw - var(--gut) * 2));margin-left:50%;transform:translateX(-50%)}
.b-image.in-text{width:auto;margin-left:0;transform:none}
/* 画像は、読み込めるまで光の走る下地を見せる */
.wk .w-body img,.vid{width:100%;border-radius:12px;background:linear-gradient(100deg,#1a1918 30%,#2a2826 50%,#1a1918 70%) 0 0/300% 100%;animation:wksk 1.6s linear infinite}
.wk .w-body img.in{animation:none;background:#1a1a1c}
.b-gallery{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px}
.wk .b-gallery img{aspect-ratio:var(--ar,16/9);object-fit:cover;border-radius:9px;transition:opacity .3s}
.b-gallery a:hover img{opacity:.85}
.vid{position:relative;aspect-ratio:16/9;overflow:hidden;animation:none;background:#1a1a1c}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0}
.wk figcaption{margin-top:8px;font-size:12px;line-height:1.7;color:var(--mute)}
.w-links{display:flex;flex-wrap:wrap;gap:10px}
.wk .pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;font-size:14px;border:1px solid var(--line2);transition:background-color .3s,color .3s}
.wk .pill:hover{background:rgba(255,255,255,.08)}
.wk .pill.solid{background:var(--chip);color:var(--chip-ink);border-color:transparent}
.wk .pill.solid:hover{background:#fff}
.wk .pill .arw{transition:transform .4s var(--ease)}
.wk .pill:hover .arw{transform:translateX(4px)}
.wk-foot{max-width:860px;margin:clamp(56px,7vw,96px) auto 0;padding-top:22px;border-top:1px solid var(--line)}
.wk-copy2{font-size:11.5px;line-height:1.7;color:var(--mute)}
.wk-note{margin-top:6px;font-size:11px;color:rgba(239,236,230,.34)}
.wk-foot .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* ---------- 読み込み中の骨組み（トップから開いたとき、本文が届くまで） ---------- */
.sk{display:grid;gap:18px;max-width:860px;margin:0 auto}
.sk i{display:block;height:16px;border-radius:8px;background:linear-gradient(100deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 70%) 0 0/300% 100%;animation:wksk 1.4s linear infinite}
.sk i.t{height:22px;width:62%}.sk i.s{width:84%}.sk i.x{width:46%}
.sk i.card{height:150px;border-radius:16px}
.sk i.pic{height:auto;aspect-ratio:16/9;border-radius:12px}
.sk .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@keyframes wksk{0%{background-position:100% 0}100%{background-position:-100% 0}}

@media (max-width:760px){
  .wk-title{bottom:86px}
  .wk-copy{left:var(--gut);max-width:none;text-align:left;bottom:50px}
  .b-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .b-info,.b-credits{padding:16px 18px}
  .b-info dl,.b-credits dl{grid-template-columns:1fr}
  .b-info dd,.b-credits dd{border-top:0;padding-top:0}
  .b-info dt:first-of-type + dd,.b-credits dt:first-of-type + dd{padding-top:0}
}
@media (prefers-reduced-motion: reduce){.wk-scroll i,.sk i,.wk .w-body img{animation:none}.wk-scroll i{opacity:.7}.wk-scroll i + i{display:none}}