:root {
  --brown-900: #1a120b;
  --brown-800: #2c1e12;
  --brown-700: #3a2a1a;
  --brown-600: #5a4a3a;
  --cream: #f5f0e8;
  --cream-dark: #e8ddd0;
  --gold: #c49a6c;
  --gold-dark: #a07848;
  --text: #2c1e12;
  --text-light: #6a5a4a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Hiragino Mincho ProN', 'Noto Serif JP', 'Yu Mincho', serif; color: var(--text); background: var(--cream); line-height: 1.8; }
a:hover { text-decoration: underline; }
header { background: var(--brown-900); color: var(--cream); padding: 40px 20px; text-align: center; }
header h1 { font-size: 2rem; letter-spacing: .3em; margin-bottom: 8px; }
header p { font-size: .9rem; color: var(--gold); letter-spacing: .15em; }
nav { background: var(--brown-800); padding: 12px 20px; text-align: center; position: sticky; top: 0; z-index: 100; }
nav a { color: var(--cream-dark); margin: 0 16px; font-size: .85rem; letter-spacing: .1em; }
nav a:hover { color: var(--gold); text-decoration: none; }
.section { max-width: 800px; margin: 0 auto; padding: 48px 20px; }
.section h2 { font-size: 1.3rem; color: var(--brown-800); margin-bottom: 24px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); letter-spacing: .15em; }
.section h3 { font-size: 1rem; color: var(--gold-dark); margin: 28px 0 12px; }
.section p, .section li { font-size: .88rem; color: var(--text-light); margin-bottom: 8px; }
.section ul { padding-left: 1.5em; margin-bottom: 16px; }
.lang-switch { text-align: center; padding: 12px; font-size: .8rem; background: var(--cream-dark); }
.lang-switch a { margin: 0 8px; }
footer { background: var(--brown-900); color: var(--brown-600); padding: 32px 20px; text-align: center; font-size: .75rem; }
footer a { color: var(--gold); }
@media (max-width: 640px) {
  header h1 { font-size: 1.4rem; }
  nav a { margin: 0 8px; font-size: .75rem; }
}