/* Missing artist artwork: 6 compositions × 8 palettes = 48 distinct title cards. */
.pf-thumb-img > .pf-ph, .pf-reel-item > .pf-ph { display: none; }
html body .pf-thumb.is-ph .pf-thumb-img {
  display: block; padding: 0; aspect-ratio: 4 / 5 !important;
  max-height: 420px; background: transparent;
}
html body .pf-thumb.is-ph .pf-thumb-img > img,
.pf-reel-item.is-blank > img,
.pf-thumb.is-ph .pf-thumb-play,
.pf-thumb.is-ph .pf-thumb-t { display: none !important; }
.pf-thumb.is-ph .pf-thumb-img > .pf-ph,
.pf-reel-item.is-blank > .pf-ph { display: flex; }

.pf-ph[data-palette="0"] { --ph-base: #211b1a; --ph-accent: #c5664b; --ph-paper: #f1e9dd; }
.pf-ph[data-palette="1"] { --ph-base: #20251f; --ph-accent: #99a77c; --ph-paper: #eee9d9; }
.pf-ph[data-palette="2"] { --ph-base: #1b252b; --ph-accent: #7ba6af; --ph-paper: #e8eeec; }
.pf-ph[data-palette="3"] { --ph-base: #29202a; --ph-accent: #b989a2; --ph-paper: #f2e9ed; }
.pf-ph[data-palette="4"] { --ph-base: #292216; --ph-accent: #c5a263; --ph-paper: #f3ebd9; }
.pf-ph[data-palette="5"] { --ph-base: #1c2130; --ph-accent: #8299c3; --ph-paper: #e9ecf2; }
.pf-ph[data-palette="6"] { --ph-base: #30201f; --ph-accent: #bd8676; --ph-paper: #f1e6e0; }
.pf-ph[data-palette="7"] { --ph-base: #1a2522; --ph-accent: #a8bbaa; --ph-paper: #e9eee5; }

.pf-ph {
  position: absolute; inset: 0; flex-direction: column; isolation: isolate;
  overflow: hidden; padding: clamp(16px, 9%, 30px);
  background: radial-gradient(85% 60% at 48% 32%, color-mix(in srgb, var(--ph-accent) 18%, transparent), transparent 86%), var(--ph-base);
  color: var(--ph-paper);
}
.pf-ph::before {
  content: none;
}
.pf-ph::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 26%, color-mix(in srgb, var(--ph-base) 20%, transparent) 55%, var(--ph-base) 93%);
}
.pf-ph-k {
  position: relative; z-index: 3; font: 500 9px/1.4 var(--k-font-mono);
  letter-spacing: .2em; text-transform: uppercase;
}
.pf-ph-k::after { content: none; }
.pf-ph-title {
  position: relative; z-index: 3; display: block; max-width: 100%;
  margin-top: auto; font: 400 clamp(22px, 2.25vw, 38px)/1.03 var(--k-font-logo);
  letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere;
}
.pf-ph-title.is-long { font-size: clamp(18px, 1.75vw, 29px); }
.pf-ph-foot {
  position: relative; z-index: 3; display: flex; justify-content: space-between;
  gap: 12px; margin-top: 17px; padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--ph-paper) 22%, transparent);
  font: 400 8px/1.35 var(--k-font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.pf-ph-foot em { font-style: normal; }
.pf-ph-form {
  position: absolute; z-index: 0; top: 17%; left: 12%;
  width: 76%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ph-accent); box-shadow: 0 0 60px color-mix(in srgb, var(--ph-accent) 18%, transparent);
}
.pf-ph-form::before, .pf-ph-form::after { content: ''; position: absolute; display: block; }

/* Disc and cut, orbit, arch, bands, diamond, eclipse. */
.pf-ph[data-layout="0"] .pf-ph-form::after {
  inset: -8% -28% -8% 57%; background: var(--ph-base);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.pf-ph[data-layout="1"] .pf-ph-form {
  top: 12%; left: -22%; width: 94%; border: 24px solid var(--ph-accent);
  background: transparent; box-shadow: none;
}
.pf-ph[data-layout="1"] .pf-ph-form::before {
  width: 24%; aspect-ratio: 1; right: -37%; top: 3%;
  border-radius: 50%; background: var(--ph-accent);
}
.pf-ph[data-layout="1"] .pf-ph-title { align-self: flex-end; text-align: right; }
.pf-ph[data-layout="2"] .pf-ph-form {
  top: -12%; left: 52%; width: 48%; height: 86%; aspect-ratio: auto;
  border-radius: 0 0 100px 100px; transform: rotate(13deg);
}
.pf-ph[data-layout="2"] .pf-ph-form::after {
  left: -70%; top: 28%; width: 130%; height: 1px;
  background: var(--ph-paper); transform: rotate(-13deg); opacity: .6;
}
.pf-ph[data-layout="3"] .pf-ph-form {
  top: 12%; left: -18%; width: 128%; height: 26%; aspect-ratio: auto;
  border-radius: 0; transform: rotate(-21deg); box-shadow: 0 95px 0 color-mix(in srgb, var(--ph-accent) 50%, var(--ph-base));
}
.pf-ph[data-layout="3"] .pf-ph-title { align-self: center; text-align: center; }
.pf-ph[data-layout="4"] .pf-ph-form {
  top: 18%; left: 24%; width: 60%; border: 2px solid var(--ph-accent);
  border-radius: 0; background: color-mix(in srgb, var(--ph-accent) 19%, transparent);
  box-shadow: none; transform: rotate(38deg);
}
.pf-ph[data-layout="4"] .pf-ph-form::before {
  inset: 17%; border: 1px solid var(--ph-accent);
}
.pf-ph[data-layout="5"] .pf-ph-form { top: 13%; left: 22%; width: 76%; }
.pf-ph[data-layout="5"] .pf-ph-form::before {
  inset: -1% 32% -1% -34%; border-radius: 50%; background: var(--ph-base);
}
.pf-ph[data-layout="5"] .pf-ph-title { align-self: flex-end; text-align: right; }

@media (max-width: 900px) {
  html body .pf-item > .pf-thumb.is-ph { max-width: 440px !important; justify-self: start !important; }
}
@media (max-width: 430px) {
  .pf-ph-title { font-size: clamp(25px, 7vw, 34px); }
  .pf-ph-title.is-long { font-size: clamp(21px, 5.8vw, 27px); }
}

/* The reel uses the same artwork at its smaller, wide thumbnail size. */
.pf-reel-item > .pf-ph { padding: 14px; }
.pf-reel-item .pf-ph::before { inset: 6px; }
.pf-reel-item .pf-ph-k { font-size: 7px; }
.pf-reel-item .pf-ph-k::after, .pf-reel-item .pf-ph-foot { display: none; }
.pf-reel-item .pf-ph-title { font-size: clamp(15px, 1.55vw, 23px); max-width: 85%; }
.pf-reel-item .pf-ph-title.is-long { font-size: clamp(12px, 1.3vw, 18px); }
.pf-reel-item .pf-ph-form { top: -36%; width: 54%; }

/* New cinematic project rails: use the same unique artwork when a still is absent. */
.pc-card-m > .pf-ph { display: flex; }
.pc-card-m:has(img) > .pf-ph { display: none; }
.pc-card-m:has(> .pf-ph:not(:empty)):not(:has(img)) { background: #211b1a; }
.pc-card-m > .pf-ph { padding: clamp(18px, 7%, 34px); }
.pc-card-m > .pf-ph .pf-ph-form { top: -23%; left: 38%; width: 62%; }
.pc-card-m > .pf-ph .pf-ph-title { font-size: clamp(24px, 2.7vw, 42px); max-width: 80%; }
.pc-card-m > .pf-ph .pf-ph-title.is-long { font-size: clamp(20px, 2.15vw, 32px); }
.pc-card-m > .pf-ph .pf-ph-foot { margin-top: 11px; padding-top: 9px; }
.pc-card-m > .pf-ph .pf-ph-k { font-size: 9px; }
.pc-card-m > .pf-ph { padding:clamp(22px,6%,42px); }
.pc-card-m > .pf-ph .pf-ph-title {
  max-width:82%; font:500 clamp(32px,4.2vw,64px)/.99 var(--k-font-body);
  letter-spacing:-.055em;
}
.pc-card-m > .pf-ph .pf-ph-title.is-long { font-size:clamp(25px,3.1vw,46px); }
.pc-card-m > .pf-ph .pf-ph-k { font:400 10px/1.3 var(--k-font-mono); letter-spacing:.15em; }
.pc-card-m > .pf-ph .pf-ph-foot { display:none; }
.pc-card-m:not(:has(img))::after { display: none; }
.pc-card-m:not(:has(img)) .pc-card-play { background:#f2f2f0; }
@media (max-width: 900px) {
  .pc-card-m > .pf-ph .pf-ph-title { font-size: clamp(25px, 7vw, 36px); }
  .pc-card-m > .pf-ph .pf-ph-title.is-long { font-size: clamp(20px, 5.6vw, 28px); }
}

/* The light switch also changes the hero instead of leaving a black island. */
html[data-theme="light"] .pc-hero { --bg:#f4f0e9; --ink:#211d19; --ink2:rgba(33,29,25,.76); --ink3:rgba(33,29,25,.58); --line:rgba(33,29,25,.2); background:#f4f0e9; }
html[data-theme="light"] .pc-hero .pc-shade { background:linear-gradient(90deg,#f4f0e9 0,#f4f0e9 28%,rgba(244,240,233,.86) 48%,rgba(244,240,233,.08) 90%),linear-gradient(0deg,#f4f0e9 0,transparent 35%); }
html[data-theme="light"] .pc-hero .pc-img { filter:grayscale(.23) contrast(1.02) brightness(1.06); }
html[data-theme="light"] .pc-hero .pc-lit { filter:grayscale(0) contrast(1.02) brightness(1.15); }
html[data-theme="light"] .pc-hero .pc-brand img { filter:brightness(0); }
@media (max-width:900px) {
  html[data-theme="light"] .pc-hero .pc-shade { background:linear-gradient(0deg,#f4f0e9 0,rgba(244,240,233,.94) 20%,rgba(244,240,233,.05) 65%),linear-gradient(180deg,rgba(244,240,233,.55),transparent 25%); }
}