@charset "UTF-8";

/* ==========================================================
   Design tokens
   The three brand colours are kept from the original design:
   base #eef0f3 / main #443322 / accent rgb(145, 180, 200)
   The dark theme (with the OS set to dark, or chosen with the theme
   button) redefines the colours below: see "Dark theme" after this block.
   ========================================================== */
:root {
    color-scheme: light;
    --dark: 0;                 /* 1 in the dark theme: the theme button and the scripts read it */
    --base: #eef0f3;           /* base colour: sidebar, soft surfaces */
    --main: #443322;           /* main colour: text, headings, primary button */
    --accent: #91b4c8;         /* accent colour: markers, lines, focus */
    --accent-soft: #d7eaf4;    /* light tint of the accent: award chips, hovers */
    --accent-ink: #44708a;     /* darker tint of the accent for small text (4.5:1 or more on the base colour) */

    --text: var(--main);
    --text-2: #686870;
    --text-3: #72727a;         /* (4.5:1 or more on the white and tinted sections) */
    --bg: #ffffff;
    --line: rgba(68, 51, 34, 0.12);
    --line-strong: rgba(68, 51, 34, 0.22);
    --section-tint: #f9fafb;   /* every other section: a very light tint of the base colour */
    --surface: #fff;           /* raised controls on the base colour: buttons, chips, search box */
    --surface-hover: rgba(255, 255, 255, 0.8); /* a light wash over the base colour on hover */
    --tag-bg: var(--base);     /* the research interest and skill tags */
    --strong: var(--main);     /* filled controls: primary button, chosen filter, toast */
    --strong-hover: #2d2217;
    --on-strong: #fff;         /* text on them */
    --on-strong-2: rgba(255, 255, 255, 0.75);
    --figure-bg: #fff;         /* behind the paper figures */
    --glass: rgba(238, 240, 243, 0.62);       /* the top bar on phones (the base colour) */
    --glass-solid: rgba(238, 240, 243, 0.96);
    --scrim: rgba(68, 51, 34, 0.32);          /* dims the page behind the drawer */
    --shadow-rgb: 68, 51, 34;                 /* soft shadows (the main colour) */

    /* the ASCII cherry tree above the About text (js/ascii-sakura.js),
       through the seasons. Each season: three tones for the crown (lit,
       middle, shaded) and one for what falls from it; all muted so that
       they sit between the main brown and the accent blue, yet deep enough
       to stand out from the white page. The branches and the ground are a
       tint of the main colour. (The objects of the seasons beside the tree
       have colours of their own, in the script) */
    --tree-wood: rgba(68, 51, 34, 0.62);
    --spring-light: #ca9ba8;   /* sakura (March to May) */
    --spring: #bc7f91;
    --spring-deep: #a86076;
    --spring-fall: #b87085;
    --summer-light: #a8ba95;   /* fresh green (June to August) */
    --summer: #87a272;
    --summer-deep: #668253;
    --summer-fall: #799664;
    --autumn-light: #ccac8c;   /* autumn leaves (September to November) */
    --autumn: #b9885b;
    --autumn-deep: #9e663b;
    --autumn-fall: #b27649;
    --winter-light: #acb8c2;   /* snow (December to February) */
    --winter: #8da0af;
    --winter-deep: #70899a;
    --winter-fall: #7d92a3;

    /* Fonts (the same three families as otofu.org)
       serif: the name and headings      (Shippori Mincho)
       sans:  body text, Japanese and English (Zen Kaku Gothic New)
       mono:  dates, labels, counts, link chips, footer (IBM Plex Mono;
              Japanese characters in these fall back to the sans) */
    --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    --sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "Yu Gothic", YuGothic, Meiryo, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
        "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", monospace;

    /* Type scale: the font sizes of otofu.org (the same for English and
       Japanese). Heading jump ratios to the 15.5px body text:
       section titles 1.68 (26px) / subsections 1.23 (19px).
       Phones (560px and below): body 15px, section titles 22px (1.47),
       subsections 17px (1.13). The name in the sidebar is 36px (2.32),
       a little smaller than otofu.org (44px to 72px). */
    --fs-name: 36px;       /* profile name (serif) */
    --fs-h2: 26px;         /* section titles (serif) */
    --fs-h3: 19px;         /* subsection titles (serif) */
    --fs-h4: 17px;         /* venue on the figure tiles (serif) */
    --fs-body: 15.5px;     /* body text, item and paper titles */
    --fs-lede: 15px;       /* About text */
    --fs-text: 14px;       /* news, small headings, sidebar, tags, buttons */
    --fs-sub: 13.5px;      /* authors, item details */
    --fs-small: 13px;      /* venue, notes, table of contents, search */
    --fs-filter: 13px;     /* filter buttons */
    --fs-meta: 12px;       /* dates, labels, counts, footer (mono) */
    --fs-badge: 11.5px;    /* award badges */
    --fs-chip: 11px;       /* link chips (mono) */
    --lh-body: 1.85;

    --sidebar-w: 300px;
    --content-max: 880px;
    --media-w: 240px;
    --radius-md: 16px;
    --radius-sm: 10px;

    /* motion: short and decelerating; nothing loops except the scroll cue
       and the sakura above the About text */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ----------------------------------------------------------
   Dark theme: with the OS set to dark, or chosen with the theme button
   (js/style.js puts data-theme="dark" or "light" on <html>; without a
   choice the OS setting decides). A warm charcoal with the main colour
   lightened to a warm off-white for the text, the accent blue kept, and
   the filled controls in a lighter brown. The same values twice, once for
   each way in: keep the two blocks alike.
   Screens only: printing stays light.
   ---------------------------------------------------------- */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --dark: 1;
        --base: #252320;
        --main: #e8e1d8;
        --accent: #91b4c8;
        --accent-soft: #263641;
        --accent-ink: #a9c8da;

        --text-2: #aaa49c;
        --text-3: #9a948c;
        --bg: #1c1a18;
        --line: rgba(232, 225, 216, 0.12);
        --line-strong: rgba(232, 225, 216, 0.22);
        --section-tint: #211f1c;
        --surface: #2d2b28;
        --surface-hover: rgba(255, 255, 255, 0.06);
        --tag-bg: #312e2a;
        --strong: #6b5541;
        --strong-hover: #7c634d;
        --on-strong: #f6efe6;
        --on-strong-2: rgba(246, 239, 230, 0.82);
        --figure-bg: #f2efea;
        --glass: rgba(37, 35, 32, 0.62);
        --glass-solid: rgba(37, 35, 32, 0.96);
        --scrim: rgba(0, 0, 0, 0.5);
        --shadow-rgb: 0, 0, 0;

        /* the tree: the same hues, a little lighter for the dark ground */
        --tree-wood: rgba(232, 225, 216, 0.42);
        --spring-light: #e5b9c6;
        --spring: #cf98a9;
        --spring-deep: #b27f90;
        --spring-fall: #d79fb0;
        --summer-light: #c6d9b4;
        --summer: #9cb788;
        --summer-deep: #7a9468;
        --summer-fall: #a8c294;
        --autumn-light: #ecc9a8;
        --autumn: #d29e70;
        --autumn-deep: #ad7850;
        --autumn-fall: #d99b6b;
        --winter-light: #eef3f6;
        --winter: #cfdae2;
        --winter-deep: #a9bac7;
        --winter-fall: #dce5eb;
    }
    /* the paper figures (mostly on white): a little dimmer */
    :root:not([data-theme="light"]) .pub-image {
        filter: brightness(0.9);
    }
}
@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark;
        --dark: 1;
        --base: #252320;
        --main: #e8e1d8;
        --accent: #91b4c8;
        --accent-soft: #263641;
        --accent-ink: #a9c8da;

        --text-2: #aaa49c;
        --text-3: #9a948c;
        --bg: #1c1a18;
        --line: rgba(232, 225, 216, 0.12);
        --line-strong: rgba(232, 225, 216, 0.22);
        --section-tint: #211f1c;
        --surface: #2d2b28;
        --surface-hover: rgba(255, 255, 255, 0.06);
        --tag-bg: #312e2a;
        --strong: #6b5541;
        --strong-hover: #7c634d;
        --on-strong: #f6efe6;
        --on-strong-2: rgba(246, 239, 230, 0.82);
        --figure-bg: #f2efea;
        --glass: rgba(37, 35, 32, 0.62);
        --glass-solid: rgba(37, 35, 32, 0.96);
        --scrim: rgba(0, 0, 0, 0.5);
        --shadow-rgb: 0, 0, 0;

        /* the tree: the same hues, a little lighter for the dark ground */
        --tree-wood: rgba(232, 225, 216, 0.42);
        --spring-light: #e5b9c6;
        --spring: #cf98a9;
        --spring-deep: #b27f90;
        --spring-fall: #d79fb0;
        --summer-light: #c6d9b4;
        --summer: #9cb788;
        --summer-deep: #7a9468;
        --summer-fall: #a8c294;
        --autumn-light: #ecc9a8;
        --autumn: #d29e70;
        --autumn-deep: #ad7850;
        --autumn-fall: #d99b6b;
        --winter-light: #eef3f6;
        --winter: #cfdae2;
        --winter-deep: #a9bac7;
        --winter-fall: #dce5eb;
    }
    :root[data-theme="dark"] .pub-image {
        filter: brightness(0.9);
    }
}
@media (max-width: 560px) {
    :root {
        --fs-h2: 22px;
        --fs-h3: 17px;
        --fs-body: 15px;
        --fs-filter: 12.5px;
    }
}

