/* GS — portfolio ξυλουργικής. Σκούρο φόντο ώστε να «βγαίνουν» οι φωτογραφίες. */
:root{
  --bg:#141210;
  --bg-elev:#1c1917;
  --ink:#f2ece4;
  --ink-dim:#a89e91;
  --wood:#c8a06a;
  --line:#2b2622;
  --gap:10px;
  --shell:min(1400px, 100% - 48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.5 "Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--wood); outline-offset:3px}

/* ---------- header ---------- */
.masthead{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  padding:22px 24px;
  background:linear-gradient(to bottom, rgba(20,18,16,.96), rgba(20,18,16,.82) 60%, transparent);
  backdrop-filter:blur(6px);
}
.logo{display:block; width:64px; height:64px}
.logo .ring{fill:none; stroke:var(--wood); stroke-width:2.5; opacity:.85}
.logo .mono{fill:var(--ink); font:600 34px/1 "Georgia","Times New Roman",serif; letter-spacing:1px}

/* ---------- gallery ---------- */
.gallery{
  width:var(--shell); margin:8px auto 64px;
  columns:3 380px; column-gap:var(--gap);
}
.tile{
  position:relative; break-inside:avoid; margin:0 0 var(--gap);
  border:0; padding:0; width:100%;
  background:var(--bg-elev); border-radius:3px; overflow:hidden;
  cursor:zoom-in; -webkit-appearance:none; appearance:none;
}
.tile img,.tile video{width:100%; height:auto; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .4s}
.tile:hover img,.tile:focus-visible img,
.tile:hover video,.tile:focus-visible video{transform:scale(1.035)}
.tile::after{ /* λεπτό περίγραμμα πάνω από την εικόνα */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(242,236,228,.07);
}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:50; display:none;
  background:rgba(10,9,8,.965);
  align-items:center; justify-content:center;
}
.lb[open],.lb.is-open{display:flex}
.lb img,.lb-video{max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain}
/* Στο lightbox δείχνουμε ένα από τα δύο. */
.lb-video{display:none; background:#000}
.lb.is-video img{display:none}
.lb.is-video .lb-video{display:block}
.lb-btn{
  position:absolute; border:0; background:transparent; color:var(--ink);
  font:300 40px/1 system-ui,sans-serif; cursor:pointer; padding:14px 20px;
  opacity:.62; transition:opacity .2s;
}
.lb-btn:hover{opacity:1}
.lb-close{top:8px; right:12px; font-size:34px}
.lb-prev{left:4px; top:50%; transform:translateY(-50%)}
.lb-next{right:4px; top:50%; transform:translateY(-50%)}
.lb-count{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:var(--ink-dim); font:400 12px/1 "Inter",sans-serif; letter-spacing:.16em;
}

@media (max-width:640px){
  :root{--shell:100% - 20px; --gap:8px}
  .gallery{columns:2 150px}
  .masthead{padding:16px}
  .logo{width:52px; height:52px}
  .lb-btn{font-size:30px; padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
  .tile img{transition:none}
  .tile:hover img{transform:none}
}