/* ============================================================
   «Система координат» — лендинг двухтомника
   Эстетика: старинный офорт-фронтиспис, кремовая бумага, сепия, золото
   ============================================================ */

:root{
  --paper:#f3ead7;   --paper-2:#ece0c9;  --paper-3:#e6d8bd;
  --ink:#231e15;     --ink-soft:#4a4234;  --muted:#6d6353;
  --line:#d9cbb0;    --line-2:#cbb992;
  --gold:#b0854a;    --gold-lt:#d8c39a;   --gold-dp:#8a5a2b;
  --espresso:#1a1510; --espresso-2:#231c13; --espresso-3:#2c241a;
  --cream:#f3ead7;   --cream-dim:#cdbd9d;
  --maxw:1180px;
  --shadow-soft:0 18px 50px -22px rgba(40,30,12,.45);
  --shadow-plate:0 2px 0 #fff8ec, 0 0 0 1px var(--line-2), 0 22px 40px -20px rgba(40,28,10,.5);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:18px; line-height:1.72; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(176,133,74,.06), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(138,90,43,.05), transparent 45%);
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; line-height:1.08;
  letter-spacing:.005em; margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* небольшие типографские детали */
.eyebrow{font-family:"Inter",system-ui,sans-serif; text-transform:uppercase;
  letter-spacing:.26em; font-size:12px; font-weight:600; color:var(--gold-dp)}
.orn{color:var(--gold); letter-spacing:.5em; font-size:1.1rem; text-align:center}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); border:0; margin:0}

