/* ============================================================
   livrise. — liberal (reverse) arts.
   design system: 2極（ultramarine / paper）の反転で組む
   ============================================================ */

:root {
  --blue: #1d2be8;
  --paper: #ffffff;
  --mag: #f2309b;
  --red: #f23b26;
  --cyan: #37c8f0;
  --yel: #ffd400;
  --vio: #8a6cf5;
  --fd: "Archivo", "Zen Kaku Gothic New", sans-serif;
  --fm: "Fragment Mono", "Zen Kaku Gothic New", monospace;
  --pad-x: clamp(1.25rem, 5vw, 5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--blue);
  font-family: var(--fd);
  font-weight: 500;
  line-height: 2;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 粒子（フライヤーのノイズ質感） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--blue); color: #fff; }
.sec--blue ::selection, .foot ::selection { background: #fff; color: var(--blue); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.mono { font-family: var(--fm); }

/* ---------- 固定ヘッダー：下の面によって色が反転する ---------- */
.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem var(--pad-x);
  mix-blend-mode: difference;
  color: #fff;
}
.head a { color: #fff; }
.head .logo {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.04em;
  line-height: 1;
}
.head nav {
  display: flex;
  gap: clamp(0.9rem, 2.5vw, 1.8rem);
  font-family: var(--fm);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}
.head nav a { padding: 0.15em 0.2em; }
.head nav a:hover,
.head nav a[aria-current="page"] { background: #fff; color: #000; }
@media (max-width: 640px) {
  .head { padding: 0.75rem 1rem; }
  .head .logo { font-size: 1.05rem; }
  .head nav { gap: 0.7rem; font-size: 0.62rem; letter-spacing: 0.06em; }
  .head nav a[href$="#parties"] { display: none; }
}

/* ---------- ティッカー ---------- */
.ticker {
  display: flex;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  font-family: var(--fm);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 0.55em 0;
  white-space: nowrap;
  border-top: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
}
.ticker span {
  flex-shrink: 0;
  min-width: 100%;
  animation: tick 36s linear infinite;
}
.ticker--paper { background: var(--paper); color: var(--blue); }
@keyframes tick { to { transform: translateX(-100%); } }

/* ---------- セクション ---------- */
.sec { padding: clamp(4rem, 9vw, 7.5rem) var(--pad-x); }
.sec--blue { background: var(--blue); color: #fff; }
.sec--tight { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.lbl {
  display: block;
  font-family: var(--fm);
  font-size: 0.75rem;
  letter-spacing: 0.42em;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.lbl::before { content: "\27E8\2009"; }   /* ⟨ */
.lbl::after  { content: "\2009\27E9"; }   /* ⟩ */

/* ---------- ジグザグの亀裂（フライヤー#1の裂け目） ---------- */
.rip {
  height: clamp(46px, 8vw, 104px);
  background: var(--blue);
  clip-path: polygon(0 100%, 0 58%, 7% 58%, 7% 14%, 16% 14%, 16% 66%, 27% 66%, 27% 30%, 38% 30%, 38% 78%, 46% 78%, 46% 6%, 57% 6%, 57% 52%, 66% 52%, 66% 22%, 78% 22%, 78% 64%, 87% 64%, 87% 10%, 100% 10%, 100% 100%);
}
.rip--out {
  background: var(--blue);
  clip-path: polygon(0 0, 0 42%, 7% 42%, 7% 86%, 16% 86%, 16% 34%, 27% 34%, 27% 70%, 38% 70%, 38% 22%, 46% 22%, 46% 94%, 57% 94%, 57% 48%, 66% 48%, 66% 78%, 78% 78%, 78% 36%, 87% 36%, 87% 90%, 100% 90%, 100% 0);
}

/* ---------- ハイライトバー（フライヤーの帯文字） ---------- */
.hl {
  padding: 0.04em 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-b { background: var(--blue); color: #fff; }
.hl-w { background: #fff;        color: var(--blue); }
.hl-m { background: var(--mag);  color: #fff; }
.hl-r { background: var(--red);  color: #fff; }
.hl-c { background: var(--cyan); color: var(--blue); }
.hl-y { background: var(--yel);  color: var(--blue); }
.hl-v { background: var(--vio);  color: #fff; }
a.hl:hover { background: #000; color: #fff; }
.sec--blue a.hl:hover, .foot a.hl:hover { background: #000; color: #fff; }

/* ---------- グリッチ（ロゴ用・時々だけ走る） ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch::before { color: var(--mag); z-index: -1; animation: gl-a 7s steps(1) infinite; }
.glitch::after  { color: var(--cyan); z-index: -2; animation: gl-b 7s steps(1) 0.08s infinite; }
@keyframes gl-a {
  0%, 88%, 100% { opacity: 0; transform: none; clip-path: none; }
  89% { opacity: 1; transform: translate(-0.045em, 0.02em); clip-path: inset(12% 0 55% 0); }
  92% { opacity: 1; transform: translate(0.03em, -0.015em); clip-path: inset(60% 0 8% 0); }
  95% { opacity: 0; }
}
@keyframes gl-b {
  0%, 88%, 100% { opacity: 0; transform: none; clip-path: none; }
  90% { opacity: 1; transform: translate(0.05em, 0.01em); clip-path: inset(38% 0 30% 0); }
  93% { opacity: 1; transform: translate(-0.025em, 0.02em); clip-path: inset(4% 0 76% 0); }
  96% { opacity: 0; }
}

/* ---------- 見出し・コピー ---------- */
.display {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.copy-xl {
  font-weight: 900;
  font-size: clamp(1.7rem, 4.6vw, 3.4rem);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.copy-l {
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  line-height: 1.9;
}
.body-copy { max-width: 42em; }
.small { font-size: 0.82rem; line-height: 2.1; }

/* ---------- 行リスト（イベント / ニュース / クルー） ---------- */
.rows { border-bottom: 2px solid currentColor; }
.row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 0.4rem 1.4rem;
  align-items: baseline;
  border-top: 2px solid currentColor;
  padding: 1.2rem 0.6rem;
  margin: 0 -0.6rem;
}
a.row:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
a.row:hover .hl-b { background: #fff; color: var(--blue); }
.sec--blue a.row:hover { background: #fff; color: var(--blue); border-color: #fff; }
.sec--blue a.row:hover .hl-w { background: var(--blue); color: #fff; }
.row .d { font-family: var(--fm); font-size: 0.8rem; letter-spacing: 0.1em; }
.row .n { font-weight: 800; font-size: clamp(1.3rem, 3.2vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.row .v { font-family: var(--fm); font-size: 0.74rem; letter-spacing: 0.14em; text-align: right; }
.row .note { grid-column: 2 / -1; font-size: 0.8rem; line-height: 1.9; opacity: 0.85; }
@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; gap: 0.15rem; padding: 1rem 0.6rem; }
  .row .v { text-align: left; }
  .row .note { grid-column: 1 / -1; }
}
.row--s .n { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 700; }
.cat {
  font-family: var(--fm);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  padding: 0.25em 0.7em;
  justify-self: start;
}
.sec-cta { margin-top: clamp(2rem, 5vw, 3.2rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.sec-cta .aside { font-family: var(--fm); font-size: 0.68rem; letter-spacing: 0.18em; }

/* ---------- クルーの壁（ラインナップ文字組） ---------- */
.crew-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 0.45em;
  font-weight: 800;
  font-size: clamp(1.45rem, 4.4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  align-items: baseline;
}
.crew-wall .r {
  font-family: var(--fm);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  align-self: center;
}

/* ---------- ボタン（角丸なし・反転のみ） ---------- */
.btn {
  display: inline-block;
  font-family: var(--fm);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  border: 2px solid currentColor;
  padding: 0.85em 1.6em;
}
.btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--fill { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--fill:hover { background: #000; border-color: #000; }
.sec--blue .btn:hover, .foot .btn:hover { background: #fff; color: var(--blue); border-color: #fff; }
.sec--blue .btn--fill { background: #fff; color: var(--blue); border-color: #fff; }
.sec--blue .btn--fill:hover { background: var(--yel); border-color: var(--yel); }

/* ---------- 縦書きの注記 ---------- */
.vtx {
  writing-mode: vertical-rl;
  font-family: var(--fm);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
}

/* ---------- フッター ---------- */
.foot {
  background: var(--blue);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad-x) 2rem;
  overflow: hidden;
}
.foot .giant {
  font-weight: 800;
  font-size: clamp(4rem, 16.5vw, 15rem);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
  margin: 0 -0.04em 0.35em;
  display: block;
  white-space: nowrap;
}
.foot .giant:hover { color: #fff; }
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-end;
  margin-bottom: 3rem;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 1.4rem; font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.18em; }
.foot nav a:hover { background: #fff; color: var(--blue); }
.foot .fine { font-family: var(--fm); font-size: 0.66rem; letter-spacing: 0.14em; opacity: 0.75; }

/* ---------- ページ見出し（下層） ---------- */
.page-head { padding: clamp(7rem, 14vw, 10rem) var(--pad-x) clamp(2.5rem, 5vw, 4rem); }
.page-head h1 {
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.page-head .sub {
  font-family: var(--fm);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  margin-top: 1.4rem;
}
.crumb {
  font-family: var(--fm);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  margin-bottom: 2rem;
}
.crumb a:hover { background: var(--blue); color: #fff; }

/* ---------- 動きを減らす設定を尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker span { animation: none; }
  .glitch::before, .glitch::after { animation: none; }
  html { scroll-behavior: auto; }
}