/* ----------------------------------------------------------
   Base
   ---------------------------------------------------------- */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a {
    color: inherit;
    text-decoration: none;
}
/* the sans font is loaded in 400, 500 and 700 */
b,
strong {
    font-weight: 700;
}
img {
    max-width: 100%;
    display: block;
}
/* keeps a hyphenated word such as "large-scale" on one line */
.nowrap {
    white-space: nowrap;
}
[hidden] {
    display: none !important;
}
/* text for screen readers only */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* keyboard focus (ress removes the default outline) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 3px;
}
#main:focus {
    outline: none;
}
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--strong);
    color: var(--on-strong);
    font-size: var(--fs-small);
    font-weight: 700;
}
.skip-link:focus {
    top: 12px;
}

/* monochrome icons that follow the text colour */
.icon {
    display: inline-block;
    flex: none;
    width: var(--icon-size, 1em);
    height: var(--icon-size, 1em);
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

/* links inside running text */
.lead a,
.news-text a,
.row-title a,
.row-text a,
.pub-venue a {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}
.lead a:hover,
.news-text a:hover,
.row-title a:hover,
.row-text a:hover,
.pub-venue a:hover {
    text-decoration-color: var(--main);
}

/* ----------------------------------------------------------
   Page layout
   ---------------------------------------------------------- */
.page {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}
.main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 72px clamp(28px, 6vw, 96px) 40px;
}
.main > * {
    max-width: var(--content-max);
}
/* avoid a lone word on the last line of titles and paragraphs */
.lead,
.section-title,
.pub-title,
.row-title,
.affiliations li,
.news-text,
.row-text,
.pub-authors,
.pub-venue {
    text-wrap: pretty;
}
/* Japanese titles: break between phrases (long compound words get extra
   break hints, see _includes/ja-wbr.html); `text-wrap: pretty` (set above)
   avoids a lone fragment on the last line. (`balance` is not used here:
   in Chrome it ignores the phrase boundaries and splits words.) */
