/* Cesta psa — Poklona
   Slávnostná úprava úcty. Veľa ticha, jedna os, žiadne ozdoby navyše. */

.cpp{
  --p1:var(--cp-pink1,#F6CDDA);
  --p2:var(--cp-pink2,#F2B8CB);
  --p3:var(--cp-pink3,#E48AA6);
  --p4:var(--cp-pink4,#C8557E);
  --p5:var(--cp-pink5,#A03A62);
  --ink:var(--cp-text,#F3E3EA);
  --ink2:var(--cp-text2,#CDB4C0);
  --dim:var(--cp-dim,#977A88);
  --line:var(--cp-line,#2C1C24);
  --line2:var(--cp-line2,#3E2A34);
  --bg2:var(--cp-bg2,#1B1116);
  --serif:var(--cp-serif,'Italiana',Georgia,serif);
  --script:var(--cp-script,'Parisienne',cursive);
  --quote:var(--cp-quote,'Cormorant Garamond',Georgia,serif);
  position:relative;
}

.cpp-wrap{max-width:calc(760px + 144px);margin:0 auto;padding:0 72px}
.cpp-wrap--narrow{max-width:calc(720px + 144px)}
.cpp-wrap--mid{max-width:calc(940px + 144px)}

/* ---------- úvod ---------- */

.cpp-hero{position:relative;text-align:center;padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,72px);overflow:hidden}
.cpp-hero--arch{padding-bottom:clamp(48px,7vw,88px)}
.cpp-glow{position:absolute;left:50%;top:-180px;width:760px;height:520px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(228,138,166,.16),rgba(228,138,166,.05) 45%,transparent 70%);
  pointer-events:none}
.cpp-hero > .cpp-wrap{position:relative}

.cpp-back{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);font-weight:500;margin-bottom:clamp(28px,5vw,56px)}
.cpp-back:hover{color:var(--p3)}

/* vodítko: tenká niť, ktorá zhora klesá k textu */
.cpp-thread{display:flex;flex-direction:column;align-items:center;margin:0 auto 26px}
.cpp-thread i{display:block;width:1px;height:clamp(48px,7vw,86px);
  background:linear-gradient(to bottom,transparent,var(--p4))}
.cpp-thread b{display:block;width:5px;height:5px;margin-top:-1px;background:var(--p3);transform:rotate(45deg)}

.cpp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);font-weight:500}
.cpp-eyebrow--c{justify-content:center}
.cpp-eyebrow em{font-family:var(--serif);font-style:normal;font-size:15px;letter-spacing:.12em;color:var(--p3)}

.cpp-h1{font-family:var(--serif);font-weight:400;margin:18px 0 0;line-height:1.02;letter-spacing:-.005em;
  font-size:clamp(42px,6.6vw,86px);
  background:linear-gradient(180deg,var(--p1),var(--p4));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cpp-h1--arch em{display:block;font-family:var(--script);font-style:normal;font-size:.62em;line-height:1.1;margin-top:6px}

.cpp-ded{font-family:var(--script);font-size:clamp(24px,3vw,34px);color:var(--p3);margin:14px 0 0;line-height:1.2}

.cpp-lead{max-width:560px;margin:22px auto 0;font-size:17px;line-height:1.8;color:var(--ink2)}

.cpp-diamond{position:relative;width:9px;height:9px;margin:clamp(30px,5vw,54px) auto 0;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%23C8557E'/%3E%3C/svg%3E") center/contain no-repeat}
.cpp-diamond::before,.cpp-diamond::after{content:"";position:absolute;top:50%;width:clamp(48px,9vw,110px);height:1px;margin-top:-.5px}
.cpp-diamond::before{right:calc(100% + 16px);background:linear-gradient(to right,transparent,rgba(200,85,126,.55))}
.cpp-diamond::after{left:calc(100% + 16px);background:linear-gradient(to left,transparent,rgba(200,85,126,.55))}

.cpp-portrait{margin:0 0 clamp(32px,5vw,56px);border:1px solid var(--line);position:relative}
.cpp-portrait img{width:100%;filter:saturate(.85)}
.cpp-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(228,138,166,.08),transparent 55%);pointer-events:none}

/* ---------- text poklony ---------- */

.cpp-prose{font-size:19px;line-height:1.85;color:var(--ink2);padding-bottom:8px}
.cpp-prose p{margin:0 0 1.5em}
.cpp-prose > p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-size:4.4em;line-height:.82;color:var(--p3);
  padding:6px 14px 0 0;margin-top:4px}
.cpp-prose h2{font-family:var(--serif);font-weight:400;color:var(--p1);line-height:1.18;
  font-size:clamp(28px,3.4vw,40px);margin:2.4em 0 .7em;position:relative;padding-top:30px}
.cpp-prose h2::before{content:"";position:absolute;top:0;left:0;width:44px;height:1px;background:var(--p4)}
.cpp-prose h2::after{content:"";position:absolute;top:-3px;left:56px;width:5px;height:5px;background:var(--p4);transform:rotate(45deg)}
.cpp-prose h3{font-family:var(--serif);font-weight:400;color:var(--p1);font-size:26px;margin:2em 0 .5em}
.cpp-prose blockquote{margin:2.2em 0;padding:0 0 0 26px;border-left:1px solid var(--p4);
  font-family:var(--quote);font-style:italic;font-size:26px;line-height:1.35;color:var(--ink)}
.cpp-prose blockquote p{margin:0}
.cpp-prose a{border-bottom:1px solid var(--line2)}
.cpp-prose a:hover{color:var(--p3)}
.cpp-prose img{border:1px solid var(--line);margin:1.6em 0}
.cpp-prose ul,.cpp-prose ol{padding-left:1.2em}
.cpp-prose li{margin-bottom:.5em}

/* ---------- záverečný list ---------- */

.cpp-letter{position:relative;margin:clamp(48px,7vw,84px) 0 0;padding:clamp(40px,5vw,60px) clamp(26px,4vw,56px) clamp(32px,4vw,48px);
  border:1px solid var(--line2);background:linear-gradient(180deg,rgba(228,138,166,.05),rgba(228,138,166,.015))}
.cpp-letter__seal{position:absolute;top:-7px;left:50%;width:13px;height:13px;margin-left:-7px;
  transform:rotate(45deg);background:var(--cp-bg,#140D11);border:1px solid var(--p4)}
.cpp-letter__body{font-family:var(--quote);font-size:clamp(19px,2.1vw,23px);line-height:1.7;color:var(--ink);font-style:italic}
.cpp-letter__body p{margin:0 0 1.1em}
.cpp-letter__body p:last-child{margin-bottom:0}
.cpp-sign{font-family:var(--script);font-size:clamp(28px,3.4vw,40px);color:var(--p3);text-align:right;margin:28px 0 0;line-height:1}

/* ---------- kredo ---------- */

.cpp-kredo{font-family:var(--serif);font-weight:400;text-align:center;color:var(--p2);
  font-size:clamp(28px,4.4vw,52px);line-height:1.18;margin:clamp(56px,8vw,96px) auto 0;max-width:16em;letter-spacing:-.005em}

.cpp-knee{display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
  margin:clamp(44px,6vw,72px) 0 clamp(44px,6vw,72px)}
.cpp-knee span{display:block;width:clamp(30px,8vw,90px);height:1px;background:var(--line2)}

/* ---------- brána ---------- */

.cpp-teaser{font-size:19px;line-height:1.85;color:var(--ink2)}
.cpp-gate{border:1px solid var(--line2);padding:40px;text-align:center;background:var(--bg2)}
.cpp-gate p{margin:0 0 20px;color:var(--ink2);font-family:var(--quote);font-style:italic;font-size:22px}
.cpp-btn{display:inline-flex;align-items:center;padding:14px 26px;border:1px solid var(--p4);color:var(--p2);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-radius:2px}
.cpp-btn:hover{background:var(--p5);color:#FBEFF4}

/* ---------- zoznam ---------- */

.cpp-list{border-top:1px solid var(--line)}
.cpp-list--inline{border-top:0}
.cpp-item{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start;
  padding:clamp(32px,4.5vw,52px) 0;border-bottom:1px solid var(--line)}
.cpp-item__no{font-family:var(--serif);font-size:clamp(38px,5vw,62px);line-height:1;color:var(--p5);text-align:right;padding-top:6px;letter-spacing:.02em}
.cpp-item__title{font-family:var(--serif);font-weight:400;color:var(--p1);line-height:1.1;
  font-size:clamp(28px,3.6vw,44px);margin:12px 0 10px}
.cpp-item__title a:hover{color:var(--p3)}
.cpp-item__text{color:var(--ink2);font-size:17px;line-height:1.75;margin:0 0 18px;max-width:58ch}
.cpp-more{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--p4);padding-bottom:5px;font-weight:500}
.cpp-more:hover{color:var(--p3)}
.cpp-item.is-locked{opacity:.62}
.cpp-item.is-locked .cpp-item__text{filter:blur(.25px)}

.cpp-empty{text-align:center;color:var(--dim);font-family:var(--quote);font-style:italic;font-size:22px;padding:80px 0}
.cpp-pager{padding:48px 0 80px;text-align:center}
.cpp-pager .page-numbers{display:inline-block;padding:8px 14px;color:var(--ink2);font-size:13px;letter-spacing:.1em}
.cpp-pager .page-numbers.current{color:var(--p3);border-bottom:1px solid var(--p4)}

/* ---------- ďalšie poklony ---------- */

.cpp-pn{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding:36px 0 96px}
.cpp-pn a{display:flex;flex-direction:column;gap:8px}
.cpp-pn--r{text-align:right;align-items:flex-end}
.cpp-pn__t{font-family:var(--serif);font-size:22px;color:var(--p2);line-height:1.2}
.cpp-pn a:hover .cpp-pn__t{color:var(--p3)}

/* ---------- menšie obrazovky ---------- */

@media (max-width:900px){
  .cpp-wrap{padding:0 28px}
  .cpp-item{grid-template-columns:64px 1fr;gap:18px}
  .cpp-item__no{font-size:32px;text-align:left;padding-top:2px}
}
@media (max-width:640px){
  .cpp-prose{font-size:17px}
  .cpp-prose > p:first-of-type::first-letter{font-size:3.6em;padding-right:10px}
  .cpp-letter{padding:34px 22px 26px}
  .cpp-pn{grid-template-columns:1fr;gap:28px}
  .cpp-pn--r{text-align:left;align-items:flex-start}
  .cpp-knee span{width:24px}
}
.cpp-btn--soon{border-style:dashed;color:var(--dim);cursor:not-allowed}