/* ScienceWaliKahani. Design plan: DESIGN.md */
:root {
  --tile: #EEF2F0; --page: #FFFFFF; --ink: #1C2638; --muted: #5A6577; --rule: #D9E0E3;
  --turmeric: #E6A019; --red: #B3372B; --teal: #23877A; --link: #1D7468;
  --paper: #FFFDF6; --paper-rule: #C9DCEB;
  --ind-a: #E6A019; --ind-b: #B3372B;
  --head: 'Baloo 2', 'Baloo Tamma 2', 'Hind', sans-serif;
  --body: 'Hind', 'Noto Sans Kannada', system-ui, sans-serif;
  --hand: 'Kalam', 'Hind', cursive;
}
:root:lang(kn) { --head: 'Baloo Tamma 2', 'Noto Sans Kannada', sans-serif; --body: 'Noto Sans Kannada', 'Hind', sans-serif; }
@media (prefers-color-scheme: dark) {
  :root { --tile: #121A28; --page: #1A2436; --ink: #E9EEF2; --muted: #A5B0BF; --rule: #2C3950;
    --link: #5CC7B6; --paper: #F4EFE2; }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 128px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tile); color: var(--ink); font: 17px/1.7 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--turmeric); outline-offset: 2px; border-radius: 4px; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: 56px; padding: 0 16px; background: #1C2638; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { border-radius: 50%; }
.word { font: 800 21px/1 var(--head); color: #F1EEE8; letter-spacing: .2px; }
.w2 { color: #3DB5A2; } .w3 { color: #F5A64A; }
.langs { display: flex; gap: 2px; background: rgba(255,255,255,.08); border-radius: 99px; padding: 3px; }
.langs a { color: #D6DCE4; text-decoration: none; font: 600 15px/1 var(--body); padding: 8px 12px; border-radius: 99px; }
.langs a[aria-current] { background: #F1EEE8; color: #1C2638; }
@media (max-width: 440px) { .word { display: none; } }

/* The indicator strip: reading progress that turns turmeric yellow into curcumin red */
.indicator { position: fixed; top: 56px; left: 0; right: 0; height: 5px; z-index: 19; background: transparent; }
.indicator i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0));
  background: color-mix(in srgb, var(--ind-b) calc(var(--p, 0) * 100%), var(--ind-a)); }

/* Article hero: the painting first */
.hero { position: relative; background: #1C2638; overflow: hidden; }
.hero img { width: 100%; height: min(78vh, 680px); min-height: 420px; object-fit: cover; object-position: 50% 30%; }
.herotext { position: absolute; inset: auto 0 0 0; padding: 120px 16px 22px;
  background: linear-gradient(to top, rgba(18,26,40,.96) 30%, rgba(18,26,40,0)); color: #F4F1EA; }
.herotext > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
.kicker { margin: 0 auto 4px; font: 600 16px/1.3 var(--body); color: #F5C35A; }
.hero h1 { margin: 0 auto 12px; font: 800 clamp(30px, 6.4vw, 50px)/1.12 var(--head); text-wrap: balance; }
.levels { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.levels li { font: 600 14px/1 var(--body); padding: 7px 11px 6px; border-radius: 6px; border: 1px solid rgba(244,241,234,.45); }

/* Layout: reading column plus sticky Short on wide screens */
.layout { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.post { background: var(--page); padding: 8px 18px 40px; }
.rail { display: none; }
@media (min-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 700px) 300px; padding: 0 16px; justify-content: center; }
  .post { padding: 8px 48px 56px; margin-top: -36px; position: relative; border-radius: 4px 4px 0 0; }
  .rail { display: block; }
  .railin { position: sticky; top: 84px; display: grid; gap: 14px; margin-top: 24px; }
  .short-inline { display: none; }
}

/* Chapter chips */
.chips { position: sticky; top: 56px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 12px;
  margin: 0 -18px 8px; padding-left: 18px; padding-right: 18px; background: var(--page); scrollbar-width: none;
  border-bottom: 1px solid var(--rule); }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; font: 600 15px/1 var(--body); color: var(--ink); text-decoration: none; padding: 9px 13px 8px;
  border-radius: 99px; background: var(--tile); }
.chips a.on { background: var(--ink); color: var(--page); }
@media (min-width: 1000px) { .chips { margin: 0 -48px 8px; padding-left: 48px; padding-right: 48px; } }

/* Reading type */
.post > p, .post li { max-width: 68ch; }
.post h2 { font: 800 clamp(24px, 4.6vw, 30px)/1.2 var(--head); margin: 52px 0 10px; }
.post h3 { font: 800 21px/1.3 var(--head); margin: 32px 0 6px; color: var(--link); }
.post strong { font-weight: 600; }
.post table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 16px; }
.post th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--ink); padding: 8px 10px 6px 0; }
.post td { border-bottom: 1px solid var(--rule); padding: 9px 10px 8px 0; }

/* Short video */
.short { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; background: #000; border-radius: 14px; overflow: hidden; }
.short iframe { width: 100%; height: 100%; border: 0; }
.short-inline .short { margin: 18px auto; max-width: 320px; }

/* Stills from the video */
.still { margin: 26px auto; max-width: 300px; }
.still img { border-radius: 12px; }
.still figcaption { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 8px; }

/* Formula card: the notebook page from the video */
.formula { margin: 24px 0; padding: 18px 22px 16px 34px; background: var(--paper); color: #22314A; border-radius: 6px;
  background-image: linear-gradient(90deg, transparent 22px, #E7A3A0 22px, #E7A3A0 24px, transparent 24px),
    repeating-linear-gradient(to bottom, transparent 0 35px, var(--paper-rule) 35px 36px);
  box-shadow: 0 1px 0 var(--rule); }
.formula .eq { margin: 0; font: 700 clamp(22px, 5vw, 30px)/36px var(--hand); }
.formula .note { margin: 0; font: 400 17px/36px var(--hand); color: #5B6B83; }

/* Callouts */
.callout { margin: 24px 0; padding: 14px 18px 4px; border-left: 5px solid var(--teal); background: var(--tile); border-radius: 0 8px 8px 0; }
.callout .ct { margin: 0; font: 800 18px/1.4 var(--head); }
.callout.everyday { border-color: var(--turmeric); }
.callout.safety { border-color: var(--red); }
.callout.safety .ct { color: var(--red); }

/* Practice questions */
.q { margin: 18px 0; padding: 14px 18px 6px; border: 1px solid var(--rule); border-radius: 10px; }
.q .lvl { display: inline-block; margin: 0 0 4px; font: 600 13px/1 var(--body); padding: 6px 9px 5px; border-radius: 5px;
  background: var(--tile); color: var(--muted); }
.q p { margin: 6px 0; }
details { margin: 10px 0 12px; }
summary { cursor: pointer; font-weight: 600; color: var(--link); list-style: none; display: inline-block;
  padding: 8px 14px 7px; border: 1.5px solid currentColor; border-radius: 99px; }
summary::-webkit-details-marker { display: none; }
details[open] summary { background: var(--link); color: var(--page); border-color: var(--link); }
details[open] > :not(summary) { border-left: 3px solid var(--teal); padding-left: 12px; }

/* A/B quiz */
.ab { margin: 20px 0; padding: 20px 18px; background: #1C2638; color: #F1EEE8; border-radius: 12px; }
.abq { margin: 0 0 14px; font: 800 20px/1.35 var(--head); }
.abopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab button { font: 600 17px/1.3 var(--body); color: #1C2638; background: #F1EEE8; border: 0; border-radius: 10px;
  padding: 14px 12px; text-align: left; cursor: pointer; }
.ab button b { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; border-radius: 50%;
  background: #1C2638; color: #F1EEE8; font-size: 15px; }
.ab button.ok { background: #3DB5A2; } .ab button.no { background: #E07A6F; }
.ab button[data-verdict]::after { content: attr(data-verdict); display: block; font-size: 14px; margin-top: 4px; }
.abx { margin-top: 14px; } .abx a { color: #F5C35A; }

/* Follow */
.wa { display: inline-block; background: #25D366; color: #073B1E; font: 600 16px/1.2 var(--body); text-decoration: none;
  padding: 13px 18px 12px; border-radius: 10px; text-align: center; }

/* Home */
.homehero { position: relative; background: #1C2638; }
.homehero img { width: 100%; height: min(72vh, 620px); object-fit: cover; object-position: 50% 35%; }
.homehero-text { position: absolute; inset: auto 0 0 0; padding: 140px 16px 28px; color: #F4F1EA;
  background: linear-gradient(to top, rgba(18,26,40,.97) 35%, rgba(18,26,40,0)); }
.homehero-text > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.homehero h1 { margin-bottom: 8px; font: 800 clamp(32px, 7vw, 56px)/1.08 var(--head); text-wrap: balance; }
.homehero p { margin-top: 0; font-size: 18px; color: #D6DCE4; }
.home { max-width: 760px; margin: 0 auto; padding: 8px 16px 20px; }
.home h2 { font: 800 28px/1.2 var(--head); }
.eps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ep { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: start; padding: 12px; text-decoration: none;
  color: var(--ink); background: var(--page); border-left: 6px solid var(--sub); border-radius: 4px; }
.ep img { border-radius: 6px; aspect-ratio: 3 / 4; object-fit: cover; }
.eptext { display: grid; gap: 4px; }
.epmeta { font: 600 14px/1.2 var(--body); color: var(--muted); }
.eptitle { font: 800 20px/1.25 var(--head); }
.epdesc { font-size: 15px; line-height: 1.5; color: var(--muted); }
.ep:hover .eptitle { color: var(--link); }
.soon { color: var(--muted); }

/* Footer */
.foot { background: #1C2638; color: #D6DCE4; margin-top: 56px; padding: 32px 16px; }
.footin { max-width: 760px; margin: 0 auto; }
.foot .yt a { color: #F5C35A; margin-right: 12px; }
.foot .yt span { color: #A5B0BF; margin-right: 6px; }
.copy { font-size: 14px; color: #8994A5; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (min-width: 1000px) { .herotext { padding-bottom: 60px; } .hero img { height: min(74vh, 640px); } }