/* Tag collection page (tag.hbs). Hand-written, not built by vite.
   A dark stage in both themes, like the licensing landing: the covers of the
   tag's own stories drift past in rows; no accent colour. */

.dmr-col {
  --dmr-col-ink: hsl(240, 10%, 6%);
  --dmr-col-paper: hsl(0, 0%, 100%);
  --dmr-col-gap: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 86vh;
  min-height: 86svh;
  overflow: hidden;
  background: var(--dmr-col-ink);
  color: var(--dmr-col-paper);
  isolation: isolate;
}

/* ---- stage: the tag's own image, then the drifting rows over it ---- */

.dmr-col__stage {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.dmr-col__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity 1.2s ease;
}

.dmr-col.has-wall .dmr-col__still {
  opacity: 0;
}

/* A slightly receding table of prints, from the very top (behind the header). */
.dmr-col__wall {
  position: absolute;
  inset: 0 -6% -4%;
  display: flex;
  flex-direction: column;
  gap: var(--dmr-col-gap);
  transform: perspective(80rem) rotateX(12deg) scale(1.06);
  transform-origin: 50% 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.dmr-col.has-wall .dmr-col__wall {
  opacity: 1;
}

.dmr-col__row {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.dmr-col__track {
  display: flex;
  gap: var(--dmr-col-gap);
  width: max-content;
  height: 100%;
  animation: dmr-col-drift var(--dmr-col-speed, 120s) linear infinite;
  will-change: transform;
}

.dmr-col__row.is-back .dmr-col__track {
  animation-direction: reverse;
}

.dmr-col__row:hover .dmr-col__track,
.dmr-col.is-paused .dmr-col__track {
  animation-play-state: paused;
}

@keyframes dmr-col-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--dmr-col-gap) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  .dmr-col__track {
    animation: none;
  }
}

/* Each print links to its story; the same links are in the list below, so
   the prints stay out of the tab order and the accessibility tree. */
.dmr-col__print {
  position: relative;
  display: block;
  flex: none;
  height: 100%;
  overflow: hidden;
  border-radius: 0.375rem;
  background: hsl(240, 6%, 14%);
  color: inherit;
  text-decoration: none;
}

.dmr-col__print img {
  display: block;
  width: auto;
  height: 100%;
  filter: saturate(0.85);
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.dmr-col__print img.is-in {
  opacity: 1;
}

.dmr-col__print span {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 0.75rem 0.625rem;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 14, 0.85));
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(0.375rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (hover: hover) {
  .dmr-col__row:hover .dmr-col__print img {
    filter: brightness(0.75);
  }

  .dmr-col__row:hover .dmr-col__print:hover img {
    filter: none;
    transform: scale(1.04);
  }

  .dmr-col__print:hover span {
    opacity: 1;
    transform: none;
  }
}

/* The scrim lets the prints through at the top and darkens where the words sit. */
.dmr-col__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 20% 85%, rgba(10, 10, 14, 0.7) 0%, rgba(10, 10, 14, 0) 60%),
    linear-gradient(180deg, rgba(10, 10, 14, 0.5) 0%, rgba(10, 10, 14, 0.2) 20%, rgba(10, 10, 14, 0.5) 45%, rgba(10, 10, 14, 0.9) 72%, rgba(10, 10, 14, 0.98) 100%);
}

/* ---- words ---- */

.dmr-col__intro {
  position: relative;
  width: 100%;
  max-width: var(--max-width-container, 72.5rem);
  margin: 0 auto;
  padding: 10rem 1.25rem 4.75rem;
  pointer-events: none;
}

.dmr-col__intro a,
.dmr-col__intro button {
  pointer-events: auto;
}

.dmr-col__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  margin: 0 0 0.875rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.dmr-col__dot {
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 50%;
  background: currentColor;
}

.dmr-col__years {
  font-variant-numeric: tabular-nums;
}

.dmr-col__title {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.75rem, 11vw, 7.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.dmr-col__title.is-long {
  max-width: 20ch;
  font-size: clamp(2.25rem, 8vw, 5.25rem);
  line-height: 1.02;
}

.dmr-col__about {
  max-width: 36rem;
  margin-top: 1.25rem;
}

.dmr-col__description {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  opacity: 0.86;
  text-wrap: pretty;
}

.dmr-col__about.is-folded .dmr-col__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dmr-col__more {
  margin: 0.5rem 0 0;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  opacity: 0.8;
  cursor: pointer;
}

.dmr-col__more:hover,
.dmr-col__more:focus-visible {
  opacity: 1;
}

.dmr-col__more[hidden],
.dmr-col__inside[hidden] {
  display: none;
}

.dmr-col__inside {
  margin-top: 1.75rem;
}

.dmr-col__inside-label {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.dmr-col__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dmr-col__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 0.875rem 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(10, 10, 14, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dmr-col__chip small {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.dmr-col__chip:hover,
.dmr-col__chip:focus-visible {
  border-color: var(--dmr-col-paper);
  background: var(--dmr-col-paper);
  color: var(--dmr-col-ink);
}

.dmr-col__down {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  display: flex;
  padding: 0.375rem;
  color: inherit;
  opacity: 0.55;
  transform: translateX(-50%);
  transition: opacity 200ms linear;
}

.dmr-col__down:hover,
.dmr-col__down:focus-visible {
  opacity: 1;
}

@media only screen and (min-width: 45rem) {
  .dmr-col__intro {
    padding: 12rem 2.5rem 6rem;
  }

  .dmr-col__description {
    font-size: 1.1875rem;
  }

  .dmr-col__eyebrow,
  .dmr-col__inside-label {
    font-size: 0.8125rem;
  }
}

/* ---- the story list slides up over the stage's lower edge ---- */

html:not([data-damirissimo-content-peek='false']) .dmr-col__stories {
  position: relative;
  z-index: 2;
  margin-top: -1.75rem;
}

html:not([data-damirissimo-content-peek='false']) .dmr-col__stories .g-posts-grid__item:first-child .g-post-card {
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: 0 -0.875rem 1rem -1rem rgba(0, 0, 0, 0.5);
}

html:not([data-damirissimo-content-peek='false']) .dmr-col:has(+ .dmr-col__stories) .dmr-col__down {
  bottom: 2.75rem;
}

html:not([data-damirissimo-content-peek='false']) .dmr-col__intro {
  padding-bottom: 6.25rem;
}

@media only screen and (min-width: 45rem) {
  html:not([data-damirissimo-content-peek='false']) .dmr-col__stories {
    margin-top: -3rem;
  }

  html:not([data-damirissimo-content-peek='false']) .dmr-col__stories .g-posts-grid__item:nth-child(2) .g-post-card {
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -0.875rem 1rem -1rem rgba(0, 0, 0, 0.5);
  }

  html:not([data-damirissimo-content-peek='false']) .dmr-col__intro {
    padding-bottom: 7.5rem;
  }
}