/* One project, two independent live viewports. Device proportions stay real. */
body.portfolio .device-showcase { margin: 30px 0 0; }
body.portfolio .device-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,.285fr); align-items:end; gap:clamp(26px,4vw,64px); padding:44px 34px 34px; background:linear-gradient(145deg,#e5ded2,#f1ece3 57%,#ddd5c9); border:1px solid #cfc5b6; border-radius:8px; }
body.portfolio .device { margin:0; width:100%; }
body.portfolio .device>figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 17px; color:var(--ink); font-size:12px; line-height:1.7; }
body.portfolio .device>figcaption span { color:var(--muted); font-size:10px; }
body.portfolio .device-shell { background:#24272a; padding:9px; border:1px solid #747474; border-radius:15px 15px 6px 6px; box-shadow:0 18px 40px #42382720,inset 0 0 0 1px #ffffff0d; }
body.portfolio .device-top { display:flex; align-items:center; justify-content:center; height:20px; gap:12px; color:#e0e1e2; font:9px/1.2 Manrope,Arial,sans-serif; letter-spacing:.035em; }
body.portfolio .device-top i { width:4px; height:4px; border-radius:50%; background:#50575d; }
body.portfolio .device-screen { position:relative; width:100%; aspect-ratio:var(--device-ratio); overflow:hidden; background:#101b20; border-radius:3px; isolation:isolate; }
body.portfolio .device-screen iframe { display:block; position:absolute; inset:0 auto auto 0; max-width:none; border:0; margin:0; transform-origin:0 0; transform:scale(var(--device-scale,.5)); background:#101b20; }
body.portfolio .device-screen iframe:focus-visible { outline:4px solid var(--copper); outline-offset:-4px; }
body.portfolio .device-chin { height:7px; }
body.portfolio .device-foot { position:relative; width:110%; margin-left:-5%; height:13px; border:1px solid #a09d99; border-radius:2px 2px 55% 55%/2px 2px 90% 90%; background:linear-gradient(#d8d7d4,#8e8d8b); box-shadow:0 9px 15px #42382718; }
body.portfolio .device-foot:before { content:""; position:absolute; top:-1px; left:42%; width:16%; height:4px; border-radius:0 0 8px 8px; background:#7f807f; }
body.portfolio .device-phone { max-width:278px; justify-self:center; padding-bottom:2px; }
body.portfolio .device-phone>figcaption { flex-direction:column; align-items:center; gap:0; margin-bottom:13px; }
body.portfolio .device-phone .device-shell { padding:7px; border-radius:33px; background:#24272a; box-shadow:0 18px 36px #42382725,inset 0 0 0 2px #121416; }
body.portfolio .device-phone .device-top { height:21px; }
body.portfolio .device-phone .device-top span { font-size:8px; }
body.portfolio .device-phone .device-screen { border-radius:0 0 22px 22px; }
body.portfolio .device-phone .device-chin { position:relative; height:15px; }
body.portfolio .device-phone .device-chin:after { content:""; position:absolute; height:3px; width:35%; left:32.5%; bottom:4px; border-radius:9px; background:#a3a5a6; }
body.portfolio .device-phone .device-foot { display:none; }
body.portfolio .device-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:23px 0 0; }
body.portfolio .device-toolbar>p { position:relative; margin:0; padding-left:17px; font-size:12px; line-height:1.8; }
body.portfolio .device-toolbar>p>span:last-child { display:block; color:var(--muted); font-size:11px; }
body.portfolio .device-live-dot { position:absolute; width:6px; height:6px; left:0; top:7px; background:#658260; border-radius:50%; }
body.portfolio .device-toolbar>div { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
body.portfolio .device-refresh { padding:10px 0; border:0; background:transparent; font:500 12px Manrope,Arial,sans-serif; color:var(--copper); cursor:pointer; }
body.portfolio .ei-exhibit.ei-device-exhibit { display:block; margin-bottom:90px; }
body.portfolio .ei-device-exhibit .ei-project-meta { margin-top:15px; }
body.portfolio .ei-device-exhibit .ei-project-meta h2 { font:400 clamp(35px,4vw,54px)/1.1 Georgia,serif; letter-spacing:-.04em; }
body.portfolio .ei-device-exhibit .ei-project-text { max-width:660px; margin-top:15px; }
body.portfolio .work-card.device-project { grid-column:1/-1; border-top:1px solid var(--line); padding-top:27px; }
body.portfolio .device-project .card-meta { margin-bottom:15px; }
body.portfolio .device-project>.ei-project-text { max-width:700px; }
body.portfolio .device-project .device-toolbar .button { font-size:12px; }
body.portfolio .device-story-link { display:inline-block; margin-top:19px; }
body.portfolio .detail-device-preview { margin-top:42px; }
body.portfolio .ei-about.ei-about-with-portrait { display:grid; grid-template-columns:.65fr 1.35fr; gap:8%; }
body.portfolio .ei-about-with-portrait .ei-portrait-note { padding:0; display:block; }
body.portfolio .ei-about-with-portrait .ei-portrait-mat { max-width:270px; width:100%; margin:0 0 20px; }
body.portfolio .ei-about-with-portrait .eyebrow { display:inline-block; margin:0 0 18px; }
@media(min-width:1050px){body.portfolio .device-context-catalog .device-stage { padding-inline:48px; }}
@media(max-width:900px){
 body.portfolio .device-stage { grid-template-columns:minmax(0,1fr) minmax(160px,.32fr); gap:30px; padding:28px 24px; }
 body.portfolio .device>figcaption { flex-direction:column; gap:0; }
 body.portfolio .device-toolbar>div { gap:18px; }
}
@media(max-width:620px){
 body.portfolio .device-stage { grid-template-columns:minmax(0,1fr); gap:37px; padding:25px 21px 30px; }
 body.portfolio .device>figcaption { align-items:center; }
 body.portfolio .device-laptop .device-shell { padding:5px; border-radius:10px 10px 4px 4px; }
 body.portfolio .device-laptop .device-top { height:15px; font-size:7px; }
 body.portfolio .device-laptop .device-chin { height:4px; }
 body.portfolio .device-laptop .device-foot { height:9px; }
 body.portfolio .device-phone { max-width:255px; }
 body.portfolio .device-toolbar { gap:16px; }
 body.portfolio .device-toolbar>div { width:100%; justify-content:space-between; gap:12px; }
 body.portfolio .device-toolbar .button { gap:13px; padding:13px 17px; }
 body.portfolio .ei-about.ei-about-with-portrait { grid-template-columns:1fr; gap:35px; }
 body.portfolio .ei-about-with-portrait .ei-portrait-note { max-width:270px; }
 body.portfolio .ei-exhibit.ei-device-exhibit { margin-bottom:58px; }
}