.news-editorial {
  --news-accent-red: #cc3d4d;
  --news-filter-active-text: #080909;
}

body:not(.night-mode) .news-editorial {
  --news-filter-active-text: #fff;
}

.news-editorial-filter-header {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 1.35rem;
  width: min(100% - clamp(2.5rem, 10vw, 11.5rem), 92rem);
  margin: 0 auto;
  padding: clamp(6.25rem, 10vw, 9rem) 0 clamp(2.25rem, 4vw, 3.75rem);
  border-bottom: 1px solid var(--news-line);
}

.news-editorial-filter-header h1 {
  max-width: 100%;
  margin: 0;
  color: var(--news-ink);
  font-size: clamp(2.8rem, 6vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.92;
  overflow-wrap: anywhere;
}

.news-category-filters {
  --news-filter-height: 2.3rem;
  --news-filter-inset: 0.18rem;
  --news-filter-border-width: 1px;
  --news-filter-gap: 0;
  --news-filter-motion-duration: 320ms;
  --news-filter-motion-easing: cubic-bezier(0.22, 0.7, 0.26, 1);
  --news-filter-pill-radius: calc(var(--news-filter-height) / 2);
  --news-filter-outer-radius: calc(
    var(--news-filter-pill-radius) +
    var(--news-filter-inset) +
    var(--news-filter-border-width)
  );
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: var(--news-filter-gap);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--news-filter-inset);
  border: var(--news-filter-border-width) solid
    color-mix(in srgb, var(--news-line) 82%, transparent);
  border-radius: var(--news-filter-outer-radius);
  background: color-mix(in srgb, var(--news-ink) 4%, transparent);
  touch-action: pan-y;
  user-select: none;
}

.news-category-filter-pill {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: var(--news-filter-pill-width, 0);
  height: var(--news-filter-pill-height, 0);
  border-radius: var(--news-filter-pill-radius);
  background: transparent;
  cursor: grab;
  overflow: hidden;
  pointer-events: auto;
  touch-action: none;
  transform: translate(
    var(--news-filter-pill-x, 0),
    var(--news-filter-pill-y, 0)
  );
  transition:
    transform var(--news-filter-motion-duration)
      var(--news-filter-motion-easing),
    width var(--news-filter-motion-duration)
      var(--news-filter-motion-easing),
    height var(--news-filter-motion-duration)
      var(--news-filter-motion-easing);
  visibility: hidden;
  will-change: transform, width, height;
}

.news-category-filter-pill::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: var(--news-ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--news-ink) 14%, transparent);
  content: "";
  transform: scaleX(1);
  transition:
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
}

.news-category-filter-inverse-track {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: var(--news-filter-gap);
  width: max-content;
  padding: var(--news-filter-inset);
  color: var(--news-filter-active-text);
  pointer-events: none;
  transform: translate(
    calc(0px - var(--news-filter-pill-x, 0px)),
    calc(0px - var(--news-filter-pill-y, 0px))
  );
  transition: transform var(--news-filter-motion-duration)
    var(--news-filter-motion-easing);
  will-change: transform;
}

.news-category-filter-pill.is-ready {
  visibility: visible;
}

.news-category-filter-pill:hover::before {
  box-shadow: 0 3px 8px color-mix(in srgb, var(--news-ink) 18%, transparent);
  filter: brightness(1.04);
}

.news-category-filter-pill.is-moving::before {
  animation: news-category-pill-response 320ms
    cubic-bezier(0.22, 0.7, 0.26, 1);
}

.news-category-filters.is-dragging {
  cursor: grabbing;
}

.news-category-filters.is-dragging .news-category-filter-pill {
  cursor: grabbing;
  transition: none;
}

.news-category-filters.is-dragging .news-category-filter-inverse-track {
  transition: none;
}

.news-category-filters.is-dragging .news-category-filter-pill::before {
  animation: none;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--news-ink) 20%, transparent);
  filter: brightness(1.04);
}

@keyframes news-category-pill-response {
  0%,
  100% {
    filter: brightness(1);
  }

  48% {
    filter: brightness(1.055);
  }
}

