/* The interim theme "scholar": docs/ui.md §2 tokens and §3 page anatomy, with system font stacks only. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #16181d;
  --fg-2: #3a404c;
  --fg-3: #5b6270;
  --fg-numeral: #6f7682;
  --line: #e4e7ec;
  --rule: #16181d;
  --surface: #f5f7fd;
  --code-bg: #f6f8fa;
  --accent: #2f5bea;
  --accent-ink: #1d3fa8;
  --award-fg: #8a4b00;
  --award-bg: #fff4e0;
  --footer-bg: #16181d;
  --footer-fg: #f4f5f7;
  /* System fonts only: Chinese, Japanese and Korean text falls back to the fonts the reader's system has, and the
     page's lang attributes pick their regional glyphs. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Songti SC", "Hiragino Mincho ProN",
    "Yu Mincho", "AppleMyungjo", "Noto Serif CJK SC", "Noto Serif SC", "Noto Serif JP", "Noto Serif KR", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans",
    "Yu Gothic", "Apple SD Gothic Neo", "Malgun Gothic", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC",
    "Noto Sans JP", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --container: 1080px;
  --reading: 680px;
  --gutter: 32px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --fg: #e8eaee;
  --fg-2: #c3c8d0;
  --fg-3: #9aa3ae;
  --fg-numeral: #7f8895;
  --line: #262a31;
  --rule: #e8eaee;
  --surface: #161b26;
  --code-bg: #151820;
  --accent: #8fb0ff;
  --accent-ink: #c2d3ff;
  --award-fg: #f2c27a;
  --award-bg: #2a2114;
  --footer-bg: #05070a;
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --fg: #e8eaee;
    --fg-2: #c3c8d0;
    --fg-3: #9aa3ae;
    --fg-numeral: #7f8895;
    --line: #262a31;
    --rule: #e8eaee;
    --surface: #161b26;
    --code-bg: #151820;
    --accent: #8fb0ff;
    --accent-ink: #c2d3ff;
    --award-fg: #f2c27a;
    --award-bg: #2a2114;
    --footer-bg: #05070a;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.6 var(--sans);
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

/* The toggle and the filter chips need their scripts. The boot script marks html.js before the first paint, so they
   take their place at once and nothing shifts when the scripts load. */
html:not(.js) .toggle,
html:not(.js) .filters {
  display: none;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--accent);
  z-index: 10;
}

.skip:focus {
  top: 8px;
}

.container {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.reading {
  max-width: var(--reading);
}

/* Header */

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  min-height: 44px;
}

.brand .mark {
  width: 22px;
  height: 26px;
  border: 2px solid var(--fg);
  border-radius: 2px;
  clip-path: polygon(0 0, 70% 0, 100% 25%, 100% 100%, 0 100%);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg-2);
  font-size: 15px;
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.toggle button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.toggle button {
  padding: 0 14px;
}

.toggle button[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
}

/* Typography */

h1,
h2,
h3,
.display {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.page-title {
  font-size: clamp(40px, 6vw, 72px);
  margin: 32px 0 12px;
}

.serif {
  font-family: var(--serif);
}

.label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.meta {
  color: var(--fg-3);
  font-size: 14px;
}

.lede {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--fg-2);
}

/* Sections */

main {
  padding-bottom: 96px;
}

.section {
  margin-top: 96px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 24px;
}

.section-head h2 {
  font-size: 40px;
  margin: 0 0 8px;
}

.section-head.quiet {
  border-bottom-width: 1px;
}

.section-head.quiet h2 {
  font-size: 28px;
}

@media (max-width: 640px) {
  .section {
    margin-top: 64px;
  }
  .section-head h2 {
    font-size: 32px;
  }
}

/* Hero */

.hero {
  margin-top: 48px;
}

/* The portrait: one uncropped file until the media plan makes its sizes (roadmap M3a), cropped here around its
   focus; the initials stand in when there is none. */
