/* ==========================================================================
   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;
    /* The site name is Devanagari, which Great Vibes has no glyphs for, so it
       falls back to whatever Devanagari face the device has. Those sit taller
       than the Latin box this line-height was measured against - the matras
       above the shirorekha climbed out of the painted area and came back
       unpainted, which read as the logo being sliced off along the top.
       The padding grows the area the gradient is painted into; the matching
       negative margin gives that growth back, so the navbar is exactly the
       height it was. */
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    margin-top: -0.25em;
    margin-bottom: -0.25em;
    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;
}

/* The auto side margins, not .navbar's space-between, are what centre the menu.
   The CTA is optional (Site Settings > Header PDF button), and with it switched
   off space-between has only two children left and shoves the menu against the
   right edge. Auto margins absorb the free space either side instead, so the
   menu holds the same place whether or not the button is there. On mobile the
   menu is width:100%, which leaves them nothing to absorb. */
.nav-links {
    display: flex;
    gap: 20px;
    margin-left: auto;
    margin-right: auto;
}

.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('../uploads/banner/b1.jpg'); background-position: right center; }
.slide-words   .hero-bg { background-image: url('../uploads/banner/b3.jpg'); background-position: center; }
.slide-journey .hero-bg { background-image: url('../uploads/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;
    /* Same clipped-matras problem as .logo-name, and worse here because 1.1
       leaves the tightest line box on the site. Layout-neutral: the padding
       and the negative margin cancel out, leaving the 8px gap below intact. */
    padding-top: 0.22em;
    padding-bottom: 0.22em;
    margin-top: -0.22em;
    margin-bottom: calc(8px - 0.22em);
    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; }
/* The card is shaped like the artwork (the covers are 900x1200) rather than
   given a fixed height. It was 190px tall at every width, so as the column
   grew the box went wider than the picture and object-fit: cover took the
   difference off the top and bottom - which cut the author's face. The crop
   ran from about 10% on a small phone to 55% at the 2-column breakpoint and
   over 50% again on a tablet, so it was only ever unnoticeable on a narrow
   phone, where the column happens to land near 3:4 by luck. */
.book-cover {
    aspect-ratio: 3 / 4; 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); }

/* Uploaded artwork fills the card; without one the cover paints the .cover-*
   scene the admin picked at Admin > Books (the same palette the books page,
   modal and reader use — see "cover artwork (CSS)" further down). */
.book-cover.has-image { padding: 0; overflow: hidden; }
/* Anchored to the top so that artwork which is not 3:4 loses its floor rather
   than the head at the top of the frame. */
.book-cover.has-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.book-cover.cover-parchment h3,
.book-cover.cover-blossom h3 { color: #4a2b2b; text-shadow: none; }

/* Legacy: the numbered gradients the home page used before covers became
   editable. Kept so any book still holding a book-bg-* class still paints. */
.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('../uploads/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('../uploads/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); }

/* Waiting on the server; the heart is already showing where it will land */
.like-btn.is-busy,
.pc-like.is-busy { opacity: 0.55; pointer-events: none; }

/* The quote heart is a span acting as a button, so give it a visible focus ring */
.like-btn:focus-visible,
.pc-like:focus-visible { outline: 2px solid #7d2ae8; outline-offset: 3px; border-radius: 4px; }

.search-box {
    position: relative;
    width: min(220px, 100%);
}

.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('../uploads/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;
    /* ...and this clears the Devanagari matras on top of them - see .logo-name. */
    padding-top: 0.22em;
    padding-bottom: 0.22em;
    margin-top: -0.22em;
    margin-bottom: -0.22em;
    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;
}

/* The bio runs in Devanagari, which sits visually smaller than Latin at the
   same size and needs more room between lines to stay readable. */
.who-text-hindi {
    font-size: 0.92rem;
    line-height: 1.95;
    color: #3d3d3d;
    text-align: justify;
    margin-bottom: 14px;
}

.who-text-hindi + .who-sign { margin-top: 8px; }

.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;
    /* The step's colour, which the .step-* class below overrides per step. It
       is set here as well so a step whose ColorClass is missing or unknown
       still comes out a deliberate colour rather than body text grey - the
       disc, the connector line, the dot and the heading all read it. */
    color: #7d2ae8;
}

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

