/* Sound Weekends — About */
.hd__nav a.is-cur{color:#14161A}

/* ---------- page head ---------- */
.ph{max-width:1410px;margin:0 auto;padding:64px 44px 0}
.ph__h1{font-size:clamp(28px,4vw,52px);font-weight:300;line-height:1.05}

/* ---------- intro ---------- */
.intro{max-width:1410px;margin:0 auto;padding:36px 44px 20px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.intro__txt p{margin-bottom:16px;font-size:14.5px;line-height:1.9;color:#3A3D42}
.intro__lead{font-size:17px!important;line-height:1.75!important;color:#14161A!important}
.intro__lead b{font-weight:500}
.intro__hook{position:relative;margin-top:26px!important;font-size:13px!important;
  letter-spacing:.13em;text-transform:uppercase;color:#14161A!important}
.intro__arrow{display:block;width:34px;height:78px;margin-top:14px;color:#14161A;
  filter:drop-shadow(0 2px 0 rgba(20,22,26,.16));animation:sw-bob 2.4s ease-in-out infinite}
@keyframes sw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.intro__arrow{animation:none}}
.intro__ph{margin:0}
.intro__ph img{width:100%;height:clamp(320px,32vw,440px);object-fit:cover;
  border-radius:250px 16px 230px 16px/16px 230px 16px 250px}

/* ---------- snake ---------- */
.snake{max-width:1410px;margin:0 auto;padding:26px 44px 40px}
.snake__h2{display:inline-block;padding:12px 22px;background:var(--sw-hl,#F4E9E3);
  font-family:Fraunces,"Times New Roman",Georgia,serif;font-optical-sizing:auto;
  font-size:clamp(21px,2.4vw,33px);font-weight:400;letter-spacing:.005em}
.snake__hint{margin:10px 0 0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8A8D93}
.snake__canvas{position:relative;margin-top:26px;aspect-ratio:1200/900}
.snake__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.snake__ln{fill:none;stroke:#14161A;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  opacity:.8}
.snake__ln--b{stroke-width:1.3;opacity:.3;transform:translate(2px,3px) rotate(.15deg)}
.snake__tail{fill:none;stroke:#14161A;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transition:opacity .5s ease 1.9s}
.is-drawn .snake__tail{opacity:.8}
@media(prefers-reduced-motion:reduce){.snake__tail{opacity:.8;transition:none}}

/* step card */
.st{position:absolute;width:12.6%;margin:0;padding:0;border:0;background:transparent;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transform:rotate(var(--rot));transition:transform .28s ease;z-index:2}
.st:hover,.st:focus-visible{transform:rotate(0deg) translateY(-7px) scale(1.05);z-index:6;outline:0}
.st.is-open{transform:rotate(0deg) scale(1.06);z-index:20}
.st__ph{position:relative;display:block;background:#fff;border:1.6px solid #14161A;
  border-radius:250px 16px 230px 16px/16px 230px 16px 250px;overflow:hidden;
  box-shadow:0 0 0 7px #fff;aspect-ratio:4/3}
.st:nth-child(odd) .st__ph{border-radius:16px 240px 16px 250px/230px 16px 250px 16px}
.st__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.st__n{position:absolute;top:-13px;left:-11px;z-index:3;display:flex;align-items:center;
  justify-content:center;width:28px;height:28px;background:#fff;color:#14161A;
  border:1.6px solid #14161A;border-radius:52% 48% 46% 54%/50% 52% 48% 50%;
  font-size:10.5px;letter-spacing:.02em}
.st__cap{display:block;margin-top:12px}
.st__cap em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.18em;color:#8A8D93}
.st__cap b{display:block;margin-top:4px;font-size:11px;font-weight:400;line-height:1.45;
  letter-spacing:.01em;color:#14161A}
.st__txt{position:absolute;left:50%;top:calc(100% + 14px);z-index:30;width:250px;
  transform:translateX(-50%) translateY(-6px);
  padding:16px 18px;background:#14161A;color:rgba(255,255,255,.86);
  font-size:12px;line-height:1.75;border-radius:14px 4px 16px 4px/4px 16px 4px 14px;
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease}
.st__p{display:block}
.st__p + .st__p{margin-top:10px}
.st.is-open .st__txt{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.st:nth-child(n+10) .st__txt{top:auto;bottom:calc(100% + 46px)}

/* the story continues */
.st--next{left:74%;top:77.11%;width:11%;cursor:default;--rot:1.6deg}
.st--next .st__ph{border-style:dashed;border-color:#B7B3AD;border-radius:16px 240px 16px 250px/230px 16px 250px 16px}
.st--next .st__ph img{opacity:.16;filter:grayscale(1)}
.st__dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:#8A8D93;letter-spacing:.1em}
.st--next .st__cap em{color:#B7B3AD}
.st--next .st__cap b{color:#8A8D93}

/* ---------- text blocks ---------- */
.tell{width:calc(100% - 88px);max-width:900px;margin:8px auto 0;padding-top:8px}
.tell__i{padding:34px 0 6px}
.tell__i+.tell__i{border-top:1px solid #E6E4E0}
.tell__i h2{display:inline-block;margin-bottom:22px;padding:9px 15px;background:var(--sw-hl,#F4E9E3);
  font-size:clamp(15px,1.5vw,19px);font-weight:400;
  letter-spacing:.13em;text-transform:uppercase}
.tell__i p{margin-bottom:20px;font-size:15px;line-height:1.95;color:#3A3D42}
.tell__i b{color:#14161A;font-weight:500}
.tell__lnk{border-bottom:1px solid #C9C6C1;padding-bottom:1px;white-space:nowrap;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
.tell__lnk:hover{border-bottom-color:#14161A;color:#14161A}

/* ---------- cta ---------- */
.cta{background:#14161A;color:#fff;padding:76px 44px}
.cta__in{max-width:720px;margin:0 auto;text-align:center}
.cta__in h2{font-size:clamp(22px,2.6vw,34px);font-weight:300}
.cta__in p{margin:18px 0 30px;font-size:14px;line-height:1.85;color:rgba(255,255,255,.72)}
.btn--light{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;
  background:#fff;color:#14161A;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.btn--light:hover{background:#E6E4E0}
.cta__btns{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.cta__btns .lnk{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- adaptive ---------- */
@media(max-width:1240px){
  .ph,.intro,.snake,.cta{padding-left:28px;padding-right:28px}
  .tell{width:calc(100% - 56px)}
  .intro{gap:36px}
  .st__cap b{font-size:10px}
}
@media(max-width:1024px){
  .st__txt{width:210px}
}
@media(max-width:920px){
  .intro{grid-template-columns:1fr;gap:28px}
  .intro__ph img{height:clamp(260px,48vw,380px)}
  .snake__svg,.snake__arw{display:none}
  .snake__canvas{position:static;aspect-ratio:auto;display:grid;
    grid-template-columns:repeat(2,1fr);gap:28px 24px;
    padding-left:16px;border-left:2px dashed #D9D6D1}
  .st{position:static!important;width:auto;transform:none!important;cursor:default}
  .st--next{grid-column:1/-1}
  .st__ph{box-shadow:none;aspect-ratio:4/3}
  .st__txt{position:static;width:auto;transform:none!important;opacity:1;visibility:visible;
    margin-top:8px;padding:0;background:transparent;color:#3A3D42;font-size:12.5px;line-height:1.8}
  .st__cap{margin-top:14px}
  .st__cap b{font-size:14px;margin-top:6px}
  .snake__hint{display:none}

}
@media(max-width:760px){
  .ph{padding-top:40px}
  .intro{padding-top:24px}
  .tell__i p{font-size:14px}
  .snake__canvas{grid-template-columns:1fr;gap:26px}
  .cta{padding:56px 20px}
}

/* ---------- Follow me on Instagram під фото ---------- */
.intro__ph figcaption{text-align:right}
.intro__ig{display:inline-flex;align-items:center;gap:9px;margin-top:14px;color:#3A3D42;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase}
.intro__ig svg{width:18px;height:18px;flex:none}
.intro__ig span{border-bottom:1px solid #C9C6C1;padding-bottom:1px}
.intro__ig:hover{color:#14161A}
.intro__ig:hover span{border-bottom-color:#14161A}