/* ============================================================
   BREKAUP STORY GENERATOR — FRONTEND STYLES
   Theme: Brekaup.co.in — Deep Crimson × Dark Ash
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=Cinzel:wght@400;600;700&display=swap');

:root {
    --rsg-bg:         #080508;
    --rsg-bg2:        #0e080c;
    --rsg-bg3:        #140a0f;
    --rsg-surface:    #1a0d12;
    --rsg-border:     rgba(192,37,60,0.18);
    --rsg-crimson:    #c0253c;
    --rsg-crimson2:   #e03050;
    --rsg-crimson3:   #ff6b6b;
    --rsg-gold:       #e8a87c;
    --rsg-gold2:      #f5c89a;
    --rsg-gold-dim:   rgba(232,168,124,0.35);
    --rsg-text:       #f0dde0;
    --rsg-text-dim:   #a0787e;
    --rsg-text-faint: #5a3040;
    --rsg-font-head:  'Playfair Display', 'Palatino Linotype', serif;
    --rsg-font-body:  'Lora', 'Georgia', serif;
    --rsg-font-alt:   'Cinzel', 'Palatino Linotype', serif;
    --rsg-radius:     4px;
    --rsg-max-w:      780px;
    --rsg-shadow:     0 8px 40px rgba(0,0,0,0.8);
}

body.rsg-page {
    background: var(--rsg-bg) !important;
    color: var(--rsg-text) !important;
    font-family: var(--rsg-font-body) !important;
}
body.rsg-page *, body.rsg-page *::before, body.rsg-page *::after { box-sizing: border-box; }

/* ── Reading Progress Bar ── */
.rsg-progress-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px;
    background: rgba(0,0,0,0.4); z-index: 9999;
}
.rsg-progress-inner {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--rsg-crimson), var(--rsg-crimson3), var(--rsg-gold));
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(192,37,60,0.8);
}

/* ── Story Container ── */
.rsg-story { max-width: 100%; margin: 0; background: var(--rsg-bg); }

/* ── Hero / Cover ── */
.rsg-hero {
    position: relative; width: 100%; min-height: 65vh;
    display: flex; align-items: flex-end; overflow: hidden;
}
.rsg-hero-img-wrap { position: absolute; inset: 0; z-index: 0; }
.rsg-hero-img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    display: block; filter: saturate(0.65) brightness(0.55);
    transition: opacity 0.8s ease;
}
.rsg-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8,5,8,0.05) 0%,
        rgba(8,5,8,0.15) 30%,
        rgba(192,37,60,0.08) 55%,
        rgba(8,5,8,0.88) 80%,
        var(--rsg-bg) 100%
    );
}
.rsg-hero-text {
    position: relative; z-index: 1; width: 100%;
    max-width: var(--rsg-max-w); margin: 0 auto;
    padding: 3rem 2rem 4rem; text-align: center;
}
.rsg-tagline {
    font-family: var(--rsg-font-head) !important;
    font-size: clamp(1.3rem, 3.2vw, 2rem) !important;
    font-style: italic !important;
    color: var(--rsg-gold) !important;
    margin: 0 0 1.6rem !important;
    line-height: 1.4 !important;
    text-shadow: 0 2px 30px rgba(0,0,0,0.9) !important;
    letter-spacing: 0.02em !important;
}
.rsg-meta-bar {
    display: flex; gap: 0.7rem; justify-content: center; align-items: center;
    font-family: var(--rsg-font-alt) !important;
    font-size: 0.7rem !important; letter-spacing: 0.14em !important;
    text-transform: uppercase !important; color: var(--rsg-text-dim) !important;
}
.rsg-dot { opacity: 0.4; }

/* ── Table of Contents ── */
.rsg-toc {
    max-width: var(--rsg-max-w); margin: 0 auto 3.5rem;
    padding: 2.5rem 2.5rem 2rem;
    background: var(--rsg-surface);
    border: 1px solid var(--rsg-border);
    border-radius: 4px; position: relative;
}
.rsg-toc::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--rsg-crimson), var(--rsg-gold), transparent);
}
.rsg-toc-title {
    font-family: var(--rsg-font-alt) !important;
    font-size: 0.68rem !important; letter-spacing: 0.22em !important;
    text-transform: uppercase !important; color: var(--rsg-crimson3) !important;
    margin: 0 0 1.4rem !important;
}
.rsg-toc-list { list-style: none !important; padding: 0 !important; margin: 0 !important; columns: 2; column-gap: 2rem; }
@media (max-width: 560px) { .rsg-toc-list { columns: 1; } }
.rsg-toc-list li { margin-bottom: 0.6rem !important; }
.rsg-toc-list a {
    font-family: var(--rsg-font-body) !important; font-size: 1rem !important;
    color: var(--rsg-text-dim) !important; text-decoration: none !important;
    display: flex; gap: 0.6rem; align-items: baseline;
    transition: color 0.2s; line-height: 1.4;
}
.rsg-toc-list a:hover { color: var(--rsg-gold) !important; }
.rsg-toc-num {
    font-family: var(--rsg-font-alt) !important; font-size: 0.62rem !important;
    letter-spacing: 0.1em !important; color: rgba(192,37,60,0.5) !important;
    text-transform: uppercase !important; white-space: nowrap; flex-shrink: 0;
    padding-top: 0.18em;
}

/* ── Chapter ── */
.rsg-chapter { margin-bottom: 5.5rem; scroll-margin-top: 20px; }

.rsg-ch-img-wrap {
    position: relative; width: 100%;
    height: clamp(220px, 35vw, 440px); overflow: hidden; margin-bottom: 0;
}
.rsg-ch-img-loader { position: absolute; inset: 0; background: var(--rsg-bg3); z-index: 1; }
.rsg-shimmer {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, var(--rsg-bg3) 0%, rgba(192,37,60,0.05) 40%, var(--rsg-bg3) 80%);
    background-size: 200% 100%;
    animation: rsgShimmer 2s infinite;
}
@keyframes rsgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.rsg-ch-img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    display: block; opacity: 0; transition: opacity 0.8s ease;
    position: relative; z-index: 0;
    filter: saturate(0.7) brightness(0.6);
}
.rsg-ch-img-overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(8,5,8,0) 35%,
        rgba(192,37,60,0.06) 60%,
        rgba(8,5,8,0.7) 80%,
        var(--rsg-bg) 100%
    );
}

/* Chapter Heading */
.rsg-ch-heading { max-width: var(--rsg-max-w); margin: 0 auto; padding: 2.5rem 2rem 0.5rem; text-align: center; }
.rsg-ch-num {
    font-family: var(--rsg-font-alt) !important; font-size: 0.6rem !important;
    letter-spacing: 0.3em !important; text-transform: uppercase !important;
    color: rgba(192,37,60,0.5) !important; margin-bottom: 0.6rem !important;
}
.rsg-ch-title {
    font-family: var(--rsg-font-head) !important;
    font-size: clamp(1.7rem, 4.5vw, 3rem) !important;
    font-weight: 700 !important; color: var(--rsg-gold) !important;
    line-height: 1.2 !important; margin: 0 0 1.2rem !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 0 50px rgba(192,37,60,0.2), 0 2px 30px rgba(0,0,0,0.8) !important;
}
.rsg-ornament { font-size: 1.2rem; color: var(--rsg-crimson); margin-bottom: 2rem; display: block; opacity: 0.8; }

/* Chapter Body Text */
.rsg-ch-body { max-width: var(--rsg-max-w); margin: 0 auto; padding: 0 2rem; }
.rsg-ch-body p {
    font-family: var(--rsg-font-body) !important;
    font-size: clamp(1.12rem, 2.2vw, 1.28rem) !important;
    line-height: 1.95 !important; color: var(--rsg-text) !important;
    margin: 0 0 1.6em !important; text-align: justify !important;
    hyphens: auto; font-weight: 400 !important;
}
.rsg-ch-body p:first-child { font-size: clamp(1.18rem, 2.4vw, 1.35rem) !important; }

/* Drop Cap */
.rsg-dropcap { position: relative; }
.rsg-drop {
    float: left; font-family: var(--rsg-font-head) !important;
    font-size: 5em !important; line-height: 0.72 !important;
    padding: 0.06em 0.14em 0 0; margin-top: 0.08em;
    color: var(--rsg-crimson2) !important;
    text-shadow: 0 0 30px rgba(192,37,60,0.5), 0 2px 10px rgba(0,0,0,0.8) !important;
    font-weight: 700 !important;
}

/* Chapter End Ornament */
.rsg-ch-end {
    text-align: center; color: rgba(192,37,60,0.4); font-size: 0.9rem;
    letter-spacing: 0.5em; margin: 3rem 0 0;
    padding: 2rem 0 0; border-top: 1px solid var(--rsg-border);
    max-width: var(--rsg-max-w); margin-left: auto; margin-right: auto;
}

/* ── Story End ── */
.rsg-story-end {
    text-align: center; padding: 5rem 2rem 7rem;
    max-width: var(--rsg-max-w); margin: 0 auto;
}
.rsg-end-ornament { font-size: 1.6rem; display: block; margin: 0.8rem 0; opacity: 0.7; animation: heartbeat 2.5s ease-in-out infinite; }
.rsg-end-text {
    font-family: var(--rsg-font-alt) !important; font-size: 1.3rem !important;
    letter-spacing: 0.22em !important; color: var(--rsg-gold) !important;
    margin: 0.6rem 0 !important; text-transform: uppercase !important;
}
.rsg-end-sub {
    font-family: var(--rsg-font-body) !important; font-size: 0.82rem !important;
    color: var(--rsg-text-faint) !important; letter-spacing: 0.06em !important;
    margin-top: 1.5rem !important;
}
@keyframes heartbeat {
    0%,100% { transform: scale(1); }
    14%      { transform: scale(1.15); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.08); }
    70%      { transform: scale(1); }
}

/* ── Post Title ── */
.rsg-post-title { font-family: var(--rsg-font-head); color: var(--rsg-gold); letter-spacing: 0.03em; }

/* ── Responsive ── */
@media (max-width: 700px) {
    .rsg-hero { min-height: 55vh; }
    .rsg-hero-text { padding: 2rem 1.25rem 2.5rem; }
    .rsg-toc { padding: 1.8rem 1.4rem 1.5rem; margin: 0 1rem 2.5rem; }
    .rsg-ch-heading, .rsg-ch-body { padding-left: 1.25rem; padding-right: 1.25rem; }
    .rsg-drop { font-size: 3.8em !important; }
    .rsg-ch-body p { text-align: left !important; }
}

/* ── Theme Compatibility ── */
body.rsg-page .rsg-story img { max-width: 100%; height: auto; border-radius: 0; }
body.rsg-page .rsg-story a { color: var(--rsg-gold); }
body.rsg-page .entry-content > *:not(.rsg-story),
body.rsg-page .post-content  > *:not(.rsg-story) {
    max-width: var(--rsg-max-w); margin-left: auto; margin-right: auto;
}