/* ─────────────────────────────────────────────────────────────
   Игорь Губерман · «Глазами друзей»
   Палитра снята с обложки: охра, жжёная сурьма, бирюзовая тень,
   кремовая бумага.
   ───────────────────────────────────────────────────────────── */

:root{
  --ink:      #2b2119;
  --ink-soft: #5c4d3f;
  --paper:    #f6f0e4;
  --paper-2:  #efe6d4;
  --dark:     #1d1512;
  --dark-2:   #2a1e18;
  --ochre:    #c8944a;
  --ochre-lt: #e3b877;
  --rust:     #b4522c;
  --teal:     #2f4a46;
  --rule:     rgba(120, 96, 68, .32);

  --serif:  "PT Serif", Georgia, "Times New Roman", serif;
  --display:"Playfair Display", "PT Serif", Georgia, serif;

  --wrap: 1180px;
  --gap: clamp(3rem, 7vw, 6.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1rem, .96rem + .25vw, 1.125rem);
  line-height:1.68;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 780px); }

/* ── типографика заголовков ───────────────────────────────── */
h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.12; margin:0; }

.h-rule{
  font-size:clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  margin-bottom:2.2rem;
  position:relative;
  padding-bottom:.9rem;
}
.h-rule::after{
  content:""; position:absolute; left:0; bottom:0;
  width:4.5rem; height:2px; background:var(--ochre);
}
.h-rule--light::after{ background:var(--ochre-lt); }

.section{ padding-block:var(--gap); }
.section__sub{
  margin:-1.4rem 0 2.4rem; font-style:italic; color:var(--ink-soft);
  font-size:1.05em;
}

/* ─────────────────────────  HERO  ───────────────────────── */
.hero{
  position:relative;
  background:var(--dark);
  color:#f0e6d6;
  overflow:hidden;
  padding-block:clamp(3rem, 7vw, 6rem);
}
.hero__art{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(200,148,74,.30), transparent 62%),
    radial-gradient(90% 80% at 12% 88%, rgba(47,74,70,.42), transparent 60%),
    linear-gradient(160deg,#241a14 0%,#1a1310 55%,#20161a 100%);
}
.hero__art::after{
  content:""; position:absolute; inset:0;
  background-image:url("/assets/cover-wrap.jpg");
  background-size:cover; background-position:center;
  opacity:.13; filter:saturate(1.2) blur(2px);
  mix-blend-mode:screen;
}
.hero__inner{
  position:relative;
  width:min(100% - 2.5rem, var(--wrap));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.hero__book img{
  border-radius:2px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.10) inset,
    -14px 0 22px -14px rgba(0,0,0,.9),
    0 34px 70px -22px rgba(0,0,0,.85);
  transform:perspective(1400px) rotateY(6deg);
  transition:transform .7s cubic-bezier(.22,.68,.32,1);
}
.hero__book:hover img{ transform:perspective(1400px) rotateY(2deg) translateY(-4px); }

