/* ── Page Header  1160×300 (Figma 54:94) ──────────────────── */
.s-pagehead{position:relative;min-height:30rem;padding:4.4rem 4.8rem 5.6rem;overflow:hidden}
.s-pagehead__media{position:absolute;top:0;left:50rem;width:66rem;height:100%}
.s-pagehead__img{width:100%;height:100%;object-fit:cover}
/* Розтушовка: ліворуч суцільний фон сторінки, праворуч прозоро. */
.s-pagehead__fade{position:absolute;top:0;left:0;width:33rem;height:100%;
  background:linear-gradient(90deg, var(--c-bg-page) 0%, rgba(251,246,240,.45) 62%, rgba(251,246,240,0) 100%)}
.s-pagehead__text{position:relative;width:54rem}
.s-pagehead__crumbs{display:flex;align-items:center;gap:0.9rem;
  font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted);flex-wrap:wrap}
.s-pagehead__crumbs a{color:inherit}
.s-pagehead__crumbs a:hover{color:var(--c-brand-primary)}
.s-pagehead__sep{color:var(--c-text-muted)}
.s-pagehead__row{display:flex;align-items:center;gap:1.4rem;margin-top:2.4rem}
.s-pagehead__icon{width:3rem;height:3rem;color:var(--c-brand-primary);flex:0 0 auto;display:grid;place-items:center}
.s-pagehead__icon svg{width:3rem;height:3rem}
.s-pagehead__title{font:700 4.4rem/5.2rem var(--f-head);letter-spacing:-0.044rem;color:var(--c-text-primary)}
.s-pagehead__heart{width:3rem;height:3rem;color:var(--c-brand-rose);flex:0 0 auto;display:grid;place-items:center}
.s-pagehead__heart svg{width:2.1rem;height:2rem}
.s-pagehead__desc{margin-top:1.6rem;font:400 1.8rem/3rem var(--f-body);color:var(--c-text-secondary)}
.s-pagehead__desc p{margin:0}

@media (max-width:767px){
  /* Мобільна шапка: ілюстрація зверху 390×190, текст під нею. */
  .s-pagehead{min-height:0;padding:0;display:flex;flex-direction:column}
  .s-pagehead__media{position:relative;left:0;width:100%;height:19rem}
  .s-pagehead__fade{top:auto;bottom:0;left:0;width:100%;height:9rem;
    background:linear-gradient(180deg, rgba(251,246,240,0) 0%, var(--c-bg-page) 100%)}
  .s-pagehead__text{width:100%;padding:0.4rem 2rem 0.6rem}
  .s-pagehead__crumbs{font:500 1.2rem/1.7rem var(--f-body)}
  .s-pagehead__row{gap:1.1rem;margin-top:1.2rem}
  .s-pagehead__icon,.s-pagehead__icon svg{width:2.4rem;height:2.4rem}
  .s-pagehead__title{font:700 3.2rem/4rem var(--f-head);letter-spacing:-0.016rem;overflow-wrap:break-word;hyphens:auto}
  .s-pagehead__heart{display:none}
  .s-pagehead__desc{margin-top:1.2rem;font:400 1.6rem/2.6rem var(--f-body)}
}

/* Довільний текст зі штатного редактора WordPress. */
.s-prose{max-width:68rem;font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-prose > * + *{margin-top:1.6rem}
.s-prose h2{font:600 2.6rem/3.4rem var(--f-head);color:var(--c-text-primary);margin-top:3.2rem}
.s-prose h3{font:600 2rem/2.8rem var(--f-head);color:var(--c-text-primary);margin-top:2.4rem}
.s-prose ul{list-style:disc;padding-left:2.2rem}
.s-prose li + li{margin-top:0.6rem}
.s-prose a{color:var(--c-brand-primary);text-decoration:underline}

/* ── Про автора (Figma 71:3083) ───────────────────────────── */
.l-content--about{gap:6rem;padding:1.6rem 4.8rem 8.8rem}

/* Знайомство 1064×456 */
.s-intro{display:flex;background:var(--c-bg-surface);border-radius:2.2rem;overflow:hidden;box-shadow:var(--e-card)}
.s-intro__img{width:40rem;height:45.6rem;object-fit:cover;flex:0 0 auto}
.s-intro__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1.6rem;padding:4.2rem 4.4rem 4rem}
.s-intro__hello{font:400 3.4rem/4.2rem var(--f-script);color:var(--c-brand-primary)}
.s-intro__body{display:flex;flex-direction:column;gap:1.6rem;font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-intro__body p{margin:0}
.s-intro__sign{font:400 2.4rem/3.4rem var(--f-script);color:var(--c-text-primary)}

/* Цифри 1064×150 */
.s-stats{display:flex;gap:2.4rem}
.s-stats__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:0.8rem;
  padding:2.4rem 2.8rem;background:var(--c-bg-cream);border-radius:1.8rem}
.s-stats__icon{width:2.4rem;height:2.4rem;color:var(--c-brand-primary)}
.s-stats__icon svg{width:2.4rem;height:2.4rem}
.s-stats__num{font:600 3.4rem/4rem var(--f-head);color:var(--c-text-primary)}
.s-stats__cap{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}

/* Мій шлях 1064×250 */
.s-path,.s-inspire{display:flex;flex-direction:column;gap:3.2rem}
.s-title-row--tight{height:3.4rem}
.s-title-row--tight .s-title-row__h{flex:0 0 auto}
.s-path__grid{display:flex;gap:2.4rem;align-items:stretch}
.s-path__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1rem;
  padding:2.4rem 2.4rem 2.4rem 2.6rem;background:var(--c-bg-surface);border-radius:1.8rem}
.s-path__year{font:700 1.8rem/2.4rem var(--f-body);color:var(--c-brand-primary)}
.s-path__title{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-path__text{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}

/* Що мене надихає 1064×238 */
.s-inspire__grid{display:flex;gap:2.4rem;align-items:stretch}
.s-inspire__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1.2rem;
  padding:2.6rem 2.8rem;background:var(--c-brand-primary-soft);border-radius:2rem}
.s-inspire__icon{width:2.6rem;height:2.6rem;color:var(--c-brand-primary)}
.s-inspire__icon svg{width:2.6rem;height:2.6rem}
.s-inspire__title{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-inspire__text{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}

/* Банер «Замовити» 1064×168 */
.s-cta-banner{display:flex;align-items:center;gap:3.2rem;padding:3.6rem 4.4rem;
  background:var(--c-bg-cream);border-radius:2.2rem}
.s-cta-banner__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1rem}
.s-cta-banner__overline{font:600 1.2rem/1.6rem var(--f-body);letter-spacing:0.096rem;text-transform:uppercase;color:var(--c-brand-primary)}
.s-cta-banner__title{font:600 2.6rem/3.4rem var(--f-head);color:var(--c-text-primary)}
.s-cta-banner__desc{font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-cta-banner__actions{display:flex;gap:1.4rem;flex:0 0 auto}

@media (max-width:767px){
  .l-content.l-content--about{gap:4rem;padding:1.6rem 2rem 5.6rem}
  .s-intro{flex-direction:column;border-radius:2rem}
  .s-intro__img{width:100%;height:28rem}
  .s-intro__text{padding:2.4rem 2.2rem 2.2rem;gap:1.2rem}
  .s-intro__hello{font:400 2.6rem/3.4rem var(--f-script)}
  .s-intro__body{font:400 1.5rem/2.4rem var(--f-body);gap:1.2rem}
  .s-stats{flex-wrap:wrap}
  .s-stats__item{flex:1 1 calc(50% - 1.2rem);padding:1.8rem 2rem}
  .s-stats__num{font:600 2.8rem/3.4rem var(--f-head)}
  .s-path__grid,.s-inspire__grid{flex-direction:column}
  .s-cta-banner{flex-direction:column;align-items:flex-start;padding:2.6rem 2.2rem;gap:2rem}
  .s-cta-banner__actions{flex-direction:column;width:100%}
  .s-cta-banner__actions .c-btn{width:100%}
}

/* ── Каталог творів ───────────────────────────────────────── */
.l-content--catalogue{gap:3rem;padding:0.8rem 4.8rem 8.8rem}

/* Фільтри 1064×38 */
.s-filters{display:flex;align-items:center;gap:1rem;height:3.8rem}
.c-chip{display:inline-flex;align-items:center;height:3.8rem;padding:0 2rem;border-radius:var(--r-full);
  background:var(--c-bg-surface);border:1px solid var(--c-border-strong);
  font:600 1.3rem/1.8rem var(--f-body);color:var(--c-text-secondary);white-space:nowrap}
.c-chip:hover{border-color:var(--c-brand-primary);color:var(--c-brand-primary);text-decoration:none}
.c-chip.is-active{background:var(--c-brand-primary);border-color:var(--c-brand-primary);color:var(--c-text-inverse)}
.s-filters__spacer{flex:1 1 auto}
.c-sort{position:relative;display:inline-flex;align-items:center;gap:0.8rem;width:16.8rem;height:3.8rem;padding:0 1.4rem 0 1.6rem;
  border-radius:var(--r-full);background:var(--c-bg-surface);border:1px solid var(--c-border-strong)}
.c-sort__select{appearance:none;width:100%;border:0;background:none;outline:0;padding-right:2.4rem;
  font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary);cursor:pointer}
.c-sort__chevron{position:absolute;right:1.4rem;width:1.6rem;height:1.6rem;color:var(--c-text-secondary);pointer-events:none}
.c-sort__chevron svg{width:1.6rem;height:1.6rem}

/* Сітка: 4 картки в ряд по 248 з кроком 24 */
.s-grid{display:flex;flex-wrap:wrap;gap:2.4rem;align-items:stretch}
.s-grid > *{flex:0 0 24.8rem;width:24.8rem}
.s-grid__empty{font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-muted)}

/* Друга мета в картці: висота контенту 186 замість 164 */
.c-card-media--two .c-card-media__body{min-height:18.6rem}
.c-card-media__metas{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* Пагінація 1064×40 */
.c-pager{display:flex;align-items:center;gap:0.8rem;height:4rem}
.c-pager__count{flex:1 1 auto;font:500 1.4rem/2rem var(--f-body);color:var(--c-text-muted)}
.c-pager__links{display:flex;align-items:center;gap:0.8rem}
.c-pager__links .page-numbers{display:grid;place-items:center;min-width:4rem;height:4rem;padding:0 0.6rem;
  border-radius:1.2rem;background:var(--c-bg-surface);border:1px solid var(--c-border-subtle);
  font:500 1.5rem/2rem var(--f-body);color:var(--c-text-primary)}
.c-pager__links .page-numbers:hover{border-color:var(--c-brand-primary);color:var(--c-brand-primary);text-decoration:none}
.c-pager__links .page-numbers.current{background:var(--c-brand-primary);border-color:var(--c-brand-primary);
  color:var(--c-text-inverse);font-weight:600}
.c-pager__links .page-numbers.dots{background:none;border:0;color:var(--c-text-muted)}

/* Інші формати 1064×204 */
.s-other{display:flex;gap:2.4rem;padding-top:3rem;align-items:stretch}
.s-other__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1rem;
  padding:2.2rem 2.4rem;border-radius:1.8rem}
