:root{--maroon:#641d0d;--deep:#3a1209;--saffron:#e76f16;--gold:#c89235;--cream:#fffaf0;--ink:#321a12;--gray:#6e655e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fffdf8;color:var(--ink);font-family:Georgia,'Times New Roman',serif}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}.topbar{background:linear-gradient(90deg,#6b1f0e,#9c3a11,#6b1f0e);color:#fff4d5;padding:7px 4%;font-size:13px}.topbar span{float:right}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:rgba(255,251,242,.97);border-bottom:2px solid #d7a85d;position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:10px}.brand img{width:65px;height:65px;object-fit:contain}.brand strong{font-size:24px;color:var(--maroon);letter-spacing:1px}.brand small{display:block;color:#9b4d25}.site-header nav{display:flex;align-items:center;gap:18px;font-family:Arial,sans-serif;font-size:14px}.site-header nav>a,.drop>a{padding:30px 0}.site-header nav>a:hover,.drop>a:hover{color:var(--saffron)}.drop{position:relative}.drop>div{display:none;position:absolute;top:62px;background:#fff;padding:10px;min-width:160px;box-shadow:0 10px 30px #0002}.drop:hover>div{display:grid}.drop>div a{padding:9px}.donate,.btn{background:linear-gradient(#ef8a21,#c94d08);color:white!important;padding:13px 18px!important;border-radius:6px;box-shadow:0 3px 0 #a83d07}.nav-toggle{display:none}.hero{height:560px;position:relative;overflow:hidden}.quick{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #e2c797;border-radius:12px;margin-top:18px;overflow:hidden;background:#fffaf0}.quick a{text-align:center;padding:14px;font-size:23px;border-right:1px solid #ead9ba}.quick span{display:block;font-size:13px;margin-top:5px}.section{padding:55px 0}.section-title{text-align:center;margin-bottom:25px}.section-title h2{font-size:34px;color:var(--maroon);margin:0}.section-title h2:before,.section-title h2:after{content:'❈';color:var(--gold);font-size:18px;margin:0 15px}.section-title p{color:var(--gray)}.parchment{background:#fbf4e7}.cards.horizontal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(155px,1fr);overflow-x:auto;gap:12px;padding-bottom:10px}.cards article{background:white;border:1px solid #e4d3b7;border-radius:7px;overflow:hidden;text-align:center}.cards img{width:100%;height:190px;object-fit:cover;background:#f3eadc}.cards h3{font-size:15px;margin:12px}.audio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.audio-card{border:1px solid #e2cfaf;padding:18px;border-radius:8px;background:#fff}.audio-card h3{margin:0 0 5px}.audio-card p{color:var(--gray);font-size:.9rem}.audio-card audio{width:100%}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:55px}.feature-grid a{min-height:190px;padding:28px;color:#fff;border-radius:8px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(#0002,#351006cc),url('/assets/images/reference-home.jpg') center/cover}.feature-grid a:nth-child(2){background-position:center 35%}.feature-grid a:nth-child(3){background-position:center 80%}.feature-grid h2{margin:0}.quote{text-align:center;padding:45px 8%;font-size:25px;font-style:italic;background:#f3dfbb;color:#5b210f}.quote small{display:block;margin-top:10px;font-size:14px}.newsletter{background:#45170c;color:white;padding:25px 5%;display:flex;justify-content:space-between;align-items:center}.newsletter small{display:block}.newsletter input{width:360px;padding:13px;border:0}.newsletter button{padding:13px 22px;border:0;background:var(--saffron);color:white}footer{background:linear-gradient(#4a180c,#2b0c06);color:#f8e8ce;padding:45px 5% 15px;font-family:Arial,sans-serif}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}.footer-grid a{display:block;padding:5px 0;color:#e8ccb1}.footer-brand{display:flex;align-items:center;gap:12px;font-family:Georgia;font-size:20px;letter-spacing:2px}.footer-brand img{width:65px}.copyright{border-top:1px solid #ffffff33;margin-top:30px;padding-top:18px;font-size:12px}@media(max-width:900px){.topbar span{display:none}.site-header{height:auto;min-height:74px;flex-wrap:wrap}.nav-toggle{display:block;border:0;background:none;font-size:26px}.site-header nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:15px 0}.site-header.open nav{display:flex}.site-header nav>a,.drop>a{padding:8px}.drop>div{position:static;box-shadow:none}.drop:hover>div{display:grid}.hero{height:480px}.hero h1{font-size:44px}.quick{grid-template-columns:repeat(4,1fr)}.audio-grid,.feature-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.newsletter{gap:15px;flex-direction:column;align-items:stretch}.newsletter input{width:70%}}@media(max-width:560px){.brand strong{font-size:18px}.brand img{width:52px;height:52px}.quick{grid-template-columns:repeat(2,1fr)}.audio-grid,.feature-grid,.footer-grid{grid-template-columns:1fr}.section-title h2{font-size:28px}.newsletter input{width:100%;margin-bottom:8px}.newsletter button{width:100%}}
/* ==========================================================
   SANAATANA DHARA
   PRODUCTION HERO
   Reference-style wide / shallow cinematic composition
========================================================== */

.hero {
    --hero-maroon: #6d170d;
    --hero-dark: #27130d;
    --hero-icon: #7b2c18;
    --hero-gold: #d49b48;
    --hero-cream: #fff4d6;

    position: relative;

    width: 100%;

    /*
     * IMPORTANT:
     * Reference screenshot is a WIDE, SHALLOW banner.
     * Do not use 560px/700px desktop height.
     */
    height: clamp(360px, 27.5vw, 520px);
    min-height: 360px;

    overflow: hidden;

    background: #b96b31;
    isolation: isolate;
}


/* ==========================================================
   SLIDES
========================================================== */

.hero-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .85s ease,
        visibility .85s ease;

    z-index: 0;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    z-index: 1;
}


