/* Geethopadesam — गीतोपदेशम् */

:root {
  --saffron: #c8681c;
  --saffron-soft: #e08b3e;
  --gold: #b8892b;

  --bg: #fbf6ec;
  --bg-elev: #fffdf8;
  --bg-sunk: #f3ead9;
  --ink: #241d16;
  --ink-soft: #5b4d3f;
  --ink-faint: #8b7a66;
  --line: #e3d6bf;
  --shadow: 0 1px 2px rgba(60, 40, 15, .06), 0 8px 24px rgba(60, 40, 15, .06);
  --shadow-lift: 0 2px 6px rgba(60, 40, 15, .09), 0 18px 40px rgba(60, 40, 15, .12);

  --serif: "Marcellus", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --deva: "Noto Serif Devanagari", "Nirmala UI", "Sanskrit Text", serif;
  --telu: "Noto Serif Telugu", "Noto Sans Telugu", "Gautami", "Pothana2000", serif;

  --maxw: 1120px;
  --radius: 14px;
}

:root[data-theme="dark"] {
  --saffron: #eda155;
  --saffron-soft: #f2b878;
  --gold: #d7ac5c;

  --bg: #14110d;
  --bg-elev: #1e1a15;
  --bg-sunk: #100e0a;
  --ink: #f0e7d8;
  --ink-soft: #c2b3a0;
  --ink-faint: #8d8071;
  --line: #322b22;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

/* Everything below is sized in rem, so this one value scales the whole site. */
html {
  scroll-behavior: smooth;
  font-size: 112.5%; /* 18px */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Ambient layer: warm light pooling at the top, a cooler settling at the
   bottom, and a fine paper grain over the lot. Fixed, so it reads as the page's
   own light rather than something that scrolls with the text. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'><filter%20id='g'><feTurbulence%20type='fractalNoise'%20baseFrequency='.8'%20numOctaves='4'%20stitchTiles='stitch'/><feColorMatrix%20type='saturate'%20values='0'/></filter><rect%20width='180'%20height='180'%20filter='url(%23g)'%20opacity='.16'/></svg>") repeat,
    radial-gradient(70rem 44rem at 8% -12%, rgba(200, 104, 28, .16), transparent 62%),
    radial-gradient(56rem 38rem at 94% 2%, rgba(184, 137, 43, .17), transparent 58%),
    radial-gradient(60rem 30rem at 50% 108%, rgba(200, 104, 28, .10), transparent 62%);
}

/* The chakra, echoing the banner and the header mark — drawn as a mask so it
   takes the theme's saffron, and turning slowly enough to read as stillness. */
body::after {
  content: "";
  position: fixed;
  top: 50%;
  right: -14vmin;
  width: min(74vh, 680px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: .075;
  background-color: var(--saffron);
  -webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20400'><g%20fill='none'%20stroke='%23fff'%20stroke-linecap='round'><path%20d='M368.0%20200.0L392.0%20200.0M366.6%20221.9L390.4%20225.1M362.3%20243.5L385.5%20249.7M355.2%20264.3L377.4%20273.5M345.5%20284.0L366.3%20296.0M333.3%20302.3L352.3%20316.9M318.8%20318.8L335.8%20335.8M302.3%20333.3L316.9%20352.3M284.0%20345.5L296.0%20366.3M264.3%20355.2L273.5%20377.4M243.5%20362.3L249.7%20385.5M221.9%20366.6L225.1%20390.4M200.0%20368.0L200.0%20392.0M178.1%20366.6L174.9%20390.4M156.5%20362.3L150.3%20385.5M135.7%20355.2L126.5%20377.4M116.0%20345.5L104.0%20366.3M97.7%20333.3L83.1%20352.3M81.2%20318.8L64.2%20335.8M66.7%20302.3L47.7%20316.9M54.5%20284.0L33.7%20296.0M44.8%20264.3L22.6%20273.5M37.7%20243.5L14.5%20249.7M33.4%20221.9L9.6%20225.1M32.0%20200.0L8.0%20200.0M33.4%20178.1L9.6%20174.9M37.7%20156.5L14.5%20150.3M44.8%20135.7L22.6%20126.5M54.5%20116.0L33.7%20104.0M66.7%2097.7L47.7%2083.1M81.2%2081.2L64.2%2064.2M97.7%2066.7L83.1%2047.7M116.0%2054.5L104.0%2033.7M135.7%2044.8L126.5%2022.6M156.5%2037.7L150.3%2014.5M178.1%2033.4L174.9%209.6M200.0%2032.0L200.0%208.0M221.9%2033.4L225.1%209.6M243.5%2037.7L249.7%2014.5M264.3%2044.8L273.5%2022.6M284.0%2054.5L296.0%2033.7M302.3%2066.7L316.9%2047.7M318.8%2081.2L335.8%2064.2M333.3%2097.7L352.3%2083.1M345.5%20116.0L366.3%20104.0M355.2%20135.7L377.4%20126.5M362.3%20156.5L385.5%20150.3M366.6%20178.1L390.4%20174.9'%20stroke-width='2.4'%20opacity='.85'/><circle%20cx='200'%20cy='200'%20r='166.0'%20stroke-width='1.6'%20opacity='.7'/><circle%20cx='200'%20cy='200'%20r='150.0'%20stroke-width='1.1'%20opacity='.45'/><path%20d='M332.0%20200.0L348.0%20200.0M331.7%20208.6L347.7%20209.7M330.9%20217.2L346.7%20219.3M329.5%20225.8L345.2%20228.9M327.5%20234.2L343.0%20238.3M325.0%20242.4L340.1%20247.6M322.0%20250.5L336.7%20256.6M318.4%20258.4L332.7%20265.5M314.3%20266.0L328.2%20274.0M309.8%20273.3L323.1%20282.2M304.7%20280.4L317.4%20290.1M299.2%20287.0L311.3%20297.6M293.3%20293.3L304.7%20304.7M287.0%20299.2L297.6%20311.3M280.4%20304.7L290.1%20317.4M273.3%20309.8L282.2%20323.1M266.0%20314.3L274.0%20328.2M258.4%20318.4L265.5%20332.7M250.5%20322.0L256.6%20336.7M242.4%20325.0L247.6%20340.1M234.2%20327.5L238.3%20343.0M225.8%20329.5L228.9%20345.2M217.2%20330.9L219.3%20346.7M208.6%20331.7L209.7%20347.7M200.0%20332.0L200.0%20348.0M191.4%20331.7L190.3%20347.7M182.8%20330.9L180.7%20346.7M174.2%20329.5L171.1%20345.2M165.8%20327.5L161.7%20343.0M157.6%20325.0L152.4%20340.1M149.5%20322.0L143.4%20336.7M141.6%20318.4L134.5%20332.7M134.0%20314.3L126.0%20328.2M126.7%20309.8L117.8%20323.1M119.6%20304.7L109.9%20317.4M113.0%20299.2L102.4%20311.3M106.7%20293.3L95.3%20304.7M100.8%20287.0L88.7%20297.6M95.3%20280.4L82.6%20290.1M90.2%20273.3L76.9%20282.2M85.7%20266.0L71.8%20274.0M81.6%20258.4L67.3%20265.5M78.0%20250.5L63.3%20256.6M75.0%20242.4L59.9%20247.6M72.5%20234.2L57.0%20238.3M70.5%20225.8L54.8%20228.9M69.1%20217.2L53.3%20219.3M68.3%20208.6L52.3%20209.7M68.0%20200.0L52.0%20200.0M68.3%20191.4L52.3%20190.3M69.1%20182.8L53.3%20180.7M70.5%20174.2L54.8%20171.1M72.5%20165.8L57.0%20161.7M75.0%20157.6L59.9%20152.4M78.0%20149.5L63.3%20143.4M81.6%20141.6L67.3%20134.5M85.7%20134.0L71.8%20126.0M90.2%20126.7L76.9%20117.8M95.3%20119.6L82.6%20109.9M100.8%20113.0L88.7%20102.4M106.7%20106.7L95.3%2095.3M113.0%20100.8L102.4%2088.7M119.6%2095.3L109.9%2082.6M126.7%2090.2L117.8%2076.9M134.0%2085.7L126.0%2071.8M141.6%2081.6L134.5%2067.3M149.5%2078.0L143.4%2063.3M157.6%2075.0L152.4%2059.9M165.8%2072.5L161.7%2057.0M174.2%2070.5L171.1%2054.8M182.8%2069.1L180.7%2053.3M191.4%2068.3L190.3%2052.3M200.0%2068.0L200.0%2052.0M208.6%2068.3L209.7%2052.3M217.2%2069.1L219.3%2053.3M225.8%2070.5L228.9%2054.8M234.2%2072.5L238.3%2057.0M242.4%2075.0L247.6%2059.9M250.5%2078.0L256.6%2063.3M258.4%2081.6L265.5%2067.3M266.0%2085.7L274.0%2071.8M273.3%2090.2L282.2%2076.9M280.4%2095.3L290.1%2082.6M287.0%20100.8L297.6%2088.7M293.3%20106.7L304.7%2095.3M299.2%20113.0L311.3%20102.4M304.7%20119.6L317.4%20109.9M309.8%20126.7L323.1%20117.8M314.3%20134.0L328.2%20126.0M318.4%20141.6L332.7%20134.5M322.0%20149.5L336.7%20143.4M325.0%20157.6L340.1%20152.4M327.5%20165.8L343.0%20161.7M329.5%20174.2L345.2%20171.1M330.9%20182.8L346.7%20180.7M331.7%20191.4L347.7%20190.3'%20stroke-width='.9'%20opacity='.35'/><circle%20cx='200'%20cy='200'%20r='130.0'%20stroke-width='1.4'%20opacity='.6'/><circle%20cx='200'%20cy='200'%20r='104.0'%20stroke-width='1.0'%20opacity='.4'/><path%20d='M251.0%20189.9Q300.0%20200.0%20251.0%20210.1M251.0%20210.1Q292.4%20238.3%20243.2%20228.9M243.2%20228.9Q270.7%20270.7%20228.9%20243.2M228.9%20243.2Q238.3%20292.4%20210.1%20251.0M210.1%20251.0Q200.0%20300.0%20189.9%20251.0M189.9%20251.0Q161.7%20292.4%20171.1%20243.2M171.1%20243.2Q129.3%20270.7%20156.8%20228.9M156.8%20228.9Q107.6%20238.3%20149.0%20210.1M149.0%20210.1Q100.0%20200.0%20149.0%20189.9M149.0%20189.9Q107.6%20161.7%20156.8%20171.1M156.8%20171.1Q129.3%20129.3%20171.1%20156.8M171.1%20156.8Q161.7%20107.6%20189.9%20149.0M189.9%20149.0Q200.0%20100.0%20210.1%20149.0M210.1%20149.0Q238.3%20107.6%20228.9%20156.8M228.9%20156.8Q270.7%20129.3%20243.2%20171.1M243.2%20171.1Q292.4%20161.7%20251.0%20189.9'%20stroke-width='1.5'%20opacity='.55'/><path%20d='M220.0%20200.0Q244.3%20218.4%20214.1%20214.1M214.1%20214.1Q218.4%20244.3%20200.0%20220.0M200.0%20220.0Q181.6%20244.3%20185.9%20214.1M185.9%20214.1Q155.7%20218.4%20180.0%20200.0M180.0%20200.0Q155.7%20181.6%20185.9%20185.9M185.9%20185.9Q181.6%20155.7%20200.0%20180.0M200.0%20180.0Q218.4%20155.7%20214.1%20185.9M214.1%20185.9Q244.3%20181.6%20220.0%20200.0'%20stroke-width='1.3'%20opacity='.5'/><circle%20cx='200'%20cy='200'%20r='18.0'%20stroke-width='1.6'%20opacity='.7'/><circle%20cx='200'%20cy='200'%20r='7.0'%20stroke-width='2.2'%20opacity='.8'/></g></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20400'><g%20fill='none'%20stroke='%23fff'%20stroke-linecap='round'><path%20d='M368.0%20200.0L392.0%20200.0M366.6%20221.9L390.4%20225.1M362.3%20243.5L385.5%20249.7M355.2%20264.3L377.4%20273.5M345.5%20284.0L366.3%20296.0M333.3%20302.3L352.3%20316.9M318.8%20318.8L335.8%20335.8M302.3%20333.3L316.9%20352.3M284.0%20345.5L296.0%20366.3M264.3%20355.2L273.5%20377.4M243.5%20362.3L249.7%20385.5M221.9%20366.6L225.1%20390.4M200.0%20368.0L200.0%20392.0M178.1%20366.6L174.9%20390.4M156.5%20362.3L150.3%20385.5M135.7%20355.2L126.5%20377.4M116.0%20345.5L104.0%20366.3M97.7%20333.3L83.1%20352.3M81.2%20318.8L64.2%20335.8M66.7%20302.3L47.7%20316.9M54.5%20284.0L33.7%20296.0M44.8%20264.3L22.6%20273.5M37.7%20243.5L14.5%20249.7M33.4%20221.9L9.6%20225.1M32.0%20200.0L8.0%20200.0M33.4%20178.1L9.6%20174.9M37.7%20156.5L14.5%20150.3M44.8%20135.7L22.6%20126.5M54.5%20116.0L33.7%20104.0M66.7%2097.7L47.7%2083.1M81.2%2081.2L64.2%2064.2M97.7%2066.7L83.1%2047.7M116.0%2054.5L104.0%2033.7M135.7%2044.8L126.5%2022.6M156.5%2037.7L150.3%2014.5M178.1%2033.4L174.9%209.6M200.0%2032.0L200.0%208.0M221.9%2033.4L225.1%209.6M243.5%2037.7L249.7%2014.5M264.3%2044.8L273.5%2022.6M284.0%2054.5L296.0%2033.7M302.3%2066.7L316.9%2047.7M318.8%2081.2L335.8%2064.2M333.3%2097.7L352.3%2083.1M345.5%20116.0L366.3%20104.0M355.2%20135.7L377.4%20126.5M362.3%20156.5L385.5%20150.3M366.6%20178.1L390.4%20174.9'%20stroke-width='2.4'%20opacity='.85'/><circle%20cx='200'%20cy='200'%20r='166.0'%20stroke-width='1.6'%20opacity='.7'/><circle%20cx='200'%20cy='200'%20r='150.0'%20stroke-width='1.1'%20opacity='.45'/><path%20d='M332.0%20200.0L348.0%20200.0M331.7%20208.6L347.7%20209.7M330.9%20217.2L346.7%20219.3M329.5%20225.8L345.2%20228.9M327.5%20234.2L343.0%20238.3M325.0%20242.4L340.1%20247.6M322.0%20250.5L336.7%20256.6M318.4%20258.4L332.7%20265.5M314.3%20266.0L328.2%20274.0M309.8%20273.3L323.1%20282.2M304.7%20280.4L317.4%20290.1M299.2%20287.0L311.3%20297.6M293.3%20293.3L304.7%20304.7M287.0%20299.2L297.6%20311.3M280.4%20304.7L290.1%20317.4M273.3%20309.8L282.2%20323.1M266.0%20314.3L274.0%20328.2M258.4%20318.4L265.5%20332.7M250.5%20322.0L256.6%20336.7M242.4%20325.0L247.6%20340.1M234.2%20327.5L238.3%20343.0M225.8%20329.5L228.9%20345.2M217.2%20330.9L219.3%20346.7M208.6%20331.7L209.7%20347.7M200.0%20332.0L200.0%20348.0M191.4%20331.7L190.3%20347.7M182.8%20330.9L180.7%20346.7M174.2%20329.5L171.1%20345.2M165.8%20327.5L161.7%20343.0M157.6%20325.0L152.4%20340.1M149.5%20322.0L143.4%20336.7M141.6%20318.4L134.5%20332.7M134.0%20314.3L126.0%20328.2M126.7%20309.8L117.8%20323.1M119.6%20304.7L109.9%20317.4M113.0%20299.2L102.4%20311.3M106.7%20293.3L95.3%20304.7M100.8%20287.0L88.7%20297.6M95.3%20280.4L82.6%20290.1M90.2%20273.3L76.9%20282.2M85.7%20266.0L71.8%20274.0M81.6%20258.4L67.3%20265.5M78.0%20250.5L63.3%20256.6M75.0%20242.4L59.9%20247.6M72.5%20234.2L57.0%20238.3M70.5%20225.8L54.8%20228.9M69.1%20217.2L53.3%20219.3M68.3%20208.6L52.3%20209.7M68.0%20200.0L52.0%20200.0M68.3%20191.4L52.3%20190.3M69.1%20182.8L53.3%20180.7M70.5%20174.2L54.8%20171.1M72.5%20165.8L57.0%20161.7M75.0%20157.6L59.9%20152.4M78.0%20149.5L63.3%20143.4M81.6%20141.6L67.3%20134.5M85.7%20134.0L71.8%20126.0M90.2%20126.7L76.9%20117.8M95.3%20119.6L82.6%20109.9M100.8%20113.0L88.7%20102.4M106.7%20106.7L95.3%2095.3M113.0%20100.8L102.4%2088.7M119.6%2095.3L109.9%2082.6M126.7%2090.2L117.8%2076.9M134.0%2085.7L126.0%2071.8M141.6%2081.6L134.5%2067.3M149.5%2078.0L143.4%2063.3M157.6%2075.0L152.4%2059.9M165.8%2072.5L161.7%2057.0M174.2%2070.5L171.1%2054.8M182.8%2069.1L180.7%2053.3M191.4%2068.3L190.3%2052.3M200.0%2068.0L200.0%2052.0M208.6%2068.3L209.7%2052.3M217.2%2069.1L219.3%2053.3M225.8%2070.5L228.9%2054.8M234.2%2072.5L238.3%2057.0M242.4%2075.0L247.6%2059.9M250.5%2078.0L256.6%2063.3M258.4%2081.6L265.5%2067.3M266.0%2085.7L274.0%2071.8M273.3%2090.2L282.2%2076.9M280.4%2095.3L290.1%2082.6M287.0%20100.8L297.6%2088.7M293.3%20106.7L304.7%2095.3M299.2%20113.0L311.3%20102.4M304.7%20119.6L317.4%20109.9M309.8%20126.7L323.1%20117.8M314.3%20134.0L328.2%20126.0M318.4%20141.6L332.7%20134.5M322.0%20149.5L336.7%20143.4M325.0%20157.6L340.1%20152.4M327.5%20165.8L343.0%20161.7M329.5%20174.2L345.2%20171.1M330.9%20182.8L346.7%20180.7M331.7%20191.4L347.7%20190.3'%20stroke-width='.9'%20opacity='.35'/><circle%20cx='200'%20cy='200'%20r='130.0'%20stroke-width='1.4'%20opacity='.6'/><circle%20cx='200'%20cy='200'%20r='104.0'%20stroke-width='1.0'%20opacity='.4'/><path%20d='M251.0%20189.9Q300.0%20200.0%20251.0%20210.1M251.0%20210.1Q292.4%20238.3%20243.2%20228.9M243.2%20228.9Q270.7%20270.7%20228.9%20243.2M228.9%20243.2Q238.3%20292.4%20210.1%20251.0M210.1%20251.0Q200.0%20300.0%20189.9%20251.0M189.9%20251.0Q161.7%20292.4%20171.1%20243.2M171.1%20243.2Q129.3%20270.7%20156.8%20228.9M156.8%20228.9Q107.6%20238.3%20149.0%20210.1M149.0%20210.1Q100.0%20200.0%20149.0%20189.9M149.0%20189.9Q107.6%20161.7%20156.8%20171.1M156.8%20171.1Q129.3%20129.3%20171.1%20156.8M171.1%20156.8Q161.7%20107.6%20189.9%20149.0M189.9%20149.0Q200.0%20100.0%20210.1%20149.0M210.1%20149.0Q238.3%20107.6%20228.9%20156.8M228.9%20156.8Q270.7%20129.3%20243.2%20171.1M243.2%20171.1Q292.4%20161.7%20251.0%20189.9'%20stroke-width='1.5'%20opacity='.55'/><path%20d='M220.0%20200.0Q244.3%20218.4%20214.1%20214.1M214.1%20214.1Q218.4%20244.3%20200.0%20220.0M200.0%20220.0Q181.6%20244.3%20185.9%20214.1M185.9%20214.1Q155.7%20218.4%20180.0%20200.0M180.0%20200.0Q155.7%20181.6%20185.9%20185.9M185.9%20185.9Q181.6%20155.7%20200.0%20180.0M200.0%20180.0Q218.4%20155.7%20214.1%20185.9M214.1%20185.9Q244.3%20181.6%20220.0%20200.0'%20stroke-width='1.3'%20opacity='.5'/><circle%20cx='200'%20cy='200'%20r='18.0'%20stroke-width='1.6'%20opacity='.7'/><circle%20cx='200'%20cy='200'%20r='7.0'%20stroke-width='2.2'%20opacity='.8'/></g></svg>") center / contain no-repeat;
  animation: turn 320s linear infinite;
}

@keyframes turn {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

:root[data-theme="dark"] body::before {
  background:
    url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'><filter%20id='g'><feTurbulence%20type='fractalNoise'%20baseFrequency='.8'%20numOctaves='4'%20stitchTiles='stitch'/><feColorMatrix%20type='saturate'%20values='0'/></filter><rect%20width='180'%20height='180'%20filter='url(%23g)'%20opacity='.16'/></svg>") repeat,
    radial-gradient(70rem 44rem at 8% -12%, rgba(237, 161, 85, .13), transparent 62%),
    radial-gradient(56rem 38rem at 94% 2%, rgba(215, 172, 92, .12), transparent 58%),
    radial-gradient(60rem 30rem at 50% 108%, rgba(237, 161, 85, .08), transparent 62%);
}

:root[data-theme="dark"] body::after { opacity: .075; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.25rem);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-right: auto;
}

/* the ॐ chakra lifted out of the logo artwork */
.brand .mark {
  display: block;
  width: 46px;
  height: 46px;
  flex: none;
  transition: transform .25s ease;
}
.brand:hover .mark { transform: rotate(12deg); }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-size: 1.16rem; letter-spacing: .02em; }
.brand-sub { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--ink-soft);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s;
}
.icon-btn:hover { color: var(--saffron); border-color: var(--saffron); transform: translateY(-1px); }

