/* Spiritual Journey
   Sindoor (vermilion-saffron) header and footer, cream paper body, green headings,
   brown text, copper-gold-brass accents. */

:root {
  --sindoor-900: #7E1A0B;
  --sindoor-800: #A12812;
  --sindoor-700: #C2341A;
  --sindoor-600: #D9471F;
  --sindoor-500: #E8601F;
  --saffron-400: #F58A1F;
  --saffron-300: #FFA94D;

  --cream-50: #FFFDF7;
  --cream-100: #FFF8EA;
  --cream-200: #FBEFD8;
  --cream-300: #F1DFBD;
  --cream-400: #E6CB9C;

  --green-900: #123A20;
  --green-800: #1B4D2B;
  --green-700: #24633A;
  --green-600: #2F7A44;
  --green-500: #4C9A5B;
  --green-200: #CFE6C4;
  --green-100: #E8F3E2;

  --brown-900: #2A1A10;
  --brown-800: #3B2618;
  --brown-700: #4E3322;
  --brown-600: #6B4630;
  --brown-500: #8A6346;
  --brown-300: #C3A383;

  --gold-200: #FBE7AE;
  --gold-300: #F3CF72;
  --gold-500: #D49A36;
  --gold-700: #9C6B1E;
  --copper-500: #B8692E;
  --copper-700: #7A3A17;

  --header-bg:
    radial-gradient(circle at 10px 10px, rgba(255, 226, 160, .16) 1.4px, transparent 2px) 0 0 / 20px 20px,
    linear-gradient(115deg, #A92A12 0%, #C9381B 30%, #E2531C 62%, #F07A1F 100%);
  --zari: linear-gradient(90deg, #8C5A1C, #F3CF72 20%, #B8692E 40%, #FBE7AE 55%, #B8692E 70%, #F3CF72 85%, #8C5A1C);

  --font-brand: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-head: 'Cormorant Garamond', 'Ramaraja', 'Tiro Telugu', 'Tiro Devanagari Sanskrit', Georgia, serif;
  --font-body: 'EB Garamond', 'Tiro Telugu', 'Tiro Devanagari Sanskrit', Georgia, 'Times New Roman', serif;
  --font-te: 'Tiro Telugu', 'Noto Serif Telugu', 'Gautami', 'EB Garamond', serif;
  --font-te-head: 'Ramaraja', 'Tiro Telugu', serif;
  --font-deva: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', 'Kohinoor Devanagari', serif;

  --text-scale: 1;
  --radius: 18px;
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 30px -16px rgba(94, 44, 12, .35);
  --shadow-lift: 0 24px 48px -22px rgba(94, 44, 12, .55);
  --header-h: 68px;
  --dock-h: 76px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); -webkit-tap-highlight-color: transparent; }
a, button, input, select, label, summary { touch-action: manipulation; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--brown-800);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(245, 138, 31, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(76, 154, 91, .07), transparent 60%),
    var(--cream-100);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
:lang(te) { line-height: 1.85; }
img, svg { max-width: 100%; }
a { color: var(--green-700); }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-head); color: var(--green-800); line-height: 1.15; margin: 0; font-weight: 700; }
html:lang(te) h1, html:lang(te) h2, html:lang(te) h3 { font-family: var(--font-te-head); font-weight: 400; line-height: 1.4; }
.deva, [lang="sa"] { font-family: var(--font-deva); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--cream-50); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 6px; }
main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); outline: none; }

/* ------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: var(--header-bg);
  color: #FFF4E2;
  box-shadow: 0 6px 18px -8px rgba(126, 26, 11, .6);
}
.site-header::before { /* zari border */
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--zari);
}
.site-header::after { /* toran: marigolds and mango leaves hanging from the border */
  content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 4px); height: 16px; pointer-events: none;
  background:
    radial-gradient(circle at 12px 6px, #F59E0B 0 5px, #D97706 5.5px, transparent 6.5px) 0 0 / 56px 16px repeat-x,
    radial-gradient(circle at 40px 6px, #FB923C 0 5px, #EA580C 5.5px, transparent 6.5px) 0 0 / 56px 16px repeat-x,
    radial-gradient(ellipse 4px 8px at 26px 7px, #3E8E4E 92%, transparent 100%) 0 0 / 56px 16px repeat-x,
    radial-gradient(ellipse 4px 8px at 54px 7px, #2F7A44 92%, transparent 100%) 0 0 / 56px 16px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(94, 44, 12, .25));
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.brand-emblem { width: 48px; height: 48px; flex: none; filter: drop-shadow(0 2px 4px rgba(60, 15, 0, .45)); }
.brand-emblem .sj-rays, .footer-emblem .sj-rays, .flat-emblem .sj-rays, .plate-emblem .sj-rays {
  transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite;
}
.brand:hover .sj-rays { animation-duration: 6s; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-main { font-family: var(--font-brand); font-weight: 700; font-size: 1.3rem; letter-spacing: .04em; color: #FFF7E8; text-shadow: 0 1px 0 rgba(90, 20, 0, .5); white-space: nowrap; }
html:lang(te) .brand-main { font-family: var(--font-te-head); letter-spacing: 0; font-size: 1.35rem; font-weight: 400; }
.brand-sub { font-size: .86rem; color: var(--gold-200); white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.hdr-link { display: inline-flex; align-items: center; gap: 6px; color: #FFF4E2; text-decoration: none; padding: 8px 10px; border-radius: 999px; font-weight: 500; }
.hdr-link:hover { background: rgba(255, 255, 255, .14); }
.ic { width: 22px; height: 22px; flex: none; }

.lang-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(60, 12, 0, .28); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
.lang-toggle button { border: 0; background: transparent; color: #FFE9CC; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .95rem; transition: background .25s, color .25s, transform .2s; }
.lang-toggle button[aria-pressed="true"] { background: linear-gradient(180deg, #FFF6DD, #F3CF72); color: var(--sindoor-900); box-shadow: 0 2px 6px rgba(60, 15, 0, .35); }
.lang-toggle button:active { transform: scale(.95); }
.lang-toggle.light { background: var(--cream-200); }
.lang-toggle.light button { color: var(--brown-700); }
.lang-toggle.light button[aria-pressed="true"] { background: var(--header-bg); color: #FFF7E8; }

.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--cream-400); background: var(--cream-50); color: var(--brown-700); cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.icon-btn:hover { background: #fff; box-shadow: 0 4px 12px -6px rgba(94, 44, 12, .5); transform: translateY(-1px); }
.icon-btn.on-dark { background: rgba(255, 255, 255, .14); border-color: rgba(255, 230, 190, .45); color: #FFF4E2; }
.icon-btn.on-dark:hover { background: rgba(255, 255, 255, .24); }
.icon-btn[aria-pressed="true"] { background: var(--header-bg); color: #FFF4E2; border-color: transparent; }
.icon-btn:disabled { opacity: .4; cursor: default; transform: none; }
.aa { font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1; }
.aa.big { font-size: 1.3rem; }
.aa sup { font-size: .65em; }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 13px 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font-weight: 600; font-size: 1.02rem; line-height: 1.2; transition: transform .2s, box-shadow .25s, background .25s;
}
.btn small { display: block; font-weight: 500; font-size: .82rem; opacity: .9; }
.btn-primary { background: var(--header-bg); color: #FFF7E8; box-shadow: 0 10px 22px -10px rgba(169, 42, 18, .75), inset 0 1px 0 rgba(255, 230, 190, .5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(169, 42, 18, .85), inset 0 1px 0 rgba(255, 230, 190, .5); }
.btn-ghost { background: transparent; color: var(--green-800); box-shadow: inset 0 0 0 2px var(--green-600); }
.btn-ghost:hover { background: var(--green-100); }
.btn-soft { background: var(--cream-200); color: var(--brown-800); box-shadow: inset 0 0 0 1px var(--cream-400); }
.btn-soft:hover { background: var(--cream-300); }
.btn-small { padding: 9px 16px; font-size: .95rem; }
.btn-danger { background: transparent; color: var(--sindoor-800); box-shadow: inset 0 0 0 1px rgba(161, 40, 18, .4); }
.link-btn { background: none; border: 0; color: var(--green-700); font-weight: 600; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- footer */

.site-footer {
  position: relative; margin-top: 64px; padding: 40px var(--gutter) 32px; background: var(--header-bg); color: #FFEBD0; text-align: center;
}
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--zari); }
.footer-inner { max-width: 760px; margin: 0 auto; display: grid; justify-items: center; gap: 10px; }
.footer-emblem { width: 64px; height: 64px; }
.footer-mantra { margin: 0; display: grid; gap: 2px; }
.footer-mantra .deva { font-size: 1.5rem; color: var(--gold-200); }
.footer-note { margin: 6px 0 0; font-size: .92rem; color: #FFE2BF; }
.footer-credit { margin: 0; font-size: .78rem; opacity: .75; }
body[data-view="reader"] .site-footer { display: none; }

/* ------------------------------------------------------------- shared */

.orn-wrap { display: block; width: min(220px, 60%); margin: 0 auto; }
.orn-wrap.small { width: 120px; }
.orn { display: block; width: 100%; height: auto; }
.section-head { text-align: center; margin: 72px auto 28px; max-width: 720px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top: 8px; }
.section-head p { margin: 10px 0 0; color: var(--brown-600); font-size: 1.08rem; }
.bar { display: block; height: 6px; border-radius: 99px; background: var(--cream-300); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-600), var(--gold-500)); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.panel { background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-soft); margin-top: 28px; }
.panel h2 { font-size: 1.7rem; }
.panel > p { color: var(--brown-600); margin: 8px 0 0; }

.ring-wrap { position: relative; display: inline-grid; place-items: center; width: 76px; height: 76px; }
.ring-wrap.big { width: 140px; height: 140px; }
.ring-wrap.small { width: 50px; height: 50px; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring-track { stroke: var(--cream-300); }
.ring-fill { stroke: url(#g-gold); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .7, .2, 1); }
.ring-label { position: relative; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--green-800); text-align: center; line-height: 1; }
.ring-label small { display: block; font-size: .62em; color: var(--brown-500); font-weight: 600; margin-top: 2px; }
.big .ring-label { font-size: 2rem; }
.small .ring-label { font-size: .9rem; }
.small .ring-label small { font-size: .72em; }

/* Rise into view */
.reveal { opacity: 0; transform: translateY(26px) perspective(800px) rotateX(10deg); transition: opacity .7s ease var(--d, 0ms), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* 3D tilt */
[data-tilt] {
  position: relative; transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}
[data-tilt].tilting { transition: transform .08s linear, box-shadow .4s; }
[data-tilt] [data-depth] { transform: translateZ(28px); }
.card-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%);
  opacity: 0; transition: opacity .35s; mix-blend-mode: soft-light;
}
.tilting .card-glare { opacity: 1; }

/* ------------------------------------------------------------- home */

.hero {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(16px, 4vw, 56px);
  padding: 48px 0 24px; min-height: min(640px, calc(100vh - var(--header-h)));
}
.hero-emblem { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; cursor: pointer; display: grid; place-items: center; }
.hero-emblem .emblem-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.sunburst {
  position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 213, 128, .55) 0%, rgba(255, 213, 128, 0) 46%),
    repeating-conic-gradient(from 0deg, rgba(232, 96, 31, .16) 0deg 5deg, rgba(255, 248, 234, 0) 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 32%, transparent 70%);
  mask: radial-gradient(circle, #000 32%, transparent 70%);
  animation: spin 140s linear infinite;
}
.emblem-flat { position: relative; width: 82%; animation: float 6s ease-in-out infinite; }
.emblem-flat svg { width: 100%; height: auto; display: block; }
.hero-emblem.is-3d .emblem-flat { display: none; }
.hero-emblem.spin .emblem-flat { animation: coin 1.2s cubic-bezier(.3, .7, .2, 1); }
.emblem-hint {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); font-size: .85rem; color: var(--brown-500);
  background: rgba(255, 253, 247, .8); padding: 4px 12px; border-radius: 99px; border: 1px solid var(--cream-300); white-space: nowrap;
  animation: hint 4s ease-in-out 2s infinite;
}
.eyebrow { margin: 0 0 12px; font-family: var(--font-brand); letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: var(--sindoor-700); font-weight: 600; }
html:lang(te) .eyebrow { font-family: var(--font-te); letter-spacing: 0; text-transform: none; font-size: 1rem; }
.hero-title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); color: var(--green-800); }
.hero-title::after { content: ''; display: block; width: 120px; height: 4px; margin-top: 18px; border-radius: 4px; background: var(--zari); }
.hero-lead { font-size: 1.18rem; color: var(--brown-700); margin: 18px 0 26px; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px;
  background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft);
}
.stat { display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; padding: 6px; }
.stat + .stat { border-left: 1px dashed var(--cream-400); }
.stat b { font-family: var(--font-head); font-size: 2.3rem; line-height: 1; color: var(--green-800); }
.stat b small { font-size: .5em; color: var(--brown-500); }
.stat > span:last-child { color: var(--brown-600); font-size: .95rem; }

.epic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.epic-card {
  display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: 100%; padding: 26px 22px 20px; border-radius: 22px; text-decoration: none; color: inherit;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(245, 138, 31, .14), transparent 60%),
    linear-gradient(180deg, var(--cream-50), var(--cream-100));
  border: 1px solid var(--cream-400); box-shadow: var(--shadow-soft);
}
.epic-card::before { content: ''; position: absolute; inset: 7px; border-radius: 16px; border: 1px solid rgba(212, 154, 54, .45); pointer-events: none; }
.epic-card:hover { box-shadow: var(--shadow-lift); }
.card-glyph { display: block; width: 92px; height: 92px; margin: 4px auto 0; filter: drop-shadow(0 6px 8px rgba(122, 58, 23, .3)); transition: transform .6s; }
.epic-card:hover .card-glyph { transform: translateZ(46px) rotate(-6deg) scale(1.06); }
.card-glyph svg { width: 100%; height: 100%; }
.card-body { display: grid; gap: 4px; text-align: center; }
.card-title { font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; color: var(--green-800); line-height: 1.2; }
html:lang(te) .card-title { font-family: var(--font-te-head); font-weight: 400; }
.card-alt { font-family: var(--font-head); color: var(--sindoor-700); font-size: 1.1rem; }
.card-sub { color: var(--brown-600); font-size: .98rem; }
.card-meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.card-meta span { font-size: .8rem; padding: 3px 10px; border-radius: 99px; background: var(--green-100); color: var(--green-800); }
.card-progress { display: grid; gap: 6px; font-size: .85rem; color: var(--brown-500); text-align: center; }

.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.how-steps li { background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-soft); text-align: center; }
.how-num { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--header-bg); color: #FFF7E8; font-family: var(--font-brand); font-size: 1.4rem; font-weight: 700; box-shadow: 0 0 0 4px var(--cream-50), 0 0 0 6px var(--gold-300); margin-bottom: 12px; }
.how-steps h3 { font-size: 1.45rem; }
.how-steps p { margin: 8px 0 0; color: var(--brown-600); }

/* ------------------------------------------------------------- epic page */

.crumbs { display: flex; gap: 8px; align-items: center; padding: 28px 0 0; color: var(--brown-500); font-size: .95rem; }
.crumbs a { color: var(--green-700); text-decoration: none; font-weight: 600; }
.epic-hero { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px, 4vw, 44px); align-items: center; padding: 22px 0 8px; }
.epic-glyph {
  width: clamp(120px, 18vw, 190px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 26px;
  background: radial-gradient(circle at 35% 30%, #FFF8E6, #F6E3BE 60%, #E6C78F);
  box-shadow: 0 0 0 6px var(--cream-50), 0 0 0 8px var(--gold-300), var(--shadow-lift);
}
.epic-glyph svg { width: 100%; height: 100%; }
.epic-intro h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.epic-intro h1 .alt { display: block; font-size: .5em; color: var(--sindoor-700); margin-top: 6px; font-family: var(--font-head); font-weight: 600; }
.epic-intro .subtitle { font-size: 1.2rem; color: var(--brown-700); margin: 10px 0 2px; }
.epic-intro .author { color: var(--brown-500); margin: 0 0 18px; }
.written-note { font-size: .88rem; color: var(--brown-500); margin: 12px 0 0; }

.name-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.name-chip {
  display: grid; gap: 2px; padding: 12px 18px; border-radius: 14px; min-width: 150px;
  background: linear-gradient(180deg, #fff, var(--cream-100)); border: 1px solid var(--cream-400); box-shadow: 0 6px 14px -10px rgba(94, 44, 12, .4);
  transition: transform .3s, box-shadow .3s;
}
.name-chip:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 14px 22px -14px rgba(94, 44, 12, .5); }
.nc-te { font-family: var(--font-te-head); font-size: 1.35rem; color: var(--green-800); line-height: 1.5; }
.nc-en { font-family: var(--font-head); font-weight: 700; color: var(--sindoor-700); }
.nc-note { font-size: .88rem; color: var(--brown-600); }
.name-chips.compact { justify-content: center; }
.name-chips.compact .name-chip { min-width: 0; padding: 8px 14px; }
.tradition { margin: 20px 0 0; padding: 16px 20px; border-left: 4px solid var(--gold-500); background: var(--cream-100); border-radius: 0 12px 12px 0; color: var(--brown-700); }

.lamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 10px 6px; margin-top: 20px; }
.lamp { display: grid; justify-items: center; text-decoration: none; color: var(--brown-500); font-size: .8rem; padding: 4px 0; border-radius: 12px; transition: transform .25s, background .25s; }
.lamp:hover { transform: translateY(-4px); background: var(--cream-200); }
.lamp svg { width: 40px; height: 48px; overflow: visible; }
.lamp .flame { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.lamp .diya-glow { opacity: 0; transition: opacity .8s; }
.lamp.partial .flame { transform: scale(calc(.3 + var(--f) * .6)); }
.lamp.lit .flame { transform: scale(1); animation: flicker 1.8s ease-in-out calc(var(--n) * -0.13s) infinite; }
.lamp.lit .diya-glow { opacity: 1; animation: glow 2.6s ease-in-out calc(var(--n) * -0.2s) infinite; }
.lamp.lit span { color: var(--green-700); font-weight: 700; }
.lamp.current { background: var(--green-100); box-shadow: inset 0 0 0 1.5px var(--green-500); }

.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.section-card {
  display: grid; gap: 10px; align-content: start; height: 100%; padding: 22px; border-radius: var(--radius); text-decoration: none; color: inherit;
  background: var(--cream-50); border: 1px solid var(--cream-300); box-shadow: var(--shadow-soft);
}
.section-card:hover { box-shadow: var(--shadow-lift); border-color: var(--gold-300); }
.section-card.done { background: linear-gradient(180deg, var(--green-100), var(--cream-50)); }
.sc-top { display: flex; gap: 14px; align-items: center; }
.sc-num {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--font-brand); font-weight: 700; color: #FFF7E8; background: var(--header-bg);
  box-shadow: 0 0 0 3px var(--cream-50), 0 0 0 4.5px var(--gold-300);
}
.sc-num .ic { width: 18px; height: 18px; }
.sc-names { display: grid; }
.sc-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--green-800); line-height: 1.25; }
html:lang(te) .sc-title { font-family: var(--font-te-head); font-weight: 400; }
.sc-alt { color: var(--sindoor-700); font-size: .98rem; }
.sc-meaning { font-style: italic; color: var(--green-700); }
.sc-altnames { font-size: .9rem; color: var(--brown-600); }
.sc-altnames b, .gate-alt b, .gate-char-alts b { font-weight: 500; color: var(--green-800); }
.sc-altnames i, .gate-alt i, .gate-char-alts i { color: var(--brown-500); }
.dot { margin: 0 6px; color: var(--gold-500); }
.sc-gist { color: var(--brown-700); font-size: .98rem; }
.sc-foot { display: grid; gap: 6px; font-size: .85rem; color: var(--brown-500); margin-top: auto; }

.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.char-grid > .reveal { display: flex; }
.char-card { display: flex; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1000px; text-align: center; }
.cc-inner { flex: 1; display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.char-card.flipped .cc-inner { transform: rotateY(180deg); }
.char-card:hover:not(.flipped) .cc-inner { transform: rotateY(12deg); }
.cc-face {
  grid-area: 1 / 1; display: grid; align-content: center; gap: 6px; padding: 22px 18px; min-height: 210px; border-radius: var(--radius);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--cream-400); box-shadow: var(--shadow-soft);
}
.cc-front { background: radial-gradient(120% 80% at 50% 0%, rgba(245, 138, 31, .12), transparent 60%), var(--cream-50); }
.cc-back { transform: rotateY(180deg); background: var(--header-bg); color: #FFF4E2; border-color: transparent; }
.cc-te { font-family: var(--font-te-head); font-size: 1.7rem; color: var(--green-800); line-height: 1.4; }
.cc-en { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--sindoor-700); }
.cc-role { color: var(--brown-700); font-size: .95rem; }
.cc-hint { margin-top: 6px; font-size: .78rem; color: var(--gold-700); text-transform: uppercase; letter-spacing: .06em; }
html:lang(te) .cc-hint { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.cc-back-title { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--gold-200); }
html:lang(te) .cc-back-title { font-family: var(--font-te-head); font-weight: 400; }
.cc-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cc-names span { display: grid; padding: 5px 10px; border-radius: 10px; background: rgba(255, 245, 225, .14); border: 1px solid rgba(255, 230, 190, .3); line-height: 1.3; }
.cc-names b { font-family: var(--font-te); font-weight: 400; font-size: 1.02rem; }
.cc-names i { font-size: .78rem; color: var(--gold-200); font-style: normal; }

/* ------------------------------------------------------------- reader */

body[data-view="reader"] { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
body[data-view="reader"] main { max-width: 980px; }
.reader-bar {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top) + 4px); z-index: 30; margin: 20px 0 0;
  display: flex; align-items: center; gap: 10px; padding: 14px 14px 16px; border-radius: 0 0 16px 16px;
  background: rgba(255, 252, 244, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--cream-300); border-top: 0; box-shadow: 0 10px 24px -18px rgba(94, 44, 12, .5);
}
.rb-back { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--green-700); font-weight: 600; white-space: nowrap; }
.rb-section {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 4px 8px; border-radius: 12px; text-align: left;
}
.rb-section:hover { background: var(--cream-200); }
.rb-num { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--header-bg); color: #FFF7E8; font-family: var(--font-brand); font-size: .9rem; font-weight: 700; }
.rb-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--green-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:lang(te) .rb-name { font-family: var(--font-te); font-weight: 400; }
.rb-count { flex: none; font-size: .85rem; color: var(--brown-500); }
.rb-tools { display: flex; gap: 6px; }
.rb-tools .icon-btn { width: 38px; height: 38px; }
.rb-progress { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--cream-300); overflow: hidden; }
.rb-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--sindoor-600), var(--gold-500)); transition: width .6s; }

.book-stage { padding: 26px 0 12px; }
.book { display: grid; perspective: 2400px; perspective-origin: 0% 40%; }
.book > .sheet { grid-area: 1 / 1; }

.sheet {
  position: relative; min-width: 0; transform-origin: left center; backface-visibility: hidden;
  padding: clamp(26px, 5vw, 64px) clamp(20px, 6vw, 76px) clamp(22px, 4vw, 40px);
  border-radius: 6px 16px 16px 6px; border: 1px solid #EAD6B0;
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(255, 255, 255, .7), transparent 50%),
    radial-gradient(120% 120% at 0% 100%, rgba(230, 203, 156, .25), transparent 60%),
    linear-gradient(90deg, rgba(160, 100, 40, .10), rgba(255, 255, 255, 0) 6%),
    var(--cream-50);
  box-shadow: 0 2px 0 #F3E4C6, 0 4px 0 #EAD6B0, 0 30px 50px -30px rgba(94, 44, 12, .55);
  color: var(--brown-900);
}
.sheet::before { /* double gold frame */
  content: ''; position: absolute; inset: 12px; border: 1px solid rgba(212, 154, 54, .55); border-radius: 4px 10px 10px 4px; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--cream-50), inset 0 0 0 4px rgba(212, 154, 54, .3);
}
.sheet-shade { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(60, 25, 5, .0), rgba(60, 25, 5, .35)); }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--brown-500); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 18px; }
.sheet[lang="te"] .sheet-head { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.page-title { text-align: center; font-size: calc(2.05rem * var(--text-scale)); margin: 8px 0 26px; color: var(--green-800); }
.sheet[lang="te"] .page-title { font-family: var(--font-te-head); font-weight: 400; line-height: 1.45; }
.page-title::after { content: ''; display: block; width: 90px; height: 3px; margin: 16px auto 0; border-radius: 3px; background: var(--zari); }
.page-text p { margin: 0 0 1.05em; font-size: calc(1.24rem * var(--text-scale)); line-height: 1.78; color: var(--brown-900); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.sheet[lang="te"] .page-text p { font-family: var(--font-te); font-size: calc(1.14rem * var(--text-scale)); line-height: 2.05; text-align: left; hyphens: manual; }
.sheet[lang="en"] .page-text > p:first-child::first-letter {
  float: left; font-family: var(--font-head); font-weight: 700; font-size: 3.7em; line-height: .78; padding: .08em .1em 0 0; color: var(--green-700);
  text-shadow: 1px 1px 0 var(--gold-300);
}
.sheet[lang="en"] .page-text > p:first-child { display: flow-root; }
.page-text h3 { font-size: calc(1.5rem * var(--text-scale)); margin: 1.2em 0 .5em; }
.verse {
  margin: 1.4em auto; padding: 18px 22px; max-width: 34em; text-align: center; border-radius: 14px;
  font-family: var(--font-deva); font-size: calc(1.22rem * var(--text-scale)); line-height: 1.9; color: var(--copper-700);
  background: linear-gradient(180deg, rgba(251, 231, 174, .35), rgba(251, 231, 174, .15)); border: 1px solid rgba(212, 154, 54, .45); position: relative;
}
.sheet[lang="te"] .verse { font-family: var(--font-te), var(--font-deva); }
.verse::before, .verse::after { content: '❁'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--gold-500); font-size: 1rem; }
.verse::before { left: 8px; }
.verse::after { right: 8px; }
.lang-note { font-size: .9rem; color: var(--sindoor-700); background: rgba(232, 96, 31, .08); border-radius: 10px; padding: 8px 14px; text-align: center; }
.sheet-foot { display: grid; justify-items: center; gap: 6px; margin-top: 28px; font-size: .85rem; color: var(--brown-500); }

.gate, .intro { text-align: center; margin: 4px auto 36px; padding: 6px 0 30px; border-bottom: 1px dashed var(--cream-400); max-width: 640px; }
.gate-label, .intro-label { margin: 0 0 8px; font-family: var(--font-brand); letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; color: var(--sindoor-700); font-weight: 600; }
.sheet[lang="te"] .gate-label, .sheet[lang="te"] .intro-label { font-family: var(--font-te); letter-spacing: 0; text-transform: none; font-size: .95rem; }
.gate-title, .intro-title { font-size: calc(clamp(2.4rem, 6vw, 3.4rem) * var(--text-scale)); margin: 12px 0 6px; color: var(--green-800); text-shadow: 0 2px 0 rgba(243, 207, 114, .5); }
.sheet[lang="te"] .gate-title, .sheet[lang="te"] .intro-title { font-family: var(--font-te-head); font-weight: 400; }
.gate-sub { margin: 0; color: var(--brown-600); font-size: 1.05rem; font-style: italic; }
.gate-alt, .gate-poet { margin: 10px 0 0; font-size: .98rem; color: var(--brown-700); }
.gate-gist { margin: 16px auto 0; font-size: calc(1.1rem * var(--text-scale)); color: var(--brown-800); max-width: 36em; }
.gate-chars { margin-top: 20px; }
.gate-chars-title { margin: 0 0 10px; font-weight: 600; color: var(--green-700); }
.gate-chars ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.gate-chars li { padding: 10px 14px; border-radius: 12px; background: var(--cream-100); border: 1px solid var(--cream-300); }
.gate-chars li > b { font-family: var(--font-head); font-size: 1.1rem; color: var(--green-800); margin-right: 8px; }
.sheet[lang="te"] .gate-chars li > b { font-family: var(--font-te); font-weight: 600; }
.gate-char-alts { font-size: .95rem; }
.intro .name-chips { margin-top: 10px; }
.intro-label { margin-top: 22px; }

.unwritten { text-align: center; padding: 30px 10px 10px; }
.unwritten-art svg { width: 64px; height: 76px; }
.unwritten-art .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.8s ease-in-out infinite; }
.unwritten h2 { font-size: 1.8rem; margin: 10px 0 8px; }
.unwritten p { color: var(--brown-600); max-width: 30em; margin: 0 auto 18px; }
.reader-tip { text-align: center; color: var(--brown-500); font-size: .88rem; margin: 6px 0 0; }

