/* jj_photography — tokens first. Change colours here only. */
:root{
  --black:#040303;--amber-gold:#ffbe0b;--blaze-orange:#fb5607;--neon-pink:#ff006e;--neon-green:#9dff00;--azure-blue:#3a86ff;
  --off:#f3efe6;--mute:#a49f96;--c:var(--neon-pink);
  --sans:"Archivo",Arial,sans-serif;--text:"Bricolage Grotesque","Archivo",Arial,sans-serif;--hand:"Gochi Hand",cursive;
  --pad:clamp(1rem,4vw,3.5rem);--ease:cubic-bezier(.2,.7,.2,1)
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 1.08rem/1.6 var(--text);background:var(--black);color:var(--off);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}body{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber-gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--amber-gold);color:var(--black);padding:.6rem 1rem;z-index:99}.skip:focus{left:0}
.wrap{padding-inline:var(--pad)}
h1,h2,h3{font-weight:900;line-height:.9;letter-spacing:-.035em}
/* display + UI type stays in Archivo; running text uses --text */
h1,h2,h3,.brand,.drawer nav a,.ticker,.tape,.cap,.strip,.lcap b,.svc dt,label,#fs,.svc-grid a,.faq summary,.fbig,.roles span{font-family:var(--sans)}
h2{font-size:clamp(2.2rem,6vw,4.5rem)}
.hand{font-family:var(--hand);font-weight:400;font-size:1.5rem;line-height:1.1;color:var(--amber-gold)}
.tilt{display:inline-block;transform:rotate(-4deg)}
mark{background:var(--amber-gold);color:var(--black);padding:0 .25em}

