* {
  box-sizing: border-box;
}

/* Thin, low-contrast scrollbar (Firefox). */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 136, 136, 0.5) transparent;
}

/* Same idea for WebKit/Blink browsers: a slim thumb inset from the
   track via a transparent border, so it reads as a thin floating bar
   rather than the OS's default chunky scrollbar. */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(136, 136, 136, 0.5);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(136, 136, 136, 0.8);
}

:root {
  --bg-color: #f1f1f1;
  --sidebar-bg-color: #e5e5e6;
  --text-color: #000;
  --accent-color: #0969da;
  /* Shading for nav links, layered on top of --sidebar-bg-color. */
  --nav-active-bg: rgba(0, 0, 0, 0.06);
  --nav-hover-bg: rgba(0, 0, 0, 0.12);
}

body {
  margin: 0;
  font-family: "Source Sans 3", sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  background: var(--bg-color);
  color: var(--text-color);
}

h1 {
  font-size: 3.25rem;
  text-align: center;
}

h2 {
  font-size: 1.15em;
  margin-top: 2rem;
}

h3 {
  font-size: 1.15em;
}

.page-content > h2:first-of-type {
  margin-top: 1rem;
}

.page-wrap {
  display: flex;
  justify-content: center;
}

.page-content {
  width: 100%;
  max-width: 52rem;
  /* Bottom padding clears .last-updated-bar's height, so real content
     never sits directly behind the label -- only the fade behind it. */
  padding: 2rem 2rem 4rem;
}

/* Fixed label with a gradient fade behind it rather than a solid
   background, so it reads as floating over the page rather than a
   hard bar. Non-interactive (pointer-events: none) and low z-index,
   since the bar has no interactive content of its own; without it,
   the bar would block clicks on real content underneath, since it
   visually overlaps the very bottom of the page. */
.last-updated-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 0.75rem 0.75rem;
  background: linear-gradient(to bottom, transparent, var(--bg-color) 65%);
  pointer-events: none;
  z-index: 5;
}

.last-updated {
  margin: 0;
  color: #888;
  font-size: 0.8em;
  line-height: 1;
  opacity: 0.7;
}

/* Plain header row, no background/border -- sits in normal document
   flow (scrolls with the page) on every breakpoint, unlike the old
   fixed sidebar/topbar. Spans the full page width (unlike
   .page-content's narrower reading column), name flush left and links
   flush right. */
.site-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.25rem 2rem 0;
}

.site-name {
  color: inherit;
  font-size: 1.25rem;
  font-weight: bold;
  opacity: 0.8;
  text-decoration: none;
}

/* Mobile-only hamburger for the off-canvas drawer -- hidden on
   desktop, where the nav links render inline in .site-nav instead.
   Shown by the @media block below. */
.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
}

.nav-toggle-bar {
  background: var(--text-color);
  border-radius: 1px;
  display: block;
  height: 2px;
  width: 1.4rem;
}

/* Desktop: plain inline links, no background/box -- the mobile media
   query below replaces this with the off-canvas drawer instead. */
.site-nav {
  display: flex;
  gap: 1.75rem;
}

.site-nav a {
  color: inherit;
  font-size: 1rem;
  opacity: 0.64;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent-color);
  opacity: 1;
}

.site-nav a.active {
  font-weight: bold;
  opacity: 0.85;
}

.mailto-link,
.event-link,
.external-link {
  color: var(--accent-color);
  text-decoration: none;
}

.mailto-link:visited,
.event-link:visited,
.external-link:visited {
  color: var(--accent-color);
}

.mailto-link:hover,
.event-link:hover,
.external-link:hover {
  text-decoration: underline;
}

/* Outline style: muted (text-color border/text at reduced opacity) by
   default, brightening to full-opacity accent-color border/text on
   hover -- no solid fill, so it reads as understated rather than a
   heavy call-to-action. */
.button {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--text-color);
  border-radius: 999px;
  /* Also applied to <button> elements (e.g. People's search/clear
     toggles), which don't inherit font/cursor from the page by
     default the way <a> tags do -- without this they'd render in the
     browser's UI font with a non-pointer cursor. */
  font: inherit;
  font-size: 0.8em;
  cursor: pointer;
  background: none;
  color: var(--text-color);
  text-decoration: none;
  opacity: 0.55;
}

.button:visited {
  color: var(--text-color);
}

.button:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  opacity: 1;
}

/* Groups several .button links on one row with space between them,
   wrapping to additional rows only once they no longer fit (e.g. the
   suggestion buttons on contact.md). Kramdown wraps consecutive
   link lines in a single shared <p> rather than one per link, so the
   flex layout targets that <p> -- the actual parent of the <a> tags --
   rather than .button-row itself. */
.button-row p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.button-row .button {
  margin: 0;
}

/* Hidden on desktop; only used to close the mobile drawer. */
.nav-backdrop {
  display: none;
}

/* Stays highlighted (not just on hover) while a toggled panel it
   controls is open (e.g. the People search/filter bar), so its state
   is visible at a glance. */
.button.active {
  border-color: var(--accent-color);
  color: var(--accent-color);
  opacity: 1;
}

/* People page: filter bar above the card list (assets/js/people-filter.js
   drives show/hide; markup lives in people.md). Explicit [hidden]
   override needed since the plain .people-filters rule below sets its
   own `display`, which an author stylesheet rule otherwise wins over
   the browser's default `[hidden] { display: none }`. */
.people-filters[hidden] {
  display: none;
}

.people-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--nav-hover-bg);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.filter-group-label {
  font-size: 0.85em;
  font-weight: bold;
  opacity: 0.75;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 28rem;
}

.filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9em;
}

.filter-checkbox input {
  margin: 0;
}

.people-search {
  font: inherit;
  font-size: 0.9em;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--text-color);
  border-radius: 0.25rem;
  background: var(--bg-color);
  color: var(--text-color);
  opacity: 0.85;
}

.people-search:focus {
  outline: none;
  opacity: 1;
  border-color: var(--accent-color);
}

/* Overrides .button's block/auto-margin centering, which fights the
   flex layout here -- the clear button should sit inline with the
   other filter groups, not centered on its own line. */
#people-filters-clear {
  display: inline-block;
  margin: 0;
}

.people-empty-message {
  opacity: 0.75;
}

.people-group {
  margin-top: 1.5rem;
}

.people-group:first-of-type {
  margin-top: 0.75rem;
}

.people-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.person-card {
  padding: 0.75rem 1rem;
  border: 1px solid var(--nav-hover-bg);
  border-radius: 0.4rem;
}

.person-line1 {
  margin: 0;
}

.person-name {
  font-weight: bold;
  color: var(--accent-color);
}

a.person-name:visited {
  color: var(--accent-color);
}

a.person-name:hover {
  text-decoration: underline;
}

.person-email-icon {
  margin-left: 0.4rem;
  font-size: 0.85em;
}

.person-affiliation {
  margin: 0.2rem 0 0;
}

.person-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}

/* Tag chips appear both as filter-bar toggles and inline on each card
   (assets/js/people-filter.js wires up both the same way, so clicking
   either one filters the list). */
.tag-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--text-color);
  border-radius: 999px;
  background: none;
  color: var(--text-color);
  font: inherit;
  font-size: 0.8em;
  opacity: 0.6;
  cursor: pointer;
}

.tag-chip:hover {
  opacity: 1;
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.tag-chip.active {
  opacity: 1;
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--bg-color);
}

@media (max-width: 768px) {
  /* Smaller than desktop's 18px -- reads better at typical phone
     viewing distance/density than the size chosen for desktop. */
  body {
    font-size: 1rem;
  }

  .page-content {
    padding: 1rem 1rem 3.5rem;
  }

  h1 {
    font-size: 2rem;
  }

  .site-header {
    gap: 0.75rem;
    justify-content: flex-start;
    padding: 1rem 1rem 0;
  }

  .nav-toggle {
    display: flex;
  }

  /* Off-canvas drawer instead of desktop's plain inline links. */
  .site-nav {
    background: var(--sidebar-bg-color);
    bottom: 0;
    flex-direction: column;
    gap: 0.5rem;
    left: 0;
    max-width: 16rem;
    overflow-y: auto;
    padding: 1rem;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    width: 80%;
    z-index: 25;
  }

  .site-nav.open {
    transform: translateX(0);
  }

  .site-nav a {
    border-radius: 0.3rem;
    opacity: 1;
    padding: 0.4rem 0.6rem;
  }

  .site-nav a:hover {
    background: var(--nav-hover-bg);
    color: inherit;
    opacity: 1;
  }

  .site-nav a.active {
    background: var(--nav-active-bg);
  }

  .people-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-options {
    max-width: none;
  }

  .nav-backdrop:not([hidden]) {
    background: rgba(0, 0, 0, 0.4);
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 24;
  }
}