/* ===== Theme presets (CSS custom properties) ===== */
:root,
[data-theme="cream-orange"] {
  --bg: #F5F1E7;
  --text: #1F1D18;
  --accent: #E8541E;
  --text-75: rgba(31,29,24,.75);
  --text-85: rgba(31,29,24,.85);
  --text-65: rgba(31,29,24,.65);
  --text-55: rgba(31,29,24,.55);
  --text-50: rgba(31,29,24,.5);
  --text-40: rgba(31,29,24,.4);
  --rule: rgba(31,29,24,.18);
  --rule-light: rgba(31,29,24,.12);
  --ph-1: #EAE4D6;
  --ph-2: #F0EBDF;
}

[data-theme="charcoal-chartreuse"] {
  --bg: #242320;
  --text: #EDEBE4;
  --accent: #C8DC32;
  --text-75: rgba(237,235,228,.75);
  --text-85: rgba(237,235,228,.85);
  --text-65: rgba(237,235,228,.65);
  --text-55: rgba(237,235,228,.55);
  --text-50: rgba(237,235,228,.5);
  --text-40: rgba(237,235,228,.4);
  --rule: rgba(237,235,228,.18);
  --rule-light: rgba(237,235,228,.12);
  --ph-1: #2E2D29;
  --ph-2: #33322D;
}

[data-theme="matcha-lime"] {
  --bg: #EEF0DE;
  --text: #2B331F;
  --accent: #7A9C0B;
  --text-75: rgba(43,51,31,.75);
  --text-85: rgba(43,51,31,.85);
  --text-65: rgba(43,51,31,.65);
  --text-55: rgba(43,51,31,.55);
  --text-50: rgba(43,51,31,.5);
  --text-40: rgba(43,51,31,.4);
  --rule: rgba(43,51,31,.18);
  --rule-light: rgba(43,51,31,.12);
  --ph-1: #E0E3CE;
  --ph-2: #E6E9D5;
}

[data-theme="gallery-red"] {
  --bg: #FAF9F5;
  --text: #161616;
  --accent: #D92B2B;
  --text-75: rgba(22,22,22,.75);
  --text-85: rgba(22,22,22,.85);
  --text-65: rgba(22,22,22,.65);
  --text-55: rgba(22,22,22,.55);
  --text-50: rgba(22,22,22,.5);
  --text-40: rgba(22,22,22,.4);
  --rule: rgba(22,22,22,.14);
  --rule-light: rgba(22,22,22,.1);
  --ph-1: #EFEDE7;
  --ph-2: #F5F3EE;
}

[data-theme="cool-cobalt"] {
  --bg: #F1F2F0;
  --text: #191B1E;
  --accent: #2A55C9;
  --text-75: rgba(25,27,30,.75);
  --text-85: rgba(25,27,30,.85);
  --text-65: rgba(25,27,30,.65);
  --text-55: rgba(25,27,30,.55);
  --text-50: rgba(25,27,30,.5);
  --text-40: rgba(25,27,30,.4);
  --rule: rgba(25,27,30,.18);
  --rule-light: rgba(25,27,30,.12);
  --ph-1: #E3E4E1;
  --ph-2: #EAEBE8;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* ===== Layout ===== */
.site-nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 32px 56px;
}
.site-nav__logo { font-weight: 900; font-size: 16px; letter-spacing: -.01em; }
.site-nav__links { display: flex; align-items: baseline; gap: 32px; font-size: 13.5px; font-weight: 500; }
.site-nav__links a:hover { color: var(--accent); }
.site-nav__links .is-active { color: var(--accent); }

.site-footer {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 24px;
  padding: 28px 56px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 500;
}
.site-footer a:hover { color: var(--accent); }

/* ===== Typography ===== */
.heading-xl { font-weight: 900; font-size: 80px; line-height: .98; letter-spacing: -.03em; white-space: nowrap; }
.heading-lg { font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -.03em; }
.heading-md { font-weight: 900; font-size: 26px; letter-spacing: -.02em; }
.heading-sm { font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; }
.subtitle { font-size: 15px; font-weight: 500; color: var(--text-75); }
.body { font-size: 15px; line-height: 1.75; color: var(--text-85); }
.body-sm { font-size: 14.5px; line-height: 1.7; color: var(--text-85); }
.label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); }
.label-muted { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .08em; color: var(--text-50); }
.link-accent { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 1px; font-weight: 500; }
.link-accent:hover { opacity: .8; }

/* ===== Components ===== */
.section-block { padding: 48px 56px; }
.section-grid { display: grid; grid-template-columns: 220px 1fr; gap: 64px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.news-row {
  display: flex;
  gap: 32px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-light);
  font-size: 14.5px;
}
.news-row:last-child { border-bottom: none; }
.news-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--text-50);
  width: 88px;
  flex: none;
}
.placeholder-img {
  background: repeating-linear-gradient(45deg, var(--ph-1) 0 10px, var(--ph-2) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--text-50);
}
.tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px 7px;
  display: inline-block;
  align-self: flex-start;
}
.pub-links { display: flex; gap: 20px; font-size: 13.5px; font-weight: 500; }
.pub-links a { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.pub-links a:hover { opacity: .8; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .site-nav { padding: 24px 24px; }
  .site-nav__links { gap: 20px; font-size: 13px; }
  .heading-xl { font-size: 44px; white-space: normal; }
  .heading-lg { font-size: 36px; }
  .heading-md { font-size: 22px; }
  .section-block { padding: 36px 24px; }
  .section-grid { grid-template-columns: 1fr; gap: 24px; }
  .two-col { grid-template-columns: 1fr; gap: 24px; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-photo { width: 100% !important; height: 240px !important; order: -1; }
  .site-footer { padding: 24px; flex-wrap: wrap; gap: 16px; }
  .research-card { grid-template-columns: 1fr !important; }
  .research-card .placeholder-img { width: 100% !important; height: 160px !important; }
}