/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Variables ── */
:root {
  --bg: #ede9e2;
  --text: #0f0e0c;
  --text-muted: #888;
  --text-light: #bbb;
  --accent: #c8a96e;
  --border: rgba(15,14,12,0.12);
  --font-ja: 'Shippori Mincho', serif;
  --font-en: 'Space Mono', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-en);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Language switching ── */
.en-text { display: none; }
html.en-mode .ja-text { display: none !important; }
html.en-mode .en-text { display: inline !important; }
.ja-block { display: block; }
.en-block { display: none; }
html.en-mode .ja-block { display: none !important; }
html.en-mode .en-block { display: block !important; }

/* ── Nav ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 48px;
}

.nav-logo {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.lang-toggle {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--text-light);
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.lang-toggle:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* teaser mode: nav-links 非表示 */
body.teaser .nav-links { display: none; }

/* ── Footer ── */
footer {
  padding: 20px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.teaser footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
}

.footer-copy {
  font-size: 9px;
  color: var(--text-light);
  letter-spacing: 0.1em;
}

.footer-link {
  font-size: 9px;
  color: var(--text-light);
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover { color: var(--text-muted); }

/* ── Section base ── */
.page-section {
  min-height: 100vh;
  padding: 120px 48px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-inner {
  width: 100%;
  max-width: 640px;
}

/* ── Labels ── */
.label {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: block;
}

/* ── Rule ── */
.rule {
  width: 100%;
  height: 1px;
  background: var(--text);
  opacity: 0.12;
  margin: 32px 0;
}

/* ── Page transitions ── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
body { animation: pageIn 0.4s ease forwards; }
body.page-exit { animation: pageOut 0.26s ease forwards; pointer-events: none; }

/* ── Responsive ── */
@media (max-width: 640px) {
  nav { padding: 20px 24px; }
  .nav-links { display: none; }
  footer { padding: 16px 24px; }
  .page-section { padding: 100px 24px 80px; }
}