/* Shared spacing rhythm for the home page and every case study. */
:root{
 --page-gutter:44px;
 --section-gap:64px;
 --block-gap:32px;
 --stack-gap:16px;
 --card-padding:24px;
 --panel-padding:32px;
 --card-gap:24px;
 --layout-gutter:var(--page-gutter);
 --layout-section-gap:var(--section-gap);
 --layout-card-padding:var(--card-padding);
 --layout-panel-padding:var(--panel-padding);
 --layout-card-gap:var(--card-gap);
}
.shell,.footer-inner{width:min(var(--layout-wide),calc(100% - 2 * var(--page-gutter)));margin-inline:auto}
.shell.case-study{max-width:var(--layout-wide);margin-bottom:0}
nav.top{padding-block:var(--card-padding);column-gap:var(--card-gap);row-gap:var(--stack-gap)}
/* Home sections share one outer rhythm. Smaller related elements use block spacing. */
.designer-home #main-content{padding-bottom:var(--section-gap)}
.designer-home .avatar-hero{margin:0 0 var(--block-gap);padding-top:var(--card-padding)}
.designer-home .avatar-composition{gap:var(--block-gap)}
.designer-home .ticker{margin:0 0 var(--block-gap);padding-block:var(--stack-gap)}
.designer-home .hiring-strip{margin:0 0 var(--section-gap);padding:var(--panel-padding);gap:var(--card-gap)}
.designer-home #work{margin:0;padding:0}
.designer-home #approach{margin:calc(var(--section-gap) * 1.5) 0 0;padding:0}
.designer-home :is(#work,#approach)>.section-head{margin:0 0 var(--block-gap);gap:var(--card-gap)}
.designer-home .projects,.designer-home .strength-grid{gap:var(--card-gap)}
.designer-home .project-details{padding:var(--card-padding)}
.designer-home .strength{padding:var(--card-padding) var(--stack-gap) var(--card-padding) 0}
/* Preserve the original cursor hover slide alongside the shared spacing. */
@media(hover:hover) and (pointer:fine){
 .designer-home .strength:hover{padding-left:var(--stack-gap)}
}
@media(prefers-reduced-motion:reduce){
 .designer-home .strength{transition:none}
}
.designer-home .strength h3{margin:var(--block-gap) 0 var(--stack-gap)}
.designer-home #about.about-section{margin:var(--section-gap) 0 0;padding:var(--section-gap) 0 0;gap:var(--block-gap)}
/* The main container already supplies the gap before the contact footer. */
.designer-home #experience.about-section{margin-bottom:0;padding-bottom:0}
.designer-home .about-copy p{margin:0 0 var(--card-padding)}
.designer-home .about-copy .text-link{margin-top:var(--card-padding)}
/* Case-study headings, section dividers, cards and panels use the same scale. */
.case-study{--study-section-space:var(--section-gap);--study-card-space:var(--card-padding);--study-content-space:var(--card-padding);--study-banner-gap:var(--block-gap)}
.case-study :is(.cs-hero,.melo-hero){padding-top:var(--section-gap);padding-bottom:var(--block-gap)}
.case-study .cs-back{margin-bottom:var(--block-gap)}
.case-study :is(.cs-facts,.melo-metadata){margin-block:var(--block-gap);padding-block:var(--card-padding);gap:var(--card-gap)}
.case-study :is(.cs-layout,.melo-layout){column-gap:var(--block-gap);row-gap:var(--block-gap)}
.case-study :is(.cs-section,.melo-section){padding:var(--block-gap) 0 var(--section-gap);margin:0}
.case-study :is(.cs-section,.melo-section) h2{margin-top:0;margin-bottom:var(--card-padding)}
.case-study :is(.cs-kicker,.melo-section-label){margin-bottom:var(--stack-gap)}
.case-study :is(.ds-card,.cs-card){padding:var(--card-padding)}
.case-study :is(.ds-panel,.cs-summary,.study-system-panel,.cooter-ds-panel){padding:var(--panel-padding)}
.case-study .cs-content>.study-context-card,.case-study .melo-section.study-context-card{padding:var(--panel-padding);margin:0 0 var(--section-gap)}
.case-study .cs-summary{margin-bottom:var(--section-gap)}
.case-study .ds-grid,.case-study .study-design-parts{gap:var(--card-gap)}
.case-study .cs-next{margin-top:var(--block-gap);padding:var(--block-gap) 0 var(--section-gap)}
/* Shared footer starts one section gap after the home content. */
.footer{padding:var(--section-gap) 0 var(--card-padding)}
.footer h2{margin:var(--block-gap) 0 var(--section-gap)}
.footer-bottom{padding-top:var(--card-padding);gap:var(--card-gap)}
.footer-links{gap:var(--card-gap);flex-wrap:wrap}
@media(max-width:850px){
 :root{--page-gutter:24px;--section-gap:48px;--block-gap:24px;--panel-padding:24px}
 .designer-home #about.about-section{gap:var(--card-gap)}
 .case-study :is(.cs-hero,.melo-hero){padding-top:var(--block-gap)}
}
@media(max-width:550px){
 :root{--page-gutter:20px;--section-gap:32px;--block-gap:24px;--card-padding:20px;--panel-padding:20px;--card-gap:20px}
 .designer-home .avatar-composition{padding:var(--card-padding) 0;gap:var(--stack-gap)}
 .designer-home .avatar-stage{width:100%;margin-inline:0}
}