/* ============================================================
   POGO KOBE — 夜の港のエレクトロニック・フェス
   規律:
     1. 色は :root の 6 変数のみ。黄ベタ地・青紫は全廃
     2. 黒フチ／黒のオフセット影は使わない。1px 罫線・蛍光グロー・余白で作る
     3. 角丸は 0 か 999px の二択。中途半端な半径を作らない
     4. volt は「光っているもの」専用。面塗りは CTA ボタン 1 箇所だけ
     5. 和文の Dela Gothic One はヒーロー見出しと CTA 見出しの 2 箇所のみ
   ============================================================ */

:root {
  --ink:      #07080b;   /* 墨黒。ベース背景 */
  --ink-2:    #0d1016;   /* 面の切り替え用 */
  --paper:    #f2f0ea;   /* 反転セクション／本文文字色 */
  --volt:     #d8ff3e;   /* 蛍光ライム。主役アクセント */
  --volt-dim: #a8c62f;   /* volt の沈めた版 */
  --flare:    #ff3b30;   /* 差し色。ロゴのドットと CTA hover のみ */
  --line:     rgba(242, 240, 234, .14);

  /* --paper の透過段階。文字の階層はサイズではなく明度差で作る */
  --paper-80: rgba(242, 240, 234, .78);
  --paper-55: rgba(242, 240, 234, .55);
  --paper-38: rgba(242, 240, 234, .38);
  --line-strong: rgba(242, 240, 234, .28);
  --glow: 0 0 24px rgba(216, 255, 62, .28);

  /* ▼ 旧トークン別名（assets/js/main.js の readTokens() 互換）。
     JS 側は 3D の色をここから読む。値は必ずリテラルで書く（var() 参照にしない） */
  --surface:  #0d1016;
  --accent1:  #ff3b30;
  --accent2:  #d8ff3e;
  --accent3:  #a8c62f;

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

  /* ジャンプ率を上げる: 欧文ディスプレイは画面幅の 15%、本文は 15〜16px 固定域 */
  --fs-hero-en: clamp(3.4rem, 15vw, 14rem);
  --fs-hero-ja: clamp(1.5rem, 4.4vw, 3.5rem);
  --fs-display: clamp(3rem, 9vw, 8rem);
  --fs-marquee: clamp(2.2rem, 5.4vw, 4.5rem);
  --fs-h2: clamp(2.4rem, 6vw, 5rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-body: clamp(0.9375rem, 1vw, 1rem);
  --fs-label: 0.6875rem;

  --pad-x: clamp(20px, 5vw, 72px);
  /* B の「大きな余白」。上限 220px は 1440px 幅で空きが目立ちすぎたため 168px に締めた */
  --sec-pad-y: clamp(96px, 11vw, 168px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--ink); }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--volt); color: var(--ink); }
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(--volt); color: var(--ink);
  font-weight: 700; text-decoration: none; border-radius: 999px;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

/* 共通ラベル: 小さな欧文キャプション */
.label {
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper-55);
  /* line-height:1 だと 375px でヒーローのラベルが 2 行に折り返した瞬間、
     上下の行が完全に接触して潰れて見えた（2026-09-02 実測）。
     1 行で収まる箇所の見た目はほぼ変えずに余裕を持たせる。 */
  line-height: 1.45;
}

/* ---- 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; }
section[id] { scroll-margin-top: 72px; }

/* ---- Header ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 16px var(--pad-x);
  background: rgba(7, 8, 11, .62);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.logo {
  font-family: var(--font-head-en);
  font-size: 1.0625rem; text-decoration: none;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.34em;
}
.logo-dot { color: var(--flare); font-size: 0.5em; }
.site-header nav { display: flex; gap: clamp(14px, 2.2vw, 34px); align-items: center; }
.site-header nav a {
  font-family: var(--font-en); font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--paper-55);
  transition: color .2s ease;
}
.site-header nav a:hover { color: var(--paper); }
.nav-ticket {
  color: var(--volt) !important;
  padding: 7px 18px; border-radius: 999px;
  border: 1px solid rgba(216, 255, 62, .45);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.nav-ticket:hover {
  background: var(--volt); color: var(--ink) !important;
  box-shadow: var(--glow);
}

/* ============================================================
   S1 HERO — 黒地。巨大な欧文。3D は背後で回る
   ============================================================ */
/* 下パディングを厚く取り、本文ブロックを 3D の休止列（画面下 15%）より上へ逃がす */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(112px, 16vh, 168px) var(--pad-x) clamp(150px, 27vh, 260px);
  position: relative;
}
.hero-eyebrow { margin-bottom: clamp(24px, 4vh, 40px); }
.hero-eyebrow::before {
  content: ""; display: inline-block;
  width: 40px; height: 1px; background: var(--volt);
  vertical-align: middle; margin-right: 14px;
  box-shadow: var(--glow);
}
.display {
  font-family: var(--font-head-ja);
  font-size: var(--fs-hero-ja);
  line-height: 1.24; font-weight: 400;
  letter-spacing: 0.01em;
  /* 和文コピーは「POGO KOBE」に次ぐ主役。80% だと灰色に沈んで
     欧文に完全に食われるため、白に寄せて対等に立たせる */
  color: var(--paper);
}
/* 句読点だけ volt に落とし、白ベタの塊に一点だけリズムを作る */
.display .dot { color: var(--volt); }
.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);
  font-size: var(--fs-hero-en);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-top: clamp(8px, 1.6vw, 20px);
  text-transform: uppercase;
}
.hero-tag {
  margin-top: clamp(24px, 3.4vw, 40px);
  max-width: 30em;
  color: var(--paper-55);
  font-size: 0.9375rem;
}
.js .hero-tag { opacity: 0; }

/* 日付バー: volt の 1px 罫線＋小さな文字。黄色いラベルは廃止 */
.hero-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px clamp(20px, 4vw, 56px);
  padding: 16px var(--pad-x);
  border-top: 1px solid rgba(216, 255, 62, .34);
  background: rgba(7, 8, 11, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-55);
  line-height: 1.6;
}
.hero-meta b { color: var(--paper); font-weight: 500; }
/* 右端に置くと showcase バッジと重なるため、左寄せの並びのまま最後に置く */
.hero-meta .is-live { color: var(--volt); }
.hero-meta .is-live::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--volt); box-shadow: var(--glow);
  margin-right: 9px; vertical-align: 1px;
}

/* ============================================================
   S2/S7 MARQUEE — 罫線で挟んだ帯（ベタ塗りの色帯は廃止）
   ============================================================ */
.marquee {
  overflow: hidden; white-space: nowrap;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
}
.marquee-track {
  display: inline-flex;
  font-family: var(--font-head-en);
  font-size: var(--fs-marquee);
  line-height: 1.18;
  letter-spacing: -0.01em;
  padding: 18px 0;
  will-change: transform;
}
.marquee-track span { padding-right: 0.5em; }
.marquee-a .marquee-track { color: var(--volt); }
/* 2 本目は塗りを抜いた輪郭文字。同じ帯を 2 度見せない */
.marquee-b .marquee-track {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}

/* ============================================================
   S3 STATEMENT
   ============================================================ */
.statement {
  background: var(--ink);
  padding: var(--sec-pad-y) var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.statement-copy {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.625rem, 3.4vw, 3rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-top: 26px;
  max-width: 17em;
}
.statement-copy .seg { opacity: 1; }
.js .statement-copy .seg { opacity: 0; }
.statement-note {
  color: var(--paper-55);
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.statement-note strong { color: var(--volt); font-weight: 500; }

/* ============================================================
   セクション見出し（大きな欧文＋小さな和文キャプション）
   ============================================================ */
.sec-title {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sec-title-en {
  font-family: var(--font-head-en);
  font-size: var(--fs-h2);
  line-height: 1; text-transform: uppercase;
  letter-spacing: -0.02em;
}
.sec-title-ja {
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper-55);
}

/* ============================================================
   S4 PROGRAM — 黒地＋ volt の細罫（白ベタのチケットは廃止）
   ============================================================ */
.program { padding: var(--sec-pad-y) var(--pad-x); background: var(--ink); }
.tickets-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.ticket {
  display: flex;
  background: var(--ink-2);
  border: 1px solid var(--line);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.ticket:hover {
  border-color: rgba(216, 255, 62, .5);
  box-shadow: var(--glow);
}
.ticket-body { padding: clamp(24px, 2.6vw, 34px); flex: 1; min-width: 0; }
.ticket-tag {
  display: inline-block;
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.2em;
  color: var(--volt); padding: 4px 13px; border-radius: 999px;
  border: 1px solid rgba(216, 255, 62, .4);
  margin-bottom: 22px; line-height: 1.6;
  text-transform: uppercase;
}
.ticket h3 {
  font-family: var(--font-head-en); font-size: var(--fs-h3);
  letter-spacing: 0.01em; line-height: 1.15; margin-bottom: 12px;
  text-transform: uppercase;
}
.ticket p:last-child { font-size: 0.875rem; color: var(--paper-55); line-height: 1.9; }
/* ミシン目は残すが色は --line まで落とす */
.ticket-stub {
  border-left: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  padding: 14px 12px;
  writing-mode: vertical-rl;
  font-family: var(--font-en); font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.24em;
  color: var(--paper-38);
}

/* ============================================================
   S5 TIMETABLE — 実用情報。密度で見せる
   ============================================================ */
.timetable {
  padding: var(--sec-pad-y) var(--pad-x);
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 1;
}
.tt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3.4vw, 56px);
}
.tt-day + .tt-day { border-left: 1px solid var(--line); padding-left: clamp(24px, 3.4vw, 56px); }
.tt-day-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
}
.tt-day-no {
  font-family: var(--font-head-en); font-size: 1.625rem;
  letter-spacing: 0.02em; color: var(--volt);
  text-transform: uppercase;
}
.tt-day-date {
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.2em;
  color: var(--paper-55); text-transform: uppercase;
}
.tt-list { list-style: none; }
.tt-list li {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: 2px 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  transition: color .2s ease;
}
.tt-list li:hover .tt-act { color: var(--volt); }
.tt-time {
  font-family: var(--font-en); font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 0.06em;
  color: var(--paper-38); line-height: 1.7; padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.tt-act { font-size: 0.9375rem; font-weight: 500; line-height: 1.6; transition: color .2s ease; }
.tt-stage {
  grid-column: 2;
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-38);
  line-height: 1.6;
}
.tt-note {
  margin-top: clamp(32px, 4vw, 56px);
  font-size: 0.8125rem; color: var(--paper-38); max-width: 46em;
}

/* ============================================================
   S6 PLAYGROUND — 3D が転がる／整列する／散開する（canvas 素通し）
   ============================================================ */
.playground { height: 150vh; position: relative; }
/* ラベルは上端に置く。下端は 3D の休止列と重なる */
.playground-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; gap: 10px;
  padding: clamp(96px, 14vh, 132px) var(--pad-x) 0;
  pointer-events: none;
}
.playground-label { color: var(--paper-38); }
.playground-label::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px; background: var(--line-strong);
  vertical-align: middle; margin-right: 12px;
}

/* ============================================================
   S7 NUMBERS — 巨大数字。色面は使わず罫線で仕切る
   ============================================================ */
/* ここだけ paper へ反転させる。8000px 近い黒の連続に 1 枚だけ白を差し、
   スクロールのリズムを作る（--paper を使うのはこのセクションのみ） */
.numbers {
  background: var(--paper); color: var(--ink);
  position: relative; z-index: 1;
}
.numbers-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.num { padding: clamp(44px, 5.4vw, 88px) var(--pad-x); }
.num + .num { border-left: 1px solid rgba(7, 8, 11, .16); }
.num dt {
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(7, 8, 11, .52);
  margin-bottom: 20px; line-height: 1.6;
}
.num dt span { display: block; font-family: var(--font-body); letter-spacing: 0.06em; color: rgba(7, 8, 11, .42); }
.num dd {
  font-family: var(--font-head-en);
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 0.94; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* 反転面では volt を面に使わず、下線 1 本だけに絞る */
.num-volt dd {
  display: inline-block;
  border-bottom: 9px solid var(--volt);
  padding-bottom: 6px;
}

/* ============================================================
   S8 LINEUP — 黒地の罫線リスト。ホバーで行が volt に反転
   ============================================================ */
.lineup { padding: var(--sec-pad-y) var(--pad-x); background: var(--ink); }
.lineup-table { list-style: none; border-top: 1px solid var(--line); }
.lineup-table li {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr) auto;
  align-items: center; gap: 20px;
  padding: clamp(18px, 2vw, 26px) clamp(12px, 1.6vw, 24px);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, color .2s ease, padding-left .25s ease;
}
.lineup-table li:hover {
  background: var(--volt); color: var(--ink);
  padding-left: clamp(20px, 2.4vw, 36px);
}
.ln-no {
  font-family: var(--font-en); font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.16em; color: var(--paper-38);
  transition: color .2s ease;
}
.lineup-table li:hover .ln-no { color: rgba(7, 8, 11, .55); }
/* 欧文名は Anton、和文名は Zen Kaku 700 に自動で振り分く */
.ln-name {
  font-family: var(--font-head-en);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.4vw, 2.75rem);
  line-height: 1.15; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.ln-genre {
  font-family: var(--font-en); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--paper-55);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 4px 14px; line-height: 1.6; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.lineup-table li:hover .ln-genre { color: var(--ink); border-color: rgba(7, 8, 11, .4); }
.ln-more .ln-name { font-family: var(--font-en); font-weight: 500; font-size: 1rem; letter-spacing: 0.16em; color: var(--paper-38); }
.lineup-table li.ln-more:hover .ln-name { color: var(--ink); }

/* ============================================================
   S9 CTA — 黒地＋ volt の極太タイポ。塗るのはボタンだけ
   ============================================================ */
/* flex 縦積み。inline-block のボタンを行ボックスに載せると
   line-height 分の余白が読めなくなり、余白設計が崩れる */
.cta {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: clamp(112px, 16vh, 180px) var(--pad-x);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  position: relative; z-index: 1;
}
.cta-title {
  font-family: var(--font-head-ja);
  font-size: var(--fs-display);
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--volt);
  text-shadow: 0 0 44px rgba(216, 255, 62, .12);
  margin-bottom: 32px;
}
.cta-copy {
  color: var(--paper-55); max-width: 32em; margin: 0 0 44px;
  font-size: 0.9375rem;
}
.btn {
  display: inline-block;
  font-family: var(--font-en); font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--volt); color: var(--ink);
  text-decoration: none;
  padding: 20px 52px;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(216, 255, 62, .22);
  /* transform は GSAP が触るため CSS transition の対象にしない
     （両者が同じプロパティを奪い合うと from トゥイーンが開始値で固まる） */
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover {
  background: var(--flare); color: var(--paper);
  box-shadow: 0 0 26px rgba(255, 59, 48, .38);
}
.cta-fine {
  margin-top: 28px; font-size: 0.75rem; color: var(--paper-38);
  letter-spacing: 0.06em;
}

/* ---- Footer ---- */
.site-footer {
  position: relative; z-index: 1;
  background: var(--ink); border-top: 1px solid var(--line);
  /* 右寄せにすると showcase バッジと重なるため、左に並べる */
  display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px clamp(24px, 4vw, 56px);
  padding: 28px var(--pad-x);
  font-family: var(--font-en); font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-38);
}
.site-footer a { color: var(--paper-55); text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: var(--volt); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .tt-grid { grid-template-columns: 1fr; gap: 0; }
  .tt-day + .tt-day {
    border-left: none; padding-left: 0;
    margin-top: clamp(40px, 6vw, 64px);
  }
}

@media (max-width: 860px) {
  .statement-grid { grid-template-columns: 1fr; align-items: start; }
  .statement-copy { max-width: none; }
  .numbers-grid { grid-template-columns: 1fr; }
  .num + .num { border-left: none; border-top: 1px solid var(--line); }
  .lineup-table li { grid-template-columns: 3em minmax(0, 1fr); gap: 14px; }
  .ln-genre { display: none; }
  .playground { height: 140vh; }
}

@media (max-width: 600px) {
  .site-header { padding: 12px 16px; }
  .logo { font-size: 0.875rem; letter-spacing: 0.08em; }
  /* 390px では 4 項目が入らない。Lineup を落として Tickets を見切れさせない */
  .site-header nav { gap: 10px; }
  .site-header nav a { font-size: 0.625rem; letter-spacing: 0.07em; }
  .nav-hide-sm { display: none; }
  .nav-ticket { padding: 6px 12px; }
  .hero-meta { gap: 6px 18px; letter-spacing: 0.14em; }
  .hero-meta .is-live { margin-left: 0; }
  .ticket { flex-direction: column; }
  .ticket-stub {
    border-left: none; border-top: 1px dashed var(--line-strong);
    writing-mode: horizontal-tb; padding: 12px;
  }
}

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

/* ──────────────────────────────────────────────────────────────
   和文タイポグラフィ調整
   palt / auto-phrase / balance / strict。非対応ブラウザでは無視される
   ────────────────────────────────────────────────────────────── */
body {
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  line-break: strict;
  word-break: normal;
}
h1, h2, h3, h4, h5, dt {
  word-break: auto-phrase;
  text-wrap: balance;
}
p, li, dd, td, .tt-act, .statement-note {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* Dela Gothic One は palt を切る（この級数では字面が食い込む） */
.display, .cta-title, .ln-name { font-feature-settings: "palt" 0; }

/* 手動改行は CTA 見出しにしか無く、狭い画面でも 2 行のままのほうが級数を保てる。
   （旧ルールの一括 `h2 br{display:none}` は CTA を 1 行に潰していたので撤去） */

/* .dot は <i> なので斜体を打ち消す（ヒーロー句読点のアクセント用） */
.display .dot { font-style: normal; }