.story-page{.story-break{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;.story-break-count{flex:none;color:var(--gray-600);font-family:var(--font-display);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;opacity:.7}}.project-list{display:flex;flex-direction:column;gap:clamp(3rem,7vw,6rem);.project-feature{--accent: var(--blue);--preview-bg: radial-gradient(125% 125% at 12% 8%, color-mix(in srgb, var(--accent) 24%, #fff), color-mix(in srgb, var(--accent) 6%, #fff) 72%);--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:720px){grid-template-columns:1fr;gap:1.5rem}&:nth-child(2n){.feature-content{order:0}.feature-media{order:1}@media(max-width:720px){.feature-content{order:1}.feature-media{order:0}}}.feature-media{position:relative;&:before{content:"";position:absolute;inset:10% -5% 12% 8%;z-index:-1;border-radius:34px;background:radial-gradient(70% 70% at 48% 40%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 68%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 62%);filter:blur(22px);opacity:.72}}.project-preview{position:relative;display:block;width:100%;aspect-ratio:16 / 10;padding:0;border:1px solid color-mix(in srgb,var(--accent) 13%,#fff);border-radius:clamp(18px,2vw,26px);background:var(--preview-bg);line-height:0;color:inherit;overflow:hidden;box-shadow:0 22px 52px -42px rgba(var(--dark-rgb),.32);transition:box-shadow .5s var(--ease-expo);&:before{content:"";position:absolute;inset:1px;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.78),transparent 32%),radial-gradient(85% 55% at 50% 100%,rgba(255,255,255,.48),transparent 70%);mix-blend-mode:soft-light}.project-preview-frame{position:relative;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;.project-preview-backdrop{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.4);filter:blur(44px) saturate(1.3) brightness(.95);opacity:.62;animation:projectBackdropIn .7s var(--ease-expo) both}&:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 110% at 50% 46%,transparent 38%,rgba(var(--dark-rgb),.28) 100%),linear-gradient(0deg,rgba(var(--dark-rgb),.16),transparent 46%)}>img,>video,>iframe{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:1px solid rgba(255,255,255,.88);border-radius:clamp(10px,1.4vw,16px);object-fit:contain;background:#ffffff8c;box-shadow:0 32px 66px -30px rgba(var(--dark-rgb),.64),0 14px 28px -18px rgba(var(--dark-rgb),.42);transition:transform .6s var(--ease-expo),box-shadow .6s var(--ease-expo)}>video,>iframe{width:min(100%,44rem);aspect-ratio:16 / 9;background:#000}}&.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-inline:3.1rem}.project-carousel-controls{inset-inline:.7rem}.project-carousel-button{width:2.25rem;height:2.25rem}}.project-preview-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(60% 80% at 78% -10%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 60%),radial-gradient(50% 70% at 12% 110%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),color-mix(in srgb,var(--accent) 8%,#fff);&:before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 75%);opacity:.5}.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% 1rem 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.6rem;height:2.6rem;padding:0;flex:none;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:#ffffffbd;color:color-mix(in srgb,var(--accent) 45%,var(--dark));box-shadow:0 14px 28px -22px rgba(var(--dark-rgb),.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;pointer-events:auto;transition:background .25s var(--ease-expo),transform .25s var(--ease-spring);&:hover,&:focus-visible{background:#ffffffeb;transform:scale(1.06)}& svg{display:block}}.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:thin;scrollbar-color:color-mix(in srgb,var(--accent) 40%,transparent) transparent;-webkit-overflow-scrolling:touch;&::-webkit-scrollbar{height:4px}&::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--accent) 35%,transparent)}.project-thumb{display:grid;place-items:center;flex:none;scroll-snap-align:start;width:4.6rem;height:3.2rem;padding:0;overflow:hidden;background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--accent) 9%,#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;padding-top:clamp(.1rem,.4vw,.3rem);.project-tag{display:inline-flex;align-items:center;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%,var(--gray-300, 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 26px 60px -44px rgba(var(--dark-rgb),.36);.project-preview-frame>img,.project-preview-frame>video,.project-preview-frame>iframe{transform:scale(1.025);box-shadow:0 30px 66px -34px rgba(var(--dark-rgb),.6),0 14px 30px -20px rgba(var(--dark-rgb),.36)}}}}}@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 projectBackdropIn{0%{opacity:0;transform:scale(1.5)}to{opacity:.62;transform:scale(1.4)}}@keyframes projectThumbPop{0%{transform:translateY(0) scale(.96)}70%{transform:translateY(-3px) scale(1.04)}to{transform:translateY(-2px) scale(1)}}