@font-face { font-family: "Space Grotesk"; src: url("SpaceGrotesk.ttf") format("truetype"); font-style: normal; font-weight: 300 700; font-display: swap; }
:root { --navy:#0f2f44; --ink:#172e3b; --line:#d4dcda; --paper:#f5f5f0; --white:#fcfcf9; --hdr-h:88px; --sec-bg:var(--paper); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--hdr-h); }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.55 "Space Grotesk", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid #7da89c; outline-offset:5px; }
img { max-width:100%; display:block; }
h1,h2,h3,p { margin-top:0; }
.wrap { width:min(100% - 84px, 1420px); margin-inline:auto; }
.skip { position:absolute; top:-80px; left:12px; z-index:50; background:var(--white); padding:10px 16px; }
.skip:focus { top:12px; }
.draft { background:var(--navy); color:#d9e3df; font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; text-align:center; padding:8px 14px; }

header { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:var(--paper); }
.header-inner { min-height:87px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; gap:12px; white-space:nowrap; color:var(--navy); font-size:15px; font-weight:700; letter-spacing:.05em; }
.brand img { width:28px; height:35px; object-fit:contain; }
.back { font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.back:hover { text-decoration:underline; text-underline-offset:5px; }

.hero { background:var(--navy); color:var(--white); padding:74px 0 82px; }
.hero-grid { display:grid; grid-template-columns:300px 1fr; gap:clamp(36px,5vw,76px); align-items:start; }
.portrait { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 16%; filter:grayscale(1) contrast(1.06); background:#1d4257; }
.eyebrow { display:flex; align-items:center; gap:14px; color:#a9bcb3; font-size:11px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; }
.eyebrow::before { content:""; display:block; width:30px; height:1px; background:currentColor; }
.hero h1 { font-size:clamp(42px,6vw,86px); line-height:1; letter-spacing:-.07em; font-weight:500; margin:26px 0 20px; }
.hero h1 .nickname { display:block; margin-top:14px; font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.2em; text-transform:uppercase; color:#a9bcb3; }
.role { color:#8b9e99; font-size:clamp(17px,1.9vw,25px); letter-spacing:-.03em; margin:0 0 30px; }
.lede { max-width:660px; color:#bccbc9; font-size:clamp(15px,1.35vw,18px); line-height:1.62; margin:0; }
.stats { display:flex; flex-wrap:wrap; gap:0 54px; margin-top:42px; border-top:1px solid #536e7e; padding-top:26px; }
.stat { padding-right:10px; }
.stat strong { display:block; color:var(--white); font-size:clamp(24px,2.6vw,36px); font-weight:500; letter-spacing:-.05em; line-height:1.1; }
.stat span { display:block; margin-top:6px; color:#a9bcb3; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }

main section { padding:92px 0 20px; }
main section:last-of-type { padding-bottom:104px; }
.section-head { position:relative; display:grid; grid-template-columns:1fr 2fr; gap:36px; padding:28px 0 54px; border-top:1px solid var(--line); }
.section-index { position:absolute; top:0; left:clamp(18px,2.6vw,40px); transform:translateY(-50%); background:var(--sec-bg); padding:0 16px; font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); }
.section-head h2 { grid-column:2; max-width:950px; font-size:clamp(28px,3.6vw,50px); line-height:1.08; letter-spacing:-.06em; font-weight:500; margin:0; }
.body { margin-left:33.333%; max-width:760px; }
.body p { color:#51646a; font-size:clamp(15px,1.4vw,18px); line-height:1.62; margin:0 0 20px; }

.timeline { margin-left:33.333%; border-top:1px solid var(--line); }
.entry { display:grid; grid-template-columns:150px 1fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.entry .when { color:#788b88; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding-top:5px; }
.entry strong { display:block; font-size:clamp(16px,1.6vw,21px); font-weight:500; letter-spacing:-.03em; }
.entry .org { display:block; margin-top:5px; color:#687e80; font-size:13px; }
.entry p { margin:11px 0 0; color:#51646a; font-size:14px; line-height:1.6; }

.facts { margin-left:33.333%; display:grid; grid-template-columns:1fr 1fr; gap:34px 44px; }
.facts h3 { font-size:10px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:#687e80; margin:0 0 12px; padding-bottom:11px; border-bottom:1px solid var(--line); }
.facts ul { margin:0; padding:0; list-style:none; }
.facts li { font-size:14px; line-height:1.5; color:#4c6267; padding:6px 0; }
.facts li b { font-weight:600; color:var(--ink); }

.todo { background:#f1e4c3; color:#6a5214; padding:1px 7px; font-size:.82em; font-weight:600; letter-spacing:.02em; }
.hero .todo { background:#dfcfa4; color:#3d2f06; }
.contact { background:#e7ece7; padding:86px 0 92px; margin-top:34px; }
.contact h2 { max-width:900px; font-size:clamp(36px,5vw,72px); line-height:1.04; font-weight:500; letter-spacing:-.07em; margin:24px 0 36px; }
.contact .eyebrow { color:#526b70; }
.contact-link { display:inline-flex; gap:26px; align-items:center; border-bottom:1px solid var(--navy); padding:0 0 10px; font-size:clamp(15px,1.5vw,20px); word-break:break-all; }
.contact-link span { font-size:25px; flex:none; }
footer { background:var(--navy); color:#bbcac9; padding:38px 0 45px; font-size:11px; }
.footer-inner { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
footer .footer-title { font-weight:700; color:var(--white); letter-spacing:.16em; text-transform:uppercase; }
footer p { max-width:560px; margin:10px 0 0; }
footer .right { text-align:right; }

@media (max-width:1100px) {
  .wrap { width:min(100% - 52px, 1420px); }
  .hero-grid { grid-template-columns:240px 1fr; }
}
@media (max-width:750px) {
  :root { --hdr-h:104px; }
  .wrap { width:min(100% - 36px, 1420px); }
  .header-inner { min-height:72px; padding:13px 0; gap:18px; flex-wrap:wrap; justify-content:center; }
  .brand { font-size:17px; flex-basis:100%; justify-content:center; gap:14px; } .brand img { width:32px; height:40px; }
  .back { font-size:12px; } .draft { font-size:11px; }
  .hero { padding:52px 0 60px; }
  .hero-grid { display:block; }
  .portrait { max-width:220px; margin-bottom:34px; }
  .stats { gap:26px 38px; }
  main section { padding-top:62px; }
  .section-head { display:block; padding:32px 0 34px; }
  .body, .timeline, .facts { margin-left:0; }
  .entry { grid-template-columns:1fr; gap:6px; }
  .facts { display:block; }
  .facts > div + div { margin-top:32px; }
  .contact { padding:64px 0 70px; }
  .footer-inner { display:block; }
  footer .right { text-align:left; margin-top:25px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }