/* =====================================================================
   Kent Medway Tamil Language & Cultural Centre
   style.css

   Nothing in here needs editing to change a fee, a date or a word.
   All of that lives in assets/js/content.js.
   ===================================================================== */

/* ===================== tokens =====================
   Palette taken from the things themselves, not from a brand deck:
   olai   = dried palm leaf, the surface Tamil was written on
   ink    = iron gall sepia of an old suvadi
   kumkum = the red of temple kumkumam
   manjal = turmeric
   maru   = the centre's seal purple, kept for authority marks only
==================================================== */
:root{
  --ink:#2B1608;
  --ink-2:#5A3F26;
  --olai:#EFE0BE;
  --olai-2:#E6D2A6;
  --paper:#FBF3E0;
  --kumkum:#8C1D2A;
  --manjal:#D3960F;
  /* Turmeric on the purple donation panels only reaches 4.0 to 1 at a
     heading size, so text there uses this lighter mix. Everywhere else
     --manjal is unchanged. */
  --manjal-lite:#E8B23A;
  --gold:#B8892B;
  /* --gold is a border and rule colour. As small uppercase text on the
     pale backgrounds it only reaches 2.4 to 1, so label text uses this
     darker brass instead, which clears 4.5 to 1 on olai, paper, the
     tinted sections and the leaf table. */
  --gold-ink:#7A5510;
  --maru:#43126E;
  --line:rgba(43,22,8,.16);
  --shadow:0 16px 38px -22px rgba(43,22,8,.6);
  --lift:0 24px 46px -26px rgba(43,22,8,.7);

  --display:"Noto Serif Tamil","Latha","Nirmala UI",Georgia,serif;
  --body:"Catamaran","Noto Sans Tamil","Nirmala UI",system-ui,sans-serif;
  --quote:"Kavivanar","Noto Serif Tamil",cursive;

  --wrap:1140px;
  --navh:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;color:var(--ink);background:var(--olai);
  font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  /* Tamil compounds are long single words with no break opportunity. On a
     narrow phone one of them will happily push the whole page sideways
     unless it is allowed to break. break-word alone is not enough: it
     wraps the line but still reserves the width of the longest word when
     the browser measures the box. anywhere counts in that measurement too,
     which is what actually stops the page widening. */
  overflow-wrap:break-word;
  overflow-wrap:anywhere;
}
/* palm leaf fibre: fine horizontal grain, the way an olai actually reads */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(43,22,8,.05) 0 1px,transparent 1px 7px);
}
body>*{position:relative;z-index:1}
html[lang="ta"] body{font-size:17.5px;line-height:1.9}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.2;margin:0 0 .5em;letter-spacing:-.005em}
h2{font-size:clamp(28px,4vw,40px)}
h3{font-size:20px}
p{margin:0 0 1em}
::selection{background:var(--kumkum);color:#FDF6E7}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.eyebrow{
  font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kumkum);margin:0 0 12px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:6px;flex:none;
  background:radial-gradient(circle,var(--kumkum) 2px,transparent 2.2px) 0 0/9px 6px repeat-x}
html[lang="ta"] .eyebrow{letter-spacing:.04em;font-size:13.5px;text-transform:none}
:focus-visible{outline:3px solid var(--kumkum);outline-offset:3px;border-radius:6px}
.hide{display:none !important}
[hidden]{display:none !important}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Anchors land below the sticky bar rather than under it */
section,div[id],main{scroll-margin-top:calc(var(--navh) + 16px)}

/* A grid item will not shrink below its longest word unless it is told it
   may. Without this a single long Tamil compound widens the whole page on
   a narrow phone. */
.memgrid>*,.donbox>*,.enrolgrid>*,.split>*,.muthamizh>*,.events>*,.gal>*,
.words>*,.cols>*,.facts>*,.hero .wrap>*,.board .wrap>*,.nav .wrap>*{min-width:0}

/* keyboard first stop on the page */
.skip{
  position:absolute;left:14px;top:-60px;z-index:100;background:var(--kumkum);color:#FDF6E7;
  font-weight:800;padding:11px 18px;border-radius:0 0 4px 4px;text-decoration:none;transition:top .18s;
}
.skip:focus{top:0}

