/* ==========================================================================
   Creatio Construction: Gallery page styles
   Loaded only by gallery.html, after style.css. Every class here starts with
   "gal-" (or sits under .page-gallery), so no other page is affected.
   The look is "contact sheet and viewfinder": the archive sits on a near
   black darkroom ground with film sprocket edges, every photograph is a
   numbered frame, brass viewfinder brackets close in on the frame you point
   at, labels read like exposure notes, and the lightbox is a full screen
   viewing room with a frame counter and a brass progress line.
   Photos keep their proportions. Tiles in the editorial grid are cut close
   to 3:2 (or 3:4 for portraits) so trimming stays slight, and on phones
   every photo is shown whole.

   CONTENTS
   01  Page tokens and navigation state
   02  Shared pieces: viewfinder marks, mono labels, grain
   03  Hero: title, introduction and data strip
   04  Archive: heading, filters and status
   05  Archive grid: tiles, sizes and captions
   06  Lightbox
   07  Machine index
   08  Call to action
   09  FAQ and footer band
   10  Motion preferences
   11  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-gallery {
  --gal-black: #08090a;
  --gal-ink: #0f1012;
  --gal-panel: #15161a;
  --gal-panel-2: #1c1d22;
  --gal-line: rgba(255, 255, 255, .1);
  --gal-line-strong: rgba(255, 255, 255, .22);
  --gal-brass: #c4a874;
  --gal-brass-hi: #e2cd9d;
  --gal-brass-text: #6f5830; /* darker brass for small text on light surfaces */
  --gal-stone: #f0ebe1;
  --gal-stone-2: #e4dccd;
  --gal-stone-line: rgba(30, 25, 16, .14);
  --gal-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --gal-gap: 12px;
  --gal-ease: cubic-bezier(.2, .7, .2, 1);
  --gal-sticky: 64px;
  background: var(--gal-black);
}
.page-gallery .nav__sub a[aria-current="page"] { color: var(--accent); }


/* 02 SHARED PIECES ========================================================== */
.gal-mono { font-family: var(--gal-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }

/* four brass viewfinder brackets drawn on one element */
.gal-marks {
  --m: 18px; --t: 1.5px; --c: var(--gal-brass);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--m) var(--t),
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--m),
    linear-gradient(var(--c), var(--c)) top right / var(--m) var(--t),
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--m),
    linear-gradient(var(--c), var(--c)) bottom left / var(--m) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--m),
    linear-gradient(var(--c), var(--c)) bottom right / var(--m) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--m);
  background-repeat: no-repeat;
}

.gal-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: rgba(255, 255, 255, .7); }
.gal-eyebrow b { color: var(--gal-brass); font-weight: 400; }
.gal-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gal-brass); }


/* 03 HERO =================================================================== */
.gal-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(28px, 4vw, 48px) 0 0;
  color: var(--white);
  background: var(--gal-black);
}
/* the featured photograph, blurred and dimmed into a light leak behind the title */
.gal-hero::before {
  content: ""; position: absolute; inset: -40px; z-index: -2;
  background: url("../images/gallery/equipment/cat-backhoe-loaders-skid-steer-buckets-raised-beach-480.webp") center 40% / cover no-repeat;
  filter: blur(38px) saturate(.75) brightness(.55);
  opacity: .55;
}
.gal-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(196, 168, 116, .12), transparent 55%),
    linear-gradient(180deg, rgba(8, 9, 10, .55) 0%, rgba(8, 9, 10, .88) 60%, var(--gal-black) 100%);
}
.gal-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.gal-crumbs li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .6); font-size: .85rem; }
.gal-crumbs li + li::before { content: "/"; color: var(--gal-brass); }
.gal-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .78); text-decoration: none; }
.gal-crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--gal-brass); text-underline-offset: 4px; }
.gal-crumbs [aria-current] { color: var(--white); }

