/* =========================================================
   barisaku-jazz-lab / home.css
   ホーム（index.html）専用「Morning Practice Room」レイヤー。
   ----------------------------------------------------------
   戦略: `.theme-after-hours.home` のスコープ内でだけ
   After Hours のデザイントークン（--ink, --paper, --brass…）を
   反転定義する。これにより index.html 内の既存スタイル
   （inline <style> や after-hours.css の規則）が
   class 名を一切変えずに「紙基調」へ自動的に切替わる。
   ----------------------------------------------------------
   方針:
   ・モバイル優先（mobile-first）
   ・スポットライト/グレイン/セピアを完全停止 → 胡散臭さの主因排除
   ・ペーパークリーム × 真鍮 × 墨 の三色で素朴に上品
   ・「ドキュメントサイト的安心感」を最優先
   このファイルは body.theme-after-hours.home 配下でだけ効く。
   他ページ（記事/奏者/カテゴリ）には影響しない。
   ========================================================= */

/* ============================================================
   1) Design tokens：意味は変えず値だけ反転（dark → light）
   ============================================================ */
.theme-after-hours {
  /* "ink" 系は「暗色＝背景」だった → 紙の暖かい明るさへ */
  --ink:        #f1e7d1;
  --ink-elev:   #ebdec0;
  --ink-card:   #fcf7e9;
  --ink-veil:   rgba(241, 231, 209, 0.85);

  /* "paper" 系は「明色＝文字」だった → 墨色（前景）へ */
  --paper:      #1d1610;
  --paper-soft: #4a3f2e;
  --paper-mute: #7a6a51;
  --paper-faint:#a08756;

  /* 真鍮：明るい紙の上で読めるよう少し深い金へ */
  --brass:        #9c7d35;
  --brass-strong: #7a5e23;
  --brass-deep:   #c8a665;
  --red-hot:      #b13c28;
  --red-deep:     #842617;

  /* 罫線：紙の上のうっすらしたタンに */
  --line:        #d6c594;
  --line-strong: #b6a473;
}

/* ============================================================
   2) Body 全体：紙基調へ。胡散臭さの主因（スポットライト/グレイン）撤去
   ============================================================ */
body.theme-after-hours {
  background: var(--ink);
  color: var(--paper-soft);
}
/* スポットライト・グレインを完全停止（誠実感の妨げ） */
body.theme-after-hours::before,
body.theme-after-hours::after {
  display: none !important;
}

/* ============================================================
   3) ヘッダー：紙の上に半透明で乗る
   ============================================================ */
.theme-after-hours .site-header {
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(241, 231, 209, 0.88) 100%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.theme-after-hours .site-header__bar::after {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--brass) 30%,
    var(--brass-strong) 50%,
    var(--brass) 70%,
    transparent 100%);
  opacity: 0.45;
}

/* ============================================================
   4) Hero：セピア除去、影を白基調に
   ============================================================ */
.theme-after-hours.home .hero-v4__image {
  background: var(--ink-card);
  border-color: var(--line);
  box-shadow:
    0 22px 56px -22px rgba(29, 22, 16, 0.20),
    0 0 0 1px rgba(156, 125, 53, 0.08) inset;
}
.theme-after-hours.home .hero-v4__image::after {
  /* 既存の暗いビネットを撤去 */
  background: none;
}
.theme-after-hours.home .hero-v4__image-img {
  /* セピア・暗化を全停止（実物が見える方が信用できる） */
  filter: none;
}
.theme-after-hours.home .hero-v4__image--placeholder {
  background:
    radial-gradient(circle at 50% 55%,
      var(--brass-deep) 0%,
      rgba(200, 166, 101, 0.28) 25%,
      transparent 50%),
    var(--ink-card);
}
.theme-after-hours.home .hero-v4__image--placeholder::before {
  border-color: var(--brass);
  opacity: 0.32;
}
.theme-after-hours.home .hero-v4__image--placeholder::after {
  color: var(--paper-mute);
}

/* CTA：墨で決める／ホバーで真鍮へ */
.theme-after-hours.home .hero-v4__cta {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 12px 30px -10px rgba(29, 22, 16, 0.30);
}
.theme-after-hours.home .hero-v4__cta:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: #fffcf2;
}

/* Hero 文字下線のハイライト：紙バックでも視認できる金茶へ */
.theme-after-hours.home .hero-v4__lede strong {
  background: linear-gradient(transparent 64%, rgba(156, 125, 53, 0.22) 64%);
}

/* ============================================================
   5) Hero メタ（2010 / 17 / 10）
   ============================================================ */
.theme-after-hours.home .home-hero-meta__num {
  color: var(--brass-strong);
}
.theme-after-hours.home .home-hero-meta__sep {
  background: var(--line-strong);
}

/* ============================================================
   6) 編集者ノート：紙のカードとして
   ============================================================ */
.theme-after-hours.home .ah-editor {
  background: var(--ink-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
}
.theme-after-hours.home .ah-editor__body em {
  color: var(--brass-strong);
  font-style: normal;
}

/* ============================================================
   7) ベネフィット3カード（.home-bench）— 既存スタイル微補正
   ・hover の擬似背景は紙バックでは派手すぎるので落とす
   ・stat 行を紙的なディテールに
   ============================================================ */
.theme-after-hours.home .home-bench {
  border-top-color: var(--line);
}
.theme-after-hours.home .home-bench__grid {
  border-top-color: var(--line-strong);
  border-bottom-color: var(--line-strong);
  background: var(--ink-card);
}
.theme-after-hours.home .home-bench__card {
  border-right-color: var(--line);
}
.theme-after-hours.home .home-bench__card:hover {
  background: linear-gradient(180deg,
    rgba(156, 125, 53, 0.06) 0%,
    transparent 100%);
}
.theme-after-hours.home .home-bench__stat {
  border-top-color: var(--line);
  color: var(--paper-mute);
}
.theme-after-hours.home .home-bench__lede strong {
  background: linear-gradient(transparent 64%, rgba(156, 125, 53, 0.22) 64%);
}
.theme-after-hours.home .home-bench__cta {
  color: var(--brass-strong);
  border-bottom-color: var(--brass);
}
.theme-after-hours.home .home-bench__cta:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}
@media (max-width: 900px) {
  .theme-after-hours.home .home-bench__card {
    border-bottom-color: var(--line);
  }
}

/* ============================================================
   8) 透明性ブロック（.home-honest）— 紙基調へ
   ============================================================ */
.theme-after-hours.home .home-honest__inner {
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg,
    rgba(252, 247, 233, 0.85) 0%,
    rgba(241, 231, 209, 0.4) 100%);
}
.theme-after-hours.home .home-honest__inner::before,
.theme-after-hours.home .home-honest__inner::after {
  border-color: var(--brass);
  opacity: 0.7;
}
.theme-after-hours.home .home-honest__col-label {
  border-bottom-color: var(--line);
}
.theme-after-hours.home .home-honest__col--no .home-honest__col-label {
  color: var(--paper-mute);
}
.theme-after-hours.home .home-honest__list li {
  color: var(--paper-soft);
}
.theme-after-hours.home .home-honest__col--no li::before {
  color: var(--paper-mute);
}
.theme-after-hours.home .home-honest__divider {
  background: var(--line);
}
.theme-after-hours.home .home-honest__note {
  border-top-color: var(--line);
  color: var(--paper-mute);
}
.theme-after-hours.home .home-honest__note strong {
  color: var(--paper) !important; /* inline style 上書き */
}

/* ============================================================
   9) マウスピース比較（.home-compare）— 紙基調へ
   ============================================================ */
