/* phones draw a blue flash on every tap; the site's own hover and focus styles replace it */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* SCA v2 - gallery.css. Page-only styles, prefix gl-. */
.gl-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(6rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem); }
.gl-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 12% -8%, rgb(200 31 44 / 0.24), transparent 70%), radial-gradient(40% 45% at 92% 108%, rgb(240 215 140 / 0.07), transparent 70%); }
.gl-title { margin-block: 1.4rem clamp(2rem, 5vw, 3.6rem); max-width: 6.4em; } /* always two lines, leaves the right side to the hero art */
.gl-hero-foot { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .gl-hero-foot { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); column-gap: var(--gap); } .gl-total { justify-self: end; } }
.gl-total { display: flex; align-items: baseline; gap: 1rem; }
.gl-total-n { font-family: 'Fraunces', serif; font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: 1; color: var(--gold); font-weight: 300; }

/* hero art: a darkroom drying line. Three full-colour prints hang from a gold wire under the red safelight and sway.
   Sits right of the two-line title; --f = wire height at --x (quadratic M0 2 Q50 26 100 4 in a 100x20 box). */
.gl-hero__art { --sag: clamp(1.5rem, 4.5vw, 3.75rem); position: absolute; z-index: -1; top: clamp(6rem, 9vw, 7.5rem); right: max(0px, (100% - var(--maxw)) / 2 - var(--pad)); width: min(46vw, 40rem); height: var(--sag); container-type: inline-size; pointer-events: none; }
.gl-hero__glow { position: absolute; top: -32cqw; left: 5cqw; width: 90cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(200 31 44 / 0.2), rgb(200 31 44 / 0.06) 55%, transparent); }
.gl-hero__wire { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.gl-hero__print { --w: 24cqw; position: absolute; top: calc(var(--sag) * var(--f) - 0.55rem); left: calc(var(--x) - var(--w) / 2); width: var(--w); transform-origin: 50% 0.55rem; rotate: var(--r); }
.gl-hero__print--a { --x: 18%; --f: 0.4575; --r: -5deg; }
.gl-hero__print--b { --x: 50%; --f: 0.725; --r: 2.5deg; --w: 26cqw; }
.gl-hero__print--c { --x: 82%; --f: 0.5215; --r: -2deg; }
.gl-hero__clip { position: relative; z-index: 1; display: block; width: 0.55rem; height: 1.15rem; margin: 0 auto -0.6rem; border-radius: 1px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-hot) 45%, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 2px 4px rgb(0 0 0 / 0.5); }
.gl-hero__paper { display: block; padding: 6% 6% 0; background: linear-gradient(172deg, #ebe2cf, #c9ba99); box-shadow: 0 1.2rem 2rem -0.6rem rgb(0 0 0 / 0.75); }
.gl-hero__photo { position: relative; overflow: hidden; display: block; aspect-ratio: 4 / 5; }
.gl-hero__photo picture { position: absolute; inset: 0; }
.gl-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.gl-hero__note { display: block; padding: 0.6em 0 0.75em; font: 500 max(0.45rem, 1.45cqw)/1 var(--f-label); letter-spacing: 0.24em; color: rgb(36 5 10 / 0.55); white-space: nowrap; }
@media (max-width: 699px) { .gl-hero__note { display: none; } .gl-hero__paper { padding-bottom: 16%; } }
@media (max-width: 519px) { /* phones: the three prints hang in a row under the intro text, above the count */
  .gl-hero__art { position: relative; top: auto; right: auto; width: 100%; height: 12.5rem; --sag: 3.5rem; }
  .gl-hero__wire { height: var(--sag); }
  .gl-hero__print--a { --x: 17%; --w: 27cqw; }
  .gl-hero__print--b { --x: 50%; --w: 30cqw; }
  .gl-hero__print--c { --x: 83%; --w: 27cqw; }
}
@media (prefers-reduced-motion: no-preference) {
  .gl-hero__glow { animation: gl-safe 6s var(--ease-io) infinite alternate; }
  .gl-hero__print { animation: gl-sway 7.6s var(--ease-io) infinite alternate; }
  .gl-hero__print--a { animation-duration: 6.8s; animation-delay: -2s; }
  .gl-hero__print--b { animation-duration: 8.4s; animation-delay: -5s; }
}
/* reveal without gallery.js: each print fades in where it hangs (a sideways slide would lift it off the curved wire).
   With it, .is-live: gallery.js glides the prints in along the wire and drives their place, swing and fade, so the
   CSS sway stops. Prints fade out where the wire does instead of being cut off at the edge of the art. */
@media (prefers-reduced-motion: no-preference) {
  .js .gl-hero__print[data-reveal] { transform: none; transition-property: opacity; transition-duration: 1.2s; }
  .gl-hero__art.is-live .gl-hero__print { animation: none; }
}
@keyframes gl-safe { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes gl-sway { from { rotate: calc(var(--r) - 1.6deg); } to { rotate: calc(var(--r) + 1.6deg); } }

/* filmstrip */
.gl-strip-wrap { margin-top: clamp(2.5rem, 5vw, 4rem); }
.gl-strip-hint { margin-bottom: 1rem; }
.gl-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; outline-offset: -3px; }
.gl-strip::-webkit-scrollbar { display: none; }
.gl-strip.is-dragging { cursor: grabbing; user-select: none; }
.gl-track { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); margin: 0; padding: 0 var(--pad) 0.5rem; list-style: none; width: max-content; }
.gl-slide { flex: none; width: clamp(16rem, 44vw, 32rem); }
.gl-slide--tall { width: clamp(11rem, 26vw, 20rem); }
.gl-slide a { display: block; }
.gl-frame { margin: 0; display: grid; gap: 0.8rem; }
.gl-frame picture { display: block; overflow: hidden; }
.gl-frame img { display: block; width: 100%; height: clamp(15rem, 34vw, 26rem); object-fit: cover; -webkit-user-drag: none; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .gl-slide a:hover img { transform: scale(1.04); } }
.gl-frame figcaption { color: var(--muted); }

/* archive */
.gl-head-stack { display: grid; gap: 1.4rem; }
.gl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-block: clamp(2rem, 4vw, 3rem); padding-block: 1.2rem; border-block: 1px solid var(--line); }
.gl-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.gl-filter { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 0.7rem 1.2rem; cursor: pointer; transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); }
.gl-filter-n { opacity: 0.6; margin-left: 0.3em; }
.gl-filter:hover { border-color: var(--gold); }
.gl-filter[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #24050a; }
.gl-filter:focus-visible, .gl-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.gl-masonry { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: clamp(0.7rem, 1.6vw, 1.4rem); }
@media (min-width: 700px) { .gl-masonry { column-count: 3; } }
@media (min-width: 1100px) { .gl-masonry { column-count: 4; } }
.gl-item { break-inside: avoid; margin: 0 0 clamp(0.7rem, 1.6vw, 1.4rem); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.gl-item[hidden] { display: none; }
.gl-item.is-out { opacity: 0; transform: scale(0.96); }
.gl-item.is-in { animation: gl-in 0.6s var(--ease) both; }
@keyframes gl-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.gl-tile { position: relative; overflow: hidden; display: block; }
.gl-tile picture { display: block; }
.gl-tile img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .gl-tile:hover img, .gl-tile:focus-visible img { transform: scale(1.04); } }

/* interlude + close */
.gl-interlude-line { max-width: 22em; margin-inline: auto; text-align: center; }

/* interlude decoration: warm spotlight glows, film-strip edges, oversized quote mark, gold rule */
.gl-interlude {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(5rem, 11vw, 9rem);
  background:
    radial-gradient(ellipse 55% 70% at 12% 20%, rgb(240 215 140 / 0.45), transparent 70%),
    radial-gradient(ellipse 50% 65% at 90% 85%, rgb(158 28 40 / 0.14), transparent 70%),
    var(--bg);
}
.gl-interlude::before,
.gl-interlude::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  z-index: -1;
  opacity: 0.35;
  background: repeating-linear-gradient(90deg, var(--fg) 0 18px, transparent 18px 34px);
  -webkit-mask: linear-gradient(#000 0 0) center / 100% 8px no-repeat;
          mask: linear-gradient(#000 0 0) center / 100% 8px no-repeat;
}
.gl-interlude::before { top: 1.1rem; }
.gl-interlude::after { bottom: 1.1rem; }
.gl-interlude .container { position: relative; }
.gl-interlude .container::before {
  content: '\201C';
  position: absolute;
  top: -0.35em; left: 50%;
  transform: translateX(-50%);
  font-family: 'Fraunces', serif;
  font-size: clamp(9rem, 22vw, 17rem);
  line-height: 1;
  color: var(--gold-deep);
  opacity: 0.22;
  z-index: -1;
  pointer-events: none;
}
.gl-interlude-line::after {
  content: '';
  display: block;
  width: 3.5rem; height: 1px;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  background: var(--gold-deep);
}
.gl-close { position: relative; overflow: hidden; }
.gl-close-title { margin-block: 1.4rem clamp(2rem, 5vw, 3.4rem); max-width: 14em; }
.gl-close-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .gl-item, .gl-filter, .gl-frame img { transition: none; }
  .gl-item.is-in { animation: none; }
}