Restaurant Gallery / Chef's Specials

:root {
  --cream: #f5f0e8;
  --cream-2: #ece4d4;
  --bone: #faf7f1;
  --terracotta: #c1714a;
  --terracotta-d: #a05a38;
  --forest: #2d4a3e;
  --forest-d: #1e3329;
  --gold: #c9a84c;
  --gold-light: #e6c97a;
  --ink: #2c1a0e;
  --ink-2: #4a3828;
  --warm-gray: #7a6a58;
  --success: #4f7a3a;
  --danger: #b3432a;
  --warning: #d99020;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(44, 26, 14, 0.08), 0 2px 6px rgba(44, 26, 14, 0.06);
  --shadow-2: 0 8px 24px rgba(44, 26, 14, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Nav */
.nav {
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(44, 26, 14, 0.08);
  background: var(--bone);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.back {
  font-size: 0.84rem;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
}
.back:hover {
  color: var(--terracotta-d);
}

/* Head */
.head {
  text-align: center;
  padding: 56px 28px 28px;
  max-width: 760px;
  margin: 0 auto;
}
.kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  font-weight: 700;
  margin-bottom: 6px;
}
.head h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.sub {
  margin-top: 10px;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Chips */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 28px 32px;
  max-width: 1080px;
  margin: 0 auto;
}
.chip {
  background: var(--bone);
  border: 1px solid rgba(44, 26, 14, 0.12);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip span {
  font-family: ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--cream-2);
  color: var(--warm-gray);
  padding: 2px 7px;
  border-radius: 999px;
}
.chip:hover {
  border-color: var(--terracotta);
  color: var(--terracotta-d);
}
.chip.is-active {
  background: var(--forest);
  color: var(--bone);
  border-color: var(--forest-d);
}
.chip.is-active span {
  background: rgba(250, 247, 241, 0.18);
  color: var(--gold-light);
}

/* Masonry — CSS columns */
.masonry {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px 64px;
  column-count: 3;
  column-gap: 14px;
}
@media (max-width: 880px) {
  .masonry {
    column-count: 2;
  }
}
@media (max-width: 540px) {
  .masonry {
    column-count: 1;
  }
}
.tile {
  break-inside: avoid;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(44, 26, 14, 0.08);
  background: var(--bone);
  display: flex;
  flex-direction: column;
}
.tile.is-hidden {
  display: none;
}
.tile-art {
  position: relative;
  display: grid;
  place-items: center;
  font-size: 4rem;
}
.tile-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(44, 26, 14, 0.32) 100%);
  pointer-events: none;
}
.tile-art > .glyph {
  position: relative;
  filter: drop-shadow(0 6px 12px rgba(44, 26, 14, 0.32));
}
.tile-cap {
  padding: 12px 14px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.tile-name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
}
.tile-meta {
  font-size: 0.7rem;
  color: var(--warm-gray);
  margin-top: 2px;
}
.tile-tag {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--terracotta);
  background: var(--cream-2);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Tile colour variants */
