/* ---------------------------------------------------------------------------
   書体
   ---------------------------------------------------------------------------
   Gen Interface JP … Source Han Sans と Inter を掛け合わせた書体。Inter は
   Helvetica の系譜にある画面用グロテスクで、ミースが実務で使った書体世界と
   血統が重なる。本文と見出しに使う。
   UDEV Gothic NF  … JetBrains Mono + BIZ UDGothic。ラベル・数値・技術情報だけに
   使う。等幅で組むと建築図面の寸法記入のような佇まいになり、本文のサンセリフと
   対比が生まれる。欧文しか使わないのでサブセットが 18 KB で済んでいる。

   いずれも SIL Open Font License 1.1（fonts/NOTICE.md 参照）。

   配信しているのは「このサイトで使う文字だけ」に絞った woff2 なので、
   ここに無い漢字を書くと豆腐（□）になる。文章を足したら
   ./tools/build-fonts.sh を流し直すこと。
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Gen Interface JP';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/GenInterfaceJP-Light.woff2') format('woff2');
}

@font-face {
  font-family: 'Gen Interface JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/GenInterfaceJP-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Gen Interface JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/GenInterfaceJP-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'UDEV Gothic NF';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/UDEVGothicNF-Regular.woff2') format('woff2');
}

:root {
  /* 色 — バルセロナ・パビリオンの構成に対応させる。
     地(ガラス) / 文字(トラバーチン) / 弱い文字 / 目地(線) / オニキスの壁。
     オニキスだけが色として「塗られる」。他は線か文字色に留める。 */
  --bg: #0f1115;
  --text: #eceef2;
  --muted: #8b929e;
  --border: #23262e;
  --accent: #ffb020;

  /* 面。箱を廃したので、残っているのは浮くもの（メニュー）だけ */
  --panel: #171a21;

  /* モジュール — 余白はすべてこの倍数で刻む。ミースの柱間にあたる。
     枠線を外すと 2px のズレが露出するので、寸法を一本化して逃げ場を作らない。 */
  --m: 8px;

  /* 書体 */
  --sans: 'Gen Interface JP', 'Helvetica Neue', Arial, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  /* UDEV Gothic NF は欧文・数字・記号だけのサブセット（18 KB）なので、
     日本語を含むラベル（「開発中」「購読中」など）はこの書体では出せない。
     fallback に Gen Interface JP を挟み、日本語をサイト共通の書体へ落とす。
     結果として、欧文と数字は等幅、日本語はサンセリフになる。 */
  --mono: 'UDEV Gothic NF', 'Gen Interface JP', 'SF Mono', Menlo, monospace;

  /* 級数 — 10 種類あったサイズを 5 段階に畳む */
  --t-display: 32px;
  --t-title: 20px;
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 12px;
}

* { box-sizing: border-box; }

/* 区切り線を 100vw で張り出させているので、その分の横スクロールを抑える */
html { overflow-x: hidden; }

/* the [hidden] attribute's default `display:none` (from the browser's own UA
   stylesheet) loses to any author-stylesheet rule that also sets `display` on the
   same element (e.g. .button's `display:inline-block`) - same specificity, author
   styles always win over UA defaults. !important here forces hidden to always
   actually hide, regardless of what other classes an element carries. Used by
   lang.js's .lang-ja/.lang-en toggling. */
[hidden] { display: none !important; }


/* 視覚的には隠すが、スクリーンリーダーには読ませる。
   アイコンだけのボタン(ユーザーメニュー)に名前を与えるために使う。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.8;
}

a { color: inherit; text-decoration: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
}

.brand {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: var(--t-small);
}

.nav {
  font-family: var(--mono);
  display: flex;
  gap: 24px;
  font-size: var(--t-small);
  letter-spacing: 0.05em;
}

.nav a {
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.lang-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--t-label);
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 0;
  cursor: pointer;
  margin-left: 16px;
  font-family: inherit;
}

.lang-toggle-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ---------- ヘッダのユーザーメニュー ---------- */

