/* The page is an opaque foreground sheet. The sticky archive sits beneath it
   in normal document flow, so its full height remains reachable when scrolling. */
body:has(.reveal-front) { isolation: isolate; }
.reveal-front { position: relative; z-index: 2; background: var(--paper); padding-bottom: 40px; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .8); }
.reveal-foundation { --foundation-paper: #f5f5f5; position: sticky; bottom: 0; z-index: 1; background: var(--foundation-paper); color: #25282b; padding-top: 40px; }
.reveal-archive { width: 100%; }
.reveal-foundation::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(35, 39, 44, .24), rgba(35, 39, 44, .86) 52%, rgba(35, 39, 44, .68)); opacity: 0; transition: opacity .4s ease; }
.reveal-foundation .archive-marquee-section { margin: 0; padding: 0; border: 0; }
.reveal-foundation .archive-marquee { --row-height: clamp(110px, 18vh, 200px); --row-height: clamp(110px, 18svh, 200px); isolation: auto; }
/* Keep the resting white fade below the full-foundation hover overlay. */
.reveal-foundation .archive-marquee-rows { position: relative; z-index: 0; }
.reveal-foundation .archive-marquee-rows::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 40%, rgba(245, 245, 245, .3) 70%, var(--foundation-paper) 100%); }
.reveal-foundation .archive-marquee-link { z-index: 2; }
.reveal-foundation .archive-marquee-link::before,
.reveal-foundation .archive-marquee-link::after { content: none; }
.reveal-foundation .site-footer { position: relative; z-index: 2; pointer-events: none; margin-top: 24px; padding-bottom: 32px; border-color: #25282b30; color: #55595e; transition: color .4s ease, border-color .4s ease; }
.reveal-foundation:focus-within::after,
.reveal-foundation:focus-within .archive-marquee-link span { opacity: 1; }
.reveal-foundation:focus-within .site-footer { color: #f5f5f5; border-color: #ffffff40; }
@media (hover: hover) {
  .reveal-foundation:hover::after,
  .reveal-foundation:hover .archive-marquee-link span { opacity: 1; }
  .reveal-foundation:hover .site-footer { color: #f5f5f5; border-color: #ffffff40; }
}
@media (hover: none) {
  .reveal-foundation::after { opacity: 1; }
  .reveal-foundation .site-footer { color: #f5f5f5; border-color: #ffffff40; }
}
@media (max-width: 700px) {
  .reveal-front { padding-bottom: 16px; }
  .reveal-foundation { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-foundation::after,
  .reveal-foundation .site-footer { transition: none; }
}
/* Short windows and reduced-motion settings use ordinary flowing content. */
@media (max-height: 480px), (prefers-reduced-motion: reduce) {
  .reveal-foundation { position: relative; }
}