/* ============================================================
   TAL — tal.katha.org  ·  Shared stylesheet
   Design philosophy: "A serious idea wearing a joyful face."
   Palette + personality lifted from the TAL book interiors:
   pastel colour-blocks, rounded friendly display, star doodles,
   mascot guides, the island-map motif as the spine.
   ============================================================ */

:root{
  /* Book-derived pastels (colour-block backgrounds) */
  --lavender:#e9e4f5;
  --mint:#d8 efe6; --mint:#d8efe6;
  --peach:#ffe4d4;
  --butter:#fff2c9;
  --sky:#dbecfb;
  --blush:#fbe0ec;

  /* Ink + primary display colours (the multicolour headline system) */
  --ink:#2a2740;
  --blue:#2f6fe0;
  --orange:#f07a3c;
  --green:#3cae7e;
  --pink:#e8639b;
  --gold:#f2b134;

  --paper:#fffdf9;
  --card:#ffffff;
  --line:#eae6dd;
  --muted:#6d6a7c;

  --radius:22px;
  --radius-sm:14px;
  --shadow:0 10px 30px rgba(42,39,64,.08);
  --shadow-lg:0 20px 50px rgba(42,39,64,.14);
  --maxw:1120px;

  --display:"Baloo 2","Quicksand",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;}}

body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.01em;}

a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.section{padding:74px 0;}
.section.tight{padding:48px 0;}

/* ---------- Star doodle accent ---------- */
.star{color:var(--gold);font-size:.9em;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:600;
  padding:13px 26px;border-radius:999px;border:2.5px solid var(--ink);
  background:var(--ink);color:#fff;cursor:pointer;font-size:1rem;
  transition:transform .15s ease, box-shadow .15s ease;text-decoration:none;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none;}
.btn.blue{background:var(--blue);border-color:var(--blue);}
.btn.orange{background:var(--orange);border-color:var(--orange);}
.btn.green{background:var(--green);border-color:var(--green);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{background:#fff;}
.btn.sm{padding:9px 18px;font-size:.9rem;}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,253,249,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;max-width:var(--maxw);margin:0 auto;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink);}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--orange),var(--pink));display:grid;place-items:center;color:#fff;font-size:1.1rem;}
.nav-links{display:flex;gap:22px;align-items:center;}
.nav-links a{color:var(--ink);font-weight:600;font-size:.97rem;}
.nav-links a:hover{color:var(--blue);text-decoration:none;}
.nav-cta{display:flex;gap:10px;align-items:center;}
.menu-btn{display:none;background:none;border:2px solid var(--ink);border-radius:10px;padding:6px 10px;font-size:1.1rem;cursor:pointer;}

@media(max-width:900px){
  .nav-links,.nav-cta .btn.ghost{display:none;}
  .menu-btn{display:block;}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 500px at 15% -10%,var(--lavender),transparent 60%),
  radial-gradient(900px 500px at 100% 0%,var(--sky),transparent 55%);}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:70px 0 60px;}
.hero h1{font-size:clamp(2.4rem,5vw,4rem);}
.hero h1 .c1{color:var(--blue);} .hero h1 .c2{color:var(--orange);} .hero h1 .c3{color:var(--green);}
.hero .lede{font-size:1.2rem;color:var(--muted);margin:20px 0 28px;max-width:32ch;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero-art{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;position:relative;overflow:hidden;}
@media(max-width:820px){.hero-inner{grid-template-columns:1fr;}}

/* ---------- Placeholder image blocks ---------- */
.ph{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:
  repeating-linear-gradient(45deg,rgba(0,0,0,.02) 0 12px,rgba(0,0,0,.045) 12px 24px);
  display:grid;place-items:center;text-align:center;color:var(--ink);}
.ph .ph-tag{
  background:rgba(255,255,255,.86);
  border-radius:10px;
  /* padding:8px 12px; */
  font-size:.78rem;
  font-weight:700;
  font-family:var(--display);
  /* max-width:88%; */
  line-height:1.3;}
.ph.lav{background-color:var(--lavender);} .ph.mint{background-color:var(--mint);}
.ph.peach{background-color:var(--peach);} .ph.butter{background-color:var(--butter);}
.ph.sky{background-color:var(--sky);} .ph.blush{background-color:var(--blush);}

/* ---------- Credibility strip ---------- */
.creds{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:26px 0;}
.cred{background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:16px 22px;text-align:center;min-width:150px;flex:1 1 150px;max-width:210px;}
.cred b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--orange);}
.cred span{font-size:.85rem;color:var(--muted);}

/* ---------- Section heading ---------- */
.eyebrow{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--pink);}
.section h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:8px 0 14px;}
.section .sub{color:var(--muted);font-size:1.1rem;max-width:60ch;}

/* ---------- Two-cluster cards ---------- */
.clusters{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;}
.cluster{border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);}
.cluster.a{background:var(--butter);} .cluster.b{background:var(--sky);}
.cluster h3{font-size:1.5rem;margin-bottom:6px;}
.cluster .ages{font-weight:700;color:var(--orange);}
.cluster.b .ages{color:var(--blue);}
.cluster ul{list-style:none;margin:14px 0;}
.cluster li{padding:5px 0 5px 24px;position:relative;}
.cluster li::before{content:"\2605";position:absolute;left:0;color:var(--gold);}
@media(max-width:760px){.clusters{grid-template-columns:1fr;}}

/* ---------- Journey ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;}
.rung{background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);overflow:hidden;transition:transform .15s ease;}
.rung:hover{transform:translateY(-4px);}
.rung .cap{height:96px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.6rem;color:#fff;}
.rung .body{padding:14px 16px;}
.rung .lvl{font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.rung h4{font-size:1.1rem;margin:2px 0 4px;}
.rung .age{font-size:.85rem;color:var(--muted);}
@media(max-width:860px){.ladder{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.ladder{grid-template-columns:1fr;}}

/* ---------- Audience router ---------- */
.aud{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:30px;}
.aud a{background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:22px 16px;text-align:center;color:var(--ink);font-family:var(--display);font-weight:700;transition:transform .15s ease;}
.aud a:hover{transform:translateY(-4px);text-decoration:none;}
.aud .ic{font-size:2rem;display:block;margin-bottom:8px;}
@media(max-width:900px){.aud{grid-template-columns:repeat(2,1fr);}}

/* ---------- Lead magnet band ---------- */
.magnet{background:linear-gradient(135deg,var(--lavender),var(--blush));border-radius:var(--radius);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;box-shadow:var(--shadow);}
.magnet h2{margin-bottom:10px;}
.leadform{background:var(--card);border-radius:var(--radius-sm);padding:24px;box-shadow:var(--shadow);}
.leadform label{display:block;font-weight:700;font-size:.85rem;margin:10px 0 4px;}
.leadform input,.leadform select{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;font-family:var(--body);font-size:1rem;}
.leadform input:focus,.leadform select:focus{outline:none;border-color:var(--blue);}
.leadform .btn{width:100%;margin-top:16px;}
.formnote{font-size:.78rem;color:var(--muted);margin-top:10px;text-align:center;}
@media(max-width:760px){.magnet{grid-template-columns:1fr;padding:28px;}}