/* ===================== pre-launch strip ===================== */
.demobar{background:var(--ink);color:#F0DFBE;font-size:13px;padding:8px 0}
.demobar .wrap{display:flex;gap:14px;align-items:center;justify-content:center;text-align:center}
.demobar button{background:none;border:1px solid rgba(255,255,255,.3);color:inherit;border-radius:999px;
  padding:2px 10px;font:inherit;cursor:pointer;flex:none}
.demobar button:hover{background:rgba(255,255,255,.12)}

/* ===================== nav ===================== */
.nav{position:sticky;top:0;z-index:50;background:rgba(239,224,190,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
/* The bar is allowed to be wider than the 1140px content column. The Tamil
   menu labels are long words and will not fit in 1140px, and a nav that
   spills out of its own container is worse than one that is a little wide. */
.nav .wrap{display:flex;align-items:center;gap:18px;height:var(--navh);
  width:min(1400px,100% - 32px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none}
.brand img{width:50px;height:50px}
.brand b{font-family:var(--display);font-size:15px;line-height:1.15;display:block;max-width:200px}
.brand span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--kumkum);font-weight:800}
html[lang="ta"] .brand span{letter-spacing:.02em;text-transform:none;font-size:12.5px}
.menu{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.menu a{text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;padding:6px 0;position:relative;
  white-space:nowrap}
/* Tamil labels are single long words, so the horizontal bar is tightened
   rather than allowed to overflow */
html[lang="ta"] .menu{gap:14px}
html[lang="ta"] .menu a{font-size:14px}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:5px;
  background:radial-gradient(circle,var(--manjal) 2px,transparent 2.2px) 0 50%/8px 5px repeat-x;transition:right .3s}
.menu a:hover::after,.menu a:focus-visible::after,.menu a.here::after{right:0}
.menu a.here{color:var(--kumkum)}
.tools{display:flex;gap:10px;align-items:center;flex:none}
.langtoggle{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper)}
.langtoggle button{border:0;background:none;font:inherit;font-weight:800;font-size:13px;padding:7px 13px;
  cursor:pointer;color:var(--ink)}
.langtoggle button:hover{background:rgba(67,18,110,.1)}
.langtoggle button[aria-pressed="true"]{background:var(--maru);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--kumkum);color:#FDF6E7;
  text-decoration:none;font-weight:800;font-size:15px;padding:12px 22px;border-radius:4px;border:0;cursor:pointer;
  font-family:var(--body);transition:transform .18s,background .18s;box-shadow:0 3px 0 rgba(43,22,8,.35)}
