/* TeamTfh shared styles
   Palette: Ink #0B1526 · Tfh Indigo #3D3FD6 · Synapse Teal #16B3AE · Indigo Wash #DCDDFB
            Slate #4B5566 · Paper #F6F8FB · Lines #DDE3EC
   Type:    Space Grotesk (headings) · IBM Plex Sans (body) · Space Mono (labels)
   Most layout and color is set directly on each element in the HTML; this file holds
   the shared rules: links, navigation, phone menu, and phone-width layout. */

html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: #3D3FD6; }
a:hover { color: #2A2BA8; }

/* Hatched placeholder for missing images */
.ph { background-color: #E6EAF1; background-image: repeating-linear-gradient(135deg, rgba(11,21,38,.05) 0 10px, transparent 10px 20px); }

/* Top navigation (dark text on white headers; white text on the home page's dark header) */
.navlink { color: #0B1526; text-decoration: none; }
.navlink:hover { color: #3D3FD6; }
.header-dark .navlink { color: #FFFFFF; }
.header-dark .navlink:hover { color: #B9BBF7; }

/* Phone menu */
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; cursor: pointer; font: 600 15px 'IBM Plex Sans', sans-serif; padding: 12px 18px; border-radius: 999px; border: 1px solid currentColor; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav nav { position: absolute; right: 0; top: 54px; background: #FFFFFF; border: 1px solid #DDE3EC; border-radius: 16px; padding: 8px; display: flex; flex-direction: column; min-width: 200px; z-index: 10; box-shadow: 0 12px 32px rgba(11,21,38,.12); }
.mnav nav a { color: #0B1526; text-decoration: none; padding: 12px 14px; border-radius: 10px; font: 500 16px 'IBM Plex Sans', sans-serif; }
.mnav nav a:hover { background: #F6F8FB; }

/* Research page: figure column on the left for alternating themes (wide screens only) */
.side-first { order: -1; }

/* Publications page */
.pt { color: #0B1526; text-decoration: none; }
.pt:hover { color: #3D3FD6; }
.chip { font: 600 14px 'IBM Plex Sans', sans-serif; padding: 11px 18px; min-height: 44px; border-radius: 999px; border: 1px solid #DDE3EC; background: #FFFFFF; color: #0B1526; cursor: pointer; }
.chip[aria-pressed="true"] { background: #0B1526; border-color: #0B1526; color: #FFFFFF; }

/* Phone and small-tablet layout */
@media (max-width: 900px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .sec { padding-left: 20px !important; padding-right: 20px !important; }
  .navlinks { display: none !important; }
  .mnav { display: block; }
  .hero-title { font-size: 44px !important; }
  .side-first { order: 0; }
  .arow { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  .yr { position: static !important; }
}