/* ============================================================
   POGO KOBE — Brutalist Pop 3D Site Template (STOMP)
   規律: テキストは ink/white のみ。黄は ink 罫線に囲われた面のみ。
   影は 6px 6px 0 のソリッド一択。フェード・blur・角丸(ピル以外)禁止。
   ============================================================ */

:root {
  --bg: #F2F0EA;
  --surface: #FFFFFF;
  --ink: #111111;
  --line: #111111;
  --accent1: #D92D20; /* 赤: CTA・スタンプ・3D主役 */
  --accent2: #FFD400; /* 黄: 面塗り専用（線・文字に使用禁止） */
  --accent3: #5B2EFF; /* 紫: リンク・タグ・3D準主役 */

  --font-head-ja: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --font-head-en: "Anton", "Dela Gothic One", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Space Grotesk", sans-serif;

  --fs-display: clamp(4rem, 15vw, 13rem);
  --fs-marquee: clamp(3.5rem, 8vw, 7rem);
  --fs-h2: clamp(2.5rem, 7vw, 5.5rem);
  --fs-h3: clamp(1.375rem, 2.5vw, 2rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);

  --bw: 3px;           /* 基本罫線 */
  --bw-bold: 5px;      /* 強調罫線 */
  --shadow: 6px 6px 0 var(--ink);
  --pad-x: clamp(16px, 3vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}
::selection { background: var(--accent3); color: #fff; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 100;
  padding: 12px 24px; background: var(--ink); color: var(--bg);
  font-weight: 700; text-decoration: none;
  border: var(--bw) solid var(--ink);
  transition: top 0.15s steps(2, end);
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 4px solid var(--accent3); outline-offset: 2px; }

/* ---- WebGL canvas: 固定背景。不透明セクションの背後に隠れる ---- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.no-webgl #gl { display: none; }
main { position: relative; z-index: 1; }

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--pad-x);
  background: var(--bg);
  border-bottom: var(--bw) solid var(--ink);
}
.logo {
  font-family: var(--font-head-ja);
  font-size: 1.25rem; text-decoration: none; letter-spacing: 0.02em;
}
.logo-dot { color: var(--accent1); }
.site-header nav { display: flex; gap: clamp(12px, 2vw, 28px); align-items: center; }
.site-header nav a {
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.site-header nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.nav-ticket {
  background: var(--accent1); color: #fff !important;
  padding: 8px 20px; border-radius: 999px;
  border: var(--bw) solid var(--ink);
}
.nav-ticket:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }

/* ============================================================
   S1 HERO — 100vh。3D が背後で落下バウンド
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--pad-x) 64px;
  position: relative;
}
.hero-date {
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.08em;
  display: inline-block; width: fit-content;
  background: var(--accent2);
  border: var(--bw) solid var(--ink);
  padding: 6px 14px;
  margin-bottom: 24px;
}
.display {
  font-family: var(--font-head-ja);
  font-size: var(--fs-display);
  line-height: 0.98; font-weight: 400;
}
.display .line { display: block; overflow: hidden; }
.display .line span { display: inline-block; }
.js .display .line span { transform: translateY(110%); }
.display .line-en {
  font-family: var(--font-head-en);
  color: var(--accent1);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  letter-spacing: -0.01em;
}
.hero-tag {
  margin-top: 24px; font-weight: 700; max-width: 32em;
  /* 3D 図形と重なっても読めるよう白面プレートに載せる */
  width: fit-content;
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  padding: 8px 16px;
}
.js .hero-tag { opacity: 0; }

/* ============================================================
   S2/S7 MARQUEE — 黄帯 / 紫帯
   ============================================================ */
.marquee {
  overflow: hidden; white-space: nowrap;
  border-top: var(--bw-bold) solid var(--ink);
  border-bottom: var(--bw-bold) solid var(--ink);
  position: relative; z-index: 1;
}
.marquee-a { background: var(--accent2); color: var(--ink); }
.marquee-b { background: var(--accent3); color: #fff; }
.marquee-track {
  display: inline-flex;
  font-family: var(--font-head-en);
  font-size: var(--fs-marquee);
  line-height: 1.15;
  padding: 8px 0;
  will-change: transform;
}
.marquee-track span { padding-right: 0.5em; }

/* ============================================================
   S3 STATEMENT — セルグリッド + カチカチ点灯
   ============================================================ */
.statement { background: var(--bg); border-bottom: var(--bw) solid var(--ink); }
.cell-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
}
.cell { border-top: var(--bw) solid var(--ink); padding: clamp(24px, 4vw, 64px); }
.cell + .cell { border-left: var(--bw) solid var(--ink); }
.cell-wide { grid-row: 1 / 3; display: flex; align-items: center; }
.cell-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px;
}
.statement-copy {
  font-family: var(--font-head-ja);
  font-size: var(--fs-h2);
  line-height: 1.35; font-weight: 400;
  max-width: 18em;
}
.statement-copy .seg { opacity: 1; }
.js .statement-copy .seg { opacity: 0; }
.shape { font-size: 3rem; line-height: 1; }
.shape-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent1); border: var(--bw) solid var(--ink);
  display: inline-block;
}
.shape-star { color: var(--accent3); font-size: 4rem; }

/* ============================================================
   S4 PROGRAM — チケットカード
   ============================================================ */
.program { padding: clamp(64px, 10vh, 128px) var(--pad-x); background: var(--bg); }
.sec-title {
  font-family: var(--font-head-en);
  font-size: var(--fs-h2);
  line-height: 1; text-transform: uppercase;
  margin-bottom: 48px;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.sec-title-ja {
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.875rem; letter-spacing: 0.08em;
}
.tickets-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.ticket {
  display: flex;
  background: var(--surface);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow);
  transform: rotate(var(--rot, 0deg));
}
.ticket-body { padding: 24px; flex: 1; }
.ticket-tag {
  display: inline-block;
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.08em;
  color: #fff; padding: 3px 12px; border-radius: 999px;
  border: 2px solid var(--ink);
  margin-bottom: 16px;
}
.tag-red { background: var(--accent1); }
.tag-purple { background: var(--accent3); }
.ticket h3 { font-family: var(--font-head-en); font-size: var(--fs-h3); letter-spacing: 0.01em; margin-bottom: 8px; }
.ticket p:last-child { font-size: 0.9375rem; }
.ticket-stub {
  border-left: var(--bw) dashed var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 12px 10px;
  writing-mode: vertical-rl;
  font-family: var(--font-head-en); font-size: 1.25rem; letter-spacing: 0.1em;
}

/* ============================================================
   S5 PLAYGROUND — 320vh sticky（canvas 素通し・モバイルは 250vh）
   ============================================================ */
.playground { height: 320vh; position: relative; border-top: var(--bw) solid var(--ink); }
.playground-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 0 var(--pad-x) 32px;
  pointer-events: none;
}
.playground-label {
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.08em;
  background: var(--bg); border: var(--bw) solid var(--ink);
  padding: 6px 14px;
}

/* ============================================================
   S6 NUMBERS — 巨大数字 3 セル
   ============================================================ */
.numbers { border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); background: var(--bg); position: relative; z-index: 1; }
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.num { padding: clamp(32px, 5vw, 72px) var(--pad-x); }
.num + .num { border-left: var(--bw) solid var(--ink); }
.num dt {
  font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.num dd {
  font-family: var(--font-head-en);
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.num-red { background: var(--accent1); color: #fff; }
.num-purple { background: var(--accent3); color: #fff; }
.num-plain { background: var(--surface); color: var(--ink); }

/* ============================================================
   S7 LINEUP — 罫線表組み
   ============================================================ */
.lineup { padding: clamp(64px, 10vh, 128px) var(--pad-x); background: var(--bg); }
.lineup-table { list-style: none; border: var(--bw) solid var(--ink); }
.lineup-table li {
  display: grid;
  grid-template-columns: 4em 1fr auto;
  align-items: center; gap: 16px;
  padding: 18px 24px;
  background: var(--surface);
}
.lineup-table li + li { border-top: var(--bw) solid var(--ink); }
.lineup-table li:hover { background: var(--accent2); }
.ln-no { font-family: var(--font-head-en); font-size: 1.5rem; }
.ln-name { font-family: var(--font-head-ja); font-size: clamp(1.25rem, 3vw, 2rem); }
.ln-genre {
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.08em;
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 3px 12px;
}
/* テキストは ink/white のみの規律を守る: 残数はタグ面（紫地×白文字）で示す */
.ln-more .ln-genre { background: var(--accent3); color: #fff; border-color: var(--ink); display: inline-block; }

/* ============================================================
   S8 CTA — 3色同居を許可する2箇所目
   ============================================================ */
.cta {
  background: var(--accent2);
  border: var(--bw-bold) solid var(--ink); /* 黄は必ず ink 罫線に囲われた面 */
  padding: clamp(80px, 14vh, 168px) var(--pad-x);
  text-align: center;
  position: relative; z-index: 1;
}
.cta-title {
  font-family: var(--font-head-ja);
  font-size: var(--fs-display);
  line-height: 1.05;
  margin-bottom: 32px;
}
.cta-copy { font-weight: 700; max-width: 34em; margin: 0 auto 40px; }
.btn {
  display: inline-block;
  font-family: var(--font-head-ja);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--accent1); color: #fff;
  text-decoration: none;
  padding: 20px 56px;
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.btn:hover { background: var(--accent3); }
.btn:active { transform: translate(6px, 6px); box-shadow: none; }

/* ---- Footer ---- */
.site-footer {
  position: relative; z-index: 1;
  background: var(--ink); color: var(--bg);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 24px var(--pad-x);
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.08em;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  .site-header { flex-wrap: wrap; row-gap: 8px; padding: 10px 16px; }
  .logo { font-size: 1.05rem; }
  .site-header nav { gap: 10px; }
  .site-header nav a { font-size: 0.75rem; }
  .nav-ticket { padding: 6px 14px; }
  .playground { height: 250vh; }
}

@media (max-width: 860px) {
  .cell-grid { grid-template-columns: 1fr; }
  .cell + .cell { border-left: none; }
  .cell-wide { grid-row: auto; }
  .cell-empty { min-height: 100px; }
  .numbers-grid { grid-template-columns: 1fr; }
  .num + .num { border-left: none; border-top: var(--bw) solid var(--ink); }
  .lineup-table li { grid-template-columns: 2.5em 1fr; }
  .ln-genre { display: none; }
}

/* ============================================================
   Reduced Motion — 演出停止でも全コンテンツ可読
   （html.js は reduced-motion 時には付与されない）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { transform: none !important; }
  #gl { opacity: 0.5; }
}

/* ──────────────────────────────────────────────────────────────
   和文タイポグラフィ調整
   1. palt        … 句読点・括弧まわりの余分なアキを詰める
   2. auto-phrase … 文節単位で折り返す（「書」「く。」のような分断を防ぐ）
   3. balance     … 見出しの行長を揃え、1文字だけ落ちる行を作らない
   4. strict      … 禁則処理を厳密にし、行頭に 。 、 」 が来ないようにする
   auto-phrase / balance / pretty は非対応ブラウザでは無視されるだけで、
   崩れることはない（プログレッシブ・エンハンスメント）。
   ────────────────────────────────────────────────────────────── */
body {
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  line-break: strict;
  word-break: normal;
}
h1, h2, h3, h4, h5, .kicker, dt {
  word-break: auto-phrase;
  text-wrap: balance;
}
p, li, dd, td, .note, .desc, .caption,
.lede, .lead, .statement, blockquote, figcaption {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 手動改行は広い画面でのみ効かせ、狭い画面では自動折り返しに任せる */
@media (max-width: 640px) {
  h1 br, h2 br, h3 br,
  .lede br, .lead br, .statement br { display: none; }
}


/* ── 書体設計（見出し＝個性 / 本文＝可読性） ──────────────────────
   見出し: 既存のまま
   本文  : BIZ UDPGothic（Google Fonts の和文で palt が効く数少ない書体。
           読点のあとのアキが締まり、Mac / Windows で見え方が揃う）
   欧文は先頭に置いた書体から取り、和文だけが差し替わる。 */
p, li, dd, td, .note, .desc, .caption, figcaption, small {
  font-family: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}


/* ── 本文書体の適用を確実にする ──
   サイト側に .card p のような具体的な指定があると本文書体が上書きされてしまうため、
   html body を前置きして優先度を上げる。等幅を意図した要素は除外する。 */
html body :is(p, li, dd, td, .note, .desc, .caption, figcaption, .body, .txt, .text):not(code):not(pre):not([class*="mono"]):not([class*="code"]) {
  font-family: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}