.btn:hover{background:#A32433;transform:translateY(-1px)}
.btn.gold{background:var(--manjal);color:var(--ink)}
.btn.gold:hover{background:#E9AB27}
.btn.ghost{background:none;color:var(--kumkum);border:1.5px solid var(--kumkum);box-shadow:none}
.btn.ghost:hover{background:rgba(140,29,42,.08)}
.burger{display:none;border:1px solid var(--line);background:var(--paper);border-radius:6px;width:42px;height:42px;
  cursor:pointer;font-size:19px}

/* ===================== kolam ===================== */
.kolam{display:block;width:100%;height:100%}
.kolam .dot{fill:currentColor;opacity:.55}
.kolam .loop{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.kolam.draw .loop{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 2.4s ease forwards}
.kolam.draw .dot{opacity:0;animation:pop .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .kolam.draw .loop{stroke-dashoffset:0;animation:none}
  .kolam.draw .dot{opacity:.55;animation:none}
}
.divider{display:flex;align-items:center;gap:18px;color:var(--gold);padding:8px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.divider>span{width:74px;height:74px;flex:none;display:block}

/* ===================== hero ===================== */
.hero{position:relative;overflow:hidden;padding:70px 0 46px}
.hero .backkolam{position:absolute;top:-90px;right:-140px;width:620px;height:620px;color:var(--gold);opacity:.16;
  pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
.hero h1{font-size:clamp(34px,5.2vw,58px);margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--kumkum);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:7px;
  background:radial-gradient(circle,var(--manjal) 2.6px,transparent 2.8px) 0 50%/11px 7px repeat-x}
.hero p.lead{font-size:19px;max-width:52ch;color:var(--ink-2)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.facts b{display:block;font-family:var(--display);font-size:26px;color:var(--kumkum)}
.facts span{font-size:13px;font-weight:600;color:var(--ink-2)}
.sealwrap{display:grid;place-items:center;position:relative}
.sealwrap::before{content:"";position:absolute;width:min(440px,96%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(211,150,15,.28),transparent 68%)}
.sealwrap img{width:min(390px,86%);height:auto;position:relative;
  filter:drop-shadow(0 22px 34px rgba(43,22,8,.35))}
.sealkolam{position:absolute;width:min(480px,105%);color:var(--kumkum);opacity:.28}

/* kural ribbons */
.kural{background:var(--kumkum);color:#F6E3C8;padding:34px 0;text-align:center;position:relative;overflow:hidden}
.kural::before,.kural::after{content:"";position:absolute;top:0;bottom:0;width:120px;opacity:.22;
  background:radial-gradient(circle,#F6E3C8 2px,transparent 2.2px) 0 0/16px 16px}
.kural::before{left:0}.kural::after{right:0}
.kural .line{font-family:var(--quote);font-size:clamp(21px,2.7vw,30px);line-height:1.7;margin:0 auto;max-width:34ch}
.kural .tr{font-size:14.5px;opacity:.9;margin:10px auto 0;max-width:52ch}
.kural .src{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.78;margin-top:8px}
html[lang="ta"] .kural .src{letter-spacing:.05em;text-transform:none;font-size:13.5px}

/* ===================== letter board ===================== */
.board{background:var(--ink);color:#F3E3C4;padding:60px 0;position:relative;overflow:hidden}
.board::after{content:"அ ஆ இ ஈ உ ஊ எ ஏ ஐ ஒ ஓ ஔ";position:absolute;inset:0;font-family:var(--display);
  font-size:145px;color:rgba(243,227,196,.035);white-space:nowrap;display:flex;align-items:center;pointer-events:none}
.board .wrap{position:relative;display:grid;grid-template-columns:300px 1fr;gap:42px;align-items:center}
.slate{background:linear-gradient(160deg,#3D2210,#1E0F05);border:2px solid rgba(184,137,43,.45);
  padding:28px 22px;text-align:center;min-height:290px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;box-shadow:inset 0 0 0 6px rgba(184,137,43,.12)}
.slate .glyph{font-family:var(--display);font-size:110px;line-height:1;color:var(--manjal)}
.slate .rom{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:#D2B183;font-weight:800}
.slate .word{font-family:var(--display);font-size:30px;color:#F3E3C4;margin-top:14px}
.slate .gloss{font-size:14px;color:#D2B183}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.tile{min-width:0}
.tile{aspect-ratio:1;border:1px solid rgba(184,137,43,.35);background:rgba(255,255,255,.04);color:#F3E3C4;
  font-family:var(--display);font-size:30px;border-radius:3px;cursor:pointer;
  transition:background .18s,transform .18s,color .18s}
.tile:hover{background:rgba(211,150,15,.2);transform:translateY(-2px)}
.tile[aria-pressed="true"]{background:var(--manjal);color:var(--ink);border-color:var(--manjal)}
.board h2{color:#F3E3C4;font-size:27px;margin-bottom:6px}
.board .hint{font-size:14.5px;color:#D2B183;margin-bottom:18px}

/* ===================== sections ===================== */
section{padding:76px 0}
section.notop{padding-top:0}
section.tinted{background:rgba(43,22,8,.04);border-block:1px solid var(--line)}
.sec-head{max-width:62ch;margin-bottom:38px}
.muthamizh{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mcard{background:var(--paper);border:1px solid var(--line);padding:0 0 28px;text-align:center;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.mcard .cap{background:var(--maru);color:#F3E3C4;padding:14px 10px 12px;font-family:var(--display);font-size:15px;
  letter-spacing:.04em}
.mcard .big{font-family:var(--display);font-size:46px;color:var(--kumkum);margin:22px 0 2px;line-height:1}
.mcard .rom{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);font-weight:800}
.mcard p{font-size:15px;color:var(--ink-2);margin:14px 22px 0}
.mcard .kolam{position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;color:var(--manjal);opacity:.16}

/* three words from the seal */
.words{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--paper);
  box-shadow:var(--shadow)}
.word-cell{padding:34px 26px;border-right:1px solid var(--line)}
.word-cell:last-child{border-right:0}
.word-cell .tam{font-family:var(--display);font-size:34px;color:var(--maru);margin-bottom:2px}
.word-cell .lat{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:800;
  margin-bottom:14px}
.word-cell .ku{font-family:var(--quote);font-size:18px;color:var(--kumkum);line-height:1.6;margin-bottom:8px}
.word-cell p{font-size:14.5px;color:var(--ink-2);margin:0}

/* ===================== classes as an olai ===================== */
/* The table is wider than a phone, so it scrolls sideways inside the leaf.
   The two soft edges tell the reader that, and slide out of the way as the
   table reaches each end: the pale covers are pinned to the content and the
   shadows are pinned to the frame. */
.suvadi{background:
  linear-gradient(to right,#F3E5C2 45%,rgba(243,229,194,0)) left center/26px 100% no-repeat local,
  linear-gradient(to left,#E9D5A5 45%,rgba(233,213,165,0)) right center/26px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(43,22,8,.15),rgba(43,22,8,0)) left center/13px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(43,22,8,.15),rgba(43,22,8,0)) right center/13px 100% no-repeat scroll,
  repeating-linear-gradient(0deg,rgba(43,22,8,.055) 0 1px,transparent 1px 9px),
  linear-gradient(180deg,#F3E5C2,#E8D3A2);
  border:1px solid var(--gold);box-shadow:var(--shadow);overflow-x:auto}
.suvadi::-webkit-scrollbar{height:8px}
.suvadi::-webkit-scrollbar-thumb{background:var(--gold);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(43,22,8,.14);vertical-align:top}
thead th{background:var(--maru);color:#F3E3C4;font-weight:800;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase}
html[lang="ta"] thead th{letter-spacing:.02em;font-size:14px;text-transform:none}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(211,150,15,.14)}
td b{font-family:var(--display);font-size:16.5px}
.num{font-family:var(--display);font-size:22px;color:var(--kumkum);width:1%;padding-right:0}
.pill{display:inline-block;background:rgba(67,18,110,.1);color:var(--maru);font-size:12px;font-weight:800;
  padding:3px 10px;border-radius:3px}
.note{font-size:14.5px;color:var(--ink-2);margin-top:14px}

/* ===================== exams ===================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.infocard{background:var(--paper);border:1px solid var(--line);padding:32px;box-shadow:var(--shadow)}
.infocard dl{margin:0}
.infocard dt{font-family:var(--display);font-size:15px;color:var(--kumkum);margin-top:18px}
.infocard dt:first-of-type{margin-top:0}
.infocard dd{margin:2px 0 0;font-size:15.5px;color:var(--ink-2)}
.infocard a{color:var(--kumkum);text-decoration-thickness:1px;text-underline-offset:3px}

/* ===================== events ===================== */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.event{background:var(--paper);border:1px solid var(--line);padding:24px;border-top:5px solid var(--manjal);
  position:relative;transition:transform .22s ease,box-shadow .22s ease}
.event:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.event .month{font-family:var(--display);font-size:20px;color:var(--kumkum);line-height:1.2}
.event .greg{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:800}
.event h3{margin:12px 0 6px;font-size:19px}
.event p{font-size:14.5px;color:var(--ink-2);margin:0}

/* ===================== gallery =====================
   A tile is a coloured panel until a photograph is added to the entry in
   content.js, at which point the photograph fills the tile and the caption
   sits on a dark wash so it stays readable over any picture. */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid rgba(43,22,8,.2);display:flex;align-items:flex-end;
  transition:transform .25s ease,box-shadow .25s ease}
.gal figure:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.gal figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(251,243,224,.42) 1.6px,transparent 1.8px) 0 0/18px 18px}
.gal figure.has-photo::after{opacity:0}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:relative;z-index:2;width:100%;padding:12px 14px;color:#FBF3E0;
  font-size:14px;font-weight:700;line-height:1.35;
  background:linear-gradient(0deg,rgba(28,14,5,.85),rgba(28,14,5,0));
  text-shadow:0 2px 10px rgba(0,0,0,.55)}
.g1{background:linear-gradient(140deg,#8C1D2A,#43126E)}
.g2{background:linear-gradient(140deg,#43126E,#2B1608)}
.g3{background:linear-gradient(140deg,#D3960F,#8C1D2A)}
.g4{background:linear-gradient(140deg,#1E5A4E,#43126E)}
.g5{background:linear-gradient(140deg,#8C1D2A,#D3960F)}
.g6{background:linear-gradient(140deg,#2B1608,#8C1D2A)}
.g7{background:linear-gradient(140deg,#B8892B,#2B1608)}
.g8{background:linear-gradient(140deg,#43126E,#8C1D2A)}
@media (prefers-reduced-motion:reduce){
  .gal figure,.gal img,.mcard,.event{transition:none}
  .gal figure:hover img{transform:none}
}

/* ===================== membership ===================== */
.memgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:start}
.memcard{background:var(--paper);border:1px solid var(--gold);box-shadow:var(--shadow);position:relative;
  overflow:hidden;padding:34px 28px}
.memcard .memkolam{position:absolute;right:-60px;top:-60px;width:220px;height:220px;color:var(--kumkum);opacity:.14}
.memcard-in{position:relative}
.memcard .price{font-family:var(--display);font-size:64px;line-height:1;color:var(--kumkum)}
.memcard .per{font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:22px}
.benefits{list-style:none;margin:0 0 20px;padding:0}
.benefits li{position:relative;padding:0 0 12px 26px;font-size:15.5px;color:var(--ink-2)}
.benefits li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle,var(--manjal) 3px,transparent 3.2px),var(--kumkum);opacity:.85}
.tiersh{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);
  border-top:1px solid var(--line);padding-top:16px;margin:0 0 8px}
html[lang="ta"] .tiersh{letter-spacing:.02em;text-transform:none;font-size:14px}
.tierlist{list-style:none;margin:0 0 14px;padding:0}
.tierlist li{font-family:var(--display);font-size:15.5px;color:var(--maru);padding:5px 0;
  border-bottom:1px dotted var(--line)}
.tierlist li:last-child{border-bottom:0}
.memcard .tiers{font-size:13.5px;color:var(--ink-2);margin:0}
.formh{margin-bottom:14px}

/* ===================== donate ===================== */
.donate{background:linear-gradient(165deg,#4E1780,#43126E 55%,#300B52);color:#F0E2FA;position:relative;
  overflow:hidden}
.donate .dkolam{position:absolute;right:-110px;bottom:-110px;width:460px;height:460px;color:var(--manjal);
  opacity:.15;pointer-events:none}
.donate .wrap{position:relative}
.donate h2{color:#fff}
.donate .sec-head p{color:#DCC9F0}
.donate .eyebrow{color:var(--manjal)}
.donate .eyebrow::before{background:radial-gradient(circle,var(--manjal) 2px,transparent 2.2px) 0 0/9px 6px repeat-x}
.donbox{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.donpanel{background:rgba(255,255,255,.06);border:1px solid rgba(211,150,15,.35);padding:28px}
.dlabel{font-family:var(--body);font-size:12.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#DCC9F0;margin:0 0 10px}
html[lang="ta"] .dlabel{letter-spacing:0;text-transform:none;font-size:14.5px}
.amounts{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.amt{font-family:var(--display);font-size:19px;padding:11px 20px;border:1px solid rgba(211,150,15,.45);
  background:rgba(255,255,255,.05);color:#F0E2FA;cursor:pointer;border-radius:3px;transition:background .16s}
.amt:hover{background:rgba(211,150,15,.2)}
.amt[aria-pressed="true"]{background:var(--manjal);color:var(--ink);border-color:var(--manjal)}
.amt.custom{width:118px;font-family:var(--body);font-size:16px;text-align:center}
.freq{display:flex;border:1px solid rgba(211,150,15,.45);width:max-content;margin-bottom:20px;border-radius:3px;
  overflow:hidden}
.freq button{border:0;background:none;color:#F0E2FA;font:inherit;font-weight:800;font-size:14.5px;
  padding:10px 20px;cursor:pointer}
.freq button:hover{background:rgba(211,150,15,.18)}
.freq button[aria-pressed="true"]{background:var(--kumkum);color:#FDF6E7}
.dresult{background:rgba(211,150,15,.14);border-left:4px solid var(--manjal);padding:16px 18px;margin-top:18px}
.dresult .big{font-family:var(--display);font-size:26px;color:var(--manjal);line-height:1.3}
.dresult .sub{font-size:14px;color:#DCC9F0;margin-top:4px}
.methods{list-style:none;margin:0;padding:0}
.methods li{border-bottom:1px solid rgba(211,150,15,.28);padding:15px 0}
.methods li:last-child{border-bottom:0}
.methods b{font-family:var(--display);font-size:17px;color:#fff;display:block}
.methods span{font-size:14.5px;color:#DCC9F0}

/* the only form control left on the page is the Gift Aid tick */
.field{display:flex;flex-direction:column;gap:6px}
.check{flex-direction:row;align-items:flex-start;gap:10px}
.check input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--manjal)}
.check label{font-size:15px;font-weight:400;color:#EDDFC4}
.donate .check label{color:#F0E2FA}

/* ===================== bank details ===================== */
.bank{border:1px dashed var(--gold);background:rgba(211,150,15,.12);padding:18px 20px;margin-top:18px}
.bank h4{font-family:var(--display);font-size:16px;margin:0 0 10px;color:var(--kumkum)}
.bank dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.bank dt{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  align-self:center}
html[lang="ta"] .bank dt{letter-spacing:0;text-transform:none;font-size:13.5px}
.bank dd{margin:0;font-family:var(--display);font-size:17px;color:var(--ink)}
.bank dd.refrule{font-family:var(--body);font-size:15px;font-weight:700;color:var(--kumkum)}
.bank p.bnote{font-size:13.5px;color:var(--ink-2);margin:12px 0 0}
.donate .bank{border-color:rgba(211,150,15,.55);background:rgba(255,255,255,.06)}
.donate .bank h4{color:var(--manjal-lite)}
.donate .bank dt{color:#DCC9F0}
.donate .bank dd{color:#fff}
.donate .bank dd.refrule{color:var(--manjal-lite)}
.donate .bank p.bnote{color:#DCC9F0}
@media (max-width:520px){.bank dl{grid-template-columns:1fr}.bank dt{margin-top:6px}}

/* ===================== enrol ===================== */
.enrol{background:linear-gradient(170deg,#3A1D0C,#2B1608 60%,#1D0F05);color:#F3E3C4;position:relative;
  overflow:hidden}
.enrol .cornerkolam{position:absolute;left:-90px;bottom:-90px;width:420px;height:420px;color:var(--manjal);
  opacity:.13;pointer-events:none}
.enrol .wrap{position:relative}
.enrol h2{color:#F3E3C4}
.enrol .sec-head p{color:#D2B183}
.enrol .eyebrow{color:var(--manjal)}
.enrol .eyebrow::before{background:radial-gradient(circle,var(--manjal) 2px,transparent 2.2px) 0 0/9px 6px repeat-x}
.enrolgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}
.asidecard{background:rgba(255,255,255,.05);border:1px solid rgba(184,137,43,.35);padding:28px 26px}
.asidecard h3{color:#F3E3C4;font-size:19px;margin-bottom:14px}
.asidecard h4{color:var(--manjal);font-size:13px;font-family:var(--body);font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin:24px 0 10px}
html[lang="ta"] .asidecard h4{letter-spacing:.02em;text-transform:none;font-size:15px;font-family:var(--display)}
.checklist,.artslist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding:0 0 11px 26px;font-size:15px;color:#E4D2AF}
.checklist li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle,var(--manjal) 2.6px,transparent 2.8px),rgba(211,150,15,.35)}
.artslist li{font-family:var(--display);font-size:16px;color:#F3E3C4;padding:6px 0;
  border-bottom:1px dotted rgba(184,137,43,.3)}
.artslist li:last-child{border-bottom:0}

/* ===================== google form embeds =====================
   The iframe is a Google page inside ours. Nothing inside it can be styled
   from here: the colours, the fonts and the buttons are all Google's, and
   the browser will not let us reach in. Set the form's own theme colour to
   #8C1D2A and its background to #EFE0BE in Google Forms, and upload the
   seal as the form header image, and the join is as quiet as it can be.

   The height is fixed in content.js because the real height cannot be read
   from this side of a cross-origin frame. If a form scrolls inside itself
   on a phone, raise that number. ============================================ */
/* The Register button, shown until the visitor asks for the form. It sits in
   the same dashed panel the "not open yet" notice uses, so both sections
   read as the same kind of thing whether or not their form exists yet. */
.formopen{margin:0;padding:46px 30px;display:flex;justify-content:center;
  border:1px dashed var(--gold);background:rgba(211,150,15,.08)}
.formopen .btn{font-size:16.5px;padding:16px 38px}
.formopen .btn::after{content:"";width:9px;height:9px;flex:none;border-right:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}

.formembed{background:var(--paper);border:1px solid var(--gold);box-shadow:var(--shadow);
  padding:14px;overflow:hidden;animation:formin .45s ease}
@keyframes formin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.formembed{animation:none}}
.formembed:focus{outline:none}
.formembed iframe{display:block;width:100%;border:0;background:var(--paper);height:var(--formh,1200px)}
/* The height in content.js is measured on a full size screen, where the box
   is about 640px wide. A narrower box makes the questions wrap onto more
   lines, but Google caps the form's own column so it grows far less than
   you would expect: measured at 304px, 424px and 520px wide, this form ran
   only about 6% taller than at 640px. One modest step covers it. */
@media (max-width:660px){.formembed iframe{height:calc(var(--formh,1200px) * 1.08)}}
.formembed.isempty{padding:0;border-style:dashed;background:rgba(251,243,224,.06);box-shadow:none}
.formsoon{padding:44px 30px;text-align:center}
.formsoon h4{font-family:var(--display);font-size:21px;color:var(--kumkum);margin-bottom:8px}
.formsoon p{font-size:15.5px;color:var(--ink-2);margin:0 auto 8px;max-width:46ch}
.formsoon a{color:var(--kumkum);font-weight:700}
.enrol .formsoon h4{color:var(--manjal)}
.enrol .formsoon p{color:#D2B183}
.enrol .formsoon a{color:var(--manjal)}
.formnote{font-size:13.5px;color:var(--ink-2);margin:12px 0 0;display:flex;gap:8px;flex-wrap:wrap;
  align-items:baseline}
.formnote a{color:var(--kumkum);font-weight:700;white-space:nowrap}
.formnote.onink{color:#D2B183}
.formnote.onink a{color:var(--manjal)}

/* ===================== faq ===================== */
.faq{max-width:820px}
details{background:var(--paper);border:1px solid var(--line);padding:0 20px;margin-bottom:12px}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer;padding:18px 0;font-weight:700;font-family:var(--display);font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--kumkum)}
details p{margin:0 0 18px;font-size:15.5px;color:var(--ink-2)}
summary::before{content:"+";color:var(--kumkum);font-size:24px;order:2;flex:none;line-height:1}
details[open] summary::before{content:"−"}

/* ===================== contact + footer ===================== */
.map{border:1px solid var(--line);min-height:340px;display:grid;place-items:center;color:#FBF3E0;text-align:center;
  padding:26px;background:linear-gradient(150deg,#43126E,#8C1D2A);position:relative;overflow:hidden}
.map .kolam{position:absolute;width:300px;height:300px;color:#FBF3E0;opacity:.18}
.map>div{position:relative;z-index:2}
.map .mapt{font-family:var(--display);font-size:22px;margin-bottom:6px}
.map .mapp{font-size:14.5px;margin:0;opacity:.92}
footer{background:var(--ink);color:#D2B183;padding:56px 0 30px;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:32px}
footer h3{color:#F3E3C4;font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--body);
  font-weight:800}
html[lang="ta"] footer h3{letter-spacing:0;text-transform:none;font-size:16.5px;font-family:var(--display)}
footer a{color:#D2B183;text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:var(--manjal)}
footer .footbrand{margin-bottom:14px}
footer .footbrand img{width:56px;height:56px}
footer .footbrand b{color:#F3E3C4}
footer .blurb{max-width:34ch}
footer .base{border-top:1px solid rgba(243,227,196,.16);padding-top:20px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:13px}
footer .vazhga{font-family:var(--quote);font-size:22px;color:var(--manjal);margin:0 0 16px}

/* ===================== back to top ===================== */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--gold);background:var(--paper);color:var(--kumkum);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,background .18s;
}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--manjal);color:var(--ink)}
.totop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.btn,.tile{transition:none}}

/* ===================== responsive ===================== */
@media (max-width:980px){
  .hero .wrap,.board .wrap,.split{grid-template-columns:1fr}
  .sealwrap{order:-1}
  .sealwrap img{width:min(280px,68%)}
  .sealkolam{width:min(360px,90%)}
  .muthamizh,.events{grid-template-columns:1fr 1fr}
  .words{grid-template-columns:1fr}
  .word-cell{border-right:0;border-bottom:1px solid var(--line)}
  .word-cell:last-child{border-bottom:0}
  .gal{grid-template-columns:repeat(3,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
  .hero .backkolam{width:420px;height:420px;right:-160px}
  .memgrid,.donbox,.enrolgrid{grid-template-columns:1fr}
}
/* The horizontal menu needs about 1010px in English and 1180px in Tamil, so
   it folds into the burger well before a phone width. Anything narrower and
   the bar would push the whole page sideways. */
@media (max-width:1240px){
  .menu{position:fixed;inset:var(--navh) 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:flex-start;gap:0;padding:12px 20px 22px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);max-height:calc(100dvh - var(--navh));overflow-y:auto}
  .menu:not(.open){display:none}
  .menu a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);font-size:16px}
  html[lang="ta"] .menu a{font-size:16.5px}
  .burger{display:block}
}
@media (max-width:720px){
  .nav .btn{display:none}
  .muthamizh,.events{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile{font-size:26px}
  section{padding:58px 0}
  .brand b{max-width:150px;font-size:13.5px}
  .formembed{padding:8px}
  .totop{right:14px;bottom:14px;width:44px;height:44px}
}
/* Small phones. The name, the language buttons and the burger have to share
   about 280px, so the tagline goes and the seal shrinks. */
@media (max-width:430px){
  .nav .wrap{gap:10px;width:min(1400px,100% - 24px)}
  .brand{flex:1 1 auto;min-width:0;gap:9px}
  .brand img{width:42px;height:42px}
  .brand b{max-width:none;font-size:12.5px}
  .brand>span>span{display:none}
  .langtoggle button{padding:7px 9px;font-size:12px}
  html[lang="ta"] .langtoggle button{font-size:12.5px}
  .burger{width:38px;height:38px;font-size:17px}
  .memcard .price{font-size:52px}
  .slate .glyph{font-size:88px}
  .wrap{width:min(1140px,100% - 28px)}
  .memcard,.donpanel,.asidecard,.infocard{padding:24px 18px}
  .word-cell{padding:26px 20px}
}

/* ===================== print =====================
   A parent may well print the timetable and the bank details. */
@media print{
  body{background:#fff;color:#000;font-size:12pt}
  body::before,.demobar,.nav,.totop,.skip,.backkolam,.sealkolam,.dkolam,.cornerkolam,
  .memkolam,.divider,.board::after,.formembed,.formnote,.map{display:none !important}
  .rv{opacity:1;transform:none}
  section{padding:14pt 0;break-inside:avoid}
  .kural,.board,.donate,.enrol,footer{background:#fff !important;color:#000 !important}
  .kural *,.board *,.donate *,.enrol *,footer *{color:#000 !important}
  .suvadi,.memcard,.infocard,.bank{border:1pt solid #000;box-shadow:none}
  thead th{background:#eee !important;color:#000 !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}