:root{--bg:#eceee7;--surface:#f6f7f2;--ink:#1d2b22;--muted:#56645a;--line:#c9cfc3;--accent:#9a6b12;--l1:#2f4a38;--l2:#4f6b4a;--l3:#8a7a45;--l4:#6b4a32;--ltxt:#f3f1e8;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#161c18;--surface:#1e2621;--ink:#e8ebe3;--muted:#a3afa6;--line:#334037;--accent:#d9a441}}
:root[data-theme="dark"]{--bg:#161c18;--surface:#1e2621;--ink:#e8ebe3;--muted:#a3afa6;--line:#334037;--accent:#d9a441}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 "Source Serif 4",Georgia,serif}
h1,h2,h3,.sans{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;letter-spacing:-.01em}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}
nav{padding:18px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:15px}
nav a{text-decoration:none;margin-right:18px;color:var(--muted)}nav a:hover{color:var(--ink)}
nav b{font-weight:800}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;padding:44px 0 64px}
.hero h1{font-size:clamp(40px,7vw,76px);line-height:1;margin:0 0 18px;font-weight:800}
.portrait{width:132px;height:165px;object-fit:cover;object-position:center top;border-radius:6px;display:block;margin:0 0 22px;box-shadow:0 0 0 1px var(--line)}
.role{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:500;font-size:20px;color:var(--muted);margin:0 0 20px}
.hero p.lead{max-width:56ch;margin:0 0 26px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;text-decoration:none;padding:12px 20px;border-radius:6px;border:2px solid var(--ink)}
.btn.p{background:var(--ink);color:var(--bg)}
.strata{border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.strata div{padding:20px 20px 18px;color:var(--ltxt);font-family:"Bricolage Grotesque",system-ui,sans-serif}
.strata strong{display:block;font-size:20px}
.strata span{font-size:14px;opacity:.88;font-family:"Source Serif 4",Georgia,serif}
.strata div:nth-child(1){background:var(--l1)}.strata div:nth-child(2){background:var(--l2)}.strata div:nth-child(3){background:var(--l3)}.strata div:nth-child(4){background:var(--l4)}
section{padding:56px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(28px,4vw,40px);margin:0 0 26px;line-height:1.1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.facts{margin:0;padding:0;list-style:none}
.facts li{padding:10px 0;border-bottom:1px solid var(--line)}
.facts li:first-child{padding-top:0}
.project{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--line)}
.project:first-of-type{padding-top:0}
.project h3{margin:0;font-size:22px;line-height:1.2}
.tag{display:inline-block;margin-top:8px;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:13px;font-weight:700;color:var(--accent)}
.project p{margin:0 0 10px}
.stack{font-size:15px;color:var(--muted)}
.flag{background:var(--surface);border-left:4px solid var(--accent);padding:22px 24px;border-radius:0 6px 6px 0}
.flag h3{margin:0 0 8px;font-size:22px}.flag p{margin:0 0 10px}.flag p:last-child{margin:0}
.job{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:0 0 30px}
.job .when{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:500;color:var(--muted);font-size:15px}
.job h3{margin:0 0 2px;font-size:20px}
.job .org{color:var(--muted);margin:0 0 10px;font-size:16px}
.job ul{margin:0;padding-left:20px}.job li{margin-bottom:6px}
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px}
.skills div{padding:14px 0;border-bottom:1px solid var(--line)}
.skills h3{margin:0 0 4px;font-size:17px}
.skills p{margin:0;font-size:16px;color:var(--muted)}
.cred{padding:12px 0;border-bottom:1px solid var(--line)}
.cred b{font-family:"Bricolage Grotesque",system-ui,sans-serif}
.cred small{display:block;color:var(--muted);font-size:15px}
.contact{font-size:clamp(22px,4vw,34px);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;word-break:break-word}
footer{padding:30px 0 40px;color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
@media(max-width:760px){.hero,.two,.project,.job,.skills{grid-template-columns:1fr}.hero{gap:30px;padding-top:20px}.project,.job{gap:8px}}
.shots{display:flex;gap:14px;overflow-x:auto;padding:6px 0 14px;margin:22px 0 4px}
.shots figure{margin:0;flex:0 0 150px}
.shots img{width:150px;height:auto;border-radius:12px;display:block;box-shadow:0 0 0 1px var(--line)}
.shots figcaption,.cap{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.35}
.zoom{all:unset;cursor:zoom-in;display:block;width:100%}
.zoom img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.auto{display:grid;grid-template-columns:1fr 1fr;gap:34px 30px}
.auto h3{margin:12px 0 6px;font-size:20px;line-height:1.2}
.auto p{margin:0;font-size:16px}
.auto .wide{grid-column:1/-1}
dialog{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
dialog::backdrop{background:rgba(10,15,12,.88)}
dialog img{max-width:96vw;max-height:90vh;display:block;border-radius:6px}
dialog button{display:block;margin:0 0 8px auto;font:700 15px "Bricolage Grotesque",system-ui,sans-serif;padding:8px 14px;border-radius:6px;border:0;background:var(--surface);color:var(--ink);cursor:pointer}
@media(max-width:760px){.auto{grid-template-columns:1fr}}