/* =========================================================================
   Virtual Chemistry — main stylesheet
   Single-file, plain CSS (no Tailwind, no build step). Loaded via Hugo Pipes.

   Structure:
     1.  Design tokens (:root)
     2.  Reset & base elements
     3.  Layout: skip link, header/nav, footer, main container
     4.  Page scaffolding (.vc-page, .vc-prose)
     5.  Homepage (.vc-* hero/sections — migrated from custom.css)
     6.  Components: meta card, catalogue, publications, team, gallery
     7.  Scheme downloads & tables (migrated from custom.css)
     8.  Math box (KaTeX container)
     9.  Lightbox overlay
   ========================================================================= */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  --vc-blue: #0f4c81;
  --vc-blue-dark: #071d34;
  --vc-cyan: #1b9aaa;
  /* Cyan dark enough to sit on light backgrounds (the bright --vc-cyan is
     reserved for dark bands, where it has contrast to spare). */
  --vc-cyan-ink: #0e6b76;
  --vc-text: #111827;
  --vc-muted: #4b5563;
  /* Page canvas: a faint cool tint of the band navy — not pure white — so the
     dark bands read as deeper tones of the same atmosphere, not islands.
     Cards sit on it as white --vc-surface. */
  --vc-bg: #f4f8fc;
  --vc-surface: #ffffff;
  --vc-bg-soft: #edf3fa;
  --vc-border: rgba(15, 76, 129, 0.18);
  --vc-border-strong: rgba(15, 76, 129, 0.35);

  /* The dark-band identity (hero, showcase, CTA, footer) defined ONCE.
     Tweak the site's dark look here and every band follows. */
  --vc-band-bg: radial-gradient(
      circle at 85% 0%,
      rgba(27, 154, 170, 0.22),
      transparent 40%
    ),
    radial-gradient(circle at 12% 100%, rgba(255, 122, 41, 0.13), transparent 44%),
    linear-gradient(150deg, #0a2440 0%, #071d34 45%, #02080f 100%);
  --vc-band-border: 1px solid rgba(27, 154, 170, 0.25);
  --vc-band-shadow: 0 24px 60px rgba(7, 29, 52, 0.14);
  --vc-band-title: #f4f9ff;
  --vc-band-text: rgba(214, 230, 245, 0.78);

  --vc-radius: 0.75rem;
  --vc-radius-lg: 1.25rem;
  --vc-content-width: 62rem;
  --vc-wide-width: 72rem;

  --vc-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

/* 2. Reset & base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Always reserve scrollbar space so centred content does not shift sideways
     between short (no scrollbar) and long (scrollbar) pages. Reserves the gutter
     without painting a track on non-scrolling pages (unlike overflow-y: scroll). */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
}

.vc-body {
  font-family: var(--vc-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--vc-text);
  background: var(--vc-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--vc-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--vc-blue-dark);
}

h1,
h2,
h3 {
  color: var(--vc-blue-dark);
  line-height: 1.2;
}

/* 3. Layout -------------------------------------------------------------- */
.vc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--vc-blue-dark);
  color: #fff;
  border-radius: 0 0 var(--vc-radius) 0;
}
.vc-skip-link:focus {
  left: 0;
  color: #fff;
}

/* Header / nav */
.vc-header {
  border-bottom: 1px solid var(--vc-border);
  background: rgba(244, 248, 252, 0.88);
  backdrop-filter: saturate(150%) blur(6px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.vc-header-inner {
  max-width: var(--vc-wide-width);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.vc-brand {
  text-decoration: none;
  font-weight: 850;
  font-size: 1.2rem;
  color: var(--vc-blue-dark);
  letter-spacing: -0.02em;
}
.vc-brand-logo {
  height: 2rem;
  width: auto;
  display: block;
}

.vc-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.vc-nav-link {
  text-decoration: none;
  color: var(--vc-muted);
  font-weight: 650;
  font-size: 0.98rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.vc-nav-link:hover {
  color: var(--vc-blue-dark);
}
.vc-nav-link.is-active {
  color: var(--vc-blue-dark);
  border-bottom-color: var(--vc-blue);
}

/* Mobile nav: checkbox-hack burger, no JS */
.vc-nav-toggle {
  display: none;
}
.vc-nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.4rem;
}
.vc-nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--vc-blue-dark);
  border-radius: 2px;
}

@media (max-width: 720px) {
  .vc-nav-burger {
    display: flex;
  }
  .vc-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.75rem;
  }
  .vc-nav-toggle:checked ~ .vc-nav {
    display: flex;
  }
}

