/* ============================================================
   Gallery, 404, Privacy Policy + Terms of Service layout.
   Loads after style.css and decor.css, so it overrides the older
   .gallery-* / .lightbox rules in style.css. Everything is scoped to
   gallery-only classes or body.page-<slug>.
   ============================================================ */

/* ============================================================
   1. Gallery hero, section + album polaroids
   ============================================================ */
/* The children's white T-shirts sit right behind the title: a touch more navy keeps the
   white text above 4.5:1 even over the brightest patches (measured at 375-1440). */
.gallery-hero .page-hero__overlay {
    background: linear-gradient(rgba(10, 26, 48, .16), rgba(10, 26, 48, .16)), var(--overlay-warm-navy);
}
@media (max-width: 1023px) {
    .gallery-hero .page-hero__overlay {
        background: linear-gradient(rgba(10, 26, 48, .26), rgba(10, 26, 48, .26)), var(--overlay-warm-navy);
    }
}
/* Tablets: the shorter hero gets a little extra room so the album polaroids never crowd the subtitle */
@media (min-width: 600px) and (max-width: 1023px) {
    .page-hero.gallery-hero { padding-bottom: calc(var(--hero-gap) + var(--hero-wave-h) + 32px); }
}

.gallery-section {
    --gal-overlap: clamp(64px, 8.5vw, 124px);
    display: flow-root;                 /* the albums' negative margin must not drag the section up */
    padding-top: var(--space-sm);
    padding-bottom: calc(var(--space-4xl) + var(--footer-wave-h, 72px));
}

