/* Decorilla case study: image-led chapters within Joyce's portfolio identity. */
.decorilla-case .case-head{padding-bottom:48px}
.decorilla-case .case-head h1{font-size:clamp(62px,7.3vw,112px);max-width:1100px}
.decorilla-case .case-head .case-brand-logo{width:205px;height:auto;margin-bottom:34px;max-width:48vw}
.decorilla-case .case-description{grid-template-columns:1.15fr 1fr;gap:10%;margin-top:38px}
.decorilla-case .case-description>p{max-width:600px;font-size:16px;line-height:1.8}
.decorilla-case .case-description dl{align-content:start;gap:13px}
.decorilla-case .case-description dl>div{grid-template-columns:82px 1fr;gap:22px;font-size:11px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.decorilla-case .case-subnav{position:sticky;top:78px;z-index:15;background:var(--paper);display:flex;flex-wrap:wrap;gap:8px 26px;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 0 36px;font-size:10px}
.decorilla-case .case-subnav a{padding:4px 0}
.decorilla-case .case-subnav a:hover,.decorilla-case .case-subnav a[aria-current="location"]{text-decoration:underline;text-underline-offset:5px}
.decorilla-case section[id]{scroll-margin-top:84px}
.decorilla-case .case-chapter{display:grid;grid-template-columns:16% 37% 1fr;gap:4%;padding:105px 0 38px;align-items:start}
.decorilla-case .case-chapter .eyebrow{padding-top:7px}
.decorilla-case .case-chapter h2{font:clamp(35px,3.8vw,58px)/1.08 var(--serif);letter-spacing:-.025em}
.decorilla-case .case-chapter>p,.decorilla-case .case-chapter>div{font-size:13px;line-height:1.9;max-width:480px;padding-top:4px}
.decorilla-case .case-chapter p+p{margin-top:15px}
.decorilla-case .digital-overview{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:28px;background:#e7e4de;padding:34px;align-items:start}
.decorilla-case .digital-overview .case-screen:nth-child(2){padding-top:56px}
.decorilla-case .case-screen{min-width:0;margin:0}
.decorilla-case .screen-window{background:white;border:1px solid #d6d1cb;box-shadow:0 10px 30px #332b2110}
.decorilla-case .window-bar{height:23px;display:flex;align-items:center;gap:4px;padding:0 10px;border-bottom:1px solid #e8e5e1;background:#faf9f7}
.decorilla-case .window-bar i{display:block;width:4px;height:4px;border-radius:50%;background:#c9c4be}
.decorilla-case .screen-viewport{display:block;aspect-ratio:1.22;overflow:hidden}
.decorilla-case .screen-viewport img{width:100%;height:auto;max-width:100%;object-fit:initial}
.decorilla-case .case-screen figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-size:10px;margin-top:17px;color:var(--ink)}
.decorilla-case .case-screen figcaption span:last-child{color:var(--muted);font-size:9px;white-space:nowrap}
.decorilla-case .case-screen .image-action{width:auto;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 9px;white-space:nowrap;font-size:9px}
.decorilla-case .phone-window .image-action{width:28px;gap:0;padding:0;font-size:0}
.decorilla-case .case-overview-montage{display:grid;grid-template-columns:1.15fr 1fr .49fr;gap:30px;align-items:center;background:#e5e1da;padding:42px 36px 32px}
.decorilla-case .case-overview-montage .screen-viewport{aspect-ratio:1.12}
.decorilla-case .case-overview-montage .montage-two{padding-top:55px}
.decorilla-case .case-overview-montage .montage-phone .screen-viewport{aspect-ratio:.46}
.decorilla-case .case-overview-montage figcaption{font-size:9px}
.decorilla-case .case-overview-montage .montage-phone figcaption{display:block}
.decorilla-case .case-overview-montage .montage-phone figcaption span{display:block;margin-top:3px}
.decorilla-case .study-note{font-size:10px;color:var(--muted);line-height:1.8;margin:18px 0 0}
.decorilla-case .mobile-stage{background:#302c2b;color:var(--paper);padding:45px 38px 30px}
.decorilla-case .mobile-stage-heading{display:flex;justify-content:space-between;align-items:baseline;gap:22px;margin-bottom:34px;font-size:10px;color:#d0c8c1}
.decorilla-case .mobile-stage-heading .eyebrow{font-size:9px;color:var(--paper)}
.decorilla-case .mobile-lineup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(17px,2.6vw,44px);align-items:start;max-width:1260px;margin:auto}
.decorilla-case .mobile-lineup figure:nth-child(even){padding-top:46px}
.decorilla-case .phone-window{border:6px solid #191817;border-radius:24px;overflow:hidden;background:white;box-shadow:0 14px 28px #0003}
.decorilla-case .phone-window .screen-viewport{aspect-ratio:.46}
.decorilla-case .mobile-stage figcaption{color:var(--paper);font-size:9px;line-height:1.7;margin-top:19px;display:block}
.decorilla-case .mobile-stage figcaption span{display:block;color:#c8beb7;font-size:8px;margin-top:4px}
.decorilla-case .mobile-stage button:focus-visible{outline-color:var(--paper);outline-offset:5px}
.decorilla-case .mobile-stage .image-action{color:var(--ink);right:7px;bottom:8px}
.decorilla-case .feature-spread{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.7fr);gap:5%;align-items:start;padding:30px;background:#e6e8e5}
.decorilla-case .feature-spread .case-screen:last-child{margin-top:70px}
.decorilla-case .feature-spread .screen-viewport{aspect-ratio:1.05}
.decorilla-case .feature-spread .case-screen:last-child .screen-viewport{aspect-ratio:.62}
.decorilla-case .commerce-spread{display:grid;grid-template-columns:1.12fr 1fr;gap:32px;background:#e8e2da;padding:36px;align-items:start}
.decorilla-case .commerce-spread .case-screen:last-child{margin-top:90px}
.decorilla-case .commerce-spread .screen-viewport{aspect-ratio:.98}
.decorilla-case .commerce-three{grid-template-columns:1.12fr 1fr .47fr;align-items:center;gap:27px}
.decorilla-case .commerce-three .case-screen:last-child{margin-top:0}
.decorilla-case .commerce-three .phone-window .screen-viewport{aspect-ratio:.46}
.decorilla-case .commerce-three .case-screen:last-child figcaption{display:block}
.decorilla-case .commerce-three .case-screen:last-child figcaption span{display:block;margin-top:3px}
.decorilla-case .editorial-stage{max-width:1000px;margin:auto;background:#e7e4de;padding:34px}
.decorilla-case .editorial-stage .screen-viewport{aspect-ratio:1.35}
.decorilla-case .detail-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.48fr);gap:30px;align-items:start;margin-top:34px}
.decorilla-case .detail-band .screen-viewport{aspect-ratio:.88}
.decorilla-case .detail-band .case-screen:last-child .screen-viewport{aspect-ratio:.48}
.decorilla-case .detail-band .case-screen:last-child{width:100%;max-width:240px;justify-self:end}
.decorilla-case .identity-evolution .logo-stage{height:195px;padding:45px}
.decorilla-case .identity-detail{grid-template-columns:.75fr 1fr;gap:10%;margin-top:40px;margin-bottom:38px}
.decorilla-case .gold-card{height:220px;max-width:420px}
.decorilla-case .identity-detail-text h2{font-size:42px}
.decorilla-case .system-spread{padding:30px;gap:30px}
.decorilla-case .system-spread .image-button{max-height:370px}
.decorilla-case .history-viewer{max-width:none;margin-top:36px}
.decorilla-case .history-screen{padding:24px}
.decorilla-case .history-screen .image-button{aspect-ratio:1.85}
.decorilla-case .history-panels figcaption{margin:17px 0}
.decorilla-case .history-panels strong{font-size:25px}
.decorilla-case .history-controls{margin-bottom:16px}
.decorilla-case .history-controls span{padding:12px 16px;font-size:10px}
.decorilla-case .history-intro{display:flex;align-items:baseline;justify-content:space-between;gap:28px;margin:42px 0 20px;border-top:1px solid var(--rule);padding-top:28px}
.decorilla-case .history-intro h3{font:32px/1.1 var(--serif)}
.decorilla-case .history-intro p{font-size:11px;color:var(--muted);max-width:500px}
.decorilla-case .application-pair{gap:30px}
.decorilla-case .application-pair figure{padding:24px}
.decorilla-case .application-pair figure:last-child{margin-top:50px}
.decorilla-case .campaign-strip{padding:28px;background:#e8e4df;gap:20px}
.decorilla-case .newsletter-excerpts{gap:30px;align-items:start}
.decorilla-case .case-credit{display:grid;grid-template-columns:1fr 1fr;gap:10%;border-top:1px solid var(--rule);margin:72px 0 0;padding:30px 0 40px;font-size:11px;color:var(--muted);line-height:1.8}
.decorilla-case .case-credit strong{font-weight:600;color:var(--ink)}
.decorilla-case .lightbox{width:min(1300px,96vw);height:94dvh}
.decorilla-case .lightbox-body{padding:20px;background:#e5e2dc}
.decorilla-case .lightbox-body img{background:white;width:auto;max-width:100%;height:auto}
.decorilla-case .lightbox-bar p{line-height:1.6}
@media(max-width:1050px){
 .decorilla-case .case-chapter{grid-template-columns:17% 1fr;gap:20px 5%}
 .decorilla-case .case-chapter>p,.decorilla-case .case-chapter>div{grid-column:2;max-width:650px;padding-top:0}
 .decorilla-case .mobile-stage{padding:30px 24px 24px}
 .decorilla-case .mobile-lineup{gap:20px}
 .decorilla-case .phone-window{border-width:4px;border-radius:19px}
 .decorilla-case .case-subnav{gap:7px 20px}
}
@media(max-width:760px){
 .decorilla-case .case-head{padding-bottom:30px}
 .decorilla-case .case-head h1{font-size:15.3vw;line-height:1}
 .decorilla-case .case-head .case-brand-logo{width:155px;margin-bottom:24px}
 .decorilla-case .case-description{grid-template-columns:1fr;gap:25px;margin-top:28px}
 .decorilla-case .case-description>p{font-size:13px;line-height:1.85}
 .decorilla-case .case-description dl>div{font-size:10px}
 .decorilla-case .case-subnav{position:relative;top:auto;gap:7px 22px;font-size:10px;padding:14px 0;margin-bottom:28px}
 .decorilla-case .case-chapter{grid-template-columns:1fr;gap:16px;padding:62px 0 26px}
 .decorilla-case .case-chapter h2{font-size:40px;max-width:480px}
 .decorilla-case .case-chapter .eyebrow{padding:0;font-size:9px}
 .decorilla-case .case-chapter>p,.decorilla-case .case-chapter>div{grid-column:auto;font-size:12px;line-height:1.8}
 .decorilla-case .digital-overview,.decorilla-case .commerce-spread,.decorilla-case .feature-spread{grid-template-columns:1fr;gap:30px;padding:18px;margin-left:-10px;margin-right:-10px}
 .decorilla-case .case-overview-montage{grid-template-columns:1fr .45fr;gap:23px 16px;padding:22px 18px;margin:0 -10px}
 .decorilla-case .case-overview-montage .montage-one{grid-column:1/-1}
 .decorilla-case .case-overview-montage .montage-two{padding-top:0}
 .decorilla-case .case-overview-montage .montage-phone{align-self:center}
 .decorilla-case .case-overview-montage .montage-two .screen-viewport{aspect-ratio:.9}
 .decorilla-case .case-overview-montage .montage-phone .phone-window{border-width:3px;border-radius:13px}
 .decorilla-case .case-overview-montage figcaption{font-size:8px}
 .decorilla-case .commerce-three .case-screen:last-child{width:68%;max-width:280px;justify-self:center}
 .decorilla-case .commerce-three .phone-window .screen-viewport{aspect-ratio:.46}
 .decorilla-case .editorial-stage{padding:18px;margin:0 -10px}
 .decorilla-case .editorial-stage .screen-viewport{aspect-ratio:.9}
 .decorilla-case .digital-overview .case-screen:nth-child(2),.decorilla-case .commerce-spread .case-screen:last-child,.decorilla-case .feature-spread .case-screen:last-child{padding-top:0;margin-top:0}
 .decorilla-case .screen-viewport{aspect-ratio:.95}
 .decorilla-case .window-bar{height:18px;padding:0 8px}
 .decorilla-case .case-screen figcaption{font-size:9px;gap:10px;margin-top:13px}
 .decorilla-case .case-screen figcaption span:last-child{font-size:8px}
 .decorilla-case .mobile-stage{padding:25px 18px 22px;margin:0 -10px}
 .decorilla-case .mobile-stage-heading{display:block;margin-bottom:25px;font-size:9px}
 .decorilla-case .mobile-stage-heading>span+span{display:block;margin-top:9px}
 .decorilla-case .mobile-lineup{grid-template-columns:1fr 1fr;gap:28px 16px}
 .decorilla-case .mobile-lineup figure:nth-child(even){padding-top:28px}
 .decorilla-case .phone-window{border-width:4px;border-radius:18px}
 .decorilla-case .mobile-stage figcaption{font-size:9px;line-height:1.6;margin-top:13px}
 .decorilla-case .mobile-stage figcaption span{font-size:8px;white-space:normal}
 .decorilla-case .feature-spread .case-screen:last-child{width:80%;margin-left:auto}
 .decorilla-case .feature-spread .case-screen:last-child .screen-viewport{aspect-ratio:.7}
 .decorilla-case .detail-band{grid-template-columns:1fr 1fr;gap:26px 18px}
 .decorilla-case .detail-band .case-screen:last-child{grid-column:1/-1;width:65%;justify-self:center;max-width:260px}
 .decorilla-case .identity-evolution{gap:20px}
 .decorilla-case .identity-evolution .logo-stage{height:150px;padding:30px}
 .decorilla-case .identity-detail{grid-template-columns:1fr 1fr;gap:25px;margin:30px 0}
 .decorilla-case .gold-card{height:150px}
 .decorilla-case .identity-detail-text h2{font-size:29px}
 .decorilla-case .system-spread{padding:18px;gap:28px}
 .decorilla-case .system-spread .image-button{max-height:300px}
 .decorilla-case .history-intro{display:block;margin-top:35px}
 .decorilla-case .history-intro h3{font-size:29px}
 .decorilla-case .history-intro p{font-size:10px;margin-top:12px}
 .decorilla-case .history-controls span{font-size:9px;padding:9px 7px;min-height:48px}
 .decorilla-case .history-screen{padding:15px;margin:0}
 .decorilla-case .history-screen .image-button{aspect-ratio:1.1}
 .decorilla-case .history-panels strong{font-size:24px}
 .decorilla-case .history-viewer{margin-top:24px}
 .decorilla-case .campaign-strip{padding:18px;gap:24px 14px;margin:0 -10px}
 .decorilla-case .application-pair figure{padding:18px}
 .decorilla-case .application-pair figure:last-child{margin-top:0}
 .decorilla-case .newsletter-excerpts{gap:30px}
 .decorilla-case .case-credit{grid-template-columns:1fr;gap:18px;margin-top:48px;padding:25px 0 30px;font-size:10px}
 .decorilla-case .lightbox-body{padding:12px}
 .decorilla-case .lightbox-bar{padding:10px 15px;gap:15px}
 .decorilla-case .lightbox-bar p{font-size:10px;max-width:75%}
}
@media(prefers-reduced-motion:reduce){html:has(.decorilla-case){scroll-behavior:auto}}