/* Full-width chapter banners, with quiet, inset reading areas below. */
:root{--chapter-gutter:clamp(32px,5vw,80px);--chapter-gap:48px}
.workspace{min-width:0}
main{max-width:none;width:100%;margin:0}
main>section,main>#colours,main>#voice{margin:0;padding:0 var(--chapter-gutter) 72px;background:#F6F3F0;color:#434343;border:0}
header{padding-inline:var(--chapter-gutter);background:#F6F3F0}
main>:is(#logo,#colours,#typography,#voice,#layout,#photography,#in-action)>.section-heading{margin:0 calc(-1 * var(--chapter-gutter)) var(--chapter-gap);padding:56px var(--chapter-gutter);min-height:300px;max-width:none;display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;background:#E5E4E6;color:#434343}
.section-heading h2{font-size:clamp(30px,3.1vw,48px);letter-spacing:-1.5px}
main>:is(#logo,#colours,#typography,#voice,#layout,#photography,#in-action)>.section-heading p{max-width:none;width:100%;min-width:0;line-height:1.65;color:inherit}
main>:is(#logo,#colours,#typography,#voice,#layout,#photography,#in-action)>.section-heading .eyebrow{color:inherit}
main>#logo>.section-heading,main>#voice>.section-heading,main>#in-action>.section-heading{background:#0F0B0F;color:#F6F3F0}
main>#colours>.section-heading,main>#photography>.section-heading{background:#B9A1FF;color:#2A2A2A}
main>#layout>.section-heading{background:#6214FF;color:#FFFFFF}
.type-details p{max-width:48ch}
/* The opening hero is the overview banner. Everything after it is inset. */
main>#overview{padding-top:0}
.intro-line{margin:0 calc(-1 * var(--chapter-gutter));padding:24px var(--chapter-gutter) 0;background:#0F0B0F;color:#F6F3F0}
.hero{margin-inline:calc(-1 * var(--chapter-gutter));min-height:500px;grid-template-columns:1.15fr 1fr}
.hero-copy{padding:38px 0 46px var(--chapter-gutter)}
.hero h1{font-size:clamp(40px,4.2vw,66px);line-height:1.1;letter-spacing:-2px}
.hero-copy p{max-width:38ch}
.hero .character-stage{min-height:500px}
.hero .character-stage .aron{width:68%;height:270px;left:0;top:10%}
.hero .character-stage .vito{width:58%;height:235px;right:4%;bottom:12%}
.hero .stage-caption{right:20px}
.intro-bottom{margin:42px 0 0;gap:40px;grid-template-columns:1fr 1fr;background:transparent;color:#434343}
.intro-bottom p{max-width:none;width:100%}
.chapter-index{margin-top:48px}
.chapter-grid{gap:14px}
/* All specimens and galleries sit within the shared content gutters. */
.logo-grid{gap:16px}
.logo-panel:first-child{background:#E5E4E6;height:280px}
.logo-panel{height:190px}
.type-editorial{gap:20px}
.type-specimen{background:#E5E4E6;border:0}
.type-poster>p{font-size:clamp(36px,4.1vw,60px)}
.giant-type{font-size:clamp(30px,3.5vw,50px)}
.combination-grid{gap:32px 24px}
.combination-art{height:240px}
.colour-application{gap:36px}
.colour-notes p{max-width:44ch}
.voice-example{grid-template-columns:.8fr 1.3fr;gap:40px;border-color:#c9c7cc}
.voice-example:first-child{border-top:0;padding-top:0}
.voice-principle>span{color:#6214FF}
.voice-principle p,main>#voice>.caption{color:#5d5963}
.voice-principle p{max-width:36ch}
.voice-sample{min-height:240px}
.layout-example{position:relative;min-height:360px;padding:36px;display:flex;flex-direction:row;align-items:center;overflow:hidden}
.layout-example>div{position:relative;z-index:1;max-width:66%}
.layout-example h3{font-size:clamp(30px,3.5vw,50px);max-width:none}
.layout-example img{position:absolute;right:2%;bottom:28px;width:30%;height:270px;max-height:none;opacity:1;object-fit:contain;margin:0}
.character-line{gap:16px}
.character-line figure{background:#E5E4E6}
.character-line img{height:190px}
.motion-grid{gap:24px}
footer{padding:48px var(--chapter-gutter) 26px}
@media(max-width:1100px){
 :root{--chapter-gutter:40px}
 main>:is(#logo,#colours,#typography,#voice,#layout,#photography,#in-action)>.section-heading{grid-template-columns:1fr;gap:24px;min-height:290px;padding-block:42px}
 .section-heading h2{font-size:36px}
 .character-line{grid-template-columns:1fr 1fr}
 .type-editorial,.colour-application{grid-template-columns:1fr}
 .type-poster>p{font-size:60px}
 .voice-example{grid-template-columns:1fr;gap:22px}
 .voice-principle p{max-width:55ch}
 .layout-example h3{font-size:36px}
 .layout-example img{height:220px}
}
@media(max-width:1000px){
 .hero{grid-template-columns:1fr;min-height:0}
 .hero-copy{padding:34px var(--chapter-gutter) 0}
 .hero h1{font-size:50px}
 .hero .character-stage{min-height:300px}
 .hero .character-stage .aron{width:42%;height:210px;left:15%;top:5%}
 .hero .character-stage .vito{width:36%;height:180px;right:8%;bottom:14%}
 .hero .orbit{width:55%;height:240px;left:25%;top:5%;aspect-ratio:auto}
 .intro-bottom{grid-template-columns:1fr;gap:20px}
 .chapter-grid{grid-template-columns:1fr 1fr;grid-template-rows:215px 195px 180px}
 .chapter-logo{grid-row:auto}.chapter-logo img{height:100px}
 .chapter-imagery{grid-column:auto}.chapter-imagery img{position:static;width:90px;height:90px;margin:auto}
 .chapter-imagery .tile-foot{font:400 10px/1.4 Google,Arial,sans-serif;letter-spacing:0;max-width:100%}
 .type-details{grid-template-columns:1fr;gap:24px}
 .type-details p{max-width:60ch}
}
@media(max-width:650px){
 :root{--chapter-gutter:22px;--chapter-gap:32px}
 main>section,main>#colours,main>#voice{padding-bottom:48px}
 header{padding-left:106px}
 main>:is(#logo,#colours,#typography,#voice,#layout,#photography,#in-action)>.section-heading{min-height:300px;padding-block:38px;gap:22px}
 .section-heading h2{font-size:30px;letter-spacing:-1px}
 .hero h1{font-size:clamp(34px,9.7vw,50px);letter-spacing:-1.7px}
 .hero-copy{padding-top:30px}
 .hero .character-stage{min-height:265px}
 .hero .character-stage .aron{width:46%;height:180px;left:8%;top:8%}
 .hero .character-stage .vito{width:40%;height:155px;right:6%;bottom:15%}
 .hero .orbit{height:210px;width:65%;left:18%}
 .intro-bottom{margin-top:32px}
 .chapter-grid{gap:10px;grid-template-rows:205px 185px 185px}
 .logo-panel:first-child{height:215px}.logo-panel{height:165px}
 .type-poster>p{font-size:clamp(42px,12vw,64px)}
 .giant-type{font-size:36px}
 .layout-example{min-height:440px;padding:26px 24px 200px;align-items:start}
 .layout-example>div{max-width:100%}
 .layout-example h3{font-size:30px;margin:24px 0 16px}
 .layout-example img{width:52%;height:175px;right:4%;bottom:18px}
 .character-line{gap:12px}.character-line img{height:135px}
 .motion-grid{gap:28px}
}