.gal-hero__grid { display: grid; gap: clamp(26px, 4vw, 64px); padding: clamp(18px, 3vw, 40px) 0 clamp(36px, 5vw, 64px); }
.gal-hero__head { position: relative; }
.gal-hero__title {
  margin: 0; max-width: 11ch;
  font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.045em; color: var(--white);
}
.gal-hero__title span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(226, 205, 157, .85); }
@supports not (-webkit-text-stroke: 1px black) { .gal-hero__title span { color: var(--gal-brass-hi); } }
.gal-hero__lead { max-width: 40ch; margin: 24px 0 0; font-size: var(--fs-lead); line-height: 1.55; color: rgba(255, 255, 255, .82); }
.gal-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.gal-hero__jump { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--white); font: 500 .95rem var(--font-head); text-decoration: none; }
.gal-hero__jump .icon { color: var(--gal-brass); transition: transform .3s var(--gal-ease); }
.gal-hero__jump:hover .icon { transform: translateY(3px); }

.gal-hero__intro { position: relative; align-self: end; padding: 26px 0 0; border-top: 1px solid var(--gal-line); }
.gal-hero__intro p { margin: 0 0 16px; color: rgba(255, 255, 255, .76); line-height: 1.7; }
.gal-hero__intro p:last-child { margin-bottom: 0; }
.gal-hero__intro a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(196, 168, 116, .7); text-underline-offset: 4px; }
.gal-hero__intro a:hover { text-decoration-color: var(--gal-brass); color: var(--gal-brass-hi); }

/* exposure notes: four facts on a strip of film */
.gal-data {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--gal-line-strong); border-bottom: 1px solid var(--gal-line);
}
.gal-data li { display: grid; gap: 6px; align-content: start; padding: 18px 16px 18px 0; }
.gal-data li:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--gal-line); }
.gal-data li:nth-child(n + 3) { border-top: 1px solid var(--gal-line); }
.gal-data dt, .gal-data .gal-data__k { color: var(--gal-brass); }
.gal-data .gal-data__v { color: var(--white); font: 600 clamp(1.4rem, 2.6vw, 2.1rem) / 1.1 var(--font-head); letter-spacing: -.02em; }
.gal-data .gal-data__v--text { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.35; letter-spacing: 0; }


/* 04 ARCHIVE: HEADING, FILTERS AND STATUS =================================== */
.gal-archive { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 9vw, 130px); color: var(--white); background: var(--gal-black); }
/* sprocket holes down both edges of the archive on wide screens */
.gal-archive::before, .gal-archive::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 18px; display: none;
  background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, .07) 14px 28px, transparent 28px 40px) center / 10px 100% no-repeat;
}
.gal-archive::before { left: 10px; }
.gal-archive::after { right: 10px; }

.gal-wide { width: 100%; max-width: calc(1600px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.gal-archive__head { display: grid; gap: 18px; margin-bottom: 26px; }
.gal-archive__title { margin: 0; max-width: 18ch; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.035em; color: var(--white); }
.gal-archive__note { max-width: 52ch; margin: 0; color: rgba(255, 255, 255, .7); }
.gal-archive__note a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(196, 168, 116, .7); text-underline-offset: 4px; }

.gal-toolbar {
  position: sticky; top: var(--gal-sticky); z-index: 20;
  display: grid; gap: 10px; margin: 0 calc(var(--gutter) * -1) 22px; padding: 10px var(--gutter);
  background: rgba(8, 9, 10, .9); border-top: 1px solid var(--gal-line); border-bottom: 1px solid var(--gal-line);
}
@supports (backdrop-filter: blur(10px)) {
  .gal-toolbar { background: rgba(8, 9, 10, .72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
}
.no-js .gal-toolbar { display: none; }
.gal-filters { display: flex; gap: 6px; margin: 0; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gal-filters::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {
  .gal-filters { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; }
}
.gal-filter {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px; padding: 0 16px;
  color: rgba(255, 255, 255, .72); background: transparent;
  border: 1px solid var(--gal-line); border-radius: 999px;
  font: 500 .86rem var(--font-head); letter-spacing: .02em; cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}
.gal-filter__n { font-family: var(--gal-mono); font-size: .72rem; color: rgba(255, 255, 255, .45); transition: color .25s; }
.gal-filter:hover { color: var(--white); border-color: var(--gal-line-strong); }
.gal-filter[aria-pressed="true"] { color: var(--black); background: var(--gal-brass); border-color: var(--gal-brass); }
.gal-filter[aria-pressed="true"] .gal-filter__n { color: rgba(10, 10, 11, .7); }
.gal-filter:focus-visible { outline: 2px solid var(--gal-brass-hi); outline-offset: 3px; }
.gal-status { margin: 0; color: rgba(255, 255, 255, .55); }
.gal-status b { color: var(--gal-brass); font-weight: 400; }


/* 05 ARCHIVE GRID =========================================================== */
.gal-gridwrap { container-type: inline-size; }
.gal-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 0; padding: 0; list-style: none; }
.gal-item { position: relative; min-width: 0; }
.gal-item[hidden] { display: none; }
.gal-frame { position: relative; margin: 0; }
.gal-open {
  position: relative; display: block; overflow: hidden;
  background: var(--gal-panel); border-radius: 3px; cursor: zoom-in;
  outline: none;
}
.gal-open img { display: block; width: 100%; height: auto; transition: transform 1.1s var(--gal-ease), filter .6s var(--gal-ease); }
/* the viewfinder that closes in on the frame you point at or focus */
.gal-open .gal-marks {
  position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  opacity: 0; transform: scale(1.06);
  transition: opacity .35s var(--gal-ease), transform .5s var(--gal-ease);
}
.gal-open::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
  opacity: .0; transition: opacity .4s var(--gal-ease);
}
.gal-open:hover img, .gal-open:focus-visible img { transform: scale(1.045); filter: brightness(1.06); }
.gal-open:hover .gal-marks, .gal-open:focus-visible .gal-marks { opacity: 1; transform: none; }
.gal-open:hover::after, .gal-open:focus-visible::after { opacity: 1; }
.gal-open:focus-visible { box-shadow: 0 0 0 2px var(--gal-black), 0 0 0 4px var(--gal-brass-hi); }

.gal-num {
  position: absolute; top: 12px; left: 12px; z-index: 3; pointer-events: none;
  padding: 5px 8px 4px; color: var(--white); background: rgba(8, 9, 10, .62);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px;
  font-family: var(--gal-mono); font-size: .68rem; letter-spacing: .12em;
}
.gal-num b { color: var(--gal-brass-hi); font-weight: 400; }

/* captions sit under the photo on phones and slide up over it on larger screens */
.gal-cap { display: grid; gap: 4px; padding: 12px 2px 0; }
.gal-cap__cat { color: var(--gal-brass); font-family: var(--gal-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.gal-cap__t { color: rgba(255, 255, 255, .86); font-size: .94rem; line-height: 1.45; }

/* the opening frame of the archive */
.gal-item--f .gal-num { background: var(--gal-brass); color: var(--black); border-color: var(--gal-brass); }
.gal-item--f .gal-num b { color: var(--black); }
.gal-item--f .gal-cap__t { font: 500 1.05rem / 1.4 var(--font-head); color: var(--white); }

/* reveal as the frames scroll into view (only when scripting is on) */
.js .gal-item.gal-wait { opacity: 0; transform: translateY(18px); }
.js .gal-item.gal-in { opacity: 1; transform: none; transition: opacity .8s var(--gal-ease), transform .8s var(--gal-ease); }
.gal-item.gal-pop { animation: galPop .55s var(--gal-ease) both; }
@keyframes galPop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }


/* 06 LIGHTBOX =============================================================== */
html.gal-locked { overflow: hidden; }
html.gal-locked body { padding-right: var(--gal-sbw, 0); }
.gal-lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  color: var(--white); background: transparent;
}
.gal-lb::backdrop { background: rgba(4, 4, 5, 0); transition: background-color .35s; }
.gal-lb[open] { display: block; }
.gal-lb__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(30, 28, 24, .55), transparent 70%) #060607;
  opacity: 0; transition: opacity .35s var(--gal-ease);
}
.gal-lb.is-open .gal-lb__bg { opacity: 1; }
.gal-lb__ui { opacity: 0; transition: opacity .35s .1s var(--gal-ease); }
.gal-lb.is-open .gal-lb__ui { opacity: 1; }
.gal-lb.is-closing .gal-lb__bg, .gal-lb.is-closing .gal-lb__ui { opacity: 0; transition-delay: 0s; }
.gal-lb__cap { transition: opacity .25s; }
.gal-lb.is-closing .gal-lb__cap { opacity: 0; }