/* header + drawer */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:1rem var(--pad);transition:background .3s}
.nav.solid{background:rgba(4,3,3,.86);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.2rem;letter-spacing:-.03em;text-decoration:none}
.brand img{height:2rem;width:auto} /* drop your logo at images/logo.svg and add it in main.js (LOGO) */
.mbtn{display:flex;align-items:center;gap:.7rem;background:none;border:0;color:var(--off);font:800 .95rem var(--sans);letter-spacing:.04em;cursor:pointer;padding:.5rem 0;position:relative;z-index:2}
.mbtn i{position:relative;width:30px;height:12px;display:block}
.mbtn i:before,.mbtn i:after{content:"";position:absolute;left:0;height:3px;background:currentColor;border-radius:3px;transition:transform .4s var(--ease),width .3s,background .3s}
.mbtn i:before{top:0;width:30px}.mbtn i:after{bottom:0;width:18px;left:12px}
.mbtn:hover i:after{width:30px;left:0;background:var(--neon-green)}
.mbtn[aria-expanded=true] i:before{transform:translateY(4.5px) rotate(45deg);background:var(--black)}
.mbtn[aria-expanded=true] i:after{width:30px;left:0;transform:translateY(-4.5px) rotate(-45deg);background:var(--black)}
.mbtn[aria-expanded=true]{color:var(--black)}
.scrim{position:fixed;inset:0;z-index:25;background:rgba(4,3,3,.6);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.drawer{position:fixed;inset:0 0 0 auto;z-index:28;width:min(560px,100%);background:var(--amber-gold);color:var(--black);padding:6rem var(--pad) 2rem;display:flex;flex-direction:column;justify-content:space-between;transform:translateX(100%);visibility:hidden;transition:transform .55s var(--ease),visibility .55s;overflow-y:auto}
.drawer:before{content:"";position:absolute;right:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:var(--neon-pink);z-index:0}
.drawer>*{position:relative;z-index:1}
.drawer nav{display:grid;gap:.1rem}
.drawer nav a{font-weight:900;font-size:clamp(2.4rem,9vw,4rem);letter-spacing:-.04em;line-height:1.05;text-decoration:none;display:flex;align-items:baseline;gap:.8rem;width:fit-content;transition:transform .3s var(--ease),color .2s}
.drawer nav a:hover,.drawer nav a:focus-visible{transform:translateX(.6rem);color:var(--neon-pink)}
.drawer nav a[aria-current]{text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:6px}
.drawer nav small{font:400 1.2rem var(--hand);color:var(--black)}
.drawer .hand{color:var(--black)}
.drawer .dfoot{display:grid;gap:.2rem;font-weight:700}
.dfoot a{width:fit-content}
body.menu-open .scrim{opacity:1;visibility:visible}
body.menu-open .drawer{transform:none;visibility:visible}
main,.foot{transition:transform .55s var(--ease),filter .55s}
body.menu-open main,body.menu-open .foot{transform:translateX(-5vw) scale(.97);filter:brightness(.55)}

/* buttons */
.btn{display:inline-block;font:800 1rem var(--sans);letter-spacing:0;word-spacing:.16em;padding:.9rem 1.6rem;border:2px solid var(--off);border-radius:999px;text-decoration:none;background:none;color:var(--off);cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-3px) rotate(-1deg);background:var(--blaze-orange);border-color:var(--blaze-orange);color:var(--black)}
.btn.solid{background:var(--blaze-orange);border-color:var(--blaze-orange);color:var(--black)}
.btn.solid:hover{background:var(--off);border-color:var(--off)}
.btn[disabled]{opacity:.5;cursor:wait}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:100svh;align-items:center;gap:clamp(1.5rem,5vw,5rem);padding:7rem var(--pad) 3rem}
.hero h1{font-size:clamp(3.4rem,10.5vw,10rem);line-height:.82;margin-bottom:4rem}
.hero h1 span{display:block}.hero h1 span+span{margin-left:.35em;color:var(--neon-pink)}
.roles{display:flex;flex-wrap:wrap;gap:.5rem}
.roles span{border:2px solid var(--off);border-radius:999px;padding:.15rem .9rem;font-weight:700;font-size:.95rem}
.roles span:nth-child(2){border-color:var(--azure-blue)}.roles span:nth-child(3){border-color:var(--neon-green);color:var(--neon-green)}
.lede{max-width:34ch;margin:1.2rem 0 1.6rem;color:var(--mute)}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-img{position:relative;justify-self:center;width:min(100%,520px)}
.hero-img:before{content:"";position:absolute;inset:6% -5% -5% 6%;background:var(--neon-pink);z-index:0;transform:rotate(2deg)}
.hero-img img{position:relative;z-index:1;width:100%;aspect-ratio:2/3;object-fit:cover}
.sticker{position:absolute;z-index:2;left:-1.5rem;bottom:2.2rem;background:var(--neon-green);color:var(--black);font:400 1.5rem var(--hand);padding:.4rem 1rem;transform:rotate(-6deg)}
.hero-note{position:absolute;z-index:2;right:0;top:-2.2rem;transform:rotate(5deg)}

