/* ────────────────────────────────────────────────────────────────────────
   Homepage (index.html) styles — extracted from its inline <style>.
   Dark theme. The shared footer lives in /footer.css; news pages use
   /news/styles.css. */

:root {
  --bg-pos: 50% 50%;
  --nav-h: 76px; /* nav-inner: 24px*2 padding + 28px logo */
  --announce-h: 40px;  /* height of the announcement bar, when present */
  --announce-off: 0px; /* nav/hero offset — becomes --announce-h only when the bar is live */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Palatino Linotype", Palatino, serif;

  --max-w: 1024px;

  /* Shared footer theme (consumed by /footer.css) — the homepage is dark. */
  --footer-fg: #777;
  --footer-fg-hover: #ddd;
  --footer-rule: #1e1e1e;
  --footer-tip-bg: #181818;
  --footer-tip-border: rgba(255, 255, 255, 0.08);
  --footer-tip-fg: #999;
  --footer-pbc-fg: #555;
  --footer-pbc-hover: #777;
  --footer-icon-filter: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.no-transitions * { transition: none !important; }

html { scroll-padding-top: 76px; scrollbar-gutter: stable; }

/* When a non-dismissed announcement bar is in the DOM, reserve room for it:
   push the fixed nav down, pad the hero, and grow the scroll anchor offset.
   Dismissing the bar sets [hidden], the selector stops matching, and every
   offset falls back to 0 — no JS layout math needed. */
html:has(.announce-bar:not([hidden])) {
  --announce-off: var(--announce-h);
  scroll-padding-top: calc(76px + var(--announce-h));
}

body {
  font-family: var(--serif);
  background-color: rgb(3,3,3);
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* a, a:visited { color: #9c9a92; } */
.team a, .team a:visited { color: inherit; text-decoration: none; }
.person-bio a, .person-bio a:visited { color: inherit; text-decoration: underline; }

@media (max-width: 640px) {
  :root { --bg-pos: 70% 30%; --nav-h: 60px; } /* nav-inner: 16px*2 + 28px logo */
}

@media (max-aspect-ratio: 3/4) {
  :root { --bg-pos: 60% 25%; }
}

/* ── Hero wrapper — background image lives here, scrolls with page ── */
.hero-wrapper {
  position: relative;
  height: 100vh;
  min-height: 420px;
  padding-top: calc(78px + var(--announce-off));
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("highway.jpg") no-repeat var(--bg-pos) / cover;
  z-index: 0;
}

.hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.74) 60%, rgba(0,0,0,1) 150%);
  z-index: 1;
}

/* ── Nav ── */
nav {
  position: fixed;
  top: var(--announce-off);
  left: 0;
  right: 0;
  z-index: 100;
  background: rgb(3, 3, 3);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

.nav-inner {
  max-width: var(--max-w);
  width: 95%;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav.scrolled {
  border-bottom-color: #1e1e1e;
}

/* ── Announcement bar ──
   Slim brand-burgundy strip pinned above the nav (see --announce-off wiring
   near :root). The whole strip is a link; a trailing ✕ dismisses it. Looks the
   same in light and dark mode so it always reads as a deliberate banner. */
.announce-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101; /* above the fixed nav (100) */
  height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #4a1623 0%, #621e30 50%, #4a1623 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 0 rgba(245, 236, 217, 0.06) inset;
  font-family: var(--serif);
}

.announce-bar[hidden] { display: none; }

.announce-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: var(--max-w);
  padding: 0 44px; /* leave room for the absolutely-positioned close button */
  color: #f5ecd9;
  text-decoration: none;
  font-size: clamp(0.68rem, 1.5vw, 0.8rem);
  letter-spacing: 0.02em;
}

.announce-chip {
  flex: none;
  font-family: var(--mono); /* keep the pill monospaced, like a tag */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.62rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(245, 236, 217, 0.16);
  color: #f5ecd9;
}

