/* Dharma Atlas (dharma-atlas.com): yoga, meditation, health and the Paths of Practice map.
   Loaded after the shared /styles.css (from thirteenpostures.com), which gives the components; this file gives
   the site its own look: warm dawn paper with saffron and lotus in light mode (the default), indigo night in
   dark mode, and the Om (ॐ) at the centre. */
:root {
  --ground: #f7f2ea;
  --paper: #fffcf7;
  --ink: #2a2420;
  --ink-soft: #6a5e55;
  --accent: #a14e1c;        /* saffron */
  --accent-wash: #f7e4d3;
  --timber: #a34a63;        /* lotus */
  --timber-wash: #f5e1e6;
  --sage: #557a5d;
  --stone: #e6dccd;
  --stone-soft: #f0e8dc;
  --ocean: #efe7da;
  --land: #d6c8b4;
  --glow: #f3b46f;
  --f-om: "Noto Serif Devanagari", "Nirmala UI", "Mangal", "Kohinoor Devanagari", serif;
  --shadow: 0 1px 2px rgba(42, 36, 32, .05), 0 12px 32px rgba(120, 70, 30, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #14121c; --paper: #1d1a27; --ink: #efe9e1; --ink-soft: #b5aca2;
    --accent: #f0a868; --accent-wash: #33261f; --timber: #e7a0b5; --timber-wash: #3a2530; --sage: #9cc2a5;
    --stone: #353047; --stone-soft: #262233; --ocean: #100e17; --land: #3a3550; --glow: #c9773a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --ground: #14121c; --paper: #1d1a27; --ink: #efe9e1; --ink-soft: #b5aca2;
  --accent: #f0a868; --accent-wash: #33261f; --timber: #e7a0b5; --timber-wash: #3a2530; --sage: #9cc2a5;
  --stone: #353047; --stone-soft: #262233; --ocean: #100e17; --land: #3a3550; --glow: #c9773a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.4);
}
/* Dark-mode buttons: saffron is light there, so their text goes dark */
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .tb-signin, :root[data-theme="dark"] .tb-avatar,
:root[data-theme="dark"] .fp-q-play { color: var(--ground); }

.om { font-family: var(--f-om); font-weight: 400; line-height: 1; }

/* ---------- the Om mark in the menu ---------- */
.da .brand-glyph { writing-mode: horizontal-tb; display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; background: var(--accent); color: var(--paper); font: 400 23px/1 var(--f-om); letter-spacing: 0; }
:root[data-theme="dark"] .da .brand-glyph { color: var(--ground); }
.da .tb-brand .brand-glyph { font-size: 23px; padding: 0; }
.da .tb-brand .brand-name { font-weight: 600; letter-spacing: .01em; }

/* ---------- hero: the Om in a rising sun with soft rings ---------- */
.da-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(20px, 5vw, 64px); padding: clamp(28px, 6vw, 72px) 0 8px; }
.da-hero-text { display: grid; gap: 18px; }
.da-hero h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.05; }
.da-hero h1 span { display: block; }
.da-hero h1 span:last-child { color: var(--accent); }
.da-hero p { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--ink-soft); margin: 0; max-width: 52ch; line-height: 1.6; }
.da-sun { position: relative; aspect-ratio: 1; width: min(100%, 440px); justify-self: center; display: grid; place-items: center; }
.da-sun::before { content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--glow), color-mix(in srgb, var(--glow) 35%, transparent) 55%, transparent 72%);
  opacity: .55; animation: da-breathe 9s ease-in-out infinite; }
.da-sun svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); opacity: .5; }
.da-sun .om { position: relative; font-size: clamp(8rem, 22vw, 13.5rem); color: var(--accent); text-shadow: 0 6px 40px color-mix(in srgb, var(--glow) 60%, transparent); }
.da-sun small { position: absolute; bottom: 4%; font: 600 var(--s-xs)/1.4 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
@keyframes da-breathe { 0%, 100% { transform: scale(.94); opacity: .45; } 50% { transform: scale(1.05); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .da-sun::before { animation: none; } }
/* Hero picture (Gemini): its cream paper fades into the page at the edges; in dark mode it sits in a soft rounded frame. */
.da-hero-art { margin: 0; justify-self: center; width: min(100%, 560px); }
/* Light theme: 'darken' lets the faint mandala behind show through the picture's cream paper (matched to the page). */
:root:not([data-theme="dark"]) .da-hero-art img { mix-blend-mode: darken; }
.da-hero-art img { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); }
[data-theme="dark"] .da-hero-art img { border-radius: 28px; opacity: .94;
  -webkit-mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 70%, transparent 100%); }

/* ---------- explore cards: a Sanskrit word over each part of the site ---------- */
.da-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.da-card { position: relative; overflow: hidden; display: grid; align-content: end; gap: 6px; min-height: 230px; padding: 20px;
  border-radius: 20px; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--stone); isolation: isolate; }
