/* Spacing system: 8 16 24 32 48 64 96. One typeface, three weights. One accent, one job. */
:root{
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;
  --ground:#15171A;
  --ink:#E8E6E1;         /* 14.4:1 on ground */
  --body:#D3D0CA;        /* 11.7:1 */
  --quiet:#9AA0A6;       /* 6.8:1 */
  --hair:#2A2E33;
  --accent:#C6A15B;      /* 7.4:1 */
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased}
.page{max-width:680px;margin:0 auto;padding:0 var(--s3)}

.site-nav{display:flex;gap:var(--s3);padding:var(--s2) 0 0}
.site-nav a,.site-nav [aria-current]{display:inline-block;min-height:44px;line-height:44px}
.site-nav [aria-current]{color:var(--quiet)}

/* Top padding plus the nav (16 + 44) puts the mark at 92px desktop, 68px phone: nearest scale values to its pre-nav 96 and 64. */
header{padding:var(--s4) 0 var(--s8)}
.mark{display:block;width:40px;height:40px;margin:0 0 var(--s4)}
.name{font-size:clamp(30px,4.6vw,42px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
.place{font-size:16px;color:var(--quiet);margin:var(--s2) 0 var(--s6)}
.statement{font-size:clamp(21px,2.4vw,25px);line-height:1.45;font-weight:400;margin:0;max-width:23em}

section{padding:var(--s6) 0;border-top:1px solid var(--hair)}
h2{font-size:17px;font-weight:600;color:var(--quiet);margin:0 0 var(--s3)}
p{margin:0 0 var(--s2);max-width:34em;color:var(--body)}
p:last-child{margin-bottom:0}

.entry{margin:0 0 var(--s4)}
.entry:last-child{margin-bottom:0}
.entry h3{font-size:19px;font-weight:600;margin:0;color:var(--ink)}
.entry .status{font-size:16px;color:var(--quiet);margin:0 0 var(--s1)}
.links{margin:var(--s2) 0 0;display:flex;flex-wrap:wrap;gap:var(--s3)}
.links a{display:inline-block;min-height:44px;line-height:44px}
.entry p{margin:0}
.shot{display:block;width:100%;height:auto;margin:var(--s2) 0 0;border:1px solid var(--hair)}

/* About page: its main has no sections, so it carries the section rule and spacing itself. */
.about{padding:var(--s6) 0;border-top:1px solid var(--hair)}
.photo{display:block;width:200px;height:200px;margin:0 0 var(--s4)}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.contact a{display:inline-block;min-height:44px;line-height:44px}

footer{padding:var(--s6) 0 var(--s12);border-top:1px solid var(--hair);font-size:16px;color:var(--quiet)}
@media(max-width:600px){header{padding:var(--s1) 0 var(--s6)}body{font-size:17px}}