/* ==========================================================================
   Wataru Kawakami — academic website
   --------------------------------------------------------------------------
   Design "意識の渦" (whirlpools of consciousness; "記憶の渦" until
   2026-11-10), adopted from design prototype C, revision 3 ("calm").
   Background, history and alternatives: README.md, sections デザイン試作
   and 設計メモ.

   - Composed like a woodblock print: outlined panels, offset color blocks
     (an echo of misregistered print layers, 版ずれ), pale vertical tanzaku
     (短冊) labels, and a title cartouche (題箋) overlapping the hero picture.
   - The hero picture is a phase portrait: a stream (read as the flow of
     consciousness) whose trajectories spiral into attractors, the states
     it settles into — drawn as ukiyo-e water lines. It is generated by
     tools/make_flow.py and inlined in both pages (index.html and its
     Japanese version, ja/index.html).
   - One stylesheet serves both pages. Rules for Japanese text match
     :lang(ja) (section "Japanese page"), so they leave the English page as
     it is.
   - Color: Edo "iki" restraint — indigo and the nezumi grays on soft gofun
     paper, with one muted accent, bengara (弁柄, an iron-oxide red): the
     dots at the whirlpool centers (in the picture and in the brand mark),
     the small subheadings, link hover and the keyboard focus ring. The
     tanzaku are pale ainezu slips and the author's own name gets a pale
     ainezu highlighter, so nothing on the page shouts. Selection and
     buttons stay neutral.
   - Why not vermilion: the page first used revision 4 — vermilion (朱)
     tanzaku, 落款 seals and vermilion marks. Feedback was that it could
     read as "Japan for foreigners" to Japanese viewers; after a side-by-side
     comparison the calmer revision 3 was adopted, without the seals. The
     vermilion page was kept as prototypes/shu/; prototypes/ left the
     repository with publication (2026-11-10; README, 「公開しないもの」).
   - No JavaScript, and no fonts from elsewhere: Mincho comes from the OS.
     The one font file is the tanzaku's Zen Antique, cut down to the
     characters on the slips and served from assets/fonts/ (section
     "Tanzaku"). (A development-only theme toggle, dev/theme-toggle.js,
     was loaded until publication; it is kept outside the repository.)
   - Every color is a token on :root; dark mode only swaps tokens.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --paper: #f1ece1;          /* soft gofun */
  --ink: #23262b;            /* 12.9:1 on --paper */
  --ink-2: #5d5f63;          /* 5.4:1 */
  --frame: #2e3540;          /* ink-gray outlines (not black) */
  --ai: #2a4766;             /* 藍 muted indigo, 8.1:1 — links, dates */
  --kicker: #3e6e77;         /* 錆浅葱 sabi-asagi, 4.8:1 — small labels */
  --bengara: #9a4a38;        /* 弁柄 (text-size uses: subheads, hover, focus), 5.2:1 */
  --bengara-fill: #a9573f;   /* 弁柄 fills: the dot at the center of the brand mark */
  --offset: #cbd5da;         /* pale 藍鼠: every offset block */
  --tint: #dce3e6;           /* tanzaku, badges, hovers, selection */
  --tint-ink: #23262b;
  --mark: rgb(132 150 163 / 0.28);   /* pale 藍鼠 highlighter: own name, bio */
  --bar-1: #8496a3;          /* 藍鼠 ainezu */
  --bar-2: #8e957f;          /* 利休鼠 rikyū-nezumi */
  --bar-3: #a8919a;          /* 梅鼠 ume-nezumi */
  --hair: rgb(46 53 64 / 0.16);
  --header-bg: rgb(241 236 225 / 0.92);
  --deep: #22324a;           /* footer */
  --on-deep: #e8e3d7;
  --on-deep-2: #b9c0c8;
  --uzu: #2a4766;            /* brand spiral */

  --font-serif: Georgia, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Noto Serif CJK JP", serif;
  --font-mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Noto Serif CJK JP", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Hiragino Sans", "Noto Sans JP", sans-serif;

  --content-width: 1080px;
  --gutter: 16px;
}

