:root {
  --paper: #f8f2e8;
  --ink: #1f251d;
  --red: #9f2f21;
  --line: rgba(31, 37, 29, .22);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #d9a46d; outline-offset: 4px; }

.gallery-header { min-height: 104px; padding: 10px 5vw; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.gallery-brand { display: block; }
.gallery-brand img { width: auto; height: 72px; max-width: 190px; object-fit: contain; }
.back-link { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.back-link:hover { color: var(--red); border-color: var(--red); }

.gallery-intro { padding: 105px 7vw 85px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 10vw; align-items: end; }
.gallery-intro > * { min-width: 0; }
.eyebrow { margin: 0 0 23px; color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
h1 { margin: 0; font: 500 clamp(68px, 9vw, 132px)/.82 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
h1 em { font-weight: 400; }
.gallery-intro > p { max-width: 500px; margin: 0 0 8px; color: #53584e; font: 19px/1.68 Georgia, serif; }

.cake-gallery { padding: 0 4vw 120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(28px, 3vw, 44px) clamp(18px, 2.5vw, 38px); }
.cake-card { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: zoom-in; }
.cake-card img { width: 100%; height: auto; object-fit: contain; background: #ded1bf; transition: transform .45s ease, filter .45s ease; }
.cake-card span { display: block; padding: 14px 0 9px; border-bottom: 1px solid var(--line); font: italic 16px/1.35 Georgia, serif; }
.cake-card:hover img { transform: scale(.985); filter: saturate(.9); }

.empty-gallery { margin: 0 7vw 120px; min-height: 330px; padding: 70px 8vw; display: grid; place-items: center; align-content: center; border: 1px solid var(--line); text-align: center; }
.empty-gallery > span { margin-bottom: 24px; color: var(--red); font-size: 28px; }
.empty-gallery h2 { margin: 0; font: 500 clamp(34px, 4vw, 54px)/1.05 Georgia, serif; }
.empty-gallery p { max-width: 480px; margin: 20px auto 0; color: #62685d; font: 16px/1.65 Georgia, serif; }

footer { min-height: 150px; padding: 44px 7vw; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); }
footer p { margin: 0; color: #62685d; font: italic 16px/1.4 Georgia, serif; }
footer a { padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 46px clamp(54px, 7vw, 120px); border: 0; background: rgba(20, 24, 18, .96); color: white; }
.lightbox::backdrop { background: rgba(20, 24, 18, .75); }
.lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(22px, 4vw, 60px); }
.lightbox figure { min-width: 0; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.lightbox figure img { max-width: 100%; max-height: calc(100vh - 125px); object-fit: contain; }
.lightbox figcaption { min-height: 20px; color: rgba(255,255,255,.78); font: italic 15px Georgia, serif; }
.lightbox-close, .lightbox-nav { border: 0; background: transparent; color: white; cursor: pointer; }
.lightbox-close { position: absolute; top: 20px; right: 25px; width: 44px; height: 44px; font: 300 34px/1 Arial, sans-serif; }
.lightbox-nav { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; font-size: 18px; }
.lightbox-nav:hover, .lightbox-close:hover { color: #f4d7b6; border-color: #f4d7b6; }

@media (max-width: 800px) {
  .gallery-intro { grid-template-columns: 1fr; gap: 40px; }
  .cake-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .gallery-header { min-height: 84px; padding-inline: 6vw; }
  .gallery-brand img { height: 58px; max-width: 150px; }
  .gallery-intro { padding: 78px 6vw 62px; }
  h1 { font-size: clamp(56px, 19vw, 82px); }
  .gallery-intro > p { font-size: 17px; }
  .cake-gallery { padding: 0 6vw 80px; grid-template-columns: 1fr; }
  .empty-gallery { margin: 0 6vw 80px; padding: 55px 7vw; }
  footer { padding-inline: 6vw; align-items: flex-start; flex-direction: column; }
  .lightbox { padding: 62px 15px 28px; }
  .lightbox[open] { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lightbox figure { grid-column: 1 / -1; grid-row: 1; height: auto; min-height: 0; }
  .lightbox figure img { max-height: calc(100vh - 165px); }
  .lightbox-prev { grid-column: 1; grid-row: 2; justify-self: end; }
  .lightbox-next { grid-column: 2; grid-row: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .cake-card img { transition: none; }
}