/* Content-specific media placement. Layout and motion stay in the source styles/scripts. */
.work-preview{display:block;width:100%;border:1px solid #ffffff27;border-radius:16px;background:#10231b;overflow:hidden;color:#e8f5ed}
.work-preview-bar,.work-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;font-size:11px;letter-spacing:.08em}
.work-preview-bar b{font-size:19px;letter-spacing:-.03em}.work-preview-bar span,.work-preview-foot span{color:#a8c4b3}
.work-preview img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.work-preview-foot{border-top:1px solid #ffffff21}.work-preview-foot b{color:#c9f186}
.standards-preview{background:linear-gradient(135deg,#17372c,#14364b)}
.standards-flow{min-height:330px;display:flex;align-items:center;justify-content:center;gap:13px;padding:24px}
.standards-flow>div{width:29%;min-height:190px;padding:22px;border:1px solid #8dd7c350;border-radius:12px;background:#ffffff0a}
.standards-flow small{color:#a8d9c7;font-size:10px}.standards-flow strong{display:block;font-size:22px;margin:20px 0 8px}.standards-flow p{font-size:12px;color:#c0d2cc;line-height:1.6}
.standards-flow>span{color:#b5e384;font-size:24px}
.ensemble-gallery{color:#fff;background:linear-gradient(125deg,#2e5a93,#227895 55%,#117c86)}
.ensemble-gallery:before{background:radial-gradient(ellipse at 85% 20%,#75d6dc66,transparent 48%)}
.ensemble-gallery-description{color:#e2f2f2}
.ensemble-phone-slot{width:27cqw;left:calc(50% - 13.5cqw);top:calc(50% - 27.74cqw)}
.iphone-screen,.iphone-status,.iphone-home,.iphone-content img{background:#0a5288}
.iphone-content img{width:117%;height:118%;max-width:none;object-fit:cover;object-position:top left;transform:translate(-7%,-10%)}
.hero-portrait{width:400px;height:520px;top:160px}
.hero-portrait .avatar-body,.hero-portrait .avatar-canvas{object-fit:contain}
.hero-description{z-index:3}
@media(max-width:639px){.ensemble-phone-slot{width:32cqw;left:calc(50% - 16cqw);top:calc(59% - 32.9cqw)}.hero-portrait{width:300px;height:400px;top:130px}.standards-flow{min-height:260px;gap:5px;padding:10px}.standards-flow>div{padding:10px;min-height:150px}.standards-flow strong{font-size:13px}.standards-flow p{font-size:10px}}

.work-laptop{height:100%;min-height:390px;display:block}.work-laptop .artroom-cover{height:100%}.work-laptop .artroom-cover-heading{top:5%}.work-laptop .artroom-wordmark{font-size:7cqw}.work-laptop .artroom-cover-heading p{font-size:1.3cqw}@media(max-width:1023px){.work-laptop{height:min(68vw,510px);min-height:300px}}

.work-laptop{height:clamp(390px,39.3vw,520px)}.work-laptop .artroom-cover{height:100%}@media(max-width:1023px){.work-laptop{height:clamp(300px,60vw,510px)}}

.nav-avatar{background:#1a2024}.nav-avatar img{left:50%;top:0;width:210%;height:auto;max-width:none;transform:translateX(-50%)}

#project-contract .project-role{max-height:clamp(140px,20vh,270px);overflow-y:auto;padding-right:10px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8aaa69 transparent}
#project-contract .project-role .role-bullet{display:block;margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.55;letter-spacing:normal}
#project-contract .project-role .role-bullet strong{color:#f5f5f5;font-weight:700}
@media(max-width:1023px){#project-contract .project-role{max-height:none;overflow:visible}#project-contract .project-role .role-bullet{font-size:14px}}

.oa-preview{height:100%;min-height:390px;display:flex;flex-direction:column;padding:16px;background:#f4f5f9;color:#242842}
.oa-preview-head,.oa-preview-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px;font-size:11px}
.oa-preview-head{padding-bottom:12px}.oa-preview-head span{color:#6754d9;letter-spacing:.16em;font-weight:700}.oa-preview-head strong{font-size:15px}
.oa-preview-grid{min-height:0;flex:1;display:grid;grid-template-columns:1.65fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.oa-preview-grid a{min-width:0;min-height:0;overflow:hidden;border:1px solid #d8dbea;border-radius:9px;background:#fff;transition:transform .3s ease,box-shadow .3s ease}
.oa-preview-grid a:hover{transform:translateY(-4px);box-shadow:0 12px 24px #18193030}
.oa-preview-grid a:first-child{grid-row:span 2}
.oa-preview-grid img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.oa-preview-foot{padding-top:11px;color:#636982}.oa-preview-foot b{color:#6655cf}
@media(max-width:1023px){.oa-preview{height:clamp(300px,55vw,470px);min-height:0}}
@media(max-width:639px){.oa-preview{height:auto}.oa-preview-grid{grid-template-columns:1fr 1fr;grid-template-rows:135px 135px}.oa-preview-grid a:first-child{grid-column:span 2;grid-row:span 1}.oa-preview-foot{font-size:9px}}

@media(min-width:1024px) and (prefers-reduced-motion:no-preference){#projects{height:calc(100vw + 100vh)}#project-track{width:300vw}}
.work-slide-window{position:absolute;inset:0;width:100vw;height:100%;transition:transform 750ms var(--ease)}
.work-slide-window.show-standards{transform:translateX(-100vw)}
.work-slide-window:not(.show-standards){transition-duration:1000ms}
.standards-entry{position:absolute;z-index:5;right:10px;top:50%;transform:translateY(-50%);border:0;background:none;color:#aebdb5;padding:12px 4px;font-size:38px;font-weight:200;line-height:1;cursor:pointer;text-shadow:0 1px 5px #000}
.standards-entry:hover,.standards-entry:focus-visible{color:#f4f8f3;background:none;outline-offset:3px}
.standards-optional{background:var(--bg)}
.standards-return{display:inline-flex;align-items:center;margin-top:25px;padding:11px 17px;border:1px solid #ffffff4a;border-radius:30px;color:#e8f4e9;font-size:12px;cursor:pointer}
.standards-return:hover,.standards-return:focus-visible{border-color:var(--lime);color:var(--lime)}
@media(max-width:1023px){.work-slide-window{position:relative;width:100%;height:auto;transform:none!important}.standards-entry{top:auto;bottom:22px;right:24px;transform:none}.standards-optional{position:fixed;z-index:80;inset:0;width:100vw;height:100dvh;overflow-y:auto;transform:translateX(100%);transition:transform 750ms var(--ease)}.show-standards .standards-optional{transform:translateX(0)}.standards-optional .project-visual{margin-bottom:40px}}
@media(max-width:1023px){.work-slide-window:not(.show-standards) .standards-optional{transition-duration:1000ms}}
@media(prefers-reduced-motion:reduce){.work-slide-window{position:relative;width:100%;height:auto;transform:none!important;transition:none}.standards-optional{display:none}.show-standards .standards-optional{display:grid;position:fixed;inset:0;z-index:80;width:100vw;height:100dvh;overflow:auto}}
