/* 企画「orbit」専用スタイル(共通styles.cssは読み込まない)
   デザインの核: 告知ビジュアルの外縁の青紺をページの地にし、ビジュアルの「格子」をごく薄い方眼として続ける。
   その上に、読む速さの違う3つの文字の層を置く。
   1. 告知: 等幅のDM Monoで「orbit」と数字を組む。ポスターのロゴ(丸く光る黄色)とは張り合わず、方眼のマスのように硬く細く刻む。
      「会期:」「会場:」の見出しは画面に出さず、数字・曜日・場所の並びだけで読ませる(読み上げ用の見出しは残す)
   2. ステートメント: 明朝の短い行、広い行間と段落の間。告知の速さから、ゆっくり読む速さへ切り替える。署名は文末の右に
   3. 出展作家: 参加作家一覧の画像を全体で見せ、そのあと25名を「画像 | 太い名前・ひとこと・SNS」の組で並べる。
      一覧画像の太い名前と下線、画像と文章の近さにならう。文章の下には模様を敷かず、地の青紺の上で読ませる
   色: 地は外縁の青紺、文字は少し柔らかい白。ピンク(縁)は作家の番号と会期の「—」、黄(ロゴ)は触れたときの印にだけ使う */
:root {
  --paper: #151B30;                    /* 地: ビジュアル外縁の青紺 */
  --grid: rgba(170, 178, 240, 0.06);   /* ビジュアルの格子の色を、ごく薄く */
  --ink: #ECEAE3;                      /* 見出し・名前: 少し柔らかい白 */
  --text: #E4E1D8;                     /* ステートメント本文 */
  --ink-soft: #BFC1D2;
  --ink-muted: #9A9DB3;
  --rule: rgba(215, 217, 236, 0.2);
  --pink: #F08BB8;                     /* ビジュアルの縁のピンク(暗い地で読める明るさに) */
  --yellow: #F6EDA6;                   /* ロゴの黄 */
  --u: 28px;                           /* 方眼1マス */
  --gutter: clamp(16px, 4vw, 56px);
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', Meiryo, sans-serif;
  --serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.8;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--paper); padding: 6px 10px; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { white-space: nowrap; }

.topnav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0.9rem var(--gutter) 0; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.topnav a { text-decoration: none; display: inline-block; padding: 0.35rem 0; border-bottom: 1px solid transparent; }
.topnav a:hover { border-bottom-color: currentColor; }
.topnav-sub { display: flex; gap: 1.6rem; }

/* 日本語 / English: 初期表示は日本語(JavaScriptが動かなくても日本語が読める) */
html:not([data-lang="en"]) .en { display: none !important; }
html[data-lang="en"] .ja { display: none !important; }
.topnav-sub { align-items: center; flex-wrap: wrap; row-gap: 0; }
.lang { display: inline-flex; align-items: center; gap: 0.1rem; margin-right: -0.4rem; }
.lang[hidden] { display: none; }
.lang-btn { font: inherit; letter-spacing: 0.06em; color: var(--ink-soft); background: none; border: 0; border-bottom: 1px solid transparent; padding: 0.45rem 0.45rem; min-height: 44px; min-width: 44px; cursor: pointer; }
.lang-btn:hover { color: var(--ink); border-bottom-color: currentColor; }
.lang-btn[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); cursor: default; }
.lang-sep { color: var(--ink-muted); }

/* 小さなリンク(アクセス・作家一覧へ・関連ページ) */
.go { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.86rem; letter-spacing: 0.04em; text-decoration: underline; text-decoration-color: rgba(236, 234, 227, 0.45); text-underline-offset: 5px; }
.go:hover { color: var(--yellow); text-decoration-color: currentColor; }

/* ---- ビジュアル ---- */
.sheet { max-width: 1280px; margin: 0 auto; padding: calc(var(--u) * 1.5) var(--gutter) 0; }
.kv { margin: 0; }
.kv-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.kv-btn img { width: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px -12px rgba(0, 0, 0, 0.6); }
.kv-cap { margin-top: 0.7rem; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-muted); }

/* ---- 1. 告知: 等幅の「orbit」と数字 ---- */
.read { margin-top: calc(var(--u) * 2); }
.title { font-family: var(--mono); font-weight: 300; font-size: clamp(5rem, 24vw, 8.4rem); line-height: 0.9; letter-spacing: -0.04em; margin-left: -0.04em; }
.by { margin-top: 0.9rem; font-size: 0.98rem; letter-spacing: 0.06em; }
.by-k { font-size: 0.74rem; letter-spacing: 0.14em; color: var(--ink-muted); margin-right: 0.9em; }
.when { margin-top: calc(var(--u) * 1.4); }
.when > div + div { margin-top: 0.5rem; }
.when-date dd { font-family: var(--mono); font-weight: 400; font-size: clamp(1.9rem, 8.6vw, 2.7rem); line-height: 1.2; letter-spacing: -0.02em; }
.when-date .y { display: block; font-size: 0.5em; letter-spacing: 0.04em; color: var(--ink-soft); }   /* 年は小さく上に */
.when-date .range { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.3em; }
.when-date .day { white-space: nowrap; }
.when-date .wd { font-family: var(--sans); font-size: 0.42em; letter-spacing: 0; color: var(--ink-soft); margin-left: 0.1em; }
.when-date .to { color: var(--pink); }
.when-time dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; margin-top: 0.9rem; }
.when-time .d { font-family: var(--mono); font-size: 1.3rem; letter-spacing: 0.01em; }
.when-time .note, .when-off dd { font-size: 0.9rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.when > .when-place { margin-top: calc(var(--u) * 0.9); }
.when-place dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.9rem; }
.place { font-size: 1.08rem; letter-spacing: 0.08em; }
.addr { font-size: 0.86rem; color: var(--ink-soft); }
.jump { margin-top: 0.6rem; }

/* ---- 2. ステートメント: 短い行で、ゆっくり ---- */
.label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; color: var(--ink-muted); }
.statement { margin-top: calc(var(--u) * 3.5); }
.statement-body { margin-top: calc(var(--u) * 1); max-width: 21em; font-family: var(--serif); font-size: 1.04rem; line-height: 2.25; letter-spacing: 0.05em; color: var(--text); }
.statement-body p + p { margin-top: 1.5em; }
.statement-body .sign { margin-top: 2.6em; text-align: right; font-size: 0.95rem; color: var(--ink-soft); }

/* ---- 3. 出展作家: 一覧画像のあとに、画像・名前・ひとことの組で ---- */
.artists { max-width: 1280px; margin: calc(var(--u) * 5) auto 0; padding: 0 var(--gutter); scroll-margin-top: 1rem; }
.artists-h { display: flex; align-items: baseline; gap: 0.8rem; font-weight: 400; }
.artists-n { font-family: var(--mono); font-size: 1.9rem; line-height: 1; color: var(--ink); }
.roster { margin: calc(var(--u) * 1) 0 0; max-width: 980px; }
.artists-note { margin-top: calc(var(--u) * 1.6); font-size: 0.82rem; color: var(--ink-soft); }
.pf-list { --th: 92px; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.1rem; column-gap: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 0.9); padding-top: calc(var(--u) * 0.9); border-top: 1px solid var(--rule); }
.pf-card { display: grid; grid-template-columns: var(--th) minmax(0, 1fr); column-gap: 0.95rem; align-items: start; padding: 0.35rem 0; }
.pf-fig { display: block; width: var(--th); }
.pf-img { width: 100%; height: auto; }   /* 切り出した四角をそのまま縮小(元の大きさより大きくしない) */
.pf-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pf-no { font-family: var(--mono); font-size: 0.72rem; line-height: 1; color: var(--pink); letter-spacing: 0.04em; margin-bottom: 0.3rem; }
/* 名前: 一覧画像と同じく、太い字に下線 */
.pf-name { font-weight: 800; font-size: 1.24rem; line-height: 1.3; letter-spacing: 0.02em; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: rgba(236, 234, 227, 0.85); }
.pf-intro { margin-top: 0.5rem; font-weight: 700; font-size: 0.86rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink); }
/* SNS: X / Instagram を別々のリンクに。押せる範囲は高さ44px以上、リンク同士の間も空ける */
.pf-sns { list-style: none; display: flex; flex-wrap: wrap; column-gap: 0.6rem; margin: 0.1rem 0 0 -0.45rem; padding: 0; }
.pf-sns-link { position: relative; display: inline-block; min-width: 44px; line-height: 44px; padding: 0 0.45rem; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.pf-sns-link:hover, .pf-sns-link:focus-visible { color: var(--yellow); text-decoration: underline; text-underline-offset: 4px; }
.pf-sns-link:focus-visible { outline-offset: 0; }
@media (min-width: 700px) {
  .pf-list { --th: 104px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.4rem; }
}
@media (min-width: 1040px) {
  .pf-list { --th: 120px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-name { font-size: 1.32rem; }
}

/* ---- 関連ページ・フッター ---- */
.out { max-width: 1280px; margin: calc(var(--u) * 4) auto 0; padding: calc(var(--u) * 1) var(--gutter) calc(var(--u) * 2.5); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; column-gap: 1.8rem; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 2rem var(--gutter) 2.6rem; border-top: 1px solid var(--rule); background: var(--paper); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.foot a { text-underline-offset: 3px; }

/* ---- PC: ビジュアルを左に残し、右で告知とステートメントを読む ---- */
@media (min-width: 980px) {
  .sheet { display: grid; grid-template-columns: min(44vw, calc(100svh - 7rem), 620px) minmax(0, 1fr); column-gap: calc(var(--u) * 2.5); align-items: start; padding-top: calc(var(--u) * 2); }
  .kv { position: sticky; top: calc(var(--u) * 1); }
  .read { margin-top: 0; }
  .title { font-size: clamp(6.5rem, 10vw, 9.6rem); }
  .when-date dd { font-size: clamp(2.2rem, 3.4vw, 3rem); }
  .statement { margin-top: calc(var(--u) * 4.5); }
  .statement-body { font-size: 1.08rem; line-height: 2.3; }
  .artists { margin-top: calc(var(--u) * 6); }
}

/* ---- 英語表示: 英文の長さに合わせて、行幅・行間・字間だけを調整する(配色・構成は同じ) ---- */
html[data-lang="en"] .by-k { letter-spacing: 0.08em; }
html[data-lang="en"] .when-date .wd { margin-left: 0; }
html[data-lang="en"] .when-time .note, html[data-lang="en"] .when-off dd, html[data-lang="en"] .addr { letter-spacing: 0.01em; }
html[data-lang="en"] .label { letter-spacing: 0.12em; }
html[data-lang="en"] .statement-body { max-width: 30em; font-family: Georgia, 'Times New Roman', var(--serif); font-size: 1.08rem; line-height: 1.85; letter-spacing: 0.005em; }
html[data-lang="en"] .statement-body p + p { margin-top: 1.1em; }
html[data-lang="en"] .statement-body .sign { margin-top: 1.8em; }
html[data-lang="en"] .pf-intro { font-weight: 600; line-height: 1.5; letter-spacing: 0.005em; overflow-wrap: break-word; text-wrap: pretty; }
html[data-lang="en"] .kv-cap, html[data-lang="en"] .artists-note { letter-spacing: 0.01em; }

/* ---- 拡大表示 ---- */
.lb { border: 0; padding: 0; width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; background: transparent; }
.lb::backdrop { background: rgba(12, 13, 20, 0.95); }
.lb[open] { display: flex; flex-direction: column; }
.lb-bar { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.6rem; flex: none; }
.lb-btn { font: inherit; font-size: 0.85rem; letter-spacing: 0.05em; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; min-height: 44px; padding: 0.4rem 1.1rem; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lb-btn:focus-visible { outline-color: #fff; }
.lb-stage { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 0 0.75rem 0.75rem; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* 原寸: 元画像の大きさで表示し、スクロールで細部を見る(拡大はしない) */
.lb.is-full .lb-stage { display: block; }
.lb.is-full .lb-img { max-width: none; max-height: none; width: auto; height: auto; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }