/* Base */
:root{ --bg:#ffffff; --ink:#111; --muted:#6b7280; --grid-gap:8px; --maxw:1100px }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.5 }

/* HERO */
.hero{
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #fff;
  z-index: 2;
  transition: opacity .5s ease, filter .5s ease;
}
.hero-logo{
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
@media (min-width: 768px){
  .hero-logo{ max-width: 820px; max-height: 80vh; }
}

/* CONTENT + GRID */
.content{ position:relative; z-index:1 }
.grid-section{ min-height:120vh; background:#fff; padding:calc(2*var(--grid-gap)) }
.photo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--grid-gap);
  max-width:var(--maxw);
  margin:0 auto;
}
.photo-grid .grid-item{ display:block; position:relative; overflow:hidden; border-radius:14px; background:#f3f4f6; box-shadow:0 1px 3px rgba(0,0,0,.06) }
.photo-grid img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .3s ease }
.photo-grid .grid-item:hover img{ transform:scale(1.03) }
@media(min-width:680px){ .photo-grid{ grid-template-columns:repeat(3,1fr); gap:12px } }
@media(min-width:1024px){ .photo-grid{ grid-template-columns:repeat(4,1fr); gap:14px } }

/* LIGHTBOX */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; padding:24px }
.lightbox.open{ display:flex }
.lightbox-figure{ max-width:min(96vw,1200px); width:100%; text-align:center }
.lightbox img{ width:100%; height:auto; border-radius:12px }
.lightbox figcaption{ color:#e5e7eb; margin-top:12px; font-size:.95rem }
.lightbox-close{ position:absolute; top:10px; right:12px; font-size:40px; line-height:1; background:transparent; color:white; border:none; cursor:pointer }

/* Footer (unchanged if you already had styles) */
.site-footer{ background:#fff; border-top:1px solid #eee; margin-top:40px; padding:18px 12px }
.footer-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.footer-center a{ color:var(--ink); text-decoration:none; margin:0 8px }
.footer-center a:hover{ text-decoration:underline }
.footer-left{ color:var(--muted) }

/* Social icons */
.footer-right a {
  color: var(--ink);
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  transition: color .2s ease;
}
.footer-right a:hover {
  color: #d33; /* YouTube red-ish on hover, looks lively */
}