/* ============================================================
   children.howtomuslim.org: a cozy, illustrated parenting guide

   Header and footer come from /assets/css/site-chrome.css, the same
   file the guide site uses. This file owns only .k-* classes and
   --k-* variables, so nothing can collide with the chrome's htm-/wtn-
   classes or its brand tokens. Do NOT redefine --gold here.

   Palette: HTM's brand family shifted warmer. Gold becomes honey,
   Olive Tree stays as sage, Charcoal Blue becomes cocoa for text, and
   terracotta + blush are added for warmth. Fonts are the brand's own:
   Montserrat Alternates for headings, Manrope for body.
   ============================================================ */
:root{
  --k-paper:#FBF1DE;   --k-paper2:#F5E5C9;  --k-card:#FFF9EE;   --k-white:#FFFDF8;
  --k-ink:#3F2E29;     --k-ink2:#6F5949;    --k-ink3:#9C8570;
  --k-line:#E8D5B4;    --k-line2:#D6BB90;
  --k-honey:#E9A53D;   --k-honey-d:#A9701A; --k-butter:#F6DFA3; --k-butter-l:#FFF3D0;
  --k-terra:#C8694A;   --k-terra-d:#96442C; --k-terra-l:#F3CDB7; --k-terra-ll:#FBE6D9;
  --k-blush:#EFC4BA;   --k-blush-l:#FBE7E1;
  --k-sage:#A6B085;    --k-sage-d:#56603A;  --k-mist:#DCE3CB;    --k-mist-l:#EEF1E1;
  --k-dusk:#5F7B86;    --k-dusk-l:#D6E3E4;  --k-dusk-ll:#EAF1F1;
  --k-head:"Montserrat Alternates",Manrope,sans-serif;
  --k-body:Manrope,system-ui,sans-serif;
  --k-ar:"Amiri","Noto Naskh Arabic","Scheherazade New","Traditional Arabic","Geeza Pro",serif;
  --k-blob:26px 20px 28px 22px / 22px 28px 20px 26px;
  --k-shadow:0 12px 28px rgba(120,80,40,.09);
  --k-tabh:0px;
}
html{scroll-behavior:smooth;scroll-padding-top:86px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Chrome sets body{background:var(--off-white)}; this file loads later. */
body{
  background:var(--k-paper);color:var(--k-ink);
  font-family:var(--k-body);line-height:1.62;margin:0;
  -webkit-font-smoothing:antialiased;
}
/* paper grain: a fixed speckle layer behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .3  0 0 0 0 .18  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.k-svgdefs{position:absolute;width:0;height:0;overflow:hidden}
/* Icon sprite classes. Flat selectors on purpose: a descendant selector such as
   ".k-svgdefs .k-st" does not match inside a <use> shadow tree, so the icons render unstyled. */
.k-st{stroke:var(--ic-line,#3F2E29);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.k-nf{fill:none}
.k-bl{fill:var(--ic-blob,#F3CDB7);stroke:none}
a{color:var(--k-terra-d)}
:focus-visible{outline:3px solid var(--k-honey);outline-offset:3px;border-radius:6px}

/* U+FDFA renders at inconsistent sizes across fonts. Hard-clip it. */
.sw{display:inline-block;font-family:"Noto Naskh Arabic","Amiri",serif;font-size:.74em;line-height:1;max-height:1.15em;overflow:hidden;vertical-align:baseline}
.k-ar{font-family:var(--k-ar);direction:rtl;unicode-bidi:isolate;line-height:2.15;font-size:1.55rem;color:var(--k-ink)}

.k-wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.k-narrow{max-width:760px;margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.k-btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  font-family:var(--k-head);font-weight:700;font-size:.95rem;
  padding:13px 22px;border-radius:999px;border:2px solid var(--k-ink);
  background:var(--k-terra);color:#FFF9EE;box-shadow:3px 4px 0 var(--k-ink);
  transition:transform .15s ease,box-shadow .15s ease;
}
.k-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--k-ink)}
.k-btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--k-ink)}
.k-btn--ghost{background:var(--k-card);color:var(--k-ink)}
.k-btn svg{width:18px;height:18px}

/* ============================================================
   HERO
   ============================================================ */
.k-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 70% at 8% 12%,#F8D7B2 0,transparent 60%),
    radial-gradient(45% 55% at 92% 8%,#F6DFA3 0,transparent 62%),
    radial-gradient(50% 60% at 78% 100%,#DCE3CB 0,transparent 62%),
    var(--k-paper);
}
.k-hero-inner{
  max-width:1120px;margin:0 auto;padding:54px 22px 84px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;
}
.k-eyebrow{
  margin:0 0 14px;font-family:var(--k-head);font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--k-terra-d);
  display:flex;align-items:center;gap:10px;
}
.k-eyebrow::before{content:"";width:26px;height:2px;background:var(--k-terra);border-radius:2px}
.k-hero h1{
  margin:0 0 18px;font-family:var(--k-head);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.35rem);line-height:1.08;letter-spacing:-.01em;color:var(--k-ink);
}
.k-hero h1 mark{background:none;color:inherit;position:relative;white-space:nowrap;z-index:0}
.k-hero h1 mark::after{
  content:"";position:absolute;left:-4px;right:-4px;bottom:.08em;height:.42em;z-index:-1;
  background:var(--k-butter);border-radius:40% 60% 45% 55% / 60% 50% 60% 40%;transform:rotate(-1.2deg);
}
.k-hero-lede{margin:0 0 24px;font-size:1.08rem;color:var(--k-ink2);max-width:540px}
.k-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.k-hero-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.k-hero-facts li{
  font-size:.86rem;font-weight:600;color:var(--k-ink2);
  padding:7px 14px;border:1.5px dashed var(--k-line2);border-radius:999px;background:rgba(255,249,238,.7);
}
.k-hero-facts b{color:var(--k-terra-d);font-family:var(--k-head)}
.k-hero-art{position:relative}
.k-hero-art svg{display:block;width:100%;height:auto;max-height:470px}
.k-hero-edge{position:absolute;left:0;right:0;bottom:-1px;height:44px;display:block;width:100%}

/* ---------- Section scaffolding ---------- */
.k-section{position:relative;padding:58px 0 64px}
.k-section--oat{background:var(--k-paper2)}
.k-section--oat::before,.k-section--oat::after{
  content:"";position:absolute;left:0;right:0;height:22px;background:var(--k-paper2);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'><path d='M0 22V11Q16 -2 32 11T64 11V22Z' fill='black'/></svg>") repeat-x bottom/64px 22px;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'><path d='M0 22V11Q16 -2 32 11T64 11V22Z' fill='black'/></svg>") repeat-x bottom/64px 22px;
}
.k-section--oat::before{top:-21px}
.k-section--oat::after{bottom:-21px;transform:scaleY(-1)}
.k-sec-head{text-align:center;max-width:720px;margin:0 auto 34px}
.k-sec-head .k-eyebrow{justify-content:center}
.k-sec-head .k-eyebrow::after{content:"";width:26px;height:2px;background:var(--k-terra);border-radius:2px}
.k-h2{
  margin:0 0 12px;font-family:var(--k-head);font-weight:700;font-size:clamp(1.65rem,3.2vw,2.3rem);
  line-height:1.15;color:var(--k-ink);
}
.k-h2 span{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 7 C30 1 55 11 85 6 S150 2 198 7' fill='none' stroke='%23E9A53D' stroke-width='3.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:0 100%;background-size:100% .34em;padding-bottom:.26em;
}
.k-sec-head p{margin:0;color:var(--k-ink2);font-size:1.03rem}

.k-h3{
  margin:38px 0 14px;font-family:var(--k-head);font-weight:700;font-size:1.28rem;line-height:1.25;color:var(--k-ink);
  display:flex;align-items:center;gap:10px;
}
.k-h3::before{
  content:"";flex:none;width:22px;height:22px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c1 4 4 6 8 7-4 1-7 3-8 8-1-5-4-7-8-8 4-1 7-3 8-7Z' fill='%23E9A53D' stroke='%233F2E29' stroke-width='1.4' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.k-h3:first-child{margin-top:4px}
.k-h4{margin:0 0 6px;font-family:var(--k-head);font-weight:700;font-size:1.02rem;color:var(--k-ink);line-height:1.3}
.k-p{margin:0 0 14px;color:var(--k-ink)}
.k-muted{color:var(--k-ink2)}
.k-small{font-size:.88rem;color:var(--k-ink2)}
.k-lead{font-size:1.06rem;color:var(--k-ink2);margin:0 0 18px}

/* ============================================================
   CARDS, GRIDS, LISTS
   ============================================================ */
.k-grid{display:grid;gap:22px;margin:18px 0}
.k-grid-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.k-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.k-grid-4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.k-card{
  --c:var(--k-card);--cs:var(--k-butter);
  position:relative;background:var(--c);
  border:1.5px solid rgba(63,46,41,.7);border-radius:var(--k-blob);
  padding:22px 22px 20px;box-shadow:4px 5px 0 var(--cs);
}
.k-card>:last-child{margin-bottom:0}
.k-card .k-h4{margin-bottom:8px}
.k-c-honey{--c:#FFF3D6;--cs:#F0CC7E}
.k-c-terra{--c:#FBE6D9;--cs:#E9AF92}
.k-c-sage{--c:#EEF1E1;--cs:#C3CDA6}
.k-c-blush{--c:#FBE7E1;--cs:#EBB8AD}
.k-c-dusk{--c:#EAF1F1;--cs:#B7CBD0}
.k-c-white{--c:#FFFDF8;--cs:#EEDDB9}
.k-ico{
  --ic-blob:var(--k-terra-l);--ic-line:var(--k-ink);
  display:inline-flex;width:56px;height:56px;margin:0 0 10px;
}
.k-ico svg{width:100%;height:100%;overflow:visible}
.k-c-honey .k-ico{--ic-blob:#F6DFA3}.k-c-sage .k-ico{--ic-blob:#C9D3AE}.k-c-blush .k-ico{--ic-blob:#F3B9AD}.k-c-dusk .k-ico{--ic-blob:#BCD2D6}.k-c-terra .k-ico{--ic-blob:#F1B99B}

ul.k-list,ul.k-ticks,ul.k-cross{list-style:none;margin:0 0 14px;padding:0}
.k-list li,.k-ticks li,.k-cross li{position:relative;padding:3px 0 3px 26px}
.k-list li::before{
  content:"";position:absolute;left:2px;top:.72em;width:9px;height:9px;background:var(--k-honey);
  border-radius:50% 45% 55% 50%;box-shadow:0 0 0 2px var(--k-butter-l);
}
.k-ticks li::before,.k-cross li::before{
  content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;
  background:center/contain no-repeat;
}
.k-ticks li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.5' fill='%23DCE3CB' stroke='%2356603A' stroke-width='1.6'/><path d='M7 12.5l3.2 3.2L17 8.6' fill='none' stroke='%2356603A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.k-cross li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.5' fill='%23F3CDB7' stroke='%2396442C' stroke-width='1.6'/><path d='M8 8l8 8M16 8l-8 8' fill='none' stroke='%2396442C' stroke-width='2.2' stroke-linecap='round'/></svg>")}
.k-cols-2{columns:2 260px;column-gap:26px}
.k-cols-2>li{break-inside:avoid}

.k-tag{
  display:inline-block;font-family:var(--k-head);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;background:var(--k-butter);color:var(--k-ink);border:1.5px solid rgba(63,46,41,.55);
  vertical-align:middle;
}
.k-tag--sage{background:var(--k-mist)}.k-tag--terra{background:var(--k-terra-l)}.k-tag--dusk{background:var(--k-dusk-l)}.k-tag--blush{background:var(--k-blush)}

/* stat chips */
.k-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:16px;margin:20px 0}
.k-stat{
  background:var(--k-card);border:1.5px dashed var(--k-line2);border-radius:20px;padding:16px 18px;text-align:center;
}
.k-stat b{display:block;font-family:var(--k-head);font-size:1.7rem;line-height:1.1;color:var(--k-terra-d);margin-bottom:4px}
.k-stat span{font-size:.88rem;color:var(--k-ink2);display:block}

/* ============================================================
   CALLOUTS
   ============================================================ */
.k-note{
  --n:var(--k-butter-l);--nb:var(--k-honey);--ni:var(--k-honey-d);
  position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  background:var(--n);border:1.5px solid rgba(63,46,41,.55);border-left:6px solid var(--nb);
  border-radius:8px 22px 22px 8px;padding:16px 20px 16px 16px;margin:18px 0;
}
.k-note>svg{width:44px;height:44px;--ic-blob:var(--nb);--ic-line:var(--k-ink)}
.k-note-t{display:block;font-family:var(--k-head);font-weight:700;font-size:.98rem;margin:0 0 4px;color:var(--k-ink)}
.k-note p{margin:0 0 8px}.k-note>div>:last-child{margin-bottom:0}
.k-note ul{margin-bottom:8px}
.k-note--doc{--n:var(--k-terra-ll);--nb:var(--k-terra)}
.k-note--doc .k-note-t{color:var(--k-terra-d)}
.k-note--islam{--n:var(--k-mist-l);--nb:var(--k-sage)}
.k-note--islam .k-note-t{color:var(--k-sage-d)}
.k-note--update{--n:var(--k-dusk-ll);--nb:var(--k-dusk)}
.k-note--update .k-note-t{color:#3C5661}
.k-note--book{--n:var(--k-white);--nb:var(--k-line2)}

/* ============================================================
   TABLES
   ============================================================ */
.k-table-wrap{
  margin:18px 0 22px;background:var(--k-card);border:1.5px solid rgba(63,46,41,.7);
  border-radius:22px;overflow:hidden;box-shadow:5px 6px 0 var(--k-butter);
}
.k-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.k-table{width:100%;border-collapse:collapse;font-size:.94rem}
.k-table caption{
  caption-side:top;text-align:left;padding:14px 18px 6px;font-family:var(--k-head);font-weight:700;font-size:1rem;color:var(--k-ink);
}
.k-table th{
  text-align:left;font-family:var(--k-head);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--k-butter);color:var(--k-ink);padding:12px 16px;border-bottom:1.5px solid rgba(63,46,41,.55);white-space:nowrap;
}
.k-table td{padding:12px 16px;vertical-align:top;border-bottom:1px dashed var(--k-line2)}
.k-table tbody tr:last-child td{border-bottom:0}
.k-table tbody tr:nth-child(even) td{background:rgba(245,229,201,.38)}
.k-table td:first-child,.k-table tbody th{font-weight:800;color:var(--k-ink)}
.k-table tbody th{background:transparent;text-transform:none;letter-spacing:0;font-size:.94rem;font-family:var(--k-body);white-space:normal;border-bottom:1px dashed var(--k-line2)}
.k-table td>:last-child{margin-bottom:0}
.k-table ul{margin:0;padding-left:1.1em}
.k-table a{font-weight:700}
.k-table--sage th{background:var(--k-mist)}
.k-table--terra th{background:var(--k-terra-l)}
.k-table--dusk th{background:var(--k-dusk-l)}
.k-table-note{padding:10px 18px 14px;font-size:.84rem;color:var(--k-ink2);border-top:1px dashed var(--k-line2);margin:0}
@media (max-width:760px){
  .k-table.k-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .k-table.k-stack,.k-table.k-stack tbody,.k-table.k-stack tr,.k-table.k-stack td,.k-table.k-stack tbody th{display:block;width:100%}
  .k-table.k-stack td,.k-table.k-stack tbody th,.k-table.k-stack tr{box-sizing:border-box}
  .k-table.k-stack caption{display:block;width:100%;box-sizing:border-box}
  .k-table.k-stack tr{padding:12px 4px;border-bottom:2px solid var(--k-line2)}
  .k-table.k-stack tbody tr:last-child{border-bottom:0}
  .k-table.k-stack tbody tr:nth-child(even) td{background:transparent}
  .k-table.k-stack td,.k-table.k-stack tbody th{border:0;padding:5px 14px}
  .k-table.k-stack tbody th,.k-table.k-stack td:first-child{font-family:var(--k-head);font-size:1.02rem;color:var(--k-terra-d);padding-bottom:2px}
  .k-table.k-stack td[data-label]{display:grid;grid-template-columns:104px 1fr;gap:10px}
  .k-table.k-stack td[data-label]::before{content:attr(data-label);font-weight:800;color:var(--k-terra-d);font-size:.84rem}
}

/* ============================================================
   STEPS, TIMELINE, DO/DON'T, ACCORDION
   ============================================================ */
.k-steps{list-style:none;counter-reset:step;margin:18px 0;padding:0;display:grid;gap:14px}
.k-steps>li{
  counter-increment:step;position:relative;padding:14px 18px 14px 74px;min-height:66px;
  background:var(--k-card);border:1.5px solid rgba(63,46,41,.55);border-radius:22px 18px 24px 16px / 18px 24px 16px 22px;
}
.k-steps>li::before{
  content:counter(step);position:absolute;left:14px;top:12px;width:44px;height:44px;
  display:grid;place-items:center;font-family:var(--k-head);font-weight:800;font-size:1.2rem;color:var(--k-ink);
  background:var(--k-honey);border:1.5px solid var(--k-ink);border-radius:50% 46% 52% 48%;box-shadow:2px 3px 0 var(--k-ink);
}
.k-steps>li:nth-child(3n+2)::before{background:var(--k-terra-l)}
.k-steps>li:nth-child(3n+3)::before{background:var(--k-mist)}
.k-steps b{display:block;font-family:var(--k-head);margin-bottom:2px}
.k-steps p{margin:0}
.k-steps--tight>li{min-height:0;padding-top:12px;padding-bottom:12px}

.k-tl{list-style:none;margin:20px 0;padding:0 0 0 30px;position:relative}
.k-tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;border-left:3px dotted var(--k-honey)}
.k-tl>li{position:relative;padding:0 0 20px 6px}
.k-tl>li::before{
  content:"";position:absolute;left:-30px;top:5px;width:17px;height:17px;background:var(--k-terra);
  border:2px solid var(--k-ink);border-radius:50%;box-shadow:0 0 0 4px var(--k-paper);
}
.k-tl-t{display:block;font-family:var(--k-head);font-weight:700;color:var(--k-terra-d);font-size:.92rem}
.k-tl b.k-tl-h{display:block;font-family:var(--k-head);margin-bottom:2px}
.k-tl p{margin:0}

.k-dodont{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;margin:18px 0}
.k-do,.k-dont{border:1.5px solid rgba(63,46,41,.65);border-radius:22px;padding:18px 22px 12px}
.k-do{background:var(--k-mist-l);box-shadow:4px 5px 0 var(--k-mist)}
.k-dont{background:var(--k-terra-ll);box-shadow:4px 5px 0 var(--k-terra-l)}
.k-do .k-h4{color:var(--k-sage-d)}.k-dont .k-h4{color:var(--k-terra-d)}

.k-acc{
  background:var(--k-card);border:1.5px solid rgba(63,46,41,.6);border-radius:20px;margin:0 0 12px;overflow:hidden;
}
.k-acc>summary{
  list-style:none;cursor:pointer;padding:15px 56px 15px 20px;position:relative;
  font-family:var(--k-head);font-weight:700;font-size:1rem;color:var(--k-ink);
}
.k-acc>summary::-webkit-details-marker{display:none}
.k-acc>summary::after{
  content:"";position:absolute;right:16px;top:50%;width:26px;height:26px;transform:translateY(-50%);
  background:var(--k-butter) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 6v12M6 12h12' stroke='%233F2E29' stroke-width='2.4' stroke-linecap='round'/></svg>") center/16px no-repeat;
  border:1.5px solid rgba(63,46,41,.6);border-radius:50%;transition:transform .2s ease;
}
.k-acc[open]>summary::after{transform:translateY(-50%) rotate(45deg);background-color:var(--k-terra-l)}
.k-acc[open]>summary{border-bottom:1.5px dashed var(--k-line2)}
.k-acc-body{padding:16px 20px 8px}
.k-acc-body>:last-child{margin-bottom:8px}

/* ============================================================
   FIGURES / DIAGRAMS
   ============================================================ */
.k-fig{
  margin:22px 0;background:var(--k-white);border:1.5px solid rgba(63,46,41,.65);
  border-radius:26px 20px 28px 22px / 22px 28px 20px 26px;padding:20px 20px 14px;box-shadow:5px 6px 0 var(--k-mist);
}
.k-fig svg{display:block;width:100%;height:auto;max-width:100%}
.k-fig figcaption{text-align:center;margin-top:10px;font-size:.86rem;color:var(--k-ink2)}
.k-fig--scroll .k-fig-scroll{overflow-x:auto}
.k-fig--scroll svg{min-width:640px}

/* ============================================================
   QUOTES (ayah / hadith)
   ============================================================ */
.k-quote{
  margin:20px 0;padding:22px 26px 16px;background:var(--k-white);position:relative;
  border:1.5px solid rgba(63,46,41,.6);border-radius:8px 26px 26px 26px;box-shadow:5px 6px 0 var(--k-mist);
}
.k-quote::before{
  content:"\201C";position:absolute;left:14px;top:-6px;font-family:Georgia,serif;font-size:4.2rem;line-height:1;color:var(--k-honey);
}
.k-quote blockquote{margin:0;padding:8px 0 4px 26px}
.k-quote .k-ar{display:block;text-align:right;margin-bottom:8px;padding-left:0}
.k-quote p{margin:0 0 6px;font-size:1.04rem}
.k-quote figcaption{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--k-line2);font-size:.86rem;color:var(--k-ink2);font-weight:600}
.k-grade{
  font-family:var(--k-head);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;border:1.5px solid rgba(63,46,41,.55);background:var(--k-mist);color:var(--k-sage-d);
}
.k-grade--hasan{background:var(--k-butter);color:var(--k-honey-d)}
.k-grade--weak{background:var(--k-terra-l);color:var(--k-terra-d)}
.k-grade--quran{background:var(--k-dusk-l);color:#3C5661}

/* ============================================================
   CHECKLISTS ("things to do")
   ============================================================ */
.k-todo{
  margin:24px 0;background:linear-gradient(180deg,var(--k-butter-l),#FFF8E4);
  border:1.5px solid rgba(63,46,41,.7);border-radius:26px 20px 28px 22px / 22px 28px 20px 26px;padding:22px 24px 14px;box-shadow:5px 6px 0 var(--k-honey);
  outline:2px dashed rgba(169,112,26,.35);outline-offset:-9px;
}
.k-todo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.k-todo-head .k-h3{margin:0}
.k-todo-count{font-family:var(--k-head);font-weight:700;font-size:.8rem;color:var(--k-honey-d);background:var(--k-card);padding:4px 12px;border-radius:999px;border:1.5px solid rgba(63,46,41,.4)}
.k-todo ul{list-style:none;margin:8px 0 10px;padding:0}
.k-todo li{margin:0}
.k-todo label{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:8px 6px;cursor:pointer;border-radius:12px}
.k-todo label:hover{background:rgba(255,255,255,.55)}
.k-todo input{position:absolute;opacity:0;width:1px;height:1px}
.k-todo .k-box{
  width:26px;height:26px;margin-top:1px;border:2px solid var(--k-ink);border-radius:9px 7px 10px 8px;background:var(--k-white);
  display:grid;place-items:center;transition:background .15s ease;
}
.k-todo .k-box svg{width:18px;height:18px;opacity:0;stroke:var(--k-ink);transition:opacity .12s ease}
.k-todo input:checked+.k-box{background:var(--k-honey)}
.k-todo input:checked+.k-box svg{opacity:1}
.k-todo input:checked~.k-todo-txt{color:var(--k-ink3);text-decoration:line-through;text-decoration-color:var(--k-terra)}
.k-todo input:focus-visible+.k-box{outline:3px solid var(--k-terra);outline-offset:2px}
.k-todo-txt b{font-weight:800}

/* ============================================================
   AGE JOURNEY (overview) + TAB SYSTEM
   ============================================================ */
.k-journey{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.k-journey::before{
  content:"";position:absolute;left:8%;right:8%;top:54px;border-top:3px dotted var(--k-honey);z-index:0;
}
.k-journey li{position:relative;z-index:1}
.k-journey a{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;text-decoration:none;color:var(--k-ink);
  padding:12px 8px 14px;border-radius:24px;transition:transform .15s ease,background .15s ease;
}
.k-journey a:hover{transform:translateY(-4px);background:rgba(255,249,238,.8)}
.k-journey .k-jic{
  width:86px;height:86px;border-radius:50% 46% 52% 48%;background:var(--jb,var(--k-butter));border:1.5px solid var(--k-ink);
  display:grid;place-items:center;box-shadow:3px 4px 0 var(--k-ink);
}
.k-journey .k-jic svg{width:62px;height:62px;overflow:visible;--ic-blob:transparent}
.k-journey b{font-family:var(--k-head);font-size:1.02rem;line-height:1.2}
.k-journey small{font-size:.83rem;color:var(--k-ink2);line-height:1.35}
.k-journey li:nth-child(1){--jb:#F6DFA3}.k-journey li:nth-child(2){--jb:#F3CDB7}.k-journey li:nth-child(3){--jb:#DCE3CB}.k-journey li:nth-child(4){--jb:#EFC4BA}.k-journey li:nth-child(5){--jb:#D6E3E4}
@media (max-width:860px){
  .k-journey{grid-template-columns:1fr;gap:6px;padding-left:26px}
  .k-journey::before{left:52px;right:auto;top:20px;bottom:20px;border-top:0;border-left:3px dotted var(--k-honey)}
  .k-journey a{flex-direction:row;text-align:left;gap:16px;padding:8px 10px}
  .k-journey .k-jic{flex:none;width:68px;height:68px}
  .k-journey .k-jic svg{width:50px;height:50px}
}

.k-ages{position:relative}
.k-tabbar{
  position:sticky;top:0;z-index:40;padding:12px 0 10px;
  background:rgba(251,241,222,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1.5px dashed var(--k-line2);
}
.k-tablist{
  max-width:1120px;margin:0 auto;padding:4px 22px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.k-tablist::-webkit-scrollbar{display:none}
.k-tab{
  flex:none;scroll-snap-align:center;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;
  font-family:var(--k-head);color:var(--k-ink);background:var(--k-card);
  border:1.5px solid rgba(63,46,41,.6);border-radius:999px;padding:7px 18px 7px 8px;box-shadow:2px 3px 0 var(--k-line2);
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
}
.k-tab:hover{transform:translateY(-1px)}
.k-tab .k-tic{
  width:38px;height:38px;border-radius:50%;background:var(--jb,var(--k-butter));border:1.5px solid rgba(63,46,41,.6);display:grid;place-items:center;flex:none;
}
.k-tab .k-tic svg{width:30px;height:30px;overflow:visible;--ic-blob:transparent}
.k-tab b{display:block;font-size:.95rem;line-height:1.15;white-space:nowrap}
.k-tab small{display:block;font-family:var(--k-body);font-size:.75rem;color:var(--k-ink2);font-weight:600;white-space:nowrap}
.k-tab[aria-selected="true"]{background:var(--k-terra);color:#FFF9EE;border-color:var(--k-ink);box-shadow:3px 4px 0 var(--k-ink)}
.k-tab[aria-selected="true"] small{color:#FBE6D9}
.k-tab[aria-selected="true"] .k-tic{border-color:var(--k-ink)}
.k-tab:nth-child(1){--jb:#F6DFA3}.k-tab:nth-child(2){--jb:#F3CDB7}.k-tab:nth-child(3){--jb:#DCE3CB}.k-tab:nth-child(4){--jb:#EFC4BA}.k-tab:nth-child(5){--jb:#D6E3E4}

.k-panels{padding:34px 0 20px}
.js .k-panel:not(.is-active){display:none}
.k-panel-head{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;margin-bottom:8px;
  padding:24px 30px;background:var(--pb,var(--k-butter-l));border:1.5px solid rgba(63,46,41,.7);
  border-radius:30px 24px 32px 26px / 26px 32px 24px 30px;box-shadow:6px 7px 0 var(--pbs,var(--k-butter));
  outline:2px dashed rgba(63,46,41,.22);outline-offset:-10px;
}
.k-panel-art{width:150px;flex:none}
.k-panel-art svg{display:block;width:100%;height:auto}
.k-panel-head .k-eyebrow{margin-bottom:8px}
.k-panel-head h2{margin:0 0 8px;font-family:var(--k-head);font-weight:700;font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.12}
.k-panel-head p{margin:0;color:var(--k-ink2)}
.k-panel[data-age="newborn"]{--pb:#FFF3D6;--pbs:#F0CC7E}
.k-panel[data-age="solids"]{--pb:#FBE6D9;--pbs:#E9AF92}
.k-panel[data-age="crawl"]{--pb:#EEF1E1;--pbs:#C3CDA6}
.k-panel[data-age="toddle"]{--pb:#FBE7E1;--pbs:#EBB8AD}
.k-panel[data-age="preschool"]{--pb:#EAF1F1;--pbs:#B7CBD0}
@media (max-width:640px){
  .k-panel-head{grid-template-columns:1fr;padding:22px 20px;gap:14px;justify-items:start}
  .k-panel-art{width:104px}
}

/* sub-tabs inside an age panel */
.k-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.k-subtab{
  font-family:var(--k-head);font-weight:700;font-size:.86rem;cursor:pointer;color:var(--k-ink2);
  background:transparent;border:1.5px dashed var(--k-line2);border-radius:999px;padding:8px 16px;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.k-subtab:hover{border-color:var(--k-terra);color:var(--k-ink)}
.k-subtab[aria-selected="true"]{background:var(--k-ink);color:#FFF9EE;border:1.5px solid var(--k-ink)}
.js .k-sub:not(.is-active){display:none}
.k-sub{padding:12px 0 6px}

/* month ladder (development) */
.k-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;margin:16px 0}
.k-month{
  background:var(--k-card);border:1.5px solid rgba(63,46,41,.7);border-radius:var(--k-blob);
  padding:0 0 12px;box-shadow:4px 5px 0 var(--k-line);overflow:hidden;
}
.k-month>header{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 18px;
  background:var(--k-butter);border-bottom:1.5px solid rgba(63,46,41,.55);
}
.k-month:nth-child(3n+2)>header{background:var(--k-terra-l)}
.k-month:nth-child(3n+3)>header{background:var(--k-mist)}
.k-month>header b{font-family:var(--k-head);font-size:1.05rem}
.k-month>header span{font-size:.78rem;font-weight:700;color:var(--k-ink2);text-transform:uppercase;letter-spacing:.06em}
.k-month dl{margin:0;padding:10px 18px 0}
.k-month dt{font-family:var(--k-head);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--k-terra-d);margin:10px 0 2px}
.k-month dd{margin:0;font-size:.94rem}
.k-month dd ul{margin:0;padding-left:1.1em}

/* ============================================================
   MISC: pills of links, source list, toc chips
   ============================================================ */
.k-linkrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.k-linkchip{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--k-ink);font-weight:700;font-size:.9rem;
  padding:9px 16px;background:var(--k-card);border:1.5px solid rgba(63,46,41,.55);border-radius:999px;box-shadow:2px 3px 0 var(--k-line2);
}
.k-linkchip:hover{background:var(--k-butter-l)}
.k-source{font-size:.9rem;color:var(--k-ink2)}
.k-source ol{padding-left:1.2em}
.k-source li{margin:0 0 6px}

/* kids corner band */
.k-band{
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  background:linear-gradient(120deg,#FBE6D9,#FFF3D6);border:1.5px solid rgba(63,46,41,.7);
  border-radius:30px 24px 32px 26px / 26px 32px 24px 30px;padding:24px 30px;box-shadow:6px 7px 0 #E9AF92;margin:8px 0 0;
}
.k-band .k-band-art{width:110px}
.k-band h3{margin:0 0 6px;font-family:var(--k-head);font-size:1.3rem}
.k-band p{margin:0;color:var(--k-ink2)}
@media (max-width:760px){.k-band{grid-template-columns:1fr;justify-items:start;padding:22px}.k-band .k-band-art{width:84px}}

/* the chrome's where-to-next band sits on cream here */
.wtn-section{background:transparent}

/* ============================================================
   RESPONSIVE + PRINT
   ============================================================ */
@media (max-width:860px){
  .k-hero-inner{grid-template-columns:1fr;padding:38px 22px 70px;gap:8px}
  .k-hero-art{order:-1;max-width:400px;margin:0 auto}
  .k-hero-art svg{max-height:300px}
  .k-section{padding:46px 0 52px}
}
@media (max-width:520px){
  .k-wrap{padding:0 16px}
  .k-tablist{padding:4px 16px}
  .k-todo{padding:20px 16px 10px}
  .k-note{grid-template-columns:1fr;gap:6px}
  .k-note>svg{width:36px;height:36px}
  .k-steps>li{padding-left:66px}
  .k-quote{padding:22px 16px 14px}.k-quote blockquote{padding-left:8px}.k-quote::before{left:10px}
  .k-ar{font-size:1.4rem}
}
@media print{
  .k-tabbar,.k-subtabs,.k-hero-cta,.htm-header,.k-btn{display:none!important}
  .k-panel,.k-sub{display:block!important}
  .k-card,.k-table-wrap,.k-todo,.k-quote{box-shadow:none}
  body{background:#fff}body::before{display:none}
}


/* ============================================================
   EXTRA COMPONENTS
   ============================================================ */
/* pinned illustration: figure with numbered pins + a matching list */
.k-pinfig{display:grid;grid-template-columns:minmax(250px,360px) 1fr;gap:26px;align-items:start;margin:18px 0}
.k-pinfig>.k-fig{position:sticky;top:96px}
.k-pinfig .k-fig{margin:0}
.k-pins{list-style:none;counter-reset:pin;margin:0;padding:0;display:grid;gap:12px}
.k-pins>li{counter-increment:pin;position:relative;padding:2px 0 2px 46px;min-height:34px}
.k-pins>li::before{
  content:counter(pin);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;
  font-family:var(--k-head);font-weight:800;font-size:.95rem;color:#FFF9EE;background:var(--k-terra);
  border:1.5px solid var(--k-ink);border-radius:50%;box-shadow:2px 2px 0 var(--k-ink);
}
.k-pins b{font-family:var(--k-head)}
.k-pins p{margin:0}
@media (max-width:820px){.k-pinfig{grid-template-columns:1fr}.k-pinfig>.k-fig{position:static;max-width:400px;margin:0 auto}}

/* flow strip: a few steps joined by arrows */
.k-flow{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:26px 30px;counter-reset:fl}
.k-flow>li{
  counter-increment:fl;position:relative;background:var(--k-card);border:1.5px solid rgba(63,46,41,.7);
  border-radius:22px 18px 24px 16px / 18px 24px 16px 22px;padding:26px 16px 16px;box-shadow:4px 5px 0 var(--fs,var(--k-butter));
}
.k-flow>li:nth-child(4n+2){--fs:var(--k-terra-l)}.k-flow>li:nth-child(4n+3){--fs:var(--k-mist)}.k-flow>li:nth-child(4n+4){--fs:var(--k-blush)}
.k-flow>li::before{
  content:counter(fl);position:absolute;left:14px;top:-15px;width:30px;height:30px;display:grid;place-items:center;
  font-family:var(--k-head);font-weight:800;color:var(--k-ink);background:var(--k-honey);border:1.5px solid var(--k-ink);border-radius:50%;
}
.k-flow>li:not(:last-child)::after{
  content:"";position:absolute;right:-27px;top:50%;width:24px;height:24px;transform:translateY(-50%);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23C8694A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
@media (max-width:760px){.k-flow>li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-27px;transform:translateX(-50%) rotate(90deg)}}
.k-flow b{display:block;font-family:var(--k-head);margin-bottom:3px}
.k-flow p{margin:0;font-size:.93rem}
.k-flow .k-when{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--k-terra-d);margin-bottom:4px}

/* small pill saying a note is newer than / not from the book */
.k-added{display:inline-block;margin-left:8px;font-family:var(--k-head);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:999px;background:var(--k-dusk-l);color:#3C5661;border:1.5px solid rgba(63,46,41,.4);vertical-align:middle}

/* sheep / quantity cards for aqiqah */
.k-qty{display:flex;align-items:center;gap:10px;margin:6px 0 8px}
.k-qty svg{width:64px;height:64px;--ic-blob:transparent;overflow:visible}
.k-qty b{font-family:var(--k-head);font-size:1.5rem;color:var(--k-terra-d)}

/* horizontal "scale" bars, used for temperature and similar ranges */
.k-scale{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1.5px solid rgba(63,46,41,.7);border-radius:16px;overflow:hidden;margin:14px 0}
.k-scale>div{padding:12px 10px;text-align:center;font-size:.86rem;border-right:1.5px solid rgba(63,46,41,.4)}
.k-scale>div:last-child{border-right:0}
.k-scale b{display:block;font-family:var(--k-head);font-size:.95rem}
.k-scale .s1{background:var(--k-mist)}.k-scale .s2{background:var(--k-butter)}.k-scale .s3{background:var(--k-terra-l)}.k-scale .s4{background:#EBA58E}
@media (max-width:640px){.k-scale{grid-auto-flow:row}.k-scale>div{border-right:0;border-bottom:1.5px solid rgba(63,46,41,.4)}.k-scale>div:last-child{border-bottom:0}}


/* ============================================================
   GENERAL SECTION (above the age tabs): its own compact tab set
   ============================================================ */
.k-gtabs{margin-top:8px}
.k-gtabs>.k-subtabs{justify-content:center;margin:0 0 22px;gap:10px}
.k-gtabs>.k-subtabs .k-subtab{font-size:.92rem;padding:10px 20px;background:var(--k-card);border:1.5px solid rgba(63,46,41,.55);box-shadow:2px 3px 0 var(--k-line2);color:var(--k-ink)}
.k-gtabs>.k-subtabs .k-subtab:hover{background:var(--k-butter-l)}
.k-gtabs>.k-subtabs .k-subtab[aria-selected="true"]{background:var(--k-terra);color:#FFF9EE;border-color:var(--k-ink);box-shadow:3px 4px 0 var(--k-ink)}
.js .k-gpanel:not(.is-active){display:none}
.k-gpanel{padding-top:4px}
@media (max-width:640px){.k-gtabs>.k-subtabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.k-gtabs>.k-subtabs .k-subtab{flex:none}}


/* practical-advice cards (Prophet section) */
.k-note--note{--n:var(--k-white);--nb:var(--k-line2)}
.k-try{margin:12px 0 8px;padding:10px 13px;background:rgba(255,255,255,.7);border:1.5px dashed var(--k-line2);border-radius:14px;font-size:.93rem}
.k-try b{font-family:var(--k-head);color:var(--k-terra-d)}
.k-refs{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.k-ref{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.03em;padding:2px 9px;border-radius:999px;background:var(--k-card);border:1.5px solid rgba(63,46,41,.4);color:var(--k-ink2);vertical-align:middle;white-space:nowrap}
.k-wide{grid-column:1/-1}

/* Prophet section: a true 3-column grid (2 rows of 3), not auto-fit */
.k-prophet{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.k-prophet{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.k-prophet{grid-template-columns:1fr}}