.news-category-filter,
.news-category-filter-inverse-label {
  box-sizing: border-box;
  display: grid;
  height: var(--news-filter-height);
  min-height: var(--news-filter-height);
  padding: 0.58rem 0.9rem;
  place-items: center;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.news-category-filter {
  position: relative;
  z-index: 2;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--news-ink);
  cursor: pointer;
}

.news-category-filter:hover,
.news-category-filter:focus-visible {
  outline: none;
}

.news-category-filter:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--news-accent-red) 24%, transparent);
}

.news-category-filter.is-active {
  pointer-events: none;
}

.news-category-empty {
  display: grid;
  min-height: min(28rem, 56svh);
  padding: clamp(4rem, 9vw, 8rem) 1.25rem;
  place-items: center;
  color: var(--news-muted);
  text-align: center;
}

.news-category-empty[hidden],
.news-story[hidden],
.news-editorial-nav[hidden] {
  display: none !important;
}

.news-category-empty p {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.16rem);
}

.news-story {
  scroll-margin-top: calc(var(--header-offset, 96px) + 12px);
}

.news-story--contain .news-story-media {
  min-height: 0;
  aspect-ratio: var(--news-image-aspect, auto) !important;
}

.news-story--contain .news-story-media img {
  object-fit: contain;
  object-position: center;
}

.news-story--pending .news-story-copy {
  align-self: center;
}

.news-story-viewport {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.news-story-stage {
  position: relative;
  z-index: 1;
  overflow-anchor: none;
}

.news-story-transition-layer {
  position: absolute;
  z-index: 8;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-101%);
  visibility: hidden;
  will-change: opacity, transform;
}

