@import url('https://fonts.googleapis.com/css2?family=Castoro+Titling&family=Noto+Serif+JP:wght@400;600;700&display=swap');
/* Akashic Records — Shared Design Tokens & Layout */
:root {
  --bg: #f5f5f3;
  --surface: #ffffff;
  --surface-muted: #f0f0ed;
  --text: #111111;
  --text-muted: #5c5c5c;
  --line: #d6d6d1;
  --accent: #111111;
  --accent-soft: #ececeb;
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 3px;
  --radius-xl: 3px;
  --shadow-soft: 0 8px 24px rgba(31, 35, 40, 0.06);
  --shadow-card: 0 4px 12px rgba(31, 35, 40, 0.05);
  --page-max: 1200px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans: "Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--page-max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

/* Header */
.site-header { padding: var(--space-24) 0; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--page-max); margin: 0 auto; padding: 0 20px;
}
@media (min-width: 768px) { .header-inner { padding: 0 40px; } }
.logo { font-family: 'Castoro Titling', serif; font-size: 22px; font-weight: 400; color: var(--text); text-decoration: none; }
.logo:hover { text-decoration: none; }
.header-nav { display: flex; gap: var(--space-16); align-items: center; }
.header-nav a { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast); font-family: var(--font-sans); }
.header-nav a:hover { color: var(--text); text-decoration: none; }
.header-nav a.active { color: var(--text); font-weight: 600; }
.header-cta {
  display: inline-block; padding: 8px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; background: var(--accent); color: #fff;
  text-decoration: none; transition: background var(--dur-fast);
}
.header-cta:hover { background: #2a2a2a; text-decoration: none; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-48) 0 var(--space-32); margin-top: var(--space-64); }
.footer-inner {
  display: flex; flex-direction: column; gap: var(--space-24); align-items: center; text-align: center;
  max-width: var(--page-max); margin: 0 auto; padding: 0 20px;
}
@media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; padding: 0 40px; } }
.footer-brand { font-size: 14px; color: var(--text-muted); font-family: var(--font-sans); }
.footer-links { display: flex; gap: var(--space-24); flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: 13px; color: var(--text-muted); text-decoration: none; font-family: var(--font-sans); }
.footer-links a:hover { color: var(--text); }

/* Buttons */
.btn {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: all var(--dur-fast); border: none; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #2a2a2a; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--surface-muted); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-32);
  box-shadow: var(--shadow-card); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.card:hover { border-color: var(--accent); }
.card-flat { box-shadow: none; }
.card-flat:hover { box-shadow: var(--shadow-card); }

/* Badges */
.badge {
  display: inline-block; font-size: 12px; font-weight: 500;
  padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--text-muted);
}

/* Loading */
.loading { text-align: center; padding: var(--space-64) 0; color: var(--text-muted); font-size: 15px; font-family: var(--font-sans); }

/* Empty state */
.empty-state { text-align: center; padding: var(--space-64) var(--space-32); }
.empty-state h2 { font-size: 20px; font-weight: 700; margin-bottom: var(--space-12); }
.empty-state p { font-size: 15px; color: var(--text-muted); margin-bottom: var(--space-24); font-family: var(--font-sans); }

/* Page title */
.page-title { padding: var(--space-48) 0 var(--space-32); }
.page-title h1 { font-size: 32px; font-weight: 800; margin-bottom: var(--space-8); }
.page-title p { font-size: 16px; color: var(--text-muted); font-family: var(--font-sans); }

/* Skeleton (loading placeholder) */
.skeleton {
  background: linear-gradient(90deg, var(--surface-muted) 25%, #e8e8e5 50%, var(--surface-muted) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }