/* =====================================
   ҚАРА ТОРҒАЙДЫҢ СЫБЫРЫ
   Kazakh Literary Manuscript
===================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

/* ---------- RESET ---------- */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:#12100d;
color:#efe7d6;

font-family:"Cormorant Garamond",serif;

line-height:2;

overflow-x:hidden;

position:relative;

}

/* ---------- ATMOSPHERE ---------- */

body::before{

content:"";

position:fixed;
inset:0;

background:
radial-gradient(circle at 50% 10%,rgba(255,248,230,.03),transparent 42%),
linear-gradient(180deg,#12100d,#0d0b09);

z-index:-2;

}

body::after{

content:"";

position:fixed;
inset:0;

background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,.006) 0px,
rgba(255,255,255,.006) 1px,
transparent 1px,
transparent 4px
);

opacity:.35;
pointer-events:none;

z-index:-1;

}

/* ---------- HEADER ---------- */

.novel-header{

max-width:900px;
margin:0 auto;

padding:42px 30px 0;

}

.back-link{

display:inline-block;

color:#d6b77d;

text-decoration:none;

font-family:"Libre Baskerville",serif;

font-size:13px;

letter-spacing:1.4px;

text-transform:uppercase;

}

.back-link:hover{

color:#fff0c8;

}

/* ---------- HERO ---------- */

.book-hero{

max-width:850px;
margin:0 auto;

padding:60px 30px 50px;

text-align:center;

}

.book-label{

font-family:"Libre Baskerville",serif;

font-size:11px;

letter-spacing:4px;

text-transform:uppercase;

color:#9f8a67;

margin-bottom:18px;

}

.book-title{

font-family:"Libre Baskerville",serif;

font-size:44px;

line-height:1.18;

color:#faf6ec;

margin-bottom:18px;

text-transform:uppercase;

}

.chapter-title{

font-size:30px;

font-style:italic;

color:#d6bc86;

margin-bottom:18px;

}

.publication-info{

font-size:16px;

color:#978d81;

margin-bottom:34px;

}

.hero-divider{

width:120px;
height:1px;

margin:0 auto;

background:#7c6a4d;

position:relative;

}

.hero-divider::before{

content:"✦";

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-55%);

background:#12100d;

padding:0 10px;

color:#caa869;

}

/* ---------- AUDIO ---------- */

.audio-player{

max-width:560px;

margin:46px auto 0;

padding:22px;

background:rgba(255,248,230,.03);

border:1px solid rgba(202,168,105,.18);

box-shadow:
0 8px 28px rgba(0,0,0,.35);

}

.audio-player p{

font-family:"Libre Baskerville",serif;

font-size:15px;

letter-spacing:1.2px;

text-transform:uppercase;

color:#f3e3b9;

margin-bottom:14px;

text-align:center;

}

.audio-player audio{

width:100%;

}

/* ---------- READING ---------- */

.chapter-container{

max-width:820px;

margin:0 auto;

padding:0 34px 80px;

}

.chapter-text{

font-size:24px;

color:#ece5d7;

}

.chapter-text p{

margin-bottom:38px;

}

/* Drop cap */

.chapter-text p:first-child::first-letter{

float:left;

font-family:"Libre Baskerville",serif;

font-size:82px;

line-height:.82;

padding-right:12px;

color:#f4e7c2;

}

/* ---------- NAVIGATION ---------- */

.chapter-navigation{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-top:70px;

padding-top:30px;

border-top:1px solid rgba(202,168,105,.18);

}

.chapter-navigation a{

color:#d6b77d;

text-decoration:none;

font-family:"Libre Baskerville",serif;

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

}

.chapter-navigation a:hover{

color:#fff0c8;

}

.chapter-navigation span{

color:#8f8577;

font-size:16px;

}

/* ---------- COMMENTS ---------- */

.comments-section{

margin-top:80px;

padding-top:40px;

border-top:1px solid rgba(202,168,105,.18);

}

.comments-section h2{

font-family:"Libre Baskerville",serif;

font-size:24px;

letter-spacing:2px;

text-transform:uppercase;

color:#f3e3b9;

margin-bottom:24px;

}

/* ---------- FOOTER ---------- */

.legal-footer{

margin-top:70px;

padding:26px 20px;

text-align:center;

border-top:1px solid rgba(202,168,105,.12);

}

.legal-footer p{

color:rgba(238,231,214,.45);

}

/* ---------- SELECTION ---------- */

::selection{

background:rgba(202,168,105,.28);

color:white;

}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#15120f;

}

::-webkit-scrollbar-thumb{

background:#6f5a36;

border-radius:20px;

}

/* ---------- MOBILE ---------- */

@media(max-width:700px){

.book-title{

font-size:30px;

}

.chapter-title{

font-size:22px;

}

.chapter-container{

padding:0 20px 60px;

}

.chapter-text{

font-size:20px;

}

.chapter-text p:first-child::first-letter{

font-size:62px;

}

.chapter-navigation{

flex-direction:column;

text-align:center;

}

}