.pub-title:lang(ja),
.row-title:lang(ja) {
    word-break: auto-phrase;
}
/* Japanese: the About text, affiliations and section titles break between
   phrases (item titles: see above); paragraphs keep the normal Japanese line
   breaking so that their lines stay evenly filled. No line starts with "ー"
   or a small kana. */
.lead:lang(ja),
.affiliations li:lang(ja),
.section-title:lang(ja) {
    word-break: auto-phrase;
}
.lead:lang(ja),
.affiliations li:lang(ja),
.section-title:lang(ja),
.pub-title:lang(ja),
.row-title:lang(ja) {
    line-break: strict;
}

/* ----------------------------------------------------------
   Sidebar (navigation)
   ---------------------------------------------------------- */
.sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: var(--base);
}
.sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 26px 32px;
}

/* profile */
.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.avatar {
    display: block;
    width: 148px;
    height: 148px;
    margin-bottom: 18px;
    padding: 5px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--accent), 0 12px 30px rgba(var(--shadow-rgb), 0.12);
    transition: transform 0.3s ease;
}
/* (hover effects only with a mouse: on touch screens they would stay after a tap) */
@media (hover: hover) {
    .avatar:hover {
        transform: translateY(-2px);
    }
}
.avatar picture,
.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.avatar img {
    object-fit: cover;
}
/* the tracking after the last letter is balanced by the left padding,
   so that the centred name stays in the middle */
.profile-name {
    padding-left: 0.14em;
    font-family: var(--serif);
    font-size: var(--fs-name);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.14em;
}
.profile-romaji {
    margin-top: 10px;
    padding-left: 0.28em;
    font-family: var(--mono);
    font-size: var(--fs-text);
    line-height: 1.5;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-2);
}
.profile-position {
    margin-top: 10px;
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--text-2);
}
.profile-group {
    margin-top: 2px;
    font-size: var(--fs-text);
    font-weight: 500;
    line-height: 1.6;
}
.social {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 12px;
    list-style: none;
}
.icon-button {
    --icon-size: 20px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--main);
    transition: background-color 0.2s, transform 0.15s;
}
.icon-button .icon {
    transition: translate 0.2s var(--ease-out);
}
.icon-button:active {
    transform: scale(0.92);
}
@media (hover: hover) {
    .icon-button:hover {
        background: var(--surface);
    }
    .icon-button:hover .icon {
        translate: 0 -1px;
    }
}

/* the theme button (js/style.js): in the top right corner of the sidebar
   on desktop, in the top bar on tablets and phones (see there). The moon
   in the light theme, the sun in the dark one (--dark: 0 or 1); on a
   click one turns away and shrinks as the other turns in */
.theme-toggle {
    --icon-size: 22px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--main);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s, transform 0.15s;
}
.theme-toggle:active {
    transform: scale(0.92);
}
@media (hover: hover) {
    .theme-toggle:hover {
        background: var(--surface);
    }
}
.theme-icon {
    grid-area: 1 / 1;
    transition: opacity 0.3s, rotate 0.5s var(--ease-out), scale 0.5s var(--ease-out);
}
.theme-moon {
    opacity: calc(1 - var(--dark));
    rotate: calc(var(--dark) * -90deg);
    scale: calc(1 - 0.5 * var(--dark));
}
.theme-sun {
    opacity: var(--dark);
    rotate: calc((1 - var(--dark)) * 90deg);
    scale: calc(0.5 + 0.5 * var(--dark));
}
/* desktop: in the corner, beside the photo */
.sidebar-theme {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

/* site links */
.nav-list {
    padding-top: 14px;
    border-top: 1px solid var(--line);
    list-style: none;
}
.nav-link {
    --icon-size: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-text);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
    transition: background-color 0.2s, transform 0.15s;
}
/* a label too long for its column (the lab's name in Japanese on the
   narrowest phones) wraps into two even lines, not one character alone */
.nav-link > span:not(.icon) {
    text-wrap: balance;
}
.nav-link:active {
    transform: scale(0.98);
}
@media (hover: hover) {
    .nav-link:hover {
        background: var(--surface-hover);
    }
}

/* table of contents */
.toc {
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.toc-title {
    margin: 0 0 4px 12px;
    font-size: var(--fs-text);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.14em;
    color: var(--text-2);
}
.toc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 6px;
    list-style: none;
}
.toc-list a {
    display: block;
    padding: 2px 10px;
    border-left: 2px solid transparent;
    font-size: var(--fs-small);
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--text-2);
    transition: color 0.2s, border-color 0.2s;
}
@media (hover: hover) {
    .toc-list a:hover {
        color: var(--main);
    }
}
.toc-list a.is-active {
    border-left-color: var(--accent);
    color: var(--main);
    font-weight: 700;
}

/* scroll cue (phones only) */
.scroll-cue {
    display: none;
}

/* ----------------------------------------------------------
   Sections
   ---------------------------------------------------------- */
.section {
    padding: 60px 0;
}
/* every other section (News, Experience, Projects, Talks, Skills) has a very
   light tint across the whole width of the content area, so that the sections
   stand apart. The colour is painted as a border image that reaches 100vmax
   to the left and right (under the sidebar; it does not widen the page). */