.theme-after-hours.home .home-compare__lede strong {
  background: linear-gradient(transparent 64%, rgba(156, 125, 53, 0.22) 64%);
}
.theme-after-hours.home .home-compare__scroller {
  border-top-color: var(--line-strong);
  border-bottom-color: var(--line-strong);
  background: var(--ink-card);
  scrollbar-color: var(--brass) transparent;
}
.theme-after-hours.home .home-compare__scroller::-webkit-scrollbar-thumb {
  background: var(--brass);
}
.theme-after-hours.home .home-compare__table thead th {
  background: var(--ink-elev);
  border-bottom-color: var(--line-strong);
}
.theme-after-hours.home .home-compare__table thead th:first-child {
  color: var(--paper-mute);
  background: var(--ink-elev);
}
.theme-after-hours.home .home-compare__table thead th .home-compare__hl {
  color: var(--brass-strong);
}
.theme-after-hours.home .home-compare__table tbody th {
  background: var(--ink-elev);
  color: var(--brass-strong);
  border-bottom-color: var(--line);
}
.theme-after-hours.home .home-compare__table tbody td {
  border-bottom-color: var(--line);
  color: var(--paper-soft);
}
.theme-after-hours.home .home-compare__pick {
  color: var(--brass-strong) !important;
}
.theme-after-hours.home .home-compare__pick::after {
  background: var(--brass);
  color: var(--ink);
}
.theme-after-hours.home .home-compare__hint {
  color: var(--paper-mute);
}
.theme-after-hours.home .home-compare__more {
  color: var(--brass-strong);
  border-bottom-color: var(--brass);
}
.theme-after-hours.home .home-compare__more:hover {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

/* ============================================================
   10) INDEX セクション：紙基調へ
   ============================================================ */
.theme-after-hours.home .site-index__header::after {
  background: var(--line);
}
.theme-after-hours.home .site-index__list .idx-row__link:hover {
  background: linear-gradient(90deg,
    rgba(156, 125, 53, 0.06) 0%,
    transparent 70%);
}

/* ============================================================
   11) LATEST セクション：録音ドットを再調整
   ============================================================ */
.theme-after-hours.home .latest__header::before {
  background: var(--red-hot);
  box-shadow: 0 0 12px rgba(177, 60, 40, 0.5);
}
.theme-after-hours.home .latest__item::before {
  color: var(--brass);
}
.theme-after-hours.home .latest__tag {
  color: var(--brass);
  border-color: var(--brass);
}

/* ============================================================
   12) アーカイブ：カードを紙へ
   ============================================================ */
.theme-after-hours.home .card {
  background: var(--ink-card);
  border-color: var(--line);
}
.theme-after-hours.home .card:hover {
  border-color: var(--brass);
  box-shadow: 0 18px 32px -16px rgba(29, 22, 16, 0.18);
}
.theme-after-hours.home .card__tag {
  color: var(--brass-strong);
}
.theme-after-hours.home .card__footer {
  color: var(--brass-strong);
}
.theme-after-hours.home .card:hover .card__footer {
  color: var(--paper);
}
.theme-after-hours.home .section-heading__note {
  color: var(--paper-mute);
}
.theme-after-hours.home .ah-archive-filters label {
  background: var(--ink-card);
  border-color: var(--line);
  color: var(--paper-soft);
}
.theme-after-hours.home .ah-archive-filters label:hover {
  border-color: var(--brass);
  color: var(--paper);
}
/* チェックされている input の同名 label を強調 */
.theme-after-hours.home #ah-filter-all:checked     ~ .ah-archive-filters label[for="ah-filter-all"],
.theme-after-hours.home #ah-filter-players:checked ~ .ah-archive-filters label[for="ah-filter-players"],
.theme-after-hours.home #ah-filter-gear:checked    ~ .ah-archive-filters label[for="ah-filter-gear"],
.theme-after-hours.home #ah-filter-practice:checked ~ .ah-archive-filters label[for="ah-filter-practice"],
.theme-after-hours.home #ah-filter-albums:checked  ~ .ah-archive-filters label[for="ah-filter-albums"] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ============================================================
   13) フッター
   ============================================================ */
.theme-after-hours.home .site-footer {
  background: var(--ink-elev);
  border-top: 1px solid var(--line);
  color: var(--paper-soft);
}
.theme-after-hours.home .site-footer__list li {
  border-bottom-color: var(--line);
}

/* ============================================================
   14) モバイル微調整（mobile-first 補強）
   ============================================================ */
@media (max-width: 600px) {
  /* Hero メタを段組み（横スクロール回避） */
  .theme-after-hours.home .home-hero-meta {
    gap: 10px 14px;
    margin-top: 18px;
    font-size: 0.74rem;
  }
  .theme-after-hours.home .home-hero-meta__num { font-size: 0.82rem; }
  /* 比較表 thead を黒帯（読みやすさ＞統一感） */
  .theme-after-hours.home .home-compare__table thead th {
    background: var(--paper);
    color: var(--ink);
  }
  .theme-after-hours.home .home-compare__table thead th:first-child {
    color: var(--ink-elev);
    background: var(--paper);
  }
  .theme-after-hours.home .home-compare__table thead th .home-compare__hl {
    color: var(--brass-deep);
  }
}

/* ============================================================
   15) Reduced motion 配慮
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .theme-after-hours.home .home-bench__card,
  .theme-after-hours.home .card,
  .theme-after-hours.home .home-bench__cta::after,
  .theme-after-hours.home .home-compare__more::after,
  .theme-after-hours.home .hero-v4__cta::after {
    transition: none !important;
  }
}