/* Shared portfolio structure; the existing palette and project media styles remain. */
* { box-sizing: border-box; }
a:focus-visible, button:focus-visible, summary:focus-visible, video:focus-visible { outline: 3px solid #2a4d9b; outline-offset: 4px; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0 0 1.3rem; margin-bottom:1.2rem; border-bottom:1px solid #d9dfe9; }
.site-name { color:#2a4d9b; font-weight:600; font-size:1.1rem; }
.site-header nav { display:flex; gap:1.35rem; }
.site-header nav a { padding:.4rem 0; color:#444; }
.site-header nav a[aria-current="page"] { color:#2a4d9b; font-weight:600; box-shadow:0 2px #2a4d9b; }
.menu-toggle { font:inherit; padding:.4rem .8rem; background:#fff; color:#2a4d9b; border:1px solid #9aaccc; border-radius:.3rem; }
.skip-link { position:absolute; top:-100px; background:white; padding:.5rem; z-index:3; }
.skip-link:focus { top:.5rem; }
.section { margin-top:2.3rem; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px solid #ccc; margin:1.875rem 0 1rem; }
.section-heading h2 { border:0; margin:0; }
.section-heading a, .card-links a, .empty-state a { color:#2a4d9b; text-decoration:underline; text-underline-offset:.2em; }
.section-heading a { font-size:.9rem; }
.page-intro { padding:1.6rem 0 2rem; max-width:44rem; }
.page-intro h1 { font-family:inherit; font-size:2.2rem; text-align:left; letter-spacing:-.035em; }
.page-intro p:last-child { color:#555; font-size:1.1rem; margin-bottom:0; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; color:#2a4d9b; font-weight:600; margin:0 0 .5rem; }
.project-grid { display:grid; gap:1.5rem; }
.portfolio-card { display:grid; grid-template-columns: 38% 1fr; background:white; border:1px solid #d9dfe9; border-radius:.65rem; overflow:hidden; box-shadow:0 2px 6px #00000008; }
.portfolio-card > a { display:flex; align-items:center; background:#eef3fb; padding:.65rem; }
.portfolio-card img { display:block; width:100%; height:auto; max-height:250px; object-fit:contain; }
.card-body { padding:1.3rem; }
h3 { font-size:1.06rem; line-height:1.4; margin:0 0 .65rem; color:#2a4d9b; }
.card-body p { margin:.65rem 0; }
.tags { color:#555; font-size:.82rem; }
.card-links { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; font-size:.9rem; }
.compact-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.compact-grid .portfolio-card { display:flex; flex-direction:column; }
.compact-grid .portfolio-card > a { height:145px; }
.compact-grid img { max-height:125px; }
.compact-grid .card-body { padding:1rem; display:flex; flex:1; flex-direction:column; }
.compact-grid .card-links { margin-top:auto; padding-top:.7rem; }
.compact-grid .tags { font-size:.76rem; }
.empty-state { border-left:3px solid #4a90e2; padding:1.1rem 1.4rem; background:#eef3fb; margin:1rem 0 4rem; }
.empty-state h2 { border:0; margin:0; }
.site-footer { color:#555; border-top:1px solid #d9dfe9; margin-top:3rem; padding:1.5rem 0 0; }
.site-footer p { margin:.3rem 0; }
.site-footer a { color:#2a4d9b; text-decoration:underline; text-underline-offset:.15em; }
@media(max-width:650px) {
 .site-header { flex-wrap:wrap; gap:.7rem; }
 .site-header nav { width:100%; gap:.3rem; justify-content:space-between; }
 .site-header nav a { padding:.6rem .25rem; }
 .site-header .menu-toggle:not([hidden]) { display:block; }
 .site-header nav.is-collapsed { display:none; }
 .compact-grid { grid-template-columns:1fr; }
 .portfolio-card { grid-template-columns:1fr; }
 .portfolio-card > a, .compact-grid .portfolio-card > a { height:auto; min-height:160px; }
 .portfolio-card img, .compact-grid img { max-height:220px; }
 .section-heading { flex-wrap:wrap; gap:.35rem; padding-bottom:.4rem; }
 .page-intro h1 { font-size:1.9rem; }
 #education .award-right { margin-left:34px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
/* Understated contact links, shared by the hero, Contact section and footer. */
.contact-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:1.2rem; row-gap:.6rem; }
.contact-item { display:inline-flex; align-items:center; gap:.45rem; min-width:0; font-weight:550; line-height:1.5; }
.contact-icon { width:1.05rem; height:1.05rem; flex:0 0 1.05rem; }
.contact-item > span { min-width:0; overflow-wrap:anywhere; }
.contact-links .contact-item { white-space:nowrap; }
a.contact-item { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
.contact-links a.contact-item { text-decoration-color:#9aaccc; }
a.contact-item:hover { text-decoration-thickness:2px; }
.contact-details { display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.contact-details .contact-item { max-width:100%; }
.contact-details .contact-icon { align-self:flex-start; margin-top:.22em; }
.contact-details a { color:#2a4d9b; }
.contact-details a:hover { color:#e74c3c; }
.footer-contact-links { display:inline-flex; flex-wrap:wrap; justify-content:center; column-gap:1rem; row-gap:.5rem; margin-left:.8rem; vertical-align:middle; }
.footer-contact-links .contact-icon { width:.95rem; height:.95rem; flex-basis:.95rem; }
@media(max-width:480px) { .footer-contact-links { display:flex; margin:.65rem 0 0; } }
/* Four featured projects retain the same cards with a balanced two-column grid. */
.compact-grid.four-projects { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:650px) { .compact-grid.four-projects { grid-template-columns:minmax(0,1fr); } }

/* Project dates and the concise industry experience entry. */
.project-date { color:#555; font-size:.86rem; font-weight:500; margin:.35rem 0 .8rem; }
.card-body .project-date { margin:-.25rem 0 .8rem; }
.header-container .project-date { margin:.4rem 0 1rem; }
.experience-entry { display:flex; align-items:flex-start; gap:1.2rem; margin:1rem 0 3rem; }
.experience-entry .company-logo { width:88px; height:auto; flex:0 0 88px; object-fit:contain; margin-top:.3rem; }
.experience-entry h2 { border:0; padding:0; margin:0 0 .65rem; font-size:1.15rem; line-height:1.5; }
.experience-entry p { margin:.4rem 0; }
.experience-role { font-weight:550; }
.experience-dates { color:#555; font-size:.94rem; }
@media(max-width:480px) { .experience-entry { gap:.8rem; } .experience-entry .company-logo { width:64px; flex-basis:64px; } }
