/* Chronica · главная. Общие токены и компоненты — в chronica.css */

/* ---------- шапка: разделы по центру, заказ справа ---------- */
.hnav { display: flex; gap: clamp(14px, 2.2vw, 30px); justify-content: center; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.hnav a { position: relative; padding: 6px 0; transition: color .2s; }
.hnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--e); }
.hnav a:hover { color: var(--ink); }
.hnav a:hover::after { transform: scaleX(1); }
.top__cta { justify-self: end; }
@media (max-width: 860px) {
  .hnav { display: none; }
  .top { grid-template-columns: 1fr auto; }
}


/* ---------- фон: не голый белый, а бумага с акварелью ---------- */
body { background: #EDF3F2 url(/assets/home/grain.png) repeat; }
.top.is-stuck { background: rgba(237,243,242,.78); }
.sec { padding-block: clamp(70px, 11vh, 130px); overflow: clip; }
.sec > .wrap, .hero > .wrap, .coda > .hand { position: relative; z-index: 1; }
/* акварельные пятна из КП: --l/--t/--w — место и размер, --r — поворот, --o — плотность */
.wc { position: absolute; z-index: 0; left: var(--l); top: var(--t); width: var(--w); height: auto; opacity: var(--o, .5); transform: rotate(var(--r, 0deg)); pointer-events: none; user-select: none; }
/* панели — цветные листы с крупным скруглением, отступают от краёв окна */
.panel { margin-inline: clamp(8px, 1.4vw, 22px); border-radius: clamp(26px, 3.4vw, 52px); position: relative; isolation: isolate; }
.panel + .panel { margin-top: clamp(8px, 1.4vw, 22px); }
.panel--tint { background: radial-gradient(120% 90% at 85% 0%, #E9EEFA 0, transparent 55%), linear-gradient(160deg, #DCEAE7, #D3E4E2); }
.panel--soft { background: radial-gradient(90% 120% at 0% 100%, #DCE7FB 0, transparent 60%), linear-gradient(180deg, #E4ECF3, #E9F0EF); }
.panel--dark { background: radial-gradient(80% 90% at 100% 0%, #24555A 0, transparent 60%), linear-gradient(165deg, #1B4045, #15282C 70%); color: #F4F7F6; }

/* общий вид заголовков секций: слева, крупно */
.sec h2 { font: 400 clamp(32px, 3.8vw, 56px)/1.06 var(--serif); letter-spacing: -.02em; }
.sec h2 .soft { color: var(--mute); }
.sec-mark { margin-bottom: clamp(16px, 2.4vh, 26px); }

/* ---------- рукописные пометки, как в КП (Caveat) ---------- */
@font-face { font-family: "Caveat"; src: url(/assets/fonts/caveat-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
.hand { font: 600 clamp(22px, 3vw, 34px)/1.05 "Caveat", "Segoe Print", cursive; color: var(--ink); }
.hand--soft { color: var(--ink-2); }

/* ---------- сцены: блоки КП в его же координатах ----------
   --W/--H — размер блока в пунктах КП; у детей --x/--y/--w/--fs в тех же пунктах */
.stage { container-type: inline-size; position: relative; width: 100%; aspect-ratio: var(--W) / var(--H); }
.stage * { --u: calc(100cqw / var(--W)); }
.stage .st { position: absolute; margin: 0; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); transform: rotate(var(--r, 0deg)); }
.stage img.st, .stage svg.st { display: block; height: auto; }
/* в Typst верх строки — линия заглавных, в CSS выше; подтягиваем текст на место */
.stage .hand { font-size: max(15px, calc(var(--fs) * var(--u))); line-height: 1.02; translate: 0 -.22em; white-space: nowrap; }
.ink-line path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--e) .35s; }
.ink-line path + path { transition-delay: 1.15s; transition-duration: .25s; }
.is-in .ink-line path { stroke-dashoffset: 0; }

/* ---------- первый экран: текст слева, книги справа ---------- */
.hhero { min-height: calc(100svh - 60px); padding-block: 0 clamp(30px, 6vh, 60px); justify-content: center; }
.hhero__in { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.hhero__txt { align-items: flex-start; text-align: left; }
.hhero .hlogo { margin: clamp(20px, 4vh, 40px) 0 clamp(18px, 3vh, 30px) -1.5%; width: min(420px, 74vw); }
.hhero h1 { margin-top: 0; max-width: none; font-size: clamp(38px, 4.7vw, 76px); line-height: 1.04; }
.hhero h1 em { color: var(--accent); }
.hhero .hero__lede { max-width: 520px; }
.hhero .hero__cta { justify-content: flex-start; }
.hart { --t: 0; position: relative; aspect-ratio: 1 / .9; }
.hart__open { position: absolute; right: -6%; top: 2%; width: 104%; height: auto; transform: rotate(4deg) translateY(calc(var(--t) * 14px)); }
.hart__closed { position: absolute; left: -2%; bottom: -2%; width: 40%; height: auto; transform: rotate(calc(-8deg + var(--t) * 4deg)) translateY(calc(var(--t) * -18px)); filter: drop-shadow(0 30px 30px rgba(21,40,44,.18)); }
@media (max-width: 900px) {
  .hhero { min-height: 0; }
  .hhero__in { grid-template-columns: 1fr; }
  .hhero__txt { align-items: center; text-align: center; }
  .hhero .hlogo { margin-left: 0; margin-top: clamp(40px, 8vh, 70px); }
  .hhero .hero__cta { justify-content: center; }
  .hart { width: min(560px, 100%); margin: 10px auto 0; }
}

/* ---------- что мы делаем: заголовок слева, карточки справа ---------- */
.what__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.what__head { position: sticky; top: 110px; }
.facts { display: grid; gap: 14px; }
.fact { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-xl); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -40px rgba(21,40,44,.35); }
.fact__n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--accent); font: 400 italic 21px/1 var(--serif); }
.fact h3 { margin-top: 8px; font: 400 clamp(22px, 2vw, 28px)/1.15 var(--serif); letter-spacing: -.01em; }
.fact p { margin-top: 10px; font: 400 16px/1.55 var(--sans); color: var(--ink-2); }
@media (max-width: 900px) {
  .what__in { grid-template-columns: 1fr; }
  .what__head { position: static; }
  .fact { grid-template-columns: 1fr; }
  .fact h3 { margin-top: 14px; }
}

/* ---------- кому дарят ---------- */
.gifts__in { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.gifts__head p { margin-top: 20px; max-width: 440px; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--pill); background: rgba(251,252,252,.7); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 14px/1 var(--sans); color: var(--ink-2); }
.gifts__book { opacity: 0; transition: opacity .6s var(--e), translate .7s var(--e); transition-delay: calc(.15s + var(--dd, 0s)); }
.gifts__arrows { opacity: 0; transition: opacity .8s var(--e) .7s; }
.gifts__stage .hand { opacity: 0; transition: opacity .6s var(--e) .9s; }
.gifts__stage.is-in :is(.gifts__book, .gifts__arrows, .hand) { opacity: 1; }
.gifts__stage .gifts__book { translate: 0 26px; }
.gifts__stage.is-in .gifts__book { translate: 0 0; }
.gifts__note { text-align: right; translate: -100% -.22em !important; }
.gifts__note-m { display: none; }
@media (max-width: 960px) { .gifts__in { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .gifts__note { display: none; }
  .gifts__note-m { display: block; margin-top: 18px; text-align: right; font-size: 20px; }
}

/* ---------- пример макета: два разворота рядом ---------- */
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: end; margin-bottom: clamp(30px, 5vh, 56px); }
.split-head > p { max-width: 460px; justify-self: end; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.mocks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.6vw, 40px); }
.mock { margin: 0; }
.mock img { display: block; width: 100%; height: auto; }
.mock figcaption { margin-top: 2px; padding-left: 5%; font-size: clamp(22px, 2vw, 28px); color: var(--ink-2); }
@media (max-width: 860px) {
  .split-head, .mocks { grid-template-columns: 1fr; }
  .split-head > p { justify-self: start; }
}

/* ---------- книга в руках: текст, книга А5, бумага ---------- */
.specs__in { display: grid; grid-template-columns: .85fr 1fr .9fr; gap: clamp(20px, 3vw, 50px); align-items: end; }
.specs__txt { align-self: center; }
.specs__list { margin: 30px 0 0; }
.specs__list > div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line-2); }
.specs__list dt { font: 500 13.5px/1.5 var(--sans); color: var(--mute); }
.specs__list dd { margin: 0; font: 400 15.5px/1.5 var(--sans); color: var(--ink); }
.specs__fig { margin: 0; }
.specs__fig figcaption { position: relative; display: inline-block; margin-top: 16px; left: calc(var(--cx) / var(--W) * 100%); transform: translateX(-50%); font: 400 15.5px/1.4 var(--sans); color: var(--ink-2); white-space: nowrap; }
.dim { font: 400 max(11px, calc(21 * var(--u)))/1 var(--sans); color: var(--ink-2); text-align: center; white-space: nowrap; }
.specs__paper-note { text-align: right; translate: -100% -.22em !important; }
.specs__paper-note small { display: block; margin-top: calc(6 * var(--u)); font-size: max(13px, calc(27 * var(--u))); line-height: .98; color: var(--ink-2); }
@media (max-width: 1100px) {
  .specs__in { grid-template-columns: 1fr 1fr; }
  .specs__txt { grid-column: 1 / -1; }
  .specs__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
  .specs__list > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 680px) {
  .specs__in { grid-template-columns: 1fr; gap: 50px; }
  .specs__list { grid-template-columns: 1fr; }
  .specs__fig { width: 100%; max-width: 420px; justify-self: center; }
  .specs__fig:nth-child(2) { padding-right: 26px; }
}

/* ---------- как мы работаем: тёмная панель, спираль справа ---------- */
.how__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.how__side { position: sticky; top: 110px; }
.how .sec-mark { color: rgba(244,247,246,.75); }
.how .sec-mark i { background: #8FCFCA; }
.how h2 { color: #F4F7F6; }
.how h2 .soft { color: rgba(244,247,246,.45); }
.term { margin-top: 34px; padding: 24px 26px; border-radius: var(--r-l); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.term__k { display: block; font: 600 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #8FCFCA; }
.term b { display: block; margin-top: 12px; font: 400 clamp(32px, 3.4vw, 46px)/1 var(--serif); }
.term p { margin-top: 12px; font: 400 15.5px/1.5 var(--sans); color: rgba(244,247,246,.7); }
.how__foot { margin-top: 18px; font: 400 14px/1.5 var(--sans); color: rgba(244,247,246,.5); }
.spiral { list-style: none; padding: 0; margin: 0; width: 100%; }
.spiral__brush img { display: block; width: 100%; height: auto; }
.spiral__brush { clip-path: inset(0 0 100% 0); transition: clip-path 2.4s cubic-bezier(.45,.05,.35,1) .2s, opacity .4s !important; }
.spiral__brush.is-in { clip-path: inset(0 0 0 0); }
.spiral__step, .spiral__done { position: absolute; left: 0; top: calc(var(--i, 6) * 158 * var(--u)); width: 100%; height: calc(158 * var(--u)); }
.spiral__step::before, .spiral__done::before { content: ""; position: absolute; left: calc(553 * var(--u)); top: calc(15 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #8FCFCA; }
.spiral__step > b { position: absolute; left: 0; top: 0; font: 400 italic calc(44 * var(--u))/1 var(--serif); color: #8FCFCA; }
.spiral__step > div { position: absolute; left: calc(70 * var(--u)); top: calc(6 * var(--u)); width: calc(460 * var(--u)); }
.spiral__step h3 { font: 600 calc(27 * var(--u))/1.15 var(--sans); color: #F4F7F6; }
.spiral__step p { margin-top: calc(10 * var(--u)); font: 400 calc(23 * var(--u))/1.45 var(--sans); color: rgba(244,247,246,.72); }
.spiral .hand { color: #CFE6E3; }
.spiral__step > .hand { position: absolute; left: calc((580 + var(--b) * .75) * var(--u)); top: calc(79 * var(--u)); font-size: calc(31 * var(--u)); white-space: nowrap; translate: 0 -.22em; }
.spiral__done > .hand { position: absolute; left: calc(410 * var(--u)); top: 0; font-size: calc(31 * var(--u)); translate: 0 -.22em; }
@media (max-width: 1100px) {
  .how__in { grid-template-columns: 1fr; }
  .how__side { position: static; max-width: 640px; }
}
@media (max-width: 760px) {
  .spiral { aspect-ratio: auto; position: relative; padding-left: 22px; }
  .spiral::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 14px; width: 2px; border-radius: 2px; background: #8FCFCA; opacity: .55; }
  .spiral__brush { display: none; }
  .spiral__step, .spiral__done { position: relative; top: auto; height: auto; display: grid; grid-template-columns: 34px 1fr; padding-bottom: 8px; }
  .spiral__step::before, .spiral__done::before { left: -22px; top: 8px; width: 12px; height: 12px; }
  .spiral__step > b { position: static; font-size: 32px; }
  .spiral__step > div { position: static; width: auto; padding-top: 2px; }
  .spiral__step h3 { font-size: 19px; }
  .spiral__step p { margin-top: 6px; font-size: 16px; }
  .spiral__step > .hand, .spiral__done > .hand { position: static; grid-column: 2; translate: none; margin: 10px 0 18px; font-size: 22px; }
  .spiral__done > .hand { grid-column: 1 / -1; margin: 0; }
}

/* ---------- вопросы: заголовок слева ---------- */
.faq__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.faq__head { position: sticky; top: 110px; }
.faq__head p { margin-top: 18px; max-width: 360px; font: 400 16px/1.55 var(--sans); color: var(--ink-2); }
@media (max-width: 900px) { .faq__in { grid-template-columns: 1fr; } .faq__head { position: static; } }

/* ---------- финальная фраза ---------- */
.coda { position: relative; text-align: center; padding: clamp(90px, 14vh, 150px) var(--gut) 10px; overflow: clip; }
.coda .wc { top: 58%; transform: translate(-50%, -50%) rotate(var(--r)); }
.coda .hand { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.05; }

@media (prefers-reduced-motion: reduce) {
  .hart__open, .hart__closed { transform: none; }
  .spiral__brush { clip-path: none; }
  .ink-line path { stroke-dashoffset: 0; }
}

/* ---------- вопросы ---------- */
.qa details { border-top: 1px solid var(--line-2); }
.qa details:last-child { border-bottom: 1px solid var(--line-2); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 400 clamp(19px, 1.8vw, 23px)/1.3 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); font: 400 18px/1 var(--sans); color: var(--ink-2); transition: transform .3s var(--e), background .2s; }
.qa details[open] summary::after { transform: rotate(45deg); background: var(--card); }
.qa details p { padding: 0 52px 24px 0; font: 400 16px/1.6 var(--sans); color: var(--ink-2); }

/* ---------- заявка ---------- */
.order__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.order__head h2 { font: 400 clamp(38px, 5vw, 72px)/1.02 var(--serif); letter-spacing: -.025em; }
.order__head p { margin-top: 20px; max-width: 440px; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.lead, .lead-ok { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-xl); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(21,40,44,.3); }
.lead { display: grid; gap: 14px; }
.lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: grid; gap: 7px; }
.fld > span { font: 500 13px/1 var(--sans); color: var(--ink-2); }
.fld > span b { color: var(--accent); font-weight: 500; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--r-m); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 16px/1.4 var(--sans); color: var(--ink); outline: 0; transition: box-shadow .2s; -webkit-appearance: none; appearance: none; }
.fld select { background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.fld textarea { resize: vertical; min-height: 90px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--pale); }
.fld input:focus, .fld select:focus, .fld textarea:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.fld.is-bad input { box-shadow: inset 0 0 0 1.5px #B8432F; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead__send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.lead__send .btn { height: 52px; padding: 0 26px; }
.lead__msg { font: 500 13.5px/1.4 var(--sans); color: #B8432F; }
.lead-ok { text-align: center; padding-block: 50px; }
.lead-ok__ic { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #FFFFFF; font: 400 22px/1 var(--serif); }
.lead-ok h3 { margin-top: 22px; font: 400 32px/1.1 var(--serif); }
.lead-ok p { margin-top: 12px; font: 400 16px/1.55 var(--sans); color: var(--ink-2); }
@media (max-width: 860px) { .order__in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .lead__row { grid-template-columns: 1fr; } }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 70px; }