/* Site styles on top of Pico CSS (assets/pico.blue.min.css).
   To change the accent color, swap that file for another Pico theme,
   e.g. pico.azure / pico.jade / pico.slate from https://picocss.com/docs/version-picker */

:root {
  --pico-font-size: 100%;
  /* publication scope colors (venue badge) */
  --domestic: #2b8a3e;
  --international: #d9480f;
}

.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

/* header */
#site-header nav .brand { font-weight: 400; font-size: 1.25rem; text-decoration: none; }
#site-header .menu a { display: inline-flex; align-items: center; gap: 0.4rem; }
#site-header .menu a[aria-current="page"] { color: var(--pico-primary); font-weight: 600; }
.theme-toggle {
  display: inline-flex; align-items: center; padding: 0.4rem; margin: 0;
  background: none; border: 0; color: var(--pico-muted-color); box-shadow: none;
}
.theme-toggle:hover { color: var(--pico-primary); }
.theme-toggle .icon { width: 1.15rem; height: 1.15rem; }
@media (max-width: 760px) {
  #site-header nav { flex-direction: column; align-items: flex-start; }
  #site-header .menu { flex-wrap: wrap; margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); }
  #site-header .menu li { padding-block: 0.4rem; }
}

main.container { min-height: 60vh; }

/* about */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 2rem; align-items: start; }
.hero img { border-radius: var(--pico-border-radius); width: 100%; }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; } .hero img { max-width: 200px; order: -1; } }
h1.name { font-weight: 400; margin-bottom: 0.25rem; }
.tagline { color: var(--pico-muted-color); }
.links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.links a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; font-size: 0.9rem; margin: 0; }
main h2 { margin-top: 2.5rem; }
.news td:first-child { white-space: nowrap; color: var(--pico-muted-color); width: 9rem; }
button.small { padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* publications */
.pub { margin-bottom: 1rem; }
.pub small { color: var(--pico-muted-color); }
.pub .me { color: var(--pico-color); text-decoration: underline; text-underline-offset: 2px; }
.pub .note { color: var(--pico-primary); font-weight: 500; }
.badge {
  display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 0.3rem; margin-right: 0.4rem;
  background: var(--pico-primary-background); color: var(--pico-primary-inverse); vertical-align: middle;
}
.scope-domestic .badge { background: var(--domestic); color: #fff; }
.scope-international .badge { background: var(--international); color: #fff; }
.btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.btns a { padding: 0.15rem 0.6rem; font-size: 0.75rem; margin: 0; }
.year { margin-top: 1.5rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-bottom: 0.75rem; }
.fgroup { display: flex; align-items: center; }
.flabel { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pico-muted-color); margin-right: 0.5rem; }
.filters [role="group"] { width: auto; margin: 0; }
.filters [role="group"] button { padding: 0.35rem 0.9rem; font-size: 0.85rem; }
.count, .empty { color: var(--pico-muted-color); font-size: 0.9rem; }
.empty { text-align: center; padding: 2rem 0; }

/* talks */
.table-wrap { overflow-x: auto; }
td.date { white-space: nowrap; color: var(--pico-muted-color); }

/* cv */
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pagehead hgroup { margin: 0; }
.pagehead [role="button"] { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
.cvsec { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; margin: 2rem 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--pico-primary); }
.cvsec .icon { color: var(--pico-primary); }
.cventry { padding: 0.85rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.cventry:last-child { border-bottom: 0; }
.cvhead, .cvorg { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.cvdate { color: var(--pico-muted-color); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cvorg { color: var(--pico-muted-color); }
.cvorg span { font-style: italic; font-size: 0.9rem; }
.cventry ul, .miscgrid ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.cventry li, .miscgrid li { list-style: disc; margin: 0; font-size: 0.95rem; }

/* misc */
.miscgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.miscgrid article { margin: 0; }
.miscgrid article.wide { grid-column: 1 / -1; }
.wide .misc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; align-items: center; }
.misc-body p { margin-bottom: 0.5rem; }
.wide header strong { font-size: 1.3rem; }
.wide .misc-body p { font-size: 1.2rem; font-weight: 500; }
.wide .misc-body li { font-size: 1.05rem; margin-bottom: 0.35rem; }
.misc-body img { width: 100%; border-radius: var(--pico-border-radius); }
@media (max-width: 640px) { .wide .misc-body { grid-template-columns: 1fr; } }

/* photo carousel: native horizontal scroll with snap, so touch swipe works for free */
.carousel { position: relative; }
.carousel .track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--pico-border-radius); scrollbar-width: none;
}
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track img { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; scroll-snap-align: center; user-select: none; }
.carousel .nav {
  position: absolute; top: calc(50% - 1.1rem); transform: translateY(-50%);
  width: 2.2rem; height: 2.2rem; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.carousel .nav:hover { background: rgba(0, 0, 0, 0.7); }
.carousel .prev { left: 0.5rem; }
.carousel .next { right: 0.5rem; }
.carousel .dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 0.5rem; }
.carousel .dots button {
  width: 0.5rem; height: 0.5rem; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: var(--pico-muted-border-color);
}
.carousel .dots button[aria-current] { background: var(--pico-primary); }

.error { color: var(--pico-del-color); }
#site-footer { color: var(--pico-muted-color); padding-block: 2rem; }