/* hero collage: tiles cycle photos from main.js */
.collage{position:relative;justify-self:center;width:min(100%,540px);aspect-ratio:5/6}
.collage:before{content:"";position:absolute;inset:8% 2% 4% 10%;background:var(--neon-pink);transform:rotate(3deg);z-index:0}
.tile{position:absolute;z-index:1;overflow:hidden;background:#141111;border:4px solid var(--black);transform:rotate(var(--r,0deg))}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.6s ease-in-out}.tile img.fade{opacity:0}
.tag{position:absolute;z-index:2;left:.5rem;bottom:.5rem;font:400 1.15rem/1 var(--hand);background:var(--c,var(--amber-gold));color:var(--black);padding:.2rem .6rem;transform:rotate(-2deg);pointer-events:none}
.t1{left:0;top:7%;width:56%;height:60%;--r:-2deg}
.t2{right:0;top:0;width:41%;height:27%;--r:3deg}
.t3{right:3%;top:31%;width:38%;height:38%;--r:-3deg}
.t4{left:5%;bottom:0;width:52%;height:27%;--r:2deg}
.t5{right:0;bottom:3%;width:36%;height:25%;--r:-2deg}
.collage .sticker{left:-.5rem;top:-.5rem;bottom:auto;font-size:1.3rem}

/* ticker */
.ticker{background:var(--blaze-orange);color:var(--black);overflow:hidden;white-space:nowrap;padding:.9rem 0;font-weight:900;font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:-.03em}
.ticker div{display:inline-block;padding-left:100%;animation:tick 28s linear infinite}
.ticker b{font:400 1.6rem var(--hand);margin:0 1.2rem}
@keyframes tick{to{transform:translateX(-100%)}}

/* masonry wall */
.sel{padding:clamp(4rem,9vw,8rem) 0}
.sel .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;margin-bottom:2.5rem}
.wall{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:clamp(.9rem,2vw,1.8rem);padding:1em clamp(1rem,2.5vw,2rem) 2em}
/* tile height comes from a padding spacer, not aspect-ratio: grid mis-sizes the row of a lone 2-column tile with aspect-ratio and it spills into the footer */
.it{position:relative;isolation:isolate;align-self:stretch;background:#141111}
.it:after{content:"";display:block;padding-top:125%}
.it.wd{grid-column:span 2}.it.wd:after{padding-top:62.5%}
.it:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);opacity:0;transition:opacity .3s,transform .55s var(--ease)}
.it:hover:before,.it:focus-within:before{opacity:.9;transform:translate(var(--tx,8px),var(--ty,8px)) rotate(var(--rot,1.2deg))}
.it>a,.it>button{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;overflow:hidden;text-align:left;font:inherit}
.it img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .8s var(--ease)}
.it:hover img{transform:scale(1.04)}
.cap{position:absolute;inset:auto 0 0 0;padding:2.5rem .9rem .8rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;background:linear-gradient(transparent,rgba(4,3,3,.85));opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease);font-weight:800;font-size:.95rem}
.cap span{font:400 1.2rem var(--hand);color:var(--c)}
.it:hover .cap,.it:focus-within .cap{opacity:1;transform:none}
@media (hover:none){.cap{opacity:1;transform:none;padding-top:1.5rem}}
.more{padding:3rem var(--pad) 0;font:900 1.6rem var(--sans);letter-spacing:-.03em}
.more a{text-decoration:none;background:linear-gradient(var(--neon-pink),var(--neon-pink)) 0 100%/100% 4px no-repeat;transition:background-size .3s}
.more a:hover{background-size:100% 100%;color:var(--black)}
.strip{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;padding:4rem var(--pad);margin:0 var(--pad) 3rem;background:var(--azure-blue);color:var(--black);font-weight:900;font-size:clamp(2rem,6vw,4.5rem);letter-spacing:-.04em;line-height:.95;transform:rotate(-1deg)}
.strip .btn{border-color:var(--black);color:var(--black)}.strip .btn.solid{background:var(--black);color:var(--off);border-color:var(--black)}

