/* ============== Base theme ============== */
:root{
  --maxw: 1100px;
  --bg: #f8f8f8;
  --fg: #111;
  --gap: 10px;          /* tile spacing (change to 8–12 to taste) */
  --header-h: 68px;     /* height used to offset fixed header */
}

html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font:16px/1.5 -apple-system,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:auto; }

/* ============== Header (floating) ============== */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:2000;
  background:var(--bg);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:saturate(120%) blur(4px); /* optional polish */
  padding:14px 16px;                        /* feel free to tweak */
  display:flex; align-items:center; justify-content:space-between;
}
body{ padding-top: var(--header-h); }

.brand{ font-size:18px; letter-spacing:.06em; text-transform:uppercase; }
nav a{ margin-left:18px; opacity:.85; }
nav a:hover, nav a:focus{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* ============== Sections ============== */
.hero{ max-width:var(--maxw); margin:0 auto; padding:6px 16px 10px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:6px 16px 40px; }

/* ============== Gallery grid ============== */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid{ grid-template-columns:1fr; } }

/* Square tiles with rounded corners and hover zoom */
.tile{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:10px; }
.tile img{ width:100%; height:100%; object-fit:cover; border-radius:10px; transition:transform .2s ease; pointer-events:none; }
.tile:hover img, .tile:focus-within img{ transform:scale(1.02); }
.tile button{ position:absolute; inset:0; border:0; padding:0; background:transparent; cursor:pointer; outline-offset:3px; z-index:2; }

/* ============== Lightbox dialog ============== */
dialog.lb{ border:none; padding:0; width:100%; max-width:min(96vw, 1200px); background:transparent; }
dialog::backdrop{ background:rgba(0,0,0,.92); }

.lb__frame{
  position:relative;
  min-height:100vh;
  box-sizing:border-box;
  padding:72px 56px 96px 56px;  /* room for controls & caption */
  display:flex; align-items:center; justify-content:center;
}

.lb__img{
  max-width:100%;
  max-height:calc(100vh - 160px);
  width:auto; height:auto;
  border-radius:0;    /* square edges in lightbox */
}

/* Controls fixed to viewport so they never hide */
.lb__close, .lb__nav{
  position:fixed;
  z-index:1001;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  backdrop-filter:blur(3px);
}
.lb__close{ top:16px; right:16px; transform:none; }
.lb__nav.prev{ top:50%; left:16px; transform:translateY(-50%); }
.lb__nav.next{ top:50%; right:16px; transform:translateY(-50%); }

.lb__caption{
  position:fixed; left:0; right:0; bottom:0;
  padding:12px 16px;
  text-align:center; color:#eaeaea; font-size:14px;
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index:1000;
}

/* ============== Utilities ============== */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Smooth anchor scrolling */
html { scroll-behavior: smooth; }

/* Sub-nav just under the fixed header */
:root { --subnav-h: 40px; } /* adjust if you increase its padding/size */

.subnav{
  position: sticky;
  top: var(--header-h);           /* sits under your fixed header */
  z-index: 1500;
  display: flex; gap: 14px;
  overflow-x: auto; white-space: nowrap;
  background: var(--bg);
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 8px 16px;
}
.subnav a{
  opacity: .8;
  text-underline-offset: 3px;
}
.subnav a:hover, .subnav a:focus, .subnav a.is-active{
  opacity: 1; text-decoration: underline;
}

/* Collection headers that live *inside* the grid */
.collection-title{
  grid-column: 1 / -1;                  /* span full grid width */
  margin: 22px 0 8px;
  font-size: clamp(16px, 1.6vw, 18px);
  letter-spacing: .02em;
  /* account for fixed header + sticky subnav so anchors don't hide */
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 10px);
}