/* v34: hero + chips icons + modern orange excerpt card */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{--accent:#0fb981;--accent2:#0aa66f}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:#0f1116;color:#111827}

.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;/* removed bg */filter:brightness(1.22) saturate(1.06);z-index:0  /* performance: browsers that umí WebP si vezmou menší soubor */
  
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,16,.28) 0%, rgba(5,8,16,.32) 40%, rgba(5,8,16,.5) 100%);z-index:1}
.hero-center{position:relative;color:#fff;display:flex;flex-direction:column;gap:10px;padding:4vh 20px 6vh;z-index:2}

.head-wrap{margin-bottom:30px}
.title{font-size:66px;line-height:1.04;margin:0 0 10px;text-shadow:0 6px 24px rgba(0,0,0,.35);letter-spacing:-.02em}
.subtitle{font-size:20px;color:#cbd5e1;margin:0 0 12px}
.subtitle2{font-size:18px;color:#dbe7ff;margin:0 0 4px}

/* Form */
.pill{display:inline-flex;align-items:stretch;gap:0;background:rgba(255,255,255,.10);backdrop-filter:blur(2px);border-radius:20px;border:1px solid rgba(255,255,255,.28);box-shadow:0 12px 40px rgba(0,0,0,.38);padding:6px;max-width:820px;width:95%;margin:4px auto 0}
.pill-input{flex:1;min-width:280px;padding:16px 18px;border:none;outline:none;background:#ffffff;color:#0f172a;font-size:16px;border-radius:14px 0 0 14px;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.pill-input::placeholder{color:#5b647a}
.pill-input:focus{box-shadow:0 0 0 3px rgba(16,185,129,.35), inset 0 1px 2px rgba(0,0,0,.06)}
.pill-btn{padding:16px 22px;border:none;border-radius:0 14px 14px 0;background:linear-gradient(180deg,var(--accent),var(--accent2));color:#fff;font-weight:800;cursor:pointer}
.pill-btn:hover{filter:brightness(.97)}
.hp{display:none}

/* Icons turned into chips */






/* Modern orange excerpt card */
.excerpt{
  position:relative;
  z-index:3;
  max-width:960px;
  margin:-220px auto 0;
  padding:18px;
  border-radius:20px;
  background:
    /* leather grain scratches */
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 7px),
    /* uneven warm highlight */
    radial-gradient(900px 420px at 20% -30%, rgba(255,200,140,.18), transparent 70%),
    /* base leather */
    linear-gradient(135deg, #5b2f1f, #3a1c12 60%);
  box-shadow:0 30px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(30,12,8,.9);
}
/* stitched border (inset dashed) */
.excerpt::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:16px;
  border:2px dashed rgba(255,215,190,.32);
  
  pointer-events:none;
}
/* elastic band on the right */
.excerpt::after{ display:none }
/* inner paper page */
.excerpt .page{
  position:relative;
  
  padding:24px 26px 20px 36px;
  background:
    /* lined paper */
    repeating-linear-gradient(180deg, rgba(255, 182, 140, .16) 0px, rgba(255, 182, 140, .16) 1px, transparent 1px, transparent 28px),
    /* coffee ring + stains */
    radial-gradient(circle at 76% 9%, rgba(120,70,40,0) 22px, rgba(120,70,40,.18) 26px, rgba(120,70,40,0) 34px),
    radial-gradient(120px 80px at 18% 82%, rgba(120,80,50,.10), rgba(120,80,50,0) 70%),
    /* aged paper base */
    linear-gradient(180deg, rgba(255, 239, 224, .88), rgba(255, 248, 238, .92));
  
  
  color:#1d1a16;
  font-family: "Georgia", "Times New Roman", serif;
  line-height:1.8;
  font-size:18px;
}
/* perforated strip on the left of the page */
.excerpt .page::before{
  content:"";
  position:absolute; left:10px; top:10px; bottom:10px;
  width:12px;
  background:
    radial-gradient(circle at 50% 10%, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 2px, transparent 2px) 0 0/100% 22px repeat-y,
    linear-gradient(180deg, rgba(255,160,110,.35), rgba(255,160,110,.22));
  border-radius:6px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.12);
}
/* small corner protectors (rivets) */

/* headings & paragraphs on the page */
.excerpt .page h2{margin:0 0 6px;font-size:21px;letter-spacing:.15px;color:#2a211b}
.excerpt .page h3{margin:0 0 8px;font-size:18px;color:#3b2e25;font-weight:700}
.excerpt .page p{margin:12px 0;color:#1f1712}
/* Drop cap for first paragraph */
.excerpt .page h3 + p::first-letter{
  float:left; font-size:46px; line-height:38px; padding:6px 8px 0 2px; font-weight:700; color:#5a3e2f;
}
/* CTA inside page */
.excerpt-cta{margin-top:14px; text-align:center}
.cta-continue{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(16,185,129,.35);
  background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
  color:#0b3b2e;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.cta-continue:hover{filter:brightness(.98)}
@media (max-width:920px){
  .excerpt{
  position:relative;
  z-index:3;
  max-width:960px;
  margin:-220px auto 0;
  padding:18px;
  border-radius:20px;
  background:
    /* leather grain scratches */
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 7px),
    /* uneven warm highlight */
    radial-gradient(900px 420px at 20% -30%, rgba(255,200,140,.18), transparent 70%),
    /* base leather */
    linear-gradient(135deg, #5b2f1f, #3a1c12 60%);
  box-shadow:0 30px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(30,12,8,.9);
}
  .excerpt .page{
  position:relative;
  
  padding:24px 26px 20px 36px;
  background:
    /* lined paper */
    repeating-linear-gradient(180deg, rgba(255, 182, 140, .16) 0px, rgba(255, 182, 140, .16) 1px, transparent 1px, transparent 28px),
    /* coffee ring + stains */
    radial-gradient(circle at 76% 9%, rgba(120,70,40,0) 22px, rgba(120,70,40,.18) 26px, rgba(120,70,40,0) 34px),
    radial-gradient(120px 80px at 18% 82%, rgba(120,80,50,.10), rgba(120,80,50,0) 70%),
    /* aged paper base */
    linear-gradient(180deg, rgba(255, 239, 224, .88), rgba(255, 248, 238, .92));
  
  
  color:#1d1a16;
  font-family: "Georgia", "Times New Roman", serif;
  line-height:1.8;
  font-size:18px;
}
}
/* perforated diary margin (left) */
.excerpt::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:16px;
  border:2px dashed rgba(255,215,190,.32);
  
  pointer-events:none;
}
/* washi tape effect in the top-right corner */
.excerpt::after{ display:none }
.excerpt h2{margin:0 0 6px;font-size:21px;letter-spacing:.15px;color:#2a211b}
.excerpt h3{margin:0 0 8px;font-size:18px;color:#3b2e25;font-weight:700}
.excerpt p{margin:12px 0;color:#1f1712}
/* Drop cap (booky) for first paragraph after h3 */
.excerpt h3 + p::first-letter{
  float:left; font-size:46px; line-height:38px; padding:6px 8px 0 2px; font-weight:700; color:#5a3e2f;
}
/* CTA under excerpt */
.excerpt-cta{margin-top:14px; text-align:center}
.cta-continue{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(16,185,129,.35);
  background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
  color:#0b3b2e;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.cta-continue:hover{filter:brightness(.98)}

.excerpt h2{margin:0 0 6px;font-size:21px;letter-spacing:.15px;color:#2a211b}
.excerpt h3{margin:0 0 8px;font-size:18px;color:#3b2e25;font-weight:700}
.excerpt p{margin:12px 0;color:#1f1712}

.footer{background:linear-gradient(180deg,#200b0b,#2b0d0e);color:#fff;text-align:center;padding:26px 18px}
.footer .small, .footer .tiny{opacity:.8}
.footer a{color:#cfe9ff;text-decoration:none}
.footer a:hover{text-decoration:underline}

@media (max-width:920px){
  .title{font-size:40px}
  .subtitle,.subtitle2{font-size:16px}
  .pill{flex-direction:column;align-items:stretch}
  .pill-input{border-radius:14px}
  .pill-btn{border-radius:14px;margin-top:6px}
  
  .excerpt{
  position:relative;
  z-index:3;
  max-width:960px;
  margin:-220px auto 0;
  padding:18px;
  border-radius:20px;
  background:
    /* leather grain scratches */
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 7px),
    /* uneven warm highlight */
    radial-gradient(900px 420px at 20% -30%, rgba(255,200,140,.18), transparent 70%),
    /* base leather */
    linear-gradient(135deg, #5b2f1f, #3a1c12 60%);
  box-shadow:0 30px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(30,12,8,.9);
}
/* stitched border (inset dashed) */
.excerpt::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:16px;
  border:2px dashed rgba(255,215,190,.32);
  
  pointer-events:none;
}
/* elastic band on the right */
.excerpt::after{ display:none }
/* inner paper page */
.excerpt .page{
  position:relative;
  
  padding:24px 26px 20px 36px;
  background:
    /* lined paper */
    repeating-linear-gradient(180deg, rgba(255, 182, 140, .16) 0px, rgba(255, 182, 140, .16) 1px, transparent 1px, transparent 28px),
    /* coffee ring + stains */
    radial-gradient(circle at 76% 9%, rgba(120,70,40,0) 22px, rgba(120,70,40,.18) 26px, rgba(120,70,40,0) 34px),
    radial-gradient(120px 80px at 18% 82%, rgba(120,80,50,.10), rgba(120,80,50,0) 70%),
    /* aged paper base */
    linear-gradient(180deg, rgba(255, 239, 224, .88), rgba(255, 248, 238, .92));
  
  
  color:#1d1a16;
  font-family: "Georgia", "Times New Roman", serif;
  line-height:1.8;
  font-size:18px;
}
/* perforated strip on the left of the page */
.excerpt .page::before{
  content:"";
  position:absolute; left:10px; top:10px; bottom:10px;
  width:12px;
  background:
    radial-gradient(circle at 50% 10%, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 2px, transparent 2px) 0 0/100% 22px repeat-y,
    linear-gradient(180deg, rgba(255,160,110,.35), rgba(255,160,110,.22));
  border-radius:6px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.12);
}
/* small corner protectors (rivets) */

/* headings & paragraphs on the page */
.excerpt .page h2{margin:0 0 6px;font-size:21px;letter-spacing:.15px;color:#2a211b}
.excerpt .page h3{margin:0 0 8px;font-size:18px;color:#3b2e25;font-weight:700}
.excerpt .page p{margin:12px 0;color:#1f1712}
/* Drop cap for first paragraph */
.excerpt .page h3 + p::first-letter{
  float:left; font-size:46px; line-height:38px; padding:6px 8px 0 2px; font-weight:700; color:#5a3e2f;
}
/* CTA inside page */
.excerpt-cta{margin-top:14px; text-align:center}
.cta-continue{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(16,185,129,.35);
  background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
  color:#0b3b2e;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.cta-continue:hover{filter:brightness(.98)}
@media (max-width:920px){
  .excerpt{
  position:relative;
  z-index:3;
  max-width:960px;
  margin:-220px auto 0;
  padding:18px;
  border-radius:20px;
  background:
    /* leather grain scratches */
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 7px),
    /* uneven warm highlight */
    radial-gradient(900px 420px at 20% -30%, rgba(255,200,140,.18), transparent 70%),
    /* base leather */
    linear-gradient(135deg, #5b2f1f, #3a1c12 60%);
  box-shadow:0 30px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(30,12,8,.9);
}
  .excerpt .page{
  position:relative;
  
  padding:24px 26px 20px 36px;
  background:
    /* lined paper */
    repeating-linear-gradient(180deg, rgba(255, 182, 140, .16) 0px, rgba(255, 182, 140, .16) 1px, transparent 1px, transparent 28px),
    /* coffee ring + stains */
    radial-gradient(circle at 76% 9%, rgba(120,70,40,0) 22px, rgba(120,70,40,.18) 26px, rgba(120,70,40,0) 34px),
    radial-gradient(120px 80px at 18% 82%, rgba(120,80,50,.10), rgba(120,80,50,0) 70%),
    /* aged paper base */
    linear-gradient(180deg, rgba(255, 239, 224, .88), rgba(255, 248, 238, .92));
  
  
  color:#1d1a16;
  font-family: "Georgia", "Times New Roman", serif;
  line-height:1.8;
  font-size:18px;
}
}
/* perforated diary margin (left) */
.excerpt::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:16px;
  border:2px dashed rgba(255,215,190,.32);
  
  pointer-events:none;
}
/* washi tape effect in the top-right corner */
.excerpt::after{ display:none }
.excerpt h2{margin:0 0 6px;font-size:21px;letter-spacing:.15px;color:#2a211b}
.excerpt h3{margin:0 0 8px;font-size:18px;color:#3b2e25;font-weight:700}
.excerpt p{margin:12px 0;color:#1f1712}
/* Drop cap (booky) for first paragraph after h3 */
.excerpt h3 + p::first-letter{
  float:left; font-size:46px; line-height:38px; padding:6px 8px 0 2px; font-weight:700; color:#5a3e2f;
}
/* CTA under excerpt */
.excerpt-cta{margin-top:14px; text-align:center}
.cta-continue{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(16,185,129,.35);
  background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
  color:#0b3b2e;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.cta-continue:hover{filter:brightness(.98)}

}
  .subtitle,.subtitle2{font-size:16px}
  .pill{flex-direction:column;align-items:stretch}
  .pill-input{border-radius:14px}
  .pill-btn{border-radius:14px;margin-top:6px}
  
  .excerpt{
  position:relative;
  z-index:3;
  max-width:960px;
  margin:-220px auto 0;
  padding:18px;
  border-radius:20px;
  background:
    /* leather grain scratches */
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 7px),
    /* uneven warm highlight */
    radial-gradient(900px 420px at 20% -30%, rgba(255,200,140,.18), transparent 70%),
    /* base leather */
    linear-gradient(135deg, #5b2f1f, #3a1c12 60%);
  box-shadow:0 30px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(30,12,8,.9);
}
/* stitched border (inset dashed) */
.excerpt::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:16px;
  border:2px dashed rgba(255,215,190,.32);
  
  pointer-events:none;
}
/* elastic band on the right */
.excerpt::after{ display:none }
/* inner paper page */
.excerpt .page{
  position:relative;
  
  padding:24px 26px 20px 36px;
  background:
    /* lined paper */
    repeating-linear-gradient(180deg, rgba(255, 182, 140, .16) 0px, rgba(255, 182, 140, .16) 1px, transparent 1px, transparent 28px),
    /* coffee ring + stains */
    radial-gradient(circle at 76% 9%, rgba(120,70,40,0) 22px, rgba(120,70,40,.18) 26px, rgba(120,70,40,0) 34px),
    radial-gradient(120px 80px at 18% 82%, rgba(120,80,50,.10), rgba(120,80,50,0) 70%),
    /* aged paper base */
    linear-gradient(180deg, rgba(255, 239, 224, .88), rgba(255, 248, 238, .92));
  
  
  color:#1d1a16;
  font-family: "Georgia", "Times New Roman", serif;
  line-height:1.8;
  font-size:18px;
}
/* perforated strip on the left of the page */
.excerpt .page::before{
  content:"";
  position:absolute; left:10px; top:10px; bottom:10px;
  width:12px;
  background:
    radial-gradient(circle at 50% 10%, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 2px, transparent 2px) 0 0/100% 22px repeat-y,
    linear-gradient(180deg, rgba(255,160,110,.35), rgba(255,160,110,.22));
  border-radius:6px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.12);
}
/* small corner protectors (rivets) */

/* headings & paragraphs on the page */
.excerpt .page h2{margin:0 0 6px;font-size:21px;letter-spacing:.15px;color:#2a211b}
.excerpt .page h3{margin:0 0 8px;font-size:18px;color:#3b2e25;font-weight:700}
.excerpt .page p{margin:12px 0;color:#1f1712}
/* Drop cap for first paragraph */
.excerpt .page h3 + p::first-letter{
  float:left; font-size:46px; line-height:38px; padding:6px 8px 0 2px; font-weight:700; color:#5a3e2f;
}
/* CTA inside page */
.excerpt-cta{margin-top:14px; text-align:center}
.cta-continue{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(16,185,129,.35);
  background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
  color:#0b3b2e;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.cta-continue:hover{filter:brightness(.98)}
@media (max-width:920px){
  .excerpt{
  position:relative;
  z-index:3;
  max-width:960px;
  margin:-220px auto 0;
  padding:18px;
  border-radius:20px;
  background:
    /* leather grain scratches */
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, rgba(0,0,0,0) 1px 7px),
    /* uneven warm highlight */
    radial-gradient(900px 420px at 20% -30%, rgba(255,200,140,.18), transparent 70%),
    /* base leather */
    linear-gradient(135deg, #5b2f1f, #3a1c12 60%);
  box-shadow:0 30px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(30,12,8,.9);
}
  .excerpt .page{
  position:relative;
  
  padding:24px 26px 20px 36px;
  background:
    /* lined paper */
    repeating-linear-gradient(180deg, rgba(255, 182, 140, .16) 0px, rgba(255, 182, 140, .16) 1px, transparent 1px, transparent 28px),
    /* coffee ring + stains */
    radial-gradient(circle at 76% 9%, rgba(120,70,40,0) 22px, rgba(120,70,40,.18) 26px, rgba(120,70,40,0) 34px),
    radial-gradient(120px 80px at 18% 82%, rgba(120,80,50,.10), rgba(120,80,50,0) 70%),
    /* aged paper base */
    linear-gradient(180deg, rgba(255, 239, 224, .88), rgba(255, 248, 238, .92));
  
  
  color:#1d1a16;
  font-family: "Georgia", "Times New Roman", serif;
  line-height:1.8;
  font-size:18px;
}
}
/* perforated diary margin (left) */
.excerpt::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:16px;
  border:2px dashed rgba(255,215,190,.32);
  
  pointer-events:none;
}
/* washi tape effect in the top-right corner */
.excerpt::after{ display:none }
.excerpt h2{margin:0 0 6px;font-size:21px;letter-spacing:.15px;color:#2a211b}
.excerpt h3{margin:0 0 8px;font-size:18px;color:#3b2e25;font-weight:700}
.excerpt p{margin:12px 0;color:#1f1712}
/* Drop cap (booky) for first paragraph after h3 */
.excerpt h3 + p::first-letter{
  float:left; font-size:46px; line-height:38px; padding:6px 8px 0 2px; font-weight:700; color:#5a3e2f;
}
/* CTA under excerpt */
.excerpt-cta{margin-top:14px; text-align:center}
.cta-continue{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(16,185,129,.35);
  background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
  color:#0b3b2e;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.cta-continue:hover{filter:brightness(.98)}

}

/* Minimal inline meta-line under the form */
.meta-line{
  max-width:900px;
  margin:10px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#e8edf7;
  opacity:.95;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
  font-size:14px;
}
.meta-line .ico{width:16px;height:16px;opacity:.95;margin-right:6px}
.meta-line .meta-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.meta-line .dot{opacity:.7}
@media (max-width:920px){
  .meta-line{flex-wrap:wrap;gap:8px 12px;font-size:13px}
}

.excerpt .page .patina{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    /* tiny dust speckles */
    radial-gradient(circle at 12% 24%, rgba(0,0,0,.08) 0.5px, transparent 0.6px) 0 0/26px 26px,
    radial-gradient(circle at 72% 68%, rgba(0,0,0,.08) 0.5px, transparent 0.6px) 0 0/22px 22px,
    radial-gradient(circle at 36% 78%, rgba(0,0,0,.06) 0.4px, transparent 0.5px) 0 0/18px 18px,
    /* faint diagonal scuffs */
    repeating-linear-gradient(140deg, rgba(0,0,0,.03) 0 1px, transparent 1px 10px);
  opacity:.35;
}


.gift-badge{transform:none; font-style:normal;}
.gift-badge .gift-text{ display:inline-block; padding:8px 18px; font-family:inherit; font-weight:700; font-style:normal; letter-spacing:.1px; line-height:1.25; color:#2b1607; transform:none; }
@media (max-width:480px){ .gift-badge{ max-width:92vw } .gift-badge .gift-text{ padding:7px 12px; font-size:13px } }

.gift-badge::before, .gift-badge::after{
  content:"";
  position:absolute; top:50%; width:14px; height:14px;
  background:#c76f29;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  rotate(45deg);
}
.gift-badge::before{ left:-9px }
.gift-badge::after{ right:-9px }
.gift-badge .gift-text{
  display:inline-block;
  transform:skewX(6deg);
  padding:8px 18px;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.2px;
  color:#2b1607;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
@media (max-width:920px){
  .gift-badge .gift-text{ padding:7px 14px; font-size:12.5px }
}
@media (max-width:920px){
  
.gift-badge{
  display:block; margin:10px auto 0; max-width:720px; text-align:center; position:relative;
  background:linear-gradient(180deg, #FFB74A, #FF8B2D);
  color:#2b1607; border:1px solid rgba(120,60,20,.45);
  border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
.gift-badge .gift-text{ display:inline-block; padding:8px 18px; font-weight:800; letter-spacing:.2px }
@media (max-width:480px){ .gift-badge{ max-width:92vw } .gift-badge .gift-text{ padding:7px 12px; font-size:13px } }

.gift-badge::before, .gift-badge::after{
  content:"";
  position:absolute; top:50%; width:14px; height:14px;
  background:#c76f29;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  rotate(45deg);
}
.gift-badge::before{ left:-9px }
.gift-badge::after{ right:-9px }
.gift-badge .gift-text{
  display:inline-block;
  transform:skewX(6deg);
  padding:8px 18px;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.2px;
  color:#2b1607;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
@media (max-width:920px){
  .gift-badge .gift-text{ padding:7px 14px; font-size:12.5px }
}
}

/* v46 spacing & contrast tweaks */
.title{ margin-top:-26px }
.subtitle{ margin-bottom:8px; opacity:.96 }
.subtitle2{ margin-top:4px; margin-bottom:2px; opacity:.95 }
.pill{ margin-top:4px }
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.48) 46%, rgba(0,0,0,.20) 80%, rgba(0,0,0,0) 100%),
    radial-gradient(800px 320px at 50% 12%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}

.benefits-line{
  max-width:900px;
  margin:8px auto 0;
  text-align:center;
  color:#e9eef9;
  opacity:.92;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
  font-size:13.5px;
}
@media (max-width:920px){
  .benefits-line{font-size:12.5px}
}

/* v50: mobile adjustments to bring form up */
@media (max-width: 480px){
  .title{ margin-top:-10vw }
  .subtitle{ margin-bottom:6px }
  .subtitle2{ margin-top:2px }
  .pill{ margin-top:6px }
}
/* Instagram link style */
.ig{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:9999px;
  color:#eaf2ff; opacity:.95; text-decoration:none;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  margin:6px 0 0;
  font-size:13px;
}
.ig:hover{ background:rgba(255,255,255,.12) }
.ig span{ font-size:12.5px }


.gift-badge{
  display:block; margin:10px auto 0; max-width:720px; text-align:center; position:relative;
  background:linear-gradient(180deg, #FFB74A, #FF8B2D);
  color:#2b1607; border:1px solid rgba(120,60,20,.45);
  border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
.gift-badge .gift-text{ display:inline-block; padding:8px 18px; font-weight:800; letter-spacing:.2px }
@media (max-width:480px){ .gift-badge{ max-width:92vw } .gift-badge .gift-text{ padding:7px 12px; font-size:13px } }


.hidden{display:none}

@media (max-width:480px){ 
.gift-badge{
  display:block; margin:10px auto 0; max-width:720px; text-align:center; position:relative;
  background:linear-gradient(180deg, #FFB74A, #FF8B2D);
  color:#2b1607; border:1px solid rgba(120,60,20,.45);
  border-radius:10px; box-shadow:0 12px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
.gift-badge .gift-text{ display:inline-block; padding:8px 18px; font-weight:800; letter-spacing:.2px }
@media (max-width:480px){ .gift-badge{ max-width:92vw } .gift-badge .gift-text{ padding:7px 12px; font-size:13px } }
 }

footer .socials{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap }
footer .ig{ display:inline-flex; align-items:center; gap:8px; color:#e9eef9; text-decoration:none;
  border:1px solid rgba(255,255,255,.28); padding:6px 12px; border-radius:9999px; background:rgba(255,255,255,.10) }
footer .ig:hover{ background:rgba(255,255,255,.10) }
footer .ig span{ font-size:13px }

.faq{ max-width:960px; margin:28px auto 0; padding:0 16px 20px; color:#eaf2ff }
.faq h2{ font-size:22px; margin:0 0 8px; color:#f8fbff }
.faq details{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:10px 12px; margin:10px 0 }
.faq summary{ cursor:pointer; font-weight:600 }
.faq p{ margin:8px 0 0; color:#eaf2ff }

/* v58: force ribbon text normal, no skew/lean */
.gift-badge, .gift-badge::before, .gift-badge::after, .gift-badge .gift-text{
  transform: none !important;
  font-style: normal !important;
  font-family: inherit !important;
}

.success{margin-top:10px; color:#0f5132; background:#d1e7dd; border:1px solid #badbcc; padding:10px 12px; border-radius:10px; font-weight:600}

/* perf overrides */
@media (max-width:920px){
  .hero-bg{}
}
@media (max-width:480px){
  .hero-bg{}
}


/* === Mobile hero: show more faces with cover (no black bars) and shorter hero === */
@media (max-width: 640px){
  .hero{ min-height: auto !important; }
  .hero-bg{ background-size: cover !important; background-position: 56% 28% !important; background-repeat:no-repeat; }
  .head-wrap{ margin-top: -4px !important; }
  .title{ font-size: 46px !important; line-height: 1.08 !important; }
  .subtitle{ font-size: 18px !important; }
  .subtitle2{ font-size: 16px !important; }
}

/* === Gift strip vs. diary: minimal gap, no overlap === */
/* === Tablet spacing fix (iPad 768–1024): reduce gap between gift strip and excerpt === */
@media (min-width: 740px) and (max-width: 1024px){
  .excerpt{  } /* was 0 on <=920; pull it up to visually connect */
  .gift-badge{ margin: 10px auto 6px !important; }
}

.gift-badge{ position:relative; z-index:70; margin: 10px auto 8px !important; }
@media (max-width: 920px){
  .excerpt{  }
}


/* === Fine tune mobile heading position (slightly lower) === */
@media (max-width: 640px){
  .head-wrap{ margin-top: 12px !important; }   /* was -4px */
  .title{ font-size: 46px !important; line-height: 1.08 !important; }
}

/* === Tighten gap: gift strip <-> diary === */
.gift-badge{ margin: 10px auto 4px !important; }  /* was 8px */
@media (max-width: 920px){
  .excerpt{  }           /* keep flush; no extra gap */
}


/* FAQ readability */
.faq{max-width: 980px; margin: 40px auto; padding: 0 18px;}
.faq details{background:rgba(255,255,255,.85); border-radius:14px; padding:14px 16px; margin:14px 0; box-shadow:0 8px 24px rgba(0,0,0,.08)}
.faq summary{font-weight:800; cursor:pointer}
.faq p{line-height:1.7; margin:10px 0}



/* === OVERRIDE: Tablet gap fix placed LAST so it wins over earlier rules === */
@media (min-width: 740px) and (max-width: 920px){
  .excerpt{  } /* pull diary up under hero so it visually navazuje */
  .gift-badge{ margin: 8px auto 4px !important; }
}

/* === FAQ high contrast + comfy reading === */
.faq{max-width: 980px; margin: 44px auto 60px; padding: 0 18px;}
.faq details{background:#ffffff; border-radius:14px; padding:16px 18px; margin:16px 0; box-shadow:0 10px 28px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06)}
.faq summary{font-weight:800; cursor:pointer; color:#111827}
.faq p, .faq li{line-height:1.75; margin:12px 0; color:#111827}
.faq details[open]{background:#fff}




/* === FAQ: restore original dark translucent styling (high contrast) === */
.faq{ max-width:960px; margin:28px auto 40px; padding:0 16px 20px; color:#eaf2ff !important; }
.faq h2{ font-size:22px; margin:0 0 8px; color:#f8fbff !important; }
.faq details{ background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.16) !important;
  border-radius:10px; padding:10px 12px; margin:10px 0; box-shadow:none !important; }
.faq summary{ cursor:pointer; font-weight:700; color:#f8fbff !important; }
.faq p, .faq li{ margin:8px 0 0; color:#eaf2ff !important; line-height:1.7; }


/* === OVERRIDE LAST: Tablet/iPad gap fix so excerpt navazuje pod gift-badge === */
@media (min-width: 740px) and (max-width: 920px){
  .excerpt{  }
  .gift-badge{ margin: 10px auto 6px !important; }
}
@media (min-width: 921px) and (max-width: 1100px){
  .excerpt{  }
  .gift-badge{ margin: 10px auto 8px !important; }
}




/* === HARD FIX: make excerpt touch the gift-badge on tablets === */
@media (min-width: 740px) and (max-width: 1100px){
  .excerpt{  }  /* match desktop pull-up */
  .gift-badge{ margin: 10px auto 0 !important; } /* remove bottom gap */
}




/* === Viewport-aware overlap to remove gap on tall portrait monitors === */
@media (min-width: 920px){
  .excerpt{  }
  .gift-badge{ margin: 12px auto 0 !important; }
}




/* === PORTRAIT DESKTOP FIX (e.g., 1080×1920 monitors) === */
@media (min-width: 920px) and (orientation: portrait){
  .hero{ min-height: 78vh !important; }
  .hero-center{ padding-bottom: 0 !important; }
  .head-wrap{ margin-bottom: 8px !important; }
  .gift-badge{ margin: 8px auto 0 !important; }
  .excerpt{  }
}




/* === PORTRAIT DESKTOP: stronger pull so diary touches the tip === */
@media (min-width: 920px) and (orientation: portrait){
  .hero{ min-height: 72vh !important; }           /* was 78vh */
  .hero-center{ padding-bottom: 0 !important; }
  .head-wrap{ margin-bottom: 6px !important; }
  .gift-badge{ margin: 8px auto 0 !important; }
  .excerpt{  }      /* was -260px */
}




/* === PORTRAIT DESKTOP: tiny-gap tune === */
@media (min-width: 920px) and (orientation: portrait){
  .hero{ min-height: auto !important; }
  .head-wrap{ margin-bottom: 4px !important; }
  .pill{ margin-top: 2px !important; }
  .gift-badge{ margin: 10px auto 0 !important; }  /* keep ribbon tight */
  .excerpt{  }      /* pull diary up to tiny gap */
}




/* === PORTRAIT DESKTOP: final close pull === */
@media (min-width: 920px) and (orientation: portrait){
  .excerpt{  }  /* was -360px */
}




/* === PORTRAIT DESKTOP: ultra-close alignment === */
@media (min-width: 920px) and (orientation: portrait){
  .excerpt{  }  /* was -380px */
}




/* === HERO GRADIENT FADE for smoother bottom transition === */
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(5,8,16,0.1) 0%,
    rgba(5,8,16,0.4) 55%,
    rgba(5,8,16,0.9) 100%) !important;
  z-index:1;
}




/* === TABLET SMOOTH FIX (600–919px): keep diary hugging the gift strip across tablet widths === */
@media (min-width: 600px) and (max-width: 919px){
  .excerpt{  }
  .gift-badge{ margin: 10px auto 0 !important; }
}



/* === Instagram CTA above FAQ === */
.social-instagram{
  text-align:center;
  margin: 44px auto 24px;
}
.social-instagram a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:800;
  font-size:18px;
  color:#f8fbff;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  transition: transform .18s ease, opacity .18s ease;
}
.social-instagram a:hover{  opacity:.96 }
.insta-icon{ width:28px; height:28px; display:inline-block }
@media (max-width:640px){
  .social-instagram{ margin: 36px auto 18px; }
  .social-instagram a{ font-size:16px }
  .insta-icon{ width:24px; height:24px }
}


/* === Cookie consent banner === */
.cookie-consent{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  padding: 14px 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.94));
  box-shadow: 0 -10px 30px rgba(0,0,0,.4);
}
.cookie-consent[hidden]{ display:none !important; }
.cookie-consent .cookie-inner{
  max-width: 980px; margin: 0 auto; padding: 0 18px;
  color: #f8fbff; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-consent p{ margin: 0; line-height:1.6; color:#eaf2ff }
.cookie-consent a{ color:#9cc9ff; text-decoration:underline }
.cookie-actions{ display:flex; gap:10px }
.cookie-btn{
  border-radius:12px; padding:10px 14px; font-weight:800; cursor:pointer; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06); color:#f8fbff; box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.cookie-btn.primary{
  border-color: rgba(16,185,129,.35);
  background: linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.12));
  color: #0b3b2e;
}
@media (max-width: 640px){
  .cookie-consent .cookie-inner{ gap:10px }
  .cookie-actions{ width:100%; justify-content:flex-end }
}


/* === Cookie consent: improve primary button contrast === */
.cookie-btn.primary{
  border-color: rgba(16,185,129,.65) !important;
  background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
}
.cookie-btn.primary:hover{ filter: brightness(1.05) !important; }
.cookie-btn.primary:focus{ outline: 2px solid #34D399 !important; outline-offset: 2px; }

/* keep dashed stitch only on diary card */
section.excerpt .page, .excerpt .page {   background-clip:padding-box; }

/* H1 on screen and no excess hero padding on small screens */
.hero h1{ margin-top:0 !important; position:static !important; transform:none !important; line-height:1.1; }
@media (max-width:640px){ .hero{ padding-top:24px !important; padding-bottom:24px !important; } }

/* 20px below gift-badge to excerpt block */
.gift-badge + section.excerpt,
.gift-badge + .excerpt,
.gift-badge + section + section.excerpt,
.gift-badge + div + section.excerpt {  }
section.excerpt{  }


/* === Final pass: hero top-aligned, meta-line pinned to bottom, 20px to diary === */
.hero, .hero-center, .hero-wrap, .head-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: auto !important;
  height: auto !important;
  padding-top: 24px !important;
  padding-bottom: 20px !important; /* exact distance control to next section */
  margin-bottom: 0 !important;
  gap: 12px;
}
.head-wrap h1, .hero h1, .hero-center h1 {
  margin-top: 0 !important;
  transform: none !important;
  position: static !important;
  line-height: 1.1;
}
/* push the meta-line (with gift-badge) to the bottom of hero */
.meta-line { margin-top: auto !important; margin-bottom: 0 !important; }
.gift-badge { display: block; }

/* the diary/excerpt must sit precisely 20px below hero */
section.excerpt, .excerpt, .excerpt-section {  position: static !important; top: auto !important; }


/* === Hero tune: tighter top, H1 higher === */
.hero, .hero-center, .hero-wrap, .head-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 14px !important;
  padding-bottom: 12px !important;
  gap: 10px;
}
.head-wrap h1, .hero h1, .hero-center h1, .hero-container h1 {
  margin-top: 0 !important;
  transform: none !important;
  position: static !important;
  line-height: 1.08;
}


/* === Diary proximity: ~12px under gift tip === */
.gift-badge + section.excerpt,
.gift-badge + .excerpt,
.meta-line + section.excerpt,
.meta-line + .excerpt,
section.excerpt {  }


/* === Keep stitch only on diary card === */
section.excerpt .page, .excerpt .page {
  
  
  background-clip: padding-box;
}


/* === Overlap & alignment patch === */
:root{ --overlap: 18px; }

/* Hero text higher, background preserved via extra bottom padding */
.hero, .hero-center, .hero-wrap, .head-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px !important;         /* text closer to top */
  padding-bottom: calc(32px + var(--overlap)) !important; /* keep bg visible + compensate overlap */
  margin-bottom: 0 !important;
  gap: 8px;
}
.hero h1, .head-wrap h1, .hero-center h1{
  margin-top: 0 !important;
  transform: none !important;
  position: static !important;
  line-height: 1.07;
}

/* Diary: overlap hero bottom without changing flow */
section.excerpt, .excerpt, .excerpt-section{
              /* remove large gaps */
  position: relative !important;
  top: calc(-1 * var(--overlap));      /* visual overlap upwards */
}

/* Make sure the immediate diary card sits right under the gift/meta area */
.meta-line { margin-top: auto !important; margin-bottom: 0 !important; }
.gift-badge { display:block; }

/* Remove dashed 'stitch' entirely as requested */
section.excerpt .page, .excerpt .page{   }
* { outline: none !important; }

/* Mobile fine-tune */
@media (max-width: 640px){
  :root{ --overlap: 16px; }
  .hero, .hero-center, .head-wrap{ padding-top: 6px !important; padding-bottom: calc(28px + var(--overlap)) !important; }
}


/* === Underlay hero layer === */
body{ position: relative; }
.underlay-hero{ position: fixed; top:0; left:0; right:0; height: var(--underlay-hero-height, 900px); z-index:0; background-repeat: no-repeat; background-size: cover; background-position: center top; pointer-events:none; }.underlay-hero{ position: fixed; top:0; left:0; right:0; height: var(--underlay-hero-height, 900px); z-index:0; background-repeat: no-repeat; background-size: cover; background-position: center top; pointer-events:none; }
.underlay-hero{ background-image: url(assets/cover.png); }

.hero, .hero-wrap, .hero-center, .head-wrap{ background: transparent !important; position: relative; z-index: 1; }

/* Remove dashed/stitch */
section.excerpt .page, .excerpt .page{   }
*{ outline: none !important; }


/* Force hero layers to be transparent: prevent duplicate background */
.hero, .hero-wrap, .hero-center, .head-wrap, .hero-container{
  background: transparent !important;
  background-image: none !important;
}


/* === Mobile override: remove *any* hero backgrounds at smallest widths === */
@media (max-width: 420px){
  .hero, .hero-wrap, .hero-center, .head-wrap, .hero-container,
  .hero::before, .hero::after, .head-wrap::before, .head-wrap::after {
    background: transparent !important;
    background-image: none !important;
  }
}


/* === FAQ visibility === */
.faq, .faq-section, section.faq {
  position: relative;
  z-index: 2;
  color: inherit;
  background: transparent;
}
.faq .card, .faq-section .card {
  background: rgba(255,255,255,0.96);
}


/* === Remove any hero overlays === */
.hero::before, .hero::after, .head-wrap::before, .head-wrap::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  content: none !important;
}


/* === FAQ: darker card background for contrast === */
.faq .card, .faq-section .card {
  background: rgba(0,0,0,0.4) !important;
  color: #ffffff !important;
}
.faq .card a, .faq-section .card a { color: #ffffff !important; text-decoration: underline; }


/* === Kill any hero overlays === */
.hero-overlay { background: none !important; box-shadow: none !important; }
.hero::before, .hero::after, .head-wrap::before, .head-wrap::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.hero-bg {
  background: none !important;
  background-image: none !important;
}
.hero, .hero-wrap, .hero-center, .head-wrap, .hero-container {
  background: transparent !important;
  background-image: none !important;
}


/* === FAQ darker background for contrast === */
#faq.faq {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.44) !important;  /* darker than before */
  color: #fff !important;
}
#faq.faq a { color: #fff !important; text-decoration: underline; }


/* === FAQ container transparent (no full overlay) === */
#faq, #faq.faq { background: transparent !important; color: inherit !important; }


/* === FAQ: dark background on items only === */
#faq .card,
#faq .faq-item,
#faq article,
#faq details {
  background: rgba(0,0,0,0.44) !important;
  color: #ffffff !important;
  border-radius: 12px;
  padding: 16px;
}
#faq .card a, #faq .faq-item a, #faq article a, #faq details a {
  color: #ffffff !important;
  text-decoration: underline;
}

/* spacing between FAQ items */
#faq .card + .card,
#faq .faq-item + .faq-item,
#faq article + article,
#faq details + details { margin-top: 12px; }


/* === tighter gap between tip and diary === */
.gift-badge + section.excerpt,
.gift-badge + .excerpt,
.meta-line + section.excerpt,
.meta-line + .excerpt,
section.excerpt {  }


/* === Gap halve: tip→diary 4px === */
.gift-badge + section.excerpt,
.gift-badge + .excerpt,
.meta-line + section.excerpt,
.meta-line + .excerpt,
section.excerpt {  }


/* === Diary card background (opaque, doesn't bleed outside) === */
section.excerpt .page, .excerpt .page {
  background-color: #ffffff !important;  /* fully opaque */
  
  background-clip: padding-box;          /* keep it inside the card */
  position: relative;
  z-index: 2;                             /* above underlay */
}


/* === FORCE OPAQUE DIARY CARD (no bleed outside) === */
section.excerpt .page, .excerpt .page {
  background-color: #ffffff !important;         /* fully opaque */
  background-clip: padding-box !important; 
  -webkit-background-clip: padding-box !important;
  
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  isolation: isolate;                            /* create new stacking context to avoid blend */
}

/* Neutralize any pseudo-element overlays that may keep it semi-transparent */
section.excerpt .page::before, .excerpt .page::before,



/* === Tighten spacing: gift tip → diary === */
.gift-badge + section.excerpt,
.gift-badge + .excerpt,
.meta-line + section.excerpt,
.meta-line + .excerpt,
section.excerpt { margin-top: 0 !important; }

/* gentle visual nudge (~6px) to bring diary closer without clipping hero */
section.excerpt, .excerpt, .excerpt-section {
  position: relative;
  
}


/* === Gap control reset around meta/gift === */
.meta-line { margin-bottom: 0 !important; }
.gift-badge { margin-bottom: 0 !important; display: block; }


/* === Exact gap: tip → diary ~30px === */
:root { --gap-tip-diary: 30px; }

.gift-badge + section.excerpt,
.gift-badge + .excerpt,
.meta-line + section.excerpt,
.meta-line + .excerpt,
.hero + section.excerpt,
.hero + .excerpt {
  margin-top: var(--gap-tip-diary) !important;
}


/* === Tighten hero bottom padding so the diary sits closer === */
.hero, .hero-wrap, .hero-center, .head-wrap, .hero-container {
  padding-bottom: 8px !important;
}
.meta-line, .gift-badge { margin-bottom: 0 !important; }


/* === Tight gap: tip → diary = 12px === */
.gift-badge + section.excerpt,
.gift-badge + .excerpt,
.meta-line + section.excerpt,
.meta-line + .excerpt,
.hero + section.excerpt,
.hero + .excerpt {
  margin-top: 12px !important;
}


/* === FAQ opaque background + tighter footer spacing === */
#faq, #faq.faq {
  background: #111111 !important;   /* fully opaque */
  color: #ffffff !important;
  margin-bottom: 0 !important;
  padding-bottom: 16px !important;
  position: relative;
  z-index: 2;
}
#faq a { color: #ffffff !important; text-decoration: underline; }
#faq .card, #faq .faq-item, #faq article, #faq details {
  background: transparent !important;   /* items inherit from section so it doesn't double darken */
}

/* Tighten space between FAQ and footer */
#faq + footer, #faq + .footer, section#faq + footer {
  margin-top: 12px !important;
  padding-top: 12px !important;
}
footer, .footer { margin-top: 12px !important; }  /* guard against global larger margins */


/* === Revert: FAQ container stays transparent === */
#faq, #faq.faq { background: transparent !important; color: inherit !important; }


/* === FAQ items readable on transparent container === */
#faq .card, #faq .faq-item, #faq article, #faq details {
  background: rgba(0,0,0,0.44) !important;
  color: #ffffff !important;
  border-radius: 12px;
  padding: 16px;
}
#faq .card a, #faq .faq-item a, #faq article a, #faq details a {
  color: #ffffff !important;
  text-decoration: underline;
}


/* === Footer opaque background === */
footer, .footer {
  background: #111111 !important;
  color: #ffffff !important;
  position: relative;
  z-index: 2;
}
footer a, .footer a { color: #ffffff !important; text-decoration: underline; }


/* === Tighter gap between FAQ and footer === */
#faq + footer, #faq + .footer, section#faq + footer {
  margin-top: 8px !important;
  padding-top: 12px !important;
}


/* Cookie banner minimal styles (visibility only) */
.cookie-consent{ position:fixed; left:0; right:0; bottom:0; z-index:9999; padding:16px; background:#111; color:#fff; }
.cookie-consent .cookie-actions{ margin-top:8px; display:flex; gap:8px; }
.cookie-consent .cookie-btn{ padding:8px 14px; border:0; cursor:pointer; }
.cookie-consent .cookie-btn.primary{ background:#10b981; color:#fff; }
.cookie-consent .cookie-btn.secondary{ background:#374151; color:#fff; }


/* Cookie banner: visible by default; JS hides via .hidden */
.cookie-consent{ position:fixed; left:0; right:0; bottom:0; z-index:9999; padding:16px; background:#111; color:#fff; display:block !important; }
.cookie-consent.hidden{ display:none !important; }
.cookie-consent .cookie-actions{ margin-top:8px; display:flex; gap:8px; }
.cookie-consent .cookie-btn{ padding:8px 14px; border:0; cursor:pointer; }
.cookie-consent .cookie-btn.primary{ background:#10b981; color:#fff; }
.cookie-consent .cookie-btn.secondary{ background:#374151; color:#fff; }

html{ scroll-behavior: smooth; }


/* Cookie banner: visible by default; hide via .hidden */
.cookie-consent{ position:fixed; left:0; right:0; bottom:0; z-index:9999; padding:16px; background:#111; color:#fff; display:block !important; }
.cookie-consent.hidden{ display:none !important; }
.cookie-consent .cookie-actions{ margin-top:8px; display:flex; gap:8px; }
.cookie-consent .cookie-btn{ padding:8px 14px; border:0; cursor:pointer; }
.cookie-consent .cookie-btn.primary{ background:#10b981; color:#fff; }
.cookie-consent .cookie-btn.secondary{ background:#374151; color:#fff; }


/* Cookie banner: compact variant */
.cookie-consent { padding: 12px !important; font-size: 14px; line-height: 1.35; }
.cookie-consent p { margin: 0; }
.cookie-consent .cookie-actions { margin-top: 6px; gap: 6px; }
.cookie-consent .cookie-btn { padding: 6px 12px; font-size: 14px; }
@media (max-width: 420px){
  .cookie-consent { padding: 10px !important; font-size: 13px; }
  .cookie-consent .cookie-btn { padding: 6px 10px; font-size: 13px; }
}



/* === Underlay hero vertical shift ===
   Move the hero background UP by 60px (negative Y offset).
   If you need to tweak later, just change --hero-bg-shift.
*/
:root { --hero-bg-shift: -60px; }
.underlay-hero {
  /* ensure this wins over earlier rules */
  background-position: center var(--hero-bg-shift) !important;
}



/* === Underlay hero vertical shift update === */
:root { --hero-bg-shift: -130px; }  /* previously -60px; now 60 + 70 = -130px */



/* === Underlay hero vertical shift update === */
:root { --hero-bg-shift: -190px; }  /* previously -130px; now +60px higher */



/* === Diary "stitch" border INSIDE the card (no bleed) === */
.excerpt .page, section.excerpt .page { position: relative; }


/* Slightly thinner & lighter on small screens for elegance */
@media (max-width: 480px){
  
}


/* thickness of leather edge */
  --stitch-inset: calc(var(--leather-width) + 8px);
}

.excerpt .page, section.excerpt .page{
  position: relative;
  
  background-color:#fff;             /* white paper */
  background-clip: padding-box;
  /* opaque brown "leather" ring drawn INSIDE the card */
  
}

/* inner dashed stitch kept inside the leather edge */


/* Slightly lighter + thinner stitch on small screens */
@media (max-width:480px){
  
}



/* === Diary styling: leather brown frame + inner stitch + left hatched strip === */
:root{
  --leather: #7B4B3B;               /* warm brown */
  --stitch: rgba(255,255,255,0.70); /* light stitch color */
}

/* keep the existing frame; just ensure leather color is applied */
section.excerpt .page, .excerpt .page{
  position: relative;
  background-color: #ffffff;
  
  
  
  overflow: hidden;                 /* clip pseudo-elements nicely */
}

/* inner dashed stitch sitting just inside the border */
section.excerpt .page::after, .excerpt .page::after{
  content: "";
  position: absolute;
  top: 10px; left: 10px; right: 10px; bottom: 10px;
  border: 2px dashed var(--stitch);
  border-radius: 12px;
  pointer-events: none;
  box-sizing: border-box;
}

/* left hatched decorative strip (subtle, inside the page) */
section.excerpt .page::before, .excerpt .page::before{
  content: "";
  position: absolute;
  top: 16px; bottom: 16px; left: 18px;
  width: 22px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(123,75,59,0.10) 0px,
      rgba(123,75,59,0.10) 6px,
      rgba(123,75,59,0.02) 6px,
      rgba(123,75,59,0.02) 12px
    ),
    linear-gradient(180deg, rgba(255,240,230,0.55), rgba(255,240,230,0.25));
  box-shadow: inset 0 0 0 1px rgba(123,75,59,0.20);
  pointer-events: none;
}

/* Slightly lighter stitches on small screens */
@media (max-width: 480px){
  section.excerpt .page::after, .excerpt .page::after{
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border-width: 1.5px;
    border-color: rgba(255,255,255,0.6);
  }
  section.excerpt .page::before, .excerpt .page::before{
    top: 14px; bottom: 14px; left: 16px; width: 18px;
    box-shadow: inset 0 0 0 1px rgba(123,75,59,0.18);
  }
}



/* =====================
   DIARY THEMES (toggle)
   - Add class on <body>: .theme-diary-moleskine or .theme-diary-travel
   - Default: travel
   ===================== */

/* Base safety: keep page block positioned */
.excerpt .page, section.excerpt .page { position: relative;  overflow: hidden; }

/* ---------- THEME: Moleskine Minimal ---------- */
.theme-diary-moleskine .excerpt .page, 
.theme-diary-moleskine section.excerpt .page{
  background: #FFF8F2;                 /* warm paper */
  
  
}

/* subtle grain (desktop only to save perf on mobile) */
@media (min-width: 1025px){
  .theme-diary-moleskine .excerpt .page, 
  .theme-diary-moleskine section.excerpt .page{
    background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
    background-size: 2px 2px;
    background-blend-mode: multiply;
  }
}

/* elastic strap on the right */
.theme-diary-moleskine .excerpt .page::after,
.theme-diary-moleskine section.excerpt .page::after{
  content:"";
  position:absolute; top: -10%; bottom: -10%; right: 12px; width: 8px;
  background: #1f2937;
  opacity: 0.88;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 0 1px rgba(0,0,0,0.25);
  pointer-events:none;
}

/* small cloth bookmark at the bottom */
.theme-diary-moleskine .excerpt .page::before,
.theme-diary-moleskine section.excerpt .page::before{
  content:"";
  position:absolute; left: 22px; bottom: -12px; width: 10px; height: 24px;
  background: #B51E2B;
  border-radius: 2px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
  pointer-events:none;
}

/* ---------- THEME: Travel Journal (Leather frame + subtle stitch) ---------- */
:root{ --leather: #7B4B3B; }

.theme-diary-travel .excerpt .page, 
.theme-diary-travel section.excerpt .page{
  background: #ffffff;
  
  /* leather edge drawn inside */
  
}

/* left spine (darker strip) */
.theme-diary-travel .excerpt .page::before,
.theme-diary-travel section.excerpt .page::before{
  content:"";
  position: absolute; top: 14px; bottom: 14px; left: 16px; width: 18px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(90,54,43,0.9), rgba(90,54,43,0.75));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), inset 8px 0 14px rgba(0,0,0,0.18);
  pointer-events: none;
}

/* inner stitch, light so it doesn't fight with text */
.theme-diary-travel .excerpt .page::after,
.theme-diary-travel section.excerpt .page::after{
  content:"";
  position:absolute; top: 12px; bottom: 12px; left: 12px; right: 12px;
  border-radius: 12px;
  border: 2px dashed rgba(255,255,255,0.7);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
  pointer-events:none;
}

/* mobile tuning: lighter, tighter */
@media (max-width: 480px){
  .theme-diary-travel .excerpt .page::after{
    top: 10px; bottom: 10px; left: 10px; right: 10px;
    border-width: 1.5px;
    border-color: rgba(255,255,255,0.62);
  }
  .theme-diary-travel .excerpt .page::before{
    top: 12px; bottom:12px; left: 14px; width: 16px;
  }
}



/* leather frame */
  box-shadow: 0 10px 24px rgba(0,0,0,0.10) !important;
  overflow: hidden;
}

/* Kill any previous theme pseudo-elements */
section.excerpt .page::before, .excerpt .page::before { content: none !important; }
.theme-diary-travel .excerpt .page::before,
.theme-diary-moleskine .excerpt .page::before { content: none !important; }
.theme-diary-travel .excerpt .page::after,
.theme-diary-moleskine .excerpt .page::after { content: none !important; }

/* Add a subtle inside dashed stitch */
section.excerpt .page::after, .excerpt .page::after {
  content: "";
  position: absolute;
  inset: 10px;                                     /* inside the leather frame */
  border-radius: 12px;
  border: 2px dashed rgba(255,255,255,0.75);
  pointer-events: none;
  box-sizing: border-box;
}

/* Mobile finetune */
@media (max-width: 480px){
  section.excerpt .page {  }
  section.excerpt .page::after, .excerpt .page::after { inset: 8px; border-width: 1.5px; }
}




:root{ --leather:#7B4B3B; }

/* We render paper on padding-box, and leather+hatched pattern on border-box */
section.excerpt .page, .excerpt .page{
  
  
               /* let 
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,   /* paper */
    linear-gradient(var(--leather), var(--leather)) 
  /* subtle elevation */
  
}

/* Mobile: slightly thinner frame, denser hatch */
@media (max-width: 480px){
  section.excerpt .page, .excerpt .page{
    
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(var(--leather), var(--leather)) 
  }
}



/* === Diary frame: restore existing border, opaque leather brown === */
section.excerpt .page, .excerpt .page {
  
  
  background-clip: padding-box !important; /* keep paper clean, no bleed */
}



/* === Diary cleanup: remove custom left insert + extra stitch (keep original design) === */
section.excerpt .page::before,
.excerpt .page::before{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

section.excerpt .page::after,
.excerpt .page::after{
  /* remove our duplicate stitch; original one (elsewhere) stays */
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}



/* === Hero underlay vertical shift: move 20px down from current === */
:root { --hero-bg-shift: -170px; } /* was -190px */



/* === Hero underlay vertical shift: further 30px down === */
:root { --hero-bg-shift: -140px; }  /* was -170px */



/* === Hero underlay vertical shift: further 15px down === */
:root { --hero-bg-shift: -125px; }  /* was -140px */



/* === Responsive hero focal tuning (no new assets) ===
   Desktop keeps current --hero-bg-shift. On mobile/tablet we adjust X and Y to show more of the scene.
*/
:root {
  --hero-pos-x-desktop: 50%;
  --hero-pos-x-tablet: 46%;
  --hero-pos-x-mobile: 38%;          /* shift view horizontally to reveal more of the side scene */
  --hero-bg-shift-tablet: -110px;    /* slightly lower */
  --hero-bg-shift-mobile:  -90px;    /* even lower on narrow screens */
}

.underlay-hero {
  background-position: var(--hero-pos-x-desktop) var(--hero-bg-shift) !important;
}

/* Tablet (iPad mini etc.) */
@media (min-width: 481px) and (max-width: 834px){
  .underlay-hero {
    background-position: var(--hero-pos-x-tablet) var(--hero-bg-shift-tablet) !important;
  }
}

/* Phones (e.g., iPhone 13 Pro) */
@media (max-width: 480px){
  .underlay-hero {
    background-position: var(--hero-pos-x-mobile) var(--hero-bg-shift-mobile) !important;
  }
}



/* === Responsive focal tuning v2 (iPhone 13 Pro fix attempt) === */
:root {
  --hero-pos-x-desktop: 50%;
  --hero-pos-x-tablet: 52%;
  --hero-pos-x-mobile: 58%;   /* move focus to the right to bring right-side character into frame */
  --hero-bg-shift-tablet: -100px;
  --hero-bg-shift-mobile:  -80px;
}

.underlay-hero { background-position: var(--hero-pos-x-desktop) var(--hero-bg-shift) !important; }

@media (min-width: 481px) and (max-width: 834px){
  .underlay-hero { background-position: var(--hero-pos-x-tablet) var(--hero-bg-shift-tablet) !important; }
}

@media (max-width: 480px){
  .underlay-hero { background-position: var(--hero-pos-x-mobile) var(--hero-bg-shift-mobile) !important; }
}

/* Narrow iPhones (390px logical width e.g., iPhone 13/14 Pro) */
@media (max-width: 400px){
  .underlay-hero { background-position: 60% -78px !important; }
}