/* ===== Base ===== */
:root{
  --bg:#000;
  --fg:#f5f5f5;
  --muted:rgba(245,245,245,.65);
  --line:rgba(245,245,245,.18);
  --focus:rgba(245,245,245,.35);
  --card:rgba(255,255,255,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.02em;
}

a{ color:var(--fg); text-decoration:none; }

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

/* ===== Landing ===== */
.center{
  min-height:80vh;
  display:grid;
  place-items:center;
  row-gap:10px;
  padding:20px;
  background:transparent;
}

.logo-link{ display:inline-block; }

/* 🔧 CHANGED: responsive logo */
.logo-image{
  width: min(800px, 92vw);
  height:auto;
  object-fit:cover;
  background:transparent;
  transition:transform .18s ease;
}

.logo-link:hover .logo-image{
  transform:translateY(-5px);
}

/* buttons */
.enter-link{
  display:block;
  width: fit-content;
  margin: 12px auto;
  padding:6px 30px;
  border:1px solid var(--line);
  border-radius:50px;
  font-weight:100;
  letter-spacing:.800em;
  transition:
  transform .18s ease,
  border-color .18s ease,
  background .18s ease,
  opacity .18s ease;
}

.enter-link:hover{
  transform:translateY(-1px);
  border-color:rgba(245,245,245,.32);
  background:rgba(255,255,255,.06);
}

.enter-link.alt{
  opacity:.7;
}

.enter-link.alt:hover{
  opacity:1;
}

.footer{
  position:fixed;
  bottom:14px;
  left:0;
  right:0;
  text-align:center;
  color:var(--muted);
  pointer-events:none;
}

/* ===== Gallery ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
}

/* 🔧 NEW: wrap header cleanly on small screens */
@media (max-width: 720px){
  .topbar{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    gap:10px;
  }
}

/* 🔧 NEW: responsive logo in gallery header */
.topbar img{
  width:min(400px, 80vw);
  height:auto;
}

.title{
  margin:0;
  font-size:14px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

.back-link{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.back-link:hover{
  transform:translateY(-1px);
  border-color:rgba(245,245,245,.32);
  background:rgba(255,255,255,.06);
}

.wrap{
  padding:22px;
  max-width:980px;
  margin:0 auto;
}

/* thumbnails grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}

/* 🔧 NEW: tighter grid on phones */
@media (max-width: 520px){
  .grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  }
}

.thumb{
  display:block;
  width:100%;
  height:200px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}

/* 🔧 NEW: smaller thumb height on phones */
@media (max-width: 520px){
  .thumb{
    height:160px;
  }
}

.thumb:hover{
  transform:translateY(-2px);
  border-color:rgba(245,245,245,.32);
  background:rgba(255,255,255,.08);
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  display:none;
  padding:18px;
}

.lightbox.is-open{
  display:grid;
  place-items:center;
}

.lightbox-inner{
  width:min(920px,100%);
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(0,0,0,.86);
  position:relative;
  padding:16px;
}

/* big image */
.lb-img{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  display:block;
  border-radius:14px;
  background:#000;
}

/* lightbox buttons */
.lb-btn{
  position:absolute;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--fg);
  border-radius:999px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}

.lb-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(245,245,245,.32);
  background:rgba(255,255,255,.10);
}

.lb-close{ top:12px; right:12px; }
.lb-prev{ left:12px; top:50%; transform:translateY(-50%); }
.lb-next{ right:12px; top:50%; transform:translateY(-50%); }

.lb-meta{
  margin-top:10px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.14em;
}

/* ===== Background Image ===== */
.bg-image{
  position: fixed;
  inset: 0;
  background-image: url("images/background_dragon.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  opacity: 0.12;
  z-index: -1;
  pointer-events: none;
}

.img {
max-inline-size: 100%;
}