/* ---------------------------------------------------------------------
   SBG public galleries.

   No raw brand values in this file. Everything comes from tokens.css.
   --------------------------------------------------------------------- */

@font-face {
  font-family: "Cabin";
  src: url("fonts/cabin-latin-var.woff2") format("woff2-variations"),
       url("fonts/cabin-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Reserve the scrollbar track so the justified grid is measured
     against a width that will not change once the images load. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* One focus style for the whole page. Keyboard users are the reason the
   lightbox exists in the shape it does, so the ring is never removed. */
:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-bg);
  color: var(--color-accent);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- shell ---------------------------------------------------------- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* ---- masthead ------------------------------------------------------- */

.masthead {
  padding: 2rem 0 0;
}

.masthead__wordmark {
  display: inline-block;
  width: 150px;
  max-width: 40vw;
}
.masthead__wordmark svg { width: 100%; height: auto; display: block; }

/* ---- gallery header -------------------------------------------------
   Title, standfirst and intro all sit on the same left edge as the first
   image in the first row. That shared vertical line is doing the work that
   a centred block would only pretend to do.
   -------------------------------------------------------------------- */

.gallery-header {
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(1.75rem, 4vw, 2.75rem);
  max-width: var(--measure);
}

.gallery-header__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-title);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

.gallery-header__subtitle {
  font-size: var(--size-subtitle);
  color: var(--color-text-muted);
  margin: 0.6rem 0 0;
  line-height: 1.35;
}

.gallery-header__intro {
  margin: 1.75rem 0 0;
}

/* Play control. Quiet: a hairline outline rather than a filled button, so it
   sits below the photographs in the visual order. */
.gallery-header__actions { margin: 1.5rem 0 0; }

.slideshow-start {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-size: var(--size-meta);
  color: var(--color-text);
  background: none;
  border: 1px solid var(--color-rule);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.slideshow-start svg { width: 14px; height: 14px; }
.slideshow-start:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---- justified grid -------------------------------------------------
   Row heights are set in JS; this only styles what the JS lays out.

   No cards, no shadow, no radius, no hover transform. The photographs are
   the content and nothing here competes with them.
   -------------------------------------------------------------------- */

.grid { padding-bottom: 4rem; }

.grid__row {
  display: flex;
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

/* The final row keeps its natural width and is left flush-left, so the
   right-hand edge stays uneven. The wall is unfinished; the grid says so.
   This is deliberate, not an unhandled partial row. */
.grid__row--last { justify-content: flex-start; }

.grid__item {
  display: block;
  padding: 0;
  border: 0;
  background: var(--color-rule);
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid__empty,
.grid__error {
  padding: 3rem 0 5rem;
  max-width: var(--measure);
}
.grid__error { color: var(--color-error); }
.grid__error p { margin: 0 0 0.75rem; }
.grid__error .grid__error-detail {
  color: var(--color-text-muted);
  font-size: var(--size-meta);
}

/* ---- footer --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-rule);
  padding: 2rem 0 4rem;
  font-size: var(--size-meta);
  color: var(--color-text-muted);
}
.site-footer p { margin: 0 0 0.4rem; }

/* ---- index page ----------------------------------------------------- */

.gallery-index { padding-bottom: 5rem; }
.gallery-index__list { list-style: none; margin: 0; padding: 0; }
.gallery-index__item { border-top: 1px solid var(--color-rule); }
.gallery-index__link {
  display: block;
  padding: 1.5rem 0;
  text-decoration: none;
  color: inherit;
}
.gallery-index__link:hover .gallery-index__title,
.gallery-index__link:focus-visible .gallery-index__title { color: var(--color-accent); }
.gallery-index__title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
}
.gallery-index__desc { margin: 0.35rem 0 0; color: var(--color-text-muted); }

/* ---- lightbox ------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: var(--color-lightbox-bg);
  color: var(--color-lightbox-text);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}

.lightbox[hidden] { display: none; }

/* The stage takes whatever height the caption leaves. min-height:0 lets it
   shrink below the image's intrinsic size, and position:relative gives the
   image a definite box to size against.

   The image is absolutely positioned with margin:auto rather than centred by
   the layout, because the img carries width/height attributes and a
   percentage max-height against an auto-sized row resolves circularly. That
   let a tall photo overflow the stage and print itself underneath the
   caption. */
.lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

.lightbox__img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__caption {
  flex: 0 0 auto;
  padding-top: 1rem;
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
  font-size: var(--size-caption);
  line-height: 1.5;
}
.lightbox__credit {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-lightbox-muted);
  font-size: var(--size-meta);
}

.lightbox__btn {
  position: absolute;
  background: none;
  border: 0;
  color: var(--color-lightbox-text);
  cursor: pointer;
  padding: 0.75rem;
  line-height: 0;
}
.lightbox__btn:disabled { opacity: 0.3; cursor: default; }
.lightbox__btn svg { width: 28px; height: 28px; }

.lightbox__close { top: clamp(0.5rem, 2vw, 1.5rem); right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__play  { top: clamp(0.5rem, 2vw, 1.5rem); right: calc(clamp(0.5rem, 2vw, 1.5rem) + 3.25rem); }
.lightbox__prev  { left:  clamp(0.25rem, 1.5vw, 1rem); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: clamp(0.25rem, 1.5vw, 1rem); top: 50%; transform: translateY(-50%); }

/* ---- reduced motion -------------------------------------------------
   There are no entrance animations to disable, which is the point. This
   covers smooth scrolling and the one opacity transition on the lightbox.
   -------------------------------------------------------------------- */

.lightbox__img { transition: opacity 120ms linear; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --color-text-muted: var(--color-text); }
}