.news-story-transition-layer--primary {
  background: color-mix(
    in srgb,
    var(--theme-surface-dark, #181716) 94%,
    var(--surface-text, #edf0f2) 6%
  );
}

.news-story-transition-layer--secondary {
  z-index: 9;
  background: color-mix(
    in srgb,
    var(--theme-surface-dark, #181716) 88%,
    var(--surface-text, #edf0f2) 12%
  );
}

body:not(.night-mode) .news-story-transition-layer--primary {
  background: var(--watches-catalog-card, var(--color-bg-soft, #f3f3f1));
}

body:not(.night-mode) .news-story-transition-layer--secondary {
  background: color-mix(
    in srgb,
    var(--watches-catalog-card, var(--color-bg-soft, #f3f3f1)) 88%,
    var(--news-ink) 12%
  );
}

.news-story-viewport.is-transitioning-next
  .news-story-transition-layer--primary {
  visibility: visible;
  animation: news-story-primary-next 850ms
    cubic-bezier(0.42, 0, 0.22, 1) 280ms both;
}

.news-story-viewport.is-transitioning-previous
  .news-story-transition-layer--primary {
  visibility: visible;
  animation: news-story-primary-previous 850ms
    cubic-bezier(0.42, 0, 0.22, 1) 280ms both;
}

.news-story-viewport.is-transitioning-next
  .news-story-transition-layer--secondary {
  visibility: visible;
  animation: news-story-secondary-next 560ms
    cubic-bezier(0.34, 0, 0.18, 1) 500ms both;
}

.news-story-viewport.is-transitioning-previous
  .news-story-transition-layer--secondary {
  visibility: visible;
  animation: news-story-secondary-previous 560ms
    cubic-bezier(0.34, 0, 0.18, 1) 500ms both;
}

@keyframes news-story-primary-next {
  0% {
    opacity: 0;
    transform: translateY(102%);
  }

  40%,
  68% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-102%);
  }
}

@keyframes news-story-primary-previous {
  0% {
    opacity: 0;
    transform: translateY(-102%);
  }

  40%,
  68% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(102%);
  }
}

@keyframes news-story-secondary-next {
  0% {
    opacity: 0;
    transform: translateY(108%);
  }

  32%,
  66% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(-108%);
  }
}

@keyframes news-story-secondary-previous {
  0% {
    opacity: 0;
    transform: translateY(-108%);
  }

  32%,
  66% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(108%);
  }
}

.news-editorial-nav {
  --news-nav-surface: #080909;
  --news-nav-slot: 2rem;
  --news-nav-half-slot: 1rem;
  --news-nav-dot-gap: 0.18rem;
  --news-nav-end-gap: 0.52rem;
  --news-nav-step: calc(var(--news-nav-slot) + var(--news-nav-dot-gap));
  --news-nav-dot-size: 0.4rem;
  --news-nav-dot-border-width: 1px;
  --news-nav-dot-border-color: rgba(245, 247, 248, 0.82);
  --news-nav-dot-fill: #080909;
  --news-nav-dot-active-fill: currentColor;
  --news-nav-dot-active-scale: 1.42;
  --news-nav-shape-size: 0.64rem;
  --news-nav-arrow-stroke: 1.65px;
  --news-nav-arrow-tip-offset: calc(
    var(--news-nav-shape-size) * 0.2083333333
  );
  --news-nav-line-edge: calc(
    var(--news-nav-half-slot) -
    var(--news-nav-arrow-tip-offset)
  );
  --news-nav-line-no-edge: calc(
    var(--news-nav-slot) +
    var(--news-nav-end-gap) +
    var(--news-nav-half-slot)
  );
  --news-nav-line-top: var(--news-nav-line-no-edge);
  --news-nav-line-bottom: var(--news-nav-line-no-edge);
  grid-auto-flow: row;
  grid-template-columns: 2.75rem;
  gap: var(--news-nav-end-gap);
}

body:not(.night-mode) .news-editorial-nav {
  --news-nav-surface: #fff;
  --news-nav-dot-border-color: rgba(23, 25, 26, 0.7);
  --news-nav-dot-fill: #fff;
}

.news-editorial-nav-line {
  z-index: 0;
  top: var(--news-nav-line-top);
  bottom: var(--news-nav-line-bottom);
}

.news-editorial-nav.has-previous-group .news-editorial-nav-line {
  --news-nav-line-top: var(--news-nav-line-edge);
}

.news-editorial-nav.has-next-group .news-editorial-nav-line {
  --news-nav-line-bottom: var(--news-nav-line-edge);
}

.news-editorial-nav-items {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-rows: var(--news-nav-slot);
  justify-items: center;
  gap: var(--news-nav-dot-gap);
  opacity: 1;
}

.news-editorial-nav-page,
.news-editorial-nav-link {
  width: 2.75rem;
  height: var(--news-nav-slot);
}

.news-editorial-nav-page {
  position: relative;
  z-index: 3;
  display: grid;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--news-ink);
  cursor: pointer;
}

.news-editorial-nav-page[hidden] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}

.news-editorial-nav-page:focus-visible {
  border-radius: 50%;
  outline: 1px solid currentColor;
  outline-offset: -0.25rem;
}

.news-editorial-nav-page-shape {
  position: relative;
  display: block;
  width: var(--news-nav-shape-size);
  height: var(--news-nav-shape-size);
}

.news-editorial-nav-page-shape svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--news-nav-surface);
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: var(--news-nav-arrow-stroke);
}

.news-editorial-nav-page--previous
  .news-editorial-nav-page-shape
  svg {
  transform: scaleY(-1);
  transform-origin: center;
}

.news-editorial-nav.is-physics-transition
  > :not(.news-editorial-nav-motion) {
  visibility: hidden;
}

.news-editorial-nav-motion {
  position: fixed;
  z-index: 20;
  inset: 0;
  color: var(--news-ink);
  pointer-events: none;
}

.news-editorial-nav-motion-line {
  position: absolute;
  z-index: 0;
  width: 1px;
  background: rgba(237, 240, 242, 0.3);
  transform: translateX(-50%);
}

body:not(.night-mode) .news-editorial-nav-motion-line {
  background: rgba(23, 25, 26, 0.25);
}

