/* ==============================
GLOBAL
============================== */

html{
scroll-behavior:smooth;
}

body{

margin:0;

background:#faf8f2;

font-family:Georgia,"Times New Roman",serif;

color:#222;

line-height:1.75;

/* aphorism numbering */

counter-reset: aphorism;

}

h2{
margin-top:60px;
margin-bottom:25px;
}

/* ==============================
MANUSCRIPT PAGE
============================== */

.container{

max-width:900px;

margin:40px auto;

padding:40px;

background:white;

border:3px double #c6a646;

box-shadow:0 4px 12px rgba(0,0,0,0.06);

}



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

h1{

text-align:center;

font-weight:500;

letter-spacing:1px;

margin-bottom:10px;

}

.subtitle{

text-align:center;

color:#777;

margin-bottom:25px;

}



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

.lotus{

text-align:center;

font-size:22px;

color:#c6a646;

margin:20px 0 40px;

}

/* SECTION NAVIGATION */

.section-nav{

display:flex;

justify-content:center;

gap:24px;

margin-bottom:35px;

margin-top:10px;

font-size:16px;

}

.section-nav a{

text-decoration:none;

color:#444;

}

.section-nav a:hover{

color:#c6a646;

}

/* ==============================
APHORISM COLUMN
============================== */

.aphorism-grid{

max-width:720px;

margin:auto;

}



/* ==============================
APHORISM
============================== */

.aphorism{

position:relative;

padding-left:60px;

margin-bottom:54px;

font-size:18px;

line-height:1.8;
    
 color:#222;

transition:all 0.3s ease;   
    
    text-shadow:
0 0 3px rgba(120,170,255,0.25),
0 0 8px rgba(120,170,255,0.15);
    
    

counter-increment: aphorism;

}
.aphorism:hover{

background:rgba(120,170,255,0.05);

border-radius:6px;

padding-right:10px;
  text-shadow:
0 0 4px rgba(120,170,255,0.35),
0 0 10px rgba(120,170,255,0.15);  
    
}
/* ==============================
APHORISM FOCUS MODE
============================== */

/* smooth transitions */

.aphorism{
transition:opacity 0.35s ease, text-shadow 0.35s ease;
}


/* dim all aphorisms when hovering inside grid */

.aphorism-grid:hover .aphorism{
opacity:0.45;
}


/* highlight the hovered aphorism */

.aphorism-grid .aphorism:hover{
opacity:1;

text-shadow:
0 0 4px rgba(120,170,255,0.35),
0 0 10px rgba(120,170,255,0.18);
}

.aphorism::after{

content:"✧";

display:block;

text-align:center;

margin-top:24px;

color:rgba(198,166,70,0.45);

font-size:16px;

}
.aphorism:last-child::after{
display:none;
}
/* ==============================
AUTO NUMBER (001–547)
============================== */

.num::before{

content: counter(aphorism, decimal-leading-zero);

position:absolute;

left:0;

top:0;

width:50px;

text-align:right;

color:#c6a646;

font-weight:bold;

}

.aphorism:hover .num::before{

color:#d6b85a;

}

/* ==============================
BACK TO TOP
============================== */

.top-button{

position:fixed;

right:25px;

bottom:25px;

background:#c6a646;

color:white;

border:none;

padding:10px 14px;

cursor:pointer;

font-size:14px;

}

.top-button:hover{

background:#a88a34;

}



/* ==============================
MOBILE
============================== */

@media (max-width:800px){

.container{

padding:30px 20px;

}

.aphorism{

font-size:17px;

}
}
/* ==============================
HEAD NAVIGATION
============================== */

.toc{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:24px;

margin-top:10px;

margin-bottom:15px;

font-size:16px;

}

.toc a{

text-decoration:none;

color:#444;

}

.toc a:hover{

color:#c6a646;

}



/* ==============================
DIVIDER LINE
============================== */
.divider-line{

border:none;

border-top:1px solid #e6e1cf;

margin:20px auto;

width:240px;

}



/* ==============================
QUICK NAV
============================== */

.quick-nav{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:10px;

margin:25px 0 45px;

}

.quick-nav a{

padding:6px 12px;

border:1px solid #c6a646;

text-decoration:none;

color:#444;

font-size:14px;

}

.quick-nav a:hover{

background:#c6a646;

color:white;

}

/* ==============================
FLOATING JUMP MENU
============================== */

.floating-jump{

position:fixed;

right:25px;

top:160px;

display:flex;

flex-direction:column;

gap:8px;

padding:12px 10px;

background:rgba(198,166,70,0.15);

border:1px solid rgba(198,166,70,0.35);

border-radius:8px;

backdrop-filter:blur(3px);

box-shadow:0 4px 12px rgba(0,0,0,0.08);

font-size:13px;

z-index:999;

/* start hidden */

opacity:0;

pointer-events:none;

transition:opacity 0.4s ease;

}


/* visible state */

.floating-jump.visible{

opacity:1;

pointer-events:auto;

}
.floating-jump a.active{

background:rgba(198,166,70,0.35);

color:#4f3f10;

font-weight:bold;

}



@media (max-width:1000px){

.floating-jump{
display:none;
}

}
/* ==============================
LOTUS DIVIDER GLOW
============================== */

.lotus{

text-align:center;

font-size:22px;

color:#c6a646;

margin:20px 0 40px;

/* gentle glow */

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

}


/* glow animation */

@keyframes lotusGlow{

0%{
text-shadow:0 0 2px rgba(198,166,70,0.15);
}

50%{
text-shadow:
0 0 6px rgba(198,166,70,0.35),
0 0 14px rgba(198,166,70,0.18);
}

100%{
text-shadow:0 0 2px rgba(198,166,70,0.15);
}

}