/* Kalari Academy: laterite red, brass and soot black on palm-leaf cream.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #F6EFE4;
  --surface: #FFFDF8;
  --soft: #EFE3D1;
  --ink: #1B1714;
  --muted: #5F5247;
  --line: #E2D3BD;
  --line-strong: #CDB89A;
  --laterite: #A33B20;
  --brass: #C08A2E;
  --cream: #F6EFE4;
  --brand: #A33B20;
  --brand-hover: #852F18;
  --brand-ink: #FFFFFF;
  --brand-text: #8E3219;
  --eyebrow: #8E3219;
  --head: "Rozha One", Georgia, serif;
  --body: "Hind", system-ui, sans-serif;
  --radius: 8px;
  --radius-lg: 16px;
  --btn-radius: 8px;
  --wrap: 1180px;
  --gap: 20px;
}
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
h1 em, h2 em, .f-statement em { font-style: normal; color: var(--laterite); }
.eyebrow { letter-spacing: .16em; font-weight: 700; }
.btn { font-weight: 700; }
.btn svg { width: 18px; height: 18px; }
.text-link { color: var(--laterite); font-weight: 700; text-underline-offset: 5px; }
.sub-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.tt-class[data-type="kids"] { --type: var(--brass); }
.tt-class[data-type="karate"] { --type: var(--ink); }
.tt-class[data-type="kalari"] { --type: var(--laterite); }
.tt-class[data-type="kick"] { --type: #2B5BA8; }
.tt-class[data-type="self"] { --type: #6B3FA0; }

/* ---------- header ---------- */
.header { background: rgba(246,239,228,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 38px; height: 38px; }
.logo span { display: grid; line-height: 1; }
.logo b { font: 400 1.8rem var(--head); color: var(--laterite); }
.logo small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.nav a { color: var(--muted); font-weight: 600; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--laterite); box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(32px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 360px; } }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1.02; margin: 14px 0 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- sections ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 26px; }
.sec-head h2, .sec-title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; }
.arts { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 960px) { .arts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .arts { grid-template-columns: minmax(0, 1fr); } }
.art-card a { display: grid; gap: 8px; align-content: end; min-height: 200px; padding: 24px; border-radius: var(--radius-lg); text-decoration: none; color: #fff; }
.art-0 a { background: var(--laterite); }
.art-1 a { background: var(--ink); }
.art-2 a { background: #2B5BA8; }
.art-3 a { background: #6B3FA0; }
.art-card b { font: 400 1.8rem var(--head); }
.art-card span { opacity: .9; }
.path-band { background: var(--ink); color: #D9CFC2; }
.path-band .sec-title { color: #fff; }
.path-band .eyebrow { color: var(--brass); }
.path-band .lede { color: #C9BEAF; }
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .split-2 { grid-template-columns: minmax(0, 1fr); } }
.belt-strip { list-style: none; display: grid; gap: 8px; }
.belt-strip li { height: 22px; border-radius: 4px; background: var(--belt); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.belt-strip li:last-child { box-shadow: inset 0 0 0 2px #C08A2E; }

/* ---------- programmes ---------- */
.progs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }
.prog { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--laterite); }
.prog h2 { font-size: 1.8rem; }
.prog p { color: var(--muted); }
.prog .prog-fee { font: 400 2.2rem var(--head); color: var(--ink); }
.prog-fee span { font: 600 .9rem var(--body); color: var(--muted); }
.prog .prog-days { font-weight: 700; color: var(--laterite); }
.prog .btn { justify-self: start; }

/* ---------- batch finder (signature) ---------- */
.finder { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .finder { grid-template-columns: minmax(0, 1fr); } }
.finder-in { display: grid; gap: 20px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--radius-lg); background: var(--soft); }
.finder-in .field > label { display: flex; justify-content: space-between; }
.finder-in output { font: 400 1.6rem var(--head); color: var(--laterite); }
.fo-count { font-weight: 700; margin-bottom: 12px; }
.batches { list-style: none; display: grid; gap: 12px; }
.batch { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 18px; align-items: center; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--laterite); }
@media (max-width: 640px) { .batch { grid-template-columns: 1fr auto; } .batch .btn { grid-column: 1 / -1; justify-self: start; } }
.batch h3 { font-size: 1.5rem; }
.b-art { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--laterite); }
.b-when { color: var(--muted); font-size: .92rem; }
.b-fee { font: 400 1.4rem var(--head); white-space: nowrap; }

/* ---------- belt ladder ---------- */
.ladder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: "belts panel" "belts eta"; gap: clamp(18px, 3vw, 32px); align-items: start; }
@media (max-width: 860px) { .ladder { grid-template-columns: minmax(0, 1fr); grid-template-areas: "belts" "panel" "eta"; } }
.belts { grid-area: belts; list-style: none; display: grid; gap: 8px; }
.belt { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); font: 600 1rem var(--body); text-align: left; cursor: pointer; }
.belt-band { height: 18px; border-radius: 3px; background: var(--belt); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.belt[aria-pressed="true"] { border-color: var(--laterite); box-shadow: inset 4px 0 0 var(--laterite); }
.belt-panel { grid-area: panel; display: grid; gap: 10px; padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); border-top: 10px solid var(--belt, var(--laterite)); }
.belt-panel h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.eta { grid-area: eta; }
.eta-out { font: 400 1.4rem/1.3 var(--head); color: var(--laterite); }
.kalari-band { background: var(--laterite); color: #F6E3D9; }
.kalari-band .sec-title { color: #fff; }
.kalari-band .lede { color: #F1D4C6; }
.stages { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
@media (max-width: 860px) { .stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stages { grid-template-columns: minmax(0, 1fr); } }
.stages li { counter-increment: s; display: grid; gap: 4px; padding: 22px; border-radius: var(--radius-lg); background: rgba(0,0,0,.18); }
.stages li::before { content: counter(s); font: 400 2rem var(--head); color: var(--brass); }
.stages b { font: 400 1.6rem var(--head); color: #fff; }
.stages span { font-weight: 700; color: #F6C27A; }

/* ---------- inner pages ---------- */
.page-head h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
.coach-art { border-radius: var(--radius-lg); }

/* ---------- CTA + footer ---------- */
.cta-band { padding-block: clamp(56px, 8vw, 104px); text-align: center; background: var(--soft); border-top: 1px solid var(--line); }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.cta-band p { margin: 12px auto 0; max-width: 52ch; color: var(--muted); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.footer { background: var(--ink); color: #BFB3A4; --footer-line: rgba(255,255,255,.12); }
.f-statement { font: 400 clamp(2rem, 4.6vw, 3.4rem)/1.1 var(--head); color: #fff; margin-bottom: 48px; }
.f-statement em { color: var(--brass); }
.footer .logo b { color: #fff; }
.footer .logo small { color: #9F9384; }
.footer h2 { color: var(--brass); opacity: 1; }
.f-about { margin: 14px 0 10px; max-width: 34ch; }
.footer .credit a { color: #fff; }