/* ---------- Sutra ribbon ---------- */
.sutra{background:var(--ink);color:#fff;padding:30px 0;text-align:center;}
.sutra p{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.7rem);}
.sutra small{display:block;color:#b9b5cf;margin-top:8px;font-family:var(--body);font-size:.9rem;}

/* ---------- Resource grid ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
.rcard{background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;}
.rcard .thumb{aspect-ratio:16/10;}
.rcard .rbody{padding:18px 18px 22px;flex:1;display:flex;flex-direction:column;}
.rcard h4{font-size:1.2rem;margin-bottom:6px;}
.rcard p{color:var(--muted);font-size:.92rem;flex:1;}
.rcard .tagrow{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
.chip{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--mint);color:#1f7a56;}
.chip.free{background:var(--butter);color:#946b00;}
@media(max-width:860px){.rgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.rgrid{grid-template-columns:1fr;}}

/* ---------- Audience on-ramp cards (For You) ---------- */
.ramps{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px;}
.ramp{border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);}
.ramp:nth-child(1){background:var(--sky);}
.ramp:nth-child(2){background:var(--peach);}
.ramp:nth-child(3){background:var(--lavender);}
.ramp:nth-child(4){background:var(--mint);}
.ramp:nth-child(5){background:var(--butter);}
.ramp h3{font-size:1.4rem;margin-bottom:8px;}
.ramp p{margin-bottom:14px;}
@media(max-width:760px){.ramps{grid-template-columns:1fr;}}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.split.rev .txt{order:2;}
@media(max-width:760px){.split{grid-template-columns:1fr;} .split.rev .txt{order:0;}}

/* ---------- Comparison table ---------- */
.cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:24px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);}
.cmp th,.cmp td{padding:14px 18px;text-align:left;background:var(--card);border-bottom:1px solid var(--line);}
.cmp th{font-family:var(--display);background:var(--ink);color:#fff;}
.cmp tr td:first-child{color:var(--muted);}
.cmp tr td:last-child{font-weight:700;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#d9d6ea;padding:56px 0 30px;margin-top:20px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;}
.site-footer h5{font-family:var(--display);color:#fff;font-size:1rem;margin-bottom:12px;}
.site-footer a{color:#d9d6ea;display:block;padding:3px 0;font-size:.92rem;}
.site-footer a:hover{color:#fff;}
.foot-brand{font-family:var(--display);font-weight:800;color:#fff;font-size:1.3rem;margin-bottom:10px;}
.foot-bottom{border-top:1px solid #413d5c;margin-top:34px;padding-top:20px;font-size:.82rem;color:#a5a1bd;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}

/* ---------- Page hero (interior) ---------- */
.phero{padding:56px 0 30px;background:radial-gradient(900px 400px at 20% -20%,var(--lavender),transparent 60%);}
.phero .eyebrow{color:var(--orange);}
.phero h1{font-size:clamp(2rem,4.5vw,3.2rem);margin:8px 0 12px;}
.phero p{color:var(--muted);font-size:1.15rem;max-width:60ch;}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:14px;}
.crumbs a{color:var(--muted);}

/* utilities */
.center{text-align:center;}
.mt{margin-top:24px;} .mt-lg{margin-top:40px;}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}

/* ============ BOOK PAGES ============ */
.book-hero{padding:44px 0 24px;}
.book-hero-inner{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start;}
.book-cover{border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:3/4;position:sticky;top:90px;}
.book-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:6px 0 6px;}
.book-hero .qline{font-family:var(--display);font-size:1.3rem;color:var(--blue);margin:4px 0 12px;}
.book-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;}
.book-meta .chip{background:var(--card);box-shadow:var(--shadow);}
.book-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
@media(max-width:720px){.book-hero-inner{grid-template-columns:1fr;} .book-cover{position:static;max-width:260px;}}

.flip{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;}
.stories{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-top:18px;}
.stories .trail{grid-column:1/-1;font-family:var(--display);font-weight:700;color:var(--pink);text-transform:uppercase;font-size:.82rem;letter-spacing:.06em;margin-top:14px;}
.story{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);}
.story .num{font-family:var(--display);font-weight:800;color:var(--gold);min-width:26px;}
.story .who{color:var(--muted);font-size:.86rem;}
@media(max-width:600px){.stories{grid-template-columns:1fr;}}

.moves{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
.move{background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:16px 18px;border-left:5px solid var(--blue);}
.move .mn{font-family:var(--display);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.move h4{font-size:1.05rem;margin:2px 0 4px;}
.move .src{color:var(--muted);font-size:.85rem;}
@media(max-width:600px){.moves{grid-template-columns:1fr;}}

.book-nav{display:flex;justify-content:space-between;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);}
.book-nav a{font-family:var(--display);font-weight:700;}