.gal-lb__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 14px 12px 20px;
  pointer-events: none;
}
.gal-lb__count { margin: 0; font-family: var(--gal-mono); font-size: .86rem; letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.gal-lb__count b { color: var(--white); font-weight: 400; }
.gal-lb__cat { margin: 0; padding-left: 16px; border-left: 1px solid var(--gal-line-strong); color: var(--gal-brass); }
.gal-lb__btn {
  position: absolute; z-index: 4; display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0;
  color: var(--white); background: rgba(20, 21, 24, .72);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  cursor: pointer; pointer-events: auto;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--gal-ease);
}
.gal-lb__btn .icon { width: 18px; height: 18px; }
.gal-lb__btn:hover { color: var(--black); background: var(--gal-brass); border-color: var(--gal-brass); }
.gal-lb__btn:focus-visible { outline: 2px solid var(--gal-brass-hi); outline-offset: 3px; }
.gal-lb__close { top: 12px; right: 12px; }
.gal-lb__prev, .gal-lb__next { bottom: 18px; }
.gal-lb__prev { left: 16px; }
.gal-lb__next { right: 16px; }
.gal-lb__prev:active { transform: translateX(-2px); }
.gal-lb__next:active { transform: translateX(2px); }

.gal-lb__stage {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: 76px 12px 96px;
  touch-action: pan-y;
}
.gal-lb__figure { position: relative; display: grid; justify-items: center; gap: 14px; margin: 0; max-width: 100%; }
.gal-lb__imgwrap { position: relative; line-height: 0; }
.gal-lb__img {
  display: block; width: auto; height: auto;
  max-width: min(100%, 1440px); max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px);
  border-radius: 2px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
  transform-origin: 0 0; cursor: default; user-select: none; -webkit-user-drag: none;
  transition: filter .4s var(--gal-ease);
}
.gal-lb__img.is-loading { filter: blur(6px) saturate(.9); }
.gal-lb__imgwrap .gal-marks { position: absolute; inset: -10px; pointer-events: none; --m: 22px; opacity: .9; }
.gal-lb__cap { display: grid; gap: 4px; max-width: 70ch; padding: 0 64px; text-align: center; }
.gal-lb__code { color: var(--gal-brass); }
.gal-lb__text { color: rgba(255, 255, 255, .86); font-size: .98rem; line-height: 1.45; }
.gal-lb__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: rgba(255, 255, 255, .08); }
.gal-lb__progress span { display: block; height: 100%; width: 0; background: var(--gal-brass); transition: width .45s var(--gal-ease); }


/* 07 MACHINE INDEX ========================================================== */
.gal-index { background: var(--gal-stone); border-top: 1px solid var(--gal-stone-line); }
.gal-index .eyebrow, .gal-index .eyebrow__num { color: var(--gal-brass-text); }
.gal-index__head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.gal-index__head p { max-width: 58ch; margin: 0; font-size: 1.05rem; }
.gal-index__head a, .gal-index__more a { color: var(--black); text-decoration: underline; text-decoration-color: var(--gal-brass-text); text-underline-offset: 4px; }
.gal-index__list { display: grid; grid-template-columns: 1fr; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--gal-stone-line); border: 1px solid var(--gal-stone-line); }
.gal-index__list a {
  position: relative; display: grid; gap: 6px; align-content: start; height: 100%; min-height: 44px;
  padding: 22px 54px 22px 22px; background: var(--gal-stone); color: var(--black); text-decoration: none;
  transition: background-color .25s;
}
.gal-index__list a::after { content: ""; position: absolute; inset: 10px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.gal-index__list a:hover { background: #f7f3ec; }
.gal-index__list a:hover::after { opacity: 1; }
.gal-index__list .gal-mono { color: var(--gal-brass-text); }
.gal-index__list strong { font: 600 1.15rem var(--font-head); letter-spacing: -.01em; }
.gal-index__list span:not(.gal-mono) { color: var(--gray-700); font-size: .95rem; line-height: 1.5; }
.gal-index__list .icon { position: absolute; top: 24px; right: 22px; color: var(--gal-brass-text); transition: transform .3s var(--gal-ease); }
.gal-index__list a:hover .icon { transform: translateX(4px); }
.gal-index__more { display: grid; gap: 10px; margin-top: 30px; }
.gal-index__more p { margin: 0; max-width: 70ch; }


/* 08 CALL TO ACTION ========================================================= */
.gal-cta { position: relative; overflow: hidden; color: var(--white); background: var(--gal-ink); }
.gal-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 120px),
    radial-gradient(60% 80% at 100% 0%, rgba(196, 168, 116, .14), transparent 60%);
}
.gal-cta__box { position: relative; display: grid; gap: 26px; padding: clamp(30px, 5vw, 64px); border: 1px solid var(--gal-line); }
.gal-cta__box > .gal-marks { position: absolute; inset: -1px; pointer-events: none; --m: 28px; --t: 2px; }
.gal-cta__title { margin: 0; max-width: 16ch; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.035em; color: var(--white); }
.gal-cta__text { max-width: 54ch; margin: 0; color: rgba(255, 255, 255, .78); font-size: var(--fs-lead); line-height: 1.6; }
.gal-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.gal-cta__lines { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.gal-cta__lines a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: rgba(255, 255, 255, .86); text-decoration: none; overflow-wrap: anywhere; }
.gal-cta__lines a .icon { color: var(--gal-brass); }
.gal-cta__lines a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--gal-brass); text-underline-offset: 4px; }


