/* Native project dialog. One introduction, explicit role, then visual chapters.
   Layer 2 is reserved for the close bar inside the dialog's native top layer. */
html:has(#projectModal[open]){overflow:hidden}
#projectModal{width:min(1120px,94vw);max-height:92dvh;border-radius:26px;overscroll-behavior:contain}
#projectModal .modal-head{position:sticky;top:0;z-index:2;background:var(--bg);padding:12px 24px;gap:20px}
#projectModal .modal-head .eyebrow{font:400 14px/1.4 var(--copy);letter-spacing:0;text-transform:none}
#projectModal .modal-close{border-radius:50%;width:44px;height:44px;flex:none}
#projectModal .modal-body{padding:clamp(24px,4vw,48px)}
.case-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,4vw,56px);align-items:center}
.case-summary{min-width:0}
#projectModal .modal-label{display:block;font:400 14px/1.4 var(--copy);color:var(--muted);letter-spacing:0;text-transform:none;margin-bottom:18px}
#projectModal #modalTitle{font:400 clamp(38px,5vw,64px)/1.04 var(--font);letter-spacing:-.04em;margin:0 0 24px;text-wrap:balance}
#projectModal #modalText{font-size:17px;line-height:1.65;max-width:48ch;margin:0}
.case-facts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.case-facts div{min-width:0}
.case-facts dt{font:400 13px/1.5 var(--copy);color:var(--muted);margin-bottom:6px}
.case-facts dd{font:400 15px/1.5 var(--copy);color:var(--ink);margin:0}
.case-cover{width:min(100%,340px);justify-self:end}
.case-cover .media-frame{border-radius:18px}
.case-chapters{margin-top:clamp(38px,5vw,64px)}
.case-chapter{padding-top:30px;margin-top:38px;border-top:1px solid var(--line)}
.case-chapter:first-child{margin-top:0}
#projectModal .case-chapter h3{font:400 clamp(24px,2.6vw,32px)/1.15 var(--font);letter-spacing:-.025em;margin:0 0 24px}
.case-chapter .media-sequence{gap:24px}
.case-chapter .media-row{width:100%;max-width:min(100%,calc(var(--media-ratio-sum,2) * 440px + var(--media-gaps,24px)))}
.case-chapter .media-wide{width:min(100%,760px)}
#projectModal .modal-note{font-size:14px!important;line-height:1.6;color:var(--muted);max-width:75ch;margin-top:30px}
#projectModal .modal-next{margin-top:32px;padding-top:26px;gap:24px;align-items:center}
#projectModal .modal-next p{font-size:22px;line-height:1.3;max-width:30ch;color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
 #projectModal[open]{animation:case-enter 180ms cubic-bezier(.2,.7,.3,1)}
 @keyframes case-enter{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
}
@media(max-width:760px){
 #projectModal{width:96vw;max-height:94dvh;border-radius:22px}
 #projectModal .modal-head{padding:10px 18px}
 #projectModal .modal-body{padding:24px 20px 30px}
 .case-intro{grid-template-columns:1fr;gap:28px}
 #projectModal #modalTitle{font-size:clamp(34px,8.5vw,46px);margin-bottom:20px}
 #projectModal #modalText{font-size:16px}
 .case-facts{gap:18px;margin-top:24px}
 .case-cover{width:min(100%,320px);justify-self:start}
 .case-chapters{margin-top:36px}
 .case-chapter{padding-top:24px;margin-top:30px}
 .case-chapter .media-row{max-width:100%}
 .case-chapter .media-sequence,.case-chapter .media-row{grid-template-columns:1fr}
 #projectModal .modal-next{align-items:start;flex-direction:column;gap:20px}
 #projectModal .modal-next p{font-size:21px}
}