/* ログイン中だけ subscription.js が hidden を外す。
   未ログインのときはヘッダの見た目が従来と変わらないようにしている。 */
.user-menu {
  position: relative;
  margin-left: 4px;
}

.user-menu-trigger {
  display: block;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  line-height: 0;
  cursor: pointer;
}

.user-menu-trigger:hover .user-avatar,
.user-menu-trigger[aria-expanded="true"] .user-avatar {
  border-color: var(--accent);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 1px solid var(--border);
  object-fit: cover;
  transition: border-color 0.15s ease;
}

/* Google 等のプロフィール画像が無いアカウント用。
   メールアドレスの頭文字を出して、アイコンの位置を空けない */
.user-avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  color: var(--text);
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + var(--m));
  right: 0;
  z-index: 20;
  min-width: calc(var(--m) * 30);
  background: var(--bg);
  border: 1px solid var(--text);
  border-radius: 0;
  overflow: hidden;
  text-align: left;
}

.user-menu-head {
  padding: 16px 16px;
  border-bottom: 1px solid var(--border);
}

.user-menu-email {
  font-family: var(--mono);
  display: block;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--text);
  word-break: break-all;
}

.user-menu-status {
  font-family: var(--mono);
  display: inline-block;
  margin-top: 8px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--muted);
}

.user-menu-status--active {
  border-color: var(--accent);
  color: var(--accent);
}

.user-menu-actions {
  padding: 8px;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 8px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--t-small);
  text-align: left;
  cursor: pointer;
}

.user-menu-item:hover {
  background: var(--bg);
  color: var(--text);
}

.hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 96px 32px 64px;
  text-align: center;
}

.hero h1 {
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: 0.06em;
  margin: 0 0 calc(var(--m) * 2);
}

.tagline {
  color: var(--muted);
  font-size: var(--t-body);
  margin: 0 0 56px;
}

.hero-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 640px) {
  .hero-links { grid-template-columns: 1fr; }
}

/* 箱で囲わず、上端の一本の線と余白だけで区切る。
   壁は空間を囲まず方向づけるだけ、というバルセロナ・パビリオンの平面に倣う。 */
.card {
  display: block;
  padding: calc(var(--m) * 4) 0 calc(var(--m) * 3);
  border-top: 1px solid var(--text);
  text-align: left;
  transition: border-color 0.15s ease;
}

.card:hover {
  border-top-color: var(--accent);
}

.card h2 {
  margin: 0 0 8px;
  font-size: var(--t-title);
  letter-spacing: 0.05em;
}

.card-logo {
  display: block;
  width: 160px;
  height: auto;
  margin: 0 0 16px;
}

.page-logo {
  display: block;
  width: 260px;
  height: auto;
  margin: 0 0 16px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

.page h1 {
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: 0.06em;
  margin: 0 0 calc(var(--m) * 2);
}

.tagline-brand {
  font-size: var(--t-title);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  margin: 0 0 40px;
}

@media (max-width: 640px) {
  .tagline-brand { font-size: 21px; }
}

.page-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}

.page-title-row h1 {
  margin: 0;
}

.breadcrumb {
  margin: 0 0 24px;
}

.breadcrumb a {
  font-family: var(--mono);
  color: var(--muted);
  font-size: var(--t-small);
}

.breadcrumb a:hover {
  color: var(--text);
}

.app-cta {
  margin: 24px 0 8px;
}

/* ページ内で唯一「塗られる」要素。バルセロナ・パビリオンで
   オニキスの壁だけが色を持つのと同じ扱い。ここ以外で --accent を面に使わない。 */
.button {
  display: inline-block;
  background: var(--accent);
  color: #14151a;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: calc(var(--m) * 2) calc(var(--m) * 4);
  border-radius: 0;
}

.button:hover {
  opacity: 0.9;
}

/* ボタンに添える Phosphor アイコン（外部リンクの明示など） */
.button i {
  font-size: 15px;
  vertical-align: -2px;
  margin-left: 8px;
}

.user-menu-item i {
  font-size: 16px;
  line-height: 1;
}