/* Main element: neutral growth container only. Width, horizontal centering and
   the page gutter live on the inner wrappers (.vc-home for the homepage;
   .vc-page for content pages) so the homepage stays fully isolated from the
   content-page width system. */
.vc-main {
  flex: 1 0 auto;
  width: 100%;
}

/* Footer — light, sitewide. Kept quiet so the dark bands (hero/showcase/CTA/
   contact) stay the accents; a slightly deeper tint of the page canvas is
   enough to close the page. */
.vc-footer {
  border-top: 1px solid var(--vc-border);
  background: var(--vc-bg-soft);
  margin-top: 4rem;
}
.vc-footer-inner {
  max-width: var(--vc-wide-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  text-align: center;
}
.vc-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.vc-footer-link {
  color: var(--vc-muted);
  text-decoration: none;
  font-weight: 600;
}
.vc-footer-link:hover {
  color: var(--vc-blue);
}
.vc-footer-copy {
  margin: 0;
  color: var(--vc-muted);
  font-size: 0.9rem;
}
.vc-footer-copy a {
  color: var(--vc-cyan-ink);
}
.vc-footer-copy a:hover {
  color: var(--vc-blue);
}

/* 4. Page scaffolding ---------------------------------------------------- */
/* Content shell — the SAME wide, centred container the homepage (.vc-home) uses,
   so every content page's content left edge matches the homepage at all widths.
   max-width + padding are kept identical to .vc-home (do not let them drift). */
.vc-page {
  max-width: var(--vc-wide-width);
  margin: 0 auto;
  padding: 1.5rem;
}

.vc-page-header {
  margin: 1rem 0 2rem;
}
.vc-page-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: var(--vc-content-width);
}
.vc-page-lede {
  color: var(--vc-muted);
  font-size: 1.1rem;
  margin-top: 0.5rem;
  max-width: var(--vc-content-width);
}

.vc-text-link {
  color: var(--vc-blue);
  font-weight: 700;
  text-decoration: none;
}
.vc-text-link:hover {
  color: var(--vc-blue-dark);
}

.vc-page-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  max-width: var(--vc-content-width);
}
.vc-page-list-item {
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
  padding: 1rem;
}
.vc-page-list-item p {
  color: var(--vc-muted);
  margin: 0.4rem 0 0;
}

/* Rendered-markdown typography. Replaces Tailwind Typography (prose).
   The prose container spans the full content width; flowing text (paragraphs,
   headings, lists, blockquotes, equations) caps at reading width and starts at
   the left spine, while structured blocks (tables, catalogue, galleries, cards)
   extend to the full width — all sharing the same left edge. */
.vc-prose {
  max-width: none;
}
.vc-prose > p,
.vc-prose > ul,
.vc-prose > ol,
.vc-prose > h2,
.vc-prose > h3,
.vc-prose > blockquote,
.vc-prose > .mathbox {
  max-width: var(--vc-content-width);
}
/* Interior section headings — ONE style shared by every content page
   (markdown h2s, team group headings, publication years, catalog headings,
   and template section headers via `.vc-page .vc-section-header h2`).
   Display-size headings and uppercase kickers are homepage/dark-band-only. */
.vc-prose > h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vc-blue-dark);
  margin: 2.5rem 0 0.75rem;
}
.vc-prose > h3 {
  font-size: 1.25rem;
  font-weight: 750;
  margin: 1.75rem 0 0.5rem;
}
.vc-prose p {
  margin: 0.85rem 0;
}
.vc-prose ul,
.vc-prose ol {
  margin: 0.85rem 0;
  padding-left: 1.4rem;
}
.vc-prose li {
  margin: 0.3rem 0;
}
.vc-prose img {
  border-radius: var(--vc-radius);
}
.vc-prose table {
  width: 100%;
}
.vc-prose code {
  background: rgba(15, 76, 129, 0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
  font-size: 0.92em;
}
.vc-prose pre {
  background: var(--vc-blue-dark);
  color: #f3f6fb;
  padding: 1rem;
  border-radius: var(--vc-radius);
  overflow-x: auto;
}
.vc-prose pre code {
  background: none;
  padding: 0;
}

/* 404 */
.vc-404 {
  text-align: center;
  padding: 4rem 0;
}

/* 6. Components ----------------------------------------------------------- */

/* Scheme metadata card */
.vc-meta-card {
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
  padding: 1rem 1.25rem;
}
.vc-meta-grid {
  margin: 0;
  display: grid;
  gap: 0.6rem 1.5rem;
  grid-template-columns: 1fr;
  font-size: 0.95rem;
}
@media (min-width: 768px) {
  .vc-meta-grid {
    grid-template-columns: 1fr 1fr;
  }
  .vc-meta-wide {
    grid-column: 1 / -1;
  }
}
.vc-meta-item dt {
  display: inline;
  color: var(--vc-muted);
  font-weight: 600;
}
.vc-meta-item dt::after {
  content: ":";
}
.vc-meta-item dd {
  display: inline;
  margin: 0 0 0 0.35rem;
}

/* Catalogue */
.vc-catalog {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vc-catalog-heading {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vc-blue-dark);
  margin: 1.5rem 0 0.25rem;
}
.vc-catalog-subheading {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0.75rem 0 0;
  color: var(--vc-muted);
}
.vc-catalog-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .vc-catalog-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.vc-catalog-card {
  border: 1px solid var(--vc-border);
  border-radius: 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--vc-surface);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.vc-catalog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 76, 129, 0.35);
  box-shadow: 0 14px 34px rgba(7, 29, 52, 0.08);
}
.vc-catalog-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--vc-blue-dark);
}
.vc-catalog-objectives {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vc-catalog-objective a {
  font-weight: 600;
}
.vc-catalog-multi {
  color: var(--vc-muted);
}
.vc-catalog-soon {
  color: var(--vc-muted);
  opacity: 0.6;
}

/* Publications */
.vc-pub-updated {
  color: var(--vc-muted);
  font-size: 0.9rem;
}
.vc-pub-year {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vc-blue-dark);
  margin: 2.5rem 0 0.75rem;
}
.vc-pub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vc-pub-item {
  border: 1px solid var(--vc-border);
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--vc-surface);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.vc-pub-item:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 76, 129, 0.35);
  box-shadow: 0 14px 34px rgba(7, 29, 52, 0.08);
}
.vc-pub-title {
  font-weight: 750;
}
.vc-pub-authors {
  color: var(--vc-muted);
  font-size: 0.95rem;
  margin-top: 0.2rem;
}
.vc-pub-links {
  font-size: 0.95rem;
  margin-top: 0.5rem;
}
.vc-pub-doi-label {
  color: var(--vc-muted);
}

/* Contact band — the site's contact section, at the top of the Team page
   (anchored #contact; the homepage CTA and the scheme library link here).
   Same dark band identity as hero/showcase/CTA/footer. */
.vc-contact {
  margin: 0 0 3rem;
  border-radius: 1.5rem;
  border: var(--vc-band-border);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--vc-band-bg);
  box-shadow: var(--vc-band-shadow);
  scroll-margin-top: 5rem;
}
.vc-contact-head {
  max-width: var(--vc-content-width);
}
.vc-contact-head .vc-section-kicker {
  color: var(--vc-cyan);
}
.vc-contact-head h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 850;
  color: var(--vc-band-title);
  margin: 0;
}
.vc-contact-head p {
  color: var(--vc-band-text);
  line-height: 1.65;
  margin: 0.8rem 0 0;
}
.vc-contact-grid {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .vc-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.vc-contact-card {
  border: 1px solid rgba(214, 230, 245, 0.16);
  border-radius: 1.25rem;
  padding: 1.25rem;
  background: rgba(214, 230, 245, 0.05);
}
.vc-contact-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--vc-band-title);
  margin: 0;
}
.vc-contact-card p {
  color: var(--vc-band-text);
  line-height: 1.6;
  margin: 0.5rem 0 0;
}