/* ==========================================================
   BACKGROUND
========================================================== */

.hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    transform: scale(1.015);

    transition:
        transform 7s ease;
}

.hero-slide.active .hero-bg {
    transform: scale(1);
}


/*
 * Generated Krishna background
 */
.hero-one {
    background-image:
        url("../images/hero/sanatan-home-slider-bg-1.png");

    background-position: center center;
}


/*
 * Generated Sage / Himalaya background
 *
 * Use PNG if that's what you saved:
 */
.hero-two {
    background-image:
        url("../images/hero/sanatan-home-slider-bg-2.png");

    background-position: center center;
}


/* ==========================================================
   SUBTLE READABILITY OVERLAY

   Deliberately very light.
   We do NOT want to hide the artwork.
========================================================== */

.hero-shade {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 51% 43%,
            rgba(255, 245, 211, .32) 0%,
            rgba(255, 234, 188, .13) 30%,
            rgba(255, 220, 153, 0) 55%
        ),
        linear-gradient(
            90deg,
            rgba(34, 12, 4, .04) 0%,
            rgba(255, 245, 218, .04) 32%,
            rgba(255, 245, 218, .08) 64%,
            rgba(37, 13, 4, .13) 100%
        );

    z-index: 1;
}

.hero-shade-two {
    background:
        radial-gradient(
            ellipse at 51% 43%,
            rgba(255, 240, 198, .25),
            rgba(255, 222, 154, 0) 57%
        ),
        linear-gradient(
            90deg,
            rgba(41, 17, 5, .08),
            rgba(255, 241, 204, .06) 50%,
            rgba(38, 14, 4, .16)
        );
}


/* ==========================================================
   CONTENT LAYOUT
========================================================== */

.hero-content {
    position: relative;
    z-index: 3;

    width: 100%;
    height: 100%;

    /*
     * Center content begins after Krishna.
     */
    display: grid;

    grid-template-columns:
        minmax(270px, 29%)
        minmax(480px, 46%)
        minmax(260px, 25%);

    align-items: stretch;
}


