@charset "utf-8";

/* reading area */

.layout2{
display:flex;
gap:40px;
max-width:1200px;
margin:50px auto;
}

/* main reader */

.reader1{

max-width:900px;   /* ideal reading width */

margin:auto;

padding:32px 46px;

background:white;

border:1px solid #6ec6ff;

border-radius:6px;

box-shadow:
0 0 8px rgba(110,198,255,0.35),
0 0 25px rgba(110,198,255,0.15),
0 0 10px rgba(212,175,55,0.18) inset;

}
/* titles */

.book-title{

text-align:center;
font-size:1.3rem;;
margin-bottom:6px;

color:#e8f8ff;

letter-spacing:0.04em;

text-shadow:
0 0 6px rgba(180,230,255,0.4);

}

.canto-title{

text-align:center;
font-size:1.1rem;

color:#8fdcff;

margin-bottom:40px;

text-shadow:
0 0 6px rgba(150,220,255,0.4);

}

/* poem */

.poem1{
    
   font-size: 1.1rem;

line-height:1.75;

letter-spacing:0.015em;

max-width:32em;

margin:auto; 
    

color:#e6f7ff;

text-shadow:

0 0 1px rgba(200,235,255,0.35),
0 0 3px rgba(170,220,255,0.25),
0 0 8px rgba(120,200,255,0.18);

}

.poem1 h1{
margin:0 0 10px 0;
    font-size: 1.3rem;
}
.poem1 h2{
margin:0 0 10px 0;
    font-size: 1rem;
}


.poem1 p{
margin:0 0 10px 0;
}

/* verse rhythm */

.verse{
margin:0.6em 0;
line-height:1.65;
font-size:1.05rem;
}

.stanza-break{
height:1.9em;
}

/* navigation */

.nav{

display:flex;
justify-content:space-between;
margin-top:5px;

}

.nav a{

color:#7fd8ff;
text-decoration:none;

transition:0.25s;

}

.nav a:hover{

color:#c8f0ff;

text-shadow:0 0 8px rgba(140,220,255,0.7);

}

/* lotus separator */

.lotus-separator{

display:flex;
justify-content:center;
margin:45px 0;

}

.lotus{

width:38px;
height:38px;

background:radial-gradient(circle,#bfeeff,#3fb6ff);

clip-path:polygon(
50% 0%,60% 30%,90% 30%,65% 50%,
75% 85%,50% 65%,25% 85%,35% 50%,
10% 30%,40% 30%
);

animation:lotusGlow 4s infinite ease-in-out;

}

@keyframes lotusGlow{

0%{
transform:scale(1);
box-shadow:
0 0 8px #6dd3ff,
0 0 14px rgba(120,220,255,0.4);
}

40%{
transform:scale(1.15);
box-shadow:
0 0 18px #8fe0ff,
0 0 36px rgba(150,235,255,0.7);
}

70%{
transform:scale(1.08);
box-shadow:
0 0 12px #7ad7ff,
0 0 24px rgba(140,220,255,0.6);
}

100%{
transform:scale(1);
box-shadow:
0 0 8px #6dd3ff,
0 0 14px rgba(120,220,255,0.4);
}

}
/* highlight verse */

.highlight{

background:rgba(120,210,255,0.18);

border-left:4px solid #6ed4ff;

padding-left:8px;

}

/* mobile */
@media (max-width:700px){

.reader1{

padding:26px 22px;

}

.poem1{

font-size:18px;

max-width:100%;

}

}
@media (max-width:900px){

.sidebar{
display:none;
}

.reader1{
margin-left:0;
padding:36px 18px;
}

}
/*Subtle Moving Sky-Light Behind Reader*/

body::before{

content:"";

position:fixed;

top:0;
left:0;
right:0;
bottom:0;

background:
radial-gradient(circle at 20% 30%, rgba(120,210,255,0.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(150,230,255,0.12), transparent 45%);

animation:skyMove 60s linear infinite;

pointer-events:none;
z-index:-1;

}

@keyframes skyMove{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-40px);
}

100%{
transform:translateY(0px);
}

}

.verse{

margin:0.6em 0;
line-height:1.7;

letter-spacing:0.02em;

}
/* =========================================
   DEVOTIONAL SEPARATOR BASE
========================================= */

.devotional-separator {
  text-align: center;
  margin: 2em 0;
  font-size: 1.4em;
}


/* STAR */
.star-gold::before {
  content: "★";
  color: #c6a64a;
}


/* LOTUS */
.lotus-peacock::before {
  content: "✿";
  color: #0f3e5a;
}


/* DIAMOND */
.diamond-gold::before {
  content: "❖";
  color: #c6a64a;
}


@media (max-width: 600px) {
  .devotional-separator {
    margin: 1.6em 0;
    font-size: 1.2em;
  }
}