/* Page turns */
.sheet.turn-out { z-index: 2; animation: turnOut .75s cubic-bezier(.45, .05, .25, 1) forwards; }
.sheet.turn-out .sheet-shade { animation: shadeIn .75s ease forwards; }
.sheet.turn-in { z-index: 2; animation: turnIn .75s cubic-bezier(.45, .05, .25, 1) both; }
.sheet.turn-in .sheet-shade { animation: shadeOut .75s ease forwards; }
.sheet.under { filter: brightness(.96); }
@keyframes turnOut {
  0% { transform: rotateY(0) translateZ(0); }
  60% { opacity: 1; }
  100% { transform: rotateY(-108deg) translateZ(20px); opacity: 0; }
}
@keyframes turnIn {
  0% { transform: rotateY(-108deg) translateZ(20px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: rotateY(0) translateZ(0); opacity: 1; }
}
@keyframes shadeIn { to { opacity: 1; } }
@keyframes shadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Temple doors when a new parva / chapter begins */
.doors { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 1fr 1fr; perspective: 1600px; cursor: pointer; opacity: 0; transition: opacity .35s ease; }
.doors.show { opacity: 1; }
.door {
  position: relative; display: grid; grid-template-rows: 1fr 1fr; gap: 18px; padding: 24px;
  background:
    radial-gradient(circle, #F6D885 0 2.4px, #8C5A1C 2.8px, transparent 3.4px) 0 0 / 38px 38px,
    linear-gradient(90deg, #6A170A, #9C2C14 45%, #6A170A);
  border: 6px solid transparent; border-image: var(--zari) 1;
  transition: transform 1.1s cubic-bezier(.6, .05, .3, 1);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .45);
}
.door-l { transform-origin: left center; }
.door-r { transform-origin: right center; }
.door-panel { border-radius: 10px; border: 3px solid rgba(243, 207, 114, .75); box-shadow: inset 0 0 0 6px rgba(106, 23, 10, .55), inset 0 0 0 8px rgba(243, 207, 114, .35); background: radial-gradient(circle at 50% 50%, rgba(243, 207, 114, .16), transparent 60%); }
.doors.open .door-l { transform: rotateY(-104deg); }
.doors.open .door-r { transform: rotateY(104deg); }
.doors.open { background: transparent; }
.door-plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 86vw);
  display: grid; justify-items: center; gap: 4px; padding: 26px 26px 30px; text-align: center; border-radius: 22px;
  background: linear-gradient(180deg, var(--cream-50), var(--cream-200)); border: 3px solid var(--gold-300);
  box-shadow: 0 0 0 6px rgba(106, 23, 10, .5), 0 30px 60px rgba(0, 0, 0, .5);
  animation: plateIn .7s cubic-bezier(.2, .8, .2, 1.2) both; transition: opacity .4s, transform .6s;
}
.doors.open .door-plate { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.plate-emblem { width: 78px; height: 78px; margin-bottom: 4px; }
.dp-label { font-family: var(--font-brand); letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; color: var(--sindoor-700); font-weight: 700; }
html:lang(te) .dp-label { font-family: var(--font-te); letter-spacing: 0; text-transform: none; font-size: 1rem; }
.dp-title { font-family: var(--font-head); font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 700; color: var(--green-800); line-height: 1.2; }
html:lang(te) .dp-title { font-family: var(--font-te-head); font-weight: 400; line-height: 1.5; }
.dp-sub { color: var(--brown-600); font-style: italic; }
@keyframes plateIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.7) rotateX(30deg); } }

