/* Napisz Piosenkę 2.0 "Dedykacja": ivory, midnight ink, burgundy, champagne. Mobile-first. */
:root{
  --ivory:#F6F1E7; --linen:#EDE5D6; --paper:#FBF8F1; --champagne:#D8C6A3; --champ-d:#C3AE85;
  --bronze:#8B5C30; --bronze-ink:#7A5230;
  --ink:#17203A; --ink-2:#464C66; --on-ink:#F6F1E7; --on-ink-2:#BCC0D2;
  --burg:#6E2A3A; --burg-deep:#571F2D;
  --sage:#8A9A82; --sage-soft:#DCE3D5;
  --display:'Libre Caslon Text','Noto Serif Display',Georgia,'Times New Roman',serif;
  --text:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Italianno','Snell Roundhand','Segoe Script',cursive;
  --gut:clamp(18px,5.4vw,56px); --max:1220px;
  --sec:clamp(46px,7.4vw,96px); --ease:cubic-bezier(.16,1,.3,1); --dock-h:62px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px;scroll-padding-bottom:calc(var(--dock-h) + 36px)}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.62;overflow-x:hidden;padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.16;letter-spacing:-.004em;word-spacing:.05em;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--burg)}
p{margin:0 0 1em;text-wrap:pretty}
::selection{background:var(--champagne);color:var(--ink)}
:focus-visible{outline:2px solid var(--burg);outline-offset:3px;border-radius:2px}
.foot :focus-visible,.film__play:focus-visible,.packs .pack--hot :focus-visible{outline-color:var(--champagne)}
.skip{position:absolute;left:-999px;top:8px;background:var(--burg);color:var(--ivory);padding:10px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{position:relative}

/* ribbon + header */
.ribbon{margin:0;background:var(--linen);color:var(--ink-2);font-size:.76rem;line-height:1.3;text-align:center;padding:6px var(--gut);border-bottom:1px solid var(--champagne)}
.top{position:sticky;top:0;z-index:40;background:rgba(246,241,231,.97);border-bottom:1px solid var(--champagne)}
.top__in{display:flex;align-items:center;gap:14px;min-height:62px}
.brand{display:block;margin-right:auto;line-height:0}
.brand img{height:38px;width:auto}
.nav{display:none}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--champ-d);border-radius:2px;background:transparent;color:var(--ink);cursor:pointer}
body.nav-open .nav{display:flex;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 110px);overflow-y:auto;flex-direction:column;background:var(--ivory);padding:4px var(--gut) 22px;border-bottom:1px solid var(--champ-d);box-shadow:0 24px 40px rgba(18,18,22,.2)}
body.nav-open .nav a{font-family:var(--display);font-size:1.7rem;line-height:1.2;color:var(--ink);text-decoration:none;display:flex;align-items:center;min-height:58px;border-bottom:1px solid var(--champagne)}
body.nav-open .nav a:active,body.nav-open .nav a:focus-visible{color:var(--burg)}
body.nav-open .nav a.nav__lang{font-family:var(--text);font-size:1rem;font-weight:600;border:0;min-height:52px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 28px;border-radius:2px;border:1px solid var(--burg);background:var(--burg);color:var(--ivory);font:600 1rem/1.1 var(--text);letter-spacing:.015em;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .4s var(--ease)}
.btn:hover{background:var(--burg-deep);border-color:var(--burg-deep)}
.btn--sm{min-height:42px;padding:9px 20px;font-size:.95rem}
.btn--light{background:var(--ivory);border-color:var(--ivory);color:var(--ink)}
.btn--light:hover{background:var(--champagne);border-color:var(--champagne)}
.btn--xl{width:100%;min-height:58px;font-size:1.08rem}
.textbtn{display:inline-flex;align-items:center;gap:12px;min-height:48px;background:none;border:0;padding:0 4px;color:var(--ink);font:600 1rem var(--text);cursor:pointer}
.textbtn__ico{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--burg);border-radius:50%;color:var(--burg);transition:background .25s,color .25s}
.textbtn:hover .textbtn__ico{background:var(--burg);color:var(--ivory)}
.link{color:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--burg);transition:text-decoration-color .3s,text-underline-offset .4s var(--ease)}
.link:hover{text-decoration-color:currentColor;text-underline-offset:.4em}
.foot .link{text-decoration-color:var(--champagne)}

/* HERO */
.hero{padding:clamp(22px,5vw,56px) 0 clamp(48px,8vw,100px)}
.hero__grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
h1{font-size:clamp(2.15rem,8.3vw,3.7rem);line-height:1.15;letter-spacing:-.006em;font-weight:400}
.hero__photo{margin:0;position:relative}
.hero__frame{aspect-ratio:1/1.04;padding:9px;background:var(--paper);border:1px solid var(--champagne);overflow:hidden}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:saturate(.92) sepia(.07);animation:settle 1.6s var(--ease) both}
.hero__photo figcaption,.why__photo figcaption{font-size:.78rem;color:var(--ink-2);margin-top:8px;font-style:italic}
.hero__lead{font-size:clamp(1.05rem,2.5vw,1.2rem);color:var(--ink-2);max-width:34em;margin:0 0 20px}
.hero__lead strong{color:var(--ink);font-weight:700}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-bottom:22px}
.facts{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;font-size:.95rem;color:var(--ink-2)}
.facts li{line-height:1.3;display:flex;align-items:center;gap:8px}
.facts li::before{content:"";width:9px;height:6px;border-radius:50%;background:var(--bronze);transform:rotate(-24deg)}

/* dedication card */
.dedic{background:var(--paper);border:1px solid var(--champagne);padding:20px 18px 16px;box-shadow:0 22px 44px rgba(18,18,22,.12);position:relative}
.dedic__form{display:grid;gap:10px}
.dedic__form label{font-weight:700;font-size:.98rem}
.dedic__form input{width:100%;min-height:50px;border:1px solid var(--champ-d);border-radius:2px;background:#FFFDF8;color:var(--ink);font:500 1.1rem/1.2 var(--text);padding:0 14px}
.dedic__form input:focus{outline:none;border-color:var(--burg);box-shadow:0 0 0 3px rgba(110,42,58,.16)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:18px;margin-inline:-18px;padding-inline:18px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;border:1px solid var(--champ-d);background:transparent;color:var(--ink);border-radius:999px;min-height:40px;padding:0 15px;font:500 .92rem/1 var(--text);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--burg)}
.chip[aria-pressed=true]{background:var(--burg);border-color:var(--burg);color:var(--ivory)}
.dedic__paper{position:relative;margin-top:14px;padding:14px 8px 4px 58px;min-height:128px;border-top:1px solid var(--champagne)}
.dedic__clef{position:absolute;left:4px;top:16px;width:34px;height:88px;color:var(--burg)}
.dedic__for{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-ink);margin:0 0 4px;font-weight:600}
.dedic__name{-webkit-text-stroke:.35px currentColor;font-family:var(--script);font-size:3rem;line-height:49px;height:49px;margin:6px 0 0;white-space:nowrap;overflow:visible;color:var(--ink);background:repeating-linear-gradient(to bottom,var(--champ-d) 0 1px,transparent 1px 12px) 0 0/100% 49px no-repeat;margin-right:-8px}
.dedic__occ{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--burg);margin:12px 0 6px}
.dedic__note{font-size:.84rem;color:var(--ink-2);margin:0}

/* WHY */
.why{background:var(--linen);padding:var(--sec) 0}
.why__grid{display:grid;gap:30px}
.why__photo{margin:0}
.frame{padding:9px;background:var(--paper);border:1px solid var(--champagne);overflow:hidden}
.frame img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:saturate(.9) sepia(.08);transition:transform 1.4s var(--ease)}
.rv .frame img{transform:scale(1.04)}.rv.in .frame img{transform:none}
.why h2{font-size:clamp(2rem,6vw,3.3rem)}
.why p{max-width:32em;margin:18px 0 0;color:var(--ink-2);font-size:1.1rem}
.why__staff{position:relative;height:49px;margin:34px 0 0;max-width:24em;background:repeating-linear-gradient(to bottom,var(--champ-d) 0 1px,transparent 1px 12px) 0 0/100% 49px no-repeat}
.why__staff svg{position:absolute;left:0;top:-23px;width:28px;height:72px;color:var(--burg)}
.why__pull{margin:14px 0 0;font-family:var(--display);font-style:italic;font-size:clamp(1.35rem,3.6vw,1.8rem);line-height:1.3;color:var(--burg);padding:0;max-width:24em}

