:root{
  --research-reaction-image:url("assets/research/reaction-pathways/research_direction_reaction-pathways.webp");
  --research-composition-image:url("assets/research/composition-first/research_direction_composition-first.webp");
  --research-precision-image:url("assets/research/precision-molecular-theory/research_direction_precision-molecular-theory.webp");
  --research-software-image:url("assets/research/scientific-software/research_direction_scientific-software.webp");
}

/* Shared research-direction visuals for Home + Research. */
.work-visual-shared{
  position:relative;
  width:100%;
  min-height:260px;
  overflow:hidden;
  background-color:#061426;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.work-visual-shared::after{
  content:attr(data-visual-label);
  position:absolute;
  left:18px;
  bottom:15px;
  z-index:2;
  color:#9bdcff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.work-visual-reaction{
  background-image:
    var(--research-reaction-image),
    radial-gradient(circle at 17% 30%,#ff963b 0 3%,transparent 10%),
    radial-gradient(circle at 78% 27%,#2c9bd4 0 1.5%,transparent 5%),
    radial-gradient(circle at 61% 69%,rgba(118,77,219,.48),transparent 16%),
    radial-gradient(circle at 32% 72%,rgba(16,151,142,.35),transparent 18%),
    radial-gradient(#d8ecff 1px,transparent 1.5px),
    linear-gradient(#030913,#030913);
  background-size:cover,auto,auto,auto,auto,34px 37px,auto;
}
.work-visual-composition{
  background-image:
    var(--research-composition-image),
    radial-gradient(ellipse at 21% 64%,rgba(28,155,231,.46),transparent 23%),
    radial-gradient(ellipse at 57% 30%,rgba(75,90,230,.40),transparent 24%),
    radial-gradient(ellipse at 81% 70%,rgba(13,164,145,.38),transparent 22%),
    linear-gradient(145deg,#07162a,#0b2945);
}
.work-visual-precision{
  background-image:
    var(--research-precision-image),
    linear-gradient(90deg,transparent 0 16%,rgba(53,205,255,.9) 16.2% 16.5%,transparent 16.7%),
    linear-gradient(0deg,transparent 0 48%,rgba(80,211,255,.75) 48.2% 48.5%,transparent 48.7%),
    radial-gradient(circle at 50% 49%,rgba(186,241,255,.45) 0 2%,transparent 18%),
    linear-gradient(160deg,#020a13,#08243a 60%,#0a3850);
}
.work-visual-software{
  background-image:
    var(--research-software-image),
    linear-gradient(90deg,rgba(14,53,80,.95) 0 24%,rgba(7,28,48,.96) 24% 100%),
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(108,184,221,.12) 24px 25px),
    linear-gradient(145deg,#071426,#0a2b47);
}

/* Dedicated direction artwork. */
.work-visual-precision-feature{
  background-image:url("assets/research/precision-molecular-theory/research_direction_precision-molecular-theory.webp");
  background-position:center;
  background-size:cover;
}

/* Dedicated story artwork. Story files live inside their parent direction folder. */
.work-visual-glycolaldehyde{
  background-image:url("assets/research/reaction-pathways/research_story_glycolaldehyde_hero.webp");
  background-position:center;
  background-size:cover;
}

.research-news-card[href="work/alf-alf-reaction-dynamics.html"] .work-visual-reaction,
.work-hero-visual .work-visual-reaction[data-visual-label^="Active-learned PES"]{
  background-image:url("assets/research/reaction-pathways/research_story_alf_alf_reaction_dynamics.webp"),linear-gradient(145deg,#071426,#0a2b47);
}
.research-news-card[href="work/alf-caf-buffer-gas.html"] .work-visual-reaction,
.work-hero-visual .work-visual-reaction[data-visual-label="Source chemistry · reaction yield · thermalization"]{
  background-image:url("assets/research/reaction-pathways/research_story_alf_caf_buffer_gas.webp"),linear-gradient(145deg,#071426,#0a2b47);
}
.research-news-card[href="work/oxygen-activation-reaction-network.html"] .work-visual-reaction,
.work-hero-visual .work-visual-reaction[data-visual-label="Automated thermodynamic and kinetic networks"]{
  background-image:url("assets/research/reaction-pathways/research_story_oxygen_activation_reaction_network.webp"),linear-gradient(145deg,#071426,#0a2b47);
}

.research-news-card[href="work/spectroscopic-constants-relationships.html"] .work-visual-composition,
.work-hero-visual .work-visual-composition[data-visual-label="Atomic descriptors → molecular properties"]{
  background-image:url("assets/research/composition-first/research_story_spectroscopic_constants_relationships.webp"),linear-gradient(145deg,#07162a,#0b2945);
}
.research-news-card[href="work/data-driven-dipole-moments.html"] .work-visual-composition,
.work-hero-visual .work-visual-composition[data-visual-label="Gaussian-process molecular property learning"]{
  background-image:url("assets/research/composition-first/research_story_data_driven_dipole_moments.webp"),linear-gradient(145deg,#07162a,#0b2945);
}
.research-news-card[href="work/group_iii_fd3m.html"] .work-visual-composition,
.work-hero-visual .work-visual-composition[data-visual-label="Oxide alloys · approximate structures · doping"]{
  background-image:url("assets/research/composition-first/research_story_group_iii_fd3m.webp"),linear-gradient(145deg,#07162a,#0b2945);
}

.research-news-card[href="work/alf-spectroscopy-laser-cooling.html"] .work-visual-precision,
.work-hero-visual .work-visual-precision[data-visual-label="AlF spectroscopy · theory · laser cooling · molecular sources"]{
  background-image:url("assets/research/precision-molecular-theory/research_story_alf_spectroscopy_laser_cooling.webp"),linear-gradient(160deg,#020a13,#08243a 60%,#0a3850);
}
.research-news-card[href="work/ccsdt-dipole-benchmark.html"] .work-visual-precision,
.work-hero-visual .work-visual-precision[data-visual-label="High-accuracy theory · molecular observables · validation"]{
  background-image:url("assets/research/precision-molecular-theory/research_story_ccsdt_dipole_benchmark.webp"),linear-gradient(160deg,#020a13,#08243a 60%,#0a3850);
}

.research-news-card[href="work/morest-moreat-reactive-simulation.html"] .work-visual-software,
.work-hero-visual .work-visual-software[data-visual-label="Reactive dynamics · reaction models · observables"]{
  background-image:url("assets/research/scientific-software/research_story_morest_moreat.webp"),linear-gradient(145deg,#071426,#0a2b47);
}
.research-news-card[href="work/alf-spectroscopy-database.html"] .work-visual-software,
.work-hero-visual .work-visual-software[data-visual-label^="15 electronic states"]{
  background-image:url("assets/research/scientific-software/research_story_AlFdatabase.webp"),linear-gradient(145deg,#071426,#0a2b47);
}
.research-news-card[href="work/spectroscopic-constants-atomic-properties.html"] .work-visual-software,
.work-hero-visual .work-visual-software[data-visual-label="Database-driven molecular learning"]{
  background-image:url("assets/research/scientific-software/research_story_spectroscopic_constants_atomic_properties.webp"),linear-gradient(145deg,#071426,#0a2b47);
}
.research-news-card[href="work/diatomic-spectroscopy-database.html"] .work-visual-software,
.work-hero-visual .work-visual-software[data-visual-label="Spectroscopic constants · Franck–Condon calculations · machine-readable API"]{
  background-image:url("assets/research/scientific-software/research_story_diatomic_spectroscopy_database.webp"),linear-gradient(145deg,#071426,#0a2b47);
}

.research-direction-list{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:18px 0 90px;
}
.research-direction{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:64px;
  align-items:start;
  padding:62px 0;
  border-top:1px solid #e3eaf2;
}
.research-direction:first-child{border-top:0}
.research-direction-copy h2{
  margin:0 0 24px;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.research-direction-copy p{
  margin:0 0 19px;
  max-width:760px;
  color:#4f6176;
  font-size:16px;
  line-height:1.72;
}
.research-direction-copy p:last-child{margin-bottom:0}
.research-direction-copy strong{color:#344d69}
.research-direction-visual{
  position:sticky;
  top:108px;
  overflow:hidden;
  border:1px solid #dce6ef;
  border-radius:22px;
  background:#071a31;
  box-shadow:0 18px 48px rgba(7,31,57,.08);
}
.research-direction-visual .work-visual-shared{
  aspect-ratio:4/3;
  min-height:0;
}
.research-visual-caption{
  padding:14px 17px 16px;
  border-top:1px solid rgba(255,255,255,.09);
  background:#0c2948;
  color:#b9cddd;
  font-size:11px;
  line-height:1.5;
}
@media(max-width:900px){
  .research-direction{grid-template-columns:1fr;gap:30px;padding:48px 0}
  .research-direction-visual{position:relative;top:auto;max-width:640px}
}
@media(max-width:640px){
  .research-direction-list{width:calc(100% - 32px);padding-bottom:60px}
  .research-direction{padding:38px 0}
}