/* Four taped polaroids that straddle the hero's wave (the page's one loud edge) */
.gallery-albums.photo-mosaic,
.gallery-albums.photo-mosaic:has(> :nth-child(4):last-child) {
    --cols: 4;
    --gap: clamp(18px, 3vw, 40px);
    position: relative;
    z-index: 3;
    max-width: 1000px;
    margin: calc(-1 * var(--gal-overlap)) auto clamp(2.5rem, 5vw, 4rem);
    padding: 0 6px;
}
.gallery-album {
    color: var(--color-brown);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.gallery-album:hover,
.gallery-album:focus-visible {
    color: var(--color-brown);
}
.gallery-album .polaroid__caption {
    padding-top: .35em;
}
.gallery-album__name {
    display: inline-block;
    padding: 0 .15em;
    background: no-repeat center bottom / 100% .32em;
}
/* The album that is showing gets the hand-drawn marker stroke */
.gallery-album[aria-current="true"] .gallery-album__name {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5c26-3.2 52-5.6 79-5.3 22 .2 41 2.4 63 2.1 30-.4 58-3.4 92-2.8' fill='none' stroke='%23FFAF1C' stroke-width='6.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.gallery-album__count {
    display: block;
    margin-top: .25rem;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .03em;
    color: var(--color-text-light);
}
@media (max-width: 599px) {
    /* Phones go straight to the filter chips: shorter page, same albums */
    .gallery-albums.photo-mosaic { display: none; }
    .gallery-section { padding-top: var(--space-2xl); }
}

/* Heading + subtitle */
.gallery-intro { text-align: center; }
.gallery-intro .section-subtitle {
    margin-bottom: var(--space-xl);
    text-wrap: pretty;
}

/* ============================================================
   2. Filter chips (pills, aria-pressed)
   ============================================================ */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0 auto var(--space-xl);
}
.gallery-filter {
    --chip-dot: var(--color-ocean);
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-height: 44px;
    padding: .5rem 1.2rem;
    border: 2px solid #E2D4C0;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-white);
    box-shadow: 0 1px 2px rgba(98, 42, 20, .08);
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-brown);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, translate .2s var(--ease-soft), box-shadow .2s ease;
}
.gallery-filter::before {
    content: '';
    flex: none;
    width: .62em;
    height: .62em;
    border-radius: 50%;
    background: var(--chip-dot);
}
.gallery-filter[data-filter="all"]::before { display: none; }
.gallery-filter--sky { --chip-dot: #5A9AD4; }
.gallery-filter--sea { --chip-dot: #3FA37E; }
.gallery-filter--coral { --chip-dot: #F0745B; }
.gallery-filter--sun { --chip-dot: var(--color-marigold); }
.gallery-filter:hover {
    background: var(--color-white);
    border-color: var(--color-ocean);
    color: var(--color-ocean-dark);
    translate: 0 -2px;
    box-shadow: 0 8px 16px -10px rgba(31, 78, 128, .55);
}
.gallery-filter.is-active,
.gallery-filter[aria-pressed="true"] {
    background: var(--color-ocean-dark);
    border-color: var(--color-ocean-dark);
    color: var(--color-white);
    box-shadow: 0 6px 14px -8px rgba(31, 78, 128, .8);
}
.gallery-filter.is-active:hover,
.gallery-filter[aria-pressed="true"]:hover {
    background: var(--color-ocean-dark);
    border-color: var(--color-ocean-dark);
    color: var(--color-white);
}
.gallery-filter.is-active::before,
.gallery-filter[aria-pressed="true"]::before {
    background: var(--color-white);
}
@media (max-width: 599px) {
    /* Two tidy rows on phones instead of three */
    .gallery-filters { gap: .5rem .4rem; margin-bottom: var(--space-lg); }
    .gallery-filter { padding: .45rem .85rem; font-size: .88rem; gap: .4em; }
    .gallery-filter__more { display: none; }
}

/* ============================================================
   3. Photo grid: fixed 4:3 rows from the container width, so the
      2x2 feature and the wide tiles always line up (gallery.js
      picks them so every row is full).
   ============================================================ */
.gallery-wrap { container-type: inline-size; }
.gallery-grid {
    --cols: 2;
    --gap: 10px;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-rows: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) * .75);
    gap: var(--gap);
}
@media (min-width: 640px) {
    .gallery-grid { --cols: 3; --gap: 14px; }
}
@media (min-width: 1024px) {
    .gallery-grid { --cols: 4; --gap: 18px; }
}

.gallery-item {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    aspect-ratio: auto;
    border-radius: clamp(10px, 1.1vw, 16px);
    background: var(--color-sand);
    box-shadow: 0 1px 2px rgba(98, 42, 20, .1), 0 10px 22px -14px rgba(98, 42, 20, .45);
    cursor: zoom-in;
    transform: none;
    transition: box-shadow .3s var(--ease-soft);
    -webkit-tap-highlight-color: transparent;
}
.gallery-item:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(98, 42, 20, .12), 0 18px 30px -16px rgba(98, 42, 20, .55);
}
.gallery-item[hidden] { display: none !important; }
.gallery-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, center 45%);
    transition: scale .6s var(--ease-soft);
}
/* Ocean wash from the bottom + a small "enlarge" badge on hover/focus */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(22, 50, 86, .5) 0%, rgba(22, 50, 86, 0) 55%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.gallery-item::before {
    content: '';
    position: absolute;
    right: clamp(8px, 1vw, 12px);
    bottom: clamp(8px, 1vw, 12px);
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D5A8A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 4.4c3.6-.2 6.4 2.6 6.3 6.1-.1 3.4-2.9 6.1-6.3 6.1-3.5 0-6.2-2.8-6.1-6.2.1-3.3 2.7-5.9 6.1-6z'/%3E%3Cpath d='M15.4 15.6l4.4 4.2M10.6 8v5.2M8 10.6h5.2'/%3E%3C/svg%3E") center / 20px no-repeat;
    box-shadow: 0 4px 10px -4px rgba(10, 26, 48, .5);
    opacity: 0;
    translate: 0 6px;
    transition: opacity .25s ease, translate .3s var(--ease-soft);
    pointer-events: none;
}
.gallery-item:hover img,
.gallery-item:focus-visible img { scale: 1.06; }
.gallery-item:hover::after,
.gallery-item:focus-visible::after { opacity: 1; }
.gallery-item:hover::before,
.gallery-item:focus-visible::before { opacity: 1; translate: 0 0; }