.section:nth-of-type(even) {
    border-image: conic-gradient(var(--section-tint) 0 0) fill 0 / / 0 100vmax;
}
/* section title; on the Japanese page the English title follows as a label */
.section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 16px;
    margin-bottom: 28px;
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.12em;
}
.title-en {
    font-family: var(--mono);
    font-size: var(--fs-meta);
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-2); /* on the base colour: the lighter grey would be too faint */
}
.section-note {
    margin: -16px 0 0;
    font-size: var(--fs-small);
    color: var(--text-2);
}
.section-note u {
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.subsection-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 44px 0 6px;
    font-family: var(--serif);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.1em;
    scroll-margin-top: 24px;
}
.subsection-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
/* Japanese subsection titles break only between their terms (after a ・
   or before a bracket), not in the middle of a word such as ワークショップ */
.subsection-title:lang(ja) {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.subsection-title .count {
    min-width: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    font-family: var(--mono);
    font-size: var(--fs-meta);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0;
    text-align: center;
}

/* hero (about) */
.hero {
    padding-top: 4px;
}
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-ink);
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}
.lead {
    margin-top: 20px;
    font-size: var(--fs-lede);
}
/* current affiliations: the "Affiliation" label, then "organization — role"
   lines with a rule on the left */
.affiliation {
    margin-top: 24px;
}
.affiliations {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-left: 16px;
    border-left: 2px solid var(--line);
    list-style: none;
    font-size: var(--fs-text);
    line-height: 1.7;
    color: var(--text-2);
}
.affiliation-org {
    font-weight: 500;
    color: var(--main);
}
.affiliation-sep {
    color: var(--text-3);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.button {
    --icon-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: var(--fs-text);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.04em;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.button .icon {
    transition: translate 0.25s var(--ease-out);
}
.button:active {
    transform: scale(0.97);
}
.button-primary {
    background: var(--strong);
    color: var(--on-strong);
}
@media (hover: hover) {
    .button-primary:hover {
        background: var(--strong-hover);
    }
    .button-primary:hover .icon {
        translate: 0 2px;
    }
}
.interests {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 36px;
}
.label {
    font-size: var(--fs-text);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.14em;
}
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}
.tag {
    padding: 5px 15px;
    border-radius: 999px;
    background: var(--tag-bg);
    font-size: var(--fs-text);
    font-weight: 500;
    line-height: 1.5;
}

/* news */
.news-list {
    list-style: none;
}
.news-item {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: baseline;
    gap: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}
.news-item:first-child {
    border-top: 0;
    padding-top: 0;
}
.news-date {
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.7;
    color: var(--text-3);
}
.news-text {
    font-size: var(--fs-text);
    line-height: 1.7;
}
.pub-reset {
    --icon-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 18px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    list-style: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
}
.pub-reset:active {
    transform: scale(0.97);
}
@media (hover: hover) {
    .pub-reset:hover {
        background: var(--base);
    }
}

/* dated rows (education, experience, projects, awards, talks, activities) */
.row-list {
    list-style: none;
}
.row {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: baseline;
    gap: 28px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
}
.row:first-child {
    border-top: 0;
    padding-top: 4px;
}
.row-date {
    word-break: keep-all;
    overflow-wrap: anywhere;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.7;
    color: var(--text-3);
}
.row-title {
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.6;
}
.row-text {
    margin-top: 2px;
    font-size: var(--fs-sub);
    color: var(--text-2);
}

/* publications: filter buttons and search box (shown only with JavaScript) */
.pub-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 24px;
}
.pub-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 15px 6px 16px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: var(--fs-filter);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    color: var(--main);
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.15s;
}
.filter-btn:active {
    transform: scale(0.96);
}
@media (hover: hover) {
    .filter-btn:hover {
        background: var(--base);
    }
}
.filter-btn[aria-pressed="true"] {
    background: var(--strong);
    box-shadow: none;
    color: var(--on-strong);
}
.filter-count {
    font-family: var(--mono);
    font-size: var(--fs-chip);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-3);
}
.filter-btn[aria-pressed="true"] .filter-count {
    color: var(--on-strong-2);
}
/* a kind without any paper matching the search */
.filter-btn.is-empty:not([aria-pressed="true"]) {
    color: var(--text-3);
}
.pub-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
}
.pub-search-icon {
    --icon-size: 14px;
    position: absolute;
    top: 50%;
    left: 15px;
    color: var(--text-3);
    transform: translateY(-50%);
    pointer-events: none;
}
.pub-search input {
    width: 100%;
    min-height: 40px;
    padding: 8px 40px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: var(--fs-small);
    line-height: 1.4;
    color: var(--main);
    transition: box-shadow 0.2s;
}
.pub-search input::placeholder {
    color: var(--text-3);
    opacity: 1;
}
.pub-search input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent-ink);
}
/* the search box has its own clear button */
.pub-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.search-clear {
    --icon-size: 12px;
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--text-2);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color 0.2s, scale 0.15s;
    animation: fade-in 0.2s ease both;
}
.search-clear:active {
    scale: 0.9;
}
@media (hover: hover) {
    .search-clear:hover {
        background: var(--base);
    }
}
.pub-status:not(:empty) {
    margin-top: 14px;
    font-size: var(--fs-small);
    color: var(--text-2);
}
.pub-empty {
    margin-top: 28px;
    padding: 28px 20px;
    border-radius: var(--radius-md);
    background: var(--base);
    font-size: var(--fs-text);
    text-align: center;
    color: var(--text-2);
    animation: rise-in 0.36s var(--ease-out) both;
}
.pub-reset {
    margin-top: 12px;
    background: var(--surface);
    color: var(--main);
}

/* publications: figure on the left, text on the right */
.pub-list {
    list-style: none;
}
.pub {
    display: grid;
    grid-template-columns: var(--media-w) minmax(0, 1fr);
    gap: 32px;
    padding: 24px 0;
}
/* papers (or a whole kind) brought back by the filter buttons or the search
   rise in briefly (js/style.js adds .is-entering) */
