/* Сандален сезон – тетрадка с изрезки и лепенки */
:root{
  --inkoust:#2c2c96;
  --noc:#1c1c5f;
  --kraft:#c08c59;
  --fosfor:#c3c322;
  --papir:#f5f5fa;
  --linka:#e2e2f3;
  --text:#1b1b2d;
  --bila:#ffffff;
  --radek:34px;
  --stin:0 14px 30px -12px rgba(28,28,95,.28);
  --stin-maly:0 6px 16px -8px rgba(28,28,95,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Rubik",Arial,sans-serif;
  font-size:19px;
  line-height:1.65;
  color:var(--text);
  background-color:var(--papir);
  background-image:
    linear-gradient(90deg,transparent 0,transparent 54px,rgba(192,140,89,.45) 54px,rgba(192,140,89,.45) 56px,transparent 56px),
    repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--radek) - 1px),var(--linka) calc(var(--radek) - 1px),var(--linka) var(--radek));
  padding-bottom:96px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}
img{max-width:100%;height:auto;display:block}
a{color:var(--inkoust)}
:focus-visible{outline:3px solid var(--inkoust);outline-offset:3px}
h1,h2,h3{font-family:"Rubik Mono One","Rubik",Arial,sans-serif;font-weight:400;color:var(--noc);line-height:1.14;margin:0;word-spacing:-.32em}
p{margin:0 0 1em}

/* ---------- hlavička ---------- */
.lista{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1180px;margin:0 auto;padding:18px 24px;width:100%;
}
.znak{
  font-family:"Rubik Mono One",Arial,sans-serif;font-size:18px;color:var(--noc);text-decoration:none;
  background:var(--bila);padding:8px 16px 8px 14px;border-radius:999px;box-shadow:var(--stin-maly);
  display:inline-flex;align-items:center;gap:10px;
}
.znak svg{flex:0 0 auto}

/* ---------- tlačítka ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:"Rubik",Arial,sans-serif;font-weight:700;text-decoration:none;
  border-radius:999px;cursor:pointer;border:0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-cta{
  background:var(--fosfor);color:var(--noc);
  font-size:19px;min-height:62px;padding:14px 30px;
  box-shadow:0 5px 0 var(--noc);
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--noc)}
.btn-cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--noc)}
.lista .btn-cta{min-height:52px;font-size:17px;padding:10px 24px}
.btn-cta-xl{font-size:23px;min-height:86px;min-width:320px;padding:18px 40px}

/* ---------- lepicí pásky (podpis) ---------- */
.paska{position:relative}
.paska::before,.paska::after{
  content:"";position:absolute;width:118px;height:34px;z-index:3;
  background:rgba(192,140,89,.62);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 3px,transparent 3px 9px);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  clip-path:polygon(3% 8%,10% 0,22% 7%,35% 1%,50% 6%,64% 0,78% 6%,90% 1%,97% 8%,100% 92%,88% 100%,74% 94%,60% 100%,45% 95%,30% 100%,16% 94%,4% 100%,0 90%);
}
.paska::before{top:-14px;left:12%;transform:rotate(-6deg)}
.paska::after{top:-12px;right:10%;transform:rotate(5deg)}
.paska.modra::before,.paska.modra::after{background-color:rgba(44,44,150,.38)}
.paska.zluta::before,.paska.zluta::after{background-color:rgba(195,195,34,.62)}
.paska.jedna::after{display:none}
.paska.roh::before{top:-10px;left:-26px;transform:rotate(-38deg)}
.paska.roh::after{top:auto;bottom:-10px;right:-26px;transform:rotate(-38deg)}

/* výstřižek s natrženým okrajem */
.vystrizek{
  background:var(--bila);padding:30px 32px;box-shadow:var(--stin);
  clip-path:polygon(0 2%,6% 0,14% 1.5%,25% 0,37% 1.2%,49% 0,61% 1.4%,73% 0,85% 1.2%,94% 0,100% 1.6%,99% 50%,100% 98%,91% 100%,79% 98.6%,66% 100%,54% 98.4%,41% 100%,28% 98.6%,15% 100%,5% 98.5%,0 100%,1% 50%);
}
.vystrizek-obal{filter:drop-shadow(0 12px 18px rgba(28,28,95,.22))}
.vystrizek-obal .vystrizek{box-shadow:none}

