@charset "UTF-8";

:root {
  --text: #1b211e;
  --muted: #46514c;
  --line: #d7ded9;
  --accent: #205c4c;
  --soft: #f7f9f7;
  --header: #e6f0eb;
  --header-line: #cbdbd3;
  --font: "Helvetica Neue", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; font-size: 16px; }
body { margin: 0; background: #fff; color: var(--text); font: 400 1rem/1.75 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
/* Japanese headings use proportional kana rather than tight tracking, and break between
   phrases rather than inside words: Chromium finds the phrases itself, other browsers break
   only at spaces, punctuation and the <wbr> tags in the HTML. */
h1, h2, h3 { font-feature-settings: "palt"; }
h1, h2, h3, .site-affiliation, .staff-card p, .site-footer address { word-break: keep-all; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) {
  h1, h2, h3, .site-affiliation, .staff-card p, .site-footer address { word-break: auto-phrase; }
}
h2, h3 { text-wrap: balance; }
.nowrap { white-space: nowrap; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.container { width: min(100% - 80px, 1200px); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--header-line); background: var(--header); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 10px; }
.site-brand { min-width: 0; }
.site-title { font-size: 24px; font-weight: 700; line-height: 1.3; }
.site-title span { display: inline-block; white-space: nowrap; }
.site-title a { color: inherit; }
.site-alias { display: flex; flex-wrap: wrap; gap: 0 14px; color: var(--muted); font-size: 16px; line-height: 1.4; }
.site-affiliation { color: var(--muted); font-size: 16px; line-height: 1.4; }

.site-nav { display: flex; align-items: center; justify-content: flex-end; flex: none; gap: clamp(14px, 2vw, 28px); }
.site-nav a { flex: none; padding-block: 8px; color: var(--text); font-size: 16px; font-weight: 600; white-space: nowrap; }
.site-nav a:hover { color: var(--accent); }
.site-nav .lang-switch { padding: 4px 14px; border: 1px solid var(--header-line); border-radius: 999px; background: #fff; }
.site-nav .lang-switch:hover { border-color: var(--accent); text-decoration: none; }

.section { border-bottom: 1px solid var(--line); padding-block: 64px 72px; }
.section h1, .section h2 { margin-bottom: 28px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; line-height: 1.35; }
.section p { color: var(--muted); font-size: 16px; line-height: 1.85; }
.section p + p { margin-top: 14px; }

.staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.staff-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); }
.staff-card:hover { border-color: var(--accent); text-decoration: none; }
.staff-card img { width: 120px; height: 143px; object-fit: cover; object-position: center 35%; }
.staff-card-body { min-width: 0; }
.staff-role { color: var(--muted); font-size: 16px; }
.staff-card h3 { margin: 4px 0 4px; font-size: 23px; font-weight: 700; line-height: 1.4; }
.staff-card p { font-size: 16px; line-height: 1.6; }
.staff-card-link { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 16px; font-weight: 700; }

.overview-section { background: var(--soft); }
.overview-section .container { display: grid; grid-template-columns: minmax(250px, 30%) minmax(0, 1fr); gap: 0 48px; }
.overview-section h2 { grid-column: 1; grid-row: 1 / 3; max-width: 340px; margin-bottom: 0; }
.overview-section p { grid-column: 2; max-width: 800px; }

