/* ==========================================================================
   Vincent-Ruz Lab — site styles
   2026-11-05

   Upload to Cascade, then attach via _Site Configuration > _Theme Customizer
   ("Include any additional files or code"). Every class is prefixed `vrl-`
   so nothing here can collide with the NMSU template.

   Palette: see 08_Brand/06_Website/03_PALETTE.md
   ========================================================================== */

:root {
  --vrl-crimson:    #8C0B42;
  --vrl-azure:      #009DB8;
  --vrl-azure-deep: #00758A;
  --vrl-gold:       #F0A014;
  --vrl-ink:        #1E2022;
  --vrl-body:       #444444;
  --vrl-muted:      #677788;
  --vrl-band:       #F8FAFD;
  --vrl-line:       #E7EAF3;
}

/* --- Eyebrow: small caps label above a heading ------------------------- */
.vrl-eyebrow {
  font-family: Montserrat, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vrl-azure-deep);
  margin-bottom: .75rem;
}

/* --- Display heading with a gold rule under it ------------------------- */
.vrl-display {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: var(--vrl-ink);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.vrl-rule::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: 1.25rem;
  background: var(--vrl-gold);
  border-radius: 3px;
}
.vrl-rule-center::after { margin-left: auto; margin-right: auto; }

/* --- Lead paragraph ----------------------------------------------------- */
.vrl-lead {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--vrl-body);
  max-width: 44rem;
}

