/* Only the Most / IQB left main fields become full-area image surfaces. */
.hero-most,
.project-mark {
  position: relative;
  isolation: isolate;
  min-height: max(34rem, calc(100svh - var(--header-offset, var(--header-height))));
  background: var(--ink);
  color: var(--white);
}
.hero-most > .panel-meta,
.project-mark > .panel-meta {
  position: relative;
  z-index: 2;
  background: rgb(0 0 0 / 72%);
  border-color: var(--light-line);
}
.hero-most > .main-display,
.project-mark > .main-display {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: stretch;
  min-width: 0;
}
.project-mark > .main-display { flex: 1; }
.main-display::before {
  content: "";
  position: relative;
  z-index: 1;
  height: 4rem;
  flex: none;
  background: linear-gradient(transparent, rgb(0 0 0 / 82%));
  pointer-events: none;
}
/* Retain the document's h1 and section label without an oversized visual mark. */
.main-display > .wordmark,
.project-mark > .main-display > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.main-slideshow { min-width: 0; }
.main-slide-stage { display: grid; }
.main-slide { grid-area: 1 / 1; min-width: 0; margin: 0; pointer-events: none; }
.main-slide.is-current { pointer-events: auto; }
.main-slide img,
.main-slide figcaption {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.main-slide.is-current img,
.main-slide.is-current figcaption { opacity: 1; visibility: visible; }
/* The containing block is the whole hero-most / project-mark, not a small frame. */
.main-slide img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--slide-position, 50% 50%);
  pointer-events: none;
}
.main-slide figcaption {
  position: relative;
  z-index: 1;
  min-height: 3.5rem;
  padding: .75rem var(--gutter);
  background: rgb(0 0 0 / 82%);
  font-size: .875rem;
  line-height: 1.4;
}
.main-slide-controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .75rem;
  min-height: 3rem;
  padding: .2rem var(--gutter);
  border-top: 1px solid var(--light-line);
  background: rgb(0 0 0 / 82%);
  font-size: .875rem;
}
.main-slide-controls > span { margin-right: auto; font-variant-numeric: tabular-nums; }
.main-slide-controls button { min-height: 44px; padding: .45rem .25rem; border: 0; background: none; }
.main-slide-controls button:hover { text-decoration: underline; text-underline-offset: .25em; }
.hero-most > .hero-intro,
.project-mark > p {
  position: relative;
  z-index: 2;
  background: rgb(0 0 0 / 82%);
  border-color: var(--light-line);
}
.main-slide-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .hero-most,
  .project-mark { min-height: max(32rem, calc(100svh - var(--header-offset, var(--header-height)))); }
}
@media (max-width: 540px) {
  .main-slide img { object-position: var(--slide-mobile-position, var(--slide-position, 50% 50%)); }
  .main-slide figcaption { min-height: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .main-slide img,
  .main-slide figcaption { transition: none; }
}