:root {
  --bg: #0b1221;
  --card: #111a2e;
  --muted: #8ea0c6;
  --text: #eaf2ff;
  --accent: #66e3a6;
  --accent-2: #8bd3ff;
  --focus: #ffd166;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% -10%, #14213d 0%, var(--bg) 45%);
  color: var(--text);
  line-height: 1.6;
}
.wrap { width: min(1100px, 92vw); margin: 0 auto; }
.skip-link { position:absolute; left:-999px; top:-999px; background:var(--focus); color:#000; padding:.5rem .75rem; border-radius:.5rem; }
.skip-link:focus { left:1rem; top:1rem; }
.site-header { position: sticky; top:0; z-index:40; background: rgba(11,18,33,.75); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; }
.brand a { color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.5px; }
.primary-nav { position:relative; }
.primary-nav .nav-toggle { display:none; background:var(--card); color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:.5rem; padding:.4rem .6rem; }
.primary-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:1rem; align-items:center; }
.primary-nav a { color:var(--text); text-decoration:none; }
.primary-nav .cta { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0b1221; padding:.5rem .9rem; border-radius:.75rem; font-weight:700; }
.hero { padding: 1.25rem 0 .75rem; }
.hero-inner { display:grid; grid-template-columns: 1.2fr 1fr; gap:1.25rem; align-items:center; }
.hero-copy h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height:1.2; margin:0 0 .5rem; }
.hero-copy p { color:var(--muted); margin:0 0 .75rem; }
.site-search { display:grid; grid-template-columns:1fr auto; gap:.5rem; max-width:540px; }
.site-search label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path:inset(50%); }
.site-search input, .site-search button { padding:.6rem .8rem; border-radius:.75rem; border:1px solid rgba(255,255,255,.12); background:var(--card); color:var(--text); }
.site-search button { cursor:pointer; font-weight:700; }
.hero-art img { width:100%; height:auto; border-radius:1rem; box-shadow:0 10px 35px rgba(0,0,0,.35); }
.hero figcaption { color:var(--muted); font-size:.9rem; margin-top:.4rem; }
.categories { padding:.5rem 0 0; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.filter { background:#0f1a31; color:var(--text); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.45rem .85rem; cursor:pointer; }
.filter.active, .filter:focus-visible { outline:2px solid var(--focus); }
.gallery { padding:.5rem 0 1.5rem; }
.group-heading { margin:1.1rem 0 .4rem; font-size:1.15rem; color:var(--accent-2); }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:.75rem; padding:0; list-style:none; }
.card { background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:.9rem; padding:.5rem; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.card a { display:block; }
.card img {
  width:100%;
  height:auto;            /* prevents distortion */
  border-radius:.6rem;
  display:block;
  aspect-ratio: 4 / 3;   /* uniform tiles across grid */
  object-fit: cover;     /* cover without smushing; slight crop if needed */
}
.caption { color:var(--muted); margin:.45rem 0 0; font-size:.95rem; }
.attribution { color:var(--muted); font-size:.9rem; margin-top:.6rem; }
.tips { padding-bottom:2rem; }
.tips-list { display:grid; gap:.5rem; }
.tips-list li { background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:.75rem; padding:.7rem 1rem; }
.site-footer { border-top:1px solid rgba(255,255,255,.06); padding:1rem 0; background: rgba(11,18,33,.5); }
/* Lightbox natural aspect */
.lightbox[hidden] { display:none; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:grid; place-items:center; padding:1rem; z-index:100; }
.lightbox figure { max-width: min(1100px, 92vw); }
.lightbox img { max-width:100%; max-height:85vh; width:auto; height:auto; border-radius:.75rem; }
.lightbox figcaption { margin-top:.5rem; color:#fff; font-weight:600; }
.lightbox .lightbox-source { margin:.2rem 0 0; color:#cfd8ff; font-size:.9rem; }
.lightbox-close { position:fixed; top:.75rem; right:.75rem; background:transparent; border:2px solid #fff; color:#fff; font-size:2rem; line-height:1; width:44px; height:44px; border-radius:50%; cursor:pointer; }
/* Mobile nav */
@media (max-width: 820px) {
  .primary-nav .nav-toggle { display:inline-block; }
  .primary-nav ul { position:absolute; right:0; top:2.6rem; background:rgba(11,18,33,.95); border:1px solid rgba(255,255,255,.06); border-radius:.75rem; padding:.5rem; display:none; flex-direction:column; gap:.5rem; min-width:200px; }
  .primary-nav ul[aria-expanded="true"] { display:flex; }
  .hero-inner { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}