/* Shared rhythm. Keep composition coordinates separate from content spacing. */
:root{
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
 --space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
 --space-24:96px;--space-32:128px;--space-40:160px;
 --page-gutter:20px;--case-gutter:20px;
 --section-space:var(--space-24);--intro-space:var(--space-32);
 --content-space:var(--space-12);--caption-space:var(--space-8);
 --column-space:var(--space-16);--item-space:var(--space-6);
}
@media(min-width:1600px){:root{
 --section-space:var(--space-32);--intro-space:var(--space-40);
 --content-space:var(--space-16);--column-space:var(--space-24);
}}
@media(max-width:800px){:root{
 --case-gutter:12px;--section-space:var(--space-16);--intro-space:var(--space-24);
 --content-space:var(--space-8);--caption-space:var(--space-6);
 --column-space:var(--space-8);--item-space:var(--space-4);
}}
@media(max-width:650px){:root{--page-gutter:12px}}

/* Homepage: every background starts with the same section inset. */
#work,#art{padding-block:var(--section-space)}
#work .section-head{margin-bottom:var(--content-space);gap:var(--item-space)}
#work .section-head h2{margin:0}
#work .grid{row-gap:var(--content-space);column-gap:var(--item-space)}
#work .project-title{padding-top:var(--space-4);gap:var(--space-2) var(--item-space)}
#art .art-practice-heading{row-gap:var(--item-space);margin-bottom:0}
#art .art-gallery-stage{padding-block:var(--content-space)}
#art .art-drag-hint{margin-top:var(--space-6)}
#art .art-practice-footer{margin-top:var(--space-8);gap:var(--space-3)}
#art .art-practice-copy h3{margin-bottom:0}
#about.about-desk{padding-top:var(--section-space)}
#about .about-introduction p{margin-bottom:var(--space-4)}
#about .about-introduction p:last-child{margin-bottom:0}
@media(max-width:650px){
 #art .art-practice-heading{row-gap:var(--space-8)}
 #art .art-practice-copy h3{margin-bottom:var(--space-6)}
 #about .about-title{margin-bottom:var(--space-8)}
 #about .about-discovery-home{margin-top:var(--space-8)}
}

/* Case studies: one trailing section gap, with no added leading chapter gap. */
.case-study .case-title-block{min-height:0;padding:var(--intro-space) var(--case-gutter)}
.case-study .case-project-number{margin-bottom:var(--space-6)}
.case-study .case-title-role{margin-top:var(--space-6)}
.case-study .mouno-title-meaning{margin-top:var(--space-6)}
.case-study .mouno-title-meaning+.case-title-role{margin-top:var(--space-4)}
.case-study .case-description{padding-top:0;padding-bottom:var(--section-space);column-gap:var(--column-space);row-gap:var(--space-6)}
.case-study .case-facts{gap:var(--space-6);margin-block:0}
.case-study .case-facts dt{margin-bottom:var(--space-2)}
.case-study .case-facts dd{margin:0}
.case-study .case-project-gallery{padding-block:0}
.case-study .case-wide-chapter{padding-top:0;padding-bottom:var(--section-space)}
.case-study .case-pair{padding-top:0;padding-bottom:var(--section-space);gap:var(--section-space) var(--column-space)}
.case-study .case-pair .case-pair-second{padding-top:var(--section-space)}
.case-study .case-pair-reverse .case-pair-first{padding-top:var(--section-space)}
.case-study .case-pair-reverse .case-pair-second{padding-top:0}
.case-study .case-tinted{padding-block:var(--section-space);margin-bottom:0}
.case-study .case-tinted+.case-wide-chapter{padding-top:var(--section-space)}
.case-study .case-panel figcaption{margin-top:var(--caption-space);gap:var(--space-6) var(--column-space);padding-block:0}
.case-study .case-pair .case-panel figcaption{margin-top:var(--caption-space);gap:var(--item-space)}
.case-study .case-eyebrow{margin-bottom:var(--space-2)}
.case-study .case-river-media-pair{margin-top:var(--content-space);gap:var(--column-space)}
.case-study .case-river-phone figcaption,.case-study .case-river-support figcaption{margin-top:var(--space-3)}

/* Project-specific stories use the shared rhythm within their existing widths. */
.case-study .booknooker-design-story{margin-bottom:var(--section-space);gap:var(--column-space)}
.case-study .booknooker-design-story h2{margin-bottom:var(--space-6)}
.case-study .booknooker-walkthrough,.case-study .booknooker-detail{padding-bottom:var(--section-space)}
.case-study .booknooker-video-heading{margin-bottom:var(--caption-space)}
.case-study .booknooker-video-frame figcaption{margin-top:var(--space-3);gap:var(--item-space)}
.case-study .booknooker-detail-copy{margin-bottom:var(--caption-space);gap:var(--space-6) var(--column-space)}
.case-study .mouno-approach{padding-top:0;padding-bottom:var(--section-space)}
.case-study .mouno-approach h2{margin-bottom:var(--space-6)}
.case-study .mouno-track{margin-bottom:var(--section-space)}
.case-study .mouno-track .case-panel figcaption{margin-top:var(--caption-space);gap:var(--space-6) var(--column-space)}
.case-study .mouno-track-info{gap:var(--item-space)}
.case-study .mouno-bengali{margin-top:var(--space-3)}
.case-study .mouno-release{padding-bottom:var(--section-space);gap:var(--content-space) var(--column-space)}
.case-study .mouno-release-date{margin-block:var(--space-6)}
.case-study .mouno-credits{gap:var(--space-3);margin-bottom:var(--space-8)}
.case-study :is(.lost-chapter,.jobs-chapter,.jobs-digital,.lost-outlook){padding-bottom:var(--section-space)}
.case-study :is(.lost-chapter-heading,.jobs-chapter-heading){margin-bottom:var(--caption-space);gap:var(--space-6) var(--column-space)}
.case-study :is(.lost-outlook h2){margin-bottom:var(--space-6)}
.case-study :is(.lost-character-pair,.lost-environment-grid,.jobs-mockup-pair,.jobs-digital-pair){gap:var(--item-space)}
.case-study .jobs-slot-elements{margin-bottom:var(--caption-space)}
.case-study .jobs-mockup-pair>:nth-child(2){margin-top:var(--section-space)}
.case-study .jobs-digital-pair figcaption{margin-top:var(--space-3)}

/* Related projects have a real header gap rather than an empty fixed-height band. */
.case-study .case-related{padding-bottom:var(--section-space)}
.case-study .case-related-heading{min-height:0;padding:var(--section-space) var(--case-gutter) var(--content-space)}
.case-study .case-related-link{padding-block:var(--space-6)}
.case-study .case-related .case-back{margin-top:var(--content-space);gap:var(--space-4);padding-bottom:var(--space-2)}

/* Shared CTA/footer on every page; keep the oversized title's optical bounds. */
.portfolio-closing .closing-cta{min-height:0;padding-top:var(--section-space);padding-bottom:0;gap:var(--section-space)}
.portfolio-closing .closing-invitation p{margin-bottom:var(--space-8)}
.closing-footer-shell .closing-footer{padding-block:var(--content-space);gap:var(--content-space)}
.closing-footer-shell .footer-links{row-gap:var(--space-8);column-gap:var(--item-space)}
.closing-footer-shell .footer-links h3{margin-bottom:var(--space-6)}
.closing-footer-shell .footer-link-list{gap:var(--space-4)}
:is(.portfolio-closing,.closing-footer-shell) .foot{padding-block:var(--space-6);gap:var(--item-space)}
@media(max-width:800px){
 .case-study .case-description{padding-inline:var(--case-gutter)}
 .case-study .case-pair .case-pair-first,.case-study .case-pair .case-pair-second{padding-top:0}
}
@media(max-width:650px){
 .portfolio-closing .closing-cta{padding-bottom:var(--space-6)}
}
@media(max-width:560px){
 .case-study .jobs-mockup-pair>:nth-child(2){margin-top:0}
}