/* One accent per project. These tokens color the portfolio, never embedded product UI. */
[data-project="zillow-touring-applying"],[data-project-accent="zillow-touring-applying"]{--project-accent:#99b8ff}
[data-project="zillow-systems-search-alerts"],[data-project-accent="zillow-systems-search-alerts"]{--project-accent:#99b8ff}
[data-project="aimcast"],[data-project-accent="aimcast"]{--project-accent:#bea5f8}
[data-project="oleole"],[data-project-accent="oleole"]{--project-accent:#f39f91}
[data-project="knight-of-the-realm"],[data-project-accent="knight-of-the-realm"]{--project-accent:#d7c35d}
[data-project="foodclock"],[data-project-accent="foodclock"]{--project-accent:#b4d87b}
[data-project="safety-first-ai-copilot"],[data-project-accent="safety-first-ai-copilot"]{--project-accent:#efb17e}
[data-project="sketches"],[data-project-accent="sketches"]{--project-accent:#edaccb}
[data-project="doodles"],[data-project-accent="doodles"]{--project-accent:#7bd3a9}
[data-project="rubberdukky"],[data-project-accent="rubberdukky"]{--project-accent:#f0a2f5}
[data-project="vision-bank"],[data-project-accent="vision-bank"]{--project-accent:#71d5df}

body[data-project] .case-heading h1{color:var(--project-accent)}
body[data-project] :is(.case-heading .eyebrow,.case-body-label,.case-facts dt,.case-narrative h3,.case-highlight-intro>span,.case-section-heading>span:first-child,.case-nav-label){color:var(--project-accent)}
body[data-project] :is(.case-heading .eyebrow,.case-body-label,.case-facts dt,.case-narrative h3,.case-highlight-intro>span,.case-section-heading,.case-nav-label){font-size:12px;line-height:1.55}
body[data-project] :is(.case-back,.case-return,.case-original,.case-external a){color:var(--project-accent);border-color:var(--project-accent);min-height:44px;align-items:center}
body[data-project] .case-highlight-intro{border-left:2px solid var(--project-accent);padding-left:22px}
body[data-project] .case-metadata{border-top-color:var(--project-accent)}
body[data-project] :is(.case-image:hover,.case-image:focus-visible,.case-top:hover,.case-top:focus-visible){border-color:var(--project-accent)}
body[data-project] .case-more[open] .case-more-icon,body[data-project] .case-top{color:var(--project-accent)}
body[data-project] :is(a,button,summary,input,select,textarea):focus-visible,[data-project-accent] :is(a,button,summary,input,select,textarea):focus-visible,[data-project-accent]:is(a,button):focus-visible{outline:3px solid var(--project-accent);outline-offset:5px}
body[data-project] :is(.lightbox-project,.lightbox-counter),.lightbox[data-project-accent] :is(.lightbox-project,.lightbox-counter){color:var(--project-accent)}
body[data-project] .lightbox :is(button:hover,button:focus-visible),.lightbox[data-project-accent] :is(button:hover,button:focus-visible){color:var(--project-accent);border-color:var(--project-accent)}
.selected-card[data-project-accent],.stack-card[data-project-accent]{border-top-color:var(--project-accent)}
.selected-card[data-project-accent] .selected-card-info :is(small,strong),.selected-card[data-project-accent] .card-arrow,.stack-card[data-project-accent] .front-visual-top,.stack-card[data-project-accent] .stack-title strong{color:var(--project-accent)}
.selected-card[data-project-accent]:hover,.stack-card[data-project-accent]:hover{border-color:var(--project-accent)}
[data-project-accent]:is(:hover,:focus-visible) .card-arrow,[data-project-accent] a:is(:hover,:focus-visible) .card-arrow{background:var(--project-accent);border-color:var(--project-accent);color:#080808}
.stack-card[data-project-accent='knight-of-the-realm'] .front-visual-image img{object-fit:contain;background:#101010}
.project[data-project-accent] :is(.project-number,.project-kind,.project-icon,.detail-link,.gallery-card-caption .arrow-icon){color:var(--project-accent)}
.project[data-project-accent] .project-toggle[aria-expanded=true] .project-name{color:var(--project-accent)}
.project[data-project-accent] :is(.detail-link,.gallery-card:hover){border-color:var(--project-accent)}
body[data-project='knight-of-the-realm']{--kotr-accent:var(--project-accent)}
body[data-project='knight-of-the-realm'] :is(.kotr-kicker,.kotr-side-label){color:var(--project-accent)}
@media(max-width:680px){body[data-project] .case-highlight-intro{padding-left:16px}}