/* News cards follow the site's glass controls without changing article content. */
.header { flex-shrink: 0; }
.footer { position: static; flex-shrink: 0; padding: 1rem 0; }

.legalText {
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  min-height: 0;
  padding: 1.5rem clamp(1rem, 5vw, 3rem);
  gap: 1rem;
  /* Fade the scrolling cards into the actual page artwork at both edges. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 20%) 0.375rem, rgb(0 0 0 / 80%) 1.125rem, #000 1.5rem, #000 calc(100% - 1.5rem), rgb(0 0 0 / 80%) calc(100% - 1.125rem), rgb(0 0 0 / 20%) calc(100% - 0.375rem), transparent);
  mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 20%) 0.375rem, rgb(0 0 0 / 80%) 1.125rem, #000 1.5rem, #000 calc(100% - 1.5rem), rgb(0 0 0 / 80%) calc(100% - 1.125rem), rgb(0 0 0 / 20%) calc(100% - 0.375rem), transparent);
}

.header2 {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 5vw, 3rem) 0.25rem;
  font-size: clamp(2rem, 4vh, 3rem);
  line-height: 1.2;
}

.post-item {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  grid-template-columns: clamp(96px, 17vw, 192px) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.25rem;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 32px;
  background: linear-gradient(135deg, rgb(255 255 255 / 26%), rgb(255 255 255 / 14%) 55%, rgb(255 255 255 / 23%));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.post-item > div { min-width: 0; }
.post-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 24px;
  background: transparent;
}

.post-title { font-size: 2rem; line-height: 1.2; }
.post-item:hover .post-title { text-decoration: none; }
.post-meta { font-size: 1.5rem; line-height: 1.35; margin: 0.35rem 0 0.5rem; }
.post-excerpt { font-size: 1.5rem; line-height: 1.35; }


.post-item:hover { background-color: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 85%); }
.post-item:focus-visible { outline: 2px solid white; outline-offset: 3px; }

@media (min-width: 601px) and (max-width: 800px) {
  .post-title { font-size: 1.5rem; }
  .post-meta, .post-excerpt { font-size: 1.125rem; }
}

@media (max-width: 600px) {
  .post-item { grid-template-columns: 64px minmax(0, 1fr); gap: 0.875rem; padding: 1rem; border-radius: 24px; align-items: start; }
  .post-thumb { border-radius: 16px; }
  .post-title { font-size: 1.25rem; }
  .post-meta, .post-excerpt { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .post-item { transition: none; }
}