/* Bottom dock: the reader's footer */
.reader-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--gutter), env(safe-area-inset-left));
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
  background: var(--header-bg); color: #FFF4E2; box-shadow: 0 -8px 22px -10px rgba(126, 26, 11, .6);
}
.reader-dock::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--zari); }
.dock-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; cursor: pointer; font-weight: 600;
  border: 1px solid rgba(255, 230, 190, .45); background: rgba(255, 255, 255, .12); color: #FFF7E8; transition: background .2s, transform .2s;
}
.dock-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.dock-btn:disabled { opacity: .45; cursor: default; }
.dock-btn[data-action="next"] { background: linear-gradient(180deg, #FFF6DD, #F3CF72); color: var(--sindoor-900); border-color: transparent; box-shadow: 0 6px 14px -6px rgba(60, 15, 0, .55); }
.dock-mid { display: grid; gap: 4px; min-width: 0; }
.dock-label { font-size: .85rem; color: #FFE6C6; text-align: center; }
.scrub-wrap { position: relative; }
.dock-today .ring-track { stroke: rgba(255, 255, 255, .25); }
.dock-today .ring-label { color: #FFF7E8; }
.dock-today .ring-label small { color: var(--gold-200); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #FBE7AE var(--p, 0%), rgba(255, 255, 255, .25) var(--p, 0%));
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .25); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: #FBE7AE; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6DD, #F3CF72 45%, #B8692E); border: 2px solid #FFF7E8; box-shadow: 0 2px 6px rgba(60, 15, 0, .5);
}
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6DD, #F3CF72 45%, #B8692E); border: 2px solid #FFF7E8; }
.scrub-tip {
  position: absolute; bottom: 30px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 6px 12px; border-radius: 10px; background: var(--cream-50); color: var(--brown-800); font-size: .88rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5);
}
.scrub-tip b { color: var(--sindoor-700); margin-right: 4px; }

/* ------------------------------------------------------------- dialogs */

dialog { border: 0; padding: 0; color: var(--brown-800); background: var(--cream-50); }
dialog::backdrop { background: rgba(43, 20, 8, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog.drawer { margin: 0 0 0 auto; width: min(430px, 94vw); height: 100%; max-height: 100%; height: 100dvh; max-height: 100dvh; box-shadow: -20px 0 50px -20px rgba(43, 20, 8, .6); }
dialog.drawer[open] { display: flex; flex-direction: column; animation: drawerIn .38s cubic-bezier(.2, .8, .2, 1); }
dialog.modal { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(43, 20, 8, .7); }
dialog.modal[open] { animation: modalIn .35s cubic-bezier(.2, .8, .2, 1.1); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--header-bg); color: #FFF7E8; position: relative; }
.drawer-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--zari); }
.drawer-head h2 { color: #FFF7E8; font-size: 1.5rem; }
.drawer-head .icon-btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 230, 190, .45); color: #FFF7E8; }
.tabs { display: flex; gap: 6px; padding: 16px 20px 0; }
.tabs button { flex: 1; padding: 10px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; font-weight: 600; color: var(--brown-500); }
.tabs button[aria-selected="true"] { color: var(--green-800); border-bottom-color: var(--sindoor-600); }
.tabs .count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--cream-300); font-size: .8rem; }
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--cream-300); }
.jump input { flex: 1 1 90px; }
.jump label { font-weight: 600; color: var(--brown-700); white-space: nowrap; }
.jump input, .setting select {
  width: 100%; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--cream-400); background: #fff; font: inherit; color: var(--brown-800);
}
.toc-list, .bm-list { list-style: none; margin: 0; padding: 10px 12px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.toc-item { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px; border: 0; border-radius: 14px; background: none; cursor: pointer; transition: background .2s; }
.toc-item:hover { background: var(--cream-200); }
.toc-item.here { background: var(--green-100); box-shadow: inset 0 0 0 1.5px var(--green-500); }
.toc-item .sc-num { width: 36px; height: 36px; font-size: .9rem; }
.toc-names { display: grid; gap: 3px; flex: 1; min-width: 0; }
.toc-names b { font-family: var(--font-head); font-size: 1.12rem; color: var(--green-800); }
html:lang(te) .toc-names b { font-family: var(--font-te); font-weight: 600; }
.toc-names small { color: var(--brown-500); }
.bm-list .empty { padding: 20px; color: var(--brown-500); text-align: center; }

.settings-body { padding: 8px 22px 22px; overflow-y: auto; overscroll-behavior: contain; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--cream-400); }
.setting.column { display: grid; justify-content: stretch; }
.setting:last-child { border-bottom: 0; }
.setting-label { font-weight: 600; color: var(--green-800); }
.setting-note { margin: 0; color: var(--brown-600); font-size: .94rem; }
.setting-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.setting select { width: auto; }
.stepper { display: flex; align-items: center; gap: 10px; }
.size-preview { font-family: var(--font-head); font-size: calc(1.4rem * var(--text-scale)); min-width: 2.2em; text-align: center; color: var(--brown-800); }
.switch { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 4px; }
.switch span { position: relative; width: 50px; height: 28px; border-radius: 99px; background: var(--cream-400); transition: background .25s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); transition: transform .25s; }
.switch[aria-checked="true"] span { background: var(--green-600); }
.switch[aria-checked="true"] span::after { transform: translateX(22px); }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  padding: 14px 22px; border-radius: 16px; background: var(--green-800); color: #FFF7E8; font-weight: 600; box-shadow: 0 18px 36px -14px rgba(18, 58, 32, .7);
  border: 1px solid var(--gold-300); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1.2); max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body[data-view="reader"] .toast { bottom: calc(var(--dock-h) + 20px); }