/* 塗らないボタン。--accent の面はページ内で購読ボタン 1 箇所だけに保ちたいが、
   「アプリを開く」のように主導線に次ぐ強さが要る場所で使う */
.button--outline {
  background: none;
  color: var(--text);
  border: 1px solid var(--text);
}

.button--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

.button.disabled {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: default;
  pointer-events: none;
}

.feature-list {
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
}

.feature-list li {
  margin: 8px 0;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.link-list li {
  margin: 8px 0;
}

.link-list a {
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.link-list a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.sns-links {
  display: flex;
  gap: 16px;
}

.sns-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--muted);
}

.sns-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.sns-links svg {
  width: 22px;
  height: 22px;
}

/* Phosphor のアイコンフォント。手描きの簡易 SVG から差し替えた */
.sns-links i {
  font-size: 22px;
  line-height: 1;
}

.about-photo {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 0;
  margin: 0 0 16px;
}

.screenshot {
  display: block;
  max-width: 100%;
  border-radius: 0;
  border: 1px solid var(--border);
}

.screenshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .screenshot-grid { grid-template-columns: 1fr; }
}

.screenshot-grid figure {
  margin: 0;
}

.screenshot-grid figcaption {
  font-family: var(--mono);
  margin-top: 8px;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}

.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}

.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* VIDEO に複数の動画を積むとき(デモ/解説など)。screenshot-grid の
   figcaption と同じラベルの付け方を、グリッドではなく縦積みで使う。 */
.video-figure {
  margin: 0 0 24px;
}

.video-figure:last-child {
  margin-bottom: 0;
}

.video-figure figcaption {
  font-family: var(--mono);
  margin-top: 8px;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}

/* ミースの屋根スラブは壁より外へ張り出す（キャンティレバー）。
   区切り線もコンテンツ幅の外へ抜けさせ、ページ全体に水平の秩序を通す。
   囲む線ではなく、通す線。 */
.block {
  position: relative;
  padding: calc(var(--m) * 6) 0;
}

.block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--border);
}

/* オニキス（--accent）は購読ボタン一箇所だけに使うと決めたので、
   セクション見出しは色を持たない。等幅・大文字・広いトラッキングで、
   図面の見出し記入のように立たせる。 */
.block h2 {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 calc(var(--m) * 3);
}

.placeholder {
  color: var(--muted);
  font-style: italic;
}

/* 開発中のアプリの案内。準備中であることは伝えるが、
   .placeholder の角括弧・イタリックのような「書きかけ」の体裁は使わない。
   訪問者に見せる確定した文章として扱う */
.coming-note {
  color: var(--muted);
}

/* 今すぐ触れるアプリを主役として見せるカード。
   4つを等価に並べると、唯一使える PC GURUVE が開発中の3つに埋もれるため、
   スクリーンショット付きで横幅いっぱいに置いて主従を作る。 */
/* 画像は切り抜かず全体を見せる。楽器そのものが図であって、
   レイアウトの都合で断ち落とすものではない */
@media (max-width: 640px) {

  .app-feature-shot {
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* 開発中のアプリの括り。「使えないもの」ではなく
   「これから届くもの」として見せるための小見出し */
/* 楽器はそれぞれが「図」。地を徹底して静かにし、スクリーンショットだけが
   画面に立つようにする。4つを同じ構成・同じ重さで並べ、使える / 開発中の別は
   見出しで分断せず状態ラベルだけで示す。 */
.instrument {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--m) * 5);
  align-items: center;
  padding: calc(var(--m) * 5) 0;
  border-top: 1px solid var(--border);
  transition: border-color 0.15s ease;
}

.instrument:hover {
  border-top-color: var(--accent);
}

/* 画像は断ち落とさず全体を見せる。楽器そのものが図であって、
   レイアウトの都合で切り取るものではない */
.instrument-shot {
  display: block;
  width: 100%;
  height: auto;
}

.instrument-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--m) * 2);
  margin: 0 0 calc(var(--m) * 2);
}