/* section heads */
.sec-head{max-width:44rem;margin-bottom:28px}
.sec-head h2{font-size:clamp(2rem,6vw,3.3rem)}
.sec-head p{margin:14px 0 0;font-size:1.1rem;color:var(--ink-2);max-width:36em}

/* SHELF */
.shelf{padding:var(--sec) 0 clamp(20px,4vw,40px)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.rack{list-style:none;margin:26px 0 0;padding:6px var(--gut) 26px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:thin;scrollbar-color:var(--champ-d) transparent}
.rack>li{flex:none;width:min(70vw,270px);scroll-snap-align:start;position:relative}
.rec__stage{position:relative;aspect-ratio:1;margin-bottom:14px}
.rec__disc{position:absolute;top:3%;bottom:3%;left:6%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#1d2540 0 1.5px,#121a31 1.5px 3px);box-shadow:0 6px 16px rgba(18,18,22,.25);transition:transform 1s var(--ease)}
.rec__disc::before{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--champagne)}
.rec__disc::after{content:"";position:absolute;inset:48.5%;border-radius:50%;background:var(--ink)}
.cover{position:absolute;inset:0;z-index:1;isolation:isolate;overflow:hidden;background:var(--ink);box-shadow:0 14px 30px rgba(18,18,22,.22),0 2px 6px rgba(18,18,22,.16);transition:transform .8s var(--ease)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform 1.4s var(--ease)}
.cover::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,16,32,.82),rgba(12,16,32,.4) 38%,rgba(12,16,32,0) 66%),linear-gradient(to bottom,rgba(12,16,32,.62),rgba(12,16,32,0) 36%)}
.cover::after{content:"";position:absolute;z-index:1;inset:9px;border:1px solid rgba(246,241,231,.5);pointer-events:none}
.rec:hover .cover img{transform:scale(1.04)}
.g-mono img{filter:grayscale(1) contrast(1.06) brightness(.96)}
.g-warm img{filter:sepia(.2) saturate(.95)}
.g-cool img{filter:saturate(.78) hue-rotate(-8deg) brightness(.96)}
.g-soft img{filter:saturate(.85) sepia(.1) brightness(1.02)}
.g-dusk img{filter:saturate(.9) sepia(.12) brightness(.92)}
.cover__label{position:absolute;z-index:2;top:19px;left:22px;right:22px;display:flex;align-items:center;gap:8px;color:var(--ivory);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-shadow:0 0 10px rgba(12,16,32,.8),0 1px 2px rgba(12,16,32,.7)}
.cover__label svg{width:10px;height:26px;flex:none}
.rec .cover__title{position:absolute;z-index:2;left:22px;bottom:24px;right:84px;margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.3rem,5.6vw,1.6rem);line-height:1.1;color:var(--ivory);text-wrap:balance;text-shadow:0 1px 14px rgba(12,16,32,.55)}
.lay-top .cover__title{top:50px;bottom:auto;right:22px;font-size:clamp(1.45rem,6vw,1.8rem)}
.lay-b .cover__title{left:22px;right:22px;bottom:80px;text-align:center}
.lay-d .cover__title{font-style:normal;font-family:var(--text);font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;left:22px;right:84px;bottom:34px;line-height:1.5}
.tone-dark .cover__title,.tone-dark .cover__label{color:var(--ink);text-shadow:none}
.tone-dark::before{background:linear-gradient(to bottom,rgba(246,241,231,.86),rgba(246,241,231,.45) 40%,rgba(246,241,231,0) 70%)}
.tone-dark::after{border-color:rgba(23,32,58,.4)}
.lay-b .cover__label{justify-content:center}
.cover.lay-strip::before{background:linear-gradient(to top,var(--ivory) 0 35%,rgba(246,241,231,0) 35%),linear-gradient(to bottom,rgba(246,241,231,.82),rgba(246,241,231,.4) 22%,rgba(246,241,231,0) 40%)}
.cover.lay-strip .cover__label{color:var(--ink);text-shadow:none}
.cover.lay-strip::after{inset:9px 9px 0 9px;border-bottom:0;border-color:rgba(246,241,231,.5)}
.cover.lay-strip .cover__title{color:var(--ink);text-shadow:none;left:22px;right:84px;bottom:0;height:35%;display:flex;align-items:center;font-size:clamp(1.2rem,5vw,1.4rem);line-height:1.12}
.rec__stage.lay-strip .rec__play{background:var(--burg);color:var(--ivory)}
.rec__stage.lay-strip .rec__play:hover{background:var(--burg-deep)}
.rec.is-active .rec__disc{transform:translateX(24%)}
.rec.is-active .cover{transform:translateX(-4%)}
.rec.is-live .rec__disc{animation:spinx 5s linear infinite}
.rec__play{position:absolute;z-index:3;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;border:0;background:var(--ivory);color:var(--burg);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(12,16,32,.4);transition:transform .35s var(--ease),background .25s}
.rec__play::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.rec__play:hover{transform:scale(1.08);background:#fff}
.rec__play:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;box-shadow:0 0 0 6px rgba(12,16,32,.55)}
.rec:hover .cover,.rec:focus-within .cover{box-shadow:0 20px 38px rgba(18,18,22,.28),0 3px 8px rgba(18,18,22,.18)}
.rec__play .i-pause,.dock__btn .i-pause{display:none}
.rec.is-active.is-live .rec__play .i-play,body.is-playing .dock__btn .i-play{display:none}
.rec.is-active.is-live .rec__play .i-pause,body.is-playing .dock__btn .i-pause{display:block}
.rec>p{font-size:.95rem;margin:0 0 10px;color:var(--ink-2);line-height:1.5;min-height:4.5em}
.rec__meta{display:flex;align-items:center;gap:10px}
.rec__time{font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:600;color:var(--ink-2);flex:none}
.rec__cta{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem}
.wave{width:100%;height:24px;cursor:pointer;touch-action:none}
.wave .b{fill:rgba(23,32,58,.3)}
.wave .d{fill:var(--burg)}
.rec .wave{flex:1;min-width:0}
.wave--dock .b{fill:rgba(23,32,58,.3)}.wave--dock .d{fill:var(--burg)}
.shelf__note{font-size:.85rem;color:var(--ink-2);margin:0;max-width:44em}