/* Team */
.vc-team-heading {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vc-blue-dark);
  margin: 2.5rem 0 1.25rem;
}
.vc-team-grid {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .vc-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .vc-team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.vc-team-card {
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius-lg);
  padding: 1.5rem;
  background: var(--vc-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vc-team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(7, 29, 52, 0.08);
}
.vc-team-photo,
.vc-team-avatar {
  height: 7rem;
  width: 7rem;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--vc-border);
  margin-bottom: 1rem;
}
.vc-team-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--vc-blue-dark);
  background: rgba(15, 76, 129, 0.06);
}
.vc-team-name {
  font-weight: 750;
  font-size: 1.2rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.vc-team-role {
  color: var(--vc-muted);
  font-size: 0.95rem;
  margin-top: 0.4rem;
}
.vc-team-links {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.95rem;
}

/* Scheme gallery */
.scheme-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .scheme-gallery {
    grid-template-columns: repeat(var(--scheme-cols, 2), minmax(0, 1fr));
  }
}
.vc-gallery-figure {
  margin: 0;
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
  padding: 0.75rem;
}
.vc-gallery-media {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
}
.vc-gallery-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--vc-muted);
}

/* 7. Scheme downloads ---------------------------------------------------- */
.scheme-downloads-card {
  border: 1px solid var(--vc-border-strong);
  border-radius: var(--vc-radius);
  padding: 1rem;
}
.scheme-downloads-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.scheme-downloads-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.scheme-download-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
  padding: 0.75rem;
}
.scheme-download-label {
  font-weight: 650;
}
.scheme-download-filename {
  font-size: 0.9rem;
  color: var(--vc-muted);
  word-break: break-word;
}
.scheme-download-size {
  font-size: 0.9rem;
  color: var(--vc-muted);
  white-space: nowrap;
}
.scheme-download-btn {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid var(--vc-border-strong);
  text-decoration: none;
  font-weight: 650;
  color: var(--vc-blue-dark);
}
.scheme-download-btn:hover {
  background: rgba(15, 76, 129, 0.06);
}

/* Scheme tables */
.scheme-table-section-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* "Training databases" category break: a rule + eyebrow label that visually
   separates the training-database tables from the standalone overview table. */
.scheme-table-group-header {
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--vc-border-strong);
}
.scheme-table-group-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vc-blue);
}
.scheme-table-card {
  border: 1px solid var(--vc-border-strong);
  border-radius: 0.9rem;
  padding: 1rem;
  background: rgba(248, 251, 255, 0.6);
}
/* The overview table is a different kind (what the scheme IS, not how it was
   trained) — a left accent marks it apart from the training-database cards. */
.scheme-table-card--overview {
  border-left: 3px solid var(--vc-blue);
}
/* Titles head their table: larger/darker, on their own baseline, and separated
   from the table body by a rule so a title announces itself. */
.scheme-table-title {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--vc-blue-dark);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vc-border);
}
.scheme-table-wrap {
  display: block;
  width: 100%;
  overflow-x: auto;
}
.scheme-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--vc-border-strong);
  border-radius: 0.5rem;
  overflow: hidden;
}
.scheme-table th,
.scheme-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--vc-border);
  vertical-align: top;
  text-align: left;
}
.scheme-table thead tr {
  background: rgba(15, 76, 129, 0.08);
}
.scheme-table thead th {
  font-weight: 750;
}
.scheme-table tbody tr:nth-child(even) {
  background: rgba(15, 76, 129, 0.03);
}
.scheme-td-k {
  font-weight: 650;
  white-space: normal;
  overflow-wrap: anywhere;
}
.scheme-td-v {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.55;
}
.scheme-cell-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.scheme-cell-line {
  display: grid;
  grid-template-columns: minmax(8rem, 0.55fr) 1fr;
  gap: 0.8rem;
  align-items: baseline;
}
.scheme-cell-label {
  font-weight: 650;
  color: var(--vc-muted);
}
.scheme-cell-value {
  overflow-wrap: anywhere;
}
.scheme-cell-note {
  grid-column: 2;
  font-size: 0.92rem;
  color: var(--vc-muted);
}

