/* culprit-toys.css (Coop, 26 Oct 2026 21:39 AEDT; SANDBOX). Myself "Meet the culprits": the org carousel (css/org-culprit-cards.css,
   js/org-culprit-cards.js, loaded before this file) on a light band, with the TOY characters in each card's gradient top.
   Generated by /workspace/handoff-build/culprit_toys.py (CARD_ART switch). */
.cr{background:#F7F5F0;color:#1D1D1F;padding:96px 0 88px}
.cr-inner{max-width:1240px;margin:0 auto;padding:0 24px}
.cr .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cr-h{margin:0;font-size:clamp(34px,5vw,56px);line-height:1.04;font-weight:700;letter-spacing:-.025em;color:#1D1D1F;text-align:center}
.cr-br{display:block}
.cr-g{background:linear-gradient(95deg,#C8102E 0%,#E8461B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ct-stop{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:var(--aal-dot,linear-gradient(135deg,#B4B4B9 15%,#7C7C80 85%));color:transparent;-webkit-text-fill-color:transparent;font-size:inherit;line-height:0;overflow:hidden;vertical-align:baseline;text-indent:-9em}
.cr-sub{max-width:40em;margin:18px auto 0;font-size:18px;line-height:1.5;color:#5E5E63;text-align:center}
.cr .occ{margin-top:44px}
.cr .occ-intro{margin-bottom:0}
/* toy art in the gradient top: grey still while the card is greyed, colour still when hovered / focused / selected */
.cr .ct-art{position:relative;display:block;height:94%;width:auto;max-width:94%;aspect-ratio:1/1}
.cr .ct-art picture,.cr .ct-art img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.cr .ct-lit{opacity:0;transition:opacity .3s cubic-bezier(.2,.6,.2,1)}
.cr .occ-card:hover .ct-lit,.cr .occ-card:focus-visible .ct-lit,.cr .occ-card[aria-pressed="true"] .ct-lit{opacity:1}
.cr .occ-card:hover .ct-grey,.cr .occ-card:focus-visible .ct-grey,.cr .occ-card[aria-pressed="true"] .ct-grey{opacity:0}
.cr .ct-grey{transition:opacity .3s cubic-bezier(.2,.6,.2,1)}
.cr .occ-band{overflow:hidden}
.cr-cta{margin:40px 0 0;text-align:center}
.cr .cr-btn{box-shadow:none}
.cr .cr-btn:hover{filter:none;text-decoration:underline}
.cr .cr-btn:focus-visible{outline:3px solid #1D1D1F;outline-offset:3px}
@media (max-width:600px){
  .cr{padding:64px 0 60px}
  .cr-inner{padding:0 20px}
  .cr-sub{font-size:16px}
  .cr .occ{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){.cr .ct-lit,.cr .ct-grey{transition:none}}
@media (forced-colors:active){.cr-g{color:CanvasText;-webkit-text-fill-color:CanvasText;background:none}.ct-stop{background:CanvasText}}

/* ---- figures mode (Coop 21:46): characters only, no cards; one description panel below ---- */
.cr[data-mode="figures"] .occ-card.cr-fig{aspect-ratio:1/1;background:none;border:0;border-radius:18px;box-shadow:none;cursor:pointer;
  align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.cr[data-mode="figures"] .occ-card.cr-fig:hover,.cr[data-mode="figures"] .occ-card.cr-fig:focus-visible,.cr[data-mode="figures"] .occ-card.cr-fig[aria-pressed="true"]{border:0;box-shadow:none;transform:translateY(-6px)}
.cr[data-mode="figures"] .occ-card.cr-fig:focus-visible{outline:3px solid #1D1D1F;outline-offset:2px}
.cr[data-mode="figures"] .cr-fig .ct-art{width:100%;height:100%;max-width:none}
.cr-panel{max-width:36em;min-height:136px;margin:28px auto 0;text-align:center}
.cr-panel [hidden]{display:none!important}
.cr-prompt{margin:0;padding-top:28px;font-size:18px;line-height:1.5;color:#5E5E63}
.cr-panel{--cr-t:#5E5E63;--cr-c:#D6D3CD}
.cr-panel[data-tone="red"]{--cr-t:#C8102E;--cr-c:#C8102E}
.cr-panel[data-tone="orange"]{--cr-t:#C2410C;--cr-c:#E8571C}
.cr-panel[data-tone="yellow"]{--cr-t:#946200;--cr-c:#FFC21A}
.cr-eye{margin:0;font-size:13px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cr-t)}
.cr-name{margin:6px 0 0;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.015em;color:#1D1D1F}
.cr-name::after{content:"";display:block;width:36px;height:3px;border-radius:2px;margin:12px auto 0;background:var(--cr-c)}
.cr-desc{margin:12px 0 0;font-size:18px;line-height:1.5;color:#3A3A3E}
.cr[data-mode="figures"] .cr-cta{margin-top:28px}
@media (max-width:600px){.cr-panel{min-height:150px;margin-top:20px}.cr-name{font-size:24px}.cr-desc,.cr-prompt{font-size:16px}}
@media (prefers-reduced-motion:reduce){.cr[data-mode="figures"] .occ-card.cr-fig{transition:none;transform:none!important}}
@media (forced-colors:active){.cr[data-mode="figures"] .occ-card.cr-fig[aria-pressed="true"]{outline:3px solid Highlight}}
/* 27 Oct 2026 (Coop 8:33 bug): the hover lift moved the whole button up 6px, so a pointer near a figure's bottom edge fell out of
   it, dropping hover and the description. The lift now moves only the character; the button's hit area stays still. */
.cr[data-mode="figures"] .occ-card.cr-fig:hover,.cr[data-mode="figures"] .occ-card.cr-fig:focus-visible,.cr[data-mode="figures"] .occ-card.cr-fig[aria-pressed="true"]{transform:none}
.cr[data-mode="figures"] .cr-fig .ct-art{transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.cr[data-mode="figures"] .cr-fig:hover .ct-art,.cr[data-mode="figures"] .cr-fig:focus-visible .ct-art,.cr[data-mode="figures"] .cr-fig[aria-pressed="true"] .ct-art{transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){.cr[data-mode="figures"] .cr-fig .ct-art{transition:none;transform:none!important}}