:root{--ink:#261c2c;--ink2:#47324e;--cream:#faf5ee;--paper:#fffaf5;--pink:#fa87ae;--hot:#ec6da3;--lime:#cfff54;--violet:#bd90e9;--yellow:#f8c978;--line:#dfd4d8;--sans:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;--display:Impact,'Arial Black',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:78px}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #b27cff;outline-offset:4px}img{display:block;max-width:100%}[hidden]{display:none!important}.skip-link{position:fixed;top:-90px;left:10px;z-index:999;background:#fff;padding:12px 15px}.skip-link:focus{top:10px}
.draft-strip{position:relative;z-index:120;display:flex;justify-content:space-between;gap:10px;padding:10px 4.3vw;background:#23162e;color:#fff;font:700 10px/1.5 Arial,sans-serif;letter-spacing:.14em}.pulse{display:inline-block;width:8px;height:8px;margin-right:8px;background:#d5fd73;border-radius:100%;box-shadow:0 0 12px #ddff76}.slash{margin:0 12px;color:#da8cac}.strip-right{opacity:.67}
.site-header{position:sticky;z-index:110;top:0;height:82px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 4.1vw;border-bottom:1px solid #e1dad86b;background:#fffaf8f3;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}.brand-emblem{position:relative;display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:15px;background:var(--ink);color:#fff;font-family:Georgia,serif;font-size:42px;font-weight:900;line-height:1}.asterisk{position:absolute;font-size:15px;right:-4px;top:2px;color:var(--pink);transform:rotate(20deg)}.brand-name{font:900 18px/1 var(--sans);letter-spacing:-.09em}.brand-name strong{font-weight:900}.brand-name small{display:block;margin-top:5px;font:700 8px/1.1 Arial,sans-serif;letter-spacing:.22em;color:#8b687a}.site-header nav{display:flex;align-items:center;gap:38px;margin-left:auto}.site-header nav a{font:800 10px Arial,sans-serif;letter-spacing:.1em;transition:color .2s}.site-header nav a:hover{color:var(--hot)}.nav-right{display:flex;gap:13px;align-items:center}.motion-toggle{border:1px solid #d5cbd2;background:#fff9fb;padding:14px 15px;border-radius:999px;font:800 9px Arial,sans-serif;letter-spacing:.07em;cursor:pointer}.motion-toggle[aria-pressed=true]{background:#e8dce8}.nav-shop{background:var(--ink);color:white;border-radius:999px;font:800 12px Arial,sans-serif;letter-spacing:.07em;display:flex;gap:25px;padding:14px 22px;transition:background .2s,transform .2s}.nav-shop:hover{background:#aa5b95;transform:translateY(-2px)}.scroll-track{position:fixed;right:0;top:0;height:100vh;width:3px;z-index:150;background:transparent;pointer-events:none}.scroll-track>div{background:linear-gradient(var(--pink),var(--violet),var(--lime));width:100%;height:0;transition:height .12s}
.gun-layer{position:fixed;inset:0;z-index:71;pointer-events:none;mix-blend-mode:normal;overflow:hidden;transition:opacity .25s}.gun-layer canvas{display:block;width:100%;height:100%}.gun-layer #gun-fallback{position:absolute;left:0;top:0;width:390px;max-width:none;opacity:0;transform:translate(-9999px);filter:drop-shadow(0 22px 15px #170b254b);will-change:transform}.gun-layer.fallback #gun-fallback{opacity:1}.gun-layer.fallback canvas{display:none}.gun-status{position:fixed;right:13px;bottom:15px;font-size:10px;background:#1118;color:#fff;padding:5px 8px;border-radius:6px}
.scene{position:relative;isolation:isolate}.eyebrow{display:flex;align-items:center;gap:12px;font:900 11px/1.2 Arial,sans-serif;letter-spacing:.14em;color:#704c61}.eyebrow i{display:inline-block;width:23px;height:7px;border-radius:9px;background:var(--hot)}.eyebrow span{color:#c5aabb}.scene h2{font:900 clamp(58px,6.8vw,119px)/.92 var(--display);letter-spacing:-.038em;margin:28px 0 22px;font-stretch:condensed;text-transform:uppercase}.scene h2 em{font:italic 500 .96em/.95 Georgia,serif;text-transform:none;letter-spacing:-.08em;color:var(--hot)}.scene p{line-height:1.65}.large-copy{font-size:clamp(19px,2vw,27px);font-weight:900;letter-spacing:-.04em;line-height:1.3!important}.support-copy{font-size:15px;color:#6b5666;max-width:430px}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:54px;padding:15px 23px;border-radius:999px;font:900 11px/1 Arial,sans-serif;letter-spacing:.07em;white-space:nowrap;transition:transform .2s,background .2s,color .2s}.btn span,.inline-link span{font-size:18px}.btn:hover{transform:translateY(-3px)}.btn-pink{background:var(--pink);color:var(--ink)}.btn-pink:hover{background:#ffe18a}.btn-outline-light{border:1px solid #ffffffb0;color:white;background:#ffffff15}.btn-dark{background:var(--ink);color:white}.btn-dark:hover{background:#744377}
/* OPENING */
.hero{height:calc(100svh - 116px);min-height:680px;max-height:1060px;overflow:hidden;background:#302034;color:#fff}.hero-photo{position:absolute;inset:0;background-image:url('assets/studio-day.webp');background-position:center center;background-size:cover;transform:scale(1.018)}.hero-night{background-image:url('assets/studio-evening.webp');opacity:0;animation:studioGlow 16s ease-in-out infinite}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,13,32,.91) 0%,rgba(24,13,31,.82) 31%,rgba(26,15,33,.31) 62%,rgba(36,15,38,.11) 100%),linear-gradient(0deg,#211329b5,transparent 35%)}.hero-grain{position:absolute;inset:0;opacity:.11;background-image:radial-gradient(#fff 0.5px,transparent .5px);background-size:6px 6px;mix-blend-mode:overlay}.hero-copy{position:absolute;left:7.5vw;top:50%;transform:translateY(-49%);width:56vw;max-width:810px;z-index:5}.hero-eyebrow{color:#ffe4f2;font-size:10px;margin-bottom:31px}.hero-eyebrow span{color:#ffe4f2}.hero h1{font:900 clamp(94px,10vw,175px)/.79 var(--display);margin:0;letter-spacing:-.07em;text-shadow:0 8px 30px #1b10204a}.hero h1>span{position:relative;color:#ffd6e6}.sunburst{position:absolute;top:-3px;right:-44px;color:var(--lime);font:normal 50px/1 Arial,sans-serif;transform:rotate(16deg)}.hero-line{height:1px;background:#fff5;width:min(500px,80%);margin:27px 0 23px}.hero h2{font:900 clamp(22px,2.85vw,44px)/1.19 var(--sans);letter-spacing:-.05em;text-transform:none;margin:0 0 18px}.hero h2 em{font:italic 500 1em Georgia,serif;color:#ffdcb9}.hero-copy>p{max-width:510px;font-size:clamp(13px,1.17vw,17px);color:#f4e6ee;line-height:1.8;margin:0 0 29px}.hero-actions{display:flex;align-items:center;gap:10px}.hero .btn{font-size:10px}.character-stage{position:absolute;right:7.8%;bottom:1%;height:76%;max-height:750px;aspect-ratio:.60;z-index:4;filter:drop-shadow(0 20px 18px #140b17b0)}.character-halo{position:absolute;inset:14% -20% 0;border:1px solid #ffd3e365;border-radius:49%;box-shadow:0 0 0 32px #e6a4dd17,0 0 0 65px #d5dfb20a;background:radial-gradient(circle at 52% 44%,#ffd8e047,transparent 57%)}.character-figure{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:96%;max-width:none;object-fit:contain;animation:characterBob 6s ease-in-out infinite}.character-sticker{position:absolute;z-index:6;right:-21%;top:7%;padding:13px 16px;background:#fdf6eb;color:#4c2d45;border:2px solid #533d50;border-radius:18px 18px 18px 3px;font:700 22px Georgia,serif;transform:rotate(8deg);box-shadow:5px 5px 0 #593747}.character-sticker span{font-family:Arial;color:#f47dae}.character-shadow{position:absolute;bottom:-1%;height:16px;left:10%;right:10%;border-radius:50%;background:#0707074f;filter:blur(9px)}.floating-yarn{position:absolute;inset:0;z-index:3;pointer-events:none}.strand{position:absolute;max-width:none;width:18%;pointer-events:auto;cursor:grab;user-select:none;touch-action:none;filter:drop-shadow(0 8px 4px #2f1f264a);will-change:transform;animation:floatStrand 8s ease-in-out infinite}.strand:active{cursor:grabbing}.strand-one{width:17%;left:65%;top:8%;transform:rotate(-20deg)}.strand-two{width:13%;right:-2%;top:48%;animation-delay:-3s}.strand-three{width:12%;left:-4%;bottom:12%;animation-delay:-1.4s}.strand-four{width:10%;left:54%;bottom:6%;animation-delay:-5s}.scroll-cue{position:absolute;left:7.5vw;bottom:29px;z-index:7;display:flex;align-items:center;gap:18px;color:#ffe4f5;font:700 10px Arial,sans-serif;letter-spacing:.17em}.scroll-line{width:67px;height:1px;background:#ffedf2aa}.scroll-cue-mouse{font-size:21px}.scene-index{position:absolute;right:32px;bottom:26px;z-index:8;color:#fff9;font:800 12px Arial,sans-serif;letter-spacing:.16em}
@keyframes studioGlow{0%,25%,100%{opacity:0}50%,77%{opacity:.72}}@keyframes characterBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}@keyframes floatStrand{0%,100%{translate:0 0}50%{translate:4px -18px}}
/* WORDMARK BAR */
.clients-band{position:relative;z-index:6;min-height:132px;background:#fffaf2;display:flex;align-items:center;justify-content:space-between;gap:35px;padding:18px 5.5vw;border-bottom:1px solid #eee2db;box-shadow:0 8px 26px #2c1f2811}.clients-heading{font:800 10px/1.5 Arial,sans-serif;letter-spacing:.12em;max-width:180px;color:#786071}.clients-heading span{color:var(--hot);padding-left:6px}.client-wordmarks{display:flex;align-items:center;justify-content:space-around;flex:1;gap:40px}.client-wordmarks>*{flex-shrink:0}.logo-river{font:800 clamp(17px,2vw,29px)/1 Arial,sans-serif;letter-spacing:-.045em;white-space:nowrap}.logo-samsung{font:900 clamp(18px,2.2vw,34px)/1 Arial,sans-serif;letter-spacing:-.07em;white-space:nowrap}.logo-itv{display:inline-flex;align-items:center;font:900 clamp(25px,2.3vw,34px)/1.1 Arial,sans-serif;letter-spacing:-.12em;white-space:nowrap}.logo-itv i{font-style:normal}.logo-itv i:nth-child(1){color:#00a8d6}.logo-itv i:nth-child(2){color:#ee3469}.logo-itv i:nth-child(3){color:#e0a319}.logo-itv strong{letter-spacing:-.05em;color:#25213a;margin-left:5px;font-size:.8em}.clients-footnote{font:700 9px/1.5 Arial,sans-serif;letter-spacing:.09em;max-width:180px;text-align:right;color:#978393}
/* TUFT */
.tuft-section{min-height:1050px;background:#f6e8ef;overflow:hidden}.tuft-decor{position:absolute;right:4%;top:-140px;color:#edc0d5;font:300 460px Arial;opacity:.28;transform:rotate(12deg)}.section-layout{width:min(1440px,100%);margin:auto;padding:110px 6.7vw}.tuft-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:65px}.tuft-copy{align-self:center;position:relative;z-index:4}.tuft-copy h2{font-size:clamp(68px,6.8vw,120px)}.tuft-copy .support-copy{max-width:450px}.tuft-swatch{display:flex;align-items:center;gap:11px;margin:41px 0 22px;color:#916f80;font:900 10px Arial;letter-spacing:.1em}.swatch-dots{display:flex}.swatch-dots i{display:block;width:21px;height:21px;border-radius:50%;border:2px solid #f6e8ef;margin-left:-5px}.swatch-dots i:nth-child(1){background:#eb89ae}.swatch-dots i:nth-child(2){background:#c6f57a}.swatch-dots i:nth-child(3){background:#b58bda}.work-meter{display:flex;justify-content:space-between;gap:20px;max-width:390px;font:900 10px/1.4 Arial;letter-spacing:.1em}.meter-track{height:9px;border-radius:20px;background:#dfced9;margin:11px 0 18px;max-width:390px;overflow:hidden}.meter-track>div{height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,#ed9bc4,#c5b0ea,#b2e8c9);transition:width .08s}.scene-action{font:900 9px Arial;letter-spacing:.15em;color:#aa7f91}.scene-action span{display:inline-block;margin-left:12px;font-size:19px;vertical-align:middle}.tuft-stage{position:relative;min-height:780px;z-index:2;display:flex;align-items:center;justify-content:center}.frame-card{width:min(100%,500px);position:relative;filter:drop-shadow(0 30px 16px #6d3f5133);transform:rotate(-2deg)}.frame-scene{position:relative}.reference-frame{display:block;width:100%;filter:saturate(.96)}.fabric-overlay{position:absolute;left:12%;right:13%;top:10%;bottom:15%;overflow:hidden;border-radius:5px;opacity:.92;pointer-events:none;background:#eadccb;box-shadow:inset 0 0 20px #9c846a33}.fabric-overlay canvas{width:100%;height:100%;display:block;object-fit:fill;filter:drop-shadow(0 2px 1px #3e2b3a5e)}.frame-stamp{position:absolute;left:20%;bottom:2%;background:#fef8ed;border-radius:100px;padding:10px 13px;font:900 10px Arial;letter-spacing:.07em;transform:rotate(3deg)}.frame-stamp span{color:#ea81a5}.maker-back{position:absolute;width:min(28%,155px);bottom:5%;left:-8%;filter:drop-shadow(0 12px 12px #45303a44)}.work-arrow{position:absolute;font:900 65px Georgia;right:1%;top:13%;color:#a5749b;transform:rotate(8deg)}
/* PILE */
.pile-section{min-height:940px;background:#edeae9;overflow:hidden}.pile-orb{position:absolute;right:-100px;bottom:-200px;font-size:660px;color:#e2d6e6;line-height:1;z-index:-1}.pile-layout{max-width:1470px;padding:100px 6.2vw;margin:auto;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:8vw}.pile-art{position:relative;min-height:650px;border-radius:45% 45% 38% 43%;background:#fa97c2;box-shadow:0 30px 45px #5d38532b;transform:rotate(-6deg);overflow:hidden;cursor:crosshair;touch-action:pan-y}.pile-art .pile-base{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;transform:scale(1.03)}.pile-brush{position:absolute;inset:0;pointer-events:none;opacity:0;background-image:url('assets/pile.webp');background-size:cover;background-position:center;filter:contrast(1.2) saturate(1.2) brightness(.85);mask-image:radial-gradient(circle 63px at var(--px,50%) var(--py,50%),#000 1%,#0008 56%,transparent 100%);-webkit-mask-image:radial-gradient(circle 63px at var(--px,50%) var(--py,50%),#000 1%,#0008 56%,transparent 100%);transform:translate(5px,4px) scale(1.03)}.pile-label{position:absolute;top:22px;left:40px;background:#ffe9f3;border:2px solid #2e2332;padding:14px 17px;border-radius:9px;font:900 15px Arial;transform:rotate(-8deg);box-shadow:4px 4px 0 #2e2332}.pile-label span{padding-left:20px}.pile-cursor{position:absolute;left:50%;top:50%;font-size:55px;transform:translate(-25%,-36%) rotate(6deg);pointer-events:none;opacity:0;filter:drop-shadow(4px 9px 8px #34263677)}.pile-copy{position:relative;z-index:5}.pile-copy h2 em{color:#aa77ca}.microtag{display:inline-flex;align-items:center;gap:20px;margin-top:20px;font:900 10px Arial;letter-spacing:.1em;color:#735e71}.microtag span{font-size:24px;color:#bc76b9}
/* ABOUT */
.about-section{min-height:940px;background:#fffaf4}.about-layout{max-width:1460px;margin:auto;padding:140px 7vw;display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center}.about-copy h2{font-size:clamp(62px,6.4vw,114px)}.about-copy p:not(.large-copy){font-size:16px;max-width:525px;color:#675669;line-height:1.85}.about-copy .btn{margin-top:18px}.about-pencil{font:800 10px Arial;letter-spacing:.14em;margin-top:45px;color:#9d7393}.about-pencil:first-letter{color:#ea8cad}.about-gallery{position:relative}.about-photo{position:relative;border-radius:47% 46% 12% 10%;overflow:hidden;background:#2d1d2c;aspect-ratio:4/5;transform:rotate(3deg);box-shadow:20px 25px 0 #e9cbe3}.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.15)}.about-photo span{position:absolute;bottom:15px;left:15px;right:15px;background:#ffffffef;border-radius:7px;padding:15px 16px;display:flex;justify-content:space-between;font:900 11px Arial;letter-spacing:.08em}.about-yarn{position:absolute;left:-14%;bottom:5%;width:32%;transform:rotate(20deg);filter:drop-shadow(0 9px 4px #0004)}
/* WORK */
.work-section{background:#f4e4ce;padding:120px 6vw 95px}.work-head{max-width:1450px;margin:0 auto 66px;display:flex;align-items:end;justify-content:space-between;gap:65px}.work-head h2{margin-bottom:0}.work-intro{width:min(430px,45%);padding-bottom:10px}.work-intro p{font-size:16px;margin:0 0 12px}.work-intro p:last-of-type{color:#665865}.inline-link{display:inline-flex;align-items:center;gap:30px;margin-top:18px;padding-bottom:8px;border-bottom:1px solid var(--ink);font:900 11px Arial;letter-spacing:.08em}.projects{max-width:1460px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.project-card{min-width:0}.project-image{height:min(33vw,490px);min-height:300px;position:relative;overflow:hidden;background:#efe0e6;border-radius:18px}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.project-card:hover .project-image img{transform:scale(1.06)}.project-tag{position:absolute;left:19px;top:20px;padding:9px 12px;background:#fff9;border:1px solid #fff;border-radius:100px;backdrop-filter:blur(9px);font:900 10px Arial;letter-spacing:.09em}.project-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:18px 0 0}.project-name{font-size:clamp(15px,1.6vw,22px)}.project-meta>span:last-child{text-align:right;font:800 11px/1.6 Arial;max-width:160px;color:#61505e}.project-meta>span b{margin-left:4px;font-size:17px}.project-meta .logo-itv{font-size:24px}.brand-caveat{max-width:1450px;margin:40px auto 0;color:#806b76;font:11px/1.5 Arial,sans-serif}
/* SHOP */
.shop-section{background:#fffaf4;padding:120px 6vw 130px}.shop-header{max-width:1460px;margin:0 auto;display:flex;justify-content:space-between;align-items:end;gap:65px}.shop-header p{max-width:380px;font-size:17px;line-height:1.7}.shop-categories{display:flex;gap:15px;max-width:1460px;margin:10px auto 36px}.shop-categories span{font:900 10px Arial;letter-spacing:.1em;padding:10px 15px;border:1px solid #c6b3c3;border-radius:99px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1460px;margin:auto}.product-image{position:relative;aspect-ratio:4/4.65;overflow:hidden;border-radius:20px;padding:30px}.product-image img{width:100%;height:100%;object-fit:contain;transition:transform .35s}.product-tile:hover .product-image img{transform:scale(1.06) rotate(-2deg)}.product-image span{position:absolute;top:20px;left:20px;background:#fffdf8cf;backdrop-filter:blur(5px);padding:10px 13px;border-radius:99px;font:900 10px Arial;letter-spacing:.08em}.img-pink{background:#f2cadd}.img-yellow{background:#f1dba2}.img-violet{background:#ddd2ed}.img-violet img{padding:18%}.product-caption{display:flex;justify-content:space-between;align-items:center;gap:10px}.product-caption h3{font:900 clamp(24px,2.5vw,36px)/1 var(--sans);letter-spacing:-.05em}.product-caption span{font:800 11px Arial;color:#846d7d}.shop-bottom{max-width:1460px;margin:36px auto 0;display:flex;align-items:center;gap:25px}.shop-bottom>span{font:800 10px Arial;letter-spacing:.08em;color:#a48b9c}
/* CUSTOM */
.custom-section{display:grid;grid-template-columns:1fr 1fr;min-height:990px;background:#f6dbe3;overflow:hidden}.custom-art{position:relative;background:#dba8c9;min-height:700px;display:grid;place-items:center;overflow:hidden}.custom-blob{position:absolute;width:80%;aspect-ratio:1;border-radius:48%;transform:rotate(15deg);background:#f8e9a9;box-shadow:0 0 0 100px #ecc8d64a}.custom-texture{position:relative;width:58%;max-width:380px;transform:rotate(-9deg);filter:drop-shadow(0 34px 15px #49304955)}.custom-texture img{width:100%}.custom-scribble{position:absolute;left:10%;bottom:8%;font:900 clamp(35px,4.2vw,72px)/1 var(--display);letter-spacing:-.05em;transform:rotate(-6deg);color:#472b49}.custom-scribble em{font:italic .9em Georgia;color:#fff6ef}.custom-copy{padding:90px 7vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.custom-copy h2{margin-bottom:20px}.custom-copy p:not(.large-copy){max-width:510px;font-size:16px;color:#665166}.custom-copy .btn{margin-top:24px}.custom-note{font:900 9px Arial;letter-spacing:.09em;margin-top:55px;color:#926c85}.custom-note span{font-size:19px;margin:0 7px}
/* FINAL */
.final-section{min-height:900px;height:100svh;max-height:1150px;background:#261b2e;color:#fff;display:flex;align-items:center;overflow:hidden}.final-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 83% 60%,#8f609877,transparent 43%),radial-gradient(circle at 20% 100%,#6b386e88,transparent 42%)}.final-decor{position:absolute;font:normal 800px/1 Arial;color:#fff2;right:-220px;top:-230px;transform:rotate(-20deg)}.final-yarn img{position:absolute;width:21%;opacity:.7;filter:drop-shadow(0 10px 10px #0005)}.final-yarn img:first-child{left:4%;top:3%;transform:rotate(-30deg)}.final-yarn img:last-child{right:-5%;bottom:7%;transform:rotate(50deg)}.final-copy{position:relative;z-index:7;margin-left:9%;max-width:850px;padding-right:20%;pointer-events:auto}.final-kicker{font:900 12px Arial;letter-spacing:.15em;color:#fcd4e1}.final-kicker span{color:var(--lime)}.final-copy h2{font-size:clamp(65px,7vw,130px);margin:28px 0}.final-copy h2 em{color:#f4a3c5}.final-copy>p:not(.final-kicker){max-width:490px;color:#eddded;font-size:17px}.final-links{display:flex;flex-wrap:wrap;gap:15px 30px;margin-top:44px}.final-links>a{font:900 11px Arial;letter-spacing:.1em;border-bottom:1px solid #ffeff688;padding-bottom:11px}.final-links span{margin-left:14px}.gun-rest-plate{position:absolute;right:6%;bottom:10%;width:27vw;max-width:420px;height:90px;border:3px solid #c5abd047;border-radius:50%;transform:rotate(-12deg);box-shadow:0 3px 1px #d9a8cf35}.gun-rest-shadow{position:absolute;inset:20px 10px;border-radius:50%;background:#10081777;filter:blur(16px)}.gun-rest-note{position:absolute;right:0;top:110px;width:100%;text-align:center;color:#ccb4cf;font:900 9px Arial;letter-spacing:.11em}.gun-rest-note span{color:#dfff85}.final-return{position:absolute;bottom:25px;left:9%;font:900 10px Arial;letter-spacing:.11em;color:#dec8de}.final-return span{margin-left:16px;font-size:18px}.site-footer{min-height:72px;background:#190f20;color:#b5a4bc;display:flex;align-items:center;justify-content:space-between;padding:15px 6vw;gap:10px;font:800 9px Arial;letter-spacing:.12em}.site-footer a{color:#fff}.preview-toast{position:fixed;z-index:200;left:50%;bottom:22px;transform:translateX(-50%);padding:14px 22px;border-radius:12px;background:#35263f;color:white;box-shadow:0 7px 20px #28182f70;font-size:12px;max-width:min(440px,90vw)}
/* responsive */
@media(max-width:1050px){.site-header nav{gap:18px}.motion-toggle{display:none}.hero h1{font-size:clamp(82px,12vw,130px)}.hero-copy{left:6%;width:64%}.character-stage{right:-2%;height:65%}.section-layout{padding:100px 5vw}.tuft-layout{gap:30px}.pile-layout{gap:4vw}.pile-art{min-height:540px}.about-layout{gap:6vw}.custom-copy{padding:75px 5vw}.scene h2{font-size:clamp(54px,7.7vw,98px)}}
@media(max-width:760px){html{scroll-padding-top:70px}.draft-strip{font-size:8px;padding:8px 15px}.strip-right{display:none}.site-header{height:70px;padding:0 18px}.brand-emblem{height:44px;width:44px;font-size:37px}.brand-name{font-size:15px}.site-header nav{display:none}.nav-shop{padding:13px 17px}.hero{min-height:790px;height:calc(100svh - 98px);max-height:none}.hero-photo{background-position:60% center}.hero-shade{background:linear-gradient(180deg,#1d132ddb 0%,#21132ad2 30%,#20112773 58%,#281b3290 100%)}.hero-copy{top:8%;left:6%;width:88%;transform:none;max-width:610px}.hero h1{font-size:clamp(85px,17vw,145px)}.sunburst{right:-27px;top:-3px;font-size:33px}.hero h2{font-size:clamp(21px,4.2vw,34px)}.hero-copy>p{font-size:14px;line-height:1.6;max-width:420px}.hero-line{margin:18px 0}.hero-eyebrow{font-size:9px;margin-bottom:24px}.hero-actions{align-items:flex-start;gap:8px}.hero .btn{min-height:44px;padding:13px 15px;font-size:9px;gap:9px}.character-stage{right:6%;bottom:-3%;height:47%;max-height:420px}.character-sticker{right:-2%;top:3%;font-size:16px;padding:10px}.scroll-cue{left:6%;bottom:18px;font-size:8px}.scene-index{right:15px;bottom:15px}.strand-one{width:26%;left:4%;top:48%}.strand-two{width:24%;right:-4%;top:61%}.strand-three{display:none}.strand-four{width:23%;left:11%;bottom:10%}.clients-band{padding:28px 5%;min-height:140px;display:block}.clients-heading{display:block;max-width:none;text-align:center;margin-bottom:26px}.client-wordmarks{gap:10px}.client-wordmarks .logo-river{font-size:17px}.client-wordmarks .logo-samsung{font-size:20px}.client-wordmarks .logo-itv{font-size:21px}.clients-footnote{display:none}.section-layout{padding:80px 6%}.tuft-section{min-height:1280px}.tuft-layout{display:flex;flex-direction:column;gap:25px}.tuft-copy{width:100%}.tuft-stage{width:100%;min-height:650px}.frame-card{width:min(80%,390px)}.maker-back{left:0}.scene h2{font-size:clamp(63px,12vw,93px)}.tuft-copy h2{font-size:clamp(63px,12vw,93px)}.pile-section{min-height:1040px}.pile-layout{display:flex;flex-direction:column-reverse;gap:35px;padding:90px 7%}.pile-copy{width:100%}.pile-art{width:min(100%,520px);min-height:480px;aspect-ratio:1/1;align-self:center}.about-layout{display:flex;flex-direction:column;padding:90px 7%;gap:35px}.about-gallery{width:min(85%,520px)}.about-photo{aspect-ratio:5/4;border-radius:44% 44% 13% 12%}.about-copy{width:100%}.work-section{padding:100px 6% 80px}.work-head{display:block}.work-intro{width:100%;max-width:450px}.work-head h2{margin-bottom:30px}.projects{grid-template-columns:1fr;gap:35px}.project-image{height:80vw;max-height:500px;min-height:300px}.project-meta{margin-top:12px}.project-meta .project-name{font-size:19px}.shop-section{padding:95px 6%}.shop-header{display:block}.shop-header p{margin:0 0 35px}.shop-categories{gap:8px;flex-wrap:wrap}.shop-categories span{font-size:9px}.product-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:13px;padding-bottom:20px}.product-tile{flex:0 0 min(76vw,360px);scroll-snap-align:start}.product-image{aspect-ratio:4/4.6}.shop-bottom{flex-direction:column;align-items:flex-start}.custom-section{display:flex;flex-direction:column}.custom-art{min-height:470px}.custom-texture{width:49%}.custom-copy{padding:80px 7% 100px}.final-section{min-height:780px;height:100svh}.final-copy{margin:0 7%;padding-right:0;align-self:flex-start;padding-top:100px}.final-copy h2{font-size:clamp(58px,12vw,100px)}.final-copy>p:not(.final-kicker){font-size:14px;max-width:400px}.final-links{margin-top:25px}.final-links>a{font-size:10px}.gun-rest-plate{width:62%;right:7%;bottom:10%;height:70px}.final-return{bottom:18px;left:7%;font-size:8px}.site-footer{flex-wrap:wrap;gap:14px}.site-footer span:nth-child(2){display:none}}
@media(max-width:430px){.hero{min-height:750px}.hero h1{font-size:82px}.hero-eyebrow{letter-spacing:.07em;font-size:8px}.hero-actions{flex-wrap:wrap}.character-stage{height:38%;right:3%;bottom:5%}.character-sticker{font-size:14px;right:0}.clients-band{min-height:133px}.client-wordmarks .logo-river{font-size:14px}.client-wordmarks .logo-samsung{font-size:17px}.client-wordmarks .logo-itv{font-size:19px}.tuft-stage{min-height:500px}.pile-art{min-height:375px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-night,.character-figure,.strand{animation:none!important}.project-image img,.btn{transition:none!important}}
body.light-mode .hero-night,body.light-mode .strand{animation:none!important}body.light-mode .hero-night{opacity:0}body.light-mode .pile-brush{display:none}body.light-mode .gun-layer{transition:none}
/* V5 QA refinements: keep mobile hero copy readable beside the chibi. */
@media(max-width:760px){.hero-copy{top:7%}.hero h2{font-size:clamp(23px,4.4vw,31px);line-height:1.22;white-space:nowrap}.hero-copy>p{max-width:280px;font-size:13px;line-height:1.6}.hero-actions{flex-direction:column;align-items:flex-start;gap:8px}.hero .btn{min-height:42px;width:208px;max-width:100%;padding:10px 14px}.character-stage{height:38%;right:-4%;bottom:0}.character-sticker{top:0;right:10%;}.final-return{max-width:240px;line-height:1.6}}
@media(max-width:430px){.hero h1{font-size:clamp(64px,19vw,77px)}.hero h2{font-size:25px}.hero-copy>p{max-width:248px;font-size:12.5px}.character-stage{height:36%;right:-8%;bottom:1%}.scroll-cue{font-size:8px}.hero-actions{margin-top:3px}}

@media(max-width:430px){.character-stage{height:34%;right:1%;bottom:0}.character-sticker{right:-2%;top:2%}}


/* === V6 COURSE CORRECTION: restore protagonist, photo tufting and approved hand === */
.hero .character-stage {right:6%; height:82%; max-height:785px; bottom:-1%; transform:rotateY(var(--intro-turn,0deg)); transform-origin:center bottom;}
.character-wave-pose{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:96%;max-width:none;object-fit:contain;opacity:0;animation:waveSwap 2.5s ease-in-out infinite;z-index:3;}
@keyframes waveSwap{0%,18%,66%,100%{opacity:0}27%,56%{opacity:1}}
/* Center real character and the frame at comparable physical visual scale. */
.tuft-section{min-height:1120px;background:#f4e6ed;}
.tuft-layout{grid-template-columns:minmax(330px,.78fr) minmax(570px,1.22fr);gap:12px;max-width:1560px;padding:100px 4.5vw;}
.tuft-copy h2{font-size:clamp(61px,5.5vw,102px);letter-spacing:-.05em;}
.tuft-stage{height:810px;min-height:750px;width:100%;position:relative;overflow:visible;}
.tuft-stage .frame-card{position:absolute;right:0;bottom:4%;width:53%;max-width:420px;min-width:320px;transform:rotate(-.6deg);z-index:1;filter:drop-shadow(0 17px 18px #5d3f5233)}
.tuft-stage .frame-scene{position:relative;}
.tuft-stage .reference-frame{display:block;width:100%;} 
.tuft-stage .fabric-overlay{position:absolute;left:16.02%;top:12.71%;width:66.85%;height:64.64%;right:auto;bottom:auto;border-radius:0;background:none;box-shadow:none;opacity:1;overflow:hidden;pointer-events:none;}
.tuft-guide{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
.tuft-stage .fabric-overlay canvas{display:block;position:absolute;inset:0;width:100%;height:100%;filter:none;}
.needle-contact{position:absolute;left:30%;top:30%;width:17px;height:17px;border:2px solid #f8ea5b;border-radius:50%;background:#fff0a1b3;transform:translate(-50%,-50%);z-index:3;opacity:0;box-shadow:0 0 0 6px #dca3ef55,0 0 18px #fff49c;}
.needle-contact:after{content:'';position:absolute;left:6px;top:14px;width:2px;height:16px;background:#e5ef69;transform:rotate(-24deg)}
.working-pose{position:absolute;z-index:3;left:3%;bottom:5%;width:68%;max-width:510px;transform:translateY(var(--stitch-nudge,0px));filter:drop-shadow(0 22px 13px #2a1a2955);pointer-events:none;}
.working-pose img{display:block;width:100%;height:auto;}
.working-pose:after{content:'';position:absolute;right:8.9%;top:25.9%;width:7px;height:7px;border-radius:50%;background:#fff3a6;box-shadow:0 0 12px 3px #d9f19eac;animation:stitchGlow .22s ease-in-out infinite alternate;}
@keyframes stitchGlow{to{opacity:.32;transform:scale(.7)}}
.working-shadow{position:absolute;left:15%;bottom:1.5%;width:50%;height:14px;border-radius:100%;background:#1a101454;filter:blur(12px);z-index:-1;}
.stitch-caption{position:absolute;bottom:1.3%;left:7%;z-index:6;max-width:50%;font:900 10px Arial,sans-serif;letter-spacing:.1em;color:#9c738e;}
.frame-stamp{bottom:1%;font-size:9px;}
.tuft-stage .work-arrow,.tuft-stage .maker-back{display:none;}
/* Preserve the approved real hand-in-wool image. No emoji or superficial overlay icon. */
.pile-section{background:#f0eaf0;min-height:950px;}
.pile-layout{grid-template-columns:1.02fr .98fr;gap:6.2vw;}
.pile-art{min-height:640px;aspect-ratio:1;max-width:640px;border-radius:28%;transform:rotate(-2deg);background:transparent;box-shadow:none;overflow:visible;cursor:crosshair;}
.pile-art .pile-base{position:relative;width:100%;height:100%;object-fit:contain;transform:none;filter:drop-shadow(0 22px 19px #61486e30);} 
.pile-pressure{pointer-events:none;position:absolute;inset:0;opacity:0;transition:opacity .18s;background:radial-gradient(circle 48px at var(--px,48%) var(--py,54%),#1e14274a,transparent 96%);mix-blend-mode:multiply;mask-image:url('assets/rug-hand-in-pile.webp');mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:url('assets/rug-hand-in-pile.webp');-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;}
.pile-art .pile-cursor,.pile-art .pile-brush{display:none;}
.pile-label{top:0;left:0;transform:rotate(-8deg);font-size:11px;padding:10px 12px;}
@media(max-width:1050px){.tuft-layout{grid-template-columns:minmax(300px,.80fr) minmax(470px,1.20fr);gap:0;padding:85px 3vw;}.tuft-stage{height:740px;min-height:680px;}.working-pose{width:68%;left:3%;}.tuft-stage .frame-card{width:56%;min-width:285px;}}
@media(max-width:760px){.hero .character-stage{right:2%;height:48%;bottom:-1%;}.tuft-section{min-height:1100px;}.tuft-layout{display:flex;flex-direction:column;gap:20px;padding:70px 6%;}.tuft-copy h2{font-size:clamp(60px,12vw,88px);}.tuft-stage{height:600px;min-height:590px;width:100%;}.tuft-stage .frame-card{width:55%;min-width:0;right:0;bottom:7%;}.working-pose{width:69%;left:-2%;bottom:10%;}.stitch-caption{bottom:0;left:1%;font-size:8px;}.pile-art{min-height:0;aspect-ratio:1;width:min(95%,500px);}.pile-layout{gap:30px;}.pile-section{min-height:930px;}.pile-copy .support-copy{max-width:490px;} }
@media(max-width:430px){.hero .character-stage{height:39%;right:0;bottom:0;}.tuft-section{min-height:1050px;}.tuft-stage{height:455px;min-height:455px;}.tuft-stage .frame-card{width:56%;bottom:4%;}.working-pose{width:70%;left:-1%;bottom:4%;}.stitch-caption{bottom:-20px;}.pile-section{min-height:890px;}.pile-layout{padding-top:70px;}.pile-art{min-height:0;width:96%;}}
@media(prefers-reduced-motion:reduce){.character-wave-pose{animation:none!important;opacity:0!important}}

/* === WANG STUDIO SECTION 01 / V7 immersive revision === */
html { scroll-padding-top: 82px; }
body { background:#1e1326; }
.draft-strip{display:none!important}
.site-header{position:fixed;top:0;left:0;right:0;z-index:110;height:83px;padding:0 clamp(20px,4.2vw,88px);color:#fff;background:rgba(28,14,34,.20);border-bottom:1px solid #ffffff26;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);transition:background .3s ease}
.site-header.beyond-hero{background:rgba(29,18,38,.80)}
.site-header .brand{color:#fff;gap:12px}
.site-header .brand-emblem{width:48px;height:48px;background:transparent;color:#fff;border:2px solid #fff;border-radius:13px;transform:rotate(-10deg);font-size:37px}
.site-header .brand .asterisk{right:-7px;top:-5px;color:var(--lime);font-size:15px;transform:rotate(25deg)}
.site-header .brand-name{font-size:clamp(14px,1.15vw,18px);letter-spacing:.035em;white-space:nowrap}
.site-header .brand-name strong{color:var(--pink)}
.site-header .brand-name small{color:#ffe5ef;font-size:7px;letter-spacing:.16em}
.site-header nav{gap:clamp(16px,2.3vw,40px);margin-left:auto}
.site-header nav a{color:#fff;opacity:.84;font-size:clamp(8px,.69vw,11px);font-weight:900;letter-spacing:.15em}
.site-header nav a:hover{color:#ffd4e7;opacity:1}
.site-header .motion-toggle{color:#fff;border:1px solid #ffffffa3;background:#ffffff1f;padding:13px 17px;font-size:9px}
.site-header .motion-toggle span{margin-left:8px;font-size:13px}
.site-header .nav-shop{padding:15px 20px;background:#fc80ae;color:#271326;border-radius:3px;font-size:11px;gap:15px;box-shadow:0 4px 30px #e8478e25;white-space:nowrap}
.site-header .nav-shop:hover{background:#ffaccd}
.site-header .nav-shop svg{flex:0 0 15px}
.opening-story{position:relative;height:390vh;min-height:2100px;background:#21162c;isolation:isolate}
.opening-story .hero{position:sticky;top:0;left:0;display:block;width:100%;height:100svh;min-height:630px;max-height:none;overflow:hidden;color:#fff;background:#25152d}
.opening-story .hero-photo{background-image:url('assets/studio-day.webp');background-position:center 50%;background-size:cover;transform:scale(1.035) translateY(var(--studio-parallax,0px));will-change:transform}
.opening-story .hero-night{background-image:url('assets/studio-evening.webp');animation:none;opacity:.25;mix-blend-mode:screen}
.opening-story .hero-shade{background:linear-gradient(90deg,#1b1127ee 0%,#21152cd9 25%,#28152b81 52%,#21132d57 80%,#1b122760 100%),linear-gradient(0deg,#1f122ccc,transparent 32%)}
.opening-story .hero-grain{opacity:.055}
.opening-story .hero-copy{position:absolute;left:clamp(30px,5vw,105px);top:50%;width:min(39vw,540px);max-width:540px;transform:translateY(-45%);z-index:7;will-change:opacity;transition:none}
.opening-story .hero h1{font:900 clamp(85px,8.7vw,154px)/.87 Impact,'Arial Black',sans-serif;letter-spacing:.006em;transform:none;text-shadow:0 12px 24px #1b0c2866;margin:0 0 0 -4px;white-space:nowrap}
.opening-story .hero h1>span{color:#ffd7e9;letter-spacing:.012em}
.opening-story .sunburst{font-size:clamp(20px,2.9vw,39px);right:-32px;top:-7px}
.opening-story .hero-line{margin:24px 0 24px;width:min(440px,96%);background:#fff5}
.opening-story .hero h2{font:900 clamp(27px,2.55vw,44px)/1.13 var(--sans);letter-spacing:-.04em;text-transform:none;margin:0 0 18px}
.opening-story .hero h2 em{color:#ffd2bc;font:italic 500 1em Georgia,serif;letter-spacing:-.03em}
.opening-story .hero-copy>p{max-width:465px;margin:0 0 10px;font-size:clamp(12.5px,.97vw,16px);color:#fff1f7;line-height:1.54}
.opening-story .hero-copy .hero-personal{font-size:clamp(12px,.94vw,15px);color:#f4dce9;line-height:1.6;margin-top:12px}
.opening-story .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.opening-story .btn{min-height:46px;font-size:9.5px;letter-spacing:.055em;padding:12px 17px}
/* Character begins in the middle; pose sheets are isolated, no new sprite generation. */
.opening-story .character-stage{position:absolute;left:50%;right:auto;bottom:3%;width:min(27vw,385px);height:min(72vh,690px);z-index:6;transform:translateX(calc(-50% + var(--move-x,0px)));aspect-ratio:auto;max-height:none;filter:drop-shadow(0 17px 14px #10091c99);pointer-events:none}
.opening-story .character-stage .story-pose{position:absolute;bottom:0;left:50%;width:auto;height:100%;max-width:none;object-fit:contain;transform-origin:center bottom;will-change:transform,opacity;pointer-events:none}
.opening-story .character-stage .pose-front,.opening-story .character-stage .pose-wave{transform:translateX(-50%);height:100%;width:auto;max-width:none}
.opening-story .character-stage .pose-back{opacity:0;height:100%;width:auto;transform:translateX(-50%) rotateY(80deg)}
.opening-story .character-stage .pose-working{opacity:0;height:113%;width:auto;bottom:-3%;left:61%;transform:translateX(-41%) translateY(var(--work-nudge,0px));filter:none}
.opening-story .character-stage .character-shadow{bottom:0;left:11%;right:11%;opacity:.65}
.opening-story .character-sticker{left:56%;right:auto;top:25%;z-index:9;font-size:17px;padding:9px 13px;pointer-events:none;will-change:opacity}
.opening-story .opening-frame{position:absolute;right:clamp(18px,3.7vw,92px);bottom:6%;width:min(30vw,430px);aspect-ratio:1086/1448;z-index:5;filter:drop-shadow(0 19px 21px #12091870);pointer-events:none}
.opening-story .opening-frame-photo{display:block;width:100%;height:100%;object-fit:contain}
.opening-story .opening-frame .fabric-overlay{position:absolute;left:16.02%;top:12.71%;width:66.85%;height:64.64%;opacity:1;right:auto;bottom:auto;border-radius:0;overflow:hidden;box-shadow:none;background:none}
.opening-story .opening-frame .tuft-guide{position:absolute;inset:0;width:100%;height:100%;opacity:.36}
.opening-story .opening-frame .fabric-overlay canvas{position:absolute;inset:0;display:block;width:100%;height:100%;filter:none}
.opening-story .opening-frame .frame-stamp{position:absolute;bottom:2%;left:16%;padding:10px 14px;background:#f9f4e9;color:#342136;border-radius:100px;font:900 10px Arial;transform:rotate(-2deg)}
.opening-story .opening-frame .frame-stamp span{color:#f083ad}
.opening-story .frame-hang-hook{position:absolute;top:18%;left:1%;height:19%;width:1.5px;background:#fbe2b359;transform:rotate(-14deg);opacity:.75}
.opening-story .yarn-to-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:15}
.opening-story .needle-contact{position:absolute;z-index:18;width:9px;height:9px;background:#f4ffaf;box-shadow:0 0 8px 3px #bdff5b88;border-radius:100%;opacity:0;pointer-events:none}
.opening-story .needle-contact:after{display:none}
.opening-story .story-work-copy{position:absolute;z-index:9;left:clamp(30px,5vw,105px);top:45%;width:min(32vw,470px);opacity:0;pointer-events:none;color:#fff;will-change:transform,opacity}
.opening-story .tool-eyebrow{font:900 clamp(9px,.85vw,13px)/1.5 var(--sans);letter-spacing:.13em;color:#fff;text-transform:uppercase}
.opening-story .tool-dot{display:inline-block;width:45px;height:3px;margin-right:12px;vertical-align:middle;background:var(--pink)}
.opening-story .story-work-copy h2{font:italic 500 clamp(32px,3.2vw,56px)/1.1 Georgia,serif;text-transform:none;letter-spacing:-.055em;margin:15px 0 24px}
.opening-story .story-work-copy h2 em{color:#fff}
.opening-story .story-work-copy>p:not(.stitch-instruction){font-size:clamp(13px,1.05vw,17px);line-height:1.65;color:#ffeff6;max-width:385px;margin-bottom:32px}
.opening-story .story-work-copy .work-meter{font:900 11px Arial;letter-spacing:.08em;display:flex;justify-content:space-between;color:#fff3f8}
.opening-story .story-work-copy .meter-track{margin:13px 0 20px;height:6px;background:#fff5;max-width:none}
.opening-story .story-work-copy .meter-track>div{background:linear-gradient(90deg,var(--pink),var(--violet),var(--lime));height:100%}
.opening-story .stitch-instruction{font:800 10px/1.7 Arial,sans-serif;letter-spacing:.12em;color:#f6d5e7;max-width:430px}
.opening-story .floating-yarn{z-index:8;pointer-events:none}
.opening-story .floating-yarn .strand{animation:none!important;translate:none!important;pointer-events:auto;touch-action:none;user-select:none;filter:drop-shadow(0 7px 6px #1f122844)}
.opening-story .strand-one{width:11%;left:61%;top:12%}
.opening-story .strand-two{width:10%;right:-2%;top:43%}
.opening-story .strand-three{width:9%;left:-3%;bottom:9%}
.opening-story .strand-four{width:8%;left:45%;bottom:7%}
.opening-story .scroll-cue{left:5vw;bottom:30px;font-size:9px;white-space:nowrap}
.opening-story .scene-index{right:30px;bottom:25px}
/* Later page remains the agreed V6 layout. The old separate stitch scene has been integrated above. */
.gun-layer{z-index:10;pointer-events:none}
.gun-layer canvas{pointer-events:none}
@media(max-width:1200px){
 .site-header{padding:0 3vw}.site-header nav{gap:13px}.site-header .nav-shop{padding:13px}
 .opening-story .hero-copy{left:4.2vw;width:41vw}.opening-story .hero h1{font-size:clamp(76px,8.1vw,115px)}
 .opening-story .character-stage{left:54%;height:min(65vh,570px)}
 .opening-story .opening-frame{right:2vw;width:29vw}
 .opening-story .story-work-copy{left:4.5vw}
}
@media(max-width:850px){
 .site-header{height:71px;padding:0 4vw;gap:7px}
 .site-header nav{display:none}.site-header .brand-emblem{width:39px;height:39px;font-size:31px}.site-header .brand-name{font-size:13px}.site-header .brand-name small{font-size:6px}
 .site-header .nav-shop{font-size:9px;padding:11px 10px;gap:6px}.site-header .motion-toggle{padding:11px 8px;font-size:8px}
 .opening-story{height:345vh;min-height:2000px}
 .opening-story .hero{min-height:600px}
 .opening-story .hero-copy{top:17%;left:6vw;width:65vw;transform:none}
 .opening-story .hero h1{font-size:clamp(78px,13.6vw,117px)}
 .opening-story .hero h2{font-size:clamp(23px,3.4vw,34px)}
 .opening-story .hero-copy>p{font-size:clamp(12px,1.8vw,14px);max-width:470px}
 .opening-story .hero-copy .hero-personal{font-size:clamp(11px,1.7vw,13px)}
 .opening-story .hero-actions{margin-top:12px}
 .opening-story .character-stage{height:46%;width:240px;left:45%;bottom:1%}
 .opening-story .opening-frame{width:40%;right:1%;bottom:4%}
 .opening-story .story-work-copy{top:20%;left:6vw;width:53%}
 .opening-story .story-work-copy h2{font-size:clamp(30px,4vw,45px)}
 .opening-story .floating-yarn .strand{opacity:.8}.opening-story .strand-one{left:74%;top:7%}.opening-story .strand-three{display:none}
 .opening-story .character-sticker{top:56%;left:42%}
 .opening-story .scroll-cue{bottom:16px;font-size:8px}
}
@media(max-width:500px){
 .site-header{height:64px;gap:4px;padding:0 4%}.site-header .brand{gap:6px}
 .site-header .brand-emblem{width:35px;height:35px;font-size:27px;border-radius:9px}.site-header .brand-name{font-size:11px}.site-header .brand-name small{font-size:5px}
 .site-header .motion-toggle{padding:10px 7px;font-size:7px}.site-header .motion-toggle span{display:none}.site-header .nav-right{gap:5px}.site-header .nav-shop{font-size:8px;padding:10px 8px;gap:5px}.site-header .nav-shop svg{width:12px}
 .opening-story{height:335vh;min-height:1900px}
 .opening-story .hero{min-height:650px}
 .opening-story .hero-shade{background:linear-gradient(180deg,#1d1028e8 0%,#21132fc7 38%,#2716318c 74%,#211627a6 100%)}
 .opening-story .hero-copy{left:6%;top:11%;width:91%;max-width:none}
 .opening-story .hero h1{font-size:clamp(67px,20.4vw,90px);line-height:.87;letter-spacing:0}
 .opening-story .hero-line{margin:12px 0 12px;width:83%}
 .opening-story .hero h2{font-size:clamp(23px,6.1vw,31px);line-height:1.06;margin:0 0 10px}
 .opening-story .hero-copy>p{max-width:340px;font-size:11px;line-height:1.38;margin:0 0 6px}
 .opening-story .hero-copy .hero-personal{font-size:11px;max-width:340px;line-height:1.35;margin-top:6px}
 .opening-story .hero-actions{margin-top:11px;gap:7px;flex-direction:row;align-items:center;flex-wrap:wrap}
 .opening-story .hero .btn{width:auto;min-height:36px;max-width:none;font-size:8px;padding:10px 11px}
 .opening-story .hero .btn span{font-size:12px}
 .opening-story .character-stage{left:41%;bottom:1%;height:40%;width:33vw;max-width:none}
 .opening-story .character-stage .pose-working{height:110%;left:57%}
 .opening-story .opening-frame{width:51%;right:1%;bottom:4.5%}
 .opening-story .opening-frame .frame-stamp{font-size:7px;padding:6px 8px}
 .opening-story .character-sticker{left:30%;top:63%;font-size:13px;padding:6px 7px}
 .opening-story .story-work-copy{top:13%;left:6%;width:82%;max-width:none}
 .opening-story .story-work-copy h2{font-size:35px;margin:8px 0 10px}
 .opening-story .story-work-copy>p:not(.stitch-instruction){font-size:13px;margin-bottom:14px}
 .opening-story .story-work-copy .work-meter{font-size:9px}
 .opening-story .stitch-instruction{font-size:8px}
 .opening-story .scroll-cue{left:6%;gap:8px;font-size:7px;bottom:9px}.opening-story .scroll-line{width:28px}
 .opening-story .scene-index{font-size:8px;right:9px;bottom:10px}
 .opening-story .floating-yarn .strand{opacity:.7}.opening-story .strand-one{top:3%;left:77%;width:22%}.opening-story .strand-two{top:45%;width:15%}.opening-story .strand-four{left:4%;bottom:7%;width:16%}
}
@media(prefers-reduced-motion:reduce){.opening-story .hero-photo{transform:none}.opening-story .floating-yarn .strand{transform:none!important}}
body.light-mode .opening-story .hero-photo{transform:none}

/* Returned V3.1 floating yarn balls, in addition to the newer loose wool strands. */
.opening-story .floating-yarn .yarn-ball{filter:drop-shadow(0 11px 9px #140a245e);width:clamp(76px,6.6vw,124px);z-index:1;opacity:.96}
.opening-story .floating-yarn .ball-orange{left:61.5%;top:8.5%}
.opening-story .floating-yarn .ball-blue{right:1%;top:32%}
.opening-story .floating-yarn .ball-lilac{left:43%;bottom:6%}
@media(max-width:850px){.opening-story .floating-yarn .ball-orange{left:80%;top:9%}.opening-story .floating-yarn .ball-blue{right:-6%;top:43%}.opening-story .floating-yarn .ball-lilac{left:2%;bottom:4%}}
@media(max-width:500px){.opening-story .floating-yarn .yarn-ball{width:64px}.opening-story .floating-yarn .ball-orange{right:2%;left:auto;top:12%}.opening-story .floating-yarn .ball-blue{right:-15px;top:52%;width:58px}.opening-story .floating-yarn .ball-lilac{left:-18px;bottom:8%;width:52px}}

/* --- V8 Section 01 refinements --- */
.opening-story .hero-copy{z-index:9}
.opening-story .hero h1{letter-spacing:.028em;line-height:.84}
.opening-story .hero h1>span{letter-spacing:.038em}
.opening-story .hero h2{max-width:460px}
.opening-story .character-stage{width:min(28vw,400px);height:min(73vh,700px)}
.opening-story .character-stage .pose-front,
.opening-story .character-stage .pose-wave,
.opening-story .character-stage .pose-back{height:100%}
.opening-story .character-stage .pose-working{height:103%;left:56%;bottom:-1%;transform:translateX(calc(-45% + var(--work-x,0px))) translateY(var(--work-nudge,0px)) rotate(var(--work-rot,0deg));transform-origin:58% 68%}
.opening-story .opening-frame{right:clamp(10px,2.6vw,56px);bottom:5.3%;width:min(30vw,435px)}
.opening-story .character-sticker{left:57%;top:20%;padding:0;background:none;border:0;box-shadow:none;transform:rotate(-8deg);font:italic 900 clamp(22px,2vw,34px)/1 Georgia,serif;color:#ff5ba6;text-shadow:0 3px 0 #fff, 0 7px 18px rgba(34,11,26,.45);letter-spacing:-.04em;opacity:0;animation:stickerBob 2.2s ease-in-out infinite;white-space:nowrap}
.opening-story .character-sticker .sticker-main{display:inline-block;filter:drop-shadow(0 1px 0 #ffffff)}
@keyframes stickerBob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-10deg) translateY(-6px)}}
.opening-story .story-work-copy{left:clamp(28px,5vw,104px);top:auto;bottom:18.5%;width:min(28vw,320px);padding:14px 16px 16px;border:1px solid rgba(255,240,247,.25);background:linear-gradient(180deg,rgba(22,11,31,.52),rgba(22,11,31,.18));backdrop-filter:blur(8px);border-radius:18px;box-shadow:0 16px 34px rgba(18,8,25,.22);will-change:transform,opacity}
.opening-story .story-work-copy .tool-eyebrow{font-size:10px;margin-bottom:6px}
.opening-story .story-work-copy h2{font-size:clamp(24px,2.2vw,38px);margin:5px 0 12px}
.opening-story .story-work-copy>p:not(.stitch-instruction){font-size:clamp(11.5px,.88vw,14px);line-height:1.5;margin-bottom:14px}
.opening-story .story-work-copy .work-meter{font-size:9px}
.opening-story .story-work-copy .meter-track{margin:10px 0 13px;height:5px}
.opening-story .stitch-instruction{font-size:9px}
.opening-story .floating-yarn .strand{opacity:.96}
.opening-story .strand-five{width:10%;left:73%;top:12%}
.opening-story .strand-six{width:11.5%;right:6%;top:18%}
.opening-story .strand-seven{width:13%;left:77%;bottom:18%}
.opening-story .strand-eight{width:10%;left:36%;top:58%}
.opening-story .floating-yarn .ball-orange{left:59%;top:4%}
.opening-story .floating-yarn .ball-blue{right:-1.2%;top:24%}
.opening-story .floating-yarn .ball-lilac{left:42%;bottom:3%}
.opening-story .opening-frame .tuft-guide{opacity:.22}
.opening-story .opening-frame .fabric-overlay canvas{filter:drop-shadow(0 0 2px rgba(64,44,34,.12))}
@media(max-width:850px){
 .opening-story .story-work-copy{bottom:16%;width:min(45vw,300px)}
 .opening-story .character-sticker{left:48%;top:52%;font-size:24px}
 .opening-story .strand-five{left:82%;top:9%;width:15%}
 .opening-story .strand-six{right:0;top:25%;width:16%}
 .opening-story .strand-seven{left:73%;bottom:22%;width:18%}
 .opening-story .strand-eight{left:7%;top:53%;width:14%}
}
@media(max-width:500px){
 .opening-story .hero h1{letter-spacing:.012em}
 .opening-story .character-stage{left:40%;width:34vw;height:41%}
 .opening-story .character-stage .pose-working{height:101%;left:55%}
 .opening-story .story-work-copy{bottom:15%;left:6%;width:80%;padding:12px 13px}
 .opening-story .character-sticker{left:29%;top:58%;font-size:18px}
 .opening-story .floating-yarn .ball-orange{top:10%;right:3%;left:auto}
 .opening-story .floating-yarn .ball-blue{right:-20px;top:49%}
 .opening-story .floating-yarn .ball-lilac{left:-8px;bottom:8%}
 .opening-story .strand-five{display:none}
 .opening-story .strand-six{right:-3%;top:28%;width:21%}
 .opening-story .strand-seven{left:71%;bottom:18%;width:22%}
 .opening-story .strand-eight{left:9%;top:62%;width:18%}
}

/* V9 corrections: only one rendered character layer, stable scale for every pose. */
.opening-story .character-stage .story-pose{visibility:hidden;opacity:0;transition:none!important}
.opening-story .character-stage .pose-front{visibility:visible;opacity:1}
.opening-story .character-stage .pose-back{height:104%;bottom:-1%;left:50%;transform:translateX(-50%)}
.opening-story .character-stage .pose-working{height:100%;bottom:0;left:56%;transform:translateX(calc(-45% + var(--work-x,0px))) translateY(var(--work-nudge,0px)) rotate(var(--work-rot,0deg))}
.opening-story .hero-copy .hero-personal{max-width:480px;line-height:1.65}
.opening-story .hero h2{margin-bottom:20px}
.opening-story .opening-frame .tuft-guide{opacity:.17}
.opening-story .story-work-copy{bottom:15%;z-index:12}
.opening-story .needle-contact{width:7px;height:7px}
.opening-story .yarn-to-frame #yarn-feed-path{stroke-width:5px;filter:drop-shadow(0 0 3px #dcff7a)}
.opening-story .opening-frame{z-index:6}
.opening-story .character-stage{z-index:7}
.opening-story .hero-copy{z-index:9}
.opening-story .floating-yarn{z-index:8}
@media(max-width:850px){.opening-story .character-stage .pose-working{height:99%}}
@media(max-width:500px){.opening-story .hero-copy .hero-personal{font-size:12px;line-height:1.5}.opening-story .character-stage .pose-working{height:99%}}

/* Foreground-frame depth ordering and GPU budgets (not decorative changes). */
.opening-story .floating-yarn{z-index:4}
.opening-story .floating-yarn .strand{filter:none;will-change:transform}
.opening-story .character-stage{filter:none}
.opening-story .hero-night{mix-blend-mode:normal;opacity:.15}
.gun-layer #gun-fallback{transform-origin:center center}

/* Tiny AK-V tool caption beside the working area, never covering the hero text. */
.opening-story .story-work-copy{top:20%;left:52%;bottom:auto;width:min(24vw,276px);padding:12px 14px;border-radius:14px}
.opening-story .story-work-copy h2{font-size:clamp(24px,2vw,34px);margin:5px 0 0}
.opening-story .story-work-copy>p,.opening-story .story-work-copy .work-meter,.opening-story .story-work-copy .meter-track{display:none}
@media(max-width:850px){.opening-story .story-work-copy{top:43%;left:auto;right:3%;width:34vw;max-width:200px;padding:9px 11px}.opening-story .story-work-copy h2{font-size:22px}}
@media(max-width:500px){.opening-story .story-work-copy{top:45%;left:auto;right:3%;width:41vw;padding:8px 10px}.opening-story .story-work-copy h2{font-size:17px}.opening-story .story-work-copy .tool-eyebrow{font-size:7px}.opening-story .story-work-copy .tool-dot{width:10px;margin-right:4px}}
/* Keep the opening cinematic without forcing visitors through nearly four screens of scrolling. */
.opening-story{height:300vh}
@media(max-width:500px){.opening-story{height:290vh}}

/* ===========================================================================
 WANG STUDIO V11 — GREEN-CIRCLED FRAME CORRECTION. All edits override V10.
 No background-frame interactions, no back-of-head pose, measured aiming rig.
 =========================================================================== */
.opening-story .opening-frame{
 right:clamp(105px,10.6vw,250px); /* brings the foreground cloth IN FRONT of the background frame */
 bottom:4.2%; width:min(28vw,410px); z-index:8;
 filter:drop-shadow(0 14px 23px rgba(12,5,18,.38));
}
.opening-story .character-stage{left:46.5%;z-index:9}
.opening-story .character-stage .pose-working{
 left:56%;transform:translateX(calc(-45% + var(--work-x,0px) + var(--aim-x,0px))) translateY(calc(var(--work-nudge,0px) + var(--aim-y,0px))) rotate(var(--work-rot,0deg));
}
.opening-story .character-stage .pose-back{display:none!important}
/* No fake luminous thread joining the wrong, background frame. */
.opening-story .yarn-to-frame{display:none}
.opening-story .front-gun-hook{
 position:absolute;left:27.7%;top:10.2%;width:9%;height:5.5%;z-index:11;
 border:3px solid #b8865d;border-top:0;border-radius:0 0 8px 8px;
 transform:rotate(7deg);box-shadow:0 2px 2px #40241944;
}
.opening-story .front-gun-hook span{display:block;position:absolute;width:44%;height:15%;background:#99715d;top:-3px;left:27%;border-radius:9px}
/* The greeting is intentionally noticeable during the wave. */
.opening-story .character-sticker{
 left:52%;top:13%;right:auto;z-index:13;
 font:900 clamp(37px,4.5vw,80px)/.95 Georgia,serif;
 color:#ffd0e7;background:none;border:0;border-radius:0;box-shadow:none;
 padding:7px 12px;text-shadow:0 4px 0 #5f214b,0 8px 12px #140a1d94;
 transform:rotate(-9deg) scale(var(--hi-scale,1));transform-origin:bottom left;
}
.opening-story .character-sticker .sticker-main{font-family:Georgia,serif;font-style:italic;letter-spacing:-.06em;color:inherit}
/* Yarn fibres no longer cluster at the right wall; floor gets visible colourful detail. */
.opening-story .floating-yarn{z-index:10}
.opening-story .floating-yarn .strand{filter:drop-shadow(0 7px 4px #150b2140)}
.opening-story .floating-yarn .yarn-ball{width:clamp(90px,9vw,156px)}
.opening-story .floating-yarn .ball-orange{left:56%;top:1%;right:auto;bottom:auto;width:clamp(87px,8vw,131px)}
.opening-story .floating-yarn .ball-blue{left:10%;top:67%;right:auto;bottom:auto;width:clamp(87px,8.5vw,138px)}
.opening-story .floating-yarn .ball-lilac{left:35%;top:auto;bottom:-1%;right:auto;width:clamp(100px,9.8vw,168px)}
.opening-story .floating-yarn .ball-pink{left:67%;top:auto;bottom:2%;width:clamp(82px,7.7vw,137px)}
.opening-story .strand-one{left:53%;top:9%;width:10%}
.opening-story .strand-two{left:13%;top:48%;right:auto;width:9%}
.opening-story .strand-three{left:-2%;bottom:8%;width:9%}
.opening-story .strand-four{left:77%;bottom:15%;width:8%}
.opening-story .strand-five{left:75%;top:12%;width:9%}
.opening-story .strand-six{left:24%;top:72%;right:auto;width:9%}
.opening-story .strand-seven{left:53%;bottom:9%;width:11%}
.opening-story .strand-eight{left:36%;top:53%;width:10%}
.opening-story .opening-frame .needle-contact{width:6px;height:6px;box-shadow:0 0 5px 2px #d5ff7b55}
@media(max-width:1100px){
 .opening-story .opening-frame{right:5.5vw;width:38vw;bottom:7%}
 .opening-story .character-stage{left:45%;}
 .opening-story .character-sticker{left:48%;top:42%;font-size:clamp(28px,5vw,48px)}
 .opening-story .floating-yarn .ball-pink{left:70%;bottom:3%}
}
@media(max-width:760px){
 .opening-story .hero{min-height:640px}
 .opening-story .opening-frame{right:-1.5%;bottom:6%;width:48%;max-width:none}
 .opening-story .character-stage{left:32%;bottom:4%;height:39%}
 .opening-story .character-stage .pose-working{height:100%}
 .opening-story .character-sticker{left:44%;top:43%;font-size:clamp(32px,8.5vw,54px)}
 .opening-story .floating-yarn .yarn-ball{width:76px}
 .opening-story .floating-yarn .ball-orange{left:auto;right:10%;top:5%;width:70px}
 .opening-story .floating-yarn .ball-blue{left:0;top:58%;width:67px}
 .opening-story .floating-yarn .ball-lilac{left:26%;bottom:-1%;width:88px}
 .opening-story .floating-yarn .ball-pink{left:auto;right:0;bottom:2%;width:68px}
 .opening-story .strand-one{left:78%;top:20%;width:19%}
 .opening-story .strand-two{left:9%;top:53%;width:23%}
 .opening-story .strand-three{display:none}
 .opening-story .strand-four{left:72%;bottom:25%;width:18%}
 .opening-story .strand-five{display:none}
 .opening-story .strand-six{left:7%;top:68%;width:22%}
 .opening-story .strand-seven{left:58%;bottom:1%;width:20%}
 .opening-story .strand-eight{left:39%;top:57%;width:15%}
}
@media(prefers-reduced-motion:reduce){
 .opening-story .floating-yarn .strand{transform:none!important}
 .opening-story .character-sticker{transform:rotate(-8deg)}
}

/* V11 visual QA: keep loose yarn AWAY from faces, headlines and shopping CTAs. */
.opening-story .floating-yarn{z-index:7}
.opening-story .floating-yarn .ball-blue{left:23%;top:auto;bottom:-2%}
.opening-story .strand-two{left:27%;top:77%}
.opening-story .strand-six{left:14%;top:86%}
.opening-story .strand-eight{left:34%;top:86%}
.opening-story .character-sticker{left:52%;top:25%}
@media(max-width:760px){
 .opening-story .floating-yarn .ball-blue{left:0;top:59%;bottom:auto}
 .opening-story .strand-two{left:4%;top:56%;width:19%}
 .opening-story .strand-six{left:10%;top:84%;width:19%}
 .opening-story .strand-eight{left:61%;top:82%;width:16%}
 .opening-story .character-sticker{left:44%;top:43%;}
}

.opening-story .floating-yarn .ball-orange{top:10%}
.opening-story .floating-yarn .ball-pink{left:62%}
@media(max-width:760px){.opening-story .floating-yarn .ball-orange{top:9%;right:10%;left:auto}.opening-story .floating-yarn .ball-pink{right:0;left:auto}}

/* ==========================================================================
  V12 — GPU-cost-aware Section 01 improvements; overrides older versions.
  - Yarn sprites live in their own fixed viewport portal, not hero overflow.
  - Only the needle line and existing embroidered design appear on foreground cloth.
  - Avoid double full-bleed photo layers and expensive blend filters.
   ========================================================================== */
.opening-story .hero-night{display:none!important}
.opening-story .hero-grain{opacity:.025;pointer-events:none}
.opening-story .hero-photo{transform:scale(1.007);will-change:auto}
.opening-story .character-stage{filter:none!important}
.opening-story .opening-frame{filter:drop-shadow(0 10px 13px rgba(12,5,18,.30))}
.opening-story .opening-frame .fabric-overlay canvas{filter:none!important}
.opening-story .story-work-copy{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(25,11,35,.72)}
.opening-story .needle-contact{width:7px;height:7px;box-shadow:0 0 6px 2px #c7ff7c9c}
.opening-story .stitch-fx{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:8;pointer-events:none;overflow:visible;opacity:0;will-change:opacity;transition:none}
.opening-story .stitch-fx path{stroke-linejoin:round}
/* Portal is positioned relative to the SCREEN. Dragging is not clipped by hero. */
#floating-yarn.yarn-viewport{position:fixed!important;inset:0!important;z-index:92!important;overflow:visible!important;pointer-events:none!important;transform:none!important;contain:layout style;}
#floating-yarn.yarn-viewport .strand{pointer-events:auto;position:absolute;right:auto;bottom:auto;left:0;top:0;max-width:none;touch-action:none;cursor:grab;user-select:none;animation:none!important;filter:none!important;will-change:transform;}
#floating-yarn.yarn-viewport .strand:active{cursor:grabbing}
/* No large translucent overlays competing with the yarn/character. */
.opening-story .floating-yarn .strand{backdrop-filter:none}
.gun-layer{transition:none!important;pointer-events:none;}
.gun-layer canvas{will-change:auto}
.gun-layer.fallback #gun-fallback{width:390px;filter:drop-shadow(0 5px 6px rgba(14,8,21,.25))}
/* Make the metal clip credible while the tool hangs vertically. */
.opening-story .front-gun-hook{z-index:13;border-width:3px;border-color:#b58a6b;box-shadow:0 0 0 1px #704a3254,0 2px 3px #17101647}
/* Leave large character-and-bunny compositions entirely untouched on desktop. */
@media(max-width:760px){
 .opening-story .stitch-fx{z-index:8}
 .opening-story .front-gun-hook{border-width:2px}
 #floating-yarn.yarn-viewport .strand{filter:none!important}
}
@media(prefers-reduced-motion:reduce){
 #floating-yarn.yarn-viewport .strand{animation:none!important}
}
/* V12 mobile QA: keep Jamie's boots visible while the gun traces the bunny. */
@media(max-width:760px){
 .opening-story .character-stage{bottom:10%;height:37%}
 .opening-story .opening-frame{bottom:7%}
}
@media(max-width:500px){
 .opening-story .character-stage{bottom:11%;height:36.5%}
 .opening-story .opening-frame{bottom:7.5%}
}
/* Keep decorative curls on the floor, never sitting on the empty bunny canvas. */
.opening-story .strand-four{left:47%;bottom:2%;width:7%}
.opening-story .strand-seven{left:12%;bottom:13%;width:9%}
@media(max-width:760px){
 .opening-story .strand-four{left:58%;bottom:1%;width:17%}
 .opening-story .strand-seven{left:2%;bottom:12%;width:17%}
}


/* V13 / Section 01 targeted layout and visual corrections. */
/* Keep the working rig together on ultrawide monitors rather than pushing the
   foreground frame to the extreme right edge of the browser. At 1920px and
   below this is identical to V12; on wider screens it tracks a centred stage. */
@media(min-width:1101px){
 .opening-story .opening-frame{
  right:calc(max(0px, (100vw - 1920px) / 2) + clamp(105px, 10.6vw, 250px));
 }
 .opening-story .character-stage{
  left:calc(50% - min(3.5vw, 67px));
 }
}
/* The final black yarn ball has its original hand-approved wool texture.
   Colour correction is CSS-only, so no replacement illustration is needed. */
#floating-yarn.yarn-viewport .ball-lilac{
 filter:grayscale(1) brightness(.35) contrast(1.3)!important;
}
/* Both visible wool lengths and the needle contact must match black HOWAY. */
.opening-story #input-thread,.opening-story #stitch-thread{
 filter:drop-shadow(0 0 .8px rgba(255,250,250,.62));
}
.opening-story .needle-contact{
 background:#252126;box-shadow:0 0 0 1px #f5eed9aa,0 0 4px 2px #ded3c25c;
}


/* ==========================================================================
   V14 / Section 01 — approved artwork retained; editorial polish only.
   Never introduce scroll/idle animation onto the individual yarn fibres.
   ========================================================================== */
:root{--wang-hot-pink:#FF7CA9}
/* A stronger hero hierarchy, without sacrificing the protected text boundary. */
.opening-story .hero-copy{max-width:650px;width:min(43.5vw,650px);}
.opening-story .hero h1{
  font-size:clamp(96px,9.65vw,185px);line-height:.86;
  letter-spacing:.005em;text-shadow:0 5px 0 #30172754,0 15px 30px #1b0c2870;
}
.opening-story .hero h1>span{color:#FF7CA9;text-shadow:0 5px 0 #5a254467,0 13px 24px #120a2370;}
.opening-story .sunburst{color:#d5ff59}
.opening-story .hero-line{margin:23px 0 25px;width:min(530px,95%)}
.opening-story .hero h2{font-size:clamp(31px,3.05vw,56px);line-height:1.12;letter-spacing:-.044em;margin-bottom:21px}
.opening-story .hero h2 em{color:#fff0e4;font-weight:500;}
.opening-story .hero-copy .hero-personal{font-size:clamp(14px,1.07vw,19px);line-height:1.52;max-width:540px;margin-top:13px}
.opening-story .hero-actions{gap:13px;margin-top:28px}
.opening-story .hero .btn{min-height:55px;padding:16px 24px;font-size:clamp(11px,.72vw,13px);border-radius:100px;letter-spacing:.045em;box-shadow:0 9px 20px #180a2354;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.opening-story .hero .btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px #180a2368}
.opening-story .hero .btn-pink{background:#FF7CA9}
/* Wave: true speech balloon, in the exact requested colours. */
.opening-story .character-sticker{
  left:52%;top:19%;right:auto;bottom:auto;padding:20px 32px 23px;
  border-radius:54% 49% 50% 48% / 52% 50% 53% 50%;
  background:#FF7CA9;border:3px solid #fff;box-shadow:0 8px 0 #69314f,0 15px 28px #160a216b;
  color:#fff;font:italic 900 clamp(53px,5.2vw,102px)/.95 Georgia,serif;
  text-shadow:0 4px 0 #9d3b68;white-space:nowrap;
  transform:rotate(-7deg) scale(var(--hi-scale,1));transform-origin:bottom left;
}
.opening-story .character-sticker:after{
  content:"";position:absolute;left:21%;bottom:-26px;width:39px;height:33px;
  background:#FF7CA9;border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(-20deg) skewY(-24deg);border-radius:0 0 0 20px;z-index:-1;
}
.opening-story .character-sticker .sticker-main{font-family:Georgia,serif;font-style:italic;font-weight:900;color:#fff;letter-spacing:-.07em}
/* Pickup label follows the real illustrated gun, set in JS from its measured tip.
   Pink edge, pointer tail and a contrasting label make it read as a deliberate callout. */
.opening-story .story-work-copy{
  left:52%;top:23%;right:auto;bottom:auto;width:max-content;max-width:min(325px,43vw);
  padding:16px 23px 17px;border-radius:20px 20px 18px 20px;
  background:#251329ed;border:2px solid #FF7CA9;
  box-shadow:0 7px 0 #682c4e,0 14px 28px #10081e66;
  text-align:center;white-space:normal;z-index:12;
}
.opening-story .story-work-copy:after{
  content:"";position:absolute;left:31%;bottom:-17px;width:25px;height:23px;
  background:#251329;border-right:2px solid #FF7CA9;border-bottom:2px solid #FF7CA9;
  transform:rotate(38deg) skewX(8deg);border-bottom-right-radius:7px;z-index:-1;
}
.opening-story .tool-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(9px,.8vw,12px);letter-spacing:.095em;line-height:1.3;color:#fff}
.opening-story .tool-dot{width:27px;height:3px;margin:0;background:#FF7CA9;flex:none}
.opening-story .story-work-copy h2{margin:5px 0 0;font:italic 600 clamp(25px,2.13vw,37px)/1.12 Georgia,serif;letter-spacing:-.035em}
.opening-story .story-work-copy h2 em{color:#fff}
@media(max-width:1200px){
 .opening-story .hero-copy{width:min(43vw,580px)}
 .opening-story .hero h1{font-size:clamp(86px,9.4vw,139px)}
 .opening-story .hero h2{font-size:clamp(29px,3.06vw,44px)}
 .opening-story .hero-copy .hero-personal{font-size:clamp(13px,1.26vw,16px)}
 .opening-story .hero .btn{font-size:10px;padding:14px 18px;min-height:50px}
}
@media(max-width:850px){
 .opening-story .hero-copy{width:65vw}
 .opening-story .hero h1{font-size:clamp(80px,13.8vw,122px)}
 .opening-story .hero h2{font-size:clamp(26px,3.7vw,38px)}
 .opening-story .character-sticker{left:40%;top:43%;padding:13px 21px 15px;font-size:clamp(43px,7.7vw,65px)}
 .opening-story .character-sticker:after{width:24px;height:23px;bottom:-17px}
 .opening-story .story-work-copy{max-width:220px;padding:11px 14px}
 .opening-story .story-work-copy h2{font-size:clamp(21px,2.8vw,30px)}
}
@media(max-width:500px){
 .opening-story .hero-copy{top:11%;left:6%;width:89vw;max-width:none}
 .opening-story .hero h1{font-size:clamp(70px,20.8vw,96px);line-height:.87}
 .opening-story .hero-line{margin:15px 0 14px}
 .opening-story .hero h2{font-size:clamp(25px,6.35vw,34px);line-height:1.10;margin-bottom:10px}
 .opening-story .hero-copy .hero-personal{font-size:clamp(11.5px,3.07vw,13px);line-height:1.4;max-width:350px}
 .opening-story .hero-actions{gap:8px;margin-top:14px}
 .opening-story .hero .btn{font-size:clamp(8.6px,2.25vw,10px);padding:11px 13px;min-height:42px}
 .opening-story .character-sticker{left:35%;top:43%;font-size:clamp(35px,10vw,49px);padding:12px 18px 13px;border-width:2px;box-shadow:0 5px 0 #69314f,0 11px 16px #160a216b}
 .opening-story .character-sticker:after{width:20px;height:20px;bottom:-15px;border-width:2px}
 .opening-story .story-work-copy{width:auto;max-width:190px;padding:10px 11px;border-radius:14px}
 .opening-story .story-work-copy .tool-eyebrow{font-size:8px;gap:5px}
 .opening-story .story-work-copy .tool-dot{width:13px;height:2px}
 .opening-story .story-work-copy h2{font-size:22px;line-height:1.06}
}
@media(prefers-reduced-motion:reduce){.opening-story .character-sticker{transform:rotate(-7deg)}}

/* V14 fit check: keep the larger wordmark clear of the character at 16:9 and ultrawide. */
@media(min-width:1201px){
 .opening-story .hero-copy{width:min(45.5vw,705px);max-width:705px}
 .opening-story .character-stage{left:calc(57% - min(3.5vw,67px))}
}
@media(min-width:851px) and (max-width:1200px){
 .opening-story .character-stage{left:55%}
}

/* V14 follow-up visual review: keep Newcastle on a single line on desktop,
   and keep the greeting balloon away from the ceiling yarn loop. */
@media(min-width:851px){
 .opening-story .hero h2{font-size:clamp(30px,2.7vw,50px)}
 .opening-story .character-sticker{left:59%;top:25%}
}
/* Speech balloon sits beside the character, never across mobile shopping CTAs. */
@media(max-width:500px){.opening-story .character-sticker{left:53%;top:52%}}


/* ==========================================================================
   V15 / Section 01 — placement, copy and motion refinements.
   ========================================================================== */
/* Keep the hero line witty while preserving the same tone. */
.opening-story .hero h2{max-width:min(34ch,100%);}
.opening-story .hero h2 .hero-strike{position:relative;display:inline-block;white-space:nowrap;color:#fff6ef;}
.opening-story .hero h2 .hero-strike:after{content:"";position:absolute;left:-.06em;right:-.08em;top:53%;height:3px;background:#FF7CA9;transform:rotate(-7deg);transform-origin:center;opacity:.95;}
.opening-story .hero h2 .hero-love{color:#fff;white-space:nowrap;}
.opening-story .hero h2 .hero-location{white-space:nowrap;}
/* Answer the 'smaller' feeling by lifting the composition, not shrinking it. */
.opening-story .opening-frame{bottom:7.1%;}
.opening-story .character-stage{bottom:5.1%;}
@media(min-width:1101px){
 .opening-story .opening-frame{right:calc(max(0px, (100vw - 1920px) / 2) + clamp(96px, 9.6vw, 225px));}
 .opening-story .character-stage{left:calc(55.9% - min(3vw,58px));}
}
/* Hero copy stays generous but Newcastle remains on one line on desktop. */
@media(min-width:851px){
 .opening-story .hero-copy{width:min(45.5vw,715px);max-width:715px;}
 .opening-story .hero h2{font-size:clamp(29px,2.55vw,46px);line-height:1.10;max-width:15.7ch;}
}
/* Bubble position is now set by JS against the character; these are visual only. */
.opening-story .character-sticker{left:0;top:0;z-index:14;pointer-events:none;}
/* Slightly tighter tool label footprint, still measured and positioned by JS. */
.opening-story .story-work-copy{max-width:min(300px,38vw);}
/* Rename the band to the approved wording. */
.clients-heading{max-width:220px;}
/* On smaller screens keep the stage lifted but avoid crowding the copy. */
@media(max-width:760px){
 .opening-story .opening-frame{bottom:8.6%;}
 .opening-story .character-stage{bottom:7.3%;height:39.8%;}
 .opening-story .hero h2{max-width:unset;}
 .opening-story .hero h2 .hero-location{white-space:normal;}
}
@media(max-width:500px){
 .opening-story .opening-frame{bottom:9.4%;}
 .opening-story .character-stage{bottom:7.8%;height:38.8%;}
}


/* V16 — single-line tool label, mobile locality line, anchored greeting. */
.opening-story .story-work-copy{width:max-content;max-width:min(405px,calc(100vw - 24px));padding:14px 20px 16px;}
.opening-story .story-work-copy h2{font:italic 600 clamp(24px,1.95vw,34px)/1.05 Georgia,serif;white-space:nowrap;letter-spacing:-.035em;margin:7px 0 0;}
.opening-story .tool-eyebrow{white-space:nowrap;}
.opening-story .character-sticker{opacity:1;left:55%;top:20%;}
@media(max-width:850px){
 .opening-story .story-work-copy{max-width:calc(100vw - 20px);padding:11px 14px 13px;}
 .opening-story .story-work-copy h2{font-size:clamp(18px,3.5vw,29px);white-space:nowrap;}
 .opening-story .tool-eyebrow{font-size:clamp(8px,1.1vw,10px)}
}
@media(max-width:760px){
 .opening-story .hero h2 .hero-location{display:block;white-space:nowrap;font-size:clamp(16.5px,4.75vw,26px);letter-spacing:-.05em;margin-top:.18em;}
 .opening-story .character-sticker{left:51%;top:49%;}
}