/* ============================================================
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, 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}
/* Salawat glyph (U+FDFA). Plain inline text: an inline-block with overflow:hidden sits on the baseline like an image and clips the calligraphy. */
.sw{font-family:"Amiri","Noto Naskh Arabic",serif;font-size:1.18em;line-height:0;vertical-align:baseline;white-space:nowrap;margin:0 .1em}
.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}
/* ============================================================
CURSOR
A baby bottle in place of the default arrow: amber teat leading, orange collar,
milk three quarters up. PNG rather than SVG because Safari ignores SVG data-URI
cursors, and browsers cap cursors at 32x32 CSS px, so the 64px art is offered
through image-set as 2x rather than used directly.
Two declarations on purpose: a browser that does not support image-set() inside
cursor drops the whole second declaration and keeps the first.
Hotspot 6 6 sits on the teat. Interactive elements set their own
cursor (pointer / text), so nothing loses its affordance.
Regenerate the art with: python3 make-cursor.py
============================================================ */
body{cursor:url(data:image/png;base64,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) 6 6,auto}
body{cursor:image-set(url(data:image/png;base64,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) 1x,url(data:image/png;base64,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) 2x) 6 6,auto}
/* The pacifier replaces the ARROW. Prose keeps the I-beam, so people can still see that
text is selectable - this page is one people copy duas and hadith references out of.
To put the pacifier over text too, delete this one rule. */
p,li,dt,dd,td,th,caption,blockquote,figcaption,h1,h2,h3,h4{cursor:auto}
/* High-contrast / forced-colours users get their own pointer back. */
@media (forced-colors:active){body{cursor: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;
}
/* Grid items default to min-width:auto, so a nowrap phrase inside can push the column
wider than the hero and get clipped by .k-hero's overflow:hidden. */
.k-hero-text,.k-hero-art{min-width:0}
.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-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 16px;font-size:.82rem;font-weight:600;color:var(--k-ink3)}
.k-crumbs a{color:var(--k-ink2);text-decoration:none;border-bottom:1px solid var(--k-line2)}
.k-crumbs a:hover{color:var(--k-terra-d);border-bottom-color:var(--k-terra)}
.k-crumbs [aria-current]{color:var(--k-ink2)}
.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-byline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:-8px 0 24px;max-width:540px;font-size:.84rem;font-weight:600;color:var(--k-ink2)}
.k-byline a{color:var(--k-ink);text-decoration:none;border-bottom:1px solid var(--k-line2)}
.k-byline a:hover{color:var(--k-terra-d);border-bottom-color:var(--k-terra)}
.k-byline-sep{color:var(--k-ink3)}
.k-nowrap{white-space:nowrap}
.k-reviewed{display:inline-flex;align-items:center;gap:6px;color:var(--k-sage-d)}
.k-reviewed svg{width:17px;height:17px;padding:3px;box-sizing:border-box;border-radius:50%;background:var(--k-mist);fill:none;stroke:var(--k-sage-d);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.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)}
/* The SVG carries a viewBox, so width:100% + height:auto reserves the right height before paint
(no layout shift) and scales cleanly. No max-height: capping the height letterboxes the drawing
inside a wider box instead of making it smaller. */
.k-hero-art{position:relative}
.k-hero-art svg{display:block;width:100%;height:auto;max-width:540px;margin-left:auto;margin-right:auto}
.k-hero-edge{position:absolute;left:0;right:0;bottom:-1px;height:44px;display:block;width:100%}
/* ============================================================
HERO ART MOTION
Cozy and slow: a rocking cradle, a drifting cloud, a swaying sprig,
twinkling stars. Transform and opacity only, so it stays on the
compositor. Switched off completely under prefers-reduced-motion,
and paused by children.js once the hero scrolls out of view.
============================================================ */
@keyframes k-in-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes k-ring-spin{to{transform:rotate(360deg)}}
@keyframes k-cloud-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(17px)}}
@keyframes k-moon-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes k-twinkle{0%,100%{opacity:1;transform:scale(1)}46%{opacity:.2;transform:scale(.7)}}
@keyframes k-rock{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes k-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes k-sway{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.4deg)}}
@keyframes k-beat{0%,72%,100%{transform:scale(1)}80%{transform:scale(1.1)}88%{transform:scale(1.02)}}
/* arches and cradle settle in, one after the other */
.k-in{animation:k-in-rise .85s cubic-bezier(.22,.9,.28,1) both}
.k-in-1{animation-delay:.05s}
.k-in-2{animation-delay:.16s}
.k-in-3{animation-delay:.27s}
.k-in-4{animation-delay:.5s}
/* rotate/scale in place: fill-box makes the origin the element's own box */
.k-a-ring,.k-a-tw,.k-a-heart,.k-a-breath{transform-box:fill-box;transform-origin:center}
/* rotate around a chosen point in the drawing: view-box takes viewBox coordinates */
.k-a-cradle,.k-a-sprig{transform-box:view-box}
.k-a-ring{animation:k-ring-spin 90s linear infinite}
.k-a-cloud{animation:k-cloud-drift 13s ease-in-out infinite}
.k-a-moon{animation:k-moon-bob 7s ease-in-out infinite}
.k-a-tw{animation:k-twinkle 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.k-a-cradle{transform-origin:305px 428px;animation:k-rock 5.6s ease-in-out infinite}
.k-a-breath{animation:k-breathe 4.4s ease-in-out infinite}
.k-a-sprig{transform-origin:116px 422px;animation:k-sway 8s ease-in-out infinite}
.k-a-heart{animation:k-beat 3.4s ease-in-out infinite}
.k-hero-art.is-paused svg *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
.k-in,.k-a-ring,.k-a-cloud,.k-a-moon,.k-a-tw,.k-a-cradle,.k-a-breath,.k-a-sprig,.k-a-heart{animation:none}
}
/* ---------- 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, inside the , styled to look like the other accordion titles */
.k-faq-q{margin:0;font:inherit;line-height:1.35;color:inherit}
.k-faq .k-acc-body p{margin:0 0 10px}
.k-faq .k-acc-body .k-ar{display:block;text-align:right;margin:4px 0 10px}
.k-updated{margin:10px 0 0;font-size:.86rem;color:var(--k-ink2)}
.k-updated a{color:var(--k-terra-d)}
/* ============================================================
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:20px 26px 16px 22px;background:var(--k-white);position:relative;
border:1.5px solid rgba(63,46,41,.6);border-radius:26px 20px 28px 22px / 22px 28px 20px 26px;box-shadow:5px 6px 0 var(--k-mist);
}
/* the quote mark lives inside the box, in the gutter beside the first line, so no border or corner ever cuts it */
.k-quote::before{
content:"\201C";position:absolute;left:16px;top:22px;font-family:Georgia,serif;font-size:3rem;line-height:1;color:var(--k-honey);
}
.k-quote blockquote{margin:0;padding:6px 0 2px 34px}
.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}
/* scales with the viewport instead of jumping between two fixed sizes */
.k-hero-art{order:-1;max-width:clamp(220px,60vw,380px);margin:0 auto}
.k-section{padding:46px 0 52px}
}
/* ------------------------------------------------------------
Shared-chrome fix, applied locally.
site-chrome.css sets .htm-logo and .htm-header-actions to flex:none, so the header
cannot shrink below roughly 377px and the whole document gets a horizontal scrollbar
on a 375px phone (iPhone SE / 13 mini). children.css loads after site-chrome.css, so
the override lives here and the shared file stays byte-identical to the other sites.
!important is needed only because the header partial sizes the logo with inline styles.
Worth porting to guide. and quran. as the same block.
------------------------------------------------------------ */
@media (max-width:430px){
.htm-header-inner{padding-left:16px;padding-right:16px;gap:12px}
.htm-logo{flex:0 1 auto;min-width:0}
.htm-logo svg{width:100%!important;height:auto!important;max-width:227px}
/* the footer wordmark is sized the same way and overflows for the same reason */
.footer-brand .htm-logo-wordmark{width:100%!important;height:auto!important;max-width:297px}
}
@media (max-width:560px){
.k-hero h1 mark{white-space:normal;
background:linear-gradient(to bottom,transparent 56%,var(--k-butter) 56%,var(--k-butter) 93%,transparent 93%);
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.k-hero h1 mark::after{display:none}
}
@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-byline-sep{display:none}
.k-byline{gap:6px 16px}
.k-acc-body{padding:14px 12px 6px}
.k-quote{padding:18px 14px 12px 12px;box-shadow:4px 5px 0 var(--k-mist)}
.k-quote blockquote{padding-left:28px}
.k-quote::before{left:10px;top:20px;font-size:2.7rem}
.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,