/* 8. Math box ------------------------------------------------------------ */
.mathbox {
  border: 1.5px solid var(--vc-border-strong);
  background: rgba(15, 76, 129, 0.03);
  border-radius: var(--vc-radius);
  padding: 1rem;
  overflow-x: auto;
}
.mathbox .katex-display {
  margin: 0;
}

/* 8b. Search (Pagefind UI) -------------------------------------------------
   The Pagefind UI ships its own stylesheet (generated into /pagefind/ by CI)
   and themes via CSS custom properties — map them onto the site tokens. */
.vc-search {
  max-width: var(--vc-content-width);
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--vc-blue);
  --pagefind-ui-text: var(--vc-text);
  --pagefind-ui-background: var(--vc-surface);
  --pagefind-ui-border: rgba(15, 76, 129, 0.28);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0.6rem;
  --pagefind-ui-tag: var(--vc-bg-soft);
  --pagefind-ui-font: var(--vc-font);
}
.vc-search-unavailable {
  max-width: var(--vc-content-width);
  border: 1px dashed var(--vc-border-strong);
  border-radius: var(--vc-radius);
  padding: 1rem 1.25rem;
  color: var(--vc-muted);
  background: var(--vc-bg-soft);
}

/* 9. Lightbox ------------------------------------------------------------ */
.vc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 29, 52, 0.82);
  cursor: zoom-out;
}
.vc-lightbox[hidden] {
  display: none;
}
.vc-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  cursor: default;
}
.vc-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.vc-lightbox-open {
  overflow: hidden;
}

/* =========================================================================
   5. Homepage  (migrated verbatim in spirit from the previous custom.css;
   tokens now come from :root, so the local --vc-* block was removed)
   ========================================================================= */
/* Homepage shell — owns its own width, centering and gutter, fully independent
   of the .vc-page content-width system. (Reproduces the geometry the shared
   .vc-main container used to provide, so the homepage is unchanged.) */
.vc-home {
  max-width: var(--vc-wide-width);
  margin: 0 auto;
  padding: 1.5rem;
}
/* Hero — dark and cinematic: a canvas-drawn turbulent flame front animates
   behind the copy (assets/js/home.js). Flame colors read against near-black,
   and the dark hero bookends the dark showcase band below. */
.vc-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: clamp(3rem, 7vw, 6rem);
  margin-top: 1.5rem;
  background: var(--vc-band-bg);
  border: var(--vc-band-border);
  box-shadow: var(--vc-band-shadow);
}
.vc-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.vc-hero-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(214, 230, 245, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(214, 230, 245, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom right, black, transparent 80%);
  pointer-events: none;
}
.vc-hero-inner {
  position: relative;
}
.vc-eyebrow,
.vc-section-kicker {
  color: var(--vc-cyan-ink);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 0.9rem;
}
.vc-hero .vc-eyebrow {
  color: var(--vc-cyan);
}
.vc-hero-title {
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.06em;
  font-weight: 850;
  color: var(--vc-band-title);
}
.vc-hero-text {
  margin-top: 1.5rem;
  color: var(--vc-band-text);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}
.vc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}
.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.8rem 1.15rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.vc-btn:hover {
  transform: translateY(-1px);
}
.vc-btn-primary {
  background: var(--vc-blue-dark);
  color: white;
  box-shadow: 0 10px 24px rgba(7, 29, 52, 0.18);
}
.vc-btn-primary:hover {
  color: white;
}
.vc-btn-secondary {
  border: 1px solid var(--vc-border);
  color: var(--vc-blue-dark);
  background: rgba(255, 255, 255, 0.7);
}
/* Hero button variants — the standard pair vanishes on the dark hero. */
.vc-btn-hero-primary {
  background: #f4f9ff;
  color: var(--vc-blue-dark);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.vc-btn-hero-primary:hover {
  color: var(--vc-blue-dark);
  background: #ffffff;
}
.vc-btn-hero-secondary {
  border: 1px solid rgba(214, 230, 245, 0.35);
  color: #e6f1fa;
  background: rgba(255, 255, 255, 0.06);
}
.vc-btn-hero-secondary:hover {
  color: #ffffff;
  border-color: rgba(27, 154, 170, 0.7);
}
.vc-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 1.25rem 0 3rem;
}
@media (min-width: 768px) {
  .vc-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.vc-stat {
  border: 1px solid var(--vc-border);
  border-radius: 1rem;
  padding: 1.25rem;
  background: var(--vc-surface);
}
.vc-stat-link {
  display: block;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.vc-stat-link:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 76, 129, 0.35);
  box-shadow: 0 14px 34px rgba(7, 29, 52, 0.08);
}
.vc-stat-number {
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 850;
  color: var(--vc-blue-dark);
}
.vc-stat-label {
  margin-top: 0.45rem;
  color: var(--vc-muted);
  font-size: 0.95rem;
}
.vc-section {
  margin: 4rem 0;
}
/* First section of a content page: sits right under the page header, so the
   full 4rem homepage rhythm would leave a hole. */
