/* Preserve source compositions and adapt the surrounding layout. */
body.k404-portfolio-single.site-showcase { --showcase-surface: #f3f3f1; }
body.k404-portfolio-single.site-showcase .elastic-fields .image-wrapper img {
    display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; max-width:100%;
}
body.k404-portfolio-single.site-showcase #section-12.section .col-top {
    width:100%; margin-inline:0; margin-bottom:clamp(36px,5vw,80px);
}
body.k404-portfolio-single.site-showcase #section-12.section .col-top .image-wrapper {
    overflow:hidden; border-radius:clamp(0px,1.2vw,20px);
}
body.k404-portfolio-single.site-showcase #section-12.section .col-top .image-wrapper img {
    width:100%; height:auto; aspect-ratio:auto; object-fit:contain;
}
body.k404-portfolio-single.site-showcase #section-12.section .section-content {
    grid-template-columns:minmax(0,1fr) auto; gap:28px 48px;
}
body.k404-portfolio-single.site-showcase #section-12.section .col-left {width:100%;max-width:900px;gap:20px;}
body.k404-portfolio-single.site-showcase #section-12.section .col-right {width:auto;max-width:240px;}
body.k404-portfolio-single.site-showcase #section-12.section .col-bottom {margin-top:8px;}
body.k404-portfolio-single.site-showcase #section-12.section .col-bottom-image:has(.image-wrapper:not(:has(img))) {display:none;}
body.k404-portfolio-single.site-showcase #section-12.section .title-wrapper :is(h1,h2) {
    margin:0; font:inherit; font-size:clamp(34px,4.6vw,72px); line-height:1.02; letter-spacing:-.055em; font-weight:400;
}
body.k404-portfolio-single.site-showcase #section-12.section .text-editor p {font-size:clamp(18px,1.45vw,23px);line-height:1.5;}
body.k404-portfolio-single.site-showcase #section-12.section .text-editor .project-credits {font-size:14px;line-height:1.6;margin-top:22px;}
body.k404-portfolio-single.site-showcase #section-13.section.features .section-content {grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
body.k404-portfolio-single.site-showcase #section-13.section.features .text p {font-size:clamp(16px,1.15vw,18px);line-height:1.6;}
body.k404-portfolio-single.site-showcase :is(#section-15.section,#section-19.section) .section-content {
    grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);align-items:center;gap:clamp(28px,5vw,80px);
}
body.k404-portfolio-single.site-showcase #section-19.section .section-content {grid-template-columns:minmax(250px,1fr) minmax(0,1.6fr);}
body.k404-portfolio-single.site-showcase :is(#section-15.section,#section-19.section) :is(.col-left,.col-right) {width:100%;max-width:none;margin-left:0;min-width:0;}
body.k404-portfolio-single.site-showcase :is(#section-15.section,#section-19.section) .image-wrapper {
    padding:clamp(10px,1.8vw,28px); background:var(--showcase-surface);border-radius:16px;
}
body.k404-portfolio-single.site-showcase :is(#section-15.section,#section-19.section) .image-wrapper img {border-radius:5px;box-shadow:0 8px 28px #0000000a;height:auto;aspect-ratio:auto;object-fit:contain;}
body.k404-portfolio-single.site-showcase :is(#section-14.section,#section-15.section,#section-19.section) .text-editor {font-size:18px;line-height:1.6;}
body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .section-content {
    grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:clamp(28px,5vw,80px);align-items:center;
}
body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,38px);padding:clamp(18px,3vw,44px);background:var(--showcase-surface);border-radius:20px;
}
body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-right {width:100%;max-width:none;min-width:0;}
body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left .image-wrapper {
    width:100%;max-width:300px;justify-self:center;align-self:start;border:5px solid #202320;border-radius:23px;overflow:hidden;background:#202320;box-shadow:0 12px 30px #00000012;
}
body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left .image-wrapper:nth-child(2) {margin-top:32px;}
body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left .image-wrapper img {aspect-ratio:auto;height:auto;object-fit:contain;border-radius:17px;}
body.k404-portfolio-single.site-showcase .editor-video-section {padding-top:0;padding-bottom:clamp(52px,6vw,96px);}
body.k404-portfolio-single.site-showcase .editor-video {overflow:hidden;border:1px solid #e3e3df;border-radius:16px;background:#f3f3f1;}
body.k404-portfolio-single.site-showcase .editor-video video {width:100%;height:auto;aspect-ratio:8/5;max-height:none;object-fit:contain;background:#f3f3f1;}
body.k404-portfolio-single.site-showcase .editor-video figcaption {padding:18px 22px;margin:0;font-size:15px;line-height:1.55;}
.has-media-presentation .post-thumbnail img,
.portfolio-card .post-thumbnail img.presentation-cover {object-fit:contain!important;background:#f3f3f1;}
@media(min-width:1600px){body.k404-portfolio-single.site-showcase #section-12.section .section-width {max-width:1520px;}}
@media(max-width:1200px){
    body.k404-portfolio-single.site-showcase :is(#section-14.section.stacked_text,#section-15.section,#section-19.section) .section-content {grid-template-columns:1fr;gap:28px;}
    body.k404-portfolio-single.site-showcase #section-19.section .col-left {order:2;}
    body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left {max-width:760px;width:100%;justify-self:center;}
    body.k404-portfolio-single.site-showcase #section-13.section.features .section-content {gap:24px;}
}
@media(max-width:650px){
    body.k404-portfolio-single.site-showcase #section-12.section .section-content {grid-template-columns:1fr;gap:24px;}
    body.k404-portfolio-single.site-showcase #section-12.section .col-right {display:none;}
    body.k404-portfolio-single.site-showcase #section-12.section .col-top {width:calc(100% + 2 * var(--home-gutter));margin-left:calc(-1 * var(--home-gutter));}
    body.k404-portfolio-single.site-showcase #section-12.section .col-top .image-wrapper {border-radius:0;}
    body.k404-portfolio-single.site-showcase #section-13.section.features .section-content {grid-template-columns:1fr;gap:28px;}
    body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left {gap:18px;padding:20px 16px;}
    body.k404-portfolio-single.site-showcase .editor-video {border-radius:10px;}
    body.k404-portfolio-single.site-showcase .editor-video figcaption {font-size:14px;padding:14px 16px;}
}
@media(max-width:480px){
    body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left {grid-template-columns:1fr;}
    body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left .image-wrapper {max-width:300px;}
    body.k404-portfolio-single.site-showcase #section-14.section.stacked_text .col-left .image-wrapper:nth-child(2) {margin-top:4px;}
}

/* The content keeps its complete frame at each responsive media ratio. */
body.k404-portfolio-single.site-showcase .presentation-loop {border:0;border-radius:clamp(0px,1.2vw,18px);background:#eee7dc;}
body.k404-portfolio-single.site-showcase .presentation-loop .presentation-loop-frame {position:relative;aspect-ratio:var(--desktop-ratio);}
body.k404-portfolio-single.site-showcase .presentation-loop video {display:block;width:100%;height:100%;aspect-ratio:var(--desktop-ratio);object-fit:contain;background:#eee7dc;}
body.k404-portfolio-single.site-showcase .presentation-loop figcaption:empty {display:none;}
body.k404-portfolio-single.site-showcase .presentation-motion-toggle {position:absolute;bottom:16px;right:16px;z-index:2;min-height:42px;padding:10px 17px;border:1px solid #ffffff70;border-radius:999px;background:#171717e8;color:#fff;font:500 13px/1.3 Arial,sans-serif;cursor:pointer;box-shadow:0 3px 15px #0002;}
body.k404-portfolio-single.site-showcase .presentation-motion-toggle[hidden] {display:none;}
body.k404-portfolio-single.site-showcase .presentation-motion-toggle:focus-visible {outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #111;}
body.k404-portfolio-single.site-showcase .elastic-fields > .editor-video-section:first-child {padding-top:clamp(12px,2vw,32px);padding-bottom:clamp(24px,3vw,48px);}
body.k404-portfolio-single.site-showcase #section-12 .col-top:not(:has(img)) {display:none;}
@media(max-width:650px){
 body.k404-portfolio-single.site-showcase .presentation-loop .presentation-loop-frame,body.k404-portfolio-single.site-showcase .presentation-loop video {aspect-ratio:var(--mobile-ratio);}
 body.k404-portfolio-single.site-showcase .presentation-motion-toggle {bottom:12px;right:12px;min-height:44px;font-size:12px;}
 body.k404-portfolio-single.site-showcase .elastic-fields > .editor-video-section:first-child .section-width {padding-inline:0;}
}

/* Separate the project introduction from the uninterrupted media view. */
body.k404-portfolio-single.site-showcase.has-presentation-overview {
 --presentation-stage-gap:clamp(16px,3vh,32px);
 --presentation-bottom-space:var(--k404-nav-height,77px);
 --presentation-controls-space:58px;
}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12.section {
 box-sizing:border-box;display:flex;align-items:center;min-height:calc(100svh - var(--k404-nav-height,77px));padding-block:clamp(32px,6vh,80px);
}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .section-width,
body.k404-portfolio-single.site-showcase.has-presentation-overview .editor-video-section:has(.presentation-loop) .section-width {
 width:calc(100% - 192px);max-width:1440px;padding:0;margin-inline:auto;
}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .section-content {
 display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:'copy preview' 'actions preview';column-gap:clamp(32px,5vw,96px);row-gap:28px;align-items:center;
}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-left {grid-area:copy;align-self:end;gap:24px;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-top {grid-area:preview;align-self:center;width:100%;margin:0;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-top .image-wrapper {padding:clamp(12px,1.5vw,24px);border:1px solid #e8e5e2;background:#f3f0ec;border-radius:18px;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-top img {border-radius:8px;box-shadow:0 10px 32px #0000000c;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-right {display:none;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-bottom {grid-area:actions;align-self:start;margin:0;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-bottom-image:has(img) {grid-column:1 / -1;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .title-wrapper h1 {font-size:clamp(42px,5.6vw,86px);line-height:1.04;letter-spacing:-.055em;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .text-editor p {font-size:clamp(16px,1.3vw,20px);line-height:1.55;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .text-editor .project-credits {font-size:13px;line-height:1.55;margin-top:20px;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .button-section {display:flex;flex-wrap:wrap;gap:12px;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .button-section a {display:inline-flex;align-items:center;justify-content:center;gap:12px;width:auto;min-height:46px;padding:12px 20px;margin:0;border:1px solid #222;border-radius:999px;font-size:14px;line-height:1.3;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .button-section a.presentation-watch {background:#171717;color:#fff;order:-1;}
body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .button-section a.presentation-watch:after {content:'↓';}
body.k404-portfolio-single.site-showcase.has-presentation-overview .editor-video-section:has(.presentation-loop) {padding-block:var(--presentation-stage-gap);background:#f5f4f1;}
body.k404-portfolio-single.site-showcase.has-presentation-overview .presentation-loop {
 --presentation-ratio:var(--desktop-ratio);
 --presentation-caption-space:0px;
 --presentation-frame-limit:max(100px,calc(var(--presentation-viewport-height,100svh) - var(--presentation-bottom-space) - 2 * var(--presentation-stage-gap) - var(--presentation-controls-space) - var(--presentation-caption-space)));
 display:flex;flex-direction:column;align-items:center;width:min(100%,calc(var(--presentation-frame-limit) * var(--presentation-ratio)));margin:0 auto;overflow:visible;border:0;border-radius:0;background:none;scroll-margin-top:var(--presentation-stage-gap);
}
body.k404-portfolio-single.site-showcase.has-presentation-overview .presentation-loop .presentation-loop-frame {width:100%;aspect-ratio:var(--presentation-ratio);border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000000b;}
body.k404-portfolio-single.site-showcase.has-presentation-overview .presentation-loop video {width:100%;height:auto;aspect-ratio:var(--presentation-ratio);object-fit:contain;}
body.k404-portfolio-single.site-showcase.has-presentation-overview .presentation-motion-toggle {position:static;display:block;flex-shrink:0;width:max-content;max-width:calc(100vw - 40px);white-space:nowrap;min-height:44px;margin:14px auto 0;padding:10px 18px;box-shadow:none;font-size:13px;}
body.k404-portfolio-single.site-showcase.has-presentation-overview .presentation-motion-toggle[hidden] {display:none;}
body.k404-portfolio-single.site-showcase.has-presentation-overview .presentation-loop figcaption {padding:12px 0 0;text-align:center;}
@media(max-width:900px){
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .section-content {grid-template-columns:1fr;grid-template-areas:'copy' 'preview' 'actions';row-gap:24px;}
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-top {max-width:600px;}
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-left {gap:16px;}
}
@media(max-width:650px){
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .section-width,
 body.k404-portfolio-single.site-showcase.has-presentation-overview .editor-video-section:has(.presentation-loop) .section-width {width:calc(100% - 40px);}
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12.section {padding-block:28px;min-height:calc(100svh - var(--k404-nav-height,66px));}
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .section-content {row-gap:20px;}
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .col-top .image-wrapper {padding:10px;border-radius:12px;}
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .text-editor .project-credits {margin-top:16px;}
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .button-section {gap:8px;}
 body.k404-portfolio-single.site-showcase.has-presentation-overview #section-12 .button-section a {font-size:13px;padding:12px 15px;}
 body.k404-portfolio-single.site-showcase.has-presentation-overview .presentation-loop {--presentation-ratio:var(--mobile-ratio);}
}

/* Give adjacent surfaces their own responsive breathing room. */
body.k404-portfolio-single.site-showcase.has-presentation-overview .editor-video-section:has(.presentation-loop) {
 padding-bottom:clamp(32px,3vw,56px);
}
body.k404-portfolio-single.site-showcase.has-presentation-overview .editor-video-section:has(.presentation-loop) + #section-13.section.features {
 padding-top:clamp(48px,5vw,96px);
 padding-bottom:clamp(48px,6vw,112px);
}