/* =========================
   Personal Website
   Toho blue sidebar + card version
========================= */

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: #1d2b36;
  background: #eef5fb;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Noto Sans JP",
    sans-serif;
  line-height: 1.7;
  overflow-wrap: break-word;
}

a {
  color: #005bac;
  text-decoration: none;
}

a:link {
  color: #005bac;
}

a:visited {
  color: #4f6f8f;
}

a:hover,
a:active {
  color: #d35400;
  text-decoration: underline;
}

/* =========================
   Left sidebar header
========================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 270px;
  height: 100vh;
  padding: 1.7em 1.2em;
  box-sizing: border-box;
  background: linear-gradient(180deg, #003f7f, #005bac);
  color: white;
  text-align: left;
  overflow-y: auto;
  box-shadow: 2px 0 14px rgba(0, 63, 127, 0.18);
}

.site-title {
  margin: 0 0 1em;
  font-size: 1.65rem;
  line-height: 1.25;
}

.site-title a,
.site-title a:link,
.site-title a:visited,
.site-title a:hover,
.site-title a:active {
  color: white;
  text-decoration: none;
}

.affiliation {
  margin: 0 0 1.6em;
  color: #eaf5ff;
  font-size: 0.92rem;
  line-height: 1.55;
}

/* =========================
   Sidebar navigation
========================= */

.global-nav {
  display: block;
  width: 100%;
}

.global-nav a {
  display: block;
  margin: 0.35em 0;
  padding: 0.65em 0.8em;
  color: white;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  box-sizing: border-box;
}

.global-nav a:link,
.global-nav a:visited,
.global-nav a:hover,
.global-nav a:active {
  color: white;
}

.global-nav a:hover {
  background: rgba(255, 255, 255, 0.24);
  text-decoration: none;
}

.global-nav a.current {
  background: white;
  color: #005bac;
}

/* =========================
   Main content
========================= */

.main-content {
  max-width: 1100px;
  margin-left: 310px;
  margin-right: auto;
  padding: 2em 2em 3em;
  box-sizing: border-box;
}

h1,
h2,
h3 {
  color: #003f7f;
}

h1 {
  margin: 0;
}

h2 {
  margin: 1.6em 0 0.8em;
  font-size: 1.55rem;
}

h3 {
  margin: 1.2em 0 0.5em;
  font-size: 1.2rem;
}

/* =========================
   Common cards
========================= */

.profile-section,
.content-card,
.paper-list > li,
.cv-list > li,
.talk-item,
.student-item,
.course-item,
.link-item {
  background: white;
  border-left: 6px solid #005bac;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 63, 127, 0.10);
}

.content-card {
  margin: 1.4em 0;
  padding: 1.5em;
}

.section-heading {
  margin-bottom: 1em;
}

.section-label {
  margin: 0 0 0.15em;
  color: #005bac;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  font-size: 1.6rem;
}

/* =========================
   Index page
========================= */

.profile-section {
  margin: 1.4em 0 2em;
  padding: 0;
  background: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

.profile-photo {
  text-align: center;
}

.profile-photo img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 63, 127, 0.16);
}

.profile-text {
  flex: 1 1 auto;
}

.research-list {
  padding-left: 0;
  list-style: none;
}

.research-list > li {
  margin: 0.8em 0;
  padding: 0.9em 1em;
}

/* =========================
   Paper page
========================= */

.paper-list {
  padding-left: 2.6em;
  padding-right: 0;
}

.paper-list > li {
  margin: 1em 0;
  padding: 1em 1.2em;
  line-height: 1.65;
}

/* =========================
   CV page
========================= */

.cv-list {
  padding-left: 0;
  list-style: none;
}

.cv-list > li {
  margin: 0.9em 0;
  padding: 1em 1.2em;
}

.cv-sublist {
  margin: 0.7em 0 0;
  padding-left: 1.4em;
}

/* =========================
   Talk page
========================= */

.talk-year {
  margin: 1.8em 0;
}

.talk-year h3 {
  margin: 1.2em 0 0.7em;
  padding-bottom: 0.25em;
  border-bottom: 2px solid #b8d4e8;
}

.talk-item {
  margin: 1em 0;
  padding: 1em 1.2em;
}

.talk-title {
  margin: 0;
  color: #003f7f;
  font-weight: 700;
}

.talk-info {
  margin: 0.35em 0 0;
  line-height: 1.6;
}

/* =========================
   Teaching page
========================= */

.teaching-section {
  margin: 1.5em 0;
}

.teaching-section h3 {
  margin: 1.2em 0 0.7em;
  padding-bottom: 0.25em;
  border-bottom: 2px solid #b8d4e8;
}

.student-list,
.course-list {
  margin: 0.8em 0;
}

.student-item,
.course-item {
  margin: 0.8em 0;
  padding: 0.9em 1em;
}

.student-label {
  display: inline-block;
  min-width: 3em;
  color: #005bac;
  font-weight: 700;
}

.course-title {
  margin: 0;
  color: #003f7f;
  font-weight: 700;
}

.course-info {
  margin: 0.2em 0 0;
  line-height: 1.6;
}

/* =========================
   Links page
========================= */

.link-section {
  margin: 1.5em 0;
}

.link-item {
  margin: 0.8em 0;
  padding: 0.9em 1em;
}

.link-title {
  margin: 0;
  color: #003f7f;
  font-weight: 700;
}

.link-info {
  margin: 0.2em 0 0;
  line-height: 1.6;
}

/* =========================
   Lists
========================= */

ul,
ol {
  padding-right: 0;
}

li {
  line-height: 1.7;
}

/* =========================
   MathJax
========================= */

mjx-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

mjx-container[jax="CHTML"] mjx-math {
  margin-left: 0.2em;
  margin-right: 0.2em;
  font-size: 100%;
}

/* =========================
   Responsive
========================= */

@media screen and (max-width: 720px) {
  .site-header {
    position: static;
    width: 100%;
    height: auto;
    padding: 1.2em 1em 1em;
    text-align: center;
    box-shadow: none;
  }

  .site-title {
    margin: 0 0 0.5em;
    font-size: 1.6rem;
    text-align: center;
  }

  .affiliation {
    margin: 0 0 1em;
    font-size: 0.9rem;
    text-align: center;
  }

  .global-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .global-nav a {
    flex: 1 1 50%;
    margin: 0;
    padding: 0.6em 0.4em;
    border-radius: 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.14);
    box-sizing: border-box;
  }

  .global-nav a.current {
    background: white;
    color: #005bac;
  }

  .main-content {
    max-width: none;
    margin-left: 0;
    padding: 1em 0.85em 2em;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  .profile-section {
    display: block;
    padding: 1.1em;
  }

  .profile-photo {
    margin-bottom: 1em;
  }

  .profile-photo img {
    width: min(100%, 320px);
    max-width: 320px;
  }

  .content-card,
  .paper-list > li,
  .cv-list > li,
  .research-list > li,
  .talk-item,
  .student-item,
  .course-item,
  .link-item {
    padding: 0.9em;
    border-left-width: 4px;
    border-radius: 10px;
  }

  .paper-list {
    padding-left: 2em;
  }

  mjx-container {
    font-size: 105%;
  }
}

.research-list {
  margin: 0.4em 0 0;
  padding-left: 1.4em;
  list-style: disc;
}

.research-list > li {
  margin: 0.25em 0;
  padding: 0;
  line-height: 1.35;
  background: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
}

/* =========================
   Button Link
   Inline rounded link button
========================= */

.button-link {
  display: inline-block;
  margin: 0 0.15em;
  padding: 0.18em 0.65em;
  color: #005bac;
  background: #eef6ff;
  border: 1px solid #9fc5e8;
  border-radius: 999px;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
  vertical-align: baseline;
}

.button-link:link,
.button-link:visited {
  color: #005bac;
}

.button-link:hover,
.button-link:active {
  color: #003f7f;
  background: #dceeff;
  border-color: #005bac;
  text-decoration: none;
}