:root {
    --chandan: #FDF8EE;
    --chandan-deep: #F4E9D4;
    --ink: #211A12;
    --ink-soft: #574B3C;
    --saffron: #D9741A;
    --ochre: #8F4E0A;
    --kumkum: #8C1D2A;
    --tulsi: #2D5540;
    /* ochre at 30% — used for every hairline rule */
    --hairline: color-mix(in srgb, var(--ochre) 30%, transparent);
    --topbar-h: 60px;
}

* { box-sizing: border-box }

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: var(--chandan);
    color: var(--ink);
    font-size: 21px;
    line-height: 1.7;
    overflow-x: hidden;
}

a { color: var(--ochre) }

/* paper grain overlay */
.paper-grain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}
.paper-grain svg { width: 100%; height: 100% }

/* header */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--chandan) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 24px;
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.topbar .mark-logo { height: 34px; width: auto; display: block }
.home-btn {
    margin-left: auto; cursor: pointer;
    font: 600 15px 'Inter', sans-serif; color: var(--ochre);
    background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
    padding: 8px 16px; min-height: 40px;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background .15s, border-color .15s;
}
.home-btn svg { width: 17px; height: 17px }
.home-btn:hover { border-color: var(--saffron) }
.home-btn:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px }
.home-btn:active { transform: translateY(1px) }

.wrap {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: auto;
    padding: 48px 24px 80px;
}

/* hero */
.hero { position: relative; text-align: center }
.hero-logo, .hero h1, .hero p, .hero-photo, .stats { position: relative; z-index: 1 }
.hero-logo { margin-bottom: 14px }
.hero-logo img { height: 72px; width: auto; display: block; margin: 0 auto }
.hero h1 {
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: clamp(34px, 5.5vw, 52px);
    line-height: 1.15;
    margin: 8px 0 2rem;
    color: var(--ink);
}
.hero p {
    color: var(--ink-soft);
    max-width: 640px;
    margin: 0 auto 26px;
    font-size: 17px;
}
.hero-photo { margin: 6px 0 30px; max-width: 100% }
.hero-photo img {
    width: 100%; height: auto; display: block;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(33, 26, 18, .16);
}

/* om watermark */
.om-watermark {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 70vh; width: auto; max-width: 90vw;
    opacity: 0; pointer-events: none; z-index: 0;
    mix-blend-mode: multiply;
    transition: opacity .5s ease;
}
.om-watermark.show { opacity: .07 }
@media(max-width:768px) { .om-watermark { display: none } }

/* stats */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin: 8px 0 4px;
}
@media(max-width:720px) { .stats { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:420px) { .stats { grid-template-columns: 1fr } }
.stat {
    position: relative; background: var(--chandan-deep);
    border: 1px solid var(--hairline); border-radius: 14px;
    padding: 24px 18px 18px; overflow: hidden; text-align: center;
    display: flex; flex-direction: column; justify-content: center;
}
.stat::before {
    content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
    background: var(--saffron);
}
.stat b {
    font-family: 'Fraunces', serif; font-size: 60px; font-weight: 700;
    display: block; line-height: 1; margin-bottom: 8px; color: var(--saffron);
}
/* giving numbers are long ($801,712) — shrink so they don't clip the tile */
#giving .stat b { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.01em }
.stat span {
    font-size: 15px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-soft);
}

/* sections */
.section { padding: 2.5rem 0 0 }
.panel-body > .section:first-child { padding-top: 0 }
.sechead {
    position: sticky; top: var(--topbar-h, 60px); z-index: 10;
    background: var(--chandan);
    margin-bottom: 2.5rem;
}
.sechead h2 {
    font-family: 'Fraunces', serif; font-weight: 600;
    font-size: 42px; margin: 0; color: var(--ochre);
    display: inline-block; vertical-align: middle;
}
.sechead .count {
    display: inline-block; vertical-align: middle; margin-left: 12px;
    font-size: 15px; font-weight: 700; color: var(--ink);
    background: var(--saffron); border-radius: 12px; padding: 3px 12px;
}
.sechead .blurb {
    display: block; margin-top: 6px;
    font-size: 17px; color: var(--ink-soft);
}
.sechead::after {
    content: ""; display: block; width: 80px; height: 4px;
    background: var(--saffron); margin: 1rem 0 0;
}
@media(max-width:640px) { .sechead .blurb { display: none } }