/* FILM */
.film-sec{padding:clamp(20px,3.4vw,44px) 0 var(--sec)}
.film{margin:0}
.film__frame{position:relative;background:var(--ink);overflow:hidden}
.film.is-on .film__frame{aspect-ratio:16/9}
.film video[hidden]{display:none}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.film__play{position:relative;width:100%;border:0;background:var(--ink);color:var(--on-ink);display:grid;align-content:center;justify-items:start;gap:10px;padding:clamp(18px,5vw,56px);text-align:left;cursor:pointer;overflow:hidden}
.film__play{min-height:300px;padding-bottom:84px}
@media (min-width:640px){.film__frame{aspect-ratio:2.1/1}.film__play{position:absolute;inset:0;min-height:0;padding-bottom:clamp(18px,5vw,56px)}}
.film__staff{position:absolute;left:0;right:0;bottom:22px;height:49px;background:repeating-linear-gradient(to bottom,rgba(216,198,163,.32) 0 1px,transparent 1px 12px) 0 0/100% 49px no-repeat;pointer-events:none}
.film__disc{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--ivory);color:var(--burg);transition:transform .5s var(--ease)}
.film__play:hover .film__disc{transform:scale(1.08)}
.film__cap{position:relative;font-family:var(--display);font-style:italic;font-size:clamp(1.8rem,6vw,3rem);line-height:1.05}
.film__sub{position:relative;max-width:30em;font-family:var(--text);font-size:.98rem;line-height:1.55;color:var(--on-ink-2)}
.film__note{margin-top:10px;font-size:.85rem;color:var(--ink-2);font-style:italic}
.film.is-on .film__play,.film.is-on .film__note{display:none}

