/* ===== Design Tokens ===== */
:root {
  --ink: #0F1724;
  --ink-soft: #2A3548;
  --ink-mute: #6B7485;
  --paper: #FAFAF6;
  --paper-warm: #F3EFE6;
  --line: #E3DFD3;
  --line-soft: #EEEAE0;
  --sea: #0D3B66;
  --sea-deep: #082847;
  --teal: #4A8FA8;
  --teal-mist: #D5E3E8;
  --gold: #B8864B;
  --gold-soft: #D9B583;
  --white: #ffffff;
  --shadow-1: 0 1px 2px rgba(15, 23, 36, 0.04), 0 8px 24px rgba(15, 23, 36, 0.06);
  --shadow-2: 0 2px 8px rgba(15, 23, 36, 0.08), 0 24px 64px rgba(15, 23, 36, 0.10);

  --font-mincho: 'Shippori Mincho B1', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --font-sans: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-serif-en: 'Cormorant Garamond', Georgia, serif;

  --container: 1200px;
  --container-wide: 1320px;
  --rail: clamp(16px, 4vw, 48px);
}

/* ===== Reset / Base ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  letter-spacing: 0.01em;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, a { cursor: pointer; }
h1, h2, h3, h4, h5 { font-family: var(--font-mincho); font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; }
em { font-style: normal; color: var(--gold); font-family: var(--font-mincho); }

/* ===== Utility ===== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-serif-en);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
  font-style: italic;
}
.eyebrow::before {
  content: "— ";
  color: var(--gold-soft);
}
.eyebrow-light { color: var(--gold-soft); }

/* ===== Global Keyframes ===== */
@keyframes slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scroll-line {
  0% { top: -20px; }
  100% { top: 70px; }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}