/* Human Visual V34 — additive visual refinement only. No content is hidden or removed. */
:root {
  --hv-ink: var(--ink, #111827);
  --hv-muted: var(--muted, #667085);
  --hv-line: color-mix(in srgb, var(--hv-ink) 12%, transparent);
  --hv-surface: color-mix(in srgb, Canvas 96%, #6d4aff 4%);
  --hv-accent: var(--accent, #6847f5);
  --hv-radius: 22px;
  --hv-shadow: 0 18px 50px rgba(15,23,42,.07);
}

/* shared human-centered rhythm */
.hv-home-section,
.hv-collab-section { scroll-margin-top: 96px; }

.hv-section-surface {
  border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(22px, 3vw, 38px);
  background: linear-gradient(145deg, color-mix(in srgb, Canvas 98%, #6847f5 2%), color-mix(in srgb, Canvas 96%, #6847f5 4%));
  border: 1px solid var(--hv-line);
}

/* homepage hero: balanced identity + portrait */
.hv-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr) !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 72px) !important;
}
.hv-hero-copy { min-width: 0; }
.hv-hero-media { display:flex; justify-content:center; min-width:0; }
.hv-hero-media img {
  width: min(100%, 360px) !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: 50% 18% !important;
  border-radius: 26px !important;
  box-shadow: 0 26px 70px rgba(15,23,42,.12) !important;
}

/* LIVE research metrics — distinct cards, never a combined paper count */
.hv-metrics { position: relative; }
.hv-live-note {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.hv-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22,163,74,.12);
  flex: 0 0 auto;
}
.hv-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
.hv-metric-item {
  min-width: 0 !important;
  height: 100% !important;
  padding: 18px 16px !important;
  border: 1px solid var(--hv-line) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, Canvas 98%, var(--hv-accent) 2%) !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hv-metric-item:hover,
.hv-metric-item:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hv-accent) 42%, transparent) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

/* homepage cards: one consistent visual language */
.hv-home-card {
  min-width: 0 !important;
  height: 100% !important;
  border-radius: var(--hv-radius) !important;
  overflow: clip;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hv-home-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hv-shadow);
}
.hv-click-card { cursor: pointer; }
.hv-click-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--hv-accent) 55%, transparent);
  outline-offset: 4px;
}
.hv-home-card img {
  max-width: 100% !important;
  height: auto !important;
}

/* Daily Knowledge stays, but behaves as a compact human-interest aside. */
.hv-daily-knowledge {
  border-inline-start: 4px solid color-mix(in srgb, var(--hv-accent) 60%, transparent);
  padding-inline-start: clamp(18px, 3vw, 30px) !important;
}

/* Global map stays prominent and contained. */
.hv-global-reach img,
.hv-global-reach iframe,
.hv-global-reach object {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 20px;
}

/* COLLABORATORS — fix the stretched-photo / crushed-text problem */
body.hv-collaborators main {
  overflow: clip;
}
.hv-collab-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: clamp(18px, 2.4vw, 30px) !important;
  align-items: stretch !important;
}
.hv-collab-card {
  display: grid !important;
  grid-template-columns: 148px minmax(0,1fr) !important;
  align-items: stretch !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  border: 1px solid var(--hv-line) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, Canvas 98%, var(--hv-accent) 2%) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hv-collab-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--hv-accent) 36%, transparent) !important;
  box-shadow: var(--hv-shadow);
}
.hv-collab-media {
  min-width: 0 !important;
  background: color-mix(in srgb, Canvas 90%, #d9d6ff 10%);
  overflow: hidden !important;
  align-self: stretch !important;
}
.hv-collab-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 210px !important;
  max-height: 260px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: 50% 18% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.hv-collab-copy {
  min-width: 0 !important;
  padding: 22px 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}
.hv-collab-copy h3 {
  margin: 0 !important;
  font-size: clamp(1.28rem, 1.6vw, 1.72rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.015em !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.hv-collab-copy p,
.hv-collab-copy a,
.hv-collab-copy span,
.hv-collab-copy small {
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
.hv-collab-copy p { margin: 0 !important; line-height: 1.55 !important; }
.hv-collab-copy a:last-of-type { margin-top: auto !important; padding-top: 8px; }

/* keep relationship labels readable and intact */
.hv-collab-copy > :first-child:not(h3) {
  max-width: 100%;
}

/* tablet */
@media (max-width: 1020px) {
  .hv-metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .hv-collab-card { grid-template-columns: 126px minmax(0,1fr) !important; }
  .hv-collab-media img { min-height: 190px !important; max-height: 230px !important; }
}

@media (max-width: 820px) {
  .hv-hero { grid-template-columns: 1fr !important; gap: 26px !important; }
  .hv-hero-media { justify-content: flex-start; }
  .hv-hero-media img { width: min(76vw, 310px) !important; }
  .hv-collab-grid { grid-template-columns: 1fr !important; }
  .hv-collab-card { grid-template-columns: 132px minmax(0,1fr) !important; }
}

/* phones */
@media (max-width: 620px) {
  .hv-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
  .hv-metric-item { padding: 15px 13px !important; }
  .hv-collab-card { grid-template-columns: 104px minmax(0,1fr) !important; border-radius: 18px !important; }
  .hv-collab-media img { min-height: 150px !important; max-height: 190px !important; object-position: 50% 16% !important; }
  .hv-collab-copy { padding: 16px 15px !important; gap: 6px !important; }
  .hv-collab-copy h3 { font-size: clamp(1.14rem, 5vw, 1.35rem) !important; }
}

@media (max-width: 380px) {
  .hv-metric-grid { grid-template-columns: 1fr !important; }
  .hv-collab-card { grid-template-columns: 92px minmax(0,1fr) !important; }
  .hv-collab-media img { min-height: 138px !important; max-height: 170px !important; }
  .hv-collab-copy { padding: 14px 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-home-card,
  .hv-metric-item,
  .hv-collab-card { transition: none !important; transform: none !important; }
}