/* Gallery pages — same type, colors and plain white page as the brochure-style home page. */
:root {
  --ink: #000;
  --caption: #545454;
  --link: #0097b2;
  --sepia: #7a4a22;
  --paper: #fff;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Figtree", "Canva Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.375;
}
a { color: var(--sepia); }

/* Buttons match the main page: square, thin antique-brown border */
.btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--sepia);
  color: var(--sepia);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--sepia); color: #fff; }

.flourish {
  width: 420px; max-width: 100%; height: 40px;
  margin: 0 auto 22px;
  background: url("images/divider-flourish.svg?v=2") center / contain no-repeat;
}

/* Introductory text above a gallery grid */
.intro { max-width: 780px; margin: 0 auto 28px; }
.intro h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1.25; text-align: center; margin: 0 0 .6em; }
.intro-video { margin: 0 0 1.3em; }
.intro-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; }
/* the river video is silent, so hide the speaker controls */
.intro-video video::-webkit-media-controls-mute-button,
.intro-video video::-webkit-media-controls-volume-slider,
.intro-video video::-webkit-media-controls-volume-slider-container { display: none; }
.intro p { margin: 0 0 1em; }
.intro p:last-child { margin-bottom: 0; }
/* Ornate drop capital on the first paragraph of the introductory text (same as the main page) */
.intro p:first-of-type::first-letter {
  font-family: "Cinzel Decorative", Georgia, serif;
  font-weight: 700;
  font-size: 1.64em;
  line-height: 1;
  color: var(--sepia);
  margin-right: 1px;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 27px 64px;
}
h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  margin: 10px 0 0;
}
.count {
  text-align: center;
  color: var(--sepia);
  font-size: 15px;
  margin: 2px 0 12px;
}

/* Masonry grid keeps every photo's own proportions */
.grid {
  columns: 4 240px;
  column-gap: 10px;
}
.grid button {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
  break-inside: avoid;
}
.grid img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .15s;
}
@media (hover: hover) {
  .grid button:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
}
@media (prefers-reduced-motion: reduce) { .grid button { transition: none; } .grid button:hover { transform: none; } }
.grid button:focus-visible { outline: 3px solid var(--sepia); outline-offset: 2px; }

/* Fixed rows of three, read left to right (opt-in per page) */
.grid.rows-3 {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
}
.grid.rows-3 button { margin: 0; }
@media (max-width: 640px) {
  .grid.rows-3 { gap: 6px; }
}

.foot {
  text-align: center;
  margin-top: 32px;
  font-size: 15px;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center; justify-content: center;
  z-index: 10;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: calc(100vw - 140px);
  max-height: calc(100vh - 90px);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  user-select: none;
}
.lb-btn {
  position: absolute;
  background: none; border: 0;
  color: #fff;
  font: 400 44px/1 system-ui, sans-serif;
  padding: 12px 18px;
  cursor: pointer;
  opacity: .8;
}
.lb-btn:hover, .lb-btn:focus-visible { opacity: 1; }
.lb-btn[disabled] { opacity: .2; cursor: default; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-close { top: 6px; right: 8px; font-size: 38px; }
.lb-counter {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center;
  color: #ddd;
  font-size: 15px;
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .page { padding: 18px 16px 48px; }
  h1 { font-size: 32px; }
  .grid { columns: 2; column-gap: 8px; }
  .grid button { margin-bottom: 8px; }
  .lightbox img { max-width: 100vw; max-height: calc(100vh - 110px); }
  .lb-prev, .lb-next { top: auto; bottom: 0; transform: none; }
}

/* "Back to our story": one button that floats in the upper left (the bottom copy is gone) */
.page > .back-link { position: fixed; top: 12px; left: 16px; z-index: 9; margin: 0; background: #fff; box-shadow: none; }
@media (max-width: 1240px) { .page { padding-top: 64px; } }
/* no default blue ring or tap flash on the floating button: sepia only (same as the train button) */
.page > .back-link { -webkit-tap-highlight-color: rgba(122, 74, 34, .25); }
.page > .back-link:focus { outline: none; }
.page > .back-link:focus-visible { outline: 2px solid var(--sepia, #7a4a22); outline-offset: 3px; }

/* the floating back button keeps readable text on hover/focus (white-on-white fix) */
.page > .back-link:hover, .page > .back-link:focus-visible { background: var(--sepia, #7a4a22); color: #fff; }

/* "Serving suggestion" row: three staged photos in a row at the bottom of the Interior gallery */
.grid.serving { margin-top: 34px; align-items: start; }
.grid.serving .serving-item { margin: 0; }
.grid.serving figcaption { margin-top: 7px; text-align: center; font-style: italic; font-size: 14px; letter-spacing: .02em; color: var(--sepia, #7a4a22); }
.lb-caption { position: absolute; left: 0; right: 0; bottom: 44px; text-align: center; color: #f1e2c4; font-style: italic; font-size: 17px; text-shadow: 0 1px 4px rgba(0,0,0,.7); pointer-events: none; }
.lb-caption:empty { display: none; }
@media (max-width: 760px) { .grid.serving figcaption { font-size: 12px; } .lb-caption { bottom: 52px; font-size: 15px; } }

/* Serving row with four photos */
.grid.serving.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .grid.serving.four { grid-template-columns: repeat(2, 1fr); } }