/* motake.com — Phase 1.2
   Figma: HOME / ABOUT (123:116) / Publications (123:315) / 詳細 (123:418) / SP (123:185, 123:361, 123:479)
   構造：背景ローテーション＋メニュー常駐、mainだけ差し替わる疑似1ページ */

/*
@font-face {
  font-family: "Tiempos Fine";
  src: url("/assets/fonts/TiemposFine-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  --bg: #000;
  --fg: #fff;
  --scrim: rgba(0, 0, 0, 0.6);
  --scrim-menu: rgba(0, 0, 0, 0.88); /* SPメニュー展開時：本文と重なっても読めるよう濃く */
  --font-ui: "Tiempos Fine", "Times New Roman", Georgia, serif;
  --font-body: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --fs-nav: 12px;
  --fs-body: 14px;
  --ls: 0.12em;
  --menu-x: 80px;
  --content-left: 280px;
  --panel-right: 42px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); }

body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: var(--ls);
  color: var(--fg);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* ================= background rotation ================= */
.bg-rotation { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg-rotation img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
  will-change: opacity;
}
.bg-rotation img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bg-rotation img { transition: none; } }

/* ================= menu ================= */
.site-menu {
  position: fixed;
  top: 0; left: 0;
  z-index: 20;
  padding: 50px var(--menu-x);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-nav);
}
.site-logo { display: block; width: 152px; }
.site-name { margin-top: 36px; }
.site-nav { margin-top: 26px; list-style: none; }
.site-nav li { line-height: 2; }
.site-nav li.nav-gap { height: 2em; }
.site-nav a { color: var(--fg); text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.site-nav a:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
.ext-icon { display: inline-block; width: 12px; height: 10px; margin-left: 10px; }
.site-copyright { margin-top: 34px; }

/* ================= content ================= */
main { position: relative; z-index: 10; opacity: 1; transition: opacity 0.25s ease; }
main.is-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { main { transition: none; } }

.page { padding: 24px var(--panel-right) 120px var(--content-left); }
.page-title {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 48px;
  letter-spacing: var(--ls);
  line-height: 2;
  padding-left: 39px;
}
.page-title a { color: var(--fg); text-decoration: none; }
.page-title a:hover { text-decoration: underline; text-underline-offset: 6px; }

.panel { position: relative; margin-top: 56px; background: var(--scrim); padding: 0 38px 80px 39px; }
body.page-publications .panel { margin-top: 94px; }

/* EN/JP切り替え */
.lang-toggle {
  position: absolute;
  top: -45px; right: 0;
  font-size: 14px;
  letter-spacing: var(--ls);
}
.lang-toggle button {
  background: none; border: 0; padding: 0;
  color: var(--fg);
  font: inherit; letter-spacing: inherit;
  cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
body[data-lang="en"] [data-i18n="ja"] { display: none; }
body[data-lang="ja"] [data-i18n="en"] { display: none; }

/* パネル内セクション見出し（ZINEs / DVD） */
.section-title {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 48px;
  letter-spacing: var(--ls);
  line-height: 2;
}
.pub-section + .pub-section { margin-top: 106px; }

/* About 2カラム */
.panel-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 478px));
  column-gap: 85px;
  row-gap: 56px;
  padding-top: 38px;
}
.panel .col { max-width: 478px; line-height: 2; }
.panel p { line-height: 2; }
.panel p + p { margin-top: 2em; }
.panel a { color: var(--fg); }

/* ================= publications 一覧 ================= */
.pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 240px);
  column-gap: 27px;
  row-gap: 56px;
  margin-top: 56px;
}
.pub-item { width: 240px; color: var(--fg); text-decoration: none; display: block; }
.pub-item:hover .pub-name { text-decoration: underline; text-underline-offset: 3px; }
.pub-cover { width: 240px; height: 336px; object-fit: cover; background: #111; }
.pub-caption { margin-top: 16px; }
.pub-series { font-size: 12px; letter-spacing: 0.05em; line-height: 1; min-height: 12px; }
.pub-name { font-size: 20px; letter-spacing: 0.05em; line-height: 1.2; margin-top: 6px; }
.pub-format { font-size: 11px; font-weight: 700; line-height: 1.5; margin-top: 12px; letter-spacing: var(--ls); }

/* パネル末尾のmマーク */
/* .panel-mark { display: flex; justify-content: flex-end;} */
/* .panel-mark img { width: 28px; height: 15px; opacity: 0.9; } */
.panel-ending { display: inline-block; white-space: nowrap; }
.panel-mark { display: inline-block; margin-left: 0.25em; line-height: 0; vertical-align: -0.22em; }
.panel-mark img { display: block; width: 28px; height: 15px; opacity: 0.9; }

/* ================= publication 詳細 ================= */
.pub-detail {
  display: grid;
  grid-template-columns: minmax(320px, 500px) minmax(320px, 478px);
  column-gap: 63px;
  padding-top: 38px;
}
.pub-main-image { width: 100%; object-fit: cover; background: #111; }
.pub-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-top: 20px;
}
.pub-thumbs img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; background: #111; }

.pub-thumbs img.pub-thumb--wide {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}

.store-button {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 11px 0;
  background: #000;
  color: var(--fg);
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: var(--ls);
}
.store-button:hover { text-decoration: underline; text-underline-offset: 3px; }

.pub-statement { margin-top: 40px; }
.pub-statement p { line-height: 2; }
.pub-statement p + p { margin-top: 2em; }
.pub-statement .epigraph { opacity: 0.85; }


/* ================= SP header ================= */
.sp-header { display: none; }

.menu-toggle {
  display: none;
  position: fixed;
  top: 12px; right: 18px;
  z-index: 30;
  width: 44px; height: 44px;
  background: none; border: 0;
  cursor: pointer;
}
/* ハンバーガー（Figma準拠：30px幅・2px線×3・9px間隔）→ 開で× */
.menu-toggle span {
  position: absolute;
  left: 7px;
  width: 30px; height: 2px;
  background: var(--fg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle span:nth-child(1) { top: 12px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 30px; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-toggle span { transition: none; } }

/* ================= breakpoints ================= */
@media (max-width: 900px) {
  :root { --menu-x: 40px; }

  .page { padding: 16px 19px 80px; }
  .page-title { font-size: clamp(28px, 9vw, 48px); padding-left: 21px; line-height: 1.6; }
  .panel, body.page-publications .panel { margin-top: 32px; padding: 0 21px 64px; }
  .panel-columns { grid-template-columns: 1fr; padding-top: 32px; }
  .lang-toggle { top: -40px; right: 2px; }

  .pub-grid { grid-template-columns: 240px; justify-content: center; margin-top: 40px; }
  .section-title { font-size: clamp(28px, 9vw, 48px); }
  .pub-section + .pub-section { margin-top: 64px; }

  .pub-detail { grid-template-columns: 1fr; row-gap: 40px; padding-top: 22px; }

  .sp-header {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 25;
    height: 60px;
  }
  .sp-header .sp-logo { position: absolute; top: 17px; left: 15px; width: 50px; }
  .menu-toggle { display: block; }

  main { padding-top: 60px; }

  .site-menu {
    inset: 0;
    z-index: 26;
    padding: 50px var(--menu-x);
    background: var(--scrim-menu);
    overflow-y: auto;
    display: none;
  }
  body.page-home .site-menu { display: block; background: none; }
  body.page-home .sp-header,
  body.page-home .menu-toggle { display: none; }
  body.page-home main { padding-top: 0; }

  body.menu-open .site-menu { display: block; }
  body.menu-open .menu-toggle { z-index: 30; }
  body.menu-open { overflow: hidden; }
  body.menu-open main { visibility: hidden; } /* 重なった文字の透け防止 */
}

/* ================================================================
   2026-07-16 追加分
   ================================================================ */

/* --- 画像ドロップシャドウ（中心ゼロ）。調整はここ：ぼかし20px / 濃度0.35 --- */
.pub-cover,
.pub-main-image,
.pub-thumbs img,
.pub-index-item img {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}

/* --- キャプション行間修正（.panel p + p の2emが継承されるバグ潰し） --- */
.pub-caption p + p,
.pub-head p + p { margin-top: 0; }
.pub-caption .pub-name,
.pub-head .pub-name { margin-top: 6px; }
.pub-caption .pub-format,
.pub-head .pub-format { margin-top: 12px; }

/* --- 横位置カバー（CTD等）：2カラム分の幅で配置（240×2＋gap27＝507px） --- */
.pub-item--wide { width: 507px; grid-column: span 2; }
.pub-item--wide .pub-cover { width: 507px; height: 336px; }

/* --- EN/JP切り替えの表示保険 --- */
.lang-toggle { z-index: 5; }

/* --- 詳細ページ末尾：横スクロールインデックス --- */
.pub-index { margin-top: 96px; }
.pub-index-track {
  display: flex;
  gap: 27px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.pub-index-track::-webkit-scrollbar { height: 4px; }
.pub-index-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); }
.pub-index-item {
  flex: 0 0 auto;
  width: 160px;
  scroll-snap-align: start;
  color: var(--fg);
  text-decoration: none;
}
.pub-index-item img { width: 160px; height: 224px; object-fit: cover; background: #111; }
.pub-index-item--wide { width: 338px; }
.pub-index-item--wide img { width: 338px; height: 224px; }
.pub-index-item[aria-current="page"] { opacity: 0.45; pointer-events: none; }
.pub-index-name { font-size: 12px; letter-spacing: 0.05em; line-height: 1.4; margin-top: 8px; }
.pub-index-item:hover .pub-index-name { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  /* 横位置カバー：SPは1カラム幅に収めて比率維持 */
  .pub-item--wide { width: 240px; grid-column: auto; }
  .pub-item--wide .pub-cover { width: 240px; height: auto; aspect-ratio: 507 / 336; }

  /* インデックス：左右が覗くカルーセル（中央スナップ） */
  .pub-index { margin-top: 64px; }
  .pub-index-track {
    gap: 20px;
    padding-inline: calc(50% - 120px); /* 両端の項目も中央に来る */
  }
  .pub-index-item { width: 240px; scroll-snap-align: center; }
  .pub-index-item img { width: 240px; height: 336px; }
  .pub-index-item--wide { width: 240px; }
  .pub-index-item--wide img { width: 240px; height: auto; aspect-ratio: 507 / 336; }
}

/* ================================================================
   2026-07-16 公開前最終調整
   ================================================================ */

/* --- 詳細ページ：EN/JPはPC左端寄せ（SPは従来通り右） --- */
body.page-pub-detail .lang-toggle { left: 0; right: auto; }
@media (max-width: 900px) {
  body.page-pub-detail .lang-toggle { left: auto; right: 2px; }
}

/* --- 詳細ページ：写真固定・テキスト可変。max-widthが1920環境の上限（右は余白）--- */
.pub-detail { grid-template-columns: minmax(320px, 500px) minmax(320px, 1fr); }
.pub-detail .pub-text { max-width: 860px; } /* 行長の上限。調整はここ */

/* --- Contact：メールアドレス表示ボタン --- */
.email-reveal {
  display: inline-block;
  padding: 10px 28px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: var(--ls);
  cursor: pointer;
}
.email-reveal:hover { background: rgba(255, 255, 255, 0.1); }
#em a { color: var(--fg); }

/* --- ホーム：メニューのフェードイン（3秒後・下から上へ）--- */
.site-menu.is-intro {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.site-menu.is-intro.is-shown {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .site-menu.is-intro { opacity: 1; transform: none; transition: none; }
}

/* --- 背景エンジン用canvas --- */
.bg-rotation canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ================================================================
   2026-07-16 修正②
   原因：上の「最終調整」ブロックの無条件ルールが、ファイル前方の
   @media(900px)内ルールを後着で上書きしていた。ここで再度SPを確定させる。
   ================================================================ */

/* --- EN/JP：PCは左寄せ（一覧・詳細とも）--- */
body.page-publications .lang-toggle { left: 0; right: auto; }

/* --- SP確定（必ずファイル末尾に置くこと）--- */
@media (max-width: 900px) {
  .pub-detail { grid-template-columns: 1fr; }
  .pub-detail .pub-text { max-width: none; }
  body.page-publications .lang-toggle,
  body.page-pub-detail .lang-toggle { left: auto; right: 2px; }
}


/* ================================================================
   2026-07-16 修正③
   ================================================================ */

/* --- EN/JPのENが押せないバグ修正 ---
   原因：固定メニューの透明なパディング領域（z-index:20）が
   左寄せしたトグルのEN側に重なりクリックを奪っていた。
   PCではメニューの箱をクリック透過にし、リンクだけ受ける。
   （SPはオーバーレイのスクロールに箱が必要なので対象外） */
@media (min-width: 901px) {
  .site-menu { pointer-events: none; }
  .site-menu a { pointer-events: auto; }
}

/* --- 非売品ボタン（ZINE FEST ONLY等） --- */
.store-button--disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

/* --- ステートメント内の小見出し（Story等） --- */
.pub-statement h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--ls);
  margin-top: 2.5em;
}
.pub-statement h3 + p { margin-top: 1em; }