/* ============================================================================
   KJPTV — Cast & Crew Profile furniture
   Linked by Cast & Crew Profile.html only. Shared shell lives in site.css;
   .row-head comes from catalog.css; .dt-person cards from title-detail.css.
   ========================================================================== */

/* ---- Hero: display name with the portrait standing over it ---------------- */
.pf-hero { position: relative; overflow: clip; padding: calc(var(--nav-height) + 34px) 0 0; }
.pf-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('assets/brand-pattern.png?v=59e9ff10') center top / 420px repeat;
  opacity: 0.03; mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.pf-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(56% 52% at 50% 66%, rgba(214,157,56,0.10) 0%, rgba(6,6,6,0) 72%);
}
.pf-hero .container { position: relative; z-index: 2; }

/* The shared .gold-text shrink-wrap would hand fitName() its own content width to
   measure against, and cancel the centring below. The display name keeps its box. */
/* Same centring trap as .pf-name, one level down: the name is a stretched flex item
   whose text-align does the centring, so it must not shrink-wrap. */
.pf-award-name.gold-text { width: auto; }
.pf-name.gold-text { width: auto; }
.pf-name {
  position: relative; z-index: 1; margin: 0; text-align: center;
  white-space: nowrap; text-transform: uppercase;
  font-size: calc(var(--size-display) * 1.9667); font-weight: 900; line-height: 0.84; letter-spacing: -0.045em;
}
.pf-stage {
  position: relative; margin-top: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 30%) minmax(0, 1fr);
  gap: 40px; align-items: end;
}

/* Cut-out figure: transparent PNG standing on the section floor, star glow behind.
   The negative top margin lets ONLY the portrait rise into the display name — the row
   (and with it the text columns) stays below the letters. */
.pf-figure { position: relative; z-index: 2; aspect-ratio: 3 / 4; min-height: 430px; margin-top: var(--pf-lift, 0px); }
.pf-figure::before {
  content: ''; position: absolute; left: 50%; top: 44%; width: 118%; aspect-ratio: 1212 / 1188;
  transform: translate(-50%, -50%);
  background: url('assets/star-glow.png?v=e3bc8250') center / contain no-repeat; opacity: 0.42;
}
.pf-figure::after {
  content: ''; position: absolute; left: -14%; right: -14%; bottom: -12px; height: 84px;
  background: radial-gradient(56% 100% at 50% 100%, rgba(0,0,0,0.88) 0%, rgba(6,6,6,0) 74%);
}
.pf-figure img {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,0.72));
}
/* No photo yet: the star, the initials and the note — no card under them */
.pf-figure.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.pf-figure.is-empty::after { display: none; }
.pf-figure.is-empty::before { width: 92%; opacity: 0.32; }
.pf-figure-initials { position: relative; z-index: 1; font-size: calc(var(--size-display) * 0.9667); font-weight: 900; letter-spacing: -0.03em; color: var(--gold-mustard); }
.pf-figure-note { position: relative; z-index: 1; font-size: calc(var(--size-meta) * 0.8636); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

/* Left column — role, lede, bio. Text columns lift off the facts rule; the figure
   stays flush so the portrait stands ON the line of the section below. */
.pf-intro { padding-bottom: 54px; }
.pf-lede { margin: 12px 0 0; font-size: clamp(calc(var(--size-heading) * 0.5938), 1.7vw, calc(var(--size-heading) * 0.7813)); font-weight: 800; line-height: 1.2;
  letter-spacing: 0.005em; text-transform: uppercase; color: var(--text-heading); text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pf-blurb { margin: 16px 0 0; max-width: 42ch; font-size: calc(var(--size-body) * 1.0714); line-height: 1.65; color: var(--text-body); text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pf-blurb.is-clickable { cursor: pointer; transition: color var(--dur-base) var(--ease-out); }
.pf-blurb.is-clickable:hover { color: var(--text-heading); }
.pf-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
.pf-read { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0;
  background: none; cursor: pointer; font: inherit; font-size: var(--size-small); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-mustard); }
.pf-read svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.pf-read:hover svg { transform: translateX(3px); }
.pf-intro .text-link { margin-top: 0; color: var(--gold-mustard); }

/* Contact + profile links */
.pf-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pf-links .pf-ed-fields { flex: 1 0 100%; }
.pf-link { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  color: var(--gold-mustard); background: var(--glass-sheen), rgba(9,9,9,0.7);
  border: 1px solid var(--border-bevel-strong); box-shadow: var(--glass-edge);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pf-link:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.pf-link svg { width: 17px; height: 17px; }
.pf-link-imdb span { font-size: calc(var(--size-meta) * 0.7727); font-weight: 900; letter-spacing: 0.02em; }

/* Right column — seal, followers, follow */
.pf-side { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; padding-bottom: 54px; }
.pf-seal { width: 132px; height: 132px; position: relative; opacity: 0.9; }
.pf-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-seal-ring { fill: none; stroke: var(--border-gold); stroke-width: 1; }
.pf-seal text { fill: var(--gold-mustard); font-size: calc(var(--size-meta) * 0.7455); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; }
.pf-seal img { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.pf-side-followers { display: inline-flex; align-items: center; gap: 8px; font-size: calc(var(--size-small) * 1.0833); font-weight: 700;
  color: var(--text-body); font-variant-numeric: tabular-nums; }
.pf-side-followers svg { width: 15px; height: 15px; color: var(--gold-mustard); }

/* ---- Working details strip ---------------------------------------------------
   On desktop this panel sits IN FRONT of the hero (z-index above .pf-figure) and
   is pulled up 20px, so the portrait reads as standing behind it instead of being
   sliced by a hairline. The thin divider is mobile-only. */
#details { position: relative; z-index: 3; }
#details::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--color-onyx); }
.pf-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-bevel-strong); }
.pf-fact { padding: 22px 26px; border-left: 1px solid var(--border-bevel); min-width: 0; }
.pf-fact:first-child { border-left: 0; padding-left: 0; }
.pf-fact:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.pf-fact-l { display: block; font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.pf-fact-v { display: block; margin-top: 9px; font-size: calc(var(--size-body) * 1.1071); font-weight: 700; letter-spacing: -0.01em; color: var(--text-heading); }

/* ---- Reel & Portfolio tiles (numbered, media-first) --------------------- */
.pf-work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pf-tile { position: relative; display: block; width: 100%; padding: 0; text-align: left; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--border-bevel-strong);
  background: radial-gradient(118% 90% at 50% 30%, #161414 0%, #0c0b0b 60%, #060606 100%);
  box-shadow: var(--bevel-highlight); cursor: default; font: inherit; color: inherit;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pf-tile[data-video] { cursor: pointer; }
.pf-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.5; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.pf-tile:hover { border-color: var(--border-gold); transform: translateY(-3px); }
.pf-tile:hover .pf-tile-img { transform: scale(1.04); opacity: 0.62; }
.pf-tile-num { position: absolute; z-index: 2; top: 16px; left: 18px; font-size: calc(var(--size-small) * 1.0833); font-weight: 800;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--gold-mustard); }
.pf-tile-body { display: block; position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; }
.pf-tile-name { display: block; font-size: calc(var(--size-body) * 1.1429); font-weight: 800; letter-spacing: -0.015em; color: var(--text-heading); text-wrap: pretty; }
.pf-tile-kind { display: block; margin-top: 7px; font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-mustard); }
.pf-tile-knob { position: absolute; z-index: 2; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #2a1e08;
  background: var(--gold-knob); box-shadow: var(--bevel-highlight), 0 8px 20px rgba(0,0,0,0.55), var(--gold-glow); }
.pf-tile-knob svg { width: 18px; height: 18px; margin-left: 2px; }
/* Clips the 1.04 hover scale: on mobile the media box is smaller than the tile,
   so an unclipped image spilled past the gradient and showed un-dimmed. */
.pf-tile-media { position: absolute; inset: 0; overflow: hidden; }
/* Overspill by a pixel: the media box is aspect-ratio sized, so a fractional
   height left a bright strip of the image below the gradient. */
.pf-tile-media::after { content: ''; position: absolute; inset: -1px;
  background: linear-gradient(180deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0.1) 38%, rgba(6,6,6,0.92) 100%); }

/* ---- Photos gallery: three large over four small ------------------------ */
.pf-photos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.pf-photo { position: relative; grid-column: span 4; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-card); border: 1px solid var(--border-bevel-strong); background: var(--color-surface-1);
  box-shadow: var(--bevel-highlight);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pf-photo:nth-child(n + 4) { grid-column: span 3; aspect-ratio: 1 / 1; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.pf-photo { padding: 0; cursor: pointer; font: inherit; color: inherit; }
.pf-photo.is-empty { display: grid; place-items: end center;
  background: radial-gradient(118% 96% at 50% 38%, #191717 0%, #0c0b0b 58%, var(--color-onyx) 100%);
  box-shadow: inset 0 8px 18px rgba(0,0,0,0.78), inset 0 -3px 5px rgba(255,255,255,0.04), var(--bevel-highlight); }
.pf-photo.is-empty::before { content: ''; position: absolute; left: 50%; top: 46%; width: 58%; aspect-ratio: 1212 / 1188;
  transform: translate(-50%, -50%); background: url('assets/star-glow.png?v=e3bc8250') center / contain no-repeat; opacity: 0.34; }
.pf-photo-n { position: relative; padding-bottom: 16px; font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); }

/* Lightbox */
.pf-lb { position: relative; z-index: 1; width: min(92vw, 1020px); display: grid;
  grid-template-columns: auto auto auto; justify-content: center; align-items: center; justify-items: center; gap: 20px; }
/* The stage takes the photo's own shape — a lightbox that letterboxes or crops
   defeats the point, so nothing is fixed to 4:5 except the empty placeholder. */
.pf-lb-stage { position: relative; width: auto; max-width: 100%; height: auto; max-height: min(78vh, 800px); overflow: hidden;
  border-radius: 18px; border: 1px solid var(--border-bevel-strong); background: var(--color-surface-1);
  box-shadow: var(--bevel-highlight), var(--shadow-matte-lg); display: grid; place-items: center; }
.pf-lb-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(min(78vh, 800px) - 2px); object-fit: contain; }
.pf-lb-stage.is-empty { height: min(76vh, 760px); aspect-ratio: 4 / 5; background: radial-gradient(118% 96% at 50% 38%, #191717 0%, #0c0b0b 58%, var(--color-onyx) 100%); }
.pf-lb-stage.is-empty::before { content: ''; position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 1212 / 1188;
  transform: translate(-50%, -50%); background: url('assets/star-glow.png?v=e3bc8250') center / contain no-repeat; opacity: 0.34; }
.pf-lb-arrow { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--gold-mustard); background: var(--glass-sheen), rgba(9,9,9,0.72);
  border: 1px solid var(--border-bevel-strong); box-shadow: var(--glass-edge);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pf-lb-arrow svg { width: 19px; height: 19px; }
/* Scale, not a lift: a hovering arrow that moves out from under the cursor
   un-hovers itself and oscillates. */
.pf-lb-arrow:hover { border-color: var(--border-gold); transform: scale(1.06); }
.pf-lb-count { grid-column: 2; justify-self: center; margin-top: 4px; font-size: calc(var(--size-meta) * 1.0455); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-photo:hover { border-color: var(--border-gold); transform: translateY(-3px); }
.pf-photo:hover img { transform: scale(1.04); }

/* ---- Skills chips ------------------------------------------------------- */
.pf-skills { display: flex; flex-wrap: wrap; gap: 14px; }
.pf-skill { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 18px;
  border-radius: 999px; border: 1px solid var(--border-bevel-strong); background: var(--color-surface-1);
  box-shadow: var(--bevel-highlight); }
.pf-skill > svg { width: 18px; height: 18px; flex: none; color: var(--gold-mustard); }
.pf-skill-n { font-size: calc(var(--size-body) * 1.0714); font-weight: 700; letter-spacing: -0.01em; color: var(--text-heading); white-space: nowrap; }
.pf-lv { display: inline-flex; align-items: center; gap: 7px; margin-left: 2px; }
.pf-lv img { width: 24px; height: 24px; }
.pf-lv img.is-off { opacity: 0.16; filter: grayscale(1); }

/* ---- Resume: text list of work outside KJPTV --------------------------- */
.pf-resume { column-count: 2; column-gap: 64px; }
.pf-rgroup { break-inside: avoid; margin: 0 0 34px; }
.pf-rgroup h3 { margin: 0 0 12px; font-size: calc(var(--size-subhead) * 1.1667); font-weight: 800; letter-spacing: -0.02em; color: var(--text-heading); }
.pf-ritem { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: start; gap: 18px; padding: 9px 0; }
.pf-ryear { display: grid; place-items: center; height: 24px; border-radius: 999px; font-size: calc(var(--size-meta) * 1.0455); font-weight: 800;
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--gold-mustard);
  background: var(--color-surface-2); border: 1px solid var(--border-bevel-strong); }
.pf-ryear.is-blank { background: none; border: 0; }
.pf-rtext { font-size: calc(var(--size-body) * 1.0357); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.pf-rtext b { font-weight: 700; color: var(--text-heading); }

/* ---- Autobiography modal ------------------------------------------------ */
/* Outranks the shared .plan-modal-head p rule this panel inherits */
.plan-modal-head .pf-story-lede { width: auto; margin: 16px 0 0; font-size: calc(var(--size-heading) * 0.7813); font-weight: 800; letter-spacing: -0.01em;
  text-transform: uppercase; line-height: 1.2; text-wrap: pretty; }
.pf-story { max-height: min(60vh, 560px); overflow-y: auto; overflow-x: hidden; padding-right: 8px;
  /* Room for the last paragraph to reach the reading line */
  padding-bottom: min(40%, 240px); }
.pf-story p { margin: 0 0 18px; font-size: calc(var(--size-subhead) * 0.9444); line-height: 1.7; text-wrap: pretty; color: #F5F5F5;
  transform-origin: left top;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.pf-story p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .pf-story p { color: #F5F5F5; opacity: 1; transform: none; transition: none; }
}

/* ---- Awards ------------------------------------------------------------- */
.pf-awards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pf-award { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  padding: 26px 22px 24px; border-radius: var(--radius-card); border: 1px solid var(--border-bevel-strong);
  background: var(--color-surface-1); box-shadow: var(--bevel-highlight), var(--shadow-matte); }
.pf-award.is-won { border-color: var(--border-gold); box-shadow: var(--bevel-highlight), var(--shadow-matte), 0 0 26px rgba(214,157,56,0.10); }
.pf-statue { position: relative; width: 100%; display: grid; place-items: end center; }
.pf-statue::before { content: ''; position: absolute; left: 50%; bottom: -6px; width: 132px; height: 34px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(214,157,56,0.22) 0%, rgba(6,6,6,0) 72%); }
.pf-statue img { position: relative; height: 176px; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,0.75)); }
.pf-award.is-nom .pf-statue::before { display: none; }
.pf-award.is-nom .pf-statue img { opacity: 0.4; filter: grayscale(0.55) drop-shadow(0 14px 18px rgba(0,0,0,0.7)); }
.pf-award-body { display: flex; flex-direction: column; gap: 8px; }
.pf-award-name { font-size: var(--size-body); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-award-cat { font-size: calc(var(--size-body) * 1.0357); font-weight: 700; line-height: 1.35; color: var(--text-heading); text-wrap: pretty; }
.pf-award-meta { font-size: calc(var(--size-small) * 1.0417); color: var(--text-muted); }
.pf-award-pill { align-self: center; margin-top: 2px; font-size: calc(var(--size-meta) * 0.9091); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; color: #1a1206; background: var(--gold-metallic-135); box-shadow: var(--bevel-highlight); }
.pf-award.is-nom .pf-award-pill { color: var(--text-muted); background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-bevel-strong); box-shadow: none; }
.pf-award-count { display: inline-flex; align-items: center; gap: 10px; font-size: calc(var(--size-small) * 1.0833); color: var(--text-body); }
.pf-award-count b { color: var(--gold-mustard); font-weight: 800; }
.pf-note { font-size: calc(var(--size-meta) * 1.0455); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); }

/* ---- Credits (3-up) ----------------------------------------------------- */
.pf-credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pf-credit { display: block; overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--border-bevel-strong);
  background: var(--color-surface-1); box-shadow: var(--bevel-highlight);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pf-credit:hover { border-color: var(--border-gold); transform: translateY(-3px); }
.pf-credit-art { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.pf-credit-art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.pf-credit:hover .pf-credit-art img { transform: scale(1.04); }
.pf-credit-body { display: block; padding: 16px 18px 18px; border-top: 1px solid var(--border-bevel-strong); }
.pf-credit-role { display: block; font-size: var(--size-meta); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-mustard); }
.pf-credit-title { display: block; margin-top: 8px; font-size: var(--size-subhead); font-weight: 800; letter-spacing: -0.02em; color: var(--text-heading); }
.pf-credit-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }.pf-credit-meta { font-size: calc(var(--size-small) * 1.0417); color: var(--text-muted); }
.pf-credit-go { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-bevel-strong); color: var(--gold-mustard); }
.pf-credit-go svg { width: 14px; height: 14px; }
.pf-credit:hover .pf-credit-go { border-color: var(--border-gold); }

/* ---- Press quotes slider ------------------------------------------------ */
.pf-kw { position: relative; padding-left: 104px; }
.pf-kw-mark { position: absolute; left: 0; top: -18px; font-family: Georgia, 'Times New Roman', serif;
  font-size: calc(var(--size-display) * 2.1333); line-height: 1; font-weight: 700;
  background: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-kw-stage { display: grid; }
.pf-kw-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 46px;
  align-items: start; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out); }
.pf-kw-slide.is-active { opacity: 1; visibility: visible; }
.pf-kw-q { margin: 0; font-size: clamp(calc(var(--size-heading) * 0.5625), 1.6vw, calc(var(--size-heading) * 0.75)); font-weight: 500; line-height: 1.45;
  color: rgba(245,245,245,0.86); text-wrap: pretty; }
.pf-kw-who { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.pf-kw-av { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: calc(var(--size-subhead) * 0.9444); font-weight: 800; color: var(--gold-mustard);
  background: linear-gradient(145deg, #201f1f, #0c0c0c); border: 1px solid var(--border-gold); }
.pf-kw-name { display: block; font-size: var(--size-body); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-heading); }
.pf-kw-out { display: block; margin-top: 6px; font-size: var(--size-meta); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-mustard); }
.pf-kw-role { display: block; margin-top: 5px; font-size: var(--size-small); color: var(--text-muted); }
.pf-kw-nav { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.pf-kw-dots { display: flex; align-items: center; gap: 9px; }
.pf-kw-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.16); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pf-kw-dot.is-active { background: var(--gold-bar); transform: scale(1.25); }
.pf-kw-arrows { display: flex; gap: 10px; margin-left: auto; }
.pf-kw-arrow { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--gold-mustard); background: var(--glass-sheen), rgba(9,9,9,0.7);
  border: 1px solid var(--border-bevel-strong); box-shadow: var(--glass-edge);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pf-kw-arrow svg { width: 16px; height: 16px; }
.pf-kw-arrow:hover { border-color: var(--border-gold); transform: translateY(-2px); }

/* ---- Portal (owner only) ------------------------------------------------ */
.pf-portal { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: 28px 30px; border-radius: 18px; border: 1px solid var(--border-gold);
  background: linear-gradient(120deg, var(--color-surface-2) 0%, #0d0d0d 62%, var(--color-onyx) 100%);
  box-shadow: var(--bevel-highlight), var(--shadow-matte-lg), 0 0 30px rgba(214,157,56,0.08); }
.pf-portal-flag { display: inline-flex; align-items: center; gap: 7px; font-size: calc(var(--size-meta) * 0.9545); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-mustard); }
.pf-portal h3 { margin: 14px 0 0; font-size: calc(var(--size-heading) * 0.7188); font-weight: 800; letter-spacing: -0.02em; color: var(--text-heading); }
.pf-portal p { margin: 10px 0 0; max-width: 56ch; font-size: calc(var(--size-body) * 1.0357); line-height: 1.6; color: var(--text-body); }
/* ---- Saved casting roles (owner only) ----------------------------------- */
.pf-saved-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin-bottom: 22px; }
.pf-saved-bar .chip-filters { flex: 1 1 auto; flex-wrap: wrap; gap: 8px 6px; }
.pf-saved-dl { width: 208px; flex: none; }
.pf-saved-count { flex: none; padding-bottom: 11px; font-size: var(--size-meta); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); }
.pf-saved-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding: 44px 24px; text-align: center; border: 1px dashed var(--border-bevel-strong); border-radius: 18px; }
.pf-saved-none p { max-width: 46ch; font-size: calc(var(--size-body) * 1.0357); line-height: 1.6; color: var(--text-body); }
@media (max-width: 700px) {
  .pf-saved-dl { width: 100%; }
  .pf-saved-count { display: none; }
}

/* Contract & Script Access is invisible to everyone but the profile owner. */
.pf-owner-only { display: none; }
body[data-view="cast"] .pf-owner-only { display: block; }

/* ---- Collaborators ------------------------------------------------------ */
.pf-people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

@media (min-width: 761px) {
  #details { margin-top: -20px; padding-top: 20px; }
}
@media (max-width: 1100px) {
  .pf-name { letter-spacing: -0.05em; }
  .pf-stage { gap: 26px; grid-template-columns: minmax(0, 1fr) minmax(240px, 34%) minmax(0, 1fr); }
  .pf-work, .pf-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-photo, .pf-photo:nth-child(n + 4) { grid-column: span 6; aspect-ratio: 4 / 5; }
  .pf-resume { column-gap: 44px; }
  .pf-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pf-kw-slide { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 760px) {
  .pf-hero { padding-top: calc(var(--nav-height) + 20px); }
  .pf-name { white-space: normal; font-size: clamp(calc(var(--size-display) * 0.6667), 13.5vw, calc(var(--size-display) * 1.0667)); line-height: 0.92; }
  .pf-stage { grid-template-columns: 1fr; gap: 4px; margin-top: 0; }
  .pf-figure { order: -1; margin-top: -6px; min-height: 0; max-width: 380px; margin-left: auto; margin-right: auto; width: 100%; }
  .pf-intro { text-align: center; }
  .pf-blurb { margin-left: auto; margin-right: auto; }
  .pf-intro .text-link { justify-content: center; }
  .pf-actions { justify-content: center; }
  .pf-side { align-items: center; }
  .pf-seal { display: none; }
  .pf-side .follow-lg { width: 100%; justify-content: center; }
  /* Same brand texture as desktop: it has to read as fading out, so the mask
     starts easing off almost immediately and is gone before the portrait. */
  .pf-hero::before { background-size: 300px; opacity: 0.05;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.32) 18%, transparent 40%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.32) 18%, transparent 40%); }
  /* Subtle gold glow sits low, behind the bio under the portrait */
  .pf-hero::after { background: radial-gradient(70% 28% at 50% 84%, rgba(214,157,56,0.07) 0%, rgba(6,6,6,0) 72%); }
  .pf-facts { border-top: 1px solid var(--border-bevel-strong); }
  .pf-figure::after { display: none; }
  .pf-fact { padding: 18px 16px; }
  /* Videos go one-up so the play knob and title get room; credits stay 2-up */
  .pf-work { grid-template-columns: minmax(0, 1fr); }
  .pf-tile { aspect-ratio: auto; }
  .pf-tile-media { position: relative; inset: auto; display: block; overflow: hidden; aspect-ratio: 4 / 5; }
  /* The body is a <span>: without display:block its block children escape the
     inline box and ignore its padding, so the titles ran to the tile edge. */
  .pf-tile-body { display: block; position: static; left: auto; right: auto; bottom: auto; padding: 14px 16px 18px; }
  .pf-tile-name { font-size: calc(var(--size-body) * 1.0714); overflow-wrap: anywhere; }
  /* Arrows move off the photo and flank the count underneath it */
  .pf-lb { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 10px; }
  /* Shorter panel, so the last paragraph needs proportionally more room to
     reach the reading line */
  .pf-story { padding-bottom: min(72%, 380px); }
  .pf-lb-stage { grid-column: 1 / -1; grid-row: 1; height: auto; width: 100%; max-height: 68vh; }
  .pf-lb-stage img { max-height: calc(68vh - 2px); }
  .pf-lb-arrow { position: static; grid-row: 2; transform: none; }
  .pf-lb-arrow.is-prev { grid-column: 1; left: auto; }
  .pf-lb-arrow.is-next { grid-column: 3; right: auto; }
  .pf-lb-count { grid-column: 2; grid-row: 2; align-self: center; margin-top: 0; }
  .pf-credits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pf-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-intro .pf-links { justify-content: center; }
  .pf-photos { gap: 12px; }
  .pf-photo, .pf-photo:nth-child(n + 4) { grid-column: span 6; aspect-ratio: 4 / 5; }
  .pf-resume { column-count: 1; }
  /* long skill names wrap instead of shoving the stars out of the pill */
  .pf-skill { padding: 12px 20px 12px 15px; max-width: 100%; }
  .pf-skill-n { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; min-width: 0; }
  .pf-lv { flex: none; }
  .pf-awards { grid-template-columns: 1fr; }
  .pf-kw { padding-left: 0; padding-top: 54px; }
  .pf-kw-mark { font-size: calc(var(--size-display) * 1.4333); top: -14px; }
  .pf-kw-nav { margin-top: 22px; }
  .pf-portal { padding: 22px; }
  .pf-portal .btn { width: 100%; justify-content: center; }
}

/* ---- Owner edit mode -----------------------------------------------------------
   Cast/crew see a floating pencil (deep inset well) bottom-right; clicking it puts
   body.pf-editing on and every owner-editable field opens up. Edits update the page
   live but stay in memory — the check publishes them to
   localStorage['kjptv:profile:<slug>']; Discard throws them away. */
.pf-edit-fab { position: fixed; right: 30px; bottom: 30px; z-index: 60; display: none; place-items: center;
  width: 58px; height: 58px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--gold-mustard);
  border: 1px solid var(--border-bevel-strong);
  background: radial-gradient(120% 120% at 50% 24%, #1b1919 0%, #0d0c0c 62%, #060606 100%);
  box-shadow: inset 0 7px 16px rgba(0,0,0,0.86), inset 0 -3px 5px rgba(255,255,255,0.05),
    var(--bevel-highlight), var(--shadow-matte-lg);
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
html.kj-pf-edit .pf-edit-fab, html.kj-pf-own .pf-edit-fab { display: grid; }
.pf-edit-fab svg { width: 22px; height: 22px; }
.pf-edit-fab:hover { border-color: var(--border-gold); transform: translateY(-2px); }
body.pf-editing .pf-edit-fab { color: #2a1e08; background: var(--gold-knob);
  box-shadow: var(--bevel-highlight), 0 10px 24px rgba(0,0,0,0.6), var(--gold-glow); }
.pf-edit-note { position: fixed; right: 100px; bottom: 42px; z-index: 60; display: none; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px; font-size: var(--size-small); font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-heading); background: var(--glass-sheen), rgba(9,9,9,0.86);
  border: 1px solid var(--border-gold); box-shadow: var(--glass-edge), var(--shadow-matte); white-space: nowrap; }
.pf-edit-note b { color: var(--gold-mustard); font-weight: 800; }
body.pf-editing .pf-edit-note { display: inline-flex; }

body.pf-editing [contenteditable] { border-radius: 8px; outline: 1px dashed rgba(214,157,56,0.5);
  outline-offset: 3px; background: rgba(214,157,56,0.05); cursor: text; }
body.pf-editing [contenteditable]:focus { outline: 1px solid var(--gold-mustard); background: rgba(214,157,56,0.09); }
body.pf-editing .pf-photo { cursor: default; }
/* Pull-line and bio are edited in the biography panel, not in place — one click opens it */
body.pf-editing #cpTagline, body.pf-editing #cpBlurb { border-radius: 8px; cursor: pointer;
  outline: 1px dashed rgba(214,157,56,0.5); outline-offset: 4px; background: rgba(214,157,56,0.05); }
/* Metallic fill goes invisible under the editing wash — fill it solid gold instead */
body.pf-editing .gold-text [contenteditable] { color: var(--gold-mustard); -webkit-text-fill-color: var(--gold-mustard); }

.pf-ed-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pf-ed-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-size: calc(var(--size-meta) * 1.0455); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-family: inherit;
  color: var(--gold-mustard); background: var(--glass-sheen), rgba(9,9,9,0.7);
  border: 1px solid var(--border-bevel-strong); box-shadow: var(--glass-edge);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pf-ed-btn:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.pf-ed-btn svg { width: 14px; height: 14px; }
.pf-ed-del { display: grid; place-items: center; width: 26px; height: 26px; flex: none; padding: 0; border-radius: 50%;
  cursor: pointer; color: var(--text-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border-bevel-strong); }
.pf-ed-del:hover { color: #ff8f7a; border-color: rgba(255,143,122,0.5); }
.pf-ed-del svg { width: 12px; height: 12px; }
.pf-ed-tag { font-size: calc(var(--size-meta) * 0.9091); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.pf-ed-input { min-width: 0; width: 100%; padding: 11px 14px; border-radius: 10px; font: inherit; font-size: var(--size-body);
  color: var(--text-heading); background: var(--color-surface-1); border: 1px solid var(--border-bevel-strong); }
.pf-ed-input:focus { outline: none; border-color: var(--border-gold); }
.pf-lv-set img { cursor: pointer; }
.pf-up { position: absolute; z-index: 4; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #2a1e08; background: var(--gold-metallic-135); border: 0; box-shadow: var(--bevel-highlight), 0 6px 16px rgba(0,0,0,0.5); }
.pf-up svg { width: 13px; height: 13px; }
/* Remove control on a filled photo slot / the portrait */
.pf-slot-del { position: absolute; z-index: 5; top: 12px; right: 12px; width: 30px; height: 30px;
  color: var(--text-heading); background: rgba(6,6,6,0.78); backdrop-filter: blur(6px); }
body.pf-editing #cpFigure .pf-slot-del { pointer-events: auto; }
.pf-ed-fields { display: grid; gap: 10px; margin-top: 16px; }
.pf-ed-field { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; }
.pf-ed-field span { font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); }
.pf-fact.is-new { display: grid; place-items: center; }
.pf-ed-discard { margin-left: 4px; padding: 5px 11px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-bevel-strong); }
.pf-ed-discard:hover { color: var(--text-heading); border-color: var(--border-gold); }

/* Pick-or-type widget: designated options in the datalist, a free field for anything else */
.pf-ed-add { display: inline-flex; align-items: center; gap: 18px; padding: 10px 14px 10px 12px;
  border-radius: 999px; border: 1px dashed var(--border-gold); background: var(--color-surface-1); }
.pf-ed-add .pf-ed-input { width: auto; }
.pf-role-input { width: 100%; max-width: 320px; padding: 9px 13px; font-size: var(--size-small); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-mustard); }
.pf-role-edit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pf-role-select { width: auto; max-width: 320px; padding: 9px 12px; cursor: pointer;
  font-size: var(--size-small); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-mustard); }
.pf-fact-input { margin-top: 7px; padding: 8px 11px; font-size: calc(var(--size-body) * 1.0357); font-weight: 700; }
/* Multi-value detail (languages): one chip per entry + an add row */
.pf-fact-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.pf-fact-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 999px;
  font-size: calc(var(--size-small) * 1.0833); font-weight: 700; color: var(--text-heading);
  border: 1px solid var(--border-bevel-strong); background: var(--color-surface-1); box-shadow: var(--bevel-highlight); }
.pf-chip-x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--text-muted); background: rgba(255,255,255,0.05); border: 0; }
.pf-chip-x:hover { color: #ff8f7a; }
.pf-chip-x svg { width: 11px; height: 11px; }
.pf-fact-add { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.pf-fact-add .pf-fact-input { margin-top: 0; }
.pf-bio-story { min-height: 180px; line-height: 1.7; overflow: hidden; resize: none; }
/* The display name's line box would otherwise overflow onto the role field below it */
body.pf-editing #cpNameInner { display: inline-block; line-height: inherit; }
/* The kicker shrink-wraps, so it has to go block for the role field to get its width.
   It also has to outrank the raised display name, whose line box overflows onto it. */
body.pf-editing #cpRole { display: block; position: relative; z-index: 7; }
/* Room for the row's remove button instead of wrapping it under the year */
body.pf-editing .pf-ritem { grid-template-columns: 62px minmax(0, 1fr) 26px; }

/* Star ratings are touch-size everywhere, in and out of edit mode */
body.pf-editing .pf-lv-set { margin-left: 4px; }

/* The display name has to outrank the portrait to be clickable at all */
body.pf-editing .pf-name { z-index: 6; }
body.pf-editing .pf-figure { pointer-events: none; }
/* ...and the portrait's upload button has to clear the working-details panel below */
body.pf-editing #cpFigure .pf-up { pointer-events: auto; bottom: 34px; }
/* Nobody follows themselves — the control never renders on your own card, so
   this only covers the moment before KJPTV_FOLLOW paints. */
body.pf-editing .pf-side .follow-lg { display: none; }
/* The shortlist is not owner-editable content: while editing, the whole section
   greys out and takes no clicks (same treatment as the KJP Portal card). */
body.pf-editing #saved .pf-saved-bar,
body.pf-editing #saved .rl-list,
body.pf-editing #saved .rl-empty,
body.pf-editing #saved .pf-saved-none,
body.pf-editing #saved .row-head .text-link { pointer-events: none; opacity: 0.4; }
/* Editing is not the moment to leave the page. In-page anchors stay live; nav + footer are exempt. */
body.pf-editing main a[href]:not([href^="#"]),
body.pf-editing .pf-portal .btn { pointer-events: none; opacity: 0.4; }
body.pf-editing .pf-award-name { color: var(--gold-mustard); }

/* Biography panel in edit mode: pull-line, short bio, then the story paragraphs */
.pf-bio-fields { display: grid; gap: 16px; margin: 0 0 24px; }
.pf-bio-field { display: grid; gap: 8px; }
.pf-bio-field > span { font-size: calc(var(--size-meta) * 0.9545); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); }
.pf-bio-field textarea, .pf-bio-p textarea { resize: vertical; line-height: 1.62; }
.pf-bio-head { display: block; margin: 0 0 12px; }
.pf-bio-p { display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: start; gap: 12px; margin-bottom: 12px; }

/* A video tile with nothing in it yet: no borrowed key art, just what to do */
.pf-tile-media.is-blank { background: radial-gradient(118% 96% at 50% 38%, #191717 0%, #0c0b0b 58%, var(--color-onyx) 100%);
  box-shadow: inset 0 8px 18px rgba(0,0,0,0.78), inset 0 -3px 5px rgba(255,255,255,0.04); }
.pf-tile-media.is-blank::after { display: none; }
.pf-tile-hint { position: absolute; z-index: 2; left: 18px; right: 18px; top: 46%; transform: translateY(-50%);
  text-align: center; font-size: var(--size-meta); font-weight: 800; letter-spacing: 0.12em; line-height: 1.6;
  text-transform: uppercase; color: var(--text-muted); }

@media (max-width: 760px) {
  .pf-edit-fab { right: 18px; bottom: 92px; width: 52px; height: 52px; }
  /* The pill is nowrap by default, so at phone widths it ran off the left edge.
     Pin both sides and let it wrap instead. */
  .pf-edit-note { left: 18px; right: 18px; bottom: 152px; flex-wrap: wrap; justify-content: center;
    gap: 8px 10px; padding: 10px 14px; border-radius: 20px; text-align: center; white-space: normal; }
  .pf-edit-note .pf-ed-discard { margin-left: 0; }
  .pf-ed-add { gap: 14px; flex-wrap: wrap; border-radius: 18px; }
}

/* ---- Empty page nudge (owner only, no credits or bio yet) ---------------- */
.pf-start { display: grid; justify-items: start; gap: 10px; margin-top: 22px; max-width: 46ch; padding: 20px 22px;
  border-radius: var(--radius-card); background: var(--color-surface-1); border: 1px solid var(--border-gold); box-shadow: var(--shadow-matte); }
.pf-start[hidden] { display: none; }
.pf-start-k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-mustard); }
.pf-start p { margin: 0 0 4px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
#details[hidden] { display: none; }