/* styles.css */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* tune here */
:root{
  --track: 250px;   /* base grid track width */
  --row:   250px;   /* base grid row height (keeps tiles square-ish) */
  --nav-h: 55px;
}


button {
	display: inline;
	appearance: none;
	background: #000000;
	margin: 0em;
	padding: 0em 1.25em;
	border: 0px;
	color: white;
	font: sans-serif;
	border-radius: 0px;
	cursor: ;
	outline: 0px;
}
/* Sticky/inverting nav (works best in Safari/Chrome; fallback uses blend) */
  position: sticky; top:  0; height: var(--nav-h); z-index: 30;
  background: rgba(0,0,0,0);
  backdrop-filter: invert(1);
  -webkit-backdrop-filter: invert(1);
  mix-blend-mode: difference;
  color: #FFF;
  border-bottom: 0px solid rgba(0,0,0,0.8);
}
.nav__inner{
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 45px;
  font: 16px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.nav__links a{ color: inherit; text-decoration: none; margin-left: 100px; }

/* Packed grid — edge-flush, no gutters at all */
.grid{
  display: grid;
  /* Large tiles: bump minmax to make each cell big */
  grid-template-columns: repeat(auto-fit, minmax(var(--track), 1fr));
  grid-auto-rows: var(--row);
  grid-auto-flow: dense; /* packs tightly; no whitespace between tiles */
  gap: 0               /* important: touching edges */
  width: 50vw; margin: -10; padding: -10;
}

/* A tile */
.tile{
  position: relative;
  overflow: hidden;
}

/* Optional faint focus ring for keyboard nav */
.tile:focus-within::after{
  content:""; position:absolute; inset:0; outline:2px solid #00C; outline-offset:-2px;
}

/* Simple caption overlay (off by default) */
.caption{
  position: absolute; left: 8px; bottom: 8px;
  padding: 4px 6px; font: 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color: #fff; background: rgba(0,0,0,.45); border-radius: 3px;
}

/* Infinite scroll sentinel spacer */
.sentinel{ height: 1px; }

/* Make tiles even bigger on wide screens */
@media (min-width: 1200px){
  :root{ --track: 360px; --row: 360px; }
}
@media (min-width: 1600px){
  :root{ --track: 420px; --row: 420px; }
}
/* Phones still get big tiles, just fewer columns */
@media (max-width: 250px){
  :root{ --track: 250px; --row: 250px; }
}