/* Fonts are preloaded via in HTML */ :root { --page-width: 1200px; --page-pad: 1.25rem; } * { box-sizing: border-box; margin: 0; padding: 0; } site-footer { display: block; } .skip-link { position: absolute; top: -3rem; left: 1rem; background: #000; color: #fff; padding: 0.5rem 1rem; text-decoration: none; z-index: 100; font-family: "Computer Modern Serif", serif; } .skip-link:focus { top: 0.5rem; } body { font-family: "Computer Modern Serif", serif; font-size: 1rem; /* 16px */ color: #000; line-height: 1.7; overflow-x: hidden; } img { max-width: 100%; height: auto; } .page { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--page-pad); } .main { /* Transparent wrapper — width is set by .page inside */ } .header { padding: 1rem 0 0.5rem; } .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-brand { grid-column: 1; flex-shrink: 0; } .nav-brand a, .nav-brand span { font-family: "Computer Modern Serif", serif; font-size: 1.25rem; /* 20px */ font-weight: bold; text-decoration: none; color: #000; } .nav-brand a:focus-visible { text-decoration: underline; } /* Hamburger Icon (Hidden on Desktop) */ .hamburger { display: none; flex-direction: column; gap: 0.3125rem; /* 5px */ background: none; border: none; cursor: pointer; padding: 0.5rem; grid-column: 3; justify-self: end; } .hamburger span { width: 1.5625rem; /* 25px */ height: 2px; background-color: #000; transition: all 0.3s ease-in-out; } .nav-menu { grid-column: 2; display: flex; list-style: none; gap: 2.5rem; justify-self: center; } .nav-menu a { font-family: "Computer Modern Serif", serif; color: #000; text-decoration: none; } .nav-menu a:hover, .nav-menu a:focus-visible { text-decoration: underline; } .nav-menu a[aria-current="page"] { font-weight: bold; text-decoration: underline; } h1 { font-family: "Computer Modern Serif", serif; font-size: 1.75rem; font-weight: bold; margin-bottom: 0.5rem; } h2 { font-family: "Computer Modern Serif", serif; font-size: 1.25rem; font-weight: bold; border-bottom: 1px solid #000; margin-bottom: 0.5rem; } h3 { font-family: "Computer Modern Serif", serif; font-size: 1rem; font-weight: bold; } .about-row { display: flex; gap: 3rem; } .about-text, .about-photo { min-width: 0; } .about-text { flex: 2; } .timeline-left { min-width: 0; } .about-photo { flex: 1; display: flex; justify-content: flex-end; } .about-photo img { max-width: 100%; height: auto; padding: 0rem; } /* Resume Timeline Layout Updates */ .timeline-item { margin-bottom: 1.5rem; } .timeline-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0; } .timeline-left h3 { margin-bottom: 0; border-bottom: none; } .timeline-subtitle { margin-bottom: 0; } .timeline-right { text-align: right; flex-shrink: 0; margin-left: 1rem; white-space: nowrap; } .timeline-location { font-weight: bold; margin-bottom: 0; } .timeline-date { margin-bottom: 0; } .resume-section ul { padding-left: 1.5rem; margin-bottom: 0.5rem; } .resume-section li { margin-bottom: 0; } ul { padding-left: 1.5rem; } .footer { padding: 2rem 0; margin-top: 2rem; } .footer .page { text-align: center; } .footer p { margin: 0; font-size: 0.875rem; /* 14px */ } .interest-item p { margin: 0 0 0.375rem 0.9375rem; /* 6px 15px */ line-height: 1.6; font-size: 0.875rem; /* 14px */ } /* Container for the grid */ .interests-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); /* 300px */ gap: 1.25rem; /* 20px */ margin-top: 1.25rem; /* 20px */ } /* Individual card styling */ .interest-card { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 0.5rem; /* 8px */ padding: 1.25rem; /* 20px */ box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s ease-in-out; } .interest-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .interest-card h3 { margin-top: 0; margin-bottom: 0.9375rem; /* 15px */ font-size: 1.2rem; color: #333; border-bottom: 2px solid #007bff; padding-bottom: 0.3125rem; /* 5px */ display: inline-block; } .interest-card p { margin-bottom: 0.625rem; /* 10px */ line-height: 1.5; font-size: 0.95rem; color: #555; } .interest-card p:last-child { margin-bottom: 0; } /* Mobile Responsiveness */ @media (max-width: 48rem) { /* 768px */ :root { --page-width: 100%; --page-pad: 1rem; } .nav { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .hamburger { display: flex; } .nav-menu { display: none; flex-direction: column; width: 100%; text-align: center; gap: 1.5rem; padding-top: 1rem; } .nav-menu.active { display: flex; } .about-row { flex-direction: column; gap: 2rem; } } /* Print Stylesheet */ @media print { .skip-link, .hamburger, .footer, .nav { display: none; } .page, .main { max-width: 100%; padding: 0; } body { overflow: visible; } a { color: #000; text-decoration: underline; } } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }