@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600&display=swap');
/* ═══════════════════════════════════════════════════════════════════════════
   Manitya · "Rainbow Dance" design system
   White base · terracotta + sage used as accents · Fraunces headlines · DM Sans UI
   Hand-in-hand Warli dancers + tonal rainbow arches are the brand motif.
   Light = white page. Dark = the same system on warm charcoal (night mode).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --rd-bg:#FFFFFF; --rd-card:#FFFFFF; --rd-ink:#2B2420; --rd-ink2:#6A5A50; --rd-ink3:#8F8176;
  --rd-tc:#B5573A; --rd-tc-dk:#8E4A33; --rd-tc-soft:#F3DDD2;
  --rd-sage:#6F8A6A; --rd-sage-dk:#4F6B4A; --rd-sage-soft:#E8EFE4;
  --rd-sand:#EADBC4; --rd-line:#E5DDD0; --rd-gold:#F2D9A5;
  --rd-rainbow:#B5573A,#D07B58,#E3A583,#EAD3B3,#D5DBBB,#B4C6A8,#8FA888;
  --rd-serif:'Plus Jakarta Sans',system-ui,sans-serif; --rd-sans:'Plus Jakarta Sans',system-ui,sans-serif; --rd-deva:'Noto Sans Devanagari','Plus Jakarta Sans',sans-serif;
  --rd-shadow:0 18px 40px -28px rgba(90,60,40,.45);
}
html.dark{
  --rd-bg:#1B1612; --rd-card:#261E19; --rd-ink:#F3E9DC; --rd-ink2:#C9B9A8; --rd-ink3:#9E8F80;
  --rd-tc:#E3A583; --rd-tc-dk:#EDB89B; --rd-tc-soft:#3A2820;
  --rd-sage:#A9BFA3; --rd-sage-dk:#BFD2B9; --rd-sage-soft:#222B21;
  --rd-sand:#3A3027; --rd-line:#3A2F27; --rd-gold:#C9A860;
  --rd-shadow:0 18px 40px -28px rgba(0,0,0,.7);
}

/* ── canvas ─────────────────────────────────────────────────────────────── */
html, body{ background:var(--rd-bg) !important; color:var(--rd-ink); }
body{ font-family:var(--rd-sans); }
::selection{ background:var(--rd-tc-soft); color:var(--rd-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--rd-tc); outline-offset:3px; }

/* ── chrome: logo mark, top nav, theme toggle ───────────────────────────── */
.mark{ color:var(--rd-ink) !important; font-family:var(--rd-deva); font-weight:600; }
.mark small{ font-family:var(--rd-sans) !important; font-style:normal !important; font-weight:700; letter-spacing:.2em; color:var(--rd-tc) !important; opacity:1 !important; }
.top-nav a, .top-nav a.nav-talk{ font-family:var(--rd-sans) !important; font-style:normal !important; font-weight:600; font-size:.88rem; color:var(--rd-ink2) !important; border-color:transparent !important; text-decoration:none; }
.top-nav a:hover, .top-nav a.nav-talk:hover{ color:var(--rd-tc) !important; }
.top-nav a.nav-talk{ color:var(--rd-tc) !important; }
.theme-toggle, .audio-toggle{ color:var(--rd-ink2) !important; background:var(--rd-card) !important; border:1px solid var(--rd-line) !important; box-shadow:0 8px 18px -12px rgba(90,60,40,.4); }
.theme-toggle:hover, .audio-toggle:hover{ color:var(--rd-tc) !important; border-color:var(--rd-tc) !important; }

/* nav sits clear of the day/night (and audio) buttons on every page */
.top-nav{ right:calc(3vw + 86px) !important; gap:1.3rem !important; }
body:has(.audio-toggle) .top-nav{ right:calc(3vw + 138px) !important; }
@media (max-width:760px){ .top-nav{ display:none !important; } }

/* ── page heroes, sections, grain ───────────────────────────────────────── */
.wisdom-hero::before, .section::before, .site-footer::before, .wisdom-intro-section::before, .wisdom-closing-section::before, .pinned-section::before{ display:none !important; }
.wisdom-hero{ background:var(--rd-bg) !important; }
.dar-hero, .hero-section{ background:radial-gradient(ellipse 60% 52% at 50% 34%, color-mix(in srgb,var(--rd-tc-soft) 62%,var(--rd-bg)) 0%, var(--rd-bg) 72%) !important; }
html.dark .dar-hero{ background:radial-gradient(ellipse 60% 52% at 50% 34%, #2A1D16 0%, var(--rd-bg) 72%) !important; }
.section, .wisdom-intro-section, .wisdom-closing-section, .pinned-section, .feelings-section{ background:transparent !important; }
.hero-kicker, .kicker{ font-family:var(--rd-sans) !important; font-style:normal !important; font-weight:700 !important; letter-spacing:.22em !important; color:var(--rd-sage) !important; }
h1, h2, h3, .wisdom-hero h1{ font-family:var(--rd-serif) !important; color:var(--rd-ink); letter-spacing:-.01em; }
.wisdom-hero h1 em, h1 em, h2 em{ color:var(--rd-tc) !important; font-style:italic !important; font-family:var(--rd-serif) !important; }
.wisdom-hero .tag{ font-family:var(--rd-sans) !important; font-style:normal !important; color:var(--rd-ink2) !important; }
p, li{ color:inherit; }
a{ text-underline-offset:3px; }


/* ── in-page components that used butter-yellow / cream: re-tinted to sage + terracotta ── */
.daily-fragment, .reset-card, .journal-block textarea, .prompt-alts button, .prompt-alts .prompt, .more-wisdom-link{ background:var(--rd-sage-soft) !important; border:1px solid var(--rd-line) !important; box-shadow:none !important; }
.reset-card{ border-radius:28px !important; }
.breath, .reset-btn, .wisdom-pill.active, .wisdom-pill[aria-pressed="true"], .type-pill.active, .mode-btn.active{ background:var(--rd-tc-soft) !important; color:var(--rd-tc-dk) !important; border-color:var(--rd-tc) !important; box-shadow:none !important; }
html.dark .breath, html.dark .reset-btn{ color:var(--rd-tc) !important; }
.wisdom-pill, .type-pill, .mode-btn, .pills button{ background:transparent !important; border:1px solid var(--rd-line) !important; color:var(--rd-ink2) !important; font-family:var(--rd-sans) !important; font-style:normal !important; border-radius:999px !important; }
.wisdom-pill:hover, .type-pill:hover{ border-color:var(--rd-tc) !important; color:var(--rd-tc) !important; }
.sage, .gentle-lead em, .story-inline em{ color:var(--rd-tc) !important; }
.wisdom-block, .related-feelings a, .fear-reveal{ border-color:var(--rd-line) !important; }
.related-feelings a{ background:var(--rd-card) !important; border-radius:18px !important; }
blockquote, .wisdom-text{ color:var(--rd-ink) !important; }


/* ── chat (Mann): white room, sage bubbles for Mann, terracotta tint for you ── */
.sky{ background:var(--rd-bg) !important; }
.sky::before, .sky::after{ display:none !important; }
.msg.mann .bubble{ background:var(--rd-sage-soft) !important; border:1px solid var(--rd-line) !important; color:var(--rd-ink) !important; box-shadow:none !important; font-family:var(--rd-sans); }
.msg.user .bubble{ background:var(--rd-tc-soft) !important; border:1px solid transparent !important; color:var(--rd-ink) !important; box-shadow:none !important; font-family:var(--rd-sans); }
.composer{ background:linear-gradient(180deg, transparent 0%, var(--rd-bg) 28%) !important; }
.composer-inner{ background:var(--rd-card) !important; border:1.5px solid var(--rd-line) !important; box-shadow:var(--rd-shadow) !important; }
.composer-inner:focus-within{ border-color:var(--rd-tc) !important; }
.send-btn{ background:var(--rd-tc) !important; color:#fff !important; border:0 !important; }
html.dark .send-btn{ color:#1B1612 !important; }
.send-btn:hover:not(:disabled){ background:var(--rd-tc-dk) !important; }
.starter{ background:var(--rd-card) !important; border:1px solid var(--rd-line) !important; color:var(--rd-ink2) !important; font-family:var(--rd-sans) !important; font-style:normal !important; }
.starter:hover{ border-color:var(--rd-tc) !important; color:var(--rd-tc) !important; background:var(--rd-tc-soft) !important; }
.optin{ background:var(--rd-sage-soft) !important; border:1px solid var(--rd-line) !important; color:var(--rd-ink) !important; font-family:var(--rd-sans) !important; }
.optin-yes{ background:var(--rd-tc) !important; color:#fff !important; border:0 !important; font-style:normal !important; }
html.dark .optin-yes{ color:#1B1612 !important; }
.optin-no, .convo-btn{ background:transparent !important; color:var(--rd-ink2) !important; border:1px solid var(--rd-line) !important; font-style:normal !important; }
.disclaimer, .note, .hint{ font-style:normal !important; font-family:var(--rd-sans) !important; color:var(--rd-ink3) !important; }


/* ── reading rhythm on feeling/wisdom pages: one sans for explaining, serif italic only for the tender lines ── */
.sub, .soft, .reset-sub, .practice-steps, .note, .prose-block p, .section-inner > p, .wisdom-src, .wisdom-meaning{ font-family:var(--rd-sans) !important; font-style:normal !important; color:var(--rd-ink2) !important; }
.sub{ font-size:1.05rem; line-height:1.75; }
.soft, .note{ font-size:.98rem; line-height:1.75; }
.prose-block p, .section-inner > p{ line-height:1.8; }
.section-inner > p.symptom-closing, .section-inner > p.hope-anchor, .prose-block p.gentle-lead, .closing-block p.signoff, p.hope-anchor, p.symptom-closing, p.signoff, .gentle-lead, .symptom-closing, .hope-anchor, .signoff, .serif-italic{ font-family:var(--rd-serif) !important; font-style:italic !important; color:var(--rd-ink) !important; }
.symptom-closing, .hope-anchor{ font-size:1.12rem; line-height:1.7; }
.kicker, .section .kicker{ color:var(--rd-sage-dk) !important; }
html.dark .kicker, html.dark .section .kicker{ color:var(--rd-sage) !important; }
.symptom-list li, .story-list li{ color:var(--rd-ink) !important; }
.symptom-list li::marker, .symptom-list li::before{ color:var(--rd-tc) !important; }

/* links inside prose: terracotta with a sage underline, never browser blue */
.prose-block a, .section a:not([class]), .sub a, .soft a, .section-inner p a, .wisdom-meaning a, li a{ color:var(--rd-tc) !important; text-decoration:underline; text-decoration-color:var(--rd-sage); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.prose-block a:hover, .sub a:hover, .soft a:hover, .section-inner p a:hover{ color:var(--rd-tc-dk) !important; }

/* hero captions: readable, not ghostly */
.hero-roman, .hero-en{ color:var(--rd-ink2) !important; }
.hero-tag{ color:var(--rd-ink) !important; }

/* the nav sits plainly in the header bar (no pill of its own since the solid bar, 2026-10-25) */
.top-nav{ background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:0 !important; border-radius:0; box-shadow:none !important; padding:.55rem 1.3rem !important; top:2.4vh !important; }
.mark{ background:color-mix(in srgb,var(--rd-bg) 86%,transparent); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); border:1px solid var(--rd-line); border-radius:18px; padding:.35rem .9rem !important; top:2vh !important; left:2vw !important; }

/* ── buttons (any .btn on any page) ─────────────────────────────────────── */
.btn{ font-family:var(--rd-sans) !important; font-weight:600 !important; border-radius:999px !important; }
.btn-primary{ background:var(--rd-tc) !important; color:#fff !important; border:0 !important; }
.btn-primary:hover{ background:var(--rd-tc-dk) !important; }
html.dark .btn-primary{ color:#1B1612 !important; }
.btn-ghost{ background:transparent !important; color:var(--rd-ink) !important; border:1.5px solid var(--rd-ink) !important; }
.btn-ghost:hover{ background:var(--rd-ink) !important; color:var(--rd-bg) !important; }

/* ── cards used across pages: arch-topped, hairline ─────────────────────── */
.role-card, .join-cta{ background:var(--rd-card) !important; border:1px solid var(--rd-line) !important; border-radius:24px !important; box-shadow:none !important; }
.role-card h3, .join-cta h2{ color:var(--rd-ink) !important; }
.role-card p, .join-cta p{ color:var(--rd-ink2) !important; font-family:var(--rd-sans) !important; }
.join-intro, .join-note{ color:var(--rd-ink2) !important; font-family:var(--rd-sans) !important; font-style:normal !important; }
.join-intro em{ color:var(--rd-tc) !important; }
.roles-head .kicker{ color:var(--rd-sage) !important; }

/* ── footer: dancers holding hands above a hairline ─────────────────────── */
.site-footer{ background:var(--rd-bg) !important; border-top:0 !important; position:relative; padding-top:4.6rem; }
.site-footer::after{ content:""; position:absolute; top:1.2rem; left:0; right:0; height:56px; background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22144%22 height=%2256%22 viewBox=%220 0 144 56%22%3E%3Cg transform=%22translate%2836 30%29 scale%280.5%29%22 fill=%22%23B5573A%22 stroke=%22%23B5573A%22 stroke-width=%223.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%220%22 cy=%22-32%22 r=%228%22 stroke=%22none%22/%3E%3Cpath d=%22M-11 -22 L11 -22 L0 -2 Z M0 -2 L-11 18 L11 18 Z%22 stroke=%22none%22/%3E%3Cpath d=%22M-9 -18 Q-36 -26 -72 -14 M9 -18 Q36 -26 72 -14%22 fill=%22none%22/%3E%3Cpath d=%22M-6 18 L-10 36 M6 18 L10 36%22 fill=%22none%22/%3E%3C/g%3E%3Cg transform=%22translate%28108 30%29 scale%280.5%29%22 fill=%22%236F8A6A%22 stroke=%22%236F8A6A%22 stroke-width=%223.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%220%22 cy=%22-32%22 r=%228%22 stroke=%22none%22/%3E%3Cpath d=%22M-11 -22 L11 -22 L0 -2 Z M0 -2 L-11 18 L11 18 Z%22 stroke=%22none%22/%3E%3Cpath d=%22M-9 -18 Q-36 -26 -72 -14 M9 -18 Q36 -26 72 -14%22 fill=%22none%22/%3E%3Cpath d=%22M-6 18 L-10 36 M6 18 L10 36%22 fill=%22none%22/%3E%3C/g%3E%3C/svg%3E") repeat-x center top / auto 56px; opacity:.95; pointer-events:none; }
html.dark .site-footer::after{ opacity:.8; }
.site-footer .footer-mark{ color:var(--rd-ink) !important; }
.site-footer p, .site-footer span, .site-footer a{ color:var(--rd-ink2) !important; font-family:var(--rd-sans) !important; font-style:normal !important; }
.site-footer h4{ color:var(--rd-tc) !important; font-family:var(--rd-sans) !important; font-style:normal !important; letter-spacing:.18em; }
.site-footer a:hover{ color:var(--rd-tc) !important; }
.site-footer .fine{ color:var(--rd-ink3) !important; }

/* ── safety strip: calm, never alarming-red ─────────────────────────────── */
.crisis-strip{ background:var(--rd-bg) !important; color:var(--rd-ink2) !important; border-top:1px solid var(--rd-line) !important; font-family:var(--rd-sans) !important; box-shadow:0 -10px 24px -20px rgba(90,60,40,.4); }
.crisis-strip strong{ color:var(--rd-tc) !important; font-family:var(--rd-sans) !important; }
.crisis-strip a{ color:var(--rd-sage-dk) !important; border-bottom-color:var(--rd-sage) !important; }
html.dark .crisis-strip a{ color:var(--rd-sage) !important; }

/* ── motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; } }

/* ═══ Typography lock: Plus Jakarta Sans only ═══ */
body, button, input, select, textarea{ font-family:var(--rd-sans); }
h1, h2, h3, h4{ font-family:var(--rd-sans) !important; font-weight:600 !important; letter-spacing:-.02em; line-height:1.15; }
h1{ letter-spacing:-.03em; }
/* a sans has no true italic: accents become upright, bolder and terracotta; tender lines keep their softer tone */
*:not(#rd-a):not(#rd-b){ font-style:normal !important; }
em, i, .wisdom-hero h1 em, h1 em, h2 em, h3 em{ font-style:normal !important; font-weight:600; }
.gentle-lead, .symptom-closing, .hope-anchor, .signoff, .serif-italic, blockquote, .wisdom-text, .tender, .q{ font-weight:500; line-height:1.65; }
.hero-roman, .hero-en, .hero-tag{ font-weight:500; }
.hi, .deva, [lang="hi"], [lang="mr"]{ font-family:var(--rd-deva); }

/* ═══════════ Calm elements (research notes: docs/design-directions/calm-elements.md) ═══════════ */
/* breathing pace: 10 s per breath ≈ 6 breaths a minute */
@keyframes rd-breathe{ 0%,100%{ transform:scale(.93); opacity:.72; } 50%{ transform:scale(1.07); opacity:1; } }
@keyframes rd-sun{ 0%,100%{ transform:scale(.94); } 50%{ transform:scale(1.06); } }
.hero-canvas-wrap::before{ animation:rd-breathe 10s ease-in-out infinite; }
.rd-sun{ transform-box:fill-box; transform-origin:50% 100%; animation:rd-sun 10s ease-in-out infinite; }

/* horizon dividers between sections: a curve, never a hard rule */
.section, .hub-axis{ position:relative; }
main > .section:not(:last-of-type)::after, main > .hub-axis:not(:last-of-type)::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translate(-50%,50%); width:180px; height:30px; z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 32%22%3E%3Cpath d=%22M8 24 Q100 14 192 24%22 fill=%22none%22 stroke=%22%238FA888%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M90 20.6 a10 10 0 0 1 20 0%22 fill=%22%23F2D9A5%22 stroke=%22%23D07B58%22 stroke-width=%221.2%22/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none; opacity:.9; }
main > .section:nth-of-type(3n+2):not(:last-of-type)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 32%22%3E%3Cellipse cx=%22100%22 cy=%2216%22 rx=%2212%22 ry=%223.2%22 fill=%22none%22 stroke=%22%23D07B58%22 stroke-width=%221.3%22/%3E%3Cellipse cx=%22100%22 cy=%2216%22 rx=%2230%22 ry=%227%22 fill=%22none%22 stroke=%22%238FA888%22 stroke-width=%221.2%22 stroke-opacity=%22.8%22/%3E%3Cellipse cx=%22100%22 cy=%2216%22 rx=%2256%22 ry=%2211%22 fill=%22none%22 stroke=%22%238FA888%22 stroke-width=%221.1%22 stroke-opacity=%22.45%22/%3E%3C/svg%3E"); }
main > .section:nth-of-type(3n):not(:last-of-type)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 32%22%3E%3Cpath d=%22M40 27 Q100 19 160 27%22 fill=%22none%22 stroke=%22%238FA888%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M100 23 V12%22 stroke=%22%236F8A6A%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M100 15 C93 14 90 9 91 6 C96 6 100 10 100 15 Z%22 fill=%22%238FA888%22/%3E%3Cpath d=%22M100 13 C106 12 110 8 110 5 C105 5 101 8 100 13 Z%22 fill=%22%23D07B58%22 fill-opacity=%22.85%22/%3E%3C/svg%3E"); }
html.dark main > .section:not(:last-of-type)::after, html.dark main > .hub-axis:not(:last-of-type)::after{ opacity:.6; }

/* fractal sprigs in the wide margins of long reads (desktop only, never over text) */
@media (min-width:1240px){
  .calm-long main > .section[id]:nth-of-type(4n+1)::before, .calm-long main > .section[id]:nth-of-type(4n+3)::before{
    display:block !important; content:""; position:absolute; inset:auto; top:4.5rem; width:160px; height:250px;
    background:url('/art/sprig-1.svg') center top/contain no-repeat; opacity:.6; mix-blend-mode:normal; filter:none; z-index:0; pointer-events:none; }
  .calm-long main > .section[id]:nth-of-type(4n+1)::before{ left:calc(50% - 600px); }
  .calm-long main > .section[id]:nth-of-type(4n+3)::before{ right:calc(50% - 600px); left:auto; transform:scaleX(-1); background-image:url('/art/sprig-2.svg'); }
  html.dark .calm-long main > .section[id]::before{ opacity:.35 !important; }
}

/* grounding pause */
.calm-wrap{ display:flex; justify-content:center; padding:1.5rem 1.5rem 0; }
.calm-wrap.calm-home{ padding:4.5rem 1.5rem 0; }
.calm-pause{ display:flex; gap:1.4rem; align-items:center; width:100%; max-width:600px; padding:1.3rem 1.6rem 1.3rem 1.3rem; border-radius:60px 28px 28px 60px; background:var(--rd-sage-soft); border:1px solid var(--rd-line); }
.calm-breath{ position:relative; flex:none; width:76px; height:76px; display:grid; place-items:center; }
.calm-ring{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--rd-sage); background:radial-gradient(circle, var(--rd-bg) 0%, transparent 70%); animation:rd-breathe 10s ease-in-out infinite; }
.calm-in, .calm-out{ position:relative; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--rd-sage-dk); grid-area:1/1; animation:calm-in 10s ease-in-out infinite; }
.calm-out{ animation-name:calm-out; }
html.dark .calm-in, html.dark .calm-out{ color:var(--rd-sage); }
@keyframes calm-in{ 0%,40%{ opacity:1; } 46%,96%{ opacity:0; } 100%{ opacity:1; } }
@keyframes calm-out{ 0%,50%{ opacity:0; } 56%,90%{ opacity:1; } 96%,100%{ opacity:0; } }
.calm-k{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--rd-sage-dk); margin-bottom:.35rem; }
html.dark .calm-k{ color:var(--rd-sage); }
.calm-txt p{ margin:0 !important; font-size:1rem !important; line-height:1.65 !important; color:var(--rd-ink2) !important; text-align:left; }
.calm-scene{ display:block; width:min(300px,72%); height:auto; margin:0 auto 1.6rem; }

/* home: one gentle image per feeling */
.f-glyph{ display:block; width:40px; height:40px; margin:0 auto .5rem; color:var(--rd-tc); }
.f-card:nth-child(3n+2) .f-glyph{ color:var(--rd-sage-dk); } .f-card:nth-child(3n) .f-glyph{ color:#C46B48; }
html.dark .f-card:nth-child(3n+2) .f-glyph{ color:var(--rd-sage); } html.dark .f-card:nth-child(3n) .f-glyph{ color:var(--rd-tc); }
.f-glyph svg path, .f-glyph svg circle, .f-glyph svg ellipse{ stroke-width:1.3; }
.f-glyph svg{ width:100%; height:100%; }

@media (max-width:600px){
  .calm-pause{ flex-direction:column; text-align:center; border-radius:28px; padding:1.4rem 1.2rem; }
  .calm-txt p{ text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .hero-canvas-wrap::before, .rd-sun, .calm-ring{ animation:none !important; }
  .calm-in{ animation:none !important; opacity:1; } .calm-out{ display:none; }
}

/* ── logo: the Autumn leaf branch + the name in the site's own fonts (2026-10-25) ──
   Every page's top-left <a class="mark">मनित्य<small>Manitya</small></a> becomes: the branch,
   then "manitya" (Plus Jakarta Sans) with मनित्य (Noto Sans Devanagari) beside it, and the line
   "Observe · Reflect · Let go · Live" under the name, beside the branch. Live text, so it is crisp at any size and
   still reads naturally to screen readers. No box around it. */
@media screen{
  .mark{ display:grid !important; grid-template-columns:max-content max-content 1fr; column-gap:.55rem; align-items:baseline; align-content:center;
    width:auto !important; height:auto !important; box-sizing:border-box !important; text-decoration:none !important;
    background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important; padding:0 !important;
    font-family:var(--rd-deva) !important; font-size:24px !important; font-weight:500 !important; line-height:1.15 !important;
    letter-spacing:0 !important;   /* never space Devanagari: it breaks the headline (shirorekha) */
    color:var(--rd-tc) !important; }
  .mark::before{ content:""; grid-column:1; grid-row:1 / span 2; align-self:center; margin-right:.1rem; width:56px; height:46px;
    background:url('/logo/manitya-mark.svg') center/contain no-repeat; }
  html.dark .mark::before{ background-image:url('/logo/manitya-mark-on-dark.svg'); }
  .mark small{ display:block !important; grid-column:2; grid-row:1; margin:0 !important; font-family:var(--rd-sans) !important;
    font-size:29px !important; font-weight:700 !important; letter-spacing:-.03em !important; line-height:1 !important;
    text-transform:lowercase; color:var(--rd-ink) !important; opacity:1 !important; }
  .mark::after{ content:"Observe  ·  Reflect  ·  Let go  ·  Live"; grid-column:2 / -1; grid-row:2;
    margin-top:.45rem; white-space:nowrap; font-family:var(--rd-sans); font-size:11px; font-weight:500; line-height:1;
    letter-spacing:.02em; color:var(--rd-ink2); }
  .chat-header .mark::after{ display:none; }      /* the chat keeps its header compact */
  @media (max-width:760px){
    .mark{ font-size:18px !important; column-gap:.4rem; }
    .mark small{ font-size:22px !important; }
    .mark::before{ width:42px; height:34px; }
    .mark::after{ display:none; }                 /* too long for a phone's header */
  }
}
/* ── a solid bar behind the fixed logo, nav and day / night button (2026-10-25) ──
   The logo has no box of its own, so page text scrolled straight through it; the bar gives the header
   the page's own background, so whatever scrolls up passes cleanly underneath. Only on pages whose logo
   sits directly in <body> (not the chat, which has its own header, nor the app, which has its own bar;
   html.in-app hides the logo but it is still in the page). The chapter pills of wisdom-* and the Tukaram
   reader drop to just under the bar. */
@media screen{
  html:not(.in-app) body:has(> .mark)::after{ content:""; position:fixed; top:0; left:0; right:0; height:86px; z-index:5; pointer-events:none;
    background:var(--rd-bg); border-bottom:1px solid var(--rd-line); }
  html:not(.in-app) body:has(> .mark) .sticky-jumper{ top:96px !important; }
  @supports (animation-timeline: scroll()){   /* the homepage opens without the bar's line; it draws in once you scroll */
    html:not(.in-app) body:has(> .mark):has(.h-hero)::after{ animation:rd-bar-line linear both; animation-timeline:scroll(root); animation-range:0 60px; }
    @keyframes rd-bar-line{ from{ border-bottom-color:transparent; } to{ border-bottom-color:var(--rd-line); } }
  }
  @media (max-width:760px){
    html:not(.in-app) body:has(> .mark)::after{ height:72px; }
    html:not(.in-app) body:has(> .mark) .sticky-jumper{ top:80px !important; }
  }
}