/* Natpukovil website — layout layer on top of tokens.css + components.css.
   Mobile-first; one breakpoint at 900px for the desktop layout. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--surface); }
img { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--ink); }
.nk-on-band a:not(.nk-btn) { color: var(--band-accent); }
[lang="ta"] { font-family: var(--font-tamil); }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--action); color: var(--on-action); padding: 8px 16px; border-radius: 4px; }
.skip-link:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 16px; }
.section { padding: 48px 0; }
.section-sunken { background: var(--surface-sunken); }
.section-surface { background: var(--surface); }
.band { background: var(--band); color: var(--on-band); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center { text-align: center; justify-content: center; }
.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.grid-2m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lede { font-size: 18px; line-height: 30px; color: var(--ink-muted); margin: 0; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 22px; }
.nk-on-band .muted { color: var(--on-band-muted); }
p { margin: 0; }
.prose p + p { margin-top: 16px; }

/* ---- top utility bar ---- */
.topbar { background: var(--near-black); color: var(--on-band-muted); font-size: 14px; line-height: 20px; border-bottom: 1px solid var(--band-rule); display: none; }
.topbar .container { display: flex; align-items: center; gap: 16px; min-height: 40px; }
.topbar a { color: var(--on-band); text-decoration: none; }
.topbar .notice-tag { font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; font-weight: 600; color: var(--band-accent); margin-right: 8px; }
.topbar .right { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.topbar .accent { color: var(--band-accent); font-weight: 600; }

/* ---- header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 50; }
.nk-header { max-width: none; }
.nk-header-menu { min-height: 44px; }
.site-header.open .nk-header-nav { display: flex; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0; background: var(--band); padding: 4px 16px 20px; border-bottom: 1px solid var(--band-rule); max-height: calc(100vh - 64px); overflow-y: auto; }
.site-header.open .nk-header-nav a { padding: 14px 0; border-bottom: 1px solid var(--band-rule); font-size: 17px; }
.site-header .mobile-extra { display: none; }
.site-header.open .mobile-extra { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }

/* ---- hero ---- */
.nk-hero { padding: 64px 16px; }
.page-hero { padding: 32px 0 40px; }
.breadcrumb { font-size: 14px; line-height: 20px; color: var(--on-band-muted); margin-bottom: 16px; }
.breadcrumb a { text-decoration: none; }

/* ---- cards & tiles ---- */
.tile { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
a.tile:hover { border-color: var(--border-strong); }
.tile h3 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.tile .num { font-family: var(--font-display); font-size: 13px; letter-spacing: .16em; font-weight: 600; color: var(--warm-bronze); }
.tile p { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.roman { flex: none; width: 44px; height: 44px; border-radius: 9999px; background: var(--band); color: var(--highlight-gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.value { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); }
.value h3 { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 600; }
.value p { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.nk-on-band .ph { background: rgba(0,0,0,.2); border-color: var(--band-rule); color: var(--on-band-muted); }

/* deity cards */
.deity-card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); color: inherit; text-decoration: none; }
a.deity-card:hover { border-color: var(--antique-gold); }
.deity-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; }
.deity-card .body { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 20px; flex-grow: 1; }
.deity-card h3 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.deity-card .ta { font-size: 15px; line-height: 26px; color: var(--ink-muted); }
.deity-card .more { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--link); }
.shrine-strip a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.shrine-strip .frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--band-accent); }
.shrine-strip img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.shrine-strip .n { font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--on-band); }
.shrine-strip .t { font-size: 14px; line-height: 22px; color: var(--on-band-muted); }

/* horizontal swipe rail (mobile) */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: none; width: 250px; scroll-snap-align: start; }

/* member cards (lingams, mothers, lakshmis) */
.member { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.member img { display: block; width: 100%; object-fit: cover; object-position: 50% 28%; }
.member .body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; }
.member h3 { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.member .sub { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--warm-bronze); }
.member p { font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* deity page */
.deity-hero figure { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--band-accent); box-shadow: var(--shadow-glow); }
.deity-hero figure img { display: block; width: 100%; object-fit: cover; object-position: 50% 28%; }
.thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 28%; border-radius: 8px; border: 1px solid var(--band-rule); }
.mantra { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid var(--band-rule); border-radius: 8px; background: rgba(0,0,0,.18); }
.mantra .label { font-family: var(--font-display); font-size: 12px; line-height: 16px; letter-spacing: .16em; font-weight: 600; color: var(--band-accent); }
.mantra .text { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--highlight-gold); }
.box { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; }
.box h3 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.box ul, .box ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
ol.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 26px; }
blockquote.prayer { margin: 0 auto; max-width: 900px; font-size: 20px; line-height: 34px; font-style: italic; color: var(--on-band); text-align: center; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); font-weight: 600; }
.pager a { text-decoration: none; }

/* steps list (volunteer) */
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.steps4 li { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); }
.band .steps4 li { background: rgba(0,0,0,.18); border-color: var(--band-rule); }
.steps4 .n { width: 36px; height: 36px; border-radius: 9999px; background: var(--action); color: var(--on-action); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 6px; }
.steps4 .t { font-weight: 600; font-size: 17px; }
.steps4 .d { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.band .steps4 .d { color: var(--on-band-muted); }

/* key-value table */
.kv { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; padding: 4px 20px; }
.kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; line-height: 24px; }
.kv > div:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--ink-muted); }
.kv span:last-child { font-weight: 600; }

/* notices strip */
.notices { display: grid; gap: 12px; }
.notices a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--ink); }
.notices .d { font-size: 13px; color: var(--ink-muted); }
.list-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.list-rows > * { display: grid; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { padding: 12px 16px; margin-bottom: -1px; background: none; border: 0; border-bottom: 3px solid transparent; font: 600 16px/24px var(--font-sans); color: var(--ink-muted); cursor: pointer; min-height: 44px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--antique-gold); }
[hidden] { display: none !important; }

/* forms */
form .nk-field select { appearance: auto; }
.form-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-card); padding: 20px; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 24px; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: #8b5e2b; }
.nk-btn { min-height: 44px; }
.btn-block { width: 100%; }

/* donate */
.purpose { display: block; width: 100%; text-align: left; padding: 16px; border-radius: 8px; background: var(--surface-raised); border: 2px solid var(--border); cursor: pointer; font: inherit; color: inherit; }
.purpose[aria-pressed="true"] { border-color: var(--antique-gold); box-shadow: var(--shadow-glow); }
.purpose .n { display: block; font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; }
.purpose .t { display: block; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.purpose .d { display: block; margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.pay-box { display: flex; flex-direction: column; gap: 16px; }
.qr { width: 220px; height: 220px; background: #fff; border-radius: 8px; border: 1px solid var(--border); padding: 8px; }
.qr svg { display: block; width: 100%; height: 100%; }
.upi-id { font-family: ui-monospace, Menlo, monospace; font-size: 15px; padding: 6px 10px; background: var(--surface-sunken); border-radius: 4px; }

/* gallery */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: 8px; }
.gallery figcaption { font-size: 13px; line-height: 20px; color: var(--ink-muted); }

.map { min-height: 240px; }
iframe.map { width: 100%; border: 0; border-radius: 8px; }

/* ---- desktop ---- */
@media (min-width: 900px) {
  .container { padding: 0 24px; }
  .section { padding: 72px 0; }
  .page-hero { padding: 48px 0 64px; }
  .topbar { display: block; }
  .nk-hero { padding: 96px 32px; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  .grid-2-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .grid-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .grid-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
  .grid-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .rail { overflow: visible; margin: 0; padding: 0; display: grid; gap: 20px; }
  .rail > * { width: auto; }
  .rail.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rail.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .notices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .form-card { padding: 32px; }
  blockquote.prayer { font-size: 22px; line-height: 38px; }
  .thumbs { gap: 16px; }
}

/* the full nav needs ~1180px; below that use the menu button */
@media (max-width: 1180px) {
  .nk-header { padding: 0 16px; height: 64px; position: relative; }
  .nk-header-nav, .nk-header > .nk-btn { display: none; }
  .nk-header-menu { display: inline-block; }
  .site-header.open .nk-header-nav { display: flex; }
}
@media (min-width: 1181px) { .site-header .mobile-extra { display: none !important; } }
.site-header.open .mobile-extra .nk-btn { display: inline-flex; }
.site-header.open .mobile-extra .row .nk-btn { flex: 1 1 140px; }
/* trustees */
.trustee { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); text-align: center; }
.trustee img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; border-bottom: 3px solid var(--antique-gold); }
.trustee .body { padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 2px; }
.trustee h3 { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; }
.trustee p { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--warm-bronze); }
@media (min-width: 900px) { .trustee h3 { font-size: 20px; line-height: 28px; } .trustee p { font-size: 15px; } }
.nk-footer-legal a { color: inherit; } .nk-footer-legal a:hover { color: var(--band-accent); }
.policy { max-width: 760px; } .policy h2 { font-family: var(--font-display); font-size: 22px; line-height: 30px; margin: 24px 0 0; } .policy p, .policy li { font-size: 16px; line-height: 27px; } .policy ul { padding-left: 20px; margin: 0; }
.social-btn { gap: 8px; } .social-btn svg { flex: none; }
/* footer review */
.nk-footer-hours { margin: var(--space-2) 0 0; font-size: 14px; line-height: 22px; color: var(--on-band-muted); }
.nk-footer-hours a { font-size: 14px; font-weight: 600; }
.nk-footer-legal > span:first-child { flex: 1 1 auto; }
@media (min-width: 761px) and (max-width: 1100px) {
  .nk-footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-10, 40px); }
  .nk-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nk-footer-brand { flex-direction: column; }
  .nk-footer-brand img { width: 64px; height: 64px; }
  .nk-footer-grid > div:nth-child(2) ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
  .nk-footer-legal { flex-direction: column; gap: var(--space-2); }
}
@media (min-width: 761px) and (max-width: 1100px) { .nk-footer-grid > div:nth-child(2) ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-4); } }
/* light call-to-action card — keeps the closing section distinct from the dark footer */
.cta-card { align-items: center; max-width: 880px; margin: 0 auto; padding: 48px 40px; background: var(--surface-raised); border: 1px solid var(--border); border-top: 4px solid var(--warm-bronze); border-radius: 16px; box-shadow: var(--shadow-md, 0 8px 24px rgba(43,27,18,.08)); }
@media (max-width: 760px) { .cta-card { padding: 32px 20px; } }