/* ==========================================================
   MAIN CENTER CONTENT
========================================================== */

.hero-main {
    grid-column: 2;

    align-self: start;
    justify-self: center;

    width: 100%;
    max-width: 730px;

    padding:
        clamp(30px, 3vw, 48px)
        15px
        20px;

    text-align: center;

    color: var(--hero-dark);
}


.hero-sanskrit {
    display: block;

    margin: 0 0 5px;

    color: #7a2919;

    font-family:
        "Noto Serif Devanagari",
        "Nirmala UI",
        Mangal,
        serif;

    font-size: clamp(16px, 1.25vw, 22px);
    line-height: 1.2;
    font-weight: 600;
}


.hero-main h1 {
    margin: 0;

    color: var(--hero-maroon);

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

    font-size: clamp(45px, 4.35vw, 72px);
    line-height: .98;

    font-weight: 700;

    letter-spacing: -.035em;

    text-shadow:
        0 1px 0 rgba(255,255,255,.3);
}


.hero-main h2 {
    margin: 7px 0 7px;

    color: #712013;

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

    font-size: clamp(23px, 2.1vw, 35px);
    line-height: 1.05;

    font-weight: 700;
}


.hero-main > p {
    margin: 0 auto;

    max-width: 620px;

    color: #241710;

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

    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.35;
}


/* ==========================================================
   FOUR VALUES

   Reference design:
   - dark maroon/brown icon
   - NO large circle background
   - black/dark labels
========================================================== */

.hero-values {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    gap: clamp(30px, 3.6vw, 58px);

    margin-top: clamp(22px, 2vw, 30px);
}


.hero-value {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    width: 74px;

    gap: 5px;

    color: var(--hero-icon);

    text-decoration: none;

    transition:
        transform .22s ease,
        color .22s ease;
}


.hero-value:hover,
.hero-value:focus-visible {
    color: #a7441d;

    transform:
        translateY(-3px);
}


/*
 * IMPORTANT:
 * Remove translucent circle from your current version.
 */
.hero-value-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    color: inherit;
}


.hero-value svg {
    display: block;

    width: 39px;
    height: 39px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.hero-value strong {
    display: block;

    color: #24130d;

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

    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.1;

    font-weight: 400;
}


/* ==========================================================
   RIGHT-SIDE QUOTE

   This is the important correction:
   quote sits at RIGHT + LOWER portion of hero,
   matching reference screenshot.
========================================================== */

.hero-quote {
    position: absolute;

    right: clamp(42px, 4.5vw, 85px);

    /*
     * Put quote toward bottom-right,
     * not vertically centered.
     */
    bottom: clamp(48px, 5vw, 82px);

    width: clamp(245px, 20vw, 340px);

    margin: 0;
    padding: 0;

    text-align: center;

    color: #fff4d5;

    text-shadow:
        0 2px 5px rgba(38, 11, 3, .85);
}


.hero-quote-sanskrit {
    color: #fff2cc;

    font-family:
        "Noto Serif Devanagari",
        "Nirmala UI",
        Mangal,
        serif;

    font-size: clamp(21px, 1.75vw, 30px);
    line-height: 1.15;

    font-weight: 600;

    white-space: nowrap;
}


.hero-quote-line {
    position: relative;

    display: block;

    width: 82%;
    height: 1px;

    margin: 10px auto 9px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 226, 157, .85) 18%,
            rgba(255, 226, 157, .95) 50%,
            rgba(255, 226, 157, .85) 82%,
            transparent 100%
        );
}


.hero-quote-line::after {
    content: "◇";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    padding: 0 7px;

    color: #ffe1a0;

    font-size: 15px;

    text-shadow:
        0 1px 3px #351006;
}


.hero-quote p {
    margin: 0;

    color: #fff8e6;

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

    font-size: clamp(14px, 1.18vw, 19px);
    line-height: 1.2;

    font-style: italic;
}


/* ==========================================================
   PREVIOUS / NEXT
========================================================== */