/* Dark: charcoal indigo, muted gray outlines (no bright cream lines). */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --paper: #141a23;
    --ink: #e8e3d7;          /* 13.6:1 on --paper */
    --ink-2: #a9adb2;        /* 7.7:1 */
    --frame: #8e96a0;
    --ai: #9db4cc;           /* 8.2:1 */
    --kicker: #8dbac2;
    --bengara: #d98a74;      /* 6.5:1 */
    --bengara-fill: #b7654c;
    --offset: #263243;
    --tint: #2a3644;
    --tint-ink: #e8e3d7;     /* 9.6:1 on --tint */
    --mark: rgb(157 180 204 / 0.22);
    --hair: rgb(232 227 215 / 0.14);
    --header-bg: rgb(20 26 35 / 0.92);
    --deep: #0e131a;
    --on-deep: #e8e3d7;
    --on-deep-2: #a9adb2;
    --uzu: #9db4cc;
  }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}
@media (min-width: 900px) {
  /* Keeps anchor targets clear of the sticky header (desktop only). */
  html { scroll-padding-top: 92px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--tint); color: var(--tint-ink); }

a {
  color: var(--ai);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--bengara); }
:focus-visible { outline: 2px solid var(--bengara); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* ---------- Brand mark: a small whirlpool with a dot at its center ---------- */
.uzu { flex: none; width: 28px; height: 28px; }
.uzu-line { fill: none; stroke: var(--uzu); stroke-width: 2; stroke-linecap: round; }
.uzu-dot { fill: var(--bengara-fill); }

/* ---------- Tanzaku (短冊): vertical kanji labels on pale ainezu slips,
   after the title slips on ukiyo-e prints. Deliberately quiet (no accent
   color): they frame the headings the way a print is framed, they are not
   marks. The Japanese page has the same slips and the same English
   headings: the slip gives the Japanese name, the heading the display type
   (2026-11-09; the first Japanese page had Japanese headings, which only
   repeated the word on the slip; see README).

   Font: Zen Antique, an "antique" face (kanji and katakana a little heavier
   than hiragana, as in old printed matter), chosen 2026-11-09 after
   comparing candidates on the real pages (README, 設計メモ). The file holds
   only the characters on the slips (tools/make_tanzaku_font.py, about
   9 KB); any other character falls back to the OS Mincho, so change a
   slip, then rerun that script (tools/check_pages.py reports a missing
   character). font-display: block hides a slip's text for the moment the
   file takes rather than flashing the Mincho first (the file is tiny and
   preloaded by both pages); the slip itself is drawn at once.
   Licence: SIL OFL 1.1, assets/fonts/zen-antique-OFL.txt. ---------- */
@font-face {
  font-family: "Zen Antique";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/zen-antique.woff2") format("woff2");
}
.tanzaku {
  display: inline-block;
  flex: none;
  padding: 12px 7px;
  border: 1.5px solid var(--frame);
  background: var(--tint);
  color: var(--tint-ink);
  font-family: "Zen Antique", var(--font-mincho);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.25em;
  writing-mode: vertical-rl;
}

/* ---------- Header ----------
   Phones: the header scrolls away with the page (rows of links pinned to
   the top would eat a small screen) and the links wrap instead of hiding
   in a menu, so no JavaScript is needed. Desktop: one sticky row. */
.site-header {
  border-bottom: 1.5px solid var(--frame);
  background: var(--header-bg);
}
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 12px 8px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.site-header nav { flex: 1 1 100%; }
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 6px 10px;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }
/* The CV button in the header. Out of both pages since 2026-11-10 (no PDF
   for the site yet); the rule stays for its return (README, 「CV」). */
