:root{
  --navy:#122234;
  --navy-2:#1B3048;
  --sand:#C38D5C;
  --sand-soft:rgba(195,141,92,.16);
  --cream:#F7F2EC;
  --sage:#A8B19A;
  --stone:#DCD7CF;
  --graphite:#5A574F;
  --blush:#EFE6DC;
  --card:#FFFDF9;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Jost', 'Segoe UI', sans-serif;
  --font-hand:'Caveat', cursive;
  --edge:clamp(20px, 6vw, 88px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--cream);color:var(--navy);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--sand-soft);}

.wrap{max-width:1180px;margin:0 auto;padding-left:var(--edge);padding-right:var(--edge);position:relative;z-index:1;}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;line-height:1.08;letter-spacing:-.012em;}
h1{font-size:clamp(40px,6.2vw,80px);}
h2{font-size:clamp(30px,4.2vw,54px);}
h3{font-size:20px;line-height:1.3;}
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--sand);margin:0 0 22px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--sand);opacity:.7;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:"";width:22px;height:1px;background:var(--sand);opacity:.7;}
.accent{font-style:italic;font-weight:600;color:var(--sand);}
.lede{font-size:clamp(16px,1.45vw,18.5px);line-height:1.65;color:var(--graphite);max-width:52ch;}
.hand{font-family:var(--font-hand);font-size:21px;color:var(--sand);font-weight:600;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;font-family:var(--font-body);
  font-size:14px;font-weight:600;letter-spacing:.2px;
  padding:15px 30px;border-radius:999px;text-decoration:none;transition:.18s ease;
}
.btn-primary{background:var(--navy);color:var(--cream);}
.btn-primary:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:0 10px 24px rgba(18,34,52,.18);}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--stone);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-sand{background:var(--sand);color:var(--navy);}
.btn-sand:hover{background:#d19a66;transform:translateY(-1px);}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(247,242,236,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.nav.scrolled{border-bottom-color:var(--stone);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px;}
.nav-logo img{height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:14px;font-weight:500;text-decoration:none;color:var(--graphite);}
.nav-links a:hover{color:var(--navy);}
.nav-links .btn{padding:11px 22px;color:var(--cream);}
.lang{display:flex;align-items:center;gap:2px;border:1px solid var(--stone);border-radius:999px;padding:3px;}
.lang-btn{
  border:none;background:transparent;font-family:var(--font-body);font-size:11.5px;font-weight:600;
  letter-spacing:.8px;padding:5px 10px;border-radius:999px;color:var(--graphite);cursor:pointer;
}
.lang-btn.on{background:var(--navy);color:var(--cream);}
@media(max-width:760px){
  .nav-links a:not(.btn){display:none;}
  .nav-links{gap:12px;}
}

/* ---------- sections & decor ---------- */
section{padding:clamp(72px,10vw,128px) 0;position:relative;overflow:hidden;}
.section-tint{background:var(--blush);}
.section-dark{background:var(--navy);color:var(--cream);}
.section-dark .lede{color:rgba(247,242,236,.66);}
.section-dark h3{color:var(--cream);}

.deco-word{
  position:absolute;left:50%;bottom:-.22em;transform:translateX(-50%);
  font-family:var(--font-display);font-weight:700;font-size:clamp(180px,30vw,460px);
  line-height:1;letter-spacing:-.03em;color:var(--navy);opacity:.035;
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0;
}
.section-dark .deco-word{color:var(--cream);opacity:.04;}
.deco-heart{position:absolute;pointer-events:none;user-select:none;z-index:0;opacity:.07;}
.deco-heart img{width:100%;height:auto;}

.squiggle{display:block;width:120px;height:14px;margin:18px 0 0;}
.squiggle.center{margin-left:auto;margin-right:auto;}
.wave-divider{display:block;width:100%;height:28px;}

/* ---------- hero ---------- */
.hero{padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(60px,7vw,96px);text-align:center;}
.hero h1{font-size:clamp(38px,5.4vw,74px);line-height:1.08;max-width:22ch;margin:0 auto;}
.hero .lede{margin:28px auto 0;text-align:center;}
.hero .deco-heart{width:clamp(160px,18vw,260px);right:-3%;top:6%;transform:rotate(12deg);}

/* the writing line */
.line-wrap{max-width:900px;margin:clamp(40px,5vw,64px) auto 0;}
.line-q{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(19px,2vw,25px);color:var(--navy);text-align:center;
}
.line-field{position:relative;margin-top:22px;}
.line-field textarea,.line-measure{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(21px,2.6vw,31px);line-height:1.6;letter-spacing:normal;
}
.line-field textarea{
  display:block;width:100%;border:0;background:transparent;resize:none;outline:0;
  color:var(--navy);text-align:center;padding:6px 0 8px;overflow:hidden;
}
.line-field textarea::placeholder{color:var(--graphite);opacity:.42;}
.line-measure{position:absolute;top:0;left:0;visibility:hidden;white-space:pre;pointer-events:none;}
.line-field .wave{
  position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  height:9px;width:40%;opacity:.95;pointer-events:none;
  transition:width .22s ease;
}
.line-meta{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:30px;flex-wrap:wrap;}
.line-count{font-size:12.5px;color:var(--graphite);opacity:.65;font-weight:500;letter-spacing:.3px;min-width:60px;text-align:right;}
.line-count.over{color:var(--sand);opacity:1;}
.line-meta .btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none;}
.hero .hand{display:block;margin-top:26px;}

