@font-face{font-family:'Literata';font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/literata-var.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 700;font-display:swap;src:url(/static/fonts/cormorant-garamond-var.woff2) format('woff2')}

:root{
--paper:#F6F1E8;--paper-raised:#FBF8F2;--paper-sunk:#EFE7D9;
--ink:#1E1B18;--ink-soft:#6B6157;--ink-faint:#9A9086;
--line:#DED5C7;--line-strong:#C9BCA8;
--accent:#8A4B1F;--accent-dark:#6E3A15;--accent-tint:#F0E4D7;
--green:#2F5D3A;--danger:#8A1F1F;
--deep:#0C1F38;--deep-soft:#3D5372;--gold:#C8A45C;
--measure:34rem;--container:1180px;
--cover-shadow:0 1px 2px rgba(30,27,24,.10),0 14px 30px -14px rgba(30,27,24,.40);
--cover-shadow-up:0 2px 5px rgba(30,27,24,.12),0 30px 50px -20px rgba(30,27,24,.46);
--label:500 .75rem/1.2 'Literata',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
font-family:'Literata',Georgia,'Times New Roman',serif;font-size:17px;line-height:1.62;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
@media(min-width:900px){body{font-size:18px}}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}

h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.12;margin:0;letter-spacing:.004em}
p{margin:0 0 1.05em}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-tint);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:60;background:var(--paper-raised);padding:.7em 1em;border:1px solid var(--line-strong)}

.wrap{max-width:var(--container);margin:0 auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
main{display:block;padding-bottom:clamp(3rem,8vw,6rem);min-height:52vh}
.label{font:var(--label);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint)}

/* ——— шапка ——— */
.site-head{position:sticky;top:0;z-index:30;background:var(--paper);
background:color-mix(in srgb,var(--paper) 90%,transparent);
-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.95rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--ink)}
.brand .mark{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.brand:hover .mark{transform:rotate(-8deg)}
.brand-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.4rem;letter-spacing:.055em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.9rem)}
.nav a{font:var(--label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);padding-block:.4em;position:relative;transition:color .18s ease}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.cart-link{display:inline-flex;align-items:center;gap:.5em;color:var(--ink)}
.cart-count{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;padding-inline:.32em;
border-radius:999px;background:var(--accent);color:var(--paper);font-size:.66rem;letter-spacing:0;font-weight:500}

@media(max-width:620px){
.head{flex-wrap:wrap;gap:.5rem}
.brand-name{font-size:1.22rem}
.nav{order:3;width:100%;justify-content:space-between;gap:.6rem;
padding-top:.6rem;border-top:1px solid var(--line)}
.nav a{font-size:.67rem;letter-spacing:.09em}
}

/* ——— заставка витрины ——— */
.hero{text-align:center;padding-block:clamp(3rem,8vw,5.5rem) clamp(2.25rem,5vw,3.5rem)}
.hero .mark{color:var(--gold);margin-inline:auto}
.hero h1{font-size:clamp(2.7rem,7.5vw,4.5rem);letter-spacing:.03em;margin-top:.55rem;text-wrap:balance}
.hero p{max-width:36rem;margin-inline:auto;color:var(--ink-soft);font-size:1.02em}
.rule{display:flex;align-items:center;justify-content:center;gap:.75rem;max-width:16rem;margin:1.25rem auto 1.6rem}
.rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rule i{width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}