.nav-links .nav-cv {
  margin-left: 6px;
  padding: 3px 14px;
  border: 1.5px solid var(--frame);
  border-radius: 999px;
  color: var(--ai);
  font-weight: 600;
}
.nav-links .nav-cv:hover { background: var(--tint); color: var(--tint-ink); }
/* The language switch (日本語 on the English page, English on the Japanese
   one) is the last link, in the link color. It sits in the list rather than
   on its own at the right edge so that the order of the links on screen
   stays the order of the keyboard focus on both phones and desktop. */
.nav-links .nav-lang { color: var(--ai); font-weight: 600; }
@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; z-index: 10; }
  .header-row { flex-wrap: nowrap; min-height: 66px; padding-block: 0; }
  .site-header nav { flex: 0 1 auto; }
  .nav-links { flex-wrap: nowrap; margin: 0 -10px 0 0; }
  /* A hairline sets it off from the section links where they share one
     row. Not on phones: the links wrap there, and a line could start with
     the divider. */
  .nav-links .nav-lang { margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--hair); }
}

/* ---------- Hero: the print ---------- */
.hero { padding-top: 36px; }
@media (min-width: 900px) { .hero { padding-top: 52px; } }
.painting {
  position: relative;
  height: clamp(220px, 31vw, 340px);
  border: 2px solid var(--frame);
  background: #2c4560;
  box-shadow: 6px 6px 0 var(--offset);
  overflow: hidden;
  /* Lets the browser skip rendering the animated picture while it is off
     screen (supported in current Chrome, Firefox and Safari; older browsers
     simply keep animating). The box has a fixed height, so nothing shifts. */
  content-visibility: auto;
}
.painting .tanzaku { position: absolute; top: 14px; left: 14px; z-index: 1; }

/* The generated picture (tools/make_flow.py). Its colors are fixed: it is
   an artwork, so it looks the same in both themes. */
