.page.selected.posts {
  --ink-navy-rgb: 1, 33, 105;
  --ink-royal-rgb: 0, 83, 155;
  --ink-haze-rgb: 24, 61, 129;
  width: 100vw;
  margin-top: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 8.8rem 0 4.6rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: #ffffff;
  color: #111;
}

.page.selected.posts::before {
  content: "";
  position: fixed;
  inset: -20vh -18vw;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(
      170% 145% at 80% 9%,
      rgba(var(--ink-royal-rgb), 0.198) 0%,
      rgba(var(--ink-navy-rgb), 0.144) 34%,
      rgba(var(--ink-haze-rgb), 0.099) 54%,
      rgba(var(--ink-navy-rgb), 0) 80%
    ),
    radial-gradient(
      138% 120% at 22% 88%,
      rgba(var(--ink-haze-rgb), 0.072) 0%,
      rgba(var(--ink-haze-rgb), 0) 78%
    );
  filter: blur(10px);
  will-change: background-position;
  animation: homeBaseFlow 86s ease-in-out infinite alternate;
}

.page.selected.posts::after {
  content: "";
  position: fixed;
  left: -10vw;
  top: -32vh;
  width: 134vw;
  height: 92vh;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(66% 60% at 78% 14%, rgba(var(--ink-navy-rgb), 0.216) 0%, rgba(var(--ink-navy-rgb), 0) 74%),
    radial-gradient(60% 54% at 88% 20%, rgba(var(--ink-royal-rgb), 0.18) 0%, rgba(var(--ink-royal-rgb), 0) 76%),
    radial-gradient(50% 46% at 72% 34%, rgba(var(--ink-haze-rgb), 0.126) 0%, rgba(var(--ink-haze-rgb), 0) 80%);
  filter: blur(30px);
  will-change: transform;
  animation: homePrimaryFlow 52s ease-in-out infinite alternate;
}

.page.selected.posts > .nav {
  z-index: 5;
}

.page.selected.posts > .ink-secondary {
  position: fixed;
  inset: -26vh -20vw -18vh -16vw;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(52% 44% at 102% 8%, rgba(var(--ink-royal-rgb), 0.117) 0%, rgba(var(--ink-royal-rgb), 0) 78%),
    radial-gradient(46% 38% at 90% 28%, rgba(var(--ink-haze-rgb), 0.09) 0%, rgba(var(--ink-haze-rgb), 0) 80%),
    radial-gradient(36% 30% at -6% 90%, rgba(var(--ink-navy-rgb), 0.063) 0%, rgba(var(--ink-navy-rgb), 0) 82%);
  filter: blur(28px);
  will-change: transform;
  animation: homeSecondaryFlow 16s ease-in-out infinite alternate;
}

.page.selected.posts > .ink-secondary::before {
  content: "";
  position: absolute;
  right: -10vw;
  top: -18vh;
  width: 94vw;
  height: 76vh;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 86% 18%, rgba(var(--ink-royal-rgb), 0.108) 0%, rgba(var(--ink-royal-rgb), 0) 78%),
    radial-gradient(46% 40% at 94% 36%, rgba(var(--ink-haze-rgb), 0.081) 0%, rgba(var(--ink-haze-rgb), 0) 80%);
  filter: blur(28px);
  will-change: transform;
  animation: homeEchoFlow 30s ease-in-out infinite alternate;
}

.page.selected.posts > .site-footer,
.page.selected.posts .selected-posts-shell {
  position: relative;
  z-index: 4;
}

.page.selected.posts .selected-posts-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: 0.045;
}

.page.selected.posts .selected-posts-shell {
  width: min(1280px, calc(100% - 3.2rem));
  margin: 0 auto;
  padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.7rem, 3.5vw, 3rem) clamp(8.8rem, 12vw, 13.6rem);
  box-sizing: border-box;
  flex: 1;
}

.page.selected.posts .selected-posts-page-title {
  width: 100%;
  margin: 0 0 0.9rem;
  font-size: clamp(2.5rem, 3.2vw, 3.1rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #101828;
}

.page.selected.posts .selected-posts-page-intro {
  width: 100%;
  margin: 0 0 52px;
  color: #404b5c;
  font-size: 1.52rem;
  line-height: 1.68;
  font-weight: 400;
}

.page.selected.posts .selected-posts-list {
  width: 100%;
  margin: 0 auto;
  display: grid;
  row-gap: 6px;
}

.page.selected.posts .selected-posts-link {
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 16px clamp(1.18rem, 2.2vw, 1.9rem);
  text-decoration: none;
  text-align: left;
  color: #101828;
  font-size: clamp(2.02rem, 2.7vw, 2.42rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 220ms ease, color 220ms ease;
}

.page.selected.posts .selected-posts-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #162132;
}

.page.selected.posts .selected-posts-link:focus {
  outline: none;
}

.page.selected.posts .selected-posts-link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(16, 27, 43, 0.22);
}

.page.selected.posts > .site-footer {
  margin-top: auto;
  padding-bottom: 1.1rem;
}

.page.selected.posts > .site-footer > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 300;
  color: #999;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .page.selected.posts {
    padding: 7.6rem 0 3.8rem;
  }

  .page.selected.posts .selected-posts-shell {
    width: calc(100% - 1.6rem);
    padding: 2rem 1.4rem clamp(7.6rem, 20vw, 10rem);
  }

  .page.selected.posts .selected-posts-link {
    padding: 16px 1.02rem;
    font-size: clamp(1.9rem, 5.8vw, 2.16rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page.selected.posts::before,
  .page.selected.posts::after,
  .page.selected.posts > .ink-secondary,
  .page.selected.posts > .ink-secondary::before,
  .page.selected.posts .selected-posts-link {
    animation: none;
    transition: none;
  }
}