/* A curated photographic ribbon, held by native page scrolling. */
.portfolio-ribbon-track{position:relative;background:var(--cream);padding:20px 0}
.portfolio-ribbon-pin{position:relative;isolation:isolate;height:430px;overflow:clip;color:#263a43}
.portfolio-ribbon-pin:before{content:'';position:absolute;inset:20px;z-index:0;border-radius:80px;background:radial-gradient(ellipse at 15% 8%,#8ab7d136,transparent 60%),var(--ribbon-bg,#dfeaf0);border:1px solid #728b9626;pointer-events:none}
.portfolio-ribbon-pin:after{content:'';position:absolute;left:20px;right:20px;bottom:20px;height:56%;z-index:2;border-radius:0 0 80px 80px;background:linear-gradient(transparent,rgba(240,237,229,.74) 57%,rgba(240,237,229,.96));pointer-events:none}
#portfolio-ribbon{display:none;position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);border-radius:80px;z-index:1;pointer-events:none;opacity:0;transition:opacity .65s cubic-bezier(.075,.82,.165,1)}
.ribbon-meta{position:absolute;z-index:3;left:calc(var(--gutter) + 20px);right:calc(var(--gutter) + 20px);top:44px;display:flex;justify-content:space-between;gap:18px;font:500 9px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#405c69;pointer-events:none}
.ribbon-meta span:last-child{text-align:right}
.ribbon-title{position:absolute;z-index:3;left:calc(var(--gutter) + 20px);bottom:125px;max-width:75%;opacity:var(--ribbon-title-opacity,1);transform:translateY(var(--ribbon-title-y,0px));pointer-events:none}
.ribbon-title h3{font:400 clamp(42px,5.9vw,86px)/.93 var(--serif);letter-spacing:-.045em;color:#263a43;margin:0;text-shadow:0 1px 22px #f0ede5a8}
.ribbon-title h3 em{color:#5c7380}
.ribbon-preview-note{position:absolute;z-index:3;left:calc(var(--gutter) + 20px);right:calc(var(--gutter) + 20px);bottom:31px;margin:0;font:400 10px/1.5 var(--sans);color:#536975;letter-spacing:.02em;pointer-events:none}
.ribbon-jumps{position:absolute;z-index:4;left:calc(var(--gutter) + 20px);right:calc(var(--gutter) + 20px);bottom:62px;display:flex;gap:10px;align-items:stretch}
.ribbon-jumps button{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:0;padding:11px 18px;border:1px solid #58727e55;border-radius:999px;background:#f7f8f0c7;color:#304e5b;font:500 11px/1.4 var(--sans);text-align:center;transition:background 160ms ease,color 160ms ease,border-color 160ms ease}
.ribbon-jumps button:hover,.ribbon-jumps button:focus-visible{background:#293f49;color:#f4f0e6;border-color:#293f49}
.ribbon-jumps button:focus-visible{outline:2px solid #304e5b;outline-offset:4px}
.ribbon-jumps button:active{background:#192e38;color:#f4f0e6}
.ribbon-jumps button{gap:7px}
.ribbon-short-label{display:none}
.portfolio-ribbon-fallback{position:absolute;z-index:1;left:15%;right:10%;top:55px;height:210px;display:flex;gap:16px;justify-content:center;align-items:center;pointer-events:none;transition:opacity .45s ease}
.portfolio-ribbon-fallback i{display:block;position:relative;width:26%;max-width:170px;height:82%;overflow:hidden;border:5px solid #f2eee3;border-radius:13px;box-shadow:0 12px 24px #526c7c26;background:radial-gradient(ellipse at 30% 20%,#f2e3b4,#a0aa89 39%,#334a3c 80%);transform:rotate(-10deg)}
.portfolio-ribbon-fallback i:before{content:'';position:absolute;inset:17%;border:8px solid #c1ac7e;border-radius:50%;box-shadow:inset 2px 3px 6px #fff5cb99,3px 7px 9px #24382755;transform:rotateY(40deg) rotateZ(-25deg)}
.portfolio-ribbon-fallback i:nth-child(2){height:96%;transform:translateY(-12px) rotate(3deg);background:linear-gradient(138deg,#beab7966,transparent 42%),#334e3d}
.portfolio-ribbon-fallback i:nth-child(2):before{inset:23% 12%;border-radius:0;border:1px solid #d6c59a;box-shadow:inset 0 0 0 6px #142a1d88;transform:rotate(-8deg)}
.portfolio-ribbon-fallback i:nth-child(3){transform:rotate(13deg);background:repeating-linear-gradient(90deg,#f0e4cb 0 30%,#9ca58d 30% 32%,#d0c2a5 32% 62%)}
.portfolio-ribbon-fallback i:nth-child(3):before{border-radius:55% 55% 0 0;border:1px solid #8d9a7c;background:#b4bea3aa;inset:20% 17% -10%;box-shadow:8px 0 14px #5b705322;transform:rotate(-10deg)}
.portfolio-ribbon-fallback img{display:block;position:relative;width:26%;max-width:170px;height:82%;object-fit:cover;object-position:50% 30%;overflow:hidden;border:5px solid #f2eee3;border-radius:13px;box-shadow:0 12px 24px #526c7c26;background:#e9e5dc;transform:rotate(-10deg)}
.portfolio-ribbon-fallback img:nth-child(2){height:96%;transform:translateY(-12px) rotate(3deg);object-position:50% 35%}
.portfolio-ribbon-fallback img:nth-child(3){transform:rotate(13deg);object-position:50% 35%}
.scroll-cinema .portfolio-ribbon-track{height:240svh;padding:0}
.scroll-cinema .portfolio-ribbon-pin{position:sticky;top:0;height:100svh}
.scroll-cinema #portfolio-ribbon{display:block}
.scroll-cinema .gpu-ribbon-ready #portfolio-ribbon{opacity:1}
.scroll-cinema .gpu-ribbon-ready .portfolio-ribbon-fallback{opacity:0}
.scroll-cinema .ribbon-meta{top:125px}
.scroll-cinema .ribbon-title{bottom:180px}
.scroll-cinema .ribbon-jumps{bottom:97px}
.scroll-cinema .ribbon-preview-note{bottom:66px}
.scroll-cinema .portfolio-ribbon-fallback{top:24%;height:42%}
@media(max-width:760px){
 .portfolio-ribbon-track{padding:12px 0}
 .portfolio-ribbon-pin{height:390px}
 .portfolio-ribbon-pin:before{inset:12px;border-radius:30px}
 .portfolio-ribbon-pin:after{left:12px;right:12px;bottom:12px;border-radius:0 0 30px 30px;height:55%}
 #portfolio-ribbon{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);border-radius:30px}
 .ribbon-meta{left:32px;right:32px;top:32px;font-size:8px;letter-spacing:.07em;gap:12px}
 .ribbon-meta span:last-child{max-width:45%}
 .ribbon-title{left:32px;max-width:86%;bottom:129px}
 .ribbon-title h3{font-size:clamp(39px,11.5vw,66px);line-height:.97}
 .ribbon-jumps{left:30px;right:30px;bottom:60px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .ribbon-jumps button{padding:10px 5px;font-size:9px;min-height:44px}
 .ribbon-jumps button>span[aria-hidden]{display:none}
 .ribbon-jumps button .ribbon-full-label{display:none}
 .ribbon-jumps button .ribbon-short-label{display:block;font-size:11px}
 .ribbon-preview-note{left:32px;right:32px;bottom:29px;font-size:9px}
 .portfolio-ribbon-fallback{left:14%;right:8%;top:49px;height:180px;gap:9px}
 .portfolio-ribbon-fallback i,.portfolio-ribbon-fallback img{width:30%;border-width:3px;border-radius:10px}
 .portfolio-ribbon-fallback i:before{border-width:5px}
 .scroll-cinema .portfolio-ribbon-track{height:260svh}
 .scroll-cinema .ribbon-meta{top:123px}
 .scroll-cinema .ribbon-title{bottom:180px}
 .scroll-cinema .ribbon-jumps{bottom:98px}
 .scroll-cinema .ribbon-preview-note{bottom:69px}
 .scroll-cinema .portfolio-ribbon-fallback{top:25%;height:35%}
}
@media(max-width:370px){.ribbon-title h3{font-size:38px}.ribbon-meta{font-size:7.5px}.ribbon-jumps{left:25px;right:25px;gap:5px}.ribbon-jumps button{font-size:8px}.ribbon-preview-note{font-size:8.5px}}
@media(prefers-reduced-motion:reduce){#portfolio-ribbon{display:none!important}.portfolio-ribbon-fallback{opacity:1!important;transition:none}.ribbon-title{transform:none}.ribbon-jumps button{transition:none}}
@media(prefers-contrast:more){.ribbon-meta,.ribbon-preview-note{color:#263f4b}.ribbon-jumps button{background:#f5f2e9;color:#213944;border-color:#385664}}
@media(forced-colors:active){.ribbon-jumps button{border:1px solid ButtonText}.ribbon-jumps button:focus-visible{outline-color:Highlight}}