/* Personal page: keep full photo proportions and the site's existing palette. */
.personal-intro { max-width: 760px; margin-bottom: 2rem; }
.personal-intro p { font-size: 1.08rem; }
.personal-kicker { color: #2563eb; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; }
.personal-gallery { columns: 3; column-gap: 1rem; }
.personal-photo { display: inline-block; width: 100%; margin: 0 0 1rem; vertical-align: top; break-inside: avoid; border-radius: .5rem; overflow: hidden; background: #e5e7eb; }
.personal-photo img { display: block; width: 100%; height: auto; transition: filter .2s; }
.personal-photo:hover img { filter: brightness(.94); }
.personal-page a:focus-visible, .photo-viewer button:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.personal-note { color: #6b7280; font-size: .9rem; }
.photo-viewer { max-width: 96vw; max-height: 96vh; padding: 3rem 1rem 1rem; border: 0; border-radius: .5rem; background: #111827; color: white; }
.photo-viewer::backdrop { background: rgb(0 0 0 / .85); }
.photo-viewer img { display: block; max-width: 88vw; max-height: 76vh; width: auto; height: auto; margin: auto; }
.photo-viewer p { margin: .75rem 0 0; text-align: center; }
.photo-viewer button { position: absolute; top: .5rem; right: .75rem; background: white; color: #111827; border: 0; border-radius: .25rem; padding: .3rem .7rem; cursor: pointer; font: inherit; }
@media (max-width: 850px) { .personal-gallery { columns: 2; } }
@media (max-width: 540px) { .personal-gallery { columns: 1; } }
@media (max-width: 640px) {
 .site-header .container { gap: .75rem; }
 .site-nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
 .site-nav a { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .personal-photo img { transition: none; } }