/* M/ Circuit: a full-width case study, with an actual frame from the game. */
.project-reel strong{font-size:clamp(2.3rem,4.6vw,5.3rem)}
.circuit-case{margin-top:5rem;padding-top:2rem;scroll-margin-top:2rem}
.circuit-case-heading{display:grid;grid-template-columns:1.05fr 1fr;gap:7%;align-items:end;padding:3.2rem 0}
.circuit-eyebrow{font:.875rem/1.4 var(--font-data);color:var(--signal)}
.circuit-case h3{font:600 clamp(5rem,10vw,10rem)/.87 var(--font-display);letter-spacing:-.02em;margin:1.5rem 0 0}
.circuit-case h3 span{color:var(--signal)}
.circuit-pitch{max-width:520px;padding-bottom:.3rem}
.circuit-pitch p{font-size:1.125rem;line-height:1.6;color:var(--paper)}
.circuit-pitch .circuit-role{font-size:.875rem;color:var(--muted);margin-bottom:1.4rem;border-left:2px solid var(--signal);padding-left:.85rem}
.circuit-play{display:flex;justify-content:space-between;align-items:center;gap:2rem;width:100%;padding:1rem 1.25rem;background:var(--signal);color:var(--ink);font-size:1rem;font-weight:600;margin-top:1.75rem;min-height:58px;transition:background 180ms,color 180ms}
.circuit-play span{font-size:1.7rem;line-height:1;transition:transform 180ms var(--ease-out)}
.circuit-play:hover{background:var(--paper)}
.circuit-play:hover span{transform:translate(3px,-3px)}
.circuit-play:focus-visible{outline:2px solid var(--paper);outline-offset:5px}
.circuit-pitch .circuit-inputs{font-size:.875rem;color:var(--muted);margin-top:.65rem}
.circuit-capture{margin:0;border-top:1px solid #66745b}
.circuit-capture-window{position:relative;aspect-ratio:99/56;overflow:hidden;background:var(--ink)}
/* Frame the actual 1425 × 891 capture at x=402, y=272, w=990, h=560.
   Keep the original bitmap intact; the crop excludes the game's menu. */
.circuit-capture-window>img{display:block;position:absolute;width:143.94%;max-width:none;height:auto;left:-40.61%;top:-48.57%}
.circuit-capture figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding:1rem 0;font-size:.75rem;color:var(--muted);border-bottom:var(--hairline)}
.circuit-capture figcaption>span:first-child{font-family:var(--font-data);letter-spacing:.04em}
.circuit-capture figcaption a{text-decoration:underline;text-underline-offset:3px}
.circuit-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0;padding:2rem 0 2.5rem}
.circuit-facts>div{display:flex;flex-direction:column;gap:.25rem;border-left:var(--hairline);padding-left:1.5rem}
.circuit-facts dt{font-size:.875rem;color:var(--muted);order:2}
.circuit-facts dd{font:600 clamp(3rem,5vw,5rem)/1 var(--font-display);margin:0}
.circuit-making{border-block:var(--hairline)}
.circuit-making summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px;padding:1rem 0;cursor:pointer;list-style:none;font-size:1rem}
.circuit-making summary::-webkit-details-marker{display:none}
.circuit-making summary>span{font-size:1.6rem;transition:transform 180ms var(--ease-out);color:var(--signal)}
.circuit-making[open] summary>span{transform:rotate(45deg)}
.circuit-making summary:focus-visible{outline:2px solid var(--signal);outline-offset:5px}
.circuit-decisions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;padding:1.6rem 0 2rem}
.circuit-decisions .data{color:var(--signal)}
.circuit-decisions h4{font:600 clamp(1.9rem,2.6vw,3rem)/1.1 var(--font-display);margin:.8rem 0 1rem}
.circuit-decisions p{font-size:1rem;color:var(--muted);line-height:1.65}
.circuit-limit{max-width:900px;font-size:.875rem;line-height:1.6;color:var(--muted);padding-bottom:2rem}
@media(max-width:900px){.circuit-case-heading{grid-template-columns:1fr;gap:2.3rem}.circuit-case h3 br{display:none}.circuit-case h3{font-size:clamp(4rem,13vw,7.5rem)}.circuit-case h3>span:first-child{margin-right:.08em}.circuit-pitch{max-width:680px}.circuit-decisions{grid-template-columns:1fr;gap:2rem}.circuit-decisions>section{max-width:680px}.circuit-decisions h4{font-size:2rem}}
@media(max-width:760px){.project-reel strong{font-size:1.7rem}.circuit-case{margin-top:3rem;padding-top:1rem}.circuit-case-heading{padding:2rem 0}.circuit-case>.section-label{flex-wrap:wrap;gap:.5rem}.circuit-case>.section-label .data{font-size:.75rem}.circuit-capture{margin-inline:calc(var(--gutter)*-1)}.circuit-capture figcaption{padding-inline:var(--gutter)}.circuit-facts{gap:1rem;padding:1.5rem 0}.circuit-facts>div{padding-left:.6rem}.circuit-facts dt{font-size:.875rem}.circuit-making summary{font-size:.9375rem}.circuit-play{margin-top:1.3rem}.circuit-eyebrow{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.circuit-case *{transition:none!important}}
html[data-motion=reduced] .circuit-case *{transition:none!important}