:root { --bg:#f6f1ea; --ink:#1c1915; --muted:#6d655c; --line:#ddd4c8; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: Georgia, "Times New Roman", serif; }
header { padding:28px 22px 8px; }
.name { margin:0; font-size:34px; letter-spacing:-0.03em; }
.sub, nav a, .meta { font-family: "Segoe UI", sans-serif; }
.sub { color:var(--muted); margin:6px 0 16px; }
nav { display:flex; flex-wrap:wrap; gap:14px; }
nav a, section a { color:inherit; }
main { padding: 8px 22px 64px; }
h1,h2 { font-weight:500; }
.hero, .split { display:grid; gap:18px; align-items:end; margin-bottom:36px; }
img { max-width:100%; display:block; }
.lede { font-size:20px; line-height:1.35; max-width:36ch; }
.grid { display:grid; gap:28px; }
.grid article { max-width:860px; }
.grid h3 { margin:10px 0 4px; font-weight:500; }
.meta { margin:0; color:var(--muted); font-size:14px; }
button.shot { border:0; padding:0; background:none; cursor:pointer; width:100%; }
#contact, #about, #paint, #collage { border-top:1px solid var(--line); padding-top:28px; margin-top:28px; }
dialog { border:0; padding:16px; background:#16130f; color:#f6f1ea; max-width:min(960px, 94vw); }
dialog::backdrop { background:rgba(20,16,12,.82); }
dialog img { max-height:80vh; margin:0 auto; }
@media (min-width:900px) {
  .hero, .split { grid-template-columns: 1.2fr .8fr; }
  main, header { padding-left:48px; padding-right:48px; }
}