/* ——— заголовок раздела ——— */
.section{padding-top:clamp(1.5rem,4vw,2.5rem)}
.section-head{display:flex;align-items:center;gap:1.25rem;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.section-head h2,.section-head h3{font:var(--label);letter-spacing:.19em;text-transform:uppercase;color:var(--ink-soft)}
.section-head::after{content:'';flex:1;height:1px;background:var(--line)}

/* ——— книги ——— */
.grid{display:grid;grid-template-columns:1fr;gap:clamp(2.75rem,6vw,4rem) clamp(1.5rem,3vw,2.75rem)}
@media(min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;animation:rise .75s cubic-bezier(.2,.7,.3,1) both}
.card:nth-child(2){animation-delay:.09s}
.card:nth-child(3){animation-delay:.18s}
.card:nth-child(n+4){animation-delay:.27s}
.cover{display:block;position:relative;margin-bottom:1.5rem}
.cover::after{content:'';position:absolute;left:7%;right:7%;bottom:-9px;height:18px;border-radius:50%;
background:radial-gradient(ellipse at center,rgba(30,27,24,.26),transparent 72%);
filter:blur(4px);opacity:.75;transition:opacity .45s ease,transform .45s ease}
.cover-inner{display:block;position:relative;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.cover-inner::before{content:'';position:absolute;inset:0 auto 0 0;width:8px;z-index:2;border-radius:2px 0 0 2px;
background:linear-gradient(90deg,rgba(255,255,255,.26),rgba(255,255,255,.03) 58%,rgba(0,0,0,.16))}
.cover-inner::after{content:'';position:absolute;inset:0;border-radius:2px 3px 3px 2px;
box-shadow:inset 0 0 0 1px rgba(30,27,24,.14)}
.cover img{width:100%;aspect-ratio:1051/1496;object-fit:cover;border-radius:2px 3px 3px 2px;
box-shadow:var(--cover-shadow);transition:box-shadow .45s cubic-bezier(.2,.7,.3,1)}
.card:hover .cover-inner{transform:translateY(-9px)}
.card:hover .cover img{box-shadow:var(--cover-shadow-up)}
.card:hover .cover::after{opacity:.5;transform:translateY(5px) scaleX(.94)}
.card-title{font-size:1.65rem;margin-bottom:.15rem;text-wrap:balance}
.card-title a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1px;
background-repeat:no-repeat;background-position:0 92%;transition:background-size .3s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-title a{background-size:100% 1px}
.card-sub{color:var(--ink-soft);margin-bottom:.5rem}
.card-author{font-size:.85em;color:var(--ink-faint);margin-bottom:1.1rem}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
padding-top:1rem;border-top:1px solid var(--line)}

.chip{display:inline-block;align-self:flex-start;width:-moz-fit-content;width:fit-content;
font:var(--label);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
padding:.4em .75em;margin-bottom:.85rem;border:1px solid var(--line-strong);border-radius:999px;
color:var(--ink-soft);background:var(--paper-raised)}
.chip-sale{color:var(--green);border-color:#BFCDBE}
.chip-preorder{color:var(--accent);border-color:#DCC3A9}
.chip-soon{color:var(--ink-faint);border-style:dashed}
.price{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.price-lg{font-size:1.55rem;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}

/* ——— кнопки ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:inherit;
font-size:.9rem;font-weight:500;line-height:1;letter-spacing:.04em;padding:.88em 1.4em;cursor:pointer;
border:1px solid var(--accent);background:var(--accent);color:var(--paper);border-radius:2px;
transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-1px);
box-shadow:0 8px 18px -10px rgba(138,75,31,.85)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--accent-tint);color:var(--accent-dark);border-color:var(--accent-tint);box-shadow:none}
.btn-wide{width:100%}
.btn-lg{padding:1em 1.9em;font-size:.95rem}

/* ——— страница книги ——— */
.crumbs{font:var(--label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
padding-block:clamp(1.5rem,4vw,2.25rem) 0}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--accent)}
.crumbs span{margin-inline:.55em}
.book{display:grid;grid-template-columns:1fr;gap:clamp(2.25rem,5vw,4rem);
padding-block:clamp(1.75rem,4vw,3rem) clamp(2.5rem,6vw,4.5rem)}
@media(min-width:900px){.book{grid-template-columns:minmax(0,40%) minmax(0,1fr);align-items:start}}
.book-main{min-width:0}
.book-main .prose,.book-main .toc{max-width:none}
.book-main .section{padding-top:clamp(2rem,4vw,3rem)}
.book-visual{position:relative;text-align:center}
@media(min-width:900px){.book-visual{position:sticky;top:6.5rem}}
.book-visual::before{content:'';position:absolute;inset:-8% -4% -12%;z-index:0;
background:radial-gradient(ellipse at 50% 45%,rgba(200,164,92,.16),rgba(246,241,232,0) 68%)}
/* у 3D-картинки книги своя тень и свой бумажный фон, поэтому тень css не добавляем:
   иначе вокруг картинки проступает прямоугольник. */
.book-visual img{position:relative;z-index:1;margin-inline:auto;max-width:min(100%,420px);
animation:rise .8s cubic-bezier(.2,.7,.3,1) both}
.book-info h1{font-size:clamp(2.4rem,5.5vw,3.5rem);margin-bottom:.35rem;text-wrap:balance}
.book-sub{font-size:1.15em;color:var(--ink-soft);margin-bottom:.7rem}
.book-author{font-size:.95em;color:var(--ink-soft);margin-bottom:1.5rem}
.book-release{color:var(--ink-soft);font-size:.95em}
.buy{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:1.4rem 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:1.1rem}
.buy form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:0}
.fine{font-size:.92em;color:var(--ink-soft);max-width:30rem}
.specs{display:grid;grid-template-columns:auto 1fr;margin:1.6rem 0 0;border-top:1px solid var(--line)}
.specs dt{padding:.75rem 1rem .75rem 0;font:var(--label);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-faint);border-bottom:1px solid var(--line)}
.specs dd{margin:0;padding:.75rem 0;text-align:right;border-bottom:1px solid var(--line);font-size:.95em}

/* ——— форма «повідомити про вихід» в карточке и на странице книги ——— */
.card-foot form,.buy form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.7rem;margin:0}
.card-foot .field,.buy .field{margin:0;flex:1 1 11rem;min-width:10rem}
.card-foot{align-items:flex-end}