.petal-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 85; }

/* ------------------------------------------------------------- motion */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes coin { from { transform: perspective(800px) rotateY(0); } to { transform: perspective(800px) rotateY(720deg); } }
@keyframes hint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes flicker { 0%, 100% { transform: scale(1) skewX(0); } 25% { transform: scale(1.04, .96) skewX(2deg); } 50% { transform: scale(.97, 1.05) skewX(-2deg); } 75% { transform: scale(1.02, .98) skewX(1deg); } }
@keyframes glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes drawerIn { from { transform: translateX(100%); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- context tabs, library page */

.hdr-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hdr-link[aria-current="page"] { background: rgba(255, 255, 255, .18); box-shadow: inset 0 -2px 0 var(--gold-300); }
.ctx-tabs { display: none; }
.section-head h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); margin-top: 8px; }
.library-page .section-head { margin-top: 40px; }
.pujas-in-library { margin-bottom: 72px; }
.pujas-page { margin-bottom: 72px; }
.pujas-page .section-head { margin-top: 40px; }

/* ------------------------------------------------------------- pujas */

.puja-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; max-width: 980px; margin: 0 auto; }
.puja-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; height: 100%;
  padding: 26px 26px 24px; border-radius: 22px; text-decoration: none; color: inherit;
  background: radial-gradient(90% 80% at 0% 0%, rgba(245, 138, 31, .16), transparent 60%), linear-gradient(180deg, var(--cream-50), var(--cream-100));
  border: 1px solid var(--cream-400); box-shadow: var(--shadow-soft);
}
.puja-card::before { content: ''; position: absolute; inset: 7px; border-radius: 16px; border: 1px solid rgba(212, 154, 54, .45); pointer-events: none; }
.puja-card:hover { box-shadow: var(--shadow-lift); }
.puja-art { display: block; width: 96px; filter: drop-shadow(0 8px 10px rgba(122, 58, 23, .3)); }
.puja-art svg, .puja-head-art svg, .ft-art svg, .puja-loading svg { display: block; width: 100%; height: auto; overflow: visible; }
.puja-card-body { display: grid; gap: 6px; justify-items: start; }
.puja-card .card-title { font-family: var(--font-te-head); font-weight: 400; font-size: 1.65rem; line-height: 1.35; }
.puja-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.puja-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; padding: 3px 10px 3px 4px; border-radius: 99px; background: var(--green-100); color: var(--green-800); }
.puja-chips b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green-700); color: #fff; font-size: .72rem; }

.puja-loading { display: grid; justify-items: center; gap: 10px; padding: 120px 0; color: var(--brown-500); }
.puja-loading svg { width: 56px; }
.puja-head { text-align: center; margin: 18px auto 26px; max-width: 760px; }
.puja-head-art { display: block; width: 58px; margin: 0 auto 4px; filter: drop-shadow(0 6px 8px rgba(122, 58, 23, .3)); }
.puja-head h1 { font-family: var(--font-te-head); font-weight: 400; font-size: clamp(1.8rem, 4.6vw, 2.6rem); line-height: 1.35; }
.puja-head-en { margin: 2px 0 0; font-family: var(--font-head); font-size: 1.25rem; color: var(--sindoor-700); }
.puja-source { margin: 8px auto 0; max-width: 620px; font-size: .9rem; color: var(--brown-500); }

.puja-layout { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 72px; }
.puja-nav {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top) + 28px);
  max-height: calc(100vh - var(--header-h) - 48px); max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top) - 48px);
  overflow-y: auto; overscroll-behavior: contain; padding: 14px 10px 18px; border-radius: 18px;
  background: var(--cream-50); border: 1px solid var(--cream-400); box-shadow: var(--shadow-soft);
}
.puja-nav.in-drawer { position: static; max-height: none; flex: 1; border: 0; border-radius: 0; box-shadow: none; padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); }
.pn-label { margin: 10px 8px 6px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); }
html:lang(te) .pn-label { letter-spacing: .02em; font-size: .86rem; }
.pn-list, .pn-subs { list-style: none; margin: 0; padding: 0; }
.pn-sec-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; min-height: 48px; border: 0; border-radius: 12px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s;
}
.pn-sec-btn:hover { background: var(--cream-200); }
.pn-sec.open > .pn-sec-btn { background: var(--green-100); }
.pn-sec-btn .sc-num { width: 30px; height: 30px; font-size: .85rem; box-shadow: 0 0 0 2px var(--cream-50), 0 0 0 3px var(--gold-300); }
.pn-names { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.pn-names b { font-family: var(--font-head); font-size: 1.08rem; color: var(--green-800); }
html:lang(te) .pn-names b { font-family: var(--font-te); font-weight: 600; font-size: 1rem; }
.pn-names small { font-size: .8rem; color: var(--brown-500); }
.pn-caret .ic { width: 16px; height: 16px; color: var(--gold-700); transition: transform .25s; }
.pn-sec.open .pn-caret .ic { transform: rotate(90deg); }
.pn-subs { margin: 4px 0 8px 22px; padding-left: 14px; border-left: 2px dashed var(--cream-400); }
.pn-sub { display: grid; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--brown-700); line-height: 1.35; min-height: 40px; align-content: center; }
.pn-sub span { font-family: var(--font-te); font-size: .98rem; }
.pn-sub small { font-size: .78rem; color: var(--brown-500); }
.pn-sub:hover { background: var(--cream-200); }
.pn-sub[aria-current] { background: linear-gradient(90deg, rgba(245, 138, 31, .2), rgba(245, 138, 31, .06)); color: var(--sindoor-800); box-shadow: inset 3px 0 0 var(--sindoor-600); }

