.project-feature{--accent: var(--blue);--preview-bg: #fff;--row-bg: transparent;position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:start;gap:clamp(1.5rem,4vw,3.75rem);padding:clamp(1rem,3vw,1.75rem);margin-inline:calc(clamp(1rem,3vw,1.75rem)*-1);border-radius:clamp(22px,3vw,34px);background:var(--row-bg);isolation:isolate;@media(max-width:980px){grid-template-columns:minmax(0,1fr);gap:1.5rem;min-width:0}@media(max-width:860px){&:not(:first-child):before{content:"";position:absolute;top:calc(var(--project-list-gap, clamp(3rem, 7vw, 6rem)) / -2);left:clamp(1rem,3vw,1.75rem);right:clamp(1rem,3vw,1.75rem);height:2px;border-radius:999px;background:rgba(var(--dark-rgb),.16)}}&:nth-child(2n){.feature-content{order:0}.feature-media{order:1}@media(max-width:980px){.feature-content{order:1}.feature-media{order:0}}}.feature-media{position:relative;min-width:0}.project-preview{position:relative;display:block;width:100%;aspect-ratio:16 / 10;padding:0;border:0;border-radius:clamp(18px,2vw,26px);background:var(--preview-bg);background-color:color-mix(in srgb,var(--accent) 6%,#fff);line-height:0;color:inherit;overflow:hidden;box-shadow:0 18px 38px -29px rgba(var(--dark-rgb),.34);transition:box-shadow .5s var(--ease-expo);.project-preview-frame{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%;padding:clamp(1.2rem,2.6vw,1.9rem) clamp(3rem,6vw,4rem);box-sizing:border-box;border-radius:inherit;overflow:hidden;animation:projectMediaIn .46s var(--ease-expo) both;will-change:opacity,transform,filter;>:is(img,video,iframe,.project-video-poster){position:relative;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:0;max-width:100%;max-height:100%;width:auto;height:auto;border:0;border-radius:clamp(10px,1.4vw,16px);object-fit:contain;background:#ffffff8c;box-shadow:0 20px 42px -31px rgba(var(--dark-rgb),.42);transition:transform .6s var(--ease-expo),box-shadow .6s var(--ease-expo)}>:is(video,iframe,.project-video-poster){width:min(100%,44rem);aspect-ratio:16 / 9;background:#000}>.project-video-poster{display:grid;place-items:center;padding:0;overflow:hidden;color:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;line-height:0}>.project-video-poster img,>.project-video-poster .project-video-poster-fallback{width:100%;height:100%;object-fit:cover}>.project-video-poster .project-video-poster-fallback{display:block;background:#05070a}>.project-video-poster .project-video-play{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:clamp(3rem,7vw,4rem);height:clamp(3rem,7vw,4rem);border-radius:50%;background:rgba(var(--dark-rgb),.6);box-shadow:0 18px 36px -24px rgba(var(--dark-rgb),.9);transform:translate(-50%,-50%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}>.project-video-poster .project-video-play svg{display:block;transform:translate(.08em)}}&.project-preview-contain{.project-preview-frame{padding:clamp(1.2rem,4vw,3rem) clamp(3.6rem,7vw,5rem);overflow:hidden;>img{object-fit:contain}}}@media(max-width:560px){.project-preview-frame,&.project-preview-contain .project-preview-frame{padding:clamp(.9rem,4vw,1.4rem) 2.6rem}.project-carousel-controls{inset-inline:.5rem}.project-carousel-count{right:.7rem;bottom:.7rem}aspect-ratio:4 / 3}.project-preview-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:#fff;.project-preview-mark{position:relative;color:color-mix(in srgb,var(--accent) 60%,var(--dark));font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.4rem);font-weight:1000;letter-spacing:.02em;opacity:.55}}.project-carousel-controls{position:absolute;inset:50% .75rem auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.75rem;pointer-events:none;transform:translateY(-50%)}.project-carousel-button{display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;flex:none;border:0;background:transparent;appearance:none;-webkit-appearance:none;box-shadow:none;color:#fff;opacity:.86;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 0 1px rgba(var(--dark-rgb),.95)) drop-shadow(0 2px 5px rgba(var(--dark-rgb),.42));transition:opacity .25s var(--ease-expo),filter .25s var(--ease-expo),transform .25s var(--ease-spring);&:hover,&:focus-visible{background:transparent;box-shadow:none;filter:drop-shadow(0 0 1px rgba(var(--dark-rgb),1)) drop-shadow(0 4px 9px rgba(var(--dark-rgb),.5));opacity:1;transform:scale(1.08)}&:focus-visible{outline:none}& svg{display:block;width:1.35rem;height:1.35rem;stroke-width:2.35}}&:hover .project-carousel-button:not(:hover):not(:focus-visible),&:focus-within .project-carousel-button:not(:hover):not(:focus-visible){opacity:.82}@media(max-width:560px){.project-carousel-button{width:2rem;height:2rem}.project-carousel-button svg{width:1rem;height:1rem}}.project-carousel-count{position:absolute;right:clamp(1rem,3vw,1.35rem);bottom:1rem;z-index:5;padding:.32rem .55rem;border-radius:999px;background:#ffffffbd;color:color-mix(in srgb,var(--accent) 50%,var(--dark));font-family:var(--font-display);font-size:.72rem;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 14px 28px -22px rgba(var(--dark-rgb),.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}.feature-slider{display:flex;gap:.5rem;margin:.45rem -.35rem 0;padding:.4rem .35rem .25rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;&::-webkit-scrollbar{display:none}.project-thumb{display:grid;place-items:center;flex:none;scroll-snap-align:start;width:4.6rem;height:3.2rem;padding:0;overflow:hidden;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 13%,rgba(var(--dark-rgb),.08));border-radius:12px;appearance:none;-webkit-appearance:none;line-height:0;color:inherit;cursor:pointer;transition:transform .3s var(--ease-expo),border-color .3s var(--ease-expo),box-shadow .3s var(--ease-expo),opacity .3s var(--ease-expo);&:hover,&:focus-visible,&.project-thumb-active{transform:translateY(-2px);border-color:var(--accent)}&.project-thumb-active{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent);animation:projectThumbPop .34s var(--ease-spring) both}.project-thumb-frame{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;overflow:hidden}& img{display:block;width:100%;height:100%;object-fit:cover}.project-thumb-video{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;color:#fff;font-size:.7rem;line-height:1;text-indent:.08em;background:rgba(var(--dark-rgb),.48);transform:translate(-50%,-50%)}}}.feature-content{display:flex;flex-direction:column;position:relative;min-width:0;padding-top:clamp(.1rem,.4vw,.3rem);.project-tag{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.55rem;color:color-mix(in srgb,var(--accent) 72%,var(--dark));font-family:var(--font-display);font-size:.78rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;.project-tag-dot{width:.3rem;height:.3rem;border-radius:50%;background:currentColor;opacity:.55}}.project-name{margin-top:.55rem;color:var(--dark);font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:1000;line-height:1.05;letter-spacing:-.01em;.project-link{display:inline-flex;align-items:baseline;gap:.22em;color:inherit;text-decoration:none;transition:color .25s var(--ease-expo);.project-link-arrow{display:inline-grid;place-items:center;color:color-mix(in srgb,var(--accent) 24%,var(--gray-600));line-height:0;opacity:.32;transform:translate(-.08em,-.62em);transition:opacity .25s var(--ease-expo),transform .25s var(--ease-expo)}.project-link-arrow svg{display:block}&:hover,&:focus-visible{color:color-mix(in srgb,var(--accent) 70%,var(--dark));.project-link-arrow{opacity:.52;transform:translate(-.03em,-.68em)}}&:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 34%,transparent);outline-offset:.2rem;border-radius:.18em}}}.project-summary{margin-top:.7rem;max-width:42ch;color:var(--gray-600);font-family:var(--font-display);font-size:1rem;font-weight:800;line-height:1.65}.project-highlights{display:grid;gap:.7rem;margin:1.1rem 0 0;padding:0;list-style:none;color:color-mix(in srgb,var(--dark) 78%,var(--accent));font-family:var(--font-display);font-size:.88rem;font-weight:750;line-height:1.5;& li{position:relative;padding-left:1.05rem}& li:before{content:"";position:absolute;top:.63em;left:0;width:.42rem;height:.42rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--accent) 12%,transparent)}}.project-chips{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:1.4rem;padding:0;list-style:none;.project-chip{position:relative;display:inline-flex;align-items:center;padding:.32rem .62rem;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(var(--dark-rgb),.12));background:transparent;color:color-mix(in srgb,var(--accent) 40%,var(--dark));font-family:var(--font-display);font-size:.7rem;font-weight:800;line-height:1;letter-spacing:.06em;text-transform:uppercase;transition:border-color .22s var(--ease-expo),background .22s var(--ease-expo),color .22s var(--ease-expo)}.project-chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:color-mix(in srgb,var(--accent) 62%,var(--dark))}}}&:hover .project-preview{box-shadow:0 20px 42px -30px rgba(var(--dark-rgb),.38);.project-preview-frame>:is(img,video,iframe,.project-video-poster){transform:scale(1.025);box-shadow:0 22px 46px -33px rgba(var(--dark-rgb),.46)}}}@keyframes projectMediaIn{0%{opacity:0;filter:blur(10px) saturate(.92);transform:translate(18px) scale(1.018)}to{opacity:1;filter:blur(0) saturate(1);transform:translate(0) scale(1)}}@keyframes projectThumbPop{0%{transform:translateY(0) scale(.96)}70%{transform:translateY(-3px) scale(1.04)}to{transform:translateY(-2px) scale(1)}}.story-page{@media(max-width:600px){.story-meta{gap:.55rem 1.4rem}.story-meta-item{white-space:normal;line-height:1.4}}.story-break{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}.project-list{--project-list-gap: clamp(3rem, 7vw, 6rem);display:flex;flex-direction:column;gap:var(--project-list-gap)}}