/*! pedromujica core 1.6.2 · pm-collage.css */
/* PMCollage look: the project grid behind a page, grayscale and dimmed; the pointer pans it and lights the
   tile under it with its caption. Site tokens:
   --collage-dim / --collage-lit   grid and lit-tile opacity
   --collage-veil                  overlay that keeps the site's copy readable (default: top and bottom only)
   --pmc-mono, --pmc-accent        caption font and kind colour */
/* Defaults with zero specificity (:where), so any site rule overrides them, loaded before or after. */
:where(.pm-collage) {
  --collage-dim: 0.26;
  --collage-lit: 0.78;
  --collage-veil: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, 0.6) 100%);
}
@media (max-width: 899px) {
  :where(.pm-collage) { --collage-dim: 0.18; }
}
:where(:root[data-theme="light"] .pm-collage) {
  --collage-dim: 0.2;
  --collage-lit: 0.9;
  --collage-veil: linear-gradient(to bottom, rgba(244, 243, 239, 0.6) 0%, rgba(244, 243, 239, 0) 18%, rgba(244, 243, 239, 0) 82%, rgba(244, 243, 239, 0.65) 100%);
}

.pm-collage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.pm-collage.is-ready { opacity: 1; }
.pm-collage__grid {
  position: absolute;
  left: 0;
  top: 0;
  width: max(150vw, 286vh);
  aspect-ratio: 3642 / 1527;
  will-change: transform;
}
.pm-collage__img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--collage-dim);
}
.pm-collage__hl {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  overflow: hidden;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.35s ease;
  box-shadow: inset 0 0 0 1px rgba(232, 54, 54, 0.55);
}
.pm-collage__hl.is-on { opacity: var(--collage-lit); }
.pm-collage__hl::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0) 70%);
}
.pm-collage__hl b,
.pm-collage__hl span {
  position: relative;
  display: block;
  font-family: var(--pmc-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.56rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #f2efe6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-collage__hl b {
  font-weight: 500;
  color: var(--pmc-accent, #e83636);
  text-transform: uppercase;
}
/* Keeps the site's copy readable over the grid. */
.pm-collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--collage-veil);
}
/* Light theme: the grid as a faint print on paper. */
:root[data-theme="light"] .pm-collage__img { mix-blend-mode: multiply; }