/* --- Research-area card ------------------------------------------------- */
.vrl-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--vrl-line);
  border-radius: .5rem;
  padding: 2rem 1.75rem 1.75rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vrl-card::before {                 /* azure cap along the top edge */
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 4px;
  background: var(--vrl-azure);
  border-radius: .5rem .5rem 0 0;
}
.vrl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .75rem 2rem rgba(30,32,34,.10);
  border-color: #D5DAE5;
}
.vrl-card-num {                     /* 01 / 02 / 03 */
  font-family: Montserrat, sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--vrl-gold);
  display: block;
  margin-bottom: .5rem;
}
.vrl-card h3 {
  font-family: Montserrat, sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--vrl-ink);
  margin-bottom: .625rem;
}
.vrl-card p {
  color: var(--vrl-body);
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- Full-width colour bands -------------------------------------------- */
.vrl-band        { background: var(--vrl-band); }
.vrl-band-crimson{ background: var(--vrl-crimson); color: #fff; }
.vrl-band-crimson .vrl-display,
.vrl-band-crimson h2 { color: #fff; }
.vrl-band-crimson .vrl-rule::after { background: var(--vrl-gold); }
.vrl-band-crimson p { color: rgba(255,255,255,.92); }

/* A statement large enough that azure-on-crimson is never needed */
.vrl-statement {
  font-family: Montserrat, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  max-width: 52rem;
}

/* --- Buttons ------------------------------------------------------------ */
.vrl-btn {
  display: inline-block;
  font-family: Montserrat, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: .3125rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vrl-btn-primary {
  background: var(--vrl-crimson);
  color: #fff !important;
  border: 2px solid var(--vrl-crimson);
}
.vrl-btn-primary:hover { background: #6E0834; border-color: #6E0834; }

.vrl-btn-ghost {
  background: transparent;
  color: var(--vrl-azure-deep) !important;
  border: 2px solid var(--vrl-azure);
}
.vrl-btn-ghost:hover { background: var(--vrl-azure); color: #fff !important; }

.vrl-btn-on-crimson {
  background: #fff;
  color: var(--vrl-crimson) !important;
  border: 2px solid #fff;
}
.vrl-btn-on-crimson:hover { background: var(--vrl-gold); border-color: var(--vrl-gold); color: var(--vrl-ink) !important; }

/* --- Inline links inside lab content ------------------------------------ */
.vrl-prose a {
  color: var(--vrl-azure-deep);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.vrl-prose a:hover { color: var(--vrl-crimson); }

/* --- Spacing helper ------------------------------------------------------ */
.vrl-section { padding-top: 4rem; padding-bottom: 4rem; }
@media (max-width: 767px) {
  .vrl-section  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .vrl-statement{ font-size: 1.25rem; }
  .vrl-card     { padding: 1.5rem 1.25rem 1.25rem; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .vrl-card, .vrl-btn { transition: none; }
  .vrl-card:hover { transform: none; }
}

/* --- Research line card: projects listed under the description ----------- */
.vrl-card { display: flex; flex-direction: column; }
.vrl-card > p { margin-bottom: 1.5rem; }

.vrl-projects { margin-top: auto; border-top: 1px solid var(--vrl-line); padding-top: 1rem; }
.vrl-projects ul { margin: 0; padding: 0; }
.vrl-projects li { list-style: none; margin-bottom: .625rem; }
.vrl-project {
  display: block; font-family: Montserrat, sans-serif;
  font-size: .8125rem; font-weight: 600; color: var(--vrl-azure-deep);
}
.vrl-project-state { display: block; font-size: .75rem; line-height: 1.5; color: var(--vrl-muted); }

/* Gold tag bar at the top of each card (replaces a numeral) */
.vrl-tag { display: block; width: 32px; height: 4px; background: var(--vrl-gold); border-radius: 2px; margin-bottom: 1rem; }

/* --- Servingness section, crimson ---------------------------------------- */
/* The masthead is white, so crimson appears once on the page: here. White on
   crimson measures 9.37:1. The rule under the heading is gold, never azure —
   azure on crimson is 2.91:1 and fails. */
.vrl-band-crimson { background: var(--vrl-crimson); }
.vrl-band-crimson .vrl-eyebrow { color: rgba(255,255,255,.78); }
.vrl-band-crimson h2 {
  font-family: Montserrat, sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  max-width: 46rem;
  margin: 0;
  text-wrap: balance;
}
.vrl-band-crimson h2::after {
  content: "";
  display: block;
  width: 64px; height: 5px;
  border-radius: 3px;
  background: var(--vrl-gold);
  margin-top: 1.25rem;
}
.vrl-band-crimson p { color: rgba(255,255,255,.92); max-width: 46rem; margin: 1.5rem 0 0; }

@media (max-width: 767px) { .vrl-band-crimson h2 { font-size: 1.3125rem; } }

/* --- Section intro paragraph --------------------------------------------- */
.vrl-section-intro { max-width: 46rem; margin: 1.25rem 0 0; }

/* --- Lab name kicker above the headline ---------------------------------- */
.vrl-kicker {
  font-family: Montserrat, sans-serif; font-size: .8125rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--vrl-crimson);
  margin: 0 0 .375rem;
}

/* --- The thesis line under the three through lines ----------------------- */
.vrl-thesis {
  margin-top: 2.5rem; padding-left: 1.5rem;
  border-left: 5px solid var(--vrl-gold); max-width: 52rem;
}
.vrl-thesis p {
  font-family: Montserrat, sans-serif; font-size: 1.125rem; font-weight: 600;
  line-height: 1.5; color: var(--vrl-ink); margin: 0;
}

/* --- Research areas: numbered and top-ruled, no card chrome -------------- */
/* Deliberately unlike .vrl-card, so the two sections do not read as the same
   list twice. */
.vrl-area { min-width: 0; border-top: 3px solid var(--vrl-azure); padding-top: 1.25rem; }
.vrl-area-n {
  display: block; font-family: Montserrat, sans-serif; font-size: .75rem;
  font-weight: 700; letter-spacing: .1em; color: var(--vrl-gold);
  margin-bottom: .375rem; font-variant-numeric: tabular-nums;
}
.vrl-area h3 {
  font-family: Montserrat, sans-serif; font-size: 1.1875rem; font-weight: 700;
  color: var(--vrl-ink); margin: 0 0 .75rem; line-height: 1.3;
}
.vrl-area-q { color: var(--vrl-azure-deep); font-weight: 600; font-size: .9375rem; margin: 0 0 .75rem; }
.vrl-area p { font-size: .9375rem; line-height: 1.65; margin: 0 0 .75rem; }
.vrl-area-rel {
  font-size: .8125rem; color: var(--vrl-muted);
  margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--vrl-line);
}
.vrl-area-rel b {
  display: block; margin-bottom: .25rem; color: var(--vrl-ink);
  font-family: Montserrat, sans-serif; font-size: .75rem;
  letter-spacing: .06em; text-transform: uppercase;
}

/* --- Project page: deck under the title ---------------------------------- */
.vrl-deck {
  font-family: Montserrat, sans-serif;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vrl-azure-deep);
  margin: .75rem 0 0;
  max-width: 44rem;
}

/* --- Project page: team ---------------------------------------------------- */
.vrl-person { border-top: 3px solid var(--vrl-azure); padding-top: 1rem; }
.vrl-person-name {
  font-family: Montserrat, sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--vrl-ink); margin: 0 0 .25rem;
}
.vrl-person-role {
  font-family: Montserrat, sans-serif; font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--vrl-gold);
  margin: 0 0 .25rem;
}
.vrl-person-dept { font-size: .875rem; color: var(--vrl-muted); margin: 0; }

/* --- Project page: publication list --------------------------------------- */
.vrl-pubs { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.vrl-pubs li {
  padding: 1rem 0; border-bottom: 1px solid var(--vrl-line);
  font-size: .9375rem; line-height: 1.6;
}
.vrl-pubs li:first-child { border-top: 1px solid var(--vrl-line); }
.vrl-pubs a { color: var(--vrl-azure-deep); font-weight: 600; }

/* --- Research philosophy: the nine steps ---------------------------------- */
.vrl-steps { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.vrl-steps li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 14rem) 1fr;
  gap: .75rem 1rem;
  align-items: baseline;
  padding: .875rem 0;
  border-bottom: 1px solid var(--vrl-line);
}
.vrl-steps li:first-child { border-top: 1px solid var(--vrl-line); }
.vrl-step-n {
  font-family: Montserrat, sans-serif; font-size: .8125rem; font-weight: 700;
  color: var(--vrl-gold); font-variant-numeric: tabular-nums;
}
.vrl-step-t {
  font-family: Montserrat, sans-serif; font-size: .9375rem; font-weight: 700;
  color: var(--vrl-ink);
}
.vrl-step-d { font-size: .875rem; color: var(--vrl-muted); }
@media (max-width: 640px) {
  .vrl-steps li { grid-template-columns: 2.5rem 1fr; }
  .vrl-step-d { grid-column: 2; }
}

/* --- Research philosophy: sources list on the crimson band ---------------- */
.vrl-sources { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.vrl-sources li { padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.22); max-width: 40rem; }
.vrl-sources li:first-child { border-top: 1px solid rgba(255,255,255,.22); }
.vrl-sources a {
  color: #fff; font-family: Montserrat, sans-serif; font-size: .9375rem; font-weight: 600;
  text-decoration: none; border-bottom: 2px solid var(--vrl-gold); padding-bottom: 1px;
}
.vrl-sources a:hover { color: var(--vrl-gold); }