/* ===== Custom overrides on top of Bulma ===== */

body {
  font-family: 'Google Sans', 'Noto Sans', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }
.result-block, #citation, #story, #papers, #discussion { scroll-margin-top: 1.5rem; }

/* Force italic to render even when the heading font lacks a bold-italic
   variant (Google Sans / Noto Sans in the Bulma stack would otherwise
   silently fall back to regular bold). Applies to <i> inside any heading. */
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i, .title i { font-style: italic !important; }

/* ----- Hero / title ----- */
.publication-title {
  line-height: 1.25;
  margin-bottom: 1.2rem !important;
}

.tagline {
  color: #4a4a4a;
  font-style: italic;
  margin-bottom: 1.5rem !important;
}

/* Override Bulma's .title + .subtitle { margin-top: -1.25rem } which would
   pull the tagline up under the multi-line title and visually overlap. */
.publication-title + .tagline {
  margin-top: 1rem !important;
}

.publication-authors {
  margin-bottom: 0.5rem;
}

.author-block {
  display: inline-block;
  white-space: nowrap;
}

.publication-affiliations {
  color: #555;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.affil-block {
  display: inline-block;
}

.publication-venue {
  margin: 1rem 0 1.4rem;
}

/* ----- Link buttons ----- */
.publication-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.publication-links .button {
  transition: transform 0.12s ease;
}

.publication-links .button:hover {
  transform: translateY(-2px);
}

/* Visually flag buttons whose URL is still a placeholder token */
.is-placeholder-link {
  opacity: 0.7;
  border: 1px dashed #b5b5b5 !important;
}

/* Site-wide engagement buttons (Schedule + Discussion) render in their own
   row below the per-paper buttons. The top margin matches the gap value
   of `.publication-links` so the spacing reads as a natural row gap. */
.publication-links.engagement-row { margin-top: 0.6rem; }

/* Cite dropdown */
.cite-dropdown .dropdown-menu { min-width: 11rem; }
.cite-dropdown .dropdown-item { display: flex; align-items: center; gap: 0.5rem; }

/* ----- Teaser ----- */
.teaser { padding-top: 1rem; }
.teaser-caption {
  margin-top: 1rem;
  color: #555;
  font-size: 1rem;
}

/* ----- Teaser videos (side-by-side autoplay loops above the abstract) ----- */
/* Collapse the section's own padding entirely so the videos sit flush
   against the hero above and the abstract section below. */
.teaser-section { padding-top: 0 !important; padding-bottom: 0 !important; }
/* And kill the top padding of whatever section comes right after, so the
   abstract heading sits close under the videos rather than 3rem below. */