/* full-bleed section bands */
.band {
    width: 100vw; margin-left: calc(50% - 50vw);
    min-height: 160px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 2.5rem; padding: 24px;
}
.band h2 {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 42px; margin: 0;
    color: var(--chandan); text-align: center;
}
.band-kumkum { background: var(--kumkum) }
.band-tulsi { background: var(--tulsi) }
.band-ochre { background: var(--ochre) }

/* card grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px }
.card {
    background: #fff; border: 1px solid var(--hairline);
    border-left: 4px solid var(--saffron); border-radius: 12px;
    padding: 16px 18px;
}
.card .title { font-weight: 600; font-size: 17px; margin-bottom: 8px; color: var(--ochre) }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.tag {
    font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 12px;
    background: var(--chandan-deep); color: var(--ink-soft);
}
.tag.aud { background: var(--chandan-deep); color: var(--ochre) }
.tag.past { background: var(--ink-soft); color: var(--chandan) }
.card.past { background: var(--chandan-deep); border-left-color: var(--ink-soft) }
.card.past .title { color: var(--ink-soft) }
.desc { font-size: 17px; color: var(--ink-soft); line-height: 1.55 }

/* ============================================================
   SHOW-MORE (Offerings cards) — clamps each card description to
   3 lines with an expand/collapse toggle. SELF-CONTAINED: to
   remove this feature, delete THIS CSS block and the matching JS
   block (both marked "SHOW-MORE"). Nothing else depends on it.
   ============================================================ */
#panel-offerings .grid { align-items: stretch }
#panel-offerings .card { min-height: 240px }
#panel-offerings .card .desc {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
#panel-offerings .card.expanded .desc {
    -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
}
/* measurement pass: unclamped but not painted, so no flicker */
#panel-offerings .card.measuring .desc {
    -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
}
.showmore-btn {
    margin-top: 10px; padding: 6px 0; min-height: 40px;
    background: none; border: none; cursor: pointer;
    font: 600 13px 'Inter', sans-serif; color: var(--ochre);
    text-decoration: underline; text-underline-offset: 3px;
}
.showmore-btn:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px }
.showmore-btn:active { opacity: .7 }
/* ===== END SHOW-MORE CSS ===== */
.flag { margin-top: 9px; font-size: 15px; font-style: italic; color: var(--ochre) }

/* compact rows */
.rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px }
@media(max-width:760px) { .rows { grid-template-columns: 1fr } }
.row {
    background: #fff; border: 1px solid var(--hairline);
    border-left: 3px solid var(--saffron); border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.row .rt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.row .title { font-weight: 600; font-size: 16px; color: var(--ochre) }
.row .medium { font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: .03em; text-transform: uppercase }
.row .desc { font-size: 15px }

/* archived */
details.archived {
    margin-top: 6rem; border-top: 1px solid var(--hairline); padding-top: 8px;
}
details.archived summary {
    cursor: pointer; list-style: none; display: flex; align-items: center;
    gap: 12px; padding: 16px 0; min-height: 60px;
    position: sticky; top: var(--topbar-h, 60px); z-index: 10; background: var(--chandan);
}
details.archived summary::-webkit-details-marker { display: none }
details.archived summary:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px }
details.archived summary:active { opacity: .7 }
details.archived summary h2 {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 42px; margin: 0; color: var(--ochre);
}
details.archived summary .hint { font-size: 15px; color: var(--ink-soft); margin-left: auto }
.archrows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 10px }
@media(max-width:760px) { .archrows { grid-template-columns: 1fr } }
.archrow { background: var(--chandan-deep); border: 1px dashed var(--hairline); border-radius: 8px; padding: 12px 16px }
.archrow .title { font-weight: 600; font-size: 16px; color: var(--ink) }
.archrow .desc { font-size: 14px; color: var(--ink-soft) }

/* credential + subhead */
.credential {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--hairline);
    border-left: 4px solid var(--ochre); border-radius: 12px;
    padding: 14px 18px; font-size: 17px; color: var(--ink); margin-bottom: 20px;
}
.credential b { color: var(--ochre) }
.subhead { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: var(--ochre); margin: 0 0 12px; letter-spacing: .01em }
.subhead .sub-count { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--saffron); border-radius: 10px; padding: 2px 9px; margin-left: 8px; vertical-align: middle }

/* collaborations grid */
.collabgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px }
.collabitem {
    background: #fff; border: 1px solid var(--hairline);
    border-left: 4px solid var(--tulsi); border-radius: 10px;
    padding: 18px 20px;
}
.collab-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; color: var(--ochre); margin-bottom: 6px }
.collab-desc { font-size: 17px; color: var(--ink-soft); line-height: 1.55 }

