:root { --ink: #38231b; --saffron: #b9461f; --deep-saffron: #8e2d16; --gold: #d79b35; --paper: #fff8e8; --muted: #755c4e; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; color: var(--ink); font-family: "Noto Sans Devanagari", sans-serif; background: var(--paper); }
.hero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; min-height: min(780px, 100svh); padding: clamp(48px, 8vw, 115px) max(6vw, 24px); overflow: hidden; isolation: isolate; background: linear-gradient(118deg, #ffefd0 0%, #f8d5a4 57%, #d75024 57%, #a73218 100%); }.hero::after { position: absolute; z-index: -1; right: -30px; bottom: -50px; width: 45%; height: 88%; content: ""; opacity: .23; background-image: radial-gradient(#ffe4a4 1px, transparent 1px); background-size: 14px 14px; }.sun-disc { position: absolute; z-index: -1; top: -190px; left: 27%; width: 520px; aspect-ratio: 1; border-radius: 50%; background: #f7bd63; opacity: .37; }.hero-content { align-self: center; max-width: 680px; }.eyebrow, .section-label { margin: 0 0 14px; color: var(--saffron); font-size: .78rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }.hero h1, h2 { margin: 0; font-family: "Tiro Devanagari Marathi", serif; font-weight: 400; }.hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.85rem); line-height: 1.13; letter-spacing: -.04em; }.hero h1 em, h2 em { color: var(--saffron); font-style: normal; }.hero-text { max-width: 510px; margin: 26px 0 30px; color: #624331; font-size: 1.05rem; line-height: 1.8; }.primary-button { display: inline-flex; gap: 12px; align-items: center; padding: 13px 19px; border-radius: 999px; color: #fff8e8; font-size: .9rem; font-weight: 700; text-decoration: none; background: var(--deep-saffron); transition: transform .2s ease, box-shadow .2s ease; }.primary-button:hover, .primary-button:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(82,23,8,.22); outline: none; }.portrait-frame { position: relative; align-self: center; justify-self: center; width: min(100%, 350px); margin: 0; padding: 13px; border: 1px solid rgba(255,239,208,.5); border-radius: 175px 175px 18px 18px; background: rgba(115,27,7,.18); box-shadow: 0 26px 55px rgba(85,19,6,.32); transform: rotate(2deg); }.portrait-frame img { display: block; width: 100%; aspect-ratio: .79; border-radius: 160px 160px 8px 8px; object-fit: cover; object-position: center; }.portrait-frame figcaption { padding: 14px 4px 2px; color: #fff3d2; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-align: center; }
.details { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(35px, 8vw, 110px); padding: clamp(65px, 9vw, 130px) max(6vw, 24px); background: #fffaf0; }.intro-block h2, .pilgrimage h2, .devotion h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; letter-spacing: -.035em; }.intro-block > p:last-child { max-width: 460px; margin: 25px 0 0; color: var(--muted); line-height: 1.85; }.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }.fact-card { padding: 26px 22px; border: 1px solid #edd9ba; border-radius: 14px; background: var(--paper); }.fact-number { color: var(--gold); font-size: 1.35rem; font-weight: 700; }.fact-card h3 { margin: 25px 0 8px; color: var(--saffron); font-size: 1.08rem; }.fact-card p { margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.75; }
.pilgrimage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px, 10vw, 150px); padding: clamp(65px, 9vw, 130px) max(6vw, 24px); color: #fff4df; background: linear-gradient(130deg, #943217, #be4a20 55%, #db7b31); }.pilgrimage .section-label { color: #ffd27a; }.pilgrimage h2 em { color: #ffda91; }.pilgrimage-copy { align-self: center; max-width: 530px; }.pilgrimage-copy p { margin: 0 0 20px; font-size: 1rem; line-height: 1.9; }.pilgrimage-copy p:last-child { margin-bottom: 0; color: #ffe5bd; }
.devotion { display: grid; grid-template-columns: auto minmax(0, 620px); gap: clamp(28px, 7vw, 85px); justify-content: center; padding: clamp(65px, 9vw, 120px) max(6vw, 24px); background: #f2e3c7; }.music-symbol { align-self: center; color: var(--saffron); font-family: Georgia, serif; font-size: clamp(6rem, 14vw, 11rem); line-height: 1; }.devotion p:not(.section-label) { color: var(--muted); line-height: 1.9; }.resource-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }.resource-links a { padding: 10px 14px; border: 1px solid #d4ae78; border-radius: 999px; color: var(--ink); font-size: .85rem; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease; }.resource-links a:hover, .resource-links a:focus-visible { color: white; background: var(--saffron); outline: none; } footer { padding: 23px; color: #ffe9bf; font-family: "Tiro Devanagari Marathi", serif; text-align: center; background: var(--deep-saffron); }
.digital-presence { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 10vw, 140px); padding: clamp(65px, 9vw, 120px) max(6vw, 24px); background: #fffaf0; }.digital-copy { max-width: 550px; }.digital-copy p:not(.section-label) { color: var(--muted); line-height: 1.9; }.channel-link { display: inline-flex; gap: 9px; margin-top: 12px; padding: 12px 17px; border-radius: 8px; color: #fff9ec; font-size: .9rem; font-weight: 700; text-decoration: none; background: #c63221; transition: transform .2s ease, box-shadow .2s ease; }.channel-link:hover, .channel-link:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(125,41,25,.22); outline: none; }.digital-notes { display: grid; gap: 0; align-content: center; border-top: 1px solid #e7ceb0; }.digital-notes article { display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: center; padding: 20px 0; border-bottom: 1px solid #e7ceb0; }.digital-notes span { color: var(--gold); font-size: 1.15rem; font-weight: 700; }.digital-notes p { margin: 0; color: var(--ink); font-size: .97rem; font-weight: 600; line-height: 1.65; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; } @media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 42px; min-height: auto; padding: 65px 24px 45px; background: linear-gradient(155deg, #ffefd0 0%, #f8d5a4 53%, #c74b21 53%, #9d3119 100%); }.portrait-frame { width: min(78vw, 330px); }.details, .pilgrimage, .digital-presence { grid-template-columns: 1fr; }.facts { grid-template-columns: 1fr; }.devotion { grid-template-columns: 1fr; gap: 10px; }.music-symbol { font-size: 5.5rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { transition-duration: .01ms !important; } }