/* Kolam Master · a Threshold Kolam initiative */
:root{
  --maroon:#7A1E2B; --maroon-deep:#5E1420; --saffron:#E8821E; --marigold:#F4B400;
  --teal:#16807E; --ink:#3A2A20; --mute:#8A7668; --paper:#FFFBF3; --card:#FCEBD6;
  --card-teal:#DCEFEE; --cream:#FFF0D4; --gold:#C79A3E;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Lora',Georgia,serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px}
h1,h2,h3,.brand,.eyebrow,nav a{font-family:'Arvo',Georgia,serif}
img{max-width:100%}
a{color:var(--teal)}

/* ---- nav ---- */
header.site{background:var(--maroon);color:var(--cream)}
.navwrap{max-width:1060px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{color:var(--cream);text-decoration:none;font-size:1.25rem;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:.6rem}
.brand small{display:block;font-family:'Lora',serif;font-style:italic;font-weight:400;font-size:.62rem;color:var(--saffron);letter-spacing:.03em}
.brand .mark{width:30px;height:30px;flex:0 0 auto}
nav{display:flex;gap:1.6rem}
nav a{color:var(--cream);text-decoration:none;font-size:.85rem;letter-spacing:.06em;padding:.35rem 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--saffron)}
@media(max-width:620px){.navwrap{flex-direction:column;height:auto;padding:14px 18px;gap:8px}nav{gap:1.1rem}}

/* ---- hero ---- */
.hero{background:var(--maroon);color:var(--cream);padding:72px 24px 84px}
.hero-inner{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:820px){.hero-inner{grid-template-columns:1fr;text-align:center}.hero-art{margin:0 auto}}
.eyebrow{color:var(--saffron);font-size:.78rem;letter-spacing:.22em;font-weight:700;text-transform:uppercase;margin-bottom:1rem}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.12;margin-bottom:1.1rem}
.tagline{font-style:italic;color:var(--marigold);font-size:clamp(1.05rem,2vw,1.3rem);margin-bottom:1.4rem}
.hero p.lede{color:#F6E7CF;max-width:34rem;margin-bottom:2rem}
@media(max-width:820px){.hero p.lede{margin-left:auto;margin-right:auto}}
.hero-art{width:min(360px,78vw)}

/* self-drawing kolam */
.kolam-dot{fill:var(--saffron);opacity:0;animation:dotin .5s ease forwards}
.kolam-stroke{fill:none;stroke:var(--cream);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.6s ease forwards}
.kolam-dot:nth-child(1){animation-delay:.2s}.kolam-dot:nth-child(2){animation-delay:.35s}
.kolam-dot:nth-child(3){animation-delay:.5s}.kolam-dot:nth-child(4){animation-delay:.65s}
.kolam-dot:nth-child(5){animation-delay:.8s}
.kolam-stroke:nth-of-type(1){animation-delay:1.1s}.kolam-stroke:nth-of-type(2){animation-delay:1.9s}
.kolam-stroke:nth-of-type(3){animation-delay:2.7s}.kolam-stroke:nth-of-type(4){animation-delay:3.5s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dotin{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .kolam-dot{opacity:1;animation:none}
  .kolam-stroke{stroke-dashoffset:0;animation:none}
}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--saffron);color:#fff;text-decoration:none;font-family:'Arvo',serif;
  font-size:.92rem;padding:.8rem 1.6rem;border-radius:999px;letter-spacing:.03em}
.btn:hover{background:#d0700f}
.btn.ghost{background:transparent;border:2px solid var(--saffron);color:var(--saffron)}
.btn.ghost:hover{background:var(--saffron);color:#fff}

/* ---- sections ---- */
section{padding:64px 24px}
.inner{max-width:1060px;margin:0 auto}
.section-head{max-width:640px;margin-bottom:2.4rem}
.section-head h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--maroon);margin:.35rem 0 .8rem}
.section-head p{color:var(--mute)}
.center{text-align:center}.center .section-head{margin-left:auto;margin-right:auto}

/* kolam-dot divider */
.divider{display:flex;justify-content:center;gap:14px;padding:8px 0}
.divider span{width:9px;height:9px;border-radius:50%;background:var(--gold);opacity:.55}
.divider span:nth-child(3){background:var(--saffron);opacity:.9}

/* cards */
.grid{display:grid;gap:22px}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:1fr}.grid.c2{grid-template-columns:1fr}}
@media(max-width:560px){.grid.c4{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:16px;padding:1.6rem 1.5rem;box-shadow:0 3px 14px rgba(58,42,32,.08)}
.card.teal{background:var(--card-teal)}
.card h3{color:var(--maroon);font-size:1.08rem;margin-bottom:.55rem}
.card p{font-size:.95rem;color:var(--ink)}
.card .k{font-family:'Arvo',serif;color:var(--saffron);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.5rem}

/* quote band */
.band{background:var(--maroon);color:var(--cream);text-align:center;padding:64px 24px}
.band blockquote{font-family:'Arvo',serif;font-size:clamp(1.2rem,2.6vw,1.7rem);max-width:44rem;margin:0 auto 1rem;line-height:1.4}
.band .who{color:var(--saffron);font-style:italic;font-size:.95rem}

/* programme page */
.prog{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:860px){.prog{grid-template-columns:1fr}}
.prog .panel{background:#fff;border:1px solid #EBDCC4;border-radius:18px;padding:2rem;box-shadow:0 3px 16px rgba(58,42,32,.06)}
.panel h3{color:var(--maroon);font-size:1.35rem;margin-bottom:.3rem}
.panel .sub{color:var(--saffron);font-style:italic;margin-bottom:1.1rem}
.panel ul{list-style:none;margin:0 0 1.2rem}
.panel li{padding:.42rem 0 .42rem 1.6rem;position:relative;font-size:.97rem}
.panel li::before{content:"";position:absolute;left:.2rem;top:.95rem;width:8px;height:8px;border-radius:50%;background:var(--saffron)}
.panel.teal li::before{background:var(--teal)}
.smallnote{font-size:.85rem;color:var(--mute);font-style:italic}

/* about page */
.values .card p{font-size:.92rem}
.story p{max-width:44rem;margin-bottom:1.1rem}
.pull{border-left:none;background:var(--card);border-radius:14px;padding:1.2rem 1.4rem;max-width:44rem;
  font-style:italic;color:var(--maroon);margin:1.6rem 0}

/* footer */
footer{background:var(--maroon-deep);color:#E8D4BC;padding:44px 24px}
.foot{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
@media(max-width:760px){.foot{grid-template-columns:1fr}}
footer h4{font-family:'Arvo',serif;color:var(--cream);font-size:.95rem;margin-bottom:.7rem}
footer p,footer a,footer li{font-size:.9rem;color:#E8D4BC}
footer a{color:var(--saffron);text-decoration:none}
footer a:hover{text-decoration:underline}
footer ul{list-style:none}
footer li{margin:.3rem 0}
.copy{max-width:1060px;margin:28px auto 0;padding-top:18px;border-top:1px solid rgba(255,240,212,.18);
  font-size:.8rem;color:#C9AE8F;text-align:center}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}