/* ==========================================================================
   GLOBAL RESET & COMMON VARIABLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-purple: #3f1e6b;
    --deep-purple: #1f0836;
    --accent-magenta: #d82361;
    --accent-orange: #eb5b34;
    --accent-red: #d32f2f;
    --bg-main: #fbf9ff;
    --text-dark: #222222;
    --text-muted: #666666;
    --border-color: #eee;

    /* Fluid containers — grow with the viewport, capped so lines stay readable.
       92vw keeps a gutter on small screens without a media query. */
    --container: min(1500px, 92vw);
    --container-narrow: min(1180px, 92vw);

    /* Fluid rhythm, so section spacing scales with the screen */
    --section-y: clamp(38px, 4.5vw, 80px);
    --page-x: clamp(16px, 3vw, 40px);
}

/* Content never overflows its column */
img, iframe { max-width: 100%; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-main);
    overflow-x: hidden;
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.text-center { text-align: center; }
.mt-15 { margin-top: 15px; }

/* ==========================================================================
   COMMON HEADER / NAVBAR
   ========================================================================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px var(--page-x);
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-name {
    font-family: 'Great Vibes', cursive;
    font-size: 2rem;
    font-weight: bold;
    /* background-clip: text paints only inside the box, so the line box has to
       clear Great Vibes' tall swash caps or their tops get sliced off. */
    line-height: 1.35;
    background: linear-gradient(90deg, #b8175f 0%, #d82a62 45%, #7d2ae8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-feather {
    -webkit-text-fill-color: initial;
    color: #f5a623;
    font-size: 1.1rem;
    transform: rotate(15deg);
    display: inline-block;
    margin-left: 4px;
}

.logo-tagline {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: #555;
    font-weight: 600;
    margin-top: 4px;
}

/* Mobile menu button (hidden on desktop) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #3f1e6b;
    cursor: pointer;
    padding: 4px 8px;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links a {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    transition: color 0.3s;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
}

.nav-links a.active,
.nav-links a:hover {
    color: #b8175f;
    border-bottom-color: #b8175f;
}

/* ---------------------------------------------------------------
   Dropdown menu (Gallery → Photo / Video)
   --------------------------------------------------------------- */
.nav-item { position: relative; display: inline-flex; }

/* The +/- accordion button belongs to the mobile menu; on desktop the dropdown
   opens on hover, so it stays out of the layout entirely. */
.nav-sub-toggle { display: none; }

.nav-caret {
    font-size: 0.6rem;
    margin-left: 3px;
    transition: transform 0.25s ease;
}
.nav-item:hover .nav-caret { transform: rotate(180deg); }

.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* padding, not margin — it bridges the gap so hover survives the trip */
    padding-top: 16px;
    opacity: 0;
    visibility: hidden;
    z-index: 1200;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { opacity: 1; visibility: visible; }

.dropdown-inner {
    position: relative;
    display: block;
    min-width: 232px;
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 0;
    box-shadow: 0 18px 42px rgba(43, 12, 81, 0.18);
    transform: translateY(8px);
    transition: transform 0.22s ease;
}
.nav-item:hover .dropdown-inner,
.nav-item:focus-within .dropdown-inner { transform: translateY(0); }

/* Gradient rule capping the panel */
.dropdown-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(90deg, #f48fb1 0%, #e5127d 50%, #ef6125 100%);
}

/* Pointer sitting above the panel, aimed at the parent link */
.dropdown-inner::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f48fb1;
}

.nav-links .dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 22px;
    border-radius: 0;
    border-bottom: none;
    white-space: nowrap;
    font-size: 0.86rem;
    font-weight: 500;
    color: #3c3a4d;
    transition: color 0.22s ease, background 0.22s ease, padding-left 0.22s ease;
}

/* Chevron marker, as in the reference */
.nav-links .dropdown a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.78rem;
    color: #e5127d;
    transition: transform 0.22s ease;
}

.nav-links .dropdown a:hover,
.nav-links .dropdown a.active {
    background: linear-gradient(90deg, rgba(229, 18, 125, 0.07), rgba(229, 18, 125, 0));
    color: #e5127d;
    border-bottom: none;
    padding-left: 26px;
}

.nav-links .dropdown a:hover::before { transform: translateX(2px); }

/* Common Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.btn-purple {
    background: linear-gradient(90deg, #7d2ae8, #a239ea);
    color: #fff;
    white-space: nowrap;
}

.btn-gradient {
    background: linear-gradient(90deg, #d82a62, #ef5b25);
    color: #fff;
}

.btn-gradient-orange {
    background: linear-gradient(90deg, #e34125, #ef6125);
    color: #fff;
    padding: 10px 22px;
}

.btn-gradient-purple {
    background: linear-gradient(90deg, #6c22bd, #8d2ce1);
    color: #fff;
    padding: 10px 25px;
}

.btn-outline {
    border: 1px solid #d82a62;
    color: #d82a62;
    background: transparent;
}

.btn-outline-purple {
    border: 1px solid #7d2ae8;
    color: #7d2ae8;
    background: transparent;
    border-radius: 6px;
    padding: 6px 16px;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-yellow {
    background-color: #fca311;
    color: #111;
    border-radius: 5px;
    padding: 8px 16px;
}

.divider-ornament {
    color: #e05232;
    font-size: 1rem;
    letter-spacing: 2px;
    margin: 8px 0 16px;
}
.divider-ornament.center-align { text-align: center; }
.divider-ornament.left-align { text-align: left; }

.feather-icon {
    color: #f5a623;
    transform: rotate(15deg);
    display: inline-block;
}

/* ==========================================================================
   HOME PAGE SPECIFIC STYLES
   ========================================================================== */
/* --------------------------------------------------------------------------
   HERO CAROUSEL
   Slides share one grid cell, so the section is as tall as its tallest slide
   and nothing is absolutely positioned out of the document flow.
   -------------------------------------------------------------------------- */
.hero-slider {
    position: relative;
    display: grid;
    overflow: hidden;
    /* 60px shorter than the original at every viewport width */
    min-height: clamp(410px, calc(44vw - 60px), 660px);
}

.hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--section-y) var(--page-x) calc(var(--section-y) + 40px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    transform-origin: center;
}

/* Slow drift on the active slide */
.hero-slide.is-active .hero-bg { animation: heroZoom 9s ease-out both; }

@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

/* Scrim keeps the copy legible over the watercolour */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 253, 250, 0.88) 0%, rgba(255, 253, 250, 0.62) 32%, rgba(255, 253, 250, 0.1) 56%, rgba(255, 253, 250, 0) 72%);
}

/* The author slide carries its own pale cream band behind the copy, so it needs
   no scrim — the same treatment as .about-hero. Without this the 0.88 white wash
   at the left edge hid b1.jpg's watercolour splash and feathers. */
.slide-author::after { background: none; }

/* Per-slide artwork and focal point */
.slide-author  .hero-bg { background-image: url('../images/banner/b1.jpg'); background-position: right center; }
.slide-words   .hero-bg { background-image: url('../images/banner/b3.jpg'); background-position: center; }
.slide-journey .hero-bg { background-image: url('../images/banner/bg.jpg'); background-position: center 14%; }

/* Arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(125, 42, 232, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: #7d2ae8;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(43, 12, 81, 0.14);
    transition: all 0.28s ease;
}

.hero-arrow:hover {
    background: linear-gradient(135deg, #7d2ae8, #d81b60);
    color: #fff;
    border-color: transparent;
    transform: translateY(-50%) scale(1.08);
}

.hero-prev { left: clamp(10px, 2vw, 26px); }
.hero-next { right: clamp(10px, 2vw, 26px); }

/* Dots */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 9px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(125, 42, 232, 0.28);
    cursor: pointer;
    transition: all 0.28s ease;
}

.hero-dot:hover { background: rgba(125, 42, 232, 0.55); }

.hero-dot.is-active {
    width: 30px;
    border-radius: 6px;
    background: linear-gradient(90deg, #7d2ae8, #d81b60);
}

.hero-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container);
    margin: 0 auto;
    width: 100%;
}

/* Copy eases up as its slide becomes active */
.hero-slide.is-active .hero-text > * {
    animation: heroRise 0.7s ease-out both;
}
.hero-slide.is-active .hero-text > *:nth-child(2) { animation-delay: 0.08s; }
.hero-slide.is-active .hero-text > *:nth-child(3) { animation-delay: 0.14s; }
.hero-slide.is-active .hero-text > *:nth-child(4) { animation-delay: 0.20s; }
.hero-slide.is-active .hero-text > *:nth-child(5) { animation-delay: 0.26s; }
.hero-slide.is-active .hero-text > *:nth-child(6) { animation-delay: 0.32s; }
.hero-slide.is-active .hero-text > *:nth-child(7) { animation-delay: 0.38s; }

@keyframes heroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-text {
    flex: 0 0 52%;
    max-width: 560px;
    text-align: center;
}

.script-subtitle { font-family: 'Great Vibes', cursive; font-size: clamp(1.8rem, 2.6vw, 2.8rem); color: #d32f2f; line-height: 1.2; }

.hero-title {
    font-family: 'Rozha One', serif;
    font-size: clamp(2.5rem, 4.6vw, 5rem);
    line-height: 1.1;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #5b1a9e 0%, #8e24aa 35%, #d81b60 70%, #e53935 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-quote { font-size: 1.05rem; color: #444; font-style: italic; margin-bottom: 4px; }
.hero-designation { font-size: 0.9rem; font-weight: 700; letter-spacing: 3px; color: #d32f2f; margin-bottom: 15px; }
.hero-description { font-size: 0.95rem; color: #333; line-height: 1.7; margin-bottom: 28px; }
.hero-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.hero-buttons .btn { padding: 12px 26px; letter-spacing: 0.5px; }
.hero-buttons .btn-outline { background: rgba(255, 255, 255, 0.75); }

/* Right column is intentionally empty — the author is part of the banner art */
.hero-image-wrapper { flex: 1; }

/* Stats Bar */
.stats-section { padding: 0 5%; margin-top: -45px; position: relative; z-index: 10; }
.stats-container {
    max-width: var(--container); margin: 0 auto; background: #ffffff; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); display: flex; justify-content: space-around; align-items: center; padding: 20px 10px;
}
.stat-card { display: flex; align-items: center; gap: 15px; }
.stat-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; }
.icon-orange { background-color: #ff9f1c; }
.icon-pink { background-color: #e63946; }
.icon-purple { background-color: #7209b7; }
.icon-blue { background-color: #3a86ef; }
.stat-info h3 { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.stat-info p { font-size: 0.75rem; color: #666; }
.stat-divider { width: 1px; height: 35px; background-color: #e0e0e0; }

/* Quote Banner */
.quote-banner-section { max-width: var(--container); margin: 50px auto; padding: 0 20px; }
.quote-banner {
    background: linear-gradient(120deg, #6a1b9a 0%, #b3187c 35%, #e05232 70%, #f9a826 100%);
    border-radius: 18px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; color: #fff;
    box-shadow: 0 10px 30px rgba(138, 14, 104, 0.25);
}
.quote-left { position: relative; flex: 0 0 210px; padding-left: 55px; }
.quote-feather {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(-15deg);
    font-size: 2.6rem; color: #ffd479; opacity: 0.95;
}
.quote-mark { font-family: Georgia, serif; font-size: 3rem; line-height: 0.4; color: #ffd479; display: block; }
.quote-left h2 { font-family: 'Rozha One', serif; font-size: 1.5rem; line-height: 1.25; font-weight: 400; color: #ffd479; margin-top: 8px; }
.quote-card { background: #ffffff; color: #333; padding: 26px 30px; border-radius: 12px; text-align: center; flex: 1; margin: 0 15px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.hindi-text { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 600; color: #1a1a1a; line-height: 1.6; transition: opacity 0.2s ease; }
.hindi-text.fading { opacity: 0; }
.quote-author { display: block; margin-top: 12px; color: #d32f2f; font-family: 'Great Vibes', cursive; font-size: 1.4rem; }
.nav-arrow {
    background: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; color: #d32f2f;
    cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: all 0.25s ease;
}
.nav-arrow:hover { background: #ffd479; color: #8a0e68; transform: scale(1.1); }
.carousel-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 18px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background-color: #e0d3e8; cursor: pointer; transition: all 0.25s ease; }
.dot.active { background-color: #e05232; width: 11px; height: 11px; }

/* Books Section */
.books-section { max-width: var(--container); margin: 50px auto; padding: 30px; background: #ffffff; border-radius: 15px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }

/* Title sits centred, with the "View All" button pinned to the right */
.section-header { position: relative; text-align: center; margin-bottom: 32px; }
.section-title { font-family: 'Rozha One', serif; font-size: clamp(1.6rem, 2.4vw, 2.4rem); color: #2b0c51; font-weight: 400; }
.section-header .btn-outline-purple { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

.books-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.book-card { text-align: center; }
.book-cover {
    height: 190px; border-radius: 8px; display: flex; align-items: flex-start; justify-content: center;
    padding: 18px 12px; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.18); margin-bottom: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.book-card:hover .book-cover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.25); }
.book-cover h3 { font-size: 1.15rem; line-height: 1.35; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,0.45); }

/* Cover artwork approximated with layered gradients (sunset, forest, night …) */
.book-bg-1 { background: radial-gradient(circle at 50% 32%, #ffe082 0%, rgba(255,224,130,0) 42%), linear-gradient(180deg, #ffb74d 0%, #f4511e 45%, #4e342e 100%); }
.book-bg-2 { background: radial-gradient(circle at 50% 18%, #fff59d 0%, rgba(255,245,157,0) 38%), linear-gradient(180deg, #66bb6a 0%, #2e7d32 45%, #1b3d1b 100%); }
.book-bg-3 { background: radial-gradient(circle at 50% 30%, #ffcc80 0%, rgba(255,204,128,0) 45%), linear-gradient(180deg, #ff9800 0%, #e64a19 50%, #3e2723 100%); }
.book-bg-4 { background: radial-gradient(circle at 50% 55%, #ffd54f 0%, rgba(255,213,79,0) 25%), linear-gradient(180deg, #16324f 0%, #16283f 50%, #0b1524 100%); }
.book-bg-5 { background: linear-gradient(180deg, #fdf6e3 0%, #f3e3bd 60%, #e0c993 100%); color: #4e342e; }
.book-bg-5 h3 { text-shadow: none; }
.book-bg-6 { background: radial-gradient(circle at 50% 38%, #ffe082 0%, rgba(255,224,130,0) 40%), linear-gradient(180deg, #ffa726 0%, #ef5350 50%, #4a148c 100%); }

.pdf-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #d32f2f; font-weight: 600; }
.pdf-btn:hover { color: #7d2ae8; }

/* ------------------------------------------------------------------
   Decorative watercolour band shared by About + Features
   ------------------------------------------------------------------ */
.decor-band { position: relative; overflow: hidden; padding: 20px 0 40px; }

.decor-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/banner/bg.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.45;
    pointer-events: none;
}

.decor-band > * { position: relative; z-index: 1; }

/* About Section */
.about-section { max-width: var(--container); margin: 40px auto; padding: 0 20px; }
.about-container { display: flex; gap: 40px; align-items: center; }
.about-content { flex: 1; }
.red-text { color: #d32f2f; }
.about-title { font-family: 'Rozha One', serif; font-size: clamp(1.7rem, 2.6vw, 2.6rem); color: #2b0c51; font-weight: 400; }
.about-text { font-size: 0.85rem; color: #555; line-height: 1.7; margin-bottom: 20px; }
.signature-name { font-family: 'Great Vibes', cursive; font-size: 1.9rem; color: #7d2ae8; }
.signature-title { font-size: 0.75rem; color: #777; margin-bottom: 18px; }
.about-gallery { flex: 1; display: flex; gap: 15px; height: 340px; }
.gallery-large img, .gallery-stacked img {
    border-radius: 10px; width: 100%; object-fit: cover;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.gallery-large { flex: 1; }
.gallery-large img { height: 100%; }
.gallery-stacked { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.gallery-stacked img { height: calc(50% - 7.5px); }

/* Features Section */
.features-section { max-width: var(--container); margin: 40px auto 20px; text-align: center; padding: 0 20px; }
.features-title { font-family: 'Great Vibes', cursive; font-size: clamp(2rem, 3.4vw, 3.4rem); color: #2b0c51; margin-bottom: 40px; }
.features-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; }
.feature-item { flex: 1; min-width: 160px; display: flex; flex-direction: column; align-items: center; }
.feature-icon {
    width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin-bottom: 15px; background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}
.feature-item:hover .feature-icon { transform: translateY(-5px); }
.feature-item h4 { font-size: 0.95rem; font-weight: 700; color: #b8175f; margin-bottom: 6px; }
.feature-item p { font-size: 0.78rem; color: #555; line-height: 1.5; max-width: 180px; }
.icon-circle-pink { color: #7d2ae8; }
.icon-circle-red { color: #d92027; }
.icon-circle-purple { color: #6f42c1; }
.icon-circle-lightred { color: #e83e8c; }
.icon-circle-orange { color: #e03a3e; }

/* ==========================================================================
   QUOTES PAGE SPECIFIC STYLES
   ========================================================================== */
/* Watercolour banner behind the hero. b3.jpg carries the quill + ink pot on
   its left, so it is mirrored to place that artwork on the right as designed. */
.quotes-hero {
    position: relative;
    overflow: hidden;
    padding: var(--section-y) var(--page-x);
    min-height: clamp(340px, 30vw, 520px);
    display: flex;
    align-items: center;
    background-color: #fdf5ef;
}

.quotes-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/banner/b3.jpg');
    background-size: cover;
    background-position: center;
    transform: scaleX(-1);
}

/* Fades the artwork out under the headline so the copy stays readable */
.quotes-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 253, 250, 0.86) 0%, rgba(255, 253, 250, 0.6) 34%, rgba(255, 253, 250, 0.08) 55%, rgba(255, 253, 250, 0) 70%);
}

.quotes-hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.quotes-hero-text {
    flex: 0 0 46%;
}

.page-subtitle {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.7rem, 2.6vw, 2.7rem);
    font-weight: 400;
    color: #2b0c51;
    line-height: 1.2;
}

.page-title {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(2.4rem, 4.2vw, 4.6rem);
    /* Same reason as .logo-name — the gradient is clipped to the box, so the
       line box must clear the swash caps. */
    line-height: 1.32;
    font-weight: 400;
    background: linear-gradient(90deg, #e5127d 0%, #c2249b 45%, #6a1b9a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-feather {
    -webkit-text-fill-color: initial;
    color: #d82361;
    font-size: 1.4rem;
    transform: rotate(15deg);
    display: inline-block;
    vertical-align: middle;
}

.page-description {
    font-size: 0.88rem;
    color: #444;
    line-height: 1.8;
    margin-top: 10px;
}

/* Parchment card sitting over the open-book artwork */
.quotes-hero-banner-card {
    flex: 0 0 42%;
    background: rgba(255, 252, 244, 0.82);
    border-radius: 12px;
    padding: 30px 34px;
    box-shadow: 0 10px 30px rgba(90, 40, 20, 0.12);
    border: 1px solid rgba(216, 35, 97, 0.14);
    position: relative;
}

.notebook-quote {
    text-align: center;
    position: relative;
}

.quote-mark-large {
    font-size: 3rem;
    color: #d82361;
    font-family: Georgia, serif;
    line-height: 0;
    position: absolute;
    top: -10px;
    left: -10px;
}

.right-quote {
    top: auto;
    bottom: -20px;
    left: auto;
    right: -10px;
}

.quote-author-script {
    display: block;
    font-family: 'Great Vibes', cursive;
    font-size: 1.6rem;
    color: #d82361;
    margin-top: 15px;
}

/* Quotes Filter Header Bar */
.quotes-page-main {
    max-width: var(--container);
    margin: 40px auto;
    padding: 0 20px;
}

.explore-quotes-header {
    margin-bottom: 30px;
}

.quotes-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.filter-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: linear-gradient(90deg, #6c22bd, #8d2ce1);
    color: #fff;
    border-color: #6c22bd;
}

/* Each category keeps its own icon colour until the pill is selected */
.filter-btn i { transition: color 0.3s ease; }
.filter-btn:hover i,
.filter-btn.active i { color: #fff; }

.ic-purple { color: #6c22bd; }
.ic-green  { color: #2e9e4f; }
.ic-orange { color: #f5a623; }
.ic-pink   { color: #e83e8c; }
.ic-blue   { color: #3b7ddd; }
.ic-yellow { color: #f7b731; }
.ic-gold   { color: #e0a020; }

.quote-box.is-hidden { display: none; }

.quotes-empty {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    font-size: 0.88rem;
    padding: 40px 0;
}
.quotes-empty.show { display: block; }

.like-btn { cursor: pointer; user-select: none; }
.like-btn i { transition: transform 0.2s ease; }
.like-btn.liked i { transform: scale(1.25); }

.search-box {
    position: relative;
    width: 220px;
}

.search-box input {
    width: 100%;
    padding: 8px 35px 8px 15px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    font-size: 0.8rem;
    outline: none;
    background-color: #fff;
}

.search-box i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 0.8rem;
}

/* Layout Wrapper: Cards Grid + Sidebar */
.quotes-content-wrapper {
    display: flex;
    gap: 30px;
}

.quotes-grid-container {
    flex: 3;
}

.quotes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.quote-box {
    border-radius: 12px;
    padding: 25px 20px 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.04);
}

.quote-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-bottom: 12px;
}

.hindi-quote-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #222;
    line-height: 1.6;
    margin-bottom: 15px;
}

.author-sign {
    font-family: 'Great Vibes', cursive;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.quote-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #666;
    border-top: 1px dashed rgba(0,0,0,0.1);
    padding-top: 10px;
}

.like-btn i { color: #e74c3c; cursor: pointer; }
.share-btn { cursor: pointer; }

/* Cards Light Background Variants */
.box-pink { background-color: #fdf0f4; }
.box-pink .quote-icon { background-color: #e83e8c; }
.box-pink .author-sign { color: #e83e8c; }

.box-blue { background-color: #eff7ff; }
.box-blue .quote-icon { background-color: #007bff; }
.box-blue .author-sign { color: #007bff; }

.box-yellow { background-color: #fef8ec; }
.box-yellow .quote-icon { background-color: #fd7e14; }
.box-yellow .author-sign { color: #fd7e14; }

.box-green { background-color: #f2f9f4; }
.box-green .quote-icon { background-color: #28a745; }
.box-green .author-sign { color: #28a745; }

.box-purple { background-color: #f7f3fb; }
.box-purple .quote-icon { background-color: #6f42c1; }
.box-purple .author-sign { color: #6f42c1; }

.box-lightpink { background-color: #fcf0f7; }
.box-lightpink .quote-icon { background-color: #d63384; }
.box-lightpink .author-sign { color: #d63384; }

.box-peach { background-color: #fff6f0; }
.box-peach .quote-icon { background-color: #fd7e14; }
.box-peach .author-sign { color: #fd7e14; }

.box-cyan { background-color: #eafaf7; }
.box-cyan .quote-icon { background-color: #20c997; }
.box-cyan .author-sign { color: #20c997; }

.box-iceblue { background-color: #f0f4fd; }
.box-iceblue .quote-icon { background-color: #3b5998; }
.box-iceblue .author-sign { color: #3b5998; }

.load-more-wrapper {
    text-align: center;
    margin-top: 30px;
}

/* Sidebar Styles */
.quotes-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sidebar-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
}

.sidebar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2b0c51;
    text-align: center;
}

.category-list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.82rem;
    color: #444;
}

.category-list li a:hover .cat-name { color: #6c22bd; }
.cat-name i { width: 20px; }
.cat-count {
    color: #888;
    font-size: 0.78rem;
    font-weight: 500;
}

.text-green { color: #28a745; }
.text-orange { color: #fd7e14; }
.text-pink { color: #e83e8c; }
.text-blue { color: #007bff; }
.text-yellow { color: #ffc107; }
.text-gold { color: #e67e22; }

.sidebar-featured-banner {
    background: linear-gradient(135deg, #1d0731 0%, #3a0d5c 55%, #6a1b6a 100%);
    color: #fff;
    border-radius: 12px;
    padding: 28px 24px 30px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Quill + ink pot artwork in the lower-right corner */
.featured-art {
    position: absolute;
    right: 14px;
    bottom: 10px;
    width: 90px;
    height: 100px;
    pointer-events: none;
}

.featured-art .art-feather {
    position: absolute;
    right: 18px;
    top: 0;
    font-size: 3.4rem;
    color: #f5a623;
    transform: rotate(18deg);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.featured-art .art-inkpot {
    position: absolute;
    right: 8px;
    bottom: 0;
    font-size: 2.1rem;
    color: #2f6fd0;
    transform: rotate(-90deg);
}

.quote-icon-white {
    position: relative;
    font-size: 1.5rem;
    color: #e83e8c;
    display: block;
    margin-bottom: 10px;
}

.featured-banner-text {
    position: relative;
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 500;
    max-width: 200px;
}

.author-script-white {
    position: relative;
    display: block;
    font-family: 'Great Vibes', cursive;
    font-size: 1.4rem;
    color: #fca311;
    margin-top: 15px;
}

.popular-quotes-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.popular-quote-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}

.mini-quote-icon {
    color: #6c22bd;
    font-size: 0.8rem;
    margin-top: 2px;
}

.pop-quote-content p {
    font-size: 0.78rem;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.pop-like {
    font-size: 0.7rem;
    color: #888;
    white-space: nowrap;
}

.pop-like i { color: #e74c3c; }

/* ==========================================================================
   GALLERY PAGE SPECIFIC STYLES
   ========================================================================== */
.gallery-hero .quotes-hero-container { align-items: center; }

.gallery-hero-stats {
    flex: 1;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.hero-stat {
    background: #ffffff;
    border: 1px solid #f0e6f5;
    border-radius: 12px;
    padding: 22px 26px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    min-width: 110px;
}

.hero-stat-num {
    display: block;
    font-family: 'Rozha One', serif;
    font-size: 2rem;
    line-height: 1;
    background: linear-gradient(90deg, #7d2ae8, #d82361);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-stat-label {
    display: block;
    font-size: 0.72rem;
    color: #666;
    margin-top: 8px;
    letter-spacing: 0.5px;
}

.gallery-page-main {
    max-width: var(--container);
    margin: 40px auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------------
   Gallery heading + filter pills
   ------------------------------------------------------------------ */
.gallery-filter-section {
    text-align: center;
    margin-bottom: 32px;
}

.gallery-heading {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.9rem, 3vw, 3rem);
    font-weight: 400;
    color: #2b0c51;
    line-height: 1.1;
}

/* Thin rules either side of a magenta flourish */
.ornament-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 6px auto 26px;
    max-width: 300px;
}

.ornament-rule::before,
.ornament-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(216, 35, 97, 0) 0%, rgba(216, 35, 97, 0.55) 100%);
}

.ornament-rule::after { transform: scaleX(-1); }

.ornament-rule span {
    color: #d82361;
    font-size: 1.35rem;
    line-height: 1;
}

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* Overrides the compact .filter-btn pill used on the quotes page */
.filter-btn.gallery-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2b0c51;
    background: #ffffff;
    border: 1px solid #f2e9f7;
    box-shadow: 0 3px 12px rgba(43, 12, 81, 0.07);
}

.filter-btn.gallery-pill i { font-size: 1.05rem; }

.filter-btn.gallery-pill:hover {
    background: #ffffff;
    color: #2b0c51;
    border-color: #e3d0ef;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43, 12, 81, 0.12);
}

.filter-btn.gallery-pill:hover i { color: inherit; }

.filter-btn.gallery-pill.active {
    background: linear-gradient(135deg, #6a1fb8 0%, #9b21c4 50%, #d81b60 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(150, 30, 160, 0.35);
}

.filter-btn.gallery-pill.active i,
.filter-btn.gallery-pill:hover i { color: inherit; }
.filter-btn.gallery-pill.active i { color: #fff; }

/* Icon colours while the pill is at rest */
.gallery-pill .ic-grid    { color: #6a1fb8; }
.gallery-pill .ic-red     { color: #e5127d; }
.gallery-pill .ic-indigo  { color: #4a3ad4; }
.gallery-pill .ic-magenta { color: #d81b60; }
.gallery-pill .ic-violet  { color: #7d2ae8; }

.gallery-result-count {
    font-size: 0.78rem;
    color: #999;
    margin-top: 18px;
}

/* Masonry column layout keeps the mixed portrait/landscape photos intact */
.gallery-grid {
    column-count: 3;
    column-gap: 18px;
}

.gallery-item {
    position: relative;
    break-inside: avoid;
    margin: 0 0 18px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    background: #f3eef8;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.gallery-item:hover img { transform: scale(1.06); }

.gallery-item.is-hidden { display: none; }

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    color: #fff;
    background: linear-gradient(to top, rgba(31, 8, 54, 0.88) 0%, rgba(31, 8, 54, 0.35) 45%, rgba(31, 8, 54, 0) 75%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-within .gallery-overlay { opacity: 1; }

.gallery-tag {
    align-self: flex-start;
    background: linear-gradient(90deg, #d82a62, #ef5b25);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.gallery-overlay p {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
}

.gallery-expand {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #7d2ae8;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-empty {
    display: none;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    padding: 50px 0;
}

.gallery-empty.show { display: block; }

/* ------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------ */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20, 4, 36, 0.94);
    align-items: center;
    justify-content: center;
    padding: 40px 70px;
}

.lightbox.open { display: flex; }

.lightbox-content {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 76vh;
    border-radius: 8px;
    object-fit: contain;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
    text-align: center;
    color: #fff;
    max-width: 640px;
}

.lightbox-caption p {
    font-size: 0.9rem;
    margin-top: 8px;
}

.lightbox-counter {
    display: block;
    font-size: 0.72rem;
    color: #b9a3cf;
    margin-top: 6px;
    letter-spacing: 1px;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }

.lightbox-close { top: 25px; right: 25px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

body.lightbox-open { overflow: hidden; }

/* ==========================================================================
   ABOUT PAGE SPECIFIC STYLES
   ========================================================================== */
.about-hero {
    position: relative;
    background-image: url('../images/banner/b1.jpg');
    background-size: cover;
    background-position: 62% center;
    background-repeat: no-repeat;
    /* Matches .quotes-hero so every inner page banner is the same height.
       Padding stays under the shared height so min-height always governs and
       the copy is spaced by the flex centring instead. */
    min-height: clamp(340px, 30vw, 520px);
    display: flex;
    align-items: center;
    padding: 12px var(--page-x);
    overflow: hidden;
}

.about-hero-container {
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
}

.about-hero-text { max-width: 460px; }

.about-script-small {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.9rem, 2.8vw, 3rem);
    color: #e5127d;
    line-height: 1;
    margin-left: 40px;
}

.about-script-name {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(2.4rem, 3.8vw, 4.2rem);
    font-weight: 400;
    /* Clears the swash caps so the gradient clip does not shave their tops */
    line-height: 1.38;
    background: linear-gradient(90deg, #e5127d 0%, #b923a8 45%, #5b1a9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.name-feather {
    -webkit-text-fill-color: initial;
    color: #f5920b;
    font-size: 1.5rem;
    transform: rotate(15deg);
    display: inline-block;
    vertical-align: middle;
}

.ornament-left { margin-left: 0; margin-right: auto; }

/* Tightened so the hero copy fits the shared banner height */
.about-hero-text .ornament-rule { margin: 4px auto 14px; }

.about-kicker {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.about-tagline {
    font-family: 'Caveat', cursive;
    font-size: 1.45rem;
    color: #555;
    margin-bottom: 10px;
}

.about-lead {
    font-size: 0.86rem;
    color: #333;
    line-height: 1.75;
}

/* Faded quote sitting on the watercolour, top-right */
.hero-watermark-quote {
    position: absolute;
    top: 42px;
    right: 5%;
    max-width: 250px;
    text-align: left;
    pointer-events: none;
    opacity: 0.5;
}

.hero-watermark-quote p {
    font-size: 0.85rem;
    line-height: 1.9;
    color: #6b5b6e;
    font-style: italic;
}

.wm-mark {
    display: block;
    font-family: Georgia, serif;
    font-size: 2.4rem;
    line-height: 0.5;
    color: #c9a2b8;
}

.wm-mark-close { text-align: right; margin-top: 12px; }

/* ------------------------------------------------------------------
   Who I Am
   ------------------------------------------------------------------ */
.who-section {
    max-width: var(--container);
    margin: 35px auto;
    padding: 0 20px;
}

.who-panel {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 45px;
    background: linear-gradient(135deg, #faf6fd 0%, #f7f2fb 100%);
    border-radius: 18px;
    padding: 42px 45px;
}

.who-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.who-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7d2ae8, #9b3fd4);
    color: #fff;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.who-title {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.6rem, 2.3vw, 2.3rem);
    font-weight: 400;
    color: #2b0c51;
    position: relative;
    padding-bottom: 8px;
}

.who-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62px;
    height: 2px;
    background: #7d2ae8;
}

.who-text {
    font-size: 0.85rem;
    color: #444;
    line-height: 2;
    margin-bottom: 22px;
}

.who-sign {
    font-family: 'Great Vibes', cursive;
    font-size: 1.9rem;
    color: #e5127d;
    line-height: 1.2;
}

.who-role { font-size: 0.78rem; color: #555; }

/* Values list with the vertical rule down its left edge */
.who-right {
    position: relative;
    border-left: 2px solid #e2d3f0;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.value-item { display: flex; gap: 16px; align-items: flex-start; }

.value-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.val-pink   { background: #e5127d; }
.val-orange { background: #f5920b; }
.val-teal   { background: #17a2b8; }
.val-purple { background: #7d2ae8; }

.value-body h3 {
    font-family: 'Rozha One', serif;
    font-size: 1.12rem;
    font-weight: 400;
    margin-bottom: 3px;
}

.val-title-pink   { color: #e5127d; }
.val-title-orange { color: #f5920b; }
.val-title-teal   { color: #17a2b8; }
.val-title-purple { color: #7d2ae8; }

.value-body p {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.65;
}

/* Decorative dot grid, bottom-right of the panel */
.dot-grid {
    position: absolute;
    right: -18px;
    bottom: 6px;
    width: 26px;
    height: 86px;
    background-image: radial-gradient(#a98fd0 1.6px, transparent 1.7px);
    background-size: 9px 12px;
    opacity: 0.65;
}

/* ------------------------------------------------------------------
   My Literary Journey
   ------------------------------------------------------------------ */
.journey-section {
    position: relative;
    padding: var(--section-y) var(--page-x);
    /* Watercolour wash built from gradients — warm at the edges, clear centre */
    background:
        radial-gradient(circle at 2% 12%, rgba(245, 146, 11, 0.28) 0%, rgba(245, 146, 11, 0) 26%),
        radial-gradient(circle at 8% 78%, rgba(229, 18, 125, 0.22) 0%, rgba(229, 18, 125, 0) 24%),
        radial-gradient(circle at 97% 15%, rgba(125, 42, 232, 0.22) 0%, rgba(125, 42, 232, 0) 26%),
        radial-gradient(circle at 93% 82%, rgba(245, 146, 11, 0.26) 0%, rgba(245, 146, 11, 0) 26%),
        radial-gradient(circle at 50% 50%, #ffffff 0%, #fdf7f2 70%, #fbeee6 100%);
}

.journey-inner { max-width: var(--container); margin: 0 auto; text-align: center; }

.journey-title {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.7rem, 2.8vw, 2.9rem);
    font-weight: 400;
    line-height: 1.2;
}

.jt-dark { color: #2b0c51; }
.jt-pink { color: #e5127d; }

.jt-feather {
    font-size: 1.5rem;
    vertical-align: middle;
    margin: 0 14px;
}
.jt-feather-left  { color: #e5127d; transform: rotate(-18deg); display: inline-block; }
.jt-feather-right { color: #5b1a9e; transform: rotate(18deg);  display: inline-block; }

.journey-track {
    display: flex;
    margin-top: 34px;
}

.journey-step {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 0 10px;
}

.step-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    border: 4px solid #fff;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.14);
}

/* Connector line and midpoint dot between consecutive steps */
.journey-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 35px;
    left: calc(50% + 42px);
    width: calc(100% - 84px);
    height: 2px;
    background: currentColor;
    opacity: 0.55;
}

.journey-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 100%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.journey-step h3 {
    font-family: 'Rozha One', serif;
    font-size: 1.02rem;
    font-weight: 400;
    margin-bottom: 6px;
}

.journey-step p {
    font-size: 0.78rem;
    color: #555;
    line-height: 1.6;
    max-width: 175px;
    margin: 0 auto;
}

/* `color` drives the icon fill, heading, connector line and dot together */
.step-purple { color: #7d2ae8; }
.step-orange { color: #f5920b; }
.step-pink   { color: #e5127d; }
.step-teal   { color: #17a2b8; }
.step-olive  { color: #9aab1e; }

.journey-step .step-icon { background: currentColor; }
.journey-step h3 { color: currentColor; }

/* ------------------------------------------------------------------
   Stats bar with gradient frame
   ------------------------------------------------------------------ */
.about-stats-section { max-width: var(--container); margin: -25px auto 0; padding: 0 20px; position: relative; z-index: 2; }

.about-stats-frame {
    background: linear-gradient(90deg, #7d2ae8 0%, #c2249b 45%, #f5920b 100%);
    border-radius: 16px;
    padding: 4px;
    box-shadow: 0 10px 30px rgba(90, 30, 130, 0.18);
}

.about-stats {
    background: #ffffff;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 18px;
}

.about-stat { display: flex; align-items: center; gap: 12px; padding: 0 14px; }

.as-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.as-purple { background: #5b1a9e; }
.as-orange { background: #f5920b; }
.as-pink   { background: #e5127d; }
.as-teal   { background: #17a2b8; }
.as-olive  { background: #9aab1e; }

.as-body h3 { font-family: 'Rozha One', serif; font-size: 1.45rem; font-weight: 400; line-height: 1.1; color: #1a1a1a; }
.as-body p { font-size: 0.74rem; color: #666; }

.as-divider { width: 1px; height: 40px; background: #ececec; }

/* ------------------------------------------------------------------
   Closing quote banner
   ------------------------------------------------------------------ */
.about-quote-banner {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    padding: 55px 6% 50px;
    text-align: center;
    background: linear-gradient(115deg, #6a1b9a 0%, #9b21a8 35%, #d81b60 68%, #ef6125 100%);
    color: #fff;
}

.aqb-art-left {
    position: absolute;
    left: 5%;
    bottom: 18px;
    width: 120px;
    height: 130px;
    pointer-events: none;
}

.aqb-feather {
    position: absolute;
    left: 34px;
    top: 0;
    font-size: 3.6rem;
    color: #f5a623;
    transform: rotate(16deg);
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.aqb-books {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 3.4rem;
    color: #2f6fd0;
}

.aqb-floral {
    position: absolute;
    right: 6%;
    bottom: 30px;
    font-size: 5.5rem;
    color: rgba(255, 255, 255, 0.18);
    transform: rotate(-15deg);
    pointer-events: none;
}

.aqb-body { position: relative; display: inline-block; max-width: 700px; }

.about-quote-banner .hindi-text {
    color: #fff;
    font-size: 1.35rem;
    line-height: 2;
    font-weight: 500;
}

.aqb-sign {
    display: block;
    font-family: 'Great Vibes', cursive;
    font-size: 1.6rem;
    color: #ffd479;
    margin-top: 14px;
}

.aqb-mark {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 4rem;
    line-height: 0.5;
    color: #ffd479;
}

.aqb-mark-open { top: 6px; left: -48px; }
.aqb-mark-close { bottom: 30px; right: -48px; }

/* ==========================================================================
   POEMS PAGE
   ========================================================================== */
.poems-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(370px, 33vw, 510px);
    padding: var(--section-y) var(--page-x);
}

.poems-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/banner/b1.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

.poems-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 250, 252, 0.9) 0%, rgba(255, 250, 252, 0.64) 28%, rgba(255, 250, 252, 0.1) 52%, rgba(255, 250, 252, 0) 68%);
}

.poems-hero-container {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
}

.poems-hero-text { max-width: 500px; }
.poems-hero-title { line-height: 1.12; font-weight: 400; }

.ph-dark,
.ph-gradient { display: block; font-family: 'Rozha One', serif; }

.ph-dark { font-size: clamp(1.9rem, 3.2vw, 3.2rem); color: #1c1240; }

.ph-gradient {
    font-size: clamp(2.3rem, 4.2vw, 4.1rem);
    background: linear-gradient(90deg, #e5127d 0%, #d81b60 45%, #b5209f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.poems-hero-script {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.2rem, 1.9vw, 1.65rem);
    color: #6a1b9a;
    margin-bottom: 12px;
}

.poems-hero-desc { font-size: 0.86rem; color: #333; line-height: 1.9; }

.poems-hero-feather {
    position: absolute;
    left: 27%;
    bottom: 30px;
    z-index: 2;
    font-size: 2.4rem;
    color: rgba(125, 42, 232, 0.26);
    transform: rotate(18deg);
    pointer-events: none;
}

.poems-page-main {
    max-width: var(--container);
    margin: 38px auto 46px;
    padding: 0 20px;
}

.poems-heading-block { margin-bottom: 24px; }

.poems-layout { display: flex; gap: 30px; align-items: flex-start; }
.poems-main { flex: 1 1 auto; min-width: 0; }

.poems-sidebar {
    flex: 0 0 288px;
    width: 288px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ------------------------------------------------------- toolbar */
.poems-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.poems-filters { display: flex; flex-wrap: wrap; gap: 10px; }

.filter-btn.poem-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2b0c51;
    background: #fff;
    border: 1px solid #efe6f6;
    box-shadow: 0 2px 9px rgba(43, 12, 81, 0.06);
}

.filter-btn.poem-pill:hover {
    background: #fff;
    color: #2b0c51;
    border-color: #ddc8ef;
    transform: translateY(-2px);
}

.filter-btn.poem-pill.active {
    background: linear-gradient(135deg, #6a1fb8, #8d2ce1);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 7px 18px rgba(109, 32, 186, 0.32);
}
.filter-btn.poem-pill.active i { color: #fff; }

.poem-search { width: 240px; }

/* Topic accents, shared by pills, badges and sidebar rows */
.pt-purple-tx { color: #7d2ae8; }
.pt-red-tx    { color: #e5127d; }
.pt-green-tx  { color: #2e9e4f; }
.pt-blue-tx   { color: #3b7ddd; }
.pt-violet-tx { color: #9b3fd4; }
.pt-indigo-tx { color: #4a3ad4; }
.pt-slate-tx  { color: #6b7a90; }

.pt-purple-bg { background: linear-gradient(90deg, #6a1fb8, #9b3fd4); }
.pt-red-bg    { background: linear-gradient(90deg, #c2185b, #e5127d); }
.pt-green-bg  { background: linear-gradient(90deg, #2e8b46, #45b35f); }
.pt-blue-bg   { background: linear-gradient(90deg, #2f66c0, #3b7ddd); }
.pt-violet-bg { background: linear-gradient(90deg, #7d2ae8, #a855d6); }
.pt-indigo-bg { background: linear-gradient(90deg, #3a2cc0, #4a3ad4); }
.pt-slate-bg  { background: linear-gradient(90deg, #5b6a80, #7b8aa0); }

/* ---------------------------------------------------------- cards */
.poems-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.poem-card {
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 14px rgba(43, 12, 81, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.poem-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(43, 12, 81, 0.14); }
.poem-card.is-hidden { display: none; }

.pc-media { position: relative; overflow: hidden; }

.poem-art {
    aspect-ratio: 4 / 3;
    transition: transform 0.55s ease;
}
.poem-card:hover .poem-art { transform: scale(1.07); }

.poem-art.has-image { display: block; }
.poem-art.has-image img { width: 100%; height: 100%; object-fit: cover; }

.pc-badge {
    position: absolute;
    left: 0;
    bottom: 12px;
    z-index: 2;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 0 14px 14px 0;
}

.pc-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.pc-body h3 { font-size: 1rem; font-weight: 700; color: #1c1240; line-height: 1.4; }

.pc-lines { font-size: 0.78rem; color: #777; line-height: 1.85; flex: 1; }

.pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 11px;
    margin-top: 4px;
    border-top: 1px solid #f4eef9;
}

.pc-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #7d2ae8;
    transition: gap 0.25s ease, color 0.25s ease;
}
.poem-card:hover .pc-read { color: #e5127d; gap: 12px; }

.pc-like {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #c9b6da;
    transition: color 0.25s ease, transform 0.2s ease;
}
.pc-like:hover { color: #e5127d; }
.pc-like.is-liked { color: #e5127d; transform: scale(1.15); }

/* Scenes, layered from gradients since there is no poem artwork yet */
.art-sunset-bench { background: radial-gradient(circle at 62% 40%, #ffd79a 0%, rgba(255,215,154,0) 30%), linear-gradient(180deg, #f0a94e 0%, #c9612c 48%, #3a2418 100%); }
.art-book-heart   { background: radial-gradient(circle at 50% 46%, #fff4e0 0%, rgba(255,244,224,0) 40%), linear-gradient(180deg, #e8d4b0 0%, #cfae82 55%, #8d6b4a 100%); }
.art-mountains    { background: radial-gradient(circle at 50% 22%, #dff2ff 0%, rgba(223,242,255,0) 34%), linear-gradient(180deg, #8fc4e0 0%, #4d87a8 46%, #24485c 100%); }
.art-tricolour    { background: linear-gradient(180deg, #ff9933 0%, #ffd9a0 34%, #f2f2f2 52%, #9fd4a8 68%, #138808 100%); }
.art-road         { background: radial-gradient(circle at 50% 34%, #ffe0b0 0%, rgba(255,224,176,0) 30%), linear-gradient(180deg, #f3b268 0%, #d98a58 42%, #4a4a52 100%); }
.art-blossom      { background: radial-gradient(circle at 42% 38%, #fff0f5 0%, rgba(255,240,245,0) 34%), linear-gradient(180deg, #f7c3d6 0%, #ea92b4 55%, #b25f83 100%); }
.art-diya         { background: radial-gradient(circle at 46% 56%, #ffcf6b 0%, rgba(255,207,107,0) 26%), linear-gradient(180deg, #2a1608 0%, #3d2410 50%, #150b04 100%); }
.art-hands        { background: radial-gradient(circle at 55% 48%, #ffd9a8 0%, rgba(255,217,168,0) 34%), linear-gradient(180deg, #4f7f8c 0%, #2f5866 48%, #17303a 100%); }

/* -------------------------------------------------------- sidebar */
.featured-poem-card { position: relative; overflow: hidden; text-align: center; }

.fp-mark {
    display: block;
    font-family: Georgia, serif;
    font-size: 2.4rem;
    line-height: 0.5;
    color: #d1b6e6;
    text-align: left;
    margin: 8px 0 10px;
}

.fp-lines { font-size: 0.86rem; font-weight: 600; color: #2b2b2b; line-height: 2; }

.fp-sign {
    font-family: 'Great Vibes', cursive;
    font-size: 1.4rem;
    color: #e5127d;
    margin-top: 12px;
}

.fp-art { position: relative; height: 74px; margin: 6px 0 14px; }

.fp-feather {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-4px) rotate(18deg);
    font-size: 2.4rem;
    color: #f5a623;
}

.fp-inkpot {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-26px) rotate(-90deg);
    font-size: 1.7rem;
    color: #2f6fd0;
}

.poem-viewall {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #7d2ae8;
    transition: gap 0.25s ease;
}
.poem-viewall:hover { gap: 13px; color: #e5127d; }

/* ---------------------------------------------------------- reader */
.poem-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20, 4, 36, 0.9);
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}
.poem-modal.open { display: flex; }

.pm-panel {
    position: relative;
    width: min(620px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 34px 34px 30px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.pm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #f3eafc;
    color: #7d2ae8;
    font-size: 0.9rem;
    cursor: pointer;
}
.pm-close:hover { background: #7d2ae8; color: #fff; }

.pm-title {
    font-family: 'Rozha One', serif;
    font-size: 1.7rem;
    font-weight: 400;
    color: #1c1240;
    margin-top: 12px;
}

.poem-verse { display: flex; flex-direction: column; margin: 6px 0 4px; }
.pv-line { font-size: 0.98rem; color: #333; line-height: 2.1; }
.pv-gap { height: 16px; }

.pm-sign {
    font-family: 'Great Vibes', cursive;
    font-size: 1.5rem;
    color: #e5127d;
    margin-top: 14px;
}

/* ==========================================================================
   EVENTS PAGE
   ========================================================================== */
.events-page-main {
    max-width: var(--container);
    margin: 40px auto;
    padding: 0 20px;
}

.events-section + .events-section { margin-top: 20px; }

/* Date block reused by the featured card and the upcoming rows */
.ev-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 76px;
    padding: 12px 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(160deg, #6a1fb8 0%, #9b21a8 55%, #d81b60 100%);
    box-shadow: 0 6px 18px rgba(109, 32, 186, 0.3);
    line-height: 1.1;
}

.ev-date em { font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; opacity: 0.9; }
.ev-date strong { font-family: 'Rozha One', serif; font-size: 1.85rem; font-weight: 400; margin: 2px 0; }
.ev-date small { font-size: 0.62rem; opacity: 0.85; letter-spacing: 0.8px; }

.ev-date.is-float { position: absolute; top: 16px; left: 16px; z-index: 2; }

/* ------------------------------------------------------- next event */
.event-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(43, 12, 81, 0.08);
    margin-bottom: 26px;
}

.ef-media { position: relative; height: 340px; overflow: hidden; }

.ef-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transition: transform 0.6s ease;
}
.event-featured:hover .ef-media img { transform: scale(1.05); }

.ef-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: linear-gradient(90deg, #d82a62, #ef6125);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 20px;
}

.ef-body {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

.ef-body h3 {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.3rem, 1.9vw, 1.9rem);
    font-weight: 400;
    line-height: 1.1;
    color: #2b0c51;
}

.ef-body > p { font-size: 0.85rem; color: #555; line-height: 1.85; }

.ev-meta { display: flex; flex-direction: column; gap: 7px; }
.ev-meta li { font-size: 0.79rem; color: #555; display: flex; align-items: flex-start; gap: 9px; }
.ev-meta i { color: #d82361; margin-top: 3px; width: 14px; }

/* -------------------------------------------------- upcoming rows */
.upcoming-list { display: flex; flex-direction: column; gap: 16px; }

.event-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 3px 14px rgba(43, 12, 81, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-row:hover { transform: translateX(4px); box-shadow: 0 10px 26px rgba(43, 12, 81, 0.11); }

.er-body { flex: 1; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }

.er-body h4 {
    font-family: 'Rozha One', serif;
    font-size: 1.12rem;
    font-weight: 400;
    color: #2b0c51;
    line-height: 1.4;
}

.er-body > p { font-size: 0.79rem; color: #666; line-height: 1.7; }

.er-body .ev-meta { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; margin-top: 2px; }

.er-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid #b98fe0;
    color: #7d2ae8;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.25s ease;
}
.er-cta:hover { background: #7d2ae8; border-color: #7d2ae8; color: #fff; gap: 12px; }

/* Empty / note states */
.ev-note {
    font-size: 0.82rem;
    color: #888;
    text-align: center;
    padding: 18px;
    background: #faf7fd;
    border-radius: 12px;
}

.ev-empty {
    text-align: center;
    padding: 54px 24px;
    background: linear-gradient(135deg, #faf6fd 0%, #f7f2fb 100%);
    border: 1px solid #f0e6f5;
    border-radius: 16px;
}
.ev-empty i { font-size: 2.6rem; color: #d5b8ea; margin-bottom: 14px; }
.ev-empty h3 { font-family: 'Rozha One', serif; font-size: 1.5rem; font-weight: 400; color: #2b0c51; margin-bottom: 8px; }
.ev-empty p { font-size: 0.85rem; color: #666; line-height: 1.8; max-width: 460px; margin: 0 auto 20px; }

/* --------------------------------------------------- invite band */
.invite-band {
    position: relative;
    overflow: hidden;
    margin: 42px 0;
    border-radius: 16px;
    padding: 30px clamp(22px, 3vw, 44px);
    background: linear-gradient(115deg, #3d0a63 0%, #6a1b9a 40%, #b3187c 72%, #ef6125 100%);
    color: #fff;
}

.invite-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.invite-art {
    font-size: 2.4rem;
    color: #ffd479;
    transform: rotate(16deg);
    flex-shrink: 0;
}

.invite-text { flex: 1; min-width: 240px; }
.invite-text h3 { font-family: 'Rozha One', serif; font-size: 1.5rem; font-weight: 400; margin-bottom: 5px; }
.invite-text p { font-size: 0.84rem; color: #f0e2f8; line-height: 1.7; }

.invite-btn { flex-shrink: 0; padding: 12px 24px; }

/* ------------------------------------------------------ past grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.event-card {
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(43, 12, 81, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(43, 12, 81, 0.14); }
.event-card.is-hidden { display: none; }

.ec-media { position: relative; height: 180px; overflow: hidden; }

.ec-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transition: transform 0.55s ease;
}
.event-card:hover .ec-media img { transform: scale(1.07); }

.ec-media .blog-tag { position: absolute; left: 12px; bottom: 12px; }

.ec-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.ec-date { font-size: 0.72rem; color: #999; }
.ec-date i { margin-right: 6px; color: #b08fd0; }

.ec-body h4 {
    font-family: 'Rozha One', serif;
    font-size: 1.08rem;
    font-weight: 400;
    color: #2b0c51;
    line-height: 1.4;
}

.ec-body > p { font-size: 0.78rem; color: #666; line-height: 1.7; flex: 1; }

.ec-venue { font-size: 0.74rem; color: #777; }
.ec-venue i { color: #d82361; margin-right: 6px; }

/* ==========================================================================
   BOOKS PAGE
   ========================================================================== */
.books-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 32vw, 500px);
    padding: var(--section-y) var(--page-x);
}

.books-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/banner/b1.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

.books-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 252, 248, 0.9) 0%, rgba(255, 252, 248, 0.66) 30%, rgba(255, 252, 248, 0.12) 54%, rgba(255, 252, 248, 0) 70%);
}

.books-hero-container {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
}

.books-hero-text { max-width: 500px; }

.books-hero-title { line-height: 1.12; font-weight: 400; }

.bh-dark,
.bh-gradient {
    display: block;
    font-family: 'Rozha One', serif;
}

.bh-dark { font-size: clamp(1.9rem, 3.2vw, 3.2rem); color: #1c1240; }

.bh-gradient {
    font-size: clamp(2.3rem, 4.2vw, 4.1rem);
    background: linear-gradient(90deg, #e5127d 0%, #b5209f 45%, #5b1a9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.books-hero-script {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.2rem, 1.9vw, 1.65rem);
    color: #6a1b9a;
    margin-bottom: 12px;
}

.books-hero-desc { font-size: 0.86rem; color: #333; line-height: 1.9; }

.books-hero-feather {
    position: absolute;
    left: 30%;
    bottom: 26px;
    z-index: 2;
    font-size: 2.6rem;
    color: rgba(125, 42, 232, 0.28);
    transform: rotate(18deg);
    pointer-events: none;
}

.books-page-main {
    max-width: var(--container);
    margin: 38px auto 46px;
    padding: 0 20px;
}

.books-heading-block { margin-bottom: 26px; }

.books-layout { display: flex; gap: 30px; align-items: flex-start; }
.books-main { flex: 1 1 auto; min-width: 0; }

.books-sidebar {
    flex: 0 0 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ------------------------------------------------------ filter pills */
.books-filters { display: flex; flex-wrap: wrap; gap: 11px; }

.filter-btn.book-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 11px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #2b0c51;
    background: #fff;
    border: 1px solid #efe6f6;
    box-shadow: 0 2px 9px rgba(43, 12, 81, 0.06);
}

.filter-btn.book-pill:hover {
    background: #fff;
    color: #2b0c51;
    border-color: #ddc8ef;
    transform: translateY(-2px);
}

.filter-btn.book-pill.active {
    background: linear-gradient(135deg, #6a1fb8, #8d2ce1);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 7px 18px rgba(109, 32, 186, 0.32);
}
.filter-btn.book-pill.active i { color: #fff; }

.books-count { font-size: 0.76rem; color: #999; margin: 14px 0 16px; }

/* Category accent colours, shared by pills, labels and sidebar rows */
.bc-purple-tx { color: #7d2ae8; }
.bc-blue-tx   { color: #3b7ddd; }
.bc-teal-tx   { color: #17a2b8; }
.bc-orange-tx { color: #f5920b; }
.bc-indigo-tx { color: #4a3ad4; }

.bc-purple { background: linear-gradient(90deg, #6a1fb8, #9b3fd4); }
.bc-blue   { background: linear-gradient(90deg, #2f66c0, #3b7ddd); }
.bc-teal   { background: linear-gradient(90deg, #0f8a9c, #17a2b8); }
.bc-orange { background: linear-gradient(90deg, #e07b0a, #f5920b); }
.bc-indigo { background: linear-gradient(90deg, #3a2cc0, #4a3ad4); }

/* ------------------------------------------------------------- cards */
.books-collection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.book-item {
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 14px rgba(43, 12, 81, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-item:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(43, 12, 81, 0.14); }
.book-item.is-hidden { display: none; }

.bi-body { padding: 14px 15px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }

.bi-body h3 {
    font-size: 0.98rem;
    font-weight: 600;
    color: #1c1240;
    line-height: 1.4;
}

.bi-cat { font-size: 0.74rem; font-weight: 500; }

.bi-body > p {
    font-size: 0.76rem;
    color: #777;
    line-height: 1.65;
    flex: 1;
}

.bi-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 15px;
    border-radius: 7px;
    border: 1px solid #b98fe0;
    background: #fff;
    color: #7d2ae8;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.book-item:hover .bi-btn { background: #7d2ae8; border-color: #7d2ae8; color: #fff; gap: 11px; }

/* The cover gets its own layer so the "Read" badge can sit over the artwork */
.bi-cover { position: relative; overflow: hidden; }
.bi-cover .book-cover-art { width: 100%; }

.bi-peek {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: rgba(28, 8, 54, 0.55);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.book-item:hover .bi-peek { opacity: 1; }

/* Side by side when the card is wide enough, otherwise one full-width button
   per row rather than two ragged ones */
.bi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bi-actions .bi-btn { flex: 1 1 auto; justify-content: center; margin-top: 0; }

/* Reading is the primary action, so it stays filled instead of waiting for hover */
.bi-read { background: linear-gradient(90deg, #7d2ae8, #a239ea); border-color: transparent; color: #fff; }
.book-item:hover .bi-read { background: linear-gradient(90deg, #6a1fb8, #9b3fd4); border-color: transparent; }

/* TEMPORARY: the second reader, kept visibly secondary to the first */
.bi-read.is-alt { background: #f4ecfd; border-color: #d9c2f3; color: #6a1fb8; }
.book-item:hover .bi-read.is-alt { background: #e8d9fa; border-color: #c3a3ea; color: #55159a; }

/* ------------------------------------------------- cover artwork (CSS) */
.book-cover-art {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 22px 16px;
    overflow: hidden;
}

.book-cover-art.has-image { padding: 0; }
.book-cover-art.has-image img { width: 100%; height: 100%; object-fit: cover; }

.bca-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Scenes, layered from gradients since there is no cover art yet */
.cover-sunset    { background: radial-gradient(circle at 50% 44%, #ffd79a 0%, rgba(255,215,154,0) 34%), linear-gradient(180deg, #e8a13c 0%, #c5622a 46%, #3d2418 100%); }
.cover-moon      { background: radial-gradient(circle at 52% 24%, #fffbe0 0%, rgba(255,251,224,0) 13%), linear-gradient(180deg, #0f3160 0%, #14456f 48%, #08182f 100%); }
.cover-parchment { background: linear-gradient(180deg, #f8eeda 0%, #ecd9b7 58%, #dcc394 100%); }
.cover-summit    { background: radial-gradient(circle at 50% 56%, #ffdca6 0%, rgba(255,220,166,0) 28%), linear-gradient(180deg, #f2a25a 0%, #d9663a 47%, #4a2b2b 100%); }
.cover-forest    { background: radial-gradient(circle at 50% 26%, #eaf7a8 0%, rgba(234,247,168,0) 32%), linear-gradient(180deg, #57964a 0%, #2f6b2a 52%, #17351c 100%); }
.cover-sea       { background: radial-gradient(circle at 50% 22%, #d9f6ff 0%, rgba(217,246,255,0) 30%), linear-gradient(180deg, #7fd0e8 0%, #3ba3cc 50%, #1a6a92 100%); }
.cover-lantern   { background: radial-gradient(circle at 46% 58%, #ffcf6b 0%, rgba(255,207,107,0) 24%), linear-gradient(180deg, #14304d 0%, #0e2138 56%, #071223 100%); }
.cover-blossom   { background: linear-gradient(180deg, #fce1ea 0%, #f7c6d6 56%, #e79bb4 100%); }

/* Light covers need dark type */
.cover-parchment .bca-title,
.cover-blossom .bca-title { color: #4a2b2b; text-shadow: none; }

.book-cover-art.is-thumb { aspect-ratio: 3 / 4; width: 44px; padding: 5px 3px; border-radius: 5px; flex-shrink: 0; }
.book-cover-art.is-thumb .bca-title { font-size: 0.4rem; line-height: 1.25; }

.book-cover-art.is-large { aspect-ratio: 3 / 4; width: 100%; border-radius: 10px; }

/* ----------------------------------------------------------- sidebar */
.book-search-card { padding: 14px; }
.book-search-card .search-box { width: 100%; }

.about-books-card { position: relative; overflow: hidden; }

.abc-head { display: flex; align-items: center; gap: 12px; justify-content: center; }

.abc-head i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3eafc;
    color: #7d2ae8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.abc-head h3 { font-family: 'Rozha One', serif; font-size: 1.2rem; font-weight: 400; color: #2b0c51; }

.abc-text { font-size: 0.82rem; color: #444; line-height: 1.95; }

.abc-sign {
    font-family: 'Great Vibes', cursive;
    font-size: 1.4rem;
    color: #e5127d;
    margin-top: 12px;
}

.abc-feather {
    position: absolute;
    right: 16px;
    bottom: 14px;
    font-size: 1.8rem;
    color: rgba(125, 42, 232, 0.22);
    transform: rotate(18deg);
}

.popular-books { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

.pop-book { display: flex; gap: 12px; align-items: center; }

.pb-info h4 { font-size: 0.82rem; font-weight: 600; color: #2b0c51; margin-bottom: 4px; }
.pop-book:hover .pb-info h4 { color: #7d2ae8; }

.pb-rating { font-size: 0.66rem; color: #f5a623; letter-spacing: 1px; }
.pb-rating em { font-style: normal; color: #777; margin-left: 5px; font-size: 0.72rem; }

/* ------------------------------------------------------------- modal */
.book-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20, 4, 36, 0.9);
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}
.book-modal.open { display: flex; }

.bm-panel {
    position: relative;
    width: min(760px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.bm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #f3eafc;
    color: #7d2ae8;
    font-size: 0.9rem;
    cursor: pointer;
}
.bm-close:hover { background: #7d2ae8; color: #fff; }

.bm-body { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start; }

.bm-info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.bm-info h3 { font-family: 'Rozha One', serif; font-size: 1.6rem; font-weight: 400; color: #1c1240; }
.bm-info > p { font-size: 0.85rem; color: #555; line-height: 1.95; }

.bm-rating { font-size: 0.78rem; color: #f5a623; letter-spacing: 1.5px; }
.bm-rating em { font-style: normal; color: #777; margin-left: 6px; }

.bm-meta { display: flex; gap: 20px; font-size: 0.78rem; color: #666; }
.bm-meta i { color: #b08fd0; margin-right: 6px; }

.bm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.bm-actions .btn { text-decoration: none; }

/* ==========================================================================
   FLIPBOOK READER (books.html — see js/books-reader.js)
   ========================================================================== */
.book-reader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2400;   /* over .book-modal, which stays open behind it */
    flex-direction: column;
    padding: 14px clamp(10px, 2vw, 28px) 18px;
    background: radial-gradient(circle at 50% 10%, #2d1253 0%, #17062c 55%, #0a0215 100%);
}
.book-reader.open { display: flex; }

/* ------------------------------------------------------------- title bar */
.br-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
}

.br-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Rozha One', serif;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    font-weight: 400;
    color: #fff;
}
.br-title i { font-size: 0.8em; color: #c79bff; }

/* TEMPORARY: which reader is on screen */
.br-mode {
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    font-family: 'Poppins', sans-serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d6c6f2;
    white-space: nowrap;
}
.br-mode:empty { display: none; }

.br-tools { display: flex; gap: 8px; }

.br-tool {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #e8dcff;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}
.br-tool:hover { background: #7d2ae8; border-color: #7d2ae8; color: #fff; }

/* ----------------------------------------------------------------- stage */
.br-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Room for the arrows, which float over the stage rather than taking a
       column, so the book can use the width that is actually left */
    padding: 0 58px;
    /* In single-page mode the turned leaf swings past the book's left edge */
    overflow: hidden;
}

/* Page proportions come from the source PDF: 612 x 792, so 0.7727 per page
   and twice that across an open spread. The book is sized from whichever of
   height or width runs out first. */
.br-book {
    --vp-h: 100vh;   /* dvh below, so a mobile URL bar cannot crop the book */
    --avail-h: calc(var(--vp-h) - 150px);
    --avail-w: calc(100vw - 180px);
    --ph: min(var(--avail-h), calc(var(--avail-w) / 1.5455));

    position: relative;
    height: var(--ph);
    width: calc(var(--ph) * 1.5455);
    perspective: 2400px;
    cursor: pointer;
}

@supports (height: 100dvh) {
    .br-book { --vp-h: 100dvh; }
}

.br-book.is-single {
    --avail-w: calc(100vw - 120px);
    --ph: min(var(--avail-h), calc(var(--avail-w) / 0.7727));
    width: calc(var(--ph) * 0.7727);
}

/* Paper behind the pages, and the drop shadow the 3D layers cannot carry */
.br-book::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.br-page {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
}
.br-left  { left: 0; }
.br-right { left: 50%; }

.br-book.is-single .br-left  { display: none; }
.br-book.is-single .br-right { left: 0; width: 100%; }

.br-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.24), rgba(0,0,0,0.04));
    z-index: 4;
    pointer-events: none;
}
.br-book.is-single .br-spine { display: none; }

/* ------------------------------------------------------- the turning leaf */
.br-leaf {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    z-index: 3;
    transform-origin: left center;   /* the spine */
    transform-style: preserve-3d;
    transition: transform 0.72s cubic-bezier(0.42, 0, 0.28, 1);
    will-change: transform;
}
.br-leaf.is-on { display: block; }
.br-leaf.is-flipped { transform: rotateY(-180deg); }
.br-leaf.no-anim { transition: none; }

.br-book.is-single .br-leaf { left: 0; width: 100%; }

.br-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.br-back { transform: rotateY(180deg); }

/* --------------------------------------------------------------- a sheet */
/* No background here: the cover face carries a .cover-* gradient, and paper
   lives on .br-book::before anyway */
.br-sheet {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Paper curves into the spine. The back face is mirrored, so its own right
   edge is the one that ends up against the spine — same side as .br-left. */
.br-left .br-sheet,
.br-back .br-sheet {
    border-radius: 6px 2px 2px 6px;
    box-shadow: inset -18px 0 30px -20px rgba(58, 30, 12, 0.55);
}
.br-right .br-sheet,
.br-front .br-sheet {
    border-radius: 2px 6px 6px 2px;
    box-shadow: inset 18px 0 30px -20px rgba(58, 30, 12, 0.55);
}
.br-book.is-single .br-sheet { border-radius: 4px; box-shadow: none; }

/* Warm stock, lit from the top the way an open book is */
.br-blank,
.br-leafpage,
.br-textpage,
.br-end {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(180deg, #fffdf7 0%, #fdf8ec 55%, #f7f0de 100%);
}
.br-blank { background: linear-gradient(180deg, #fdf8ec, #f4ecd8); }

.br-leafpage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    mix-blend-mode: multiply;   /* the scan's white ground drops out onto the stock */
}

/* --------------------------------------------------------- page furniture */

/* The printed border: a rule with a hairline companion inside it. Insets are
   derived from --ph so the frame keeps its weight at every page size. */
.bt-frame {
    position: absolute;
    inset: calc(var(--ph) * 0.045);
    border: 1px solid rgba(139, 105, 58, 0.36);
    pointer-events: none;
}
.bt-frame::before {
    content: '';
    position: absolute;
    inset: calc(var(--ph) * 0.007);
    border: 1px solid rgba(139, 105, 58, 0.17);
}

/* ❦ between fading rules — the same ornament the pages use elsewhere */
.bt-orn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    width: 46%;
    margin: 0.15em auto 1em;
    color: #c0356b;
    font-size: 0.8em;
    line-height: 1;
}
.bt-orn::before,
.bt-orn::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(192, 53, 107, 0) 0%, rgba(192, 53, 107, 0.5) 100%);
}
.bt-orn::after { transform: scaleX(-1); }

/* Folio, set between em dashes as a printed page would be */
.br-num {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--ph) * 0.052);
    text-align: center;
    font-size: 0.66rem;
    letter-spacing: 1px;
    color: #a8977c;
}
.br-num::before { content: '\2014\00a0'; opacity: 0.55; }
.br-num::after  { content: '\00a0\2014'; opacity: 0.55; }

/* ------------------------------------------------------- text-set pages ---
   TEMPORARY, paired with js/books-text.js. Type is sized from --ph, the page
   height the book was laid out at, so a verse keeps the same proportions on a
   phone as on a desktop spread instead of being scaled down like an image. */
/* 0.0205 is the largest scale at which the densest page in the set — three
   titled poems plus running head and ornaments, page 1 — still fits. */
.br-textpage {
    align-items: stretch;
    font-size: calc(var(--ph) * 0.0205);
}

.br-textbody {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* Clears the printed frame on all four sides */
    padding: 9.5% 12% 11%;
    overflow-y: auto;
    color: #241a12;
}

/* Running head — the book's own title, as on a printed recto */
.bt-head {
    margin-bottom: 1.5em;
    padding-bottom: 0.6em;
    border-bottom: 1px solid rgba(139, 105, 58, 0.28);
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-align: center;
    color: #9a8564;
}

.bt-poem + .bt-poem { margin-top: 1.35em; }

.bt-poem h5 {
    font-family: 'Rozha One', serif;
    font-size: 1.7em;
    font-weight: 400;
    text-align: center;
    color: #24144a;
}

.bt-verse { display: flex; gap: 0.85em; }
.bt-verse p { line-height: 1.9; }
.bt-verse sup { font-size: 0.62em; color: #c0356b; }

/* Verse number set as a display numeral rather than the PDF's "1)" */
.bt-vnum {
    flex: 0 0 auto;
    font-family: 'Rozha One', serif;
    font-size: 1.05em;
    line-height: 1.75;
    color: #c0356b;
    opacity: 0.75;
}

/* Glossary, pushed to the foot of the page under its own ornament */
.bt-foot { margin-top: auto; padding-top: 1.4em; }
.bt-foot .bt-orn { width: 30%; margin-bottom: 0.9em; }

.bt-notes { font-size: 0.85em; line-height: 1.95; }
.bt-notes dt { display: inline; font-weight: 600; color: #3b2a17; }
.bt-notes dd { display: inline; color: #5f5346; }
/* The nbsp survives collapsing, so the gloss does not butt against the dash */
.bt-notes dt::after { content: ' —\00a0'; }
.bt-notes dd::after { content: ''; display: block; }

.bt-missing { margin: auto; color: #b0a08a; }

/* ---------------------------------------------------------- cover & end */
.br-cover,
.br-end {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 8% 10%;
    text-align: center;
}

.brc-kicker {
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
.brc-title {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.4rem, 3.2vw, 2.5rem);
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}
.brc-rule { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.brc-author {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    color: #fff;
}
.brc-foot {
    margin-top: 8px;
    font-size: 0.66rem;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.7);
}

/* Light covers need dark type, as on the cards */
.br-cover.cover-parchment span,
.br-cover.cover-blossom span { color: #4a2b2b; text-shadow: none; }

/* The cover's border is struck in the foil the type is set in */
.br-cover .bt-frame { border-color: rgba(255, 255, 255, 0.5); }
.br-cover .bt-frame::before { border-color: rgba(255, 255, 255, 0.28); }
.br-cover.cover-parchment .bt-frame,
.br-cover.cover-blossom .bt-frame { border-color: rgba(74, 43, 43, 0.4); }
.br-cover.cover-parchment .bt-frame::before,
.br-cover.cover-blossom .bt-frame::before { border-color: rgba(74, 43, 43, 0.2); }

.br-end i { font-size: 1.7rem; color: #b98fe0; }
.br-end .bt-orn { width: 34%; margin: 0.2em auto 0.1em; font-size: 1rem; }
.br-end h4 {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    font-weight: 400;
    color: #2b0c51;
}
.br-end p {
    max-width: 32ch;
    font-size: 0.82rem;
    line-height: 1.95;
    color: #6b5f52;
}
.br-end .btn { margin-top: 6px; text-decoration: none; }

/* ----------------------------------------------------------------- chrome */
.br-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    z-index: 6;
    transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.br-prev { left: 2px; }
.br-next { right: 2px; }
.br-nav:hover:not(:disabled) { background: #7d2ae8; border-color: #7d2ae8; }
.br-nav:disabled { opacity: 0.22; cursor: default; }

.br-foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
}
.br-count { font-size: 0.74rem; letter-spacing: 1.5px; color: #d6c6f2; }

.br-progress {
    width: min(320px, 70%);
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
.br-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #7d2ae8, #d82a62);
    transition: width 0.4s ease;
}

/* ==========================================================================
   VIDEO GALLERY
   ========================================================================== */
.video-page-main {
    max-width: var(--container);
    margin: 40px auto;
    padding: 0 20px;
}

/* ---------------------------------------------------- featured video */
.video-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(43, 12, 81, 0.08);
    margin-bottom: 45px;
    cursor: pointer;
}

.vf-media { position: relative; height: 380px; overflow: hidden; }

.vf-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transition: transform 0.6s ease;
}
.video-featured:hover .vf-media img { transform: scale(1.06); }

/* Dark scrim so the play button and badges stay legible on any still */
.vf-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31, 8, 54, 0.55) 0%, rgba(31, 8, 54, 0.05) 55%, rgba(31, 8, 54, 0.2) 100%);
}

.vf-play, .vc-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #6a1fb8 0%, #d81b60 100%);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vf-play { width: 76px; height: 76px; font-size: 1.6rem; padding-left: 5px; }
.vc-play { width: 56px; height: 56px; font-size: 1.05rem; padding-left: 4px; }

.video-featured:hover .vf-play,
.video-card:hover .vc-play { transform: translate(-50%, -50%) scale(1.12); }

/* Soft pulse ring on the featured play button */
.vf-play::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    animation: vpulse 2.4s ease-out infinite;
}

@keyframes vpulse {
    0%   { transform: scale(0.9); opacity: 0.9; }
    70%  { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}

.vf-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: linear-gradient(90deg, #d82a62, #ef6125);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
}

.vc-duration {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    background: rgba(20, 4, 36, 0.82);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}
.vc-duration i { margin-right: 5px; }

.vf-body {
    padding: 30px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

.vf-body h2 {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.3rem, 1.9vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
    color: #2b0c51;
}

.vf-body > p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vf-btn { margin-top: 4px; }

/* ------------------------------------------------------------ grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.video-card {
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(43, 12, 81, 0.06);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover,
.video-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(43, 12, 81, 0.15);
    outline: none;
}

.video-card.is-hidden { display: none; }

.vc-media { position: relative; height: 200px; overflow: hidden; background: #f3eef8; }

.vc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transition: transform 0.55s ease;
}
.video-card:hover .vc-media img { transform: scale(1.08); }

.vc-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31, 8, 54, 0.6) 0%, rgba(31, 8, 54, 0.05) 55%, rgba(31, 8, 54, 0.25) 100%);
}

.vc-tag { position: absolute; left: 12px; top: 12px; z-index: 2; }

.vc-soon {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    color: #7d2ae8;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 12px;
}

.vc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

.vc-body h3 {
    font-family: 'Rozha One', serif;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.4;
    color: #2b0c51;
}
.video-card:hover .vc-body h3 { color: #7d2ae8; }

.vc-body > p {
    font-size: 0.79rem;
    color: #666;
    line-height: 1.7;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vc-date { font-size: 0.72rem; color: #999; }
.vc-date i { margin-right: 5px; color: #b08fd0; }

/* ----------------------------------------------------------- player */
.video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(16, 3, 30, 0.94);
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}
.video-modal.open { display: flex; }

.vm-panel { position: relative; width: min(1000px, 100%); }

.vm-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.vm-stage iframe { width: 100%; height: 100%; border: 0; display: block; }

.vm-caption { text-align: center; color: #fff; margin-top: 16px; }
.vm-caption h3 { font-family: 'Rozha One', serif; font-size: 1.3rem; font-weight: 400; }
.vm-caption p { font-size: 0.76rem; color: #b9a3cf; margin-top: 5px; }

.vm-close {
    position: absolute;
    top: -52px;
    right: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}
.vm-close:hover { background: rgba(255, 255, 255, 0.3); }

/* Shown when a video has no YouTube id yet */
.video-pending {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    color: #d9c9ea;
    background: linear-gradient(135deg, #1d0731 0%, #3a0d5c 100%);
}
.video-pending i { font-size: 2.4rem; color: #7d2ae8; }
.video-pending h4 { font-family: 'Rozha One', serif; font-size: 1.25rem; font-weight: 400; color: #fff; }
.video-pending p { font-size: 0.82rem; }
.video-pending code {
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.78rem;
}

/* ==========================================================================
   BLOG LISTING + ARTICLE PAGES
   ========================================================================== */

/* Category chips — one colour per category, reused everywhere a post appears */
.blog-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
}

.cat-purple { background: linear-gradient(90deg, #6a1fb8, #9b3fd4); }
.cat-pink   { background: linear-gradient(90deg, #c2185b, #e5127d); }
.cat-teal   { background: linear-gradient(90deg, #0f8a9c, #17a2b8); }
.cat-orange { background: linear-gradient(90deg, #e07b0a, #f5920b); }
.cat-olive  { background: linear-gradient(90deg, #7f8f18, #9aab1e); }

.cat-purple-ic { color: #7d2ae8; }
.cat-pink-ic   { color: #e5127d; }
.cat-teal-ic   { color: #17a2b8; }
.cat-orange-ic { color: #f5920b; }
.cat-olive-ic  { color: #9aab1e; }

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.74rem;
    color: #888;
}
.blog-meta i { margin-right: 5px; color: #b08fd0; }

/* ---------------------------------------------------------- listing hero */
.blogs-hero-card {
    flex: 0 0 40%;
    background: rgba(255, 252, 244, 0.85);
    border: 1px solid rgba(216, 35, 97, 0.14);
    border-radius: 12px;
    padding: 30px 34px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(90, 40, 20, 0.12);
}

.bh-icon { font-size: 2rem; color: #c98a3f; margin-bottom: 12px; }

.bh-quote {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.9;
}

.blogs-page-main {
    max-width: var(--container);
    margin: 40px auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------- featured */
.blog-featured {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(43, 12, 81, 0.08);
    margin-bottom: 45px;
}

/* Fixed height so the cover can't stretch with the copy beside it */
.bf-media {
    position: relative;
    display: block;
    overflow: hidden;
    height: 370px;
}

.bf-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}
.blog-featured:hover .bf-media img { transform: scale(1.05); }

.bf-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: linear-gradient(90deg, #d82a62, #ef6125);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
}

.bf-body {
    padding: 30px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
    align-items: flex-start;
}

.bf-body h2 {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.3rem, 1.8vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
    color: #2b0c51;
}
.bf-body h2 a:hover { color: #7d2ae8; }

.bf-sub { font-family: 'Caveat', cursive; font-size: 1.15rem; color: #7d2ae8; line-height: 1.4; }

/* Clamped so a long excerpt can't drive the card taller than the cover */
.bf-excerpt {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bf-body h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bf-body .btn { margin-top: 6px; }

/* ------------------------------------------------------- filters + grid */
.blog-filter-section { margin-bottom: 30px; }

.blog-search {
    position: relative;
    width: 300px;
    margin: 22px auto 0;
}

.blog-search input {
    width: 100%;
    padding: 11px 40px 11px 18px;
    border-radius: 24px;
    border: 1px solid #e6dced;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    outline: none;
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.blog-search input:focus {
    border-color: #b06de0;
    box-shadow: 0 0 0 3px rgba(125, 42, 232, 0.1);
}

.blog-search i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9a90a4;
    font-size: 0.85rem;
}

/* Explicit sidebar width — a flex ratio here collapses the column, because
   `flex: 1` / `flex: 3` both resolve to a zero basis. */
.blog-layout { display: flex; gap: 30px; align-items: flex-start; }
.blog-main { flex: 1 1 auto; min-width: 0; }

.blog-sidebar {
    flex: 0 0 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.blog-card {
    background: #fff;
    border: 1px solid #f2ecf7;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(43, 12, 81, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(43, 12, 81, 0.13); }
.blog-card.is-hidden { display: none; }

.bc-media { position: relative; display: block; height: 190px; overflow: hidden; }

.bc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .bc-media img { transform: scale(1.07); }

.bc-media .blog-tag { position: absolute; left: 14px; bottom: 14px; }

.bc-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.bc-body h3 {
    font-family: 'Rozha One', serif;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.4;
    color: #2b0c51;
}
.bc-body h3 a:hover { color: #7d2ae8; }

.bc-body > p { font-size: 0.8rem; color: #666; line-height: 1.75; flex: 1; }

.bc-more {
    font-size: 0.78rem;
    font-weight: 600;
    color: #d82361;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.bc-more:hover { color: #7d2ae8; gap: 11px; }
.bc-more i { transition: transform 0.25s ease; }

.blog-empty {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    padding: 50px 0;
}
.blog-empty.show { display: block; }

/* ------------------------------------------------------------- sidebar */
.recent-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

.recent-item { display: flex; gap: 12px; align-items: flex-start; }

.recent-item img {
    width: 62px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.recent-item h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2b0c51;
    line-height: 1.45;
    margin-bottom: 3px;
}
.recent-item:hover h4 { color: #7d2ae8; }
.recent-item span { font-size: 0.7rem; color: #999; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.tag-chip {
    display: inline-block;
    background: #f5effa;
    color: #6c22bd;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 14px;
}
a.tag-chip:hover { background: #6c22bd; color: #fff; }

/* ==========================================================================
   ARTICLE (blog-details.html)
   ========================================================================== */
.article-main {
    max-width: min(840px, 100%);
    margin: 35px auto 50px;
    padding: 0 20px;
}

/* Two-column article: body beside the blog sidebar */
.article-layout {
    max-width: var(--container-narrow);
    margin: 35px auto 50px;
    padding: 0 20px;
}

.article-layout .article-main {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* The sidebar is shorter than most articles, so let it ride along */
.article-layout .blog-sidebar {
    position: sticky;
    top: 100px;
}

.breadcrumb {
    font-size: 0.76rem;
    color: #888;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.breadcrumb a { color: #7d2ae8; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb i { font-size: 0.6rem; color: #c4b5d4; }

.article-head { text-align: center; margin-bottom: 26px; }

.article-title {
    font-family: 'Rozha One', serif;
    font-size: clamp(1.7rem, 2.9vw, 2.9rem);
    font-weight: 400;
    line-height: 1.3;
    color: #2b0c51;
    margin: 14px 0 10px;
}

.article-sub {
    font-family: 'Caveat', cursive;
    font-size: 1.35rem;
    color: #7d2ae8;
    line-height: 1.45;
    margin-bottom: 18px;
}

.article-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.76rem;
    color: #777;
    padding-top: 16px;
    border-top: 1px solid #f0e6f5;
}
.article-meta i { margin-right: 6px; color: #b08fd0; }
.am-author { font-weight: 600; color: #d82361; }
.am-author i { color: #f5a623; }

/* Locked to a landscape ratio — several covers are portrait photos, and at
   `height: auto` those rendered several screens tall. */
.article-cover {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: 0 10px 30px rgba(43, 12, 81, 0.12);
    aspect-ratio: 16 / 9;
    max-height: 420px;
    background: #f3eef8;
}

.article-cover img {
    display: block;
    width: 100%;
    height: 100%;
    /* biased upward so faces survive the crop on portrait sources */
    object-fit: cover;
    object-position: center 28%;
}

/* Body copy — generous leading, since much of it is Devanagari */
.article-body { font-size: 0.95rem; color: #333; line-height: 2.05; }
.article-body p { margin-bottom: 20px; }

.article-body h3 {
    font-family: 'Rozha One', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #2b0c51;
    margin: 34px 0 14px;
    padding-left: 14px;
    border-left: 3px solid #d82361;
    line-height: 1.4;
}

.article-body blockquote {
    margin: 28px 0;
    padding: 24px 28px;
    background: linear-gradient(135deg, #faf4fd 0%, #fdf1f6 100%);
    border-left: 4px solid #d82361;
    border-radius: 0 12px 12px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #2b0c51;
    line-height: 1.9;
}

.article-body ul { margin: 0 0 20px 20px; list-style: disc; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: #7d2ae8; text-decoration: underline; }

.article-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 34px 0 26px;
    padding-top: 22px;
    border-top: 1px solid #f0e6f5;
}
.at-label { font-size: 0.8rem; font-weight: 600; color: #2b0c51; margin-right: 4px; }

.article-share { text-align: center; margin-bottom: 34px; }

.as-label {
    display: block;
    font-size: 0.78rem;
    color: #777;
    margin-bottom: 12px;
}

.share-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

.share-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    padding: 9px 18px;
    border: none;
    border-radius: 22px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.share-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }

.sh-copy { background: linear-gradient(90deg, #6c22bd, #9b3fd4); }
.sh-wa   { background: #25d366; }
.sh-fb   { background: #3b5998; }
.sh-mail { background: linear-gradient(90deg, #d82a62, #ef6125); }

/* Author card */
.author-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: linear-gradient(135deg, #faf6fd 0%, #f7f2fb 100%);
    border: 1px solid #f0e6f5;
    border-radius: 14px;
    padding: 26px 28px;
}

.ac-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7d2ae8, #d82361);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ac-body h3 { font-family: 'Rozha One', serif; font-size: 1.3rem; font-weight: 400; color: #2b0c51; }
.ac-role { font-size: 0.74rem; color: #d82361; font-weight: 600; margin-bottom: 8px; }
.ac-body p { font-size: 0.82rem; color: #555; line-height: 1.75; }

.ac-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #7d2ae8;
    margin-top: 10px;
}
.ac-link:hover { gap: 11px; }

/* Prev / next */
.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 30px;
}

.an-item {
    background: #fff;
    border: 1px solid #f0e6f5;
    border-radius: 12px;
    padding: 18px 20px;
    transition: all 0.3s ease;
}

a.an-item:hover { border-color: #d5b8ea; box-shadow: 0 8px 20px rgba(43, 12, 81, 0.1); transform: translateY(-3px); }

.an-item span {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #d82361;
    margin-bottom: 6px;
}

.an-item h4 {
    font-family: 'Rozha One', serif;
    font-size: 1rem;
    font-weight: 400;
    color: #2b0c51;
    line-height: 1.45;
}

.an-next { text-align: right; }
.an-empty { background: none; border: none; }

/* Related */
.related-wrap { background: #faf7fd; border-top: 1px solid #f0e6f5; }

.related-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 45px 20px 50px;
    text-align: center;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    text-align: left;
}

/* Missing / unknown slug */
.blog-notfound { text-align: center; padding: 70px 20px; }
.blog-notfound i { font-size: 3rem; color: #d5b8ea; margin-bottom: 18px; }
.blog-notfound h1 { font-family: 'Rozha One', serif; font-size: 2rem; font-weight: 400; color: #2b0c51; margin-bottom: 10px; }
.blog-notfound p { font-size: 0.88rem; color: #666; margin-bottom: 24px; }

/* ==========================================================================
   CONTACT PAGE SPECIFIC STYLES
   ========================================================================== */
.contact-hero {
    position: relative;
    background-image: url('../images/banner/b1.jpg');
    background-size: cover;
    background-position: 62% center;
    background-repeat: no-repeat;
    min-height: clamp(400px, 36vw, 620px);
    display: flex;
    align-items: center;
    padding: var(--section-y) var(--page-x);
}

.contact-hero-container {
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.contact-hero-text { flex: 0 0 42%; max-width: 480px; }

.contact-title {
    font-family: 'Rozha One', serif;
    font-size: clamp(2.6rem, 4.6vw, 5rem);
    line-height: 1.05;
    font-weight: 400;
}

.title-pink { color: #e5127d; }
.title-purple { color: #5b1a9e; }

.contact-script {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.6rem, 2.4vw, 2.4rem);
    color: #6a1b9a;
    margin-bottom: 10px;
}

.contact-intro {
    font-size: 0.88rem;
    color: #333;
    line-height: 1.9;
    margin-bottom: 22px;
}

.contact-pullquote {
    font-family: 'Caveat', cursive;
    font-size: 1.25rem;
    color: #6a1b9a;
    line-height: 1.5;
    border-left: 3px solid #d82361;
    padding-left: 14px;
}

/* Floating quote over the right of the banner artwork */
.contact-hero-quote {
    flex: 0 0 250px;
    position: relative;
    text-align: right;
}

.contact-hero-quote .quote-mark-large {
    position: static;
    display: block;
    font-family: Georgia, serif;
    font-size: 2.6rem;
    line-height: 0.6;
    color: #5b1a9e;
    text-align: left;
    margin-bottom: 10px;
}

.contact-hero-quote .hindi-text { font-size: 0.92rem; line-height: 1.9; }
.contact-hero-quote .quote-author-script { text-align: right; }

/* ------------------------------------------------------------------
   Get In Touch strip
   ------------------------------------------------------------------ */
.get-in-touch {
    position: relative;
    background: #fdfbff;
    padding: clamp(30px, 3.4vw, 55px) var(--page-x);
    text-align: center;
    border-bottom: 1px solid #f2ecf7;
    overflow: hidden;
}

/* Faint feather watermarks left and right, as in the design */
.get-in-touch::before,
.get-in-touch::after {
    content: '\f56b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 5rem;
    color: rgba(180, 140, 90, 0.12);
    pointer-events: none;
}
.get-in-touch::before { left: 2%; transform: translateY(-50%) rotate(-20deg); }
.get-in-touch::after { right: 2%; transform: translateY(-50%) rotate(20deg) scaleX(-1); }

.touch-grid {
    max-width: var(--container);
    margin: 18px auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.touch-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.touch-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.icon-blue { background: #1565d8; }
.icon-magenta { background: #e5127d; }
.icon-orange { background: #f57c00; }
.icon-green { background: #2e9e4f; }

.touch-value {
    font-size: 0.8rem;
    color: #333;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
}

a.touch-value:hover { color: #7d2ae8; }

.touch-label { font-size: 0.78rem; color: #666; }

.touch-divider { width: 1px; align-self: stretch; background: #eee; }

/* ------------------------------------------------------------------
   Form + sidebar
   ------------------------------------------------------------------ */
.contact-main {
    max-width: var(--container);
    margin: 35px auto 50px;
    padding: 0 20px;
}

.contact-columns {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 25px;
    align-items: start;
}

.panel-card {
    background: #ffffff;
    border: 1px solid #f2ecf7;
    border-radius: 14px;
    padding: 28px 30px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}

.panel-title {
    font-family: 'Rozha One', serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    background: linear-gradient(90deg, #6a1b9a, #d82361);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.panel-title .feather-icon { -webkit-text-fill-color: initial; }

.panel-text {
    font-size: 0.82rem;
    color: #555;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 15px;
}

/* Form fields */
.contact-form { margin-top: 8px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-field { margin-bottom: 14px; }

.contact-form input,
.contact-form textarea {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    color: #333;
    padding: 13px 16px;
    border: 1px solid #e6dced;
    border-radius: 8px;
    outline: none;
    background: #fff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form textarea { resize: vertical; min-height: 170px; }

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #9a90a4; }

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #b06de0;
    box-shadow: 0 0 0 3px rgba(125, 42, 232, 0.1);
}

.contact-form input.invalid,
.contact-form textarea.invalid { border-color: #e5127d; }

.btn-send {
    background: linear-gradient(90deg, #6c22bd 0%, #a239ea 45%, #ef6125 100%);
    color: #fff;
    padding: 14px 30px;
    border-radius: 8px;
    letter-spacing: 0.8px;
    font-size: 0.82rem;
}

.form-status {
    font-size: 0.78rem;
    margin-bottom: 12px;
    min-height: 1em;
}
.form-status.error { color: #e5127d; }
.form-status.success { color: #2e9e4f; }

/* Envelope illustration */
.envelope-art {
    position: relative;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: radial-gradient(ellipse at center, rgba(216, 35, 97, 0.14) 0%, rgba(125, 42, 232, 0.1) 45%, rgba(255, 255, 255, 0) 72%);
}

.art-envelope { font-size: 4.6rem; color: #f5a623; }

.art-feather {
    position: absolute;
    top: 8px;
    right: 33%;
    font-size: 2.2rem;
    color: #7d2ae8;
    transform: rotate(20deg);
}

.contact-sidebar { display: flex; flex-direction: column; gap: 25px; }

.social-links-lg { justify-content: center; gap: 14px; margin-top: 6px; }
.social-links-lg a { width: 44px; height: 44px; font-size: 1.05rem; }
.web { background: linear-gradient(135deg, #6c22bd, #a239ea); }

/* Map */
.map-card { margin-top: 25px; }

.map-embed {
    border-radius: 10px;
    overflow: hidden;
    margin-top: 6px;
    background: #eee;
}

.map-embed iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
}

.map-caption {
    text-align: center;
    font-size: 0.82rem;
    color: #444;
    margin-top: 14px;
}
.map-caption i { color: #e5127d; margin-right: 5px; }

/* Watercolour quote banner */
.contact-quote-banner {
    position: relative;
    margin-top: 25px;
    border-radius: 14px;
    overflow: hidden;
    background-image: url('../images/banner/b3.jpg');
    background-size: cover;
    background-position: center;
    padding: 45px 40px 40px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-quote-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.7) 35%, rgba(255, 255, 255, 0.72) 65%, rgba(255, 255, 255, 0.25) 100%);
}

.cqb-body { position: relative; text-align: center; max-width: 640px; }

.cqb-body .hindi-text { font-size: 1.15rem; line-height: 1.95; color: #1a1a1a; }
.cqb-body .quote-author-script { font-size: 1.5rem; }

.cqb-mark {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 3.2rem;
    color: #6a1b9a;
    line-height: 0.5;
}
.cqb-mark-open { top: -6px; left: -34px; }
.cqb-mark-close { bottom: 34px; right: -34px; }

/* ------------------------------------------------------------------
   Expanded 5-column footer (contact page)
   ------------------------------------------------------------------ */
.footer-expanded .footer-top { grid-template-columns: 1.7fr 1fr 1fr 1fr 1.5fr; gap: 22px; }

.footer-expanded .footer-logo-text { line-height: 1.1; }
.footer-expanded .divider-ornament { color: #f5a623; margin: 6px 0 12px; }

.footer-list li a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

.footer-list li a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #f5a623;
    font-size: 0.7rem;
}

.footer-expanded .contact-info li { align-items: flex-start; line-height: 1.6; }
.footer-expanded .contact-info i { margin-top: 4px; }

/* ------------------------------------------------------------------
   Deep indigo footer variant (quotes page design)
   ------------------------------------------------------------------ */
.footer-deep {
    background: linear-gradient(120deg, #150b2e 0%, #241243 55%, #2f1a55 100%);
}

.footer-deep::before,
.footer-deep::after { display: none; }

/* Quill + ink pot in the bottom-right corner */
.footer-deep .footer-top::after {
    content: '\f56b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -40px;
    bottom: -10px;
    font-size: 7rem;
    color: #f5a623;
    opacity: 0.55;
    transform: rotate(18deg);
    pointer-events: none;
}

.footer-deep .footer-top { position: relative; }
.footer-deep .divider-ornament { color: #f5a623; margin: 6px 0 12px; }
.footer-deep .footer-logo-text { line-height: 1.15; }

.footer-bottom-3 { gap: 20px; flex-wrap: wrap; }
.footer-bottom-3 p { flex: 1; }
.footer-bottom-3 p:nth-child(2) { text-align: center; }
.footer-bottom-3 p:last-child { text-align: right; }

/* ==========================================================================
   NEWSLETTER SECTION
   ========================================================================== */
.newsletter-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 20%, rgba(240,190,210,0.5) 0%, rgba(255,255,255,1) 80%);
    padding: clamp(30px, 3.4vw, 55px) var(--page-x);
    border-top: 1px solid #f0e6f5;
}

/* Feather watermarks either side, matching the Get In Touch strip */
.newsletter-section::before,
.newsletter-section::after {
    content: '\f56b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    font-size: 4.5rem;
    color: rgba(216, 35, 97, 0.1);
    pointer-events: none;
}
.newsletter-section::before { left: 1.5%; transform: translateY(-50%) rotate(-20deg); }
.newsletter-section::after { right: 1.5%; transform: translateY(-50%) rotate(20deg) scaleX(-1); }

.newsletter-container { position: relative; z-index: 1; }

.newsletter-container {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.newsletter-text h3 {
    font-family: 'Rozha One', serif;
    font-size: 1.5rem;
    color: #3f1e6b;
}

.newsletter-text p {
    font-size: 0.8rem;
    color: #555;
}

.newsletter-form {
    display: flex;
    background: #fff;
    padding: 4px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
    width: 450px;
}

.newsletter-form input {
    border: none;
    outline: none;
    padding: 8px 18px;
    font-size: 0.8rem;
    flex: 1;
    border-radius: 30px;
}

.btn-newsletter {
    background: linear-gradient(90deg, #d82a62, #ef5b25);
    color: #fff;
    border-radius: 25px;
    padding: 8px 20px;
}

/* ------------------------------------------------------------------
   Lavender newsletter band with book + quill artwork (quotes page)
   ------------------------------------------------------------------ */
.newsletter-lavender {
    background: linear-gradient(90deg, #f0dcf7 0%, #e8d6f8 45%, #f6e2f2 100%);
    border-top: none;
    padding: clamp(26px, 3vw, 48px) var(--page-x);
}

.newsletter-lavender::before,
.newsletter-lavender::after { display: none; }

.newsletter-lavender .newsletter-container { gap: 28px; }

.newsletter-art {
    position: relative;
    flex: 0 0 130px;
    height: 100px;
}

.newsletter-art .art-book {
    position: absolute;
    left: 6px;
    bottom: 4px;
    font-size: 3.4rem;
    color: #c98a3f;
}

.newsletter-art .art-feather {
    position: absolute;
    left: 46px;
    top: 0;
    font-size: 3rem;
    color: #f5a623;
    transform: rotate(18deg);
}

.newsletter-lavender .newsletter-text { flex: 1; }

.newsletter-lavender .newsletter-text h3 {
    font-family: 'Rozha One', serif;
    font-size: 1.7rem;
    color: #c2185b;
    font-weight: 400;
}

.newsletter-lavender .newsletter-text p { color: #4a3a55; }

.newsletter-lavender .newsletter-form {
    width: 420px;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(90, 40, 120, 0.12);
}

.newsletter-lavender .btn-newsletter {
    background: linear-gradient(90deg, #c2185b, #e5127d);
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, #3d0a63 0%, #5c1391 45%, #7d2ae8 78%, #9b3fd4 100%);
    color: #fff;
    padding: clamp(40px, 4vw, 70px) var(--page-x) 20px;
}

/* Soft watercolour glows echoing the banner artwork */
.site-footer::before,
.site-footer::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.site-footer::before {
    width: 380px; height: 380px; right: -80px; top: -120px;
    background: radial-gradient(circle, rgba(255, 170, 90, 0.28) 0%, rgba(255, 170, 90, 0) 65%);
}
.site-footer::after {
    width: 320px; height: 320px; left: -100px; bottom: -140px;
    background: radial-gradient(circle, rgba(216, 35, 97, 0.3) 0%, rgba(216, 35, 97, 0) 65%);
}

.footer-top {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 40px;
}

.footer-brand h3 {
    font-family: 'Great Vibes', cursive;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 8px;
}

/* Scoped to the description only — a bare `.footer-brand > p` would outrank
   .footer-logo-text / .footer-tagline / .footer-sign and flatten them all. */
.footer-brand > p.footer-desc {
    font-size: 0.8rem;
    color: #e6d8f5;
    line-height: 1.7;
    margin-bottom: 12px;
    max-width: 260px;
}

.footer-brand .social-links { margin-top: 16px; }

.footer-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

/* Reserves the navbar's height until js/layout.js swaps the placeholder in,
   so the page below it does not jump on load. */
#site-header { min-height: 86px; }

.footer-logo-text {
    font-family: 'Great Vibes', cursive;
    font-size: 2.2rem;
    color: #fff;
}

.footer-tagline {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: #aaa;
    margin-bottom: 15px;
}

.footer-desc {
    font-size: 0.8rem;
    color: #bbb;
    line-height: 1.6;
    margin-bottom: 10px;
}

.footer-sign {
    font-family: 'Great Vibes', cursive;
    font-size: 1.4rem;
    color: #fca311;
}

.footer-col h4 {
    font-size: 0.95rem;
    margin-bottom: 18px;
    color: #fff;
    font-weight: 600;
}

.footer-col ul li {
    font-size: 0.8rem;
    margin-bottom: 10px;
    color: #e0d0f2;
}

.footer-col ul li a:hover {
    color: #fca311;
}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-info i {
    color: #fca311;
    font-size: 0.8rem;
}

.follow-label {
    font-size: 0.8rem;
    margin-top: 15px;
    margin-bottom: 8px;
    color: #aaa;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #fff;
    transition: transform 0.25s ease;
}

.social-links a:hover { transform: translateY(-3px); }

.fb { background-color: #3b5998; }
.insta { background-color: #e1306c; }
.wa { background-color: #25d366; }
.yt { background-color: #ff0000; }

.footer-bottom {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #cbb6e0;
}

.heart { color: #e74c3c; }

/* Agency credit — needs to read against the dark footer */
.credit-link {
    color: #fca311;
    font-weight: 600;
    transition: color 0.25s ease;
}
.credit-link:hover { color: #ffd479; text-decoration: underline; }

/* ==========================================================================
   FLOATING QUICK CONTACT (WhatsApp + Call)
   ========================================================================== */
.float-actions {
    position: fixed;
    right: 20px;
    bottom: 22px;
    /* Below the modal layer (2000) so overlays are never covered */
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.float-btn {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.float-btn:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.float-wa   { background: linear-gradient(135deg, #2ee06f 0%, #12a850 100%); }
.float-call { background: linear-gradient(135deg, #7d2ae8 0%, #d81b60 100%); }

/* Attention ring on the WhatsApp button */
.float-wa::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.65);
    animation: floatPulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes floatPulse {
    0%   { transform: scale(1);    opacity: 0.85; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

.float-label {
    position: absolute;
    right: 64px;
    white-space: nowrap;
    background: #2b0c51;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Little arrow pointing back at the button */
.float-label::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #2b0c51;
}

.float-btn:hover .float-label,
.float-btn:focus-visible .float-label { opacity: 1; transform: translateX(0); }

/* Get out of the way while a lightbox / player / reader is open */
body.lightbox-open .float-actions { opacity: 0; visibility: hidden; }

@media (max-width: 768px) {
    .float-actions { right: 14px; bottom: 16px; gap: 10px; }
    .float-btn { width: 48px; height: 48px; font-size: 1.2rem; }
    /* No hover on touch, so the tooltips would never show */
    .float-label { display: none; }
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLETS & MOBILE)
   ========================================================================== */
/* ==========================================================================
   WIDE SCREENS — use the extra room for more columns, not longer lines
   ========================================================================== */
@media (min-width: 1200px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1500px) {
    .poems-sidebar { flex: 0 0 320px; width: 320px; }
    .events-grid { grid-template-columns: repeat(4, 1fr); }
    .ef-media { height: 390px; }
    .books-sidebar { flex: 0 0 330px; width: 330px; }
    .video-grid { grid-template-columns: repeat(4, 1fr); }
    .vf-media { height: 430px; }
    .gallery-grid { column-count: 4; }
    .quotes-grid { grid-template-columns: repeat(4, 1fr); }
    .related-grid { grid-template-columns: repeat(3, 1fr); }
    .blog-sidebar { flex: 0 0 330px; width: 330px; }
    .book-cover { height: 240px; }
    .bf-media { height: 420px; }
}

@media (max-width: 1100px) {
    .books-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Laptops — step the Books and Poems grids down before the sidebar squeezes
   them. Four columns beside a 300-330px sidebar left cards only 121px wide at
   1000px and 167px at 1200px, narrower than the same cards on a phone.
   These sit above the 992px block on purpose: below that the sidebar stacks
   and the later rules take the grid back to 3, 2 then 1 column.
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
    .books-collection,
    .poems-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1199px) {
    .books-collection,
    .poems-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    /* ---------------------------------------------------------------
       Mobile navigation — full-width slide-down panel
       --------------------------------------------------------------- */
    .navbar { flex-wrap: wrap; gap: 12px; padding: 12px var(--page-x); }
    .logo { order: 1; }

    /* The stacked mobile navbar is taller than the desktop one */
    #site-header { min-height: 94px; }

    .nav-toggle {
        display: flex;
        order: 2;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 13px;
        color: #fff;
        font-size: 1.05rem;
        background: linear-gradient(135deg, #7d2ae8 0%, #d81b60 100%);
        box-shadow: 0 5px 14px rgba(125, 42, 232, 0.32);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .nav-toggle:active { transform: scale(0.94); }

    /* max-height animates; display:none would not */
    .nav-links {
        order: 3;
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 0;
        border-top: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.38s ease, opacity 0.28s ease, padding 0.38s ease;
    }

    .nav-links.open {
        max-height: 720px;
        opacity: 1;
        padding: 12px 0 6px;
        margin-top: 4px;
        border-top: 1px solid #f2e9f7;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        border-radius: 11px;
        border-bottom: none;
        font-size: 0.92rem;
        font-weight: 500;
        color: #2b0c51;
        transition: background 0.22s ease, color 0.22s ease, padding-left 0.22s ease;
    }

    /* Chevron on every row, matching the desktop submenu */
    .nav-links > a::before,
    .nav-item > a::before {
        content: '\f105';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.72rem;
        color: #cbb2e0;
        transition: color 0.22s ease;
    }

    .nav-links a.active,
    .nav-links a:hover {
        background: linear-gradient(90deg, rgba(125, 42, 232, 0.11) 0%, rgba(216, 27, 96, 0.05) 60%, rgba(216, 27, 96, 0) 100%);
        color: #7d2ae8;
        border-bottom: none;
        padding-left: 20px;
    }

    .nav-links > a.active::before,
    .nav-item > a.active::before { color: #e5127d; }

    /* Submenus become a +/- accordion — there is no hover on touch. The label and
       the button share one row and the dropdown wraps onto the next line, so no
       extra wrapper element is needed around them. */
    .nav-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        gap: 6px;
    }
    .nav-item > a { flex: 1 1 auto; }
    .nav-caret { display: none; }

    .nav-sub-toggle {
        display: block;
        position: relative;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid #efe2f9;
        border-radius: 10px;
        background: #faf5fe;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    }
    .nav-sub-toggle:active { transform: scale(0.92); }

    /* Two bars: the upright one rotates flat, morphing + into - */
    .nav-sub-toggle::before,
    .nav-sub-toggle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 2px;
        margin: -1px 0 0 -6px;
        border-radius: 2px;
        background: #7d2ae8;
        transition: transform 0.3s ease, background 0.25s ease;
    }
    .nav-sub-toggle::after { transform: rotate(90deg); }

    .nav-item.is-open > .nav-sub-toggle {
        background: linear-gradient(135deg, #7d2ae8 0%, #d81b60 100%);
        border-color: transparent;
    }
    .nav-item.is-open > .nav-sub-toggle::before,
    .nav-item.is-open > .nav-sub-toggle::after { background: #fff; }
    .nav-item.is-open > .nav-sub-toggle::after { transform: rotate(0deg); }

    /* Collapsed by default; max-height animates where height:auto would not */
    .dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        flex: 0 0 100%;
        width: 100%;
        padding-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.32s ease, padding-top 0.32s ease;
    }

    .nav-item.is-open > .dropdown {
        max-height: 320px;
        padding-top: 2px;
    }

    .dropdown-inner {
        transform: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
        padding: 0;
        min-width: 0;
        margin: 2px 0 6px 22px;
        border-left: 2px solid #f0e2f8;
    }
    .dropdown-inner::before,
    .dropdown-inner::after { display: none; }

    .nav-links .dropdown a {
        padding: 10px 16px;
        font-size: 0.85rem;
        border-radius: 0 9px 9px 0;
    }
    .nav-links .dropdown a:hover,
    .nav-links .dropdown a.active { padding-left: 20px; }

    /* Download PDF becomes a full-width action at the foot of the menu */
    .nav-cta { display: none; }
    .nav-links.open ~ .nav-cta {
        display: inline-flex;
        order: 4;
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        border-radius: 12px;
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    /* Hero carousel: fade the artwork back so the copy stays readable */
    .hero-slider { min-height: auto; }
    .hero-slide { padding: 42px var(--page-x) 78px; }
    .hero-slide::after { background: rgba(255, 253, 250, 0.55); }
    /* Re-assert over the desktop .slide-author::after reset — the stacked mobile
       layout puts the copy on top of the artwork, so it still needs the wash. */
    .slide-author::after { background: rgba(255, 253, 250, 0.55); }
    .slide-author .hero-bg { background-position: 72% center; }

    .hero-container { flex-direction: column; }
    .hero-text {
        flex: 1 1 auto;
        max-width: 620px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 16px;
        padding: 28px 22px;
    }
    .hero-image-wrapper { display: none; }
    .hero-title { font-size: 3rem; }

    .hero-arrow { width: 38px; height: 38px; font-size: 0.8rem; }
    .hero-dots { bottom: 20px; }

    .quotes-content-wrapper { flex-direction: column; }
    .quotes-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }

    .gallery-hero-stats { justify-content: flex-start; flex-wrap: wrap; }
    .gallery-grid { column-count: 2; }

    /* Contact: drop the floating quote, put the copy on a readable panel */
    .contact-hero { min-height: auto; padding: 40px 5%; background-position: 72% center; }
    .contact-hero-container { flex-direction: column; }
    .contact-hero-text {
        flex: 1 1 auto;
        max-width: 620px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 16px;
        padding: 26px 22px;
    }
    .contact-hero-quote { display: none; }
    .contact-title { font-size: 3.2rem; }

    /* About: hide the watermark quote (it sits under the portrait), panel the copy */
    .about-hero { min-height: auto; padding: 40px 5%; background-position: 72% center; }
    .about-hero-text {
        max-width: 620px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 16px;
        padding: 26px 22px;
    }
    .about-script-small { margin-left: 0; }
    .hero-watermark-quote { display: none; }

    .who-panel { grid-template-columns: 1fr; gap: 32px; padding: 32px 26px; }
    .who-right { border-left: none; padding-left: 0; }
    .dot-grid { display: none; }

    /* Journey turns into a vertical timeline */
    .journey-track { flex-direction: column; gap: 28px; margin-top: 28px; }
    .journey-step { display: flex; align-items: flex-start; gap: 18px; text-align: left; padding: 0; }
    .journey-step .step-icon { margin: 0; flex-shrink: 0; }
    .journey-step p { max-width: none; margin: 0; }
    .journey-step:not(:last-child)::before {
        top: 74px; left: 33px; width: 2px; height: calc(100% - 46px);
    }
    .journey-step:not(:last-child)::after { top: auto; bottom: -19px; left: 34px; }

    .about-stats { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
    .as-divider { display: none; }
    .about-stat { flex: 0 0 45%; }

    /* Blog: sidebar drops below the grid and goes full width */
    .blog-layout { flex-direction: column; }
    .blog-main { width: 100%; }
    .quotes-sidebar { width: 100%; }
    .blog-sidebar { flex: 1 1 auto; width: 100%; }
    .article-layout .blog-sidebar { position: static; top: auto; }
    .blog-featured { grid-template-columns: 1fr; }
    .bf-media { height: 280px; }

    /* Poems */
    .poems-layout { flex-direction: column; }
    .poems-main { width: 100%; }
    .poems-sidebar { flex: 1 1 auto; width: 100%; }
    .poems-grid { grid-template-columns: repeat(3, 1fr); }
    .poems-hero { min-height: auto; }
    .poems-hero-bg { background-position: 74% center; }
    .poems-hero::after { background: rgba(255, 250, 252, 0.62); }
    .poems-hero-feather { display: none; }
    .poem-search { width: 100%; }

    /* Events */
    .events-grid { grid-template-columns: repeat(2, 1fr); }
    .event-featured { grid-template-columns: 1fr; }
    .ef-media { height: 290px; }

    /* Books */
    .books-layout { flex-direction: column; }
    .books-main { width: 100%; }
    .books-sidebar { flex: 1 1 auto; width: 100%; }
    .books-collection { grid-template-columns: repeat(3, 1fr); }
    .books-hero { min-height: auto; }
    .books-hero-bg { background-position: 74% center; }
    .books-hero::after { background: rgba(255, 252, 248, 0.62); }
    .books-hero-feather { display: none; }

    /* Video gallery */
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .video-featured { grid-template-columns: 1fr; }
    .vf-media { height: 300px; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .article-title { font-size: 2rem; }

    /* Quotes hero: stack, and lift the copy off the artwork */
    .quotes-hero { min-height: auto; padding: 35px 5%; }
    .quotes-hero::after { background: rgba(255, 253, 250, 0.72); }
    .quotes-hero-text,
    .quotes-hero-banner-card { flex: 1 1 auto; }
    .page-title { font-size: 3rem; }

    .contact-columns { grid-template-columns: 1fr; }
    .touch-grid { flex-wrap: wrap; row-gap: 25px; }
    .touch-item { flex: 0 0 45%; }
    .touch-divider { display: none; }
    .footer-expanded .footer-top { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 768px) {
    .hero-container,
    .about-container,
    .quotes-hero-container,
    .newsletter-container {
        flex-direction: column;
        text-align: center;
    }
    .hero-title { font-size: 2.4rem; }
    .script-subtitle { font-size: 1.9rem; }

    /* Arrows would sit on top of the copy at this width — dots are enough */
    .hero-arrow { display: none; }
    .hero-slide { padding: 36px var(--page-x) 66px; }
    .hero-dots { bottom: 16px; }

    .quotes-grid { grid-template-columns: 1fr; }
    .stats-container { flex-direction: column; gap: 20px; }
    .stat-divider { display: none; }

    .quote-banner { flex-direction: column; gap: 18px; padding: 25px 20px; }
    .quote-left { flex: 0 0 auto; text-align: center; padding-left: 0; }
    .quote-feather { position: static; transform: rotate(-15deg); display: block; margin-bottom: 6px; }
    .quote-card { margin: 0; }
    .left-arrow { order: 3; }
    .right-arrow { order: 4; }

    .section-header { text-align: center; }
    .section-header .btn-outline-purple { position: static; transform: none; margin-top: 15px; }
    .books-grid { grid-template-columns: repeat(2, 1fr); }

    .about-gallery { height: auto; flex-direction: column; }
    .gallery-large img { height: 260px; }
    .gallery-stacked img { height: 180px; }
    .about-content { text-align: center; }
    .divider-ornament.left-align { text-align: center; }

    .features-grid { flex-direction: column; align-items: center; }
    .feature-item p { max-width: 260px; }

    .newsletter-form { width: 100%; }
    .footer-top { grid-template-columns: 1fr; }
    .footer-brand > p.footer-desc { max-width: none; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }

    /* Gallery: single column, and always show captions since there is no hover */
    .gallery-grid { column-count: 1; }
    .gallery-overlay { opacity: 1; }
    .gallery-hero-stats { justify-content: center; }
    .hero-stat { flex: 1; min-width: 90px; padding: 16px 12px; }
    .hero-stat-num { font-size: 1.6rem; }
    .quotes-filter-bar { justify-content: center; }
    .gallery-result-count { width: 100%; text-align: center; }
    .gallery-heading { font-size: 2rem; }
    .gallery-filters { gap: 10px; }
    .filter-btn.gallery-pill { padding: 11px 16px; font-size: 0.82rem; gap: 8px; }

    .lightbox { padding: 60px 12px 20px; }
    .lightbox-content img { max-height: 62vh; }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
    .lightbox-close { top: 14px; right: 14px; }

    /* Contact page */
    .contact-title { font-size: 2.5rem; }
    .contact-script { font-size: 1.7rem; }
    .panel-card { padding: 22px 18px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .touch-item { flex: 0 0 100%; }
    .get-in-touch::before,
    .get-in-touch::after,
    .newsletter-section::before,
    .newsletter-section::after { display: none; }

    .contact-quote-banner { padding: 35px 22px; }
    .cqb-body .hindi-text { font-size: 1rem; }
    .cqb-mark-open { top: -20px; left: -6px; }
    .cqb-mark-close { bottom: 40px; right: -6px; }

    /* Poems */
    .poems-grid { grid-template-columns: repeat(2, 1fr); }
    .poems-filters { gap: 8px; }
    .filter-btn.poem-pill { padding: 8px 13px; font-size: 0.76rem; }
    .pc-body h3 { font-size: 0.92rem; }
    .pm-panel { padding: 28px 20px 24px; }
    .pv-line { font-size: 0.9rem; line-height: 2; }

    /* Events */
    .events-grid { grid-template-columns: 1fr; }
    .ef-media { height: 220px; }
    .ef-body { padding: 22px 18px; }
    .event-row { flex-wrap: wrap; gap: 14px; padding: 16px; }
    .ev-date { width: 64px; padding: 9px 0; }
    .ev-date strong { font-size: 1.5rem; }
    .er-cta { width: 100%; justify-content: center; }
    .invite-inner { flex-direction: column; text-align: center; gap: 16px; }
    .invite-btn { width: 100%; justify-content: center; }
    .er-body .ev-meta { flex-direction: column; gap: 6px; }

    /* Books */
    .books-collection { grid-template-columns: repeat(2, 1fr); }
    .books-filters { gap: 8px; }
    .filter-btn.book-pill { padding: 9px 14px; font-size: 0.78rem; }
    .bca-title { font-size: 0.95rem; }
    .bm-body { grid-template-columns: 1fr; gap: 18px; }
    .bm-cover { max-width: 170px; margin: 0 auto; }
    .bm-panel { padding: 24px 18px; }

    /* Video gallery */
    .video-grid { grid-template-columns: 1fr; }
    .vf-media { height: 230px; }
    .vf-play { width: 60px; height: 60px; font-size: 1.2rem; }
    .vf-body { padding: 22px 20px; }
    .vm-close { top: -46px; }
    .vm-caption h3 { font-size: 1.05rem; }

    /* Blog page */
    .blog-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .blog-search { width: 100%; }
    .bf-body { padding: 24px 20px; }
    .bf-body h2 { font-size: 1.35rem; }
    .article-title { font-size: 1.65rem; }
    .article-sub { font-size: 1.1rem; }
    .article-cover { aspect-ratio: 4 / 3; max-height: 260px; }
    .article-body { font-size: 0.9rem; line-height: 1.95; }
    .article-nav { grid-template-columns: 1fr; }
    .an-next { text-align: left; }
    .an-empty { display: none; }
    .author-card { flex-direction: column; gap: 14px; }

    /* About page */
    .about-script-name { font-size: 2.6rem; }
    .about-script-small { font-size: 2rem; }
    .about-kicker { font-size: 0.8rem; letter-spacing: 1.5px; }
    .journey-title { font-size: 1.7rem; }
    .jt-feather { display: none; }
    .about-stat { flex: 0 0 100%; justify-content: flex-start; }
    .about-quote-banner { padding: 45px 22px 40px; }
    .about-quote-banner .hindi-text { font-size: 1.05rem; }
    .aqb-art-left, .aqb-floral { display: none; }
    .aqb-mark-open { top: -26px; left: -6px; }
    .aqb-mark-close { bottom: 34px; right: -6px; }

    .page-title { font-size: 2.4rem; }
    .page-subtitle { font-size: 1.7rem; }
    .quotes-hero .divider-ornament.left-align { text-align: center; }
    .newsletter-art { display: none; }
    .newsletter-lavender .newsletter-form { width: 100%; }
    .featured-banner-text { max-width: none; }
    .featured-art { opacity: 0.5; }
    .footer-deep .footer-top::after { display: none; }

    .newsletter-text .divider-ornament { text-align: center; }
    .footer-expanded .footer-top { grid-template-columns: 1fr; }
    .footer-expanded .divider-ornament.left-align { text-align: center; }
    .footer-bottom-3 p,
    .footer-bottom-3 p:nth-child(2),
    .footer-bottom-3 p:last-child { text-align: center; }
}

/* ==========================================================================
   PHONES — Books and Poems
   --------------------------------------------------------------------------
   Above this width the two-column card grids still work; below it each column
   is only ~148px, which breaks titles onto three lines, wraps "View Details"
   inside its own button and — on Poems — re-wraps verse lines that are meant
   to break where the poet wrote them.
   ========================================================================== */
@media (max-width: 560px) {
    /* var(--container) is 92vw, so the page gave up 8% of an already narrow
       screen before its own 20px padding. Phones need that width back. */
    .books-page-main,
    .poems-page-main {
        max-width: none;
        padding: 0 16px;
    }

    /* Filters read as a tidy block rather than a ragged three rows */
    .books-filters,
    .poems-filters { gap: 7px; }
    .filter-btn.book-pill,
    .filter-btn.poem-pill { padding: 8px 12px; font-size: 0.74rem; gap: 6px; }

    /* ---- Books: cover beside the text -------------------------------------
       A full-width card would stand the 3:4 cover ~475px tall, making one book
       fill the screen. Turning the card on its side keeps the cover's shape and
       the whole card at a scannable height. */
    .books-collection { grid-template-columns: 1fr; gap: 14px; }

    .book-item { flex-direction: row; align-items: stretch; }
    .book-item .bi-cover { flex: 0 0 116px; width: 116px; }
    .book-item .book-cover-art { padding: 14px 10px; }
    .bca-title { font-size: 0.78rem; line-height: 1.35; }
    .bi-body { padding: 13px 14px 14px; gap: 5px; justify-content: center; }
    .bi-body h3 { font-size: 1rem; }
    .bi-body p {
        font-size: 0.78rem;
        line-height: 1.7;
        /* Two lines is all the excerpt needs next to the cover */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .bi-btn { align-self: flex-start; padding: 8px 12px; font-size: 0.72rem; }
    .bi-actions { gap: 6px; }

    /* ---- Poems: full width, shorter art ----------------------------------
       Verses stay one line each only if the card keeps the full column, so the
       art becomes a banner instead of a 4:3 block that would push the text
       down the page. */
    .poems-grid { grid-template-columns: 1fr; gap: 14px; }
    /* A slim colour band: at full width a 4:3 block was 268px of gradient per
       card, which pushed the poems themselves off the screen */
    .poem-art { aspect-ratio: 3 / 1; }
    .pc-body { padding: 15px 16px 16px; }
    .pc-body h3 { font-size: 1.05rem; }
    .pc-lines { font-size: 0.84rem; line-height: 1.95; }

    /* Modals: the panel is the whole screen at this width */
    .bm-panel,
    .pm-panel { padding: 24px 16px 20px; }
    .bm-cover { max-width: 150px; }
    .bm-actions .btn { flex: 1 1 100%; }

    /* Reader: a single page wants the full width, so the arrows drop down and
       flank the page counter instead of taking a column beside the book */
    .br-stage { padding: 0; }
    .br-book.is-single { --avail-w: calc(100vw - 28px); --avail-h: calc(var(--vp-h) - 176px); }

    /* Text reflows, so on a phone its page need not keep the printed sheet's
       proportions. A taller, narrower page plus tighter side margins buys a
       readable type size while leaving each verse on one line. */
    .br-book.is-single.is-text {
        --ph: min(var(--avail-h), calc(var(--avail-w) / 0.62));
        width: calc(var(--ph) * 0.62);
    }
    .br-book.is-text .br-textbody { padding: 7% 6% 9%; }
    .br-nav {
        position: fixed;   /* .br-stage clips the turning leaf; fixed escapes it */
        top: auto;
        bottom: 16px;
        transform: none;
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
    .br-prev { left: 16px; }
    .br-next { right: 16px; }
    .br-title { font-size: 0.95rem; }
    .br-tool { width: 34px; height: 34px; }
    .br-foot { padding-top: 14px; padding-bottom: 6px; }
}