/* gallery page */
.ghead{padding-top:7.5rem}
.ghead h1{font-size:clamp(3.5rem,11vw,9rem);display:inline-block}
.ghead .hand{margin-left:1rem}
.cats{display:flex;gap:.4rem clamp(1rem,3vw,2.5rem);margin:1.2rem 0 2.5rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.6rem;scrollbar-width:none}
.cat{scroll-snap-align:start;flex:none;background:none;border:0;color:var(--mute);font:900 clamp(1.8rem,4.5vw,3.2rem) var(--sans);letter-spacing:-.04em;cursor:pointer;position:relative;padding:.1rem 0;transition:color .2s}
.cat sup{font:400 1.1rem var(--hand);margin-left:.2rem;color:var(--c)}
.cat:after{content:"";position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.cat:hover,.cat[aria-pressed=true]{color:var(--off)}
.cat:hover:after,.cat[aria-pressed=true]:after{transform:none}
.eds{padding:0 var(--pad) 5rem}
.row{display:flex;align-items:center;gap:clamp(1.5rem,6vw,6rem);margin-block:clamp(3.5rem,9vw,8rem);position:relative}
.row:nth-child(even){flex-direction:row-reverse}
.row-img{flex:1.6;position:relative;background:#141111}
.row-img:before{content:"";position:absolute;inset:0;background:var(--c);transform:translate(14px,14px);opacity:0;transition:opacity .3s,transform .4s var(--ease)}
.row:nth-child(3n+1) .row-img:before{opacity:1}
.row-img:hover:before{opacity:1;transform:translate(20px,20px)}
.row-img button{position:relative;display:block;width:100%;padding:0;border:0;background:#141111;cursor:zoom-in;overflow:hidden}
.row-img img{width:100%;max-height:85vh;object-fit:contain;margin-inline:auto;transition:transform .8s var(--ease)}
.row-img:hover img{transform:scale(1.02)}
.row-txt{flex:1;position:relative;min-width:0}
.row-n{position:absolute;top:-.55em;left:-.1em;font:900 clamp(7rem,16vw,14rem)/1 var(--sans);color:transparent;-webkit-text-stroke:2px var(--c);opacity:.35;z-index:0;pointer-events:none;letter-spacing:-.06em}
.row-txt>*:not(.row-n){position:relative;z-index:1}
.meta{font:400 1.35rem var(--hand);color:var(--c);margin-bottom:.6rem}
.row-txt h2{font-size:clamp(2rem,4.5vw,3.6rem);margin-bottom:1rem}
.row:nth-child(3n) h2{color:var(--c)}
.row-txt p{color:var(--mute);max-width:36ch}
.row:nth-child(2n) .rule{width:5rem}.rule{display:block;height:6px;width:3rem;background:var(--c);margin:1.4rem 0}
.row .note{display:inline-block;margin-top:1rem;transform:rotate(-3deg);color:var(--c)}
.eds[hidden],.wall[hidden]{display:none}

/* lightbox */
dialog{border:0;background:var(--black);color:var(--off);width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;padding:0}
dialog[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem}
dialog::backdrop{background:var(--black)}
dialog img{max-width:92vw;max-height:78dvh;width:auto;height:auto;object-fit:contain}
.lcap{display:flex;gap:1rem;align-items:baseline;padding:0 1rem;text-align:center}
.lcap b{font-weight:900;font-size:1.2rem}.lcap span{font:400 1.3rem var(--hand);color:var(--neon-green)}
dialog .lb{position:absolute;background:none;border:2px solid var(--off);border-radius:999px;color:var(--off);font:800 1rem var(--sans);cursor:pointer;padding:.55rem 1rem;transition:background .2s,color .2s,border-color .2s}
dialog .lb:hover{background:var(--neon-green);border-color:var(--neon-green);color:var(--black)}
.lx{top:1rem;right:1rem}.lp,.ln{top:50%;transform:translateY(-50%);font-size:1.4rem!important}.lp{left:.8rem}.ln{right:.8rem}

/* about + book */
.about,.book{display:grid;gap:clamp(2rem,6vw,6rem);padding-top:8rem;padding-bottom:6rem;align-items:start}
.about{grid-template-columns:1fr 1.1fr}.book{grid-template-columns:1fr 1.3fr}
.a-img{position:sticky;top:6rem}
.a-img div{position:relative;margin:0 0 1rem 1rem}
.a-img div:before{content:"";position:absolute;inset:-1rem 1rem 1rem -1rem;background:var(--c,var(--amber-gold));transform:rotate(-2deg)}
.a-img img{position:relative;width:100%}
.a-txt>*+*{margin-top:1rem}
.a-txt p,.prose p{max-width:64ch}
.a-txt h1 mark{display:inline-block;margin-top:.12em;padding:.03em .14em .05em;line-height:.92}
.a-txt h1,.b-txt h1{font-size:clamp(3.2rem,8vw,7rem)}
.a-txt h2{margin-top:2.6rem;font-size:2.2rem;line-height:1.02;color:var(--neon-pink)}
.lead{font-weight:600;font-size:clamp(1.25rem,2.2vw,1.65rem);line-height:1.3;letter-spacing:-.015em}
.steps{padding-left:1.2rem}.steps li{margin-bottom:.5rem}
.svc{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem}.svc dt{font-weight:900;color:var(--azure-blue)}
.b-txt .lead{margin:1.2rem 0}
form{display:grid;gap:1.2rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
label{display:grid;gap:.3rem;font-weight:800;font-size:.95rem}
label em{font:400 1.1rem var(--hand);color:var(--amber-gold)}
input,select,textarea{font:1.05rem var(--sans);padding:.8rem .9rem;border:2px solid #3b3733;background:#0f0d0d;border-radius:0;width:100%;color:var(--off);transition:border-color .2s,box-shadow .2s;color-scheme:dark}
input:focus,select:focus,textarea:focus{border-color:var(--azure-blue);box-shadow:4px 4px 0 var(--azure-blue);outline:0}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--neon-pink)}
.hp{position:absolute;left:-9999px}
#fs{font-weight:700;min-height:1.6em}#fs.err{color:var(--neon-pink)}#fs.ok{color:var(--neon-green)}

/* about: picture rows, steps, services */
.ab-row{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding-block:clamp(1.75rem,4vw,3.25rem)}
.ab-row.first{padding-top:6.5rem}
.ab-row.flip{grid-template-columns:1.1fr 1fr}.ab-row.flip .a-img{order:2}
.ab-row .a-img{position:static}
.ab-row .a-img div{width:fit-content;max-width:100%;margin:1rem auto 1rem 1rem}
.ab-row.flip .a-img div:before{transform:rotate(2deg)}
.ab-row .a-img img{width:auto;max-width:100%;max-height:72vh}
.ab-row .a-img .hand{color:var(--c,var(--amber-gold))}
.ab-row .a-txt h2:first-child{margin-top:0}
.ab-row .a-txt h2{color:var(--c,var(--neon-pink))}
.gear{list-style:none;padding:0;display:grid;gap:.4rem}
.gear li{padding-left:1.4rem;position:relative}
.gear li:before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;background:var(--c,var(--amber-gold));border-radius:50%}
.ab-sec{padding-block:clamp(1.75rem,4vw,3.25rem)}
.ab-sec>h2{margin-bottom:1.25rem;color:var(--off)}
.ab-sec>h2 span{color:var(--c,var(--neon-pink))}
.steps-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;counter-reset:s}
.steps-grid li{counter-increment:s;background:#141111;border-top:6px solid var(--c);padding:1.15rem 1.1rem 1.3rem;color:var(--mute)}
.steps-grid li:before{content:"0" counter(s);display:block;font:900 3rem/1 var(--sans);letter-spacing:-.05em;color:var(--c);margin-bottom:.6rem}
.steps-grid b{display:block;color:var(--off);font-size:1.15rem;margin-bottom:.3rem}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.svc-grid article{background:#141111;border-top:6px solid var(--c);padding:1.15rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;transition:transform .3s var(--ease),box-shadow .3s}
.svc-grid article:hover,.svc-grid article:focus-within{transform:translateY(-4px);box-shadow:6px 6px 0 var(--c)}
.svc-grid h3{font-size:2rem;line-height:1}
.svc-grid p{color:var(--mute);flex:1}
.svc-grid a{font-weight:800;color:var(--c);text-decoration:none}
.svc-grid a:hover{text-decoration:underline}
.ab-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.75rem}
.ab-cta p{color:var(--mute)}
@media (max-width:760px){.ab-row,.ab-row.flip{grid-template-columns:1fr;padding-top:1.75rem}.ab-row.first{padding-top:5.5rem}.ab-row.flip .a-img{order:0}}

.rv{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s var(--ease)}.rv.in{opacity:1;transform:none}

@media (max-width:1000px){.wall{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-img{order:-1;width:min(78%,420px);margin-top:1rem}.collage{order:-1;width:min(88%,460px);margin-top:2rem}.hero{padding-top:6rem}}
@media (max-width:760px){
 .row,.row:nth-child(even){flex-direction:column;align-items:stretch;gap:1.8rem}
 .row-img{width:100%}
 .row-n{font-size:7rem}
 .about,.book{grid-template-columns:1fr;padding-top:6.5rem}.a-img{position:static}.row2{grid-template-columns:1fr}
 .foot small{justify-self:start}
 .ticker b{margin:0 .6rem}
}
@media (max-width:480px){.tag{font-size:.95rem;padding:.15rem .45rem;left:.35rem;bottom:.35rem}.wall{grid-template-columns:1fr}.it.wd{grid-column:auto}}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*{animation:none!important;transition-duration:.01ms!important}
 .rv{opacity:1;transform:none}.ticker div{padding-left:0}
}
@media (prefers-reduced-motion:no-preference){
 .hero h1 span,.roles,.lede,.cta{animation:up .9s var(--ease) both}.hero h1 span+span{animation-delay:.12s}.roles{animation-delay:.2s}.lede,.cta{animation-delay:.3s}
 .hero-img img{animation:reveal 1.1s var(--ease) both}.sticker{animation:pop .6s .9s var(--ease) both}
 .tile{animation:tilein .8s var(--ease) both}
 .t2{animation-delay:.15s}.t3{animation-delay:.3s}.t4{animation-delay:.45s}.t5{animation-delay:.6s}.collage .sticker{animation-delay:1.1s}
 @keyframes tilein{from{opacity:0;transform:rotate(var(--r)) translateY(24px) scale(.9)}}
 @keyframes up{from{opacity:0;transform:translateY(24px)}}
 @keyframes reveal{from{clip-path:inset(100% 0 0 0)}}
 @keyframes pop{from{opacity:0;transform:scale(.6) rotate(-14deg)}}
}

/* seo copy helpers, hover tilt, faq, tag fade */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lead a{text-decoration:underline;text-decoration-color:var(--neon-pink);text-decoration-thickness:3px;text-underline-offset:5px;transition:color .2s}.lead a:hover{color:var(--neon-green)}
.row-img:hover:before{transform:translate(var(--tx,10px),var(--ty,10px)) rotate(var(--rot,1deg))}
.tag{transition:opacity .6s}.tile.swap .tag{opacity:0}
.faq{display:grid;gap:1rem;max-width:62rem}
.faq details{--c:var(--neon-pink);background:#141111;border-left:8px solid var(--c);padding:1.1rem 1.3rem;transition:transform .3s var(--ease),box-shadow .3s}
.faq details:nth-child(5n+2){--c:var(--azure-blue)}.faq details:nth-child(5n+3){--c:var(--neon-green)}.faq details:nth-child(5n+4){--c:var(--blaze-orange)}.faq details:nth-child(5n){--c:var(--amber-gold)}
.faq details:hover,.faq details[open]{box-shadow:6px 6px 0 var(--c);transform:translate(-2px,-2px) rotate(-.4deg)}
.faq summary{cursor:pointer;font-weight:900;font-size:1.25rem;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 2rem/1 var(--hand);color:var(--c)}.faq details[open] summary:after{content:"\2013"}
.faq p{color:var(--mute);margin-top:.8rem;max-width:60ch}

/* scroll progress */
.nav:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:linear-gradient(90deg,var(--neon-pink),var(--blaze-orange),var(--amber-gold),var(--neon-green),var(--azure-blue));transform:scaleX(var(--sp,0));transform-origin:left}
/* hero viewfinder */
.vf{position:relative;justify-self:center;width:min(100%,500px);--c:var(--amber-gold);transform:rotate(-1.5deg)}
.vf:before{content:"";position:absolute;inset:5% -5% -5% 7%;background:var(--bd,var(--neon-pink));transform:rotate(4deg);transition:background .4s var(--ease)}
.vf-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#141111;border:4px solid var(--black)}
.vf-photo img{width:100%;height:100%;object-fit:cover}
.vf-hud{position:absolute;inset:0;pointer-events:none;color:#fff;font:800 .8rem var(--sans);letter-spacing:.08em;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.k{position:absolute;width:30px;height:30px;border:0 solid #fff;opacity:.9}
.k.tl{left:14px;top:14px;border-width:3px 0 0 3px}.k.tr{right:14px;top:14px;border-width:3px 3px 0 0}.k.bl{left:14px;bottom:14px;border-width:0 0 3px 3px}.k.br{right:14px;bottom:14px;border-width:0 3px 3px 0}
.af{position:absolute;width:22%;aspect-ratio:1;left:40%;top:38%;border:3px solid #fff;transition:left .55s var(--ease),top .55s var(--ease),border-color .2s,transform .3s}
.af.lock{border-color:var(--neon-green);transform:scale(.88)}
.vf-top{position:absolute;left:52px;top:18px;display:flex;align-items:center;gap:.6rem;font-size:.8rem;text-transform:uppercase}
.vf-top em{width:.7rem;height:.7rem;border-radius:50%;background:var(--neon-pink);animation:blink 1.2s steps(2) infinite}
.vf-top span{background:var(--c);color:var(--black);padding:.1rem .5rem;text-shadow:none}
.vf-bot{position:absolute;left:52px;right:52px;bottom:18px;display:flex;gap:1.1rem;align-items:center}
.meter{flex:1;height:8px;margin-left:.4rem;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 12px) 0 100%/100% 6px no-repeat;position:relative}
.meter:after{content:"";position:absolute;left:var(--m,50%);top:-3px;width:3px;height:12px;background:var(--neon-green);transition:left .5s var(--ease)}
.vf-flash{position:absolute;inset:0;opacity:0;pointer-events:none;background:#fff}
.vf.shot .vf-flash{animation:snap .46s linear}
.vf-btn{position:absolute;inset:0;width:100%;background:none;border:0;cursor:crosshair}
.vf .sticker{left:-.5rem;top:-.5rem;bottom:auto;font-size:1.3rem}
@keyframes snap{0%{opacity:0}12%{opacity:1;background:#fff}30%{opacity:1;background:#000}72%{opacity:1;background:#000}100%{opacity:0}}
@keyframes blink{50%{opacity:.15}}
@keyframes tape{to{transform:translateX(-50%)}}
@media (max-width:1000px){.vf{order:-1;width:min(88%,440px);margin-top:2rem}}
/* tapes */
.tapes{padding:2rem 0;overflow:hidden}
.tape{overflow:hidden;white-space:nowrap;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;color:var(--black);padding:.6rem 0}
.tape>div{display:inline-flex;align-items:center;animation:tape 40s linear infinite}
.tape.a{background:var(--blaze-orange);font-size:clamp(1.5rem,3vw,2.6rem);transform:rotate(-1.4deg) scale(1.04)}
.tape.b{background:var(--neon-pink);font-size:clamp(1.1rem,2vw,1.7rem);margin-top:-.6rem;transform:rotate(1.2deg) scale(1.04)}
.tape.b>div{animation-direction:reverse;animation-duration:55s}
.tape span:nth-of-type(even){color:transparent;-webkit-text-stroke:2px var(--black)}
.tape i{display:inline-block;flex:none;position:relative;width:.75em;height:.75em;margin:0 1.1rem;border:.13em solid var(--black);border-radius:50%}
.tape i:after{content:"";position:absolute;inset:16%;background:var(--black);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tapes:hover .tape>div{animation-play-state:paused}
/* pills */
.sel>.wrap:first-child{margin-bottom:1.2rem}
/* .sel .pills beats .sel .wrap (same specificity, later in the file) */
.sel .pills{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem clamp(1rem,2.4vw,2rem);margin-bottom:2.8rem}
.pills a{font:900 clamp(1.3rem,2vw,1.9rem)/1.1 var(--sans);letter-spacing:-.04em;color:var(--off);text-decoration:none;padding:0 .1em .06em;background:linear-gradient(var(--c),var(--c)) 0 100%/100% 5px no-repeat;transition:background-size .3s var(--ease),color .2s}
.pills a:hover,.pills a:focus-visible{background-size:100% 100%;color:var(--black)}
.pills .hand{font-size:1.3rem;transform:rotate(-3deg)}
/* footer */
.foot{position:relative;overflow:hidden;margin-top:2rem;padding:3.5rem var(--pad) 1rem;background:linear-gradient(90deg,var(--neon-pink),var(--blaze-orange),var(--amber-gold),var(--neon-green),var(--azure-blue)) top/100% 8px no-repeat,#0b0909;color:var(--mute)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;gap:2.5rem 2rem;align-items:start}
.foot h2{font:400 1.5rem/1 var(--hand);letter-spacing:0;color:var(--amber-gold);margin-bottom:.7rem}
.foot a,.foot span{display:block;width:fit-content;text-decoration:none;padding:.15rem 0;transition:color .2s,transform .25s var(--ease)}
.foot nav a:hover,.foot nav a:focus-visible{color:var(--c);transform:translateX(.35rem)}
.fbig{font-weight:900;font-size:clamp(1.15rem,2.3vw,1.8rem);letter-spacing:-.03em;color:var(--off);background:linear-gradient(var(--neon-pink),var(--neon-pink)) 0 100%/100% 3px no-repeat;transition:background-size .3s,color .2s}
.fbig:hover{background-size:100% 100%;color:var(--black)}
.foot .totop{display:grid;place-items:center;width:5.5rem;height:5.5rem;padding:0;border:2px solid var(--amber-gold);border-radius:50%;color:var(--amber-gold);font:400 1.3rem var(--hand);transform:rotate(-8deg);justify-self:end}
.foot .totop:hover{background:var(--amber-gold);color:var(--black);transform:rotate(0) translateY(-3px)}
.fmark{font:900 clamp(2.4rem,12.2vw,13rem)/.8 var(--sans);letter-spacing:-.06em;text-align:center;white-space:nowrap;margin:3rem 0 0;padding-bottom:.24em;color:transparent;-webkit-text-stroke:2px #3b3733;transition:color .4s,-webkit-text-stroke-color .4s;user-select:none}
.fmark:hover{color:var(--neon-pink);-webkit-text-stroke-color:var(--neon-pink)}
.fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4rem 1rem;border-top:2px solid #231f1d;padding-top:1rem;margin-top:1rem;font-size:.9rem}
@media (max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}.foot .totop{justify-self:start}}

/* about: small photos set into text columns */
.inset{position:relative;margin:0 0 0 .8rem}
.inset div{position:relative}
.inset div:before{content:"";position:absolute;inset:-.7rem .7rem .7rem -.7rem;background:var(--b);transform:rotate(-2deg)}
.inset img{position:relative;display:block;width:100%;height:auto}
.inset .hand{position:relative;margin-top:.8rem;color:var(--b)}
.a-txt .inset.wide{max-width:470px;margin-top:1.6rem}
.gearwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:1.5rem 2.2rem;align-items:start}
.gearwrap .inset{margin-top:.4rem}
@media (max-width:1100px){.gearwrap{grid-template-columns:1fr}.gearwrap .inset{max-width:300px}}
@media (max-width:760px){.a-txt .inset.wide{max-width:100%}}

/* instagram handle + icon (footer and menu) */
.foot .ig,.dfoot .ig{display:flex;align-items:center;gap:.55rem;width:fit-content}
.ig svg{flex:none;transition:transform .25s var(--ease)}
.ig:hover,.ig:focus-visible{color:var(--neon-pink)}
.ig:hover svg{transform:rotate(-8deg) scale(1.1)}