/* HOW */
.how{background:var(--linen);padding:var(--sec) 0}
.measures{position:relative;padding-top:124px}
.measures::before{content:"";position:absolute;left:44px;right:0;top:20px;height:49px;background:repeating-linear-gradient(to bottom,var(--champ-d) 0 1px,transparent 1px 12px) 0 0/100% 49px no-repeat}
.measures::after{content:"";position:absolute;right:0;top:20px;height:49px;width:2px;background:var(--ink);opacity:.7}
.measures__clef{position:absolute;left:0;top:6px;width:36px;height:94px;color:var(--burg)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:3.4rem 1fr;column-gap:20px;row-gap:2px;padding:22px 0;border-top:1px solid var(--champ-d)}
.steps li:last-child{border-bottom:1px solid var(--champ-d)}
.steps__n{grid-row:span 2;font-family:var(--display);font-style:normal;font-weight:400;font-size:clamp(3rem,12vw,4.4rem);line-height:.9;color:var(--bronze);min-width:.55em}
.steps h3{font-size:clamp(1.45rem,4.6vw,1.9rem);align-self:end;margin-bottom:10px}
.steps p{margin:0;max-width:30em;color:var(--ink-2)}
.paynote{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:28px 0 0}
.paynote li{border:1px solid var(--champ-d);border-radius:999px;padding:7px 15px;font-weight:500;font-size:.9rem;color:var(--ink-2)}

/* MAKER */
.maker{padding:calc(var(--sec)*1.15) 0;text-align:center}
.maker__in{max-width:60rem}
.maker__clef{width:46px;height:120px;color:var(--burg);margin:0 auto 18px}
.maker h2{font-size:clamp(2rem,6vw,3.5rem);max-width:20em;margin-inline:auto}
.maker__cols{display:grid;gap:0;margin-top:30px;text-align:left}
.maker__cols p{color:var(--ink-2);font-size:1.08rem}
.maker__sign{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,3.6vw,1.75rem);line-height:1.3;color:var(--burg);margin:14px auto 0;max-width:24em}
.maker__name{-webkit-text-stroke:.35px currentColor;font-family:var(--script);font-size:3.2rem;line-height:1;margin:6px 0 0;color:var(--ink)}

