/* Behaviour shared by every variant. Looks live in each variant's style.css. */
:root { color-scheme: light; --clip-radius: 16px; --gap: clamp(12px, 1.8vw, 24px); --gutter: clamp(16px, 3.4vw, 48px); --focus: #17161a; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Smooth only after a click in the page (a menu link has focus), so a refresh or a back lands in place without gliding. */
html:focus-within { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 88px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 40; padding: 10px 16px; border-radius: 8px; background: #17161a; color: #fff; font-weight: 600; transform: translateY(-200%); }
.skip:focus { transform: none; }

.clip { position: relative; overflow: hidden; aspect-ratio: 9 / 16.5; border-radius: var(--clip-radius); background: #e6e2da; }
.clip--wide { aspect-ratio: 16 / 9; }
.clip--tall { aspect-ratio: 9 / 19.5; }
.card .clip--tall, .hero-clip .clip--tall { aspect-ratio: 9 / 16.5; }
.clip img, .clip video { width: 100%; height: 100%; object-fit: cover; }
.clip video { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms; }
.clip.is-playing video { opacity: 1; }
.clip__btn { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #17161a; font-size: .8rem; line-height: 1; }
.hero-clip { display: block; border-radius: var(--clip-radius); }

.card[hidden] { display: none; }
.filters { display: none; flex-wrap: wrap; gap: 8px; }
.js .filters { display: flex; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; font-size: .875rem; font-weight: 600; }

.gallery { display: grid; gap: var(--gap); }
.gallery--3p0l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--4p0l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery--1p2l { grid-template-columns: minmax(0, 1fr) minmax(0, 2.42fr); grid-template-rows: auto auto; }
.gallery--1p2l .clip:first-child { grid-row: span 2; aspect-ratio: auto; height: 100%; }
.gallery--2p1l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--2p1l .clip--wide { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .gallery--3p0l, .gallery--4p0l { display: flex; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .gallery--3p0l::-webkit-scrollbar, .gallery--4p0l::-webkit-scrollbar { display: none; }
  .gallery--3p0l .clip, .gallery--4p0l .clip { flex: 0 0 72vw; scroll-snap-align: start; }
  .gallery--1p2l { grid-template-columns: minmax(0, 1fr); }
  .gallery--1p2l .clip:first-child { grid-row: auto; aspect-ratio: 9 / 16.5; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html, html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}