:root{--orange:#f4255c;--rose:#f4255c;--rose-light:#fbe0e8}::selection{background:#f4255c;color:#171915}.contact,.dialog-bottom{background:var(--rose);color:#171915}.contact-bottom{border-color:#17191555}.contact .small-label{color:#171915}.project-card button:hover .project-arrow{background:var(--rose);color:#171915}.filters button[aria-pressed=true]{background:var(--rose);border-color:var(--rose);color:#171915}.about{background:#f0e8e8}.case-note{background:var(--rose-light)}.text-link,.nav-contact{position:relative}.text-link span,.contact-title>span:last-child,.about-symbol{transition:transform .45s cubic-bezier(.22,1,.36,1)}.text-link:hover span{transform:translateY(5px)}.contact-title:hover>span:last-child{transform:translate(8px,-8px)}.about:hover .about-symbol{transform:translate(6px,-6px)}nav>a{transition:color .2s}nav>a:hover{color:#b8123d}.contact a:hover{color:#171915}.brand-dot{transition:transform .6s cubic-bezier(.22,1,.36,1)}.brand:hover .brand-dot{transform:rotate(90deg)}.hero-film{transition:box-shadow .4s}.hero-film:hover{box-shadow:0 14px 50px #f4255c20}.project-image{transition:box-shadow .4s}.project-card button:hover .project-image{box-shadow:0 15px 35px #20231f15}.project-meta h3{transition:color .25s}.project-card button:hover h3{color:#b8123d}.motion-strip{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:42px;padding:16px 0;color:var(--rose);font-size:clamp(20px,2.7vw,40px);letter-spacing:-.035em;line-height:1.1}.motion-track{display:flex;width:max-content;animation:motion-track 36s linear infinite}.motion-track>span{white-space:nowrap;padding-right:30px}.motion-track i{font-style:normal;padding:0 22px;color:var(--ink)}@keyframes motion-track{to{transform:translateX(-50%)}}.motion-strip:hover .motion-track{animation-play-state:paused}.work{padding-top:70px}.motion-control{border:0;background:transparent;padding:0;color:var(--muted);font-size:10px;cursor:pointer;white-space:nowrap}.motion-control:hover{color:var(--ink)}.motion-control:focus-visible{outline:2px solid var(--rose);outline-offset:5px}.case-gallery img{transition:filter .5s}.intro h1{animation:hero-text-in .85s cubic-bezier(.22,1,.36,1) both}.intro .eyebrow{animation:hero-fade .6s .05s both}.intro-bottom{animation:hero-fade .7s .2s both}@keyframes hero-text-in{from{opacity:.1;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-fade{from{opacity:0}to{opacity:1}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-motion=off] .card-preview{display:none}html[data-motion=off] .scroll-progress{display:none}
@media(max-width:760px){.motion-strip{margin-top:28px;padding:13px 0;font-size:24px}.work{padding-top:50px}.motion-control{font-size:9px}footer{gap:14px}}


:root{--paper:#fae9ee;--ink:#281e24;--muted:#6b535e;--line:#dfc0ca;--rose-light:#f5cbd8}body{background:var(--paper);color:var(--ink)}.header,.dialog-toolbar{background:#fae9eeed}.intro{background:radial-gradient(ellipse at 87% 32%,#f4255c1c 0,transparent 58%)}.hero-film{box-shadow:0 12px 40px #a62c4d12}.work{background:linear-gradient(180deg,#fae9ee 0%,#fbeef2 55%,#f6d5e0 100%)}.motion-strip{background:#f6d6e1;border-color:#e3b8c7}.about{background:linear-gradient(180deg,#f6d5e0,#f3c3d2)}.contact{background:linear-gradient(180deg,#f3c3d2 0%,#f78caa 38%,#f4255c 100%)}.signature{background:#f4255c;color:#281e24}.signature span{color:#281e24}footer{background:#f6d5e0}.dialog-bottom{background:#f6c0d0}.case-screen{background:#241b21}.case-details-bar,.case-credits{border-color:var(--line)}.project-index,.project-arrow,.reel-label{background:#fceff3}.hero-asterisk{animation:hero-spin 8s linear infinite}@keyframes hero-spin{to{transform:rotate(360deg)}}

/* Full-bleed section backgrounds; constrain content with gutters, not the body. */
body{max-width:none;margin:0}
:root{--pad:clamp(20px,4vw,160px)}
/* Fluid layout: gutters grow proportionally; media uses the available width. */
:root{--pad:clamp(20px,4vw,160px)}
body{width:100%;max-width:none;margin:0}
.header,.intro,.section,.dialog-toolbar,.case-header,.case-info,.case-gallery,.case-credits,.dialog-bottom,footer{min-width:0}
.header{gap:24px}nav{flex-shrink:0}
.intro h1{font-size:clamp(80px,12vw,420px)}
h2{font-size:clamp(35px,4.1vw,120px)}
.intro-bottom p{font-size:clamp(14px,1.1vw,28px)}
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,3.5vw,100px) clamp(20px,2.2vw,72px)}
.project-grid .project-card{padding-top:0;margin-top:0;min-width:0}
.project-grid .project-card:last-child{display:block;grid-column:1/-1}
.project-grid .project-card .project-image{aspect-ratio:16/10}
.project-grid .project-card:last-child .project-image{aspect-ratio:2.2/1}
.project-grid .project-card .project-meta h3{font-size:clamp(21px,1.8vw,54px);overflow-wrap:anywhere}
.project-grid .project-card:last-child .project-meta h3{font-size:clamp(25px,2.7vw,80px)}
.project-meta{align-items:baseline;gap:12px}.project-sub{font-size:clamp(9px,.58vw,17px)}
.about{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(30px,5vw,160px)}
.about-content{min-width:0}.about-content>p{max-width:66ch;font-size:clamp(16px,1vw,28px)}
.about-content .about-lead{font-size:clamp(20px,1.4vw,40px);max-width:60ch}
.capabilities>div{grid-template-columns:minmax(100px,.3fr) 1fr;gap:20px}
.capabilities p{font-size:clamp(14px,.85vw,24px)}
.capabilities span,.small-label,.eyebrow{font-size:clamp(9px,.65vw,18px)}
.contact-title{font-size:clamp(70px,11.5vw,390px)}
.signature{font-size:clamp(45px,15.1vw,580px)}
.case-header{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.case-header h2{font-size:clamp(45px,6.4vw,200px);overflow-wrap:anywhere}
.case-info{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(30px,5vw,140px)}
.case-info p{max-width:68ch;font-size:clamp(15px,.85vw,24px)}
.case-media{height:auto;max-height:82svh;object-fit:contain}
.case-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:2200px){
 .project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .project-grid .project-card:last-child{grid-column:span 2}
 .project-grid .project-card:last-child .project-image{aspect-ratio:3.35/1}
 .project-grid.is-filtered{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr))}
 .project-grid.is-filtered .project-card:last-child{grid-column:auto}
 .project-grid.is-filtered .project-card:last-child .project-image{aspect-ratio:16/10}
 nav{font-size:clamp(14px,.7vw,24px);gap:clamp(38px,2.5vw,90px)}
 .brand{font-size:clamp(29px,1.2vw,45px)}.brand-dot{font-size:1.15em}
 .brand-name{font-size:clamp(11px,.65vw,22px)}.brand-name small{font-size:clamp(7px,.4vw,13px)}
 .section{padding-top:clamp(100px,5vw,180px);padding-bottom:clamp(100px,5vw,180px)}
 .intro{padding-top:clamp(52px,3vw,115px)}
 .text-link{font-size:clamp(14px,.75vw,24px)}
}
@media(max-width:760px){
 .intro h1{font-size:clamp(58px,16vw,122px)}
 .project-grid,.project-grid.is-filtered{grid-template-columns:minmax(0,1fr);gap:34px}
 .project-grid .project-card:last-child{grid-column:auto}
 .project-grid .project-card:last-child .project-image{aspect-ratio:16/10}
 .project-grid .project-card .project-meta h3,.project-grid .project-card:last-child .project-meta h3{font-size:21px}
 .about,.case-header,.case-info,.case-gallery,.case-credits{grid-template-columns:minmax(0,1fr)}
 .case-gallery figure:first-child{grid-column:auto}
 .case-header h2{font-size:clamp(38px,10vw,70px)}
 .case-media{max-height:none}
 .contact-title{font-size:clamp(60px,15vw,110px)}
 .contact-title>span:last-child{font-size:.85em}
 .film-caption{gap:12px}.film-caption>span{min-width:0}
 .eyebrow{font-size:8px;letter-spacing:1px}
 .capabilities>div{grid-template-columns:90px minmax(0,1fr);gap:12px}
 .capabilities p{font-size:13px}
 .case-details-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
 .brand-name{display:none}.header{gap:12px}nav{gap:12px;font-size:11px}
 .film-caption{font-size:7px;letter-spacing:.5px}.watch{font-size:9px;gap:5px}
 .contact-bottom a{font-size:15px;overflow-wrap:anywhere}
 footer{gap:12px;justify-content:flex-start}
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 h1 .kinetic-type{display:inline-block;background:linear-gradient(105deg,#281e24 15%,#a31542 40%,#281e24 65%,#c11950 90%);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:type-ink 9s ease-in-out infinite alternate,type-drift 7s ease-in-out infinite alternate;transform-origin:left bottom}
}
@keyframes type-ink{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes type-drift{from{transform:skewX(-.7deg)}to{transform:skewX(.7deg)}}
/* Editorial identifiers: a small folio, rather than a generic white square. */
.project-image .project-index{top:clamp(14px,1.35vw,32px);left:clamp(14px,1.35vw,32px);display:grid;grid-template-columns:auto auto;align-items:baseline;gap:0 7px;padding:10px 13px 9px;background:#21151ed9;color:#fff8fb;border:1px solid #ffffff38;border-radius:2px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-variant-numeric:tabular-nums;box-shadow:0 3px 16px #1d091518}
.index-kicker{grid-column:1/-1;display:flex;align-items:center;gap:8px;font:500 7px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:1.8px;color:#f6d5e0;margin-bottom:3px}
.index-kicker::before{content:"";display:block;width:13px;height:1px;background:#f4255c}
.index-value{font:400 clamp(22px,1.45vw,38px)/1 'Instrument Serif',Georgia,serif;letter-spacing:-.5px}
.index-total{font:400 8px/1.4 ui-monospace,monospace;letter-spacing:.3px;color:#dec9d3}
.feature-open .reel-label{top:clamp(16px,2vw,42px);left:clamp(16px,2vw,42px);width:clamp(155px,16vw,250px);padding:15px 17px 12px;background:#21151ecf;color:#fff8fb;border:1px solid #fff5;border-radius:2px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);letter-spacing:0;box-shadow:0 5px 30px #1d09151c}
.reel-tag-top{display:flex;justify-content:space-between;align-items:center;font:500 8px/1.3 ui-monospace,monospace;letter-spacing:1.5px;color:#edceda;padding-bottom:11px;border-bottom:1px solid #ffffff38}
.reel-tag-star{color:#ff6290;font-size:20px;line-height:1;animation:hero-spin 8s linear infinite}
.reel-tag-title{display:block;font:500 clamp(20px,1.8vw,34px)/.98 'DM Sans',Arial,sans-serif;letter-spacing:-1px;margin:13px 0}
.reel-tag-title i{font-family:'Instrument Serif',Georgia,serif;font-size:1.35em;font-weight:400;letter-spacing:-.02em}
.reel-tag-meta{display:block;border-top:1px solid #ffffff38;padding-top:9px;font:400 7px/1.3 ui-monospace,monospace;letter-spacing:.7px;color:#edceda}
.reel-tag-meta b{font-weight:400;color:#ff6290;padding:0 5px}
.header .motion-control{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:10px;letter-spacing:.1px;border:1px solid #b98b9b66;border-radius:20px;padding:7px 10px;min-height:30px;color:var(--ink)}
.motion-state-dot{width:6px;height:6px;border:1px solid currentColor;border-radius:50%;background:transparent;flex:none}
html[data-motion=on] .motion-state-dot{background:#f4255c;border-color:#f4255c}
html[data-motion=on] .card-preview{display:block}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=off] .card-preview{display:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) *,html:not([data-motion=on]) *::before,html:not([data-motion=on]) *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:760px){
 .feature-open .reel-label{width:140px;padding:11px 13px 10px}
 .reel-tag-top{font-size:7px;padding-bottom:7px}.reel-tag-title{font-size:19px;margin:9px 0}.reel-tag-meta{font-size:6px;letter-spacing:.3px;padding-top:7px}
 .project-image .project-index{padding:8px 10px 7px}.index-kicker{font-size:6px;letter-spacing:1.4px}.index-value{font-size:23px}.index-total{font-size:7px}
 .header .motion-switch-text{display:none}.header .motion-control{width:27px;min-height:27px;padding:5px;border-radius:50%}
 .header nav{gap:12px}
}
@media(max-width:420px){.header nav{gap:8px}.header .motion-control{width:24px;min-height:24px}}
/* Four moving pink/white color points; the same field continues behind every section. */
:root{--paper:#fff5f8;--line:#c68b9e55;--muted:#654954}
body{position:relative;isolation:isolate;background:var(--paper)}
.gradient-field{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#fff5f8}
.gradient-field>span{position:absolute;width:115%;height:135%;background:radial-gradient(ellipse at center,var(--point) 0%,var(--fade) 68%);animation:four-point-flow var(--duration) ease-in-out infinite alternate;will-change:transform}
.gradient-field>span:nth-child(1){left:-45%;top:-50%;--point:#f4255cd9;--fade:#f4255c00;--dx:20%;--dy:15%;--duration:14s}
.gradient-field>span:nth-child(2){left:30%;top:-50%;--point:#ffffff;--fade:#ffffff00;--dx:-18%;--dy:18%;--duration:18s}
.gradient-field>span:nth-child(3){left:30%;top:15%;--point:#ff7fa4e6;--fade:#ff7fa400;--dx:-20%;--dy:-17%;--duration:16s}
.gradient-field>span:nth-child(4){left:-45%;top:15%;--point:#ffffff;--fade:#ffffff00;--dx:18%;--dy:-15%;--duration:20s}
@keyframes four-point-flow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(var(--dx),var(--dy),0) scale(1.14)}}
.intro,.work,.about,.contact,.signature,footer,.motion-strip,.reel-footnote{background:transparent;animation:none}
.header,.dialog-toolbar{background:#ffffffb3;border-bottom:0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.motion-strip{border:0;color:var(--ink);font-weight:600;letter-spacing:-.04em}
.motion-track i{color:var(--ink)}
.motion-track .icon{stroke-width:1.9}
.contact-bottom{border-top:0}
.signature,.signature span{color:var(--ink)}
/* Minimal folio: the project number is the entire label. */
.project-image .project-index{display:grid;place-items:center;grid-template-columns:none;top:clamp(14px,1.35vw,32px);left:clamp(14px,1.35vw,32px);width:34px;height:34px;padding:0;background:#21151ebd;color:#fff4f8;border:1px solid #ffffff59;border-radius:50%;font:500 12px/1 'DM Sans',Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.3px;box-shadow:none}
.feature-open .reel-label{display:inline-flex;align-items:center;gap:10px;width:auto;padding:10px 14px;background:#21151eb8;border:1px solid #ffffff4d;border-radius:2px;font:500 10px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:1px;color:#fff4f8;box-shadow:none}
.reel-simple-mark{font-size:17px;line-height:1;color:#ff8cad}
.icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex:none;pointer-events:none}
.brand-dot>.icon,.hero-asterisk>.icon,.signature>span>.icon{display:block}
.project-arrow .icon,.motion-toggle .icon,.reel-play .icon{vertical-align:0}
.motion-toggle{display:grid;place-items:center;font-size:14px}
.project-arrow{color:var(--ink)}
.project-index .icon{display:none}
.case-screen{background:#241b21}
@media(max-width:760px){.feature-open .reel-label{padding:9px 11px;font-size:9px;gap:8px}.project-image .project-index{width:30px;height:30px;font-size:11px}.reel-simple-mark{font-size:15px}}

/* Xingyu Ma's own mark: a brief stretch, squeeze and elastic settle. */
.personal-mark{display:inline-block;width:1.583em;height:1em;vertical-align:middle;fill:currentColor;overflow:visible;color:var(--rose)}
.jelly-shape{transform-box:fill-box;transform-origin:center;animation:logo-jelly 4.8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes logo-jelly{
 0%,38%,100%{transform:scale(1,1) skewX(0)}
 6%{transform:scale(1.24,.78) skewX(-5deg)}
 11%{transform:scale(.82,1.18) skewX(4deg)}
 17%{transform:scale(1.12,.9) skewX(-2deg)}
 23%{transform:scale(.96,1.05) skewX(1deg)}
 30%{transform:scale(1.03,.98) skewX(0)}
}
.brand-symbol{display:block;flex:none;width:clamp(70px,6vw,145px);line-height:0}
.brand-symbol .personal-mark{display:block;width:100%;height:auto}
.brand{gap:0}.brand-name{margin-left:18px}
.hero-first-line{display:inline-flex;align-items:center;gap:.17em;white-space:nowrap}
.hero-asterisk{position:static;display:block;width:.73em;font-size:1em;line-height:0;animation:none;flex:none;margin-top:.08em}
.hero-asterisk .personal-mark{display:block;width:100%;height:auto}
.hero-asterisk .jelly-shape{animation-delay:.15s}
.signature>span{display:block;width:.88em;line-height:0;flex:none;color:var(--rose)}
.signature .personal-mark{display:block;width:100%;height:auto}
.signature .jelly-shape{animation-delay:.3s}
.reel-simple-mark .personal-mark{color:#ff9fba}
.motion-track .personal-mark{width:1.35em;height:.85em;color:var(--ink)}
.motion-track .jelly-shape,.reel-simple-mark .jelly-shape{animation:none}
@media(max-width:760px){.brand-symbol{width:64px}.brand-name{margin-left:12px}.intro h1{font-size:clamp(48px,15vw,114px)}}
@media(max-width:420px){.brand-symbol{width:58px}}