/* ——— проза ——— */
.prose{max-width:var(--measure)}
.prose h1,.prose h2,.page h1{font-size:clamp(1.9rem,4vw,2.5rem);margin-bottom:1rem}
.prose h3{font-size:1.5rem;margin:2rem 0 .6rem}
.prose p+h2,.prose ul+h2{margin-top:2.5rem}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.05em}
.prose a:hover{color:var(--accent-dark)}
.prose ul{padding-left:1.1rem;margin:0 0 1.05em}
.prose li{margin-bottom:.3em}
.page{padding-block:clamp(2rem,5vw,3.5rem);max-width:var(--measure)}
.page-wide{max-width:none}
.doc-version{font:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.75rem}

/* ——— оглавление ——— */
.toc{max-width:38rem;border-bottom:1px solid var(--line)}
.toc-part{border-top:1px solid var(--line)}
.toc-part>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1rem;padding:1.05rem 0;
font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;font-weight:600;transition:color .18s ease}
.toc-part>summary::-webkit-details-marker{display:none}
.toc-part>summary:hover{color:var(--accent)}
.toc-part>summary::after{content:'';margin-left:auto;flex:none;width:8px;height:8px;align-self:center;
border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
transform:translateY(-2px) rotate(45deg);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.toc-part[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.toc-list{list-style:none;margin:0 0 1.1rem;padding:0}
.toc-list li{display:flex;gap:.9rem;padding:.28rem 0;color:var(--ink-soft)}
.toc-num{flex:none;min-width:1.7em;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-faint)}
.toc-plain{padding:1.05rem 0;border-top:1px solid var(--line);color:var(--ink-soft)}
.toc-plain:first-child{border-top:0}

/* ——— другие книги ——— */
.also{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,180px));gap:2rem;list-style:none;padding:0;margin:0}
.also a{display:block}
.also img{width:100%;aspect-ratio:1051/1496;object-fit:cover;border-radius:2px;
box-shadow:var(--cover-shadow);transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.also a:hover img{transform:translateY(-6px);box-shadow:var(--cover-shadow-up)}
.also p{margin:.85rem 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.15rem;font-weight:600;line-height:1.2;text-wrap:balance}

/* ——— корзина и оформление ——— */
.narrow{max-width:40rem;margin-inline:auto;padding-block:clamp(2rem,5vw,3.5rem)}
.narrow h1{font-size:clamp(2.1rem,5vw,2.9rem);margin-bottom:1.75rem}
.line{display:grid;grid-template-columns:56px 1fr auto;gap:1.25rem;align-items:center;
padding:1.15rem 0;border-bottom:1px solid var(--line)}
.line:first-of-type{border-top:1px solid var(--line)}
.line img{width:56px;border-radius:1px 2px 2px 1px;box-shadow:0 2px 8px -3px rgba(30,27,24,.4)}
.line h2{font-size:1.3rem;margin-bottom:.15rem}
.line .price{color:var(--ink-soft);font-size:.95em}
.line form{margin:0}
.line-out{grid-template-columns:1fr auto;color:var(--ink-soft)}
.unavailable{font:var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--danger)}
.remove{background:none;border:0;padding:.4em 0;cursor:pointer;font:var(--label);letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-faint);transition:color .18s ease}
.remove:hover{color:var(--danger)}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.5rem 0 1.75rem}
.total span:first-child{font:var(--label);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft)}
.total .price{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;font-weight:600}
.summary{list-style:none;margin:0 0 .5rem;padding:0;border-top:1px solid var(--line)}
.summary li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.empty{color:var(--ink-soft)}

