/* Live project previews: local imagery, native links and a compact mobile rail. */
.portfolio .section-content{width:37%;}
.latest-projects-banner{display:flex;align-items:center;gap:12px;max-width:350px;margin:25px 0 18px;padding:17px 18px;border:1px solid #ffffffdf;border-radius:15px;background:linear-gradient(110deg,#ffffffba,#eaf2f6a6);box-shadow:inset 0 1px 0 white,0 8px 30px #1938470a;backdrop-filter:blur(18px);font-size:15px;color:#152937;}
.latest-dot{height:6px;width:6px;flex-shrink:0;border-radius:50%;background:#629589;box-shadow:0 0 0 5px #62958912;}
.latest-projects-banner b{font-size:26px;line-height:1;font-weight:300;margin-left:auto;}
.latest-project-grid{position:absolute;left:47%;right:4.5%;top:50%;transform:translateY(-50%);display:grid;gap:26px;perspective:1200px;}
.live-project-wrap{min-width:0;width:82%;transform:rotate(-1.8deg);transform-origin:center;}
.live-project-wrap:nth-child(2){width:79%;justify-self:end;transform:rotate(1.6deg);}
.live-project-wrap:nth-child(3){width:84%;margin-left:5%;transform:rotate(-1.1deg);}
.live-project{position:relative;display:block;height:clamp(136px,18vh,208px);isolation:isolate;overflow:hidden;border-radius:22px;border:1px solid #ffffffef;color:#17352a;background:#e5ede6;box-shadow:0 24px 45px -12px #0b273a38,0 5px 14px #ffffff30,inset 0 0 0 5px #ffffff35;text-decoration:none;transition:transform .35s ease,box-shadow .35s ease;}
.live-project:hover{transform:translateY(-3px);box-shadow:0 30px 55px -12px #0b273a4a;}
.live-project:focus-visible{outline:3px solid #183f64;outline-offset:5px;}
.live-project-image{position:absolute;right:0;top:0;height:100%;width:60%;object-fit:cover;object-position:50% 12%;z-index:-2;transition:transform .6s ease;}
.live-project:hover .live-project-image{transform:scale(1.035);}
.live-project-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#e5ede6 0%,#e5ede6 36%,#e5ede680 56%,transparent 76%);}
.live-project-copy{position:absolute;inset:22px auto 19px 26px;display:flex;flex-direction:column;align-items:flex-start;max-width:67%;}
.live-project-category{display:flex;gap:7px;align-items:center;font-size:9px;letter-spacing:1px;text-transform:uppercase;opacity:.75;}
.live-project-category i{height:4px;width:4px;border-radius:50%;background:currentColor;}
.live-project-copy strong{font-size:clamp(27px,2.5vw,40px);line-height:1.05;letter-spacing:-1.4px;font-weight:600;margin:14px 0 7px;}
.live-project-label{font-size:11px;opacity:.8;}
.live-project-domain{display:flex;gap:16px;align-items:center;margin-top:auto;font-size:10px;letter-spacing:.2px;opacity:.7;}
.live-project-domain span{font-size:16px;}
.live-project-index{position:absolute;top:17px;right:19px;font:10px monospace;opacity:.55;}
.live-project-arrow{position:absolute;right:17px;bottom:16px;display:grid;place-items:center;border:1px solid #ffffffb0;background:#ffffff70;backdrop-filter:blur(10px);border-radius:50%;height:32px;width:32px;font-size:23px;font-weight:300;}
.live-project--stikpaw{color:#123c61;background:#dcf0ff;}
.live-project--stikpaw .live-project-image{width:100%;object-position:right center;}
.live-project--stikpaw .live-project-shade{background:linear-gradient(90deg,#e1f2ff 0%,#e1f2ff 30%,#e1f2ffb0 45%,transparent 63%);}
.live-project--foodhero{color:#fff4df;background:#33241b;}
.live-project--foodhero .live-project-shade{background:linear-gradient(90deg,#33241b 0%,#33241bf2 35%,#33241b60 64%,#33241b10);}
.live-project--foodhero .live-project-image{width:65%;object-position:center 54%;}
.live-project--foodhero .live-project-copy strong{max-width:210px;font-size:clamp(24px,2.2vw,34px);}
.live-project--foodhero .live-project-index{color:#17352a;}
.live-project--foodhero .live-project-arrow{color:#fff4df;background:#33241b55;}
@media(min-width:761px) and (max-height:760px){
 .portfolio h2{font-size:5.2vw;}.portfolio .section-content p{font-size:14px;line-height:1.65;}
 .latest-projects-banner{margin:18px 0 16px;padding:13px 16px;}
 .live-project-copy{inset:15px auto 12px 22px;}
 .live-project-copy strong{margin:10px 0 5px;font-size:31px;}
 .live-project-label{font-size:10px;}.live-project-category{font-size:8px;letter-spacing:.65px;}
 .live-project--foodhero .live-project-copy strong{font-size:28px;}
}
@media(max-width:1000px) and (min-width:761px){
 .latest-project-grid{left:47%;right:3%;gap:22px;}.live-project-copy{left:16px;}
 .live-project-wrap{width:88%;}.live-project-wrap:nth-child(2){width:86%;}.live-project-wrap:nth-child(3){width:89%;margin-left:2%;}
 .live-project-copy strong{font-size:30px;}.live-project-label{max-width:180px;}
 .live-project-category{font-size:8px;letter-spacing:.2px;}.live-project--foodhero .live-project-copy strong{font-size:27px;max-width:170px;}
}
@media(max-width:760px){
 [data-chapter=portfolio] #readability{background:linear-gradient(180deg,#f4f8fc20,#f4f8fccf 23%,#f4f8fcf2 52%,#f4f8fc 75%);}
 .portfolio .section-content{top:109px;width:88%;margin-left:6vw;}
 .portfolio .eyebrow{margin-bottom:20px;}
 .portfolio h2{font-size:clamp(34px,10.5vw,58px);line-height:1.02;margin-bottom:18px;}
 .portfolio .section-content p{font-size:13px;line-height:1.65;max-width:350px;}
 .latest-projects-banner{max-width:none;margin:18px 0 13px;padding:12px 15px;font-size:14px;}
 .latest-project-grid{left:0;right:0;top:auto;bottom:100px;transform:none;display:flex;gap:12px;padding:7px 6vw 18px;perspective:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:6vw;scrollbar-width:thin;scrollbar-color:#8ca6b944 transparent;}
 .latest-project-grid .live-project-wrap{flex:0 0 80vw;width:auto;margin:0;transform:none;scroll-snap-align:start;}
 .live-project{height:clamp(175px,25vh,240px);border-radius:19px;}
 .live-project-copy{inset:20px auto 18px 19px;max-width:68%;}
 .live-project-copy strong{font-size:34px;margin-top:17px;}
 .live-project-category{font-size:8px;letter-spacing:.4px;}
 .live-project-label{font-size:10px;max-width:170px;}
 .live-project--foodhero .live-project-copy strong{font-size:28px;max-width:180px;}
 .live-project--stikpaw .live-project-image{width:120%;max-width:none;}
 .live-project:hover{transform:none;}
}
@media(max-width:760px) and (max-height:740px){
 .portfolio .section-content{top:90px;}.portfolio .eyebrow{margin-bottom:14px;}
 .portfolio h2{font-size:34px;margin-bottom:12px;}.portfolio .section-content p{font-size:12px;line-height:1.5;}
 .latest-projects-banner{margin:12px 0 10px;padding:10px 13px;}
 .latest-project-grid{bottom:80px;}.live-project{height:170px;}
}
@media(prefers-reduced-motion:reduce){.live-project,.live-project-image{transition:none;}}

.portfolio .portfolio-start-project{margin:0;text-decoration:none;transition:background .2s,box-shadow .2s;}
.portfolio-start-project:hover{background:linear-gradient(110deg,#ffffffed,#eaf2f6df);box-shadow:inset 0 1px 0 white,0 8px 30px #19384718;}
.portfolio-start-project:focus-visible{outline:3px solid #183f64;outline-offset:4px;}
@media(prefers-reduced-motion:reduce){.portfolio .portfolio-start-project{transition:none;}}

@media(min-width:761px){.live-project-copy{max-width:72%;}.live-project-category{letter-spacing:.55px;}.live-project-label{max-width:200px;}}
@media(min-width:761px) and (max-height:760px){.latest-project-grid{gap:22px;}.live-project-copy strong{font-size:29px;}.live-project--foodhero .live-project-copy strong{font-size:25px;}}