/* ---------- stats strip ---------- */
.strip{background:var(--navy);color:var(--cream);padding:26px 0;}
.strip-inner{display:flex;justify-content:center;gap:clamp(28px,6vw,90px);flex-wrap:wrap;}
.strip-item{font-size:14px;letter-spacing:.3px;color:rgba(247,242,236,.7);display:flex;align-items:baseline;gap:8px;}
.strip-item b{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--sand);letter-spacing:-.01em;}

/* ---------- three-up ---------- */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,54px);margin-top:52px;}
.cols.two{grid-template-columns:repeat(2,1fr);}
@media(max-width:820px){.cols,.cols.two{grid-template-columns:1fr;gap:34px;}}
.col{padding-top:22px;border-top:1px solid rgba(18,34,52,.14);}
.section-dark .col{border-top-color:rgba(247,242,236,.16);}
.col p{color:var(--graphite);margin:10px 0 0;font-size:15px;}
.section-dark .col p{color:rgba(247,242,236,.62);}

/* ---------- how: steps + stage ---------- */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center;margin-top:8px;}
@media(max-width:960px){.how-grid{grid-template-columns:1fr;}}
.steps{display:flex;flex-direction:column;gap:34px;margin-top:44px;}
.step{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;}
.step-n{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:17px;color:var(--sand);padding-top:3px;
}
.step h3{margin-bottom:8px;}
.step p{color:var(--graphite);font-size:15px;margin:0;}

.stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:540px;}
.phone{
  position:relative;z-index:2;width:296px;background:var(--cream);
  border-radius:34px;padding:14px 13px 0;
  box-shadow:0 34px 70px rgba(18,34,52,.22),0 6px 18px rgba(18,34,52,.12);
  border:1px solid var(--stone);
}
.phone-top{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 16px;}
.phone-brand{display:flex;align-items:flex-start;font-family:var(--font-display);font-weight:700;font-size:16px;}
.phone-brand img{height:13px;margin:-1px 0 0 2px;}
.chip{display:flex;align-items:center;gap:5px;background:rgba(168,177,154,.22);padding:5px 11px;border-radius:999px;font-size:11px;color:var(--graphite);font-weight:500;}
.phone-card{background:var(--card);border:1px solid var(--stone);border-radius:18px;padding:20px;box-shadow:0 6px 18px rgba(18,34,52,.05);}
.phone-card .eyebrow{margin:0;font-size:10px;}
.phone-card .eyebrow::before{display:none;}
.phone-card .q{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:17px;margin:8px 0 0;}
.phone-line{margin-top:18px;padding-bottom:9px;border-bottom:2px solid var(--stone);font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--navy);}
.phone-save{margin-top:18px;background:var(--navy);color:var(--cream);border-radius:999px;padding:11px;text-align:center;font-size:12.5px;font-weight:600;}
.phone-progress{padding:20px 4px 24px;}
.pbar{height:7px;background:var(--stone);border-radius:999px;overflow:hidden;margin-top:11px;}
.pfill{height:100%;width:47%;background:linear-gradient(90deg,var(--sand),var(--sage));border-radius:999px;}
.psmall{font-size:11px;color:var(--graphite);opacity:.8;}

