:root { --navy:#102b43; --ink:#142a3d; --blue:#1688b5; --red:#e94958; --line:#d9e3e9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f6f8fa; color:var(--ink); font:16px/1.6 Arial,Helvetica,sans-serif; }
a { color:inherit; }
.wrap { width:min(1100px,calc(100% - 48px)); margin-inline:auto; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:12px; top:12px; z-index:20; background:#fff; padding:12px; }
.header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900; letter-spacing:-.035em; line-height:1.05; font-size:1.3rem; }
.brand img { width:48px; height:48px; object-fit:contain; }
.brand span span { color:var(--blue); }
.brand small { font-size:.58em; letter-spacing:.14em; }
.nav { display:flex; gap:22px; align-items:center; flex-wrap:wrap; font-weight:700; font-size:.92rem; }
.nav a { text-decoration:none; }
.nav a:hover,.links a:hover { color:var(--blue); }
.eyebrow { color:var(--blue); text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; font-weight:900; }
.profile { padding:70px 0 90px; }
.breadcrumb { margin:0 0 36px; color:#49677a; font-size:.9rem; }
.breadcrumb a { text-underline-offset:3px; }
.profile-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:70px; align-items:start; }
h1 { margin:10px 0 8px; color:var(--navy); letter-spacing:-.055em; line-height:1.05; font-size:clamp(2.8rem,5.5vw,5.2rem); }
.role { margin:0 0 30px; color:#147ca7; font-size:1.13rem; font-weight:800; }
.intro { font-size:1.25rem; line-height:1.5; color:#28485d; }
.profile-copy p { max-width:700px; }
.profile-copy h2 { color:var(--navy); margin:42px 0 10px; font-size:1.55rem; letter-spacing:-.03em; }
.profile-image { display:block; width:220px; height:220px; max-width:100%; margin:0 auto; border-radius:50%; object-fit:cover; background:#102b43; }
.aside { background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px; }
.aside h2 { color:var(--navy); font-size:1.15rem; margin:20px 0 10px; }
.aside ul { margin:0; padding-left:18px; }
.aside li { margin:9px 0; }
.aside a { text-underline-offset:4px; }
.links { margin:24px 0; display:flex; gap:14px 25px; flex-wrap:wrap; font-weight:800; }
.links a { text-underline-offset:4px; }
.others { margin-top:75px; border-top:1px solid var(--line); padding-top:30px; }
.others h2 { font-size:1.35rem; color:var(--navy); }
.others-list { display:flex; flex-wrap:wrap; gap:12px; }
.others-list a { background:#fff; border:1px solid var(--line); padding:12px 16px; text-decoration:none; font-weight:800; border-radius:4px; }
.others-list a:hover { border-color:var(--blue); color:var(--blue); }
.footer { background:#0b2235; color:#c7d5dd; padding:28px 0; }
.footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; }
.footer a { color:#fff; }
@media(max-width:760px){ .profile-grid { grid-template-columns:1fr; gap:30px; } .aside { max-width:350px; grid-row:1; } .profile-copy { grid-row:2; } .nav { gap:10px 15px; } .header-inner { align-items:start; padding:16px 0; flex-direction:column; } }
@media(max-width:520px){ .wrap { width:calc(100% - 32px); } .profile { padding:45px 0 70px; } .aside { max-width:100%; } .brand { font-size:1.1rem; } }