.flow { display: block; width: 100%; height: 100%; }
.flow .strokes path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flow .l1 { stroke: #e9e5dc; }   /* off-white */
.flow .l2 { stroke: #b6c7cc; }   /* pale blue-gray */
.flow .l3 { stroke: #2a4766; }   /* indigo */
.flow .w1 { stroke-width: 1.3; }
.flow .w2 { stroke-width: 2.1; }
.flow .mem { fill: #a9573f; stroke: #23262b; stroke-width: 1.2; }   /* 弁柄: the whirlpool centers ("mem" is from the picture's first reading, see make_flow.py) */

/* Each line has pathLength="100" and runs in the direction of the flow, so
   a short gap travelling along it reads as water drawn into the whirlpool.
   Three speeds and offset delays keep neighbouring lines out of step. */
@media (prefers-reduced-motion: no-preference) {
  .flow .strokes path {
    stroke-dasharray: 90 10;
    animation: flow 28s linear infinite;
  }
  .flow .strokes path:nth-child(3n) { animation-duration: 22s; animation-delay: -7s; }
  .flow .strokes path:nth-child(3n + 1) { animation-duration: 36s; animation-delay: -15s; }
  .flow .strokes path:nth-child(5n) { animation-delay: -11s; }
}
@keyframes flow { to { stroke-dashoffset: -100; } }

.cartouche {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: calc(100% - 20px);
  margin: -34px 0 0 18px;
  padding: 14px 22px 16px;
  border: 2px solid var(--frame);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--offset);
}
.cartouche h1 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}
.cartouche h1 .suffix { color: var(--ink-2); font-weight: 400; }
/* Japanese page: the name in Latin letters, on its own line under the kanji. */
.cartouche h1 .name-latin {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: max(0.82rem, 0.4em);
  font-weight: 400;
  letter-spacing: 0.04em;
}
/* Small phones: "Kawakami, M.D." is the widest part of the name that cannot
   break (the   keeps "M.D." from being left alone on a line). Below
   360 px it was wider than the cartouche and stuck out of the frame (by
   29 px at 320 px), so there the name scales with the screen: 8vw is
   25.6 px at 320 px and a little under the regular size at 359 px. */
@media (max-width: 359px) {
  .cartouche h1 { font-size: 8vw; }
  /* The Japanese name (川上 航) is short and fits at the regular size. */
  .cartouche h1:lang(ja) { font-size: 1.9rem; }
}
.role { margin-top: 6px; color: var(--ai); font-weight: 600; }

.hero-grid { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 720px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 200px; gap: 48px; align-items: start; }
}
.affiliation { color: var(--ink-2); font-size: 0.9rem; line-height: 1.65; }
.bio { max-width: 64ch; margin-top: 18px; }
.bio p + p { margin-top: 12px; }
.bio strong { color: var(--ink); font-weight: 600; }
/* Japanese page: the career as a short dated list at the top of the bio,
   instead of sentences (see the comment in ja/index.html). */
.career { margin: 0 0 14px; padding: 0; list-style: none; }
.career li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 12px; }
.career li + li { margin-top: 2px; }
.career-when { padding-top: 0.1em; color: var(--ai); font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
/* Phones show the portrait above the text; wide screens put it to the right. */
.portrait { order: -1; width: 160px; }
@media (min-width: 720px) { .portrait { order: 0; width: 200px; justify-self: end; } }
.portrait img {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--frame);
  box-shadow: 6px 6px 0 var(--offset);
  object-fit: cover;
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1.5px solid var(--frame);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
.pill:hover { background: var(--tint); color: var(--tint-ink); }
.pill svg { flex: none; width: 16px; height: 16px; }

/* ---------- Sections ---------- */
.section { padding-top: 76px; }
.section-title {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 24px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--frame);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
}
.subhead {
  margin: 40px 0 10px;
  color: var(--bengara);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- News ---------- */
.news { margin: 0; padding: 0; list-style: none; }
.news li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}
.news li:first-child { padding-top: 2px; border-top: 0; }
.news time {
  padding-top: 0.1em;
  color: var(--ai);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 479px) {
  .news li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Research ---------- */
/* Two columns from 720 px: the four cards make two full rows. (While there
   were three cards, desktop used three columns so that no card sat alone on
   a second row; with four, three columns would leave one alone again. If
   the number of cards changes, choose the columns again.) */
.projects { display: grid; gap: 20px; }
@media (min-width: 720px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.project {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border: 1.5px solid var(--frame);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--offset);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.project:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--offset); }
@media (prefers-reduced-motion: reduce) {
  .project { transition: none; }
  .project:hover { transform: none; }
}
.project-kicker {
  margin-bottom: 8px;
  color: var(--kicker);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.project h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}
.project-summary { font-size: 0.94rem; line-height: 1.7; }
.project-output {
  margin-top: auto;           /* pins outputs to the card bottom so a row of cards lines up */
  padding-top: 14px;
  color: var(--ink-2);
  font-size: 0.8rem;
}

.expertise { display: grid; gap: 22px 28px; margin: 0; }
@media (min-width: 720px) {
  .expertise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.expertise > div { padding-top: 12px; border-top: 4px solid var(--bar-1); }
.expertise > div:nth-child(2) { border-top-color: var(--bar-2); }
.expertise > div:nth-child(3) { border-top-color: var(--bar-3); }
.expertise dt {
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 700;
}
.expertise dd { margin: 0; font-size: 0.94rem; line-height: 1.7; }

/* ---------- Publications & talks ---------- */
.ref-list { margin: 0; padding: 0; list-style: none; }
.ref { padding: 18px 0; border-top: 1px solid var(--hair); }
.ref:first-child { padding-top: 2px; border-top: 0; }
.ref-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 8px;
}
.badge {
  padding: 1px 10px;
  border: 1.5px solid var(--frame);
  border-radius: 999px;
  background: var(--tint);
  color: var(--tint-ink);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
}
.ref-type { color: var(--ink-2); font-size: 0.8rem; }
.ref-title {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
}
.ref-authors { margin-top: 4px; font-size: 0.94rem; }
.ref-authors strong { color: var(--ink); font-weight: 700; }
/* The author's own name here, and the key phrases in the bio: a pale ainezu
   highlighter, like a marker pen on a printout — emphasis without adding a
   color. */
.ref-authors strong,
.bio strong { background: linear-gradient(transparent 60%, var(--mark) 60%); }
.ref-venue { margin-top: 2px; color: var(--ink-2); font-size: 0.9rem; }
.ref-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ref-links a {
  padding: 2px 12px;
  border: 1.5px solid var(--frame);
  border-radius: 999px;
  color: var(--ai);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
.ref-links a:hover { background: var(--tint); color: var(--tint-ink); }

/* ---------- Lists: current projects, awards, education, experience ----------
   The current projects use these entries with a title only (topic names). */
.entries { margin: 0; padding: 0; list-style: none; }
.entry { padding: 14px 0; border-top: 1px solid var(--hair); }
.entry:first-child { padding-top: 2px; border-top: 0; }
.entry-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 24px;
}
@media (max-width: 479px) {
  .entry-head { grid-template-columns: minmax(0, 1fr); }
}
.entry-title { color: var(--ink); font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; }
.when { color: var(--ai); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.entry-detail { margin-top: 4px; color: var(--ink-2); font-size: 0.92rem; }
.aside { margin-top: 18px; color: var(--ink-2); font-size: 0.92rem; }
.aside strong { color: var(--ink); }

/* ---------- Footer: deep indigo band ---------- */
.site-footer {
  margin-top: 100px;
  padding-block: 52px 60px;
  border-top: 2px solid var(--frame);
  background: var(--deep);
  color: var(--on-deep);
}
.footer-title {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
}
.site-footer .tanzaku { border-color: var(--on-deep-2); background: transparent; color: var(--on-deep); }
.site-footer a { color: var(--on-deep); }
.site-footer a:hover { color: var(--on-deep-2); }
.email { overflow-wrap: anywhere; }
.footer-affil { margin-top: 6px; color: var(--on-deep-2); font-size: 0.92rem; }
.footer-sign {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  color: var(--on-deep-2);
  font-size: 0.8rem;
}
.footer-sign .uzu-line { stroke: var(--on-deep); }   /* the brand whirlpool signs the page */

/* ---------- Japanese page (ja/index.html) ----------
   These rules match Japanese text only (:lang(ja)); the English page is
   lang="en" and is not affected. */

/* Small labels: the sizes above suit capitals with tracking, but at the same
   size kanji look cramped, so the Japanese labels are a little larger. */
.subhead:lang(ja) { font-size: 0.86rem; letter-spacing: 0.04em; }
.project-kicker:lang(ja) { font-size: 0.8rem; letter-spacing: 0.04em; }
.badge:lang(ja) { font-size: 0.76rem; }

/* Japanese may break a line between any two characters, which can split a
   name (知能機械情報学専 / 攻). Lines made of names separated by spaces or
   commas break only between the names; overflow-wrap still breaks a name
   wider than the whole line. Not used for sentences: there a long run with
   no break point would jump to the next line whole, leaving a gap. */
:is(.role, .affiliation, .career li, .footer-affil, .entry-title, .ref-authors, .ref-venue):lang(ja) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* Card headings and titles break between phrases where the browser can
   find them (word-break: auto-phrase, Chrome 119 and later); other browsers
   ignore it and break lines as usual. (The section headings are English on
   both pages, so they are not listed.) */
:is(.project h4, .ref-title, .expertise dt):lang(ja) { word-break: auto-phrase; }
/* Paragraphs: avoid a last line of one or two characters (「…しまし / た。」)
   where the browser supports text-wrap: pretty (others ignore it). */
:is(.bio p, .news p, .project-summary, .expertise dd, .entry-detail):lang(ja) { text-wrap: pretty; }

/* ---------- Print ---------- */
@media print {
  .site-header,
  .skip-link { display: none; }
  .painting,
  .portrait img,
  .project,
  .cartouche { box-shadow: none; }
  .site-footer { background: none; color: inherit; }
  a { color: inherit; text-decoration: none; }
}