/* Granula — spoločný základ pre index.html, suroviny.html a granule-na-mieru.html.
   Jedna svetlá téma, každá farba vypísaná explicitne (žiadny tmavý režim). */
:root{
  --k:#0047BB; --k-deep:#003A99; --k-soft:#2F68CC; --k-photo:#3A70D0;
  --o:#FF6900; --o-deep:#E55E00;
  --m:#F4EBE2; --m2:#EADFD2; --paper:#FBF6F0; --white:#FFFAF4;
  --n:#000000; --n2:#1C1C1C; --i2:#2E2E2E; --i3:#5E5852; --muted-dark:#C9C2BA;
  --line:#CDBFB0;
  --l:#C9F04D; --r:#FFB3C7;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--m);color:var(--n);font-family:var(--font);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--k)}a:hover{color:var(--n)}
:focus-visible{outline:3px solid var(--o);outline-offset:3px}
::selection{background:var(--k);color:var(--m)}
h1,h2,h3,p{margin:0}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{max-width:1312px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding:clamp(72px,8vw,112px) 0}
.bt{border-top:2px solid var(--n)}
.bb{border-bottom:2px solid var(--n)}

/* ---------- typografia ---------- */
.display{font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.015em}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.h2{font-size:clamp(40px,5vw,76px);line-height:1.02;text-transform:uppercase;letter-spacing:-.015em;font-weight:900;text-wrap:balance}
.h2 .lt{font-weight:300}
.lead{font-size:19px;line-height:1.55;color:var(--i2)}
.head{display:flex;flex-direction:column;gap:18px}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}

/* ---------- logo a nálepky ---------- */
.logo{display:inline-block;background:var(--o);color:var(--n);font-weight:900;font-style:italic;text-transform:uppercase;
  line-height:1;letter-spacing:-.01em;transform:rotate(-4deg);white-space:nowrap;font-size:30px;padding:6px 10px 5px}
.logo-link{display:inline-flex;text-decoration:none}
.sticker{display:inline-block;padding:7px 12px 6px;font-weight:900;text-transform:uppercase;line-height:1;
  letter-spacing:-.015em;font-size:18px;transform:rotate(var(--t,-4deg))}

/* ---------- tlačidlá ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:16px 28px;
  border:2px solid var(--n);border-radius:0;font-family:inherit;font-weight:900;font-size:17px;letter-spacing:.02em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background 120ms ease,color 120ms ease,border-color 120ms ease}
.btn-o{background:var(--o);color:var(--n)}
.btn-head{border-color:var(--k)}
.btn-k{background:var(--k);color:var(--m)}
.btn-n{background:var(--n);color:var(--m)}
.btn-o:hover,.btn-k:hover{background:var(--n);color:var(--m);border-color:var(--n)}
.btn-n:hover{background:var(--k);color:var(--m)}
.btn-sm{min-height:46px;padding:12px 20px;font-weight:800;font-size:14px;letter-spacing:.06em}
.link-under{font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--n);
  border-bottom:3px solid var(--o);padding-bottom:3px;text-decoration:none}
.link-under:hover{color:var(--k)}

/* ---------- horná lišta a hlavička ---------- */
.topbar{background:var(--n);color:var(--m);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding:10px 16px}
.site-head{background:var(--m);border-bottom:2px solid var(--n);position:sticky;top:0;z-index:40}
.site-head .wrap{padding-top:18px;padding-bottom:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.menu{display:flex;flex-wrap:wrap;gap:32px;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.menu a{color:var(--n);text-decoration:none;padding:4px 0}
.menu a:hover{color:var(--k)}
.menu a[aria-current="page"]{border-bottom:2px solid var(--o);padding-bottom:2px}
@media (max-width:860px){.menu{display:none}.logo{font-size:24px}}
@media (max-width:480px){.site-head .wrap{gap:12px}.btn-head{font-size:11px;letter-spacing:.03em;padding:10px 12px;min-height:42px}.site-head .logo{font-size:21px}}

/* ---------- foto s posunutým farebným poľom ---------- */
.frame{--off:26px;--field:var(--k);position:relative;padding:0 var(--off) var(--off) 0}
.frame::before{content:"";position:absolute;left:var(--off);top:var(--off);right:0;bottom:0;background:var(--field)}
.frame .ph{position:relative;height:100%;border:2px solid var(--n);background:var(--k-photo);overflow:hidden}
.frame .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- pásky ---------- */
/* pásky sú širšie než okno a pootočené: orezať len vodorovne */
.tapes{position:relative;z-index:3;padding:46px 0;overflow-x:clip}
.tapes .back{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
.tapes .front{position:relative}
.tape-solo{position:relative;z-index:3;padding:24px 0;overflow-x:clip}
.tape{width:108%;margin-left:-4%;overflow:hidden;white-space:nowrap;padding:16px 0;
  border-top:2px solid var(--n);border-bottom:2px solid var(--n);transform:rotate(var(--rot,-2.5deg))}
.tape .track{display:inline-flex;gap:28px;padding-right:28px;font-weight:900;text-transform:uppercase;line-height:1;
  letter-spacing:-.015em;font-size:clamp(22px,2.4vw,34px);animation:tape 38s linear infinite}
.tape.rev .track{animation-direction:reverse}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---------- karty mäsa a riadky surovín (index + suroviny) ---------- */
.meats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.meat{background:var(--paper);border:2px solid var(--n);display:flex;flex-direction:column}
.meat .pic{height:250px;border-bottom:2px solid var(--n);position:relative}
.meat .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.meat .who{position:absolute;left:16px;top:16px;background:var(--m);color:var(--n);padding:6px 10px 5px;font-size:11px;
  font-weight:900;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-3deg)}
.meat .ico{position:absolute;right:16px;bottom:-24px;width:52px;height:52px;background:var(--k);border:2px solid var(--n);
  display:flex;align-items:center;justify-content:center;transform:rotate(var(--t));color:var(--k)}
.meat .body{padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px}
.meat h3{font-size:30px}
.meat p{font-size:16px;line-height:1.5;color:var(--i2)}
/* ikony mäsa nad kartami — len na mobile, kde sa karty posúvajú ako karusel */
.meat-tabs{display:none}

.extras{background:var(--m2)}
.extras .wrap{display:flex;flex-direction:column;gap:40px}
.extras .head{max-width:760px}
.extras .h2{font-size:clamp(36px,3.8vw,56px)}
/* suroviny ako mriežka kariet, aby sekcia nebola zbytočne vysoká */
.ing-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--n);border-left:2px solid var(--n)}
.ing{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"ico n" "ico nm" "tag tag" "d d";
  column-gap:16px;row-gap:8px;align-items:center;align-content:start;padding:22px;border-right:2px solid var(--n);border-bottom:2px solid var(--n)}
