* { box-sizing:border-box; }
body { margin:0; background:#f3f4f6; color:#292929; font:15px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.page { max-width:1080px; margin:auto; padding:24px; }
.profile-banner { display:flex; align-items:center; gap:36px; padding:42px; color:#fff; background:linear-gradient(125deg,#303438,#1e2226); border:1px solid #444; }
h1 { margin:0; font-size:40px; line-height:1.2; letter-spacing:.02em; }
.eyebrow { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#666; }
.profile-banner .eyebrow { color:#eee6a9; }
.subtitle { margin:8px 0; color:#fff4a8; font-size:18px; }
.banner-description { margin:12px 0 0; max-width:540px; color:#d5d7da; }
.stack-mark { width:120px; flex-shrink:0; transform:skewY(-8deg); }
.stack-mark span { display:block; height:21px; margin:7px 0; background:#b8bed0; border:1px solid #ffffff50; }
.stack-mark span:nth-child(2) { background:#e4b5f9; }
.stack-mark span:nth-child(3) { background:#fff0a6; }
.stack-mark span:nth-child(4) { background:#a0a0a0; }
nav { display:flex; justify-content:center; gap:32px; padding:10px; margin-top:12px; border:1px solid #ccc; background:white; }
a { color:#24518a; text-underline-offset:4px; }
nav a { text-decoration:none; }
nav a:hover, nav a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
nav a[aria-current] { font-weight:bold; }
main { background:white; border:1px solid #ccc; margin-top:12px; padding:40px 56px; }
h2 { font-size:30px; margin:0 0 12px; line-height:1.3; }
.introduction > p:not(.eyebrow) { max-width:760px; color:#555; }
.resource-links { display:flex; flex-wrap:wrap; gap:24px; margin:20px 0 32px; }
details { border:1px solid #d2d2d2; margin-top:24px; }
summary { position:relative; list-style:none; padding:11px 40px 11px 16px; background:#e6e6e6; border-bottom:2px solid #ccc; font-weight:bold; cursor:pointer; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; position:absolute; right:16px; font-size:20px; top:6px; }
details[open] > summary::after { content:'−'; }
.section-content { padding:16px 22px; }
h3 { font-size:15px; margin:8px 0; }
p { margin:10px 0 16px; }
li { margin-bottom:8px; }
ul,ol { padding-left:22px; }
footer { margin-top:12px; padding:14px; text-align:center; font-size:13px; border:1px solid #ccc; background:white; color:#666; }
:focus-visible { outline:2px solid #3267c8; outline-offset:3px; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:12px; top:12px; background:white; padding:8px; z-index:2; }
@media(max-width:650px) { .page { padding:12px; } .profile-banner { padding:24px; gap:20px; } .stack-mark { width:64px; } h1 { font-size:28px; } .subtitle { font-size:15px; } main { padding:24px 18px; } .banner-description { font-size:13px; } }
@media(max-width:420px) { .profile-banner { flex-direction:column; align-items:flex-start; } .stack-mark { display:none; } }

.personal-profile { margin-top:36px; border-top:1px solid #ddd; padding-top:32px; }
.person-banner { display:flex; align-items:center; gap:28px; padding:28px; background:linear-gradient(125deg,#353a3e,#24282c); color:#fff; }
.person-monogram { display:grid; place-items:center; flex:0 0 104px; height:104px; border:1px solid #b9b7a0; background:#454a4d; color:#fff4a8; font-size:34px; font-weight:bold; letter-spacing:.06em; }
.person-banner .eyebrow { color:#d9d5b8; }
.person-banner h2 { margin:0; font-size:28px; }
.person-banner p { margin:8px 0; }
.person-banner .person-role { color:#fff4a8; }
.profile-links { display:flex; gap:20px; margin-top:14px; }
.profile-links a { color:white; }
.profile-bio { margin:24px 0; color:#555; }
.profile-entry + .profile-entry { border-top:1px solid #e3e3e3; margin-top:20px; padding-top:20px; }
.entry-date { color:#666; font-size:12px; }
.profile-entry p { margin:6px 0; }
.entry-note { color:#666; font-size:14px; }
.publications li + li { margin-top:22px; }
.skill-tags { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px; }
.skill-tags span { border:1px solid #d3d3d3; background:#f5f5f5; padding:3px 10px; font-size:12px; }
.platform-heading { margin-top:40px; padding-top:28px; border-top:1px solid #ddd; }
@media(max-width:650px) { .person-banner { padding:20px; gap:16px; align-items:flex-start; } .person-monogram { flex-basis:60px; height:60px; font-size:22px; } .person-banner h2 { font-size:23px; } }
@media(max-width:420px) { .person-banner { flex-direction:column; } }

.about-masthead { background:white; border:1px solid #ccc; padding:20px; text-align:center; }
.about-masthead a { display:block; font-size:26px; font-weight:bold; color:#292929; text-decoration:none; }
.about-masthead span { font-size:13px; color:#666; }
.personal-profile { margin-top:0; padding-top:0; border-top:0; }