:root{--paper:#f6f6f3;--ink:#17161a;--muted:#5d5b63;--accent:#4b6b8f;--on-accent:#fff;--display:"Alfa Slab One",Georgia,serif;--pad:clamp(20px,4vw,56px)}
@media (prefers-color-scheme:dark){:root{--paper:#131217;--ink:#f3f1ea;--muted:#a9a6b0;--accent:#6f8fb3;--on-accent:#131217}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 "Work Sans",Helvetica,Arial,sans-serif}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 28px;padding:22px var(--pad);border-bottom:3px solid var(--ink)}
.logo{font-family:var(--display);font-size:26px;text-decoration:none;line-height:1}
nav{display:flex;gap:26px;flex-wrap:wrap;font-weight:500}
nav a{text-decoration:none;padding:2px 0;border-bottom:4px solid transparent}
nav a:hover,nav a[aria-current]{border-bottom-color:var(--accent)}
main{padding:clamp(28px,5vw,64px) var(--pad) 90px}
.hero{font-family:var(--display);font-weight:400;font-size:clamp(54px,12.5vw,190px);line-height:.9;letter-spacing:-.01em;margin:clamp(28px,5vw,64px) 0 clamp(28px,5vw,60px)}
.hero span{display:block}
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,110px);align-items:start}
.photo{aspect-ratio:1/1;background:#cfcdc6;border:3px solid var(--ink);box-shadow:16px 16px 0 var(--accent);margin:0 16px 16px 0;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.about p{margin:0 0 1.15em;max-width:62ch}
.about p.lead,.lead{font-size:clamp(22px,2.4vw,30px);line-height:1.3;font-weight:500}
.about a{text-decoration-color:var(--accent);text-decoration-thickness:3px}
h1{font-family:var(--display);font-weight:200;font-size:clamp(36px,9vw,120px);line-height:.95;margin:clamp(28px,5vw,60px) 0 36px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:28px}
.tile{font:inherit;color:inherit;text-align:left;cursor:pointer;padding:0;width:100%;display:flex;flex-direction:column;text-decoration:none;background:var(--paper);border:3px solid var(--ink);transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--accent)}
.thumb{aspect-ratio:4/3;background:var(--accent);border-bottom:3px solid var(--ink);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.body{padding:16px 18px 20px}
.tile h2{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;margin:0 0 6px}
.tile p{margin:0;color:var(--muted);font-size:16px;line-height:1.45}
dialog{padding:0;border:3px solid var(--ink);background:var(--paper);color:var(--ink);width:min(92vw,760px);max-height:90vh;overflow:auto;box-shadow:12px 12px 0 var(--accent)}
dialog::backdrop{background:rgba(23,22,26,.6)}
body:has(dialog[open]){overflow:hidden}
.dimg{height:clamp(140px,24vh,200px);background:var(--accent);border-bottom:3px solid var(--ink);overflow:hidden}
.dimg img{width:100%;height:100%;object-fit:cover;display:block}
.dbody{padding:24px 28px 32px}
.dbody h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.1;margin:0 0 14px}
.dbody p{margin:0;max-width:60ch}
.dbody a{text-decoration-color:var(--accent);text-decoration-thickness:3px}
.close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);font:28px/1 var(--display);cursor:pointer;padding:0}
.close:hover{background:var(--accent);color:var(--on-accent)}
.contact .lead{max-width:34ch;margin:0 0 32px}
.mail{display:inline-block;font-family:var(--display);font-size:clamp(24px,4.6vw,56px);line-height:1.1;text-decoration:none;background:var(--accent);color:var(--on-accent);border:3px solid var(--ink);padding:14px 24px;box-shadow:8px 8px 0 var(--ink);overflow-wrap:anywhere;transition:transform .15s,box-shadow .15s}
.mail:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.links{list-style:none;margin:48px 0 0;padding:0;display:flex;gap:28px;flex-wrap:wrap;font-weight:500}
.links a{text-decoration-color:var(--accent);text-decoration-thickness:3px}
footer{padding:0 var(--pad) 40px;color:var(--muted);font-size:15px}
@media(max-width:800px){.about{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tile,.mail{transition:none}}