/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Color tokens. The theme comes from <html data-theme="light|dark">, set by the
   inline script in <head> (saved choice, else the OS preference) and flipped by
   the toggle button. The media query is only a fallback when JS is off.
   Figures and logos keep a white card in both modes (they are drawn on white).
   ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --bg: #fff;
  --text: #000;
  --link: #1772d0;
  --link-hover: #f09228;
  --muted: #666;
  --highlight: #ffffd0;
  --placeholder-bg: #f0f0f0;
  --placeholder-text: #888;
  --card: #fff;
  --card-edge: #e4e4e4;
  --rule: #dddddd;
  --oral: red;
  --award: #ff8080;
}

/* Dark tokens appear twice (explicit choice + no-JS fallback); keep them in sync */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161719;
  --text: #e3e3e3;
  --link: #6cb2ff;
  --link-hover: #f5a442;
  --muted: #9b9b9b;
  --highlight: #463d17;
  --placeholder-bg: #26272a;
  --placeholder-text: #8c8c8c;
  --card: #fff;
  --card-edge: transparent;
  --rule: #3a3b3e;
  --oral: #ff6b6b;
  --award: #ff9a9a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #161719;
    --text: #e3e3e3;
    --link: #6cb2ff;
    --link-hover: #f5a442;
    --muted: #9b9b9b;
    --highlight: #463d17;
    --placeholder-bg: #26272a;
    --placeholder-text: #8c8c8c;
    --card: #fff;
    --card-edge: transparent;
    --rule: #3a3b3e;
    --oral: #ff6b6b;
    --award: #ff9a9a;
    }
}

/* Top-right corner: theme toggle + section menu. The menu only shows (and the corner
   only follows the scroll) when there is room beside the 800px column. */
html {
  scroll-behavior: smooth;
}

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

h2[id] {
  scroll-margin-top: 16px;
}

.corner {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.site-nav {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.site-nav a {
  font-size: 13px;
  color: var(--muted);
}

.site-nav a:hover {
  color: var(--link-hover);
}

.site-nav a.active {
  color: var(--text);
  font-weight: 700;
}

@media (min-width: 1340px) {
  .corner {
    position: fixed;
  }

  .site-nav {
    display: flex;
  }
}

/* Light/dark toggle. Shows the moon in light mode, the sun in dark mode */
.theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--placeholder-bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  color: var(--link-hover);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--link-hover);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.icon-sun,
[data-theme="dark"] .icon-moon {
  display: none;
}

[data-theme="dark"] .icon-sun {
  display: block;
}

/* ------------------------------------------------------------------
   Base styles (Jon Barron template)
   ------------------------------------------------------------------ */
a {
  color: var(--link);
  text-decoration: none;
}

a:focus,
a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--link-hover);
  outline-offset: 2px;
}

