/* ── Office Code Pro @font-face ── */

@font-face {
  font-family: 'Office Code Pro';
  src: url('../fonts/officecodepro-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro';
  src: url('../fonts/officecodepro-lightitalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro';
  src: url('../fonts/officecodepro-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro';
  src: url('../fonts/officecodepro-regularitalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro';
  src: url('../fonts/officecodepro-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro';
  src: url('../fonts/officecodepro-mediumitalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro';
  src: url('../fonts/officecodepro-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro';
  src: url('../fonts/officecodepro-bolditalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ── Office Code Pro D @font-face ── */

@font-face {
  font-family: 'Office Code Pro D';
  src: url('../fonts/officecodeprod-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro D';
  src: url('../fonts/officecodeprod-lightitalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro D';
  src: url('../fonts/officecodeprod-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro D';
  src: url('../fonts/OfficeCodeProD-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro D';
  src: url('../fonts/OfficeCodeProD-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Office Code Pro D';
  src: url('../fonts/OfficeCodeProD-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Typography */
  --font-family-base: 'Office Code Pro', monospace;

  /* Colors */
  --color-accent: #ff3118;
  --color-white: #ffffff;
  --color-neutral-50: #fbfbfb;
  --color-neutral-100: #eae8e9;
  --color-neutral-300: #bebebe;
  --color-neutral-900: #1a1a1a;
  --color-black: #000000;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.is-site-transition-locked,
body.is-site-transition-locked {
  overflow: hidden;
}

input,
button,
textarea,
select {
  font: inherit;
}

.site-transition {
  position: fixed;
  inset: 0;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--color-white);
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 180ms;
}

html.site-transition-boot .site-transition,
.site-transition.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.site-transition__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.site-nav {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  width: auto;
  z-index: 60;
  background: var(--color-white);
  border-radius: 12px;
  transition: background-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav.is-open {
  background: #111111;
}

.site-nav__bar {
  position: relative;
  z-index: 62;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
}

.site-nav__title {
  color: var(--color-black);
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  transition: color 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav.is-open .site-nav__title {
  color: var(--color-white);
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.site-nav__logo {
  display: block;
  max-width: 220px;
  width: auto;
  height: 44px;
  object-fit: contain;
  transform-origin: center;
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.site-nav__toggle:hover .site-nav__logo,
.site-nav__toggle:focus-visible .site-nav__logo {
  animation: logo-spin 680ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

.site-nav__brand-text {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.site-menu {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  background: transparent;
  color: var(--color-white);
  z-index: 61;
  padding: 0 2rem;
  border-radius: 0;
  transform: none;
  transition: max-height 500ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 500ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-menu.is-visible {
  visibility: visible;
}

.site-nav.is-open .site-menu {
  max-height: calc(100vh - 6rem);
  padding: 1rem 2rem 2.5rem;
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
}

.site-menu__inner {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  align-content: end;
  align-items: end;
  justify-items: start;
  transform: none;
  transition: none;
}

.site-menu__col {
  align-self: end;
}

.site-menu__label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.site-menu__title {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}


.site-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.site-menu__col--collections {
  min-width: 0;
}

.site-menu__list--collections {
  max-height: 11.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior: contain;
  padding-right: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.site-menu__list--collections::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.site-menu__list--collections .site-menu__link {
  display: block;
  width: 100%;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.site-menu__link {
  position: relative;
  display: inline-block;
  padding-left: 0;
  color: var(--color-white);
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  transition: padding-left 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-menu__link::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-menu__link:hover,
.site-menu__link:focus-visible {
  padding-left: 0.85rem;
}

.site-menu__link:hover::before,
.site-menu__link:focus-visible::before {
  opacity: 1;
}

@media (max-width: 800px) {
  .site-nav__bar {
    padding: 0.875rem 1rem;
  }

  .site-nav__logo {
    height: 34px;
    max-width: 160px;
  }

  .site-nav {
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    border-radius: 10px;
  }

  .site-menu {
    padding: 0 1rem;
  }

  .site-nav.is-open .site-menu {
    padding: 1rem 1rem 1.5rem;
  }

  .site-menu__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-menu__list--collections {
    max-height: 9rem;
  }
}

.site-footer {
  margin: 3rem 0.75rem 0.75rem;
  padding: 1.75rem 2rem 2.25rem;
  border-radius: 12px;
  background: var(--color-neutral-50);
  color: var(--color-black);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.2fr) minmax(0, 1.8fr);
  gap: 2.25rem 3rem;
  align-items: start;
}

.site-footer__block {
  min-width: 0;
}

.site-footer__label {
  margin: 0 0 0.7rem;
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6d6d6d;
}

.site-footer__label--socials {
  margin-bottom: 0.55rem;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list--collections {
  max-height: 12rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.site-footer__list--collections::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.site-footer__copy {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  font-weight: 400;
  color: var(--color-black);
}

.site-footer .site-menu__link {
  color: var(--color-black);
}

.site-footer__block--tagline .site-footer__copy {
  max-width: 42ch;
}

.site-footer__block--about .site-footer__copy {
  max-width: 58ch;
}

.site-footer__socials {
  margin-top: 1.4rem;
}

@media (max-width: 1100px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .site-footer__block--tagline,
  .site-footer__block--about {
    grid-column: 1 / -1;
  }

  .site-footer__block--tagline .site-footer__copy,
  .site-footer__block--about .site-footer__copy {
    max-width: 68ch;
  }
}

@media (max-width: 800px) {
  .site-footer {
    margin: 2rem 0.5rem 0.5rem;
    padding: 1.25rem 1rem 1.5rem;
    border-radius: 10px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .site-footer__copy,
  .site-footer__block--tagline .site-footer__copy,
  .site-footer__block--about .site-footer__copy {
    max-width: none;
  }

.site-footer__list--collections {
    max-height: 9rem;
  }
}

.home-page {
  --home-card-radius: 0.95rem;
  --home-card-surface: var(--color-neutral-50);
  --home-card-stroke: var(--color-neutral-100);
  --home-card-text-muted: #6d6d6d;
  width: 100%;
  padding: calc(46vh + 1rem) 0 0;
  color: var(--color-black);
  background: var(--color-white);
}

.home-page__intro,
.home-strip {
  width: 100%;
  padding: 0 1.5rem;
}

.home-page__intro {
  margin: 0 0 2rem;
}

.home-page__intro-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 1.05fr) minmax(0, 2.35fr);
  gap: 1.2rem 1.35rem;
  align-items: start;
}

.home-page__description-block {
  grid-column: auto;
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding: 1.1rem 1.3rem;
  background-image:
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black));
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
}

.home-page__system {
  grid-column: auto;
  display: grid;
  gap: 0.72rem;
  min-width: 0;
  padding: 1.1rem 1.3rem;
  background-image:
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black));
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
}

.home-page__system-head {
  min-width: 0;
}

.home-page__system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem 1.1rem;
}

.home-page__system-group {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.46rem;
}

.home-page__system-group-title {
  margin: 0;
  font-size: 0.54rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--home-card-text-muted);
}

.home-page__system-group-signals {
  display: grid;
  gap: 0;
}

.home-signal {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
  padding: 0.48rem 0 0.54rem;
  border-top: 1px solid var(--color-neutral-100);
}

.home-signal__label {
  margin: 0;
  font-size: 0.54rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--home-card-text-muted);
}

.home-signal__value {
  margin: 0;
  min-width: 0;
  font-size: 0.62rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
  overflow-wrap: anywhere;
}

.home-signal__value::before,
.home-signal__value::after {
  color: var(--home-card-text-muted);
}

.home-signal__value::before {
  content: '[';
  margin-right: 0.12rem;
}

.home-signal__value::after {
  content: ']';
  margin-left: 0.12rem;
}

.js .home-page[data-page-reveal-state='pending'] .home-page__description-block,
.js .home-page[data-page-reveal-state='pending'] .home-page__system,
.js .home-page[data-page-reveal-state='pending'] .home-strip__head,
.js .home-page[data-page-reveal-state='pending'] .home-card,
.js .home-page[data-page-reveal-state='pending'] .home-newsletter-row,
.js .home-page[data-page-reveal-state='pending'] .home-signal {
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.js .home-page[data-page-reveal-state='pending'] .home-page__description-block,
.js .home-page[data-page-reveal-state='pending'] .home-page__system,
.js .home-page[data-page-reveal-state='pending'] .home-strip__head {
  clip-path: inset(0 100% 0 0);
  transform: translateX(1rem);
}

.js .home-page[data-page-reveal-state='pending'] .home-card {
  transform: translateX(1rem);
}

.js .home-page[data-page-reveal-state='pending'] .home-newsletter-row {
  transform: translateY(0.8rem);
}

.js .home-page[data-page-reveal-state='pending'] .home-signal {
  transform: translateY(0.8rem);
}

.js .home-page[data-page-reveal-state='pending'] .home-card__media {
  clip-path: inset(0 0 0 100% round var(--home-card-radius));
  will-change: clip-path;
  backface-visibility: hidden;
}

.home-page[data-page-reveal-state='ready'] .home-page__description-block {
  animation: homeContentWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.home-page[data-page-reveal-state='ready'] .home-page__system {
  animation: homeContentWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
}

.home-page[data-page-reveal-state='ready'] .home-strip__head {
  animation: homeContentWidthIn 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(280ms + (var(--home-strip-index, 0) * 180ms));
}

.home-page[data-page-reveal-state='ready'] .home-signal {
  animation: homeSignalRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(340ms + (var(--home-signal-index, 0) * 42ms));
}

.home-page__eyebrow {
  margin: 0 0 0.68rem;
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-card-text-muted);
}

.home-page__description {
  margin: 0;
  max-width: none;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--color-black);
}

.home-strip {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 2.35rem;
}

.home-strip--newsletter {
  --newsletter-card-radius: 0.95rem;
  --newsletter-card-surface: var(--color-neutral-50);
  --newsletter-card-text-muted: #6d6d6d;
  margin-bottom: 2.8rem;
}

.home-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-strip__title {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

.home-strip__rail {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.home-strip__rail::-webkit-scrollbar {
  display: none;
}

.home-card {
  flex: 0 0 auto;
  min-width: 0;
  width: min(19rem, 72vw);
  display: grid;
  gap: 0.52rem;
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}

.home-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--home-card-aspect, 0.8);
  max-height: 25rem;
  overflow: hidden;
  border-radius: var(--home-card-radius);
  background: var(--home-card-surface);
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.75rem;
  background: var(--home-card-surface);
}

.home-card__placeholder-square,
.home-card__swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--color-black);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-card__placeholder-square--accent,
.home-card--filter .home-card__swatch {
  background: var(--home-card-accent, #111111);
}

.home-card__meta {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.home-card__title-row {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.home-card__title {
  display: block;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

.home-card__detail {
  display: block;
  min-width: 0;
  font-size: 0.56rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--home-card-text-muted);
}

.home-card:hover .home-card__image,
.home-card:focus-visible .home-card__image {
  transform: translate3d(0, -0.22rem, 0);
  filter: contrast(1.03) saturate(1.01);
}

.home-card:hover .home-card__meta,
.home-card:focus-visible .home-card__meta {
  transform: translateX(0.22rem);
}

.home-card:hover .home-card__swatch,
.home-card:hover .home-card__placeholder-square,
.home-card:focus-visible .home-card__swatch,
.home-card:focus-visible .home-card__placeholder-square {
  transform: scaleX(1.75);
}

.home-page[data-page-reveal-state='ready'] .home-card {
  animation: homeCardSlideIn 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(360ms + (var(--home-strip-index, 0) * 180ms) + (var(--home-card-index, 0) * 60ms));
}

.home-page[data-page-reveal-state='ready'] .home-card__media {
  animation: homeCardMediaReveal 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(360ms + (var(--home-strip-index, 0) * 180ms) + (var(--home-card-index, 0) * 60ms));
}

.home-page[data-page-reveal-state='ready'] .home-newsletter-row {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(540ms + (var(--home-newsletter-index, 0) * 70ms));
}

@keyframes homeContentWidthIn {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

@keyframes homeCardSlideIn {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes homeCardMediaReveal {
  from {
    clip-path: inset(0 0 0 100% round var(--home-card-radius));
  }

  to {
    clip-path: inset(0 0 0 0 round var(--home-card-radius));
  }
}

@keyframes homeSignalRiseIn {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .home-page {
    padding: calc(40vh + 1rem) 0 0;
  }

  .home-page__intro,
  .home-strip {
    padding: 0 1rem;
  }

  .home-page__intro {
    margin-bottom: 1.75rem;
  }

  .home-page__intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .home-page__system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.9rem;
  }

  .home-strip {
    gap: 0.75rem;
    margin-bottom: 2rem;
  }

  .home-card {
    width: min(14rem, 68vw);
  }
}

@media (max-width: 560px) {
  .home-page__system-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page__description-block,
  .home-page__system,
  .home-strip__head,
  .home-card,
  .home-newsletter-row,
  .home-signal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .home-card__media {
    animation: none;
    clip-path: inset(0 0 0 0 round var(--home-card-radius));
  }

  .home-card__media,
  .home-card__image,
  .home-card__meta,
  .home-card__swatch,
  .home-card__placeholder-square {
    transition: none;
  }
}

.filters-page {
  width: 100%;
  color: var(--color-black);
  background: #F6F5F3;
  padding-bottom: 4rem;
}


.info-page {
  width: 100%;
  padding: calc(50vh + 1rem) 0 3rem;
  color: var(--color-black);
  background: var(--color-white);
}

.info-layout {
  width: 100%;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 3rem;
  align-items: start;
}

.info-layout__left {
  min-width: 0;
  max-width: 72ch;
}

.info-layout__right {
  min-width: 0;
}

.info-hero {
  width: 100%;
  max-width: none;
  margin: 0 0 4.5rem;
  padding: 0;
}

.js .info-page[data-page-reveal-state='pending'] .info-hero__title,
.js .info-page[data-page-reveal-state='pending'] .info-hero__description,
.js .info-page[data-page-reveal-state='pending'] .info-content__body,
.js .info-page[data-page-reveal-state='pending'] .info-block {
  opacity: 0;
  will-change: transform, opacity, clip-path;
  backface-visibility: hidden;
}

.js .info-page[data-page-reveal-state='pending'] .info-hero__title,
.js .info-page[data-page-reveal-state='pending'] .info-hero__description,
.js .info-page[data-page-reveal-state='pending'] .info-content__body {
  clip-path: inset(0 100% 0 0);
  transform: translateX(1rem);
}

.js .info-page[data-page-reveal-state='pending'] .info-block {
  transform: translateY(0.8rem);
}

.info-page[data-page-reveal-state='ready'] .info-hero__title {
  animation: infoContentWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.info-page[data-page-reveal-state='ready'] .info-hero__description {
  animation: infoContentWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 280ms both;
}

.info-page[data-page-reveal-state='ready'] .info-content__body {
  animation: infoContentWidthIn 640ms cubic-bezier(0.22, 1, 0.36, 1) 380ms both;
}

.info-hero__title {
  margin: 0 0 2.25rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: 0;
  font-weight: 400;
  text-transform: uppercase;
}

.info-hero__description {
  margin: 0;
  max-width: 70ch;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
}

.info-content {
  width: 100%;
  margin: 0 0 2.75rem;
}

.info-content__body {
  max-width: 70ch;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
}

.info-content__body > * {
  margin-top: 0;
}

.info-content__body > * + * {
  margin-top: 0.75rem;
}

.info-content__body a {
  color: var(--color-black);
}

.info-grid {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  row-gap: 1.5rem;
}

.info-block {
  position: relative;
  min-height: 0;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  
  /* Corner Pins */
  background-image: 
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black));
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position: 
    top left,
    top right,
    bottom left,
    bottom right;
}

.info-page[data-page-reveal-state='ready'] .info-block {
  animation: infoBlockIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(300ms + (var(--info-block-index, 0) * 90ms));
}

.info-block__title {
  margin: 0 0 0.7rem;
  font-size: 0.65rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-300);
}

.info-list {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  display: grid;
  gap: 0.28rem;
}

.info-list__item {
  margin: 0;
  padding: 0;
}

.info-list__link,
.info-list__text {
  color: var(--color-black);
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-decoration: none;
  font-weight: 400;
  text-transform: uppercase;
}

.info-list__link {
  position: relative;
  display: inline-block;
  padding-left: 0;
  transition: padding-left 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.info-list__link::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.info-list__link:hover,
.info-list__link:focus-visible {
  padding-left: 0.85rem;
}

.info-list__link:hover::before,
.info-list__link:focus-visible::before {
  opacity: 1;
}

@keyframes infoContentWidthIn {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

@keyframes infoBlockIn {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .info-page {
    padding: calc(40vh + 1rem) 0 2rem;
  }

  .info-layout {
    padding: 0 1rem;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    column-gap: 0;
  }

  .info-grid {
    row-gap: 2rem;
  }

  .info-block {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .info-hero__title,
  .info-hero__description,
  .info-content__body,
  .info-block {
    animation: none;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

.newsletter-page,
.newsletter-detail-page {
  --newsletter-card-radius: 0.95rem;
  --newsletter-card-surface: var(--color-neutral-50);
  --newsletter-card-text-muted: #6d6d6d;
  width: 100%;
  padding: calc(50vh + 1rem) 0 3rem;
  color: var(--color-black);
  background: var(--color-white);
}

.newsletter-archive,
.newsletter-detail__hero {
  width: 100%;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.78fr);
  column-gap: 3rem;
  align-items: start;
}

.newsletter-archive {
  margin: 0 0 2.75rem;
}

.newsletter-archive__main,
.newsletter-detail__main {
  min-width: 0;
  max-width: 72ch;
}

.newsletter-archive__aside,
.newsletter-detail__aside {
  min-width: 0;
  display: grid;
  gap: 1.5rem;
}

.newsletter-archive__hero,
.newsletter-detail__hero {
  margin: 0 0 2.5rem;
}

.newsletter-archive__title,
.newsletter-detail__title {
  margin: 0 0 2rem;
  font-size: clamp(1rem, 1.55vw, 1.28rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.newsletter-archive__description,
.newsletter-detail__description {
  margin: 0;
  max-width: 70ch;
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-black);
}

.newsletter-archive__body {
  width: 100%;
}

.newsletter-richtext {
  max-width: 70ch;
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-black);
}

.newsletter-richtext > * {
  margin-top: 0;
}

.newsletter-richtext > * + * {
  margin-top: 0.75rem;
}

.newsletter-richtext h1,
.newsletter-richtext h2,
.newsletter-richtext h3,
.newsletter-richtext h4 {
  margin-bottom: 0.7rem;
  font-size: 0.72rem;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.newsletter-richtext ul,
.newsletter-richtext ol {
  padding-left: 1rem;
}

.newsletter-richtext li + li {
  margin-top: 0.3rem;
}

.newsletter-richtext blockquote {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 1px solid var(--color-neutral-100);
}

.newsletter-richtext code {
  font-family: inherit;
  font-size: 0.72rem;
  background: var(--color-neutral-50);
  padding: 0.05rem 0.22rem;
  border-radius: 0.2rem;
}

.newsletter-richtext a {
  color: var(--color-black);
}

.newsletter-archive__stats-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.newsletter-archive__stats-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.newsletter-archive__stats-label,
.newsletter-archive__stats-value {
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 400;
  text-transform: uppercase;
}

.newsletter-archive__stats-label {
  color: var(--newsletter-card-text-muted);
}

.newsletter-archive__stats-value {
  color: var(--color-black);
  text-align: right;
}

.newsletter-archive__listing {
  width: 100%;
  padding: 0 1.5rem;
}

.newsletter-archive__head,
.newsletter-roadmap__head,
.newsletter-references__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
}

.newsletter-archive__heading,
.newsletter-roadmap__title,
.newsletter-references__title {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

.newsletter-archive__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.newsletter-row {
  list-style: none;
}

.newsletter-row__link {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border-radius: var(--newsletter-card-radius);
  background: var(--newsletter-card-surface);
  color: inherit;
  text-decoration: none;
  transition: background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.newsletter-row__link:hover,
.newsletter-row__link:focus-visible,
.newsletter-roadmap__item:hover,
.newsletter-roadmap__item:focus-within,
.newsletter-reference:hover,
.newsletter-reference:focus-within {
  background: var(--color-white);
  transform: translateY(-0.08rem);
}

.newsletter-row__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.newsletter-row__title-row,
.newsletter-roadmap__phase-row,
.newsletter-reference__title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.newsletter-row__square,
.newsletter-detail__meta-square,
.newsletter-roadmap__square,
.newsletter-reference__square {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--color-black);
}

.newsletter-row__title,
.newsletter-roadmap__phase,
.newsletter-reference__title {
  display: block;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

.newsletter-row__meta,
.newsletter-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.newsletter-row__meta {
  justify-content: flex-end;
}

.newsletter-row__meta-item,
.newsletter-detail__meta-item,
.newsletter-roadmap__status,
.newsletter-reference__link,
.newsletter-section__label {
  font-size: 0.56rem;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--newsletter-card-text-muted);
}

.newsletter-detail__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.newsletter-row__description,
.newsletter-roadmap__detail,
.newsletter-reference__note {
  display: block;
  margin: 0;
  max-width: 66ch;
  font-size: 0.75rem;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-black);
}

.newsletter-row__topics,
.newsletter-detail__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.newsletter-row__topic,
.newsletter-detail__topic {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.35rem 0.58rem;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-black);
  font-size: 0.56rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.newsletter-archive__empty {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--newsletter-card-text-muted);
}

.newsletter-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--newsletter-card-stroke);
}

.newsletter-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0.2rem 0.56rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-black);
  font-size: 0.54rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.newsletter-pagination__link:hover,
.newsletter-pagination__link:focus-visible {
  border-color: var(--newsletter-card-stroke);
}

.newsletter-pagination__link--active,
.newsletter-pagination__link--active:hover,
.newsletter-pagination__link--active:focus-visible {
  background: #111111;
  color: var(--color-white);
  border-color: #111111;
}

.newsletter-pagination__link--disabled {
  opacity: 0.42;
  pointer-events: none;
}

.newsletter-detail__meta {
  margin: 0 0 0.85rem;
}

.newsletter-detail__topics {
  margin: 0 0 1.2rem;
}

.newsletter-detail__description-block {
  max-width: 70ch;
  padding: 1.1rem 1.3rem;
  background-image:
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black));
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
}

.newsletter-detail__content {
  width: 100%;
  padding: 0 1.5rem;
  display: grid;
  gap: 2.5rem;
  margin: 0 0 3rem;
}

.newsletter-detail__content-body,
.newsletter-section {
  max-width: 72ch;
}

.newsletter-detail__sections {
  display: grid;
  gap: 1.2rem;
}

.newsletter-section,
.newsletter-roadmap__item,
.newsletter-reference {
  border-radius: var(--newsletter-card-radius);
  background: var(--newsletter-card-surface);
  transition: background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.newsletter-section {
  padding: 1rem 1.1rem 1.15rem;
}

.newsletter-section__label {
  margin: 0 0 0.5rem;
}

.newsletter-section__title {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

.newsletter-section__body {
  max-width: none;
}

.newsletter-roadmap,
.newsletter-references {
  display: grid;
  gap: 0.9rem;
}

.newsletter-roadmap__grid,
.newsletter-references__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.newsletter-roadmap__item,
.newsletter-reference {
  padding: 1rem 1.05rem;
  display: grid;
  gap: 0.75rem;
}

.newsletter-roadmap__item-top,
.newsletter-reference__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.newsletter-reference__link {
  color: var(--newsletter-card-text-muted);
  text-decoration: none;
}

.newsletter-reference__link:hover,
.newsletter-reference__link:focus-visible {
  color: var(--color-black);
}

.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__title,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__description,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__body,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__head,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__empty,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__links,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__stats,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-pagination,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-row,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__meta,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__title,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__topics,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__description-block,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__links,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__content-body,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-section,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-roadmap__head,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-roadmap__item,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-references__head,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-reference {
  opacity: 0;
  will-change: transform, opacity, clip-path;
  backface-visibility: hidden;
}

.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__title,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__description,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__body,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__head,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__empty,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__meta,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__title,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__topics,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__description-block,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__content-body,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-roadmap__head,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-references__head {
  clip-path: inset(0 100% 0 0);
  transform: translateX(1rem);
}

.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__links,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-archive__stats,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-pagination,
.js .newsletter-page[data-page-reveal-state='pending'] .newsletter-row,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-detail__links,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-section,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-roadmap__item,
.js .newsletter-detail-page[data-page-reveal-state='pending'] .newsletter-reference {
  transform: translateY(0.8rem);
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-archive__title {
  animation: newsletterWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-archive__description {
  animation: newsletterWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-archive__body {
  animation: newsletterWidthIn 640ms cubic-bezier(0.22, 1, 0.36, 1) 340ms both;
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-archive__head {
  animation: newsletterWidthIn 560ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both;
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-archive__empty {
  animation: newsletterWidthIn 560ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both;
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-archive__links {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-archive__stats {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) 390ms both;
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-pagination {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) 470ms both;
}

.newsletter-page[data-page-reveal-state='ready'] .newsletter-row {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(480ms + (var(--newsletter-row-index, 0) * 70ms));
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-detail__meta {
  animation: newsletterWidthIn 560ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-detail__title {
  animation: newsletterWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both;
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-detail__topics {
  animation: newsletterWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 330ms both;
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-detail__description-block {
  animation: newsletterWidthIn 640ms cubic-bezier(0.22, 1, 0.36, 1) 410ms both;
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-detail__links {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) 490ms both;
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-detail__content-body {
  animation: newsletterWidthIn 660ms cubic-bezier(0.22, 1, 0.36, 1) 560ms both;
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-section {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(640ms + (var(--newsletter-section-index, 0) * 80ms));
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-roadmap__head {
  animation: newsletterWidthIn 560ms cubic-bezier(0.22, 1, 0.36, 1) 700ms both;
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-roadmap__item {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(780ms + (var(--newsletter-roadmap-index, 0) * 80ms));
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-references__head {
  animation: newsletterWidthIn 560ms cubic-bezier(0.22, 1, 0.36, 1) 860ms both;
}

.newsletter-detail-page[data-page-reveal-state='ready'] .newsletter-reference {
  animation: newsletterRiseIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(940ms + (var(--newsletter-reference-index, 0) * 80ms));
}

@keyframes newsletterWidthIn {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

@keyframes newsletterRiseIn {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .newsletter-page,
  .newsletter-detail-page {
    padding: calc(40vh + 1rem) 0 2rem;
  }

  .newsletter-archive,
  .newsletter-detail__hero {
    padding: 0 1rem;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    column-gap: 0;
  }

  .newsletter-archive__listing,
  .newsletter-detail__content {
    padding: 0 1rem;
  }

  .newsletter-row__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter-row__meta {
    justify-content: flex-start;
  }

  .newsletter-roadmap__grid,
  .newsletter-references__list {
    grid-template-columns: 1fr;
  }

  .newsletter-roadmap__item-top,
  .newsletter-reference__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter-pagination {
    padding-top: 0.85rem;
    margin-top: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .newsletter-archive__title,
  .newsletter-archive__description,
  .newsletter-archive__body,
  .newsletter-archive__head,
  .newsletter-archive__empty,
  .newsletter-archive__links,
  .newsletter-archive__stats,
  .newsletter-pagination,
  .newsletter-row,
  .newsletter-detail__meta,
  .newsletter-detail__title,
  .newsletter-detail__topics,
  .newsletter-detail__description-block,
  .newsletter-detail__links,
  .newsletter-detail__content-body,
  .newsletter-section,
  .newsletter-roadmap__head,
  .newsletter-roadmap__item,
  .newsletter-references__head,
  .newsletter-reference {
    animation: none;
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

.post-detail-page {
  --post-detail-hero-radius: 1rem;
  --post-detail-gallery-radius: 0.95rem;
  width: 100%;
  padding: calc(5.15rem + 1rem) 0 0;
  color: var(--color-black);
  background: var(--color-white);
}

.post-detail__hero,
.post-detail__body,
.post-gallery {
  width: 100%;
  padding: 0 1.5rem;
}

.post-detail__hero {
  margin: 0 0 1.75rem;
}

.post-detail__hero-frame {
  position: relative;
  width: 100%;
  height: clamp(22rem, 56vw, 44rem);
  overflow: hidden;
  border-radius: var(--post-detail-hero-radius);
  background: var(--color-neutral-50);
}

.js .post-detail-page[data-page-reveal-state='pending'] .post-detail__hero-frame,
.js .post-detail-page[data-page-reveal-state='pending'] .post-detail__summary,
.js .post-detail-page[data-page-reveal-state='pending'] .post-detail__description-block,
.js .post-detail-page[data-page-reveal-state='pending'] .post-detail__links,
.js .post-detail-page[data-page-reveal-state='pending'] .post-gallery__head,
.js .post-detail-page[data-page-reveal-state='pending'] .post-gallery-card {
  opacity: 0;
  will-change: transform, opacity, clip-path;
}

.js .post-detail-page[data-page-reveal-state='pending'] .post-detail__hero-frame {
  clip-path: inset(0 0 0 100% round var(--post-detail-hero-radius));
  transform: translateX(1.2rem);
}

.js .post-detail-page[data-page-reveal-state='pending'] .post-detail__summary,
.js .post-detail-page[data-page-reveal-state='pending'] .post-detail__description-block,
.js .post-detail-page[data-page-reveal-state='pending'] .post-detail__links,
.js .post-detail-page[data-page-reveal-state='pending'] .post-gallery__head {
  clip-path: inset(0 100% 0 0);
  transform: translateX(1rem);
}

.js .post-detail-page[data-page-reveal-state='pending'] .post-gallery-card {
  transform: translateX(1rem);
}

.js .post-detail-page[data-page-reveal-state='pending'] .post-gallery-card__media {
  clip-path: inset(0 0 0 100% round var(--post-detail-gallery-radius));
  will-change: clip-path;
  backface-visibility: hidden;
}

.post-detail-page[data-page-reveal-state='ready'] .post-detail__hero-frame {
  animation: postDetailHeroSlideIn 860ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
}

.post-detail__hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-detail__hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1rem;
  background: var(--color-neutral-50);
}

.post-detail__hero-placeholder-square,
.post-detail__tag-square,
.post-gallery-card__square {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--color-black);
}

.post-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.78fr);
  gap: 3rem;
  align-items: start;
  margin: 0 0 2.75rem;
}

.post-detail__main {
  min-width: 0;
  max-width: 72ch;
}

.post-detail__summary {
  margin: 0 0 1.4rem;
  display: grid;
  gap: 0.8rem;
}

.post-detail-page[data-page-reveal-state='ready'] .post-detail__summary {
  animation: postDetailWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both;
}

.post-detail__title {
  margin: 0;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.post-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  align-items: center;
}

.post-detail__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d6d6d;
}

.post-detail__description-block {
  max-width: 70ch;
  padding: 1.1rem 1.3rem;
  background-image:
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black));
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
}

.post-detail-page[data-page-reveal-state='ready'] .post-detail__description-block {
  animation: postDetailWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 340ms both;
}

.post-detail__description {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-black);
}

.post-detail__aside {
  min-width: 0;
}

.post-detail__links {
  min-height: 0;
  justify-content: flex-start;
}

.post-detail-page[data-page-reveal-state='ready'] .post-detail__links {
  animation: postDetailWidthIn 620ms cubic-bezier(0.22, 1, 0.36, 1) 430ms both;
}

.post-gallery {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 3rem;
}

.post-gallery__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.post-detail-page[data-page-reveal-state='ready'] .post-gallery__head {
  animation: postDetailWidthIn 580ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both;
}

.post-gallery__title {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

.post-gallery__rail {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.post-gallery__rail::-webkit-scrollbar {
  display: none;
}

.post-gallery-card {
  flex: 0 0 auto;
  min-width: 0;
  width: min(19rem, 72vw);
  display: grid;
  gap: 0.52rem;
  margin: 0;
  scroll-snap-align: start;
}

.post-detail-page[data-page-reveal-state='ready'] .post-gallery-card {
  animation: postDetailGalleryCardIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(620ms + (var(--post-gallery-index, 0) * 72ms));
}

.post-detail-page[data-page-reveal-state='ready'] .post-gallery-card__media {
  animation: postDetailGalleryMediaReveal 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(620ms + (var(--post-gallery-index, 0) * 72ms));
}

.post-gallery-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--post-gallery-aspect, 0.8);
  max-height: 25rem;
  overflow: hidden;
  border-radius: var(--post-detail-gallery-radius);
  background: var(--color-neutral-50);
}

.post-gallery-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-gallery-card__meta {
  min-width: 0;
  display: grid;
  gap: 0;
}

.post-gallery-card__index-row {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.post-gallery-card__index {
  display: block;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

.post-gallery-card__label {
  display: block;
  min-width: 0;
  font-size: 0.56rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d6d6d;
}

@keyframes postDetailHeroSlideIn {
  from {
    opacity: 0;
    clip-path: inset(0 0 0 100% round var(--post-detail-hero-radius));
    transform: translateX(1.2rem);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--post-detail-hero-radius));
    transform: translateX(0);
  }
}

@keyframes postDetailWidthIn {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

@keyframes postDetailGalleryCardIn {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes postDetailGalleryMediaReveal {
  from {
    clip-path: inset(0 0 0 100% round var(--post-detail-gallery-radius));
  }

  to {
    clip-path: inset(0 0 0 0 round var(--post-detail-gallery-radius));
  }
}

@media (max-width: 900px) {
  .post-detail-page {
    padding-top: calc(4.4rem + 1rem);
  }

  .post-detail__hero,
  .post-detail__body,
  .post-gallery {
    padding: 0 1rem;
  }

  .post-detail__hero {
    margin-bottom: 1.5rem;
  }

  .post-detail__hero-frame {
    height: clamp(18rem, 72vw, 25rem);
  }

  .post-detail__body {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.25rem;
  }

  .post-gallery {
    gap: 0.75rem;
    margin-bottom: 2.5rem;
  }

  .post-gallery-card {
    width: min(14rem, 68vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-detail__hero-frame,
  .post-detail__summary,
  .post-detail__description-block,
  .post-detail__links,
  .post-gallery__head,
  .post-gallery-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .post-detail__hero-frame {
    clip-path: inset(0 0 0 0 round var(--post-detail-hero-radius));
  }

  .post-gallery-card__media {
    animation: none;
    clip-path: inset(0 0 0 0 round var(--post-detail-gallery-radius));
  }
}

.posts-page {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
}

.posts-feed {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.js .posts-page[data-page-reveal-state='pending'] .posts-feed,
.js .posts-page[data-page-reveal-state='pending'] .posts-empty {
  opacity: 0;
  transform: translateY(14px);
}

.posts-page[data-page-reveal-state='ready'] .posts-feed,
.posts-page[data-page-reveal-state='ready'] .posts-empty {
  animation: postDetailSlideIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 110ms both;
}

.post-card {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: var(--color-neutral-900);
}

.post-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) saturate(0.88);
  transform: scale(1.045);
  transition: filter 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.post-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    rgba(0, 0, 0, 0.1) 100%
  );
  opacity: 0.88;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.post-card__info-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.post-card__info {
  width: min(21.5rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 10.75rem;
  padding: 0.95rem 1rem 1rem;
  border-radius: 0.95rem;
  background: rgba(251, 251, 251, 0.96);
  color: var(--color-black);
  text-decoration: none;
  pointer-events: auto;
  opacity: 0.88;
  overflow: hidden;
  transform: translateY(0.45rem);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.post-card.is-active .post-card__image {
  filter: blur(0) saturate(1);
  transform: scale(1);
}

.post-card.is-active .post-card__shade {
  opacity: 1;
}

.post-card.is-active .post-card__info {
  opacity: 1;
  transform: translateY(0);
}

.post-card.is-active .post-card__info:hover,
.post-card.is-active .post-card__info:focus-visible {
  background: var(--color-white);
  transform: translateY(-0.12rem);
}

.post-card__title {
  order: 1;
  margin: 0;
  max-width: 18ch;
  font-size: clamp(0.94rem, 1.15vw, 1.08rem);
  line-height: 1.06;
  letter-spacing: 0;
  font-weight: 400;
  text-transform: uppercase;
  text-wrap: balance;
}

.post-card__description {
  order: 3;
  margin: 0.28rem 0 0;
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.48;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.88);
  background-image:
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black));
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
}

.post-card__meta {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 0.55rem;
}

.post-card__meta-item {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.68);
  font-size: 0.62rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
}

.post-card__meta-item:last-child {
  margin-left: auto;
  text-align: right;
}

.posts-empty {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(50vh + 1rem) 1.5rem 2rem;
  color: var(--color-black);
  background: var(--color-white);
}

.posts-empty__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.posts-empty__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-weight: 500;
}

@media (max-width: 900px) {
  .post-card__info-wrap {
    padding: 0.75rem;
  }

  .post-card__info {
    width: min(20rem, calc(100vw - 1.5rem));
    min-height: 9.5rem;
    gap: 0.5rem;
    padding: 0.85rem 0.9rem 0.9rem;
  }

  .post-card__title {
    font-size: clamp(0.9rem, 4vw, 1rem);
  }

  .post-card__description {
    font-size: 0.7rem;
  }

  .posts-empty {
    padding: calc(40vh + 1rem) 1rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card__image,
  .post-card__shade,
  .post-card__info {
    transition: none;
    transform: none;
    filter: none;
    opacity: 1;
  }
}

.filters-page {
  --filters-page-bg: #ffffff;
  --filters-surface: #ffffff;
  --filters-surface-soft: var(--color-neutral-50);
  --filters-stroke: var(--color-neutral-100);
  --filters-stroke-strong: #111111;
  --filters-text-muted: #6d6d6d;
  --filters-radius: 0.95rem;
  --filters-toggle-radius: 0.58rem;
  width: 100%;
  padding: calc(46vh + 1rem) 0 3rem;
  background: var(--filters-page-bg);
  color: var(--color-black);
}

.filters-head {
  width: 100%;
  padding: 0 1.5rem;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 1rem;
}

.filters-head__left {
  max-width: 68ch;
  padding: 1.1rem 1.3rem;
  background-image:
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black)),
    linear-gradient(var(--color-black), var(--color-black));
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position:
    top left,
    top right,
    bottom left,
    bottom right;
}

.filters-head__title {
  margin: 0 0 0.72rem;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 400;
  text-transform: uppercase;
}

.filters-head__description {
  margin: 0;
  max-width: 70ch;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--color-black);
}

.filters-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.9rem;
}

.filters-head__count {
  font-family: var(--font-family-base);
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--filters-text-muted);
}

.filters-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 2px;
  min-width: 8.5rem;
  padding: 2px;
  border-radius: var(--filters-toggle-radius);
  background: var(--color-neutral-50);
}

.filters-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 8px 12px;
  border-radius: calc(var(--filters-toggle-radius) - 2px);
  background: transparent;
  color: var(--filters-text-muted);
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.filters-view-toggle__btn:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-black);
}

.filters-view-toggle__btn:focus-visible,
.filters-pagination__link:focus-visible,
.filters-list__link:focus-visible,
.filters-grid__link:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

.filters-view-toggle__btn.is-active,
.filters-view-toggle__btn[aria-pressed='true'] {
  background: var(--color-white);
  color: var(--color-black);
}

.filters-view-toggle__label {
  font-family: var(--font-family-base);
  font-size: 0.625rem;
  line-height: 1;
  font-weight: 300;
  text-transform: uppercase;
}

.filters-view {
  display: none;
}

.filters-view.is-active {
  display: block;
}

.js .filters-page[data-reveal-state='pending'] .filters-head__left,
.js .filters-page[data-reveal-state='pending'] .filters-controls,
.js .filters-page[data-reveal-state='pending'] .filters-empty,
.js .filters-page[data-reveal-state='pending'] .filters-pagination,
.js .filters-page[data-reveal-state='pending'] .filters-list__item,
.js .filters-page[data-reveal-state='pending'] .filters-grid__item {
  opacity: 0;
  transform: translateY(12px);
}

.filters-page[data-reveal-state='ready'] .filters-head__left {
  animation: filtersPageRevealIn 480ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both;
}

.filters-page[data-reveal-state='ready'] .filters-controls {
  animation: filtersPageRevealIn 480ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
}

.filters-page[data-reveal-state='ready'] .filters-empty,
.filters-page[data-reveal-state='ready'] .filters-pagination {
  animation: filtersPageRevealIn 460ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
}

.filters-page[data-reveal-state='ready'] .filters-view.is-active .filters-list__item {
  animation: filtersStaggerIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--filter-index, 0) * 24ms);
}

.filters-page[data-reveal-state='ready'] .filters-view.is-active .filters-grid__item {
  animation: filtersStaggerIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--filter-index, 0) * 20ms);
}

@keyframes filtersPageRevealIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes filtersStaggerIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filters-empty {
  margin: 0;
  padding: 0 1.5rem;
  font-size: 0.68rem;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--filters-text-muted);
}

.filters-list,
.filters-grid {
  margin: 0;
  padding: 0 1.5rem;
  list-style: none;
}

.filters-list {
  display: grid;
  gap: 1px;
  background: transparent;
}

.filters-grid__item {
  position: relative;
  border-radius: var(--filters-radius);
  overflow: hidden;
  background: var(--color-neutral-50);
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.filters-list__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--filters-radius);
  background: var(--color-neutral-50);
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.filters-list__link {
  display: grid;
  grid-template-columns: 10px minmax(0, 7rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  padding: 0.72rem 0.85rem;
  transition: color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.filters-list__swatch,
.filters-grid__swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--filter-accent, #111111);
  flex-shrink: 0;
}

.filters-list__title {
  display: block;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.filters-list__summary {
  display: block;
  min-width: 0;
  font-size: 0.58rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--filters-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filters-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-width: 0;
}

.filters-list__tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.22rem 0.42rem 0.18rem;
  border-radius: 999px;
  background: var(--color-white);
  font-family: var(--font-family-base);
  font-size: 0.5rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--filters-text-muted);
  white-space: nowrap;
}

.filters-list__count-group {
  display: inline-grid;
  justify-items: end;
  gap: 0.08rem;
  min-width: 3rem;
}

.filters-list__count-group.is-empty {
  min-width: 0;
}

.filters-list__count-label,
.filters-grid__count,
.filters-grid__tag {
  font-family: var(--font-family-base);
  font-size: 0.5rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--filters-text-muted);
}

.filters-list__count {
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.16rem;
}

.filters-grid__link {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.9rem;
  min-height: 12rem;
  padding: 0.92rem;
  color: inherit;
  text-decoration: none;
}

.filters-grid__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.filters-grid__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.filters-grid__title {
  display: block;
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.filters-grid__body {
  display: flex;
  align-items: flex-start;
  min-height: 0;
}

.filters-grid__summary {
  display: -webkit-box;
  max-width: 24ch;
  font-size: 0.62rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--filters-text-muted);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.filters-grid__tags {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 0.3rem;
}

.filters-grid__tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.2rem;
  padding: 0.2rem 0.42rem 0.16rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--filters-text-muted);
  white-space: nowrap;
}

.filters-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 1.5rem 0;
  margin-top: 1rem;
  border-top: 1px solid var(--filters-stroke);
}

.filters-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0.2rem 0.56rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-black);
  font-size: 0.54rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.filters-pagination__link:hover,
.filters-pagination__link:focus-visible {
  border-color: var(--filters-stroke-strong);
}

.filters-pagination__link--active,
.filters-pagination__link--active:hover,
.filters-pagination__link--active:focus-visible {
  background: #111111;
  color: var(--color-white);
  border-color: #111111;
}

.filters-pagination__link--disabled {
  opacity: 0.42;
  pointer-events: none;
}

.filters-list__item:focus-within {
  background: var(--color-white);
}

.filters-grid__item:focus-within {
  background: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .filters-list__item:hover {
    background: var(--color-white);
  }

  .filters-grid__item:hover {
    background: var(--color-white);
  }
}

@media (min-width: 1280px) {
  .filters-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .filters-page {
    padding: calc(38vh + 1rem) 0 2rem;
  }

  .filters-head {
    padding: 0 1rem;
  }

  .filters-list,
  .filters-grid {
    padding: 0 1rem;
  }

  .filters-empty {
    padding: 0 1rem;
  }

  .filters-pagination {
    padding: 1rem 1rem 0;
  }

  .filters-list__link {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.7rem 0.85rem;
    padding: 0.72rem 0.78rem;
  }

  .filters-list__title {
    grid-column: 2;
  }

  .filters-list__summary {
    grid-column: 2 / 4;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .filters-list__tags {
    grid-column: 2 / 4;
  }

  .filters-list__count-group {
    grid-column: 3;
  }
}

@media (max-width: 640px) {
  .filters-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .filters-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  .filters-grid__tags .filters-grid__tag:nth-child(n + 4) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filters-list__link,
  .filters-grid__item,
  .filters-view-toggle__btn,
  .filters-pagination__link,
  .filters-list__item,
  .filters-grid__item {
    transition: none;
  }

  .filters-view.is-active .filters-list__item,
  .filters-view.is-active .filters-grid__item {
    animation: none;
  }

  .filters-page[data-reveal-state='pending'] .filters-head__left,
  .filters-page[data-reveal-state='pending'] .filters-controls,
  .filters-page[data-reveal-state='pending'] .filters-empty,
  .filters-page[data-reveal-state='pending'] .filters-pagination,
  .filters-page[data-reveal-state='pending'] .filters-list__item,
  .filters-page[data-reveal-state='pending'] .filters-grid__item {
    opacity: 1;
    transform: none;
  }
}

.filter-item-page {
  --filter-stage-radius: 1.08rem;
  --filter-preview-clip-round: 0 0 calc(var(--filter-stage-radius) + 0.1rem) calc(var(--filter-stage-radius) + 0.1rem);
  --filter-stage-max-width: 100%;
  --filter-stage-viewer-gap: 0.65rem;
  --filter-stage-meta-height: 1.35rem;
  --filter-tags-height: 2.2rem;
  --filter-rail-height: 10.6rem;
  --filter-controls-height: var(--filter-tags-height);
  width: 100%;
  background: var(--color-white);
  color: var(--color-black);
}

.filter-item-page--has-rail {
  --filter-controls-height: calc(var(--filter-tags-height) + var(--filter-rail-height) + 1.05rem);
}

.filter-item-stage {
  position: relative;
  min-height: 100dvh;
  display: block;
  padding: 0 0
    calc(var(--filter-controls-height) + clamp(1.25rem, 2.4vw, 1.85rem));
  background: var(--color-white);
  overflow: hidden;
}

.filter-item-stage__viewer {
  width: min(100%, var(--filter-stage-max-width));
  margin: 0 auto;
  display: grid;
  gap: var(--filter-stage-viewer-gap);
}

.filter-item-stage__empty {
  width: 100%;
  height: calc(100dvh - var(--filter-controls-height) - clamp(1.25rem, 2.4vw, 1.85rem) - var(--filter-stage-meta-height) - var(--filter-stage-viewer-gap));
  min-height: 18rem;
  border-radius: 0 0 calc(var(--filter-stage-radius) + 0.1rem) calc(var(--filter-stage-radius) + 0.1rem);
  background: var(--color-neutral-50);
}

.filter-compare {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--filter-controls-height) - clamp(1.25rem, 2.4vw, 1.85rem) - var(--filter-stage-meta-height) - var(--filter-stage-viewer-gap));
  min-height: 18rem;
  border-radius: 0 0 calc(var(--filter-stage-radius) + 0.1rem) calc(var(--filter-stage-radius) + 0.1rem);
  background: var(--color-neutral-50);
  overflow: hidden;
}

.filter-compare--stage {
  position: relative;
  inset: auto;
  height: calc(100dvh - var(--filter-controls-height) - clamp(1.25rem, 2.4vw, 1.85rem) - var(--filter-stage-meta-height) - var(--filter-stage-viewer-gap));
}

.filter-compare__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.filter-compare__overlay {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--reveal, 50%)) 0 0);
}

.filter-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal, 50%);
  transform: translateX(-50%);
  width: 2px;
  background: var(--color-black);
  box-shadow: none;
  pointer-events: none;
}

.filter-compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.98rem;
  height: 0.98rem;
  transform: translate(-50%, -50%);
  border: 1px solid var(--color-black);
  border-radius: 999px;
  background: var(--color-white);
}

.filter-compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 0.2rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--color-black);
}

.filter-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}

.filter-item-stage__compare-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: center;
  min-height: var(--filter-stage-meta-height);
  padding-inline: clamp(0.85rem, 1.8vw, 1.35rem);
}

.filter-item-stage__compare-meta--single {
  grid-template-columns: minmax(0, 1fr);
}

.filter-item-stage__compare-label {
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
}

.filter-item-stage__compare-label:last-child {
  text-align: right;
}

.filter-item-stage__compare-meta--single .filter-item-stage__compare-label {
  text-align: left;
}

.filter-item-preview__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.filter-item-preview__frame {
  position: relative;
  inset: auto;
  margin: 0;
  width: 100%;
  height: calc(100dvh - var(--filter-controls-height) - clamp(1.25rem, 2.4vw, 1.85rem) - var(--filter-stage-meta-height) - var(--filter-stage-viewer-gap));
  min-height: 18rem;
  border-radius: 0 0 calc(var(--filter-stage-radius) + 0.1rem) calc(var(--filter-stage-radius) + 0.1rem);
  background: var(--color-neutral-50);
  overflow: hidden;
}

.filter-item-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  gap: 0.55rem;
  padding: 0 0 1rem;
  overflow: visible;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.985) 62%, rgba(255, 255, 255, 0));
}

