:root {
  --ink: #16202a;
  --muted: #5c6b76;
  --line: #e3e8eb;
  --link: #0f6e6e;
  --link-hover: #0a4f4f;
  --accent: #0f6e6e;
  --accent-soft: #e6f3f2;
  --paper: #ffffff;
  --hero-from: #0f6e6e;
  --hero-to: #123b52;
  --shadow: 0 1px 2px rgba(16, 30, 40, .04), 0 10px 28px rgba(16, 30, 40, .07);
  --nav-bg: rgba(255, 255, 255, .92);
  --badge-bg: #ffffff;
  --on-accent: #ffffff;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ink: #e4ecf2;
  --muted: #93a5b2;
  --line: #26333f;
  --link: #5ecfc4;
  --link-hover: #8ce7dd;
  --accent: #5ecfc4;
  --accent-soft: #16292f;
  --paper: #0e141a;
  --hero-from: #0b4c4c;
  --hero-to: #10293a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .45);
  --nav-bg: rgba(14, 20, 26, .92);
  --badge-bg: #ffffff;
  --on-accent: #0e141a;
  color-scheme: dark;
}
:root[data-theme="dark"] section h2,
:root[data-theme="dark"] .teaching-table th { color: var(--ink); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 1060px; margin: 0 auto; padding: 32px 32px 48px; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(15, 110, 110, .32); transition: color .15s ease, border-color .15s ease; }
a:hover { color: var(--link-hover); border-color: var(--link-hover); }

/* Keyboard focus: one visible ring everywhere. Inside the dark hero the ring
   turns white so it stays visible against the gradient. */
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
header a:focus-visible, header button:focus-visible { outline-color: #fff; outline-offset: 3px; }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--on-accent); border: none;
  padding: 10px 18px; border-radius: 0 0 10px 10px; font-size: .9rem;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--on-accent); }