.instrument-body h3 {
  font-size: var(--t-title);
  font-weight: 300;
  letter-spacing: 0.04em;
  margin: 0 0 var(--m);
}

.instrument-body p {
  margin: 0 0 calc(var(--m) * 2);
  color: var(--muted);
  font-size: var(--t-small);
}

.instrument-cta {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.15s ease;
}

/* ph-arrow-right。文字の矢印(→)は書体によって形がばらつくので、
   アイコンフォントに固定する */
.instrument-cta::after {
  content: "\e06c";
  font-family: "Phosphor-Light";
  font-size: 14px;
  vertical-align: -2px;
  margin-left: 4px;
}

.instrument:hover .instrument-cta {
  color: var(--accent);
}

.instrument-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--m) * 3);
}

/* カードのどこを押しても詳細ページへ飛べるようにする。
   HTML では <a> を並列に置き、透明な層をカード全体へ広げている
   （<a> の入れ子は仕様上できないため）。 */
.instrument-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 「アプリを開く」だけは上の層に出して、別の行き先にする */
.instrument-open {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .instrument {
    grid-template-columns: 1fr;
    gap: calc(var(--m) * 3);
  }
}

.app-icon {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 0;
}

.app-status {
  font-family: var(--mono);
  display: inline-block;
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px var(--m);
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--muted);
}

.app-status--available {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- SUBSCRIPTION ---------- */

.sub-state p {
  margin: 0 0 16px;
}

.sub-state p:last-child {
  margin-bottom: 0;
}

/* お試し表示を出し分けるためだけのラッパー。レイアウト上は無かったことにして、
   上の p / p:last-child の余白ルールを、包む前とまったく同じに効かせる。
   （包んだままだと各ラッパーの最後の p が :last-child になり、余白がずれる）
   hidden での出し分けは、冒頭の [hidden] { display: none !important } が勝つ */
#sub-inactive-trial,
#sub-inactive-normal,
#sub-active-trial,
#sub-active-normal,
#sub-active-trial-cta,
#sub-active-trial-ready {
  display: contents;
}

/* 補足説明。本文より一段弱く見せる */
.sub-note {
  color: var(--muted);
  font-size: var(--t-small);
}

/* 購読の価値を伝える一文。本文より一段強く見せる */
.sub-lead {
  font-size: var(--t-title);
}

/* 購読中であることを一目で分かるようにする */
.sub-badge {
  font-family: var(--mono);
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  border-radius: 0;
}

.sub-error-text {
  color: #ff6b6b;
}

/* ボタンだが主要導線ではないもの（ログアウト・解約）。
   .button と並べた時に主従が分かるよう、下線リンクの見た目にする */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0 16px 0 0;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--t-small);
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--text);
}

/* button 要素にも .button のスタイルを効かせる（既存はリンク前提のため） */
button.button {
  border: none;
  font-family: inherit;
  font-size: var(--t-body);
  cursor: pointer;
}

button.button:disabled {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: default;
}

.footer {
  font-family: var(--mono);
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-size: var(--t-label);
  border-top: 1px solid var(--border);
}

.footer-links {
  margin: 8px 0 0;
}

.footer-links a {
  text-decoration: underline;
}

.footer-links a:hover {
  color: var(--text);
}

/* 制作(easy and nice)とは別の販売事業者(ANYCREATIVE)のクレジット。
   法令表示リンクと同じ間隔・下線で、控えめに置く */
.footer-powered {
  margin: 8px 0 0;
}

.footer-powered a {
  text-decoration: underline;
}

.footer-powered a:hover {
  color: var(--text);
}

