/* ========== Design Tokens ========== */
:root {
  --color-primary: #1e6fc4;
  --color-primary-hover: #1557a0;
  --color-primary-light: #e8f1fb;
  --color-text: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #8a8a8a;
  --color-bg: #f4f4f1;
  --color-card: #ffffff;
  --color-border: #e8e8e5;
  --color-border-light: #f0f0ec;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.08);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --container-max: 1180px;
  --header-height: 80px;

  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ========== Reset & Base ========== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
}

a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
img { max-width: 100%; display: block; }

/* ========== Header ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border-light);
}

.header-inner {
  max-width: var(--container-max);
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.logo-main {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.logo-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ========== Navigation ========== */
.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.nav-item {
  position: relative;
  flex-shrink: 0;
}

.nav-link {
  display: block;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.nav-link.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -2px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.nav-link.is-active:hover { background-color: transparent; }

.lang-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lang-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.lang-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ========== Hero (shared base) ========== */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #6fb3e6;
}

/* Sub-page hero: ~60% of home hero height */
.hero--sub { height: 320px; }

.hero-image {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/hero_labo_1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Left-side gradient for text legibility */
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.28) 30%,
      rgba(0, 0, 0, 0.10) 55%,
      rgba(0, 0, 0, 0.00) 75%);
  pointer-events: none;
}

/* Placeholder when no hero_image is specified */
.hero-image--placeholder {
  background:
    linear-gradient(135deg, #cfe2f3 0%, #b8d4ec 50%, #a4c8e3 100%);
}

.hero-image--placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.45) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.7;
}

.hero-image--placeholder::after {
  content: 'HERO IMAGE PLACEHOLDER';
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: 0.1em;
}

/* Additional dark overlay for sub-pages */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.24) 30%,
      rgba(0, 0, 0, 0.08) 55%,
      rgba(0, 0, 0, 0.00) 75%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sub-page hero typography */
.hero-title {
  font-size: 44px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-shadow:
    0 0 4px  rgba(0, 0, 0, 0.95),
    0 0 12px rgba(0, 0, 0, 0.80),
    0 0 28px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(0, 0, 0, 0.35);
}

.hero-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow:
    0 0 3px  rgba(0, 0, 0, 1),
    0 0 9px  rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.60),
    0 0 32px rgba(0, 0, 0, 0.35);
}

.hero-tagline {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.06em;
  max-width: 640px;
  text-shadow:
    0px 0px 3px rgba(0, 0, 0, 1),
    0px 0px 6px rgba(0, 0, 0, 1),
    0px 0px 9px rgba(0, 0, 0, 1),
    0px 0px 12px rgba(0, 0, 0, 1),
    0px 0px 15px rgba(0, 0, 0, 1),
    0px 0px 18px rgba(0, 0, 0, 1);
}

/* Spacing between consecutive hero text elements */
.hero-content > * + .hero-title    { margin-top: 14px; }
.hero-content > * + .hero-subtitle { margin-top: 14px; }
.hero-content > * + .hero-tagline  { margin-top: 18px; }

/* ========== Section / Article ========== */
.section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px;
}

.section + .section { padding-top: 0; }

.article-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 56px 64px;
}

/* ========== Prose (rendered markdown) ========== */
.prose {
  color: var(--color-text);
  font-size: 15.5px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }

.prose > p:first-of-type {
  font-size: 16.5px;
  color: var(--color-text);
}

.prose h1 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 56px;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.prose h2 {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 48px;
  margin-bottom: 20px;
  padding: 4px 0 4px 16px;
  letter-spacing: 0.05em;
  border-left: 4px solid var(--color-primary);
}

.prose h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 32px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.prose h3::before {
  content: '\25C6';
  margin-right: 8px;
  font-size: 12px;
  vertical-align: middle;
  opacity: 0.7;
}

.prose h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 24px;
  margin-bottom: 8px;
}

.prose p { margin-top: 0; margin-bottom: 16px; }

.prose a {
  color: var(--color-primary);
  border-bottom: 1px solid currentColor;
  transition: color 0.15s ease;
}

.prose a:hover { color: var(--color-primary-hover); }
.prose strong  { font-weight: 700; color: var(--color-text); }
.prose em      { font-style: italic; }

.prose ul, .prose ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.prose ul li {
  list-style: disc;
  margin-bottom: 6px;
  padding-left: 4px;
}

.prose ul li::marker { color: var(--color-primary); }

.prose ol li {
  list-style: decimal;
  margin-bottom: 6px;
  padding-left: 4px;
}

.prose ol li::marker { color: var(--color-primary); font-weight: 600; }

.prose li > ul, .prose li > ol { margin-top: 6px; margin-bottom: 6px; }

.prose blockquote {
  margin: 20px 0;
  padding: 12px 20px;
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-secondary);
  font-size: 14.5px;
}

.prose blockquote p { margin-bottom: 8px; }
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 2px 6px;
  background-color: var(--color-border-light);
  border-radius: 4px;
  color: #c7254e;
}

.prose pre {
  margin: 16px 0;
  padding: 16px 20px;
  background-color: #1e293b;
  color: #e2e8f0;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
}

.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.prose thead { background-color: #fafaf7; }

.prose th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border);
  letter-spacing: 0.04em;
}

.prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.prose tbody tr:hover { background-color: #fafaf7; }

.prose img {
  margin: 20px auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
}

.prose hr {
  margin: 40px 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

/* dl/dt/dd for member page */
.prose dl {
  margin: 0 0 16px;
}

.prose dt {
  font-weight: 600;
  color: var(--color-text);
  margin-top: 16px;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: 4px;
}

.prose dd {
  margin-left: 20px;
  margin-top: 4px;
  color: var(--color-text-secondary);
}

/* ========== Footer ========== */
.site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--color-border-light);
  background-color: var(--color-card);
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 32px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* ========== Responsive ========== */
@media (max-width: 1180px) {
  .header-inner { gap: 16px; }
  .main-nav     { gap: 12px; }
  .nav-link     { padding: 8px 10px; font-size: 14px; }
  .lang-link    { padding: 8px 10px; font-size: 13px; }
}

@media (max-width: 1024px) {
  .header-inner { padding: 0 20px; }
  .logo-main    { font-size: 17px; }
  .logo-sub     { font-size: 11px; }
  .nav-link     { padding: 6px 8px; font-size: 13px; }

  .article-card { padding: 40px 36px; }
}

@media (max-width: 880px) {
  .main-nav  { gap: 8px; }
  .nav-list  { display: none; }

  .hero--sub     { height: 240px; }
  .hero-content  { padding: 0 32px; }
  .hero-title    { font-size: 32px; }
  .hero-subtitle { font-size: 13px; }
  .hero-tagline  { font-size: 14px; }

  .article-card { padding: 28px 24px; }
  .prose        { font-size: 15px; }
  .prose h2     { font-size: 20px; }
  .prose h3     { font-size: 16px; }
}

@media (max-width: 640px) {
  .logo-main { font-size: 16px; }
  .logo-sub  { font-size: 10px; }
  .logo-icon { width: 36px; height: 36px; }

  .hero--sub     { height: 200px; }
  .hero-title    { font-size: 26px; }
  .hero-subtitle { font-size: 12px; }
  .hero-tagline  { font-size: 13px; }
}