@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b0b0b;--panel:#181818;--muted:#aaa;--hair:#383838;--fg:#f4f4f4;--accent:#c01a3d;--accent-light:var(--accent);font-family:Manrope,Arial,sans-serif;font-size:16px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}body.locked{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent-light);outline-offset:5px}.skip{position:absolute;left:1rem;top:-4rem;z-index:40;background:var(--accent);color:#fff;padding:.7rem 1rem}.skip:focus{top:1rem}
.site-header{min-height:78px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(1.25rem,5vw,6rem);border-bottom:1px solid var(--hair);position:relative;z-index:5;background:var(--bg)}.brand{display:flex;gap:1.2rem;align-items:center}.brand-mark{font-size:1.55rem;letter-spacing:-.13em;font-weight:800;white-space:nowrap;padding-right:.13em}.brand-mark span{color:var(--accent-light);padding:0 .12em}.brand-name{font-size:.77rem;font-weight:700;letter-spacing:.15em;padding-left:1.2rem;border-left:1px solid var(--hair)}nav{display:flex;gap:clamp(1.3rem,3vw,3.5rem);align-items:center}nav a{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;transition:color .2s}nav a:hover,.text-link:hover,.social-link:hover,.footer-bottom a:hover{color:var(--accent-light)}.nav-contact{border-bottom:1px solid var(--accent);padding-bottom:.4rem}.nav-contact span{color:var(--accent-light);font-size:1rem;padding-left:.25rem}
.intro{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4rem clamp(2rem,6vw,6rem);padding:clamp(3.2rem,6vw,6rem) clamp(1.25rem,5vw,6rem) 0;min-height:685px;background:radial-gradient(ellipse at 76% 36%,color-mix(in srgb, var(--accent) 17%, #000) 0%,#101010 28%,#0b0b0b 65%);overflow:hidden}.ambient-canvas,.intro-glow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.ambient-canvas{z-index:-1}.intro-glow{z-index:-2;background:radial-gradient(circle at 74% 42%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 38%)}.intro-copy{position:relative;z-index:1;align-self:center;padding:0 0 1rem}.intro-index,.eyebrow,.work-count,.filter,.project-index,.project-brand,.project-kind,.hero-bottom,.hero-film-caption>span,.viewer-kicker,.viewer-bottom,.footer-bottom,.about-label,.intro-actions{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.07em}.intro-index{font-size:.77rem;color:#ddd;display:flex;align-items:center;gap:1rem;margin:0 0 2rem}.accent-line{display:block;width:2.3rem;height:2px;background:var(--accent-light)}.intro h1{font-size:clamp(4.7rem,8.7vw,10.5rem);font-weight:800;letter-spacing:-.09em;line-height:.86;margin:0;white-space:nowrap}.intro h1>span{display:block}.period{color:var(--accent-light)}.intro-statement{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.5;color:#ddd;font-weight:500;max-width:30rem;margin:2.25rem 0 2rem}.intro-actions{display:flex;align-items:center;gap:1.5rem 2rem;font-size:.76rem;font-weight:500}.primary-link{background:var(--accent);color:#fff;padding:1.05rem 1.25rem;display:inline-flex;align-items:center;gap:1.6rem;transition:background .2s,transform .2s}.primary-link:hover{background:var(--accent);transform:translateY(-2px)}.primary-link span{font-size:1.1rem}.text-link{border-bottom:1px solid var(--hair);padding:.75rem 0;transition:color .2s}
.hero-film{align-self:center;position:relative;z-index:1;display:block;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);background:#171717;color:var(--fg);padding:0;cursor:pointer;text-align:left;box-shadow:0 25px 70px #0009;width:100%;transform:rotate(1.5deg);transition:transform .5s,box-shadow .5s}.hero-film:hover,.hero-film:focus-visible{transform:rotate(0deg) translateY(-6px);box-shadow:0 32px 90px #000b}.hero-film-image{display:block;position:relative;aspect-ratio:1.35;overflow:hidden;background:#242424}.hero-film-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.67));pointer-events:none}.hero-film-image img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06) translate(var(--parallax-x,0px),var(--parallax-y,0px));transition:transform .2s}.hero-play{position:absolute;z-index:1;top:50%;left:50%;width:4.7rem;height:4.7rem;transform:translate(-50%,-50%);border:1px solid #ffffffa8;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.66);font-size:1rem;padding-left:.2rem;backdrop-filter:blur(7px);transition:background .25s,scale .25s}.hero-film:hover .hero-play{background:var(--accent);scale:1.08}.hero-film-caption{padding:1rem 1.2rem 1.25rem;display:block}.hero-film-caption>span{font-size:.63rem;color:#ddd;display:flex;gap:.6rem;align-items:center}.caption-line{height:1px;width:1.4rem;background:var(--accent-light)}.hero-film-caption strong{font-weight:700;font-size:clamp(1.15rem,2vw,1.7rem);letter-spacing:-.035em;display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}.hero-film-caption strong span{color:var(--accent-light)}
.hero-bottom{grid-column:1/-1;border-top:1px solid color-mix(in srgb,var(--accent) 33%,transparent);padding:1.4rem 0 1.6rem;display:flex;justify-content:space-between;align-items:center;gap:1.3rem;color:#ddd;font-size:.69rem}.hero-bottom>span:first-child{color:var(--accent-light);white-space:nowrap}.hero-bottom div{display:flex;align-items:center;gap:.75rem 1rem;flex-wrap:wrap}.hero-bottom i{width:3px;height:3px;border-radius:50%;background:var(--accent-light)}.hero-scroll{color:var(--muted);white-space:nowrap}
.work-section{padding:5rem clamp(1.25rem,5vw,6rem) 8rem;scroll-margin-top:1rem}.section-top{border-top:1px solid var(--hair);padding:2rem 0 2.4rem;display:flex;align-items:end;justify-content:space-between;gap:2rem}.eyebrow{font-size:.76rem;color:var(--accent-light)}.section-top h2{font-size:clamp(2.55rem,5.1vw,5rem);letter-spacing:-.07em;line-height:1.03;margin:.8rem 0 .8rem}.section-top p{font-size:1rem;line-height:1.5;color:var(--muted);margin:0}.work-count{font-size:.75rem;color:var(--muted);padding-bottom:.5rem;white-space:nowrap}.filter-bar{display:flex;gap:.15rem;margin:0 0 2.1rem;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:thin}.filter{border:0;background:none;color:var(--muted);padding:.9rem 1rem 1rem;white-space:nowrap;cursor:pointer;font-size:.76rem;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}.filter:first-child{padding-left:.2rem}.filter:hover{color:var(--fg)}.filter.active{color:var(--fg);border-color:var(--accent-light)}.filter span{opacity:.65;padding-left:.25rem;font-size:.7rem}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.9rem 1.5rem}.project-card{min-width:0}.project-card.featured{grid-column:span 2}.project-trigger{display:block;width:100%;border:0;padding:0;background:none;text-align:left;color:inherit;cursor:pointer}.project-media{aspect-ratio:16/10;background:var(--panel);position:relative;overflow:hidden;display:block;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}.project-card.featured .project-media{aspect-ratio:2.2}.project-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s;filter:saturate(.94)}.project-trigger:hover .project-media img,.project-trigger:focus-visible .project-media img{transform:scale(1.045);filter:saturate(1.08)}.project-media:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.3));pointer-events:none}.play{position:absolute;bottom:1.3rem;right:1.3rem;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:#161616;z-index:1;transition:transform .25s,background .25s}.project-trigger:hover .play{transform:scale(1.12);background:var(--accent-light)}.play svg{width:1rem;height:1rem;margin-left:.16rem}.project-index{position:absolute;top:1.2rem;left:1.2rem;z-index:1;color:white;background:rgba(0,0,0,.7);padding:.45rem .58rem;font-size:.67rem}.project-info{display:flex;justify-content:space-between;align-items:start;gap:1rem;padding-top:1rem}.project-copy{min-width:0}.project-brand{font-size:.67rem;color:var(--accent-light);display:block;margin-bottom:.55rem}.project-brand span{color:#999;padding:0 .2rem}.project-title{display:block;font-size:clamp(1.2rem,2vw,1.8rem);letter-spacing:-.035em;font-weight:700;line-height:1.22}.project-card.featured .project-title{font-size:clamp(1.55rem,2.65vw,2.5rem)}.project-kind{display:block;font-size:.66rem;color:var(--muted);margin:.55rem 0 0}.project-arrow{color:var(--accent-light);font-size:1.5rem;line-height:1;transition:transform .2s}.project-trigger:hover .project-arrow{transform:translate(3px,-3px)}.project-card.portrait .project-media,.project-card.square .project-media{aspect-ratio:16/11}.project-card.portrait .project-media img{object-fit:contain;background:radial-gradient(circle,#242424,#181818)}
.load-more{display:block;margin:4.5rem auto 0;border:1px solid var(--hair);background:transparent;color:var(--fg);font-family:'DM Mono',monospace;font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;padding:1.15rem 1.6rem;cursor:pointer;transition:border-color .2s,color .2s}.load-more:hover{border-color:var(--accent-light);color:var(--accent-light)}.catalog-note{border-left:2px solid var(--accent);padding:.8rem 1rem;color:var(--muted)}.catalog-note a{color:var(--fg);text-decoration:underline}.work-section [hidden],.viewer [hidden]{display:none!important}
.about-section{padding:6rem clamp(1.25rem,5vw,6rem) 7rem;background:#171717;display:grid;grid-template-columns:1fr 2fr;gap:3rem}.about-label{display:flex;flex-direction:column;gap:2rem}.about-coordinate{font-size:.68rem;line-height:1.7;color:#999}.about-content{max-width:870px}.about-content h2{font-size:clamp(2.8rem,6vw,6rem);letter-spacing:-.07em;line-height:1.05;margin:0 0 2.5rem}.about-content h2 em{font-style:normal;color:var(--accent-light)}.about-content p{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.7;max-width:760px;color:#ddd;margin:0 0 1.25rem}.about-links{display:flex;gap:1rem 3rem;align-items:center;flex-wrap:wrap;margin-top:2.75rem}.email-link{display:inline-flex;align-items:center;gap:1.5rem;border-bottom:1px solid var(--accent);padding:0 0 .75rem;font-weight:700;font-size:1.02rem;transition:color .2s}.email-link:hover{color:var(--accent-light)}.email-link span{color:var(--accent-light);font-size:1.35rem}.social-link{font-family:'DM Mono',monospace;font-size:.8rem;border-bottom:1px solid var(--hair);padding-bottom:.75rem;transition:color .2s}
footer{padding:3.8rem clamp(1.25rem,5vw,6rem) 2rem}.footer-name{font-size:clamp(3rem,9.3vw,9rem);font-weight:800;letter-spacing:-.095em;line-height:1;white-space:nowrap}.footer-bottom{border-top:1px solid var(--hair);margin-top:3.2rem;padding-top:1.25rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.7rem}.footer-bottom a{color:var(--fg);transition:color .2s}
.viewer{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:1.25rem}.viewer.open{display:flex}.viewer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.94)}.viewer-panel{position:relative;z-index:1;width:min(1180px,100%);max-height:calc(100vh - 2.5rem);overflow:auto;background:#1b1b1b;padding:1.2rem 1.2rem 1rem;box-shadow:0 20px 100px #0009}.viewer-top{display:flex;justify-content:space-between;align-items:start;gap:2rem;margin:0 0 1rem}.viewer-kicker{font-size:.68rem;color:var(--accent-light)}.viewer-top h2{font-size:clamp(1.25rem,2.5vw,2rem);letter-spacing:-.04em;margin:.4rem 0 0}.viewer-close{border:0;background:none;color:var(--fg);cursor:pointer;font-family:'DM Mono',monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;padding:.3rem}.viewer-close span{font-family:Manrope,sans-serif;font-size:1.7rem;vertical-align:middle;line-height:0;padding-left:.45rem}.viewer video{width:100%;max-height:72vh;display:block;background:#000;aspect-ratio:16/9}.viewer iframe{width:100%;aspect-ratio:16/9;border:0;background:#000;display:block}.viewer-bottom{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.68rem;padding-top:.8rem}.viewer-bottom a{color:var(--fg);text-decoration:underline;text-underline-offset:.25em}.viewer-bottom a:hover{color:var(--accent-light)}.viewer.portrait-film video{width:auto;max-width:100%;height:72vh;max-height:72vh;aspect-ratio:9/16;margin:0 auto}
@media(max-width:1050px){.intro{gap:2rem;min-height:610px}.hero-bottom{flex-wrap:wrap}.hero-scroll{display:none}.intro h1{font-size:clamp(4.2rem,8.6vw,7rem)}}
@media(max-width:760px){.site-header{min-height:68px}.intro{grid-template-columns:1fr;gap:2.3rem;min-height:0;padding-top:4rem}.intro-copy{padding-bottom:0}.intro h1{font-size:clamp(4.65rem,13vw,7.5rem)}.intro-statement{margin:1.7rem 0}.hero-film{max-width:590px;justify-self:center}.hero-film-image{aspect-ratio:16/9}.hero-bottom{grid-column:1;padding:1.2rem 0 1.4rem}.hero-bottom>span:first-child{width:100%}.work-section{padding-top:3.5rem}.about-section{grid-template-columns:1fr;gap:2rem}.about-coordinate{display:none}.project-grid{gap:2.7rem 1.1rem}}
@media(max-width:600px){.site-header{padding:0 1.2rem}.brand-name{display:none}nav{gap:1.1rem}nav a{font-size:.72rem}.intro{padding:3rem 1.2rem 0;gap:2.2rem}.intro-index{font-size:.65rem;margin-bottom:1.5rem}.accent-line{width:1.5rem}.intro h1{font-size:clamp(4.15rem,16vw,6rem)}.intro-statement{font-size:1.02rem;max-width:22rem}.intro-actions{font-size:.69rem;gap:1.2rem}.primary-link{padding:.95rem 1rem;gap:1rem}.hero-film-image{aspect-ratio:16/10}.hero-play{width:3.5rem;height:3.5rem}.hero-bottom{font-size:.62rem;gap:.7rem}.hero-bottom div{gap:.5rem .7rem;line-height:1.7}.work-section{padding:3.5rem 1.2rem 5rem}.section-top{padding-top:1.5rem;align-items:start;flex-direction:column;gap:.75rem}.section-top h2{font-size:2.6rem}.section-top p{font-size:.95rem}.work-count{font-size:.68rem}.filter{padding:.8rem .85rem;font-size:.7rem}.project-grid{grid-template-columns:1fr;gap:2.5rem}.project-card.featured{grid-column:auto}.project-card.featured .project-media{aspect-ratio:16/10}.project-card.portrait .project-media{aspect-ratio:16/11}.project-title,.project-card.featured .project-title{font-size:1.35rem}.play{width:2.8rem;height:2.8rem;bottom:.9rem;right:.9rem}.project-index{top:.9rem;left:.9rem}.about-section{padding:4rem 1.2rem 5rem}.about-content h2{font-size:clamp(2.8rem,11vw,4.5rem)}.about-content p{font-size:1.05rem}footer{padding:3rem 1.2rem 2rem}.footer-name{font-size:clamp(2.65rem,10vw,4.6rem)}.footer-bottom{line-height:1.7}.viewer{padding:.5rem}.viewer-panel{padding:.75rem;max-height:calc(100vh - 1rem)}}
@media(prefers-reduced-motion:no-preference){.js-ready:not(.entered) .intro-index,.js-ready:not(.entered) .intro h1>span,.js-ready:not(.entered) .intro-statement,.js-ready:not(.entered) .intro-actions,.js-ready:not(.entered) .hero-film{opacity:0;transform:translateY(22px)}.entered .intro-index{animation:rise .8s .05s both}.entered .intro h1>span:first-child{animation:rise .85s .12s both}.entered .intro h1>span:last-child{animation:rise .85s .22s both}.entered .intro-statement{animation:rise .85s .32s both}.entered .intro-actions{animation:rise .85s .4s both}.entered .hero-film{animation:film-enter .9s .28s both}@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes film-enter{from{opacity:0;transform:translateY(25px) rotate(1.5deg)}to{opacity:1;transform:translateY(0) rotate(1.5deg)}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.hero-film,.hero-film:hover{transform:none}.hero-film-image img{transform:none}}
@media(prefers-reduced-motion:no-preference){@keyframes film-enter{from{opacity:0}to{opacity:1}}}

/* A deeper red, echoed in the atmosphere and interactive details. */
.intro{background:radial-gradient(ellipse at 76% 36%,color-mix(in srgb, var(--accent) 17%, #000) 0%,#111 28%,#0b0b0b 65%)}
.intro-glow{background:radial-gradient(circle at 74% 42%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%)}
.hero-film{border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.hero-film-caption>span{color:#ddd}
.hero-bottom{border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.primary-link:hover{background:var(--accent)}

/* The interface moves too: every film is a small, responsive surface. */
.brand-mark span{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-mark span{transform:rotate(-22deg) scale(1.22)}
nav a,.filter,.load-more,.text-link,.email-link,.social-link,.viewer-close{
  transition:color .25s,border-color .25s,background .25s,transform .32s cubic-bezier(.2,.8,.2,1)
}
nav a:hover,.filter:hover,.filter:focus-visible,.text-link:hover,.social-link:hover,
.email-link:hover,.viewer-close:hover{transform:translateY(-3px)}
.filter.active:hover{transform:translateY(-2px)}
.load-more:hover,.load-more:focus-visible{transform:translateY(-5px) scale(1.025)}
.project-trigger{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.project-trigger:hover,.project-trigger:focus-visible{transform:translateY(-5px)}
.project-card.will-reveal{
  opacity:0;transform:translateY(20px) scale(.985);
  transition:opacity .7s ease,transform .75s cubic-bezier(.2,.75,.2,1);
  transition-delay:var(--reveal-delay,0ms)
}
.project-card.will-reveal.is-visible{opacity:1;transform:none}
.accent-line{position:relative}
.accent-line:after{content:"";position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--accent-light);box-shadow:0 0 12px var(--accent-light)}
.hero-play:after{content:"";position:absolute;inset:-9px;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);border-radius:50%;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .accent-line:after{animation:line-travel 2.8s ease-in-out infinite alternate}
  .hero-play:after{animation:play-breathe 2.8s ease-in-out infinite}
  @keyframes line-travel{from{transform:translateX(0);opacity:.5}to{transform:translateX(2rem);opacity:1}}
  @keyframes play-breathe{0%,100%{transform:scale(.94);opacity:.35}50%{transform:scale(1.14);opacity:.75}}
}

/* Enough career context to place the work without turning the page into a CV. */
.experience{margin-top:3rem;border-top:1px solid color-mix(in srgb,var(--accent) 36%,transparent)}
.experience-heading{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0 .35rem;color:var(--accent-light);font:500 .73rem 'DM Mono',monospace;letter-spacing:.08em}
.experience-heading span:last-child{color:#aaa}
.experience-list{list-style:none;margin:0;padding:0}
.experience-list li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:start;gap:1.5rem;padding:1.15rem 0 1.25rem;border-bottom:1px solid var(--hair)}
.experience-list li>div{min-width:0;width:100%}
.experience-list li:after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--accent-light);transition:width .5s cubic-bezier(.2,.75,.2,1)}
.experience-list li:hover:after{width:100%}
.experience-list strong{display:block;font-size:1.02rem;font-weight:700;line-height:1.35}
.experience-list li>div>span{display:block;margin-top:.38rem;color:var(--muted);font-size:.82rem;line-height:1.45}
.experience-list time{white-space:nowrap;color:#bbb;font:400 .7rem 'DM Mono',monospace;letter-spacing:.04em;padding-top:.2rem}
@media(max-width:600px){
  .experience-heading{font-size:.66rem}
  .experience-list li{gap:.6rem}
  .experience-list strong{font-size:.96rem}
  .experience-list li>div>span{font-size:.77rem}
  .experience-list time{font-size:.62rem}
}
@media(max-width:390px){.experience-list li{grid-template-columns:1fr;gap:.4rem}.experience-list time{grid-row:1}}
@media(prefers-reduced-motion:reduce){.project-card.will-reveal{opacity:1;transform:none}}

/* Red is the site signature, from the first frame through the player. */
:root{--accent:#c01a3d;--accent-light:var(--accent);--hair:#414141;--panel:#1b1b1b}
.site-header{border-bottom-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.brand{gap:.9rem}.brand-mark{font-size:1.45rem}.brand-name{font-size:1rem;font-weight:800;letter-spacing:.035em;line-height:1.1;padding-left:1rem}
.intro{background:radial-gradient(ellipse at 77% 37%,color-mix(in srgb, var(--accent) 23%, #000) 0%,#131313 33%,#0b0b0b 73%)}
.intro-glow{background:radial-gradient(circle at 74% 42%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 40%)}
.hero-film{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}.hero-film-caption>span{color:#ddd}.hero-bottom{border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.primary-link:hover{background:var(--accent)}
.hero-bottom{align-items:flex-start}.hero-bottom div{line-height:1.8;max-width:66rem}.hero-bottom i{flex:none}
.ambient-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:2;opacity:1;pointer-events:none}
.site-header,main,footer{position:relative;z-index:1}
.intro-copy,.hero-film,.hero-bottom,.project-trigger,.about-content{position:relative}
.project-brand,.project-kind,.project-index,.work-count{font-size:max(.75rem,12px)}
.hero-film-caption>span,.hero-bottom,.footer-bottom,.viewer-bottom{font-size:max(.75rem,12px)}
.filter{font-size:.84rem}.filter span{font-size:.73rem}
.award-pill{display:block;width:fit-content;margin-top:.8rem;padding:.48rem .65rem;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb, var(--accent) 19%, #000);color:#fff;line-height:1.45;font-size:.7rem;letter-spacing:.015em;text-transform:none}
.viewer-variants{display:flex;gap:.5rem;overflow-x:auto;padding:0 0 .9rem;scrollbar-width:thin}
.viewer-variants[hidden],.viewer-awards[hidden]{display:none}
.variant-choice{border:1px solid color-mix(in srgb,var(--accent) 31%,transparent);background:#212121;color:#ddd;padding:.66rem .82rem;white-space:nowrap;cursor:pointer;font:500 .76rem 'DM Mono',monospace;transition:background .2s,border-color .2s,transform .2s}
.variant-choice:hover{transform:translateY(-2px);border-color:var(--accent-light)}
.variant-choice[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}
.viewer-awards{border-top:1px solid color-mix(in srgb,var(--accent) 31%,transparent);margin-top:1rem;padding-top:1rem;display:grid;gap:.55rem;color:#ddd;font-size:.82rem;line-height:1.55}
.viewer-awards strong{font-size:.72rem;font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.09em;color:var(--accent-light)}
.award-sources{display:flex;gap:1.2rem;flex-wrap:wrap}
.award-sources a{text-decoration:underline;text-underline-offset:.22em;color:#fff}
.viewer-panel{background:#191919}.viewer-bottom{align-items:center}
.about-section{background:#171717}
@media(max-width:600px){.brand-mark{display:none}.brand-name{border:0;padding:0;display:block;font-size:.86rem;letter-spacing:.025em}.hero-bottom div{font-size:.69rem}.hero-bottom>span:first-child{font-size:.68rem}.site-header nav{gap:.75rem}.site-header nav a{font-size:.65rem}.award-pill{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.ambient-canvas{display:none}}

/* One chromatic ink throughout the interface; the remaining tones are neutral. */
:root{--accent:#c01a3d;--accent-light:var(--accent);--bg:#0b0b0b;--fg:#f4f4f4;--panel:#1b1b1b;--hair:#414141;--muted:#aaa}
::selection{background:var(--accent);color:#fff}
.intro{background:radial-gradient(ellipse at 77% 37%,color-mix(in srgb,var(--accent) 23%,#000) 0%,#131313 34%,var(--bg) 73%)}
.primary-link:hover{background:var(--accent);filter:brightness(.85)}
.site-header{min-height:88px;border-bottom-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.brand{gap:.7rem;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:2.5rem;height:2.75rem;padding:0;flex:none}
.brand-mark svg{width:100%;height:100%;fill:none;stroke:none;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-mark svg{transform:translateX(2px)}
.brand-name{border:0;padding:0;font:800 clamp(1rem,1.45vw,1.32rem)/1 Syne,Arial,sans-serif;letter-spacing:-.045em}
.brand-name:after{content:"";display:block;width:2.35rem;height:2px;margin-top:.37rem;background:var(--accent);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-name:after{width:100%}

/* The compact speed graph is a real Bezier path with a travelling playhead. */
.speed-graph{position:relative;display:inline-block;width:78px;height:30px;flex:none;vertical-align:middle}
.speed-graph svg{width:100%;height:100%;overflow:visible}
.speed-graph path{fill:none;stroke-width:1.1}
.speed-graph .graph-axis{stroke:color-mix(in srgb,var(--accent) 25%,transparent)}
.speed-graph .graph-curve{stroke:var(--accent);stroke-width:1.65}
.speed-graph .graph-handles{stroke:color-mix(in srgb,var(--accent) 55%,transparent)}
.speed-graph circle{fill:var(--accent)}
.speed-dot{position:absolute;top:0;left:0;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 65%,transparent);offset-path:path("M3 25 C22 25 20 5 39 5 S57 25 75 25");offset-rotate:0deg;offset-distance:0%}
@media(prefers-reduced-motion:no-preference){.speed-dot{animation:speed-travel 3.4s cubic-bezier(.55,0,.45,1) infinite alternate}@keyframes speed-travel{to{offset-distance:100%}}}

/* Three columns keep the brand copy centred on the page, not just the free space. */
.hero-bottom{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(0,62rem) minmax(9rem,1fr);align-items:center;gap:1.25rem;min-height:9rem;padding:1.35rem 0;border-top-color:color-mix(in srgb,var(--accent) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.hero-bottom .brands-label{align-self:center;justify-self:start;line-height:1.55;white-space:normal;color:var(--accent)}
.hero-bottom .brands-list{display:flex;align-items:center;align-content:center;justify-content:center;flex-wrap:wrap;gap:.55rem 1.2rem;max-width:none;line-height:1.6;text-align:center}
.brands-list span{display:inline-block;white-space:nowrap}
.brands-list > span:nth-child(3n):after{content:"·";padding-left:1.15rem;color:var(--accent)}

/* Crop the embedded players by two pixels so their source edge cannot leak. */
.viewer-media{position:relative;width:min(100%,128vh);aspect-ratio:16/9;margin:auto;background:#000;overflow:hidden;isolation:isolate}
.viewer-media video,.viewer-media iframe{position:absolute;top:-1px;left:-2px;width:calc(100% + 4px);height:calc(100% + 2px);max-height:none;aspect-ratio:auto;margin:0;border:0;outline:0;background:#000;display:block;object-fit:cover}
.viewer.portrait-film .viewer-media{width:min(100%,40.5vh);aspect-ratio:9/16}
.viewer.portrait-film .viewer-media video,.viewer.portrait-film .viewer-media iframe{width:calc(100% + 4px);max-width:none;height:calc(100% + 2px);max-height:none;aspect-ratio:auto;margin:0}

.filter-bar{scrollbar-width:none}.filter-bar::-webkit-scrollbar{display:none}
@media(max-width:1050px){.hero-bottom{grid-template-columns:minmax(8rem,1fr) minmax(0,1fr) minmax(8rem,1fr)}}
@media(max-width:760px){.hero-bottom{display:flex;flex-direction:column;justify-content:center;gap:.85rem;min-height:0}.hero-bottom .brands-label{align-self:center;justify-self:center}.hero-bottom .brands-list{max-width:100%;gap:.45rem .85rem}.hero-bottom>span:last-child{display:none}}
@media(max-width:600px){.site-header{min-height:70px}.brand-mark{display:grid;width:1.8rem;height:2rem}.brand-name{display:block;font-size:1.02rem;letter-spacing:-.055em}.brand-name:after{height:1.5px;margin-top:.27rem}.intro-index{gap:.55rem}.hero-bottom .brands-list{font-size:.67rem;line-height:1.5}.brands-list > span:nth-child(3n):after{padding-left:.8rem}.viewer-media{width:min(100%,128vh)}}
@media(max-width:390px){.site-header nav{gap:.5rem}.site-header nav a{font-size:.6rem}.brand{gap:.4rem}.brand-name{font-size:.91rem}}
@media(prefers-reduced-motion:reduce){.brand-mark svg,.brand-name:after{transition:none}.speed-dot{animation:none}}

/* The same expressive display face anchors the beginning and end. */
@font-face{font-family:Syne;font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/syne-800.ttf') format('truetype')}
.intro h1,.footer-name{font-family:Syne,Arial,sans-serif;font-weight:800;letter-spacing:-.055em;font-synthesis:none}
.intro h1{font-size:clamp(4.25rem,7.6vw,9.6rem);line-height:.9}
.footer-name{font-size:clamp(2.4rem,7.8vw,8rem);line-height:1.05}
.brand-mark .mark-curve{fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linecap:round}
.brand-mark .mark-start{fill:var(--accent)}
.brand-mark .mark-end{fill:var(--bg);stroke:var(--accent);stroke-width:2}
@media(max-width:1050px) and (min-width:761px){.intro h1{font-size:7.4vw}}
@media(max-width:760px){.intro h1{font-size:clamp(4rem,13vw,6.8rem)}.footer-name{font-size:8vw}}
@media(max-width:600px){.brand-name{font-size:.91rem}.intro h1{font-size:13.5vw}}
@media(max-width:390px){.brand-name{font-size:.8rem}}

@media(max-width:600px){.brand-name{line-height:.95}.brand-name .name-word{display:block}.brand-name:after{width:1.6rem}.brand-mark{width:2rem;height:2rem}}

/* The atmospheric layer belongs behind the content, with the same canvas
   visible through every section. Its own ink stays beneath text and images. */
body{background:radial-gradient(ellipse at 75% 30%,color-mix(in srgb,var(--accent) 16%,#000) 0%,#131313 34%,var(--bg) 74%) fixed}
.site-header{background:transparent}
.intro,.about-section{background:transparent}
.about-section{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ambient-canvas{z-index:0}
.site-header,main,footer{z-index:1}
.cursor-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:50;pointer-events:none;display:none}
@media(pointer:fine) and (prefers-reduced-motion:no-preference){
  html.custom-cursor:not(.viewer-active),html.custom-cursor:not(.viewer-active) *{cursor:none!important}
  html.custom-cursor:not(.viewer-active) .cursor-canvas{display:block}
}

/* A dark canvas, with the red light concentrated behind the hero film. */
body{background:var(--bg)}
.intro{background:radial-gradient(ellipse 47% 60% at 78% 39%,color-mix(in srgb,var(--accent) 22%,#000) 0%,transparent 100%)}
.intro-glow{display:none}
.section-top{border-top:0}
.brands-list > span:nth-child(3n):after{content:none}
.hero-bottom .brands-list{gap:.55rem .75rem}
.hero-bottom .brands-list > span:not(:last-child):after{content:"·";padding-left:.8rem;color:var(--accent)}
@media(max-width:600px){.hero-bottom .brands-list{gap:.42rem .55rem}.hero-bottom .brands-list > span:not(:last-child):after{padding-left:.55rem}}
.speed-graph .graph-handles{display:none}

/* Two contrasting faces form one identity throughout the page. */
@font-face{font-family:Bricolage;font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/bricolage-800.ttf') format('truetype')}
@font-face{font-family:Fraunces;font-style:italic;font-weight:900;font-display:swap;src:url('assets/fonts/fraunces-900i.ttf') format('truetype')}
.brand-name,.intro h1,.footer-name{font-family:Bricolage,Arial,sans-serif;font-weight:800;font-synthesis:none;letter-spacing:-.055em}
.brand-name .name-word:last-child,.intro h1>span:nth-child(2),.footer-name .name-surname{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:900;letter-spacing:-.075em}
.intro h1{font-size:clamp(5rem,10.4vw,11rem);line-height:.85}
.intro h1>span:nth-child(2){font-size:1.09em;line-height:1.05}
.brand-name{font-size:clamp(1.1rem,1.55vw,1.42rem);letter-spacing:-.035em}
.footer-name{font-size:clamp(4rem,10.5vw,10.2rem);line-height:1.06}
.footer-name .name-surname{font-size:1.04em}
@media(max-width:1050px) and (min-width:761px){.intro h1{font-size:9.6vw}}
@media(max-width:760px){.intro h1{font-size:clamp(4.2rem,14vw,7rem)}.footer-name{font-size:9vw}}
@media(max-width:600px){.brand-name{font-size:.98rem}.intro h1{font-size:clamp(4.2rem,14vw,6rem)}}
@media(max-width:390px){.brand-name{font-size:.86rem}}

/* One preview exists at a time and cannot steal card clicks or the cursor. */
.project-media .hover-preview,.hero-film-image .hover-preview{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;opacity:0;pointer-events:none;background:#000;transition:opacity .24s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.project-media .hover-preview.is-playing,.hero-film-image .hover-preview.is-playing{opacity:1}
.project-trigger:hover .project-media .hover-preview{transform:scale(1.045)}
.project-media .hover-preview--vimeo{width:112%;left:-6%}
.project-card.featured .hover-preview--vimeo{width:100%;left:0;height:125%;top:-12.5%}
.hero-film-image .hover-preview--vimeo{width:132%;left:-16%}
@media(prefers-reduced-motion:reduce){.hover-preview{display:none!important}}

/* Display lettering uses the thickest supplied body face, with a little extra
   horizontal breadth. The mono and editorial faces elsewhere stay intact. */
.brand-name,.intro h1,.footer-name{font-family:Manrope,Arial,sans-serif;font-weight:800;font-synthesis:none;letter-spacing:-.08em}
.brand-name .name-word:last-child,.intro h1>span:nth-child(2),.footer-name .name-surname{font-family:inherit;font-style:normal;font-weight:800;letter-spacing:inherit}
.intro h1{font-size:clamp(5rem,10.4vw,11rem);line-height:.87;-webkit-text-stroke:.025em currentColor}
.intro h1>span:nth-child(2){font-size:1em;line-height:1.02}
.footer-name{font-size:clamp(3.3rem,10vw,10rem);line-height:1.12;-webkit-text-stroke:.02em currentColor}
.footer-name .name-surname{font-size:1em}
.brand-name{font-size:clamp(1.1rem,1.55vw,1.42rem);-webkit-text-stroke:.018em currentColor}
@media(max-width:1050px) and (min-width:761px){.intro h1{font-size:9.6vw}}
@media(max-width:760px){.intro h1{font-size:clamp(4.2rem,14vw,7rem)}.footer-name{font-size:9vw}}
@media(max-width:600px){.brand-name{font-size:.98rem}.intro h1{font-size:clamp(4.2rem,14vw,6rem)}}
@media(max-width:390px){.brand-name{font-size:.86rem}}

/* A translucent glow lets the ambient canvas remain visible behind the hero. */
.intro{background:transparent}
.intro::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse 43% 58% at 80% 40%,color-mix(in srgb,var(--accent) 22%,transparent) 0%,color-mix(in srgb,var(--accent) 8%,transparent) 44%,transparent 100%);pointer-events:none}
.intro::after{content:"";position:absolute;z-index:0;inset:0;background:url('assets/grain.png') repeat;opacity:.11;mask-image:radial-gradient(ellipse 48% 70% at 80% 40%,#000 0%,transparent 100%);pointer-events:none}
.intro-copy,.hero-film,.hero-bottom{z-index:1}

/* Each film keeps its own original grading. */
.project-media .hover-preview,.hero-film-image .hover-preview{transition:opacity .13s linear,transform .65s cubic-bezier(.2,.7,.2,1)}

/* Portrait films breathe at their native shape; Social uses a compact masonry. */
.project-card.portrait .project-media{aspect-ratio:9/16;width:min(100%,25rem);margin-inline:auto;background:#101010}
.project-card.portrait .project-media img{object-fit:cover;background:#101010}
.project-card.portrait .project-info{width:min(100%,25rem);margin-inline:auto}
.project-grid.social-grid{display:block;columns:3;column-gap:1.4rem}
.project-grid.social-grid .project-card{display:inline-block;width:100%;break-inside:avoid;page-break-inside:avoid;margin:0 0 2.1rem;vertical-align:top}
.project-grid.social-grid .project-card .project-media,.project-grid.social-grid .project-card .project-info{width:100%}
.project-grid.social-grid .project-card.featured{grid-column:auto}
.viewer{z-index:60}
@media(max-width:850px){.project-grid.social-grid{columns:2}}
@media(max-width:600px){.project-grid.social-grid{columns:1}.project-grid.social-grid .project-card.portrait{max-width:26rem;display:block;margin-inline:auto}.project-card.portrait .project-media{aspect-ratio:9/16}}

/* The navigation toggle stays at the centre while the portfolio drops away. */
.site-header{position:relative;z-index:35}
.play-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:.65rem;background:var(--accent);color:#fff;border:1px solid var(--accent);padding:.75rem 1.05rem;min-height:2.7rem;font:500 .74rem 'DM Mono',monospace;letter-spacing:.07em;cursor:pointer;white-space:nowrap;transition:background .2s,transform .32s cubic-bezier(.2,.8,.2,1)}
.play-toggle:hover{background:color-mix(in srgb,var(--accent) 86%,#000);transform:translate(-50%,-57%)}
.play-toggle-icon{font-size:.6rem}
.playground-open .play-toggle-icon{transform:rotate(180deg)}
.site-header>.brand,.site-header>nav,main,footer{transition:transform .65s cubic-bezier(.22,.8,.2,1),opacity .45s ease}
.playground-open .site-header>.brand,.playground-open .site-header>nav,.playground-open main,.playground-open footer{transform:translateY(100vh);opacity:0;pointer-events:none}
.playground-open .ambient-canvas{opacity:0}
.playground-open .site-header{border-color:transparent;background:transparent}
.playground-open .play-toggle{position:fixed;top:2.65rem;left:50%}
.playground{position:fixed;inset:0;z-index:25;background:#0b0b0b;transform:translateY(-102%);transition:transform .65s cubic-bezier(.22,.8,.2,1);visibility:visible}
.playground.is-open{transform:translateY(0);visibility:visible}
.playground[hidden]{display:none!important}
.playground-scroll{height:100%;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth;scroll-snap-type:y proximity;outline:none}
.play-section{min-height:100dvh;scroll-snap-align:start;padding:7.5rem clamp(1.25rem,5vw,6rem) 3.5rem;display:flex;flex-direction:column;gap:2.5rem;border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:#0b0b0b}
.play-section:nth-child(even){background:#0e0e0e}
.play-heading{width:min(100%,80rem);margin-inline:auto}
.play-heading h2{font-size:clamp(2.7rem,5.5vw,5.8rem);line-height:1.08;letter-spacing:-.073em;margin:.5rem 0 .75rem}
.play-heading p{font-size:clamp(.95rem,1.25vw,1.12rem);color:#b9b9b9;line-height:1.6;margin:0}
.play-next{font:500 .72rem 'DM Mono',monospace;letter-spacing:.08em;color:var(--accent);margin:auto auto 0;padding-top:1rem}
.play-controls{display:flex;gap:1rem 2rem;align-items:center;flex-wrap:wrap}
.play-controls{width:min(100%,80rem);margin:0 auto}
.segmented{display:inline-flex;flex-wrap:wrap;gap:.25rem}
.segmented button,.play-action,.play-end{border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);padding:.75rem 1rem;background:transparent;color:#ddd;font:500 .76rem 'DM Mono',monospace;letter-spacing:.055em;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.segmented button:hover,.play-action:hover,.play-end:hover{border-color:var(--accent);transform:translateY(-2px)}
.segmented button.active{background:var(--accent);color:white}
.play-controls label{display:flex;align-items:center;gap:.8rem;white-space:nowrap;font:500 .75rem 'DM Mono',monospace;color:#ddd}
.play-controls output{color:var(--accent);min-width:3.5rem}
.playground input[type=range]{accent-color:var(--accent);cursor:pointer;width:clamp(6rem,10vw,10rem)}
.ease-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);align-items:stretch;width:min(100%,80rem);margin:0 auto}
.graph-card,.motion-stage{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:#101010;padding:clamp(1.25rem,2.5vw,2.4rem)}
.graph-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.graph-card .graph-label{align-self:flex-start}
#ease-graph{width:min(100%,440px);height:auto;touch-action:none;overflow:visible}
.graph-grid{fill:none;stroke:#ffffff12;stroke-width:1}.graph-baseline{fill:none;stroke:#ffffff35;stroke-width:1;stroke-dasharray:5 5}.graph-handles{fill:none;stroke:color-mix(in srgb,var(--accent) 53%,transparent);stroke-width:1.5}.graph-main{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}.graph-end{fill:#fff}.graph-handle{fill:var(--accent);stroke:#fff;stroke-width:2;cursor:grab;touch-action:none}.graph-handle:active{cursor:grabbing}.graph-handle:focus-visible{outline:none;stroke-width:5}
.graph-values{font:500 clamp(.8rem,1vw,1rem) 'DM Mono',monospace;letter-spacing:.035em;color:#fff;text-align:center}
.motion-stage{width:min(100%,80rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:clamp(1rem,3vw,2rem);padding:1.25rem clamp(1rem,2vw,2rem)}
.motion-lane{display:grid;grid-template-columns:6.5rem 1fr;align-items:center;gap:1rem;font:500 .7rem 'DM Mono',monospace;letter-spacing:.07em;color:#aaa}
.lane-track{height:4px;position:relative;background:#ffffff30}.lane-dot{position:absolute;top:50%;left:0;width:2.2rem;height:2.2rem;transform:translate(-50%,-50%);border:2px solid white;background:#111;border-radius:50%}.lane-dot.accent{background:var(--accent);border-color:var(--accent)}
.motion-stage .play-action{align-self:center}
.play-end{align-self:center;background:var(--accent);color:#fff;margin:2rem 0}
@media(max-width:1100px){.site-header nav{gap:1rem}.site-header>.brand{max-width:37%}.play-toggle{padding:.67rem .8rem}}
@media(max-width:850px){.ease-layout{grid-template-columns:1fr}.motion-stage{grid-template-columns:1fr;gap:1.5rem}.play-section{gap:1.8rem}}
@media(max-width:600px){.site-header>.brand{max-width:none}.site-header nav{gap:.65rem}.site-header nav a:nth-child(2){display:none}.play-toggle{padding:.55rem .7rem;min-height:2.3rem}.play-toggle-label{display:none}.play-toggle::after{content:"PLAY"}.playground-open .play-toggle::after{content:"BACK"}.play-section{padding:6.5rem 1.1rem 2.5rem}.play-heading h2{font-size:clamp(2.4rem,11vw,4rem)}.play-controls{gap:.8rem}.play-controls label{width:100%}.motion-lane{grid-template-columns:5.5rem 1fr}.graph-card,.motion-stage{padding:1rem}.footer-name{font-size:9vw}}
@media(prefers-reduced-motion:reduce){.site-header>.brand,.site-header>nav,main,footer,.playground{transition:none}.playground-scroll{scroll-behavior:auto}}

/* The control bar is the upper wall of the full-width particle field. */
.particle-lab{position:relative;isolation:isolate;min-height:100dvh;display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;touch-action:pan-y;background:#0b0b0b}
.particle-lab .lab-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.particle-lab .lab-heading{position:relative;z-index:1;width:min(calc(100% - 3rem),80rem);margin:clamp(2.5rem,7vh,6rem) auto 0;pointer-events:none}
.lab-heading .lab-word{display:inline-block;white-space:nowrap}
.lab-heading .lab-word:not(:last-child){margin-right:.14em}
.lab-heading .lab-letter{position:relative;display:inline-block;white-space:pre;pointer-events:auto;touch-action:none;cursor:grab;will-change:transform}
.lab-heading .lab-letter:active,.lab-spawn-text:active{cursor:grabbing}
.lab-heading p{width:fit-content;max-width:min(42rem,100%)}
.lab-heading h2{max-width:min(72rem,100%)}
.lab-heading .lab-letter.is-dynamic,.lab-spawn-text.is-dynamic{text-shadow:0 0 28px color-mix(in srgb,var(--accent) 30%,transparent)}
.particle-lab .lab-readout{position:relative;z-index:1;width:min(calc(100% - 3rem),80rem);margin:1.75rem auto 2rem;display:flex;justify-content:space-between;gap:1rem;color:var(--accent);font:500 .7rem 'DM Mono',monospace;letter-spacing:.08em;pointer-events:none}
.particle-lab .play-controls{position:relative;z-index:3;width:100%;margin:clamp(6.5rem,12vh,8rem) 0 0;padding:1rem clamp(1rem,4vw,4rem);border:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 70%,transparent);background:#0b0b0bf5;justify-content:center;gap:.7rem 1.25rem}
.particle-lab .play-controls button{white-space:nowrap}
.lab-text-control input{width:clamp(7rem,13vw,13rem);min-width:0;padding:.6rem .75rem;color:#fff;background:#151515;border:1px solid #666;font:500 .77rem 'DM Mono',monospace;outline:none}
.lab-text-control input:focus{border-color:var(--accent)}
.lab-text-control input::placeholder{color:#888}
.lab-spawn-text{position:absolute;z-index:1;max-width:min(55vw,34rem);font:800 clamp(1rem,2.5vw,2.2rem)/1.2 Manrope,sans-serif;color:#f4f4f4;letter-spacing:-.05em;touch-action:none;cursor:grab;overflow-wrap:anywhere}
.particle-lab .play-next{position:relative;z-index:2;margin:auto auto 1rem;padding-top:1rem}
.particle-lab .play-next.over-particles{color:#fff;text-shadow:0 1px 8px #0b0b0b}
.particle-lab.brush-active{touch-action:none}
.particle-lab .play-controls label{gap:.4rem}
.particle-lab .play-controls output{min-width:2.5rem}

/* Temporary site-wide HSB palette controls. */
.color-lab{border:1px solid color-mix(in srgb,var(--accent) 55%,#333);background:#101010;color:var(--fg);padding:clamp(1.15rem,2vw,2rem);font:500 .82rem 'DM Mono',monospace;letter-spacing:.04em}
.color-panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.7rem}
.color-lab-swatch{width:2rem;height:2rem;background:var(--accent);border:1px solid #fff9;box-shadow:0 0 25px color-mix(in srgb,var(--accent) 35%,transparent)}
.color-lab-controls{display:grid;gap:1.25rem}
.color-lab-controls label{display:grid;grid-template-columns:1.3rem minmax(0,1fr) 3.6rem;align-items:center;gap:.8rem}
.color-lab-controls input[type=range]{width:100%;margin:0;accent-color:var(--accent);cursor:pointer}
.color-lab-controls output{text-align:right;color:var(--accent)}
.color-lab-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff25;padding-top:1.2rem}
.color-lab-footer button{border:0;background:none;color:var(--fg);font:inherit;letter-spacing:inherit;cursor:pointer}
.color-lab-footer button:hover,.color-lab-footer button:focus-visible{color:var(--accent)}
.particle-lab .play-action[aria-pressed=true]{background:var(--accent);color:#fff}
@media(max-width:600px){.particle-lab .lab-heading{width:calc(100% - 2.2rem);margin-top:2rem}.particle-lab .lab-readout{width:calc(100% - 2.2rem);margin:.9rem auto 1rem;font-size:.62rem}.particle-lab .play-controls{margin-top:calc(5.8rem + env(safe-area-inset-top));padding:.8rem;gap:.55rem}.particle-lab .play-controls label{width:auto;font-size:.65rem}.particle-lab .play-controls .lab-text-control{width:100%}.lab-text-control input{width:100%}.particle-lab .play-controls button{font-size:.65rem;padding:.58rem .66rem}}

/* All Work is a compact mixed-format contact sheet; Selected keeps its film scale. */
.project-grid.all-grid{display:block;columns:5;column-gap:1rem}
.project-grid.all-grid .project-card{display:inline-block;width:100%;break-inside:avoid;margin:0 0 1.8rem;vertical-align:top}
.project-grid.all-grid .project-card.featured{grid-column:auto}
.project-grid.all-grid .project-card .project-media,.project-grid.all-grid .project-card .project-info{width:100%;margin-inline:0}
.project-grid.all-grid .project-card .project-media{aspect-ratio:16/10}
.project-grid.all-grid .project-card.portrait .project-media{aspect-ratio:9/16}
.project-grid.all-grid .project-card.square .project-media{aspect-ratio:1}
.project-grid.all-grid .project-title,.project-grid.all-grid .project-card.featured .project-title{font-size:1.08rem;line-height:1.28}
.project-grid.all-grid .project-info{padding-top:.7rem;gap:.35rem}
.project-grid.all-grid .project-brand{margin-bottom:.3rem}
.project-grid.all-grid .project-kind{margin-top:.3rem}
.project-grid.all-grid .project-index{top:.55rem;left:.55rem;padding:.3rem .4rem}
.project-grid.all-grid .play{width:2.35rem;height:2.35rem;right:.65rem;bottom:.65rem}
.project-grid.all-grid .play svg{width:.8rem;height:.8rem}
@media(max-width:1600px){.project-grid.all-grid{columns:4}}
@media(max-width:1050px){.project-grid.all-grid{columns:3}}
@media(max-width:680px){.project-grid.all-grid{columns:2;column-gap:.8rem}}
@media(max-width:430px){.project-grid.all-grid{columns:1}}

/* A vertical roulette mark stands apart from the compact category tabs. */
.filter-bar{align-items:flex-end;padding:1.5rem 1rem .35rem 0;overflow:visible}
.filter.roulette-filter{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.7rem;flex:none;width:10.25rem;min-height:10.5rem;margin-left:auto;margin-right:.55rem;padding:2rem .75rem .85rem;border:0;border-bottom:2px solid transparent;background:none;color:#fff;text-align:center;cursor:pointer}
.filter.roulette-filter::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 4.6rem at 50% 47%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 100%)}
.filter.roulette-filter:hover,.filter.roulette-filter:focus-visible{color:#fff;text-shadow:0 0 12px color-mix(in srgb,var(--accent) 75%,transparent)}
.filter.roulette-filter.active{color:#fff;border-bottom-color:var(--accent)}
.filter.roulette-filter span{padding-left:0;opacity:1;font-size:inherit}
.filter.roulette-filter .roulette-filter-label{display:block;font:800 1.25rem/.89 Manrope,Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase}
.filter.roulette-filter .roulette-filter-label span{display:block}
.filter.roulette-filter .roulette-wheel{position:relative;display:block;flex:none;width:3.6rem;height:3.6rem;border:4px solid color-mix(in srgb,var(--accent) 70%,#333);border-radius:50%;background:radial-gradient(circle,#171112 0 .35rem,#e8d9dd .38rem .45rem,transparent .48rem),repeating-conic-gradient(from -11.25deg,var(--accent) 0deg 22.5deg,#23191d 22.5deg 45deg);box-shadow:0 0 0 1px #372127,0 0 23px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.roulette-wheel:after{content:"";position:absolute;top:-.55rem;left:calc(50% - .24rem);width:0;height:0;border-left:.24rem solid transparent;border-right:.24rem solid transparent;border-top:.4rem solid var(--accent-light)}
.roulette-filter:hover .roulette-wheel{transform:rotate(45deg);box-shadow:0 0 0 1px var(--accent),0 0 23px color-mix(in srgb,var(--accent) 55%,transparent)}
.roulette-filter-orbit{position:absolute;inset:0;pointer-events:none}
.roulette-filter-orbit i{position:absolute;left:50%;top:50%;display:block;width:5px;height:5px;border-radius:50%;background:#ff5b7d;box-shadow:0 0 9px var(--accent-light);--orbit-radius:2.25rem;animation:roulette-electron 4.8s linear infinite}
.roulette-filter-orbit i:nth-child(2){width:3px;height:3px;--orbit-radius:2.65rem;--orbit-tilt:35deg;--orbit-squash:.62;animation-duration:6.2s;animation-direction:reverse;animation-delay:-1.7s}
.roulette-filter-orbit i:nth-child(3){width:4px;height:4px;--orbit-radius:2.12rem;--orbit-tilt:-35deg;--orbit-squash:.8;animation-duration:5.5s;animation-delay:-3.3s}
@keyframes roulette-electron{from{transform:translate(-50%,-50%) rotate(var(--orbit-tilt,0deg)) scaleY(var(--orbit-squash,1)) rotate(0deg) translateX(var(--orbit-radius))}to{transform:translate(-50%,-50%) rotate(var(--orbit-tilt,0deg)) scaleY(var(--orbit-squash,1)) rotate(360deg) translateX(var(--orbit-radius))}}
@media(prefers-reduced-motion:reduce){.roulette-filter-orbit i{animation:none;transform:translate(-50%,-50%) rotate(var(--orbit-tilt,0deg)) scaleY(var(--orbit-squash,1)) translateX(var(--orbit-radius))}.roulette-filter:hover .roulette-wheel{transform:none}}
@media(max-width:1000px){.filter-bar{overflow-x:auto;padding-top:2rem}}
.review-panel{border:1px solid color-mix(in srgb,var(--accent) 33%,transparent);background:rgba(10,10,10,.95);padding:clamp(1rem,2.5vw,2rem);position:relative;z-index:1}
.review-intro{display:flex;align-items:start;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--hair);padding-bottom:1.5rem}
.review-intro p{max-width:55rem;margin:.6rem 0 0;line-height:1.65;font-size:1rem;color:var(--fg)}
.review-intro strong{font:500 .8rem 'DM Mono',monospace;color:var(--accent-light);white-space:nowrap}
.review-toolbar{display:flex;align-items:end;gap:.8rem;flex-wrap:wrap;margin:1.25rem 0 1rem}
.review-toolbar label{display:flex;flex-direction:column;gap:.55rem;font:500 .72rem 'DM Mono',monospace;letter-spacing:.07em;color:var(--accent-light)}
.review-search-label{flex:2 1 18rem}.review-scope-label{flex:1 1 13rem}
.review-toolbar input,.review-toolbar select{width:100%;min-height:2.95rem;background:#121212;border:1px solid #424242;color:var(--fg);padding:.65rem .8rem;font:400 .9rem 'DM Mono',monospace;border-radius:0}
.review-toolbar input:focus,.review-toolbar select:focus{outline:2px solid var(--accent-light);outline-offset:2px}
.review-copy,.review-more{background:var(--accent);border:1px solid var(--accent);color:white;cursor:pointer;padding:.85rem 1rem;min-height:2.95rem;font:500 .78rem 'DM Mono',monospace;letter-spacing:.03em;transition:background .2s,transform .2s}
.review-copy:hover,.review-more:hover{background:color-mix(in srgb,var(--accent) 87%,#fff);transform:translateY(-2px)}
.review-status{font:.78rem 'DM Mono',monospace;color:var(--muted);margin:1.2rem 0 1.4rem;line-height:1.6}
.review-list{border-top:1px solid #373737}
.review-row{display:grid;grid-template-columns:2.2rem minmax(0,1fr) minmax(5rem,8rem) 4.5rem;align-items:center;gap:.6rem;padding:.78rem .4rem;border-bottom:1px solid #303030;transition:background .2s}
.review-row:hover{background:color-mix(in srgb,var(--accent) 5%,#151515)}.review-row.chosen{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.review-tick{display:grid;place-items:center;position:relative;width:2rem;height:2rem;cursor:pointer}
.review-tick input{appearance:none;position:absolute;inset:0;margin:0;border:1px solid #777;background:#141414;cursor:pointer}
.review-tick input:checked{border-color:var(--accent);background:var(--accent)}
.review-tick input:focus-visible{outline:2px solid white;outline-offset:3px}
.review-tick span{z-index:1;color:white;opacity:0;pointer-events:none;font-size:1rem}.review-tick input:checked+span{opacity:1}
.review-details{min-width:0}.review-details strong{font-size:.92rem;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.review-details>span{font:.7rem 'DM Mono',monospace;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.27rem}
.review-format{font:.7rem 'DM Mono',monospace;color:var(--muted);text-align:right;white-space:nowrap}.review-row>a{font:.74rem 'DM Mono',monospace;color:var(--accent-light);text-decoration:none;text-align:right}.review-row>a:hover{text-decoration:underline;color:white}
.review-more{display:block;margin:1.4rem auto .2rem;background:transparent;border-color:#777}
@media(max-width:680px){.filter.roulette-filter{margin-left:0}.review-intro{display:block}.review-intro strong{display:block;margin-top:1rem}.review-toolbar{align-items:stretch}.review-copy{width:100%}.review-row{grid-template-columns:2.2rem minmax(0,1fr) 3.3rem;gap:.35rem}.review-format{display:none}.review-details strong{font-size:.82rem}.review-row>a{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.review-copy,.review-more,.review-row{transition:none}.review-copy:hover,.review-more:hover{transform:none}}

/* The social archive reads as volume: six across on wide screens, with the
   first twenty curated above a stable mixed selection. */
.project-grid.social-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.15rem .9rem;align-items:start}
.project-grid.social-grid .project-card{display:block;width:auto;margin:0;min-width:0}
.project-grid.social-grid .project-card.square .project-media{aspect-ratio:1}
.project-grid.social-grid .project-title{font-size:1rem;line-height:1.28;overflow-wrap:anywhere}
.project-grid.social-grid .project-info{padding-top:.65rem;gap:.35rem}
.project-grid.social-grid .project-brand{margin-bottom:.32rem;font-size:.74rem;line-height:1.4}
.project-grid.social-grid .project-kind{margin-top:.3rem;font-size:.74rem}
.project-grid.social-grid .project-index{top:.48rem;left:.48rem;padding:.25rem .35rem}
.project-grid.social-grid .play{width:2.2rem;height:2.2rem;right:.55rem;bottom:.55rem}
.project-grid.social-grid .play svg{width:.75rem;height:.75rem}
.poster-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center;color:#f3f0ed;background:radial-gradient(circle at 60% 35%,#343034,#111 70%);font:700 clamp(.85rem,1.5vw,1.3rem)/1.25 Manrope,Arial,sans-serif;letter-spacing:-.04em}
.project-media img{position:relative;z-index:1}
.project-media img.poster-unavailable{display:none}
@media(max-width:1200px){.project-grid.social-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.project-grid.social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.project-grid.social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.project-grid.social-grid{grid-template-columns:1fr}.project-grid.social-grid .project-card.portrait{max-width:22rem;margin-inline:auto}}

/* Compact galleries flow independently down each column. */
.project-grid.social-grid .masonry-column{display:flex;flex-direction:column;gap:1.15rem;min-width:0}
.project-grid.social-grid .masonry-column .project-card{display:block;width:100%;margin:0;break-inside:avoid}
.project-grid.social-grid .masonry-column .project-card.featured{grid-column:auto}
.project-grid.social-grid .masonry-column .project-card.portrait .project-media{aspect-ratio:9/16}
.project-grid.social-grid .masonry-column .project-card.square .project-media{aspect-ratio:1}
.project-grid.experiment-grid .project-info{display:none}
.project-grid.experiment-grid .masonry-column{gap:.9rem}
.project-grid .play{display:none!important}
.brand-slot{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.3rem;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:1rem 1.25rem;margin:0 0 2rem;background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 13%,#151515),#151515 65%)}
.brand-slot[hidden]{display:none!important}
.slot-label{font:600 .7rem 'DM Mono',monospace;letter-spacing:.1em;color:var(--accent-light)}
.slot-window{min-width:12rem;flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.slot-name{display:inline-block;font:800 clamp(1.15rem,2.1vw,1.9rem)/1.25 Manrope,Arial,sans-serif;letter-spacing:-.055em;white-space:nowrap}
.slot-name.tick{animation:slot-tick .14s ease both}
@keyframes slot-tick{from{opacity:.25;transform:translateY(-55%) skewY(-3deg);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.slot-spin{border:1px solid var(--accent);padding:.75rem .9rem;background:var(--accent);color:white;font:600 .7rem 'DM Mono',monospace;letter-spacing:.06em;cursor:pointer}
.slot-spin:hover{background:var(--accent-light)}.slot-spin:disabled{opacity:.55;cursor:default}
@media(prefers-reduced-motion:reduce){.slot-name.tick{animation:none}}
.roulette-intro{position:relative;isolation:isolate;display:grid;place-items:center;min-height:clamp(27rem,65dvh,47rem);margin:0 0 2rem;text-align:center;background:radial-gradient(ellipse 42% 42% at 50% 50%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 100%)}
.roulette-intro[hidden]{display:none!important}.roulette-intro.is-spinning{visibility:hidden}
.roulette-intro-orbit{position:absolute;width:min(70vw,34rem);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent) 33%,transparent);border-radius:50%;pointer-events:none;animation:roulette-orbit 24s linear infinite}
.roulette-intro-orbit:before,.roulette-intro-orbit:after{content:"";position:absolute;inset:12%;border:1px solid color-mix(in srgb,var(--accent) 23%,transparent);border-radius:50%}
.roulette-intro-orbit:after{inset:27%;border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.roulette-intro-orbit span{position:absolute;width:.55rem;height:.55rem;background:var(--accent-light);transform:rotate(45deg);box-shadow:0 0 18px var(--accent);z-index:1}
.roulette-intro-orbit span:nth-child(1){top:12%;left:14%}.roulette-intro-orbit span:nth-child(2){bottom:16%;right:9%;width:.35rem;height:.35rem}.roulette-intro-orbit span:nth-child(3){top:24%;right:13%;width:.25rem;height:.25rem}
@keyframes roulette-orbit{to{transform:rotate(360deg)}}
.roulette-intro-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:3rem 1rem}
.roulette-intro-kicker{font:500 .72rem 'DM Mono',monospace;letter-spacing:.15em;color:var(--accent-light)}
.roulette-intro h3{font-size:clamp(3.4rem,8vw,7rem);font-weight:800;letter-spacing:-.085em;line-height:1;margin:1.1rem 0 .55rem}.roulette-intro h3 span{color:var(--accent-light)}
.roulette-intro p{color:var(--muted);margin:0 0 2rem;font-size:clamp(.9rem,1.5vw,1.1rem)}
.roulette-launch{display:inline-flex;align-items:center;justify-content:center;gap:1.3rem;min-width:min(19rem,85vw);min-height:4.5rem;padding:1rem 1.5rem;border:1px solid color-mix(in srgb,var(--accent) 70%,#fff);background:var(--accent);color:white;font:600 .88rem 'DM Mono',monospace;letter-spacing:.09em;cursor:pointer;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 13%,transparent),0 14px 45px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .25s,box-shadow .25s,background .25s}
.roulette-launch:hover,.roulette-launch:focus-visible{transform:translateY(-4px) scale(1.035);background:color-mix(in srgb,var(--accent) 88%,white);box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 18%,transparent),0 18px 60px color-mix(in srgb,var(--accent) 48%,transparent)}
.roulette-launch:active{transform:scale(.97)}.roulette-launch:disabled{cursor:default}.roulette-launch-icon{font-size:1.5rem;line-height:1;transition:transform .5s}.roulette-launch:hover .roulette-launch-icon{transform:rotate(130deg)}
@media(max-width:600px){.roulette-intro{min-height:60dvh}.roulette-intro-orbit{width:90vw}}
@media(prefers-reduced-motion:reduce){.roulette-intro-orbit{animation:none}.roulette-launch,.roulette-launch-icon{transition:none}}

/* Only the expressly selected copy responds to pointer dragging. */
.elastic-word{display:inline-block;position:relative;user-select:none;-webkit-user-select:none}
.elastic-word.is-held,.elastic-word.is-returning{will-change:transform}
.elastic-word.is-returning{transition:transform .98s cubic-bezier(.22,1.55,.32,1)}
@media(prefers-reduced-motion:reduce){.elastic-word.is-returning{transition:none}}
.intro{overflow:visible}
.hero-bottom{z-index:3}
.elastic-word.is-held,.elastic-word.is-returning{z-index:8}

/* Each experiment fills the viewport; wheel and touch scroll between them. */
.playground-scroll{scroll-snap-type:y proximity}
.play-section,.particle-lab{min-height:100dvh}
.particle-lab .play-controls{background:#0b0b0bf5}
.play-next{border:0;background:transparent;cursor:pointer}
.play-next:hover,.play-next:focus-visible{color:white}
.play-section-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin:1.5rem auto 0}
.play-section-actions .play-end{margin:0}
.play-end-quiet{background:transparent;border-color:#666}

.color-section{gap:clamp(1.6rem,3vw,2.8rem)}
.color-layout{display:grid;grid-template-columns:minmax(17rem,.83fr) minmax(20rem,1.17fr);gap:1.25rem;width:min(100%,80rem);margin:0 auto}
.color-space-demo,.bit-depth-demo{border:1px solid color-mix(in srgb,var(--accent) 40%,#333);background:#101010;padding:clamp(1.15rem,2vw,2rem)}
.color-space-demo p,.bit-depth-demo p{max-width:46rem;color:#bbb;line-height:1.55;font-size:.95rem;margin:.8rem 0 1.5rem}
.color-space-demo .eyebrow,.bit-depth-demo .eyebrow,.color-panel-heading .eyebrow{font-size:.74rem;color:var(--accent-light)}
.gamut-picker,.gamut-comparison{display:grid;gap:.7rem;font:600 .73rem 'DM Mono',monospace;letter-spacing:.05em}
.gamut-picker select,.play-controls select{background:#171717;color:#fff;border:1px solid #777;padding:.65rem .7rem;max-width:100%;font:inherit;cursor:pointer}
.gamut-comparison{margin-top:1.25rem;gap:.45rem}.gamut-comparison span{color:#bbb}
.color-space-demo .gamut-description{font-size:.79rem;margin:.8rem 0 1rem;color:#aaa}
.gamut-strip{height:2.5rem;border:1px solid #fff3;background:linear-gradient(90deg,#db3150,#ef853b,#34c693,#2864d8)}
@supports (color:color(display-p3 1 0 0)){
  .gamut-strip.srgb{background:linear-gradient(90deg,color(srgb 1 .07 .23),color(srgb 1 .58 .06),color(srgb .06 .88 .43),color(srgb .1 .23 1))}
  .gamut-strip.p3{background:linear-gradient(90deg,color(display-p3 1 .07 .23),color(display-p3 1 .58 .06),color(display-p3 .06 .88 .43),color(display-p3 .1 .23 1))}
  .gamut-strip.rec2020{background:linear-gradient(90deg,color(rec2020 1 .07 .23),color(rec2020 1 .58 .06),color(rec2020 .06 .88 .43),color(rec2020 .1 .23 1))}
}
.bit-depth-demo{grid-column:1/-1}
.bit-depth-demo h3,.pixel-panel h3{font-size:clamp(1.5rem,2vw,2.2rem);letter-spacing:-.045em;margin:.45rem 0 0}
.exposure-control{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;color:#ddd;font:600 .73rem 'DM Mono',monospace;margin:1.2rem 0}
.exposure-control input{flex:1 1 12rem;max-width:26rem}
.exposure-control output{color:var(--accent-light);min-width:6rem;text-align:right}
.depth-rows{display:grid;gap:.6rem}
.depth-row{display:grid;grid-template-columns:12rem minmax(0,1fr);align-items:center;gap:1rem}
.depth-row>div{display:grid;gap:.25rem}
.depth-row strong{font-size:.95rem}.depth-row span{font:400 .7rem 'DM Mono',monospace;color:#aaa}
.depth-row canvas{width:100%;height:4.75rem;border:1px solid #7776;display:block}
.bit-depth-demo .precision-note{font-size:.76rem;max-width:none;color:#999;margin:1rem 0 0}
.pixel-switch{grid-column:1/-1;justify-self:center;min-width:15rem;text-align:center}
.pixel-switch[aria-pressed=true]{background:var(--accent);color:white}
body.pixel-mode :is(.site-header,.intro-copy,.hero-film,.hero-bottom,.section-top,.filter-bar,.brand-slot,.project-card,.load-more,.about-label,.about-content,footer,.play-heading,.play-controls,.lab-readout,.play-next,.ease-layout,.speed-card,.color-layout,.camera-layout,.play-section-actions,.camera-section>.play-end){filter:url(#site-pixel-filter)}
body.pixel-mode :is(img,video,canvas){image-rendering:pixelated}
body.pixel-mode :is(.project-media,.hero-film-image,.primary-link,.play-action,.filter){border-radius:0}
.speed-card{min-width:0;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:#101010;padding:clamp(1.25rem,2.5vw,2.4rem);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}
.speed-card .eyebrow{align-self:flex-start}.speed-card svg{width:min(100%,440px);height:auto;touch-action:none;overflow:visible}
.speed-card p{font-size:.78rem;color:#aaa;margin:0;text-align:center}
.camera-layout{width:min(100%,86rem);margin:auto;display:grid;grid-template-columns:1fr;gap:1rem}
.camera-views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.camera-view,.camera-settings{border:1px solid #555;background:#101010;padding:1rem;min-width:0}
.camera-view span{font:600 .69rem 'DM Mono',monospace;letter-spacing:.07em;color:var(--accent-light)}.camera-view canvas{display:block;width:100%;height:auto;aspect-ratio:640/420;margin-top:1rem;background:#080808;touch-action:none;cursor:grab}.camera-view canvas:active{cursor:grabbing}
.camera-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem clamp(1rem,2vw,2rem);align-items:center}.camera-settings>.eyebrow{grid-column:1/-1}.camera-settings label{display:grid;grid-template-columns:1fr auto;gap:.25rem .4rem;font:600 .7rem 'DM Mono',monospace;color:#ccc}.camera-settings input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.camera-settings output{color:var(--accent-light)}.camera-settings small{grid-column:span 2;font-size:.7rem;color:#999;line-height:1.5}.camera-settings .play-action{justify-self:start}
.roulette-stage{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:transparent;color:#fff;text-align:center;opacity:0;transition:opacity .22s ease;touch-action:none}
.roulette-stage[hidden]{display:none}.roulette-stage.is-visible{opacity:1}
.roulette-stage-orbits{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;visibility:hidden}
.roulette-stage.is-reroll .roulette-stage-orbits{visibility:visible}
.roulette-stage-orbits span{position:absolute;width:min(70vw,34rem);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:50%;opacity:0}
.roulette-stage-orbits span:nth-child(2){width:min(54vw,26rem)}.roulette-stage-orbits span:nth-child(3){width:min(38vw,18rem)}
.roulette-stage.is-reroll .roulette-stage-orbits span{animation:roulette-ring-pop .76s cubic-bezier(.18,1.25,.28,1) both}
.roulette-stage.is-reroll .roulette-stage-orbits span:nth-child(2){animation-delay:.12s}.roulette-stage.is-reroll .roulette-stage-orbits span:nth-child(3){animation-delay:.24s}
.roulette-stage.is-final.is-reroll .roulette-stage-orbits span{animation:roulette-ring-finish .72s ease-out both;animation-delay:0s}
@keyframes roulette-ring-pop{from{opacity:0;transform:scale(.42)}65%{opacity:.62;transform:scale(1.07)}to{opacity:.42;transform:scale(1)}}
@keyframes roulette-ring-finish{from{opacity:.42;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
.roulette-stage strong{position:relative;z-index:1;display:block;width:min(94vw,1600px);font:800 clamp(3rem,12vw,11rem)/.9 Manrope,Arial,sans-serif;letter-spacing:-.065em;text-transform:uppercase;overflow-wrap:anywhere;color:#fff;text-shadow:0 .06em .2em color-mix(in srgb,var(--accent) 94%,transparent),0 0 .7em color-mix(in srgb,var(--accent) 78%,transparent),0 2px 12px var(--accent)}
.roulette-stage strong.tick{animation:roulette-roll var(--roulette-tick-duration,.18s) cubic-bezier(.15,.8,.2,1) both}@keyframes roulette-roll{from{opacity:.15;transform:translateY(65%) skewX(-7deg) scale(.85);filter:blur(15px)}65%{opacity:1;transform:translateY(-7%) skewX(2deg) scale(1.06);filter:blur(1px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.roulette-stage.is-final strong{animation:roulette-land .72s cubic-bezier(.18,1.25,.28,1) both}
@keyframes roulette-land{from{opacity:.15;transform:translateY(25%) scale(1.2);filter:blur(20px)}45%{opacity:1;transform:translateY(-5%) scale(1.08);filter:blur(0)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
body.roulette-open{overflow:hidden}
@media(max-width:850px){.color-layout{grid-template-columns:1fr}.bit-depth-demo,.pixel-panel{grid-column:1}.color-section{padding-top:3rem}}
@media(max-width:1100px){.camera-settings{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:850px){.camera-views{grid-template-columns:1fr}}
@media(max-width:600px){.play-section,.particle-lab{min-height:100dvh}.color-section{padding:7rem 1.1rem 2.5rem}.depth-row{grid-template-columns:1fr;gap:.5rem}.depth-row>div{display:flex;align-items:baseline;justify-content:space-between}.pixel-switch{width:100%}.camera-section{padding-inline:1rem}.camera-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.camera-settings small{grid-column:1/-1}.speed-card{padding:1rem}}
@media(prefers-reduced-motion:reduce){.roulette-stage{transition:none}.roulette-stage strong.tick,.roulette-stage.is-final strong,.roulette-stage-orbits span{animation:none!important}.roulette-stage.is-reroll .roulette-stage-orbits span{opacity:.42}}

.viewer-source-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.8rem 1.3rem}.viewer-source-actions button{background:none;border:0;padding:0;color:var(--fg);font:inherit;text-decoration:underline;text-underline-offset:.25em;cursor:pointer}.viewer-source-actions button:hover{color:var(--accent-light)}