/* ==================================================================
    Skip-to-content link (visible only on keyboard focus)
================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: #000000;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 0 0 4px 0;
  text-decoration: none;
  font-size: 15px;
}

.skip-link:focus {
  left: 0;
}

#main:focus {
  outline: none;
}

html[data-theme="dark"] .skip-link {
  background: #ffffff;
  color: #000000;
}

/* ==================================================================
    Header and Nav
================================================================== */

nav {
  flex: 1;
  display: inline-block;
  text-align: right;
  white-space: nowrap;
}

nav ul {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  display: inline;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #555555;/*#004de6;*/
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  float: center;
  padding-top: 10px;
  padding-right: 2px;
  padding-left: 2px;
  padding-bottom: 5px;
  margin-left: 7px;
  margin-right: 7px;
  border-bottom: 2px solid #555555;/*#4c9cf1;*/
  transition: color 0.3s ease, border-color 0.3s ease;
}

header {
  text-align: right; /* was right */
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
}

header .blog-name {
  flex-shrink: 0;
  display: inline-block;
  text-align: left;
  font-size: 24px;
  font-weight: bold; /* added by me */
  /*font-family: "Lucida Console", Monaco, monospace;*/
  padding-top: 10px;
  white-space: nowrap;
}

header .blog-name a {
  color: #000000; /*#a6a2a0;*/
  text-decoration: none;
}

header li a:hover {
  color: black;
  border-bottom: 2px solid black;
}

#menu-icon {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#menu-icon img {
  display: block;
  width: 24px;
  height: auto;
}

@media (max-width: 480px) {
  header {
    padding-left: 6%;
    padding-right: 6%;
  }
}

@media (min-width: 481px) {
  header {
    padding-left: 12.5%;
    padding-right: 12.5%;
  }
}

/* wide display: enforce maximum width of header to match content */
@media (min-width: 1000px) {
  header {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* tablet/laptop: comfortable padding */
@media (min-width: 481px) and (max-width: 999px) {
  header {
    padding-left: 6%;
    padding-right: 6%;
  }
}

/*
medium display: nav goes under name
*/
@media (max-width: 760px) {
  header { display: block; }

  header .blog-name {
    display: block;
    width: 100%;
    padding-bottom: 10px;
  }

  nav {
    width: 100%;
  }
}

/*
narrow display: collapse the header (don't show the menu items)
instead, display a burger menu.
*/
@media (max-width: 500px) {
  header {
    height: 35px;
    display: flex;
    align-items: center;
  }

  header .blog-name {
    display: inline-block;
    width: 62%;
    font-size: 19px;
  }

  nav {
    display: inline-block;
    width: 36%;
  }

  .theme-toggle {
    font-size: 16px;
    padding: 4px;
    margin-left: 0;
  }

  nav ul,
  nav:active ul {
    display: none;
    position: absolute;

    background: #fff;
    border: 1px solid #444;
    right: 10px;
    top: 55px;
    width: 40%;
    min-width: 160px;
    border-radius: 4px 0 4px 4px;
    z-index: 1;
  }

  nav li {
    text-align: left;
    display: block;
    padding: 0;
    margin: 0;
  }
  header li a { border-bottom: none; }
  header li a:hover { border-bottom: none; }

  nav.open ul {
    display: block;
  }

  #menu-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    margin-top: 2px;
  }
}

.franklin-content img {
  max-width: 100%;
  height: auto;
}

/* ---- Profile card (homepage hero) ---- */
.profile-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4em;
  padding: 1.3em 1.5em;
  margin: 0.4em 0 1.6em;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fafafa;
}

/* Selector is specific enough to beat Franklin's `.franklin-content img`
   rule, which sets `margin: auto` and would otherwise push the photo to the
   centre of the flex row (leaving a big gap before the text). */
.profile-card .profile-card-photo {
  flex: 0 0 auto;
  width: 118px;
  height: 118px;
  border-radius: 10px;
  object-fit: cover;
  margin: 0;
}

.profile-card-info {
  min-width: 0;
}

.profile-card-name {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.15;
}

.profile-card-title {
  font-size: 17px;
  margin-top: 0.2em;
}

.profile-card-affil {
  font-size: 0.82em;
  color: #888888;
  margin-top: 0.15em;
}

.profile-card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15em 1.1em;
  margin-top: 0.75em;
}