h1, h2, h3 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* Sticky top navbar */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1060px; margin: 0 auto; padding: 12px 32px;
  display: flex; align-items: center; gap: 12px 20px;
  flex-wrap: wrap;
  min-height: 56px;
}
.nav-logo {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(120deg, var(--hero-from), var(--hero-to));
  color: #fff; border: none;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700; font-size: .82rem; letter-spacing: .01em;
}
.nav-logo:hover { color: #fff; opacity: .88; }
.nav-links {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  flex: 1;
  list-style: none; padding-left: 0; margin: 0;
}
.nav-links li { margin-bottom: 0; }
.nav-links a {
  color: var(--muted); border: none; font-size: .84rem;
  white-space: nowrap; padding: 4px 0;
}
.nav-links a:hover { color: var(--link); }
.nav-links a.is-current { color: var(--link); font-weight: 600; }

/* Language toggle */
.lang-toggle { display: flex; gap: 2px; flex-shrink: 0; }
.lang-toggle a {
  background: none; border: none; padding: 5px 9px; margin: 0;
  font: inherit; font-size: .8rem; color: var(--muted); cursor: pointer; border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lang-toggle a:hover { background: var(--accent-soft); color: var(--link); border-color: transparent; }
.lang-toggle a.active { color: var(--on-accent); background: var(--accent); font-weight: 600; cursor: default; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin-left: -8px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: var(--accent-soft); color: var(--link); border-color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Hero header */
header {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 36px;
  background: linear-gradient(120deg, var(--hero-from), var(--hero-to));
  border-radius: 18px;
  padding: 44px 48px;
  margin-bottom: 40px;
  box-shadow: var(--shadow);
}
header::after {
  content: ""; position: absolute; pointer-events: none;
  right: -90px; top: -110px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 70%);
}
header > * { position: relative; z-index: 1; }
/* <picture> must not become the flex item; the <img> inside it should be. */
header picture { display: contents; }
.avatar {
  width: 148px; height: 148px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 4px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
header h1 {
  font-size: clamp(1.9rem, 3vw, 2.45rem);
  margin: 0 0 10px; color: #fff; letter-spacing: -.015em;
}
.name-ja { display: none; }
:root[lang="ja"] .name-ja {
  display: block; margin: -4px 0 10px; color: rgba(255, 255, 255, .72);
  font-size: .95rem; font-weight: 500; letter-spacing: .06em;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
}
.affil { color: rgba(255, 255, 255, .88); font-size: 1.02rem; line-height: 1.6; margin-bottom: 16px; }
.affil a { color: #fff; border-color: rgba(255, 255, 255, .5); }
.affil a:hover { color: #fff; border-color: #fff; }
.links { font-size: .92rem; }
.links a { color: #fff; border: none; background: rgba(255, 255, 255, .16); padding: 6px 14px; border-radius: 999px; margin: 2px 6px 2px 0; display: inline-block; }
.links a:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.links span.sep { display: none; }
.cv-print {
  font: inherit; font-size: .8rem;
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 12px;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cv-print svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cv-print:hover { background: var(--accent-soft); color: var(--link); border-color: var(--accent); }
.print-url { display: none; }

/* Sections */
section { margin-bottom: 40px; }
section h2 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
}
section p { color: var(--ink); }

ul, ol { margin: 0; padding-left: 0; list-style: none; }
li { margin-bottom: 9px; }
li:last-child { margin-bottom: 0; }
.meta { color: var(--muted); font-size: .9rem; margin-top: 12px; }

.pub-list, .grant-list { counter-reset: item; }
.pub-list li, .grant-list li {
  counter-increment: item;
  position: relative;
  padding: 11px 14px 11px 40px;
  border-radius: 10px;
  transition: background .15s ease;
}
.pub-list li:hover, .grant-list li:hover { background: var(--accent-soft); }
.pub-list li::before, .grant-list li::before {
  content: counter(item);
  position: absolute;
  left: 0; top: 11px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pub-list .venue { color: var(--muted); font-style: italic; }
.pub-list .year, .grant-list .year { color: var(--muted); font-variant-numeric: tabular-nums; }
.pub-list li > a:first-child {
  font-weight: 600; color: var(--ink); border-bottom: 1px solid transparent;
}
.pub-list li > a:first-child:hover { color: var(--link); border-color: var(--link); }
.pub-list li > a:first-child::after { content: " ↗"; font-weight: 400; color: var(--muted); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.teaching-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.teaching-table th, .teaching-table td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.teaching-table th { background: var(--accent-soft); color: var(--ink); font-weight: 600; font-family: inherit; }
.teaching-table tbody tr:last-child td { border-bottom: none; }
.teaching-table tbody tr:hover { background: var(--accent-soft); }
.teaching-table .col-no { width: 48px; color: var(--muted); font-variant-numeric: tabular-nums; }

.pub-list.collapsed li:nth-child(n+9) { display: none; }
.list-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft);
  border: none;
  color: var(--link);
  font: inherit;
  font-size: .88rem;
  padding: 8px 16px;
  border-radius: 999px;
  margin-top: 12px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.list-toggle:hover { background: var(--accent); color: var(--on-accent); }

.profile-links-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
  margin-top: 16px;
}
.profile-link-card {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink); border-bottom: 1px solid var(--line);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.profile-link-card:hover {
  border-color: var(--accent); color: var(--ink);
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.profile-link-card .badge {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
  object-fit: contain; padding: 3px; background: var(--badge-bg);
  border: 1px solid var(--line); box-sizing: border-box;
}
.profile-link-text { display: flex; flex-direction: column; min-width: 0; }
.profile-link-text strong { font-size: .92rem; font-weight: 600; }
.profile-link-url { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.plain-list { list-style: none; padding-left: 0; }
.plain-list li { display: flex; gap: 14px; padding: 5px 0; }
.plain-list .yr { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 160px; flex-shrink: 0; }

.tight-text { color: var(--ink); }

footer {
  max-width: 1060px; margin: 0 auto; padding: 24px 32px 60px;
  color: var(--muted); font-size: .82rem; text-align: center;
  border-top: 1px solid var(--line); margin-top: 12px;
}
footer a { color: var(--muted); }

/* 404 */
.error-page { max-width: 640px; padding-top: 12vh; text-align: center; }
.error-code {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 4.5rem; font-weight: 700; line-height: 1;
  color: var(--accent); margin: 0 0 8px;
}
.error-page h1 { font-size: 1.5rem; margin: 0 0 18px; }
.error-page p[lang] { color: var(--muted); margin: 0 0 6px; }
.error-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.error-links a {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 20px; font-size: .92rem;
}
.error-links a:hover { border-color: var(--accent); background: var(--accent-soft); }

@media (max-width: 1080px) {
  .nav-inner { gap: 10px 14px; }
  .nav-links { gap: 6px 12px; }
  .nav-links a { font-size: .82rem; }
}

@media (max-width: 860px) {
  .profile-links-grid { grid-template-columns: repeat(2, 1fr); }
  header { gap: 28px; padding: 34px 30px; }
  .avatar { width: 124px; height: 124px; }
}

@media (max-width: 560px) {
  .page { padding: 24px 16px 36px; }
  .nav-inner { padding: 10px 16px; gap: 8px 12px; align-items: center; }
  .nav-logo { order: 1; }
  .lang-toggle { order: 2; margin-left: auto; }
  .cv-print { order: 3; }
  .theme-toggle { order: 4; }
  .nav-links {
    order: 5; flex-basis: 100%;
    gap: 6px 14px; font-size: .82rem;
    justify-content: flex-start;
  }
  header { flex-direction: column; text-align: center; gap: 20px; padding: 28px 20px; border-radius: 14px; }
  header h1 { font-size: 1.55rem; }
  :root[lang="ja"] .name-ja { font-size: .85rem; }
  .avatar { width: 108px; height: 108px; }
  .profile-links-grid { grid-template-columns: 1fr; }
  .links { display: flex; flex-wrap: wrap; justify-content: center; }
  .plain-list li { flex-direction: column; gap: 2px; }
  .plain-list .yr { min-width: auto; }
  .pub-list li, .grant-list li { padding-left: 34px; }
}

/* ---------------------------------------------------------------------------
   Print / "Save as PDF": the page doubles as the CV, so no separate PDF file
   has to be kept in sync. Colors are forced back to the light palette because
   the dark theme is unreadable on paper.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  @page { margin: 14mm 13mm 16mm; }

  :root, :root[data-theme="dark"] {
    --ink: #111111;
    --muted: #444444;
    --line: #bbbbbb;
    --link: #111111;
    --accent: #111111;
    --accent-soft: transparent;
    --paper: #ffffff;
    --shadow: none;
    color-scheme: light;
  }
  html { scroll-behavior: auto; }
  body { font-size: 10.5pt; line-height: 1.45; background: #fff; color: #111; }
  .page, footer { max-width: none; margin: 0; padding: 0; }

  /* Interactive chrome has no meaning on paper. */
  .skip-link, .site-nav, .theme-toggle, .lang-toggle, .list-toggle,
  .profile-link-card .badge, header::after { display: none !important; }

  /* Flatten the hero into a plain CV masthead. */
  header {
    display: flex; gap: 18px; align-items: flex-start;
    background: none; box-shadow: none; border-radius: 0;
    padding: 0 0 12px; margin-bottom: 18px;
    border-bottom: 1.5pt solid #111;
  }
  .avatar {
    width: 26mm; height: 26mm; border: none; box-shadow: none;
  }
  header h1 { color: #111; font-size: 20pt; margin-bottom: 4px; }
  :root[lang="ja"] .name-ja { color: #444; margin: 0 0 6px; }
  .affil { color: #111; font-size: 10.5pt; margin-bottom: 6px; }
  .affil a, .links a, a { color: #111; border: none; background: none; }
  .links { font-size: 10pt; }
  .links a { padding: 0; margin: 0; }
  .links span.sep { display: inline; margin: 0 6px; color: #444; }

  section { margin-bottom: 16px; }
  section h2 {
    font-size: 12pt; margin-bottom: 8px;
    padding-left: 0; border-left: none;
    border-bottom: .75pt solid #111; padding-bottom: 3px;
    break-after: avoid; page-break-after: avoid;
  }

  /* Numbered entries become plain "n." markers — no filled circles to print. */
  .pub-list li, .grant-list li {
    padding: 2px 0 2px 26px; border-radius: 0; break-inside: avoid; page-break-inside: avoid;
  }
  .pub-list li::before, .grant-list li::before {
    content: counter(item) ".";
    background: none; color: #111; font-weight: 600;
    width: 22px; height: auto; top: 2px;
    display: block; text-align: right;
  }
  .pub-list li:hover, .grant-list li:hover, .teaching-table tbody tr:hover { background: none; }
  .pub-list li > a:first-child::after { content: none; }

  /* The publication list is collapsed on screen; a CV needs all of it. */
  .pub-list.collapsed li:nth-child(n+9) { display: list-item; }

  .plain-list li { padding: 2px 0; break-inside: avoid; page-break-inside: avoid; }
  .plain-list .yr { color: #111; min-width: 130px; }

  .table-wrap { border: none; border-radius: 0; overflow: visible; }
  .teaching-table { font-size: 10pt; }
  .teaching-table th { background: none; border-bottom: .75pt solid #111; }
  .teaching-table th, .teaching-table td { padding: 3px 10px 3px 0; }

  /* Profile links: keep the destination readable, drop the card styling. */
  .profile-links-grid {
    display: block; margin-top: 8px; columns: 2; column-gap: 24px;
  }
  .profile-link-card {
    display: block; border: none; border-radius: 0; padding: 1px 0;
    box-shadow: none; transform: none; break-inside: avoid;
  }
  .profile-link-text { display: block; }
  .profile-link-text strong { font-size: 10pt; }
  .profile-link-text strong::after { content: ": "; font-weight: 400; }
  .profile-link-url { display: inline; white-space: normal; color: #444; font-size: 10pt; }

  footer {
    border-top: .75pt solid #bbb; margin-top: 16px; padding-top: 8px;
    font-size: 8.5pt; color: #444; text-align: left;
  }
  .print-url { display: block; }
}