/* Page 96 (THE SPINE: is this the one?), on ../kit.css + fbkit.css + 40_fx.css + 92_eg.css + 95_rp.css (film players, strips,
   the copy bar). Its own look: bone white on deep saloon wine, a vertebra motif for the spine. */
.sp96 { --bone: #F4EEDC; --bone-d: #CFC4A6; --wine: #3A1426; --wine-2: #24101C; --blood: #C3243A; overflow-x: hidden; }
.sp96 .fx-wrap { overflow-x: clip; }
.sp-hero h1 span { color: var(--bone); text-shadow: 3px 4px 0 var(--blood); }
.sp-herofilm { aspect-ratio: 16 / 9; }
.sp-tag--bone { background: linear-gradient(180deg, #FFFDF4, var(--bone-d)) !important; }
/* the spine motif: twelve vertebrae, a disc between each */
.sp-spinebar { display: flex; gap: 5px; justify-content: center; align-items: center; margin: 14px auto 0; max-width: 100%; }
.sp-spinebar i { position: relative; flex: 0 1 24px; height: 15px; border: 2.5px solid var(--ink); border-radius: 6px 6px 8px 8px; background: linear-gradient(180deg, #FFFDF4, var(--bone-d)); box-shadow: 1px 3px 0 var(--ink); }
.sp-spinebar i::after { content: ''; position: absolute; right: -6px; top: 3px; width: 6px; height: 5px; background: var(--blood); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.sp-spinebar i:last-child::after { display: none; }
.sp-spinebar i:nth-child(-n+3) { background: linear-gradient(180deg, #FFE6E2, #E9A9A6); }

/* the three takes */
.sp-takes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; align-items: start; }
.sp-take { position: relative; min-width: 0; padding: 14px; border: 4px solid var(--ink); border-radius: 24px; background: radial-gradient(70% 60% at 0% 0%, rgba(244, 238, 220, .09), transparent 60%), linear-gradient(180deg, #3B2240, #241329 70%, #1A0E1E); box-shadow: 4px 9px 0 var(--ink); }
.sp-take--new { background: radial-gradient(70% 60% at 100% 0%, rgba(195, 36, 58, .22), transparent 60%), linear-gradient(180deg, #4A1A2C, #2C1020 70%, #1E0B16); box-shadow: 4px 9px 0 var(--ink), 0 0 0 4px var(--blood); }
.sp-take__head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.sp-take__head h3 { margin: 0; font: 400 21px/1.05 var(--f-display); letter-spacing: .03em; color: var(--bone); }
.sp-take__head p { margin: 3px 0 0; font: 600 12.5px/1.3 var(--f-body); color: var(--cream-2); opacity: .85; }
.sp-take__n { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 11px; background: linear-gradient(180deg, #FFFDF4, var(--bone-d)); color: var(--ink); font: 400 22px/1 var(--f-display); box-shadow: 2px 4px 0 var(--ink); }
.sp-new { margin-left: auto; }
.sp-take .rp-film { border-radius: 16px; }
.sp-take .rp-ctl { gap: 6px; }
.sp-take .rp-seg button { padding: 3px 8px; font-size: 13px; }
.sp-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.sp-facts li { color: var(--cream-2); font-size: 13.5px; line-height: 1.42; }
.sp-facts b { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; background: var(--wine-2); border: 2px solid var(--ink); color: var(--bone); font: 400 11.5px/1.3 var(--f-display); letter-spacing: .05em; }

/* take 2: the real clip (or its placeholder) + the frames */
.sp-clip { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 4px solid var(--ink); border-radius: 16px; background: #05040A; box-shadow: 4px 9px 0 var(--ink); }
.sp-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.sp-clip__wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; text-align: center; background: repeating-linear-gradient(135deg, rgba(244, 238, 220, .04) 0 14px, transparent 14px 28px), radial-gradient(60% 70% at 50% 40%, #2C1A33, #0C0710); }
.sp-clip__wait b { font: 400 18px/1.1 var(--f-display); color: var(--bone); letter-spacing: .04em; }
.sp-clip__wait span { font: 500 12.5px/1.4 var(--f-body); color: var(--cream-2); max-width: 30ch; }
.sp-clip__spine { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 4px; }
.sp-clip__spine i { display: block; width: 20px; height: 7px; border: 2px solid var(--ink); border-radius: 4px; background: var(--bone); animation: sp-sway 1.6s ease-in-out infinite; }
.sp-clip__spine i:nth-child(n) { animation-delay: calc(var(--d, 0) * 1s); }
.sp-clip__spine i:nth-child(2) { --d: .06; } .sp-clip__spine i:nth-child(3) { --d: .12; } .sp-clip__spine i:nth-child(4) { --d: .18; } .sp-clip__spine i:nth-child(5) { --d: .24; } .sp-clip__spine i:nth-child(6) { --d: .3; } .sp-clip__spine i:nth-child(7) { --d: .36; } .sp-clip__spine i:nth-child(8) { --d: .42; }
.sp-clip__spine i:first-child { width: 26px; height: 22px; border-radius: 50%; background: #FFD23F; }
@keyframes sp-sway { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .sp-clip__spine i { animation: none; } }
.sp-gstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sp-gstrip figure { margin: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--ink); border-radius: 11px; background: #05040A; }
.sp-gstrip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-gstrip figcaption, .sp-row__strip figcaption { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: var(--cream); font: 400 11px/1.1 var(--f-display); letter-spacing: .04em; }
.sp-gnote { grid-column: 1 / -1; margin: 2px 0 0; font: 500 12px/1.4 var(--f-body); color: var(--cream-2); opacity: .8; }

/* the 3-level board */
.sp-board { margin-top: 26px; padding: 16px; border: 4px solid var(--ink); border-radius: 24px; background: linear-gradient(180deg, #2A1626, #170B15); box-shadow: 4px 9px 0 var(--ink); }
.sp-board__head h3 { margin: 0; font: 400 20px/1.1 var(--f-display); color: var(--bone); letter-spacing: .03em; }
.sp-board__head p { margin: 6px 0 0; color: var(--cream-2); font-size: 14px; line-height: 1.4; }
.sp-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 2px dashed rgba(244, 238, 220, .16); }
.sp-row__lab b { display: inline-block; padding: 3px 9px; border: 2.5px solid var(--ink); border-radius: 8px; font: 400 15px/1.1 var(--f-display); letter-spacing: .05em; color: var(--ink); background: var(--bone); box-shadow: 2px 3px 0 var(--ink); }
.sp-row[data-g="5"] .sp-row__lab b { background: linear-gradient(180deg, #F0495F, var(--blood)); color: #fff; }
.sp-row[data-g="2"] .sp-row__lab b { background: linear-gradient(180deg, #FFC34A, #F29A1E); }
.sp-row[data-g="0"] .sp-row__lab b { background: linear-gradient(180deg, #8BF0C4, #3FC98E); }
.sp-row__lab span { display: block; margin-top: 7px; color: var(--cream-2); font-size: 13px; line-height: 1.4; }
.sp-row__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 40px; }
.sp-row__strip figure { margin: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--ink); border-radius: 11px; background: #05040A; }
.sp-row__strip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the question */
.sp-ask { padding: 18px; border: 4px solid var(--ink); border-radius: 24px; background: radial-gradient(60% 90% at 0% 0%, rgba(244, 238, 220, .12), transparent 60%), linear-gradient(180deg, #3B2240, #221127); box-shadow: 4px 9px 0 var(--ink); }
.sp-ask h3 { margin: 0 0 12px; font: 400 clamp(22px, 4.5vw, 30px)/1.05 var(--f-display); color: var(--bone); letter-spacing: .02em; }
.sp-ans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.sp-ans__opt, .sp-cand { position: relative; display: flex; gap: 10px; align-items: center; padding: 12px; border: 3px solid var(--ink); border-radius: 16px; background: #1A0E1E; cursor: pointer; box-shadow: 2px 5px 0 var(--ink); transition: box-shadow .15s, transform .15s; }
.sp-ans__opt input, .sp-cand input { position: absolute; opacity: 0; pointer-events: none; }
.sp-ans__opt b, .sp-cand b { display: block; font: 400 17px/1.1 var(--f-display); color: var(--bone); letter-spacing: .03em; }
.sp-ans__opt small { display: block; margin-top: 3px; color: var(--cream-2); font: 500 12.5px/1.3 var(--f-body); }
.sp-ans__box { flex: none; width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 4px var(--cream); }
.sp-ans__opt:has(input:checked) { box-shadow: 2px 5px 0 var(--ink), 0 0 0 4px var(--yellow); transform: translateY(-1px); }
.sp-ans__opt--yes:has(input:checked) .sp-ans__box { background: #3FC98E; }
.sp-ans__opt--no:has(input:checked) .sp-ans__box { background: #F29A1E; }
.sp-ans__opt:has(input:focus-visible), .sp-cand:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sp-opt { margin-left: 8px; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 7px; background: var(--cream); color: var(--ink); font: 400 12px/1.2 var(--f-display); vertical-align: middle; }

/* the candidates */
.sp-cands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.sp-cand { flex-direction: column; align-items: stretch; padding: 10px; }
.sp-cand__still { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--ink); border-radius: 11px; background: #05040A; }
.sp-cand__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-cand__tier { position: absolute; z-index: 2; right: 6px; top: 6px; padding: 2px 6px; border-radius: 6px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); font: 400 10.5px/1.2 var(--f-display); letter-spacing: .04em; }
.sp-cand__txt { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: center; }
.sp-cand__txt > span:last-child { grid-column: 1 / -1; color: var(--cream-2); font-size: 13.5px; line-height: 1.42; }
.sp-cand.is-picked { box-shadow: 2px 5px 0 var(--ink), 0 0 0 4px var(--yellow); }
.sp-cand.is-picked .sp-ans__box { background: var(--yellow); }
.sp-cand--none { grid-column: 1 / -1; }
.sp-bar__ans.is-on { color: var(--yellow); }

@media (max-width: 1100px) { .sp-takes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-take--new { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .sp-takes, .sp-cands { grid-template-columns: minmax(0, 1fr); }
  .sp-row { grid-template-columns: minmax(0, 1fr); }
  .sp-row__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-row__strip figure:nth-child(1), .sp-row__strip figure:nth-child(5) { display: none; }
  .sp-ans { grid-template-columns: minmax(0, 1fr); }
  .sp-take, .sp-board, .sp-ask { padding: 12px; }
}