:root { color-scheme:dark; --page:#0d1519; --panel:#172329; --line:#35505b; --ink:#eef5f7; --muted:#aec2ca; --accent:#4ab0cd; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:radial-gradient(circle at 50% 0,#18303a 0,#0d1519 42rem); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
.site-header { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px clamp(18px,4vw,64px); background:rgba(9,23,29,.94); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; font-size:21px; font-weight:800; text-decoration:none; }
.brand-mark { color:#29a8dc; font-size:34px; line-height:.5; transform:rotate(-18deg); }
.viewer-link { padding:9px 13px; border:1px solid #63808b; border-radius:7px; text-decoration:none; font-weight:700; }
.viewer-link:hover,.viewer-link:focus-visible { background:#263f49; outline:none; }
main { width:min(1240px,calc(100% - 36px)); margin:0 auto; padding:32px 0 58px; }
.gallery-heading { margin-bottom:22px; }
h1 { margin:0; font-size:30px; line-height:1.1; }
.intro { margin:8px 0 0; color:var(--muted); font-size:15px; line-height:1.4; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,221px); gap:20px; align-items:start; }
.gallery-card { position:relative; overflow:hidden; display:flex; width:221px; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.22); text-decoration:none; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.gallery-card:hover,.gallery-card:focus-visible { transform:translateY(-4px); border-color:#65bcd3; box-shadow:0 22px 52px rgba(0,0,0,.38); outline:none; }
.thumbnail-frame { width:221px; height:114px; overflow:hidden; background:#050809; border-bottom:1px solid var(--line); }
.thumbnail-frame img { width:100%; height:100%; display:block; object-fit:cover; transform:translateY(7px); transition:transform .25s ease; }
.gallery-card:hover img { transform:translateY(7px) scale(1.025); }
.card-copy { padding:10px 11px 11px; }
.card-copy h2 { margin:0; font-size:15px; line-height:1.25; }
.gallery-message { grid-column:1/-1; color:var(--muted); }
footer { display:flex; justify-content:space-between; gap:20px; padding:24px clamp(18px,4vw,64px); border-top:1px solid var(--line); color:var(--muted); }
footer a { color:#dff8ff; font-weight:700; }
@media (max-width:760px) { footer { flex-direction:column; } }
@media (max-width:520px) { .site-header { align-items:flex-start; flex-direction:column; } .viewer-link { width:100%; text-align:center; } main { width:min(100% - 24px,1180px); } }