.paper{position:absolute;background:var(--card);padding:10px 10px 30px;box-shadow:0 16px 34px rgba(18,34,52,.16);}
.paper .fill{display:block;width:100%;object-fit:cover;background:var(--stone);}
.paper .cap{font-family:var(--font-hand);font-size:16px;color:var(--graphite);text-align:center;margin-top:8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tape{position:absolute;height:19px;opacity:.82;}
.paper-a{top:14px;left:0;width:176px;transform:rotate(-6deg);z-index:1;}
.paper-a .fill{height:124px;}
.paper-b{bottom:10px;right:0;width:172px;transform:rotate(5deg);z-index:3;}
.paper-b .fill{height:112px;}
@media(max-width:960px){.stage{min-height:0;padding:30px 0 40px;}}
@media(max-width:520px){.paper{display:none;}}

/* ---------- questions ticker ---------- */
.ticker{margin-top:56px;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.ticker-track{display:inline-flex;gap:64px;padding-right:64px;animation:tick 46s linear infinite;will-change:transform;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker span{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(20px,2.4vw,30px);color:var(--graphite);display:inline-flex;align-items:center;gap:64px;}
.ticker span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sand);opacity:.7;}
@keyframes tick{to{transform:translateX(-50%);}}

/* ---------- book spread ---------- */
.spread-outer{margin-top:58px;display:flex;justify-content:center;}
.spread{
  width:100%;max-width:860px;aspect-ratio:16/10.4;background:var(--cream);
  border-radius:6px;box-shadow:0 30px 70px rgba(0,0,0,.36);
  display:flex;position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(18,34,52,.03) 1px,transparent 1px);background-size:9px 9px;
}
.spine{position:absolute;left:50%;top:0;bottom:0;width:34px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(18,34,52,.1),transparent);}
.leaf{flex:1;position:relative;padding:4.2% 3.4%;color:var(--navy);}
.leaf-title{font-family:var(--font-hand);font-weight:700;font-size:clamp(20px,3vw,31px);color:var(--graphite);line-height:1;}
.leaf-sub{font-size:9px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--sand);margin-top:6px;}
.snap{position:absolute;background:#fff;padding:6px 6px 20px;box-shadow:0 9px 20px rgba(18,34,52,.17);}
.snap .fill{background:linear-gradient(135deg,var(--stone),var(--sand));}
.snap .cap{font-family:var(--font-hand);font-size:clamp(11px,1.5vw,16px);color:var(--graphite);text-align:center;margin-top:6px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.folio{position:absolute;bottom:5%;font-family:var(--font-hand);font-size:14px;color:var(--graphite);opacity:.5;}
.section-dark .deco-heart{opacity:.05;}

/* ---------- two-col feature (parents / gift) ---------- */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,90px);align-items:center;}
.feature.flip{grid-template-columns:.95fr 1.05fr;}
.feature.flip > :first-child{order:2;}
@media(max-width:900px){
  .feature,.feature.flip{grid-template-columns:1fr;}
  .feature.flip > :first-child{order:0;}
}
.feature .lede{margin-top:24px;}
.feature .btn{margin-top:26px;}
.visual{display:flex;justify-content:center;align-items:center;position:relative;min-height:320px;}

