/* FEEL BẠT: physical cloth surfaces, restrained motion, no additional UI colors. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-short:200ms;--motion-reveal:560ms}
/* Each palette surface samples its own part of the reference photograph.
   White: the lower-left pale strip in reference 1. Yellow: lower-right yellow
   strip in reference 0. Both are single, non-repeating crops; blue is untouched. */
:is(.story,.process-section,.custom,.journal-section,.journal-page,.article-page,.toolbox,.process-copy,.facebook-embed){position:relative;isolation:isolate;background-color:var(--white)}
:is(.story,.process-section,.custom,.journal-section,.journal-page,.article-page,.toolbox,.process-copy,.facebook-embed)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 2px,var(--blue) 2px 3px),repeating-linear-gradient(90deg,transparent 0 3px,var(--blue) 3px 4px);background-size:100% 100%;filter:grayscale(1);mix-blend-mode:multiply;opacity:.025;border-radius:inherit}
:is(.story,.process-section,.custom,.journal-section,.journal-page,.article-page,.toolbox,.process-copy,.facebook-embed)::after{content:'';position:absolute;left:0;bottom:0;width:min(68%,760px);height:min(100%,160px);z-index:-1;pointer-events:none;background-image:url('/assets/tarp-reference-1.png');background-repeat:no-repeat;background-size:900px 1350px;background-position:var(--cloth-x,8%) 100%;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;opacity:.14;mask-image:radial-gradient(ellipse at 50% 60%,#fff 15%,transparent 75%);border-radius:inherit}
.process-section{--cloth-x:46%}.journal-section,.journal-page{--cloth-x:92%}.custom,.article-page{--cloth-x:24%}.process-copy,.toolbox{--cloth-x:67%}
:is(.faq-section,.street-tape,.button.yellow,.nav-custom,.custom-seal,.material-label,.cut-label,.process-photo-label,.process-handnote,.article-cover>span,.social-arrow,.journal-custom-note){position:relative;isolation:isolate}
:is(.faq-section,.street-tape,.button.yellow,.nav-custom,.custom-seal,.material-label,.cut-label,.process-photo-label,.process-handnote,.article-cover>span,.social-arrow,.journal-custom-note)::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,var(--blue) 3px 4px),repeating-linear-gradient(90deg,transparent 0 2px,var(--blue) 2px 3px);filter:grayscale(1);mix-blend-mode:multiply;opacity:.035;border-radius:inherit}
:is(.faq-section,.street-tape,.button.yellow,.nav-custom,.custom-seal,.material-label,.cut-label,.process-photo-label,.process-handnote,.article-cover>span,.social-arrow,.journal-custom-note)::after{content:'';position:absolute;right:0;bottom:0;width:min(68%,800px);height:min(100%,200px);z-index:-1;pointer-events:none;background-image:url('/assets/tarp-reference-0.png');background-repeat:no-repeat;background-size:960px 1440px;background-position:var(--cloth-yellow-x,92%) 100%;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply;opacity:.2;mask-image:radial-gradient(ellipse at 65% 70%,#fff 10%,transparent 80%);border-radius:inherit}
.street-tape{--cloth-yellow-x:4%}.button.yellow,.nav-custom{--cloth-yellow-x:55%}.custom-seal,.material-label,.process-photo-label{--cloth-yellow-x:25%}
/* Preserve the absolute positioning of the existing collage and cover labels. */
.hero .custom-seal,.material-label,.process-photo-label,.process-handnote,.article-cover>span,.social-arrow{position:absolute}
.process-handnote::after{background-image:url('/assets/tarp-reference-1.png');background-position:8% 100%;opacity:.14}
.hero h1>span{display:inline-block}
.motion-pending{opacity:0;translate:0 18px}
.hero-collage{--parallax-x:0px;--parallax-y:0px;--parallax-scroll:0px}
.hero-bag{translate:calc(var(--parallax-x)*.8) calc(var(--parallax-y)*.6 + var(--parallax-scroll))}
.hero .tarp-swatch{translate:calc(var(--parallax-x)*-.35) calc(var(--parallax-y)*-.3 + var(--parallax-scroll)*-.55)}
.hero-ticket{translate:calc(var(--parallax-x)*.25) calc(var(--parallax-scroll)*.3)}
.button,.nav-custom{transition:translate var(--motion-short) var(--motion-ease),scale var(--motion-short) var(--motion-ease),background-color var(--motion-short)}
.button:active,.nav-custom:active{scale:.985;translate:0 1px}
a>.ui-icon,button>.ui-icon,.social-arrow>.ui-icon{transition:translate var(--motion-short) var(--motion-ease)}
.article-cover>img,.social-visual>img{transition:transform 500ms var(--motion-ease)}
.faq-list details{overflow:clip}
.facebook-dialog{transform-origin:50% 25%}
@media(hover:hover) and (pointer:fine){
 .button:hover{transform:none;translate:0 -2px}.nav-custom:hover{translate:0 -2px}
 a:hover>.ui-icon,button:hover>.ui-icon,.social-post:hover .social-arrow>.ui-icon{translate:2px -2px}
 .article-card:hover .article-cover>img{transform:scale(1.025)}.social-post:hover .social-visual>img{transform:scale(1.025)}
}
@media(max-width:760px){
 .motion-pending{translate:0 12px}
 :is(.story,.process-section,.custom,.journal-section,.journal-page,.article-page)::after{background-size:680px 1020px;opacity:.13}
 .faq-section::after{background-size:720px 1080px;opacity:.17}
 .hero-bag,.hero .tarp-swatch,.hero-ticket{translate:0 0}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.motion-pending{opacity:1;translate:none}
 .hero-bag,.hero .tarp-swatch,.hero-ticket{translate:none}
 .button,.nav-custom,a>.ui-icon,button>.ui-icon,.social-arrow>.ui-icon,.article-cover>img,.social-visual>img{transition:none}
 .button:hover,.button:active,.nav-custom:hover,.nav-custom:active,a:hover>.ui-icon,button:hover>.ui-icon,.social-post:hover .social-arrow>.ui-icon{translate:none;scale:none}
 .article-card:hover .article-cover>img,.social-post:hover .social-visual>img{transform:none}
}