/* Full-bio, contact, social and logo styles. Loaded AFTER style.css. */

.bio-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--border); }
.bio-facts div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border); }
.bio-facts dt { color: #70829c; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; }
.bio-facts dd { color: var(--text); font-size: 14px; }

.timeline { list-style: none; max-width: 780px; margin-left: 6px; border-left: 1px solid var(--border); }
.timeline li { position: relative; padding: 0 0 34px 32px; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--bg); }
.timeline time { color: var(--blue); font-family: var(--font-heading); font-size: 13px; font-weight: 600; }
.timeline h3 { margin: 2px 0 6px; font-family: var(--font-heading); font-size: 18px; }
.timeline p { color: var(--muted); font-size: 14px; line-height: 1.9; }

.prose-block p { max-width: 720px; margin-bottom: 17px; color: var(--muted); font-size: 14px; line-height: 2; }
.prose-block strong { color: var(--text); font-weight: 600; }

.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 22px; line-height: 1; transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); font-size: 14px; line-height: 1.9; }

.faq summary:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible,
.text-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.card-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Contact email + social profiles */
.contact-email { margin-top: 14px; color: var(--muted); font-size: 13px; }

.social-heading { max-width: 560px; margin: 70px 0 28px; }
.social-heading h3 { margin: 10px 0 8px; font-family: var(--font-heading); font-size: clamp(26px, 3vw, 34px); letter-spacing: -1px; }
.social-heading p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.9; }

.social-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.social-card { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgba(20, 35, 58, 0.8), rgba(13, 21, 36, 0.8)); }
.social-badge { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border: 1px solid rgba(100, 181, 255, 0.2); border-radius: 10px; background: rgba(100, 181, 255, 0.08); color: var(--blue); font-family: var(--font-heading); font-size: 15px; font-weight: 700; }
.social-card h4 { margin-bottom: 10px; font-family: var(--font-heading); font-size: 17px; }
.social-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; transition: color 0.25s ease; }
.social-link i { color: var(--blue); font-style: normal; transition: transform 0.25s ease; }
.social-link:hover,
.social-link:focus-visible { color: var(--text); }
.social-link:hover i { transform: translate(2px, -2px); }
.social-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Logo mark (white tile keeps the navy part readable on the dark theme) */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-mark { flex-shrink: 0; padding: 5px; border-radius: 10px; background: #fff; object-fit: contain; }
.footer-content .logo-mark { padding: 4px; border-radius: 8px; }

@media (max-width: 900px) {
    .nav-menu { gap: 14px; }
    .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .bio-facts,
    .card-grid.two-col,
    .social-grid { grid-template-columns: minmax(0, 1fr); }
    .social-heading { margin-top: 48px; }
}