:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at top, #17364c, #061421 65%); color: #f4f7fb; font: 1rem/1.6 system-ui, sans-serif; min-height: 100vh; }
a { color: #75d8f5; }
header { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-bottom: 1px solid #28485e; }
main { max-width: 1100px; padding: 1.5rem; margin: auto; }
h1, h2, h3 { line-height: 1.2; }
h1 { color: #ffd166; font-size: clamp(2rem, 6vw, 3rem); }
h2 { color: #75d8f5; margin-top: 2rem; }
.eyebrow { color: #ffd166; text-transform: uppercase; letter-spacing: .1em; }
.muted { color: #aec1d0; }
.birthday-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.birthday-gallery article { background: #102b3c; border: 1px solid #28485e; border-radius: 12px; overflow: hidden; }
.birthday-photo { display: block; }
.birthday-photo img { width: 100%; height: 200px; object-fit: contain; display: block; background: #030b12; }
.birthday-photo:focus-visible { outline: 3px solid #ffd166; outline-offset: -3px; }
.caption { padding: 1rem; }
.caption time { color: #ffd166; font-weight: 700; }
.caption h3 { margin: .5rem 0; }
.caption p { margin: 0; }
.back { margin-top: 2rem; }
dialog { border: 1px solid #28485e; border-radius: 12px; padding: 1rem; background: #061421; color: #f4f7fb; max-width: 96vw; max-height: 96vh; text-align: center; }
dialog::backdrop { background: rgba(0, 0, 0, .9); }
dialog img { display: block; max-width: 88vw; max-height: 70vh; width: auto; height: auto; margin: auto; }
.viewer-controls { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }
button { padding: .65rem 1rem; background: #102b3c; border: 1px solid #28485e; border-radius: 8px; color: #f4f7fb; cursor: pointer; font: inherit; }
@media (max-width: 600px) {
  main { padding: 1rem; }
  .birthday-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .birthday-photo img { height: 150px; }
  .caption { padding: .65rem; }
}