.announce-text {
  flex: 0 1 auto;
  min-width: 0; /* allow the headline to shrink + ellipsize, not overflow */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announce-cta {
  flex: none;
  font-weight: 500;
  color: #fff;
  border-bottom: 1px solid rgba(245, 236, 217, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.2s;
}

.announce-arrow { flex: none; color: #fff; }

.announce-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: rgba(245, 236, 217, 0.6);
  font-size: 18px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

@media (hover: hover) {
  .announce-link:hover .announce-cta { border-color: #fff; }
  .announce-close:hover { color: #fff; background: rgba(245, 236, 217, 0.12); }
}

@media (max-width: 640px) {
  .announce-link { gap: 8px; padding: 0 40px; }
  /* Tight on phones: drop the chip and the CTA label, but keep the arrow as the
     tap cue — the whole strip is the link. */
  .announce-chip,
  .announce-cta { display: none; }
}

nav img.logo {
  height: 28px;
  width: auto;
  display: block;
  cursor: pointer;
  user-select: none;
}


.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: clamp(0.7rem, 1.3vw, 0.82rem);
  letter-spacing: 0.04em;
}

.nav-links a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:visited {
  color: rgba(255,255,255,0.55);
}

@media (hover: hover) {
  .nav-links a:hover { color: rgba(255,255,255,0.9); }
  .team a:hover .person-name { color: #fff; }
  .hero .contact-line a:hover { color: #884B5D; }
  .backed-by a:hover { color: #999; }
  .scroll-cue:hover { color: #fff; }
  a.research-title:hover { color: #fff; }
  .show-more-btn:hover { color: #fff; }
  .show-more-btn:hover::before, .show-more-btn:hover::after { background: #3a3a3a; }
  .theme-toggle:hover { color: var(--footer-fg-hover); }
}

.nav-dot {
  color: rgba(255,255,255,0.25);
  margin: 0 7px;
}

/* ── Theme toggle (lives in the footer, alongside the social icons; inherits
   the shared --footer-* theme colors) ── */
.theme-toggle {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--footer-fg);
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.theme-toggle svg { display: block; width: 15px; height: 15px; }

/* Dark mode shows the sun (click → light); light mode shows the moon. */
.theme-toggle .ti-moon { display: none; }
html.light .theme-toggle .ti-sun { display: none; }
html.light .theme-toggle .ti-moon { display: block; }

/* ── Hero ── */
.hero {
  /* single scaling unit — every hero size is a multiple of this,
     so all elements keep their proportions at any viewport width.
     Scales continuously with page width via 2vw (shrinks on small
     screens, grows on large) until the var(--max-w) column maxes out at
     ~1000px, where the 1.25rem cap holds it. The 0.4rem floor is just
     a safety net so text never collapses on tiny screens. */
  --u: clamp(0.4rem, 2vw, 1.25rem);
  font-size: var(--u);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0 40px;
  width: 95%;
  max-width: var(--max-w);
  position: absolute;
  top: 27%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.hero-icon {
  height: calc(4 * var(--u));
  width: auto;
  display: block;
  margin-bottom: calc(0.50 * var(--u));
  /* nudge left so the mark's "tails" don't make it look misaligned
     against the headline's left edge */
  margin-left: calc(-0.35 * var(--u));
}

.hero h1 {
  font-size: calc(2.3 * var(--u));
  font-weight: normal;
  line-height: 1.12;
  color: #fff;
  text-align: left;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.hero h1 span {
  white-space: nowrap;
}

/* The cycling autonomy verb (driving / hauling / flying) — rolls down into
   place: a clipped window where the new word drops in from the top while the
   previous one rolls out the bottom. Width is set by JS to track the word. */
.hero-rotate {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.12em;            /* matches the h1 line-height so one word shows */
  vertical-align: top;
  /* cancel the word's padding-right (overhang room) so "today." sits snug,
     without losing the clip room inside the window */
  margin-right: -0.06em;
  transition: width 0.5s cubic-bezier(0.5, 0, 0.2, 1);
}

.hero-rotate-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* words shrink to their own width (measurable) */
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.2, 1);
  will-change: transform;
}

.hero-rotate-word {
  display: block;
  height: 1.12em;
  line-height: 1.12em;
  padding-right: 0.06em;     /* room for the italic overhang before the clip */
  font-style: italic;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotate,
  .hero-rotate-list { transition: none; }
}

/* Former headline, now sitting beneath the big headline — kept at its
   original headline size/styling. */
.hero .hero-subhead {
  margin-top: calc(0.9 * var(--u));
  font-size: calc(1.5 * var(--u));
  font-weight: normal;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Below 600px the hero uses the full page width and scales up faster
   (2.8vw vs 2vw) so the headline fills the narrow width and stays
   prominent instead of looking small. Still proportional — everything
   scales off --u together. */
@media (max-width: 600px) {
  .hero {
    --u: 2.8vw;
    width: 100%;
  }
}

.hero .subheadline {
  max-width: 100%;
  margin-top: 16px;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  color: #bbb;
  line-height: 1.5;
  text-shadow: 0 0 8px rgba(0, 0, 0, 1.0);
}

.hero-pills {
  display: flex;
  align-items: center;
  gap: calc(0.625 * var(--u));
  margin-top: calc(1.125 * var(--u));
  flex-wrap: wrap;
  justify-content: flex-start;
  text-shadow: 0 0 8px rgba(0, 0, 0, 1.0);
}

.hero-pill {
  font-size: calc(0.75 * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bbb;
  font-family: var(--serif);
}

.hero-pill-dot {
  color: #bbb;
  font-size: calc(0.75 * var(--u));
}

.hero .contact-line {
  margin-top: calc(1.5 * var(--u));
  font-size: calc(0.95 * var(--u));
  color: #bbb;
  text-shadow: 0 0 8px rgba(0, 0, 0, 1.0);
}

.hero .contact-line a {
  color: inherit;
  text-decoration: underline;
  transition: text-decoration-color 0.2s;
}

.hero .contact-line a:visited {
  color: inherit;
}

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #888;
  text-decoration: none;
  font-size: clamp(0.6rem, 1vw, 0.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 0, 0, 1.0);
  transition: color 0.2s, opacity 0.3s ease-out;
}

.scroll-cue:visited { color: #888; }

.scroll-cue-arrow {
  animation: scroll-cue-bounce 2.6s ease-in-out infinite;
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

/* On short *desktop-width* windows the hero content reaches the bottom and
   would collide with the scroll cue, so hide it there. Scoped to min-width so
   it never hides on phones (which are narrow but can be short — e.g. small
   phones in portrait — yet have plenty of room and no clash). */
@media (max-height: 700px) and (min-width: 601px) {
  .scroll-cue { display: none; }
}

.backed-by {
  position: relative;
  z-index: 2;
  text-align: center;
  letter-spacing: 0.06em;
  max-width: var(--max-w);
  width: 95%;
  margin: 0 auto;
}

.backed-by-label {
  font-size: clamp(0.65rem, 1.1vw, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b9b9b9;
  margin-bottom: 4px;
  font-weight: bold;
}

.backed-by-firms {
  font-size: clamp(0.7rem, 1.3vw, 0.8rem);
  color: #c5c5c5;
}

.backed-by a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}



.backed-by .dot {
  margin: 0 7px;
  color: #888;
}

/* ── Shared section styles — 95% width, gray hline header ── */
.team,
.research {
  width: 95%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 0 56px;
}

.section-header {
  border-top: 1px solid #1e1e1e;
  padding-top: 18px;
  margin: 0 0 36px;
}

.section-label {
  font-size: clamp(1.0rem, 1.6vw, 1.08rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a0a0a0;
}

/* ── Team ── */
.person {
  margin-bottom: 28px;
}

.person-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px;
}

.person-name {
  color: #ccc;
  font-size: 0.92rem;
  font-weight: normal;
  transition: color 0.2s;
}

.person-name::after {
  content: " ⋅ ";
  margin: 4px;
  color: #bbb;
}

.person-role {
  font-family: var(--mono);
  color: #aaa;
  font-size: 0.7rem;
}

.person-bio {
  color: #777;
  font-size: 0.8rem;
  margin-top: 4px;
  line-height: 1.55;
}

.person-bio-education::after {
  content: " ⋅ ";
  margin: 4px;
}

.person-bio-background {
  font-style: italic;
}

/* ── Research ── */
.research-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  column-gap: 36px;
  align-items: start;
  border-bottom: 1px solid #1e1e1e;
  padding: 22px 0;
}

.research-item:last-child {
  border-bottom: none;
}

#research-featured-last {
  border-bottom: none;
}

/* Divider shown under the last featured item when the "more" list expands
   (toggled by the show-more buttons; themed for light mode further down). */
#research-featured-last.expanded {
  border-bottom: 1px solid #1e1e1e;
}

/* Left meta column: date, venue, tags */
.research-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 4px;
}

.research-year {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #884B5D;
}

.research-venue {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  line-height: 1.45;
}

.research-tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.research-tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f6f6f;
}

/* Right main column: title, authors, description */
.research-main {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.research-title {
  color: #e6e6e6;
  font-size: 1.12rem;
  font-weight: normal;
  text-decoration: none;
  line-height: 1.3;
}

.research-authors {
  display: none;
  font-size: 0.85rem;
  color: #999;
  line-height: 1.45;
}

.research-description {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: #8a8a8a;
  border-left: 2px solid #222;
  padding-left: 12px;
  margin: 2px 0 0;
  line-height: 1.55;
}

.show-more-btn {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 50%;
  margin: 24px auto 0;
  padding: 6px 0;
  background: transparent;
  color: #a0a0a0;
  border: none;
  text-decoration: none;
  font-family: inherit;
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
}

.show-more-btn::before,
.show-more-btn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #1e1e1e;
  transition: background 0.2s;
}



/* Footer + footer-tooltip styles live in /footer.css (shared with the
   news pages); theme colors come from the --footer-* vars in :root above. */

/* ── Mobile ── */
@media (max-width: 640px) {
  .nav-inner { padding: 16px 0; }
  .hero-wrapper { padding-top: calc(62px + var(--announce-off)); }
  html { scroll-padding-top: 60px; }
  .hero { padding: 0 24px; }

  .team, .research {
    width: 92%;
  }

  .team { padding-bottom: 8px; }

  .section-header { margin-bottom: 18px; }
  .section-label { font-size: 0.8rem; letter-spacing: 0.14em; }

  .hero-pills { flex-wrap: nowrap; }

  .research-item { grid-template-columns: 1fr; row-gap: 10px; }
  .research-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 0; }
  .research-tags { flex-direction: row; flex-wrap: wrap; gap: 2px 0; margin-top: 0; flex-basis: 100%; }
  .research-tag:not(:first-child)::before { content: "⋅"; color: #555; margin: 0 8px; }
  .research-title { font-size: 1rem; }

  .backed-by-label { font-size: 0.52rem; }
  .backed-by-firms { font-size: 0.6rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT MODE  (html.light — dark is the default)
   Tan background (#F1EEE3) with near-black body text and a #521929 red
   accent. The hero region (nav, "backed by", headline, scroll cue) all sits
   over the dark highway image, so in light mode those internals stay
   light-on-image — we only reshape the image into a centered, rounded box
   that matches the content column width and runs nearly full height.
   Everything below the hero (Research, Team, footer) flips to tan + ink.
   ════════════════════════════════════════════════════════════════════════ */

html.light {
  /* Shared footer theme (consumed by /footer.css) */
  --footer-fg: #8a7e6f;
  --footer-fg-hover: #521929;
  --footer-rule: #d9d2c1;
  --footer-tip-bg: #fbf9f2;
  --footer-tip-border: rgba(82, 25, 41, 0.15);
  --footer-tip-fg: #6f655a;
  --footer-pbc-fg: #a89b88;
  --footer-pbc-hover: #521929;
  --footer-icon-filter: none;
}

html.light body {
  background-color: #F1EEE3;
  color: #1a1a1a;
}

/* ── Hero in light mode ──
   Keep the full-bleed image, but swap the dark vignette for a tan (#F1EEE3)
   overlay so the image reads as a light, washed backdrop that fades into the
   tan page at the edges. All hero text then flips to ink, with a soft tan
   halo for legibility over the image's brighter/darker patches. */
html.light .hero-wrapper::after {
  background:
    /* hold solid tan through the full nav height, then fade — so the area
       behind/below the nav reads as the nav's tan with no seam */
    linear-gradient(to bottom,
      #F1EEE3 0,
      #F1EEE3 var(--nav-h),
      rgba(241, 238, 227, 0) calc(var(--nav-h) + 140px)),
    /* fade the bottom into the page tan so it flows into the Research section */
    linear-gradient(to top, #F1EEE3 0%, rgba(241, 238, 227, 0) 22%),
    /* base wash that tints the whole image tan */
    radial-gradient(ellipse at center,
      rgba(241, 238, 227, 0.82) 0%,
      rgba(241, 238, 227, 0.82) 10%,
      rgba(241, 238, 227, 1) 130%);
}

html.light .hero h1 {
  color: #1a1a1a;
  text-shadow: 0 0 14px rgba(241, 238, 227, 0.9);
}
html.light .hero-icon { filter: brightness(0); }
html.light .hero-pill,
html.light .hero-pill-dot {
  color: #4a4036;
  text-shadow: 0 0 8px rgba(241, 238, 227, 0.9);
}
html.light .hero .contact-line {
  color: #4a4036;
  text-shadow: 0 0 8px rgba(241, 238, 227, 0.9);
}
html.light .hero-subhead {
  color: #1a1a1a;
  text-shadow: 0 0 14px rgba(241, 238, 227, 0.9);
}
html.light .hero-rotate-word { color: #521929; }

html.light .backed-by-label { color: #8a7e6f; }
html.light .backed-by-firms { color: #6b6155; }
html.light .backed-by a { color: #1a1a1a; }
html.light .backed-by .dot { color: #b3a690; }
html.light .scroll-cue,
html.light .scroll-cue:visited { color: #8a7e6f; text-shadow: none; }

/* ── Nav (translucent tan, blends over the tan-tinted hero and the page) ── */
html.light nav { background: #F1EEE3; }
html.light nav.scrolled { border-bottom-color: #d9d2c1; }
html.light nav img.logo { filter: brightness(0); }
html.light .nav-links a,
html.light .nav-links a:visited { color: rgba(26, 26, 26, 0.6); }
html.light .nav-dot { color: rgba(26, 26, 26, 0.28); }

/* ── Sections below the hero (on tan) ── */
html.light .section-header { border-top-color: #d9d2c1; }
html.light .section-label { color: #521929; }

html.light .research-item { border-bottom-color: #d9d2c1; }
html.light #research-featured-last.expanded { border-bottom-color: #d9d2c1; }
html.light .research-year { color: #521929; }
html.light .research-venue { color: #8a7e6f; }
html.light .research-tag { color: #9a8e7d; }
html.light .research-title { color: #1a1a1a; }
html.light .research-description {
  color: #5f564b;
  border-left-color: #d9d2c1;
}

html.light .show-more-btn { color: #521929; }
html.light .show-more-btn::before,
html.light .show-more-btn::after { background: #d9d2c1; }

html.light .person-name { color: #1a1a1a; }
html.light .person-name::after { color: #b3a690; }
html.light .person-role { color: #8a7e6f; }
html.light .person-bio { color: #6b6155; }

@media (hover: hover) {
  html.light .nav-links a:hover { color: #521929; }
  html.light .theme-toggle:hover { color: #521929; }
  html.light .team a:hover .person-name { color: #521929; }
  html.light a.research-title:hover { color: #521929; }
  html.light .show-more-btn:hover { color: #521929; }
  html.light .show-more-btn:hover::before,
  html.light .show-more-btn:hover::after { background: #c9c0ac; }
  html.light .hero .contact-line a:hover { color: #521929; }
  html.light .backed-by a:hover { color: #521929; }
  html.light .scroll-cue:hover { color: #521929; }
}

@media (max-width: 640px) {
  html.light .research-tag:not(:first-child)::before { color: #b3a690; }
}