:root { color-scheme: light; --navy:#071e34; --blue:#2466a2; --red:#a82e27; --paper:#f8f7f3; --muted:#4b5966; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--navy); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
.wrap { width:min(1120px, calc(100% - 96px)); margin-inline:auto; }
.masthead { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #d8dce0; }
.wordmark { font-size:22px; font-weight:800; letter-spacing:-.8px; }
.wordmark span { color:var(--blue); }
.status { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.status span { width:7px; height:7px; border-radius:50%; background:var(--red); }
.hero { display:grid; grid-template-columns:1.25fr 1fr; align-items:center; gap:65px; padding-block:74px 78px; }
.eyebrow { margin:0 0 22px; font-size:11px; line-height:1.6; text-transform:uppercase; letter-spacing:1.8px; font-weight:700; color:var(--red); }
h1 { margin:0 0 24px; font-size:clamp(40px,4.5vw,60px); line-height:1.04; letter-spacing:-2.4px; font-weight:800; }
h1 span { color:var(--blue); }
.intro { font-size:18px; line-height:1.65; color:var(--muted); max-width:48ch; margin:0 0 20px; }
.mission { font-size:15px; font-weight:700; line-height:1.6; margin:0; }
.launch-note { display:flex; align-items:center; gap:14px; margin-top:34px; color:var(--muted); }
.launch-note p { margin:0; font-size:14px; line-height:1.6; }
.rule { width:28px; height:2px; background:var(--red); flex-shrink:0; }
.brand-art img { width:100%; height:auto; display:block; border-radius:50%; }
.about { background:#eaeef0; border-block:1px solid #dce1e4; }
.about-inner { display:grid; grid-template-columns:164px 1fr; gap:42px; align-items:center; padding-block:44px; }
.portrait { width:164px; height:190px; object-fit:cover; object-position:center 30%; border-radius:3px; }
.bio { max-width:780px; }
.bio .eyebrow { margin-bottom:9px; font-size:10px; }
h2 { font-size:30px; letter-spacing:-.8px; line-height:1.1; margin:0 0 14px; }
.bio p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 12px; }
.contact { display:inline-flex; align-items:center; gap:12px; color:var(--navy); font-weight:700; font-size:14px; line-height:1.6; text-decoration:underline; text-underline-offset:5px; padding-block:5px; }
.contact:hover { color:var(--blue); }
.contact:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
footer { display:flex; justify-content:space-between; gap:20px; padding-block:25px; color:var(--muted); font-size:11px; line-height:1.6; }
@media (min-width:1500px) { .hero { padding-block:100px; } }
@media (max-width:800px) { .wrap { width:calc(100% - 48px); } .hero { gap:30px; padding-block:54px; } h1 { font-size:42px; letter-spacing:-1.6px; } .intro { font-size:16px; } .about-inner { gap:28px; grid-template-columns:130px 1fr; } .portrait { width:130px; height:170px; } }
@media (max-width:600px) { .masthead { min-height:90px; gap:12px; flex-wrap:wrap; align-content:center; padding-block:18px; } .wordmark { font-size:21px; } .status { font-size:11px; } .hero { grid-template-columns:1fr; gap:32px; padding-block:40px; } h1 { font-size:44px; max-width:12ch; } .eyebrow { font-size:10px; letter-spacing:1.3px; margin-bottom:18px; } .brand-art { width:min(260px,80%); justify-self:center; } .launch-note { margin-top:24px; } .about-inner { grid-template-columns:1fr; padding-block:34px; gap:24px; } .portrait { width:100px; height:110px; } h2 { font-size:28px; } footer { flex-direction:column; gap:5px; padding-block:22px; } }