/* Case study frames share the portfolio's extended border geometry. */
body[data-page="case-study"]{--nav-height:0px;--case-top:40px}
html:has(body[data-page="case-study"]){scroll-padding-top:40px}
/* Keep the page gutter clear across both panes as content passes underneath. */
body[data-page="case-study"]:before{content:'';position:fixed;inset:0 0 auto;height:var(--case-top);background:var(--background);z-index:20;pointer-events:none}
body[data-page="case-study"]>.about-footer{width:86%;max-width:1440px}
.case-layout{position:relative;width:86%;max-width:1440px;margin:40px auto 0;display:grid;grid-template-columns:210px minmax(0,1fr);border:1px solid var(--line)}
.case-layout:before,.case-layout:after{content:'';position:absolute;pointer-events:none}
.case-layout:before{inset:calc(-1 * var(--bleed) - 1px) -1px;border-inline:1px solid var(--line)}
.case-layout:after{inset:-1px calc(-1 * var(--bleed) - 1px);border-block:1px solid var(--line)}
/* A persistent top edge, aligned to the same frame and shared corner length. */
.case-frame-cap{position:fixed;top:var(--case-top);left:50%;transform:translateX(-50%);width:86%;max-width:1440px;height:0;z-index:21;pointer-events:none}
.case-frame-cap:before,.case-frame-cap:after{content:'';position:absolute;pointer-events:none}
.case-frame-cap:before{top:calc(-1 * var(--bleed));height:var(--bleed);left:0;right:0;border-inline:var(--stroke) solid var(--line)}
.case-frame-cap:after{top:0;left:calc(-1 * var(--bleed));right:calc(-1 * var(--bleed));border-top:var(--stroke) solid var(--line)}
.case-sidebar{border-right:1px solid var(--line);min-width:0}
.case-sidebar-inner{position:sticky;top:var(--case-top);padding:0;max-height:calc(100dvh - 2 * var(--case-top));overflow:auto}
.case-sidebar-actions{display:flex;align-items:stretch;border-bottom:1px solid var(--line);background:var(--background)}
.case-back{display:inline-flex;align-items:center;gap:10px;flex:1;margin:0;padding:20px;min-height:64px;color:var(--heading);transition:background-color .18s,color .18s}
.case-back:hover{background:var(--tag)}.case-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.case-sidebar-actions .theme-toggle{position:static;flex:0 0 48px;width:48px;height:auto;border-left:1px solid var(--line)}
.case-toc{display:flex;flex-direction:column;gap:8px;padding:24px 20px}
.case-toc a{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border-left:2px solid transparent;color:var(--muted);transition:background-color .18s,color .18s,border-color .18s}
.case-toc a span{font-size:11px;font-variant-numeric:tabular-nums;opacity:.6}.case-toc a:hover{color:var(--text);background:var(--tag)}.case-toc a[aria-current]{color:var(--heading);background:var(--tag);border-color:var(--heading)}
.case-content{min-width:0}
.case-content section{padding:80px clamp(32px,4vw,64px);border-bottom:1px solid var(--line);scroll-margin-top:24px}
.case-eyebrow{font:500 11px/1.4 var(--display);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.case-content h1{font:500 clamp(32px,3.4vw,52px)/1.13 var(--display);color:var(--heading);letter-spacing:-.035em;max-width:min(720px,calc(100% - 32px));text-wrap:balance;margin-bottom:32px}
.case-content h2{font:500 clamp(26px,2.4vw,36px)/1.2 var(--display);color:var(--heading);letter-spacing:-.025em;margin-bottom:20px}
.case-content h3{font:500 23px/1.25 var(--display);letter-spacing:-.02em;margin-bottom:14px}
.case-content p,.case-content li{font:500 14px/1.6 var(--sans)}.case-content p+p{margin-top:24px}.case-content strong{font-weight:700}
.case-hero>.case-eyebrow{margin-bottom:16px}
.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px}.case-tags span{padding:4px 12px;border-radius:20px;background:var(--tag);color:var(--muted);font-weight:400}
.case-facts{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:32px;margin-bottom:0}.case-facts dt{font-size:11px;color:var(--muted);margin-bottom:8px}.case-facts dd{margin:0;font-size:14px}
.case-cover{margin:0;border-bottom:1px solid var(--line)}.case-cover img{width:100%;height:auto}
.case-figure{margin:40px 0 0}.case-figure img{width:100%;height:auto;background:transparent;border:0}.case-figure figcaption{font-size:12px;line-height:1.5;color:var(--muted);margin-top:14px}.case-figure+p{margin-top:32px}
.case-subsection{position:relative;margin-top:64px}.case-subsection+.case-subsection:before{content:"";position:absolute;inset:-32px 0 auto;border-top:1px solid var(--line);pointer-events:none}
.case-subsection .case-eyebrow{margin-bottom:8px}.case-subsection h3{margin-bottom:14px}
/* Gaps paint complete dividers. An odd final card spans the row, leaving no open cell. */
.case-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:40px;border:1px solid var(--line);background:var(--line)}
.case-card{padding:32px;background:var(--background);min-width:0}.case-card:last-child:nth-child(odd){grid-column:1/-1}
.case-card h3{font:700 15px/1.4 var(--sans);margin-bottom:12px}.case-card p{color:var(--text)}.case-card ul{padding-left:18px;margin:0}.case-card li+li{margin-top:10px}
.case-statement{position:relative;width:100%;margin:48px 0 0;padding:clamp(40px,4vw,64px);border:1px solid var(--line);background:var(--tag);font:500 clamp(26px,2.4vw,36px)/1.25 var(--display);letter-spacing:-.025em;color:var(--heading)}
.case-statement+.case-figure{margin-top:48px}
.case-principles{padding:0;margin:32px 0 0;list-style:none;counter-reset:principle}.case-principles li{padding:24px 0;border-bottom:1px solid var(--line);display:flex;gap:24px;align-items:center;counter-increment:principle}.case-principles li:before{content:'0' counter(principle);color:var(--heading);font-family:var(--display)}
.case-end{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.case-project-cell{padding:28px clamp(24px,3vw,48px);min-height:144px;display:flex;flex-direction:column;justify-content:center;gap:12px}.case-end a{color:var(--text);transition:background-color .18s}.case-project-cell+.case-project-cell{border-left:1px solid var(--line)}.case-end a:hover{background:var(--tag)}.case-end .case-eyebrow{margin:0;color:var(--muted)}
.case-project-name{font:500 25px/1.2 var(--display);color:var(--heading)}.case-project-description{font-size:12px;color:var(--muted)}
@media(min-width:1920px){.case-content p,.case-content li{font-size:16px}.case-layout{grid-template-columns:240px minmax(0,1fr)}.case-content section{padding-block:96px}}
@media(max-width:809.98px){
  body[data-page="case-study"]{--case-top:24px}
  html:has(body[data-page="case-study"]){scroll-padding-top:104px}
  .case-frame-cap{width:82%}
  .case-layout{width:82%;margin-top:24px;grid-template-columns:1fr}
  body[data-page="case-study"]>.about-footer{width:82%}
  .case-sidebar{position:sticky;top:var(--case-top);z-index:10;border-right:0;border-bottom:1px solid var(--line);background:var(--background)}
  .case-sidebar:before{content:'';position:absolute;top:-24px;left:-1px;right:-1px;height:24px;background:var(--background);pointer-events:none}
  .case-sidebar-inner{position:static;max-height:none;overflow:visible}
  .case-back{padding:12px 20px;min-height:56px}.case-toc{display:none}
  .case-content section{padding:48px 24px;scroll-margin-top:16px}.case-content h1{font-size:32px}.case-content h2{margin-bottom:18px}
  .case-facts{grid-template-columns:1fr;gap:24px}.case-tags{margin-bottom:32px}
  .case-grid{grid-template-columns:1fr;margin-top:32px}.case-card{padding:28px 24px}
  .case-subsection{margin-top:48px}.case-subsection+.case-subsection:before{top:-24px}
  .case-statement{padding:32px 28px;margin-top:40px;font-size:26px}.case-statement+.case-figure{margin-top:40px}
  .case-figure{margin-top:32px}.case-project-cell{padding:24px 16px;min-height:128px}.case-project-name{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.case-toc a,.case-back,.case-end a{transition:none}}
/* Keep prototype motion available without transferring every animation on entry. */
.case-demo{position:relative}
.case-demo-toggle{position:absolute;z-index:1;top:16px;right:16px;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;background:var(--background);color:var(--heading);border:1px solid var(--line);font:500 12px/1.2 var(--sans);cursor:pointer;transition:background-color .18s}
.case-demo-toggle:hover{background:var(--tag)}
.case-demo-toggle:focus-visible{outline:2px solid var(--heading);outline-offset:4px}
@media(max-width:809.98px){.case-demo-toggle{top:8px;right:8px;padding:10px 12px;font-size:11px}}

/* Dark labels and connector lines retain their intended contrast in either theme. */
.case-figure-light{padding:24px;background:#f1f4f8;border:1px solid #d5dce5}
.case-figure-light img{background:transparent}
/* One rhythm for introductions, image sequences, callouts, and subsection groups. */
.case-content h2+h3,.case-content h2+.case-subsection{margin-top:32px}
.case-content h3+.case-figure{margin-top:24px}
.case-figure+.case-figure{margin-top:32px}
.case-figure+p,.case-statement+p,.case-grid+p{margin-top:24px}
.case-subsection:first-child{margin-top:0}
@media(max-width:809.98px){
 .case-figure-light{padding:16px}
 .case-content h2+h3,.case-content h2+.case-subsection{margin-top:24px}
 .case-content h3+.case-figure,.case-figure+.case-figure{margin-top:24px}
}