/* ALL RIGHT HOUSE
   アイコンから取った決まり事:
     - 黒と白だけ。色は「ずれ」としてしか出さない（シアン／赤の縁）
     - 灯台の光＝斜めの帯。飾りではなく、画面を分ける構造として使う
     - 文字はすべて大文字・太い・字間を広く
   色を足したくなったら、まずアイコンを見ること。あそこに無い色は使わない。 */

:root {
  --ink: #000;
  --paper: #fff;
  --fringe-a: #00e5ff;   /* アイコンのシアン */
  --fringe-b: #ff2d2d;   /* アイコンの赤 */
  --beam-angle: 18deg;
  --pad: clamp(20px, 5vw, 56px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: var(--pad); top: 12px; z-index: 10;
  background: var(--paper); color: var(--ink);
  padding: 8px 14px; font-weight: 700;
}

/* --- 表紙 ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(88px, 24vw) 1fr;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding: var(--pad);
  overflow: hidden;
}

/* 灯台の光。**ランプの位置から**右へ広がる白い楔。
   起点がランプでないと「灯台が光っている」に見えない（最初それで作って直した）。
   楔は画面の外まで開かせる。中に載る文字が黒なので、
   文字が黒地にはみ出すと読めなくなるため、余裕を持って広く取る。 */
.beam {
  position: absolute;
  inset: 0;
  background: var(--paper);
  /* 起点は「灯台のランプの位置」。画面幅で灯台の高さが変わるので、
     実際に測った値を幅ごとに入れている（推測ではない）。
     測り方: .tower の矩形を取り、viewBox 上のランプ y=30/300 の画面位置を出す。 */
  clip-path: polygon(17% 39%, 100% -20%, 100% 240%);
  opacity: .97;
}

.tower {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 78svh;
  color: var(--paper);
  /* アイコンの色ずれ。輪郭の左右にシアンと赤が薄く出る */
  filter:
    drop-shadow(1.5px 0 0 var(--fringe-a))
    drop-shadow(-1.5px 0 0 var(--fringe-b));
}

.wordmark {
  position: relative;
  z-index: 2;
  /* 楔が十分広くなる位置まで右に寄せる。左に寄せると黒地に文字が落ちる */
  margin-left: clamp(0px, 7vw, 150px);
  color: var(--ink);
  font-size: clamp(30px, 9vw, 96px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: .22em;
  display: grid;
  gap: .08em;
  /* 文字にも同じずれを乗せる。黒地の上では白側、白帯の上では黒側に見える */
  text-shadow:
     1.5px 0 0 var(--fringe-a),
    -1.5px 0 0 var(--fringe-b);
}
.wordmark a { color: inherit; text-decoration: none; display: grid; gap: .08em; }
.wordmark span { display: block; }

/* --- 目次 ------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: clamp(14px, 4vw, 40px);
  padding: 14px var(--pad);
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.18);
  overflow-x: auto;
}
.nav a {
  color: var(--paper);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .28em;
  white-space: nowrap;
  padding: 6px 0;
}
.nav a:hover, .nav a:focus-visible {
  text-shadow: 1.5px 0 0 var(--fringe-a), -1.5px 0 0 var(--fringe-b);
}

/* --- 各章 ------------------------------------------------------------ */

.section {
  padding: clamp(56px, 12vw, 120px) var(--pad);
  border-bottom: 1px solid rgba(255,255,255,.14);
  max-width: 900px;
}

.head {
  font-size: clamp(24px, 6vw, 44px);
  font-weight: 800;
  letter-spacing: .3em;
  margin-bottom: clamp(20px, 5vw, 40px);
  text-shadow: 1.5px 0 0 var(--fringe-a), -1.5px 0 0 var(--fringe-b);
}

.empty {
  color: rgba(255,255,255,.62);
  font-size: 15px;
}

/* ライブ一覧。日付が主役なので、日付だけ大きく */
.lives { list-style: none; display: grid; gap: 28px; }
.live {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: clamp(12px, 3vw, 32px);
  align-items: baseline;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.live time {
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 800;
  letter-spacing: .08em;
}
.live time span { font-size: .6em; letter-spacing: .2em; opacity: .6; }
.live__venue { font-size: clamp(16px, 3.5vw, 20px); font-weight: 700; }
.live__meta { color: rgba(255,255,255,.62); font-size: 14px; margin-top: 4px; }

@media (max-width: 560px) {
  .live { grid-template-columns: 1fr; gap: 6px; }
}

/* 過去のライブ。これから来る予定と同じ強さで出すと、
   「次はいつ?」を探しに来た人が過去の日付を掴んでしまう。
   一段落として、履歴として読める重さにする。 */
.subhead {
  margin-top: 44px;
  font-size: 13px;
  letter-spacing: .32em;
  color: rgba(255,255,255,.5);
}
.lives--past { margin-top: 20px; gap: 20px; }
.lives--past .live { padding-bottom: 18px; }
.lives--past .live time { font-size: clamp(15px, 3vw, 19px); font-weight: 700; opacity: .78; }
.lives--past .live__venue { font-size: clamp(15px, 3vw, 17px); }

/* メンバー。**左に役割、右に名前**。
   最初は役割を上・名前を下に積んでいたが、社長から「並びがきもい」と指摘。
   縦に積むと役割と名前が交互に来て、目が上下に往復する。
   左右に分けると役割の列と名前の列がそれぞれ揃うので、一目で読める。
   LIVE の行（日付が左・中身が右）と同じ組み方でもある。 */
.members {
  list-style: none;
  display: grid;
  gap: clamp(18px, 3.5vw, 26px);
  max-width: 560px;
}
.member {
  display: grid;
  grid-template-columns: minmax(110px, 38%) 1fr;
  gap: clamp(12px, 3vw, 28px);
  align-items: baseline;
  padding-bottom: clamp(14px, 3vw, 20px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.member:last-child { border-bottom: none; }
.member__part {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: rgba(255,255,255,.6);
}
.member__name {
  font-size: clamp(20px, 4.6vw, 30px);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.1;
  text-shadow: 1.2px 0 0 var(--fringe-a), -1.2px 0 0 var(--fringe-b);
}

/* 音源。サイトに来た人が最初にすべきは「聴く」なので、リンクではなく埋める。
   16:9 を保ったまま幅に合わせる（高さを決め打ちすると端末ごとに黒帯が出る）。 */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(255,255,255,.18);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video__title {
  margin-top: 14px;
  font-size: clamp(16px, 3.6vw, 20px);
  font-weight: 800;
  letter-spacing: .1em;
}
.video__title span {
  margin-left: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: rgba(255,255,255,.6);
}

/* まだ出せていないものの見せ方。小さく「準備中」と書くと未完成に見えるが、
   見出しに近い組みで置くと「そういう章」に見える。 */
.soon {
  margin-top: clamp(28px, 6vw, 44px);
  font-size: clamp(16px, 3.6vw, 22px);
  font-weight: 800;
  letter-spacing: .3em;
  color: rgba(255,255,255,.45);
}

.links { list-style: none; display: grid; gap: 14px; }
.links a {
  color: var(--paper);
  font-weight: 700;
  letter-spacing: .12em;
  text-underline-offset: 5px;
}

.foot {
  padding: 40px var(--pad) 56px;
  /* 白45%は黒地で 4.37:1 しかなく、小さい文字の基準 4.5:1 に届かない（実測）。
     55% にすると 6.25:1。読めない脚注は置いていないのと同じなので上げる。 */
  color: rgba(255,255,255,.6);
  font-size: 12px;
  letter-spacing: .3em;
}

/* 動きを減らす設定の人には、色ずれも弱める（にじみが読みづらさになるため） */
@media (prefers-reduced-motion: reduce) {
  .wordmark, .head, .tower { text-shadow: none; filter: none; }
}

/* ランプの位置は幅で動く。実測値（2026-09-09）:
     390px  x=17.1% y=38.9%
     820px  x=17.0% y=33.3%
    1440px  x=15.9% y=18.8%
   楔の広がり（右端 -20% と 240%）は、どの幅でも文字が白い帯の中に収まることを
   画面を撮って確かめてある。起点だけを合わせればよい。 */
@media (min-width: 600px) {
  .beam { clip-path: polygon(17% 33%, 100% -20%, 100% 240%); }
}
@media (min-width: 1024px) {
  .beam { clip-path: polygon(16% 19%, 100% -20%, 100% 240%); }
}

/* --- 灯りの入口 ------------------------------------------------------
   ランプを押すと LOG（灯台守の日誌）へ飛ぶ。
   案内は出さない。ただし「押せる」と分かる手応えだけは残す:
     - 指の当たり判定を見た目より広く（透明な円で確保済み）
     - 触れたときだけ灯りが強くなる
   まったく手応えが無いと、気づいた人まで押さずに帰るため。 */
.lamp { cursor: pointer; }
.lamp ellipse { transition: filter .25s ease, opacity .25s ease; }
.lamp:hover ellipse,
.lamp:focus-visible ellipse {
  filter: drop-shadow(0 0 6px var(--paper)) drop-shadow(0 0 14px var(--fringe-a));
}
.lamp:focus-visible { outline: none; }
.lamp:focus-visible ellipse { opacity: 1; }

/* --- LOG（日誌）------------------------------------------------------ */

.log-head {
  padding: clamp(48px, 12vw, 96px) var(--pad) clamp(24px, 6vw, 40px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.log-head h1 {
  font-size: clamp(28px, 8vw, 56px);
  font-weight: 800;
  letter-spacing: .3em;
  text-shadow: 1.5px 0 0 var(--fringe-a), -1.5px 0 0 var(--fringe-b);
}
.log-head p {
  margin-top: 14px;
  color: rgba(255,255,255,.55);
  font-size: 14px;
  max-width: 44em;
}

.entries {
  list-style: none;
  max-width: 720px;
  padding: 0 var(--pad) clamp(56px, 12vw, 120px);
}
.entry {
  padding: clamp(32px, 7vw, 56px) 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.entry time {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3em;
  color: rgba(255,255,255,.55);
  margin-bottom: 12px;
}
.entry h2 {
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 800;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.entry p { margin-bottom: 1em; }
.entry p:last-child { margin-bottom: 0; }

.back {
  display: inline-block;
  margin: 0 var(--pad) clamp(48px, 10vw, 80px);
  color: rgba(255,255,255,.6);
  font-size: 13px;
  letter-spacing: .2em;
  text-underline-offset: 5px;
}
.back:hover { color: var(--paper); }