/* ==========================================================================
   «СОЧИНИТЕЛЬ» — Книги Сергея Лобанова
   Первый этап: вёрстка и структура каталога. Оплата и скачивание — второй
   этап по ТЗ заказчика, поэтому кнопки «Купить»/«Скачать» намеренно инертны.
   ========================================================================== */

:root{
  --ink-night:   #141a2c;
  --ink-deep:    #0a0d18;
  --ink-line:    #26304a;
  --ink-mute:    #8a92ac;

  --candle-flame:#ffb454;
  --candle-glow: #e08a3c;
  --parchment:   #ede2c8;
  --gilt:        #b8894a;
  --gilt-2:      #d9ac6e;

  --leather-umber:  #4a2f22;
  --leather-oxblood:#5c2430;
  --leather-green:  #31413c;
  --leather-navy:   #29344a;

  --shelf-bg:    #f4efe2;
  --shelf-bg-2:  #fffdf8;
  --shelf-line:  #e0d6bd;
  --shelf-text:  #2b2620;
  --shelf-mute:  #786c58;

  --radius: 2px;
  --maxw: 1180px;
  --pad-x: 20px;

  --fs-h1: 46px;
  --fs-h2: 30px;
  --fs-h3: 20px;
  --ease-out: cubic-bezier(.16,1,.3,1);
}
@media (min-width:760px){
  :root{ --fs-h1:78px; --fs-h2:38px; --fs-h3:22px; --pad-x:40px; }
}
@media (min-width:1200px){
  :root{ --fs-h1:98px; --pad-x:56px; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--shelf-bg); color:var(--shelf-text);
  font-family:'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{ overflow:hidden }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible{ outline:2px solid var(--gilt-2); outline-offset:3px }
h1,h2,h3{ margin:0; font-family:'Playfair Display', Georgia, 'Times New Roman', serif; font-weight:600; line-height:1.05 }
p{ margin:0 0 1em }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x) }

/* ---------- зерно и прогресс ---------- */
.page-grain{
  position:fixed; inset:-100px; z-index:9000; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) } 16%{ transform:translate(-14px,7px) }
  33%{ transform:translate(10px,-15px) } 50%{ transform:translate(-9px,12px) }
  66%{ transform:translate(14px,8px) } 83%{ transform:translate(-7px,-10px) }
}
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:8000; pointer-events:none }
.scroll-progress i{ display:block; height:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--gilt),var(--gilt-2)) }

/* ---------- шапка ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:64px; padding:10px var(--pad-x);
  transition:background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(10,13,24,.88); backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--ink-line);
}
.brand{ display:flex; align-items:baseline; gap:9px; min-width:0; flex:0 1 auto; overflow:hidden }
.brand b{ font-family:'Old Standard TT',serif; font-size:19px; letter-spacing:.03em; color:var(--parchment); white-space:nowrap }
.brand small{ display:none; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute) }
@media (min-width:520px){ .brand small{ display:block } }

.topbar nav{ display:flex; align-items:center; gap:14px; flex:0 0 auto }
@media (min-width:900px){ .topbar nav{ gap:26px } }
.nav-link{
  display:none; position:relative; padding:12px 0; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute); transition:color .25s;
}
.nav-link:hover{ color:var(--parchment) }
@media (min-width:900px){ .nav-link{ display:block } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 22px; border-radius:var(--radius);
  font-family:'Playfair Display',serif; font-size:14px; letter-spacing:.03em;
  white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .3s var(--ease-out),background .3s,border-color .3s,color .3s,box-shadow .3s;
}
.btn:active{ transform:translateY(1px) }
.btn-gilt{
  background:linear-gradient(180deg,var(--gilt-2),var(--gilt)); color:#241708; border:1px solid var(--gilt-2);
  box-shadow:0 10px 26px rgba(184,137,74,.22);
}
.btn-gilt:hover{ box-shadow:0 14px 34px rgba(184,137,74,.32); transform:translateY(-2px) }
.btn-ghost{ border:1px solid rgba(237,226,200,.28); color:var(--parchment) }
.btn-ghost:hover{ border-color:var(--gilt-2); color:var(--gilt-2) }
.btn-sm{ min-height:40px; padding:0 16px; font-size:12px }
.btn-wide{ width:100% }
.btn[disabled],.btn.is-soon{ opacity:.55; cursor:default; pointer-events:none }

.burger{ width:44px; height:44px; display:grid; place-content:center; gap:6px }
@media (min-width:900px){ .burger{ display:none } }
.burger span{ display:block; width:20px; height:1.5px; background:var(--parchment); transition:transform .35s var(--ease-out) }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

.mobile-menu{
  position:fixed; inset:0; z-index:6900; display:flex; flex-direction:column; justify-content:center;
  gap:4px; padding:100px var(--pad-x) 40px; background:rgba(10,13,24,.97); backdrop-filter:blur(18px);
  animation:menuIn .35s var(--ease-out);
}
.mobile-menu[hidden]{ display:none }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-12px) } }
.mobile-menu a{
  display:flex; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid var(--ink-line);
  font-family:'Playfair Display',serif; font-size:24px; color:var(--parchment);
}
.mobile-menu a span{ font-family:'Manrope',sans-serif; font-size:11px; color:var(--gilt-2); letter-spacing:.1em }
.menu-foot{ margin-top:30px }

/* ---------- герой ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  background:var(--ink-night); overflow:hidden; isolation:isolate; padding:110px var(--pad-x) 60px;
}
.hero .photo{
  position:absolute; inset:0; z-index:-4; width:100%; height:100%; object-fit:cover; object-position:center 38%;
}
.hero .base{
  position:absolute; inset:0; z-index:-3;
  background:radial-gradient(120% 90% at 50% 100%, rgba(20,26,44,.55) 0%, rgba(8,10,18,.86) 100%);
}
.hero .glow{
  position:absolute; inset:0; z-index:-2;
  background:radial-gradient(58% 60% at 50% 46%, rgba(10,13,24,.66), transparent 72%),
             radial-gradient(48% 52% at 50% 52%, rgba(224,138,60,.16), transparent 72%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }
.hero .ember{ position:absolute; z-index:-2; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.4 }
.hero .ember-a{ width:52vw; height:52vw; max-width:480px; max-height:480px; top:6%; right:-12%; background:radial-gradient(circle,rgba(184,137,74,.24),transparent 70%); animation:drift1 20s ease-in-out infinite }
.hero .ember-b{ width:44vw; height:44vw; max-width:380px; max-height:380px; bottom:8%; left:-14%; background:radial-gradient(circle,rgba(92,36,48,.18),transparent 70%); animation:drift2 26s ease-in-out infinite }
@keyframes drift1{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(-4%,5%,0) scale(1.1) } }
@keyframes drift2{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(5%,-6%,0) scale(1.08) } }
.hero-copy{ position:relative; text-align:center; max-width:760px }
.hero-copy::before{
  content:''; position:absolute; inset:-50px -70px; z-index:-1;
  background:radial-gradient(62% 68% at 50% 50%, rgba(8,10,18,.7), transparent 75%);
}
.hero-copy .eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 22px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gilt-2);
  animation:fadeUp .9s var(--ease-out) .05s backwards;
}
.hero-copy .eyebrow::before,.hero-copy .eyebrow::after{ content:''; width:26px; height:1px; background:var(--gilt) }
h1.hero-title{
  font-family:'Old Standard TT', Georgia, serif; font-size:var(--fs-h1); font-weight:700; letter-spacing:.01em; color:var(--parchment);
  text-shadow:0 0 40px rgba(255,180,84,.28), 0 0 90px rgba(224,138,60,.14);
}
.hero-title .line{ display:block; overflow:hidden }
.hero-title .anim{ display:block; animation:lineUp 1s var(--ease-out) backwards; animation-delay:var(--d,0s) }
@keyframes lineUp{ from{ transform:translateY(105%) } }
.hero-copy .sub{
  margin:20px 0 0; font-family:'Playfair Display',serif; font-size:18px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gilt-2); animation:fadeUp .9s var(--ease-out) .3s backwards;
}
.hero-copy .lead{
  margin:22px auto 0; max-width:52ch; color:#c9c2ac; font-size:17px; line-height:1.7;
  animation:fadeUp .9s var(--ease-out) .4s backwards;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; animation:fadeUp .9s var(--ease-out) .5s backwards }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); filter:blur(5px) } }

.scroll-hint{ position:absolute; left:50%; bottom:20px; width:1px; height:44px; background:rgba(237,226,200,.2); overflow:hidden }
.scroll-hint i{ position:absolute; inset:0; background:var(--gilt-2); animation:hint 2.4s var(--ease-out) infinite }
@keyframes hint{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* появление по скроллу */
.reveal{ opacity:0; transform:translateY(24px); filter:blur(4px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out) }
.reveal.is-in{ opacity:1; transform:none; filter:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; filter:none } }

