.updates,
.updates__button {
  --updates-gutter: var(--space-medium);
}

.updates {
  display: flex;
  flex-direction: column;
  padding: 0 var(--updates-gutter) var(--updates-gutter);
  position: relative;
  z-index: 1;
}

/* .updates and a post's back button set their own bottom padding to match the side gutter */
.site:has(> .updates, > .updates__button) {
  padding-bottom: 0;
}

.updates:before {
  border-left: var(--line);
  border-left-color: oklch(var(--oklch-ink) / 0.075);
  border-left-width: calc(3 * var(--line-thickness));
  bottom: var(--updates-gutter);
  content: '';
  left: calc(50% - 1.5 * var(--line-thickness));
  position: absolute;
  top: 0;
}

.updates__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-neutral);
  margin-inline: auto;
  position: relative;
  width: min(100%, 40em);
}

.updates__button {
  display: flex;
  justify-content: center;
  padding-bottom: var(--updates-gutter);
}

.updates__rss {
  --updates-rss-size: 1.8em;
  --updates-rss-offset: calc((var(--space-x-large) - var(--updates-rss-size)) / 2);

  border-radius: 100%;
  color: var(--color-ink-5);
  display: grid;
  height: var(--updates-rss-size);
  place-content: center;
  position: absolute;
  right: var(--updates-rss-offset);
  top: var(--updates-rss-offset);
  width: var(--updates-rss-size);
  z-index: 3;
}

.updates__rss svg {
  height: 0.45em;
  width: auto;
}

.updates__card {
  --updates-padding: var(--space-neutral);
  align-self: center;
  margin-inline: 0;
  padding: var(--updates-padding);
  width: min(100%, 26em);
}

.updates__card .cards__header {
  gap: 0.575em;
}

.updates__card .cards__header + .cards__article {
  margin-top: 0;
}

.updates__date {
  color: var(--color-ink-5);
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height-tight);
  margin-block: -0.29em;
}

.updates__card .cards__header h2 {
  font-size: var(--font-size-large);
  font-weight: 800;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  margin-block: -0.39em;
  text-wrap: balance;
}

.updates__card .cards__header h2 a {
  color: inherit;
  font-weight: inherit;
  text-decoration-color: oklch(var(--oklch-link) / 0);
}

.updates__media {
  border-block: var(--line);
  margin-block: calc(var(--updates-padding) - 1.25em);
  margin-inline: calc(-1 * var(--updates-padding));
}

.updates__media img,
.updates__media video {
  display: block;
  height: auto;
  width: 100%;
}

:is(.updates__card, .updates__post) .updates__caption {
  color: var(--color-ink-5);
  font-size: var(--font-size-xxx-small);
  letter-spacing: var(--letter-spacing-loose);
  line-height: var(--line-height-tight);
  margin-block: -0.26em -0.27em;
  text-align: center;
  text-wrap: balance;
}

.updates__card .cards__article ul,
.updates__card .cards__article ol {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  list-style: disc;
  padding-left: 1.25em;
}

.updates__card .cards__article li + li {
  margin-top: 0.25em;
}

.updates__inline {
  --updates-media-shadow:
    0 0 0 1px oklch(var(--oklch-black) / 0.04),
    var(--box-shadow-card);

  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

.updates__inline img,
.updates__inline video,
.updates__inline .updates__embed {
  box-shadow: var(--updates-media-shadow);
  display: block;
  height: auto;
  width: 100%;
}

.updates__intro header {
  position: relative;
}

.updates__intro .updates__date {
  bottom: 100%;
  inset-inline: 0;
  margin-block: 0 1.3em;
  position: absolute;
}

.updates__post article .updates__inline {
  font-size: calc(100% / 0.625);
}

.updates__post article > .updates__inline:last-child {
  margin-bottom: 0;
}

.updates__post article .updates__inline :is(img, video) {
  box-shadow: var(--updates-media-shadow);
}

.updates__post article .updates__inline .updates__player video {
  box-shadow: none;
}

.updates__inline--half img {
  align-self: center;
  width: 60%;
}

.updates__player {
  box-shadow: var(--updates-media-shadow);
  position: relative;
}

.updates__inline .updates__player video {
  box-shadow: none;
}

/* Positioned so Safari keeps it above the video */
.updates__player button {
  cursor: pointer;
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
  z-index: 1;
}

.updates__player button:before {
  background: oklch(var(--oklch-black) / 0.15);
  content: '';
  grid-area: 1 / 1;
  height: 100%;
  pointer-events: none;
  width: 100%;
}

.updates__inline .updates__player button:after {
  box-shadow:
    0 0 0 1px oklch(var(--oklch-black) / 0.06),
    0 0.05em 0.2em oklch(var(--oklch-black) / 0.2),
    0 0.15em 0.8em oklch(var(--oklch-black) / 0.25)
  ;
}

.updates__player--playing button {
  display: none;
}

.updates__inline.updates__gallery {
  display: grid;
  gap: var(--space-medium);
  grid-template-columns: repeat(2, 1fr);
}

.updates__gallery-item {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}

.updates__embed {
  aspect-ratio: 16 / 9;
  overflow: clip;
  width: 100%;
}

.updates__embed iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

@media(min-width: 48em) {

  /* Grows from 1em at 768px to 3em at 1024px so the cards don't jump at the breakpoint */
  .updates,
  .updates__button {
    --updates-gutter: clamp(var(--space-medium), 18.75vw - 7.75rem, var(--space-x-large));
  }

  .updates__container {
    gap: var(--space-x-large);
    width: 100%;
  }

  /* Overlaps the center line by the same gutter it keeps from the frame edge */
  .updates__card {
    align-self: flex-start;
    width: calc(50% + var(--updates-gutter));
  }

  .updates__card:nth-child(even) {
    align-self: flex-end;
  }

}

@media(min-width: 64em) {

  .updates__post article .updates__inline {
    margin-inline: calc((100% - 28em) / 2);
  }

  .updates__rss {
    --updates-rss-size: 1.4em;
  }

  .updates__rss svg {
    height: 0.425em;
  }

}

@media(prefers-color-scheme: dark) {

  .updates:before {
    border-left-color: oklch(var(--oklch-ink) / 0.04);
  }

}

.dark .updates:before {
  border-left-color: oklch(var(--oklch-ink) / 0.04);
}

@media(hover: hover) {

  .updates__card .cards__header h2 a {
    transition:
      color var(--transition),
      text-decoration-color var(--transition)
    ;
  }

  .updates__card .cards__header h2 a:hover {
    color: var(--color-link);
    text-decoration-color: var(--color-link);
  }

  .updates__rss {
    transition:
      backdrop-filter var(--transition),
      -webkit-backdrop-filter var(--transition),
      background var(--transition),
      color var(--transition),
      transform var(--transition)
    ;
  }

  .updates__rss:focus,
  .updates__rss:hover {
    backdrop-filter: blur(0.5em);
    -webkit-backdrop-filter: blur(0.5em);
    background: oklch(var(--oklch-ink) / 0.08);
    color: var(--color-ink-4);
  }

  .updates__rss:active {
    transform: scale(0.9);
  }

}

@media(hover: hover) and (prefers-color-scheme: dark) {

  .updates__rss:focus,
  .updates__rss:hover {
    color: var(--color-ink);
  }

}

@media(hover: hover) {

  .dark .updates__rss:focus,
  .dark .updates__rss:hover {
    color: var(--color-ink);
  }

}