.filter-item-controls--has-rail {
  grid-template-rows: auto auto;
}

.filter-item-tags {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: stretch;
  width: 100%;
  margin: 0;
  min-height: 0;
  padding: 0 clamp(0.85rem, 1.8vw, 1.35rem);
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}

.filter-item-tags--desktop {
  display: none;
}

.filter-item-tags::-webkit-scrollbar {
  display: none;
}

.filter-item-back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.36rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--color-black);
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.64;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.filter-item-back__icon {
  display: block;
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 0.62rem;
}

.filter-item-back:hover,
.filter-item-back:focus-visible {
  color: var(--color-black);
  opacity: 1;
}

.filter-item-collection-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.42rem;
  min-height: 0;
  padding: 0;
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
  background: transparent;
  color: var(--filter-chip-text, var(--color-black));
  border: 0;
  white-space: nowrap;
}

.filter-item-collection-chip::before {
  content: "";
  display: block;
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 0.52rem;
  background: var(--filter-chip-bg, var(--color-neutral-50));
}

.filter-item-gallery {
  margin: 0;
  display: flex;
  gap: 0.24rem;
}

.filter-item-gallery--rail {
  width: 100%;
  height: var(--filter-rail-height);
  min-height: 0;
  justify-self: stretch;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.22rem 0 0;
  padding-inline-start: clamp(0.85rem, 1.8vw, 1.35rem);
  background: transparent;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: clamp(0.85rem, 1.8vw, 1.35rem);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.filter-item-gallery--rail::-webkit-scrollbar {
  display: none;
}

.filter-item-gallery__button {
  appearance: none;
  border: 0;
  background: transparent;
  flex: 0 0 clamp(6rem, 10vw, 6.7rem);
  height: auto;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  display: grid;
  gap: 0.28rem;
  align-content: start;
  justify-items: stretch;
  text-align: left;
  transform-origin: center bottom;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  scroll-snap-align: start;
}

.filter-item-gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 106 / 132;
  border-radius: 0.34rem;
  overflow: hidden;
  background: var(--color-neutral-50);
  isolation: isolate;
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-item-gallery__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 48%);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.filter-item-gallery__button.is-active .filter-item-gallery__thumb {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.92);
}