/* three horizontal tabs */
.tabwrap { margin: 30px 0 8px }
.tabnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; scroll-margin-top: 76px }
@media(max-width:720px) { .tabnav { grid-template-columns: 1fr } }
.tab {
    text-align: left; cursor: pointer; background: #fff;
    border: 1px solid var(--hairline); border-top: 4px solid var(--hairline);
    border-radius: 12px; padding: 16px 18px; min-height: 60px;
    display: flex; flex-direction: column; gap: 3px; font-family: inherit;
    transition: box-shadow .15s, border-color .15s;
}
.tab:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px }
.tab:active { transform: translateY(1px) }
.tab-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; color: var(--ochre) }
.tab-sub { font-size: 15px; color: var(--ink-soft) }
.tab.is-active { box-shadow: 0 10px 24px rgba(33, 26, 18, .12) }
.tab-centres.is-active { border-top-color: var(--saffron) }
.tab-offerings.is-active { border-top-color: var(--kumkum) }
.tab-collab.is-active { border-top-color: var(--tulsi) }
.tab-impact.is-active { border-top-color: var(--tulsi) }

/* panels */
.panel { display: none; background: transparent; border: none }
.panel.is-active { display: block; animation: panelin .25s ease }
@keyframes panelin { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.panel-body { padding: 1.5rem 0 0 }

/* prev / next */
.panelnav {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hairline);
}
.panelnav.end { justify-content: flex-end }
.pnav {
    cursor: pointer; font: 600 16px 'Inter', sans-serif;
    padding: 16px 24px; min-height: 60px; border-radius: 10px;
    border: 1px solid var(--hairline); background: #fff; color: var(--ochre);
    transition: background .15s, box-shadow .15s;
}
.pnav:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px }
.pnav:active { transform: translateY(1px) }
.pnav.next { background: var(--saffron); color: var(--ink); border-color: var(--saffron) }

/* centre rows: name left, info right */
.centre-rows { display: flex; flex-direction: column; margin-top: 8px }
.crow {
    display: grid; grid-template-columns: 260px 1fr; gap: 24px;
    padding: 24px 2px; border-top: 1px solid var(--hairline);
}
.crow:first-child { border-top: none; padding-top: 8px }
.cname {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px;
    color: var(--ochre); line-height: 1.3;
    display: flex; align-items: flex-start; gap: 16px;
}
.cicon { width: 36px; height: 36px; flex: none; color: var(--ochre); margin-top: 2px }
.cinfo ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px }
.cinfo li { font-size: 21px; color: var(--ink); line-height: 1.6 }
.cinfo li b { color: var(--ochre); font-weight: 600 }
.cinfo .amt { color: var(--saffron); font-weight: 700 }
@media(max-width:640px) { .crow { grid-template-columns: 1fr; gap: 10px; padding: 20px 2px } }

/* ============================================================
   YATRA GALLERY — the Experiences "Chinmaya Inspiration Yatras"
   card opens a full-screen album gallery. SELF-CONTAINED: to
   remove, delete THIS CSS block, the #yatra-overlay markup, and
   the YATRA JS block (all marked "YATRA").
   ============================================================ */
#panel-offerings .card.yatra-open { cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .1s }
#panel-offerings .card.yatra-open:hover { box-shadow: 0 12px 26px rgba(33, 26, 18, .14); border-left-color: var(--kumkum) }
#panel-offerings .card.yatra-open:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px }
#panel-offerings .card.yatra-open:active { transform: translateY(1px) }
#panel-offerings .card.yatra-open .desc { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible }
.yatra-cta { margin-top: 12px; font: 600 14px 'Inter', sans-serif; color: var(--kumkum) }

