:root {
  /* Core palette */
  --sumi: #0a0a0a;
  --night: #111111;
  --vermillon: #C23B22;
  --ember: #8B1A1A;
  --washi: #F5F0E8;
  --mist: #C8C2B6;
  --ash: #3a3a3a;

  /* Text levels on dark background — LEGIBLE, no opacity hacks */
  --t1: #F5F0E8;    /* primary — headings */
  --t2: #D4CFC5;    /* body text — very readable */
  --t3: #A8A299;    /* secondary text — still readable */
  --t4: #7A756C;    /* muted — labels, small text */
  --t5: #524E47;    /* dim — decorative, not for reading */
  
  /* Red variants */
  --r1: #C23B22;    /* full vermillon */
  --r2: #D44A33;   /* bright red */
  --r3: #A33220;   /* muted red */
  --r4: #7A2518;   /* dim red */

  /* Gradients */
  --gradient-forge: linear-gradient(135deg, var(--sumi) 0%, var(--night) 40%, rgba(139,26,26,0.3) 100%);
  --gradient-blood: linear-gradient(180deg, transparent 0%, rgba(194, 59, 34, 0.08) 100%);
  --gradient-mist: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.9) 100%);
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--sumi);
  color: var(--t1);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Noto Serif JP', serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--sumi); }
::-webkit-scrollbar-thumb { background: var(--r3); border-radius: 2px; }

/* Navigation */
.nav-glass {
  backdrop-filter: blur(24px) saturate(180%);
  background: rgba(10, 10, 10, 0.6);
  border-bottom: 1px solid rgba(82, 78, 71, 0.3);
  transition: all 0.4s ease;
}
.nav-glass.scrolled {
  background: rgba(10, 10, 10, 0.9);
  border-bottom-color: rgba(194, 59, 34, 0.3);
}
.nav-link {
  color: var(--t3);
  transition: color 0.3s ease;
  position: relative;
  text-decoration: none;
}
.nav-link:hover { color: var(--t1); }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--r1);
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Logo */
@keyframes logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(194, 59, 34, 0.2)); }
  50% { filter: drop-shadow(0 0 30px rgba(194, 59, 34, 0.5)); }
}
.logo-breathe { animation: logo-breathe 4s ease-in-out infinite; }

/* Hero */
.hero-gradient {
  background: 
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(194, 59, 34, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(139, 26, 26, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--sumi) 0%, #0d0d0d 100%);
}

/* Petal spin */
@keyframes petal-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.petal-ring { animation: petal-spin 60s linear infinite; }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Discipline cards */
.discipline-card {
  background: rgba(245, 240, 232, 0.02);
  border: 1px solid rgba(245, 240, 232, 0.08);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.discipline-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--r1), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.discipline-card:hover::before { opacity: 1; }
.discipline-card:hover {
  border-color: rgba(194, 59, 34, 0.4);
  transform: translateY(-6px);
  box-shadow: 0 24px 80px rgba(194, 59, 34, 0.1);
}

/* CTA buttons */
.cta-primary {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background: var(--r1);
  color: var(--t1);
  transition: all 0.4s ease;
  text-decoration: none;
}
.cta-primary:hover { box-shadow: 0 8px 32px rgba(194, 59, 34, 0.5); }
.cta-ghost {
  display: inline-block;
  border: 1px solid var(--t5);
  color: var(--t3);
  transition: all 0.4s ease;
  text-decoration: none;
}
.cta-ghost:hover {
  border-color: var(--r3);
  color: var(--t1);
  box-shadow: 0 0 20px rgba(194, 59, 34, 0.1);
}

/* Horizontal rule */
.hr-brush { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--r1), transparent); opacity: 0.3; }

/* Quote block */
.quote-block {
  border-left: 2px solid var(--r1);
  padding-left: 1.5rem;
}

/* Section watermark */
.section-watermark {
  font-family: 'Noto Serif JP', serif;
  font-size: 10rem;
  color: var(--t5);
  opacity: 0.06;
  position: absolute;
  right: -2rem; top: -1rem;
  pointer-events: none;
  user-select: none;
}

/* Form */
.form-input {
  width: 100%;
  background: rgba(245, 240, 232, 0.03);
  border: 1px solid rgba(245, 240, 232, 0.1);
  padding: 0.75rem 1rem;
  color: var(--t1);
  font-size: 0.875rem;
  border-radius: 2px;
  transition: border-color 0.3s ease;
  outline: none;
  font-family: 'Inter', sans-serif;
}
.form-input::placeholder { color: var(--t4); }
.form-input:focus { border-color: var(--r3); }

/* Tags */
.tag {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(245, 240, 232, 0.1);
  color: var(--t3);
  font-size: 0.8125rem;
  border-radius: 1px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}
.tag:hover { border-color: var(--r3); color: var(--t1); }

/* Footer */
.footer-line { height: 1px; background: linear-gradient(90deg, transparent 0%, var(--r1) 20%, var(--r1) 80%, transparent 100%); opacity: 0.2; }

/* Fix: Noto Serif JP misrenders Latin macrons (ō ū Ō Ū).
   Force Inter font on elements that contain macron letters
   so the diacritics align correctly with their base characters. */
.macro-fix {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

@media (max-width: 768px) {
  .section-watermark { font-size: 5rem; }
}