.tile.h-1 .tile-art {
  height: 220px;
  background: linear-gradient(135deg, #c1714a, #a05a38);
}
.tile.h-2 .tile-art {
  height: 300px;
  background: linear-gradient(135deg, #2d4a3e, #1e3329);
}
.tile.h-3 .tile-art {
  height: 260px;
  background: linear-gradient(135deg, #c9a84c, #e6c97a);
}
.tile.h-4 .tile-art {
  height: 200px;
  background: linear-gradient(135deg, #5e7a4a, #3d4a32);
}
.tile.h-5 .tile-art {
  height: 280px;
  background: linear-gradient(135deg, #b3432a, #c1714a);
}
.tile.h-6 .tile-art {
  height: 240px;
  background: linear-gradient(135deg, #4a3828, #2c1a0e);
}
.tile.h-7 .tile-art {
  height: 320px;
  background: linear-gradient(135deg, #d99020, #c9a84c);
}
.tile.h-8 .tile-art {
  height: 220px;
  background: linear-gradient(135deg, #7a6a58, #4a3828);
}

.tile:hover .tile-cap {
  background: var(--bone);
}
.tile:hover .tile-art {
  transform: scale(1.02);
}
.tile-art {
  transition: transform 0.4s ease;
}

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  background: rgba(44, 26, 14, 0.92);
  display: grid;
  place-items: center;
  z-index: 80;
  animation: fadeIn 0.18s ease;
}

.lb[hidden] {
  display: none;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lb-x,
.lb-nav {
  position: absolute;
  background: rgba(250, 247, 241, 0.12);
  border: 1px solid rgba(250, 247, 241, 0.18);
  color: var(--bone);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
  display: grid;
  place-items: center;
}
.lb-x {
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
}
.lb-nav {
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  font-size: 1.5rem;
  transform: translateY(-50%);
}
.lb-prev {
  left: 18px;
}
.lb-next {
  right: 18px;
}
.lb-x:hover,
.lb-nav:hover {
  background: rgba(250, 247, 241, 0.22);
}

.lb-figure {
  max-width: min(900px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lb-tile {
  width: 100%;
  height: min(560px, 72vh);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 8rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
}
.lb-cap {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
}
.lb-cap em {
  color: var(--gold-light);
  font-style: italic;
  font-weight: 500;
}

/* Footer */
.footer {
  border-top: 1px solid rgba(44, 26, 14, 0.08);
  background: var(--bone);
  text-align: center;
  padding: 28px;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}
.footer-meta {
  font-size: 0.82rem;
  color: var(--warm-gray);
  margin-top: 4px;
}

const ITEMS = [
  {
    glyph: "🥩",
    name: "Ribeye, plated",
    meta: "Marrow butter · chimichurri",
    cat: "plates",
    tag: "Signature",
    h: 2,
  },
  { glyph: "🔥", name: "The hearth", meta: "Olive + oak, 480°C", cat: "kitchen", tag: null, h: 6 },
  {
    glyph: "🥖",
    name: "Pan masa madre",
    meta: "Daily, smoked oil",
    cat: "plates",
    tag: null,
    h: 3,
  },
  { glyph: "🌿", name: "Garden basil", meta: "Aravaca, June", cat: "garden", tag: null, h: 4 },
  { glyph: "🍷", name: "Wine cellar", meta: "140 bottles · natural", cat: "room", tag: null, h: 1 },
  {
    glyph: "🐟",
    name: "Whole branzino",
    meta: "Fennel · preserved lemon",
    cat: "plates",
    tag: null,
    h: 7,
  },
  { glyph: "🍅", name: "Heirloom tomato", meta: "Aravaca, July", cat: "garden", tag: null, h: 5 },
  {
    glyph: "🪑",
    name: "Dining room",
    meta: "Twelve tables · oak floors",
    cat: "room",
    tag: null,
    h: 8,
  },
  {
    glyph: "🍰",
    name: "Burnt cheesecake",
    meta: "Basque · salted caramel",
    cat: "plates",
    tag: null,
    h: 1,
  },
  {
    glyph: "👨‍🍳",
    name: "Aitor, Tuesday prep",
    meta: "Pickling fennel",
    cat: "kitchen",
    tag: null,
    h: 4,
  },
  { glyph: "🍴", name: "Service starts", meta: "19:00 · Tuesday", cat: "kitchen", tag: null, h: 3 },
  {
    glyph: "🦪",
    name: "Oyster Wednesdays",
    meta: "Special · launching June",
    cat: "specials",
    tag: "Special",
    h: 5,
  },
];

const gallery = document.getElementById("gallery");
const chips = document.getElementById("chips");
const lb = document.getElementById("lb");
const lbTile = document.getElementById("lbTile");
const lbCap = document.getElementById("lbCap");

function render() {
  gallery.innerHTML = ITEMS.map(
    (item, idx) => `
    <article class="tile h-${item.h}" data-idx="${idx}" data-cat="${item.cat}">
      <div class="tile-art">
        <span class="glyph">${item.glyph}</span>
      </div>
      <div class="tile-cap">
        <div>
          <p class="tile-name">${item.name}</p>
          <p class="tile-meta">${item.meta}</p>
        </div>
        ${item.tag ? `<span class="tile-tag">${item.tag}</span>` : ""}
      </div>
    </article>`
  ).join("");
}

let activeFilter = "all";
let activeIdx = 0;

function filter(cat) {
  activeFilter = cat;
  document
    .querySelectorAll(".chip")
    .forEach((c) => c.classList.toggle("is-active", c.dataset.filter === cat));
  document.querySelectorAll(".tile").forEach((t) => {
    t.classList.toggle("is-hidden", cat !== "all" && t.dataset.cat !== cat);
  });
}

function visibleIndexes() {
  return ITEMS.map((_, i) => i).filter((i) => {
    return activeFilter === "all" || ITEMS[i].cat === activeFilter;
  });
}

function openLb(idx) {
  activeIdx = idx;
  paint();
  lb.hidden = false;
  document.body.style.overflow = "hidden";
}

function closeLb() {
  lb.hidden = true;
  document.body.style.overflow = "";
}

function paint() {
  const item = ITEMS[activeIdx];
  if (!item) return;
  // Reuse the tile gradient by class
  lbTile.className = `lb-tile h-${item.h}`;
  // The class names .h-N are scoped to .tile in CSS; mirror inline gradient here.
  const gradients = {
    1: "linear-gradient(135deg, #c1714a, #a05a38)",
    2: "linear-gradient(135deg, #2d4a3e, #1e3329)",
    3: "linear-gradient(135deg, #c9a84c, #e6c97a)",
    4: "linear-gradient(135deg, #5e7a4a, #3d4a32)",
    5: "linear-gradient(135deg, #b3432a, #c1714a)",
    6: "linear-gradient(135deg, #4a3828, #2c1a0e)",
    7: "linear-gradient(135deg, #d99020, #c9a84c)",
    8: "linear-gradient(135deg, #7a6a58, #4a3828)",
  };
  lbTile.style.background = gradients[item.h] || gradients[1];
  lbTile.textContent = item.glyph;
  lbCap.innerHTML = `${item.name} · <em>${item.meta}</em>`;
}

function step(dir) {
  const visible = visibleIndexes();
  const here = visible.indexOf(activeIdx);
  if (here < 0) {
    activeIdx = visible[0] ?? 0;
  } else {
    const next = (here + dir + visible.length) % visible.length;
    activeIdx = visible[next];
  }
  paint();
}

chips.addEventListener("click", (e) => {
  const btn = e.target.closest("[data-filter]");
  if (!btn) return;
  filter(btn.dataset.filter);
});

gallery.addEventListener("click", (e) => {
  const tile = e.target.closest("[data-idx]");
  if (!tile) return;
  openLb(Number(tile.dataset.idx));
});

document.getElementById("lbClose").addEventListener("click", closeLb);
document.getElementById("lbPrev").addEventListener("click", () => step(-1));
document.getElementById("lbNext").addEventListener("click", () => step(1));

document.addEventListener("keydown", (e) => {
  if (lb.hidden) return;
  if (e.key === "Escape") closeLb();
  if (e.key === "ArrowLeft") step(-1);
  if (e.key === "ArrowRight") step(1);
});

lb.addEventListener("click", (e) => {
  if (e.target === lb) closeLb();
});

render();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600;700&display=swap"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Gallery · Casa Olivar</title>
  </head>
  <body>
    <header class="nav">
      <a class="brand" href="#">Casa Olivar</a>
      <a class="back" href="#">← Back to home</a>
    </header>

    <section class="head">
      <p class="kicker">Gallery · Chef's specials</p>
      <h1>The room, the fire, the plates.</h1>
      <p class="sub">
        Snapshots from the kitchen and the garden. Updated when the menu
        changes — every Tuesday morning.
      </p>
    </section>

    <nav class="chips" aria-label="Gallery filter" id="chips">
      <button class="chip is-active" data-filter="all">All <span>12</span></button>
      <button class="chip" data-filter="kitchen">Kitchen <span>3</span></button>
      <button class="chip" data-filter="plates">Plates <span>4</span></button>
      <button class="chip" data-filter="garden">Garden <span>2</span></button>
      <button class="chip" data-filter="room">Room <span>2</span></button>
      <button class="chip" data-filter="specials">Specials <span>1</span></button>
    </nav>

    <main class="masonry" id="gallery"></main>

    <!-- Lightbox -->
    <div class="lb" id="lb" hidden role="dialog" aria-modal="true" aria-label="Image">
      <button class="lb-x" id="lbClose" aria-label="Close">
        <svg viewBox="0 0 24 24" width="18" height="18">
          <path
            d="M6 6l12 12M18 6 6 18"
            stroke="currentColor"
            stroke-width="2.2"
            stroke-linecap="round"
          />
        </svg>
      </button>
      <button class="lb-nav lb-prev" id="lbPrev" aria-label="Previous">‹</button>
      <button class="lb-nav lb-next" id="lbNext" aria-label="Next">›</button>
      <figure class="lb-figure">
        <div class="lb-tile" id="lbTile"></div>
        <figcaption id="lbCap" class="lb-cap"></figcaption>
      </figure>
    </div>

    <footer class="footer">
      <p class="footer-brand">Casa Olivar</p>
      <p class="footer-meta">© 2026 · Updated every Tuesday</p>
    </footer>

    <script src="script.js"></script>
  </body>
</html>