/* ==========================================================================
   Site styles — single-page academic layout.
   Design modeled on the Wowchemy "Minimal" academic layout.
   Hand-written CSS (no Bootstrap): tokens up top, then layout, then widgets.
   ========================================================================== */

:root {
  --primary: #1565c0;
  --primary-hover: #0d417b;
  --body-fg: rgba(0, 0, 0, 0.8);
  --body-bg: #fff;
  --heading-fg: #313131;
  --muted-fg: rgba(0, 0, 0, 0.54);
  --card-bg: #fff;
  --card-border: rgba(0, 0, 0, 0.09);
  --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  --navbar-bg: #fff;
  --navbar-fg: #34495e;
  --navbar-brand-fg: #2b2b2b;
  --navbar-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.11);
  --title-fg: #151515;
  --section-bg: #fff;
  --thumb-bg: #fafafa;
  --target-ring: rgba(21, 101, 192, 0.15);
  --distinction-fg: #8d5b00;
  --distinction-bg: #fff8e1;
  --distinction-border: #f0d38a;
  --navbar-height: 70px;
}

[data-theme="dark"] {
  /* Lighter than the reference's #2962ff, which only reaches ~3.3:1 contrast
     on this background; #90caf9 clears WCAG AA for body text. */
  --primary: #90caf9;
  --primary-hover: #bbdefb;
  --body-fg: rgba(255, 255, 255, 0.7);
  --body-bg: #1c1e26;
  --heading-fg: #fff;
  --muted-fg: rgba(255, 255, 255, 0.54);
  --card-bg: #282a36;
  --card-border: #44475a;
  --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  --navbar-bg: #23252f;
  --navbar-fg: rgba(255, 255, 255, 0.8);
  --navbar-brand-fg: #fff;
  --navbar-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --title-fg: #fff;
  --section-bg: #1c1e26;
  --thumb-bg: #21232c;
  --target-ring: rgba(144, 202, 249, 0.22);
  --distinction-fg: #ffcf5c;
  --distinction-bg: rgba(255, 207, 92, 0.12);
  --distinction-border: rgba(255, 207, 92, 0.35);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13.86px;
  line-height: 1.65;
  color: var(--body-fg);
  scroll-padding-top: var(--navbar-height);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--body-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Montserrat, Roboto, sans-serif;
  font-weight: 400;
  margin: 1rem 0 0.5rem;
  line-height: 1.25;
  color: var(--heading-fg);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

pre,
code {
  font-family: "Roboto Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: 1140px;
  padding: 0 15px;
  margin: 0 auto;
}

.page-body {
  flex-grow: 1;
}

/* Two-column section grid: narrow heading/profile rail + wide content.
   Mirrors the reference layout's 4/8 split at the lg breakpoint. */
.section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .section-grid {
    grid-template-columns: 1fr 3fr;
    gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.header--fixed {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
}

.navbar {
  height: var(--navbar-height);
  background: var(--navbar-bg);
  box-shadow: var(--navbar-shadow);
  font-size: 13.86px;
  font-weight: 400;
  line-height: 1.25;
}

.navbar > .container {
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar-brand {
  font-size: 1.2rem;
  font-family: Montserrat, Roboto, sans-serif;
  color: var(--navbar-brand-fg);
  white-space: nowrap;
  margin-right: 1rem;
}

.navbar-brand:hover {
  color: var(--primary);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar-nav .nav-link {
  display: block;
  padding: 10px 15px;
  color: var(--navbar-fg);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary);
  text-decoration: none;
}

.nav-icons {
  margin-left: auto;
}

/* Mobile menu toggle */
.navbar-toggler {
  display: none;
  background: none;
  border: 0;
  font-size: 1.15rem;
  color: var(--navbar-fg);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  margin-left: auto;
}

@media (max-width: 991px) {
  .navbar-toggler {
    display: block;
  }

  .navbar-collapse {
    display: none;
    position: absolute;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    background: var(--navbar-bg);
    box-shadow: var(--navbar-shadow);
    padding: 0.5rem 15px 1rem;
  }

  .navbar-collapse.is-open {
    display: block;
  }

  .navbar-collapse .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-icons {
    margin-left: 0;
  }
}

/* Theme switcher dropdown */
.theme-dropdown {
  position: relative;
}

.theme-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 15px;
  color: var(--navbar-fg);
  font-size: 1rem;
}

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

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 8rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0.3rem 0;
  z-index: 20;
}

.dropdown-menu.is-open {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.35rem 1rem;
  color: var(--body-fg);
  cursor: pointer;
  font-size: 13.86px;
  font-family: inherit;
}

.dropdown-item:hover {
  color: var(--primary);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Home sections
   -------------------------------------------------------------------------- */

.home-section {
  background: var(--section-bg);
  position: relative;
  padding: 110px 0;
  z-index: 0;
}

/* Alternate section shading, as in the reference layout. */
.home-section:nth-of-type(even) {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .home-section:nth-of-type(even) {
  background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 991px) {
  .home-section {
    padding: 60px 0;
  }

  .home-section:first-of-type {
    padding-top: calc(var(--navbar-height) + 30px);
  }
}

.section-heading h1 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Publications heading sits above its cards rather than in a rail. */
.section-heading--stacked {
  margin-bottom: 1.9rem;
}

.section-heading--stacked h1 {
  font-size: 1.5rem;
}

.section-heading p {
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--muted-fg);
}

/* --------------------------------------------------------------------------
   Profile card (about section rail)
   -------------------------------------------------------------------------- */

#profile {
  text-align: center;
}

@media (min-width: 992px) {
  #profile {
    position: sticky;
    top: calc(var(--navbar-height) + 20px);
  }
}