.gallery-item--feature,
.gallery-item.is-feature {
    grid-column: span 2;
    grid-row: span 2;
}
.gallery-item.is-wide { grid-column: span 2; }

/* Older browsers without container units: plain 4:3 tiles */
@supports not (width: 1cqi) {
    .gallery-grid { grid-auto-rows: auto; }
    .gallery-item { aspect-ratio: 4 / 3; }
    .gallery-item--feature, .gallery-item.is-feature, .gallery-item.is-wide { aspect-ratio: auto; }
}

/* Re-filtering fades the tiles in, a few ms apart */
@keyframes gallery-in {
    from { opacity: 0; translate: 0 10px; }
}
html.js .gallery-grid[data-reveal-stagger].is-filtering > .gallery-item {
    animation: gallery-in .45s var(--ease-soft) var(--gi-delay, 0ms) backwards;
}

/* ============================================================
   4. Brightwheel note (same wording as before, now a taped card)
   ============================================================ */
.gallery-note {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    max-width: 660px;
    margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem);
    background: var(--color-white);
    border: 2px solid var(--tint-lilac, #E9DEFA);
    border-radius: 22px;
    box-shadow: var(--paper-shadow, 0 14px 28px -10px rgba(98, 42, 20, .32));
}
.gallery-note::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 104px;
    height: 22px;
    translate: -50% 0;
    rotate: -3deg;
    background-color: #C8B5F0;
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 5px, rgba(255, 255, 255, 0) 5px 11px);
    opacity: .85;
    clip-path: polygon(0 10%, 4% 0, 96% 4%, 100% 16%, 97% 36%, 100% 56%, 96% 78%, 100% 100%, 3% 96%, 0 80%, 4% 60%, 0 40%, 3% 22%);
    pointer-events: none;
}
.gallery-note__icon {
    flex: none;
    width: 64px;
    height: 64px;
}
.gallery-note p {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--color-text);
    text-wrap: pretty;
}
.gallery-note__title {
    display: block;
    margin-bottom: .1rem;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.45rem + 1vw, 2.15rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--color-brown);
}
.gallery-note__doodle {
    position: absolute;
    top: -20px;
    right: -14px;
}
@media (max-width: 479px) {
    .gallery-note {
        flex-direction: column;
        text-align: center;
        padding-top: 1.75rem;
    }
    .gallery-note__doodle { right: 6px; }
}

/* ============================================================
   5. Photo viewer (built by gallery.js)
   ============================================================ */
html.lightbox-open { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-white);
    background:
        radial-gradient(ellipse 75% 65% at 50% 42%, rgba(62, 121, 181, .42) 0%, rgba(62, 121, 181, 0) 72%),
        linear-gradient(180deg, #0E2340 0%, #143255 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.lightbox[hidden] { display: none !important; }
.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease;
}
/* Faint hand-drawn stars, hearts and waves on the navy backdrop */
.lightbox::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--band-doodle);
    background-size: 240px;
    opacity: .45;
    pointer-events: none;
}
.lightbox__stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 96px 28px;
    touch-action: pinch-zoom;
}
.lightbox__figure {
    --ar: 1.5;
    --max-w: min(100vw - 192px, 1400px);
    --max-h: calc(100vh - 190px);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(var(--max-w), var(--max-h) * var(--ar));
    margin: 0;
    transition: opacity .2s ease, translate .28s var(--ease-soft);
}
@supports (height: 100dvh) {
    .lightbox__figure { --max-h: calc(100dvh - 190px); }
}
.lightbox__figure.is-swapping {
    opacity: 0;
    translate: var(--swap-x, 0px) 0;
}
.lightbox__figure.is-instant,
.lightbox__figure.is-dragging { transition: none; }
.lightbox__img {
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    aspect-ratio: var(--ar);
    object-fit: cover;
    border: clamp(4px, .7vw, 9px) solid var(--color-white);
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .65);
    scale: .97;
    transition: scale .3s var(--ease-soft);
    -webkit-user-drag: none;
    user-select: none;
}
.lightbox.is-open .lightbox__img { scale: 1; }
.lightbox__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .35rem .85rem;
    max-width: 62ch;
    margin-top: .9rem;
    font-size: .98rem;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 255, 255, .94);
    text-wrap: balance;
}
.lightbox__count {
    flex: none;
    padding: .15rem .7rem;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, .16);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--color-white);
}
.lightbox__btn {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--color-white);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .15s ease;
}
.lightbox__btn svg { width: 26px; height: 26px; }
.lightbox__btn:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-ocean-dark);
}
.lightbox__btn:active { scale: .93; }
.lightbox__btn:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 3px;
    box-shadow: 0 0 0 8px rgba(255, 209, 102, .55);
}
.lightbox__btn[hidden] { display: none; }
.lightbox__close {
    top: clamp(12px, 2vw, 24px);
    right: clamp(12px, 2vw, 24px);
    width: 48px;
    height: 48px;
}
.lightbox__prev,
.lightbox__next {
    top: 50%;
    translate: 0 -50%;
}
.lightbox__prev { left: clamp(14px, 2.4vw, 32px); }
.lightbox__next { right: clamp(14px, 2.4vw, 32px); }

@media (max-width: 767px) {
    .lightbox__stage { padding: 68px 8px 100px; }
    .lightbox__figure {
        --max-w: calc(100vw - 16px);
        --max-h: calc(100vh - 260px);
    }
    @supports (height: 100dvh) {
        .lightbox__figure { --max-h: calc(100dvh - 260px); }
    }
    .lightbox__img { border-width: 4px; }
    .lightbox__caption { font-size: .92rem; padding: 0 .5rem; }
    .lightbox__prev,
    .lightbox__next {
        top: auto;
        bottom: max(22px, env(safe-area-inset-bottom));
        translate: none;
    }
    .lightbox__prev { left: calc(50% - 70px); }
    .lightbox__next { right: calc(50% - 70px); }
}

/* ============================================================
   6. 404
   ============================================================ */
.nf {
    padding-bottom: calc(var(--space-4xl) + var(--footer-wave-h, 72px));
    text-align: center;
}
.nf__art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.25rem, 1vw, .75rem);
    margin: 0 auto var(--space-lg);
    font-family: var(--font-display);
    font-size: clamp(6rem, 4rem + 9vw, 10.5rem);
    font-weight: 700;
    line-height: .9;
    color: var(--color-ocean);
}
.nf__art .doodle {
    width: .86em;
    translate: 0 .04em;
}
.nf__title {
    margin-bottom: var(--space-sm);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1.9rem + 2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .02em;
    color: var(--color-brown);
}
.nf__lead {
    max-width: 34rem;
    margin: 0 auto var(--space-2xl);
    font-size: var(--fs-lg);
    color: var(--color-text-light);
    text-wrap: balance;
}
.nf-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(.85rem, 2vw, 1.5rem);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.nf-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    height: 100%;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) 1rem;
    border: 2px solid #EFE4D3;
    border-radius: 22px;
    background: var(--color-white);
    box-shadow: 0 1px 2px rgba(98, 42, 20, .08), 0 10px 22px -16px rgba(98, 42, 20, .4);
    color: var(--color-text);
    text-decoration: none;
}
.nf-link:hover { color: var(--color-text); border-color: var(--color-ocean); }
.nf-link .icon { margin-bottom: .35rem; }
.nf-link__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-brown);
}
.nf-link:hover .nf-link__title { color: var(--color-ocean-dark); }
.nf-link__text {
    font-size: .95rem;
    line-height: 1.45;
    color: var(--color-text-light);
}
.nf__call {
    margin-top: var(--space-2xl);
    color: var(--color-text-light);
}
.nf__call a {
    font-weight: 700;
    color: var(--color-ocean-dark);
    text-decoration: underline;
    text-decoration-color: rgba(62, 121, 181, .45);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
@media (max-width: 899px) {
    .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 379px) {
    .nf-link { padding-inline: .6rem; }
    .nf-link__text { font-size: .88rem; }
}

/* ============================================================
   7. Privacy Policy + Terms of Service: a paper sheet on sand.
      Layout only: the text itself lives untouched in the page files.
   ============================================================ */
.legal {
    --legal-overlap: clamp(48px, 6vw, 88px);
    display: flow-root;
    padding-top: 0;
    padding-bottom: calc(var(--space-4xl) + var(--footer-wave-h, 72px));
}
.legal-doc.prose {
    position: relative;
    z-index: 3;
    max-width: 780px;
    margin: calc(-1 * var(--legal-overlap)) auto 0;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5.5vw, 4rem) clamp(2rem, 5vw, 3.25rem);
    background: var(--color-white);
    border-radius: 20px;
    box-shadow: var(--paper-shadow, 0 14px 28px -10px rgba(98, 42, 20, .32));
    font-size: clamp(1.02rem, .98rem + .2vw, 1.1rem);
    line-height: 1.75;
}
/* washi tape across the top edge */
.legal-doc.prose::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 120px;
    height: 24px;
    translate: -50% 0;
    rotate: -2.5deg;
    background-color: #8FC1EE;
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 5px, rgba(255, 255, 255, 0) 5px 11px);
    opacity: .8;
    clip-path: polygon(0 10%, 4% 0, 96% 4%, 100% 16%, 97% 36%, 100% 56%, 96% 78%, 100% 100%, 3% 96%, 0 80%, 4% 60%, 0 40%, 3% 22%);
    pointer-events: none;
}
.legal-doc .legal-doc__date {
    display: inline-block;
    margin-bottom: var(--space-lg);
    padding: .3rem 1rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--tint-sky, #DCEBFA);
    font-size: .92rem;
    color: #1F4E80;
}
.legal-doc .legal-doc__date strong { color: inherit; }
.legal-doc.prose h2 {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 2px dashed #EADFCC;
    font-size: clamp(2.1rem, 1.8rem + 1.2vw, 2.6rem);
    line-height: 1.1;
    color: var(--color-brown);
}
.legal-doc.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--space-md); }
.legal-doc.prose p + h2 { margin-top: var(--space-xl); }
.legal-doc.prose ul {
    padding-left: 1.35rem;
    margin-bottom: var(--space-md);
}
.legal-doc.prose li {
    margin-bottom: .55rem;
    padding-left: .2rem;
}
.legal-doc.prose li::marker {
    color: var(--color-ocean);
    font-size: 1.15em;
}
.legal-doc.prose strong { color: var(--color-brown); }
.legal-doc.prose em { font-style: italic; }
@media (max-width: 599px) {
    /* phones: the hero is short, so the sheet only just tucks under the wave */
    .legal { --legal-overlap: 22px; }
    .legal-doc.prose { border-radius: 16px; padding-inline: 1.1rem; }
    .legal-doc.prose h2 { margin-top: var(--space-lg); }
}

/* ============================================================
   8. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .gallery-item img,
    .gallery-item::before,
    .gallery-item::after,
    .gallery-filter,
    .lightbox,
    .lightbox__figure,
    .lightbox__img,
    .lightbox__btn { transition: none; }
    .gallery-item:hover img,
    .gallery-item:focus-visible img { scale: none; }
    .gallery-filter:hover { translate: none; }
    html.js .gallery-grid[data-reveal-stagger].is-filtering > .gallery-item { animation: none; }
    .lightbox__img { scale: none; }
}