.pub-group.is-entering,
.pub.is-entering {
    animation: rise-in 0.36s var(--ease-out) both;
}
/* a rule above every shown paper except the first one of its list */
.pub:not([hidden]) ~ .pub {
    border-top: 1px solid var(--line);
}
.pub-media {
    align-self: start;
    margin-top: 4px;
}
.pub-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    border-radius: 12px;
    background: var(--figure-bg);
    box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(var(--shadow-rgb), 0.08);
}
.pub-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    padding: 10px 8px;
    border-radius: 12px;
    background: var(--base);
    text-align: center;
}
.pub-tile-venue {
    padding-left: 0.04em;
    font-family: var(--serif);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.04em;
}
.pub-tile-year {
    margin-top: 2px;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    color: var(--text-2);
}
.pub-tag {
    margin-bottom: 2px;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--accent-ink);
}
.pub-title {
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.6;
}
.pub-authors {
    margin-top: 6px;
    font-size: var(--fs-sub);
    color: var(--text-2);
}
/* names are not broken across lines (_includes/pub-list.html) */
.pub-authors .author {
    white-space: nowrap;
}
.pub-authors u {
    color: var(--main);
    font-weight: 700;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.pub-venue {
    margin-top: 2px;
    font-size: var(--fs-small);
    color: var(--text-2);
}
.pub-venue em {
    font-style: normal;
    color: var(--main);
}

/* chips: links and award badges */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.chip {
    --icon-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 28px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-family: var(--mono);
    font-size: var(--fs-chip);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--main);
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
a.chip:active {
    transform: scale(0.96);
}
@media (hover: hover) {
    a.chip:hover {
        background: var(--accent-soft);
        box-shadow: inset 0 0 0 1px var(--accent);
    }
}
.chip-award {
    background: var(--accent-soft);
    box-shadow: none;
    font-family: var(--sans);
    font-size: var(--fs-badge);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* footer */
.footer {
    padding: 36px 0 8px;
    font-family: var(--mono);
    font-size: var(--fs-meta);
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: var(--text-3);
}
.footer-sep {
    margin: 0 6px;
}

/* toast for the e-mail copy button: as wide as its text, up to the width
   of the screen less 16px on each side (with left: 50% alone it could only
   take half the screen); a pill on one line, a rounded box when the text
   wraps on a narrow screen (js/style.js puts the address in a span) */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 11px 20px;
    border-radius: 23px;
    background: var(--strong);
    color: var(--on-strong);
    font-size: var(--fs-small);
    text-align: center;
    overflow-wrap: anywhere;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity 0.25s, transform 0.25s;
}
.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* the address: whole, on the next line if it does not fit after the label */
.toast-address {
    display: inline-block;
}

/* ----------------------------------------------------------
   Motion (shared keyframes). The small motions of this page: buttons and
   chips sink a little while pressed, icons nudge on hover, content that
   appears (papers brought back by the filter, the search's clear
   button, the empty message) rises or fades in once. All motion
   stops when the reader prefers reduced motion (end of this file).
   ---------------------------------------------------------- */
@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
}

/* ----------------------------------------------------------
   Top bar and menu drawer (tablets and phones: 960px and below;
   hidden on desktop)
   The bar: frosted glass fixed to the top of the screen. The page scrolls
   behind it and shows through, blurred (backdrop-filter on the bar only,
   so its own text and icons stay sharp). Left: the photo and the name,
   which appear once the name on the cover has scrolled under the bar.
   Right: the menu button.
   The drawer: slides in below the bar from the right edge of the screen
   while the page beside it dims, and slides back out the same way; it
   holds the table of contents and the site links (what the sidebar shows
   on desktop).
   js/style.js sets .is-scrolled, .has-title and .is-open on .topbar and
   .menu-open on <html>.
   ---------------------------------------------------------- */
