/* Producer Coverflow — baseline (no border, no glow) */
:root{
  --cf-perspective: 1200px;
  --cf-rotate: 48deg;
  --cf-gap: clamp(140px, 26vw, 420px);
  --cf-depth: 150px;
  --cf-scale-active: 1;
  --cf-scale-side: .86;
  --cf-shadow: 0 24px 60px rgba(0,0,0,.55);
  --cf-duration: 360ms;
  --cf-ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 64px;
  --footer-h: 54px;
}

/* --- Hard resets to eliminate default rings/lines --- */
*,
*::before,
*::after { box-sizing: border-box; }
*:focus { outline: 0 !important; }
a, a:focus, a:active, a:focus-visible { outline: 0 !important; }
img, a img { border: 0 !important; outline: 0 !important; }
.cf-link { -webkit-tap-highlight-color: transparent; }

/* Sometimes UA paints a 1px focus ring on images inside links (WebKit).
   Belt & suspenders: remove any border/outline and clip edges cleanly. */
.cf-cover {
  border: 0 !important;
  outline: 0 !important;
  background-clip: padding-box;
}

/* Suppress any accidental horizontal/vertical scroll from 3D transforms */
.cf-root{
  width:100%;
  max-width:1600px;
  margin-inline:auto;
  padding:0;
  overflow:hidden;
}

/* Stage fills viewport between header/footer */
.cf-stage{
  position:relative;
  height: calc(100svh - var(--header-h) - var(--footer-h));
  perspective: var(--cf-perspective);
  transform-style: preserve-3d;
  overflow: visible;
  z-index: 3;
}

/* 3D items */
.cf-item{
  position:absolute;
  top:50%;
  left:50%;
  transform-style: preserve-3d;
  transition:
    transform var(--cf-duration) var(--cf-ease),
    z-index var(--cf-duration) var(--cf-ease),
    filter var(--cf-duration) var(--cf-ease);
  will-change: transform, filter;
  filter: saturate(.95) contrast(1);

  /* Reduce hairline seams on GPU layers (Safari/Chrome) */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Cover images — responsive, no visual adornments */
.cf-item .cf-cover{
  display:block;
  width: clamp(220px, 32vw, 520px);
  max-height: min(70vh, calc(100svh - var(--header-h) - var(--footer-h) - 24px));
  height: auto;
  border-radius: 12px;
  box-shadow: var(--cf-shadow);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;

  /* Nudge onto GPU to avoid subpixel “white hairline” on some devices */
  transform: translateZ(0);
}

/* Caption & date */
.cf-caption{
  margin: 14px 0 4px;
  text-align: center;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 600;
  opacity: .95;
}
.cf-date{
  display:block;
  text-align:center;
  font-size: 12px;
  color: #bdbdbd;
}

/* Nav buttons */
.cf-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #3a3a3a;
  background: rgba(10,10,10,.65);
  color: #fff;
  cursor: pointer;
  z-index: 4;
  transition: background .2s ease, transform .2s ease;
}
.cf-nav:hover{ background: rgba(20,20,20,.8); transform: translateY(-50%) scale(1.05); }
.cf-prev{ left: 18px; }
.cf-next{ right: 18px; }

/* Empty state */
.cf-empty{
  position:absolute; inset:0;
  display:grid; place-items:center; text-align:center;
  color:#cfcfcf;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cf-item{ transition: none; }
}

/* Narrow screens */
@media (max-width: 480px){
  :root{ --cf-gap: 56vw; }
  .cf-item .cf-cover{ width: clamp(200px, 64vw, 340px); }
}



/* Home link: blurred until hover */
.pf-home-link{
  font-size: 4em;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  filter: blur(2px);
  transition: filter 0.35s ease, opacity 0.35s ease;
  opacity: 0.7;
}
.pf-home-link:hover{
  filter: blur(0);
  opacity: 1;
}

.pf-home a {border:none;}