/* The white belongs to the glyph, not to the disc behind it.
   `color: #fff` used to sit on .step-icon itself, and the disc is painted
   `background: currentColor` further down - which resolves against that same
   element - so the circle came out white with a white icon on it, i.e. an
   empty circle. The connector line and dot never had the problem because
   their currentColor resolves on .journey-step, which still holds the
   step's colour. */
.step-icon i { color: #fff; }

/* 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('../uploads/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: min(240px, 100%); }

/* 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 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #c9b6da;
    transition: color 0.25s ease;
}
.pc-like:hover { color: #e5127d; }
.pc-like.is-liked { color: #e5127d; }

/* Only the heart grows — the count beside it has to stay readable */
.pc-like i { transition: transform 0.2s ease; }
.pc-like.is-liked i { transform: scale(1.15); }

.pc-like .like-count {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #8b7c99;
    transition: color 0.25s ease;
}
.pc-like.is-liked .like-count { color: #e5127d; }

/* 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('../uploads/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; }

/* Crumb under the heading on /books/category/<code> — the way back to the
   whole shelf, and a plain link for a crawler to follow up the hierarchy. */
.books-cat-crumb {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #6b5b7b;
    text-align: center;
}
.books-cat-crumb a { color: #b8175f; font-weight: 600; }
.books-cat-crumb a:hover { text-decoration: underline; }

.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;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 105, 58, 0.4) transparent;
}

/* A page can outrun its paper when a transcription runs long, so it stays
   scrollable — but the browser's grey slab across the parchment breaks the
   printed-page illusion. Drawn instead as a hairline in the same ink as the
   frame, and only there at all while the page actually overflows. */
.br-textbody::-webkit-scrollbar { width: 6px; }
.br-textbody::-webkit-scrollbar-track { background: transparent; }
.br-textbody::-webkit-scrollbar-thumb {
    background: rgba(139, 105, 58, 0.32);
    border-radius: 3px;
}
.br-textbody:hover::-webkit-scrollbar-thumb { background: rgba(139, 105, 58, 0.5); }
.br-textbody::-webkit-scrollbar-thumb:hover { background: rgba(139, 105, 58, 0.7); }

/* 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; }

/* Front matter — the about-the-author page and the disclaimer. Running prose
   under a heading, rather than the numbered verse the poem pages carry.
   Prose sets far denser than verse, so the about page needs its own scale:
   0.0158 is the largest at which its four paragraphs still fit the sheet. */
.br-textpage.is-front { font-size: calc(var(--ph) * 0.0158); }

.bt-front h5 {
    font-family: 'Rozha One', serif;
    font-size: 1.5em;
    font-weight: 400;
    text-align: center;
    color: #24144a;
}
.bt-front > .bt-orn { width: 34%; margin: 0.15em auto 1.1em; }

.bt-front p {
    margin-bottom: 0.9em;
    line-height: 1.85;
    text-align: justify;
    hyphens: none;
}

.bt-front .bt-sign {
    margin-top: 0.4em;
    font-weight: 600;
    text-align: right;
    color: #3b2a17;
}

/* The disclaimer is a few lines, so it sits centred on its own page */
.bt-front.is-centred { margin: auto 0; }
.bt-front.is-centred p { text-align: center; font-size: 1em; }

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

/* A book with real cover art shows it full-bleed: the artwork already carries
   the title and the byline, so none of the .brc-* type is rendered. */
.br-cover.is-art { padding: 0; gap: 0; }
.br-cover.is-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
}

.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;
}

/* ------------------------------------------------------------- jump to page
   .br-jump sets display, which beats the browser's [hidden] rule on its own,
   so hiding the control needs saying here. */
.br-jump { display: flex; align-items: center; gap: 8px; }
.br-jump[hidden] { display: none; }

