/* ============================================================
   Meilė Tau — Story page (editorial layer)
   Depends on styles.css — MUST be loaded AFTER it.
   Reuses: design tokens, .shell .kicker .lead .btn .script .wave
           .doodle .site-header .footer
   All page-specific classes are prefixed  .st-
   Breakpoints: 1080 / 640  (same as styles.css)
   ============================================================ */

:root{
  --st-rule:rgba(123,47,191,.16);
  --st-paper:#fffdfe;
  --st-card-bd:#f0dcf0;
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--purple);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
  font-size:14px;text-decoration:none;
}
.skip-link:focus{left:0}

/* ============================================================
   MASTHEAD RULE — thin editorial line under the header
   ============================================================ */
.st-masthead{
  border-bottom:1px solid var(--st-rule);
  background:var(--bg-light);
}
.st-masthead-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 0;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.st-masthead-inner span:nth-child(2){color:var(--purple)}

/* ============================================================
   HERO
   ============================================================ */
.st-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:64px 0 92px;background:var(--bg-light);
}
.st-hero::before{
  content:"";position:absolute;z-index:-2;inset:0;
  background:
    radial-gradient(circle at 78% 14%,rgba(255,220,199,.55) 0,transparent 42%),
    radial-gradient(circle at 4% 30%,rgba(233,160,216,.26) 0,transparent 32%),
    radial-gradient(circle at 55% 96%,rgba(178,92,232,.14) 0,transparent 34%);
}
.st-hero-inner{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;
}

.st-hero h1{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:600;
  font-size:clamp(46px,5.6vw,78px);
  line-height:1.02;letter-spacing:-.02em;
  margin:0;
}
.st-hero h1 em{
  font-style:italic;color:var(--purple);
  display:inline-block;
}
.st-hero .lead{margin-top:24px;font-size:17.5px;line-height:1.72}

/* byline — the piece that reads "editorial" */
.st-byline{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
  margin-top:30px;padding-top:20px;
  border-top:1px solid var(--st-rule);
  font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);
}
.st-byline strong{color:var(--ink);font-weight:600}
.st-byline i{
  font-style:normal;width:3px;height:3px;border-radius:50%;
  background:var(--purple-lt);flex:none;
}

.st-hero .script{margin-top:26px;color:#8f49c8;transform:rotate(-2.5deg);display:inline-block}

/* hero figure — edge-free, square fade */
.st-hero-figure{position:relative;margin:0;isolation:isolate}
.st-hero-glow{
  position:absolute;z-index:0;left:6%;top:9%;width:88%;height:82%;
  background-image:var(--hero-img);background-size:cover;background-position:center;
  filter:blur(70px) saturate(1.12);opacity:.34;transform:scale(1.06);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),
                     linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent),
             linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.st-hero-figure > img:not(.st-sprig){
  position:relative;z-index:1;width:min(700px,96%);margin-inline:auto;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.20) 4%,rgba(0,0,0,.70) 10%,#000 17%,#000 83%,rgba(0,0,0,.70) 90%,rgba(0,0,0,.20) 96%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.20) 4%,rgba(0,0,0,.70) 9%,#000 15%,#000 85%,rgba(0,0,0,.70) 91%,rgba(0,0,0,.20) 96%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.20) 4%,rgba(0,0,0,.70) 10%,#000 17%,#000 83%,rgba(0,0,0,.70) 90%,rgba(0,0,0,.20) 96%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.20) 4%,rgba(0,0,0,.70) 9%,#000 15%,#000 85%,rgba(0,0,0,.70) 91%,rgba(0,0,0,.20) 96%,transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.st-hero-figure .st-sprig{
  position:absolute;z-index:2;pointer-events:none;opacity:.78;
  margin:0;max-width:none;
  -webkit-mask-image:none;mask-image:none;
}
.st-hero-figure .st-sprig-a{width:104px;height:auto;left:-18px;bottom:2%;transform:rotate(-8deg)}
.st-hero-figure .st-sprig-b{width:82px;height:auto;right:-12px;top:0;transform:rotate(12deg)}

/* ============================================================
   CHAPTER SHELL — shared editorial layout
   ============================================================ */