.s-other__head{display:flex;align-items:center;gap:1.1rem}
.s-other__icon{width:2.2rem;height:2.2rem;flex:0 0 auto}
.s-other__icon svg{width:2.2rem;height:2.2rem}
.s-other__title{font:600 2rem/2.8rem var(--f-head);color:var(--c-text-primary)}
.s-other__desc{flex:1 1 auto;font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.s-other__cta{display:inline-flex;align-items:center;gap:0.7rem;height:3.8rem;
  font:600 1.3rem/1.8rem var(--f-body);align-self:flex-start}
.s-other__cta svg{width:1.8rem;height:1.8rem}
.s-other__item--pisnya{background:#FBF2E3}
.s-other__item--pisnya .s-other__icon,.s-other__item--pisnya .s-other__cta{color:var(--c-cat-pisnya)}
.s-other__item--kazka{background:#EDF2F8}
.s-other__item--kazka .s-other__icon,.s-other__item--kazka .s-other__cta{color:var(--c-cat-kazka)}
.s-other__item--virsh{background:#EFF4EC}
.s-other__item--virsh .s-other__icon,.s-other__item--virsh .s-other__cta{color:var(--c-cat-virsh)}
.s-other__item--knyga{background:var(--c-brand-primary-soft)}
.s-other__item--knyga .s-other__icon,.s-other__item--knyga .s-other__cta{color:var(--c-cat-knyga)}
.s-other__item--animaciya{background:#F2EEF8}
.s-other__item--animaciya .s-other__icon,.s-other__item--animaciya .s-other__cta{color:var(--c-cat-animaciya)}
.s-other__item--video{background:#FAEFEC}
.s-other__item--video .s-other__icon,.s-other__item--video .s-other__cta{color:var(--c-cat-video)}

@media (max-width:767px){
  .l-content.l-content--catalogue{gap:2rem;padding:0.8rem 0 5.6rem}
  .s-filters{padding:0 2rem;overflow-x:auto;scrollbar-width:none;height:auto}
  .s-filters::-webkit-scrollbar{display:none}
  .s-filters__spacer{display:none}
  .c-sort{flex:0 0 auto}
  .s-grid{padding:0 2rem;gap:1.4rem}
  .s-grid > *{flex:0 0 calc(50% - 0.7rem);width:calc(50% - 0.7rem)}
  .c-pager{flex-direction:column;align-items:center;gap:1.2rem;height:auto;padding:0 2rem}
  .s-other{flex-direction:column;padding:1rem 2rem 0}
}

/* Вертикальні кліпи 9:16: обкладинка 248×441 (Figma «Card / Медіа 9:16»). */
.s-grid--vertical .c-card-media__media{height:44.1rem}
/* Картка переходу тримає висоту макета навіть із коротким описом. */
.s-other__item{min-height:17.4rem}

/* У вертикальних картках висоти вистачає на дві строки назви. */
.s-grid--vertical .c-card-media__title{-webkit-line-clamp:2}

/* ── Шапка твору 1160×366 (Figma 61:104) ──────────────────── */
.s-workhead{position:relative;min-height:36.6rem;padding:3.4rem 4.8rem 6rem;overflow:hidden}
.s-workhead__media{position:absolute;top:0;left:48rem;width:68rem;height:100%}
.s-workhead__img{width:100%;height:100%;object-fit:cover}
.s-workhead__fade{position:absolute;top:0;left:0;width:32rem;height:100%;
  background:linear-gradient(90deg, var(--c-bg-page) 0%, rgba(251,246,240,.45) 60%, rgba(251,246,240,0) 100%)}
.s-workhead__text{position:relative;width:52rem;display:flex;flex-direction:column;align-items:flex-start}
.s-workhead__back{display:inline-flex;align-items:center;gap:0.8rem;margin-top:1.4rem;
  font:600 1.4rem/2rem var(--f-body);color:var(--c-brand-primary)}
.s-workhead__back-arrow{width:1.7rem;height:1.7rem;display:grid;place-items:center}
.s-workhead__back-arrow svg{width:1.7rem;height:1.7rem}
.s-workhead__text > .c-badge{margin-top:1.8rem}
.s-workhead__row{display:flex;align-items:flex-end;gap:1.4rem;margin-top:1.4rem}
.s-workhead__title{font:700 5.6rem/6.4rem var(--f-head);letter-spacing:-0.084rem;color:var(--c-text-primary)}
.s-workhead__heart{width:2.8rem;height:2.8rem;color:var(--c-brand-rose);flex:0 0 auto;display:grid;place-items:center}
.s-workhead__heart svg{width:2rem;height:1.9rem}
.s-workhead__meta{display:flex;align-items:center;gap:2rem;margin-top:1.8rem;flex-wrap:wrap}

/* ── Текст твору 1064×589 ─────────────────────────────────── */
.l-content--work{gap:3.2rem;padding:0.8rem 4.8rem 8.8rem}
.s-worktext{display:flex;flex-direction:column;background:var(--c-bg-surface);border-radius:2rem;padding:4.4rem 4.8rem 2.8rem}
.s-worktext__clip{position:relative;max-height:42.4rem;overflow:hidden}
.s-worktext.is-open .s-worktext__clip{max-height:none}
.s-worktext__cols{display:flex;gap:6.4rem}
.s-worktext__col{flex:1 1 0;min-width:0;font:italic 400 1.7rem/3.2rem var(--f-head);color:var(--c-text-primary)}
.s-worktext__col p{margin:0}
/* Вірш: порожній рядок між строфами — 32 px, як у макеті. */
.s-worktext:not(.s-worktext--lyrics) .s-worktext__col p + p{margin-top:3.2rem}
/* Слова пісні. Figma: «Сторінка пісні» → «Слова пісні»: блоки з кроком 20,
   мітка (Manrope SemiBold 12/16, +6 %, #D24B72) і під нею строфа через 8.
   Мітка — абзац, що складається лише з жирного тексту. */
.s-worktext--lyrics .s-worktext__col p + p{margin-top:2rem}
.s-worktext--lyrics .s-worktext__col p:has(> strong:only-child) + p{margin-top:0.8rem}
.s-worktext--lyrics .s-worktext__col p > strong:only-child{display:block;font:600 1.2rem/1.6rem var(--f-body);
  font-style:normal;letter-spacing:0.072rem;text-transform:uppercase;color:var(--c-brand-primary)}
.s-note__desc p{margin:0}
.s-note__desc p + p{margin-top:1rem}
.s-worktext__fade{position:absolute;left:0;right:0;bottom:0;height:12rem;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--c-bg-surface) 100%)}
.s-worktext.is-open .s-worktext__fade,.s-worktext.is-short .s-worktext__fade{display:none}
.s-worktext.is-short .s-worktext__more{display:none}
.s-worktext.is-short .s-worktext__clip{max-height:none}
.s-worktext__more{display:flex;align-items:center;justify-content:center;gap:0.8rem;padding:0.4rem 0 2rem;
  font:600 1.4rem/2rem var(--f-body);color:var(--c-brand-primary)}
.s-worktext__more svg{width:1.7rem;height:1.7rem;transition:transform .2s ease}
.s-worktext.is-open .s-worktext__more svg{transform:rotate(180deg)}
.s-worktext__divider{height:0.1rem;background:var(--c-border-subtle);border:0;margin:0}
.s-worktext__actions{display:flex;align-items:center;justify-content:space-between;padding:2rem 0 0.2rem}
.s-worktext__action{display:inline-flex;align-items:center;gap:1rem;
  font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-worktext__action svg{width:1.9rem;height:1.9rem}
.s-worktext__action:hover{color:var(--c-brand-primary)}

/* ── Про твір / Збірка ────────────────────────────────────── */
.s-note{display:flex;align-items:center;gap:2.8rem;padding:3rem 3.2rem 3rem 4rem;
  background:var(--c-bg-surface);border-radius:2rem}
.s-note__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start}
.s-note__title{font:600 2rem/2.8rem var(--f-head);color:var(--c-text-primary)}
.s-note__desc{font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-note__img{flex:0 0 auto;width:23rem;height:12rem;border-radius:1.4rem;overflow:hidden}
.s-note__cover{flex:0 0 auto;width:14rem;height:15.5rem;border-radius:1.2rem;overflow:hidden}
.s-note__pic{width:100%;height:100%;object-fit:cover}

/* ── Пов'язані твори ──────────────────────────────────────── */
.s-relate{display:flex;flex-direction:column;gap:2.4rem}
.s-relate__grid{display:flex;gap:2.4rem}
.s-relate__wide{flex:1 1 0;min-width:0;display:flex;background:var(--c-bg-surface);
  border-radius:1.8rem;overflow:hidden;box-shadow:var(--e-card)}
.s-relate__wide:hover{box-shadow:var(--e-card-hover);text-decoration:none}
.s-relate__wide-img{flex:0 0 21rem;width:21rem}
.s-relate__img{width:100%;height:100%;object-fit:cover}
.s-relate__wide-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0.9rem;padding:2rem}
.s-relate__wide-title{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-relate__wide-desc{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.s-relate__list{display:flex;gap:2rem}
.s-relate__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1.4rem}
.s-relate__name{font:600 1.6rem/2.2rem var(--f-body);color:var(--c-text-primary)}
.s-relate__item:hover .s-relate__name{color:var(--c-brand-primary)}

/* ── Підпис автора 1064×148 ───────────────────────────────── */
.s-sign{display:flex;flex-direction:column;align-items:center;gap:0.6rem;padding:3.4rem 4.4rem;
  background:var(--c-bg-cream);border-radius:2.2rem;text-align:center}
.s-sign__quote{font:400 3rem/4.4rem var(--f-script);color:var(--c-text-primary)}
.s-sign__author{font:400 2.2rem/3rem var(--f-script);color:var(--c-brand-primary)}

@media (max-width:767px){
  .s-workhead{min-height:0;padding:0;display:flex;flex-direction:column}
  .s-workhead__media{position:relative;left:0;width:100%;height:19rem}
  .s-workhead__fade{top:auto;bottom:0;left:0;width:100%;height:9rem;
    background:linear-gradient(180deg, rgba(251,246,240,0) 0%, var(--c-bg-page) 100%)}
  .s-workhead__text{width:100%;padding:0.4rem 2rem 0.6rem}
  .s-workhead__title{font:700 3.2rem/4rem var(--f-head);letter-spacing:-0.016rem}
  .s-workhead__heart{display:none}
  .l-content.l-content--work{gap:2rem;padding:0.8rem 2rem 5.6rem}
  .s-worktext{padding:2.4rem 2.2rem 1.8rem;border-radius:1.8rem}
  .s-worktext__cols{flex-direction:column;gap:0}
  .s-worktext--lyrics .s-worktext__cols{gap:2rem}
  .s-worktext__actions{flex-wrap:wrap;gap:1.4rem;justify-content:flex-start}
  .s-note{flex-direction:column;align-items:flex-start;padding:2.4rem 2.2rem;gap:1.8rem}
  .s-note__img,.s-note__cover{width:100%;height:18rem}
  .s-relate__grid,.s-relate__list{flex-direction:column}
  .s-relate__wide{flex-direction:column}
  .s-relate__wide-img{flex:0 0 auto;width:100%;height:18rem}
  .s-sign{padding:2.6rem 2.2rem}
  .s-sign__quote{font:400 2.2rem/3.4rem var(--f-script)}
  .s-sign__author{font:400 1.8rem/2.6rem var(--f-script)}
}

/* ── Сторінка пісні: плеєр і книга поруч ──────────────────── */
.s-media-row{display:flex;gap:2.8rem;align-items:stretch}
.s-playercard,.s-bookcard{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2rem;
  padding:2.4rem 2.4rem 2.2rem;background:var(--c-bg-surface);border-radius:2rem;box-shadow:var(--e-card)}
.s-playercard .c-player{padding:0;box-shadow:none;border-radius:0;gap:2rem}
.s-bookcard{align-items:center;text-align:center;gap:1.6rem}
.s-bookcard .s-title-row{align-self:stretch}
.s-bookcard__cover{width:18.6rem;height:26.2rem;object-fit:cover;border-radius:1.2rem}
.s-bookcard__desc{font:400 1.5rem/2.4rem var(--f-body);color:var(--c-text-secondary)}
.c-player__buy-row{display:flex;align-items:center;gap:1.6rem}
.c-player__buy-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.c-player__buy-title{font:400 1.5rem/2.2rem var(--f-body);color:var(--c-text-primary)}
.c-player__buy-note{font:400 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}
.c-player__price{font:700 2rem/2.6rem var(--f-body);color:var(--c-brand-primary);flex:0 0 auto}

/* ── Сторінка анімації / кліпу ────────────────────────────── */
.s-video-row{display:flex;flex-direction:column;gap:2.8rem}
.s-video-row--vertical{flex-direction:row;align-items:flex-start}
.s-video-row--vertical .c-video{flex:0 0 36rem;width:36rem}
.s-video-row__side{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2.8rem}
.c-video{position:relative;border-radius:2rem;overflow:hidden;background:var(--c-bg-scrim)}
.c-video__poster{position:relative}
.c-video__img{width:100%;height:59.8rem;object-fit:cover}
.c-video--vertical .c-video__img{height:64rem}
.c-video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:8.4rem;height:8.4rem;border-radius:var(--r-full);background:var(--c-bg-surface);
  color:var(--c-brand-primary);display:grid;place-items:center;box-shadow:var(--e-float)}
.c-video__play svg{width:3rem;height:3rem}
.c-video__bar{position:absolute;left:2.4rem;right:2.4rem;bottom:2.4rem;display:flex;align-items:center;gap:1.6rem;
  padding:0 1.6rem;height:5.6rem;border-radius:1.4rem;background:rgba(22,40,58,.55);color:#fff}
.c-video__time{font:500 1.3rem/1.8rem var(--f-body);color:#fff}
.c-video__progress{flex:1 1 auto;height:0.5rem;border-radius:var(--r-full);background:rgba(255,255,255,.35)}
.c-video__progress-done{display:block;width:22%;height:100%;border-radius:var(--r-full);background:var(--c-brand-primary)}
.c-video__icon{width:1.9rem;height:1.9rem;color:#fff}
.c-video__frame iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block}
.c-video--vertical .c-video__frame iframe{aspect-ratio:9/16}
.s-note--plain{box-shadow:none}
.s-note__credit{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-muted)}

@media (max-width:767px){
  .s-media-row{flex-direction:column;gap:1.2rem}
  .s-video-row--vertical{flex-direction:column}
  .s-video-row--vertical .c-video{flex:0 0 auto;width:100%}
  .c-video__img{height:22rem}
  .c-video--vertical .c-video__img{height:46rem}
  .c-video__bar{left:1.2rem;right:1.2rem;bottom:1.2rem;height:4.4rem;gap:1rem;padding:0 1.2rem}
  .c-player__buy-row{flex-wrap:wrap}
}

/* ══ Сторінка розділу (хаб) ══════════════════════════════════
   Figma: COMPONENT «Card / Підрозділ» 196×322 (Layout / Внутрішні
   сторінки). П'ять карток по 196 з проміжком 21 = рівно 1064. */
/* Figma 55:914: контент зверху 16, між блоками 72, знизу 88; шапка розділу 320. */
.s-pagehead--hub{min-height:32rem}
.l-content--hub{gap:7.2rem;padding:1.6rem 4.8rem 8.8rem}

.s-subs{display:flex;gap:2.1rem}
.c-card-sub{position:relative;flex:0 0 19.6rem;width:19.6rem;height:32.2rem;display:flex;flex-direction:column;
  background:var(--c-bg-surface);border-radius:1.6rem;overflow:hidden;box-shadow:var(--e-card);
  color:inherit;text-decoration:none;transition:box-shadow .2s ease, transform .2s ease}
.c-card-sub:hover{box-shadow:var(--e-card-hover);transform:translateY(-0.2rem);text-decoration:none}
.c-card-sub:focus-visible{outline:0.2rem solid var(--c-border-focus);outline-offset:0.3rem}
.c-card-sub__media{flex:0 0 15rem;height:15rem;overflow:hidden;background:var(--c-bg-cream)}
/* Ілюстрації взяті з шапок сторінок: там лівий край вицвітає в тло,
   тому кадруємо ближче до правого краю, де сюжет. */
.c-card-sub__img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
/* Кругла іконка 44 — центр на нижньому краї ілюстрації (y 128 + 22 = 150). */
.c-card-sub__icon{position:absolute;z-index:1;left:1.6rem;top:12.8rem;width:4.4rem;height:4.4rem;
  display:grid;place-items:center;border-radius:var(--r-full);background:var(--c-bg-surface);
  box-shadow:var(--e-float);color:var(--c-brand-primary)}
.c-card-sub__icon svg{width:2.2rem;height:2.2rem}
.c-card-sub__body{flex:1 1 auto;display:flex;flex-direction:column;gap:0.7rem;padding:3.2rem 1.6rem 1.8rem;
  background:var(--c-brand-primary-soft)}
.c-card-sub__title{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.c-card-sub__desc{min-height:4.4rem;font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.c-card-sub__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:0.7rem;height:3.8rem;
  font:600 1.3rem/1.8rem var(--f-body);color:var(--c-brand-primary)}
.c-card-sub__cta svg{width:1.8rem;height:1.8rem}

/* ── Вигляд «Плитки» (Figma 67:2307 «Доросла творчість») ─────────
   Контент: зверху 16, між блоками 68 (254−186) … 68, знизу 88. */
.l-content--hub-rows{gap:6.8rem}
.s-subs--rows{gap:2.4rem}
.c-card-sub--row{flex:1 1 0;width:auto;height:17rem;flex-direction:row;align-items:center;gap:1.2rem;padding:2.2rem 0 2.2rem 2.4rem;border-radius:1.8rem}
.c-card-sub--row .c-card-sub__body{flex:1 1 auto;min-width:0;gap:0.8rem;padding:0;background:none}
.c-card-sub__head{display:flex;align-items:center;gap:1rem;height:2.8rem}
.c-card-sub__glyph{display:grid;place-items:center;width:2rem;height:2rem;color:var(--c-brand-primary);flex:0 0 auto}
.c-card-sub__glyph svg{width:2rem;height:2rem}
.c-card-sub--row .c-card-sub__title{font:600 2rem/2.8rem var(--f-head)}
.c-card-sub--row .c-card-sub__media{flex:0 0 11.2rem;height:10.8rem;background:none}

/* «Останні твори»: вузькі картки Card / Медіа 196×380. */
.s-latest--narrow{gap:2.8rem}
.s-latest--narrow .s-latest__grid{gap:2.1rem}
.c-card-media--narrow{flex:0 0 19.6rem;width:19.6rem;height:38rem}
.c-card-media--narrow .c-card-media__body{flex:1 1 auto;justify-content:space-between;padding:1.8rem 1.8rem 1.6rem}
.c-card-media--narrow .c-card-media__title{-webkit-line-clamp:2}
.c-card-media--narrow .c-card-media__desc{-webkit-line-clamp:3;min-height:0}
.c-card-media--narrow .c-card-media__cta svg{display:none}

/* «Твори за темами»: плитки 248×140 з фото й затемненням знизу. */
.s-topics{display:flex;flex-direction:column;gap:2.8rem}
.s-topics__grid{display:flex;gap:2.4rem}
.c-topic{position:relative;flex:1 1 0;min-width:0;height:14rem;border-radius:1.6rem;overflow:hidden;background:var(--c-bg-scrim);color:#fff;text-decoration:none}
.c-topic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(13,20,31,.05) 0%, rgba(13,20,31,.78) 100%)}
.c-topic__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
a.c-topic:hover .c-topic__img{transform:scale(1.04)}
.c-topic__text{position:absolute;z-index:1;left:1.8rem;right:1.8rem;bottom:1.6rem;display:flex;flex-direction:column;gap:0.3rem}
.c-topic__title{font:600 1.8rem/2.6rem var(--f-head);color:#fff}
.c-topic__count{font:500 1.3rem/1.8rem var(--f-body);color:rgba(255,255,255,.8)}

@media (max-width:767px){
  /* Mobile 390: картки — горизонтальна карусель зі свайпом, як на головній. */
  .s-pagehead--hub{min-height:0}
  .l-content.l-content--hub{gap:5.2rem;padding:0.8rem 0 5.6rem}
  .s-subs{gap:1.4rem;padding:0 2rem;scroll-padding-left:2rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .s-subs::-webkit-scrollbar{display:none}
  .c-card-sub{scroll-snap-align:start}
  .c-card-sub:hover{transform:none}
  .s-subs--rows{flex-direction:column;gap:1.4rem;overflow:visible;scroll-snap-type:none}
  .c-card-sub--row{flex:0 0 auto;width:100%;height:auto;min-height:15rem;padding:1.8rem 0 1.8rem 2rem}
  .l-content.l-content--hub-rows{gap:5.2rem}
  .s-latest--narrow{gap:2rem}
  .s-topics{gap:2rem}
  .s-topics .s-title-row{padding:0 2rem}
  .s-topics__grid{gap:1.4rem;padding:0 2rem;scroll-padding-left:2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .s-topics__grid::-webkit-scrollbar{display:none}
  .c-topic{flex:0 0 24.8rem;scroll-snap-align:start}
}

/* ══ Сторінка книги ══════════════════════════════════════════
   Figma: «Сторінка книги — Desktop 1440» (88:7004). Контент: зверху 30,
   між секціями 40, знизу 88. */
.l-content--book{gap:4rem;padding:3rem 4.8rem 8.8rem}

.s-booknav{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.s-booknav__crumbs{align-self:stretch;font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}
.s-booknav__crumbs a{color:inherit}
.s-booknav__crumbs a:hover{color:var(--c-brand-primary)}
.s-booknav__sep{margin:0 1rem}
.s-booknav__back{display:inline-flex;align-items:center;gap:0.8rem;font:600 1.4rem/2rem var(--f-body);color:var(--c-brand-primary)}
.s-booknav__arrow{display:grid;place-items:center;width:1.7rem;height:1.7rem;transform:scaleX(-1)}
.s-booknav__arrow svg{width:1.7rem;height:1.7rem}

/* «Книга» 1064×410: обкладинка 300×400 r18, проміжок 44, опис 720. */
.s-book{display:flex;gap:4.4rem;align-items:flex-start}
.s-book__cover{flex:0 0 30rem;height:40rem;border-radius:1.8rem;overflow:hidden;background:var(--c-bg-cream)}
.s-book__img{display:block;width:100%;height:100%;object-fit:cover}
.s-book__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.s-book__title{margin-top:1.6rem;font:700 5.6rem/6.4rem var(--f-head);letter-spacing:-0.084rem;color:var(--c-text-primary)}
.s-book__lead{margin-top:1.4rem;font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-book__meta{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem 2.2rem;margin:2rem 0 0;padding:0;list-style:none}
.s-book__buy{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;margin-top:2.6rem}
.s-book__price{font:700 3rem/3.8rem var(--f-body);color:var(--c-brand-primary);white-space:nowrap}
.s-book__buy .c-btn--primary{box-shadow:var(--e-button)}
.s-book__perks{align-self:stretch;display:flex;flex-direction:column;gap:0.9rem;margin:1.8rem 0 0;padding:0;list-style:none}
.s-book__perks li{display:flex;align-items:center;gap:1rem;font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.s-book__perks svg{flex:0 0 auto;width:1.6rem;height:1.6rem;color:var(--c-brand-rose)}
.s-book__perks a{color:inherit;text-decoration:underline;text-decoration-color:var(--c-border-strong);text-underline-offset:0.3rem}
.s-book__perks a:hover{color:var(--c-brand-primary)}

/* «Погортати книгу»: заголовок, під ним через 22 — біла коробка
   r20 з полями 24; панель 216 і перегляд 776 з проміжком 24. */
.s-flip{display:flex;flex-direction:column;gap:2.2rem;scroll-margin-top:2rem}
.s-flip__full-link{padding:0;background:none;border:0;cursor:pointer}
.s-flip__box{display:flex;gap:2.4rem;padding:2.4rem;background:var(--c-bg-surface);border-radius:2rem;box-shadow:var(--e-card)}
.s-flip__panel{flex:0 0 21.6rem;display:flex;flex-direction:column;gap:1.4rem;min-width:0}
.s-flip__panel-title{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-flip__avail{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}
.s-flip__progress{position:relative;display:block;height:0.6rem;border-radius:var(--r-full);background:var(--c-border-strong);overflow:hidden}
.s-flip__progress-bar{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--r-full);background:var(--c-brand-primary);transition:width .3s ease}
.s-flip__thumbs{display:flex;flex-wrap:wrap;gap:1rem;padding-top:0.4rem}
.s-flip__thumb{display:flex;flex-direction:column;align-items:center;gap:0.5rem;width:4.6rem;padding:0;background:none;border:0;cursor:pointer;color:var(--c-text-muted);text-decoration:none}
.s-flip__thumb[hidden]{display:none}
.s-flip__thumb-img{display:grid;place-items:center;width:4.6rem;height:6.2rem;border-radius:0.5rem;overflow:hidden;background:var(--c-bg-surface);
  box-shadow:inset 0 0 0 0.1rem var(--c-border-subtle)}
.s-flip__thumb-img img{display:block;width:100%;height:100%;object-fit:cover}
/* Рамка поверх картинки, інакше зображення її перекриває. */
.s-flip__thumb .s-flip__thumb-img{position:relative}
.s-flip__thumb .s-flip__thumb-img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0.1rem var(--c-border-subtle);pointer-events:none}
.s-flip__thumb.is-current .s-flip__thumb-img::after{box-shadow:inset 0 0 0 0.2rem var(--c-brand-primary)}
.s-flip__thumb-num{font:500 1.3rem/1.8rem var(--f-body)}
.s-flip__thumb--locked .s-flip__thumb-img{background:var(--c-bg-cream);color:#C3B8AF}
.s-flip__thumb--locked svg{width:1.8rem;height:1.8rem}
.s-flip__thumb:hover .s-flip__thumb-num{color:var(--c-brand-primary)}
.s-flip__full{display:flex;flex-direction:column;gap:1.2rem;padding:1.6rem;border-radius:1.4rem;background:var(--c-brand-primary-soft)}
.s-flip__full p{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.s-flip__full .c-btn{box-shadow:var(--e-button)}

.s-flip__view{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1.6rem}
.s-flip__stage{position:relative;height:56rem;border-radius:1.4rem;overflow:hidden;background:var(--c-bg-surface)}
.s-flip__swiper{width:100%;height:100%}
.s-flip__slide{display:flex;align-items:center;justify-content:center;height:100%}
.s-flip__spread{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.s-flip__page{display:block;max-width:50%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
/* Обкладинка й остання непарна сторінка — поодинці, на всю висоту. */
.s-flip__page:only-child{max-width:100%}
.s-flip__arrow{position:absolute;z-index:2;top:50%;width:4.4rem;height:4.4rem;margin-top:-2.2rem;display:grid;place-items:center;
  border:0;border-radius:var(--r-full);background:var(--c-bg-surface);box-shadow:var(--e-float);color:var(--c-text-primary);cursor:pointer}
.s-flip__arrow svg{width:2rem;height:2rem}
.s-flip__arrow--prev{left:1.4rem}
.s-flip__arrow--next{right:1.4rem}
.s-flip__arrow:disabled,.s-flip__step:disabled{opacity:.35;cursor:default}
.s-flip__bar{display:flex;align-items:center;gap:1.4rem;height:3.4rem}
.s-flip__tool{display:grid;place-items:center;width:1.9rem;height:1.9rem;padding:0;background:none;border:0;color:#8C817A;cursor:pointer}
.s-flip__tool svg{width:1.9rem;height:1.9rem}
.s-flip__tool:hover,.s-flip__tool[aria-pressed="true"]{color:var(--c-brand-primary)}
.s-flip__spacer{flex:1 1 0;height:0.1rem}
.s-flip__pager{display:inline-flex;align-items:center;gap:1.2rem;height:3.4rem;padding:0.8rem 1.6rem;border-radius:var(--r-full);background:var(--c-bg-cream)}
.s-flip__step{display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;background:none;border:0;color:var(--c-text-primary);cursor:pointer;transform:rotate(90deg)}
.s-flip__step--next{transform:rotate(-90deg)}
.s-flip__step svg{width:1.5rem;height:1.5rem}
.s-flip__count{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-primary);white-space:nowrap;font-variant-numeric:tabular-nums}
.s-flip__hint{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}

/* Збільшення: сторінки більші, розворот прокручується всередині. */
.s-flip__stage.is-zoomed{overflow:auto;cursor:grab}
.s-flip__stage.is-zoomed .s-flip__swiper{width:170%;height:170%}

/* На весь екран. */
.s-flip__view:fullscreen{justify-content:center;padding:2.4rem;background:var(--c-bg-surface)}
.s-flip__view:fullscreen .s-flip__stage{flex:1 1 auto;height:auto}

/* «Що всередині»: 4 блоки 248×204, крем r18, поля 24/26, кроки 8. */
.s-inside{display:flex;flex-direction:column;gap:2.4rem}
.s-inside__grid{display:flex;gap:2.4rem;align-items:stretch}
.s-inside__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:0.8rem;min-height:20.4rem;padding:2.4rem 2.6rem;
  border-radius:1.8rem;background:var(--c-bg-cream)}
.s-inside__icon{display:block;width:2.4rem;height:2.4rem;color:var(--c-brand-primary)}
.s-inside__icon svg{width:2.4rem;height:2.4rem}
.s-inside__title{font:600 3rem/3.6rem var(--f-head);color:var(--c-text-primary)}
.s-inside__text{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}

.s-books--others{gap:2.4rem}

@media (max-width:767px){
  /* Mobile 390: окремого макета немає — за правилами дизайн-системи:
     поля 20, картки й блоки — горизонтальні каруселі. */
  .l-content.l-content--book{gap:4rem;padding:1.6rem 0 5.6rem}
  .s-booknav{padding:0 2rem}
  .s-booknav__crumbs{font-size:1.2rem;line-height:1.7rem}
  .s-booknav__sep{margin:0 0.6rem}
  .s-book{flex-direction:column;gap:2.4rem;padding:0 2rem}
  .s-book__cover{flex:0 0 auto;width:22rem;height:29.3rem;align-self:center;border-radius:1.6rem}
  .s-book__title{margin-top:1.2rem;font:700 3.2rem/4rem var(--f-head);letter-spacing:-0.016rem}
  .s-book__lead{margin-top:1.2rem;font:400 1.5rem/2.4rem var(--f-body)}
  .s-book__meta{margin-top:1.6rem;gap:0.8rem 1.6rem}
  .s-book__buy{margin-top:2rem;gap:1.2rem;width:100%}
  .s-book__price{width:100%;font-size:2.6rem;line-height:3.4rem}
  .s-book__buy .c-btn{flex:1 1 100%}
  .s-book__perks{margin-top:1.8rem}
  .s-book__perks li{align-items:flex-start}
  .s-book__perks svg{margin-top:0.3rem}

  .s-flip{gap:1.6rem}
  .s-flip .s-title-row{padding:0 2rem}
  .s-flip__box{flex-direction:column-reverse;gap:2rem;margin:0 2rem;padding:1.2rem;border-radius:1.8rem}
  .s-flip__stage{height:42rem}
  .s-flip__arrow{width:3.8rem;height:3.8rem;margin-top:-1.9rem}
  .s-flip__arrow--prev{left:0.4rem}
  .s-flip__arrow--next{right:0.4rem}
  .s-flip__panel{flex:0 0 auto;padding:0 0.4rem 0.4rem}
  .s-flip__panel-title br{display:none}
  .s-flip__thumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .s-flip__thumbs::-webkit-scrollbar{display:none}
  .s-flip__thumb{flex:0 0 4.6rem}
  .s-flip__hint{padding:0 0.4rem}
  .s-flip__bar{gap:1.2rem}

  .s-inside{gap:2rem}
  .s-inside .s-title-row{padding:0 2rem}
  .s-inside__grid{gap:1.4rem;padding:0 2rem;scroll-padding-left:2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .s-inside__grid::-webkit-scrollbar{display:none}
  .s-inside__item{flex:0 0 24.8rem;scroll-snap-align:start;min-height:0;padding:2rem 2.2rem}
  .s-inside__title{font-size:2.4rem;line-height:3rem}
}

/* ══ Попап замовлення книги ══════════════════════════════════
   Окремого макета немає: за основою попапу «Повідомлення надіслано»
   і полями форми зворотного зв'язку з дизайн-системи. */
.c-order{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:2rem}
.c-order[hidden]{display:none}
.c-order__scrim{position:absolute;inset:0;background:var(--c-bg-scrim);opacity:.55}
.c-order__box{position:relative;width:56rem;max-width:100%;max-height:calc(100dvh - 4rem);overflow-y:auto;overscroll-behavior:contain;
  padding:4rem 4.4rem 3.2rem;border-radius:2.8rem;background:var(--c-bg-surface);box-shadow:var(--e-hero)}
.c-order__close{position:absolute;top:2rem;right:2rem;display:grid;place-items:center;width:4.2rem;height:4.2rem;padding:0;border:0;
  border-radius:var(--r-full);background:var(--c-bg-cream);color:var(--c-text-primary);cursor:pointer}
.c-order__close svg{width:1.9rem;height:1.9rem}
.c-order__close:hover{background:var(--c-brand-primary-soft);color:var(--c-brand-primary)}
.c-order__title{padding-right:5rem;font:600 2.6rem/3.4rem var(--f-head);color:var(--c-text-primary)}
.c-order__sub{margin-top:0.8rem;padding-right:2rem;font:400 1.5rem/2.4rem var(--f-body);color:var(--c-text-secondary)}

.c-order__item{display:flex;align-items:center;gap:1.6rem;margin-top:2.4rem;padding:1.4rem;border-radius:1.8rem;background:var(--c-brand-primary-soft)}
.c-order__cover{flex:0 0 7.2rem;height:9.6rem;border-radius:0.8rem;overflow:hidden;background:var(--c-bg-surface);box-shadow:var(--e-card)}
.c-order__img{display:block;width:100%;height:100%;object-fit:cover}
.c-order__info{display:flex;flex-direction:column;gap:0.4rem;min-width:0}
.c-order__name{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.c-order__price{font:700 2.2rem/2.8rem var(--f-body);color:var(--c-brand-primary)}
.c-order__meta{display:flex;flex-wrap:wrap;gap:0.4rem 1.6rem;margin-top:0.2rem}

.c-order__form{display:flex;flex-direction:column;gap:1.6rem;margin-top:2.4rem}
.c-order__label{display:block;margin-bottom:0.6rem;font:600 1.3rem/1.8rem var(--f-body);color:var(--c-text-primary)}
.c-order__area{height:10rem}
.c-order__field .c-error{margin-top:0.6rem}
.c-order__agree{display:flex;align-items:flex-start;gap:1rem;font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary);cursor:pointer}
.c-order__agree .s-form__check{flex:0 0 auto;margin-top:0.15rem}
.c-order__pay{display:flex;flex-direction:column;gap:0.8rem;margin:0;padding:0;border:0}
.c-order__pay-item{display:flex;align-items:center;gap:1rem;font:500 1.4rem/2rem var(--f-body);color:var(--c-text-primary)}
.c-order__alert{padding:1.2rem 1.6rem;border-radius:1.2rem;background:var(--c-state-error-soft);font:500 1.4rem/2.2rem var(--f-body);color:var(--c-state-error)}
.c-order__alert[hidden]{display:none}
.c-order__submit{margin-top:0.4rem;box-shadow:var(--e-button)}
.c-order__submit svg{width:1.8rem;height:1.8rem}
.c-order__submit.is-loading{opacity:.7;pointer-events:none}
.c-order__hint{display:flex;align-items:center;justify-content:center;gap:0.8rem;font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}
.c-order__hint svg{width:1.6rem;height:1.6rem}

@media (max-width:767px){
  .c-order{align-items:flex-end;padding:1.2rem 1.2rem 0}
  .c-order__box{max-height:calc(100dvh - 1.2rem);padding:2.8rem 2rem 2.4rem;border-radius:2.2rem 2.2rem 0 0}
  .c-order__close{top:1.4rem;right:1.4rem;width:3.8rem;height:3.8rem}
  .c-order__title{font:600 2.2rem/3rem var(--f-head)}
  .c-order__sub{padding-right:0;font-size:1.4rem;line-height:2.2rem}
  .c-order__cover{flex-basis:6rem;height:8rem}
  .c-order__name{font-size:1.6rem;line-height:2.2rem}
  .c-order__price{font-size:2rem;line-height:2.6rem}
}

/* Кнопки WooCommerce у фірмовому кольорі (сторінки замовлення, кабінету). */
.woocommerce a.button,.woocommerce button.button,.woocommerce .woocommerce-MyAccount-downloads-file{
  display:inline-flex;align-items:center;justify-content:center;min-height:3.8rem;padding:0.8rem 1.8rem;border:0;border-radius:1.2rem;
  background:var(--c-brand-primary);color:var(--c-text-inverse);font:600 1.3rem/1.8rem var(--f-body);text-decoration:none}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--c-brand-primary-hover);color:var(--c-text-inverse)}

/* ══ Пісні — альбоми ═════════════════════════════════════════
   Figma: «Пісні (список) — Desktop 1440» (79:4136). Шапка 310,
   контент зверху 8, між блоками 34, знизу 88. */
.s-pagehead--songs{min-height:31rem}
.l-content--songs{gap:3.4rem;padding:0.8rem 4.8rem 8.8rem}

.s-album{display:flex;flex-direction:column;gap:3.4rem}
.s-album__card{display:flex;align-items:center;gap:3.2rem;padding:3.2rem 3.6rem 3.2rem 3.2rem;border-radius:2.2rem;
  background:var(--c-bg-surface);box-shadow:var(--e-card)}
.s-album__cover{flex:0 0 19rem;height:26.9rem;border-radius:1.4rem;overflow:hidden;background:var(--c-bg-cream)}
.s-album__img{display:block;width:100%;height:100%;object-fit:cover}
.s-album__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}
.s-album__overline{align-self:stretch;font:600 1.2rem/1.6rem var(--f-body);letter-spacing:0.096rem;text-transform:uppercase;color:var(--c-brand-primary)}
.s-album__title{align-self:stretch;font:700 3.6rem/4.4rem var(--f-head);letter-spacing:-0.018rem;color:var(--c-text-primary)}
.s-album__desc{font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-album__meta{display:flex;flex-wrap:wrap;gap:0.4rem 2rem;margin:0;padding:0.2rem 0 0;list-style:none}
.s-album__meta .c-meta{gap:0.7rem}
.s-album__meta .c-meta svg{width:1.6rem;height:1.6rem}
.s-album__actions{display:flex;flex-wrap:wrap;gap:1.4rem;padding-top:0.8rem}
.s-album__actions .c-btn--primary{box-shadow:var(--e-button)}

.s-tracks{display:flex;flex-direction:column;gap:1rem;margin:0;padding:0;list-style:none}
.s-track{display:flex;align-items:center;gap:1.4rem;height:6.4rem}
.s-track__num{flex:0 0 2.4rem;font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted);font-variant-numeric:tabular-nums}
.s-track__cover{flex:0 0 4.8rem;height:4.8rem;border-radius:1rem;overflow:hidden;display:grid;place-items:center}
.s-track__cover.is-empty{background:var(--c-brand-primary-soft);font:600 1.8rem/1 var(--f-body);color:var(--c-brand-primary)}
.s-track__img{display:block;width:100%;height:100%;object-fit:cover}
.s-track__row{flex:1 1 auto;min-width:0}
.s-track__play{padding:0;border:0;cursor:pointer}
.s-track__play:disabled{opacity:.35;cursor:default}
.s-track__icon-play,.s-track__icon-pause{display:grid;place-items:center}
.s-track__icon-pause,.s-track.is-playing .s-track__icon-play{display:none}
.s-track.is-playing .s-track__icon-pause{display:grid}
.s-track.is-playing .c-row{border-color:var(--c-brand-rose);background:var(--c-brand-primary-soft)}
.s-track .c-row__text{color:inherit;text-decoration:none}
.s-track .c-row__text:hover .c-row__name{color:var(--c-brand-primary)}

.s-singles{display:flex;flex-direction:column;gap:2rem}

.s-songinfo{display:flex;gap:2.4rem;padding-top:2rem}
/* У макеті висота картки 172 задана вручну: трирядковий текст середньої
   картки займає нижній відступ. Відтворюємо так само. */
.s-songinfo__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1.2rem;height:17.2rem;padding:2.6rem 2.8rem 0.4rem;
  border-radius:2rem;background:var(--c-bg-cream)}
.s-songinfo__icon{display:block;width:2.6rem;height:2.6rem;color:var(--c-brand-primary)}
.s-songinfo__icon svg{width:2.6rem;height:2.6rem}
.s-songinfo__title{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-songinfo__text{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}

@media (max-width:767px){
  .s-pagehead--songs{min-height:0}
  .l-content.l-content--songs{gap:2.8rem;padding:0.8rem 0 5.6rem}
  .s-album{gap:2rem}
  .s-album__card{flex-direction:column;align-items:stretch;gap:2rem;margin:0 2rem;padding:2rem;border-radius:2rem}
  .s-album__cover{flex:0 0 auto;align-self:center;width:15rem;height:21.2rem}
  .s-album__title{font:700 2.6rem/3.4rem var(--f-head)}
  .s-album__title br{display:none}
  .s-album__desc{font-size:1.5rem;line-height:2.4rem}
  .s-album__actions{width:100%}
  .s-album__actions .c-btn{flex:1 1 100%}
  .s-tracks{padding:0 2rem;gap:0.8rem}
  .s-track{gap:1rem}
  .s-track__num{display:none}
  .s-track__cover{flex-basis:4.4rem;height:4.4rem}
  .s-track .c-row{gap:1rem;padding:0 1.2rem 0 1rem}
  .s-track .c-row__like{display:none}
  .s-singles .s-title-row{padding:0 2rem}
  .s-songinfo{flex-direction:column;gap:1.4rem;padding:0 2rem}
  .s-songinfo__item{height:auto;padding:2.2rem}
}

/* ══ Сторінка пісні ══════════════════════════════════════════
   Figma: «Сторінка пісні — Desktop 1440» (91:7467). Шапка 350;
   контент: картки → слова 28, слова → інші пісні 36, → підпис 36. */
.s-workhead--song{min-height:35rem}
.l-content--song{gap:2.8rem}
:is(.l-content--song,.l-content--tale) .s-media-row{gap:2.8rem}
:is(.l-content--song,.l-content--tale) .s-playercard,:is(.l-content--song,.l-content--tale) .s-bookcard{padding:2.8rem 3rem 2.6rem;border-radius:2rem}
:is(.l-content--song,.l-content--tale) .s-bookcard{align-items:flex-start;text-align:left;gap:1.8rem}
.s-bookcard__media{display:block;align-self:stretch;height:28rem;border-radius:1.4rem;overflow:hidden;background:var(--c-bg-surface)}
:is(.l-content--song,.l-content--tale) .s-bookcard__cover{width:100%;height:100%;object-fit:contain;border-radius:0}
:is(.l-content--song,.l-content--tale) .s-bookcard__desc{font:400 1.4rem/2.2rem var(--f-body)}
:is(.l-content--song,.l-content--tale,.l-content--anim,.l-content--clip) .s-title-row--tight .s-title-row__h{font:600 2rem/2.8rem var(--f-head)}
:is(.l-content--song,.l-content--tale,.l-content--anim,.l-content--clip) .s-title-row--tight{gap:1.1rem;height:2.8rem}
:is(.l-content--song,.l-content--tale,.l-content--anim,.l-content--clip) .s-title-row--tight .s-title-row__icon,:is(.l-content--song,.l-content--tale,.l-content--anim,.l-content--clip) .s-title-row--tight .s-title-row__icon svg{width:2.1rem;height:2.1rem}

.s-worktext__head{margin-bottom:2rem}
.s-worktext--bare{padding:4.4rem 4.8rem 2.8rem}
.s-worktext--bare .s-worktext__more{padding:1rem 0 0;height:3rem}

.s-othersongs{display:flex;flex-direction:column;gap:2.4rem;margin-top:0.8rem;padding-top:1.4rem}
.s-tracks--grid{display:grid;grid-template-columns:repeat(2,51.2rem);gap:1rem 2rem}
.s-tracks--grid .s-track{height:6.4rem}
.l-content--song .s-sign{margin-top:0.8rem;padding:3.2rem 4.4rem;border-radius:2.2rem}

@media (max-width:767px){
  .s-workhead--song{min-height:0}
  .l-content.l-content--song{gap:2rem}
  .l-content:is(.l-content--song,.l-content--tale) :is(.s-playercard,.s-bookcard){padding:2.2rem 2rem}
  .s-bookcard__media{height:22rem}
  .s-worktext--bare{padding:2.4rem 2.2rem 1.8rem}
  .s-othersongs{margin-top:0;padding-top:0.4rem;gap:1.6rem}
  .s-tracks--grid{grid-template-columns:1fr;padding:0}
  .l-content.l-content--song .s-sign{margin-top:0}
}

/* ══ Зворотний зв'язок ═══════════════════════════════════════
   Figma: «Зворотній зв'язок — Desktop 1440» (70:2729). Шапка 330;
   контент зверху 16, між блоками 56, знизу 88. */
.s-pagehead--contact{min-height:33rem}
.l-content--contact{gap:5.6rem;padding:1.6rem 4.8rem 8.8rem}

.s-contactpage{display:flex;align-items:flex-start;gap:2.8rem}
.s-contactpage__form{flex:0 0 64.6rem;min-width:0}
.s-form.s-form--page{padding:3.4rem 3.6rem 3.2rem;border-radius:2.2rem}
.s-form--page .s-form__title{display:flex;align-items:center;gap:1.2rem}
.s-form__title-icon{display:grid;place-items:center;width:2.4rem;height:2.4rem;color:var(--c-brand-primary);flex:0 0 auto}
.s-form__title-icon svg{width:2.4rem;height:2.4rem}
.s-form--page .s-form__row{gap:1.4rem}
.s-form--page .s-form__agree{height:2.6rem;padding-top:0.4rem;gap:1.1rem}

/* Прикріплення: пунктирна рамка 66, кнопка «Обрати файл» праворуч. */
.s-form__files{position:relative;display:flex;align-items:center;gap:1.2rem;min-height:6.6rem;padding:1.1rem 1.4rem 1.1rem 1.8rem;/* рамка в Figma внутрішня */
  border:1px dashed var(--c-border-strong);border-radius:1.2rem;background:var(--c-bg-surface);cursor:pointer}
.s-form__files:hover{border-color:var(--c-brand-rose)}
.s-form__files.is-error{border-color:var(--c-state-error);background:var(--c-state-error-soft)}
.s-form__files-icon{display:grid;place-items:center;width:1.8rem;height:1.8rem;color:var(--c-text-muted);flex:0 0 auto}
.s-form__files-icon svg{width:1.8rem;height:1.8rem}
.s-form__files-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0.2rem}
.s-form__files-title{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.s-form__files-note{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-form__files.has-files .s-form__files-note{color:var(--c-brand-primary)}
.s-form__files-btn{flex:0 0 auto;pointer-events:none}
.s-form__files-input{position:absolute;width:0.1rem;height:0.1rem;opacity:0;pointer-events:none}
.s-form__files:focus-within{outline:0.2rem solid var(--c-border-focus);outline-offset:0.2rem}

.s-contactpage__side{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2rem}
.s-channels{display:flex;flex-direction:column;gap:2.2rem;padding:3rem 2.8rem 2.8rem;border-radius:2.2rem;background:var(--c-bg-surface);box-shadow:var(--e-card)}
.s-channels__title{font:600 2rem/2.8rem var(--f-head);color:var(--c-text-primary)}
.s-channels__item{display:flex;align-items:flex-start;gap:1.4rem}
.s-channels__icon{flex:0 0 4.4rem;height:4.4rem;display:grid;place-items:center;border-radius:var(--r-full);background:var(--c-brand-primary-soft);color:var(--c-brand-primary)}
.s-channels__icon svg{width:2.1rem;height:2.1rem}
.s-channels__text{display:flex;flex-direction:column;gap:0.3rem;min-width:0}
.s-channels__label{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-primary)}
.s-channels__value{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-brand-primary);text-decoration:none;overflow-wrap:anywhere}
.s-channels__value:hover{text-decoration:underline}
.s-channels__value--plain{color:var(--c-text-secondary)}

.s-contactquote{display:flex;flex-direction:column;gap:0.4rem;margin:0;padding:2.4rem 2.8rem 2.6rem;border-radius:2.2rem;background:var(--c-brand-primary-soft)}
.s-contactquote__mark{height:3rem;font:700 3.6rem/3rem var(--f-head);color:var(--c-brand-primary)}
.s-contactquote__text{font:400 2.4rem/3.6rem var(--f-script);color:var(--c-text-primary)}

.s-steps{display:flex;flex-direction:column;gap:3.4rem}
.s-steps__title{font:600 2.6rem/3.4rem var(--f-head);color:var(--c-text-primary)}
.s-steps__list{display:flex;gap:1.6rem;margin:0;padding:0;list-style:none}
.s-steps__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.s-steps__icon{width:6.2rem;height:6.2rem;display:grid;place-items:center;border-radius:var(--r-full);background:var(--c-brand-primary-soft);color:var(--c-brand-primary)}
.s-steps__icon svg{width:2.6rem;height:2.6rem}
.s-steps__name{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-steps__text{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}

.s-songinfo--trust{padding-top:0}
.s-contactsign{text-align:center;font:400 3rem/4.2rem var(--f-script);color:var(--c-brand-primary)}

@media (max-width:767px){
  .s-pagehead--contact{min-height:0}
  .l-content.l-content--contact{gap:4rem;padding:0.8rem 2rem 5.6rem}
  .s-contactpage{flex-direction:column;align-items:stretch;gap:2rem}
  .s-contactpage__form{flex:0 0 auto}
  .s-form.s-form--page{padding:2.2rem 2rem}
  .s-form--page .s-form__agree{height:auto;align-items:flex-start}
  .s-form__files{flex-wrap:wrap}
  .s-form__files-btn{margin-left:3rem}
  .s-channels{padding:2.4rem 2.2rem}
  .s-contactquote__text{font-size:2.2rem;line-height:3.4rem}
  .s-steps{gap:2.4rem}
  .s-steps__title{font:600 2.2rem/3rem var(--f-head)}
  .s-steps__list{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 1.4rem}
  .s-songinfo--trust{padding:0}
  .s-contactsign{font-size:2.4rem;line-height:3.4rem}
}

/* ══ На замовлення (хаб) ═════════════════════════════════════
   Figma: «На замовлення — Desktop 1440» (72:3395). Контент зверху 16,
   між секціями 60, знизу 88. */
.l-content--order{gap:6rem;padding:1.6rem 4.8rem 8.8rem}
.s-headline{display:flex;align-items:center;gap:1.2rem}
.s-headline__icon{display:grid;place-items:center;width:2.2rem;height:2.2rem;color:var(--c-brand-primary);flex:0 0 auto}
.s-headline__icon svg{width:2.2rem;height:2.2rem}
.s-headline__title{font:600 2.6rem/3.4rem var(--f-head);color:var(--c-text-primary)}

.s-orderformats{display:flex;flex-direction:column;gap:3rem}
.s-orderformats__grid{display:grid;grid-template-columns:repeat(2,50.8rem);grid-auto-rows:34.9rem;gap:2.4rem}
.c-orderformat{display:flex;flex-direction:column;gap:1.4rem;padding:3rem 3.2rem 2.8rem;border-radius:2rem;background:var(--c-bg-surface);box-shadow:var(--e-card)}
.c-orderformat__head{display:flex;align-items:center;gap:1.4rem}
.c-orderformat__icon{flex:0 0 4.8rem;height:4.8rem;display:grid;place-items:center;border-radius:var(--r-full);background:var(--c-brand-primary-soft);color:var(--c-brand-primary)}
.c-orderformat__icon svg{width:2.2rem;height:2.2rem}
.c-orderformat__title{font:600 2rem/2.8rem var(--f-head);color:var(--c-text-primary)}
.c-orderformat__title a{color:inherit;text-decoration:none}
.c-orderformat__title a:hover{color:var(--c-brand-primary)}
.c-orderformat__desc{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.c-orderformat__points{display:flex;flex-direction:column;gap:0.9rem;margin:0;padding:0.4rem 0 0;list-style:none}
.c-orderformat__points li{position:relative;padding-left:1.6rem;font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.c-orderformat__points li::before{content:"";position:absolute;left:0;top:0.8rem;width:0.6rem;height:0.6rem;border-radius:var(--r-full);background:var(--c-brand-primary)}
.c-orderformat__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:0.7rem;height:3.8rem;font:600 1.3rem/1.8rem var(--f-body);color:var(--c-brand-primary);text-decoration:none}
.c-orderformat__cta svg{width:1.8rem;height:1.8rem}

.s-ordersteps{display:flex;flex-direction:column;gap:3.2rem}
.s-ordersteps__list{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;margin:0;padding:0;list-style:none;align-items:start}
.s-ordersteps__item{display:flex;flex-direction:column;gap:1.2rem;padding:2.4rem 2.4rem 2.4rem 2.6rem;border-radius:1.8rem;background:var(--c-bg-cream)}
.s-ordersteps__num{display:grid;place-items:center;width:3.8rem;height:3.8rem;border-radius:var(--r-full);background:var(--c-brand-primary);font:600 1.8rem/2.6rem var(--f-head);color:#fff}
.s-ordersteps__title{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-ordersteps__text{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}

.s-orderbanner{display:flex;align-items:center;gap:2.8rem;padding:3.2rem 4rem;border-radius:2.2rem;background:var(--c-brand-primary-soft)}
.s-orderbanner__icon{flex:0 0 6rem;height:6rem;display:grid;place-items:center;border-radius:var(--r-full);background:var(--c-bg-surface);color:var(--c-brand-primary)}
.s-orderbanner__icon svg{width:2.6rem;height:2.6rem}
.s-orderbanner__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0.8rem}
.s-orderbanner__title{font:600 2rem/2.8rem var(--f-head);color:var(--c-text-primary)}
.s-orderbanner__desc{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.s-orderbanner__cta,.s-faqbanner__cta{flex:0 0 auto;box-shadow:var(--e-button)}
.s-orderbanner__cta svg,.s-faqbanner__cta svg{width:1.8rem;height:1.8rem}

/* ══ Сторінка послуги ════════════════════════════════════════
   Figma: «На замовлення / Персональний вірш» (141:8232). Шапка 420
   (ілюстрація 600 справа, розтушовка 320), контент: зверху 8, між 52. */
.s-svchead{position:relative;min-height:42rem;padding:3.4rem 4.8rem 2.6rem;overflow:hidden}
.s-svchead__media{position:absolute;top:0;left:56rem;width:60rem;height:100%}
.s-svchead__img{display:block;width:100%;height:100%;object-fit:cover}
.s-svchead__fade{position:absolute;top:0;left:-2rem;width:32rem;height:100%;
  background:linear-gradient(90deg, #FBF6F0 0%, rgba(251,246,240,.45) 62%, rgba(251,246,240,0) 100%)}
.s-svchead__text{position:relative;width:54rem;display:flex;flex-direction:column;align-items:flex-start}
.s-svchead__label{display:flex;align-items:center;gap:1rem;margin-top:1.8rem;font:600 1.4rem/2.2rem var(--f-body);color:var(--c-brand-primary)}
.s-svchead__label svg{width:2rem;height:2rem}
.s-svchead__title{margin-top:1.4rem;font:700 5.6rem/6.4rem var(--f-head);letter-spacing:-0.084rem;color:var(--c-text-primary)}
.s-svchead__desc{margin-top:1.8rem;font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}

.l-content--service{gap:5.2rem;padding:0.8rem 4.8rem 8.8rem}
.s-tariffs__heading{font:600 2.6rem/3.4rem var(--f-head);color:var(--c-text-primary)}
.s-tariffs,.s-svcget{display:flex;flex-direction:column;gap:2.6rem}
.s-tariffs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.c-tariff{display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;min-height:43.1rem;padding:2.6rem 2.4rem 2.4rem;
  border-radius:1.8rem;background:var(--c-bg-surface);box-shadow:inset 0 0 0 1px var(--c-border-subtle)}
/* Рамка внутрішня, як у Figma: border додав би 2 px до висоти 431. */
.c-tariff__top,.c-tariff__bottom{display:flex;flex-direction:column;gap:1.4rem}
.c-tariff__name{display:flex;align-items:center;gap:1rem;font:600 2rem/2.8rem var(--f-head);color:var(--c-text-primary)}
.c-tariff__name svg{flex:0 0 auto;width:2rem;height:2rem;color:var(--c-brand-primary)}
.c-tariff__sub{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted)}
.c-tariff__desc{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.c-tariff__features{display:flex;flex-direction:column;gap:0.9rem;margin:0;padding:0.2rem 0 0;list-style:none}
.c-tariff__features li{display:flex;align-items:center;gap:0.9rem;font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-secondary)}
.c-tariff__features svg{flex:0 0 auto;width:1.5rem;height:1.5rem;color:var(--c-brand-primary)}
.c-tariff__divider{height:0.1rem;margin:0;border:0;background:var(--c-border-subtle)}
.c-tariff__price{text-align:center;font:600 1.4rem/2.2rem var(--f-body);color:var(--c-brand-primary)}
.c-tariff__cta{box-shadow:var(--e-button)}

.s-pricenote{display:flex;align-items:center;gap:1.6rem;padding:2rem 2rem 2rem 2.4rem;border-radius:1.6rem;background:var(--c-brand-primary-soft)}
.s-pricenote__icon{display:grid;place-items:center;width:2rem;height:2rem;color:var(--c-brand-primary);flex:0 0 auto}
.s-pricenote__icon svg{width:2rem;height:2rem}
.s-pricenote__text{flex:1 1 auto;min-width:0;font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.s-pricenote__cta{flex:0 0 auto}

.s-svcget__box{display:flex;align-items:center;gap:2.8rem;padding:3rem 0 3rem 3.2rem;border-radius:2rem;background:var(--c-brand-primary-soft);overflow:hidden}
.s-svcget__list{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem;margin:0;padding:0;list-style:none;align-items:start}
.s-svcget__item{display:flex;flex-direction:column;gap:1rem}
.s-svcget__icon{display:block;width:2.4rem;height:2.4rem;color:var(--c-brand-primary)}
.s-svcget__icon svg{width:2.4rem;height:2.4rem}
.s-svcget__title{font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-svcget__text{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary)}
.s-svcget__img{flex:0 0 21rem;width:21rem;height:17rem;object-fit:cover}

.s-svcsteps{display:flex;flex-direction:column;gap:3rem}
.s-svcsteps__list{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin:0;padding:0;list-style:none;align-items:start}
.s-svcsteps__item{display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.s-svcsteps__icon{display:grid;place-items:center;width:5.8rem;height:5.8rem;border:1px solid var(--c-border-subtle);border-radius:var(--r-full);background:var(--c-bg-surface);color:var(--c-brand-primary)}
.s-svcsteps__icon svg{width:2.4rem;height:2.4rem}
.s-svcsteps__title{font:600 1.4rem/2.2rem var(--f-body);color:var(--c-text-primary)}
.s-svcsteps__text{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-secondary)}

.s-svccta{display:flex;align-items:center;gap:3.2rem;padding:4rem 4.4rem;border-radius:2.2rem;background:var(--c-bg-cream)}
.s-svccta__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1.4rem}
.s-svccta__title{font:700 3.6rem/4.4rem var(--f-head);letter-spacing:-0.018rem;color:var(--c-text-primary)}
.s-svccta__actions{display:flex;flex-wrap:wrap;gap:1.4rem;padding-top:0.4rem}
.s-svccta__actions .c-btn--primary{box-shadow:var(--e-button)}
.s-svccta__img{flex:0 0 26rem;width:26rem;height:17.6rem;border-radius:1.6rem;object-fit:cover}

/* ══ Часті запитання ═════════════════════════════════════════
   Figma: «Часті запитання — Desktop 1440» (140:7957). Шапка 270;
   контент зверху 8, між блоками 44, знизу 88. */
.s-pagehead--faq{min-height:27rem}
.l-content--faq{gap:4.4rem;padding:0.8rem 4.8rem 8.8rem}
.s-filters--faq .c-chip{cursor:pointer;font-family:var(--f-body)}
.s-faq{display:flex;flex-direction:column;gap:1.2rem}
.s-faq__item{border:1px solid var(--c-border-subtle);border-radius:1.6rem;background:var(--c-bg-surface)}
.s-faq__item[open]{border-color:var(--c-brand-primary-soft);background:var(--c-brand-primary-soft)}
.s-faq__item[hidden]{display:none}
.s-faq__q{display:flex;align-items:center;gap:2rem;padding:2.1rem 2.4rem 2.1rem 2.8rem;cursor:pointer;list-style:none;
  font:600 1.8rem/2.6rem var(--f-head);color:var(--c-text-primary)}
.s-faq__q::-webkit-details-marker{display:none}
.s-faq__q span{flex:1 1 auto;min-width:0}
.s-faq__q svg{flex:0 0 auto;width:2rem;height:2rem;color:var(--c-brand-primary);transition:transform .2s ease}
.s-faq__item[open] .s-faq__q svg{transform:rotate(180deg)}
.s-faq__item[open] .s-faq__q{padding-bottom:0}
.s-faq__a{padding:1.4rem 2.4rem 2.1rem 2.8rem;font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-faq__a p{margin:0}
.s-faq__a p + p{margin-top:1rem}

.s-faqbanner{display:flex;align-items:center;gap:3.2rem;padding:3.4rem 4rem;border-radius:2.2rem;background:var(--c-bg-cream)}
.s-faqbanner__img{flex:0 0 19rem;width:19rem;height:15rem;object-fit:contain;border-radius:1.4rem}
.s-faqbanner__text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1rem}
.s-faqbanner__title{font:600 2.6rem/3.4rem var(--f-head);color:var(--c-text-primary)}
.s-faqbanner__desc{font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}

@media (max-width:767px){
  .l-content.l-content--order{gap:4rem;padding:0.8rem 2rem 5.6rem}
  .s-headline__title{font:600 2.2rem/3rem var(--f-head)}
  .s-orderformats{gap:2rem}
  .s-orderformats__grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:1.4rem}
  .c-orderformat{padding:2.4rem 2.2rem}
  .s-ordersteps{gap:2rem}
  .s-ordersteps__list{grid-template-columns:1fr 1fr;gap:1.2rem}
  .s-ordersteps__item{padding:2rem 1.6rem}
  .s-orderbanner{flex-direction:column;align-items:flex-start;gap:1.6rem;padding:2.4rem 2.2rem}

  .s-svchead{min-height:0;padding:0;display:flex;flex-direction:column}
  .s-svchead__media{position:relative;left:0;width:100%;height:21rem}
  .s-svchead__fade{top:auto;bottom:0;left:0;width:100%;height:9rem;background:linear-gradient(0deg, #FBF6F0 0%, rgba(251,246,240,0) 100%)}
  .s-svchead__text{width:100%;padding:0.4rem 2rem 0.6rem}
  .s-svchead__title{font:700 3.2rem/4rem var(--f-head);letter-spacing:-0.016rem}
  .s-svchead__title br{display:none}
  .s-svchead__desc{font-size:1.5rem;line-height:2.4rem}
  .l-content.l-content--service{gap:4rem;padding:1.6rem 2rem 5.6rem}
  .s-tariffs__heading{font:600 2.2rem/3rem var(--f-head)}
  .s-tariffs,.s-svcget{gap:2rem}
  .s-tariffs__grid{grid-template-columns:1fr;gap:1.4rem}
  .c-tariff{min-height:0}
  .c-tariff__price br{display:none}
  .s-pricenote{flex-direction:column;align-items:flex-start;gap:1.2rem;padding:2rem}
  .s-svcget__box{flex-direction:column;align-items:stretch;padding:2.4rem 2rem 0;gap:2rem}
  .s-svcget__list{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}
  .s-svcget__img{flex:0 0 auto;width:calc(100% + 4rem);height:18rem;margin:0 -2rem}
  .s-svcsteps{gap:2rem}
  .s-svcsteps__list{grid-template-columns:1fr 1fr;gap:2.4rem 1.4rem}
  .s-svccta{flex-direction:column-reverse;align-items:stretch;gap:2rem;padding:2.4rem 2rem}
  .s-svccta__title{font:700 2.6rem/3.4rem var(--f-head)}
  .s-svccta__title br{display:none}
  .s-svccta__img{flex:0 0 auto;width:100%;height:18rem}
  .s-svccta__actions .c-btn{flex:1 1 100%}

  .s-pagehead--faq{min-height:0}
  .l-content.l-content--faq{gap:2.8rem;padding:0.8rem 0 5.6rem}
  .s-faq{padding:0 2rem;gap:1rem}
  .s-faq__q{padding:1.8rem 1.8rem 1.8rem 2rem;font-size:1.7rem;line-height:2.4rem}
  .s-faq__a{padding:1.2rem 1.8rem 1.8rem 2rem;font-size:1.5rem;line-height:2.4rem}
  .s-faqbanner{flex-direction:column;align-items:flex-start;gap:1.6rem;margin:0 2rem;padding:2.4rem 2.2rem}
  .s-faqbanner__img{flex:0 0 auto;width:15rem;height:11.8rem}
  .s-faqbanner__title{font:600 2.2rem/3rem var(--f-head)}
}

/* ══ Сторінки вірша, казки, анімації, кліпу ════════════════════
   Figma: 64:1919, 81:4487, 74:3707, 236:9354. */
.s-workhead--tale{min-height:34rem}
.s-workhead--video{min-height:33rem}

/* «Інші вірші» — плитки 197×88. */
.s-relate__list{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem}
.s-relate__item{display:flex;flex-direction:column;gap:1.4rem;min-width:0;padding:1.8rem 1.8rem 1.6rem 2rem;
  background:var(--c-bg-surface);border-radius:1.4rem;box-shadow:inset 0 0 0 0.1rem var(--c-border-subtle);text-decoration:none}
.s-relate__item:hover{text-decoration:none;box-shadow:inset 0 0 0 0.1rem var(--c-border-strong)}
.s-relate__name{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-relate__low{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:1.8rem}
.s-relate__col{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-relate__low svg{flex:0 0 auto;width:1.7rem;height:1.7rem;color:var(--c-brand-primary)}
.s-relate{padding-top:1.6rem}

/* «Пов'язано» — картка 520×201: фото 210, текст 22/22/20. */
.s-relate__wide{border-radius:1.8rem;overflow:hidden;min-height:20.1rem}
.s-relate__wide-img{position:relative;display:block}
.s-relate__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4.6rem;height:4.6rem;
  border-radius:var(--r-full);background:var(--c-bg-surface);color:var(--c-text-primary);display:grid;place-items:center}
.s-relate__play svg{width:1.8rem;height:1.8rem}
.s-relate__wide-text{padding:2.2rem 2.2rem 2rem}
.s-relate__wide-cta{display:inline-flex;align-items:center;gap:0.7rem;height:3.8rem;font:600 1.3rem/1.8rem var(--f-body);color:var(--c-brand-primary)}
.s-relate__wide-cta svg{width:1.8rem;height:1.8rem}

/* «Інші …» — картки Card / Медіа. */
.s-relate__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem}
.s-relate__cards .c-card-media{width:auto}
.s-relate__cards .c-card-media__body{flex:1 1 auto;min-height:18.6rem;justify-content:flex-start}
.s-relate__cards .c-card-media__foot{margin-top:auto}
.s-relate__cards .c-card-media__desc{-webkit-line-clamp:3;min-height:4.4rem}
.s-relate--wide .s-relate__cards{grid-template-columns:repeat(2,1fr)}
.s-relate--wide .c-card-media__body{min-height:16.4rem}
.s-relate--vertical .s-relate__cards{grid-template-columns:repeat(3,1fr)}
.s-relate--vertical .c-card-media__media{height:44.1rem}
.s-relate--vertical .c-card-media__body{min-height:14.8rem}
.l-content--anim .s-relate,.l-content--clip .s-relate{gap:2.6rem}
.c-like--play{color:var(--c-text-primary)}
.c-like--play svg{width:1.6rem;height:1.6rem}

/* ── Казка: панель читання, колонка 660, ілюстрація в тексті ── */
.s-worktext--tale{padding:3rem 4.8rem 2.6rem}
.s-tale__panel{display:flex;align-items:center;gap:1.6rem;padding-bottom:2.4rem}
.s-tale__size{display:flex;align-items:center;gap:1rem;height:3.9rem;padding:0 1.4rem;border-radius:var(--r-full);background:var(--c-bg-cream)}
.s-tale__size-label{font:500 1.3rem/1.8rem var(--f-body);color:var(--c-text-secondary)}
.s-tale__size-btn{font:600 1.3rem/1 var(--f-body);color:var(--c-text-muted)}
.s-tale__size-btn--plus{font-size:1.8rem;color:var(--c-brand-primary)}
.s-tale__size-btn:disabled{opacity:.4;cursor:default}
.s-tale__spacer{flex:1 1 auto}
.s-tale__tool{display:inline-flex;align-items:center;gap:0.9rem;font:600 1.4rem/2rem var(--f-body);color:var(--c-brand-primary);text-decoration:none}
.s-tale__tool svg{width:1.8rem;height:1.8rem}
.s-tale__clip{max-height:47rem}
.s-tale__text{width:66rem;margin:0 auto;padding-top:3.4rem;font:400 1.7rem/3.2rem var(--f-body);color:var(--c-text-primary)}
[data-textsize="-1"] .s-tale__text{font-size:1.5rem;line-height:2.8rem}
[data-textsize="1"] .s-tale__text{font-size:1.9rem;line-height:3.4rem}
[data-textsize="2"] .s-tale__text{font-size:2.1rem;line-height:3.6rem}
.s-tale__text p{margin:0}
.s-tale__text > :is(p,figure) + :is(p,figure){margin-top:2.2rem}
.s-tale__figure{margin:2.2rem 0 0;height:26rem;border-radius:1.6rem;overflow:hidden}
.s-tale__figure img{width:100%;height:100%;object-fit:cover}
.s-worktext--tale .s-worktext__fade{height:14rem}
.s-worktext--tale .s-worktext__more{padding:0.4rem 0 2.2rem}
.s-worktext--tale .s-worktext__actions{padding:2rem 0 0}
.l-content--tale .s-media-row{gap:2.8rem}
.l-content--tale .s-bookcard__media{height:28rem}
/* Аудіо ще немає — картка книги займає свою половину ряду, як у макеті. */
.l-content--tale .s-media-row > .s-bookcard:only-child{flex:0 0 calc(50% - 1.4rem)}
.l-content--tale .s-relate{padding-top:1.4rem}

/* ── Анімація / кліп: опис і дії ───────────────────────────── */
.l-content--anim,.l-content--clip{gap:3.6rem}
.s-video-side{display:flex;flex-direction:column;gap:2.8rem;min-width:0;flex:1 1 auto}
.s-vabout{display:flex;flex-direction:column;gap:1.4rem;padding:3.2rem 3.6rem 3rem;background:var(--c-bg-surface);border-radius:2rem}
.s-vabout .s-title-row__icon,.s-vabout .s-title-row__icon svg{width:2.2rem;height:2.2rem}
.s-vabout__desc{font:400 1.6rem/2.6rem var(--f-body);color:var(--c-text-secondary)}
.s-vabout__desc p{margin:0}
.s-vabout__credit{font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-muted)}
.s-vabout__actions{display:flex;align-items:center;gap:2.6rem;padding-top:0.8rem}
.s-vabout__action{display:inline-flex;align-items:center;gap:0.9rem;font:400 1.4rem/2.2rem var(--f-body);color:var(--c-text-secondary);text-decoration:none}
.s-vabout__action svg{width:1.8rem;height:1.8rem}
.s-vabout__action:hover{color:var(--c-brand-primary);text-decoration:none}
.l-content--clip .s-video-row{gap:2.8rem}
.l-content--clip .s-sign,.l-content--anim .s-sign{padding-top:3.2rem;padding-bottom:3.2rem}
.c-video__bar{background:rgba(15,20,28,.55)}

@media (max-width:767px){
  .s-workhead--tale,.s-workhead--video{min-height:0}
  .s-relate{padding-top:0}
  .s-relate__list{grid-template-columns:1fr 1fr;gap:1.2rem}
  .s-relate__cards,.s-relate--wide .s-relate__cards,.s-relate--vertical .s-relate__cards{grid-template-columns:1fr;gap:1.4rem}
  .s-relate--vertical .s-relate__cards{grid-template-columns:1fr 1fr}
  .s-relate--vertical .c-card-media__media{height:28rem}
  .s-relate--vertical .c-card-media__foot{flex-wrap:wrap;height:auto;gap:0.4rem}
  .s-worktext--tale{padding:2rem 2.2rem 1.8rem}
  .s-tale__panel{flex-wrap:wrap;gap:1.2rem;padding-bottom:1.6rem}
  .s-tale__spacer{display:none}
  .s-tale__text{width:auto;padding-top:2rem;font-size:1.6rem;line-height:2.8rem}
  .s-tale__figure{height:18rem}
  .l-content.l-content--anim,.l-content.l-content--clip{gap:2rem}
  .s-video-side{gap:2rem}
  .s-vabout{padding:2.4rem 2.2rem}
  .s-vabout__actions{flex-wrap:wrap;gap:1.4rem 2rem}
}

/* Точні висоти за макетом. */
.s-relate__wide-img .s-relate__img{position:absolute;inset:0}
.s-note .s-title-row--tight{height:2.8rem}
.l-content--tale .s-sign{padding-top:3.2rem;padding-bottom:3.2rem}
:is(.l-content--anim,.l-content--clip) .s-worktext__head{margin-bottom:1.8rem}
:is(.l-content--anim,.l-content--clip) .s-worktext--bare .s-worktext__more{padding-top:0.8rem;height:2.8rem}
.s-relate--vertical .c-card-media__body{min-height:0}
.s-relate--vertical .c-card-media__foot{height:2.8rem;padding-top:0}
@media (max-width:767px){
  .l-content--tale .s-media-row > .s-bookcard:only-child{flex:1 1 auto}
  .s-relate--vertical .c-card-media__foot{height:auto}
}
/* Вертикальні картки 9:16 у каталозі: рядок мети 28 (Figma 82:6222). */
.s-grid--vertical .c-card-media__body{min-height:0}
.s-grid--vertical .c-card-media__foot{height:2.8rem;padding-top:0}
@media (max-width:767px){ .s-grid--vertical .c-card-media__foot{height:auto} }
@media (max-width:767px){
  /* У колонці flex-basis 0 стискав картку до min-height і ховав текст. */
  .s-relate__wide{flex:0 0 auto}
}
@media (max-width:767px){
  .s-grid--vertical .c-card-media__foot{flex-wrap:wrap;gap:0.4rem 1rem}
}
/* Текстові сторінки (правові тощо): поля 20 на телефоні. */
.s-prose strong{color:var(--c-text-primary);font-weight:600}
@media (max-width:767px){
  .l-content > .s-prose{padding:0 2rem}
  .s-prose h2{font:600 2.2rem/3rem var(--f-head);margin-top:2.8rem}
}
/* Шапки вищі за типову 300: «Про автора» 320 (71:3083), «Пісні» 310 (79:4136). */
@media (min-width:768px){
  .s-pagehead--about{min-height:32rem}
  .s-pagehead--songs{min-height:31rem}
}

/* «Книги»: інформаційні картки замість переходів (Figma 87:6502 «Секція / Як читати» — 339×172). */
.s-other--info{padding-top:2.4rem}
.s-other__item--info{gap:1.2rem;min-height:17.2rem;padding:2.6rem 2.8rem;background:var(--c-bg-cream)}
.s-other__item--info .s-other__icon,.s-other__item--info .s-other__icon svg{width:2.6rem;height:2.6rem;color:var(--c-brand-primary)}
.s-other__item--info .s-other__title{font:600 1.8rem/2.6rem var(--f-head)}
.s-other__item--info .s-other__desc{flex:0 0 auto}

/* Картки каталогу (дві мети): мета в один рядок, «Читати» без стрілки — Figma 58:1377, 82:5019, 82:5617. */
.c-card-media--two .c-card-media__metas{flex-wrap:nowrap;gap:1rem;min-width:0}
.c-card-media--two .c-card-media__metas .c-meta{white-space:nowrap}
.c-card-media--two .c-card-media__cta svg{display:none}
/* Каталог: довший опис — до 3 рядків, назва — до 2 (Figma 82:5019, 82:5617); книги — до 3 рядків (87:6502). */
.s-grid .c-card-media--two .c-card-media__desc{-webkit-line-clamp:3}
.s-grid .c-card-media--two .c-card-media__title{-webkit-line-clamp:2}
.s-grid--books .c-card-book__desc{-webkit-line-clamp:3}
.s-grid--books .c-card-book__title{-webkit-line-clamp:2}
/* Картка книги в каталозі 248×588: обкладинка 316 + текст 272 (на головній — 250). */
.s-grid--books .c-card-book__body{height:27.2rem}
@media (max-width:767px){ .s-grid--books .c-card-book__body{height:auto} }

/* Панель відео: gap 16 (анімація) / 12 (кліп 9:16), іконки 19, play 20. */
.c-video__icon{display:grid;place-items:center;flex:0 0 auto}
.c-video__icon svg{width:1.9rem;height:1.9rem}
.c-video__icon--play svg{width:1.6rem;height:1.6rem}
.c-video--vertical .c-video__bar{gap:1.2rem}