/*
  Kidsbook — оформление «Soft Story» (03). Подключается поверх style.css / page.css
  на всех страницах сайта; переменные и правила ниже перебивают базовые.
*/

:root {
  --paper: #f6efe5 !important;
  --paper-card: #fffaf3 !important;
  --paper-deep: #eadccb !important;
  --ink: #373832 !important;
  --ink-soft: #626158 !important;
  --ink-faint: #837e72 !important;
  --thread: #c46f59 !important;
  --thread-deep: #a95745 !important;
  --foil: #d8a56d !important;
  --kraft: #dcc4a7 !important;
  --line: #e3d7c8 !important;
  --dark: #425b4d !important;
  --dark-soft: #f0eee7 !important;
  --sage: #dce3d7;
  --sage-deep: #425b4d;
  --peach: #efcfbc;
  --sand: #ead7be;
  --milk: #fffaf3;
  --shadow-soft: 0 24px 60px -40px rgba(77, 61, 45, .42) !important;
  --wrap: 1240px !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body::before { display: none !important; }
img { max-width: 100%; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(196, 111, 89, .42) !important;
  outline-offset: 4px !important;
}

/* Shared type */
h1, h2, h3,
.panel h3, .tlabel b, .pr h3, .book-card h3, .uni-card h3, .note-card h3 {
  font-family: Fraunces, Georgia, serif !important;
  font-weight: 450 !important;
  letter-spacing: -.028em !important;
}
.wrap { padding-inline: clamp(20px, 5vw, 70px) !important; }
.beta {
  border-radius: 999px !important;
  background: #dfe6da !important;
  color: #4d6153 !important;
  padding: 6px 11px !important;
}

/* Main navigation */
.topbar {
  position: sticky !important;
  top: 14px !important;
  width: min(1160px, calc(100% - 28px)) !important;
  margin: 0 auto !important;
  border: 1px solid rgba(91, 73, 54, .09) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 243, .9) !important;
  box-shadow: 0 18px 46px -34px rgba(60, 45, 30, .72) !important;
  backdrop-filter: blur(16px) !important;
}
.topbar-in { padding: 10px 18px !important; }
.topbar nav { margin-left: auto !important; }
.topbar nav a { color: var(--ink-soft) !important; }
.topbar nav a:hover { color: var(--thread) !important; }
.topbar .logo, .emboss {
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--ink) !important;
  letter-spacing: .14em !important;
}
.emboss em { color: var(--thread) !important; text-shadow: none !important; }
.lasse {
  right: 4vw !important;
  width: 14px !important;
  height: 78px !important;
  background: var(--thread) !important;
  box-shadow: none !important;
}

/* Buttons */
.btn {
  min-height: 52px !important;
  border-radius: 999px !important;
  padding: 15px 28px !important;
  box-shadow: none !important;
  transition: color .22s ease, background .22s ease, transform .22s ease !important;
}
.btn:hover { transform: translateY(-2px) !important; }
.btn-thread { background: var(--thread) !important; color: #fffaf3 !important; }
.btn-thread:hover { background: var(--thread-deep) !important; }
.btn-line { border-color: transparent !important; background: var(--milk) !important; }
.btn-ink { background: var(--sage-deep) !important; color: white !important; }
.btn-foil { background: #f0cda7 !important; color: #4d4035 !important; }
.tlink { border: 0 !important; color: var(--thread) !important; }

/* Hero */
.hero {
  min-height: 72vh !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr) !important;
  gap: clamp(34px, 5vw, 76px) !important;
  padding-block: clamp(48px, 6.5vw, 86px) !important;
  isolation: isolate;
}
.hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: min(48vw, 660px) !important;
  aspect-ratio: 1 !important;
  /* не дальше края экрана: иначе страница на телефоне ездит вбок */
  right: max(-6vw, calc(-1 * clamp(20px, 5vw, 70px))) !important;
  top: 7% !important;
  border-radius: 44% 56% 62% 38% / 50% 39% 61% 50% !important;
  background: var(--sage) !important;
}
.hero h1 {
  max-width: 740px !important;
  font-size: clamp(40px, 4.8vw, 68px) !important;
  line-height: 1.02 !important;
}
.hero h1 em { color: var(--thread) !important; }
.hero .lead {
  font-family: Inter, sans-serif !important;
  font-size: clamp(17px, 1.6vw, 20px) !important;
  max-width: 560px !important;
}
.hero .lead-2 {
  font-family: Alegreya, Georgia, serif !important;
  color: #765f50 !important;
  font-size: 19px !important;
}
.hero-art { transform: rotate(1deg) !important; }
.hero-duo { gap: 22px !important; }
.hbook .cover {
  border-radius: 18px 34px 34px 18px !important;
  box-shadow: 0 35px 72px -38px rgba(55, 45, 35, .72) !important;
}
.hero-art .stamp {
  border: 0 !important;
  background: #f1cda8 !important;
  color: #704d3a !important;
  transform: rotate(-7deg) !important;
  width: 108px !important;
  height: 108px !important;
  box-shadow: none !important;
}
.hbook .cap { font-family: Inter, sans-serif !important; font-size: 13px !important; transform: none !important; }