/* PACKS */
.packs{background:var(--linen);padding:var(--sec) 0}
.packs__grid{display:grid;gap:22px;margin-top:8px}
.pack{position:relative;background:var(--paper);border:1px solid var(--champagne);padding:28px 24px 24px;display:flex;flex-direction:column}
.pack--hot{background:var(--burg);border-color:var(--burg);color:var(--ivory)}
.pack__top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.pack__rec{font-family:var(--display);font-style:italic;font-size:1.05rem;line-height:1.2;color:#EFE6D2;text-align:right;max-width:7.5em;margin:0 0 .6em}
.pack h3{font-size:clamp(1.8rem,5vw,2.2rem);margin:0 0 10px}
.pack__for{font-size:.95rem;color:var(--ink-2);margin:0 0 12px;line-height:1.5}
.pack--hot .pack__for{color:#E8D9DD}
.pack__price{font-family:var(--display);font-weight:500;font-size:clamp(3.6rem,13vw,4.8rem);line-height:.95;letter-spacing:-.02em}
.pack__price small{font-size:.32em;font-weight:500;margin-left:.2em;letter-spacing:0;font-family:var(--text)}
.pack ul{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:0;flex:1;align-content:start}
.pack li{padding:8px 0 8px 26px;border-top:1px solid var(--champagne);position:relative;font-size:.97rem;line-height:1.38}
.pack--hot li{border-top-color:rgba(216,198,163,.4)}
.pack li::before{content:"";position:absolute;left:2px;top:15px;width:11px;height:7px;border-radius:50%;background:var(--bronze);transform:rotate(-24deg)}
.pack--hot li::before{background:var(--champagne)}
.pack .btn{width:100%}
.pack--hot .btn{background:var(--ivory);border-color:var(--ivory);color:var(--burg)}
.pack--hot .btn:hover{background:var(--champagne);border-color:var(--champagne);color:var(--ink)}
.pack__shop{margin:12px 0 0;text-align:center;font-size:.9rem}
.pack--hot .link{text-decoration-color:var(--champagne)}
.packs__note{margin:30px 0 0;max-width:46em;color:var(--ink-2);font-size:.95rem}

/* SAFE */
.safe{padding:var(--sec) 0}
.safe__grid{display:grid;gap:36px}
.safe h2{font-size:clamp(2rem,6vw,3.2rem);margin-bottom:18px}
.safe p{max-width:34em;color:var(--ink-2)}
.safe__links{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:24px}
.trust{background:var(--paper);border:1px solid var(--champagne);padding:26px 24px}
.trust h3{font-size:1.6rem;margin-bottom:12px}
.trust h4{font-size:1.3rem;margin:22px 0 8px;font-style:italic;color:var(--burg)}
.trust p{color:var(--ink-2)}

/* ORDER */
.order{background:var(--sage-soft);padding:var(--sec) 0}
.order__grid{display:grid;gap:32px}
.order h2{font-size:clamp(2.2rem,7vw,3.8rem)}
.order__side p{color:var(--ink-2);font-size:1.08rem;margin:14px 0 20px}
.dedic__paper--side{background:var(--paper);border:1px solid var(--champagne);padding:16px 12px 14px 58px;margin:0;box-shadow:0 18px 36px rgba(18,18,22,.1)}
.dedic__paper--side .dedic__clef{top:18px}
.order__sum{font-weight:700;margin-top:18px;min-height:1.6em;color:var(--ink)}
.form{background:var(--paper);border:1px solid var(--champagne);padding:clamp(20px,4vw,40px);display:grid;gap:16px;box-shadow:0 22px 44px rgba(18,18,22,.1)}
.form__banner{background:#EEF2E9;border:1px solid var(--sage);padding:12px 14px;font-size:.92rem;color:var(--ink);margin:0}
.field{display:grid;gap:6px;border:0;padding:0;margin:0;min-width:0}
.field label,.field legend{font-weight:700;font-size:.95rem;padding:0}
.field-row{display:grid;gap:16px}
.field input,.field select,.field textarea{width:100%;min-height:52px;border:1px solid var(--champ-d);border-radius:2px;background:#FFFDF8;color:var(--ink);font:500 1.0625rem/1.4 var(--text);padding:12px 14px}
.field textarea{resize:vertical;min-height:170px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--burg);box-shadow:0 0 0 3px rgba(110,42,58,.16)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:var(--burg-deep);background:#FBF1F1}
.pickpack{display:grid;gap:8px}
.pp{display:block;cursor:pointer;position:relative}
.pp input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;min-height:0;padding:0;border:0;left:0;top:0}
.pp span{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--champ-d);border-radius:2px;padding:12px 14px;min-height:52px;background:#FFFDF8;transition:background .25s,border-color .25s,color .25s}
.pp i{white-space:nowrap;flex:none;font-style:normal;font-family:var(--display);font-weight:500;font-size:1.35rem}
.pp input:checked+span{background:var(--burg);border-color:var(--burg);color:var(--ivory)}
.pp input:focus-visible+span{outline:2px solid var(--burg);outline-offset:2px}
.form__sub{font-family:var(--display);font-style:italic;font-size:1.55rem;margin-top:6px;padding-top:16px;border-top:1px solid var(--champagne)}
.check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.95rem;cursor:pointer}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--burg)}
.form__concept:empty{display:none}
.form__concept{font-size:.9rem;color:var(--ink-2);margin:0}

