html, body { margin: 0; padding: 0; background: #0a0b0d; }
  body { -webkit-font-smoothing: antialiased; }
  a { color: rgba(255,255,255,0.92); text-decoration: none; }
  a:hover { color: #e8b04b; }
  ::selection { background: rgba(232,176,75,0.25); }

/* 元の style-hover 相当。対象要素は同じプロパティをインライン style で持つため、
   優先度で勝つために !important が必要。 */
.home-nav-link:hover { color: rgba(255,255,255,0.92) !important; }
.guide-link:hover { border-color: rgba(232,176,75,0.5) !important; color: #e8b04b !important; }

/* 元デザインは幅の広いプレビュー前提で、VUUMi と EQUARiUM の説明文に
   white-space: nowrap が入っている。そのままだと狭い画面でページ全体が
   横スクロールするため、折り返せる幅を下回ったときだけ解除する。
   インライン style に勝つ必要があるので !important。
   デスクトップ表示は一切変わらない。 */
@media (max-width: 720px) {
  .section-lede { white-space: normal !important; }
}

/* 320px 級の幅ではヘッダーのワードマークとナビが 1 行に収まらない。
   その幅でだけ折り返しと間隔の詰めを許可する。 */
@media (max-width: 380px) {
  .site-header { flex-wrap: wrap !important; gap: 10px 16px !important; }
  .site-nav { gap: 16px !important; }
}