.ing .n{grid-area:n;font-size:13px;font-weight:800;letter-spacing:.1em;align-self:end}
.ing .ico{grid-area:ico;width:56px;height:56px;border:2px solid var(--n);display:flex;align-items:center;justify-content:center;transform:rotate(var(--t))}
.ing .nm{grid-area:nm;font-size:clamp(20px,1.9vw,26px);align-self:start}
.ing .tag{grid-area:tag;justify-self:start;margin-top:6px;background:var(--n);color:var(--m);padding:6px 10px 5px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ing .d{grid-area:d;font-size:15px;line-height:1.5;color:var(--i2)}

@media (max-width:1100px){
  .meats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){.ing-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .meat-tabs{display:flex;justify-content:space-between;gap:6px;margin-bottom:18px}
  .meat-tabs button{flex:1 1 0;max-width:56px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--paper);
    border:2px solid var(--n);cursor:pointer;padding:0;color:var(--n);transition:background .25s ease,transform .25s ease}
  .meat-tabs button svg{width:60%;height:60%}
  .meat-tabs button[aria-selected="true"]{background:var(--o);transform:rotate(-4deg) translateY(-2px)}
  .meats{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px 28px;scroll-padding:0 16px}
  .meats::-webkit-scrollbar{display:none}
  .meat{flex:0 0 100%;scroll-snap-align:start}
  .ing{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"ico n" "nm nm" "tag tag" "d d";padding:16px 14px;column-gap:10px}
  .ing .ico{width:40px;height:40px}
  .ing .ico svg{width:24px;height:24px}
  .ing .nm{font-size:17px}
  .ing .d{font-size:13px}
  .ing .tag{font-size:10px;padding:4px 7px}
}

/* ---------- pätička ---------- */
.foot{background:var(--n);color:var(--m)}
.foot a{color:var(--m);text-decoration:none}.foot a:hover{color:var(--o)}
.foot .top{padding-top:64px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between}
.foot .about{display:flex;flex-direction:column;gap:20px;max-width:340px}
.foot .about .logo{font-size:40px;padding:8px 14px 6px;align-self:flex-start}
.foot .about p{font-size:15px;line-height:1.55;color:var(--muted-dark)}
.foot .cols{display:flex;flex-wrap:wrap;gap:64px}
.foot nav{display:flex;flex-direction:column;gap:10px;font-size:15px;font-weight:600}
.foot nav .t{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--o)}
.foot .bottom{padding-top:18px;padding-bottom:32px;border-top:1px solid #333;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:13px;color:var(--muted-dark)}

/* ---------- objavovanie pri scrolle ---------- */
/* skryté len keď beží JS (trieda .js na <html>) */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .tape .track{animation:none}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;animation-iteration-count:1 !important}
}