.portrait {
  width: 112px;
  height: 140px;
  margin: 0 0 24px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

.portrait.initials {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 44px;
  color: var(--fg-2);
}

.hero .name {
  font-size: clamp(52px, 7.5vw, 96px);
  margin: 0 0 12px;
}

.hero .role {
  color: var(--fg-2);
  margin: 0 0 20px;
}

.hero .tagline {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.3;
  margin: 0 0 16px;
  max-width: 820px;
}

.hero .bio {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  max-width: var(--reading);
  color: var(--fg-2);
}

@media (max-width: 640px) {
  .hero .tagline {
    font-size: 24px;
  }
  .hero .bio {
    font-size: 18px;
  }
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-size: 14px;
  text-decoration: none;
}

a.pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.status {
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent-ink);
}

/* News */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-list li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .news-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.news-text {
  font-family: var(--serif);
  font-size: 18px;
}

/* Publications */

.legend {
  color: var(--fg-3);
  font-size: 14px;
}

.pubs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pub {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.pub .title {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.3;
  margin: 6px 0;
  font-weight: 500;
}

.pub .title a {
  color: var(--fg);
  text-decoration: none;
}

.pub .title a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.pub .authors {
  color: var(--fg-2);
  margin: 0;
}

.pub .venue {
  font-family: var(--serif);
  font-style: italic;
  color: var(--fg-2);
  margin: 2px 0 8px;
}

.chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--award-bg);
  color: var(--award-fg);
  font-size: 13px;
  font-weight: 600;
}

.year-group {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 24px;
}

.year {
  font-size: 40px;
  font-weight: 800;
  color: var(--fg-numeral);
  margin: 12px 0 0;
}

@media (max-width: 640px) {
  .year-group {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.filters button {
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.filters button[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

details > summary {
  cursor: pointer;
  color: var(--accent);
  min-height: 24px;
}

pre,
code {
  font-family: var(--mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  padding: 16px;
  border-radius: 10px;
  background: var(--code-bg);
  line-height: 1.5;
}

/* Highlighted code keeps the code theme's own background, which its token colors are contrast-checked against. */
pre.hl {
  border: 1px solid var(--line);
  background: transparent;
}

:not(pre) > code {
  padding: 0.1em 0.3em;
  border-radius: 4px;
  background: var(--code-bg);
}

.copyable {
  position: relative;
}

.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: 13px var(--sans);
  cursor: pointer;
}

/* Writing */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.card h2,
.card h3 {
  font-size: 24px;
  margin: 6px 0 8px;
}

.card h2 a,
.card h3 a {
  color: var(--fg);
  text-decoration: none;
}

.card h2 a:hover,
.card h3 a:hover {
  color: var(--accent);
}

.card p {
  font-family: var(--serif);
  color: var(--fg-2);
  margin: 0;
}

/* Posts */

.prose {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.7;
}

.prose h2 {
  font-size: 30px;
  margin-top: 48px;
}

.prose h3 {
  font-size: 23px;
  margin-top: 32px;
}

.prose figure {
  margin: 32px 0;
}

.prose figcaption {
  color: var(--fg-3);
  font-family: var(--sans);
  font-size: 14px;
}

.prose math[display="block"] {
  margin: 24px 0;
}

.prose table {
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 16px;
}

.prose th,
.prose td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.prose blockquote {
  margin: 24px 0;
  padding: 4px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

@media (max-width: 640px) {
  .prose {
    font-size: 18px;
  }
  .prose h2 {
    font-size: 26px;
  }
}

.toc {
  margin: 24px 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
}

.toc ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
}

/* Photos */

.album-list,
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-grid a,
.album-list a {
  display: block;
  min-height: 44px;
}

/* Footer */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 48px 0;
  font-size: 15px;
}

.site-footer a {
  color: var(--footer-fg);
}

.site-footer .cta {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 16px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  a,
  button {
    transition:
      color 0.15s,
      border-color 0.15s,
      background-color 0.15s;
  }
}