.header-link {
  font-size: .88rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .35rem .2rem;
  border-bottom: 1px solid transparent;
}
.header-link:hover { color: var(--saffron); border-bottom-color: var(--saffron); }

/* script switch, sitting beside the nav link */
.script-switch { flex: none; }
.script-switch button {
  padding: .3rem .62rem;
  font-size: .78rem;
  line-height: 1.6;
}
.script-switch button[data-script="devanagari"] { font-family: var(--deva); }
.script-switch button[data-script="telugu"] { font-family: var(--telu); }

/* ---------- hero ---------- */

.hero {
  padding: 0 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
}

/* The banner artwork already carries the wordmark, so the text title only
   appears when the image is unavailable (see #banner handling in app.js).
   It runs edge to edge, flush under the header. */
.banner {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(2rem, 4.5vw, 3.25rem);
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  background: var(--bg-sunk);
}

/* The banner box is 3:1 on anything desktop-sized. Art authored at that ratio
   fills it edge to edge with no crop at all; art of any other shape is scaled
   down whole — never cropped, since the wordmark and tagline are painted into
   the image — and the space beside it is filled with a blurred, darkened copy
   of the art itself, so the band still reads as full width. */
.banner::before {
  content: "";
  position: absolute;
  inset: -3rem;
  background: url("/assets/banner.jpg") center / cover no-repeat;
  filter: blur(2.5rem) brightness(.42) saturate(1.15);
}