fieldset{border:0;margin:0;padding:0}
.field{display:block;margin-bottom:1.2rem}
.field>span{display:block;font:var(--label);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-soft);margin-bottom:.5rem}
/* Селектор по исключению, а не по списку типов: поле без указанного type
   не должно выпадать из оформления. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);
background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:2px;padding:.72em .9em;
transition:border-color .18s ease,box-shadow .18s ease}
textarea{min-height:7rem;resize:vertical}
input::placeholder{color:var(--ink-faint)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(138,75,31,.13)}
.check{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;margin-bottom:1rem;
font-size:.94em;color:var(--ink-soft);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:1.15rem;height:1.15rem;margin:.25rem 0 0;
border:1px solid var(--line-strong);border-radius:2px;background:var(--paper-raised);cursor:pointer;position:relative;
transition:background .18s ease,border-color .18s ease}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:'';position:absolute;left:.36rem;top:.13rem;width:.28rem;height:.58rem;
border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent-links{font-size:.88em;margin:-.3rem 0 1.4rem 1.95rem}
.consent-links a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.consent-links a:hover{color:var(--accent-dark)}
.pay-note a{color:var(--accent);text-decoration:underline}
.fine a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.pay-note{font-size:.88em;color:var(--ink-soft);margin-top:.9rem;text-align:center}

.notice,.error{padding:.9rem 1.15rem;margin-bottom:1.75rem;background:var(--paper-raised);
border-left:2px solid var(--gold);font-size:.95em}
.error{border-left-color:var(--danger);color:var(--danger)}
.notice-stop{border-left-width:3px;border-left-color:var(--accent);background:var(--accent-tint);color:var(--ink)}
.notice-stop strong{display:block;margin-bottom:.25em;font-family:'Cormorant Garamond',Georgia,serif;
font-size:1.35rem;font-weight:600}
.notice a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:.2em}

/* Заблокированное оформление: видно, что заполнять нечего. */
fieldset[disabled]{opacity:.5}
fieldset[disabled] input,fieldset[disabled] .check,fieldset[disabled] .btn{cursor:not-allowed}
fieldset[disabled] .btn,fieldset[disabled] .btn:hover{background:var(--ink-faint);border-color:var(--ink-faint);
transform:none;box-shadow:none}
.status{font:var(--label);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.links{list-style:none;padding:0;margin:0 0 1.5rem}
.links li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.links a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}

/* ——— подвал ——— */
.site-foot{background:var(--deep);color:#CFC8BC;border-top:1px solid var(--gold);
padding-block:clamp(2.75rem,6vw,4rem) 2rem;font-size:.94rem;line-height:1.6}
.site-foot a{color:#E7E0D4;transition:color .18s ease}
.site-foot a:hover{color:var(--gold)}
.foot{display:grid;grid-template-columns:1fr;gap:2.25rem}
@media(min-width:760px){.foot{grid-template-columns:1.5fr 1fr 1fr}}
.foot h2{font:var(--label);letter-spacing:.19em;text-transform:uppercase;color:var(--deep-soft);
color:#8E9CB2;margin-bottom:1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55rem}
.foot-brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--gold);margin-bottom:.9rem}
.foot-brand span{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.35rem;
letter-spacing:.055em;color:#F0E9DC}
.foot-legend{max-width:24rem;color:#A7A093;margin:0}
.foot-bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(207,200,188,.16);
font-size:.84rem;color:#8E887D}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
