/* Atelier Koka — VINTAGE STREET theme. Loads after styles.css; no HTML copy changed, so FR/EN switcher keeps working. */
:root{--mustard:#e8b730;--paper:#ece2cc;--paper-2:#dfd1b4;--street:Impact,"Arial Narrow Bold","Helvetica Neue Condensed Bold",Haettenschweiler,sans-serif;--type:"Courier New",Courier,monospace;--hard:6px 6px 0 var(--ink)}
body{font-family:var(--type);background:var(--paper) radial-gradient(rgba(23,18,15,.09) 1px,transparent 1.4px) 0 0/7px 7px}
h1,h2,h3,.brand,.marquee-track,.event-row strong,.quote,.poster .number,.art-panel::before{font-family:var(--street);font-weight:400;letter-spacing:.005em;line-height:.92}
h1{font-size:clamp(64px,12vw,170px);max-width:7ch}h2{font-size:clamp(46px,7.5vw,108px)}h3{font-size:clamp(28px,3.4vw,50px)}
h1 em,h2 em{font-style:normal;color:var(--red);background:var(--mustard);padding:0 .12em;display:inline-block;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink)}
.hero-copy,.lede,.poster p,.detail-copy p,.article p{font-family:var(--type);font-weight:700}
.kicker,.smallcaps{display:inline-block;background:var(--ink);color:var(--paper);padding:5px 9px;letter-spacing:.18em}
.topbar{background:repeating-linear-gradient(-45deg,var(--mustard) 0 14px,var(--ink) 14px 28px);color:var(--ink);padding:0;border-bottom:3px solid var(--ink)}
.topbar span{background:var(--mustard);padding:8px 14px;margin:3px 0}
.site-header{background:var(--paper);backdrop-filter:none;border-bottom:3px solid var(--ink)}
.brand{font-size:24px}.brand-logo{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--red);transform:rotate(-6deg);filter:grayscale(.15) contrast(1.15)}
.nav-links{font-family:var(--type)}.nav-links a:not(.nav-cta):hover{border-color:transparent;background:var(--mustard)}
.nav-cta{border-radius:0;border:2px solid var(--ink);background:var(--red);color:#fff6e8;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.nav-cta:hover{transform:rotate(0) translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.lang-switch{border-radius:0;border-width:2px}
.hero{border-bottom:3px solid var(--ink)}
.hero::after{-webkit-text-stroke:2px rgba(23,18,15,.18);font-family:var(--street);font-weight:400}
.hero-logo{border-radius:0;box-shadow:var(--hard);filter:grayscale(.2) contrast(1.2);transform:rotate(-5deg)}
.hero-art{position:relative;padding:18px 18px 0;background:#f6efdc;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--red);transform:rotate(2.2deg)}
.hero-art::before{content:"";position:absolute;top:-16px;left:50%;width:120px;height:32px;margin-left:-60px;background:rgba(232,183,48,.8);border:1px dashed rgba(23,18,15,.4);transform:rotate(-4deg);z-index:3}
.hero-sheet img{filter:grayscale(1) contrast(1.35);mix-blend-mode:multiply;transition:filter .3s}.hero-sheet:hover img{filter:none}
.hero-stamp{border:3px solid var(--red);font-size:13px;padding:8px 12px;transform:rotate(-6deg);position:absolute;right:-14px;bottom:44px;background:var(--paper);z-index:4}
.btn{border-radius:0;border:3px solid var(--ink);box-shadow:var(--hard);font-family:var(--street);font-size:20px;letter-spacing:.06em;text-transform:uppercase;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}.btn.primary{background:var(--red);color:#fff6e8}.btn.accent{background:var(--mustard);color:var(--ink)}
.text-btn{border:0;box-shadow:none;text-decoration:underline wavy var(--red);text-underline-offset:6px}.text-btn:hover{transform:none;box-shadow:none}
.marquee{background:var(--ink);border-block:4px solid var(--mustard);transform:rotate(-1.4deg);margin:34px -2vw;padding:10px 0;box-shadow:0 6px 0 var(--ink)}
.marquee-track b{color:var(--mustard)}
.section{border-bottom:3px solid var(--ink)}.section.ink{background:var(--ink)}.section.ink h2,.section.ink .section-head p{color:var(--paper)}
.section.ink .kicker{background:var(--mustard);color:var(--ink)}
.poster{border:3px solid var(--ink);box-shadow:var(--hard);background-image:radial-gradient(rgba(23,18,15,.14) 1.2px,transparent 1.6px);background-size:6px 6px}
.poster:nth-child(odd){transform:rotate(-.9deg)}.poster:nth-child(even){transform:rotate(1.1deg)}
.poster.red{background-color:var(--red)}.poster.ink{background-color:var(--ink);box-shadow:6px 6px 0 var(--mustard)}
.card{border:3px solid var(--ink);background:#f6efdc;box-shadow:var(--hard);transition:transform .15s}
.grid-3 .card:nth-child(1){transform:rotate(-1.6deg)}.grid-3 .card:nth-child(2){transform:rotate(1deg) translateY(14px)}.grid-3 .card:nth-child(3){transform:rotate(-.6deg)}
.card:hover{transform:rotate(0) translateY(-6px)!important}
.card-media{border-bottom:3px solid var(--ink);display:block;background:#fff}.card-media img{filter:grayscale(1) contrast(1.3);mix-blend-mode:multiply}.card:hover .card-media img{filter:none}
.card-body{color:var(--ink)}.meta{font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.tattoo-photo{border:3px solid var(--ink);box-shadow:var(--hard);background:#fff;padding:8px 8px 28px}
.tattoo-photo:nth-child(1){transform:rotate(-3deg)}.tattoo-photo:nth-child(2){transform:rotate(2.5deg)}
.instagram-band{background:var(--red) repeating-linear-gradient(90deg,transparent 0 40px,rgba(0,0,0,.08) 40px 42px)}
.social-big{font-family:var(--street);font-size:clamp(34px,7vw,104px);text-transform:uppercase;display:inline-block;background:var(--mustard);color:var(--ink);padding:.05em .2em;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(-1.5deg)}
.booking-guide{border:3px dashed var(--ink);padding:26px;background:#f6efdc;transform:rotate(1deg)}
.booking-guide li>span{font-family:var(--street);font-size:40px;color:var(--red)}
.event-row{border-bottom:3px solid var(--ink)}.event-list{border-top:3px solid var(--ink)}.pill{border-radius:0;border:2px solid var(--ink);background:var(--mustard);font-weight:900}
.page-hero{border-bottom:3px solid var(--ink)}
.footer{background:var(--ink);color:var(--paper);border-top:6px solid var(--mustard)}.footer a{color:var(--mustard)}
::selection{background:var(--mustard);color:var(--ink)}
@media(max-width:850px){.hero-art{transform:rotate(1deg);margin:0 8px}.hero-stamp{right:-4px}.marquee{transform:rotate(-1deg);margin:24px 0}.grid-3 .card:nth-child(n){transform:none}.poster:nth-child(n){transform:none}.nav-links.open{background:var(--paper);border-bottom:3px solid var(--ink)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== V2: deeper vintage + 2026 motion ===== */
@property --spin{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{--paper:#e3d2ac;--paper-2:#d4bf94;--ink:#1c140e;--red:#a8231a;--mustard:#dba52a;--teal:#2f5d57}
body{background-color:var(--paper);background-image:radial-gradient(rgba(90,55,20,.16) 1px,transparent 1.5px),linear-gradient(180deg,rgba(255,240,200,.35),rgba(120,70,20,.12))}
/* aged-paper vignette + stains */
html::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:98;background:radial-gradient(ellipse at center,transparent 55%,rgba(70,35,10,.38)),radial-gradient(circle at 12% 88%,rgba(110,60,15,.18),transparent 22%),radial-gradient(circle at 90% 8%,rgba(110,60,15,.14),transparent 20%)}
/* moving film grain */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.16;mix-blend-mode:multiply;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
/* sepia-duotone prints, colour on hover */
.hero-sheet img,.card-media img,.tattoo-photo img{filter:grayscale(1) sepia(.55) contrast(1.35) brightness(.98)}
.hero-sheet:hover img,.card:hover .card-media img,.tattoo-photo:hover img{filter:none}
/* hero: rotating retro sunburst behind the pasted print */
.hero-art::after{content:"";position:absolute;z-index:-1;inset:-34%;background:repeating-conic-gradient(from var(--spin),rgba(219,165,42,.55) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);animation:spin 40s linear infinite}
@keyframes spin{to{--spin:360deg}}
.hero-art{isolation:isolate}
.hero-sheet img{animation:flicker 5s infinite;translate:calc(var(--px,0)*10px) calc(var(--py,0)*10px);transition:translate .2s}
@keyframes flicker{0%,92%,100%{opacity:1}93%{opacity:.82}94%{opacity:1}96%{opacity:.9}}
/* headline: ink-bleed in */
h1{animation:inkin 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes inkin{from{opacity:0;filter:blur(14px);letter-spacing:.12em;translate:0 20px}to{opacity:1;filter:blur(0);letter-spacing:.005em;translate:0}}
/* stamp slams down */
.hero-stamp{animation:slam .55s cubic-bezier(.3,1.6,.5,1) 1.1s both}
@keyframes slam{from{opacity:0;scale:3.2;rotate:-25deg}60%{opacity:1}to{opacity:1;scale:1;rotate:0deg}}
/* tape wobble + sticker wiggle */
.hero-art::before{animation:tape 6s ease-in-out infinite}@keyframes tape{50%{rotate:3deg;translate:6px 0}}
.social-big{transition:rotate .25s,scale .25s}.social-big:hover{rotate:2deg;scale:1.04}
.nav-cta{background-image:conic-gradient(from var(--spin),transparent 0 70%,rgba(255,255,255,.55) 80%,transparent 90%);animation:spin 3s linear infinite}
/* press-in on scroll (scroll-driven, no JS) */
@supports(animation-timeline:view()){
 .card,.poster,.tattoo-photo,.booking-guide,.event-row{animation:paste linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
 @keyframes paste{from{opacity:0;translate:0 90px;rotate:7deg;scale:.9;filter:blur(4px)}to{opacity:1;translate:0;rotate:0deg;scale:1;filter:blur(0)}}
 .section h2{background:linear-gradient(var(--mustard),var(--mustard)) 0 88%/0% .32em no-repeat;animation:hl linear both;animation-timeline:view();animation-range:entry 20% cover 40%;display:inline-block}
 @keyframes hl{to{background-size:100% .32em}}
 .marquee-track{animation:scroll 24s linear infinite,lean linear both;animation-timeline:auto,scroll(root)}
 @keyframes lean{to{skew:-8deg}}
}
/* film light-leak that follows the pointer (JS sets --mx/--my) */
.leak{position:fixed;inset:0;pointer-events:none;z-index:97;mix-blend-mode:screen;background:radial-gradient(circle 280px at var(--mx,70%) var(--my,20%),rgba(255,140,40,.32),rgba(255,60,30,.12) 50%,transparent 70%);transition:background-position .2s}
/* cross-page transition: poster slides like a flipped sheet */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.35s ease-in both flipout}::view-transition-new(root){animation:.45s ease-out both flipin}
@keyframes flipout{to{opacity:0;transform:translateY(-6%) rotate(-1.5deg)}}@keyframes flipin{from{opacity:0;transform:translateY(6%) rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){body::after,.hero-art::after,.hero-art::before,.hero-sheet img,.nav-cta,h1,.hero-stamp,.card,.poster,.tattoo-photo,.booking-guide,.event-row,.section h2{animation:none!important}.leak{display:none}}