:root{--saffron: #e07b00;--saffron-dark: #b35e00;--maroon: #7a1f12;--gold: #d4a017;--cream: #fff8ec;--cream-2: #fdeedb;--ink: #2b2017;--muted: #6b5a48;--line: #e7d6bd;--max: 1180px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Mukta,system-ui,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65}h1,h2,h3,h4{font-family:Marcellus,Georgia,serif;color:var(--maroon);line-height:1.25;margin:0 0 .6rem}a{color:var(--saffron-dark);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;display:block}.container{max-width:var(--max);margin:0 auto;padding:0 1.1rem}.section{padding:2.6rem 0}.section-title{text-align:center;margin-bottom:1.8rem}.section-title h2{display:inline-block;position:relative;font-size:2rem;padding-bottom:.6rem}.section-title h2:after{content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%);width:70px;height:3px;background:var(--gold)}.btn{display:inline-block;background:var(--saffron);color:#fff;padding:.7rem 1.4rem;border-radius:4px;border:none;font:inherit;font-weight:600;cursor:pointer;transition:background .2s ease}.btn:hover{background:var(--saffron-dark);text-decoration:none}.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.3rem;box-shadow:0 2px 10px #7a1f120f}.grid{display:grid;gap:1.2rem}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}table{width:100%;border-collapse:collapse;background:#fff}th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line)}thead th{background:var(--maroon);color:#fff;font-family:Marcellus,serif;font-weight:400}tbody tr:nth-child(2n){background:var(--cream-2)}.lead{font-size:1.05rem;color:var(--muted)}.page-banner{background:linear-gradient(#7a1f12c7,#7a1f12c7),url(/images/perambur-ayyappan-temple.jpg) center/cover;color:#fff;text-align:center;padding:3rem 1rem}.page-banner h1{color:#fff;font-size:2.4rem;margin:0}.page-banner p{margin:.4rem 0 0;opacity:.9}.notice{background:var(--cream-2);border-left:4px solid var(--gold);padding:.9rem 1.1rem;border-radius:4px}.form-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}.form-field label{font-weight:600}.form-field input,.form-field textarea,.form-field select{padding:.65rem .8rem;border:1px solid var(--line);border-radius:4px;font:inherit}.alert-success{background:#e6f4ea;border:1px solid #a7d7b4;color:#1e5631;padding:.8rem 1rem;border-radius:4px;margin-bottom:1rem}.alert-error{background:#fdecea;border:1px solid #f3b7b1;color:#8b231a;padding:.8rem 1rem;border-radius:4px;margin-bottom:1rem}@media(max-width:900px){.grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}.page-banner h1{font-size:1.8rem}}.feature-list{list-style:none;margin:1.2rem 0 0;padding:0}.feature-list li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--saffron);border-radius:6px;margin-bottom:.8rem;position:relative;padding:.9rem 1.1rem .9rem 2.6rem}.feature-list li:before{content:"\1fa94";position:absolute;left:.9rem;top:.85rem}.about-layout{display:grid;grid-template-columns:300px 1fr;gap:1.8rem;align-items:start}.about-media img{width:100%;border-radius:10px;border:3px solid var(--gold);box-shadow:0 6px 18px #7a1f1226}.about-body>p:first-child{margin-top:0}@media(max-width:820px){.about-layout{grid-template-columns:1fr}.about-media{max-width:320px;margin:0 auto}}html,body{width:100%;max-width:100%;overflow-x:hidden}app-root{display:block;width:100%;max-width:100%;overflow-x:hidden}.btn{width:auto;max-width:100%;line-height:1.2;text-align:center;white-space:normal}img,iframe,video,table{max-width:100%}.page-banner h1{font-size:clamp(1.5rem,5.5vw,2.4rem);word-break:break-word}.section-title h2{font-size:clamp(1.4rem,4.5vw,2rem)}p,li,address,.lead{overflow-wrap:break-word}@media(max-width:1024px){.section{padding:2.1rem 0}.container{padding:0 1rem}}@media(max-width:768px){.section{padding:1.7rem 0}.card{padding:1.1rem}.page-banner{padding:2.2rem 1rem}}@media(max-width:480px){.container{padding:0 .85rem}.btn{padding:.65rem 1.1rem}.lead{font-size:1rem}}@media(hover:none)and (pointer:coarse){a,button,.btn,input,select,textarea{min-height:42px}}