/* Image ribbon */
.strip { margin-top: 14px !important; }
.strip img {
  height: 215px !important;
  border-radius: 40% 60% 46% 54% / 48% 42% 58% 52% !important;
  box-shadow: none !important;
}
.strip img:nth-child(2n) { border-radius: 58% 42% 56% 44% / 42% 55% 45% 58% !important; }
.strip .cap { background: var(--milk) !important; border-radius: 999px !important; }

/* Section rhythm */
.sec-head { padding-top: clamp(92px, 11vw, 150px) !important; }
.sec-head h2 { font-size: clamp(40px, 5.5vw, 74px) !important; }
.sec-head .sub { font-family: Inter, sans-serif !important; font-style: normal !important; }
.stitchline, .stitch {
  width: 72px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #d9a58f !important;
}

/* Offers */
.offers { gap: 20px !important; }
.panel {
  border: 0 !important;
  border-radius: 36px !important;
  min-height: 430px !important;
  padding: clamp(32px, 4vw, 55px) !important;
}
.panel-ready { background: var(--milk) !important; }
.panel-named { background: var(--sage-deep) !important; }
.panel-named .pline, .panel-named .pnote { color: #e6ece4 !important; }
.panel-named .pprice { color: #fff0d6 !important; }

/* Book preview */
.band-ink {
  background: var(--sage-deep) !important;
  margin: 120px 2vw 0 !important;
  border-radius: 48px !important;
  padding: 10px 0 105px !important;
  overflow: hidden !important;
}
.band-ink .sec-head h2 { color: #fffaf3 !important; }
.band-ink .sec-head h2 em { color: #ffd5c0 !important; }
.band-ink .sec-head .sub, .band-ink .fb-bar { color: #f0eee7 !important; }
.band-ink::before {
  height: 72px !important;
  top: -1px !important;
  background: var(--paper) !important;
  clip-path: ellipse(58% 60% at 50% 0) !important;
}
.band-ink::after { display: none !important; }
.band-ink .sec-head { padding-top: 120px !important; }
.fbtabs button { border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.09) !important; }
.fbtabs button.act { background: var(--paper) !important; color: var(--ink) !important; }
.fb { border-radius: 18px !important; overflow: hidden !important; filter: drop-shadow(0 35px 45px rgba(42,55,46,.36)) !important; }

/* Shelf */
.shelf {
  justify-content: center !important;
  gap: 48px !important;
  padding: 58px !important;
  background: #e4d2bc !important;
  border-radius: 48% 52% 10px 10px / 16% 16% 10px 10px !important;
}
.shelf-board { height: 12px !important; background: #c9ab86 !important; border-radius: 0 0 18px 18px !important; }
.shelf-labels { justify-content: center !important; gap: 48px !important; }
.tome, .tlabel { width: clamp(150px, 18vw, 230px) !important; }
.tome .tcover { border-radius: 12px 24px 24px 12px !important; }
.tlabel { text-align: center !important; }

/* Physical book */
.inhand {
  border: 0 !important;
  border-radius: 42px !important;
  background: var(--milk) !important;
  padding: clamp(24px, 4vw, 55px) !important;
}
.inhand-photo { position: relative !important; }
.inhand-photo::before {
  content: "" !important;
  position: absolute !important;
  inset: -18px 18px 18px -18px !important;
  border-radius: 44% 56% 48% 52% / 54% 45% 55% 46% !important;
  background: var(--sage) !important;
}
.inhand-photo img { position: relative !important; border-radius: 36px !important; }
.specs li { border-color: var(--line) !important; }
.specs li b { color: var(--thread) !important; }

/* Personalization */
.own {
  border: 0 !important;
  border-radius: 40px !important;
  background: #e2e5d9 !important;
  padding: clamp(20px, 4vw, 48px) !important;
}
.own figure img { border-radius: 30px !important; }

/* Benefits and principles */
.why {
  border: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}
.why-row {
  display: block !important;
  background: var(--milk) !important;
  border: 0 !important;
  border-radius: 28px !important;
  padding: 34px !important;
}
.why-row b { font-family: Fraunces, Georgia, serif !important; font-size: 27px !important; color: var(--thread) !important; }
.why-row p { margin-top: 12px !important; }
.sec-head#principles {
  max-width: none !important;
  padding-top: clamp(78px, 8vw, 112px) !important;
  padding-right: min(29vw, 330px) !important;
  overflow: visible;
}
.sec-head#principles h2 { max-width: 780px; }
.principles-art {
  position: absolute;
  right: 6px;
  bottom: 16px;
  width: min(24vw, 270px);
  overflow: visible;
}
.principles-art path {
  fill: none;
  stroke: #a9b8aa;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  animation: principleLine 18s linear infinite;
}
.principles-art circle { fill: var(--thread); transform-box: fill-box; transform-origin: center; animation: principleDot 3.2s ease-in-out infinite; }
.principles-art circle:nth-of-type(2) { animation-delay: -.9s; }
.principles-art circle:nth-of-type(3) { animation-delay: -1.8s; }
.principles-art .leaf { fill: #dce3d7; stroke: #708374; stroke-dasharray: none; animation: principleLeaf 5s ease-in-out infinite; transform-origin: center; }
.pr-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.pr-tabs { display: flex; gap: 7px; padding: 5px; border-radius: 999px; background: #e9dece; }
.pr-tabs button, .pr-arrows button {
  display: grid;
  place-items: center;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.pr-tabs button { width: 43px; height: 37px; border-radius: 999px; background: transparent; font-size: 12px; font-weight: 600; }
.pr-tabs button:hover { color: var(--thread); }
.pr-tabs button.active { background: var(--milk); color: var(--thread); box-shadow: 0 8px 22px -16px rgba(68,50,35,.6); }
.pr-arrows { display: flex; gap: 8px; }
.pr-arrows button { width: 46px; height: 46px; border-radius: 50%; background: var(--milk); font-size: 19px; }
.pr-arrows button:hover:not(:disabled) { color: var(--thread); transform: translateY(-2px); }
.pr-arrows button:disabled { opacity: .35; cursor: default; }
.princ {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 4px max(12vw, 120px) 18px 0;
}
.princ::-webkit-scrollbar { display: none; }
.pr {
  flex: 0 0 min(720px, 76vw);
  scroll-snap-align: start;
  border: 0 !important;
  border-radius: 38px !important;
  padding: clamp(28px, 4vw, 42px) !important;
  background: var(--milk) !important;
}
.pr:nth-child(2), .pr:nth-child(3) { background: #e1e6da !important; }
.pr-n { color: var(--thread) !important; }
.pr > p { max-width: 64ch; }
.pr-src { margin: 22px 0 0 !important; border: 0 !important; background: rgba(255,255,255,.52) !important; border-radius: 20px !important; padding: 0 !important; overflow: hidden; }
.pr-src summary { position: relative; padding: 15px 48px 15px 18px; color: var(--thread); cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.pr-src summary::-webkit-details-marker { display: none; }
.pr-src summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; }
.pr-src[open] summary::after { content: "−"; }
.pr-src p { margin: 0 !important; padding: 0 18px 18px; color: var(--ink-soft) !important; font-size: 14px !important; font-style: italic; }
.pr-src p b { display: none !important; }
@keyframes principleLine { to { stroke-dashoffset: -96; } }
@keyframes principleDot { 0%,100% { transform: scale(.85); opacity: .68; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes principleLeaf { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(4deg); } }

/* Founder, FAQ, footer */
.about {
  border: 0 !important;
  border-radius: 44px !important;
  background: var(--peach) !important;
  padding: clamp(24px, 4vw, 52px) !important;
}
.about figure img { border-radius: 46% 54% 47% 53% / 53% 44% 56% 47% !important; }
.faq details {
  border: 0 !important;
  background: var(--milk) !important;
  border-radius: 24px !important;
  margin-bottom: 10px !important;
  padding-inline: 24px !important;
}
.faq summary { font-size: 19px !important; }
.footer {
  border: 0 !important;
  border-radius: 44px 44px 0 0 !important;
  background: var(--sage-deep) !important;
  color: var(--paper) !important;
  padding: 52px !important;
  margin-top: 110px !important;
}
.footer p, .footer-col a, .footer-copy { color: #dce4d9 !important; }

/* Modals */
.overlay { background: rgba(52,64,56,.56) !important; backdrop-filter: blur(12px) !important; }
.book-card, .uni-card, .note-card {
  background: var(--milk) !important;
  border: 0 !important;
  border-radius: 38px !important;
  box-shadow: 0 30px 90px rgba(50, 43, 35, .24) !important;
}
.bm-cover img, .bm-pages img, .uni img { border-radius: 22px !important; }

/* Legal pages and blog index */
body > .wrap:not(.topbar-in) { max-width: 920px; }
body > .wrap > .top {
  position: sticky;
  top: 14px;
  z-index: 20;
  margin-top: 14px;
  padding: 12px 18px !important;
  border: 1px solid rgba(91,73,54,.09);
  border-radius: 999px;
  background: rgba(255,250,243,.92);
  box-shadow: 0 18px 46px -34px rgba(60,45,30,.72);
  backdrop-filter: blur(16px);
}
body > .wrap > h1 {
  font-size: clamp(48px, 8vw, 86px) !important;
  margin-top: clamp(70px, 11vw, 120px) !important;
}
body > .wrap > p, body > .wrap li { font-family: Inter, sans-serif !important; line-height: 1.75 !important; }
body > .wrap h2 { font-size: clamp(26px, 3vw, 34px) !important; margin-top: 52px !important; }
.note { background: var(--sage) !important; border-radius: 28px !important; box-shadow: none !important; padding: 24px 28px !important; }

/* Article pages */
header.top {
  position: sticky !important;
  top: 14px !important;
  z-index: 20 !important;
  width: min(920px, calc(100% - 28px)) !important;
  margin: 14px auto 0 !important;
  border: 1px solid rgba(91,73,54,.09) !important;
  border-radius: 999px !important;
  background: rgba(255,250,243,.92) !important;
  box-shadow: 0 18px 46px -34px rgba(60,45,30,.72) !important;
  backdrop-filter: blur(16px) !important;
}
header.top .in { max-width: none !important; padding: 12px 20px !important; }
header.top a { font-family: Inter, sans-serif !important; }
body > main:not(:has(.hero)) { max-width: 820px !important; padding: clamp(52px, 8vw, 90px) 24px 90px !important; }
body > main article h1 {
  font-family: Fraunces, Georgia, serif !important;
  font-size: clamp(42px, 7vw, 70px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  font-weight: 450 !important;
}
body > main article h2 {
  font-family: Fraunces, Georgia, serif !important;
  color: var(--sage-deep) !important;
  font-size: clamp(25px, 3.4vw, 34px) !important;
  line-height: 1.18 !important;
  margin-top: 2em !important;
}
body > main article p, body > main article li {
  font-family: Inter, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.78 !important;
  color: var(--ink-soft) !important;
}
body > main article > p:first-of-type {
  font-family: Alegreya, Georgia, serif !important;
  font-size: 22px !important;
  color: var(--ink) !important;
}
.meta {
  display: inline-flex !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: var(--sage) !important;
  color: var(--sage-deep) !important;
}
blockquote {
  border: 0 !important;
  border-radius: 24px !important;
  background: var(--sage) !important;
  padding: 22px 26px !important;
}
body > footer { border-top: 0 !important; background: var(--sage-deep) !important; color: #e6ede4 !important; }
body > footer .in { max-width: 820px !important; padding: 28px 24px !important; }
body > footer a { color: #fff4e7 !important; }

/* Standalone Mur flipbook */
body:has(#stage) { background: #e2e5d9 !important; }
#stage { padding: clamp(10px, 2vw, 24px) !important; }
#loader { background: #e2e5d9 !important; color: var(--sage-deep) !important; }
#loader .ring { border-color: rgba(86,107,92,.2) !important; border-top-color: var(--thread) !important; }
#back, .nav-btn {
  background: rgba(255,250,243,.92) !important;
  color: var(--ink) !important;
  box-shadow: 0 14px 36px -24px rgba(50,43,35,.7) !important;
  border: 1px solid rgba(91,73,54,.1) !important;
}
#back { border-radius: 999px !important; }
#pageinfo { color: var(--sage-deep) !important; font-family: Inter, sans-serif !important; font-style: normal !important; }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr !important; min-height: auto !important; }
  .hero::before { width: 82vw !important; right: calc(-1 * clamp(20px, 5vw, 70px)) !important; top: 40% !important; }
  .hero-art { max-width: 650px !important; margin-inline: auto !important; }
  .sec-head#principles { padding-right: 220px !important; }
  .principles-art { width: 210px; }
  .band-ink { margin-inline: 10px !important; }
}

@media (max-width: 680px) {
  .topbar { top: 8px !important; }
  .topbar nav a:nth-child(-n+2) { display: none !important; }
  .hero::before { top: 43% !important; }
  .strip img { height: 155px !important; }
  .panel { min-height: 0 !important; }
  .why { grid-template-columns: 1fr !important; }
  .own-row { gap: 8px !important; }
  .shelf { padding-inline: 28px !important; }
  .footer { padding: 34px 22px !important; }
  .lasse { display: none !important; }
  .sec-head#principles { padding-right: 0 !important; }
  .principles-art { display: none; }
  .pr-gallery-head { align-items: center; }
  .pr-tabs button { width: 38px; }
  .pr-arrows button { width: 42px; height: 42px; }
  .princ { padding-right: 14vw; }
  .pr { flex-basis: 86vw; border-radius: 28px !important; }
  body > .wrap > .top { overflow-x: auto; gap: 17px; }
  body > .wrap > .top a { white-space: nowrap; }
  body > main:not(:has(.hero)) { padding-inline: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}