.gift-card{
  width:min(420px,100%);aspect-ratio:1.62;background:var(--navy);border-radius:22px;
  padding:28px 30px;color:var(--cream);position:relative;overflow:hidden;
  box-shadow:0 34px 70px rgba(18,34,52,.28),0 6px 18px rgba(18,34,52,.14);
  transform:rotate(-3deg);display:flex;flex-direction:column;justify-content:space-between;
}
.gift-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(195,141,92,.22),transparent 60%);
}
.gift-brand{display:flex;align-items:flex-start;font-family:var(--font-display);font-weight:700;font-size:22px;position:relative;}
.gift-brand img{height:18px;margin:-2px 0 0 3px;}
.gift-tag{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--sand);position:relative;}
.gift-line{font-family:var(--font-display);font-style:italic;font-size:22px;margin-top:6px;position:relative;}
.gift-for{display:flex;align-items:baseline;gap:10px;font-family:var(--font-hand);font-size:20px;color:rgba(247,242,236,.8);position:relative;}
.gift-for i{flex:1;border-bottom:1.5px solid rgba(247,242,236,.35);height:1em;}
.gift-heart{position:absolute;right:-6%;bottom:-18%;width:46%;opacity:.14;transform:rotate(-8deg);}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;align-items:start;}
@media(max-width:900px){.tiers{grid-template-columns:1fr;}}
.tier{background:var(--card);border:1px solid var(--stone);border-radius:22px;padding:32px 28px;height:100%;display:flex;flex-direction:column;position:relative;}
.tier.featured{border-color:var(--sand);box-shadow:0 22px 50px rgba(195,141,92,.16);}
.tier.featured::before{
  content:"";position:absolute;left:28px;right:28px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:var(--sand);
}
.tier-tag{font-size:10px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--sand);margin-bottom:14px;}
.tier-price{font-family:var(--font-display);font-weight:700;font-size:38px;margin:14px 0 4px;letter-spacing:-.01em;}
.tier-price small{font-size:15px;font-weight:400;color:var(--graphite);font-family:var(--font-body);letter-spacing:0;}
.tier-note{font-size:13px;color:var(--graphite);margin:0 0 22px;}
.tier ul{list-style:none;padding:0;margin:0 0 26px;flex:1;}
.tier li{font-size:14.5px;color:var(--graphite);padding:9px 0 9px 26px;position:relative;border-bottom:1px solid rgba(220,215,207,.6);}
.tier li:last-child{border-bottom:none;}
.tier li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:9px;border-left:1.8px solid var(--sand);border-bottom:1.8px solid var(--sand);transform:rotate(-45deg);}
.tier .btn{width:100%;text-align:center;}

.gift-banner{
  margin-top:44px;background:var(--navy);color:var(--cream);border-radius:22px;padding:30px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.gift-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 100% at 100% 50%,rgba(195,141,92,.2),transparent 60%);pointer-events:none;}
.gift-banner h3{font-size:22px;color:var(--cream);}
.gift-banner p{margin:6px 0 0;color:rgba(247,242,236,.66);font-size:14.5px;max-width:52ch;}
.gift-banner .btn{position:relative;z-index:1;}

/* ---------- callout / footer ---------- */
.callout{background:var(--navy);color:var(--cream);border-radius:28px;padding:clamp(40px,6vw,76px);text-align:center;position:relative;overflow:hidden;}
.callout::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 90% at 50% 120%,rgba(195,141,92,.22),transparent 60%);pointer-events:none;}
.callout > *{position:relative;}
.callout h2{margin-bottom:18px;}
.callout .lede{margin:0 auto 30px;color:rgba(247,242,236,.68);text-align:center;}

