:root {
  --black: #ffffff;
  --black2: #f8f8f8;
  --black3: #f0f0f0;
  --white: #1a1a1a;
  --white2: #555555;
  --grey: #888888;
  --muted: #888888;
  --accent: #a07840;
  --gold: #c8a46e;
  --gold2: #a07840;
  --red: #c0392b;
  --border: #e8e8e8;
}

html {
  background: var(--black);
}

body {
  background:
    radial-gradient(circle at top left, rgba(200, 164, 110, 0.06), transparent 28%),
    radial-gradient(circle at bottom right, rgba(160, 120, 64, 0.04), transparent 32%),
    var(--black) !important;
  color: var(--white) !important;
}

body::before {
  opacity: 0.04 !important;
}

nav::before,
header,
.mobile-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: var(--border) !important;
}

.nav-logo,
.logo,
.footer-logo,
.page-title,
.article-title,
.hub-ja,
.card-ja,
.cat-title,
.mission-heading,
.mission-quote blockquote,
.about-strip-text h2,
.quote-break blockquote,
.cta-title,
h1,
h2,
h3 {
  color: var(--white) !important;
}

.nav-links a,
nav a,
.footer-about,
.footer-copy,
.footer-tagline,
.page-desc,
.hero-sub,
.mission-text,
.lead-text,
.body-text,
.article-date,
.article-meta,
.meta,
.notice,
.hub-desc,
.card-en,
.card-arrow,
.article-body p,
.article-body li,
.article-lead,
.lead,
.section,
.related-item-title,
.related-link,
.back-link,
.breadcrumb,
.breadcrumb a,
.scroll-line,
.hero-vertical,
.quote-break cite,
.mission-quote cite {
  color: var(--white2) !important;
}

.nav-links a:hover,
nav a:hover,
nav a.active,
.footer-about:hover,
.breadcrumb a:hover,
.back-link:hover,
.mobile-menu a:hover {
  color: var(--accent) !important;
}

.hero-bg {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(200, 164, 110, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(160, 120, 64, 0.05) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.92) 100%) !important;
}

.hero-kanji,
.header-kanji,
.hero-count,
.hero-vertical,
.kanji-deco,
.cat-num,
.article-num {
  color: rgba(160, 120, 64, 0.10) !important;
}

.categories,
.articles,
.quote-break {
  background: rgba(255, 255, 255, 0.9) !important;
}

.mission-quote,
.about-strip,
.cta-box,
.point-box,
.section,
.notice,
.hub-card,
.article-card,
.cat-card,
.article-item,
.related-item {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.article-card:hover,
.hub-card:hover,
.cat-card:hover,
.article-item:hover,
.related-item:hover {
  background: rgba(240, 240, 240, 0.95) !important;
  border-color: rgba(160, 120, 64, 0.5) !important;
}

.article-cat,
.hub-count,
.cats a,
.btn,
.cta-btn,
.related-link,
.cat-tag {
  border-color: rgba(160, 120, 64, 0.4) !important;
  color: var(--accent) !important;
}

.btn:hover,
.cta-btn:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
}

.hero-cta,
.articles-more {
  color: var(--accent) !important;
  border-color: rgba(160, 120, 64, 0.3) !important;
}

.hero-cta:hover,
.articles-more:hover {
  border-color: var(--accent) !important;
}

.scroll-line::before,
.section-label::after,
.mission::before,
.categories::before,
.page-header::after,
.divider {
  background: linear-gradient(to right, transparent, rgba(160, 120, 64, 0.25), transparent) !important;
}

.hamburger span {
  background: var(--white) !important;
}

.mobile-menu a,
.mobile-menu-logo {
  color: var(--white) !important;
}

@media (max-width: 768px) {
  nav::before,
  header {
    background: rgba(255, 255, 255, 0.98) !important;
  }
}