/* ==========================================================================
   AOW overview + lightbox (gm) template
   ========================================================================== */


/* ==========================================================================
   1) Base / Reset
   - すべての要素の box-sizing を統一
   - html/body の余白をゼロにする
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}




/* ==========================================================================
   2) CSS Variables (Design tokens)
   - --bar-h   : トップバーの想定高さ
   - --gutter  : 端の余白（デバイス幅に応じて可変）
   ========================================================================== */
:root {
  --bar-h: 72px;
  --gutter: clamp(3px, 2vw, 5px);
}





/* ==========================================================================
   3) Body global
   - フォント / 色 / 背景 / 横スクロール抑止
   ========================================================================== */
body {
  font-family: "acumin-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #111;
  background: #f7F7F5; /* overview と同じ赤 */
  overflow-x: hidden;
}





/* ==========================================================================
   4) TOP BAR (Sticky + Responsive)
   - desktop/tablet: left brand / right nav
   - mobile portrait: nav goes under artist (left)
   ========================================================================== */

/* Top bar: sticky header */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  /* optional: keep text readable over images */
  /* background: #f7F7F5; */

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gutter);
  min-height: var(--bar-h);
}

/* Brand (artist/role) */
.brand{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand .artist{
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brand .role{
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
}

/* Nav links */
.toplinks{
  display: flex;
  gap: 8px;
}

.toplinks a{
  font-size: .7rem;
  color: inherit;
  text-decoration: none;
}

/* Current page underline */
.toplinks a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toplinks a:hover{
  opacity: .8;
}

/* Mobile portrait: stack nav under artist */
@media (max-width: 600px) and (orientation: portrait){
  .topbar{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 14px 5px 10px;
    min-height: auto;
    background: #f7F7F5;
  }



  .toplinks{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .toplinks a{
    font-size: .7rem;
    letter-spacing: 0.04em;
  }
}



/* ==========================================================================
   5) Page wrapper
   - overview グリッド全体の外側余白
   ========================================================================== */
.page {
  padding: 0 var(--gutter) var(--gutter);
}


/* ==========================================================================
   6) Overview grid (justified-layout 用)
   - #grid: JS によって絶対配置のアイテムが入るコンテナ
   - 初期は非表示（opacity/pointer-events）→ .jl-ready で表示
   ========================================================================== */
#grid {
  position: relative;
  width: 100%;
  margin: 8px 0 25px;

  /* JS でレイアウトが確定するまで見せない（チラつき防止） */
  opacity: 0;
  pointer-events: none;
}

/* ★ JS で body に .jl-ready が付いたら表示 */
body.jl-ready #grid {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}





/* ==========================================================================
   7) Items (images & videos)
   - .jl-item は JS が left/top/width/height を付ける前提で absolute
   - 中身（img/video）は枠にフィットさせる
   ========================================================================== */
.jl-item {
  position: absolute; /* justified-layout の結果を JS が反映 */
  margin: 0;
  overflow: hidden;   /* 枠外を切る（object-fit とセット） */
}

.jl-item img,
.jl-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* data-w/data-h と合っていればほぼトリミングなし */
}





/* ==========================================================================
   8) Overview caption & group highlight (hover/tap)
   - .ov-cap: 各グループの先頭サムネにだけ出すキャプション
   - PC は hover、モバイルは tap 用クラスで制御
   ========================================================================== */

/* キャプション共通（初期は非表示） */
.ov-cap {
  position: absolute;
  left: 4px;
  top: 2px;
  color: #000;
  font-size: 0.6rem;

  opacity: 0;          /* 初期は非表示 */
  pointer-events: none;/* クリックを邪魔しない */
  max-width: 80%;
  line-height: 1.3;
}

/* 見出し系（強調） */
.ov-cap em,
.ov-cap i {
  display: block;
  opacity: 0.9;
  font-style: normal;  /* 斜体オフ */
}

.ov-cap b,
.ov-cap strong {
  font-style: normal;
}

/* PC: hover が使える環境のみ */
@media (hover: hover) and (pointer: fine) {

  /* グループに属するサムネだけ白オーバーレイ */
  #grid.is-group-hover .jl-item.is-in-group::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.763);
    pointer-events: none;
    z-index: 1;
  }

  /* グループ先頭（data-head="1"）のサムネだけキャプション表示 */
  #grid.is-group-hover .jl-item[data-head="1"].is-in-group .ov-cap {
    opacity: 1;
    z-index: 2; /* オーバーレイより前 */
  }
}

