/* Utilities used in the HTML but absent from the purged Tailwind build (styles.css). */
.mt-4 { margin-top: 1rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.font-semibold { font-weight: 600; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-900 { color: #111827; }
.hover\:underline:hover { text-decoration: underline; }
.border-t { border-top-width: 1px; }
.border-gray-300 { border-color: #d1d5db; }

/* Home page: Publications, Talks, Awards, News. Readable line length on desktop,
   full width on phones (the 4rem indent ate a quarter of a phone screen). */
.home-section { padding-left: 4rem; }
@media (min-width: 1024px) {
   /* right edge in line with the intro paragraph (col-span-2 at 11/12 width ends at 94.4% of the card) */
   .home-section { padding-right: 5.56%; }
}
@media (max-width: 639px) {
   .home-section { padding-left: 0; }
}
.space-y-3 > * + * { margin-top: 0.75rem; }
.border-b { border-bottom-width: 1px; }
.border-gray-200 { border-color: #e5e7eb; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* Home: name heading top aligned with the photo on the two-column desktop layout. */
@media (min-width: 1024px) {
   h2[layoutid="index-title"] { margin-top: 0; }
}

/* All body text in black (no grey steps between lines). Links keep their accent colour. */
.text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900 { color: #000; }

/* Research hero: image sits next to the title block and matches its height. */
.research-hero { align-items: center; }
.research-hero-media { display: flex; justify-content: center; }
.research-hero-img { display: block; width: auto; height: 9rem; }
@media (min-width: 1024px) {
   .research-hero { align-items: stretch; }
   .research-hero-media { position: relative; }
   .research-hero-img { position: absolute; top: 0; right: 2.5rem; height: 100%; width: auto; max-width: calc(100% - 2.5rem); object-fit: contain; }
}

/* Leadership: Savchenko Solutions header, volunteer collage next to the logotype. */
.ss-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem; margin-bottom: 1.5rem; }
.ss-team { height: 11rem; width: auto; }
.ss-title { margin: 0; }
.ss-divider { width: 1px; height: 7rem; background: #d1d5db; }
.ss-logotype { height: 3.4rem; width: auto; max-width: 100%; display: block; }
@media (max-width: 639px) {
   .ss-divider { display: none; }
   .ss-team { height: 9rem; }
   .ss-logotype { height: auto; width: 16rem; }
}

/* Leadership: BelSO logo and heading on one line. */
.belso-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-bottom: 1.5rem; }
.belso-logo { height: 4rem; width: auto; display: block; flex-shrink: 0; }
.belso-header > a { flex-shrink: 0; }
.belso-header h2 { margin: 0; }
@media (min-width: 768px) {
   .belso-header { flex-wrap: nowrap; justify-content: center; }
   .belso-logo { height: 4.75rem; }
}

/* Leadership: key numbers. Borderless grid of large figures with short labels. */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin: 0.5rem 0 1.75rem 0; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: #000; letter-spacing: -0.01em; }
.stat-label { font-size: 0.875rem; line-height: 1.35; color: #000; margin-top: 0.25rem; }

/* Main card on Home, Research and Leadership: wider than the original 8/12, capped for long lines. */
@media (min-width: 768px) {
   .site-card { width: 75%; max-width: 80rem; }
}

/* Home: icon row. Fixed spacing so every icon sits on whole pixels; svg overflow visible so no edge is clipped. */
.icon-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin: 1.25rem 0; }
.icon-cell { width: 24px; height: 24px; flex: 0 0 24px; }
.icon-cell svg { display: block; width: 24px; height: 24px; overflow: visible; }

/* Paper and code buttons inside research cards: black text, blue on hover. */
.link-btn { color: #000; }