/* ---------- вступление об авторе ---------- */
.intro{ background:var(--ink-deep); padding:64px 0; border-bottom:1px solid var(--ink-line) }
.intro .row{ display:flex; flex-direction:column; gap:28px; align-items:center; text-align:center }
.intro .portrait{
  flex:none; width:180px; aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:1px solid var(--ink-line); background:linear-gradient(160deg,#1c2338,#0e1220);
  object-fit:cover;
}
@media (min-width:760px){ .intro .portrait{ width:220px } }
.intro p{ max-width:62ch; margin:0 auto; color:#b9b2a0; font-size:16px; line-height:1.75 }
.intro p b{ color:var(--parchment); font-weight:600 }
.intro p a.cross{ color:var(--gilt-2); font-weight:600; border-bottom:1px dashed var(--gilt); white-space:nowrap }
.intro p a.cross:hover{ color:var(--parchment); border-color:var(--parchment) }

/* ---------- каталог ---------- */
.shelf{ background:var(--shelf-bg); padding:72px 0 84px }
.shelf .sec-head{ text-align:center; margin-bottom:44px }
.eyebrow-dark{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--leather-umber); font-weight:600; margin:0 0 14px }
.shelf h2{ font-size:var(--fs-h2); color:var(--shelf-text); letter-spacing:.01em }
.shelf .sec-head p{ margin:16px auto 0; max-width:56ch; color:var(--shelf-mute); font-size:15px; line-height:1.7 }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px }
.card{
  background:var(--shelf-bg-2); border:1px solid var(--shelf-line); display:flex; flex-direction:column;
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(43,38,32,.12) }
.card .cover{
  width:100%; aspect-ratio:var(--ar,3/4); position:relative; display:flex; align-items:flex-end; overflow:hidden;
  background:linear-gradient(165deg, var(--c1,#4a2f22), var(--c2,#2b1c14)); padding:0; text-align:left;
}
.card .cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.card .cover::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.6) 100%);
}
.card .cover .num{
  position:absolute; top:8px; left:8px; z-index:1; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:10.5px;
  color:var(--parchment); background:rgba(8,10,18,.72); backdrop-filter:blur(2px);
  border:1px solid rgba(237,226,200,.4);
}
.card .cover span{
  position:relative; z-index:1; width:100%; padding:14px 14px 16px; font-family:'Playfair Display',serif;
  font-size:16px; line-height:1.3; color:#f4ecd8; text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.card .body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1 }
.card .body p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--shelf-mute); flex:1 }
.card .foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px }
.card .price{ font-family:'Playfair Display',serif; font-size:16px; color:var(--shelf-text) }
.card .price small{ display:block; font-family:'Manrope',sans-serif; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--shelf-mute) }
.card .actions{ display:flex; gap:8px }
.card .mini{
  border:1px solid var(--shelf-line); color:var(--shelf-text); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; padding:11px 12px; min-height:42px; background:none;
}
.card .mini.gilt{ border-color:var(--gilt); color:var(--leather-umber); font-weight:600 }
.card .mini[disabled]{ opacity:.5; cursor:default }

/* ---------- возрастное ограничение 18+ ---------- */
.age-badge{
  display:inline-grid; place-content:center; min-width:30px; height:20px; padding:0 6px; flex:none;
  border:1px solid var(--gilt-2); border-radius:3px; color:var(--gilt-2);
  font:700 11px/1 'Manrope',sans-serif; letter-spacing:.04em; align-self:center;
}
.age-badge-dark{ border-color:var(--leather-umber); color:var(--leather-umber); margin-left:8px; vertical-align:middle }
.card .cover .age-badge-card{
  position:absolute; top:auto; left:auto; bottom:8px; right:8px; z-index:2; width:auto; min-width:28px; height:20px;
  padding:0 6px; font:700 11px/1 'Manrope',sans-serif; text-shadow:none; color:var(--gilt-2);
  background:rgba(10,13,24,.85);
}
.age-gate{
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,13,24,.96); backdrop-filter:blur(8px);
}
.age-gate[hidden]{ display:none }
.age-gate-box{
  max-width:440px; width:100%; text-align:center; padding:36px 28px; background:var(--shelf-bg-2);
  border:1px solid var(--shelf-line); color:var(--shelf-text);
}
.age-gate-mark{
  margin:0 auto 16px; width:72px; height:72px; display:grid; place-content:center; border-radius:50%;
  border:2px solid var(--leather-umber); color:var(--leather-umber); font:700 26px/1 'Playfair Display',serif;
}
.age-gate-box h2{ font-size:24px; margin:0 0 12px; color:var(--shelf-text) }
.age-gate-text{ margin:0 0 24px; font-size:14.5px; line-height:1.65; color:var(--shelf-mute) }
.age-gate-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.age-gate-actions .btn-ghost{ color:var(--shelf-text); border-color:var(--shelf-line) }
.age-gate-actions .btn-ghost:hover{ color:var(--leather-umber); border-color:var(--leather-umber) }

/* ---------- модальное окно книги ---------- */
.book-modal{
  position:fixed; inset:0; z-index:9500; display:flex; align-items:flex-start; justify-content:center;
  padding:28px 16px; overflow-y:auto; background:rgba(10,13,24,.82); backdrop-filter:blur(6px);
  animation:modalIn .3s var(--ease-out);
}
.book-modal[hidden]{ display:none }
@keyframes modalIn{ from{ opacity:0 } }
.book-modal .dialog{
  position:relative; width:100%; max-width:760px; margin:auto; background:var(--shelf-bg-2);
  border:1px solid var(--shelf-line); padding:32px 24px 28px; animation:dialogIn .35s var(--ease-out);
}
@media (min-width:640px){ .book-modal .dialog{ padding:40px 44px 36px } }
@keyframes dialogIn{ from{ opacity:0; transform:translateY(16px) scale(.98) } }
.book-modal .close{
  position:absolute; top:14px; right:14px; width:38px; height:38px; display:grid; place-content:center;
  border:1px solid var(--shelf-line); color:var(--shelf-mute); font-size:18px; line-height:1;
}
.book-modal .close:hover{ color:var(--shelf-text); border-color:var(--leather-umber) }
.book-modal .eyebrow-dark{ margin:0 0 10px }
.book-modal h3{ font-size:24px; color:var(--shelf-text); padding-right:40px }
.book-modal .author-line{ margin:8px 0 0; font-size:13px; color:var(--shelf-mute) }
.book-modal .annotation{ margin-top:20px; color:var(--shelf-text); font-size:15px; line-height:1.75; white-space:pre-line }
.book-modal .placeholder-note{
  margin-top:20px; padding:12px 14px; border:1px solid var(--shelf-line); background:var(--shelf-bg);
  font-size:13.5px; color:var(--shelf-mute);
}
.book-modal .excerpt-toggle{
  margin-top:20px; border:1px solid var(--shelf-line); color:var(--shelf-text); font-size:11px;
  letter-spacing:.05em; text-transform:uppercase; padding:11px 16px; min-height:42px; background:none;
}
.book-modal .excerpt-toggle:hover{ border-color:var(--leather-umber) }
.book-modal .excerpt{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--shelf-line);
  color:var(--shelf-text); font-size:15px; line-height:1.75;
}
.book-modal .excerpt[hidden]{ display:none }
.book-modal .excerpt p{ margin:0 0 1em }
.book-modal .excerpt p:last-child{ margin-bottom:0 }
.book-modal .excerpt-heading{
  font-family:'Playfair Display',serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--shelf-mute); margin-bottom:14px!important;
}
.book-modal .excerpt-quote{
  margin:0 0 18px; padding:14px 16px; border-left:2px solid var(--shelf-line);
  font-size:13.5px; line-height:1.65; color:var(--shelf-mute); font-style:italic;
}
.book-modal .excerpt-quote p{ margin:0 0 .8em }
.book-modal .excerpt-quote p:last-child{ margin-bottom:0 }
.book-modal .gallery{ margin-top:24px; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px }
.book-modal .gallery figure{ margin:0 }
.book-modal .gallery img{ width:100%; aspect-ratio:3/4; object-fit:contain; background:var(--shelf-bg); border:1px solid var(--shelf-line) }
.book-modal .gallery figcaption{ margin-top:6px; font-size:11.5px; line-height:1.4; color:var(--shelf-mute) }

/* ---------- как это будет работать ---------- */
.how{ background:var(--ink-deep); padding:64px 0; border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line) }
.how .sec-head{ text-align:center; margin-bottom:40px }
.how .eyebrow{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gilt-2); margin:0 0 14px }
.how h2{ font-size:var(--fs-h2); color:var(--parchment) }
.steps{ display:grid; gap:1px; background:var(--ink-line); border:1px solid var(--ink-line) }
@media (min-width:760px){ .steps{ grid-template-columns:repeat(3,1fr) } }
.step{ background:var(--ink-night); padding:28px 24px }
.step b{ display:block; font-family:'Playfair Display',serif; font-size:34px; color:var(--gilt) }
.step h3{ margin:16px 0 8px; font-size:16px; letter-spacing:.03em; color:var(--parchment) }
.step p{ margin:0; color:#a39c88; font-size:14px; line-height:1.65 }

/* ---------- подвал ---------- */
footer{ background:var(--ink-night); padding:48px 0 34px }
.foot-row{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid var(--ink-line) }
.foot-brand{ font-family:'Old Standard TT',serif; font-size:19px; letter-spacing:.03em; color:var(--parchment) }
footer nav{ display:flex; flex-wrap:wrap; gap:8px 20px }
footer nav a{ display:inline-flex; align-items:center; min-height:44px; padding:11px 0; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-mute); transition:color .25s }
footer nav a:hover{ color:var(--gilt-2) }
footer nav a.cross{ color:var(--gilt-2); font-weight:600 }
.foot-fine{ margin-top:20px; font-size:12.5px; color:#5c637c; line-height:1.6 }

.tbd{ color:var(--gilt-2); border-bottom:1px dashed var(--gilt); cursor:help }