.puja-main { min-width: 0; }
.puja-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pn-open { display: none; }
.pn-open .ic { width: 18px; height: 18px; }
.do-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--brown-600); font-weight: 600; font-size: .95rem; }
.fallback-tip { display: flex; gap: 12px; align-items: center; margin: 0 0 16px; padding: 10px 16px; border-radius: 14px; background: var(--green-100); border: 1px solid var(--green-200); color: var(--green-900); font-size: .98rem; line-height: 1.6; }
.fallback-tip [lang="te"] { font-family: var(--font-te); }
.fallback-tip small { display: block; font-size: .84rem; color: var(--green-700); }
.ft-art { flex: none; width: 34px; }

.puja-page {
  position: relative; padding: 30px clamp(18px, 4vw, 44px) 28px; border-radius: 6px 18px 18px 6px; outline: none;
  background: linear-gradient(180deg, var(--cream-50), #FFFBF0); border: 1px solid var(--cream-400);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 50px -30px rgba(94, 44, 12, .55);
}
.puja-page::before { content: ''; position: absolute; inset: 9px; border-radius: 3px 12px 12px 3px; border: 1px solid rgba(212, 154, 54, .4); pointer-events: none; }
.pp-head { text-align: center; margin-bottom: 18px; }
.pp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; color: var(--sindoor-700); letter-spacing: .04em; }
.pp-eyebrow .sc-num { width: 30px; height: 30px; font-size: .85rem; }
.pp-full { margin: 4px auto 10px; max-width: 560px; font-size: .9rem; color: var(--brown-500); }
.pp-head h2 { margin-top: 10px; font-family: var(--font-te-head); font-weight: 400; font-size: calc(1.95rem * var(--text-scale)); line-height: 1.4; }
.pp-app { margin-left: 4px; color: var(--gold-700); cursor: help; font-size: .6em; vertical-align: super; }
.pp-en { margin: 2px 0 0; font-family: var(--font-head); font-size: 1.18rem; color: var(--brown-600); }
.pp-timing { display: inline-block; margin: 8px 0 0; padding: 3px 12px; border-radius: 99px; background: var(--gold-200); color: var(--brown-800); font-size: .9rem; }
.pp-meta { margin: 8px 0 0; font-size: .84rem; color: var(--brown-500); }

.pp-body { font-family: var(--font-te); font-size: calc(1.14rem * var(--text-scale)); color: var(--brown-900); }
.pp-body p { margin: 0; }
.recite { margin: 16px 0; line-height: 2.05; }
.recite.sloka p + p { padding-left: 2.4em; }
.recite.optional { padding: 10px 16px 12px; border: 1px dashed var(--gold-500); border-radius: 12px; background: rgba(251, 231, 174, .25); }
.opt-tag { font-family: var(--font-body); font-size: .8em; color: var(--gold-700); margin-bottom: 4px !important; }
html:lang(te) .opt-tag { font-family: var(--font-te); }
.recite.form p { margin-bottom: .35em; }
.sloka-mark { display: inline-block; margin-right: .45em; padding: 0 .35em; border-radius: 6px; background: rgba(169, 42, 18, .08); color: var(--sindoor-700); font-size: .82em; }
.do {
  margin: 14px 0 !important; padding: 9px 14px 9px 40px; position: relative; border-radius: 10px;
  background: rgba(245, 138, 31, .08); border-left: 3px solid var(--saffron-400);
  color: var(--brown-600); font-size: .9em; line-height: 1.8;
}
.do::before { /* a small offering hand: "do this" */
  content: ''; position: absolute; left: 12px; top: 13px; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: radial-gradient(circle at 60% 40%, var(--saffron-300), var(--saffron-400)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}
.do-in { color: var(--brown-500); font-size: .84em; padding: 0 .3em; border-radius: 6px; background: rgba(245, 138, 31, .1); }
.variant { color: var(--green-700); font-size: .92em; border-bottom: 1px dashed var(--green-500); cursor: help; }
.rep { display: inline-block; margin-left: .3em; padding: 0 .55em; border-radius: 99px; background: var(--gold-200); color: var(--brown-800); font-family: var(--font-body); font-size: .78em; font-weight: 700; cursor: help; }
.blank { color: var(--sindoor-600); letter-spacing: .08em; }
.bracket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 36%); gap: 0 18px; align-items: center; margin: 16px 0; }
.bracket-lines { padding-right: 16px; border-right: 3px solid var(--gold-500); border-radius: 0 22px 22px 0; line-height: 2.05; }
.bracket-do { margin: 0 !important; }
body.hide-do .do, body.hide-do .do-in { display: none; }
body.hide-do .bracket { grid-template-columns: 1fr; }
body.hide-do .bracket-lines { border-right: 0; padding-right: 0; }
.pp-note { margin: 14px 0; padding: 10px 14px; border-radius: 10px; background: var(--cream-200); border-left: 3px solid var(--green-500); font-family: var(--font-body); font-size: .86em; line-height: 1.65; color: var(--brown-700); }
.pp-note[lang="te"] { font-family: var(--font-te); }
.pp-h3 { margin: 22px 0 6px; font-family: var(--font-te-head); font-weight: 400; font-size: 1.3em; color: var(--green-800); text-align: center; }
.refrain-note { margin: 12px 0 6px !important; text-align: center; font-size: .92em; color: var(--brown-600); }
.refrain-note b { color: var(--sindoor-700); font-weight: 600; }
.nama { list-style: none; margin: 12px 0; padding: 0; columns: 2 300px; column-gap: 34px; }
.nama li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; padding: 6px 2px; border-bottom: 1px dotted var(--cream-400); break-inside: avoid; line-height: 1.75; }
.nama .nn { flex: none; min-width: 2.1em; text-align: right; font-family: var(--font-body); font-size: .74em; font-weight: 700; color: var(--gold-700); }
.nama .nt { flex: 1 1 auto; }
.nama .rf { margin-left: auto; font-size: .74em; color: var(--sindoor-600); opacity: .85; white-space: nowrap; }
.nama.two { columns: 1; }
.nama.two li { display: grid; grid-template-columns: 2.1em minmax(0, 1fr) minmax(0, 1fr); }
.nama.two .nr { color: var(--green-800); }
.nama.prose { columns: 1; }
.nama.prose li { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); padding: 9px 2px; font-size: .96em; line-height: 1.85; }
.pp-step { display: flex; justify-content: space-between; align-items: stretch; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--cream-400); }
.pp-step .btn { max-width: 48%; text-align: left; padding: 10px 18px; }
.pp-step .btn > span { display: grid; min-width: 0; }
.pp-step .btn b { font-family: var(--font-te); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-next { margin-left: auto; text-align: right; }
.pp-next > span { justify-items: stretch; }
.drawer-head .icon-btn { flex: none; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; text-align: center; }
  .hero-emblem { max-width: 380px; }
  .hero-title::after { margin-left: auto; margin-right: auto; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .epic-hero { grid-template-columns: auto 1fr; }
  .epic-ring { grid-column: 1 / -1; justify-self: start; }
  .how-steps { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --header-h: 60px; --dock-h: 70px; }
  body { font-size: 16px; }
  .brand-emblem { width: 40px; height: 40px; }
  .brand { flex: 1; gap: 8px; }
  .brand-sub, .hdr-link, .hdr-nav { display: none; }
  /* the name wraps onto two short lines instead of being cut off */
  .brand-main { font-size: .9rem; letter-spacing: .02em; line-height: 1.08; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html:lang(te) .brand-main { font-size: 1.02rem; line-height: 1.25; }
  .hero { padding-top: 16px; gap: 8px; }
  .hero-emblem { max-width: min(300px, 74vw); }
  .hero-title { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .hero-lead { font-size: 1.08rem; margin: 14px auto 20px; }
  .header-actions { flex: none; gap: 6px; }
  .page-text p { text-align: left; hyphens: manual; }
  .lang-toggle button { padding: 6px 9px; font-size: .88rem; }
  .icon-btn.on-dark { width: 38px; height: 38px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px dashed var(--cream-400); padding-top: 14px; }
  .epic-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .epic-hero .hero-actions { justify-content: center; }
  .epic-ring { justify-self: center; }
  .name-chip { min-width: 0; flex: 1 1 140px; }
  .reader-bar { gap: 6px; padding: 10px 8px 14px; margin-top: 12px; }
  .rb-back span, .rb-tools [data-action="toc"], .rb-count { display: none; }
  .rb-tools .icon-btn { width: 34px; height: 34px; }
  .rb-name { font-size: 1rem; line-height: 1.12; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rb-section { padding: 2px 4px; gap: 8px; }
  html:lang(te) .rb-name { font-size: .9rem; line-height: 1.35; }
  .emblem-hint { bottom: -2px; }
  .rb-num { width: 28px; height: 28px; }
  .sheet { border-radius: 4px 12px 12px 4px; }
  .sheet::before { inset: 7px; }
  .reader-dock { gap: 8px; grid-template-columns: auto 1fr auto; }
  .dock-today { display: none; }
  .dock-btn { padding: 10px 12px; }
  .dock-btn span { display: none; }
  .door { padding: 12px; }
}

/* ------------------------------------------------------------- reading on phones */

/* While reading on a phone (or any short landscape screen), the site header scrolls away with the page
   and only the reader bar stays pinned, which leaves far more of the screen for the text. */
@media (max-width: 640px), (max-height: 520px) {
  body[data-view="reader"] .site-header { position: relative; }
  body[data-view="reader"] .reader-bar { top: env(safe-area-inset-top); }
}

/* Phones held sideways: a slimmer header, reader bar and dock. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --header-h: 56px; --dock-h: 60px; }
  .brand-emblem { width: 40px; height: 40px; }
  .reader-bar { margin-top: 8px; padding: 6px 12px 10px; }
  .rb-progress { bottom: 4px; }
  .book-stage { padding-top: 14px; }
  .reader-tip { display: none; }
  .dock-label { font-size: .8rem; }
  .dock-today .ring-wrap.small { width: 44px; height: 44px; }
  .hero { min-height: 0; }
  dialog.modal { max-height: calc(100dvh - 16px); }
}

/* ------------------------------------------------------------- pujas on tablets and phones */

@media (max-width: 900px) {
  .puja-layout { grid-template-columns: minmax(0, 1fr); }
  .puja-layout > .puja-nav { display: none; }
  .pn-open { display: inline-flex; }
}
@media (max-width: 640px) {
  .ctx-tabs { display: flex; justify-content: center; gap: 6px; padding: 28px max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
  .ctx-tabs a {
    flex: 1 1 0; max-width: 150px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 999px; background: var(--cream-50); border: 1px solid var(--cream-400); color: var(--brown-700);
    text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap;
  }
  .ctx-tabs .ic { width: 18px; height: 18px; flex: none; }
  .ctx-tabs a[aria-current="page"] { background: var(--header-bg); color: #FFF7E8; border-color: transparent; box-shadow: 0 6px 14px -8px rgba(169, 42, 18, .7); }
  body[data-view="reader"] .ctx-tabs { display: none; }
  .ctx-tabs + main .crumbs { padding-top: 14px; }
  .library-page .section-head, .pujas-page .section-head { margin-top: 26px; }
  .puja-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 18px; }
  .puja-card-body { justify-items: center; }
  .puja-chips { justify-content: center; }
  .puja-art { width: 76px; }
  .puja-head { margin: 6px auto 14px; }
  .puja-head-art { display: none; }
  .puja-head h1 { font-size: 1.6rem; }
  .puja-source { font-size: .8rem; }
  .puja-page { padding: 22px 14px 20px; border-radius: 4px 12px 12px 4px; }
  .puja-page::before { inset: 6px; }
  .pp-body { font-size: calc(1.06rem * var(--text-scale)); }
  .recite.sloka p + p { padding-left: 1.2em; }
  .bracket { grid-template-columns: 1fr; }
  .bracket-lines { border-right: 0; padding-right: 0; border-left: 3px solid var(--gold-500); padding-left: 12px; border-radius: 0; }
  .bracket-do { margin-top: 8px !important; }
  .nama.two li { grid-template-columns: 2.1em minmax(0, 1fr); }
  .nama.two .nr { grid-column: 2; font-size: .94em; }
  .do { padding-left: 36px; }
  .pp-step { flex-direction: column-reverse; }
  .pp-step .btn { max-width: none; width: 100%; }
  .fallback-tip { font-size: .92rem; padding: 10px 12px; }
}
@media (max-width: 360px) {
  .ctx-tabs { gap: 4px; }
  .ctx-tabs a { font-size: .84rem; gap: 4px; }
  .ctx-tabs .ic { display: none; }
}
@media (hover: none) {
  .puja-card:active, .pn-sec-btn:active, .pn-sub:active { transform: scale(.98); }
}

/* ------------------------------------------------------------- touch screens */

/* Fingers need bigger targets than a mouse pointer: at least about 40px. */
@media (pointer: coarse) {
  .icon-btn, .rb-tools .icon-btn, .icon-btn.on-dark { width: 42px; height: 42px; }
  .lang-toggle button { min-height: 40px; min-width: 44px; }
  .rb-back { min-height: 42px; min-width: 40px; justify-content: center; padding: 0 2px; }
  .rb-section { min-height: 42px; }
  .crumbs { padding-top: 18px; }
  .hdr-link { min-height: 42px; }  /* keeps its own display, so it stays hidden on phones */
  .crumbs a, .link-btn { display: inline-flex; align-items: center; min-height: 42px; }
  .crumbs a { min-width: 44px; justify-content: center; }
  .btn-small { min-height: 42px; }
  .switch { min-height: 42px; }
  .jump input, .setting select { min-height: 44px; font-size: 16px; } /* 16px stops iOS zooming in on focus */
  input[type="range"] { height: 40px; }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
  .dock-mid { gap: 0; }
}
@media (pointer: coarse) and (max-width: 360px) {
  .rb-tools { gap: 4px; }
  .rb-tools .icon-btn { width: 40px; height: 40px; }
}

/* On touch screens a hover state sticks after a tap, so hover-only movement is switched off
   and a short press effect is used instead. */
@media (hover: none) {
  .brand:hover .sj-rays { animation-duration: 60s; }
  .icon-btn:hover, .btn-primary:hover, .dock-btn:hover:not(:disabled), .name-chip:hover, .lamp:hover { transform: none; }
  .lamp:hover { background: none; }
  .epic-card:hover .card-glyph { transform: none; }
  .char-card:hover:not(.flipped) .cc-inner { transform: none; }
  .btn:active, .icon-btn:active, .dock-btn:active:not(:disabled), .lamp:active, .toc-item:active, .section-card:active, .epic-card:active { transform: scale(.97); }
}