.vc-section-first {
  margin-top: 1.5rem;
}
.vc-section-header {
  max-width: var(--vc-content-width);
  margin-bottom: 1.5rem;
}
.vc-section-header h2,
.vc-split h2,
.vc-cta h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 850;
  color: var(--vc-blue-dark);
}
.vc-section-header p,
.vc-split p,
.vc-cta p {
  color: var(--vc-muted);
  line-height: 1.65;
  margin-top: 0.8rem;
}
/* On content pages (.vc-page) section headers drop to the shared interior
   heading scale and the section rhythm tightens — the display treatment
   above stays homepage-only. */
.vc-page .vc-section {
  margin: 3rem 0;
}
.vc-page .vc-section-first {
  margin-top: 1.5rem;
}
.vc-page .vc-section-header h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.vc-page .vc-section-header p {
  margin-top: 0.5rem;
}
.vc-feature-grid,
.vc-latest-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .vc-feature-grid,
  .vc-latest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.vc-feature-card,
.vc-latest-card {
  display: block;
  border: 1px solid var(--vc-border);
  border-radius: 1.25rem;
  padding: 1.25rem;
  background: var(--vc-surface);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.vc-feature-card:hover,
.vc-latest-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 76, 129, 0.35);
  box-shadow: 0 14px 34px rgba(7, 29, 52, 0.08);
}
.vc-feature-tag {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(27, 154, 170, 0.12);
  color: var(--vc-cyan-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
  margin-bottom: 1rem;
}
.vc-feature-card h3,
.vc-latest-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--vc-blue-dark);
}
.vc-feature-card p,
.vc-latest-card p {
  color: var(--vc-muted);
  line-height: 1.6;
  margin-top: 0.6rem;
}
.vc-split {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin: 4rem 0;
  align-items: stretch;
}
@media (min-width: 900px) {
  .vc-split {
    grid-template-columns: 1.1fr 0.9fr;
  }
}
.vc-panel {
  border: 1px solid var(--vc-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: linear-gradient(
      135deg,
      rgba(15, 76, 129, 0.08),
      rgba(27, 154, 170, 0.05)
    ),
    var(--vc-surface);
}
.vc-panel-title {
  font-weight: 850;
  color: var(--vc-blue-dark);
  margin-bottom: 0.8rem;
}
.vc-panel ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--vc-muted);
  line-height: 1.8;
}
.vc-latest-meta {
  margin-top: 1rem;
  color: var(--vc-blue);
  font-size: 0.9rem;
  font-weight: 650;
}
.vc-empty {
  border: 1px dashed var(--vc-border);
  border-radius: 1rem;
  padding: 1.25rem;
  color: var(--vc-muted);
}
/* Contact CTA — third dark band: with the hero and showcase it turns the dark
   treatment into a rhythm (open dark, anchor dark, close dark) instead of two
   isolated boxes. */
.vc-cta {
  margin: 4rem 0 2rem;
  border-radius: 1.5rem;
  border: var(--vc-band-border);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--vc-band-bg);
  box-shadow: var(--vc-band-shadow);
  display: grid;
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 800px) {
  .vc-cta {
    grid-template-columns: 1fr auto;
  }
}
.vc-cta .vc-section-kicker {
  color: var(--vc-cyan);
}
.vc-cta h2 {
  color: var(--vc-band-title);
}
.vc-cta p {
  color: var(--vc-band-text);
}

/* Showcase band — flame simulations rendered by the published schemes.
   Deliberately dark: temperature/HRR fields and flame videos read far better
   against near-black than against the light canvas. Everything stays inside
   the shared .vc-home container (one site-wide left edge). */
.vc-showcase {
  margin: 3rem 0 4rem;
  border-radius: 1.5rem;
  border: var(--vc-band-border);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--vc-band-bg);
  box-shadow: var(--vc-band-shadow);
}
.vc-showcase-head {
  margin-bottom: 1.75rem;
}
.vc-showcase-kicker {
  color: var(--vc-cyan);
}
.vc-showcase-head h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 850;
  color: var(--vc-band-title);
  margin: 0;
}
.vc-showcase-head p {
  color: var(--vc-band-text);
  line-height: 1.65;
  margin-top: 0.8rem;
}
.vc-showcase-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: stretch;
}
.vc-showcase-item {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 1rem;
  border: 1px solid rgba(214, 230, 245, 0.12);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.vc-showcase-item:hover {
  transform: translateY(-2px);
  border-color: rgba(27, 154, 170, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.vc-showcase-media-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 1rem;
}
.vc-showcase-media {
  display: block;
  max-width: 100%;
  max-height: 26rem;
  width: auto;
  border-radius: 0.5rem;
}
.vc-showcase-caption {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1.1rem 1.1rem;
  border-top: 1px solid rgba(214, 230, 245, 0.1);
  color: rgba(214, 230, 245, 0.82);
  font-size: 0.92rem;
  line-height: 1.5;
}
.vc-showcase-source {
  color: var(--vc-cyan);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.88rem;
}
.vc-showcase-source:hover {
  text-decoration: underline;
}

/* Explainer — "what is a virtual scheme": prose beside an inline SVG pipeline
   diagram (detailed mechanism → optimization → virtual scheme → LES). */
.vc-explainer {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  align-items: center;
  /* Anchor target: keep the section clear of the sticky-free header when
     jumped to from the hero button. */
  scroll-margin-top: 2rem;
}
@media (min-width: 960px) {
  .vc-explainer {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.vc-explainer-text h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 850;
  color: var(--vc-blue-dark);
}
.vc-explainer-text p {
  color: var(--vc-muted);
  line-height: 1.7;
  margin-top: 0.9rem;
  max-width: 56ch;
}
.vc-explainer-text .vc-text-link {
  display: inline-block;
  margin-top: 0.9rem;
}
.vc-explainer-figure {
  border: 1px solid var(--vc-border);
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(
      135deg,
      rgba(15, 76, 129, 0.05),
      rgba(27, 154, 170, 0.04)
    ),
    var(--vc-surface);
}
.vc-diagram {
  display: block;
  width: 100%;
  height: auto;
}
.vc-diagram-label {
  font: 700 14px var(--vc-font);
  fill: var(--vc-blue-dark);
}
.vc-diagram-sublabel {
  font: 500 11px var(--vc-font);
  fill: var(--vc-muted);
}

/* "Using the platform" steps */
.vc-steps-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .vc-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.vc-step-card {
  border: 1px solid var(--vc-border);
  border-radius: 1.25rem;
  padding: 1.25rem;
  background: var(--vc-surface);
}
.vc-step-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--vc-blue-dark);
  margin: 0;
}
.vc-step-card p {
  color: var(--vc-muted);
  line-height: 1.6;
  margin-top: 0.6rem;
}
.vc-steps-cta {
  margin-top: 1.5rem;
}

/* Fuel / objective chips on latest-scheme cards */
.vc-latest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.vc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  background: rgba(15, 76, 129, 0.09);
  color: var(--vc-blue);
  font-size: 0.78rem;
  font-weight: 700;
}
.vc-chip-soft {
  background: rgba(27, 154, 170, 0.12);
  color: var(--vc-cyan-ink);
}