.da-card::before { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, var(--tint, var(--accent-wash)) 0 60%, transparent 61%); z-index: -1; transition: transform .3s; }
.da-card:hover { color: var(--ink); border-color: var(--accent); }
.da-card:hover::before { transform: scale(1.12); }
.da-card .om { position: absolute; top: 22px; left: 20px; font-size: 1.9rem; color: var(--tone, var(--accent)); }
.da-card b { font: 600 1.4rem/1.2 var(--f-display); }
.da-card span:not(.om) { font-size: var(--s-sm); color: var(--ink-soft); line-height: 1.5; }
.da-card.lotus { --tint: var(--timber-wash); --tone: var(--timber); }
.da-card.sage { --tint: color-mix(in srgb, var(--sage) 18%, transparent); --tone: var(--sage); }
/* With a picture (Gemini): it fills the top of the card, the Sanskrit word sits under it, the corner circle goes. */
.da-card:has(.da-card-pic) { align-content: start; min-height: 0; padding-top: 0; }
.da-card:has(.da-card-pic)::before { display: none; }
.da-card-pic { display: block; width: calc(100% + 40px); margin: 0 -20px 4px; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  transition: transform .4s ease; }
.da-card:hover .da-card-pic { transform: scale(1.04); }
.da-card:has(.da-card-pic) .om { position: static; font-size: 1.5rem; line-height: 1.3; }
[data-theme="dark"] .da-card-pic { opacity: .92; }

/* ---------- AUM: the meaning of the sound ---------- */
.da-aum { margin-top: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 5vw, 56px); align-items: center;
  padding: clamp(22px, 4vw, 44px); border-radius: 24px; background: var(--paper); border: 1px solid var(--stone); }
.da-aum > .om { font-size: clamp(5rem, 12vw, 8rem); color: var(--timber); }
.da-aum h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 8px; }
.da-aum > div > p { color: var(--ink-soft); margin: 0 0 18px; max-width: 64ch; }
.da-aum ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.da-aum li { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: var(--ground); }
.da-aum li b { font: 600 1.35rem/1 var(--f-display); color: var(--accent); }
.da-aum li span { font-size: var(--s-xs); color: var(--ink-soft); line-height: 1.45; }
.da-aum cite { display: block; margin-top: 14px; font-size: var(--s-xs); color: var(--ink-soft); font-style: normal; }

/* ---------- sister sites ---------- */
.da-sisters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.da-sister { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; align-items: center; padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--stone); background: var(--paper); color: var(--ink); text-decoration: none; }
.da-sister:hover { color: var(--ink); border-color: var(--accent); }
.da-sister .cjk { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--stone-soft);
  font: 600 1.1rem/1 var(--f-zh, var(--f-display)); color: var(--sage); }
.da-sister b { font: 600 1.1rem/1.2 var(--f-display); align-self: end; }
.da-sister span:not(.cjk) { font-size: var(--s-xs); color: var(--ink-soft); align-self: start; }

/* the one-tap sessions: round saffron pictures for the yoga look */
.da .fp-q { border-radius: 18px; }
.da .fp-q-pic { border-radius: 50%; background: var(--accent-wash); font: 400 1.05rem/1 var(--f-om); color: var(--accent); }
.da .fp-q-pic.lotus { background: var(--timber-wash); color: var(--timber); }
.da .fp-atlas { border-radius: 24px; }
.da .fp-s .cjk { font-family: var(--f-om); }
.da .acct-streak .cjk { font-family: var(--f-om); }

@media (max-width: 900px) {
  .da-hero { grid-template-columns: 1fr; }
  .da-sun { width: min(78vw, 340px); order: -1; }
  .da-hero-art { width: min(80vw, 380px); order: -1; }
  .da-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .da-aum ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .da-hero { text-align: center; }
  .da-hero .fp-cta { justify-content: center; }
  .da-hero p { margin-inline: auto; }
  .da-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .da-card { min-height: 170px; padding: 16px; }
  .da-card b { font-size: 1.15rem; }
  .da-card span:not(.om) { font-size: var(--s-xs); }
  .da-card-pic { width: calc(100% + 32px); margin: 0 -16px 2px; }
  .da-card:has(.da-card-pic) .om { font-size: 1.25rem; }
  .da-aum { grid-template-columns: 1fr; text-align: center; }
  .da-aum ol { text-align: left; }
  .da-sisters { grid-template-columns: 1fr; }
}

/* Sanskrit glyphs (e.g. the Yoga tile on /account/) use the Devanagari face, not the Chinese one. */
.da .cjk[lang="sa"] { font-family: var(--f-om); }

/* A faint mandala (Gemini line drawing) drifting behind the top of each page, half off the right edge. It is a mask,
   so the theme colours it: saffron on paper, a soft glow on indigo. --mandala-o sets how faint. */
body.da { position: relative; isolation: isolate; overflow-x: clip; }
body.da::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -150px; right: -300px; width: 1000px; aspect-ratio: 1;
  background: var(--accent); opacity: var(--mandala-o, .07);
  -webkit-mask: url(/images/bg-mandala.webp) center / contain no-repeat;
          mask: url(/images/bg-mandala.webp) center / contain no-repeat; }
[data-theme="dark"] body.da::before { background: var(--glow); opacity: var(--mandala-o-dark, .07); }
@media (max-width: 900px) { body.da::before { width: 620px; top: -40px; right: -250px; } }