/* FAQ */
.faq{padding:var(--sec) 0}
.faq__grid{display:grid;gap:26px}
.faq h2{font-size:clamp(2rem,6vw,3.2rem)}
.faq details{border-top:1px solid var(--champ-d)}
.faq details:last-child{border-bottom:1px solid var(--champ-d)}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;list-style:none;padding:20px 0;font-family:var(--display);font-size:1.3rem;line-height:1.2;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(var(--burg),var(--burg)) center/100% 1.5px no-repeat,linear-gradient(var(--burg),var(--burg)) center/1.5px 100% no-repeat;transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;max-width:36em;color:var(--ink-2)}

/* FOOTER */
.foot{background:var(--ink);color:var(--on-ink);padding:clamp(52px,8vw,96px) 0 36px}
.foot__grid{display:grid;gap:36px}
.foot__lead img{height:40px;width:auto;margin-bottom:28px}
.foot h2{font-size:clamp(1.9rem,5.6vw,3rem);color:var(--on-ink)}
.foot__lead p{color:var(--on-ink-2);max-width:30em;margin:14px 0 22px}
.foot h3{font-family:var(--text);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);margin-bottom:10px}
.foot__col{display:grid;gap:10px;align-content:start;justify-items:start}
.foot__base{margin-top:46px;padding-top:22px;border-top:1px solid rgba(216,198,163,.3);font-size:.9rem;color:var(--on-ink-2)}
.foot__base p{margin:0 0 8px}