/* Scroll reveals — two implementations, one element vocabulary ([data-reveal]).

   1. CSS scroll-driven animations (preferred): pure CSS, no JS involved, keeps
      working even with scripts disabled. Elements fade/slide in as they enter
      the viewport; anything already in view at load sits at the animation's
      end state, so nothing is ever hidden.
   2. JS IntersectionObserver fallback for browsers without animation-timeline:
      home.js feature-detects, adds .vc-js to <html>, and drives .is-revealed.
      The hidden state is gated on .vc-js so content is never lost if the
      script doesn't load. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      /* NOTE: the `animation` shorthand resets animation-timeline, so the
         timeline MUST be declared after it. Keep this order. */
      animation: vc-reveal linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 45%;
    }
  }
}
@keyframes vc-reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vc-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.vc-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .vc-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Scheme model-card sections (step 3): quick downloads, citations, limitations,
   dataset callout. vc- prefixed; cards fill the container like the table/
   download cards (not capped to prose width).
   ─────────────────────────────────────────────────────────────────────────── */

/* Quick downloads — chips inside the identity (meta) card */
.vc-quick-downloads {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--vc-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.vc-quick-downloads-label {
  font-weight: 600;
  color: var(--vc-muted);
  font-size: 0.9rem;
}
.vc-quick-dl-btn {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--vc-border-strong);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--vc-blue-dark);
}
.vc-quick-dl-btn:hover {
  background: rgba(15, 76, 129, 0.06);
}

/* Citation (BibTeX) blocks — shared by both citations */
.vc-ref-mech {
  margin: 0 0 0.5rem;
}
.vc-cite {
  border: 1px solid var(--vc-border);
  border-radius: var(--vc-radius);
  padding: 1rem;
  margin: 0.5rem 0 1rem;
  background: var(--vc-bg-soft);
}
.vc-cite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.vc-cite-label {
  font-weight: 750;
  color: var(--vc-blue-dark);
}
.vc-cite-caption {
  margin: 0.35rem 0 0;
  color: var(--vc-muted);
  font-size: 0.9rem;
}
.vc-cite-doi {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}
/* Specificity 0,2,0 deliberately beats the global `.vc-prose pre` (0,1,1) dark
   code-block treatment, so the citation reads as a light quoted reference, not
   a terminal. Keep these as `.vc-cite .vc-cite-bibtex`, not a bare class. */
.vc-cite .vc-cite-bibtex {
  margin: 0.75rem 0 0;
  padding: 0.8rem 1rem;
  background: var(--vc-surface);
  color: var(--vc-text);
  border: 1px solid var(--vc-border);
  border-radius: 0.6rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre;
}
.vc-cite .vc-cite-bibtex code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: inherit;
  background: none;
  padding: 0;
}
.vc-copy-btn {
  flex: none;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--vc-border-strong);
  background: var(--vc-surface);
  color: var(--vc-blue-dark);
  font-weight: 650;
  font-size: 0.85rem;
}
.vc-copy-btn:hover {
  background: rgba(15, 76, 129, 0.06);
}
.vc-copy-btn.is-copied {
  color: #136f3a;
  border-color: #136f3a;
}

/* Known limitations / domain of validity — prominent callout */
.vc-limitations {
  border: 1px solid var(--vc-border-strong);
  border-left: 4px solid var(--vc-cyan);
  border-radius: var(--vc-radius);
  padding: 1rem 1.25rem;
  background: rgba(27, 154, 170, 0.06);
}
.vc-limitations-list {
  margin: 0;
  padding-left: 1.2rem;
}
.vc-limitations-list li {
  margin: 0.35rem 0;
}

/* Official citable dataset callout */
.vc-dataset-callout {
  margin-top: 1rem;
  border: 1px solid var(--vc-border-strong);
  border-radius: var(--vc-radius);
  padding: 1rem 1.25rem;
  background: var(--vc-bg-soft);
}
.vc-dataset-callout-title {
  font-weight: 800;
  color: var(--vc-blue-dark);
  margin-bottom: 0.25rem;
}
.vc-dataset-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  background: var(--vc-blue);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.vc-dataset-btn:hover {
  background: var(--vc-blue-dark);
}
.vc-dataset-doi {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}
.vc-license {
  margin-top: 0.5rem;
  color: var(--vc-muted);
}