.teaser-section + section { padding-top: 1rem !important; }
.teaser-video {
  /* Fixed height so two videos of different aspect ratios still line up.
     Width adapts to each video's natural aspect; max-width prevents overflow
     on narrow viewports (mobile). No border, no shadow, no background. */
  height: 450px;
  width: auto;
  max-width: 100%;
  display: inline-block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Tighten the gap between the two columns of the teaser grid (Bulma's
   default column padding is 0.75rem on each side, so the gap is 1.5rem). */
/* Override Bulma's columns layout: each column was 50% wide regardless of
   content, leaving big dead space around the narrow portrait videos.
   Use a centered flex row instead, so columns shrink-wrap their videos.
   align-items: flex-end pins both videos to a common bottom line so the
   shorter (right) video lines up with the bottom of the taller (left) one. */
.teaser-grid {
  display: flex !important;
  justify-content: center;
  /* !important to beat Bulma's .columns.is-vcentered (which is in the
     rendered markup and otherwise wins on specificity). */
  align-items: flex-end !important;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 !important;
}
.teaser-grid > .column {
  flex: 0 0 auto;
  width: auto;
  padding: 0 !important;
}
/* Scale the second (right) video to 70% of the first one. The first is
   pinned at 450 px in the base .teaser-video rule above; 70% = 315 px.
   Scoped to non-mobile so the mobile rule still wins below. */
@media (min-width: 769px) {
  .teaser-grid > .column:nth-child(2) .teaser-video { height: 315px; }
}
/* On mobile the fixed pixel height would crop or overflow; fall back to
   auto-height so videos stack and scale to column width. */
@media (max-width: 768px) {
  .teaser-video { height: auto; width: 60%; }
}

/* ----- Placeholder boxes (media the user will replace) ----- */
.placeholder-box {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(45deg, #f4f6f9, #f4f6f9 12px, #eef1f5 12px, #eef1f5 24px);
  border: 2px dashed #c0c8d2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a6573;
  text-align: center;
}

.placeholder-16x9 { aspect-ratio: 16 / 9; }
.placeholder-wide { aspect-ratio: 21 / 9; min-height: 220px; margin-bottom: 1rem; }

.placeholder-label p { margin: 0.15rem 0; }
.placeholder-label code {
  background: #e3e8ef;
  color: #2b3340;
  border-radius: 4px;
  padding: 0.05em 0.4em;
}

/* Per-figure description shown inside a placeholder box. Helps the author
   match each empty slot to the exact figure number from the paper. */
.placeholder-hint {
  max-width: 36rem;
  margin: 0.5rem auto !important;
  color: #2b3340;
  font-style: italic;
  line-height: 1.35;
}

/* Multi-line bulleted list inside the empty-videos placeholder. */
.placeholder-box.videos-pending { aspect-ratio: auto; min-height: 14rem; padding: 1.5rem; }
.videos-note {
  max-width: 38rem;
  margin: 0.5rem auto !important;
  color: #2b3340;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}

/* ----- "Firsts" cards ----- */
.firsts-sub { color: #6b7280; margin-bottom: 1.5rem !important; }

.first-card {
  height: 100%;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.first-card h3 { margin: 0.5rem 0 0.35rem; }
.first-card p { color: #4a4a4a; margin: 0; }

/* Anchor wrapper: keeps cards clickable without changing the resting appearance. */
.first-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}
.first-card-link:hover .first-card {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #c5d2e0;
}

/* ----- Hub story (thematic-arc media cards on the root page) ----- */
.story-act { margin-bottom: 3.5rem; }
.story-act:last-child { margin-bottom: 0; }
.story-act-heading { margin-bottom: 0.6rem !important; color: #2b3340; }
.story-act-intro {
  max-width: 46rem;
  margin: 0 auto 1.75rem !important;
  text-align: center;
  color: #5a6573;
  line-height: 1.55;
}

/* The card: white panel with a media area on top and body below.
   Mirrors .first-card-link hover (lift + shadow + border accent). */
.story-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}
.story-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.story-card-link:hover .story-card {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  border-color: #c5d2e0;
}

/* Fixed-height media area on a neutral backdrop; contain keeps the
   varied-aspect clips (portrait drop impacts, landscape regimes) uncropped. */
.story-media {
  position: relative;
  height: 240px;
  background: #0b0d10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.story-body { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.story-venue { font-size: 0.78rem; color: #8a93a0; margin-bottom: 0.35rem !important; }
.story-headline {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1f2430;
  margin-bottom: 0.5rem;
}
.story-finding { color: #4a4a4a; line-height: 1.5; margin-bottom: 0.9rem; }
.story-readmore {
  margin-top: auto;
  font-weight: 600;
  color: #2b6cb0;
  transition: letter-spacing 0.12s ease;
}
.story-card-link:hover .story-readmore { letter-spacing: 0.02em; }

@media (max-width: 768px) {
  .story-media { height: 200px; }
  /* lone Act III card: drop the desktop offset so it fills width when stacked */
  .story-act .column.is-offset-one-quarter { margin-left: 0; }
}

/* ----- Journal honors (cover feature, award badge, index highlight) ----- */
.hub-cover-section { padding-top: 2rem; padding-bottom: 1rem; }
.hub-cover-feature {
  display: inline-block;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hub-cover-feature img {
  max-height: 340px;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  display: block;
}
.hub-cover-feature:hover { transform: translateY(-2px); }
.hub-cover-feature:hover img { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24); }
.hub-cover-caption {
  margin-top: 0.7rem;
  color: #6b7280;
  font-size: 0.95rem;
  font-style: italic;
}

/* Gold "Front Cover" / "Featured Article" pill, overlaid on story media. */
.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: #c8901f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28em 0.7em;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.story-media .award-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
}

/* Hero award badge on a subpage (centered under the journal venue). */
.hero-award { margin: 0 0 1.2rem; }
/* Clickable badge variant: keep the white pill text, add a hover lift. */
a.award-badge { color: #fff; transition: transform 0.12s ease, box-shadow 0.12s ease; }
a.award-badge:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }

/* Highlighted honor line inside a Publications index card. */
.award-highlight {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 0.6rem !important;
  padding: 0.4rem 0.6rem;
  background: #fbf3df;
  border-left: 3px solid #c8901f;
  border-radius: 4px;
  color: #7a5a12;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ----- Result blocks ----- */
.result-block { margin-bottom: 3rem; }
.result-block .title.is-4 { margin-bottom: 1rem; }
.figure-pair { margin-bottom: 1rem; }

/* On a paired result-block where the two figures have very different
   aspect ratios (e.g. vertical-fibers Fig 1 near-square versus Fig 2
   portrait), the natural-width portrait one renders much taller.
   Cap the right figure at 50% of its column width on desktop and
   center it, so the two end up roughly the same visual height.
   The cap is lifted on mobile where the columns stack anyway. */
@media (min-width: 769px) {
  .figure-pair > .column:nth-child(2) figure.image img {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* ----- Firsts-grid media cells (image or video, replacing a first-card) -----
   Row heights in this grid are driven by the longest text card in each row.
   Rows with longer titles end up taller than rows with short titles. To keep
   the media cells from stretching to those taller rows, we cap them at a
   fixed height and center each media cell vertically within its column.
   Tune --firsts-media-height to taste. */
:root {
  --firsts-media-height: 220px;
}
.first-card-video,
.first-card-image {
  padding: 0 !important;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* right-align the media in its cell */
  background: transparent;
  border: 0;
  box-shadow: none;
  height: var(--firsts-media-height) !important;
  max-height: var(--firsts-media-height);
}
.firsts-video,
.firsts-image {
  display: block;
  width: 100%;
  height: 100%;
  /* contain keeps the natural aspect ratio (no cropping); the box may
     have empty horizontal space, which `object-position` then pushes
     to the LEFT so the media itself hugs the right edge of the cell. */
  object-fit: contain;
  object-position: right center;
}
/* Per-cell alignment override: set `align: "left"` on a firsts_cells
   image/video entry to push the media to the LEFT edge of its column
   instead of the default right. */
.first-card-image.align-left,
.first-card-video.align-left {
  justify-content: flex-start;
}
.first-card-image.align-left .firsts-image,
.first-card-video.align-left .firsts-video {
  object-position: left center;
}
/* Pull the media column inward so the capped-height box doesn't leave a
   gap at the top; instead the empty space splits above and below.
   `:has()` is supported in Chrome 105+, Safari 15.4+, Firefox 121+. */
.columns > .column:has(.first-card-image),
.columns > .column:has(.first-card-video) {
  align-self: center;
}

/* ----- Firsts intro image (centered photo/illustration above the firsts grid) ----- */
.firsts-intro-image {
  max-width: 340px;
  margin: 0.5rem auto 1.5rem !important;
}
.firsts-intro-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ----- Walkthrough video (full-width embed at bottom of "Firsts in this work") ----- */
.walkthrough-block { margin-top: 2.5rem; }
.walkthrough-title { margin-bottom: 1rem !important; color: #2b3340; }
.walkthrough-embed { max-width: 900px; margin: 0 auto; }

/* ----- Pre-figure media (videos/embeds rendered above the figure in a result block) ----- */
.pre-figure-media { margin: 0 auto 1rem; max-width: 720px; }
.pre-figure-media h4 { margin-bottom: 0.4rem; }
.pre-figure-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #000;
}

/* Float variant: the floated media pulls out of normal flow so the
   explanation paragraph wraps around it. Tiny width (~1/32 of a
   typical ~800 px column) makes it an inline-decoration scale icon.
   Adjust --pre-figure-video-float-width if you want it bigger/smaller.
   Clearfix on .result-block ensures the next sibling section doesn't
   start beside a floated child of the previous one. */
/* Width controls both the visible width and (via aspect ratio) the height
   of the floated video; tweak to make the video's bottom edge align
   with the bottom of the wrapping text. */
:root { --pre-figure-video-float-width: 138px; }
.pre-figure-media.float-left {
  float: left;
  max-width: none;
  width: var(--pre-figure-video-float-width);
  margin: 0.25rem 0.75rem 0.5rem 0;
}
.pre-figure-media.float-right {
  float: right;
  max-width: none;
  width: var(--pre-figure-video-float-width);
  margin: 0.25rem 0 0.5rem 0.75rem;
}
.pre-figure-media.float-left .pre-figure-video,
.pre-figure-media.float-right .pre-figure-video {
  border-radius: 3px;
}
.result-block::after { content: ""; display: table; clear: both; }

/* When a result block has a left-floated pre-figure media, cap the
   width of the .content block so the text wraps onto enough lines
   to cover the floated video's vertical extent. The variable controls
   the TOTAL .content block width, not the text-only column beside the
   float: the actual visible text column width is the block width
   minus the float's width minus its right margin. So with a 127 px
   floated video plus 0.75 rem right margin, a block width of 20 rem
   leaves ~11 rem of text alongside the float. */
:root { --pre-figure-float-text-width: 17rem; }
.result-block:has(.pre-figure-media.float-left) .content {
  max-width: var(--pre-figure-float-text-width);
}

/* ----- Responsive YouTube embeds ----- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  margin: 0.5rem 0;
}

.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ----- BibTeX ----- */
pre.bibtex {
  background: #1f2430;
  color: #e6e6e6;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}

pre.bibtex code { color: inherit; background: none; }

/* ----- Footer ----- */
.footer { padding: 2.5rem 1.5rem; }