/* モバイル: 1回タップ中（is-group-tap） */
#grid.is-group-tap .jl-item[data-head="1"].is-in-group .ov-cap {
  opacity: 1;
  z-index: 2; /* オーバーレイより前 */
}

#grid.is-group-tap .jl-item.is-in-group::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.763);
  pointer-events: none;
  z-index: 1;
}

/* キャプションを常にオーバーレイより前に */
#grid .ov-cap {
  position: absolute;
  z-index: 2;
}





/* ==========================================================================
   9) Video fullscreen behavior (overview 側)
   - フルスクリーン時は contain でトリミングしない
   ========================================================================== */
.jl-item.is-video video:fullscreen,
.jl-item.is-video video:-webkit-full-screen {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}






/* ==========================================================================
   10) Fullscreen button (overview 側の動画用ボタン)
   - .fs-btn はホバーで出す（PC）
   - hover が無い環境では常時表示
   ========================================================================== */
.fs-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  cursor: pointer;
  outline: none;

  opacity: 0;                 /* 初期は非表示 */
  transform: translateY(4px); /* 少し下げておく */
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.fs-btn::before {
  content: "⤢"; /* fullscreen アイコン */
  color: #fff;
  font-size: .6rem;
  line-height: 22px;
  display: block;
  text-align: center;
  pointer-events: none;
}

/* PC: 動画アイテム hover 時だけ表示 */
.jl-item.is-video:hover .fs-btn {
  opacity: 1;
  transform: translateY(0);
}

