/* Case-study composition uses the portfolio's existing Queens / Inter and color tokens. */
a.project-card{text-decoration:none}
/* Calibrated against Inter body copy: 54 zero-glyph widths yields roughly 66 prose characters, not 54. */
.case-study{--case-reading:54ch;--case-section-gap:80px;--case-column-gap:48px;display:grid;gap:1px;background:var(--ink);padding-top:1px;overflow-wrap:anywhere}
/* Beat styles.css #main without raising specificity on responsive layout tokens. */
#main.case-study{background:var(--ink)}
.case-content{min-width:0;background:var(--paper);border-radius:var(--block-radius);overflow:clip}
.case-heading,.case-hero-media,.case-overview,.case-body{width:calc(100% - 2 * var(--content-inset));max-width:none;margin-left:auto;margin-right:auto}
.case-heading{padding:56px 0 40px;display:block}
.case-back{display:inline-flex;align-items:center;justify-content:center;width:var(--control-size);height:var(--control-size);padding:12px;margin:0 0 32px;border:0;border-radius:var(--control-radius);background:var(--surface-subtle);color:var(--ink);text-decoration:none;touch-action:manipulation;transition:color .16s ease,transform .1s ease}
.case-back svg{display:block;flex:none;width:20px;height:20px}
.case-back:is(:hover,:focus-visible,:active){color:var(--brand-primary);background:var(--surface-subtle)}
.case-back:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.case-back:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.case-back{transition:none}.case-back:active{transform:none}}
.case-kicker{font-size:1rem;line-height:1.5;text-transform:none;letter-spacing:normal;color:var(--muted);margin:40px 0 16px}
.case-heading h1{font:500 clamp(2.75rem,5vw,4.5rem)/1.06 var(--display-font);max-width:none;margin:0 0 24px}
.case-deck{font:400 clamp(1.25rem,2vw,1.75rem)/1.4 Inter,Arial,sans-serif;letter-spacing:normal;max-width:52ch;margin:0 0 24px}
.case-heading .project-tags{margin-top:32px}
.case-hero-media{padding:clamp(16px,2.5vw,36px);background:var(--surface-subtle);border-radius:var(--block-radius);margin-top:0;margin-bottom:0}
.case-hero-media img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}
.case-hero-media a{display:block}
.case-overview{display:grid;grid-template-columns:1fr 1fr;gap:40px var(--case-column-gap);padding:64px 0 var(--case-section-gap);border-bottom:1px solid var(--line)}
.case-overview h2{font:600 1rem/1.5 Inter,Arial,sans-serif;margin:0 0 16px}
.case-overview p{font-size:1rem;line-height:1.65;color:var(--muted);margin:0;max-width:45ch}
.case-body{font-size:1rem;line-height:1.75}
.case-overview p,.case-body :is(p,ul,ol,figcaption){text-align:start;white-space:normal;overflow-wrap:anywhere}
.case-chapter{padding:var(--case-section-gap) 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--sticky-header-height,96px) + 24px)}
.chapter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--case-column-gap);max-width:none;margin:0 0 40px;align-items:start}
.chapter-row:only-child{margin-bottom:0}
.case-body h2{font:600 clamp(1.5rem,2.4vw,2rem)/1.25 Inter,Arial,sans-serif;letter-spacing:normal;margin:0}
.case-body h3{font:600 clamp(1.125rem,1.8vw,1.5rem)/1.35 Inter,Arial,sans-serif;margin:0 0 16px;letter-spacing:normal}
.case-body h4{font-size:1.125rem;line-height:1.4;margin:0 0 12px}
.case-body p,.case-body ul,.case-body ol{margin:0 0 20px;max-width:var(--case-reading)}
.case-body p:last-child{margin-bottom:0}
.case-body li{margin-bottom:10px}
.case-body a{text-decoration:underline;text-underline-offset:4px}
.case-body figure{margin:24px 0 0;padding:clamp(12px,2vw,24px);background:var(--surface-subtle);border-radius:var(--block-radius);min-width:0}
.case-body img{display:block;width:100%;height:auto;max-height:740px;object-fit:contain;margin:auto;border-radius:8px}
.case-body figcaption{max-width:var(--case-reading);color:var(--muted);font-size:1rem;line-height:1.5;margin-top:16px}
.case-body iframe{display:block;width:100%;min-height:480px;border:0;border-radius:var(--block-radius);background:var(--surface-subtle)}
.case-body video{display:block;width:100%;height:auto;max-height:640px;object-fit:contain;border-radius:var(--block-radius);background:var(--surface-subtle)}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.case-cell{min-width:0}
.case-grid figure{margin-top:0;height:100%;display:flex;align-items:center;justify-content:center}
.case-grid figure a{display:block;width:100%}
.solution-preview{align-items:stretch}
.solution-preview figure{min-height:300px;padding:32px}
.solution-preview img{max-height:440px}
.three-up{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--block-radius);overflow:hidden}
.three-up .case-cell{background:var(--paper);padding:32px}
.three-up h3{font-size:clamp(1.125rem,1.8vw,1.5rem)}
.evidence-pair{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
.evidence-insights{grid-template-columns:minmax(0,62fr) minmax(0,38fr);align-items:start}
.evidence-insights>.case-cell:last-child{padding:32px;background:var(--surface-subtle);border-radius:var(--block-radius)}
.evidence-insights p{font-size:1rem}
.principles-grid{gap:24px}
.principles-grid .case-cell{padding:32px;background:var(--surface-subtle);border-radius:var(--block-radius)}
.case-interlude{border-bottom:1px solid var(--line);padding:var(--case-section-gap) 0}
.case-interlude p{font:500 clamp(1.5rem,2.5vw,2rem)/1.4 Inter,Arial,sans-serif;max-width:42ch;letter-spacing:normal}
.design-feature{margin-top:56px}
.design-feature:first-of-type{margin-top:0}
.design-feature:empty{display:none}
.feature-layout{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--case-column-gap);align-items:start}
.feature-layout .case-cell:last-child{display:grid;gap:24px}
.feature-layout figure{height:auto;min-height:0}
.feature-layout img,.feature-layout video{max-height:620px}
.impact-grid .case-cell{padding:36px;background:var(--surface-subtle);border-radius:var(--block-radius)}
.impact-grid p{font:500 clamp(1.25rem,2vw,1.5rem)/1.5 Inter,Arial,sans-serif;letter-spacing:normal}
.case-recruiter .impact-grid p{font-weight:300}
.case-next.project-card{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;grid-column:auto;padding:32px var(--content-inset);margin:0;border-radius:var(--block-radius);background:var(--paper)}
.case-next-label{display:block;font-size:1rem;line-height:1.5;color:var(--muted);text-transform:none;letter-spacing:normal;margin-bottom:12px}
.case-next .project-title{font-size:clamp(2rem,3vw,2.5rem);line-height:1.15;margin:0}
.case-next-action{display:inline-flex;flex:none;align-items:center;justify-content:center;min-height:var(--control-size);padding:var(--control-padding-y) var(--control-padding-x);border-radius:var(--control-radius);color:var(--ink);font-size:1rem;line-height:1.25;text-transform:none;letter-spacing:normal;transition:background-color .16s ease,color .16s ease,transform .1s ease}
@media(hover:hover){.case-next:hover .case-next-action{background:var(--surface-subtle);color:var(--action-primary)}}
.case-next:is(:focus-visible,:active) .case-next-action{background:var(--surface-subtle);color:var(--action-primary)}
.case-next:active .case-next-action{transform:translateY(1px)}
.case-chapter:last-child{border-bottom:0}
@media(max-width:1000px){.case-study{--case-section-gap:56px;--case-column-gap:32px}.case-overview{gap:40px;padding:56px 0}.chapter-row{gap:32px}.case-chapter{padding:56px 0}.feature-layout{gap:32px}.evidence-insights{grid-template-columns:3fr 2fr}.three-up .case-cell{padding:24px}.case-interlude{padding:56px 0}}
@media(max-width:650px){.case-study{--case-section-gap:40px;--case-column-gap:20px}.case-heading{padding:32px 0}.case-kicker{margin-top:24px}.case-heading .project-tags{margin-top:24px}.case-overview{grid-template-columns:1fr;gap:28px;padding:40px 0}.case-chapter{padding:40px 0}.chapter-row{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.case-grid,.evidence-pair,.evidence-insights,.feature-layout,.three-up{grid-template-columns:1fr;gap:20px}.three-up{gap:1px}.solution-preview figure{min-height:0;padding:20px}.case-body figure{padding:16px}.case-body img{max-height:none}.case-body video{max-height:600px}.case-body iframe{min-height:320px}.case-interlude{padding:48px 0}.design-feature{margin-top:40px}.case-next.project-card{padding:32px var(--content-inset);align-items:flex-start;flex-direction:column;gap:24px}.case-next-action{margin-left:calc(-1 * var(--control-padding-x))}.principles-grid .case-cell,.evidence-insights>.case-cell:last-child{padding:24px}}
.solution-preview .preview-wide{grid-column:1/-1}
.solution-preview .preview-wide img{max-height:640px}

/* Recruiter screenshots occupy one header-adjusted 85vh viewing area without cropping. */
.case-recruiter :is(.case-hero-media,.case-body figure){height:max(0px,calc(85vh - var(--sticky-header-height,var(--header-height))))}
.case-recruiter .case-hero-media a{height:100%}
.case-recruiter :is(.case-hero-media,.case-body) img{height:100%;max-height:none;object-fit:contain}

/* Shared case-study heading rhythm, on desktop and mobile. */
.case-study .case-heading{padding-top:48px}
.case-study .case-kicker{margin-top:0;margin-bottom:24px}
.case-study .case-heading h1{margin-bottom:16px}
.case-study .case-heading .project-tags{margin-top:24px;gap:16px}

/* Shared case-study grid: 80px margins, 24px gutters, 12 columns. */
.case-study{--content-inset:80px;--case-column-gap:24px;--grid-gutter:24px}
.case-overview,.chapter-row,.case-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.chapter-row>h2{grid-column:1/5}
.chapter-row>div{grid-column:5/13;min-width:0}
.case-overview>.overview-column{display:grid;grid-column:span 6;gap:24px;align-content:start;min-width:0}
.overview-column>div{min-width:0}
.case-overview .overview-column h2{margin-bottom:16px}
.case-grid>*{grid-column:span 6;min-width:0}
.three-up{gap:24px;background:transparent;border:0;overflow:visible}
.three-up>*{grid-column:span 4}
.evidence-pair>:first-child,.evidence-insights>:first-child{grid-column:span 8}
.evidence-pair>:last-child,.evidence-insights>:last-child{grid-column:span 4}
.feature-layout>:first-child{grid-column:span 4}
.feature-layout>:last-child{grid-column:span 8}
.solution-preview .preview-wide{grid-column:1/-1}
.chapter-row>.impact-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
.chapter-row>.impact-grid>:first-child{grid-column:span 4}
.chapter-row>.impact-grid>:last-child{grid-column:span 4}
/* Stack on narrow screens without reducing the shared margins or gaps. */
@media(max-width:650px){
 .case-overview,.chapter-row,.case-grid,.chapter-row>.impact-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .case-overview>.overview-column{grid-column:1/-1;grid-template-columns:minmax(0,1fr)}
 .chapter-row>h2,.chapter-row>div,.case-overview>div>h2,.case-overview>div>p,.case-grid>*{grid-column:1/-1}
 .case-grid>:first-child,.case-grid>:last-child,.chapter-row>.impact-grid>:first-child,.chapter-row>.impact-grid>:last-child{grid-column:1/-1}
}

/* Share overview row heights across each project’s two-column summary. */
@media(min-width:651px){
 .case-study .case-overview{grid-template-rows:auto auto}
 .case-study .case-overview>.overview-column{grid-row:1/3;grid-template-rows:subgrid}
 .case-study .case-overview>.overview-column:first-child{grid-column:1/7}
 .case-study .case-overview>.overview-column:last-child{grid-column:7/13}
}

/* Give the Recruiter framing question a clear, readable hierarchy. */
.case-recruiter .case-body .case-hmw{margin-bottom:32px;font-family:Inter,Arial,sans-serif;font-size:clamp(1.25rem,2vw,1.5rem);font-weight:400;font-style:italic;font-synthesis:style;line-height:1.5;max-width:calc(48ch + 2 * var(--block-padding-min));padding:var(--block-padding-min);background:var(--surface-subtle);border-radius:var(--block-radius)}

.case-recruiter .impact-grid em{font-style:italic;font-weight:300;font-synthesis:style}

/* Align each desktop chapter heading with its content’s first text baseline. */
@media(min-width:651px){
 .chapter-row{align-items:first baseline}
}
/* Let this two-line lead use its content column without widening other prose. */
.case-recruiter .case-body .case-problem-intro{max-width:none}

.case-study .case-role-highlight{color:var(--brand-primary)}

.case-study .case-role-punctuation{color:var(--ink)}

/* Recruiter editorial structure: section labels, stacked topics, then card rows. */
.case-recruiter .case-topic-stack{display:grid;gap:48px}
.case-recruiter .case-topic-stack>section{min-width:0}
.case-recruiter .case-body .case-hmw{padding:0;background:transparent;border-radius:0;max-width:var(--case-reading);margin-bottom:32px}
.case-recruiter .recruiter-challenge-cards>.case-cell{grid-column:span 4;padding:24px;background:var(--surface-subtle);border-radius:var(--block-radius)}
.case-recruiter .recruiter-challenge-cards h3{margin-bottom:16px}
@media(max-width:650px){
 .case-recruiter .case-topic-stack{gap:32px}
 .case-recruiter .recruiter-challenge-cards>.case-cell{grid-column:1/-1}
}

/* Shared editorial hierarchy, established in the LinkedIn Recruiter case study. */
.case-study .case-body h2{font-size:2rem;font-weight:500;line-height:1.25}
.case-study .case-body h3,.case-study .case-overview h2{font-size:1.5rem;font-weight:500;line-height:1.35}
.case-study .case-body h3{margin-bottom:24px}
.case-study .case-overview .overview-column h2{margin-bottom:32px}
.case-study .case-overview{row-gap:48px}
.case-study .case-overview>.overview-column{row-gap:48px}
.case-study .case-body p,.case-study .case-body li{color:var(--muted);font-weight:400}
.case-study .chapter-row{margin-bottom:48px}
.case-study .chapter-row:only-child{margin-bottom:0}
.case-recruiter .recruiter-question-panel{padding:0;background:transparent;border-radius:0}
.case-recruiter .case-body .case-hmw{font-size:1.5rem;font-style:normal;font-weight:500;color:var(--ink);max-width:none;margin-bottom:32px}
.case-recruiter .recruiter-objectives{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;max-width:none;margin:0;padding:0;list-style:none}
.case-recruiter .recruiter-objectives li{margin:0;min-width:0}
.case-recruiter .recruiter-objectives h3{font-size:1.25rem;color:var(--ink);margin-bottom:16px}
.case-recruiter .impact-grid p{font-size:1.25rem;color:var(--ink);line-height:1.5}
.case-recruiter .impact-grid em{font-style:italic;font-synthesis:style}
@media(max-width:650px){
 .case-study .case-body h2{font-size:1.5rem}
 .case-study .case-body h3,.case-study .case-overview h2,.case-recruiter .case-body .case-hmw{font-size:1.25rem}
 .case-recruiter .recruiter-objectives{grid-template-columns:minmax(0,1fr);gap:32px}
 .case-recruiter .recruiter-question-panel{padding:0}
 .case-study .case-overview,.case-study .case-overview>.overview-column{row-gap:32px}
}

/* The supplied laptop is 3024 × 1888. Its browser content bounds are
   x=304..2716 and y=264..1634; align with the browser’s inner edge. */
.case-recruiter .recruiter-demo{--demo-padding:clamp(16px,2.5vw,36px);padding:var(--demo-padding);display:flex;align-items:center;justify-content:center}
.case-recruiter .recruiter-device{position:relative;flex:none;width:min(100%,calc((85vh - var(--sticky-header-height,var(--header-height)) - 2 * var(--demo-padding)) * 1.6016949153));aspect-ratio:3024/1888;isolation:isolate}
.case-recruiter .recruiter-device-frame{display:block;width:100%;height:auto;max-height:none}
.case-recruiter .recruiter-device-screen{position:absolute;left:10.0529100529%;top:13.9830508475%;width:79.7619047619%;height:72.563559322%;overflow:hidden;background:#f3f2f0}
.case-recruiter .recruiter-demo-video{display:block;width:100%;height:100%;object-fit:contain;max-height:none;border:0;border-radius:0;background:#f3f2f0}
/* Reuse the portfolio’s text-button shape, spacing, and red hover treatment. */
.case-recruiter .recruiter-demo-actions{width:calc(100% - 2 * var(--content-inset));margin:16px auto 0;display:flex;justify-content:flex-end}
.case-recruiter .recruiter-demo-actions>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.case-recruiter .recruiter-demo-actions :is(a,button){display:inline-flex;align-items:center;justify-content:center;min-width:var(--control-size);min-height:var(--control-size);padding:var(--control-padding-y) var(--control-padding-x);border:0;border-radius:var(--control-radius);background:transparent;color:var(--ink);font:400 1rem/1.25 Inter,Arial,sans-serif;white-space:nowrap;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,color .16s ease,transform .1s ease}
@media(hover:hover){.case-recruiter .recruiter-demo-actions :is(a,button):hover{background:var(--surface-subtle);color:var(--action-primary)}}
.case-recruiter .recruiter-demo-actions :is(a,button):is(:focus-visible,:active){background:var(--surface-subtle);color:var(--action-primary)}
.case-recruiter .recruiter-demo-actions :is(a,button):focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.case-recruiter .recruiter-demo-actions :is(a,button):active{transform:translateY(1px)}
.case-recruiter .recruiter-interface-examples{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 24px;margin-top:48px}
.case-recruiter .recruiter-example-row{grid-column:span 6;min-width:0;display:flex;flex-direction:column;gap:16px;align-items:stretch}
.case-recruiter .recruiter-example-row>h3{margin:0;padding:0}
@media(max-width:650px){
 .case-recruiter .recruiter-demo{height:auto;min-height:0;padding:12px}
 .case-recruiter .recruiter-device{width:100%}
 .case-recruiter .recruiter-demo-actions{justify-content:flex-start}
 .case-recruiter .recruiter-demo-actions>div{gap:8px}
 .case-recruiter .recruiter-interface-examples{gap:32px;margin-top:32px}
 .case-recruiter .recruiter-example-row{gap:16px}
 .case-recruiter .recruiter-example-row>h3,.case-recruiter .native-experience-figure{grid-column:1/-1}
 .case-recruiter .recruiter-example-row>h3{padding-top:0}
}
.case-recruiter .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Crisp, code-native Experience examples based on the recorded product UI.
   Every content value is fictional; no extra legend or profile chrome is added. */
.case-recruiter .native-experience-figure{flex:1;min-width:0;padding:24px;background:var(--surface-subtle);border-radius:var(--block-radius)}
.case-recruiter .experience-card{height:100%;padding:24px 20px 28px;background:#fff;border-radius:var(--block-radius);color:#191919;font-family:Arial,Helvetica,sans-serif;font-size:1rem;line-height:1.45;font-weight:400;overflow-wrap:normal}
.case-recruiter .case-body .experience-card h4{margin:0 0 6px;color:#191919;font:700 1.25rem/1.3 Arial,Helvetica,sans-serif;letter-spacing:normal}
.case-recruiter .experience-resume-controls{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:20px;color:#666;font-size:1rem;line-height:1.45}
.case-recruiter .experience-highlight-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 6px;border:0;border-radius:2px;background:#e8e8e8;color:#333;font:600 1rem/1.4 Arial,Helvetica,sans-serif;text-align:left;cursor:pointer}
.case-recruiter .experience-highlight-toggle svg{flex:none;width:16px;height:16px}
.case-recruiter .experience-highlight-toggle:focus-visible{outline:2px solid #0a66c2;outline-offset:3px}
.case-recruiter .experience-roles{display:grid;gap:32px}
.case-recruiter .experience-role{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}
.case-recruiter .experience-employer-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#e8eef1;color:#657785}
.case-recruiter .experience-employer-icon svg{width:30px;height:30px}
.case-recruiter .experience-role-content{min-width:0}
.case-recruiter .case-body .experience-card h5{margin:0 0 3px;color:#191919;font:700 1rem/1.4 Arial,Helvetica,sans-serif;letter-spacing:normal}
.case-recruiter .case-body .experience-card p{max-width:none;margin:0;text-align:left;overflow-wrap:normal;color:#191919;font-size:1rem;font-weight:400;line-height:1.45}
.case-recruiter .case-body .experience-card .experience-company{font-size:1rem}
.case-recruiter .experience-company strong{font-weight:700}
.case-recruiter .case-body .experience-card .experience-dates{font-size:1rem;color:#666;margin-top:2px}
.case-recruiter .experience-description{margin-top:12px}
.case-recruiter .case-body .experience-description p+p{margin-top:2px}
.case-recruiter .resume-highlight{padding:0 2px;border-radius:2px;background:#deecfc;color:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.case-recruiter .case-body .experience-card .experience-source{margin-top:12px;color:#666;font-size:1rem;line-height:1.5}
.case-recruiter .experience-card[data-highlights="hidden"] .resume-highlight{background:transparent}
.case-recruiter .experience-card[data-highlights="hidden"] .experience-eye-slash{display:none}
.case-recruiter .experience-card[data-highlights="hidden"] .experience-highlight-toggle{background:transparent}
@media(max-width:900px){
 .case-recruiter .recruiter-interface-examples{grid-template-columns:minmax(0,1fr)}
 .case-recruiter .recruiter-example-row{grid-column:1/-1}
 .case-recruiter .native-experience-figure{padding:16px}
 .case-recruiter .experience-card{padding:20px 16px}
 .case-recruiter .experience-role{grid-template-columns:32px minmax(0,1fr);gap:12px}
 .case-recruiter .experience-employer-icon{width:32px;height:32px}
 .case-recruiter .experience-employer-icon svg{width:24px;height:24px}
}
@media(max-width:650px){
 .case-recruiter .native-experience-figure{grid-column:1/-1;padding:12px;background:var(--surface-subtle);border-radius:var(--block-radius)}
 .case-recruiter .experience-card{padding:20px 16px;border-radius:var(--block-radius)}
 .case-recruiter .experience-resume-controls{align-items:flex-start;gap:8px;margin-bottom:20px}
 .case-recruiter .experience-highlight-toggle{min-height:44px}
 .case-recruiter .experience-role{grid-template-columns:1fr;gap:8px}
 .case-recruiter .experience-employer-icon{width:32px;height:32px}
 .case-recruiter .experience-roles{gap:28px}
}

/* Source metadata belongs to the resume-highlight state, not the default view. */
.case-recruiter .experience-card[data-highlights="hidden"] .experience-source{visibility:hidden}
.case-recruiter #recruiter-coded-demo{display:block;width:100%;height:100%;min-height:0;border:0;background:var(--surface-subtle)}
.case-recruiter .recruiter-device-screen{background:var(--surface-subtle)}

.case-recruiter .experience-card .query-match{padding:0 2px;border-radius:2px;background:#deecfc;color:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.case-recruiter .recruiter-demo-actions .recruiter-demo-toggle[aria-pressed="true"]{background:transparent;color:var(--brand-primary)}
.case-recruiter .case-topic-stack{grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.case-recruiter .case-topic-stack>section{grid-column:span 4}
@media(max-width:650px){.case-recruiter .case-topic-stack{grid-template-columns:minmax(0,1fr);gap:32px}.case-recruiter .case-topic-stack>section{grid-column:1/-1}}
:is(.case-recruiter,.case-spacegrid) .case-overview .case-intro+.case-intro{margin-top:20px}

/* Carry the shared editorial rhythm into the design-project layouts. */
.case-study:not(.case-recruiter) .three-up .case-cell{padding:0;background:transparent;border-radius:0}
.case-study:not(.case-recruiter) :is(.principles-grid .case-cell,.evidence-insights>.case-cell:last-child){padding:24px;background:var(--surface-subtle);border-radius:var(--block-radius)}
.case-study:not(.case-recruiter) .design-feature{margin-top:48px}
.case-study:not(.case-recruiter) .chapter-row+.design-feature{margin-top:0}
.case-study:not(.case-recruiter) .evidence-boards>*{grid-column:1/-1}
/* A single viewing frame follows the measured sticky header, without cropping. */
.case-study:not(.case-recruiter){--case-media-height:max(0px,calc(85vh - var(--sticky-header-height,var(--header-height))))}
.case-study:not(.case-recruiter) :is(.case-hero-media,.case-body figure){height:var(--case-media-height);min-height:0;display:flex;align-items:center;justify-content:center}
.case-study:not(.case-recruiter) :is(.case-hero-media,.case-body figure)>a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.case-study:not(.case-recruiter) :is(.case-hero-media,.case-body figure) :is(img,video){width:100%;height:100%;max-height:none;min-height:0;object-fit:contain}
@media(max-width:650px){
 .case-study:not(.case-recruiter) .design-feature{margin-top:32px}
 .case-study:not(.case-recruiter) .chapter-row+.design-feature{margin-top:0}
 /* Keep narrow-screen media proportional, as with the Recruiter laptop. */
 .case-study:not(.case-recruiter) :is(.case-hero-media,.case-body figure){height:auto;padding:12px}
 .case-study:not(.case-recruiter) :is(.case-hero-media,.case-body figure)>a{height:auto}
 .case-study:not(.case-recruiter) :is(.case-hero-media,.case-body figure) :is(img,video){height:auto;max-height:var(--case-media-height)}
}

/* Keep the play/pause cue while the active control stays unfilled. */
.recruiter-demo-actions .demo-state-icon{display:block;flex:none}
.recruiter-demo-toggle[aria-pressed="false"] .demo-pause-icon,.recruiter-demo-toggle[aria-pressed="true"] .demo-play-icon{display:none}
.case-recruiter .recruiter-demo-actions .recruiter-demo-toggle{gap:8px}

.case-recruiter .case-overview .case-scope-context{margin-top:20px}

/* One shared surface for the four examples, with captions beneath the visuals. */
.case-recruiter .recruiter-interface-examples{padding:24px;background:var(--surface-subtle);border-radius:var(--block-radius);gap:40px 24px}
.case-recruiter .recruiter-interface-examples .native-experience-figure{padding:0;background:transparent;border-radius:0}
.case-recruiter .recruiter-example-row>h3{font-size:1rem;line-height:1.4;font-weight:500;margin:0;padding:0}
@media(max-width:650px){.case-recruiter .recruiter-interface-examples{padding:24px;gap:32px}}

/* Recruiter and Spacegrid overviews: keep each title 16px above its content. */
:is(.case-recruiter,.case-spacegrid) .case-overview .overview-column h2{margin-bottom:16px}

/* Stack Spacegrid problem items, with each heading directly above its description. */
.case-spacegrid #problem .three-up{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:32px}
.case-spacegrid #problem .three-up>.case-cell{display:block;grid-column:1/-1;grid-row:auto}
.case-spacegrid #problem .three-up>.case-cell :is(h3,p){margin:0}
.case-spacegrid #problem .three-up>.case-cell h3{margin-bottom:16px}

/* Keep the larger guiding questions in one vertical column. */
.case-spacegrid #development .three-up{grid-template-columns:minmax(0,1fr);align-items:start;row-gap:32px}
.case-spacegrid #development .three-up>.case-cell{grid-column:1/-1}
.case-spacegrid #development .three-up>.case-cell>p{margin:0;max-width:var(--case-reading);font:500 1.5rem/1.35 Inter,Arial,sans-serif;letter-spacing:normal;color:var(--ink)}
@media(max-width:650px){.case-spacegrid #development .three-up{row-gap:32px}.case-spacegrid #development .three-up>.case-cell>p{font-size:1.25rem}}

/* Case-study headers stay in the document flow. */
html:has(.case-study){scroll-padding-top:0}
.page:has(>.case-study)>.header{position:relative;top:auto}
.case-study .case-chapter{scroll-margin-top:24px}

/* Both vertical stacks share the preceding chapter’s content-column start. */
.case-spacegrid .spacegrid-stack-row{margin-bottom:0}
.case-spacegrid .spacegrid-stack-row .case-cell>:is(h3,p){max-width:var(--case-reading);text-align:start}

/* Spacegrid text sections share a viewport minimum and grow with their content. */
.case-spacegrid :is(.case-overview,#problem){min-height:var(--spacegrid-section-min-height);padding-block:var(--case-section-gap)}
.case-spacegrid .case-overview{align-content:center}
.case-spacegrid #problem{display:flex;flex-direction:column;justify-content:center}

/* Case studies use their back arrow instead of the global navigation header. */
html:has(.case-study){--header-height:0px;--sticky-header-height:0px;scroll-padding-top:0}
#main.case-study{padding-top:0}

/* Consecutive titles/subtitles use the Pocket problem reference's 56px gap.
   Body-copy margins, list spacing, and paragraph rhythm remain independent. */
.case-study{--case-title-gap:56px}
.case-study .case-body :is(h2,h3,h4):has(+:is(h2,h3,h4)){margin-bottom:var(--case-title-gap)}
.case-study .case-body :is(h2,h3,h4)+:is(h2,h3,h4){margin-top:0}
.case-study .case-body .chapter-row:has(>div>h3:only-child):has(+.chapter-row :is(h3,h4):first-child){margin-bottom:var(--case-title-gap)}
.case-study .case-body .chapter-row:has(>div>h3:only-child):has(+.chapter-row :is(h3,h4):first-child)>div>h3{margin-bottom:0}
.case-study .case-body .chapter-row:has(>div>h3:only-child)+.chapter-row:has(:is(h3,h4):first-child){margin-top:0}
.case-study .case-body .chapter-row:has(>h2:only-child):has(+.case-topic-stack){margin-bottom:var(--case-title-gap)}
@media(max-width:650px){
 .case-study .case-body .chapter-row:has(>h2+div>:is(h3,h4):first-child){row-gap:var(--case-title-gap)}
}

.case-recruiter .case-body .resume-process-steps>li{font:500 1rem/1.4 Inter,Arial,sans-serif;letter-spacing:normal;color:var(--ink)}
/* Recruiter chapter rhythm without changing text or card-level spacing. */
.case-recruiter #experience>.recruiter-interface-examples{margin-top:80px}
.case-recruiter #problem>.chapter-row:has(+.chapter-row){margin-bottom:80px}
.case-recruiter #problem>.chapter-row:last-child{margin-bottom:0}

/* Connect engineering considerations to the actual interface. */
.case-feasibility .chapter-row{margin-bottom:32px}
.engineering-annotation{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:32px;background:var(--surface-subtle);border-radius:var(--block-radius);align-items:center}
.engineering-screen-column{grid-column:1/6;display:flex;justify-content:center;min-width:0;padding:0 16px}
.engineering-screen{position:relative;width:100%;max-width:380px;aspect-ratio:var(--screen-ratio);flex:none}
.engineering-screen-spacegrid{max-width:300px}
.engineering-screen-crop{position:absolute;inset:0;overflow:hidden;border-radius:16px}
.case-body .engineering-screen img{display:block;width:100%;height:100%;max-height:none;max-width:none;margin:0;object-fit:contain;border-radius:0}
.engineering-screen-spacegrid .engineering-screen-crop{border-radius:0}
.case-body .engineering-screen-spacegrid img{position:absolute;left:calc(-100% * 3344 / 724);top:0;width:calc(100% * 4068 / 724);height:100%;object-fit:fill}
.engineering-pin,.engineering-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--brand-primary,#D60D29);color:#fff;font:500 1rem/1 Inter,Arial,sans-serif;flex:none}
.engineering-pin{position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #fff;z-index:1}
.case-body .engineering-callouts{grid-column:6/13;display:flex;flex-direction:column;gap:32px;max-width:none;margin:0;padding:0;list-style:none}
.case-body .engineering-callouts>li{display:flex;gap:16px;align-items:flex-start;min-width:0;margin:0;padding:0 0 32px;border-bottom:1px solid var(--line)}
.case-body .engineering-callouts>li:last-child{padding-bottom:0;border-bottom:0}
.engineering-callouts>li>div{min-width:0}
.case-study .case-body .engineering-callouts h3{font:500 1.25rem/1.35 Inter,Arial,sans-serif;margin:2px 0 16px;max-width:none;color:var(--ink)}
.case-body .engineering-callouts p{font-size:1rem;line-height:1.65;margin:0;max-width:var(--case-reading)}
.case-body .engineering-caption{grid-column:1/-1;max-width:none;margin:8px 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:1rem;line-height:1.5}
@media(max-width:900px){.engineering-annotation{grid-template-columns:minmax(0,1fr)}.engineering-screen-column,.case-body .engineering-callouts{grid-column:1/-1}.engineering-screen-column{padding:0 16px 16px}.engineering-screen{max-width:340px}.engineering-screen-spacegrid{max-width:280px}}
@media(max-width:650px){.engineering-annotation{padding:24px}.case-body .engineering-callouts>li{gap:12px}.engineering-screen-column{padding-inline:0}}

/* Separate Technical Considerations where the preceding Designs frames have no divider. */
:is(.case-spacegrid,.case-pocket) .case-feasibility{border-top:1px solid var(--line)}