/* DOCK */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom));background:var(--ivory);border-top:1px solid var(--champagne);box-shadow:0 -10px 26px rgba(18,18,22,.1);transition:transform .6s var(--ease)}
.dock__lead{display:grid;font-size:.82rem;line-height:1.25;color:var(--ink-2)}
.dock__lead b{color:var(--ink);font-size:.98rem;font-weight:700}
.dock:has(#dockPlayer:not([hidden])) .dock__lead{display:none}
.dock__player{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.dock__player[hidden]{display:none}
.dock__btn{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--burg);color:var(--ivory);display:grid;place-items:center;cursor:pointer}
.dock__meta{display:grid;gap:3px;min-width:0;flex:1}
.dock__title{font-family:var(--display);font-style:italic;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock__time{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--ink-2);flex:none}
.dock__cta{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--burg);color:var(--ivory);text-decoration:none;font-weight:600;border-radius:2px;padding:6px 20px;min-height:44px;line-height:1.1;font-size:.96rem;margin-left:auto}
.dock__cta:hover{background:var(--burg-deep)}
.dock__price{font-size:.72rem;font-weight:500;opacity:.85}
.dock__txt .short{display:none}
.dock:has(#dockPlayer:not([hidden])) .dock__cta{padding:8px 14px}
.dock:has(#dockPlayer:not([hidden])) .dock__price{display:none}
.dock:has(#dockPlayer:not([hidden])) .dock__txt .long{display:none}
.dock:has(#dockPlayer:not([hidden])) .dock__txt .short{display:inline}
body.at-order:not(.has-player) .dock,body.at-packs:not(.has-player) .dock{transform:translateY(120%)}
body.at-order.has-player .dock__cta,body.at-packs.has-player .dock__cta{display:none}

/* reveals: content visible by default */
.js .rv{transform:translateY(18px);transition:transform 1.1s var(--ease)}
.js .rv.in{transform:none}

@keyframes spinx{from{transform:translateX(24%) rotate(0)}to{transform:translateX(24%) rotate(360deg)}}
@keyframes settle{from{transform:scale(1.05)}to{transform:none}}

@media (max-width:350px){.brand img{height:32px}.top__in{gap:8px}.btn--sm{padding:8px 14px}.dock__lead .l1{display:none}.dock__cta{padding:8px 14px}}
@media (max-width:639px){.top .btn--sm{display:none}.dock__lead .l1{display:none}}
@media (min-width:640px){
  .field-row{grid-template-columns:1fr 1fr}
  .rack>li{width:262px}
}
@media (min-width:960px){
  body{padding-bottom:0}
  .nav{display:flex;gap:22px;align-items:center;font-size:.96rem;font-weight:500;margin-right:6px}
  .nav a{text-decoration:none;padding:10px 0;background:linear-gradient(var(--burg),var(--burg)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
  .nav a:hover{background-size:100% 1px}
  .nav__lang{border:1px solid var(--champ-d);border-radius:999px;padding:4px 12px!important;font-size:.85rem;background:none!important}
  .burger{display:none}
  .top__in{min-height:72px}
  .brand img{height:42px}
  .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);grid-template-rows:auto 1fr auto;column-gap:clamp(40px,6vw,96px);row-gap:20px;align-items:start}
  .hero__title{grid-column:1;grid-row:1;padding-top:clamp(0px,3vw,36px)}
  .hero__copy{grid-column:1;grid-row:2}
  .hero__photo{grid-column:2;grid-row:1/3}
  .hero__frame{aspect-ratio:4/5}
  .dedic{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 clamp(28px,4vw,56px);align-items:center;margin-top:clamp(8px,2vw,28px);padding:26px clamp(22px,3vw,40px)}
  .dedic .chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
  .dedic__paper{margin-top:0;border-top:0;border-left:1px solid var(--champagne);padding-left:78px}
  .dedic__paper .dedic__clef{left:20px}
  .why__grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(40px,7vw,100px)}
  .rack{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 26px;overflow:visible;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
  .rack>li{width:auto}
  .steps{grid-template-columns:repeat(4,1fr);gap:0 36px}
  .steps li{grid-template-columns:1fr;border-top:0;border-bottom:0!important;padding:0 0 10px;position:relative;align-content:start}
  .steps li:not(:first-child)::before{content:"";position:absolute;left:-18px;top:-124px;height:49px;width:1px;background:var(--ink);opacity:.55;margin-top:20px}
  .steps__n{grid-row:auto;margin-bottom:14px}
  .maker__cols{grid-template-columns:1fr 1fr;column-gap:56px}
  .packs__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:22px;row-gap:0;align-items:stretch}
  .pack--hot{box-shadow:0 24px 48px rgba(18,18,22,.24)}
  .pack{padding:24px 24px 22px}
  .pack h3{font-size:clamp(1.6rem,2.2vw,2rem)}
  .pack__price{font-size:clamp(3.4rem,4.4vw,4.4rem)}
  @supports (grid-template-rows:subgrid){
    .packs__grid{grid-template-rows:repeat(6,auto)}
    .pack{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
    .pack .btn{align-self:end}
  }
  .safe__grid{grid-template-columns:1.15fr .85fr;gap:clamp(40px,7vw,100px);align-items:start}
  .order__grid{grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,90px);align-items:start}
  .order__side{position:sticky;top:96px}
  .faq__grid{grid-template-columns:.7fr 1.3fr;gap:clamp(40px,6vw,90px)}
  .foot__grid{grid-template-columns:1.4fr .7fr .8fr;gap:60px}
}
@media (min-width:1280px){.rack{gap:44px 30px}}
/* desktop: header already carries the order action, so the dock is only a compact round player in the bottom-right gutter; it expands on hover or focus */
@media (min-width:960px){
  .dock{left:auto;right:24px;bottom:24px;width:auto;max-width:calc(100vw - 48px);transform:none;padding:5px;gap:0;border:1px solid var(--champagne);border-radius:999px;box-shadow:0 10px 30px rgba(18,18,22,.2);justify-content:flex-end;flex-direction:row-reverse}
  .dock__lead,.dock__cta{display:none!important}
  body:not(.has-player) .dock{display:none}
  .dock__player{flex:none;gap:0;flex-direction:row-reverse}
  .dock__meta,.dock__time{display:none}
  .dock:has(:focus-visible) .dock__meta{display:grid;width:240px;margin:0 12px 0 14px}
  .dock:has(:focus-visible) .dock__time{display:block;margin-right:6px}
  @media (hover:hover){.dock:hover .dock__meta{display:grid;width:240px;margin:0 12px 0 14px}.dock:hover .dock__time{display:block;margin-right:6px}}
  .dock__btn{width:46px;height:46px}
  body.has-player{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.rv .frame img{transform:none}
}
@media (min-width:960px) and (max-width:1279px){.dock{right:5px;bottom:14px;padding:3px}.dock__btn{width:38px;height:38px}}