/* 09 FAQ AND FOOTER BAND ==================================================== */
.gal-faq { border-top: 1px solid var(--line-light); }
.gal-faq .faq__list { counter-reset: gal-q; }
.gal-faq .faq__item summary { padding-left: 58px; min-height: 44px; }
.gal-faq .faq__item summary::before {
  counter-increment: gal-q; content: counter(gal-q, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  font-family: var(--gal-mono); font-size: .8rem; letter-spacing: .1em; color: var(--gal-brass-text);
}
.gal-faq .faq__answer { padding-left: 58px; }

.gal-explore { padding-top: 44px; padding-bottom: 8px; }
.gal-explore__title { margin-bottom: 20px; }
.gal-explore__list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden; }
.gal-explore__list a { display: grid; align-content: start; gap: 4px; min-height: 44px; height: 100%; padding: 16px 18px; background: var(--black); text-decoration: none; }
.gal-explore__list strong { color: var(--white); font: 600 .98rem var(--font-head); }
.gal-explore__list span { font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.gal-explore__list a:hover { background: #151619; }
.gal-explore__list a:hover strong { color: var(--accent); }
.page-gallery .footer__links a[aria-current="page"] { color: var(--accent); }


/* 10 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .gal-open img, .gal-open .gal-marks, .gal-open::after, .gal-hero__jump .icon,
  .gal-lb__bg, .gal-lb__ui, .gal-lb__img, .gal-lb__progress span, .gal-index__list .icon { transition: none; }
  .gal-open:hover img, .gal-open:focus-visible img { transform: none; }
  .gal-open .gal-marks { transform: none; }
  .js .gal-item.gal-wait { opacity: 1; transform: none; }
  .gal-item.gal-pop { animation: none; }
}


/* 11 RESPONSIVE ============================================================= */
@media (max-width: 379px) {
  .gal-data li { padding-right: 10px; }
  .gal-data li:nth-child(2n) { padding-left: 12px; }
  .gal-filter { padding: 0 13px; }
  .gal-lb__cap { padding: 0 56px; }
}

/* Large phones and up: two column data strip stays, filters get more room */
@media (min-width: 640px) {
  .page-gallery { --gal-gap: 14px; }
  .gal-data { grid-template-columns: repeat(4, 1fr); }
  .gal-data li { padding: 20px 18px; }
  .gal-data li:first-child { padding-left: 0; }
  .gal-data li:nth-child(n) { border-top: 0; border-left: 1px solid var(--gal-line); padding-left: 18px; }
  .gal-data li:first-child { border-left: 0; padding-left: 0; }

  /* six column editorial grid */
  .gal-grid {
    --cols: 6;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 120px; grid-auto-flow: dense; gap: var(--gal-gap);
  }
  @supports (width: 1cqw) {
    .gal-grid { grid-auto-rows: calc((((100cqw - 5 * var(--gal-gap)) / 6 * 3 + 2 * var(--gal-gap)) / 1.5 - var(--gal-gap)) / 2); }
  }
  .gal-item { grid-column: span 3; grid-row: span 2; }
  .gal-item--p { grid-row: span 4; }
  .gal-item--f, .gal-item--w, .gal-item--c { grid-column: span 6; grid-row: span 4; }
  .gal-grid.is-filtered .gal-item { grid-column: span 3; grid-row: span 2; }
  .gal-grid.is-filtered .gal-item--p { grid-row: span 4; }
  .gal-open img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .gal-open { height: 100%; }
  .gal-frame { height: 100%; }
  .gal-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none;
    padding: 40px 16px 14px;
    background: linear-gradient(180deg, transparent, rgba(5, 5, 6, .82));
    opacity: 0; transform: translateY(8px);
    transition: opacity .35s var(--gal-ease), transform .45s var(--gal-ease);
  }
  .gal-frame:hover .gal-cap, .gal-frame:focus-within .gal-cap { opacity: 1; transform: none; }
  .gal-item--f .gal-cap, .gal-item--c .gal-cap { opacity: 1; transform: none; padding: 60px 22px 20px; }
  .gal-grid.is-filtered .gal-item--f .gal-cap, .gal-grid.is-filtered .gal-item--c .gal-cap { opacity: 0; transform: translateY(8px); padding: 40px 16px 14px; }
  .gal-grid.is-filtered .gal-frame:hover .gal-cap, .gal-grid.is-filtered .gal-frame:focus-within .gal-cap { opacity: 1; transform: none; }
  .gal-cap__t { color: var(--white); }
  .gal-index__list { grid-template-columns: repeat(2, 1fr); }
  .gal-lb__stage { padding: 80px 84px 70px; }
  .gal-lb__prev, .gal-lb__next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .gal-lb__prev:active { transform: translateY(-50%) translateX(-2px); }
  .gal-lb__next:active { transform: translateY(-50%) translateX(2px); }
  .gal-lb__cap { padding: 0; }
  .gal-lb__img { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); }
}