/* lets the <img> itself be the flex item, so the rules below still apply */
.banner picture { display: contents; }

.banner img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 700px) {
  .banner {
    /* width must be pinned: aspect-ratio alone would let max-height shrink the
       box horizontally and leave a gap at the right edge */
    width: 100%;
    aspect-ratio: 3 / 1;
    max-height: 85vh;
  }
  .banner img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }
}

.hero-fallback { display: none; }
.hero[data-banner="missing"] .banner { display: none; }
.hero[data-banner="missing"] .hero-fallback { display: block; }
.hero-fallback h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.1;
  margin: 0 0 .35rem;
  letter-spacing: .01em;
}

.hero-sanskrit {
  font-family: var(--deva);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--saffron);
  line-height: 2;
  margin: 0 0 1.1rem;
}

.hero-deva {
  font-family: var(--deva);
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.hero p.lede {
  max-width: 46rem;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(1.06rem, 1.7vw, 1.2rem);
}

/* standing Sanskrit follows the header's script switch */
.hero-sanskrit[data-script="telugu"],
.hero-deva[data-script="telugu"],
.site-footer .deva[data-script="telugu"],
#chapter-count [data-script="telugu"] {
  font-family: var(--telu);
}
.hero-sanskrit[data-script="telugu"] { line-height: 1.85; }

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.stat { text-align: center; }
.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--saffron);
}
.stat span {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- section heads ---------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: clamp(2rem, 5vw, 3.5rem) 0 1.5rem;
}