.news-editorial-nav-motion-node {
  position: absolute;
  z-index: 1;
  display: grid;
  width: var(--news-nav-shape-size);
  height: var(--news-nav-shape-size);
  place-items: center;
  color: var(--news-ink);
  transform: translate(-50%, -50%);
  will-change: top, opacity;
}

.news-editorial-nav-motion-node svg {
  display: block;
  width: var(--news-nav-shape-size);
  height: var(--news-nav-shape-size);
  overflow: visible;
}

.news-editorial-nav-motion-node polygon {
  fill: var(--news-nav-surface);
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: var(--news-nav-arrow-stroke);
  vector-effect: non-scaling-stroke;
}

.news-editorial-nav-dot,
.news-editorial-nav-motion-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--news-nav-dot-size);
  height: var(--news-nav-dot-size);
  border: var(--news-nav-dot-border-width) solid
    var(--news-nav-dot-border-color);
  border-radius: 50%;
  background: var(--news-nav-dot-fill);
}

.news-editorial-nav-motion-dot {
  flex: none;
  transition: none;
}

.news-editorial-nav-link.is-active .news-editorial-nav-dot {
  border-color: currentColor;
  background: var(--news-nav-dot-active-fill);
  transform: scale(var(--news-nav-dot-active-scale));
}

.news-editorial-nav-motion-node.is-accent-active polygon {
  fill: var(--news-accent-red);
  stroke: var(--news-accent-red);
}

.news-editorial-nav-motion-node.is-incoming {
  opacity: 0;
}

.news-editorial-nav-link:hover .news-editorial-nav-dot,
.news-editorial-nav-link:focus-visible .news-editorial-nav-dot {
  border-color: currentColor;
}

.news-editorial-nav.has-no-stories .news-editorial-nav-line {
  display: none;
}

.news-article-editorial-body--pending {
  display: block;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.news-article-editorial-pending {
  margin: 0;
  color: var(--news-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .news-editorial-filter-header {
    gap: 1.1rem;
    width: min(100% - 2.5rem, 92rem);
    padding-top: 5.6rem;
    padding-bottom: 2rem;
  }

  .news-category-filters {
    --news-filter-height: 2.2rem;
    --news-filter-inset: 0.15rem;
    grid-template-columns: repeat(4, max-content);
    width: max-content;
    max-width: 100%;
  }

  .news-category-filter,
  .news-category-filter-inverse-label {
    min-width: 0;
    padding-right: clamp(0.38rem, 2.2vw, 0.64rem);
    padding-left: clamp(0.38rem, 2.2vw, 0.64rem);
    font-size: clamp(0.58rem, 2.6vw, 0.67rem);
    letter-spacing: 0.045em;
  }

  .news-editorial-nav {
    --news-nav-slot: 1.65rem;
    --news-nav-half-slot: 0.825rem;
    --news-nav-dot-gap: 0.08rem;
    --news-nav-end-gap: 0.22rem;
    top: 50%;
    right: max(0.2rem, env(safe-area-inset-right));
    bottom: auto;
    display: grid;
    width: 2.15rem;
    grid-template-columns: 2.15rem;
    padding: 0.25rem 0;
    background: color-mix(in srgb, #080909 78%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateY(-50%);
  }

  body:not(.night-mode) .news-editorial-nav {
    background: color-mix(in srgb, #fff 82%, transparent);
  }

  .news-editorial-nav-page,
  .news-editorial-nav-link {
    width: 2.15rem;
    height: var(--news-nav-slot);
  }

  .news-story {
    padding-right: 3rem;
  }

  .news-story--contain .news-story-media {
    width: 100%;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-category-filter,
  .news-category-filter-pill,
  .news-category-filter-inverse-track,
  .news-editorial-nav-line {
    transition: none !important;
  }

  .news-story-viewport.is-transitioning-next .news-story-transition-layer,
  .news-story-viewport.is-transitioning-previous .news-story-transition-layer {
    animation-duration: 70ms !important;
    animation-delay: 0ms !important;
  }

  .news-category-filter-pill.is-moving::before {
    animation: none !important;
  }
}