*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif;color:#0f172a;background:#ffffff;line-height:1.5}
.page{max-width:1680px;margin:0 auto;padding:32px 24px}
.header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 12px}
.title{font-size:28px;font-weight:700;letter-spacing:-0.01em;margin:0}
.subtitle{font-size:14px;color:#6b7280;margin:0}
hr{border:0;border-top:1px solid #e5e7eb;margin:20px 0}
.section{margin:28px 0 40px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}
.section-title{font-size:22px;font-weight:700;margin:0}
.section-meta{font-size:12px;color:#6b7280}

/* responsive fixed columns with flex (1–5) */
:root{--gap:16px;--cols:1}
@media (min-width:560px){:root{--cols:2}}
@media (min-width:900px){:root{--cols:3}}
@media (min-width:1200px){:root{--cols:4}}
@media (min-width:1600px){:root{--cols:5}}

.grid{display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:flex-start}
.item{flex:0 0 calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols));width:calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols))}

.card{display:block;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .12s ease,box-shadow .12s ease}
.card:focus-visible{outline:2px solid #111827;outline-offset:2px}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08)}

.thumb{position:relative;width:100%;background:#ffffff;overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* lock sizes by orientation so last row items NEVER stretch */
.orientation-landscape .thumb{aspect-ratio:3/2}
.orientation-square .thumb{aspect-ratio:1/1}
.orientation-mobile .thumb{aspect-ratio:2/3}

.caption{padding:10px 12px;font-size:12px;color:#374151;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-top:1px solid #eef2f7;background:#fff}

@media (prefers-color-scheme:dark){
  body{background:#0b0f14;color:#e5e7eb}
  .subtitle,.section-meta{color:#9aa4b2}
  hr{border-top-color:#1f2937}
  .card{background:#0f141a;border-color:#1f2937;box-shadow:none}
  .card:hover{box-shadow:0 10px 24px rgba(0,0,0,.35)}
  .caption{background:#0b0f14;border-top-color:#1f2937;color:#cbd5e1}
}