/* touch screens: captions stay visible, since there is no hover */
@media (min-width: 640px) and (hover: none) {
  .gal-cap { opacity: 1; transform: none; }
  .gal-grid.is-filtered .gal-item--f .gal-cap, .gal-grid.is-filtered .gal-item--c .gal-cap { opacity: 1; transform: none; }
  .gal-open .gal-marks { display: none; }
}

/* Laptops and up: twelve column grid, side by side hero */
@media (min-width: 1024px) {
  .page-gallery { --gal-gap: 16px; }
  .gal-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; }
  .gal-hero__intro { padding: 0 0 0 34px; border-top: 0; border-left: 1px solid var(--gal-line); }
  .gal-archive::before, .gal-archive::after { display: block; }
  .gal-archive__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .gal-toolbar { grid-template-columns: 1fr auto; align-items: center; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .gal-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 150px;
  }
  @supports (width: 1cqw) {
    .gal-grid { grid-auto-rows: calc((((100cqw - 11 * var(--gal-gap)) / 12 * 4 + 3 * var(--gal-gap)) / 1.5 - var(--gal-gap)) / 2); }
  }
  .gal-item { grid-column: span 4; grid-row: span 2; }
  .gal-item--p { grid-row: span 4; }
  .gal-item--f { grid-column: span 8; grid-row: span 4; }
  .gal-item--w { grid-column: span 6; grid-row: span 3; }
  .gal-item--c { grid-column: span 12; grid-row: span 5; }
  .gal-grid.is-filtered .gal-item { grid-column: span 4; grid-row: span 2; }
  .gal-grid.is-filtered .gal-item--p { grid-row: span 4; }
  .gal-item--f .gal-cap__t { font-size: 1.25rem; }
  .gal-item--c .gal-cap { padding: 80px 30px 26px; }
  .gal-item--c .gal-cap__t { font: 500 1.35rem / 1.35 var(--font-head); }
  .gal-index__list { grid-template-columns: repeat(4, 1fr); }
  .gal-index__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .gal-cta__box { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; }
  .gal-cta__side { display: grid; gap: 22px; }
  .gal-explore__list { grid-template-columns: repeat(4, 1fr); }
  .page-gallery .footer__grid { grid-template-columns: 1.5fr 1.4fr 1fr 1fr; }
  .gal-lb__top { padding: 16px 20px 16px 32px; }
  .gal-lb__close { top: 16px; right: 20px; }
  .gal-lb__prev { left: 28px; }
  .gal-lb__next { right: 28px; }
  .gal-lb__stage { padding: 84px 120px 72px; }
}

@media (min-width: 640px) and (max-width: 767px) {
  .gal-explore__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gal-explore__list { grid-template-columns: repeat(2, 1fr); }
  .page-gallery .footer__grid { grid-template-columns: repeat(2, 1fr); }
}