.portrait-title h2 {
  font-size: 1.75em;
  font-weight: 300;
  color: var(--heading-fg);
  margin: 20px 0 10px;
}

.portrait-title h3 {
  font-size: 1rem;
  font-weight: 300;
  color: var(--muted-fg);
  margin: 0 0 10px;
}

.avatar {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  object-fit: cover;
  display: block;
}

.avatar-circle {
  border-radius: 50%;
}

.network-icon {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

.network-icon li {
  margin-right: 10px;
  transition: transform 0.2s ease;
}

.network-icon li:last-of-type {
  margin-right: 0;
}

.network-icon li:hover {
  transform: scale(1.2);
}

.network-icon a {
  color: var(--muted-fg);
}

.network-icon a:hover {
  color: var(--primary);
}

.big-icon {
  font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.article-style {
  font-size: 0.88rem;
  line-height: 1.65;
}

/* About prose, two points above the 14px author-name size on cards */
.wg-about .article-style {
  font-size: 16px;
}

.article-style p:first-child {
  margin-top: 0;
}

.article-style ul,
.article-style ol {
  padding-left: 1.4rem;
}

.article-style li {
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   Publication cards
   -------------------------------------------------------------------------- */

/* Topic groups within the publications list */
.pub-group + .pub-group {
  margin-top: 2.75rem;
}

/* Jumped-to group: cue the heading, matching the card :target treatment */
.pub-group:target > .pub-group-heading {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.pub-group-heading {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--card-border);
}

.card-simple {
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  margin-top: 20px;
  padding: 15px 20px;
}

.card-simple:first-of-type {
  margin-top: 0;
}

/* Jumped-to card: a brief cue so a link's destination is obvious */
.card-simple:target {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--target-ring);
}

/* Card body: optional thumbnail rail beside the text */
.card-layout {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.card-main {
  flex: 1 1 auto;
  min-width: 0; /* let long titles wrap instead of stretching the flex item */
}

/* Fixed width, natural height. Paper figures range from about 1.3:1 to
   2.3:1, so a fixed box would letterbox the wide ones heavily; letting
   height follow the image avoids both letterboxing and cropping. */
.card-thumb {
  flex: 0 0 auto;
  display: block;
  width: 240px;
  border: 1px solid var(--card-border);
  border-radius: 3px;
  background: var(--thumb-bg);
  overflow: hidden;
}

.card-thumb img {
  width: 100%;
  height: auto;
  /* Guard against an unusually tall figure; contain keeps the aspect. */
  max-height: 200px;
  object-fit: contain;
  display: block;
}

@media (max-width: 600px) {
  .card-layout {
    gap: 1rem;
  }

  .card-thumb {
    width: 120px;
  }

  .card-thumb img {
    max-height: 120px;
  }
}

/* Keyword tags */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}

.tag {
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.5rem;
  border-radius: 3px;
  color: var(--tag-fg);
  background: var(--tag-bg);
  white-space: nowrap;
}

.tag--blue   { --tag-fg: #0d47a1; --tag-bg: #e3f2fd; }
.tag--indigo { --tag-fg: #283593; --tag-bg: #e8eaf6; }
.tag--purple { --tag-fg: #6a1b9a; --tag-bg: #f3e5f5; }
.tag--teal   { --tag-fg: #00695c; --tag-bg: #e0f2f1; }
.tag--green  { --tag-fg: #2e7d32; --tag-bg: #e8f5e9; }
.tag--amber  { --tag-fg: #7d5700; --tag-bg: #fff8e1; }
.tag--tan    { --tag-fg: #6d4c41; --tag-bg: #f3e7db; }
.tag--orange { --tag-fg: #bf360c; --tag-bg: #fff3e0; }
.tag--rose   { --tag-fg: #ad1457; --tag-bg: #fce4ec; }
.tag--cyan   { --tag-fg: #00636d; --tag-bg: #e0f7fa; }
.tag--grey   { --tag-fg: #37474f; --tag-bg: #eceff1; }

[data-theme="dark"] .tag--blue   { --tag-fg: #90caf9; --tag-bg: rgba(144, 202, 249, 0.14); }
[data-theme="dark"] .tag--indigo { --tag-fg: #9fa8da; --tag-bg: rgba(159, 168, 218, 0.14); }
[data-theme="dark"] .tag--purple { --tag-fg: #ce93d8; --tag-bg: rgba(206, 147, 216, 0.14); }
[data-theme="dark"] .tag--teal   { --tag-fg: #80cbc4; --tag-bg: rgba(128, 203, 196, 0.14); }
[data-theme="dark"] .tag--green  { --tag-fg: #a5d6a7; --tag-bg: rgba(165, 214, 167, 0.14); }
[data-theme="dark"] .tag--amber  { --tag-fg: #ffe082; --tag-bg: rgba(255, 224, 130, 0.14); }
[data-theme="dark"] .tag--tan    { --tag-fg: #d7b899; --tag-bg: rgba(215, 184, 153, 0.15); }
[data-theme="dark"] .tag--orange { --tag-fg: #ffab91; --tag-bg: rgba(255, 171, 145, 0.14); }
[data-theme="dark"] .tag--rose   { --tag-fg: #f48fb1; --tag-bg: rgba(244, 143, 177, 0.14); }
[data-theme="dark"] .tag--cyan   { --tag-fg: #80deea; --tag-bg: rgba(128, 222, 234, 0.14); }
[data-theme="dark"] .tag--grey   { --tag-fg: #b0bec5; --tag-bg: rgba(176, 190, 197, 0.14); }

.article-metadata {
  margin-bottom: 20px;
  overflow: hidden;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--muted-fg);
}

.article-metadata a {
  color: var(--muted-fg);
}

.article-metadata a:hover {
  color: var(--primary);
}

.article-metadata .author-highlighted {
  font-weight: 700;
}

/* Spotlight / Oral marker. Deliberately unlike a keyword tag -- uppercase
   and bold, so an honor does not read as just another topic label. */
.article-distinction {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.16rem 0.4rem;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: 1px;
  color: var(--distinction-fg);
  background: var(--distinction-bg);
  border: 1px solid var(--distinction-border);
}

.author-notes {
  display: block;
  font-size: 13px;
  font-style: italic;
  color: var(--muted-fg);
  margin-top: 2px;
}

.middot-divider {
  padding-right: 0.45em;
  padding-left: 0.45em;
  font-size: 15px;
}

.middot-divider::after {
  content: "\00B7";
}

.article-title {
  font-size: 1.2rem;
  font-family: Montserrat, Roboto, sans-serif;
  line-height: 1.35;
  margin: 0.75rem 0 0.25rem;
}

.article-title a {
  color: var(--title-fg);
  transition: color 0.6s ease;
}

.article-title a:hover {
  color: var(--primary);
  text-decoration: none;
}

.card-simple .article-style {
  margin-top: 0.5rem;
}

/* Link buttons */
.btn-links {
  padding-top: 10px;
}

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 13.86px;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  text-align: center;
}

.btn-links .btn {
  padding: 5px 0.5rem;
  line-height: 1;
  margin: 0 0.25rem 0.25rem 0;
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
  text-decoration: none;
}

/* Figure on a publication detail page: the card thumbnail, shown larger.
   Sources are ~1200px wide, so 560px keeps roughly 2x pixel density. */
.pub-figure {
  margin: 1.6rem 0 0.4rem;
  max-width: 560px;
  border: 1px solid var(--card-border);
  border-radius: 3px;
  background: var(--thumb-bg);
  overflow: hidden;
  padding: 0;
}

.pub-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   BibTeX dialog
   -------------------------------------------------------------------------- */

/* Explicit, so the [hidden] attribute is not overridden by display:flex */
.cite-modal[hidden] {
  display: none;
}

.cite-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cite-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.cite-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
  padding: 1.1rem 1.25rem 1.25rem;
}

.cite-modal__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.cite-modal__title {
  margin: 0;
  font-size: 1.2rem;
}

.cite-modal__close {
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: pointer;
  color: var(--muted-fg);
}

.cite-modal__close:hover {
  color: var(--primary);
}

.cite-modal__paper {
  margin: 0.35rem 0 0.85rem;
  font-size: 0.85rem;
  color: var(--muted-fg);
}

.cite-modal__code {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--thumb-bg);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  /* Long BibTeX fields scroll here rather than widening the dialog */
  overflow-x: auto;
  white-space: pre;
  color: var(--body-fg);
}

.cite-modal__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.cite-modal__actions .btn {
  padding: 0.4rem 0.9rem;
}

.cite-modal__status {
  font-size: 0.85rem;
  color: var(--muted-fg);
}

/* --------------------------------------------------------------------------
   Single-page article (publication detail / simple pages)
   -------------------------------------------------------------------------- */

.article-container {
  max-width: 760px;
  padding: 0 20px;
  margin: 0 auto;
}

.article-container.wide {
  max-width: 960px;
}

/* Matches .container, so the standalone list is as wide as the home section */
.article-container.full {
  max-width: 1140px;
  padding: 0 15px;
}

.pub {
  padding-top: calc(var(--navbar-height) + 30px);
  padding-bottom: 60px;
}

.pub h1,
.page-title h1 {
  font-size: 1.75rem;
  margin-top: 0;
}

/* Detail-page fields, flush left and matching the figure's width, so the
   figure and the text below it share the left edge of the title above them.
   To let the text run the container's full width, drop the max-width. */
.pub-fields {
  max-width: 560px;
}

/* One column: the label sits above its value rather than beside it. */
.pub-row {
  margin-bottom: 1.4rem;
}

.pub-row-heading {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

/* Body text as a field: same size as Citation, not the smaller prose size */
.pub-summary p {
  margin: 0;
}

.pub-summary p + p {
  margin-top: 0.7rem;
}

.space-below {
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.page-footer {
  padding: 2rem 0;
}

.site-footer {
  color: var(--muted-fg);
  font-size: 0.9rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
}