/* ==========================================================================
   Works entry — works.html だけの配置（RC）

   release.css の共有 shell（skip-link / site-header / site-menu / site-footer /
   end-exit / other-shelves / sr-only / focus ring）と token（--hall / --chalk /
   --serif / --sans / --gutter / --signal）の上に、Works 固有の selector
   （.works-page / .wk-）だけを置く。共有 page・HOME canonical block には
   一切かからない。配置は thread.css と同じ一列（640px）。

   animation / transition / box-shadow / text-shadow / backdrop-filter は使わない
   （reduced motion でも同じ描画）。card / pill / modal / carousel / album art /
   embedded player / thumbnail は無い。外部への action は普通の link だけ。
   ========================================================================== */

.works-page .wk-root {
  width: min(calc(100% - var(--gutter) * 2), 640px);
  margin: 0 auto;
  padding: 8px 0 12px;
  color: var(--chalk);
  font-size: 1.0625rem;
  line-height: 1.9;
}

/* ------------------------------------------------------------ 見出し */

.wk-head { padding: 22px 0 34px; }
.wk-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 7.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.03em;
  color: var(--chalk);
}
.wk-lead {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--chalk);
}

/* ------------------------------------------------------------ 作品 */

.wk-work {
  padding: 40px 0 8px;
  border-top: 1px solid var(--hall-edge);
}
.wk-category {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  letter-spacing: .2em;
  color: var(--chalk-dim);
}
.wk-object {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5.4vw, 1.95rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--chalk);
  overflow-wrap: anywhere;
}
.wk-byline {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: var(--chalk-dim);
  overflow-wrap: anywhere;
}

/* 事実（この映像について）。実線・地の持ち上げ。thread.css の .th-relation と同じ材質。 */
.wk-info {
  margin: 22px 0 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--hall-edge);
  border-radius: 2px;
  background: var(--hall-raised);
}
.wk-info-label {
  margin: 0 0 6px;
  font-size: 0.75rem;
  letter-spacing: .18em;
  color: var(--chalk-dim);
}
.wk-info-text { margin: 0; color: var(--chalk); }

/* 読み（reading layer）。事実の枠とは別の見え方（破線）。fact badge も検証状態も持たない。
   見える label は無い（Founder decision 2026-09-06 v2）。 */
.wk-reading {
  margin: 22px 0 0;
  padding: 14px 18px;
  border: 1px dashed var(--hall-edge);
  border-radius: 2px;
  background: transparent;
}
.wk-reading-text { margin: 0; color: var(--chalk); }

/* 公式映像。押すまで provider へ接続しない click-to-load の枠（16:9）。
   押したあとは同じ枠の中に player が入る。自動再生なし。 */
.wk-video { margin: 18px 0 0; }
.wk-video .v3-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hall-edge);
  border-radius: 2px;
  background: var(--hall-raised);
  overflow: hidden;
}
.wk-video-load {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--chalk);
  font: inherit;
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  cursor: pointer;
}
.wk-video-load .wk-mark { color: var(--signal); text-decoration: none; }
.wk-video .v3-video-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.wk-video-duration {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: var(--chalk-dim);
}

/* Relation preview。矢印は signal 色。 */
.wk-relation {
  margin: 18px 0 0;
  font-size: 0.9375rem;
  letter-spacing: .04em;
  color: var(--chalk);
  overflow-wrap: anywhere;
}
.wk-arrow { color: var(--signal); }

/* 操作。内部 route（Thread へ）と外部 action（公式・一次 destination）は
   どちらも普通の link。当たり判定は 44px 以上。 */
.wk-primary { margin: 14px 0 0; }
.wk-action-row { margin: 0; }
.wk-route,
.wk-action {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  color: var(--chalk);
  overflow-wrap: anywhere;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.wk-route {
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: .04em;
}
.wk-primary .wk-action {
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: .04em;
}
.wk-action-row .wk-action { font-size: 0.9375rem; }
.wk-current {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: var(--chalk-dim);
}

/* 計測互換のために付ける .official-action（GA4 v3_official_action が closest() で拾う
   既存 class）は、release.css では棚の詳細の塗りボタン（inline-flex / 全幅 / signal 塗り）。
   この page の外部 action は普通の link なので、.works-page 配下だけで link の見た目へ
   戻す（release.css は変えない。event 定義も増やさない）。 */
.works-page .wk-action.official-action,
.works-page .wk-action.official-action:hover {
  display: inline-block;
  align-items: normal;
  justify-content: normal;
  gap: 0;
  width: auto;
  min-height: 44px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--chalk);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: normal;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  cursor: pointer;
}
.works-page .wk-primary .wk-action.official-action {
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: .04em;
}

/* 持ち帰る問い。答える欄も選択肢も無い。 */
.wk-question {
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--hall-line);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--chalk);
}

/* 有限の終わり。出口は 1 つ。 */
.wk-exit {
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--hall-edge);
}

/* ------------------------------------------------------- 手ざわり */

@media (forced-colors: active) {
  .wk-work, .wk-info, .wk-exit { border-color: CanvasText; }
  .wk-reading { border: 1px dashed CanvasText; }
  .wk-question { border-top-color: CanvasText; }
  .wk-arrow { color: CanvasText; }
  .wk-video .v3-video-frame { border-color: CanvasText; }
  .wk-video-load { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; forced-color-adjust: none; }
  /* 棚用の ButtonFace 塗りを継がない。普通の link として forced colors に任せる。 */
  .works-page .wk-action.official-action { border: 0; background: transparent; color: LinkText; forced-color-adjust: auto; }
}

@media (min-width: 821px) {
  .works-page .wk-root { padding-top: 4px; }
  .wk-head { padding-bottom: 40px; }
  .wk-work { padding-top: 48px; }
  .wk-info { padding: 22px 24px 20px; }
}

/* Directory: one action per work, no embedded detail or player. */
.wk-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.wk-entry { min-width: 0; padding: 1.5rem 0; border-top: 1px solid var(--hall-edge); scroll-margin-top: 1.5rem; }
.wk-entry .wk-object { font-size: 1.5rem; }
.wk-entry .wk-category, .wk-back { font-size: .875rem; line-height: 1.6; }
.wk-city { font-size: 1rem; line-height: 1.7; color: var(--chalk-dim); }
.wk-back { margin: 0 0 1.25rem; }
.wk-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--chalk); text-underline-offset: .3em; }
@media (max-width: 680px) { .wk-entry-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }