/* JCC uses the same case-study layout as Threadit; source UI stays intact. */
.jcc-page section[id]{scroll-margin-top:60px}
.jcc-page .threadit-intro{grid-template-columns:1fr 1.15fr;align-items:center;gap:38px 5%}
.jcc-page .page-heading{font-size:clamp(42px,4.6vw,64px)}
.jcc-page .jcc-hero-visual{align-self:center}
.jcc-hero-visual img{mix-blend-mode:multiply}
.jcc-hero-visual figcaption{text-align:center}
.jcc-zoom{display:block;width:100%;padding:0;cursor:zoom-in;border-radius:2px}
.jcc-zoom img,.jcc-page figure>img{display:block;width:100%;height:auto}
.jcc-details{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
.jcc-scope,.jcc-flow,.jcc-system{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:start}
.jcc-scope{padding:30px 0;border-block:1px solid var(--line)}
.jcc-scope .threadit-small-label,.jcc-flow .threadit-small-label,.jcc-process .threadit-small-label{display:block;margin-bottom:16px}
.jcc-page h3{font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.035em;margin:0 0 16px}
.jcc-page h4{font-size:18px;line-height:1.4;font-weight:500;letter-spacing:-.02em;margin:0 0 16px}
.jcc-scope p,.jcc-flow p,.jcc-process p,.jcc-goals p,.jcc-system p,.jcc-takeaways p{font-size:13px;line-height:1.8;margin:0;color:var(--case-muted)}
.jcc-takeaways,.jcc-process,.jcc-goals,.jcc-competitors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.jcc-takeaways article,.jcc-process article,.jcc-goals article{border-top:1px solid var(--line);padding-top:24px}
.jcc-takeaways h3,.jcc-process h3,.jcc-goals h3{font-size:23px}
.jcc-competitors{padding:30px;background:var(--stage);gap:30px}
.jcc-competitors figure>img{width:268px;max-width:100%;height:auto}
.jcc-competitors figcaption{font-family:Arial,Helvetica,sans-serif;font-size:12px;max-width:280px;margin-top:16px}
.jcc-flow{align-items:center;padding:28px 0 0}
.jcc-flow figure{background:var(--stage);padding:28px}
.jcc-page .jcc-flow figcaption{margin-top:16px}
.jcc-final-screen{padding:30px;background:#e9e6ef}
.jcc-final-screen .jcc-zoom{max-width:1014px;margin:auto}
.jcc-final-screen figcaption{text-align:center;color:#5b5e56}
.jcc-detail-pair{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;padding-top:8px}
.jcc-detail-pair .jcc-zoom{background:#eeeafb;display:flex;align-items:center;justify-content:center;aspect-ratio:1.55;padding:30px}
.jcc-detail-pair img{width:auto;max-height:100%;object-fit:contain}
.jcc-detail-pair figcaption{font-family:Arial,Helvetica,sans-serif;font-size:13px;max-width:450px}
.jcc-detail-pair h4{color:var(--ink);font-size:22px;margin-bottom:10px}
.jcc-system{padding:32px;background:var(--stage);gap:40px}
.jcc-system figure>img{object-fit:contain;background:#fffcf6}
.jcc-system .jcc-type-image{width:100%;max-width:340px;margin-top:24px}
.jcc-team{max-width:1050px;width:100%;justify-self:center}
.jcc-team img{border-radius:3px}
.jcc-team figcaption{text-align:center}
.jcc-evolution{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:9%;align-items:center;padding:40px;background:var(--stage)}
.jcc-evolution figure{max-width:280px;width:100%;justify-self:center}
.jcc-evolution .jcc-zoom{background:white;padding:16px}
.jcc-evolution .threadit-small-label{display:block;margin-bottom:18px}
.jcc-evolution p{font-size:13px;line-height:1.8;color:var(--case-muted);margin:0}
.jcc-evolution-note{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.jcc-evolution-note h4{font-size:20px;margin-bottom:12px}
.jcc-prototype{padding:40px;background:var(--stage)}
.jcc-laptop{max-width:920px;margin:auto}
.jcc-laptop-screen{padding:10px;border-radius:20px 20px 5px 5px;background:#111214;border:1px solid #74767b;overflow:hidden}
.jcc-laptop-screen video{display:block;width:100%;height:auto;aspect-ratio:1214/788;border-radius:12px 12px 0 0;background:#e8e6ff}
.jcc-laptop-base{display:block;position:relative;margin-inline:-4%;height:17px;border-radius:2px 2px 45% 45%;background:linear-gradient(#c9cace,#a2a4a9 45%,#d6d7d9 60%,#888b91);box-shadow:0 16px 24px -10px #0004}
.jcc-laptop-base:after{content:"";display:block;position:absolute;left:43%;top:0;width:14%;height:5px;background:#8c8e94;border-radius:0 0 7px 7px}
.jcc-page .jcc-prototype figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px}
#toggle-jcc-prototype{border:1px solid var(--line);border-radius:999px;padding:10px 16px;white-space:nowrap;font-size:11px;color:var(--ink)}
.jcc-project-nav{display:flex;justify-content:space-between;gap:24px;padding-block:36px;font-size:12px;color:var(--case-muted)}
.jcc-project-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.jcc-dialog{max-width:1280px;width:calc(100% - 48px);padding:24px}
.jcc-dialog .dialog-head{margin-bottom:24px;gap:20px}
.jcc-dialog .dialog-head button{font-size:28px;line-height:1;padding:8px}
.jcc-dialog>img{display:block;width:auto;max-width:100%;max-height:66vh;object-fit:contain;margin:auto;background:#fafafa}
.jcc-dialog>p{font:11px/1.8 "Courier New",monospace;text-align:center;margin:20px 0 0;color:var(--ink)}
.jcc-cover{background:#e3e3df;display:flex;align-items:center;justify-content:center;padding:58px 24px 30px}
.jcc-cover>img{display:block;width:100%;height:auto;mix-blend-mode:multiply;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.project:is(:hover,:focus-within) .jcc-cover>img{transform:translateY(-7px) rotate(-1deg)}
html[data-theme=night] .jcc-hero-visual img,html[data-theme=night] .jcc-cover>img{mix-blend-mode:normal}
html[data-theme=night] .jcc-cover{background:#33343a}
@media(max-width:900px){
 .jcc-page .threadit-intro{grid-template-columns:1fr;gap:32px}
 .jcc-hero-visual{max-width:850px;width:100%;justify-self:center}
 .jcc-takeaways,.jcc-process,.jcc-goals,.jcc-competitors{gap:22px}
 .jcc-competitors{padding:24px;grid-template-columns:1fr}
 .jcc-competitors figure{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;align-items:start}
 .jcc-competitors figure h4{grid-column:1/-1;margin:0}
 .jcc-competitors figcaption{margin:0}
 .jcc-flow,.jcc-system{gap:28px;grid-template-columns:1fr}
 .jcc-system figure>img{max-width:783px}
 .jcc-detail-pair .jcc-zoom{padding:20px}
 .jcc-evolution{gap:6%;padding:28px}
}
@media(max-width:600px){
 .jcc-page section[id]{scroll-margin-top:95px}
 .jcc-details{grid-template-columns:1fr 1fr}
 .jcc-scope,.jcc-takeaways,.jcc-process,.jcc-goals,.jcc-detail-pair{grid-template-columns:1fr;gap:28px}
 .jcc-scope{padding-block:24px}
 .jcc-page h3{font-size:24px}
 .jcc-competitors figure{grid-template-columns:1fr;gap:12px}
 .jcc-competitors img{max-width:100%}
 .jcc-flow figure,.jcc-system{padding:20px}
 .jcc-final-screen{padding:12px}
 .jcc-final-screen figcaption{font-size:9px;margin-top:16px}
 .jcc-dialog{width:calc(100% - 24px);padding:16px}
 .jcc-dialog>img{max-height:60vh}
 .jcc-project-nav{font-size:11px}
 .jcc-evolution{grid-template-columns:1fr;gap:28px;padding:24px}
 .jcc-evolution figure{max-width:230px}
 .jcc-prototype{padding:20px 14px}
 .jcc-laptop-screen{padding:5px;border-radius:12px 12px 3px 3px}
 .jcc-laptop-screen video{border-radius:7px 7px 0 0}
 .jcc-laptop-base{height:10px}
 .jcc-page .jcc-prototype figcaption{flex-direction:column;gap:14px;text-align:center}
}
@media(prefers-reduced-motion:reduce){.jcc-cover>img{transition:none}.project:is(:hover,:focus-within) .jcc-cover>img{transform:none}}