.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  margin: 0;
}
.section-head p { margin: .25rem 0 0; color: var(--ink-faint); font-size: .92rem; }

.search {
  position: relative;
  flex: 0 1 320px;
}
.search input {
  width: 100%;
  padding: .68rem .9rem .68rem 2.2rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus {
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saffron) 18%, transparent);
}
.search::before {
  content: "⌕";
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-52%);
  font-size: 1.1rem;
  color: var(--ink-faint);
}

/* ---------- chapter grid ---------- */

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 1.15rem;
  padding-bottom: 4rem;
}

.chapter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chapter-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
  opacity: 0;
  transition: opacity .18s;
}
.chapter-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--saffron) 40%, var(--line));
}
.chapter-card:hover::after { opacity: 1; }

.chapter-num {
  font-family: var(--serif);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: .6rem;
}

.chapter-deva {
  font-family: var(--deva);
  font-size: 1.32rem;
  line-height: 1.8;
  margin: 0 0 .3rem;
}
.chapter-deva[data-script="telugu"] { font-family: var(--telu); line-height: 1.7; }

.chapter-title {
  font-family: var(--serif);
  font-size: 1.12rem;
  margin: 0 0 .1rem;
}

.chapter-meaning { color: var(--ink-soft); font-size: .92rem; margin: 0 0 .85rem; }