.st-chapter{position:relative;isolation:isolate;padding:86px 0;background:var(--bg-light)}
.st-chapter--alt{background:linear-gradient(180deg,#fffafd 0%,#f8edf8 100%)}

.st-chapter-inner{
  display:grid;grid-template-columns:76px minmax(0,1fr) minmax(300px,.72fr);
  gap:0 54px;align-items:start;
}
.st-chapter--flip .st-chapter-inner{
  grid-template-columns:76px minmax(300px,.72fr) minmax(0,1fr);
}

/* big outlined numeral in the left gutter */
.st-num{
  position:sticky;top:112px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:64px;line-height:1;font-weight:600;
  color:transparent;
  -webkit-text-stroke:1px rgba(123,47,191,.34);
  letter-spacing:-.02em;
}
.st-num::after{
  content:"";display:block;width:1px;height:120px;margin:18px auto 0;
  background:linear-gradient(180deg,var(--st-rule),transparent);
}

/* ---------- prose ---------- */
.st-prose{max-width:66ch}
.st-prose h2{
  font-family:"Playfair Display",Georgia,serif;font-weight:600;
  font-size:clamp(32px,3.6vw,48px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 22px;
}
.st-prose h3{
  font-family:"Playfair Display",Georgia,serif;font-weight:600;
  font-size:26px;line-height:1.2;margin:44px 0 14px;color:var(--ink);
}
.st-prose p{margin:0 0 17px;color:var(--ink-soft);font-size:16px;line-height:1.8}
.st-prose strong{color:var(--ink);font-weight:600}
.st-prose > p:first-of-type{font-size:18px;line-height:1.72;color:var(--ink)}

/* drop cap */
.st-dropcap::first-letter{
  float:left;font-family:"Playfair Display",Georgia,serif;
  font-size:66px;line-height:.82;font-weight:600;
  color:var(--purple);margin:6px 12px 0 0;
}

/* ---------- numbered sources ---------- */
.st-sources{margin:34px 0 0;display:grid;gap:2px}
.st-source{
  position:relative;padding:26px 0 26px 60px;
  border-top:1px solid var(--st-rule);
}
.st-source:last-child{border-bottom:1px solid var(--st-rule)}
.st-source::before{
  content:attr(data-n);
  position:absolute;left:0;top:26px;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--purple),var(--purple-lt));
  color:#fff;font-size:13px;font-weight:700;
  box-shadow:0 8px 18px rgba(123,47,184,.24);
}
.st-source h3{
  margin:0 0 10px;font-family:Inter,system-ui,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ink);
}
.st-source p{margin:0 0 13px;font-size:15.5px;line-height:1.78;color:var(--ink-soft)}
.st-source p:last-child{margin-bottom:0}

/* ============================================================
   WRAP CHAPTERS — photos sit inside the text flow, so they stay
   beside the words on every screen size instead of dropping below
   ============================================================ */
.st-chapter--wrap .st-chapter-inner{grid-template-columns:76px minmax(0,1fr)}
/* width chosen so the text column beside a photo stays ~60–70 characters */
.st-prose--wrap{max-width:1040px;display:flow-root}

/* ---------- inset photo (chapter 01) ---------- */
.st-inset{
  float:right;width:36%;max-width:380px;
  margin:6px 0 20px 52px;
}
.st-inset img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),
                     linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),
             linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.st-inset figcaption{
  margin-top:8px;text-align:right;font-size:23px;line-height:1.2;
  color:#8a48bd;transform:rotate(3deg);
}

/* ============================================================
   CARE CARDS — each moment carries its own small photo
   ============================================================ */
.st-prose--care{max-width:860px}
.st-care{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px}
.st-prose .st-care + p{margin-top:28px}
.st-care li{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:24px;align-items:center;
  margin:0;padding:16px 28px 16px 16px;
  background:var(--st-paper);border:1px solid var(--st-card-bd);border-radius:20px;
  box-shadow:0 10px 24px rgba(103,58,116,.06);
  transition:transform .22s ease,box-shadow .22s ease;
}
.st-care li:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(103,58,116,.10)}
.st-care-img{
  display:block;width:88px;height:88px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 4px #fff,0 0 0 5px var(--st-card-bd);
}
.st-prose .st-care li p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.72;max-width:none}
.st-prose .st-care-sign{
  margin:26px 8px 0 0;text-align:right;font-size:26px;line-height:1.2;
  color:#8a48bd;transform:rotate(-2deg);
}