/* Lato has no Hangul glyphs, so Korean text falls back to a system Korean font */
body,
td,
th,
tr,
p,
a,
strong {
  font-family: 'Lato', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

h2 {
  margin: 0;
  font-weight: normal;
  font-family: 'Lato', 'Apple SD Gothic Neo', 'Malgun Gothic', Verdana, Helvetica, sans-serif;
  font-size: 22px;
}

.papertitle {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.name {
  padding-top: 20px;
  margin: 0;
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 32px;
}

span.highlight {
  background-color: var(--highlight);
}

/* ------------------------------------------------------------------
   Layout tables
   ------------------------------------------------------------------ */
.page {
  width: 100%;
  max-width: 800px;
  border: 0;
  border-spacing: 0;
  border-collapse: separate;
  margin: 20px auto 0;
}

.block {
  width: 100%;
  border: 0;
  border-spacing: 0;
  border-collapse: separate;
}

.paper-list {
  border-spacing: 0 10px;
}

.intro-text {
  padding: 2.5%;
  width: 62%;
  vertical-align: middle;
}

.intro-photo {
  padding: 2.5%;
  width: 38%;
  max-width: 38%;
}

.intro-photo img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.photo-caption {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  color: var(--muted);
}

.section-head {
  padding: 16px;
  width: 100%;
  vertical-align: middle;
}

.paper-thumb {
  padding: 16px;
  width: 30%;
  vertical-align: middle;
}

.paper-text {
  padding: 8px;
  width: 70%;
  vertical-align: middle;
}

tr.highlight-row {
  background-color: var(--highlight);
}

/* Awards / Teaching / Service: plain text rows under a section heading */
.list-text {
  padding: 0 8px 8px 16px;
  line-height: 1.6;
}

/* Venue tags: same colors Jon uses for oral / highlight tags */
.tag-oral {
  color: var(--oral);
  font-weight: 700;
}

.tag-award {
  color: var(--award);
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Paper key figures
   - .thumb > span = gray placeholder with venue text (shown until a figure exists)
   - .thumb > img  = key figure laid over the placeholder, letterboxed (not cropped)
   - .one / .two   = before/after swap on row hover (Jon's signature effect)
   ------------------------------------------------------------------ */
.thumb {
  position: relative;
  width: 240px;
  height: 135px;
  border-radius: 6px;
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  overflow: hidden;
}

.thumb.loaded {
  background: var(--card);
  box-shadow: 0 0 0 1px var(--card-edge);
}

.thumb img,
.thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--card);
  border-radius: 6px;
}

.thumb a {
  cursor: zoom-in;
}

/* Slot images stay hidden until a file actually loads (main.js adds .loaded) */
.thumb img,
.logo img {
  visibility: hidden;
}

.thumb.loaded img,
.logo.loaded img {
  visibility: visible;
}

.one {
  width: 160px;
  height: 160px;
  position: relative;
}

.one img,
.one video {
  width: 160px;
  height: 160px;
  object-fit: cover;
}

.two {
  width: 160px;
  height: 160px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

tr.paper:hover .two,
tr.paper:focus-within .two {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .two { transition: none; }
}

/* ------------------------------------------------------------------
   Experience: logo + organization, one row per place
   - .logo > span = initials placeholder (shown until a logo file exists)
   - .logo > img  = logo laid over the placeholder
   ------------------------------------------------------------------ */
.exp-list {
  border-spacing: 0 4px;
}

.exp-logo {
  padding: 8px 16px;
  width: 144px;
  vertical-align: middle;
}

/* 16:9 box, same shape as the paper figures; logo files are 16:9 with their own margin */
.logo {
  position: relative;
  width: 144px;
  height: 81px;
  border-radius: 0;
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.logo.loaded {
  background: var(--card);
}

.logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--card);
}

.exp-text {
  padding: 8px;
  vertical-align: middle;
  line-height: 1.6;
}

.dated {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* "Show all" lists: .extra rows are hidden until expanded (main.js adds .collapsed, so no-JS shows everything) */
.collapsed .extra {
  display: none;
}

.show-all {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--link);
  cursor: pointer;
}

.show-all:hover {
  color: var(--link-hover);
}

.show-all[hidden] {
  display: none;
}

/* Footer: thin divider, then centered small print */
.footer-rule {
  margin: 32px 16px 12px;
  border: 0;
  border-top: 1px solid var(--rule);
}

.footer {
  margin: 0 0 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.footer a {
  font-size: 13px;
}

/* Research focus bullets */
.focus-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

/* News: date on the left, text on the right */
.news-row {
  display: flex;
  gap: 12px;
}

.news-date {
  flex: 0 0 64px;
  color: var(--muted);
  white-space: nowrap;
}

/* Gray sub-line under an entry (advisor, instructor) */
.sub {
  color: var(--muted);
}

.entry + .entry {
  margin-top: 6px;
}

.dated .date {
  color: var(--muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Mobile: stack the intro and each paper row
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .intro-text,
  .intro-photo,
  .paper-thumb,
  .paper-text {
    display: block;
    width: auto;
    max-width: none;
  }

  .intro-photo {
    max-width: 260px;
    margin: 0 auto;
  }

  .paper-thumb {
    padding-bottom: 0;
  }

  .thumb {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .exp-logo {
    width: 96px;
    padding: 8px;
  }

  .logo {
    width: 96px;
    height: 54px;
  }

  .dated {
    flex-direction: column;
    gap: 0;
  }

}

/* ------------------------------------------------------------------
   Wide screens (PC): a slightly wider column and larger type.
   Phones and narrow windows keep the base sizes above.
   ------------------------------------------------------------------ */
@media (min-width: 1200px) {
  .page {
    max-width: 960px;
  }

  body,
  td,
  th,
  tr,
  p,
  a,
  strong,
  .papertitle {
    font-size: 15px;
  }

  h2 {
    font-size: 24px;
  }

  .name {
    font-size: 34px;
  }

  .thumb {
    width: 256px;
    height: 144px;
  }

  .exp-logo {
    width: 160px;
  }

  .logo {
    width: 160px;
    height: 90px;
  }

  /* small print stays small */
  .footer,
  .footer a {
    font-size: 13px;
  }

  /* section menu and theme toggle grow with the text */
  .site-nav {
    gap: 8px;
  }

  .site-nav a {
    font-size: 15px;
  }

  .theme-toggle {
    width: 40px;
    height: 40px;
  }

  .theme-toggle svg {
    width: 20px;
    height: 20px;
  }
}