.news-section .card { display: grid; grid-template-columns: minmax(190px, 25%) minmax(0, 1fr); gap: 0 40px; border-top: 1px solid var(--line); padding-top: 28px; }
.news-date { grid-column: 1; grid-row: 1 / 5; color: var(--accent); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.news-section .card h3, .news-section .card p { grid-column: 2; max-width: 810px; }
.news-section .card h3 { margin-bottom: 16px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.48; }
.news-section .card p + p { margin-top: 14px; }
.news-section .card p a { text-decoration: underline; text-underline-offset: .2em; }

.research-section .card { display: grid; grid-template-columns: minmax(250px, 30%) minmax(0, 1fr); gap: 0 48px; margin: 0; padding-block: 32px 40px; border-top: 1px solid var(--line); }
.research-section .card:last-child { border-bottom: 1px solid var(--line); }
.research-section .card h3 { grid-column: 1; grid-row: 1 / 3; max-width: 360px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.48; }
.research-section .card h3 .subtitle { display: block; margin-top: 2px; color: var(--muted); font-size: max(1rem, .75em); }
.research-section .card p { grid-column: 2; max-width: 800px; }
.research-images { grid-column: 2; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 20px; }
.research-images img { width: calc((100% - 16px) / 2); max-width: 360px; border: 1px solid var(--line); background: #fff; }
.research-images.single img { width: min(100%, 360px); max-width: 360px; }

/* Clustering figure: one data set read as crisp, fuzzy and rough clustering. The SVGs come from
   tools/make_cluster_figure.py and hold no text; labels are HTML, so they stay at 16px at any scale.
   The figure lays itself out by its own width: stacked, then plot beside text, then three columns. */
.fr-figure { --fr-benign: #2f6ea5; --fr-benign-ink: #245a8b; --fr-benign-tint: #e9f0f7; --fr-malig: #c25539; --fr-malig-ink: #a5432b; --fr-malig-tint: #f9ece7; --fr-bound: #67716c; --fr-hatch: #c8d0cb; grid-column: 2; max-width: 800px; margin: 28px 0 0; container: fr / inline-size; }
.section .fr-figure p { margin: 0; }
.fr-lead { color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.6; }
.fr-legend { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 16px; line-height: 1.6; }
.fr-legend li { display: inline-flex; align-items: center; gap: 8px; }
.fr-key { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.fr-key-benign { background: var(--fr-benign); }
.fr-key-malig { background: var(--fr-malig); }
.fr-key-ring { width: 20px; height: 20px; border: 1.5px dashed var(--fr-bound); }
.fr-grid { display: grid; gap: 14px; margin-top: 22px; }
.fr-group { padding-bottom: 6px; border-bottom: 2px solid var(--line); color: var(--muted); font-weight: 700; line-height: 1.5; }
.fr-group-ours { margin-top: 10px; border-color: var(--accent); color: var(--accent); }
.fr-panel { display: grid; gap: 12px; align-content: start; }
.fr-plot { position: relative; width: 100%; max-width: 420px; }
.fr-plot svg { display: block; width: 100%; height: auto; }
.fr-text h4 { margin: 0 0 4px; color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.45; font-feature-settings: "palt"; }
.section .fr-kicker { color: var(--muted); font-weight: 700; line-height: 1.5; }
.section .fr-panel-fuzzy .fr-kicker, .section .fr-panel-rough .fr-kicker { color: var(--accent); }
.section .fr-text p:last-child { line-height: 1.75; }
.fr-label, .fr-callout { position: absolute; font-size: 16px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.fr-label { padding: 1px 6px; border-radius: 6px; background: rgb(255 255 255 / .86); }
.fr-at-tl { top: 8px; left: 9%; }
.fr-at-tr { top: 8px; right: 8px; }
.fr-at-br { right: 8px; bottom: 11%; }
.fr-ink-benign { color: var(--fr-benign-ink); }
.fr-ink-malig { color: var(--fr-malig-ink); }
.fr-ink-bound { color: var(--fr-bound); }
/* The callout sits up and to the right of its point (left/top set by the script); ::before is the leader. */
.fr-callout { display: grid; padding: 3px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 2px 6px rgb(27 33 30 / .08); font-variant-numeric: tabular-nums; transform: translate(10px, calc(-100% - 10px)); }
.fr-callout::before { content: ""; position: absolute; top: calc(100% + 4px); left: -4px; width: 6px; border-top: 1.25px solid var(--fr-bound); transform-origin: 0 0; transform: rotate(-45deg); }
.fr-callout > span { display: inline-flex; align-items: center; gap: 6px; }
.fr-bg { fill: #fcfdfc; }
.fr-frame { fill: none; stroke: var(--line); vector-effect: non-scaling-stroke; }
.fr-axis { fill: none; stroke: #97a19c; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fr-zone-benign { fill: var(--fr-benign-tint); }
.fr-zone-malig { fill: var(--fr-malig-tint); }
.fr-lower-benign, .fr-lower-malig { stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fr-lower-benign { stroke: var(--fr-benign); }
.fr-lower-malig { stroke: var(--fr-malig); }
.fr-divider { stroke: var(--fr-bound); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.fr-hatch { stroke: var(--fr-hatch); stroke-width: 1.6; }
.fr-halo { mix-blend-mode: multiply; }
.fr-stop-benign { stop-color: var(--fr-benign); }
.fr-stop-malig { stop-color: var(--fr-malig); }
.fr-ring { fill: none; stroke: var(--fr-bound); stroke-width: 1.25; stroke-dasharray: 3 2.5; vector-effect: non-scaling-stroke; }
.fr-pt { stroke: #fff; stroke-width: 1.5; }
.fr-pt-benign { fill: var(--fr-benign); }
.fr-pt-malig { fill: var(--fr-malig); }
.fr-pt-bound { fill: #fff; stroke: var(--fr-bound); stroke-width: 1.75; }
@container fr (min-width: 460px) {
  .fr-panel { grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
}
@container fr (min-width: 760px) {
  .fr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "g1 g2 g2" "a b c"; gap: 14px 24px; }
  .fr-group-base { grid-area: g1; }
  .fr-group-ours { grid-area: g2; margin-top: 0; }
  .fr-panel { grid-template-columns: none; gap: 12px; align-items: start; }
  .fr-panel-hard { grid-area: a; }
  .fr-panel-fuzzy { grid-area: b; }
  .fr-panel-rough { grid-area: c; }
}

.employment-section { background: var(--soft); }
.employment-note { max-width: 780px; margin-bottom: 20px; }
.employment-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.employment-table td { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 16px; line-height: 1.7; vertical-align: top; }
.year-label { display: inline-block; min-width: 108px; color: var(--text); font-size: 16px; font-weight: 700; }

.employment-older summary { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--accent); font-weight: 700; cursor: pointer; }
.employment-older summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.employment-older summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.employment-older .employment-table { border-top: 0; }

.employment-more { max-width: 900px; margin-top: 20px; }
.employment-more a { text-decoration: underline; text-underline-offset: .2em; }

.site-footer { padding-block: 32px 40px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.site-footer .container > * + * { margin-top: 4px; }
.site-footer .footer-name { color: var(--text); font-weight: 700; }
.site-footer address { font-style: normal; }
.site-footer .footer-copy { margin-top: 16px; }

/* 404 page */
.notfound-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 20px 0 0; padding: 0; list-style: none; font-weight: 700; }

/* English pages: Latin text needs less leading, and slightly tighter tracking at heading sizes. */
html[lang="en"] .site-title { letter-spacing: -.02em; }
html[lang="en"] .section h2 { letter-spacing: -.03em; }
html[lang="en"] .staff-card h3,
html[lang="en"] .news-section .card h3,
html[lang="en"] .research-section .card h3 { letter-spacing: -.015em; line-height: 1.3; }
html[lang="en"] .section p { line-height: 1.7; }
html[lang="en"] .employment-table td { line-height: 1.6; }
html[lang="en"] .year-label { min-width: 90px; }
/* The English affiliation is longer, so the sticky header is taller. */
html[lang="en"] { scroll-padding-top: 132px; }

/* The header is sticky only where it stays compact. Narrower, it wraps onto more lines and would
   cover up to two fifths of a phone screen, so it scrolls away with the page instead. */
@media (max-width: 1050px) {
  html, html[lang="en"] { scroll-padding-top: 12px; }
  .site-header { position: static; }
  .site-header .container { gap: 20px; }
  .site-title { font-size: 22px; }
  .staff-grid { gap: 20px; }
  .staff-card { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; }
  .staff-card img { width: 104px; height: 134px; }
  .overview-section .container, .research-section .card { column-gap: 32px; }
}

@media (max-width: 900px) {
  .site-header .container { flex-direction: column; align-items: stretch; gap: 4px; padding-block: 8px; }
  .site-title { font-size: 21px; }
  .site-nav { flex-wrap: wrap; gap: 0 22px; }
}

@media (max-width: 800px) {
  .container { width: min(100% - 48px, 1200px); }
  .section { padding-block: 52px 60px; }
  .section h2 { margin-bottom: 24px; }
  .staff-grid { grid-template-columns: 1fr; gap: 0; }
  .staff-card + .staff-card { border-top: 0; }
  .overview-section .container { display: block; }
  .overview-section h2 { max-width: 700px; margin-bottom: 20px; }
  .news-section .card { grid-template-columns: 1fr; }
  .news-date { grid-column: 1; grid-row: auto; margin-bottom: 10px; }
  .news-section .card h3, .news-section .card p { grid-column: 1; }
  .research-section .card { grid-template-columns: 1fr; padding-block: 28px 36px; }
  .research-section .card h3, .research-section .card p, .research-images, .fr-figure { grid-column: 1; }
  .research-section .card h3 { grid-row: auto; max-width: 800px; margin-bottom: 14px; }
}

@media (max-width: 520px) {
  .container { width: min(100% - 36px, 1200px); }
  .site-title { font-size: 19px; }
  .site-nav { gap: 0 12px; }
  .site-nav a { padding-block: 5px; }
  .site-nav .lang-switch { padding-inline: 0; border: 0; border-radius: 0; background: none; }
  .section { padding-block: 44px 52px; }
  .section h2 { font-size: 26px; }
  .staff-card { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .staff-card img { width: 88px; height: 120px; }
  .staff-card h3 { font-size: 20px; }
  .staff-card-link { margin-top: 8px; }
  .news-section .card h3, .research-section .card h3 { font-size: 21px; }
  .research-images { margin-top: 18px; }
  .employment-table td { padding-block: 12px; }
  .year-label { display: block; margin-bottom: 4px; }
}

@media (max-width: 600px) {
  .research-images:not(.single) img { width: min(100%, 340px); max-width: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}