/* old-school shop at night: oiled leather black, brass gold, condensed signage type */
:root{--bg:#0f0d0b;--bg2:#181512;--tx:#efe7d8;--mu:#a59d8f;--au:#d9b46a;--line:rgba(217,180,106,.25);
--sign:'Bebas Neue',Impact,sans-serif;--ser:'Playfair Display',Georgia,serif;--body:'DM Sans',system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.65 var(--body)}
a{color:inherit}
.nav{position:fixed;z-index:30;top:44px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px max(16px,4vw);mix-blend-mode:difference}
.logo{font:700 22px var(--ser);text-decoration:none}.logo i,.foot i{font-style:italic;font-weight:400;color:var(--au)}
.nav-links{display:flex;gap:28px;align-items:center}.nav-links a{text-decoration:none;font-size:15px;letter-spacing:.04em}
.btn-sm{border:1px solid currentColor;padding:8px 18px}
.nav-toggle{display:none;background:none;border:0;width:42px;height:42px;padding:10px;cursor:pointer}.nav-toggle span{display:block;height:2px;background:#fff;margin:6px 0}
@media(max-width:760px){.nav{mix-blend-mode:normal}.nav-toggle{display:block}.nav-links{display:none;position:absolute;top:100%;left:16px;right:16px;flex-direction:column;background:var(--bg2);padding:22px;border:1px solid var(--line)}.nav-links.open{display:flex}}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}
/* 1. mask */
.mask{height:260vh;position:relative}
.mask .sticky{display:grid;place-items:center}
.photo{position:absolute;inset:0;background:url(img/1.webp) center/cover;clip-path:inset(calc(50% - var(--p,0)*50%) calc(50% - var(--p,0)*50%) round calc(30px - var(--p,0)*30px));filter:brightness(calc(.5 + var(--p,0)*.25))}
.word{position:relative;margin:0;font:400 clamp(110px,24vw,420px)/.8 var(--sign);letter-spacing:.01em;background:linear-gradient(rgba(255,230,180,.25),rgba(255,230,180,.25)),url(img/5.webp) center 40%/cover;-webkit-background-clip:text;background-clip:text;color:transparent;transform:scale(calc(1 + var(--p,0)*1.6));opacity:calc(1 - var(--p,0)*1.6);-webkit-text-stroke:1.5px var(--au)}
.intro{position:absolute;top:22vh;left:0;right:0;text-align:center;font:500 13px var(--body);letter-spacing:.4em;text-transform:uppercase;color:var(--au);opacity:calc(1 - var(--p,0)*5)}
.intro b{display:block;font:400 italic 22px var(--ser);letter-spacing:0;text-transform:none;color:var(--tx);margin-top:8px}
.mask-copy{position:absolute;left:max(16px,5vw);bottom:9vh;max-width:460px;opacity:calc(var(--p,0)*2.4 - 1.1);transform:translateY(calc((1 - var(--p,0))*40px))}
.kick{font:500 12px var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--au);margin:0 0 12px}
.lead{font:400 21px/1.5 var(--ser);font-style:italic;margin:0 0 24px}
.btn{display:inline-block;background:var(--au);color:#1a1408;text-decoration:none;font-weight:700;padding:16px 30px;letter-spacing:.03em;transition:transform .2s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.pole{position:absolute;right:max(16px,5vw);bottom:8vh;width:46px;height:auto}
@media(max-width:760px){.mask-copy{bottom:6vh;right:16px}.pole{display:none}}
.strip{border-block:1px solid var(--line);overflow:hidden;padding:14px 0;background:var(--bg2)}
.marquee{display:flex;width:max-content;animation:mq 30s linear infinite;font:italic 400 26px var(--ser);color:var(--au)}
.marquee span{padding-right:22px;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
/* 2. razor cuts */
.cuts{height:340vh;position:relative}
.cuts .sticky{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4vw,64px);align-items:center;padding:110px max(16px,5vw) 40px}
.cut-copy h2{font:400 clamp(54px,7vw,110px)/.88 var(--sign);margin:0 0 20px;letter-spacing:.01em}
.cut-copy p{color:var(--mu);max-width:44ch}
.facts{list-style:none;padding:0;margin:28px 0 0;display:flex;gap:30px;flex-wrap:wrap}
.facts b{display:block;font:400 54px/1 var(--sign);color:var(--au)}.facts span{color:var(--mu);font-size:14px}
.cut-stack{position:relative;aspect-ratio:3/2;width:100%}
.cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c2{clip-path:polygon(0 0,calc(var(--k2,0)*220% - 60%) 0,calc(var(--k2,0)*220% - 120%) 100%,0 100%)}
.c3{clip-path:polygon(0 0,calc(var(--k3,0)*220% - 60%) 0,calc(var(--k3,0)*220% - 120%) 100%,0 100%)}
.c4{clip-path:polygon(0 0,calc(var(--k4,0)*220% - 60%) 0,calc(var(--k4,0)*220% - 120%) 100%,0 100%)}
.cut-stack::after{content:"";position:absolute;inset:-12px;border:1px solid var(--line);pointer-events:none}
@media(max-width:820px){.cuts .sticky{grid-template-columns:1fr;align-content:center;gap:20px;padding-top:100px}.cut-copy h2{font-size:52px}.cut-copy p{font-size:15px}.facts{gap:18px;margin-top:12px}.facts b{font-size:38px}}
/* 3. price list */
.cennik,.book{max-width:1100px;margin:0 auto;padding:clamp(70px,10vw,130px) max(16px,5vw)}
.cennik h2,.book h2{font:400 clamp(60px,9vw,130px)/.85 var(--sign);margin:0 0 40px}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
h3{font:400 26px var(--ser);font-style:italic;color:var(--au);margin:0 0 18px}
.row{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font-size:18px}
.row span{min-width:0}.row::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--mu);min-width:20px}
.row b{order:2;font:700 20px var(--ser);white-space:nowrap}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.tools img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.3) contrast(1.05);transition:filter .5s}
.tools img:hover{filter:none}
@media(max-width:760px){.menu-grid{grid-template-columns:1fr;gap:30px}.tools{grid-template-columns:1fr 1fr}.tools img:last-child{display:none}}
.book{text-align:center;border-top:1px solid var(--line)}
.book p{color:var(--mu)}
.foot{text-align:center;padding:40px 16px;border-top:1px solid var(--line);color:var(--mu);font-size:14px}.foot p{margin:0}
a:focus-visible{outline:2px solid var(--au);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}

/* scissors section */
.snip{height:260vh;position:relative;background:radial-gradient(60% 60% at 70% 50%,rgba(217,180,106,.08),transparent 70%),var(--bg)}
.snip .sticky{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,60px);align-items:center;padding:100px max(16px,5vw) 40px}
.snip-copy h2{font:400 clamp(54px,7vw,110px)/.88 var(--sign);margin:0 0 20px}
.snip-copy p{color:var(--mu);max-width:42ch}
.snip-art{width:100%;max-width:620px;height:auto;justify-self:center;overflow:visible}
@media(max-width:820px){.snip .sticky{grid-template-columns:1fr;align-content:center;gap:0;padding-top:96px}.snip-copy h2{font-size:48px}.snip-copy p{font-size:15px;margin:0}.snip-art{max-width:360px}}