.chapter-summary {
  color: var(--ink-faint);
  font-size: .93rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chapter-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-faint);
}
.chapter-foot .go { color: var(--saffron); font-weight: 500; }

/* ---------- chapter page ---------- */

.crumb {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 2rem 0 1.25rem;
  font-size: .88rem;
  color: var(--ink-faint);
  text-decoration: none;
}
.crumb:hover { color: var(--saffron); }

.chapter-hero {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.chapter-hero .eyebrow {
  font-family: var(--serif);
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--saffron);
}
.chapter-hero h1 {
  font-family: var(--deva);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  line-height: 1.6;
  margin: .5rem 0 .1rem;
}
.chapter-hero .translit {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color: var(--ink-soft);
  margin: 0 0 .3rem;
}
.chapter-hero .meaning { color: var(--ink-faint); margin: 0; }

.summary-box {
  margin-top: 1.6rem;
  padding: 1.3rem 1.4rem;
  background: var(--bg-sunk);
  border-left: 3px solid var(--saffron);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.summary-box .summary-label {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .5rem;
}
.summary-box p { margin: 0 0 .7rem; color: var(--ink-soft); white-space: pre-line; }
.summary-box p:last-of-type { margin-bottom: 0; }
.summary-box[data-lang="hindi"] p { font-family: var(--deva); line-height: 1.95; }

/* ---------- controls ---------- */

.controls {
  position: sticky;
  top: 66px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.1rem;
  margin: 2rem 0 1.5rem;
  padding: .9rem 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.field { display: flex; align-items: center; gap: .45rem; }
.field label {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field select, .field input[type="number"] {
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .42rem .6rem;
  max-width: 15rem;
  cursor: pointer;
  outline: none;
}
.field select:focus, .field input:focus { border-color: var(--saffron); }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.toggle input { accent-color: var(--saffron); width: 15px; height: 15px; cursor: pointer; }

.pill-group { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.pill-group button {
  font: inherit;
  font-size: .82rem;
  padding: .4rem .8rem;
  border: 0;
  background: var(--bg-elev);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pill-group button + button { border-left: 1px solid var(--line); }
.pill-group button[aria-pressed="true"] { background: var(--saffron); color: #fff; }

/* ---------- verses ---------- */

.verse-list { padding-bottom: 3rem; }

.verse {
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 140px;
}
.verse:target .verse-no { color: #fff; background: var(--saffron); border-color: var(--saffron); }

.verse-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.1rem;
}
.verse-no {
  display: inline-grid;
  place-items: center;
  min-width: 3.4rem;
  padding: .18rem .55rem;
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--saffron);
  border: 1px solid color-mix(in srgb, var(--saffron) 35%, var(--line));
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.verse-no:hover { background: var(--saffron); color: #fff; }
.verse-rule { flex: 1; height: 1px; background: var(--line); }

.verse-sanskrit {
  font-family: var(--deva);
  font-size: clamp(1.3rem, 3vw, 1.62rem);
  line-height: 2.15;
  color: var(--ink);
  margin: 0 0 1rem;
  white-space: pre-line;
}

/* Telugu sits taller on the line than Devanagari and carries no headline bar,
   so it needs its own face and a little more room to breathe. */
.verse-sanskrit[data-script="telugu"],
.chapter-hero h1[data-script="telugu"] {
  font-family: var(--telu);
  line-height: 1.95;
}
.chapter-hero h1[data-script="telugu"] { line-height: 1.5; }

.verse-translit {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  white-space: pre-line;
}

.verse-translation {
  font-size: 1.14rem;
  line-height: 1.8;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid color-mix(in srgb, var(--saffron) 45%, transparent);
  white-space: pre-line;
}
.verse-translation .attrib {
  display: block;
  margin-top: .5rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.verse-translation[data-lang="hindi"] { font-family: var(--deva); line-height: 2; }

.verse details {
  margin-top: 1.2rem;
  border-top: 1px dashed var(--line);
  padding-top: .9rem;
}
.verse details summary {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  list-style: none;
}
.verse details summary::-webkit-details-marker { display: none; }
.verse details summary::before { content: "＋ "; color: var(--saffron); }
.verse details[open] summary::before { content: "− "; }
.verse details summary:hover { color: var(--saffron); }
.word-meanings {
  margin: .8rem 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.word-meanings b { color: var(--ink); font-weight: 600; }

/* ---------- pager & states ---------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 4rem;
}
.pager a {
  flex: 1;
  max-width: 20rem;
  padding: 1rem 1.15rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.pager a:hover { border-color: var(--saffron); transform: translateY(-2px); }
.pager a.next { text-align: right; margin-left: auto; }
.pager .dir { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.pager .label { display: block; font-family: var(--serif); font-size: 1.02rem; margin-top: .25rem; }

.state {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--ink-faint);
}
.state .om-spin {
  display: inline-block;
  font-family: var(--deva);
  font-size: 2rem;
  color: var(--saffron);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

.state.error { color: #b23c17; }
:root[data-theme="dark"] .state.error { color: #ef8a5e; }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3rem;
  color: var(--ink-faint);
  font-size: .86rem;
}

/* the full logo lockup, shown where there's width for the wordmark to read */
.footer-logo {
  display: block;
  width: min(360px, 78%);
  height: auto;
  margin: 0 auto 2rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--saffron); }
.site-footer .deva { font-family: var(--deva); color: var(--saffron); }

@media (max-width: 620px) {
  .controls { position: static; }
  /* the larger type makes this wrap; the brand and the crumb already cover it */
  .header-link { display: none; }
  /* the script switch needs the room, and the banner right below carries the
     wordmark far more prominently than the header ever did */
  .brand-text { display: none; }
  .brand { margin-right: auto; }
  .script-switch button { padding: .3rem .5rem; font-size: .74rem; }
  .pager { flex-direction: column; }
  .pager a.next { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  /* the blanket rule above keeps `infinite`, which would spin this every frame
     rather than stop it — the chakra has to be halted outright */
  body::after { animation: none !important; transform: translateY(-50%); }
}