/* 本文中のリンク。ナビゲーションと違い、押せることが分かる必要がある */
.text-link {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   特定商取引法に基づく表記
   ------------------------------------------------------------------------- */

/* 項目名と内容の対で読ませる。狭い画面では縦に積み、
   広い画面では項目名を左に固定して一覧性を上げる */
.legal-list {
  margin: 0;
}

.legal-list dt {
  color: var(--accent);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.legal-list dt:first-child {
  padding-top: 0;
  border-top: none;
}

.legal-list dd {
  margin: 8px 0 16px;
}

/* 法令表示は読み飛ばされやすいので、補足は本文と明確に段差をつける */
.legal-note {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--t-small);
}

.legal-date {
  font-family: var(--mono);
  margin-top: 32px;
  color: var(--muted);
  font-size: var(--t-small);
}

@media (min-width: 720px) {
  .legal-list {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 24px;
  }

  .legal-list dt {
    grid-column: 1;
  }

  .legal-list dd {
    grid-column: 2;
    margin: 0 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  /* 1行目だけ罫線を消す。dt / dd が別セルなので個別に指定が要る */
  .legal-list dd:first-of-type {
    padding-top: 0;
    border-top: none;
  }
}


/* ---------------------------------------------------------------------------
   NEWS
   ---------------------------------------------------------------------------
   一覧は news.html、トップ(index.html)には最新の数件だけを抜粋する。
   箱で囲わず、日付・見出し・本文を余白と一本の線だけで区切る(.card と同じ原則)。
   日付とカテゴリは図面の寸法記入のように、等幅・小・淡色で添える。 */

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-item {
  padding: calc(var(--m) * 5) 0;
  border-top: 1px solid var(--border);
}

.news-item:first-child {
  border-top: none;
  padding-top: 0;
}

.news-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 calc(var(--m) * 1.5);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.news-tag {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.news-title {
  margin: 0 0 calc(var(--m) * 1.5);
  font-size: var(--t-title);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.news-body {
  color: var(--muted);
  font-size: var(--t-small);
}

.news-body p {
  margin: 0 0 8px;
}

.news-body p:last-child {
  margin-bottom: 0;
}

.news-body a {
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.news-body a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- トップページの抜粋 ---- */

.hero-news {
  max-width: 640px;
  margin: 64px auto 0;
  text-align: left;
}

.hero-news-head {
  margin: 0 0 calc(var(--m) * 2);
  padding-top: calc(var(--m) * 3);
  border-top: 1px solid var(--text);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero-news-list li {
  border-top: 1px solid var(--border);
}

.hero-news-list li:first-child {
  border-top: none;
}

.hero-news-list a {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 12px 0;
  color: var(--text);
  font-size: var(--t-small);
}

.hero-news-list a:hover {
  color: var(--accent);
}

.hero-news-list time {
  flex: none;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.hero-news-list a:hover time {
  color: var(--accent);
}

.hero-news-more {
  margin: calc(var(--m) * 2) 0 0;
  font-family: var(--mono);
  font-size: var(--t-small);
}

.hero-news-more a {
  color: var(--muted);
}

.hero-news-more a:hover {
  color: var(--text);
}

/* 「未公開」など記事の状態を示す小さなスタンプ。図面の押印のように囲う */
.news-tag--wip {
  border: 1px solid var(--border);
  padding: 1px 6px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted);
}

/* LIVE の 1 公演ぶん。日付・見出し・本文は NEWS と同じクラス(.news-*)で組む。
   複数並べたときだけ、NEWS の記事間と同じ一本線と余白で区切る */
.live-item + .live-item {
  margin-top: calc(var(--m) * 5);
  padding-top: calc(var(--m) * 5);
  border-top: 1px solid var(--border);
}

/* 本文中の外部リンク(music の ONLINE SCHOOL / YOUTUBE / LABEL)。
   普段は本文と同じ色のまま、カーソルを載せたときだけ --accent に変える。
   TRACKS の .link-list a や SNS のアイコンと同じ「触れると色が変わる」動き */
.hover-link {
  transition: color 0.15s ease;
}

.hover-link:hover {
  color: var(--accent);
}

/* LIVE のフライヤー。画像の並べ方は SCREENSHOTS の .screenshot-grid をそのまま使い、
   テキストとの間隔だけここで足す。リンクは拡大表示(別タブ)用 */
.live-item .screenshot-grid {
  margin-top: calc(var(--m) * 3);
}

.live-item .screenshot-grid a {
  display: block;
}