/* Shared styles for every page. Full amber ground, logo directly on amber, deep indigo for text and buttons. */
:root{
  color-scheme:light;
  --bg:#fbd983; --surface:#fde4a6; --deep:#f6c964;
  --fg:#1a1608; --muted:#4a3b12; --line:#dcab3c;
  --ink:#14264f; --ink-fg:#fdf3dc; --accent:#7a3200;
  --tbc-bg:#fff1cc; --tbc-fg:#5c2a00;
  --display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --gurmukhi:"Noto Sans Gurmukhi","Gurmukhi MN",sans-serif;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.6 var(--body)}
img{max-width:100%}
.wrap{max-width:68rem;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0}
.eyebrow{font:600 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* Navigation bar, pinned on every page */
.stick{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:2px solid var(--ink)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-block:8px}
.brand{display:flex;align-items:center;gap:12px;font:700 1.1rem/1.1 var(--display);text-decoration:none;color:var(--ink)}
.brand img{height:44px;width:auto;display:block}
nav{display:flex;flex-wrap:wrap;gap:6px 20px;font:600 .95rem var(--display)}
nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{border-color:var(--ink);outline:none}
nav a[aria-current="page"]{border-color:var(--ink)}

/* Home hero */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:32px 56px;align-items:center;padding-block:40px 64px}
.hero .gur{font:700 clamp(1.3rem,3.2vw,1.9rem)/1.3 var(--gurmukhi);color:var(--accent);margin:0 0 18px}
.hero h1{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.hero p.lead{font-size:1.2rem;max-width:34rem;margin:22px 0 28px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;font:600 1rem var(--display);padding:12px 22px;border-radius:4px;text-decoration:none;border:2px solid var(--ink)}
.btn.primary{background:var(--ink);color:var(--ink-fg)}
.btn.ghost{color:var(--ink)}
.btn:focus-visible{outline:3px solid var(--fg);outline-offset:2px}
.emblem{display:grid;gap:22px;justify-items:center}
.emblem img{width:min(100%,340px);height:auto;display:block}
.welcome-note{border-left:3px solid var(--ink);padding-left:20px;font-size:1rem;justify-self:stretch}
.welcome-note b{display:block;font:600 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.band{height:10px;background:var(--ink)}

/* Inner page heading */
.pagehead{padding-block:48px 8px}
.pagehead h1{font-size:clamp(2.2rem,5.5vw,3.6rem);letter-spacing:-.02em;color:var(--ink);margin-top:10px}
.pagehead p{max-width:40rem;margin:14px 0 0;color:var(--muted);font-size:1.15rem}

/* Sections */
section{padding-block:56px}
section.alt{background:var(--surface);border-block:1px solid var(--line)}
.head{display:grid;gap:10px;margin-bottom:32px;max-width:40rem}
.head h2{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.01em;color:var(--ink)}
.head p{margin:0;color:var(--muted)}

.times{width:100%;border-collapse:collapse;font-size:1rem}
.times th,.times td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.times th{font:600 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.times td:first-child{font:600 1.05rem var(--display);white-space:nowrap}
.scroll{overflow-x:auto}
.visit{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.visit > *{min-width:0}
.box{border:1px solid var(--line);background:var(--surface);padding:24px}
.box h3{font-size:1.2rem;margin-bottom:10px;color:var(--ink)}
.box p{margin:0 0 8px}
.tbc{display:inline-block;background:var(--tbc-bg);color:var(--tbc-fg);border:1px dashed var(--accent);padding:1px 8px;border-radius:3px;font:500 .85em var(--display)}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--ink)}
.pillars > div{padding:24px 24px 24px 0;min-width:0}
.pillars .gur{font:700 1.4rem var(--gurmukhi);color:var(--accent)}
.pillars h3{font-size:1.25rem;margin:6px 0 8px;color:var(--ink)}
.pillars p{margin:0;color:var(--muted)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.cols > *{min-width:0}
dl.guide{margin:0;display:grid;gap:18px}
dl.guide dt{font:600 1.05rem var(--display);color:var(--ink)}
dl.guide dd{margin:2px 0 0;color:var(--muted)}

.events{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.events article{border:1px solid var(--line);background:var(--bg);padding:22px;min-width:0}
.events time{font:600 .8rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.events h3{font-size:1.2rem;margin:8px 0;color:var(--ink)}
.events p{margin:0;color:var(--muted);font-size:1rem}

/* Home teaser links */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{display:block;text-decoration:none;border:2px solid var(--ink);padding:24px;background:var(--bg);min-width:0}
.tile h3{font-size:1.4rem;color:var(--ink);margin:8px 0}
.tile p{margin:0 0 14px;color:var(--muted);font-size:1rem}
.tile span.go{font:600 .95rem var(--display);color:var(--ink);border-bottom:2px solid var(--ink)}
.tile:hover,.tile:focus-visible{background:var(--surface);outline:none}

.contactgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contactgrid > *{min-width:0}

footer{background:var(--deep);border-top:10px solid var(--ink);padding-block:36px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
footer p{margin:0;font-size:1rem}
footer .social{display:flex;gap:20px;font:600 1rem var(--display)}
footer .social a{color:var(--ink);padding:2px 0;border-bottom:2px solid var(--ink);text-decoration:none}
footer .social a:hover,footer .social a:focus-visible{background:#14264f14;outline:none}
footer .fine{font-size:.95rem;color:var(--muted)}

@media (max-width:820px){
  .hero,.visit,.cols{grid-template-columns:1fr}
  .pillars,.events,.tiles,.contactgrid{grid-template-columns:1fr}
  .pillars > div{padding-right:0;border-bottom:1px solid var(--line)}
  section{padding-block:40px}
  .hero{padding-block:24px 44px}
  .emblem img{width:min(100%,240px)}
  .brand img{height:38px}
}
@media (prefers-reduced-motion:no-preference){.btn,nav a,.tile{transition:background .15s,border-color .15s}.btn.primary:hover{background:#1f3a78}.btn.ghost:hover{background:#14264f14}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.ico{width:1.3em;height:1.3em;vertical-align:-.3em;margin-right:.4em;flex:none}
footer .social a{display:inline-flex;align-items:center}