/* Layout: narrow column, generous whitespace */
:root {
  --content-max-width: 720px;
}

body {
  text-rendering: optimizeLegibility;
}

main.content,
main.content.column-page-left,
main.content.column-page,
main.content.column-page-right {
  max-width: var(--content-max-width);
}

/* Title block: lots of breathing room above and below */
.quarto-title-block {
  padding-block: 3rem 1.5rem;
}

/* Alumni logo row on the about page (lives in the left panel, above social links) */
.alumni-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-block: 0.25rem 0.75rem;
  flex-wrap: wrap;
}

.alumni-logos img {
  height: 1.1rem;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.alumni-logos a:hover img {
  opacity: 1;
}

/* About page: title appears ABOVE the image via flex order, columns top-aligned */
.quarto-about-trestles .quarto-title-block,
.quarto-about-jolla .quarto-title-block,
.quarto-about-solana .quarto-title-block {
  order: -1;
  padding-block: 0;
  margin-block: 0 1.5rem;
}

.quarto-about-trestles .quarto-title,
.quarto-about-jolla .quarto-title,
.quarto-about-solana .quarto-title {
  padding-block: 0;
  margin-block: 0;
}

.quarto-about-trestles h1.title,
.quarto-about-jolla h1.title,
.quarto-about-solana h1.title {
  margin-bottom: 0;
}

.quarto-about-trestles .about-entity,
.quarto-about-jolla .about-entity,
.quarto-about-solana .about-entity {
  align-self: start;
}

.quarto-about-trestles .about-image,
.quarto-about-jolla .about-image,
.quarto-about-solana .about-image {
  margin-block: 0;
}


/* Put the cover image on the LEFT instead of Quarto's default right.
   Quarto's .image-right class uses `flex-direction: row-reverse`; this flips it back. */
.quarto-listing-default .quarto-post.image-right {
  flex-direction: row;
}

/* Rounded corners on the listing thumbnail */
.quarto-listing-default .quarto-post .thumbnail-image,
.quarto-listing-default .quarto-post .listing-image img {
  border-radius: 10px;
  object-fit: cover;
}

/* Listings: typography */
.quarto-listing-default .listing-title {
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 1.35rem;
}

.quarto-listing-default .listing-description {
  opacity: 0.72;
  font-size: 0.98em;
  margin-top: 0.25rem;
}

.quarto-listing-default .listing-date,
.quarto-listing-default .listing-reading-time {
  font-size: 0.95em;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

.quarto-listing-default .listing-date {
  text-transform: uppercase;
}

/* Category pills: small, low-saturation accents */
.quarto-listing-default .listing-category {
  font-size: 0.72em;
  padding: 0.22em 0.6em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-width: 1px;
}

/* Per-category accent colors. The cat-<slug> class is added by an
   include-after-body script in _quarto.yml. Unknown tags fall through
   to Quarto's default neutral styling. Same rules apply to the Posts
   feed (index.qmd) and the Projects page (projects.qmd). */
.quarto-listing-default .listing-category.cat-python {
  background-color: hsl(48, 70%, 96%);
  border-color: hsl(45, 55%, 82%);
  color: hsl(30, 45%, 35%);
}

.quarto-listing-default .listing-category.cat-ml {
  background-color: hsl(215, 60%, 96%);
  border-color: hsl(215, 40%, 82%);
  color: hsl(215, 45%, 38%);
}

.quarto-listing-default .listing-category.cat-rag,
.quarto-listing-default .listing-category.cat-rag-laptop {
  background-color: hsl(265, 50%, 96%);
  border-color: hsl(265, 30%, 84%);
  color: hsl(265, 32%, 44%);
}

.quarto-listing-default .listing-category.cat-geospatial {
  background-color: hsl(150, 40%, 94%);
  border-color: hsl(150, 28%, 76%);
  color: hsl(150, 38%, 30%);
}

.quarto-listing-default .listing-category.cat-data-viz {
  background-color: hsl(25, 70%, 95%);
  border-color: hsl(20, 50%, 80%);
  color: hsl(15, 50%, 36%);
}

/* Inline code */
code:not(.sourceCode) {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.88em;
}

/* Footnotes */
.footnotes {
  font-size: 0.9em;
  opacity: 0.78;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 1.5rem;
  margin-top: 3rem;
}

/* Tables: keep within content column on narrow viewports, scroll horizontally if needed */
main.content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Section spacing in long-form posts */
main.content > h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

main.content > h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Blockquotes: editorial */
blockquote {
  border-left: 3px solid #1e3a5f;
  padding-left: 1.25rem;
  margin-left: 0;
  font-style: italic;
  opacity: 0.85;
}

/* Post page banner: dark gradient overlay on the cover image so the white
   title/description stay readable over any image. */
.quarto-title-banner {
  position: relative;
}

.quarto-title-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.quarto-title-banner > * {
  position: relative;
  z-index: 1;
}

.quarto-title-banner,
.quarto-title-banner .title,
.quarto-title-banner .description,
.quarto-title-banner .quarto-category,
.quarto-title-banner .quarto-title-meta,
.quarto-title-banner .quarto-title-meta * {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* "Also on" link row under the Projects page intro */
.elsewhere {
  margin-block: 0.25rem 2.5rem;
  font-size: 0.95em;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.elsewhere .elsewhere-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.elsewhere .elsewhere-link:hover {
  opacity: 1;
}

.elsewhere a.elsewhere-link img.elsewhere-logo {
  height: 1.05em;
  width: 1.05em;
  max-width: none;
  display: inline-block;
  vertical-align: -0.18em;
  object-fit: contain;
}

/* GitHub mark uses currentColor, so tint it with the link color */
.elsewhere .elsewhere-logo-github {
  color: var(--bs-body-color);
}

/* About page: HF link logo inside the about-links list,
   sized to match the Bootstrap icons next to it */
a.about-link-hf img.about-link-hf-logo {
  height: 1em;
  width: 1em;
  max-width: none;
  vertical-align: -0.15em;
  margin-right: 0.25em;
  object-fit: contain;
}

/* Subtle decorative gradient orb on listing pages */
body:has(.quarto-listing) .quarto-title-block {
  position: relative;
  overflow: visible;
}

body:has(.quarto-listing) .quarto-title-block::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -180px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(30, 58, 95, 0.07), transparent 70%);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}