.yatra-overlay { position: fixed; inset: 0; z-index: 200; background: var(--chandan); display: flex; flex-direction: column; overflow: hidden }
.yatra-overlay[hidden] { display: none }
.yatra-overlay.opening { animation: yatrain .28s ease }
@keyframes yatrain { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.yatra-ov-bar {
    display: flex; align-items: center; gap: 16px; padding: 14px 24px;
    border-bottom: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--chandan) 92%, transparent); backdrop-filter: blur(8px);
}
.yatra-ov-bar h2 {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(20px, 3.5vw, 30px);
    margin: 0; color: var(--ochre); flex: 1; line-height: 1.2;
}
.yatra-back, .yatra-close {
    cursor: pointer; font: 600 15px 'Inter', sans-serif;
    border: 1px solid var(--hairline); background: #fff; color: var(--ochre);
    border-radius: 10px; padding: 10px 16px; min-height: 44px;
}
.yatra-close { padding: 6px 14px; font-size: 24px; line-height: 1 }
.yatra-back:focus-visible, .yatra-close:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px }
.yatra-back:active, .yatra-close:active { transform: translateY(1px) }
.yatra-ov-body { flex: 1; overflow-y: auto; padding: 28px 24px 60px }
.yatra-ov-inner { max-width: 1040px; margin: auto }
.yatra-ov-sub { color: var(--ink-soft); font-size: 17px; max-width: 640px; margin: 0 0 26px }
.yatra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px }
.yatra-cover {
    position: relative; display: block; border-radius: 12px; overflow: hidden;
    aspect-ratio: 4 / 3; border: 1px solid var(--hairline); text-decoration: none;
    background: var(--chandan-deep); box-shadow: 0 6px 16px rgba(33, 26, 18, .08);
    transition: box-shadow .18s, transform .18s;
}
a.yatra-cover:hover { box-shadow: 0 14px 30px rgba(33, 26, 18, .20); transform: translateY(-3px) }
a.yatra-cover:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px }
.yatra-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease }
a.yatra-cover:hover img { transform: scale(1.05) }
.yatra-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; color: #fff;
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.yatra-cap .go { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; opacity: .92; white-space: nowrap }
.yatra-cover.soon { cursor: default }
.yatra-cover.soon img { filter: grayscale(.4) brightness(.82) }
.soon-badge {
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: .05em;
    background: var(--saffron); color: var(--ink); border-radius: 10px; padding: 3px 9px; white-space: nowrap;
}
.yatra-cover.nocover { display: flex; align-items: center; justify-content: center; background: var(--chandan-deep); border-style: dashed }
.yatra-cover.nocover .yatra-cap { position: static; background: none; color: var(--ochre); flex-direction: column; gap: 10px; padding: 14px }
.yatra-cell { position: relative }
.yatra-cell .yatra-cover { width: 100% }
.ytbadge {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0, 0, 0, .72); color: #fff; padding-left: 2px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 15px; border: 1.5px solid rgba(255, 255, 255, .85);
    transition: background .15s, transform .15s;
}
.ytbadge:hover { background: #c00; transform: scale(1.08) }
.ytbadge:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px }
.ytbadge::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); right: 0;
    width: max-content; max-width: 190px;
    background: var(--ink); color: var(--chandan);
    font: 600 11.5px 'Inter', sans-serif; line-height: 1.35; text-align: left;
    padding: 6px 9px; border-radius: 8px;
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity .15s, transform .15s; box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}
.ytbadge:hover::after, .ytbadge:focus-visible::after { opacity: 1; transform: translateY(0) }
@media(max-width:520px) { .yatra-grid { grid-template-columns: repeat(2, 1fr); gap: 10px } .yatra-cap { font-size: 16px; padding: 22px 12px 10px } }
/* ===== END YATRA CSS ===== */

/* ===== clickable resource cards ===== */
#panel-offerings a.card-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .1s, border-color .15s }
#panel-offerings a.card-link:hover { box-shadow: 0 12px 26px rgba(33, 26, 18, .14); transform: translateY(-2px); border-left-color: var(--kumkum) }
#panel-offerings a.card-link:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px }
#panel-offerings a.card-link .desc { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible }
#panel-offerings a.card-link .title::after { content: " \2197"; font-size: .82em; color: var(--kumkum) }
/* ===== END clickable resource cards ===== */

/* ===== CHARITABLE GIVING NARROW-SCREEN (task 19) ===== */
.archrow { min-width: 0 }
.archrow .title, .archrow .desc { overflow-wrap: anywhere }
@media(max-width:420px) {
    #giving .stats { gap: 10px }
    #giving .stat { padding: 18px 12px 14px }
    #giving .stat b { font-size: 42px }
}
/* ===== END task 19 CSS ===== */

/* footer */
.foot { margin-top: 64px; border-top: 1px solid var(--hairline); padding-top: 24px; font-size: 15px; color: var(--ink-soft) }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px }
.foot-brand { font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px; color: var(--ochre) }
.foot-social { display: flex; gap: 20px; flex-wrap: wrap }
.foot-social a { color: var(--ink-soft); text-decoration: none; font-weight: 600 }
.foot-social a:hover { color: var(--ochre) }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto }
}