.filter-item-gallery__button:hover .filter-item-gallery__thumb,
.filter-item-gallery__button:focus-visible .filter-item-gallery__thumb {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.26);
  transform: translateY(-0.08rem);
}

.filter-item-gallery__button:hover .filter-item-gallery__thumb::after,
.filter-item-gallery__button:focus-visible .filter-item-gallery__thumb::after,
.filter-item-gallery__button.is-active .filter-item-gallery__thumb::after {
  opacity: 1;
}

.filter-item-gallery__button:hover,
.filter-item-gallery__button:focus-visible {
  transform: translateY(-0.16rem);
}

.filter-item-gallery__button img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 320ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.filter-item-gallery__button:hover img,
.filter-item-gallery__button:focus-visible img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.02);
}

.filter-item-gallery__button.is-active img {
  transform: scale(1.02);
}

.filter-item-gallery__label {
  display: block;
  min-height: 0.9rem;
  padding: 0;
  color: var(--color-black);
  font-size: 0.58rem;
  line-height: 1.1;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
  opacity: 1;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-item-gallery__button.is-active .filter-item-gallery__label,
.filter-item-gallery__button:hover .filter-item-gallery__label,
.filter-item-gallery__button:focus-visible .filter-item-gallery__label {
  opacity: 1;
  transform: translateX(0.08rem);
}

.filter-item-links {
  width: min(100%, var(--filter-stage-max-width));
  margin: 0 auto;
  max-width: 70ch;
  padding: 1.5rem 1.5rem calc(var(--filter-controls-height) + 1.5rem);
}

.filter-item-links .info-list__link,
.filter-item-links .info-list__text {
  text-transform: uppercase;
}

.js .filter-item-page[data-page-reveal-state='pending'] .filter-compare,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-preview__frame,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-stage__empty {
  clip-path: inset(0 100% 0 0 round var(--filter-preview-clip-round));
}

.js .filter-item-page[data-page-reveal-state='pending'] .filter-compare,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-preview__frame,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-stage__empty,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-compare__divider,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-compare__handle,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-stage__compare-meta,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-tags,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-gallery__button,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-links {
  will-change: clip-path, transform, opacity;
  backface-visibility: hidden;
}

.filter-item-page[data-page-reveal-state='ready'] .filter-compare,
.filter-item-page[data-page-reveal-state='ready'] .filter-item-preview__frame,
.filter-item-page[data-page-reveal-state='ready'] .filter-item-stage__empty {
  animation: filterPreviewRevealX 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.js .filter-item-page[data-page-reveal-state='pending'] .filter-compare__divider {
  opacity: 0;
}

.filter-item-page[data-page-reveal-state='ready'] .filter-compare__divider {
  animation: filterCompareDividerIn 420ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both;
}

.js .filter-item-page[data-page-reveal-state='pending'] .filter-compare__handle {
  opacity: 0;
}

.filter-item-page[data-page-reveal-state='ready'] .filter-compare__handle {
  animation: filterCompareHandleIn 420ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both;
}

.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-stage__compare-meta,
.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-tags {
  opacity: 0;
  transform: translateY(0.35rem);
}

.filter-item-page[data-page-reveal-state='ready'] .filter-item-stage__compare-meta,
.filter-item-page[data-page-reveal-state='ready'] .filter-item-tags {
  animation: filterToplineIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both;
}

.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-gallery__button {
  opacity: 0;
  transform: translateY(0.7rem);
}

.filter-item-page[data-page-reveal-state='ready'] .filter-item-gallery__button {
  animation: filterPresetIn 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.42s + (var(--filter-item-index, 0) * 0.045s));
}

.js .filter-item-page[data-page-reveal-state='pending'] .filter-item-links {
  opacity: 0;
  transform: translateY(0.5rem);
}

.filter-item-page[data-page-reveal-state='ready'] .filter-item-links {
  animation: filterLinksIn 560ms cubic-bezier(0.22, 1, 0.36, 1) 0.58s both;
}

@keyframes filterPreviewRevealX {
  0% {
    clip-path: inset(0 100% 0 0 round var(--filter-preview-clip-round));
  }
  100% {
    clip-path: inset(0 0 0 0 round var(--filter-preview-clip-round));
  }
}

@keyframes filterPreviewRevealY {
  0% {
    clip-path: inset(0 0 100% 0 round var(--filter-preview-clip-round));
  }
  100% {
    clip-path: inset(0 0 0 0 round var(--filter-preview-clip-round));
  }
}

@keyframes filterCompareDividerIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes filterCompareHandleIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes filterToplineIn {
  0% {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes filterPresetIn {
  0% {
    opacity: 0;
    transform: translateY(0.7rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes filterLinksIn {
  0% {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  .filter-item-page {
    --filter-desktop-top-offset: calc(0.75rem + 4.75rem + 0.45rem);
    --filter-preview-clip-round: calc(var(--filter-stage-radius) + 0.1rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(18rem, 28vw, 23rem);
    align-items: start;
    min-height: 100dvh;
    padding-top: var(--filter-desktop-top-offset);
  }

  .filter-item-stage {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: calc(100dvh - var(--filter-desktop-top-offset));
    padding: 0 0 0.85rem 0.85rem;
  }

  .filter-item-stage__viewer {
    height: calc(100dvh - var(--filter-desktop-top-offset) - 0.85rem);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.42rem;
  }

  .filter-compare,
  .filter-compare--stage,
  .filter-item-preview__frame,
  .filter-item-stage__empty {
    height: 100%;
    min-height: 0;
  }

  .filter-compare,
  .filter-item-preview__frame,
  .filter-item-stage__empty {
    border-radius: var(--filter-preview-clip-round);
  }

  .filter-item-stage__compare-meta {
    min-height: 1rem;
    padding: 0;
  }

  .filter-item-controls {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--filter-desktop-top-offset);
    bottom: auto;
    align-self: start;
    height: calc(100dvh - var(--filter-desktop-top-offset));
    padding: 0 0.85rem 0.85rem 0.6rem;
    gap: 0.65rem;
    background: var(--color-white);
  }

  .filter-item-controls--has-rail {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .filter-item-tags {
    justify-content: flex-end;
    min-height: 1rem;
    padding: 0;
    overflow: visible;
    order: 2;
  }

  .filter-item-gallery--rail {
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    scroll-padding-inline-start: 0;
    order: 1;
  }

  .filter-item-gallery__button {
    flex: none;
    width: 100%;
  }

  .filter-item-links {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0.85rem 1rem 0.6rem;
  }
}

@media (max-width: 1023px) {
  .filter-item-page[data-page-reveal-state='ready'] .filter-compare,
  .filter-item-page[data-page-reveal-state='ready'] .filter-item-preview__frame,
  .filter-item-page[data-page-reveal-state='ready'] .filter-item-stage__empty {
    animation-name: filterPreviewRevealY;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-compare,
  .filter-item-preview__frame,
  .filter-item-stage__empty,
  .filter-compare__divider,
  .filter-compare__handle,
  .filter-item-stage__compare-meta,
  .filter-item-tags,
  .filter-item-gallery__button,
  .filter-item-gallery__thumb,
  .filter-item-gallery__thumb::after,
  .filter-item-gallery__button img,
  .filter-item-gallery__label,
  .filter-item-links {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .filter-compare,
  .filter-item-preview__frame,
  .filter-item-stage__empty {
    clip-path: inset(0 0 0 0 round var(--filter-preview-clip-round));
  }

  .filter-item-gallery__button:hover,
  .filter-item-gallery__button:focus-visible {
    transform: none;
  }

  .posts-feed,
  .posts-empty {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .filter-item-page {
    --filter-stage-radius: 0.96rem;
    --filter-stage-max-width: 100%;
    --filter-stage-meta-height: 1.2rem;
    --filter-tags-height: 2.05rem;
    --filter-rail-height: 9.7rem;
  }

  .filter-item-stage {
    min-height: 0;
  }

  .filter-item-tags {
    margin: 0;
  }

  .filter-item-back,
  .filter-item-collection-chip {
    font-size: 0.58rem;
  }

  .filter-item-gallery--rail {
    gap: 0.3rem;
  }

  .filter-item-gallery__button {
    flex-basis: clamp(5.7rem, 27vw, 6.2rem);
  }

  .filter-item-links {
    padding: 1rem 1rem calc(var(--filter-controls-height) + 1rem);
  }
}