/* Real library key art leads SFW Home. Personal libraries keep their own hero. */
.home-spotlight[hidden] { display: none !important; }
:root:not([data-content-profile="sfw"]) .home-spotlight { display: none !important; }
:root[data-content-profile="sfw"] .home-hero.has-spotlight {
  --hsp-bg: #0c1015;
  --hsp-text: #fff9ef;
  --hsp-muted: #c1c6cd;
  --hsp-amber: var(--hx-amber, #f6b544);
  --hsp-line: rgba(255, 255, 255, .18);
  padding: 0; min-height: 440px;
  border-color: var(--hsp-line); border-radius: 20px;
  background: var(--hsp-bg); box-shadow: 0 20px 48px rgba(0, 0, 0, .24);
}
:root[data-content-profile="sfw"] .home-hero.has-spotlight > .home-hero-art,
:root[data-content-profile="sfw"] .home-hero.has-spotlight > .home-hero-inner { display: none; }
.home-spotlight { position: relative; isolation: isolate; width: 100%; min-width: 0; padding: 28px 36px 20px; color: var(--hsp-text); }
.hsp-backdrop { position: absolute; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.hsp-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 36%; }
.hsp-backdrop img[hidden] { display: none; }
.hsp-backdrop.is-cover img { object-position: 80% 40%; opacity: .55; }
.home-spotlight::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 13, 19, .97), rgba(9, 13, 19, .89) 25%, rgba(9, 13, 19, .28) 65%, rgba(9, 13, 19, .12)),
    linear-gradient(0deg, var(--hsp-bg), rgba(9, 13, 19, .78) 12%, transparent 72%, rgba(9, 13, 19, .25));
}
.hsp-header { display: flex; align-items: center; gap: 20px; padding-right: 52px; min-height: 28px; }
.hsp-greeting { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.hsp-date { font-size: 11px; color: var(--hsp-muted); letter-spacing: .08em; text-transform: uppercase; }
.hsp-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; gap: 36px; min-height: 340px; padding: 36px 0 24px; }
.hsp-copy { min-width: 0; max-width: 620px; }
.hsp-kicker { margin: 0 0 12px; color: var(--hsp-amber); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.hsp-title { margin: 0; color: var(--hsp-text); font: 800 clamp(34px, 4.5vw, 68px)/1.02 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
.hsp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin: 18px 0 0; color: var(--hsp-muted); font-size: 13px; }
.hsp-meta > span { display: inline-block; }
.hsp-meta > span + span { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--hsp-line); }
.hsp-overview { margin: 16px 0 0; max-width: 52ch; color: var(--hsp-muted); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hsp-overview[hidden] { display: none; }
.hsp-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 24px; }
.hsp-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; min-width: 0; padding: 12px 22px; border-radius: 8px; font-family: inherit; font-weight: 650; font-size: 14px; line-height: 1.35; cursor: pointer; touch-action: manipulation; transition: background .16s, border-color .16s, transform .16s; }
/* Play is Hearth's plaque (home.css "The hero's plaque"): walnut bound in brass,
   an ink outline, the painted ember medallion. Not the cream rectangle any
   streaming site has. */
.hsp-actions .hsp-play {
  gap: 10px; padding: 0 20px 0 4px;
  border: 2px solid #c9973f; border-radius: 12px;
  background:
    radial-gradient(70px 56px at 24px 50%, rgba(255, 138, 52, .34), transparent 70%),
    linear-gradient(180deg, #3d2717 0%, #2a1a0f 58%, #20140c 100%);
  color: var(--hsp-text);
  font-family: var(--hx-font, inherit); font-weight: 600; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .32), 0 0 0 2px #06070b, 0 4px 0 2px #06070b;
  transition: transform .2s var(--hx-pop, ease), box-shadow .16s, border-color .16s;
}
.hsp-actions .hsp-play:hover {
  border-color: #f0c46a; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .42), 0 0 0 2px #06070b, 0 6px 0 2px #06070b, 0 10px 24px rgba(255, 120, 40, .18);
}
.hsp-actions .hsp-play:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 226, 170, .3), 0 0 0 2px #06070b, 0 1px 0 2px #06070b; }
.hsp-play-mark { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: contain; box-shadow: 0 0 0 2px #06070b, 0 0 8px rgba(255, 128, 40, .3); transition: transform .45s var(--hx-pop, ease); }
.hsp-play:hover .hsp-play-mark { transform: rotate(-12deg) scale(1.06); }
.hsp-play-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hsp-details { background: rgba(15, 20, 27, .55); color: var(--hsp-text); border: 1px solid rgba(255, 255, 255, .36); }
.hsp-details:hover { background: rgba(255, 255, 255, .14); border-color: var(--hsp-text); }
.hsp-actions .hsp-watched { position: relative; width: 48px; padding: 0; flex: none; background: rgba(15, 20, 27, .55); color: var(--hsp-muted); border: 1px solid rgba(255, 255, 255, .22); }
.hsp-watched:hover, .hsp-watched:focus-visible { color: var(--hsp-amber); border-color: var(--hsp-amber); background: rgba(15, 20, 27, .72); }
.hsp-watched::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 6px; background: var(--hsp-text); color: var(--hsp-bg); font-size: 12px; font-weight: 650; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .14s, transform .14s; z-index: 2; }
.hsp-watched:hover::after, .hsp-watched:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.hsp-actions button:active { transform: translateY(1px); }
.hsp-actions button.is-busy { opacity: .65; pointer-events: none; }
.hsp-progress { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--hsp-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.hsp-progress-track { width: 112px; height: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; border-radius: 3px; }
.hsp-progress-track i { display: block; height: 100%; background: var(--hsp-amber); }
.hsp-shelf { min-width: 0; width: 100%; max-width: 570px; justify-self: end; }
.hsp-shelf-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 12px; font-weight: 600; }
.hsp-meter { margin-left: auto; color: var(--hsp-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hsp-controls { display: flex; gap: 4px; }
.hsp-step { width: 44px; height: 44px; border: 1px solid var(--hsp-line); border-radius: 50%; background: rgba(9, 13, 19, .6); color: var(--hsp-text); font-size: 20px; cursor: pointer; touch-action: manipulation; transition: background .16s, border-color .16s; }
.hsp-step:hover:not(:disabled) { border-color: var(--hsp-text); background: rgba(255, 255, 255, .12); }
.hsp-step:disabled { opacity: .3; cursor: default; }
.hsp-posters { display: grid; grid-template-columns: repeat(var(--hsp-picks, 5), minmax(0, 112px)); justify-content: end; gap: 12px; }
.hsp-pick { display: block; min-width: 0; padding: 0; border: 0; background: none; color: var(--hsp-muted); text-align: left; cursor: pointer; touch-action: manipulation; }
.hsp-poster { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 7px; background: var(--hsp-bg); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); transition: transform .18s, box-shadow .18s; }
.hsp-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hsp-poster img[hidden] { display: none; }
.hsp-poster-fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: 12px; text-align: center; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; color: var(--hsp-muted); }
.hsp-pick-title { display: block; min-width: 0; margin-top: 10px; font-size: 11px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsp-pick[aria-pressed="true"] { color: var(--hsp-text); }
.hsp-pick[aria-pressed="true"] .hsp-poster { box-shadow: 0 0 0 2px var(--hsp-amber), 0 8px 24px rgba(0, 0, 0, .45); transform: translateY(-5px); }
.hsp-pick:hover .hsp-poster { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--hsp-text), 0 10px 24px rgba(0, 0, 0, .4); }
.home-spotlight button:focus-visible { outline: 2px solid var(--hsp-amber); outline-offset: 5px; }
.hsp-library-note { margin: 0; padding-top: 16px; border-top: 1px solid var(--hsp-line); color: var(--hsp-muted); font-size: 12px; line-height: 1.5; }
.hsp-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-content-profile="sfw"] .home-hero.has-spotlight .home-eye { top: 20px; right: 22px; width: 44px; height: 44px; }
.home-scroll.discreet .hsp-backdrop img,
.home-scroll.discreet .hsp-poster img { filter: blur(22px) saturate(.4); transform: scale(1.1); }
@media (max-width: 1100px) {
  .home-spotlight { padding: 24px 28px 20px; }
  .hsp-stage { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 28px; }
  .hsp-posters { gap: 8px; }
  .hsp-title { font-size: 46px; }
  .hsp-date { font-size: 10px; }
}
@media (max-width: 820px) {
  .hsp-stage { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 100px; }
  .hsp-copy { max-width: 520px; }
  .hsp-shelf { max-width: 100%; }
  .hsp-posters { gap: 14px; }
  .hsp-poster { max-height: 160px; }
  .hsp-date { display: none; }
  .home-spotlight::before { background: linear-gradient(0deg, var(--hsp-bg) 20%, rgba(9, 13, 19, .92) 45%, rgba(9, 13, 19, .12)); }
  .hsp-backdrop { height: 420px; }
  .hsp-backdrop img { object-position: 68% top; }
}
@media (max-width: 480px) {
  .home-spotlight { padding: 24px 20px 18px; }
  .hsp-stage { padding-top: 96px; padding-bottom: 20px; gap: 20px; }
  .hsp-title { font-size: 38px; line-height: 1.06; }
  .hsp-kicker { font-size: 10px; margin-bottom: 10px; }
  .hsp-meta { font-size: 12px; margin-top: 12px; }
  .hsp-overview { font-size: 13px; -webkit-line-clamp: 2; margin-top: 12px; }
  .hsp-actions { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; grid-auto-flow: column; gap: 8px; margin-top: 20px; }
  .hsp-watched::after { left: auto; right: 0; transform: translate(0, 4px); }
  .hsp-watched:hover::after, .hsp-watched:focus-visible::after { transform: none; }
  .hsp-actions button { padding: 12px; font-size: 12px; gap: 8px; }
  .hsp-posters { gap: 8px; }
  .hsp-pick-title { font-size: 10px; margin-top: 8px; }
  .hsp-library-note { font-size: 11px; }
  .hsp-backdrop { height: 340px; }
  .hsp-progress { margin-top: 14px; }
  :root[data-content-profile="sfw"] .home-hero.has-spotlight .home-eye { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-spotlight *, .home-spotlight *::before, .home-spotlight *::after { transition: none !important; animation: none !important; }
}