.hero-nav {
    position: absolute;

    z-index: 10;

    top: 50%;

    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    padding: 0;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(255, 234, 194, .9);

    border-radius: 50%;

    outline: none;

    background:
        rgba(61, 20, 10, .78);

    color: #fff8e8;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.16);

    cursor: pointer;

    font-family:
        Arial,
        sans-serif;

    font-size: 32px;
    line-height: 1;

    transition:
        background .2s ease,
        transform .2s ease;
}


.hero-nav:hover,
.hero-nav:focus-visible {
    background:
        rgba(115, 34, 15, .94);

    transform:
        translateY(-50%)
        scale(1.05);
}


.hero-prev {
    left: 16px;
}


.hero-next {
    right: 16px;
}


/* ==========================================================
   DOTS
========================================================== */

.hero-dots {
    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    transform:
        translateX(-50%);
}


.hero-dot {
    width: 9px;
    height: 9px;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.95);

    border-radius: 50%;

    background:
        rgba(255,255,255,.48);

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.hero-dot.active {
    background: #fff;

    transform:
        scale(1.18);
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .hero {
        height: 430px;
        min-height: 430px;
    }

    .hero-content {
        grid-template-columns:
            27%
            48%
            25%;
    }

    .hero-main {
        padding-top: 34px;
    }

    .hero-values {
        gap: 28px;
        margin-top: 20px;
    }

    .hero-quote {
        right: 38px;
        bottom: 58px;

        width: 260px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .hero {
        height: 520px;
        min-height: 520px;
    }

    .hero-one {
        background-position:
            35% center;
    }

    .hero-two {
        background-position:
            center center;
    }

    .hero-content {
        display: block;
    }

    .hero-main {
        width: min(610px, 70%);

        margin: 0 auto;

        padding-top: 45px;
    }

    .hero-main h1 {
        font-size: 52px;
    }

    .hero-main h2 {
        font-size: 28px;
    }

    .hero-values {
        gap: 28px;
    }

    .hero-quote {
        right: 30px;
        bottom: 50px;

        width: 255px;
    }

}


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

@media (max-width: 767px) {

    .hero {
        height: 610px;
        min-height: 610px;
    }

    /*
     * Keep Krishna visible but move background.
     */
    .hero-one {
        background-position:
            28% center;
    }

    .hero-two {
        background-position:
            36% center;
    }

    /*
     * Add light center veil only on small screens
     * so real HTML remains readable.
     */
    .hero-shade {
        background:
            linear-gradient(
                180deg,
                rgba(255, 235, 193, .58) 0%,
                rgba(255, 233, 187, .73) 46%,
                rgba(61, 20, 7, .15) 100%
            );
    }

    .hero-main {
        width:
            calc(100% - 70px);

        max-width: 540px;

        padding:
            30px 8px
            0;
    }

    .hero-sanskrit {
        font-size: 16px;
    }

    .hero-main h1 {
        font-size:
            clamp(40px, 11vw, 55px);

        line-height: 1;
    }

    .hero-main h2 {
        margin-top: 7px;

        font-size: 25px;
    }

    .hero-main > p {
        font-size: 14px;
    }

    .desktop-only {
        display: none;
    }

    .hero-values {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        gap: 5px;

        margin-top: 23px;
    }

    .hero-value {
        width: auto;
    }

    .hero-value-icon {
        width: 40px;
        height: 40px;
    }

    .hero-value svg {
        width: 33px;
        height: 33px;
    }

    .hero-value strong {
        font-size: 13px;
    }


    /*
     * Quote moves to centered lower section
     * because there isn't enough right-side space.
     */
    .hero-quote {
        right: 50%;
        bottom: 47px;

        width:
            min(330px, 78%);

        transform:
            translateX(50%);
    }

    .hero-quote-sanskrit {
        font-size: 23px;

        white-space: normal;
    }

    .hero-quote p {
        font-size: 15px;
    }

    .hero-nav {
        width: 39px;
        height: 39px;

        font-size: 27px;
    }

    .hero-prev {
        left: 8px;
    }

    .hero-next {
        right: 8px;
    }

}


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

@media (max-width: 480px) {

    .hero {
        height: 570px;
        min-height: 570px;
    }

    .hero-main {
        width:
            calc(100% - 48px);

        padding-top: 24px;
    }

    .hero-main h1 {
        font-size: 39px;
    }

    .hero-main h2 {
        font-size: 21px;
    }

    .hero-main > p {
        font-size: 13px;
    }

    .hero-values {
        margin-top: 18px;
    }

    .hero-value-icon {
        width: 36px;
        height: 36px;
    }

    .hero-value svg {
        width: 29px;
        height: 29px;
    }

    .hero-value strong {
        font-size: 12px;
    }

    .hero-quote {
        bottom: 44px;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-slide,
    .hero-bg,
    .hero-value,
    .hero-nav,
    .hero-dot {
        transition: none !important;
    }

}

/* === V3 CONSISTENT ANCIENT DESIGN SYSTEM === */
:root{--paper:#fffaf0;--paper-2:#f8edd9;--wine:#641d0d;--wine-2:#3a1209;--saffron:#e76f16;--antique:#c89235;--ink:#321a12;--muted:#76675d}
body{background:radial-gradient(circle at 20% 10%,#fffdf8 0,#fffaf0 42%,#f8efdf 100%);background-attachment:fixed}.site-header nav .is-active{color:var(--saffron);position:relative}.site-header nav .is-active:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:2px;background:var(--saffron)}
.inner-hero{position:relative;overflow:hidden;padding:82px 0 76px;text-align:center;background:linear-gradient(90deg,#4b170bd9,#7a2b10c9),url('../images/hero/sanatan-home-slider-bg-2.png') center 42%/cover;color:#fff4d5;border-bottom:3px solid #d39b48}.inner-hero:after{content:'ॐ';position:absolute;right:5%;top:50%;transform:translateY(-50%);font-size:150px;color:#fff1c70d}.inner-hero span{color:#f7c46c;letter-spacing:.08em}.inner-hero h1{font-size:clamp(38px,5vw,66px);margin:8px auto 12px;max-width:1000px;line-height:1.02}.inner-hero p{max-width:760px;margin:auto;font-size:18px;line-height:1.6;color:#f8ead5}
.page-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}.page-intro-media{min-height:360px;border-radius:12px;background:url('../images/hero/sanatan-home-slider-bg-1.png') 15% center/cover;box-shadow:0 15px 35px #5c220d24;border:1px solid #d8b47c}.eyebrow{color:var(--saffron);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:Arial,sans-serif;font-size:12px}.lead{font-size:19px;line-height:1.8;color:#554238}.ornament{height:1px;background:linear-gradient(90deg,transparent,#c89235,transparent);margin:24px 0}.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.topic-card{position:relative;overflow:hidden;padding:26px;background:linear-gradient(145deg,#fffdf8,#f8ecd7);border:1px solid #dfc79e;border-radius:10px;box-shadow:0 8px 25px #5f2b1010;transition:.25s}.topic-card:hover{transform:translateY(-5px);box-shadow:0 14px 32px #5f2b1022}.topic-card:before{content:'✦';position:absolute;right:14px;top:10px;color:#d4a45d55}.topic-icon{font-size:34px}.topic-card h3{color:var(--wine);font-size:21px;margin:12px 0 8px}.topic-card p{color:var(--muted);line-height:1.6}.topic-card a{color:var(--saffron);font-weight:700}.heritage-band{padding:54px 5%;text-align:center;background:linear-gradient(90deg,#4a160b,#7c2b10,#4a160b);color:#fff0d4;border-block:3px double #c89235}.heritage-band h2{font-size:34px;margin:0 0 10px}.heritage-band p{max-width:760px;margin:0 auto 24px;line-height:1.6}
/* real carousel UI: no horizontal scrollbar */
.media-slider{position:relative}.media-viewport{overflow:hidden}.media-track{display:flex;gap:14px;transition:transform .55s cubic-bezier(.2,.75,.2,1);will-change:transform}.media-card{flex:0 0 calc((100% - 99px)/8);min-width:0;background:#fff;border:1px solid #dfcba9;border-radius:8px;overflow:hidden;text-align:center;box-shadow:0 4px 14px #5c260c0c}.media-card img{display:block;width:100%;aspect-ratio:4/4.7;object-fit:cover;background:#f4ead8}.media-card h3{font-size:14px;color:#2b1710;margin:10px 7px 3px}.media-card small{display:block;color:#8a6d5b;margin-bottom:10px}.slider-arrow{position:absolute;z-index:4;top:42%;width:42px;height:42px;border:1px solid #fff0d4;border-radius:50%;background:#4c1b10d9;color:white;font-size:26px;cursor:pointer;box-shadow:0 5px 15px #0002}.slider-arrow.prev{left:-20px}.slider-arrow.next{right:-20px}.slider-arrow:disabled{opacity:.3;cursor:default}.slider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.slider-head .section-title{margin:0;text-align:left}.slider-head .section-title h2:before{display:none}.slider-head .view-all{color:var(--saffron);font-weight:700;font-size:14px}
/* inner page components */
.scripture-list,.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.resource-card{padding:24px;border:1px solid #dec69d;border-radius:10px;background:#fffdf8}.resource-card h3{color:var(--wine);margin:6px 0}.resource-card p{color:var(--muted);line-height:1.6}.resource-card .meta{font:12px Arial,sans-serif;color:var(--saffron);text-transform:uppercase;letter-spacing:.08em}.contact-layout,.donate-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:30px}.form-card,.info-card,.donation-card{background:#fffdf8;border:1px solid #dfc69b;border-radius:12px;padding:28px;box-shadow:0 12px 30px #5b260c10}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:700;color:var(--wine)}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid #d9c19b;border-radius:7px;background:#fffaf0;font:15px Arial,sans-serif}.field textarea{min-height:140px;resize:vertical}.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.amount-grid button{padding:18px;border:1px solid #d4b27b;background:#fff8e9;color:var(--wine);border-radius:8px;font-weight:700;cursor:pointer}.amount-grid button:hover{background:#f8e6c5}.filter-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}.filter-bar button{border:1px solid #d6b47d;background:#fffaf0;color:#6b2a14;padding:10px 18px;border-radius:999px;cursor:pointer}.filter-bar button.active{background:var(--wine);color:#fff}.filter-item.is-hidden{display:none}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery-card{overflow:hidden;border:1px solid #dfc69c;border-radius:10px;background:#fff}.gallery-card img,.gallery-card video{width:100%;aspect-ratio:10/10;object-fit:cover;display:block}.gallery-card>div{padding:14px}.gallery-card span,.pill{font:11px Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--saffron)}.notice-box{margin-top:24px;padding:16px 18px;border-left:4px solid var(--antique);background:#fbf0dd;color:#654b3d}.audio-library{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.media-card{flex-basis:calc((100% - 56px)/5)}}
@media(max-width:900px){.page-intro,.contact-layout,.donate-layout{grid-template-columns:1fr}.topic-grid,.scripture-list,.download-grid,.gallery-grid{grid-template-columns:1fr 1fr}.media-card{flex-basis:calc((100% - 28px)/3)}.slider-arrow.prev{left:4px}.slider-arrow.next{right:4px}.audio-library{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.inner-hero{padding:58px 0}.inner-hero h1{font-size:38px}.topic-grid,.scripture-list,.download-grid,.gallery-grid,.form-grid,.audio-library{grid-template-columns:1fr}.media-card{flex-basis:calc((100% - 14px)/2)}.slider-head{align-items:flex-end}.slider-head .section-title h2{font-size:26px}.amount-grid{grid-template-columns:1fr 1fr}}