/* Alternative composition. Original interactions and media remain shared. */
:root{--gutter:24px;--content-inset:24px;--content-width:none;--grid-gap:12px;--case-section-size:36px}
body{font-size:16px;line-height:1.35}
.shell{max-width:none;width:calc(100% - 2 * var(--gutter));margin-inline:var(--gutter)}
.header-row{padding:20px var(--gutter);gap:24px}
.signature{font-size:22px;letter-spacing:-.035em}
.brand{gap:22px}.brand-role{font-size:14px}
.site-header .main-nav{font-size:16px;gap:28px}
.home-page .hero{padding-top:64px;padding-bottom:72px}
.hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px}
.hero h1{font-size:52px;line-height:1.05;letter-spacing:-.035em;padding-right:0}
.home-page .hero-copy{width:auto;max-width:720px;justify-self:start;padding-top:0;font-size:16px;line-height:1.4}
.hero-copy p+p{margin-top:16px}
.hero .explore{margin:24px 0 0;font-size:16px}
.home-page .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 12px;align-items:start}
.home-page .project,.home-page .project.wide{grid-column:auto;width:100%}
.home-page .work .project:nth-child(2){grid-column:span 2}
.home-page .project-media{border-radius:var(--media-radius);aspect-ratio:16/9}
.home-page .project-caption{display:block;padding-top:10px}
.home-page .project-copy,.home-page .project-description{max-width:100%}
.home-page .project-copy h3,.home-page .wide .project-copy h3{font-size:16px;line-height:1.25;letter-spacing:-.01em}
.home-page .project-description,.home-page .wide .project-description{font-size:16px;line-height:1.3;margin-top:3px;color:#6e6e73}
.home-page .web-work{padding-top:100px}
.home-page .work>h2,.home-page .web-work>h2{font-size:36px;line-height:1.1;letter-spacing:-.025em;max-width:none;margin-bottom:36px}
.site-footer,.case-page .site-footer{margin-top:100px;padding-top:32px;padding-bottom:24px}
.contact-heading{font-size:52px;line-height:1.05;padding-bottom:48px}
.footer-bottom{font-size:14px;column-gap:12px}
.case-hero{padding-top:64px}
.case-heading{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.case-page .case-heading h1{grid-column:1/span 2;font-size:52px;line-height:1.05;letter-spacing:-.035em}
.case-open{grid-column:3;font-size:16px}
.case-subtitle{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:32px;margin-bottom:48px}
.case-subtitle>p{max-width:640px;font-size:18px;line-height:1.25;letter-spacing:-.01em}
.case-subtitle .tags{justify-self:end;align-self:start;gap:8px}.tags span{font-size:13px}
.case-overview{grid-template-columns:1fr 2fr;gap:24px;padding-block:64px}
.case-overview .intro{font-size:28px;line-height:1.2;max-width:400px}
.overview-details{font-size:18px;line-height:1.4;max-width:720px}
.case-chapter{padding-top:48px}
.section-heading{grid-template-columns:2fr 1fr;gap:24px;align-items:start;margin-bottom:32px}
.case-page .section-heading h2{grid-column:1;font-size:36px;line-height:1.12;letter-spacing:-.025em;margin-bottom:0}
.section-open{grid-column:2;font-size:16px}
.case-gallery{gap:48px 12px}
.case-gallery .case-film{margin-bottom:0}
.case-figure figcaption{font-size:16px;line-height:1.3;margin-top:10px}
.chapter-description{font-size:18px;line-height:1.4;max-width:720px;margin-bottom:32px}
.case-navigation{margin-top:64px;font-size:28px}
.chapter-nav,.chapter-title,.chapter-links{font-size:14px}.chapter-links{gap:24px}
.project-details .details-grid{column-gap:24px}
.project-details .details-grid>h2{font-size:52px}
.details-copy,.details-meta,.details-toolbar{font-size:16px}
.details-intro,.details-section h3{font-size:28px}
@media(min-width:1800px){:root{--gutter:32px;--content-inset:32px;--grid-gap:16px}.hero h1,.case-page .case-heading h1,.contact-heading{font-size:64px}.home-page .hero-copy{max-width:880px;font-size:18px}.home-page .project-copy h3,.home-page .wide .project-copy h3,.home-page .project-description,.home-page .wide .project-description{font-size:18px}.home-page .project-grid{column-gap:16px}}
@media(min-width:651px) and (max-width:1000px){.brand{flex-direction:column;align-items:start;gap:3px}.brand-role{font-size:12px}.hero-layout{grid-template-columns:1fr 1fr}.hero h1{font-size:44px}.home-page .hero-copy{font-size:15px}.case-subtitle{grid-template-columns:1fr}.case-subtitle .tags{justify-self:start}.case-overview{grid-template-columns:1fr 1fr}.home-page .project-copy h3,.home-page .project-description,.home-page .wide .project-copy h3,.home-page .wide .project-description{font-size:15px}}
@media(max-width:650px){
 :root{--gutter:16px;--content-inset:16px;--grid-gap:12px}
 .header-row{padding:16px;gap:16px}.site-header .signature{font-size:16px}.site-header .brand-role{font-size:11px}.site-header .main-nav{font-size:14px}
 .home-page .hero,.case-hero{padding-top:36px}.home-page .hero{padding-bottom:44px}
 .hero-layout{grid-template-columns:1fr;gap:28px}.hero h1{font-size:40px;line-height:1.05}
 .home-page .hero-copy{font-size:16px;max-width:none}
 .home-page .project-grid{grid-template-columns:1fr;gap:36px}
 .home-page .work .project:nth-child(2){grid-column:auto}
 .home-page .web-work{padding-top:64px}.home-page .work>h2,.home-page .web-work>h2{font-size:30px;margin-bottom:28px}
 .site-footer,.case-page .site-footer{margin-top:64px}.contact-heading{font-size:40px;padding-bottom:32px}
 .footer-bottom{font-size:13px}
 .case-heading{display:flex;flex-wrap:wrap;gap:24px}.case-page .case-heading h1{font-size:40px;width:100%}
 .case-subtitle{grid-template-columns:1fr;margin-top:28px;margin-bottom:32px}.case-subtitle>p{font-size:18px}.case-subtitle .tags{justify-self:start}
 .case-overview{grid-template-columns:1fr;gap:28px;padding-block:40px}.case-overview .intro{font-size:26px}.overview-details{font-size:16px}
 .section-heading{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:28px}.case-page .section-heading h2{font-size:30px;width:100%;max-width:none}
 .case-gallery{grid-template-columns:1fr;gap:32px}.case-figure figcaption{font-size:14px}
 .case-chapter{padding-top:32px}.chapter-description{font-size:16px}
 .case-navigation{font-size:22px;margin-top:40px}.chapter-nav,.chapter-title,.chapter-links{font-size:12px}.chapter-links{gap:16px}
 .project-details .details-grid>h2{font-size:40px}.details-intro,.details-section h3{font-size:26px}
}
/* Web projects reverse the opening pair: large left, small right. */
@media(min-width:651px){
 .home-page .web-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .home-page .web-grid .project{grid-column:span 2}
 .home-page .web-grid .project:first-child{grid-column:span 4}
 .home-page .web-grid .project:nth-child(2){grid-column:span 2}
}
/* The entire header uses the navigation's type size. */
.site-header .signature,.site-header .brand-role{font-size:16px}
@media(max-width:650px){.site-header .signature,.site-header .brand-role{font-size:14px}}
/* Pentagram case grid, preserving the original size of every media item. */
.case-gallery{gap:24px 12px;align-items:start}
.case-figure figcaption{font-size:13px;line-height:1.3;margin-top:8px}
@media(min-width:651px){
 .case-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .case-gallery .case-figure{grid-column:auto}
 .case-gallery .case-figure.full{grid-column:1/-1}
 .case-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-block:80px}
 .case-overview .intro{max-width:90%;font-size:32px}
 .overview-details{max-width:100%}
}
@media(max-width:650px){.case-gallery{gap:28px}.case-gallery .case-figure{grid-column:1/-1}}
/* Intro stacks in the left half of a four-column canvas. */
@media(min-width:651px){
 .hero-layout{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 12px}
 .hero-layout>h1,.home-page .hero-copy{grid-column:1/span 2;max-width:none;width:auto}
 .hero-layout>h1{grid-row:1}
 .home-page .hero-copy{grid-row:2}
}

/* Full-width two-line heading; supporting copy stays half-width. */
@media(min-width:651px){.hero-layout>h1{grid-column:1/-1}}
/* Four columns: Exverse large on the left; To the Stars large on the right. */
@media(min-width:651px){
 .home-page .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-page .work .project:nth-child(n),.home-page .web-grid .project:nth-child(n){grid-column:span 1}
 .home-page .work .project:first-child,.home-page .web-grid .project:nth-child(2){grid-column:span 2}
}
@media(min-width:1001px){
 .home-page .project-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.case-page .case-heading h1,.case-page .section-heading h2{max-width:100%}

/* Original compact page insets and horizontal grid gutters. */
:root{--gutter:24px;--content-inset:24px;--grid-gap:12px}
.header-row,.chapter-nav{padding-inline:var(--gutter)}
.home-page .project-grid,.case-gallery,.case-heading,.case-subtitle,
.case-overview,.section-heading,.hero-layout,.footer-bottom{column-gap:var(--grid-gap)}
@media(min-width:1800px){:root{--gutter:32px;--content-inset:32px;--grid-gap:16px}}
@media(max-width:650px){:root{--gutter:16px;--content-inset:16px;--grid-gap:12px}}

/* Desktop feature previews occupy three of the four grid columns. */
@media(min-width:1001px){
 .home-page .work .project:first-child,.home-page .web-grid .project:nth-child(2){grid-column:span 3}
}

/* Keep preview edges aligned regardless of card size and scroll position. */
.home-page .project-grid .media-scroll{translate:none}

/* Equal opening pair; Stars leads the web projects. */
@media(min-width:651px){
 .home-page .work .project:nth-child(-n+2){grid-column:span 1}
 .home-page .web-grid .project:nth-child(n){grid-column:span 1}
 .home-page .web-grid .project[data-project="stars"]{grid-column:span 2}
}
@media(min-width:1001px){
 .home-page .work .project:nth-child(-n+2){grid-column:span 2}
 .home-page .web-grid .project[data-project="stars"]{grid-column:span 3}
}

/* Case introduction: description first, tags on the next line. */
.case-page .case-subtitle{grid-template-columns:minmax(0,1fr);row-gap:16px}
.case-page .case-subtitle .tags{justify-self:start;justify-content:flex-start;max-width:100%}

/* Both featured web previews share the opening row equally. */
@media(min-width:1001px){
 .home-page .web-grid .project:nth-child(-n+2){grid-column:span 2}
}
@media(min-width:651px) and (max-width:1000px){
 .home-page .web-grid .project:nth-child(-n+2){grid-column:span 1}
}

/* Creative work uses the same four-column canvas and two wider lead cards. */
@media(min-width:1001px){.home-page .creative-grid .project.featured{grid-column:span 2}}

/* Website uses the established four-column layout. */
@media(min-width:1001px){.home-page .website-grid .project.featured{grid-column:span 2}}
@media(max-width:650px){
 .home-page .site-header .header-row{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px}
 .home-page .site-header .brand{width:auto;flex:0 0 auto}
 .home-page .site-header .main-nav{display:contents}
 .home-page .site-header .signature,.home-page .site-header .main-nav a{white-space:nowrap;font-size:14px}
}