/* ---- Кнопки ---- */
.btn{display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  font-family:"Inter",system-ui,sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.02em; padding:15px 28px; border-radius:2px; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-gold{background:linear-gradient(180deg,#c79a5a,#a8763c); color:#fff8ec;
  box-shadow:0 1px 0 #e6cfa3 inset, 0 12px 26px -12px rgba(120,78,26,.75); border-color:#8a5a2b}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 1px 0 #e6cfa3 inset, 0 18px 34px -12px rgba(120,78,26,.85)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--gold-dp); color:var(--gold-dp); transform:translateY(-2px)}
.btn-lg{padding:18px 36px; font-size:16px}
.btn-onDark{background:transparent; color:var(--cream); border-color:rgba(216,195,154,.4)}
.btn-onDark:hover{border-color:var(--gold-lt); color:#fff}

/* ---- Навигация ---- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
  background:rgba(243,234,215,.82); border-bottom:1px solid transparent; transition:.3s}
.nav.scrolled{border-bottom-color:var(--line); box-shadow:0 8px 24px -20px rgba(40,28,10,.6)}
.nav-in{display:flex; align-items:center; gap:22px; height:66px}
.brand{font-family:"Cormorant Garamond",serif; font-weight:700; font-size:22px; letter-spacing:.02em;
  display:flex; align-items:center; gap:10px}
.brand .mk{color:var(--gold); font-size:16px}
.nav-links{display:flex; gap:26px; margin-left:auto; font-family:"Inter",sans-serif;
  font-size:14.5px; font-weight:500}
.nav-links a{color:var(--ink-soft); position:relative; padding:4px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--gold-dp); transition:width .28s var(--ease)}
.nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{width:100%}
.nav .btn{padding:10px 20px; font-size:14px}
.nav-cta{margin-left:8px}

/* соцсети — ряд кликабельных иконок (адрес — во всплывающей подсказке) */
.socials{display:flex; align-items:center; gap:12px}
.socials a{display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; color:var(--gold-dp);
  border:1px solid var(--line-2); background:rgba(255,255,255,.45);
  transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s}
.socials a:hover{color:#fff; background:var(--gold-dp); border-color:var(--gold-dp); transform:translateY(-2px)}
.socials svg{width:18px; height:18px; fill:currentColor; display:block}
.socials--onDark a{color:var(--gold-lt); border-color:rgba(216,195,154,.38); background:rgba(255,255,255,.04)}
.socials--onDark a:hover{color:#fff; background:var(--gold-dp); border-color:var(--gold-dp)}
.socials--center{justify-content:center}
/* в шапке — по центру между логотипом и меню */
.nav .socials{margin-left:auto}
.nav .socials a{width:34px; height:34px}
.nav .socials svg{width:17px; height:17px}
/* на страницах-блоках — центр с отступами */
.read-hero .socials--center{margin:22px 0 2px}
.read-cta .socials--center{margin:28px 0 0}
.burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px}
.burger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s}

/* ---- Hero ---- */
.hero{position:relative; background:radial-gradient(120% 120% at 50% -10%, var(--espresso-3), var(--espresso) 70%);
  color:var(--cream); overflow:hidden; border-bottom:1px solid #000}
.hero::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 50% 30%, rgba(176,133,74,.14), transparent 55%);
  pointer-events:none}
.hero-in{display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:center;
  padding:44px 28px 52px; max-width:var(--maxw); margin:0 auto; position:relative}
.hero .eyebrow{color:var(--gold-lt)}
.hero h1{font-size:clamp(38px,4.6vw,58px); color:#f6efe0; margin:.26em 0 .06em; font-weight:600}
.hero h1 .accent{display:block; font-style:italic; font-weight:500; color:var(--gold-lt);
  font-size:.8em}
.hero .lede{font-size:clamp(16px,1.6vw,18.5px); color:#e8ddc6; max-width:36ch; margin:.15em 0 1.1em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.hero-trust{font-family:"Inter",sans-serif; font-size:13px; letter-spacing:.06em;
  color:var(--cream-dim); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-trust b{color:var(--gold-lt); font-weight:600}
.hero-trust .dot{color:var(--gold); opacity:.6}
.plate{position:relative; padding:12px; background:linear-gradient(180deg,#f6eedd,#e9dcc2);
  border:1px solid var(--line-2); box-shadow:var(--shadow-soft)}
.plate::after{content:""; position:absolute; inset:7px; border:1px solid rgba(138,90,43,.35); pointer-events:none}
.plate img{border:1px solid #6f5e3f22}
.hero .plate{transform:rotate(-.6deg); max-width:480px; margin:0 0 0 auto}

/* ---- секции общие ---- */
section{position:relative}
.section{padding:92px 0}
.section-head{text-align:center; max-width:760px; margin:0 auto 54px}
.section-head h2{font-size:clamp(32px,4.4vw,52px); margin:.28em 0 .3em}
.section-head p{color:var(--muted); font-size:19px}
.center{text-align:center}

/* ---- Манифест ---- */
.manifesto{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.manifesto .wrap{max-width:900px; text-align:center; padding-top:78px; padding-bottom:58px}
.manifesto .lead{font-family:"Cormorant Garamond",serif; font-size:clamp(24px,3.2vw,34px);
  line-height:1.35; color:var(--ink); font-weight:500}
.manifesto .lead em{color:var(--gold-dp); font-style:italic}
.manifesto p.sub{color:var(--ink-soft); font-size:19px; margin-top:1.1em}

/* ---- статистика ---- */
.stats-sec{padding:30px 0 26px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:900px; margin:0 auto}
.stat{text-align:center; padding:10px}
.stat .n{font-family:"Cormorant Garamond",serif; font-size:52px; font-weight:700; color:var(--gold-dp); line-height:1}
.stat .l{font-family:"Inter",sans-serif; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-top:8px}
.stat .sub{font-family:"Inter",sans-serif; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); margin-top:3px}

/* ---- Тома ---- */
.vols{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.vol{background:linear-gradient(180deg,#f7f0e0,#efe3ca); border:1px solid var(--line-2);
  border-radius:3px; overflow:hidden; box-shadow:var(--shadow-soft);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.vol:hover{transform:translateY(-4px); box-shadow:0 30px 60px -26px rgba(40,28,10,.55)}
.vol-img{position:relative; padding:16px 16px 0}
.vol-img .fr{padding:10px; background:#f3ead7; border:1px solid var(--line-2)}
.vol-img .fr img{border:1px solid #6f5e3f22}
.vol-body{padding:24px 28px 30px}
.vol .tag{font-family:"Inter",sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-dp); font-weight:600}
.vol h3{font-size:30px; margin:.18em 0 .35em}
.vol .desc{color:var(--ink-soft); font-size:16.5px; margin-bottom:14px}
.vol ul{list-style:none; padding:0; margin:0; font-size:15.5px; color:var(--muted)}
.vol ul li{padding:5px 0 5px 22px; position:relative}
.vol ul li::before{content:"✦"; position:absolute; left:0; color:var(--gold); font-size:12px; top:8px}
.vol .meta{margin-top:16px; font-family:"Inter",sans-serif; font-size:13px; letter-spacing:.05em;
  color:var(--gold-dp); border-top:1px solid var(--line); padding-top:14px}

/* ---- Идея (тёмный editorial) ---- */
.idea{background:radial-gradient(130% 100% at 80% 0%, var(--espresso-3), var(--espresso) 75%);
  color:var(--cream)}
.idea .wrap{max-width:960px}
.idea .eyebrow{color:var(--gold-lt)}
.idea h2{font-size:clamp(30px,4.2vw,48px); color:#f4ecdc; margin:.3em 0 .6em}
.idea .cols{display:grid; grid-template-columns:1fr 1fr; gap:38px; margin-top:10px}
.idea .cols p{color:#ddd0b8; font-size:17.5px}
.idea .cols .k{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:22px;
  color:var(--gold-lt); display:block; margin-bottom:.2em}

/* ---- Галерея ---- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.gallery figure{margin:0; padding:9px; background:linear-gradient(180deg,#f6eedd,#ece0c8);
  border:1px solid var(--line-2); box-shadow:0 12px 26px -18px rgba(40,28,10,.5);
  transition:transform .3s var(--ease); position:relative}
.gallery figure::after{content:""; position:absolute; inset:5px; border:1px solid rgba(138,90,43,.28); pointer-events:none}
.gallery figure:hover{transform:translateY(-4px) rotate(-.4deg)}
.gallery img{aspect-ratio:16/9; object-fit:cover}
.gallery .cap{text-align:center; margin-top:22px; color:var(--muted); font-size:15px; font-style:italic}

/* ---- Отрывок CTA ---- */
.sample{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sample .wrap{display:flex; align-items:center; gap:40px; padding:70px 28px}
.sample .txt{flex:1}
.sample h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:.3em}
.sample p{color:var(--ink-soft); font-size:18px; max-width:52ch}

/* ---- Для кого ---- */
.audience{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:940px; margin:0 auto}
.aud{display:flex; gap:16px; padding:22px 24px; background:linear-gradient(180deg,#f7f0e0,#efe3ca);
  border:1px solid var(--line); border-radius:3px}
.aud .mk{color:var(--gold); font-size:22px; line-height:1.4}
.aud b{font-family:"Cormorant Garamond",serif; font-size:21px; font-weight:600}
.aud p{margin:.2em 0 0; color:var(--ink-soft); font-size:16px}

/* ---- Автор ---- */
.author .wrap{max-width:820px; text-align:center}
.author .sig{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:30px;
  color:var(--gold-dp); margin-top:.4em}
.author .role{font-family:"Inter",sans-serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted)}

/* ---- Цена ---- */
.pricing{background:var(--paper-2); border-top:1px solid var(--line)}
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; max-width:1000px; margin:0 auto}
.tier{background:linear-gradient(180deg,#f7f0e0,#efe3ca); border:1px solid var(--line-2);
  border-radius:4px; padding:34px 30px; display:flex; flex-direction:column; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.tier:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft)}
.tier .tt{font-family:"Inter",sans-serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dp); font-weight:600}
.tier h3{font-size:26px; margin:.5em 0 .1em}
.tier .price{font-family:"Cormorant Garamond",serif; font-size:58px; font-weight:700; color:var(--ink); line-height:1.1}
.tier .price small{font-size:22px; color:var(--muted); font-weight:500}
.tier .note{color:var(--muted); font-size:15px; min-height:44px; margin:8px 0 18px}
.tier .btn{width:100%; justify-content:center; margin-top:auto}
.tier.feat{background:radial-gradient(120% 120% at 50% 0%, var(--espresso-3), var(--espresso) 90%);
  color:var(--cream); border-color:#000; position:relative; transform:scale(1.04)}
.tier.feat:hover{transform:scale(1.04) translateY(-4px)}
.tier.feat h3{color:#f4ecdc} .tier.feat .price{color:#fff}
.tier.feat .price small{color:var(--cream-dim)} .tier.feat .note{color:#d8c9ad}
.tier.feat .tt{color:var(--gold-lt)}
.tier.feat{padding-top:42px}
.tier .badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:linear-gradient(180deg,#c79a5a,#a8763c); color:#fff8ec; font-family:"Inter",sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:7px 18px; border-radius:2px;
  box-shadow:0 8px 18px -8px rgba(120,78,26,.7)}
.pricing .fine{text-align:center; color:var(--muted); font-size:14px; margin-top:26px; font-family:"Inter",sans-serif}

/* ---- FAQ ---- */
.faq{max-width:820px; margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer; list-style:none; padding:22px 0; display:flex; justify-content:space-between;
  align-items:center; gap:20px; font-family:"Cormorant Garamond",serif; font-size:23px; font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pl{color:var(--gold); font-family:"Inter",sans-serif; font-size:22px; transition:.3s; flex:none}
.qa[open] summary .pl{transform:rotate(45deg)}
.qa .a{padding:0 0 22px; color:var(--ink-soft); font-size:17px}

/* ---- Финальный CTA ---- */
.final{background:radial-gradient(130% 120% at 50% -20%, var(--espresso-3), var(--espresso) 78%);
  color:var(--cream); text-align:center}
.final .wrap{max-width:760px; padding:100px 28px}
.final .eyebrow{color:var(--gold-lt)}
.final h2{font-size:clamp(34px,5vw,58px); color:#f5eddd; margin:.3em 0 .3em}
.final p{color:#ddd0b8; font-size:19px; margin-bottom:1.6em}
.final .btn{margin:6px}

/* ---- Footer ---- */
.footer{background:var(--espresso); color:var(--cream-dim); font-size:15px;
  border-top:1px solid #000; font-family:"Inter",sans-serif}
.footer-in{padding:52px 28px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px}
.footer a{color:var(--gold-lt)} .footer a:hover{color:#fff}
.footer-legal{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px; max-width:900px}
.footer-legal a{font-size:14.5px; position:relative}
.footer-legal a:not(:last-child)::after{content:"·"; position:absolute; right:-15px; color:#5a5040; pointer-events:none}
.footer-copy{color:var(--cream-dim); font-size:14.5px; margin-top:6px}
.footer-ip{color:#8c8069; font-size:13.5px}

/* ---- Появление при скролле ---- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* ============ Страница чтения (otryvok) ============ */
.read-nav{position:sticky; top:0; z-index:40; background:rgba(243,234,215,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.read-nav .wrap{display:flex; align-items:center; height:60px; gap:16px}
.read-nav .back{font-family:"Inter",sans-serif; font-size:14.5px; color:var(--ink-soft); font-weight:500}
.read-nav .back:hover{color:var(--gold-dp)}
.read-hero{text-align:center; padding:72px 28px 26px; max-width:760px; margin:0 auto}
.read-hero .eyebrow{color:var(--gold-dp)}
.read-hero h1{font-size:clamp(36px,5vw,58px); margin:.3em 0 .25em}
.read-hero p{color:var(--muted); font-size:18px}
.reader{max-width:720px; margin:0 auto; padding:20px 28px 40px}
.chap{padding:40px 0 10px}
.chap-num{font-family:"Inter",sans-serif; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-dp); text-align:center; font-weight:600}
.chap h2{font-family:"Cormorant Garamond",serif; font-size:clamp(30px,4.4vw,44px); text-align:center;
  margin:.2em 0 .7em}
.chap .fig{padding:10px; background:linear-gradient(180deg,#f6eedd,#ece0c8); border:1px solid var(--line-2);
  margin:0 0 32px; box-shadow:0 14px 30px -20px rgba(40,28,10,.5)}
.chap .fig img{border:1px solid #6f5e3f22}
.reader p{margin:0 0 .95em; text-align:justify; text-indent:1.6em; hyphens:auto}
.reader p.first, .reader h3+p, .reader .fig+p{text-indent:0}
.reader h3.sub{font-family:"Inter",sans-serif; font-weight:700; color:var(--gold-dp); font-size:18px;
  text-transform:none; letter-spacing:.01em; margin:1.6em 0 .5em; text-indent:0}
.reader h4.sub4{font-family:"Inter",sans-serif; font-weight:700; color:var(--muted); font-size:14px;
  text-transform:uppercase; letter-spacing:.05em; margin:1.3em 0 .4em; text-indent:0}
.chap-div{ text-align:center; color:var(--gold); letter-spacing:.5em; margin:44px 0; font-size:18px}
.read-cta{background:radial-gradient(130% 120% at 50% -20%, var(--espresso-3), var(--espresso) 80%);
  color:var(--cream); text-align:center; margin-top:30px}
.read-cta .wrap{max-width:680px; padding:80px 28px}
.read-cta h2{font-size:clamp(30px,4.4vw,46px); color:#f5eddd; margin:.3em 0 .4em}
.read-cta p{color:#ddd0b8; font-size:18px; margin-bottom:1.5em}
.read-cta .btn{margin:6px}

/* ============ Адаптив ============ */
@media (max-width:920px){
  .hero-in{grid-template-columns:1fr; gap:40px; padding-top:52px}
  .hero .plate{transform:none; max-width:520px; margin:0 auto}
  .vols,.idea .cols,.audience,.stats{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:1fr; max-width:440px}
  .tier.feat{transform:none} .tier.feat:hover{transform:translateY(-4px)}
  .sample .wrap{flex-direction:column; text-align:center}
}
@media (max-width:640px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .nav-links{display:none}
  .nav .socials{display:none}
  .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column;
    background:var(--paper); padding:18px 28px; gap:16px; border-bottom:1px solid var(--line)}
  .nav-cta{display:none}
  .stats{grid-template-columns:1fr 1fr; gap:8px 16px}
  .vols{grid-template-columns:1fr}
  .audience{grid-template-columns:1fr}
  .idea .cols{grid-template-columns:1fr; gap:4px}
  .gallery{grid-template-columns:1fr 1fr; gap:12px}
  .section{padding:60px 0}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%; justify-content:center}
  .section-head h2{font-size:clamp(28px,8vw,36px)}
  .manifesto .lead{font-size:22px}
  .sample .wrap{gap:26px}
  .sample .btn{width:100%; justify-content:center}
  .final .btn, .read-cta .btn{width:100%; justify-content:center; margin:6px 0}
}