/* only-pixels.com — the persona page v4: the studio look (the spots' motion design, toned down: cream, ink, one accent).
   Served from storage (site/v2a/media/persona-v4.css); the page's own CSS (css.txt) still applies. */
.pg4{--acc:var(--accent,#e9c46a);--sh:#0a0a0b;--cr:#f6f1e7}
/* the hero: the film under a layer of stickers, cards and the name in letters */
.h4{position:absolute;inset:0;pointer-events:none}
.h4 a,.h4 .pill,.h4 .card4{pointer-events:auto}
.top4{position:absolute;left:var(--gut);right:var(--gut);top:calc(var(--nav) + 14px);display:flex;justify-content:space-between;gap:12px}
.pill{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 15px;border-radius:999px;background:var(--cr);color:var(--sh);font:800 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 22px -10px rgba(0,0,0,.45)}
.pill:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.pill.ink{background:var(--sh);color:var(--cr)}
.cards4{position:absolute;left:var(--gut);top:calc(var(--nav) + 70px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.card4{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 12px;border-radius:999px;background:var(--cr);color:var(--sh);font:700 15px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.card4 i{width:10px;height:10px;border-radius:50%;background:var(--acc)}
.card4:nth-child(2) i{background:var(--sh)}
.copy4{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(28px,6vh,64px);max-width:min(100%,920px)}
.stk{display:inline-block;padding:9px 16px 8px;border-radius:6px;background:var(--acc);color:var(--sh);font:900 clamp(12px,1.05vw,15px)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;box-shadow:5px 5px 0 var(--sh);transform:rotate(-2deg);transform-origin:0 100%;margin:0 0 18px 4px}
.kn{margin:0;font:900 clamp(54px,9.4vw,160px)/.92 var(--sans);letter-spacing:-.05em;color:var(--sh)}
.kn .ln{display:inline-block;overflow:hidden;padding:.06em .1em .1em .08em;margin:0 0 10px -.08em;background:var(--cr);border-radius:8px;box-shadow:8px 8px 0 var(--acc);vertical-align:top}
.kn .ln+.ln{margin-left:0;transform:rotate(1.2deg);transform-origin:0 100%}
.kn .ln:first-child{transform:rotate(-1.4deg);transform-origin:0 100%}
.kn .ln.lt i{font-weight:400;letter-spacing:-.045em}
.kn i{display:inline-block;font-style:normal;will-change:transform}
.kn br{display:none}
.hook4{margin:14px 0 0;max-width:24em;display:inline-block;padding:14px 20px;border-radius:12px;background:var(--cr);color:var(--sh);font:600 clamp(17px,1.5vw,23px)/1.3 var(--sans);letter-spacing:-.015em;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);text-wrap:pretty}
.copy4 .actions{margin-top:22px}
.copy4 .btn{background:var(--sh);color:var(--cr);box-shadow:5px 5px 0 var(--acc)}
.copy4 .btn:hover{background:#000}
.copy4 .btn.line{background:var(--cr);color:var(--sh);border-color:transparent;box-shadow:5px 5px 0 var(--sh)}
.hero4 .shade{background:linear-gradient(0deg,rgba(20,16,10,.28) 0%,rgba(20,16,10,0) 46%)}
.hero4 .bar{background:var(--acc);height:5px}
@media(max-width:700px){.top4 .pill+.pill{max-width:48%;overflow:hidden}.top4 .pill+.pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cards4{top:calc(var(--nav) + 60px);gap:8px}.card4{height:38px;font-size:13.5px;padding:0 14px 0 10px}.pill{height:30px;font-size:11px;padding:0 12px}.kn{font-size:clamp(48px,15vw,84px)}.kn .ln{box-shadow:6px 6px 0 var(--acc);margin-bottom:8px}.stk{box-shadow:4px 4px 0 var(--sh)}.hook4{font-size:16px;padding:12px 16px}.copy4{bottom:24px}.copy4 .actions{gap:10px}.copy4 .btn{height:48px;padding:0 22px;font-size:15px}}
/* wipes between the sections: a bar in the accent that sweeps across as the section arrives */
.wipe4{position:absolute;left:0;right:0;top:0;height:10px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;z-index:3;pointer-events:none}
.wipe4.ink{background:var(--sh)}
/* the story: the tag in words, the portrait in a frame, the five topics as stickers */
.story4{position:relative;z-index:10;padding:clamp(90px,13vh,150px) 0 clamp(70px,11vh,120px);background:var(--cr);color:var(--tx)}
.story4 .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
@media(min-width:960px){.story4 .cols{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:80px;align-items:start}}
.frame4{position:relative;margin:0 14px 24px 0}
.frame4 img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:var(--paper2);box-shadow:14px 14px 0 var(--acc);display:block}
.frame4 figcaption{position:absolute;left:-10px;bottom:22px;display:inline-block;padding:9px 14px;border-radius:6px;background:var(--sh);color:var(--cr);font:800 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-3deg);box-shadow:4px 4px 0 var(--acc)}
.kick4{display:inline-block;margin:0 0 22px;padding:8px 14px;border-radius:6px;background:var(--sh);color:var(--cr);font:800 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--acc)}
.h4w{margin:0;font:900 clamp(40px,5.2vw,86px)/1 var(--sans);letter-spacing:-.045em;color:var(--sh);text-wrap:balance}
.h4w .w{display:inline-block;will-change:transform}
.h4w .w.a{color:var(--sh);background:var(--acc);padding:0 .12em;margin:.08em .04em 0;border-radius:.08em;box-shadow:.06em .06em 0 var(--sh)}
.story4 .txt>p{font:500 clamp(18px,1.4vw,21px)/1.6 var(--sans);color:var(--tx);margin:0 0 18px;max-width:32em}
.story4 .txt>p:first-of-type{margin-top:30px}
.topics4{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:12px 10px}
.topics4 li{display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:8px;background:#fff;color:var(--sh);font:800 clamp(15px,1.15vw,18px)/1.2 var(--sans);letter-spacing:-.015em;box-shadow:5px 5px 0 var(--sh);will-change:transform}
.topics4 li span{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--acc);font:900 12px/1 var(--sans);letter-spacing:.04em}
.topics4 li:nth-child(odd){transform:rotate(-1.2deg)}
.topics4 li:nth-child(even){transform:rotate(1deg)}
.honest4{display:flex;gap:12px;align-items:flex-start;margin:34px 0 0;padding:16px 18px;border-radius:14px;background:#fff;box-shadow:0 18px 40px -22px rgba(0,0,0,.35);font:500 15.5px/1.5 var(--sans);color:var(--tx2);max-width:36em}
.honest4:before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--acc);margin-top:6px;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--acc)}
.notice4{margin:18px 0 0;padding:14px 18px;border-radius:12px;background:var(--sh);color:var(--cr);font:600 15px/1.5 var(--sans);max-width:36em}
/* the creed: one sentence that lights up as it is read, on ink */
.creed4{position:relative;z-index:20;background:var(--sh);color:var(--cr);padding:clamp(80px,12vh,130px) 0}
.creed4 .big{margin:0;font:800 clamp(30px,4vw,66px)/1.08 var(--sans);letter-spacing:-.04em;max-width:18em;text-wrap:pretty}
.creed4 .big em{font-style:normal;color:var(--acc)}
.js:not(.still) .creed4 .w{opacity:.18;transition:opacity .25s linear}
.creed4 .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(36px,5vh,56px)}
.creed4 .row span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:8px;background:var(--cr);color:var(--sh);font:900 clamp(14px,1.1vw,17px)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;box-shadow:5px 5px 0 var(--acc);will-change:transform}
.creed4 .row span:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acc)}
/* the shelf and the others pop in; the talk band carries the accent */
.pg4 .shelfsec{background:var(--paper2)}
.pg4 .shelfsec .kick,.pg4 .others .kick{display:inline-block;padding:8px 14px;border-radius:6px;background:var(--sh);color:var(--cr);transform:rotate(-1.5deg);box-shadow:4px 4px 0 var(--acc)}
.pg4 .shelfsec .kick:before,.pg4 .others .kick:before{display:none}
.pg4 .prod{will-change:transform}
.pg4 .band:before{background:linear-gradient(0deg,rgba(6,6,7,.9),rgba(6,6,7,.25) 60%,rgba(6,6,7,.35))}
.pg4 .band .kick{color:var(--acc)}
.pg4 .band .btn{box-shadow:5px 5px 0 var(--acc)}
.pg4 .others .pc{will-change:transform}
/* motion: hidden until the script places it (only once the script has run, so a page without it shows everything) */
.mo4 .mo{opacity:0}
.mo4 .kn i{transform:translateY(112%)}
.still .mo,.still .kn i,html:not(.js) .mo,html:not(.js) .kn i{opacity:1!important;transform:none!important}
/* v4.2–4.4 — the home page: the cast (five doors; a swipe strip on phones), the studio's course; the creed's link */
.home4 .kn .ln+.ln i{font-weight:900;letter-spacing:-.05em}
.cast4{position:relative;z-index:10;padding:clamp(80px,12vh,140px) 0 clamp(70px,10vh,120px);background:var(--cr);color:var(--tx)}
.lede4{margin:24px 0 0;max-width:36em;font:500 clamp(17px,1.35vw,20px)/1.55 var(--sans);color:var(--tx2);text-wrap:pretty}
.cgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px;margin-top:clamp(40px,5vh,60px)}
@media(max-width:1100px){.cgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.cgrid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:28px calc(-1*var(--gut)) 0;padding:12px var(--gut) 16px}.cgrid::-webkit-scrollbar{display:none}.cc{flex:0 0 66vw;scroll-snap-align:start}}
.cc{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:var(--sh);will-change:transform}
.cpic{position:relative;display:block;width:100%;border-radius:10px;overflow:hidden;background:var(--paper2);box-shadow:10px 10px 0 var(--acc);transition:transform .6s var(--e)}
.cpic img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;transition:transform 1.2s var(--e)}
.cc:hover .cpic img{transform:scale(1.05)}
.cc:hover .cpic{transform:translate(-3px,-3px)}
.cnum{position:absolute;left:10px;top:10px;display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:var(--cr);color:var(--sh);font:900 12.5px/1 var(--sans);letter-spacing:.06em}
.ctag{position:absolute;right:10px;top:10px;padding:8px 11px;border-radius:6px;background:var(--sh);color:var(--cr);font:800 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transform:rotate(2deg)}
.cname{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:24px 0 0 2px}
.cl{display:inline-block;padding:.06em .16em .1em .12em;border-radius:5px;background:#fff;box-shadow:4px 4px 0 var(--acc);font:900 clamp(20px,1.7vw,27px)/.95 var(--sans);letter-spacing:-.045em;transform:rotate(-1.4deg);transform-origin:0 100%}
.cl.lt{transform:rotate(1deg);font-weight:400;letter-spacing:-.035em}
.crole{display:inline-block;margin:16px 0 0;padding:7px 10px 6px;border-radius:5px;background:var(--acc);color:var(--sh);font:900 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;box-shadow:3px 3px 0 var(--sh);transform:rotate(-1.5deg)}
.chook{margin:14px 0 0;font:500 14.5px/1.45 var(--sans);color:var(--tx2);text-wrap:pretty}
.cgo{margin:12px 0 0;font:800 14px/1 var(--sans);color:var(--sh);border-bottom:2px solid var(--sh);padding-bottom:4px}
.cgo .ar{display:inline-block;transition:transform .4s var(--e)}
.cc:hover .cgo .ar{transform:translateX(5px)}
@media(max-width:700px){.cl{font-size:clamp(17px,4.8vw,22px)}.chook{display:none}.crole{font-size:10px}.cname{margin-top:16px}}
.creed4 .after4{margin:clamp(30px,4vh,44px) 0 0}
.creed4 .more{color:var(--cr);border-color:var(--acc)}
.studio4{position:relative;z-index:10;padding:clamp(90px,13vh,150px) 0 clamp(70px,11vh,120px);background:var(--paper);color:var(--tx)}
.studio4 .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
@media(min-width:960px){.studio4 .cols{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:80px;align-items:center}}
.studio4 .txt>p{font:500 clamp(18px,1.4vw,21px)/1.6 var(--sans);color:var(--tx);margin:30px 0 0;max-width:32em}
.studio4 .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:36px}
.studio4 .btn{background:var(--sh);color:var(--cr);box-shadow:5px 5px 0 var(--acc)}
.studio4 .btn.line{background:#fff;color:var(--sh);border-color:transparent;box-shadow:5px 5px 0 var(--sh)}
.studio4 .btn.off{background:var(--paper2);color:var(--tx2);box-shadow:none;cursor:default}
.studio4 .more{color:var(--sh)}
.studio4 .frame4{margin:0 14px 24px 0}
.studio4 .frame4 img{aspect-ratio:16/9}