.br-jump label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #d6c6f2;
}

.br-jump input {
    width: 72px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    text-align: center;
    -moz-appearance: textfield;   /* the spinners crowd a box this narrow */
    appearance: textfield;
}
.br-jump input::-webkit-outer-spin-button,
.br-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.br-jump input::placeholder { color: rgba(214, 198, 242, 0.55); }
.br-jump input:focus {
    outline: none;
    border-color: #7d2ae8;
    background: rgba(255, 255, 255, 0.13);
}

/* A page number the book does not have */
.br-jump input.is-bad {
    border-color: #d82a62;
    animation: brJumpNudge 0.4s ease;
}
@keyframes brJumpNudge {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.br-jump-go {
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    color: #e8dcff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}
.br-jump-go:hover { background: #7d2ae8; border-color: #7d2ae8; color: #fff; }

/* ==========================================================================
   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-blue   { background: linear-gradient(90deg, #1558b0, #2b7fe0); }

.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; }
.cat-blue-ic   { color: #2b7fe0; }

.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: min(300px, 100%);
    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('../uploads/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; }

/* Second contact email, shown under the first - same link, quieter weight. */
.touch-value-alt { display: block; margin-top: 2px; color: #666; font-weight: 400; }

.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('../uploads/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; }

/* ==========================================================================
   READERS' FEEDBACK PAGE (/feedback)
   --------------------------------------------------------------------------
   Reuses the contact page's .panel-card / .contact-form field styling, so the
   two forms on the site look like the same form. Everything below is either
   the star treatment or the review cards.
   ========================================================================== */
.feedback-hero {
    background: radial-gradient(circle at 12% 18%, rgba(240, 190, 210, 0.45) 0%, rgba(255, 255, 255, 1) 78%);
    padding: 58px 20px 42px;
    text-align: center;
}

.feedback-hero-inner { max-width: 760px; margin: 0 auto; }

.feedback-kicker {
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    color: #e5127d;
}

.feedback-title {
    font-family: 'Rozha One', serif;
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 400;
    line-height: 1.15;
}

.feedback-intro {
    font-size: 0.88rem;
    line-height: 1.9;
    color: #555;
    max-width: 620px;
    margin: 6px auto 0;
}

/* --------------------------------------------------------- Star rows (read-only) */
.star-row {
    display: inline-flex;
    gap: 3px;
    color: #f5a623;
    font-size: 0.85rem;
}

/* Font Awesome's outline weight is the "empty" half of every rating. */
.star-row .far { color: #dcd2e6; }

.star-row-lg { font-size: 1.3rem; gap: 5px; }

/* ------------------------------------------------------------------- Summary */
.feedback-summary-section {
    max-width: min(900px, 92vw);
    margin: 0 auto 44px;
    padding: 0 20px;
}

.feedback-summary {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 38px;
    align-items: center;
}

.fb-score { text-align: center; }

.fb-score-number {
    font-family: 'Rozha One', serif;
    font-size: 3.4rem;
    line-height: 1;
    color: #2b0c51;
}

.fb-score-count {
    font-size: 0.74rem;
    color: #6b6b6b;
    margin-top: 9px;
}

.fb-breakdown { display: flex; flex-direction: column; gap: 9px; }

/* Fixed first and last columns keep every bar starting and ending on the same
   line, however wide the counts get. */
.fb-bar-row {
    display: grid;
    grid-template-columns: 42px 1fr 26px;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    color: #555;
}

.fb-bar-label { white-space: nowrap; }
.fb-bar-label i { color: #f5a623; font-size: 0.68rem; }

.fb-bar-track {
    height: 8px;
    border-radius: 99px;
    background: #f1eaf8;
    overflow: hidden;
}

.fb-bar-fill {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #7d2ae8, #e5127d);
}

.fb-bar-count { text-align: right; font-variant-numeric: tabular-nums; }

.fb-summary-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b6b6b;
    font-size: 0.85rem;
}

.fb-summary-empty i { color: #7d2ae8; font-size: 1.6rem; margin-bottom: 10px; display: block; }

/* -------------------------------------------------------------- Review cards */
.feedback-list-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 20px;
    margin-top: 26px;
}

.review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #f2ecf7;
    border-radius: 14px;
    padding: 24px 24px 18px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(125, 42, 232, 0.12);
}

.review-mark {
    position: absolute;
    top: 2px;
    right: 18px;
    font-family: 'Rozha One', serif;
    font-size: 3.2rem;
    line-height: 1;
    color: #f3ebfa;
}

/* pre-line so the line breaks a reader typed survive, without letting any
   markup they typed through - Razor still encodes the text itself. */
.review-text {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.85;
    color: #444;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.review-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    border-top: 1px solid #f4eef9;
    padding-top: 12px;
}

.review-name {
    font-family: 'Great Vibes', cursive;
    font-size: 1.35rem;
    color: #e5127d;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.review-date { font-size: 0.7rem; color: #8b8b8b; white-space: nowrap; }

/* --------------------------------------------------------------- The form */
.feedback-form-section {
    max-width: 780px;
    margin: 46px auto 60px;
    padding: 0 20px;
}

.feedback-form-note {
    font-size: 0.78rem;
    color: #666;
    text-align: center;
    line-height: 1.75;
    margin-bottom: 6px;
}

.feedback-form textarea { min-height: 130px; }

/* Star picker: five real radios, so it works with a keyboard and without JS.
   The markup runs 5 -> 1 and this lays it out row-reverse, which turns
   "light up every star up to the one under the cursor" into a plain sibling
   rule instead of a script. */
.rating-field {
    border: 0;
    padding: 0;
    margin: 0 0 16px;
    text-align: center;
}

.rating-legend {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 6px;
}

.star-input {
    position: relative;
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 8px;
}

/* Kept in the layer rather than display:none, so they stay focusable. */
.star-input input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.star-input label {
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    color: #dcd2e6;
    transition: color 0.15s ease, transform 0.15s ease;
}

.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label { color: #f5a623; }

.star-input label:hover { transform: scale(1.12); }

.star-input input:focus-visible + label {
    outline: 2px solid #7d2ae8;
    outline-offset: 3px;
    border-radius: 4px;
}

.star-input.invalid label { color: #f3b8cf; }

.star-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==========================================================================
   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;
    /* min() rather than a flat 450px: the footer column is ~300px wide once the
       footer stacks to three columns, and a phone is narrower still. */
    width: min(450px, 100%);
}

.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: min(420px, 100%);
    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; }

/* Visitor counter — its own centred row above the copyright line, so the
   three-column .footer-bottom-3 layout below it is left alone. */
.footer-hits {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    /* No rule of its own here: .footer-top already ends in a border-bottom,
       which is the divider directly above this row. Adding a second one drew
       two lines a few pixels apart. */
    margin: 26px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.75rem;
    color: #cbb6e0;
}

.footer-hits > i { color: #fca311; }

.fh-label { letter-spacing: 0.08em; text-transform: uppercase; }

.fh-digits { display: inline-flex; gap: 4px; }

/* Odometer-style digit cells. Tabular figures keep the row from twitching
   as the number ticks over. */
.fh-digit {
    min-width: 18px;
    padding: 3px 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(203, 182, 224, 0.22);
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-align: center;
}

/* ==========================================================================
   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; }
    .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;
    }

    /* The navbar is sticky, so an open panel taller than the screen would pin
       its own bottom rows out of reach — a sticky box cannot be scrolled past.
       Cap it at the viewport and let the panel itself scroll instead. dvh is
       the second declaration so old engines keep the vh fallback. */
    .nav-links.open {
        max-height: min(720px, calc(100vh - 130px));
        max-height: min(720px, calc(100dvh - 130px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        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; }

    /* Feedback: score above the bars, and let the cards go full width. */
    .feedback-summary { grid-template-columns: 1fr; gap: 22px; text-align: center; }
    .review-grid { grid-template-columns: 1fr; }


    /* 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; }

    .footer-hits { flex-wrap: wrap; gap: 8px; }

    .who-text-hindi { text-align: left; }
}

/* ==========================================================================
   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; }

    /* The nav arrows are fixed in the bottom corners here, so the jump row has
       to fit between them: the placeholder carries the range and the button
       says what the box does, which the visible label was only repeating. The
       input keeps its aria-label, so nothing is lost to a screen reader. */
    .br-jump label { display: none; }
    .br-jump { gap: 6px; }
    .br-jump input { width: 64px; }
    .br-jump-go { padding: 5px 12px; }
}
/* ==========================================================================
   Added: Contact form image captcha (dynamic admin build)
   ========================================================================== */
.captcha-field { margin-top: 4px; }
.captcha-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #4a4458; }
.captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha-image-box { border-radius: 8px; overflow: hidden; border: 1px solid #e6e1f5; line-height: 0; flex-shrink: 0; }
.captcha-refresh-btn {
    width: 40px; height: 40px; border-radius: 8px; border: 1px solid #e6e1f5; background: #fff;
    color: #7c3aed; cursor: pointer; font-size: 14px; flex-shrink: 0;
}
.captcha-refresh-btn:hover { background: #f4edfd; }
.captcha-row input#cfCaptcha { flex: 1; min-width: 140px; }

/* ------------------------------------------------- Contact: WhatsApp hand-off
   Shown under the contact form only after a message has been sent, offering to
   pass the same details to WhatsApp. Nothing leaves the page until it's tapped. */
.wa-offer {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid #bfe9c8;
    border-radius: 12px;
    background: #f2fbf4;
}
.wa-offer p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #1f6b34;
}
.wa-offer p i { color: #25d366; margin-right: 6px; }
.wa-offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-whatsapp {
    display: inline-flex; align-items: center; gap: 8px;
    background: #25d366; color: #fff; border: none;
    padding: 11px 20px; border-radius: 30px;
    font-size: 13px; font-weight: 700; letter-spacing: .3px;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .32);
}
.btn-whatsapp:hover { background: #1eb658; color: #fff; }
.wa-offer-dismiss {
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 13px; color: #6b7280; text-decoration: underline;
}
.wa-offer-dismiss:hover { color: #374151; }

/* ============================================================ Event detail page */
.event-detail-main { max-width: 1120px; margin: 0 auto; padding: 30px 20px 70px; }
.ev-breadcrumb { font-size: 13px; color: #8a8397; margin-bottom: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-breadcrumb i { font-size: 9px; }
.ev-breadcrumb a { color: #7c3aed; }
.ev-breadcrumb a:hover { text-decoration: underline; }

.ev-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: start; }
.ev-detail-media { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(76, 41, 130, .16); }
.ev-detail-media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.ev-detail-date {
    position: absolute; top: 18px; left: 18px; background: #fff; border-radius: 12px;
    padding: 10px 14px; text-align: center; line-height: 1.15; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.ev-detail-date small { display: block; font-size: 10px; letter-spacing: 1px; color: #db2777; font-weight: 700; }
.ev-detail-date strong { display: block; font-size: 24px; color: #2c2438; }
.ev-detail-badge {
    position: absolute; top: 18px; right: 18px; background: linear-gradient(90deg, #7c3aed, #db2777);
    color: #fff; padding: 7px 14px; border-radius: 30px; font-size: 11px; font-weight: 700; letter-spacing: .4px;
}
.ev-detail-title { font-size: 32px; line-height: 1.25; margin: 12px 0 16px; }
.ev-detail-meta { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.ev-detail-meta li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #5c5470; }
.ev-detail-meta i { color: #7c3aed; width: 16px; }
.ev-detail-text { font-size: 15px; line-height: 1.8; color: #4a4359; margin-bottom: 24px; }
.ev-detail-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ev-detail-past { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #16a34a; font-weight: 600; }

.ev-related { margin-top: 60px; }
.ev-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 20px; }

@media (max-width: 900px) {
    .ev-detail { grid-template-columns: 1fr; gap: 24px; }
    .ev-detail-title { font-size: 26px; }
}

/* ======================================================= Event register popup */
body.ev-modal-open { overflow: hidden; }
/* The top-bar contact popup reuses this shell (Views/Shared/_HeaderContactModal.cshtml)
   but locks scrolling under its own class, so neither popup can release the other's lock. */
body.hc-modal-open { overflow: hidden; }
/* 2000 is the site's overlay layer. At 1200 this sat UNDER .float-actions
   (1500), whose own comment already assumed modals were at 2000, so the
   floating WhatsApp and call buttons covered the popup's Send button. */
.ev-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ev-modal[hidden] { display: none !important; }
.ev-modal-backdrop { position: absolute; inset: 0; background: rgba(30, 23, 48, .62); backdrop-filter: blur(2px); }
.ev-modal-card {
    position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
    background: #fff; border-radius: 18px; padding: 28px 30px 26px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.ev-modal-close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
    border: none; background: #f4f2fa; color: #5c5470; cursor: pointer; font-size: 14px;
}
.ev-modal-close:hover { background: #e9e4f7; color: #7c3aed; }
.ev-modal-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #db2777; }
.ev-modal-head h3 { margin: 8px 0 4px; font-size: 21px; }
.ev-modal-event { margin: 0 0 20px; font-size: 13.5px; color: #8a8397; }

.ev-field { margin-bottom: 15px; display: flex; flex-direction: column; }
.ev-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ev-field-narrow { max-width: 110px; }
.ev-field label { font-size: 12.5px; font-weight: 700; color: #2c2438; margin-bottom: 6px; }
.ev-field label span { color: #db2777; }
.ev-field input, .ev-field textarea {
    width: 100%; padding: 11px 13px; border: 1.5px solid #e6e1f5; border-radius: 9px;
    font-family: inherit; font-size: 13.5px; color: #2c2438; background: #fff;
}
.ev-field input:focus, .ev-field textarea:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .12); }
.ev-field input.invalid, .ev-field textarea.invalid { border-color: #e5127d; }
.ev-field textarea { resize: vertical; }

.ev-captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev-captcha-row img { border-radius: 8px; border: 1px solid #e6e1f5; flex-shrink: 0; }
.ev-captcha-row input { flex: 1; min-width: 110px; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }
.ev-captcha-refresh { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #e6e1f5; background: #fff; color: #7c3aed; cursor: pointer; flex-shrink: 0; }
.ev-captcha-refresh:hover { background: #f7f4ff; }

.ev-form-status { min-height: 20px; margin: 4px 0 14px; font-size: 13px; color: #5c5470; }
.ev-form-status.error { color: #e5127d; }
.ev-form-status.success { color: #2e9e4f; }
.ev-modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
/* .btn sets no font-family and form controls don't inherit one, so without
   this the popups' own buttons sit in the browser's default face. */
.ev-modal-actions .btn { font-family: inherit; }

@media (max-width: 560px) {
    .ev-modal-card { padding: 24px 20px 20px; }
    .ev-field-row { grid-template-columns: 1fr; }
    .ev-field-narrow { max-width: none; }
    .ev-modal-actions { justify-content: stretch; }
    .ev-modal-actions .btn { flex: 1; justify-content: center; }

    /* --------------------------------------------------------------------
       The top-bar contact popup, tightened for a phone.

       Scoped to #hcContactModal rather than applied to the shared shell: the
       event registration popup carries more fields and needs the room it has.
       Stacking name and email above already made this one tall, and at 804px
       of content it filled the screen top to bottom on a mid-size phone and
       overflowed a small one - a three-field form asking to be scrolled.
       Everything below is spacing and type scale; no field is removed.
       -------------------------------------------------------------------- */
    #hcContactModal .ev-modal-card { padding: 18px 16px 16px; }

    #hcContactModal .ev-modal-kicker { font-size: 10px; }
    #hcContactModal .ev-modal-head h3 { margin: 6px 0 3px; font-size: 17px; }
    #hcContactModal .ev-modal-event { margin: 0 0 12px; font-size: 12px; }
    #hcContactModal .ev-modal-close { top: 10px; right: 10px; width: 30px; height: 30px; }

    #hcContactModal .ev-field { margin-bottom: 10px; }
    #hcContactModal .ev-field label { font-size: 12px; margin-bottom: 4px; }
    #hcContactModal .ev-field input,
    #hcContactModal .ev-field textarea { padding: 9px 11px; }

    /* Four rows of message is generous on a phone; two still shows what is
       being typed, and the box grows if they want more. */
    #hcContactModal #hcMessage { height: 62px; min-height: 62px; }

    #hcContactModal .ev-captcha-row img { width: 132px; height: 44px; }
    #hcContactModal .ev-captcha-refresh { width: 34px; height: 34px; }

    #hcContactModal .ev-form-status { min-height: 0; margin: 2px 0 10px; font-size: 12px; }
    #hcContactModal .ev-modal-actions { gap: 8px; }
    #hcContactModal .ev-modal-actions .btn { padding: 10px 14px; }
}

/* A short phone - and any phone with the keyboard up - has far less room than
   its spec sheet suggests, so the last of the slack comes out on height, not
   width. Below this the form fits a 640px screen without scrolling. */
@media (max-width: 560px) and (max-height: 700px) {
    #hcContactModal .ev-modal-card { padding: 14px 14px 12px; }
    #hcContactModal .ev-modal-head h3 { font-size: 16px; }
    #hcContactModal .ev-modal-event { margin: 0 0 9px; }
    #hcContactModal .ev-field { margin-bottom: 8px; }
    #hcContactModal #hcMessage { height: 50px; min-height: 50px; }
    #hcContactModal .ev-captcha-row img { width: 118px; height: 38px; }
    #hcContactModal .ev-captcha-refresh { width: 30px; height: 30px; }
    #hcContactModal .ev-form-status { margin: 0 0 8px; }
}

/* The smallest phones still in use (a 568px-tall SE, or any phone in
   landscape). The strapline is the one thing here that is decoration rather
   than form, so it is what goes - losing it buys the Send button a place on
   screen, which matters more than the invitation above it. */
@media (max-width: 560px) and (max-height: 620px) {
    #hcContactModal .ev-modal-card { padding: 12px 13px 11px; }
    #hcContactModal .ev-modal-event { display: none; }
    #hcContactModal .ev-modal-head h3 { margin: 5px 0 10px; font-size: 15.5px; }
    #hcContactModal .ev-field { margin-bottom: 7px; }
    #hcContactModal .ev-field input,
    #hcContactModal .ev-field textarea { padding: 8px 10px; }
    #hcContactModal #hcMessage { height: 44px; min-height: 44px; }
}

/* Register buttons rendered by events.js are <button>, not <a> - keep the look. */
.er-cta { border: none; font-family: inherit; cursor: pointer; }

/* ==========================================================================
   Sitemap page (/sitemap)
   ========================================================================== */
.sitemap-main {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: var(--section-y) var(--page-x);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 28px;
    align-items: start;
}

.sitemap-group {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    padding: 24px 26px;
}

.sitemap-group-title {
    font-family: 'Rozha One', serif;
    font-weight: 400;
    font-size: 1.35rem;
    color: #2b0c51;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sitemap-group-title i { color: var(--accent-magenta); }

.sitemap-count {
    margin-left: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-main);
    border-radius: 999px;
    padding: 2px 10px;
}

.sitemap-list { list-style: none; margin: 0; padding: 0; }

.sitemap-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}

.sitemap-list li:last-child { border-bottom: none; }

.sitemap-list a { color: var(--primary-purple); text-decoration: none; font-weight: 500; }
.sitemap-list a:hover { color: var(--accent-magenta); text-decoration: underline; }

.sitemap-note { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }