/* Kolory i sila gradientow — mozna je pozniej latwo zmienic. */
:root{--white:#f4f3ef;--ink:#111318;--left-shade:.88;--bottom-shade:.34}
.brand-name,.content-logo{display:none}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:Inter,Arial,sans-serif}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid #ead1a8;outline-offset:8px}
.hero{position:relative;isolation:isolate;min-height:680px;height:100svh;overflow:hidden}
.hero-picture,.hero-picture img{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero-picture img{object-fit:cover;object-position:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,0,0,var(--left-shade)) 0%,rgba(0,0,0,.70) 18%,rgba(0,0,0,.34) 35%,transparent 58%),linear-gradient(0deg,rgba(0,0,0,var(--bottom-shade)),transparent 28%);pointer-events:none}
.header{display:flex;align-items:flex-start;justify-content:space-between;padding:38px 5%;gap:30px}
.brand{display:block;width:clamp(180px,17vw,270px);flex-shrink:0}
.brand img{display:block;width:100%;height:auto}
.desktop-menu{display:flex;align-items:center;gap:clamp(24px,3vw,52px);padding-top:16px}
.desktop-menu a{font-size:14px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid transparent;transition:border-color .2s}
.desktop-menu a:hover{border-color:var(--white)}
.hero-content{position:absolute;left:5%;top:36%;width:33%;display:flex;flex-direction:column;align-items:flex-start}
h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(32px,3.3vw,66px);font-weight:400;line-height:1.12;letter-spacing:-.035em;order:2}
.hero-label{font-size:14px;font-weight:300;line-height:1.9;letter-spacing:3px;text-transform:uppercase;order:3;margin-top:36px}
.fine-line{width:50px;height:1px;background:var(--white);margin-bottom:30px;order:1}
.scroll-indicator{position:absolute;left:5%;bottom:7%;display:flex;gap:24px;align-items:center;padding:12px 0}
.scroll-indicator span{font-size:12px;letter-spacing:2px;text-transform:uppercase}
.scroll-indicator i{display:block;width:110px;height:1px;background:var(--white);transition:width .2s}
.scroll-indicator:hover i{width:135px}
.menu-button{display:none;align-items:center;gap:20px;background:none;border:0;min-height:44px;cursor:pointer;text-transform:uppercase;letter-spacing:3px;font-size:14px}
.menu-icon{display:flex;flex-direction:column;gap:7px;width:30px}
.menu-icon i{height:1px;background:var(--white);width:100%}
dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:rgba(13,16,21,.99);color:var(--white);padding:90px 24px 40px}
dialog::backdrop{background:#0d1015}
dialog[open]{display:flex;align-items:center;justify-content:center}
dialog nav{display:flex;flex-direction:column;align-items:center;gap:36px}
dialog nav a{font-size:20px;text-transform:uppercase;letter-spacing:4px;padding:10px}
.close-menu{position:absolute;right:5%;top:35px;display:flex;align-items:center;gap:20px;background:none;border:0;min-height:44px;cursor:pointer;letter-spacing:3px;text-transform:uppercase;font-size:14px}
.close-menu span{font-size:36px;font-weight:300}



/* Tablet poziomo zachowuje poziome zdjecie. */
@media (max-width:1100px) and (orientation:landscape){.hero{min-height:540px}.header{padding-top:24px}.brand{width:180px}.desktop-menu{gap:25px}.hero-content{top:36%;width:35%}h1{font-size:clamp(28px,3.4vw,42px)}.hero-label{font-size:12px;margin-top:24px}.fine-line{margin-bottom:20px}}
@media (max-width:900px){.desktop-menu{display:none}.menu-button{display:flex}}
/* Telefon i tablet pionowo: osobne zdjecie i kolejnosc tresci. */
@media (orientation:portrait),(max-width:600px){
 .hero{height:100svh;min-height:720px}
 .hero-picture img{object-position:50% 50%}
 .hero::before{background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.08) 40%,transparent 65%),linear-gradient(0deg,rgba(0,0,0,.30),transparent 22%)}
 .header{padding:26px 6% 0 17%;gap:18px}
 .brand{width:clamp(130px,29vw,250px)}
 .desktop-menu{display:none}.menu-button{display:flex;margin-top:2px;gap:14px}
 .hero-content{left:21%;top:16%;width:75%;max-width:650px}
 .hero-label{order:1;margin:0 0 22px;font-size:clamp(12px,1.8vw,16px);letter-spacing:3px;line-height:1.8}
 .fine-line{order:2;width:45px;margin-bottom:28px}
 h1{order:3;font-size:clamp(29px,6.1vw,60px);line-height:1.14}
 .scroll-indicator{left:10%;bottom:3%;gap:20px}.scroll-indicator i{width:85px}
}
@media (orientation:portrait) and (min-width:601px){.hero-content{top:22%}.header{padding-top:35px}h1{font-size:6vw}}
@media (max-width:380px){.menu-label{display:none}.hero-content{top:18%}h1{font-size:28px}.hero-label{font-size:12px}.fine-line{margin-bottom:20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Desktop i tablet poziomo — ciemny panel i centralna ekspozycja produktu. */
@media (orientation:landscape) and (min-width:601px){
 .hero{background:#08090a}
 .hero-picture{left:32%;top:9%;width:68%;height:91%;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.32) 7%,rgba(0,0,0,.65) 12%,rgba(0,0,0,.9) 18%,#000 25%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.32) 7%,rgba(0,0,0,.65) 12%,rgba(0,0,0,.9) 18%,#000 25%)}
 .hero-picture img{object-position:left center}
 .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 17% 64% at 36% 53%,rgba(174,115,57,.20) 0%,rgba(143,93,47,.13) 28%,rgba(108,72,41,.07) 52%,rgba(65,44,28,.025) 73%,rgba(8,9,10,0) 100%)}
 .hero::before{background:linear-gradient(90deg,#08090a 0%,#08090a 32%,rgba(8,9,10,.72) 34%,rgba(8,9,10,.28) 37%,rgba(8,9,10,.08) 40%,transparent 44%),linear-gradient(180deg,#08090a 0%,rgba(8,9,10,.94) 9%,rgba(8,9,10,.38) 20%,transparent 34%),linear-gradient(0deg,rgba(8,9,10,.64) 0%,rgba(8,9,10,.40) 14%,rgba(8,9,10,.16) 28%,transparent 42%)}
 .header{position:relative;margin:0 4%;padding:18px 0 16px;min-height:61px;align-items:center;border-bottom:1px solid rgba(244,243,239,.45)}
 .header::before{content:"";position:absolute;inset:0 calc(-100vw * .04);z-index:-1;background:#08090a;pointer-events:none}
 .header .brand{display:none}
 .brand-name{display:block;font-size:14px;font-weight:300;letter-spacing:3px;text-transform:uppercase;line-height:1.9}
 .desktop-menu{padding:0;gap:clamp(24px,3vw,52px)}
 .desktop-menu a{padding:0;border:0;font-weight:300;letter-spacing:3px;line-height:1.9}
 .desktop-menu a:hover{opacity:.7}
 .hero-content{left:5%;top:20%;width:clamp(260px,25.5vw,480px);max-width:43%}
 .content-logo{display:block;order:0;align-self:center;width:90%;height:auto;margin-bottom:48px;position:relative;top:clamp(8.131px,.797vw,15.012px)}
 .fine-line{display:block;order:2;width:110px;height:1px;margin:40px 0 32px;background:var(--white)}
 h1{order:3;align-self:flex-start;width:90%;white-space:nowrap;font-size:clamp(26px,3.12vw,59px);position:relative;top:var(--slogan-offset,0px)}
 .hero-label{order:1;margin-top:0;margin-left:0}
 .scroll-indicator{bottom:5%}
}
/* Phone: text flows from the top; reserve the flush plate's image region. */
@media (max-width:600px){
 .hero{min-height:max(720px,150vw);height:100svh}
 .hero .hero-picture img{object-position:center top}
 .hero .header{padding:24px 6% 0 17%;gap:14px}
 .hero .brand{width:clamp(120px,29vw,174px)}
 .hero .hero-content{position:relative;inset:auto;margin:22px 4% 0 21%;width:75%;max-width:none}
 .hero .hero-label{font-size:12px;line-height:1.8;margin:0 0 14px}
 .hero .fine-line{margin:0 0 20px}
 .hero h1{position:absolute;left:0;top:calc(var(--phone-slogan-top,58svh) - var(--phone-slogan-offset,125px));transform:translateY(-50%);width:100%;font-size:clamp(26px,6.1vw,36px);line-height:1.14}
}
@media (orientation:landscape) and (min-width:601px) and (max-height:700px){
 .header{min-height:57px;padding:16px 0 14px}
 .hero-content{top:19%;width:215px}.content-logo{margin-bottom:28px;top:6.724px}h1{font-size:26px}
 .hero-label{margin-top:0;font-size:12px}.fine-line{margin-top:24px;margin-bottom:30px}.scroll-indicator{bottom:3%}
}