:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #090b10; color: #e1e5ed; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid #b8c9e5; outline-offset: 6px; }
.site-header, main, footer { width: min(960px, calc(100% - 40px)); margin-inline: auto; }
.site-header { padding: 40px 0 56px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; letter-spacing: .02em; margin-bottom: 68px; }
.star { color: #b8c9e5; font-size: 22px; }
.eyebrow { color: #929eb2; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 14px; }
h1 { font-size: clamp(32px, 6vw, 50px); font-weight: 450; letter-spacing: -.045em; margin: 0; }
.intro { color: #8e98a9; font-size: 15px; margin: 16px 0 0; }
.photo { margin-bottom: 64px; scroll-margin-top: 24px; }
.photo-link { display: block; position: relative; background: #0e1118; border-radius: 5px; overflow: hidden; cursor: pointer; }
.photo-link img { display: block; width: 100%; height: auto; }
.open-hint { position: absolute; right: 16px; bottom: 16px; padding: 8px 12px; background: #090b10d9; border: 1px solid #ffffff20; border-radius: 4px; font-size: 12px; opacity: 0; transition: opacity .15s; }
.photo-link:hover .open-hint, .photo-link:focus-visible .open-hint { opacity: 1; }
.caption { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 17px; }
.caption h2 { margin: 0; font-weight: 450; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.permalink { font-size: 11px; color: #8e98a9; font-variant-numeric: tabular-nums; }
footer { border-top: 1px solid #20242e; padding: 26px 0 36px; display: flex; justify-content: space-between; gap: 20px; color: #8e98a9; font-size: 12px; }
footer a:hover, .permalink:hover { color: #e1e5ed; }
.empty { padding-block: 60px; color: #8e98a9; }
@media (max-width: 600px) {
  .site-header { padding-top: 28px; padding-bottom: 36px; }
  .wordmark { margin-bottom: 48px; }
  .photo { margin-bottom: 42px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }