/* One immersive project at a time: image-led, with clear gallery controls. */
#work .demo-portfolio-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:1px solid #cabb9c;background:#f4eee3;box-shadow:0 20px 55px #17354a0b}
.demo-portfolio-viewport::-webkit-scrollbar{display:none}
#work .demo-portfolio-track{display:flex;gap:0;position:relative;width:100%;align-items:stretch}
#work .demo-portfolio-track>.demo-project{flex:0 0 100%;min-width:0;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,1.85fr) minmax(240px,1fr);grid-template-rows:auto 1fr;gap:0;background:#fcfaf4}
#work .demo-card-meta{grid-column:1/-1;margin:0;padding:19px 26px;border-bottom:1px solid #cabb9c;font-size:9px;letter-spacing:.16em}
#work .demo-card-image{padding:38px 32px;display:flex;align-items:center;min-height:340px}
#work .mini-browser{width:100%;box-shadow:0 16px 35px #17354a26;border-radius:5px}
#work .mini-browser-bar{padding:12px 14px;font-size:8px}
#work .demo-viewport{aspect-ratio:1.45}
#work .demo-card-caption{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:30px;padding:38px 30px;border-left:1px solid #cabb9c}
#work .demo-card-caption h3{font:normal clamp(32px,3.4vw,49px)/1.08 Georgia,serif;letter-spacing:-.04em;margin:0 0 18px;color:#17354a}
#work .demo-card-caption p{font-size:11px;line-height:1.8;max-width:240px}
#work .demo-card-caption>a{font-size:11px;border-bottom:1px solid #9a7d4d;padding:14px 0;min-height:44px}
#work .demo-open-icon{right:16px;bottom:16px}
.demo-portfolio-viewport:focus-visible{outline:2px solid #8d6a35;outline-offset:5px}
.work-carousel-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 22px;padding:16px 0;border-block:1px solid #cabb9c}
.work-carousel-controls[hidden]{display:none}
.work-position{display:flex;align-items:center;gap:24px;min-width:0}
#workCount{font-size:12px;letter-spacing:.15em;color:#775e37;white-space:nowrap}
.work-dots{display:flex;gap:1px}
.work-dots button{background:none;border:0;min-width:28px;min-height:44px;padding:8px;display:grid;place-items:center;cursor:pointer}
.work-dots button:before{content:'';width:5px;height:5px;border-radius:50%;background:#a6ab9f}
.work-dots button[aria-current="true"]:before{width:18px;height:5px;border-radius:5px;background:#8c6b38}
.work-actions{display:flex;align-items:center;gap:10px}
.work-arrow{min-height:48px;width:48px;border:1px solid #9f8b68;background:#fcfaf4;color:#16394d;font-size:23px;border-radius:50%;cursor:pointer}
.work-arrow:hover{background:#15374e;color:#f9ecd2}
.work-pause{border:0;background:transparent;color:#526775;font-size:10px;min-height:44px;padding:10px;white-space:nowrap;cursor:pointer}
.work-pause:disabled{color:#6f7d7f;cursor:default}
.work-carousel-controls button:focus-visible{outline:2px solid #8d6a35;outline-offset:3px}
#work .work-footnote{margin-top:25px}
@media(max-width:850px){#work .demo-portfolio-track>.demo-project{grid-template-columns:minmax(0,1.5fr) minmax(205px,1fr)}#work .demo-card-image{padding:28px 20px;min-height:280px}#work .demo-card-caption{padding:28px 22px}.work-position{gap:10px}.work-dots button{min-width:25px;padding:7px}.work-pause{padding:8px;font-size:9px}}
@media(max-width:700px){
 #work .demo-portfolio-track>.demo-project{display:flex;flex-direction:column}
 #work .demo-card-meta{padding:15px 18px;font-size:8px}
 #work .demo-card-image{display:block;min-height:0;padding:26px 18px}
 #work .demo-viewport{aspect-ratio:1.25}
 #work .demo-card-caption{flex:1;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:25px 20px;border-left:0;border-top:1px solid #cabb9c}
 #work .demo-card-caption h3{font-size:29px;margin-bottom:10px}
 #work .demo-card-caption p{font-size:10px}
 #work .demo-card-caption>a{white-space:nowrap;font-size:10px}
 .work-carousel-controls{flex-wrap:wrap;gap:8px;margin-bottom:18px;padding-block:12px}
 .work-position{width:100%;justify-content:space-between;gap:8px}
 .work-dots button{min-width:25px;min-height:44px;padding:7px}
 .work-actions{width:100%;justify-content:flex-end}
 .work-arrow{width:46px;min-height:46px}.work-pause{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.demo-portfolio-viewport{scroll-behavior:auto}.demo-portfolio-track .mini-browser{transition:none}}