/* Site branding and compatibility for existing content; Quark2 supplies the UI. */
:root {
  --pico-font-size: 100%;
}
.site-panorama img {
  display: block;
  width: 100%;
  height: clamp(100px, 16vw, 240px);
  object-fit: cover;
  object-position: center;
}
.language-navigation { justify-content: flex-end; text-align: right; padding-top: .8rem; }
/* Match the content's outer gap to the panorama-to-language spacing. */
#body-wrapper { padding-top: .8rem; }
.language-navigation .langswitcher-custom {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .125rem;
  max-width: 100%; margin: 0; padding: .15rem .25rem;
  border: 1px solid var(--q2-border-strong); border-radius: 1.25rem;
  background: var(--q2-bg-muted);
}
.language-navigation .langswitcher-custom li { display: block; margin: 0; padding: 0; }
.language-navigation .langswitcher-custom li::before { content: none; }
.language-navigation .langswitcher-custom a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.75rem; margin: 0; padding: .2rem .75rem;
  border-radius: 1rem; color: var(--q2-text); font-size: .875rem;
  font-weight: 500; line-height: 1.25; text-decoration: none;
}
.language-navigation .langswitcher-custom a:hover { background: var(--q2-bg-elev); }
.language-navigation .langswitcher-custom a.active {
  background: var(--q2-bg-elev); color: var(--q2-link); font-weight: 700;
  box-shadow: 0 1px 3px var(--q2-border-ring);
}
.language-navigation .langswitcher-custom a:focus-visible {
  outline: 2px solid var(--q2-link); outline-offset: 2px;
}
.site-footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer p { margin: 0; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 2000; padding: .6rem 1rem; background: var(--q2-bg-elev); }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Explicit expansion works the same way on desktop, keyboard and touch. */
.controlled-menu-item > ul[hidden] { display: none !important; }
.site-nav-entry { display: flex; align-items: center; }
.dropmenu .site-nav-entry > a { flex: 1; width: auto; }
.dropmenu .submenu-toggle, .dropmenu .site-nav-label {
  display: inline-flex; align-items: center; gap: .4rem; width: auto;
  margin: 0; padding: .5rem .9375rem; border: 0; border-radius: var(--q2-radius-sm);
  background: transparent; box-shadow: none; color: var(--q2-text-strong);
  font: 500 .9375rem/1.35 var(--pico-font-family-sans-serif); white-space: nowrap;
}
.dropmenu .submenu-toggle.arrow-only { padding-inline: .5rem; }
.dropmenu .submenu-toggle:hover { background: var(--q2-bg-muted); }
.dropmenu .submenu-toggle.active { color: var(--q2-text-inverse); background: var(--q2-text); }
.submenu-toggle:focus-visible { outline: 2px solid var(--q2-link); outline-offset: 2px; }
.submenu-arrow { display: inline-block; transition: transform .15s; }
.submenu-toggle[aria-expanded='true'] .submenu-arrow { transform: rotate(180deg); }
.dropmenu .controlled-menu-item.is-expanded > ul {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
}
.overlay .overlay-menu .site-nav-entry > a { flex: 1; width: auto; }
.overlay .overlay-menu .submenu-toggle, .overlay .overlay-menu .site-nav-label {
  display: inline-flex; align-items: center; gap: .5rem; width: auto; margin: 0;
  padding: .625rem 0; background: transparent; border: 0; box-shadow: none;
  color: var(--q2-text-strong); font: 600 1.5rem/1.25 var(--pico-font-family-display);
}
.overlay .overlay-menu .submenu-toggle.arrow-only { padding-inline: .75rem; }
.overlay .overlay-menu ul ul .submenu-toggle, .overlay .overlay-menu ul ul .site-nav-label {
  padding: .5rem .75rem; font: 500 1rem/1.25 var(--pico-font-family-sans-serif);
}
.content-item::after { content: ''; display: block; clear: both; }
.content-item img { max-width: 100%; height: auto; }
/* Consecutive page headings mark sections, rather than a title/subtitle pair. */
.content-item > h1 + h2 {
  margin-top: 1.65em;
  color: var(--q2-text-strong);
}
.content-item > h1 + h2::before { display: block; }
.pull-left { float: left; }
.pull-right { float: right; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-thumbnail { border: 1px solid var(--q2-border-strong); border-radius: .4rem; padding: .25rem; }
.img-margin-right { margin: 0 1.5rem 1rem 0; }
.img-margin-left { margin: 0 0 1rem 1.5rem; }
@media (min-width: 768px) {
  /* An image-only paragraph starts a floated illustration, not a new text section. */
  .content-item > p:has(> img.pull-right:only-child, > a:only-child > img.pull-right:only-child) + h1 {
    margin-top: 1.5rem;
  }
}
.center-block { display: block; margin-inline: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--q2-text-muted); }
/* Download panels are authored directly in the existing Markdown. */
.panel { margin-block: 1.5rem; border: 1px solid var(--q2-border-strong); border-radius: .65rem; overflow: hidden; }
.panel-heading { background: var(--q2-bg-elev); padding: 1rem 1.25rem; border-bottom: 1px solid var(--q2-border-strong); }
.panel-heading .panel-title { margin: 0; font-size: 1.2rem; }
.panel-info {
  --download-background: #f0f7fd;
  --download-heading: #dfedfa;
  --download-border: #b8d2e8;
  background: var(--download-background);
  border-color: var(--download-border);
}
.panel-info > .panel-heading {
  background: var(--download-heading);
  border-color: var(--download-border);
}
:root[data-theme='dark'] .panel-info {
  --download-background: #152636;
  --download-heading: #1c3349;
  --download-border: #35556f;
}
.panel-body { padding: 1.25rem; }
.panel-body .btn { margin: .25rem .5rem .25rem 0; white-space: normal; }
.panel-body a.btn-success { background: #247045; border-color: #247045; color: white; }
.panel-body a.btn-success:hover { background: #195432; border-color: #195432; color: white; }
.resume-section { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr); gap: 2rem; border-top: 1px solid var(--q2-border-strong); padding-block: 2rem; }
.resume-section h2 { margin: 0; font-size: 1.5rem; }
.news-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(13rem, 1fr); gap: 2.5rem; }
.news-layout > * { min-width: 0; }
.sidebar-heading { font-size: 1rem; }
.news-item { margin-bottom: 2rem; }
.news-layout .news-item {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--q2-bg-elev);
  border-radius: var(--q2-radius-lg);
  box-shadow: var(--q2-shadow-card);
}
.news-item > :last-child { margin-bottom: 0; }
.news-heading { display: flex; gap: 1.5rem; align-items: start; margin-bottom: 1rem; }
.news-heading > div { min-width: 0; }
.news-heading time { flex: 0 0 5rem; text-align: center; color: var(--q2-text-muted); }
.news-heading .day { display: block; color: #c9284f; font-size: 2rem; line-height: 1.2; font-weight: 800; }
.news-heading h1, .news-heading h2 { margin: 0 0 .5rem; }
.news-heading h1, .news-heading h2 { font-size: 1.5rem; }
.news-heading h1::before {
  content: ''; display: block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--q2-text-strong); margin-bottom: .7rem; opacity: .9;
}
.news-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.news-tags > li { list-style: none; margin: 0; padding: 0; }
.search-results-header { margin-bottom: 1.5rem; }
.search-results-header h1 { margin: 0 0 1rem; font-size: 2rem; }
.search-results-header .search-wrapper { max-width: 36rem; }
.search-results-header .search-wrapper .search-input { width: 100%; }
.search-results-count { margin: .75rem 0 0; color: var(--q2-text-muted); font-size: .9rem; }
.search-results-list { display: grid; gap: 1.25rem; }
.search-result-card, .search-empty-state {
  padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--q2-radius-lg);
  background: var(--q2-bg-elev); box-shadow: var(--q2-shadow-card);
}
.search-result-card.has-image { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.search-result-thumbnail { width: 144px; height: 108px; object-fit: cover; border-radius: .5rem; }
.search-result-content { min-width: 0; }
.search-result-date { color: var(--q2-text-muted); font-size: .85rem; }
.search-result-card h2 { margin: .35rem 0 .75rem; font-size: 1.5rem; }
.search-result-card h2::before { display: none; }
.search-result-excerpt { margin: 0 0 .75rem; }
.search-result-more { font-size: .9rem; }
.search-empty-state h2 { margin-top: 0; font-size: 1.5rem; }
.search-empty-state p { margin-bottom: 0; }
@media (max-width: 600px) {
  .search-result-card.has-image { grid-template-columns: 1fr; gap: 1rem; }
}
.contact-form { max-width: 48rem; margin-inline: auto; }
.contact-form .form-label { display: block; }
.contact-form .form-field { margin-bottom: 1.25rem; }
@media (max-width: 767px) {
  .news-layout, .resume-section { grid-template-columns: 1fr; gap: 1.25rem; }
  .content-item .pull-left, .content-item .pull-right { float: none; margin: 0 auto 1.5rem; }
  .language-navigation { font-size: .85rem; }
  .news-heading { gap: .75rem; }
}

/* Academic profile icons retain descriptive names for keyboard/screen-reader use. */
.profile-links { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem; }
.profile-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: .35rem; font-size: 2rem; text-decoration: none; }
.profile-icon-github {
  display: inline-block; width: 1em; height: 1em; background-color: currentColor;
  -webkit-mask: url('../vendor/octicons/mark-github-16.svg') center / contain no-repeat;
  mask: url('../vendor/octicons/mark-github-16.svg') center / contain no-repeat;
}
.profile-links a:hover { background: var(--q2-bg-muted); }
.profile-links a:focus-visible { outline: 2px solid var(--q2-link); outline-offset: 3px; }
.contact-map { clear: both; margin-block: 1.5rem; }
.contact-map iframe { display: block; width: 100%; height: clamp(280px, 42vw, 420px); border: 1px solid var(--q2-border-strong); border-radius: var(--q2-radius-sm); }