.profile-card-links a {
  font-size: 0.92em;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cv-updated {
  color: #888888;
  font-size: 0.75em;
}

.loc-abbr { display: none; }

@media (max-width: 500px) {
  .profile-card {
    flex-direction: column;
    text-align: center;
    gap: 0.9em;
    padding: 1.4em 1.2em;
  }
  .profile-card .profile-card-photo { width: 132px; height: 132px; }
  .profile-card-links { justify-content: center; }
  .loc-full { display: none; }
  .loc-abbr { display: inline; }
}

.franklin-content h2.news-heading {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555555;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.news-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.4em;
}

.news-list li {
  display: flex;
  margin-bottom: 0.7em;
  line-height: 1.5;
}

.news-date {
  flex: 0 0 5em;
  color: #888888;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 0.2em;
}

.news-body {
  flex: 1;
}

table {
  line-height: 1em;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  text-align: center;
  margin-bottom: 1.5em;
}

tr:first-of-type {
  background: #eae9f4;
}

tr:first-of-type > th {
  text-align: center;
}

tr,
th,
td {
  padding: 10px;
  border: 1px solid lightgray;
}

table tbody tr td {
  border: 1px solid lightgray;
}

/* ==================================================================
    NEWS INLINE PHOTO GALLERY
================================================================== */

.news-toggle {
  font-size: 0.85em;
  color: #555555;
  text-decoration: none;
  border-bottom: 1px dotted #999999;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.news-toggle:hover,
.news-toggle:focus-visible {
  color: #000000;
  border-bottom-color: #000000;
}

.news-caret {
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.75em;
  color: #888888;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-toggle.is-open .news-caret {
  transform: rotate(90deg);
}

/* Collapsible container: grid-rows 0fr -> 1fr gives a smooth,
   content-sized height animation with no fixed max-height hacks. */
.news-gallery {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-gallery.is-open {
  grid-template-rows: 1fr;
}

.news-gallery-inner {
  overflow: hidden;
  min-height: 0;
}

.news-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0.9em 0 0.3em;
}

/* Single-photo news entry: one larger image instead of a thumbnail grid */
.news-gallery-grid.single {
  grid-template-columns: min(340px, 100%);
}

.news-gallery-grid a {
  display: block;
  border-bottom: none;
}

.news-gallery-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid #dddddd;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.3s ease;
}

/* Single-photo entry: show the whole image at its natural aspect ratio
   (no 4:3 crop, which would cut a portrait group photo). */
.news-gallery-grid.single img {
  aspect-ratio: auto;
  height: auto;
}

/* Staggered reveal once the container opens */
.news-gallery.is-open img { opacity: 1; transform: none; }
.news-gallery.is-open a:nth-child(1) img { transition-delay: 0.12s, 0.12s, 0s; }
.news-gallery.is-open a:nth-child(2) img { transition-delay: 0.2s, 0.2s, 0s; }
.news-gallery.is-open a:nth-child(3) img { transition-delay: 0.28s, 0.28s, 0s; }
.news-gallery.is-open a:nth-child(4) img { transition-delay: 0.36s, 0.36s, 0s; }
.news-gallery.is-open a:nth-child(5) img { transition-delay: 0.44s, 0.44s, 0s; }

.news-gallery-grid a:hover img,
.news-gallery-grid a:focus-visible img {
  filter: brightness(1.06);
  border-color: #bbbbbb;
}

@media (max-width: 600px) {
  .news-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-gallery,
  .news-gallery-grid img,
  .news-caret {
    transition: none;
  }
}

/* ==================================================================
    BIBTEX TOGGLE (Research page)
================================================================== */

.bib-toggle {
  font-size: 0.82em;
  color: #888888;
  text-decoration: none;
  border-bottom: 1px dotted #bbbbbb;
  white-space: nowrap;
  margin-left: 0.15em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bib-toggle:hover,
.bib-toggle:focus-visible {
  color: #000000;
  border-bottom-color: #000000;
}

.bibtex-wrap {
  display: none;
  position: relative;
  margin-top: 0.6em;
}

.bibtex-wrap.open {
  display: block;
}

.bibtex {
  margin: 0;
  background: var(--block-background);
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0.85em 1em;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72em;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

.bib-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  color: #555555;
  font-size: 11px;
  font-family: inherit;
  padding: 2px 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bib-copy:hover {
  color: #000000;
  border-color: #999999;
}

/* ==================================================================
    THEME TOGGLE
================================================================== */

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: #888888;
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  margin-left: 6px;
  vertical-align: middle;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  color: #000000;
}

/* Clean mobile header: no toggle chip (mobile follows the OS light/dark preference). */
@media (max-width: 500px) {
  .theme-toggle { display: none; }
}

/* ==================================================================
    DARK THEME
    Keyed only on [data-theme="dark"] so the toggle always wins over the
    OS preference (the no-flash script in <head> seeds it from either).
    Code blocks are deliberately left light so highlight.js stays legible.
================================================================== */

html[data-theme="dark"] {
  background-color: #17181b;
  color: #d8d8d6;
}

html[data-theme="dark"] body {
  background-color: #17181b;
}

html[data-theme="dark"] .blog-name a {
  color: #ececec;
}

html[data-theme="dark"] nav li a {
  color: #9a9a9a;
  border-bottom-color: #4a4a4a;
}

html[data-theme="dark"] header li a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

html[data-theme="dark"] .theme-toggle {
  color: #9a9a9a;
}

html[data-theme="dark"] .theme-toggle:hover {
  color: #ffffff;
}

html[data-theme="dark"] .main-heading {
  color: #e2e2e2;
  border-bottom-color: #333333;
}

html[data-theme="dark"] .franklin-content h1,
html[data-theme="dark"] .franklin-content h2 {
  border-bottom-color: #333333;
}

html[data-theme="dark"] .news-heading {
  color: #9a9a9a;
}

html[data-theme="dark"] .news-date {
  color: #8a8a8a;
}

html[data-theme="dark"] .franklin-content a {
  color: #a9a9a9;
}

/* Catch-all so any link (e.g. auto-generated tag pages) stays legible in dark */
html[data-theme="dark"] a {
  color: #a9a9a9;
}

html[data-theme="dark"] a:visited {
  color: #9d9d9d;
}

html[data-theme="dark"] .news-toggle {
  color: #9a9a9a;
  border-bottom-color: #666666;
}

html[data-theme="dark"] .news-toggle:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

html[data-theme="dark"] .news-caret {
  color: #8a8a8a;
}

html[data-theme="dark"] .cv-updated {
  color: #888888;
}

html[data-theme="dark"] .bib-toggle {
  color: #9a9a9a;
  border-bottom-color: #666666;
}

html[data-theme="dark"] .bib-toggle:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

html[data-theme="dark"] .news-gallery-grid img {
  border-color: #333333;
}

html[data-theme="dark"] .profile-card {
  background: #1e1f22;
  border-color: #2e2f33;
}

html[data-theme="dark"] .profile-card-affil {
  color: #9a9a9a;
}

html[data-theme="dark"] .news-gallery-grid a:hover img,
html[data-theme="dark"] .news-gallery-grid a:focus-visible img {
  border-color: #555555;
}

/* Content borders and rules */
html[data-theme="dark"] .franklin-content blockquote {
  border-left-color: #555555;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .page-foot {
  border-color: #333333;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] table tbody tr td {
  border-color: #333333;
}

html[data-theme="dark"] tr:first-of-type {
  background: #26272c;
}

/* Code stays on a light card (so highlight.js remains legible); force
   dark text inside so inline code like the email is readable. */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
  color: #1a1a1a;
}

/* Mobile dropdown menu panel (only when the dropdown is actually used) */
@media (max-width: 500px) {
  html[data-theme="dark"] nav ul,
  html[data-theme="dark"] nav.open ul {
    background: #1e1f22;
    border-color: #444444;
  }
}

/* Smooth theme change */
html {
  transition: background-color 0.25s ease, color 0.25s ease;
}

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

/* ==================================================================
    MOTION
    Restrained by design: a quiet entrance, underlines that draw
    themselves, and smooth anchor jumps. Nothing loops, nothing bounces.
    All of it collapses to zero under prefers-reduced-motion.
================================================================== */

/* Smooth anchor jumps (skip link, header anchors) */
html {
  scroll-behavior: smooth;
}

/* Underlines that draw themselves left-to-right on hover, instead of
   snapping on. currentColor keeps them correct in both themes. */
.franklin-content a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.28s ease, color 0.2s ease;
}

.franklin-content a:hover,
.franklin-content a:focus-visible {
  background-size: 100% 1px;
  text-decoration: none; /* the gradient is the underline */
}

/* Links that already carry their own affordance opt out of the sliding rule */
.franklin-content .profile-card-links a,
.franklin-content .news-toggle,
.franklin-content .bib-toggle,
.franklin-content .news-gallery-grid a,
.franklin-content .page-foot a {
  background-image: none;
}

.franklin-content .profile-card-links a:hover {
  text-decoration: underline; /* keep its own static underline */
}

/* Theme switches shouldn't snap on the card either */
.profile-card {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .franklin-content a,
  .profile-card { transition: none; }
}