/* ručně psaný lístek */
.listek{
  font-family:"Rubik",Arial,sans-serif;font-style:italic;font-weight:500;
  background:var(--fosfor);color:var(--noc);padding:18px 22px 20px;border-radius:6px 22px 8px 18px;
  box-shadow:var(--stin-maly);font-size:19px;line-height:1.45;
}
.listek.kraft{background:#e9d2b8}
.listek.modry{background:#d6d6f0}

/* fotka nalepená páskou */
.foto{
  background:var(--bila);padding:12px 12px 16px;border-radius:24px;box-shadow:var(--stin);
}
.foto img{border-radius:16px;width:100%;object-fit:cover}
.uvod-foto figcaption{text-align:right}
.foto figcaption{
  font-style:italic;font-weight:500;color:var(--noc);font-size:16px;line-height:1.4;padding:12px 8px 0;
}

/* ---------- hero ---------- */
.uvod{max-width:1180px;margin:0 auto;padding:16px 24px 60px;position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;align-items:start}
.uvod-hlava{grid-column:1 / span 7;grid-row:1;position:relative;z-index:2;padding-top:14px}
.uvod .denik-stitek{display:inline-block;transform:rotate(-3deg);margin:0 0 18px;font-size:17px;padding:10px 18px}
.uvod h1{font-size:clamp(30px,4.2vw,54px);letter-spacing:-.01em}
.uvod-kolaz{display:contents}
.uvod-text{grid-column:1 / span 6;grid-row:2;margin-top:26px;position:relative;z-index:2}
.uvod-text .vystrizek{transform:rotate(-1.4deg);padding:26px 30px}
.uvod-text p{font-size:19px;margin-bottom:.7em}
.uvod-akce{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.uvod-akce small{font-size:16px;color:var(--noc)}
.uvod-foto{grid-column:7 / span 6;grid-row:1 / span 2;transform:rotate(2.2deg);margin:70px 0 0 -40px;position:relative;z-index:1}
.uvod-foto img{aspect-ratio:1/1;object-position:50% 70%}

/* ---------- den – deníkový záznam ---------- */
.den{max-width:1080px;margin:0 auto;padding:80px 24px;position:relative}
.den-hlava{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:38px}
.den-cislo{
  font-family:"Rubik Mono One",Arial,sans-serif;font-size:clamp(64px,10vw,130px);line-height:.9;
  color:transparent;-webkit-text-stroke:2px var(--inkoust);
}
.den h2{font-size:clamp(26px,3.6vw,44px);max-width:760px}
.zapis{max-width:640px;font-size:20px;line-height:var(--radek);margin-left:40px}
.zapis p{margin-bottom:var(--radek)}
.okraj{position:absolute;right:24px;width:250px;transform:rotate(4deg)}

.den-1 .okraj{top:220px}

/* den 3 – fotka vlevo, zápis vpravo */
.den-3 .rozlozeni{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:start}
.den-3 .foto{transform:rotate(-2.5deg)}
.den-3 .foto img{aspect-ratio:4/5;object-position:67% 50%}
.den-3 .zapis{margin-left:0}
.poznamka-nhs{margin-top:10px;max-width:520px;transform:rotate(-1deg)}
.poznamka-nhs .zdroj{display:block;font-size:14px;font-style:normal;margin-top:10px;opacity:.85}

/* den 5 – pozvánka */
.den-5 .rozlozeni{display:grid;grid-template-columns:6fr 4fr;gap:60px;align-items:center}
.pozvanka{
  background:var(--noc);color:var(--papir);border-radius:28px;padding:34px 32px 30px;transform:rotate(3deg);
  box-shadow:var(--stin);position:relative;
  -webkit-mask:radial-gradient(circle 14px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 14px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 14px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 14px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
}
.pozvanka h3{color:var(--fosfor);font-size:26px;margin-bottom:16px}
.pozvanka p{margin:0 0 8px;font-size:19px}
.pozvanka .cas{font-family:"Rubik Mono One",Arial,sans-serif;font-size:34px;color:var(--papir);margin:14px 0}
.pozvanka-obal{position:relative}
.pozvanka-obal::before{
  content:"";position:absolute;top:-16px;left:40%;width:120px;height:34px;z-index:3;transform:rotate(-4deg);
  background:rgba(195,195,34,.7);
}

/* ---------- výstřižky s fakty ---------- */
.vystrizky{max-width:1180px;margin:0 auto;padding:80px 24px;position:relative}
.vystrizky h2{font-size:clamp(26px,3.6vw,44px);max-width:720px}
.vystrizky .uvodni{max-width:600px;font-size:20px;margin:22px 0 56px}
.nastenka{display:grid;grid-template-columns:7fr 5fr;gap:56px 48px;align-items:start}
.nastenka .graf{transform:rotate(-1.2deg);grid-row:span 2}
.nastenka .graf svg{width:100%;height:auto;display:block}
.nastenka .graf p{font-size:18px;margin:14px 0 0}
.nastenka .clanek{transform:rotate(2deg);margin-top:70px}
.clanek .velke{word-spacing:-.4em;letter-spacing:-.12em;font-family:"Rubik Mono One",Arial,sans-serif;font-size:clamp(54px,7vw,88px);color:var(--inkoust);line-height:1;display:block;margin-bottom:12px}
.clanek p{font-size:18px}
.zdroj-text{font-size:14px;color:#4a4a66;display:block;margin-top:8px}
.nastenka .listek{grid-column:2;justify-self:end;max-width:300px;transform:rotate(-4deg);margin:0}

/* ---------- formule (sobota) ---------- */
.sobota{max-width:1080px;margin:0 auto;padding:80px 24px}
.sobota .vystrizek{padding:56px 56px 60px;max-width:860px;margin:0 auto;transform:rotate(-.6deg)}
.sobota h2{font-size:clamp(26px,3.6vw,44px);margin-bottom:28px}
.sobota p{font-size:20px;max-width:640px}
.sobota .akce{margin-top:34px;display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.sobota .upozorneni{font-size:16px;color:#4a4a66;margin-top:26px}

/* ---------- recenze – nalepené lístky ---------- */
.listky{max-width:1180px;margin:0 auto;padding:80px 24px}
.listky h2{font-size:clamp(26px,3.6vw,44px)}
.listky .uvodni{font-size:20px;margin:18px 0 50px;max-width:560px}
.tabule{display:flex;flex-wrap:wrap;gap:40px 34px;align-items:flex-start}
.tabule figure{margin:0}
.tabule blockquote{margin:0 0 12px;font-size:21px}
.tabule figcaption{font-style:normal;font-weight:700;font-size:16px}
.tabule .l1{flex:0 1 270px;transform:rotate(-3deg)}
.tabule .l2{flex:0 1 230px;transform:rotate(2deg);margin-top:40px}
.tabule .l3{flex:0 1 260px;transform:rotate(-1deg);margin-top:-6px}
.tabule .l4{flex:0 1 240px;transform:rotate(3.5deg);margin-top:28px}

/* ---------- FAQ – okraj sešitu ---------- */
.otazky{max-width:900px;margin:0 auto;padding:80px 24px}
.otazky h2{font-size:clamp(26px,3.6vw,44px);margin-bottom:40px}
.otazky details{border-bottom:2px dashed rgba(44,44,150,.35);padding:6px 0}
.otazky summary{
  cursor:pointer;list-style:none;font-weight:700;font-size:21px;color:var(--noc);
  padding:16px 52px 16px 0;position:relative;min-height:48px;
}
.otazky summary::-webkit-details-marker{display:none}
.otazky summary::after{
  content:"+";position:absolute;right:4px;top:10px;width:38px;height:38px;border-radius:50%;
  background:var(--bila);box-shadow:var(--stin-maly);display:grid;place-items:center;font-size:24px;line-height:38px;text-align:center;
}
.otazky details[open] summary::after{content:"–"}
.otazky details p{font-size:19px;margin:0 0 18px;max-width:680px}

/* ---------- neděle – závěr ---------- */
.nedele{max-width:1180px;margin:0 auto;padding:110px 24px 130px}
.nedele .rozlozeni{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.nedele .foto{transform:rotate(-1.8deg)}
.nedele .foto img{aspect-ratio:5/4;object-position:30% 60%}
.nedele h2{font-size:clamp(28px,4vw,50px);margin-bottom:24px}
.nedele p{font-size:20px}
.nedele .btn{margin-top:20px}

/* ---------- patička ---------- */
.pata{background:var(--noc);color:var(--papir);padding:44px 24px;margin-top:auto}
.pata-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.pata .znak{background:transparent;box-shadow:none;color:var(--papir);padding:0}
.pata nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.pata a{color:var(--papir);font-size:15px}
.pata small{font-size:14px;opacity:.85;width:100%}

/* ---------- podstránky ---------- */
.stranka{max-width:820px;margin:0 auto;padding:50px 24px 90px;flex:1;width:100%}
.stranka .vystrizek{padding:44px 44px 50px}
.stranka h1{font-size:clamp(26px,4vw,42px);margin-bottom:26px}
.stranka h2{font-size:20px;margin:32px 0 10px;font-family:"Rubik",Arial,sans-serif;font-weight:700}
.stranka p,.stranka li{font-size:18px}
.formular{display:grid;gap:18px;margin-top:20px}
.formular label{font-weight:700;font-size:17px;display:grid;gap:6px}
.formular input,.formular textarea{
  font:inherit;font-size:18px;padding:14px 18px;border:2px solid var(--linka);border-radius:18px;background:var(--papir);color:var(--text);
}
.formular textarea{min-height:150px;resize:vertical}
.formular button{justify-self:start}
#kontaktDakujeme{display:none;font-size:20px;font-weight:700;color:var(--noc)}

/* ---------- popup a lišta (engine) ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(14,14,48,.82);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px;
}
.modal-overlay.show{display:flex}
.modal{
  position:relative;background:var(--papir);width:640px;max-width:100%;border-radius:28px;padding:48px 40px 40px;text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);max-height:calc(100vh - 32px);overflow:auto;
}
.modal::before{
  content:"";position:absolute;top:-6px;left:50%;width:150px;height:36px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(192,140,89,.7);
}
.modal .close{
  position:absolute;top:14px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:var(--bila);
  font-size:30px;line-height:1;cursor:pointer;color:var(--noc);box-shadow:var(--stin-maly);
}
.modal .badge{display:inline-block;background:var(--noc);color:var(--fosfor);font-weight:700;font-size:16px;padding:8px 18px;border-radius:999px;margin-bottom:16px}
.modal h3{font-size:44px;color:var(--inkoust);margin:6px 0 10px}
.modal > p{font-size:22px;font-weight:700;margin:0 0 16px}
.modal .offer{background:var(--bila);border-radius:20px;padding:16px 20px;margin:0 0 24px}
.modal .offer p{margin:6px 0;font-size:18px}
.modal .btn{white-space:normal;width:100%;font-size:23px;min-height:86px}
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--noc);color:var(--papir);
  display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 16px;
}
.sticky-cta > span{font-size:17px;font-weight:500}
.sticky-cta .btn{flex:0 0 auto;min-height:60px;font-size:18px;padding:10px 24px;box-shadow:0 4px 0 #0c0c33}

/* ---------- mobil ---------- */
@media (max-width:900px){
  body{background-image:repeating-linear-gradient(180deg,transparent 0,transparent calc(var(--radek) - 1px),var(--linka) calc(var(--radek) - 1px),var(--linka) var(--radek))}
  .uvod{padding:12px 18px 50px;display:flex;flex-direction:column;gap:26px}
  .uvod-text{margin-top:0;order:1}
  .uvod-foto{order:2;margin:10px 0 0;transform:rotate(1.5deg)}
  .uvod-foto img{aspect-ratio:4/3}
  .den-3 .foto img{aspect-ratio:1/1;object-position:72% 50%}
  .uvod-akce{margin-top:22px}
  .btn-cta-xl{min-width:0;width:100%;font-size:21px;padding:16px 22px}
  .den,.vystrizky,.sobota,.listky,.otazky,.nedele{padding:56px 18px}
  .zapis{margin-left:0;font-size:19px}
  .okraj{position:static;width:auto;max-width:300px;margin:10px 0 0 auto;transform:rotate(2deg)}
  .den-3 .rozlozeni,.den-5 .rozlozeni,.nastenka,.nedele .rozlozeni{grid-template-columns:1fr;gap:40px}
  .nastenka .clanek{margin-top:0}
  .nastenka .listek{grid-column:1}
  .sobota .vystrizek{padding:40px 24px 44px}
  .tabule .l1,.tabule .l2,.tabule .l3,.tabule .l4{flex:1 1 100%;margin-top:0}
  .stranka .vystrizek{padding:36px 22px 40px}
  .lista{padding:12px 16px}
  .znak{font-size:14px;padding:6px 12px}
  .znak svg{width:22px;height:22px}
  .lista .btn-cta{font-size:16px;padding:8px 16px;min-height:48px}
}
@media (max-width:600px){
  .uvod h1{font-size:30px}
  .uvod-text .vystrizek{padding:24px 20px}
  .nastenka .graf .vystrizek{padding:26px 14px}
  .uvod-text p{font-size:18px}
  .den-cislo{font-size:58px}
  .modal{padding:44px 20px 24px}
  .modal h3{font-size:32px}
  .modal .btn{font-size:19px;min-height:70px}
  .sticky-cta{gap:10px;padding:10px 12px}
  .sticky-cta > span{font-size:15px}
  .sticky-cta .btn{font-size:16px;padding:8px 16px;min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}