.portfolio-story{isolation:isolate;border-block:1px solid var(--border);position:relative}.portfolio-backdrop{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:clip}.portfolio-viewport{pointer-events:none;height:100svh;position:sticky;top:0;overflow:hidden}.portfolio-viewport canvas{width:100%;height:100%;display:block}.portfolio-chapter{z-index:1;pointer-events:none;align-items:center;height:100svh;padding:6rem max(2rem,50vw - 600px);display:flex;position:relative}.portfolio-copy{pointer-events:auto;width:36%;max-width:27rem}.portfolio-eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.16em;margin-bottom:1.5rem;font-size:.7rem}.portfolio-copy h2{font-family:var(--font-display-family);text-transform:uppercase;font-size:clamp(1.7rem,3vw,3rem);font-weight:500;line-height:1.08}.portfolio-steps{min-height:11rem;margin-top:2.5rem;padding:0;list-style:none;position:relative}.portfolio-steps li{position:absolute;inset:0 0 auto}.portfolio-steps li:not(:first-child){clip-path:inset(100% 0 0)}.portfolio-steps span{color:var(--accent);font-size:.75rem}.portfolio-steps h3{margin-top:.5rem;font-size:1.3rem}.portfolio-steps p{color:var(--muted-foreground);margin-top:.7rem;font-size:.9rem;line-height:1.65}.portfolio-right{justify-content:flex-end}.portfolio-readout{border-block:1px solid var(--border);font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:1.5rem;margin:2rem 0;padding:1.5rem 0;display:flex}.portfolio-copy a{text-transform:uppercase;letter-spacing:.1em;align-items:center;gap:1rem;font-size:.75rem;display:inline-flex}.portfolio-copy a:focus-visible{outline:2px solid var(--accent);outline-offset:8px}.portfolio-fallback{display:none}.portfolio-story[data-unavailable] .portfolio-fallback{max-width:30%;font-size:.9rem;display:block;position:absolute;top:45%;left:50%}.portfolio-story[data-unavailable] .portfolio-chapter{height:auto;min-height:50svh}.portfolio-story[data-unavailable] .portfolio-steps li{clip-path:none;margin-bottom:1rem;position:static}@media (max-width:767px){.portfolio-chapter,.portfolio-right{justify-content:flex-start;align-items:flex-end;padding:5rem 1.5rem 2rem}.portfolio-copy{background:color-mix(in srgb,var(--background) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:100%;max-width:none;padding:1.1rem}.portfolio-copy h2{max-width:32rem;font-size:1.5rem}.portfolio-eyebrow{margin-bottom:.8rem;font-size:.6rem}.portfolio-steps{min-height:8rem;margin-top:1.2rem}.portfolio-steps h3{font-size:1.1rem}.portfolio-steps p{font-size:.8rem}.portfolio-readout{margin:1rem 0;padding:1rem 0}}@media (prefers-reduced-motion:reduce){.portfolio-chapter{height:auto;min-height:100svh}.portfolio-steps li{margin-bottom:1rem;position:static;clip-path:none!important;transform:none!important}}.portfolio-readout dt{text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);margin-bottom:.5rem;font-size:.65rem}.portfolio-readout dd{font-size:1.1rem}