footer{background:var(--navy);color:rgba(247,242,236,.6);padding:56px 0 44px;font-size:14px;}
.foot-inner{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center;}
footer a{text-decoration:none;color:rgba(247,242,236,.6);}
footer a:hover{color:var(--cream);}
.foot-links{display:flex;gap:24px;flex-wrap:wrap;}
.foot-logo img{height:30px;opacity:.9;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .ticker-track{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- tesna navigacija na telefonu ---------- */
@media(max-width:760px){
  .nav-inner{gap:12px;padding-top:14px;padding-bottom:14px;}
  .nav-logo img{height:26px;}
  .nav-links .btn{padding:10px 16px;font-size:13px;}
  .lang-btn{padding:4px 8px;font-size:11px;}
}

/* ---------- navigacija: meni na namizju, spustni meni na telefonu ---------- */
.nav-menu{display:flex;align-items:center;gap:28px;}
.nav-toggle{
  display:none;width:38px;height:38px;border:1px solid var(--stone);border-radius:999px;
  background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
}
.nav-toggle span{display:block;width:16px;height:1.6px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s;}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(5.6px) rotate(45deg);}
.nav.open .nav-toggle span:nth-child(2){opacity:0;}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg);}
@media(max-width:760px){
  .nav-links a:not(.btn){display:block;}
  .nav-menu{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav.open .nav-menu{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    position:absolute;left:0;right:0;top:100%;
    background:var(--cream);border-bottom:1px solid var(--stone);
    padding:10px var(--edge) 18px;box-shadow:0 18px 40px rgba(18,34,52,.08);
  }
  .nav.open .nav-menu a{font-size:16px;padding:9px 0;width:100%;border-bottom:1px solid rgba(220,215,207,.6);}
  .nav.open .nav-menu a:last-child{border-bottom:none;}
  .hero{padding-top:44px;}
  .hero .lede{font-size:16px;}
  .line-meta{gap:14px;}
  .strip-item{font-size:13px;}
  .strip-item b{font-size:22px;}
  .step{grid-template-columns:40px 1fr;gap:12px;}
  .callout{border-radius:20px;}
}

/* ---------- izbirna fotografija v heroju ---------- */
.hero-foto{ margin-top:22px; }
.hero-foto img{
  max-width:min(420px,100%);max-height:240px;margin:0 auto;
  border-radius:14px;object-fit:cover;box-shadow:0 10px 26px rgba(18,34,52,.14);
}
.hero-foto button{
  display:block;margin:10px auto 0;background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:12px;color:var(--graphite);
  opacity:.65;text-decoration:underline;
}
.hero-foto-gumb{
  cursor:pointer;font-size:13px;font-weight:500;color:var(--graphite);
  opacity:.75;border-bottom:1px dashed var(--stone);padding-bottom:2px;
}
.hero-foto-gumb:hover{ opacity:1;color:var(--navy);border-bottom-color:var(--sand); }

/* ---------- popravki za telefon ---------- */
/* Gumb v meniju se je lomil v dve vrstici in postal ogromen. */
@media(max-width:760px){
  .nav-links .btn{
    padding:9px 14px;font-size:12.5px;white-space:nowrap;line-height:1.2;
  }
  .lang-btn{padding:4px 7px;font-size:10.5px;}
  .nav-logo img{height:24px;}
  .nav-inner{gap:8px;}
}
@media(max-width:380px){
  .nav-links .btn{padding:8px 11px;font-size:11.5px;}
  .nav-logo img{height:21px;}
}

/* ---------- razprtje: isti elementi kot v tiskani knjigi ---------- */
/* Položaji so tu in ne v atributu style, da jih telefon lahko preglasi. */
.snap .fill{display:block;width:100%;object-fit:cover;background:var(--stone);}
.snap.s1{top:24%;left:5%;width:38%;transform:rotate(-4deg);}
.snap.s1 .fill{aspect-ratio:4/3;}
.snap.s2{top:57%;left:51%;width:33%;transform:rotate(3deg);}
.snap.s2 .fill{aspect-ratio:1/1;}
.snap.s3{top:9%;left:9%;width:35%;transform:rotate(-3deg);}
.snap.s3 .fill{aspect-ratio:1/1;}
.snap.s4{top:50%;left:47%;width:39%;transform:rotate(4deg);}
.snap.s4 .fill{aspect-ratio:4/3;}
.folio.levo{left:6%;}
.folio.desno{right:6%;}

/* Zapisan stavek ob fotografiji, kot je v knjigi. */
.zapisek{
  position:absolute;font-family:var(--font-hand);font-weight:600;
  font-size:clamp(13px,1.7vw,18px);line-height:1.35;color:var(--graphite);
  max-width:30ch;margin:0;z-index:4;
}
.zapisek.z1{bottom:9%;left:6%;width:40%;transform:rotate(-1.5deg);}
.zapisek.z2{top:30%;right:7%;width:38%;transform:rotate(1deg);}

/* Elementi so slikani na belem; multiply belino odstrani. */
.el{position:absolute;pointer-events:none;user-select:none;mix-blend-mode:multiply;z-index:5;}
.el img{width:100%;height:auto;display:block;filter:brightness(1.10) contrast(1.08);}
.el-rastlina{z-index:2;opacity:.9;}
.el-rastlina.r1{width:20%;bottom:-3%;right:4%;transform:rotate(-8deg);}
.el-rastlina.r2{width:17%;top:-2%;right:5%;transform:rotate(14deg);}
.el-drobno.d1{width:6%;top:44%;left:4%;transform:rotate(-18deg);z-index:6;}
/* Trak drži fotografijo, zato je nad njo. */
/* Polovica traku leži čez rob fotografije, kot pri lepljenju na roko. */
.snap .el-trak{width:52%;top:0;left:14%;transform:translateY(-50%) rotate(-6deg);z-index:7;}
.snap.s2 .el-trak,.snap.s4 .el-trak{left:auto;right:10%;transform:translateY(-50%) rotate(7deg);}

/* Obroč od skodelice. */
.madez{position:absolute;pointer-events:none;z-index:1;border-radius:50%;mix-blend-mode:multiply;}
.madez-kava{
  background:radial-gradient(closest-side,
    transparent 60%, rgba(146,96,53,.05) 61%, rgba(120,74,38,.11) 69%,
    rgba(146,96,53,.065) 76%, rgba(146,96,53,.02) 81%, transparent 83%);
}
.madez.m1{width:20%;aspect-ratio:1/.92;top:6%;right:16%;}

/* Luknje za vezavo ob hrbtu. */
.spread .luknje{
  position:absolute;left:50%;transform:translateX(-50%);top:18%;bottom:18%;width:9px;z-index:6;
  display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;
}
.spread .luknje i{
  display:block;width:9px;height:9px;border-radius:50%;
  background:rgba(120,100,75,.16);box-shadow:inset 0 1px 2px rgba(60,45,30,.28);
}

/* Na telefonu je razprtje preozko, da fotografije ne bi trčile druga ob drugo.
   Zato gredo ena pod drugo, knjiga pa sme zrasti v višino. */
@media(max-width:760px){
  .spread-outer{margin-top:38px;}
  .spread{aspect-ratio:auto;flex-direction:column;}
  .spine,.spread .luknje{display:none;}
  .leaf{padding:26px 20px 30px;}
  .leaf + .leaf{border-top:1px dashed rgba(18,34,52,.14);}
  /* Enako natančno kot .snap.s1, a kasneje v datoteki, zato obvelja tole. */
  .snap.s1,.snap.s2,.snap.s3,.snap.s4{
    position:relative;top:auto;left:auto;right:auto;bottom:auto;
    width:100%;max-width:290px;margin:24px auto 0;
    transform:none;padding:8px 8px 20px;}
  .snap .cap{margin-top:8px;}
  .snap .cap{font-size:16px;white-space:normal;}
  .zapisek,.zapisek.z1,.zapisek.z2{
    position:static;width:auto;max-width:none;margin:20px auto 0;
    transform:none;text-align:center;font-size:17px;}
  .el-rastlina.r1{width:88px;bottom:2%;right:2%;}
  .el-rastlina.r2{width:74px;top:1%;right:3%;}
  .el-drobno.d1{display:none;}
  .madez.m1{width:96px;top:2%;right:6%;}
  .folio{position:static;display:block;text-align:center;margin-top:24px;}
}

/* Trakovi na prizoru ob obrazcu: isti elementi kot v knjigi. */
.paper .el-trak{z-index:7;}
.el-trak.t-a{width:54%;top:0;left:8%;transform:translateY(-50%) rotate(-10deg);}
.el-trak.t-b{width:52%;top:0;right:8%;transform:translateY(-50%) rotate(9deg);}
.el-trak.t-c{width:50%;top:0;left:12%;transform:translateY(-50%) rotate(-7deg);}