.topbar,
.topbar-scrim {
    display: none;
}
@media (max-width: 960px) {
    :root {
        --topbar-h: 56px;
        --topbar-pad: 28px;    /* the side margin of the content */
        --drawer-w: 420px;     /* phones: all but a strip of the dimmed page */
        /* the drawer moves fast and then slows down, both ways */
        --drawer-open-time: 0.48s;
        --drawer-open-ease: cubic-bezier(0.35, 0.15, 0.25, 0.9);
        --drawer-close-time: 0.46s;
        --drawer-close-ease: cubic-bezier(0.3, 0.2, 0.25, 0.9);
    }
    /* a link to a section stops below the bar (the sections have their own
       top padding; the About section has almost none, so it gets a margin) */
    html {
        scroll-padding-top: var(--topbar-h);
    }
    .hero {
        scroll-margin-top: 20px;
    }
    /* the page stays still behind the open drawer */
    html.menu-open {
        overflow: hidden;
    }
    .topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;
        display: block;
    }
    .topbar-bar {
        position: relative;
        z-index: 1;    /* above the drawer and its shadow */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: var(--topbar-h);
        /* the menu button's label ends at the content margin */
        padding: 0 calc(var(--topbar-pad) - 12px) 0 var(--topbar-pad);
        /* the base colour, translucent, over the blurred page */
        background: var(--glass);
        -webkit-backdrop-filter: blur(14px) saturate(170%);
        backdrop-filter: blur(14px) saturate(170%);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
    /* a hairline and a soft shadow once the page has scrolled */
    .topbar.is-scrolled .topbar-bar {
        box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(var(--shadow-rgb), 0.06);
    }
    /* while the drawer is open the bar takes the drawer's colour */
    .topbar.is-open .topbar-bar {
        background: var(--glass-solid);
        box-shadow: 0 1px 0 var(--line);
    }
    /* browsers without backdrop-filter: an almost opaque bar */
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .topbar-bar {
            background: var(--glass-solid);
        }
    }

    /* photo and name (a link to the top of the page) */
    .topbar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        min-height: 44px;
        transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    }
    /* with JavaScript they appear once the name on the cover has scrolled
       under the bar, or while the drawer is open */
    .js .topbar:not(.has-title):not(.is-open) .topbar-brand {
        visibility: hidden;
        opacity: 0;
        transform: translateY(6px);
    }
    .topbar-brand picture {
        flex: none;
    }
    .topbar-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 0 1px var(--accent);
    }
    .topbar-name {
        overflow: hidden;
        font-family: var(--serif);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0.1em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* the keyboard focus ring close round the name and the buttons, so that
       it stays on the screen (the bar is 48px tall on short screens, and
       the menu button ends 4px from the edge on small phones) */
    .topbar-bar :focus-visible {
        outline-offset: 1px;
    }

    /* on the right: the theme button, then the menu button */
    .topbar-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: none;
    }
    /* the theme button is in the bar, not in the sidebar */
    .sidebar-theme {
        display: none;
    }
    @media (hover: hover) {
        .topbar-theme:hover {
            background: var(--surface-hover);
        }
    }

    /* menu button: three lines and a label ("Menu" / "Close"; both are
       stacked so that the button keeps its width) */
    .topbar-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex: none;
        min-height: 40px;
        padding: 0 12px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: var(--fs-meta);
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--main);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s, transform 0.15s;
    }
    .topbar-toggle:lang(ja) {
        font-family: var(--sans);
        font-size: var(--fs-small);
        letter-spacing: 0.08em;
    }
    .topbar.is-open .topbar-toggle {
        background: var(--surface);
    }
    .topbar-toggle:active {
        transform: scale(0.96);
    }
    /* (hover only with a mouse: on touch screens it would stay after a tap) */
    @media (hover: hover) {
        .topbar-toggle:hover {
            background: var(--surface-hover);
        }
    }
    /* the three lines: opening, they meet in the middle and then turn into
       a cross; closing, the cross turns back into one line that then
       splits into three. (With a mouse, the middle line shortens on hover.) */
    .topbar-toggle-icon {
        position: relative;
        width: 18px;
        height: 14px;
    }
    .topbar-toggle-icon > span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }
    .topbar-toggle-icon > span:nth-child(1) {
        top: 0;
    }
    .topbar-toggle-icon > span:nth-child(2) {
        top: 6px;
        transform-origin: right center;
        transition: opacity 0s 0.16s, scale 0.25s ease;
    }
    .topbar-toggle-icon > span:nth-child(3) {
        bottom: 0;
    }
    .topbar-toggle-icon > span:nth-child(odd) {
        transition: translate 0.16s ease 0.16s, rotate 0.16s ease;
    }
    .topbar.is-open .topbar-toggle-icon > span:nth-child(odd) {
        transition: translate 0.16s ease, rotate 0.16s ease 0.16s;
    }
    .topbar.is-open .topbar-toggle-icon > span:nth-child(1) {
        translate: 0 6px;
        rotate: 45deg;
    }
    .topbar.is-open .topbar-toggle-icon > span:nth-child(2) {
        opacity: 0;
    }
    .topbar.is-open .topbar-toggle-icon > span:nth-child(3) {
        translate: 0 -6px;
        rotate: -45deg;
    }
    @media (hover: hover) {
        .topbar:not(.is-open) .topbar-toggle:hover .topbar-toggle-icon > span:nth-child(2) {
            scale: 0.6 1;
        }
    }
    .topbar-toggle-label {
        display: grid;
    }
    /* the label fades out, then the other one fades in */
    .topbar-toggle-label > span {
        grid-area: 1 / 1;
        transition: opacity 0.12s 0.12s, visibility 0s 0.12s;
    }
    .topbar.is-open .label-menu,
    .topbar:not(.is-open) .label-close {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.12s, visibility 0s 0.12s;
    }

    /* the drawer: below the bar, slides in from the right edge of the screen */
    .topbar-menu {
        position: fixed;
        top: var(--topbar-h);
        right: 0;
        bottom: 0;
        width: min(var(--drawer-w), 100%);
        background: var(--base);
        box-shadow: -10px 0 32px rgba(var(--shadow-rgb), 0.12);
        visibility: hidden;
        transform: translateX(100%);
        transition: transform var(--drawer-close-time) var(--drawer-close-ease),
            visibility 0s var(--drawer-close-time);
    }
    .topbar.is-open .topbar-menu {
        visibility: visible;
        transform: translateX(0);
        transition: transform var(--drawer-open-time) var(--drawer-open-ease);
    }
    .topbar-menu-scroll {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .topbar-menu-inner {
        padding: 22px var(--topbar-pad) 32px;
    }
    /* "Contents": a small label, like the label of the About section */
    .topbar-menu .toc-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 12px;
        font-family: var(--mono);
        font-size: var(--fs-meta);
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--accent-ink);
    }
    .topbar-menu .toc-title::before {
        content: "";
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: var(--accent);
    }
    /* the sections, one per row, in the serif of the section titles; the
       section being read is white with an accent line */
    .topbar-menu .toc-list {
        display: block;
    }
    .topbar-menu .toc-list a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 6px 16px;
        border-left: 0;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        font-family: var(--serif);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.1em;
        color: var(--text-2);
        transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
    }
    .topbar-menu .toc-list a.is-active {
        background: var(--surface);
        box-shadow: inset 3px 0 0 var(--accent);
        color: var(--main);
        font-weight: 600;
    }
    .topbar-menu .toc-list a:active {
        background: var(--surface-hover);
    }
    @media (hover: hover) {
        .topbar-menu .toc-list a:hover {
            background: var(--surface-hover);
            color: var(--main);
        }
    }
    /* the site links in as many columns as the drawer's width allows
       (one on small phones, so that no label breaks) */
    .topbar-menu .nav-list {
        grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
        margin-top: 20px;
    }

    /* dims the page beside the open drawer (in step with the drawer);
       a tap closes the drawer */
    .topbar-scrim {
        position: fixed;
        inset: 0;
        z-index: 59;
        display: block;
        background: var(--scrim);
        opacity: 0;
        visibility: hidden;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
        transition: opacity var(--drawer-close-time) var(--drawer-close-ease),
            visibility 0s var(--drawer-close-time);
    }
    .topbar.is-open + .topbar-scrim {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--drawer-open-time) var(--drawer-open-ease);
    }
}
/* not on paper (a fixed bar would repeat at the top of every page; the
   theme button does nothing there) */
