@charset "utf-8";

/* =============================
BASE BACKGROUND (PARCHMENT + COOL TONE)
============================= */

body {
margin: 0;
padding: 60px 20px;
background: radial-gradient(circle at center, #fdfaf2 0%, #e9f2fb 100%);
font-family: 'Cormorant Garamond', serif;
color: #3b2f0f; /* dark golden text */
}

/* =============================
OUTER MANUSCRIPT CONTAINER
============================= */

.manuscript {
display: flex;
justify-content: center;
}

/* =============================
FRAME (BLUE AURA + GOLD ACCENT)
============================= */

.frame {
max-width: 820px;
padding: 70px 100px;
background: #fffdf7;
position: relative;


border: 2px solid transparent;
border-radius: 12px;

/* blue + gold border */
background-image:
    linear-gradient(#fffdf7, #fffdf7),
    linear-gradient(135deg, #3aa0e6, #f3e6b3, #2f7fc4);

background-origin: border-box;
background-clip: padding-box, border-box;

/* blue outer aura + inner glow */
box-shadow:
    0 0 30px rgba(58,160,230,0.35),
    0 0 80px rgba(58,160,230,0.15),
    inset 0 0 18px rgba(58,160,230,0.18),
    inset 0 0 8px rgba(202,168,75,0.15);


}

/* =============================
TITLE
============================= */

.book-title {
font-family: 'Cinzel', serif;
font-size: 2.8rem;
letter-spacing: 3px;
text-align: center;
margin-bottom: 10px;
color: #a67c1b; /* refined gold */
}

/* =============================
DIVIDER
============================= */

.divider {
width: 140px;
height: 2px;
margin: 25px auto 50px;

background: linear-gradient(
    to right,
    transparent,
    #3aa0e6,
    #caa84b,
    #3aa0e6,
    transparent
);

}

/* =============================
PASSAGE TEXT
============================= */

.passage p {
font-size: 1.75rem;
line-height: 1.9;
text-align: justify;
font-weight: 500;


color: #3b2f0f;

text-shadow:
    0 0 1px rgba(80,170,255,0.15),
    0 0 3px rgba(80,170,255,0.08);


}

/* =============================
DROP CAP
============================= */

.passage p:first-of-type::first-letter {
float: left;
font-family: 'Cinzel', serif;
font-size: 4.8rem;
line-height: 1;
padding: 10px 12px;
margin-right: 12px;
margin-top: 5px;


background: linear-gradient(135deg, #d9b65c, #f6e8b1);
color: #5a420f;

border: 2px solid #3aa0e6;
border-radius: 6px;

box-shadow:
    0 0 10px rgba(202,168,75,0.4),
    0 0 12px rgba(58,160,230,0.35);


}

/* =============================
AUTHOR
============================= */

.author {
margin-top: 60px;
text-align: right;
font-style: italic;
font-size: 1.2rem;
letter-spacing: 1px;
color: #6a5a3b;
}

/* =============================
POETRY ALIGNMENT
============================= */

.manuscript {
font-family: Georgia, serif;
}

.manuscript .left {
margin-left: 0;
}

.manuscript .right {
margin-left: 8ch;
}

.manuscript .right6 {
margin-left: 6ch;
}

/* =============================
RESPONSIVE
============================= */

@media (max-width: 768px) {


.frame {
    padding: 40px 25px;
}

.passage p {
    font-size: 1.35rem;
}

.book-title {
    font-size: 2rem;
}

.passage p:first-of-type::first-letter {
    font-size: 3.8rem;
}


}

/* =============================
Ornamental Border (SVG Layer)
============================= */

.frame::before {

    content: "";
    position: absolute;

    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;

    pointer-events: none;

    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'>\
<g fill='none' stroke='%233aa0e6' stroke-width='0.8' opacity='0.25'>\
<path d='M10 10 Q40 0 60 20 Q80 40 100 20 Q120 0 150 10'/>\
<path d='M10 190 Q40 200 60 180 Q80 160 100 180 Q120 200 150 190'/>\
<path d='M10 10 Q0 40 20 60 Q40 80 20 100 Q0 120 10 150'/>\
<path d='M190 10 Q200 40 180 60 Q160 80 180 100 Q200 120 190 150'/>\
</g>\
</svg>");

    background-repeat: repeat;
    background-size: 200px 200px;

    opacity: 0.25;
}