/* ============================================================
   DARK PULL-QUOTE BAND  (mirrors .band on the landing page)
   ============================================================ */
.st-band{
  position:relative;color:#fff;margin-top:-1px;
  background:radial-gradient(120% 90% at 60% 0,#3a2150 0,#241338 48%,var(--bg-darker) 100%);
  padding:104px 0 128px;overflow:hidden;
}
.st-chapter--alt + .st-band .wave-top,
.st-chapter--alt + .st-band .wave-top path{fill:#f8edf8}
.st-band-inner{position:relative;z-index:2;text-align:center;max-width:900px;margin-inline:auto}
.st-band .kicker{color:#e39ef0}
.st-band blockquote{
  margin:0;font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(30px,4vw,52px);font-style:italic;font-weight:500;
  line-height:1.18;text-wrap:balance;
}
.st-band-attr{
  margin:26px 0 0;color:rgba(255,255,255,.62);
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}
.st-band-mark{
  position:absolute;left:10%;top:18px;
  font-family:"Playfair Display",Georgia,serif;font-size:170px;line-height:1;
  color:rgba(255,255,255,.06);pointer-events:none;z-index:1;
}

/* ============================================================
   CALLOUT — "it is never too late"
   ============================================================ */
.st-callout{
  margin:44px 0 0;padding:34px 36px;border-radius:24px;
  background:linear-gradient(120deg,#f3e4fb,var(--lilac-card));
  position:relative;overflow:hidden;
}
.st-callout::after{
  content:"♡";position:absolute;right:-10px;bottom:-34px;
  font-family:Caveat,cursive;font-size:112px;color:rgba(123,47,191,.08);
}
.st-callout h3{margin:0 0 12px;font-size:25px;font-family:"Playfair Display",Georgia,serif;font-weight:600}
.st-callout p{margin:0;color:#5a3f68;font-size:15.5px;line-height:1.78;max-width:52ch}

.st-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:38px}
.st-link{
  text-decoration:none;color:var(--purple);font-weight:600;font-size:15px;
  border-bottom:1px solid rgba(123,47,191,.3);padding-bottom:2px;
}
.st-link:hover{color:var(--purple-lt)}

/* ---------- note + phone composition (chapter 03) ---------- */
.st-stack{
  position:relative;float:left;width:44%;max-width:480px;aspect-ratio:4/5;
  margin:8px 56px 48px 0;
}
.st-stack img{position:absolute;display:block;height:auto}
.st-stack-note{
  left:0;top:0;width:78%;z-index:1;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),
                     linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),
             linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.st-stack-phone{
  right:0;bottom:0;width:56%;z-index:2;border-radius:22px;
  transform:rotate(3deg);
  box-shadow:0 0 0 5px #fff,0 24px 44px rgba(70,30,90,.20);
}
.st-stack figcaption{
  position:absolute;left:2%;bottom:2%;width:40%;z-index:3;
  font-size:23px;line-height:1.2;color:#8a48bd;transform:rotate(-3deg);
}
.st-prose--wrap .st-callout{clear:both}

/* ============================================================
   SIGNATURE
   ============================================================ */
.st-sign{
  padding:0 0 96px;background:linear-gradient(180deg,#f8edf8,#fbf2f8);
  text-align:center;
}
.st-sign-inner{
  max-width:620px;margin-inline:auto;padding-top:8px;
  border-top:1px solid var(--st-rule);
}
.st-sign .script{font-size:38px;color:#8f49c8;margin-top:34px;transform:rotate(-3deg);display:inline-block}
.st-sign p:not(.script){margin:18px 0 0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ============================================================
   FINAL CTA  (mirrors .final on the landing page)
   ============================================================ */
.st-final{
  position:relative;color:#fff;padding:112px 0 96px;overflow:hidden;
  background:var(--bg-darker);
}
.st-final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.st-final::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(23,11,30,.92) 0%,rgba(23,11,30,.52) 55%,rgba(23,11,30,.64) 100%);
}
.st-final .wave{z-index:3}
.st-final-inner{
  position:relative;z-index:4;display:grid;grid-template-columns:1.1fr .9fr;
  gap:34px;align-items:center;
}
.st-final h2{color:#fff;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:clamp(32px,4vw,52px);line-height:1.06}
.st-final p:not(.script){color:rgba(255,255,255,.74);margin:16px 0 28px;max-width:46ch}
.st-final .script{justify-self:end;color:#f0c3e8;transform:rotate(-3deg);font-size:26px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .st-hero{padding:44px 0 72px}
  .st-hero-inner{grid-template-columns:1fr;gap:40px}
  .st-hero-figure{max-width:720px;margin-inline:auto}

  .st-chapter{padding:66px 0}
  .st-chapter-inner,
  .st-chapter--flip .st-chapter-inner,
  .st-chapter--wrap .st-chapter-inner{grid-template-columns:1fr;gap:38px}

  .st-num{position:static;font-size:52px}
  .st-num::after{margin:14px 0 0;height:44px}

  .st-prose{max-width:none}
  .st-inset{width:42%;margin-left:32px}
  .st-stack{width:46%;margin-right:32px}
  .st-final-inner{grid-template-columns:1fr;gap:22px}
  .st-final .script{justify-self:start}
}

@media (max-width:640px){
  .st-masthead-inner{font-size:10.5px;letter-spacing:.1em}
  .st-masthead-inner span:last-child{display:none}

  .st-hero{padding:34px 0 58px}
  .st-hero .lead{font-size:16px}
  .st-hero-figure > img:not(.st-sprig){width:100%}
  .st-hero-figure .st-sprig{display:none}
  .st-byline{gap:8px 12px}

  .st-chapter{padding:54px 0}
  .st-prose h2{font-size:clamp(30px,8vw,40px)}
  .st-prose > p:first-of-type{font-size:16.5px}
  .st-prose p{font-size:15.5px;line-height:1.76}
  .st-dropcap::first-letter{font-size:54px;margin-right:9px}

  .st-source{padding:22px 0 22px 50px}
  .st-source::before{width:30px;height:30px;font-size:12px;top:22px}

  .st-care{gap:12px}
  .st-care li{grid-template-columns:60px minmax(0,1fr);gap:14px;padding:14px 16px 14px 12px;border-radius:18px}
  .st-care-img{width:60px;height:60px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--st-card-bd)}
  .st-care li{align-items:start}
  .st-prose .st-care li p{font-size:15px;line-height:1.66}
  .st-prose .st-care-sign{font-size:23px}

  /* photo stays beside the text: narrower float, softer frame */
  .st-inset{width:46%;margin:4px 0 10px 16px}
  .st-inset img{-webkit-mask-image:none;mask-image:none;border-radius:14px}
  .st-inset figcaption{font-size:18px;margin-top:6px}

  /* note + phone: full width right under the heading, before the text */
  .st-stack{float:none;width:100%;max-width:420px;margin:4px auto 26px}
  .st-stack figcaption{font-size:19px}

  .st-band{padding:76px 0 92px}
  .st-band-mark{font-size:104px;top:14px;left:3%}

  .st-callout{padding:26px 22px;border-radius:20px}

  .st-sign{padding-bottom:70px}
  .st-sign .script{font-size:31px}
  .st-final{padding:84px 0 72px}

}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
.st-hero .hero-actions{margin:26px 0 22px}
.st-hero .proof{margin-bottom:4px}
.st-hero .script{margin-top:22px}
.st-hero-figure .st-sprig{max-width:none}
.st-hero .faces img{margin-left:-9px}
.st-hero .faces img:first-child{margin-left:0}
/* Labai siauri ekranai: nuotrauka virš teksto, kad didžioji raidė ir tekstas neliktų suspausti */
@media (max-width:380px){
  .st-inset{float:none;width:72%;margin:4px auto 22px}
  .st-inset figcaption{text-align:center}
}