/* Work の一覧ページと作品ページ（10/23。_src/build_work.py が書き出すページだけで読む）
   色と字の段は本線の変数（_src/style.css の :root。カラフル版は css/colorful.css の #work と #contact）をそのまま使う。
   手本: 一覧は Akaru と haoqi（細い罫線、分野の札に件数、デモに小さな札）、作品ページは KODE（最初の画面に作品のループと再生の札 1 つ）、
   THE LINE（尺の小さな字の帯、最後に Next）、Litebox（終わりに相談）。理由は motion/_spec_work_20261023.md */
.wpage [hidden]{display:none!important}

/* ---- 一覧 ---- */
.wl{padding-bottom:clamp(80px,13vh,150px)}
.wl__head{padding-bottom:clamp(26px,4vh,44px)}
.wl__filter{list-style:none;margin:0;padding-bottom:clamp(36px,6vh,68px)}
.wl__cnt{margin-left:8px;opacity:.62;font-variant-numeric:tabular-nums}
.wl__grid{--cols:2;list-style:none;margin:0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(48px,6.5vw,92px)}
.wl__grid--3{--cols:3}
.wc{min-width:0}
.wc__a{display:flex;flex-direction:column;gap:14px}
.wc__media{position:relative;display:block;aspect-ratio:16/9;background:#000}
.wc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wc__media .corner{opacity:0;transition:opacity var(--t1) var(--e-out)}
.wc__a:hover .corner,.wc__a:focus-visible .corner{opacity:1}
.wc__a:focus-visible{outline:none}
.wc__a:focus-visible .wc__media{outline:2px solid var(--ac);outline-offset:6px}
.wc__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding-top:14px}
.wc__t{font-family:var(--f-grot);font-weight:600;font-size:var(--fs-h2);letter-spacing:-.02em;line-height:1.05}
.wc__n,.wc__len{font-variant-numeric:tabular-nums}
.wc__meta{display:flex;flex-wrap:wrap;gap:2px 18px;color:var(--mid)}
.wc__meta span:last-child{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .wc__t{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t1) var(--e-out)}
  .wc__a:hover .wc__t{background-size:100% 1px}
}

/* ---- 作品ページ: 最初の画面 ---- */
.wp__hero{position:relative;height:max(100svh,600px);overflow:hidden;background:#000;color:#fff}
.wp__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 52%,rgba(0,0,0,.66) 100%)}
.wp__bar{position:absolute;left:var(--pad);right:var(--pad);top:clamp(86px,12vh,112px);display:flex;justify-content:space-between;align-items:center;gap:16px}
.wp__back{display:inline-flex;align-items:center;gap:6px}
.wp__back:hover{text-decoration:underline;text-underline-offset:4px}
.wp__pos{font-variant-numeric:tabular-nums}
.wp__watch{white-space:nowrap;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;padding:16px 22px 16px 20px;border:1px solid #fff;color:#fff;background:rgba(0,0,0,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--f-grot);font-size:var(--fs-lead);font-weight:600;letter-spacing:-.01em;line-height:1;transition:background-color var(--t1) var(--e-out),color var(--t1) var(--e-out),transform var(--t1) var(--e-out)}
.wp__watch:hover,.wp__watch:focus-visible{background:#fff;color:#000}
.wp__watch:focus-visible{outline:2px solid var(--ac);outline-offset:6px}
.wp__watch:active{transform:translate(-50%,-50%) scale(.96)}
.wp__tri{width:0;height:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.wp__len{font-size:var(--fs-small);opacity:.8;font-variant-numeric:tabular-nums}
.wp__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(92px,13vh,128px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px var(--gap)}
.wp__t{margin:0;font-family:var(--f-disp);font-stretch:125%;font-weight:900;font-size:var(--fs-d1);line-height:.9;letter-spacing:-.055em;overflow-wrap:normal;word-break:normal}
.wp__t--long{font-size:var(--fs-d2);line-height:.95}
.wp__strip{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 18px;text-align:right}

/* ---- 作品ページ: 情報、次の作品 ---- */
.wp__body{padding:clamp(48px,8vh,96px) var(--pad) 0}
.wp__info{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px var(--gap)}
.wp__info div{border-top:1px solid var(--ink);padding-top:12px;min-width:0}
.wp__info dt{color:var(--mid)}
.wp__info dd{margin:6px 0 0}
.wp__lead{max-width:44em;margin:clamp(32px,5vh,56px) 0 0;font-size:var(--fs-lead);line-height:1.75}
.wp__credits{margin:clamp(28px,4vh,44px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px var(--gap)}
.wp__credits dt{color:var(--mid)}
.wp__credits dd{margin:4px 0 0}
.wp__next{padding:clamp(72px,12vh,140px) var(--pad) clamp(72px,11vh,130px)}
.wp__na{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto 1fr auto;column-gap:var(--gap);border-top:1px solid var(--ink);padding-top:16px}
.wp__nl{grid-column:1;grid-row:1}
.wp__nt{grid-column:1;grid-row:2;align-self:end;font-family:var(--f-disp);font-stretch:125%;font-weight:900;font-size:var(--fs-d2);line-height:.9;letter-spacing:-.05em;margin-top:28px}
.wp__ni{grid-column:1;grid-row:3;color:var(--mid);margin-top:14px}
.wp__nm{grid-column:2;grid-row:1/4;position:relative;aspect-ratio:16/9;background:#000;margin-top:4px}
.wp__nm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp__nm .corner{opacity:0;transition:opacity var(--t1) var(--e-out)}
.wp__na:hover .corner,.wp__na:focus-visible .corner{opacity:1}
.wp__na:focus-visible{outline:none}
.wp__na:focus-visible .wp__nm{outline:2px solid var(--ac);outline-offset:6px}
.wp__all{margin:clamp(36px,6vh,64px) 0 0;display:flex;justify-content:center}

@media (max-width:860px){
  .wl__grid,.wl__grid--3{--cols:1}
  .wp__hero{height:max(82svh,540px)}
  .wp__foot{grid-template-columns:1fr;bottom:clamp(88px,12vh,110px)}
  .wp__watch{gap:10px;padding:12px 16px 12px 15px;font-size:var(--fs-body)}
  .wp__tri{border-left-width:10px;border-top-width:6px;border-bottom-width:6px}
  .wp__strip{justify-content:flex-start;text-align:left}
  .wp__info{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wp__credits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wp__na{grid-template-columns:1fr;grid-template-rows:auto}
  .wp__nl,.wp__nt,.wp__ni,.wp__nm{grid-column:1;grid-row:auto}
  .wp__nm{margin-top:18px}
  .wp__nt{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  .wc__media .corner,.wp__nm .corner,.wp__watch,.wc__t{transition:none}
}