.kicker{
  margin:0 0 1.1rem;
  font-size:.82rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ochre-lt);
}
.hero h1{
  font-size:clamp(2.3rem, 1.5rem + 3.6vw, 4.05rem);
  margin-bottom:1.3rem;
  letter-spacing:-.01em;
}
.hero h1 span{
  display:block;
  font-style:italic;
  font-weight:500;
  color:var(--ochre-lt);
  margin-top:.16em;
}
.lede{
  font-size:clamp(1.06rem, 1rem + .35vw, 1.28rem);
  color:#e2d5c1;
  margin:0 0 1.4rem;
  max-width:36em;
}
.lede em{ color:#fff; font-style:italic; }
.imprint{
  margin:0 0 2.2rem;
  font-size:.95rem; color:#a89881; letter-spacing:.03em;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero__deadline{
  margin:1.2rem 0 0;
  font-size:.9rem; color:#a89881; letter-spacing:.04em;
}
.hero__deadline strong{ color:var(--ochre-lt); font-weight:400; }

/* ── кнопки ───────────────────────────────────────────────── */
.btn{
  display:inline-block;
  padding:.92em 1.9em;
  font-family:var(--serif);
  font-size:1rem;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .15s;
}
.btn--primary{ background:var(--rust); color:#fff5ea; }
.btn--primary:hover{ background:#c96035; transform:translateY(-1px); }
.btn--ghost{ border-color:rgba(227,184,119,.55); color:var(--ochre-lt); }
.btn--ghost:hover{ background:rgba(227,184,119,.12); }
.btn--wide{ width:100%; font-size:1.08rem; padding-block:1.05em; }

/* ─────────────────────────  О КНИГЕ  ───────────────────────── */
.section--about{ background:var(--paper); }
.cols{ columns:2; column-gap:3rem; }
.cols p{ margin:0 0 1.15em; break-inside:avoid; }
.cols p:first-child::first-letter{
  font-family:var(--display);
  float:left; font-size:3.5em; line-height:.82;
  padding:.06em .12em 0 0; color:var(--rust);
}

/* ─────────────────────────  ТРИ ЖИЗНИ  ───────────────────────── */
.section--lives{ background:var(--teal); color:#e8e0d0; }
.section--lives .h-rule{ color:#f2ead9; }
.lives{
  display:grid; gap:2.6rem;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
}
.life{ border-top:1px solid rgba(227,184,119,.35); padding-top:1.3rem; }
.life__num{
  font-family:var(--display); font-size:1.4rem; font-weight:700;
  margin:0 0 .15rem; color:var(--ochre-lt);
}
.life__years{
  margin:0 0 .9rem; font-size:.85rem; letter-spacing:.14em;
  text-transform:uppercase; color:#a7b5ac;
}
.life__txt{ margin:0; color:#dcd3c2; }

/* ─────────────────────────  ЛИСТАЛКА  ───────────────────────── */
.section--flip{ background:var(--paper-2); }

.flipnav{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.8rem;
}
.flipnav button{
  font-family:var(--serif); font-size:.92rem;
  padding:.5em 1.1em;
  background:transparent;
  border:1px solid var(--rule);
  border-radius:2px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:.2s;
}
.flipnav button:hover{ border-color:var(--ochre); color:var(--ink); }
.flipnav button[aria-current="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}

.flipstage{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.25rem,1.5vw,1.2rem);
}
/* хосту нужна полная ширина разворота, иначе StPageFlip
   считает, что места мало, и уходит в одностраничный режим */
#flipHost{
  flex:1 1 auto;
  width:100%;
  max-width:1000px;
  min-width:0;
}
#flipbook{
  box-shadow:0 26px 60px -26px rgba(60,40,20,.62);
  background:#ddd3bf;
}
#flipbook .page{ background:#fdfaf3; }
#flipbook img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }

.flipstage__arrow{
  flex:0 0 auto;
  width:2.6rem; height:2.6rem;
  font-size:1.7rem; line-height:1;
  font-family:var(--display);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:50%;
  color:var(--ink-soft);
  cursor:pointer;
  transition:.2s;
}
.flipstage__arrow:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.flipmeta{
  text-align:center; margin:1.5rem 0 .3rem;
  font-style:italic; color:var(--ink-soft);
}
.flipmeta__pages{ font-style:normal; font-size:.85em; opacity:.7; margin-left:.5em; }
.flipnote{
  text-align:center; margin:0;
  font-size:.87rem; color:var(--ink-soft); opacity:.75;
}

/* ─────────────────────────  ПРЕДЗАКАЗ  ───────────────────────── */
.section--order{ background:var(--dark-2); color:#eee4d3; }
.section--order .h-rule{ color:#f4ecdb; }

.how{ display:grid; gap:1.5rem; margin-bottom:2.8rem; }
.how__step{ display:flex; gap:1.1rem; align-items:flex-start; }
.how__n{
  flex:0 0 auto;
  width:2.1rem; height:2.1rem;
  display:grid; place-items:center;
  border:1px solid var(--ochre);
  border-radius:50%;
  font-family:var(--display); font-size:1rem;
  color:var(--ochre-lt);
}
.how__step p{ margin:.15rem 0 0; color:#d9cdb9; }
.how__step strong{ color:#f6efe2; }

.pricebox{
  border:1px solid rgba(200,148,74,.4);
  border-radius:3px;
  padding:1.6rem 1.8rem;
  margin-bottom:2.4rem;
  background:rgba(200,148,74,.07);
}
.pricebox__price{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.pricebox__num{
  font-family:var(--display); font-size:2.6rem; font-weight:700;
  color:var(--ochre-lt);
}
.pricebox__note{ font-size:.9rem; color:#bdae98; line-height:1.5; }
.pricebox__ship{ margin:1rem 0 0; font-size:.95rem; color:#c9bca6; }

.pricebox__approx{
  margin:.85rem 0 0;
  font-size:.92rem; color:#bdae98;
}
.pricebox__approx span{ color:var(--ochre-lt); }

.pricebox__zones{
  list-style:none; margin:1.3rem 0 0; padding:1.2rem 0 0;
  border-top:1px solid rgba(200,148,74,.25);
  display:grid; gap:.45rem;
  font-size:.95rem;
}
.pricebox__zones li{
  display:flex; justify-content:space-between; gap:1rem;
  color:#c9bca6;
}
.pricebox__zones li span:last-child{ color:var(--ochre-lt); }

/* ── итог заказа ──────────────────────────────────────────── */
.total{
  margin:.6rem 0 1.6rem;
  padding:1.1rem 1.3rem;
  border:1px solid rgba(200,148,74,.32);
  border-radius:3px;
  background:rgba(0,0,0,.16);
  display:grid; gap:.5rem;
}
.total__line{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.98rem; color:#c4b7a2;
}
.total__line--sum{
  margin-top:.35rem; padding-top:.7rem;
  border-top:1px solid rgba(200,148,74,.25);
  font-family:var(--display); font-size:1.35rem; font-weight:700;
  color:var(--ochre-lt);
}
.total__fx{
  margin:.2rem 0 0;
  font-size:.85rem; line-height:1.5; color:#9d907c;
}
.total__fx span{ color:#c4b7a2; }

/* ── форма ────────────────────────────────────────────────── */
.order label{
  display:block;
  font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  color:#b6a58d;
  margin-bottom:1.15rem;
}
.order__row{ display:grid; gap:0 1.2rem; grid-template-columns:1fr 1fr; }
.order__row--last{ grid-template-columns:8rem 1fr; }
.order input[type=text],
.order input[type=email],
.order input[type=tel],
.order input[type=number],
.order select{
  display:block; width:100%;
  margin-top:.42rem;
  padding:.72em .85em;
  font-family:var(--serif); font-size:1rem; letter-spacing:normal;
  text-transform:none;
  color:#f6efe2;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(200,148,74,.3);
  border-radius:2px;
}
.order input:focus,
.order select:focus{
  outline:none;
  border-color:var(--ochre);
  background:rgba(255,255,255,.09);
}
.order input::placeholder{ color:#8d7f6c; }
/* нативный список опций рисуется системой — задаём читаемые цвета */
.order select option{ background:var(--dark-2); color:#f6efe2; }

.order__agree{
  display:flex; gap:.7rem; align-items:flex-start;
  text-transform:none; letter-spacing:normal; font-size:.95rem;
  color:#c4b7a2; margin:.4rem 0 1.6rem;
}
.order__agree input{ margin-top:.42em; accent-color:var(--rust); }
.order__agree a{ color:var(--ochre-lt); }

.order__partner{
  margin:-.5rem 0 1.2rem;
  font-size:.92rem; font-style:italic; color:var(--ochre-lt);
}
.order__status{
  margin:1.1rem 0 0; text-align:center; font-style:italic;
  min-height:1.5em; color:var(--ochre-lt);
}
.order__status[data-err]{ color:#e8927a; }

/* ─────────────────────────  КРЕДИТЫ  ───────────────────────── */
.credits{ margin:0; display:grid; gap:0; }
.credits dt{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:1.1rem; border-top:1px solid var(--rule);
}
.credits dd{ margin:.35rem 0 1.1rem; }

/* ─────────────────────────  РОССИЯ / ПАРТНЁРЫ  ───────────────────────── */
.section--ru{ background:var(--teal); color:#e6ded0; }
.section--ru .h-rule{ color:#f2ead9; }
.section--ru p{ margin:0 0 1.1em; }
.ru__cta{ margin-top:1.6rem; }
.maillink{
  color:var(--ochre-lt);
  text-decoration-thickness:1px; text-underline-offset:.22em;
}
.section--partners{ background:var(--paper); }
.partners__mail{ margin-top:1.4rem; }

/* ─────────────────────────  ПОДВАЛ  ───────────────────────── */
.foot{
  background:var(--dark); color:#a1917b;
  padding-block:3.4rem 2.4rem;
  font-size:.92rem;
}
.foot__grid{
  display:flex; flex-wrap:wrap; gap:2.5rem;
  justify-content:space-between;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(200,148,74,.22);
}
.foot__brand{
  font-family:var(--display); font-size:1.15rem;
  color:var(--ochre-lt); margin:0 0 .7rem;
}
.foot__legal{ margin:0; line-height:1.85; }
.foot__legal a{ color:#a1917b; }
.foot__nav{ display:grid; gap:.55rem; align-content:start; }
.foot__nav a{ color:#bdae98; text-underline-offset:.2em; }
.foot__nav a:hover{ color:var(--ochre-lt); }
.foot__copy{ margin:1.6rem 0 0; font-size:.83rem; opacity:.75; }

[data-todo]{ outline:1px dashed rgba(200,148,74,.45); outline-offset:2px; }

/* ─────────────────────────  ПРАВОВЫЕ СТРАНИЦЫ  ───────────────────────── */
.legal{ padding-block:clamp(2.5rem,6vw,5rem); }
.legal h1{ font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem); margin-bottom:.6rem; }
.legal__date{ color:var(--ink-soft); font-style:italic; margin:0 0 2.4rem; }
.legal h2{
  font-size:1.35rem; margin:2.4rem 0 .8rem;
  padding-top:1.2rem; border-top:1px solid var(--rule);
}
.legal ul{ padding-left:1.3rem; }
.legal li{ margin-bottom:.5em; }
.legal__back{
  display:inline-block; margin-bottom:2rem;
  font-size:.9rem; color:var(--ink-soft);
  text-underline-offset:.22em;
}
.legal[dir="rtl"]{ text-align:right; }
.legal[dir="rtl"] ul{ padding-left:0; padding-right:1.3rem; }
.legal[dir="rtl"] .h-rule::after{ left:auto; right:0; }

/* ─────────────────────────  АДАПТИВ  ───────────────────────── */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__book{ max-width:300px; margin:0 auto; order:-1; }
  .hero__book img{ transform:none; }
  .hero__cta{ justify-content:center; }
  .lede{ margin-inline:auto; }
  .cols{ columns:1; }
  .h-rule::after{ left:50%; transform:translateX(-50%); }
  .section--flip .h-rule::after,
  .legal .h-rule::after{ left:0; transform:none; }
  .section .h-rule{ text-align:center; }
  .section--flip .h-rule{ text-align:left; }
  .section__sub{ text-align:center; }
  .flipnav{ justify-content:center; }
}
@media (max-width: 620px){
  .order__row,
  .order__row--last{ grid-template-columns:1fr; }
  .flipstage__arrow{ display:none; }
  .foot__grid{ flex-direction:column; gap:1.8rem; }
}