/* hover が無い環境（タッチ）では常時表示 */
@media (hover: none) {
  .fs-btn {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   11) Small screen tweaks (ヘッダー文字)
   ========================================================================== */
@media (max-width: 480px) {
  .brand .artist {
    font-size: .7rem;
  }
}


/* ==========================================================================
   12) Lightbox: gm (gallery modal)
   ========================================================================== */

/* aria-hidden="true" のときは完全に消す */
.gm[aria-hidden="true"] {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

/* モーダル本体（画面全体固定） */
.gm {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
/* 画面下のキャプション・クローズボタン用スペース */
--gm-footer-h: 120px;
/* 表示側の既定値（上のaria-hiddenと対になる） */
opacity: 1;
visibility: visible;
pointer-events: auto;
}

/* 小さめ画面ではフッター領域を増やす */
@media (max-width: 767px) {
  .gm {
    --gm-footer-h: 140px;
  }
}

/* iPad portrait（11inch / 13inch 共通）だけフッター余白を増やす */
@media 
  (orientation: portrait)
  and (hover: none)
  and (pointer: coarse)
  and (min-width: 768px) {

  .gm {
    --gm-footer-h: 180px;
  }
}


/* 背景（全面） */
.gm-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: #f7F7F5;
}

/* hidden が付いたら確実に消す（画像/動画切替用） */
.gm-frame img[hidden],
.gm-video-wrap[hidden] {
  display: none !important;
}

/* Frame（画像・動画の枠） */
.gm-frame {
  position: relative;
  width: 98vw;
  height: calc(100svh - var(--gm-footer-h));
  padding: 0;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像（gm 内） */
.gm-frame img {
  flex: 0 0 auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
   13) Lightbox caption & UI text
   ========================================================================== */

.gm-caption{
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 20;
  pointer-events: none;
  text-align: left;
  color: #000;
}

/* ---- iPhone / 小さい画面用：キャプション/ボタン位置の安全域調整 ---- */
@media (max-width: 768px) {
  .gm-caption {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .gm-counter {
    right: 14px;
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .gm-close {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* 左上：署名だけ分離（.gm-caption の外に見せるため fixed） */
.gm-name{
  position: fixed;
  top: 8px;
  left: 5px;
  z-index: 10000;
  margin: 0;
  pointer-events: none;
  line-height: 0.5;
}

.gm-main {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.gm-main:visited {
  color: inherit;
}

.gm-name .gm-main{
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  pointer-events: auto;

}

.gm-name .gm-subtitle{
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.gm-name .gm-main,
.gm-name .gm-subtitle {
  display: block;
}

/* 左下キャプション */
.gm-ttl{
  margin-bottom: 1px;
  font-size: .7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gm-sub{
  margin: 0;
  font-size: .7rem;
  letter-spacing: 0.04em;
}

/* カウンター（右下） */
.gm-counter {
  position: absolute;
  right: 15px;
  bottom: 30px;
  color: #000000;
  font-size: .7rem;
  letter-spacing: .04em;
  display: none;
}

/* close button（右下） */
.gm-close {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 0;
  background: transparent;
  color: #000000;
  font-size: .7rem;
  z-index: 10;
}

/* click zones（左右半分のナビ） */
.gm-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  height: 100vh;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}
.gm-prev { left: 0; }
.gm-next { right: 0; }

/* iOS のタップハイライトを抑制 */
.gm-hit,
.gm-close,
.gm-backdrop {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   14) Lightbox open behavior
   ========================================================================== */

.gm[aria-hidden="false"] {
  position: fixed;
  inset: 0;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: auto !important;
}

.gm-frame,
.gm-caption {
  overscroll-behavior: contain !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: auto !important;
}

/* ==========================================================================
   15) Custom video controls (sv)
   ========================================================================== */

/* 動画のラッパー（sv-controls の基準） */
.gm-video-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 20;

  opacity: 0;
  transition: opacity .35s ease;

  pointer-events: auto;
}

/* JS が付与：準備完了で表示 */
.gm-video-wrap.is-ready {
  opacity: 1;
}

/* コントロール本体（動画の下端に沿わせる） */
.sv-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;

  z-index: 10;

  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
  border-radius: 0 0 6px 6px;
}

/* PC：ホバーで表示 */
.gm-video-wrap:hover .sv-controls {
  opacity: 1;
  pointer-events: auto;
}

/* JS で付与：表示 */
.sv-controls.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* プログレスバー（クリックでシーク） */
.sv-progress {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: pointer;
}

/* 進捗バー（JS で width を更新） */
.sv-progress__bar {
  width: 0;
  height: 100%;
  background: #fff;
}

/* ボタン行（左右配置） */
.sv-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ボタン共通（白文字） */
.sv-btn {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 0;
  cursor: pointer;
}

/* モバイル用：コントロールの余白を少し減らす */
@media (max-width: 480px) {
  .sv-controls {
    padding: 8px 12px;
  }
}

/* hover なし（タッチ）：初期非表示、.is-visible で表示 */
@media (hover: none) and (pointer: coarse) {
  .gm-video-wrap .sv-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }

  .gm-video-wrap .sv-controls.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ==========================================================================
   Video sizing (default)  ※B案：ここに集約（数値変更なし）
   ========================================================================== */

/* 動画本体（gm 内）: gm-frame の中に必ず収める */
.gm-video-wrap{
  max-width: 100%;
  max-height: 100%;
}

.gm-video-wrap video{
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* ==========================================================================
   FIX — mobile PORTRAIT only（数値変更なし）
   ========================================================================== */

@media
  (max-width: 768px)
  and (orientation: portrait)
  and (pointer: coarse) {

  .gm-frame{
    height: calc(100svh - var(--gm-footer-h));
  }

  .gm-video-wrap{
    max-height: 100%;
    max-width: none;
  }

  .gm-video-wrap video{
    height: 100%;
    width: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .gm.is-portrait-video .gm-video-wrap{
    max-width: 72vw;
    margin: 0 auto;
  }

  .gm.is-portrait-video{
    --gm-footer-h: 190px;
  }
}



/* ============================
  16) Info Layout
   ============================ */
.info{
  padding: 26px 22px 80px;
}

.infoGrid{
  display: block; /* mobile default */
}

.info h2{
  margin: 22px 0 10px;
  font-size: .7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.info p{
  margin: 0 0 14px;
  font-size: .7rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  max-width: 72ch; /* mobile: 読みやすい行長 */
}

.info a{
  color: inherit;
  text-decoration: none;
}

.info .copyright{
 color: #11111182;
  margin-top: 50px;
}

/* ==============
   Desktop: 2 columns like your screenshot
   ============== */
@media (min-width: 980px){

  .info{
    padding: 34px 42px 80px;
  }

  .infoGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 140px;
    align-items: start;
  }

  .infoLeft p{
    max-width: 64ch; /* 左側本文は少し細め */
  }

  .infoRight p{
    max-width: 56ch; /* 右側は羅列なのでさらに細めでもOK */
  }

  .infoRight .copyright{
    margin-top: 22px;
  }
}