/* A shared opening and live-site window for finished portfolio projects. */
body:has(.px-banner){padding-top:0;background:#090909}
body:has(.px-banner) .site-header{background:transparent;border:0}
.px-banner,.px-story,.px-website{color:#f6f4f0;background:var(--px-dark,#0b0b0b);position:relative;overflow:clip}
.px-banner{min-height:min(850px,100svh);isolation:isolate}
.px-banner::before{content:'';position:absolute;inset:-20%;z-index:-2;background:radial-gradient(circle at 72% 43%,var(--px-accent) 0,transparent 25%),radial-gradient(circle at 82% 77%,#ffffff16,transparent 25%);opacity:.28}
.px-banner::after{content:'';position:absolute;inset:auto 0 0;height:23%;z-index:-1;background:linear-gradient(transparent,var(--px-dark))}
.px-noise{position:absolute;inset:0;opacity:.15;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E")}
.px-banner-inner{max-width:1440px;min-height:inherit;position:relative;display:flex;flex-direction:column;padding-top:140px;padding-bottom:42px}
.px-banner-top,.px-banner-bottom{display:flex;justify-content:space-between;gap:20px;position:relative;z-index:3;font-size:10px;font-weight:800;letter-spacing:.17em}
.px-banner-top a{color:#f6f4f0}.px-banner-top span,.px-banner-bottom{color:#c6bebb}
.px-banner-copy{position:relative;z-index:3;max-width:68%;margin:auto 0;padding:70px 0 55px}
.px-overline{color:var(--px-accent);font-size:11px;font-weight:850;letter-spacing:.22em}
.px-banner h1{max-width:1000px;font-size:clamp(70px,10vw,165px);line-height:.84;letter-spacing:-.085em;text-transform:uppercase;overflow-wrap:anywhere;margin:24px 0 28px;animation:px-rise .9s both cubic-bezier(.2,.75,.2,1)}
.px-work-banner .px-banner-copy{max-width:55%}.px-work-banner h1{font-size:clamp(64px,7.8vw,112px);max-width:720px}.px-work-banner .px-banner-copy>p{max-width:520px}
.px-title-dot{color:var(--px-accent)}.px-banner-copy>p{font-family:Instrument,Georgia,serif;font-style:italic;font-size:clamp(29px,3vw,46px);line-height:1.1;color:#f8eee8;margin:0 0 35px;animation:px-rise .9s .12s both}
.px-scroll-link{display:inline-flex;align-items:center;justify-content:space-between;gap:60px;border:1px solid #ffffff6b;border-radius:50px;padding:15px 21px;font-size:11px;font-weight:800;letter-spacing:.13em;transition:background .3s,color .3s,border-color .3s}
.px-scroll-link span{font-size:20px;line-height:1}.px-scroll-link:hover{background:var(--px-accent);color:#090909;border-color:var(--px-accent)}
.px-banner-visuals{position:absolute;inset:0 0 0 38%;z-index:1;pointer-events:none;perspective:1100px}
.px-visual{position:absolute;overflow:hidden;border:1px solid #ffffff69;border-radius:7px;box-shadow:0 30px 80px #0009;will-change:transform;transform:translate3d(0,var(--px-y,0px),0) rotate(var(--px-rotate,0deg));transition:transform .18s linear}
.px-visual img{display:block;width:100%;height:100%;object-fit:cover}.px-visual-1{width:40%;height:63%;right:15%;top:18%;--px-rotate:8deg;z-index:2;animation:px-enter-main 1s .1s both}.px-visual-2{width:31%;height:45%;right:50%;top:34%;--px-rotate:-12deg;z-index:1;animation:px-enter-left .9s .24s both}.px-visual-3{width:29%;height:40%;right:1%;top:44%;--px-rotate:16deg;z-index:3;animation:px-enter-right .9s .35s both}
.px-orbit-label{position:absolute;right:4%;top:17%;font-size:10px;letter-spacing:.24em;color:#fffc;writing-mode:vertical-rl}
.px-story{padding:clamp(95px,12vw,165px) 0;background:linear-gradient(180deg,var(--px-dark),#0b0b0d)}
.px-section-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:25px;margin-bottom:48px}.px-section-heading>span{grid-column:1/-1;color:var(--px-accent);font-size:11px;font-weight:800;letter-spacing:.2em}.px-section-heading h2{font-size:clamp(62px,8vw,118px);letter-spacing:-.075em;line-height:.9;margin:0;text-transform:uppercase}.px-section-heading h2 em{font-family:Instrument,Georgia,serif;text-transform:none;font-weight:400;color:var(--px-accent)}.px-section-heading>p{max-width:400px;color:#c9c5c3;font-size:16px;line-height:1.7}
.px-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#ffffff36;border:1px solid #ffffff36}.px-story-card{min-width:0;padding:clamp(28px,3vw,50px);background:#161517;position:relative;transition:background .4s}.px-story-card:hover{background:#232025}.px-story-card::before{content:'↗';position:absolute;right:26px;top:24px;color:var(--px-accent);font-size:25px}.px-story-card>span{display:block;color:var(--px-accent);font-size:10px;font-weight:800;letter-spacing:.17em;max-width:80%}.px-story-card h3{font-size:clamp(27px,2.7vw,43px);line-height:1.04;letter-spacing:-.06em;margin:70px 0 17px}.px-story-card p{font-size:14px;line-height:1.75;color:#c6c0be;margin:0}
.px-website{padding:clamp(95px,12vw,165px) 0;background:var(--px-dark)}.px-website .container{max-width:1440px}.px-browser{display:block;overflow:hidden;border-radius:12px;border:1px solid #ffffff60;box-shadow:0 35px 100px #0008;color:#f6f4f0;background:#151515;transform-origin:center center;transition:box-shadow .4s,border-color .4s}.px-browser:hover{border-color:var(--px-accent);box-shadow:0 45px 110px #0009}.px-browser-top{height:52px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:12px;padding:0 22px;background:#222123;border-bottom:1px solid #ffffff2b;font-size:11px}.px-browser-dots{display:flex;gap:7px}.px-browser-dots i{width:9px;height:9px;border-radius:50%;background:var(--px-accent)}.px-browser-dots i:nth-child(2){opacity:.65}.px-browser-dots i:nth-child(3){opacity:.35}.px-browser-address{text-align:center;color:#dcd7d4}.px-browser-open{text-align:right;color:var(--px-accent);font-size:10px;font-weight:800;letter-spacing:.12em}.px-browser-screen{position:relative;overflow:hidden;max-height:670px;aspect-ratio:16/9}.px-browser-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}.px-browser:hover .px-browser-screen img{transform:scale(1.045);filter:brightness(.72)}.px-browser-screen>span{position:absolute;left:50%;top:50%;transform:translate(-50%,20px);opacity:0;padding:15px 22px;border-radius:50px;background:var(--px-accent);color:#111;font-size:12px;font-weight:850;letter-spacing:.1em;white-space:nowrap;transition:transform .35s,opacity .35s}.px-browser:hover .px-browser-screen>span{opacity:1;transform:translate(-50%,-50%)}.px-website-foot{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:#bcb6b3;font-size:11px;letter-spacing:.13em}.px-website-foot a{color:var(--px-accent);font-size:13px;letter-spacing:0}
.gtg-item figcaption strong{display:block;font-size:14px;font-weight:750;color:#f1f4f8;line-height:1.4}.gtg-item figcaption p{margin:6px 0 0;color:#b0bfd0;font-size:12px;line-height:1.6}
.px-media-ready{clip-path:inset(12% 0 12% 0 round 8px);filter:saturate(.6);transition:clip-path .95s var(--px-delay,0ms) cubic-bezier(.2,.7,.2,1),filter .95s var(--px-delay,0ms)}.px-media-ready.px-media-visible{clip-path:inset(0 0 0 0 round 0);filter:saturate(1)}
[data-px-reveal]{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}[data-px-reveal].px-visible{opacity:1;transform:none}
@keyframes px-rise{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}@keyframes px-enter-main{from{opacity:0;transform:translate(50px,120px) rotate(24deg)}to{opacity:1;transform:translate(0,0) rotate(8deg)}}@keyframes px-enter-left{from{opacity:0;transform:translate(-70px,150px) rotate(-26deg)}to{opacity:1;transform:translate(0,0) rotate(-12deg)}}@keyframes px-enter-right{from{opacity:0;transform:translate(100px,120px) rotate(28deg)}to{opacity:1;transform:translate(0,0) rotate(16deg)}}
@media(max-width:900px){.px-banner-copy{max-width:76%}.px-banner h1{font-size:clamp(62px,11vw,110px)}.px-story-grid{grid-template-columns:1fr 1fr}.px-story-card:last-child{grid-column:1/-1}.px-visual-1{right:6%;width:45%}.px-visual-2{right:38%;width:37%}.px-visual-3{display:none}}
@media(max-width:650px){body:has(.px-banner) .site-header{background:#0a0a0ad9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.px-banner{min-height:790px}.px-banner-inner{padding-top:118px;padding-bottom:30px}.px-banner-top span{max-width:150px;text-align:right;line-height:1.5}.px-banner-copy{max-width:100%;padding:0;margin:auto 0 36px}.px-banner h1{font-size:clamp(59px,13vw,82px);max-width:95%;position:relative;z-index:3}.px-work-banner h1{font-size:clamp(53px,12vw,70px)}.px-banner-copy>p{font-size:30px;max-width:300px}.px-banner-visuals{inset:16% 0 18% 0;opacity:.68}.px-banner-visuals:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,var(--px-dark) 88%)}.px-visual-1{width:48%;height:57%;right:7%;top:8%}.px-visual-2{width:37%;height:40%;right:52%;top:26%}.px-orbit-label{display:none}.px-banner-bottom{font-size:9px}.px-section-heading{grid-template-columns:1fr}.px-section-heading>span{grid-column:1}.px-section-heading h2{font-size:clamp(58px,13vw,79px)}.px-section-heading>p{margin:4px 0 0}.px-story-grid{grid-template-columns:1fr}.px-story-card:last-child{grid-column:auto}.px-story-card h3{margin-top:56px}.px-browser-top{height:42px;padding:0 10px;grid-template-columns:45px 1fr 26px}.px-browser-open{font-size:0}.px-browser-open::after{content:'↗';font-size:18px}.px-browser-dots{gap:4px}.px-browser-dots i{width:6px;height:6px}.px-browser-address{font-size:10px}.px-browser-screen{aspect-ratio:4/3}.px-website-foot{display:block;line-height:1.7}.px-website-foot a{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){.px-banner h1,.px-banner-copy>p,.px-visual{animation:none!important}.px-visual{transition:none!important}[data-px-reveal]{opacity:1;transform:none;transition:none}.px-browser,.px-browser-screen img,.px-browser-screen>span,.px-story-card,.px-media-ready{transition:none}.px-media-ready{clip-path:none;filter:none}}
@media(max-width:650px){.px-work-banner .px-banner-copy{max-width:100%}.px-work-banner .px-banner-copy>p{max-width:300px}}

/* The project interlude uses the same live curved type engine as Home. */
.px-ribbon{height:clamp(260px,24vw,380px);margin:0;border-color:color-mix(in srgb,var(--px-accent) 30%,transparent);background:var(--px-dark)}
.px-ribbon .ribbon-aura{background:radial-gradient(ellipse at var(--ribbon-x,50%) 55%,color-mix(in srgb,var(--px-accent) 28%,transparent),transparent 65%)}
.px-ribbon .ribbon-type-main{fill:var(--px-accent);text-shadow:0 0 38px color-mix(in srgb,var(--px-accent) 35%,transparent)}
.px-ribbon .ribbon-type-echo{fill:#f4f0e9;opacity:.82}
.px-ribbon .ribbon-rail{stroke:color-mix(in srgb,var(--px-accent) 32%,transparent)}

/* Keep Nike's supplied compositions at their native portrait ratio. */
.nk-frame-media{max-height:none}
.nk-frame .nk-frame-media img{display:block;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain;transform:none}
.nk-frame:nth-child(3) .nk-frame-media,.nk-frame:nth-child(6) .nk-frame-media{background:#c6c9c1}
.nk-frame:nth-child(3) .nk-frame-photo,.nk-frame:nth-child(6) .nk-frame-photo{background:#c6c9c1;padding:clamp(12px,2vw,27px)}
.nk-frame:nth-child(3) .nk-frame-photo img,.nk-frame:nth-child(6) .nk-frame-photo img{mix-blend-mode:multiply;filter:brightness(.95)}
.nk-frame:nth-child(3) .nk-frame-media::after,.nk-frame:nth-child(6) .nk-frame-media::after{background:#b8c0a8;mix-blend-mode:soft-light}
@media(max-width:650px){.px-ribbon{height:250px}}