/* Shared gallery presentation for the compact static site. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #000; color: #f5f5f5; font-family: "Trebuchet MS", Verdana, Tahoma, Arial, sans-serif; }
body { margin: 0; min-height: 100vh; background: #000; }
a { color: #fff; }
.site-header { padding: 1rem clamp(1rem, 3vw, 2.5rem) .5rem; }
.site-header h1 { margin: 0 0 .65rem; font-size: clamp(1.25rem, 3vw, 2rem); }
main { padding: .5rem clamp(.5rem, 2vw, 1.5rem) 2rem; }
.content { max-width: 1000px; margin: 0 auto; }
.content img { max-width: 100%; height: auto; }
.biography-summary { max-width: 1000px; margin: 0 auto 2rem; padding: .8rem 1rem; border: 1px solid #292929; border-radius: .25rem; }
.biography-summary > summary { width: max-content; padding: .45rem .8rem; border: 1px solid #555; border-radius: .2rem; cursor: pointer; font-weight: 700; }
.summary-list { margin-top: 1rem; }
.summary-entry { display: grid; grid-template-columns: minmax(90px, 150px) 1fr; gap: 1rem; align-items: center; min-height: 130px; padding: .7rem 0; border-top: 1px solid #222; }
.summary-entry img { width: 100%; max-height: 140px; object-fit: contain; }
.summary-entry p { margin: 0; line-height: 1.45; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .65rem; align-items: stretch; }
.thumbnail { min-width: 0; min-height: 130px; padding: .25rem; border: 1px solid #292929; border-radius: .2rem; background: #0b0b0b; cursor: zoom-in; }
.thumbnail:hover, .thumbnail:focus-visible { border-color: #ddd; outline: none; }
.thumbnail img { width: 100%; height: 100%; max-height: 190px; object-fit: contain; display: block; }
section + section { margin-top: 2.5rem; }
section h2 { font-size: 1.15rem; font-weight: 600; }
footer { padding: 2rem 1rem; color: #999; text-align: center; font-size: .82rem; }
.detail { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 3rem; background: rgb(0 0 0 / 88%); cursor: zoom-out; }
.detail img { display: block; max-width: 94vw; max-height: 91vh; object-fit: contain; }
.detail-close { position: absolute; top: .6rem; right: .8rem; border: 0; background: transparent; color: #fff; font-size: 2.3rem; line-height: 1; cursor: pointer; }
body.detail-open { overflow: hidden; }
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .4rem; }
  .thumbnail { min-height: 105px; }
  .detail { padding: 2.5rem .5rem .5rem; }
  .summary-entry { grid-template-columns: 85px 1fr; gap: .65rem; }
}