@media print {
    .topbar,
    .topbar-scrim,
    .theme-toggle {
        display: none !important;
    }
    html {
        scroll-padding-top: 0;
    }
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

/* wide screens: centre the content column in the remaining space */
@media (min-width: 1600px) {
    :root {
        --content-max: 920px;
    }
    .main > * {
        margin-left: auto;
        margin-right: auto;
    }
}

/* desktop sidebar: the six link icons fit in one row */
@media (min-width: 961px) {
    .social {
        gap: 0;
    }
    .icon-button {
        width: 38px;
        height: 38px;
    }
}
@media (min-width: 961px) and (max-width: 1100px) {
    .icon-button {
        width: 36px;
        height: 36px;
    }
}

/* desktop screens up to 900px tall: a slightly smaller photo */
@media (min-width: 961px) and (max-height: 900px) {
    .sidebar-inner {
        padding-top: 32px;
        padding-bottom: 24px;
    }
    .avatar {
        width: 132px;
        height: 132px;
    }
}
/* short desktop screens: compact sidebar (an even more compact one below 720px) */
@media (min-width: 961px) and (max-height: 820px) {
    .sidebar-inner {
        gap: 12px;
        padding: 24px 22px 20px;
    }
    .avatar {
        width: 104px;
        height: 104px;
        margin-bottom: 12px;
        padding: 4px;
    }
    .social {
        margin-top: 6px;
    }
    .icon-button {
        --icon-size: 18px;
        width: 36px;
        height: 36px;
    }
    .nav-list,
    .toc {
        padding-top: 10px;
    }
    .nav-link {
        padding: 3px 12px;
    }
    .toc-list a {
        padding: 1px 10px;
    }
}
@media (min-width: 961px) and (max-height: 720px) {
    :root {
        --fs-name: 30px;    /* the English name fits on one line (two below 1100px) */
    }
    .sidebar-inner {
        gap: 10px;
        padding-top: 16px;
        padding-bottom: 10px;
    }
    .avatar {
        width: 72px;
        height: 72px;
        margin-bottom: 8px;
        padding: 3px;
    }
    .profile-romaji,
    .profile-position,
    .social {
        margin-top: 2px;
    }
    .nav-list,
    .toc {
        padding-top: 8px;
    }
    .nav-link {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

/* medium screens: narrower sidebar, margins and figures */
@media (max-width: 1100px) {
    :root {
        --sidebar-w: 268px;
        --media-w: 200px;
    }
    .sidebar-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .main {
        padding-left: 40px;
        padding-right: 40px;
    }
    .row {
        grid-template-columns: 10rem minmax(0, 1fr);
        gap: 22px;
    }
    .pub {
        gap: 24px;
    }
}

/* tablets and phones: the sidebar is shown above the content
   (below 960px a side-by-side layout leaves too little room for the text) */
@media (max-width: 960px) {
    :root {
        /* the name grows with the screen (36px to 58px), as on otofu.org */
        --fs-name: clamp(36px, 5.8vw, 58px);
    }
    .page {
        display: block;
    }
    .sidebar {
        position: relative;
        width: auto;
        height: auto;
        overflow: visible;
    }
    .sidebar-inner {
        max-width: 640px;
        margin: 0 auto;
        /* the top bar lies over the top of the cover */
        padding: calc(var(--topbar-h) + 40px) 24px 32px;
    }
    /* site links in three columns (two on phones) to keep the header short */
    .nav-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px 8px;
    }
    .nav-link {
        gap: 10px;
        padding: 8px 10px;
    }
    .toc {
        display: none;
    }
    .main {
        padding: 56px 28px 32px;
    }
}

/* phones */
@media (max-width: 600px) {
    :root {
        --media-w: 120px;
        --topbar-pad: 20px;
        --drawer-w: calc(100% - 40px);
    }
    .sidebar {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
    }
    .sidebar-inner {
        flex: 1;
        justify-content: center;
        width: 100%;
        padding: calc(var(--topbar-h) + 16px) 24px 12px;
    }
    .avatar {
        width: 168px;
        height: 168px;
    }
    .nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .scroll-cue {
        --icon-size: 20px;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin: 4px auto 28px;
        border-radius: 50%;
        background: var(--surface);
        color: var(--main);
        box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.15);
        animation: cue 1.8s ease-in-out infinite;
    }
    @keyframes cue {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(6px);
        }
    }

    .main {
        padding: 48px 20px 28px;
    }
    .section {
        padding: 48px 0;
    }
    /* (the About section has the same top padding here: no extra margin) */
    .hero {
        scroll-margin-top: 0;
    }
    .section-title {
        margin-bottom: 22px;
    }
    .section-note {
        margin-top: -10px;
    }
    /* long subsection headings wrap: keep the count right after the text
       and draw the rule below instead of beside it */
    .subsection-title {
        display: block;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--line);
    }
    .subsection-title::after {
        content: none;
    }
    .subsection-title .count {
        /* inline (not inline-block), so it never wraps away from the last word */
        display: inline;
        margin-left: 10px;
        vertical-align: 0.1em;
    }
    .button {
        min-height: 46px;
        padding: 10px 20px;
    }

    .news-item,
    .row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    /* publications: a small figure at the top left; the venue and title
       wrap around it and then use the full width, the details follow below */
    .pub {
        display: flow-root;
        padding: 22px 0;
    }
    .pub-media {
        float: left;
        width: var(--media-w);
        margin: 3px 14px 10px 0;
    }
    .pub-image,
    .pub-tile {
        border-radius: 8px;
    }
    .pub-tile {
        padding: 6px;
    }
    .pub-tag {
        margin-bottom: 2px;
        letter-spacing: 0.02em;
    }
    .pub-authors {
        clear: left;
    }
    /* the search box gets a row of its own */
    .pub-search {
        flex-basis: 100%;
        max-width: none;
    }

    /* the footer credits on separate lines */
    .footer-sep {
        display: none;
    }
    .footer-credit {
        display: block;
    }
}

/* small phones: slimmer gutters so that labels stay on one line */
@media (max-width: 400px) {
    :root {
        --topbar-pad: 16px;
    }
    .sidebar-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
    .nav-list {
        column-gap: 4px;
    }
    .nav-link {
        gap: 10px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .main {
        padding-left: 16px;
        padding-right: 16px;
    }
}
@media (max-width: 359px) {
    :root {
        --media-w: 104px;
        --fs-name: 34px;    /* the English name fits on one line */
    }
    .nav-link {
        font-size: var(--fs-small);
    }
    /* the top bar: the whole name beside the theme and menu buttons */
    .topbar-bar {
        gap: 8px;
    }
    .topbar-brand {
        gap: 8px;
    }
    .topbar-name {
        font-size: 15px;
    }
    .topbar-actions {
        gap: 0;
    }
    .topbar-theme {
        width: 36px;
    }
}
/* the narrowest screens (below 320px, such as the cover screen of a folding
   phone): the menu button without its label, which is still read out */
@media (max-width: 319px) {
    .topbar-toggle {
        position: relative;
        padding: 0 11px;
    }
    .topbar-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* short phones (portrait): a smaller photo and tighter spacing, so that
   the cover fits on the screen below the top bar */
@media (max-width: 600px) and (max-height: 700px) {
    .sidebar-inner {
        padding-top: calc(var(--topbar-h) + 14px);
    }
    .avatar {
        width: 120px;
        height: 120px;
    }
}
@media (max-width: 600px) and (max-height: 600px) {
    .sidebar-inner {
        gap: 14px;
        padding-top: calc(var(--topbar-h) + 12px);
    }
    .avatar {
        width: 88px;
        height: 88px;
        margin-bottom: 12px;
    }
    .social {
        margin-top: 8px;
    }
    .nav-link {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .scroll-cue {
        margin-bottom: 16px;
    }
}

/* phones and tablets in landscape: a compact header instead of a
   full-screen cover, so that the links are visible on the first screen */
@media (max-width: 960px) and (max-height: 500px) {
    :root {
        --fs-name: 30px;
        --topbar-h: 48px;
    }
    /* the name in the bar as tall as the buttons, inside the lower bar */
    .topbar-brand {
        min-height: 40px;
    }
    .sidebar {
        min-height: 0;
    }
    .sidebar-inner {
        padding-top: calc(var(--topbar-h) + 16px);
        padding-bottom: 20px;
    }
    .avatar {
        width: 104px;
        height: 104px;
    }
    .profile-romaji,
    .profile-position {
        margin-top: 4px;
    }
    .nav-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .scroll-cue {
        display: none;
    }
    /* the drawer: the sections in two columns of smaller rows, so that
       more of the menu fits on the short screen */
    .topbar-menu-inner {
        padding-top: 16px;
    }
    .topbar-menu .toc-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 8px;
    }
    .topbar-menu .toc-list a {
        min-height: 40px;
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 15px;
    }
}

/* ----------------------------------------------------------
   Sakura: a cherry tree drawn in characters above the About text,
   through the seasons (js/ascii-sakura.js; the colours are with the
   design tokens). Decorative: hidden without JavaScript, in print,
   and from screen readers (aria-hidden in the markup).
   ---------------------------------------------------------- */
.hero-sakura {
    display: none;
    height: 200px;
    margin: -28px 0 20px;
}
html.js .hero-sakura {
    display: block;
}
.ascii-sakura {
    display: block;
    width: 100%;
    height: 100%;
    /* the size of the motion: one step is a character of this font and
       size (the characters themselves are drawn at 0.4 of it, finer) */
    font-family: var(--mono);
    font-size: 12px;
    line-height: 13px;
}
@media (max-width: 600px) {
    .hero-sakura {
        height: 170px;
        margin-top: -16px;
    }
    .ascii-sakura {
        font-size: 11px;
        line-height: 12px;
        /* a narrower screen: the tree takes more of the width */
        --sakura-x: 0.4, 0.98;
    }
}
@media print {
    html.js .hero-sakura {
        display: none;
    }
}

/* touch screens: 16px in the search box, so that phones do not zoom in on focus */
@media (hover: none) and (pointer: coarse) {
    .pub-search input {
        font-size: 16px;
    }
}

/* switching the theme: the page fades from the one to the other
   (js/style.js, in browsers with View Transitions; at once with reduced
   motion) */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}