:root {
  --teal: #4284a0;
  --gold: #c1af54;
  --toggle: #96bccf;
  --para: #3f6027;
  --sub: #4284a0;
  --deep: #0c5d7d;
  --cta-text: #f2c230;
  --ink: #1b1b1b;
  --knob: #f6f4ec;
  --paper-ink: #3a2a14;
  --quote-ink: #2b3a55;
  --maulana: #9a208c;
  --marquee-ink: #12394d;

  --bg-img: url(../assets/img/hero-bg.webp);
  --tl-img: url(../assets/img/corner-tl.webp);
  --tr-img: url(../assets/img/corner-tr.webp);
  --petals-img: url(../assets/img/petals.webp);
  --cta-img: url(../assets/img/cta-button.svg);
  --tape-img: url(../assets/img/tape.webp);
  --bullet-img: url(../assets/img/bullet.webp);
  --paper-img: url(../assets/img/paper.webp);
  --bl-img: url(../assets/img/corner-bl.webp);
  --br-img: url(../assets/img/corner-br.webp);
  --cloud-img: url(../assets/img/cloud.webp);
  --grass-img: url(../assets/img/grass.webp);
  --path-img: url(../assets/img/path.webp);
  --quote-img: url(../assets/img/quote-mark.webp);

  --font-en: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-te: "Anek Telugu", "Noto Sans Telugu", "Nirmala UI", "Gautami", sans-serif;
  --font-te-head: "Anek Telugu", "Noto Sans Telugu", "Nirmala UI", "Gautami", sans-serif;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: auto; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #e9efe6;
  font-family: var(--font-te);
  font-synthesis-weight: none;
  color: var(--para);
  -webkit-font-smoothing: antialiased;
}

/* One continuous watercolor behind every section (tile is mirrored so it never shows a seam) */
.canvas {
  position: relative;
  overflow: clip;
  background-color: #e9efe6;
  background-image: var(--bg-img);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  background-size: max(100%, 150svh) auto;
}
.art { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100svh, max(620px, 56vw));
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.corner-tl { z-index: 2; top: -9vw; left: -11vw; width: 25vw; aspect-ratio: 800 / 747; background-image: var(--tl-img); }
.corner-tr { z-index: 2; top: -8vw; right: -8vw; width: 20vw; aspect-ratio: 800 / 1004; background-image: var(--tr-img); }
.corner-bl { z-index: 2; bottom: -4vw; left: -9vw; width: 21vw; aspect-ratio: 800 / 1004; background-image: var(--tr-img); transform: scale(-1, -1); }
.corner-br { z-index: 2; bottom: -5vw; right: -11vw; width: 25vw; aspect-ratio: 800 / 747; background-image: var(--tl-img); transform: scale(-1, -1); }

.petals {
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  aspect-ratio: 1928 / 328;
  background-image: var(--petals-img);
}
.flower {
  z-index: 2;
  top: 38%;
  right: -2vw;
  width: 18.5vw;
  min-width: 120px;
  transform-origin: 100% 35%;
}
.flower img { display: block; width: 100%; height: auto; }

/* header */
.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2.8vw, 36px) clamp(18px, 7vw, 92px) 0;
}
.logo { display: block; width: clamp(150px, 25vw, 340px); }
.logo img { display: block; width: 100%; height: auto; }

.tools { display: flex; align-items: center; gap: clamp(14px, 3.6vw, 48px); }
.tools button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.tools button:focus-visible, .cta:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 12px; }

.toggle {
  position: relative;
  width: 68px; height: 30px;
  border-radius: 15px;
  background: var(--toggle) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.toggle .label {
  position: absolute; top: 50%; left: 11px;
  transform: translateY(-50%);
  font-family: var(--font-en);
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  color: var(--ink);
  transition: left .25s ease;
}
.toggle .knob {
  position: absolute; top: 3px; left: 41px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--knob);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: left .25s ease;
}
.toggle[aria-pressed="true"] .knob { left: 3px; }
.toggle[aria-pressed="true"] .label { left: 33px; }

.menu { position: relative; width: 52px; height: 38px; }
.menu svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(80,40,20,.2)); }
.menu span {
  position: absolute; left: 0; right: 0; top: 58%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-en); font-weight: 700; font-size: 11px;
  color: var(--ink);
}
.search { width: 38px; height: 38px; display: grid; place-items: center; }
.search svg { width: 100%; height: 100%; display: block; }

/* hero content */
.content {
  position: relative; z-index: 4;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 7vw, 92px) clamp(96px, 14vw, 180px);
  max-width: 1180px;
}
.title {
  margin: 0;
  font-family: var(--font-te-head);
  font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 7.4rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  padding-bottom: .06em;
}
.title span {
  display: inline-block;
  background: linear-gradient(90deg, #4284a0 0%, #c1af54 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sub {
  margin: 0 0 clamp(18px, 2.6vw, 34px);
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.5vw, 2.1rem);
  letter-spacing: .09em;
  color: var(--sub);
}
.lede {
  margin: 0 0 clamp(26px, 4vw, 54px);
  max-width: 100%;
  font-family: var(--font-te);
  font-weight: 500;
  font-size: clamp(1rem, 1.85vw, 1.55rem);
  line-height: 1.75;
  color: var(--para);
}
.cta-row { display: flex; align-items: center; }
.cta {
  display: grid; place-items: center;
  width: clamp(230px, 25vw, 330px);
  aspect-ratio: 340 / 60;
  background: var(--cta-img) center / 100% 100% no-repeat;
  text-decoration: none;
  font-family: var(--font-te);
  font-weight: 700;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  color: #fffaf0;
  text-shadow: 0 1px 3px rgba(45,20,5,.65);
  transition: transform .2s ease, filter .2s ease;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cta:active { transform: translateY(0); filter: brightness(0.98); }

/* ---------- Marquee ---------- */
.marquee-wrap {
  position: relative;
  z-index: 6;
  overflow: hidden;
  margin-top: calc(-1 * clamp(18px, 3vw, 46px));
  padding: clamp(8px, 1.2vw, 16px) 0;
}
.marquee {
  position: relative;
  width: 104%;
  margin-left: -2%;
  height: clamp(48px, 6.4vw, 86px);
  transform: rotate(-.9deg);
  background: var(--tape-img) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(40,70,90,.18));
}
.marquee .viewport {
  position: absolute; inset: 0 4%;
  overflow-x: auto; scrollbar-width: none;
  display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee .viewport::-webkit-scrollbar { display: none; }
.track { display: flex; width: max-content; }
.set { display: flex; align-items: center; flex: none; }
.m-item {
  display: inline-flex; align-items: center; white-space: nowrap;
  color: var(--marquee-ink);
  font-size: clamp(.95rem, 1.7vw, 1.4rem);
  padding-right: clamp(26px, 4vw, 56px);
}
.m-item::before {
  content: "";
  flex: none;
  width: clamp(24px, 3vw, 40px); aspect-ratio: 1;
  margin-right: clamp(8px, 1.1vw, 14px);
  background: var(--bullet-img) center / contain no-repeat;
}
.m-item .te { font-family: var(--font-te); font-weight: 600; }
.m-item .dot { margin: 0 .5em; opacity: .6; }
.m-item .en { font-family: var(--font-en); font-weight: 500; }

/* ---------- About ---------- */
.about {
  position: relative;
  padding: clamp(36px, 6vw, 96px) clamp(16px, 4vw, 60px) clamp(4px, 0.8vw, 12px);
  display: flex; flex-direction: column; align-items: center;
}
.about h2 {
  position: relative; z-index: 3;
  margin: 0 0 clamp(20px, 3.4vw, 52px);
  font-family: var(--font-te-head);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.6vw, 4.8rem);
  line-height: 1.4;
  text-align: center;
  color: var(--deep);
}
.paper {
  --pwid: min(88vw, 1040px); --pt: calc(var(--pwid) * .125); --pb: calc(var(--pwid) * .0771);
  position: relative; z-index: 2;
  width: min(88%, 1040px);
  border: solid transparent; border-width: var(--pt) 0 var(--pb);
  border-image: var(--paper-img) 175 0 108 fill / var(--pt) 0 var(--pb) stretch;
  padding: clamp(4px, 1vw, 14px) clamp(26px, 6.4vw, 96px);
}
@media (min-width: 761px) {
  .paper { width: min(88%, 1040px); }
}
.paper p {
  margin: 0;
  font-family: var(--font-te);
  font-weight: 500;
  font-size: clamp(.9rem, 1.25vw, 1.1rem);
  line-height: 1.8;
  color: var(--paper-ink);
  text-align: justify;
  text-justify: inter-word;
}
.paper .short { display: none; }
@media (max-width: 760px) { .paper .full { display: none; } .paper .short { display: inline; } .paper { --pwid: min(94vw, 1040px); width: 94%; padding: 2px 22px; } .paper p { font-size: .9rem; line-height: 1.7; } }
.paper .en { font-family: var(--font-en); font-weight: 500; }

.branch { transform-origin: 50% 100%; }
.branch-l { z-index: 1; top: 3vw; left: -9vw; width: 24vw; aspect-ratio: 700 / 472; background-image: var(--bl-img); }
.branch-r { z-index: 1; top: 1vw; right: -8vw; width: 19vw; aspect-ratio: 560 / 772; background-image: var(--br-img); transform-origin: 70% 100%; }

/* ---------- Quote ---------- */
.quote {
  position: relative;
  padding: 0 clamp(18px, 6vw, 80px) clamp(100px, 13vw, 190px);
  text-align: center;
}
.quote figure { position: relative; z-index: 3; margin: 0 auto; max-width: 1000px; }
.q-icon { width: clamp(64px, 8vw, 110px); aspect-ratio: 201 / 137; margin: 0 auto clamp(18px, 2.6vw, 36px); background: var(--quote-img) center / contain no-repeat; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0 auto;
  max-width: 19em;
  font-family: var(--font-te-head);
  font-weight: 500;
  font-size: clamp(1.45rem, 3.7vw, 3.3rem);
  line-height: 1.6;
  color: var(--quote-ink);
  text-wrap: balance;
}
.quote figcaption {
  margin-top: clamp(18px, 2.8vw, 40px);
  font-family: var(--font-te);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.9rem);
  color: var(--maulana);
}
.cloud { z-index: 1; width: 22vw; aspect-ratio: 737 / 336; background-image: var(--cloud-img); }
.cloud-l { bottom: 2vw; left: -9vw; width: 20vw; }
.cloud-r { bottom: 2vw; right: -9vw; width: 17vw; transform-origin: center; transform: scaleX(-1); }
.q-branch { z-index: 1; left: -8vw; bottom: 14vw; width: 22vw; aspect-ratio: 700 / 472; background-image: var(--bl-img); }
.grass { z-index: 1; left: -9vw; bottom: -4vw; width: 44vw; aspect-ratio: 1200 / 398; background-image: var(--grass-img); }
.path { z-index: 2; right: -9vw; bottom: -5vw; width: 52vw; aspect-ratio: 1300 / 589; background-image: var(--path-img); }

@media (max-width: 760px) {
  .tools { gap: 14px; }
  .toggle { width: 58px; height: 26px; border-radius: 13px; }
  .toggle .label { font-size: 12px; left: 9px; }
  .toggle .knob { width: 20px; height: 20px; top: 3px; left: 35px; }
  .toggle[aria-pressed="true"] .knob { left: 3px; }
  .toggle[aria-pressed="true"] .label { left: 28px; }
  .menu { width: 44px; height: 32px; }
  .menu span { font-size: 9.5px; }
  .search { width: 30px; height: 30px; }

  .corner-tl { width: 52vw; top: -17vw; left: -22vw; }
  .corner-tr { width: 42vw; top: -14vw; right: -17vw; }
  .corner-bl { width: 40vw; bottom: -6vw; left: -19vw; }
  .corner-br { width: 50vw; bottom: -8vw; right: -24vw; }
  .flower { top: auto; bottom: 14%; width: 34vw; right: -8vw; opacity: .92; }
  .content { justify-content: flex-start; padding-top: clamp(36px, 12vw, 80px); }
  .hero { min-height: min(100svh, 720px); }

  .branch-l { width: 34vw; left: -14vw; top: 4vw; }
  .branch-r { width: 27vw; right: -12vw; top: 4vw; }
  .about { padding-bottom: clamp(22px, 7vw, 40px); }

  .cloud { width: 30vw; }
  .cloud-l { bottom: -4vw; left: -8vw; }
  .cloud-r { width: 27vw; bottom: -4vw; right: -8vw; }
  .q-branch { width: 36vw; left: -14vw; bottom: 30vw; }
  .grass { width: 86vw; left: -22vw; bottom: -6vw; }
  .path { width: 100vw; right: -30vw; bottom: -8vw; }
  .quote { padding-bottom: clamp(130px, 36vw, 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .flower, .branch, .cloud { animation: none; }
  .track { animation: none; }
  .marquee .viewport { overflow-x: auto; }
  .cta, .toggle .knob, .toggle .label { transition: none; }
  html { scroll-behavior: auto; }
}

/* ================= Menu screen ================= */
:root {
  --ms-ink: #25393d;
  --ms-arrow-img: url(../assets/img/arrow.webp);
  --ms-lily-img: url(../assets/img/lily.webp);
  --ms-ginkgo-img: url(../assets/img/ginkgo.webp);
  --ms-bloom-img: url(../assets/img/bloom.webp);
  --font-script: "Italianno", "Snell Roundhand", cursive;
  --font-display: "Libre Caslon Condensed", "Playfair Display", Georgia, "Times New Roman", serif;
}
.menu-screen {
  position: fixed; inset: 0; z-index: 100;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #df9a21 0%, #e8b776 100%);
  color: var(--ms-ink);
  visibility: hidden;
  opacity: 0;
}
.menu-screen.open {
  visibility: visible;
  opacity: 1;
}
.ms-inner {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(56px, 6vw, 84px)) 0 calc(env(safe-area-inset-bottom, 0px) + clamp(40px, 5vw, 72px));
}

.ms-art { position: absolute; z-index: 1; pointer-events: none; }
.ms-art .par { width: 100%; height: 100%; }
.ms-art .in { width: 100%; height: 100%; opacity: 1; transform: none; }
.ms-art .img {
  width: 100%; height: 100%;
  background-repeat: no-repeat; background-size: 100% 100%;
  transform-origin: var(--so, 0% 0%);
}
.ms-g-l, .ms-g-r { top: clamp(10px, 2.2vw, 36px); width: 19vw; aspect-ratio: 651 / 556; }
.ms-g-l { left: -1vw; }
.ms-g-r { right: -1vw; transform: scaleX(-1); }
.ms-g-l .img, .ms-g-r .img { background-image: var(--ms-ginkgo-img); }
.ms-bloom { right: -8vw; bottom: -9vw; width: 40vw; aspect-ratio: 950 / 855; }
.ms-bloom .img { background-image: var(--ms-bloom-img); }

.ms-title {
  position: relative; z-index: 3; margin: 0; text-align: center;
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(4.4rem, 10.4vw, 9rem); line-height: 1.08;
  color: var(--ms-ink);
}
.ms-title span { display: inline-block; padding: 0 .12em; }

/* body */
.ms-body {
  --bw: clamp(38px, 4.5vw, 62px);
  --aw: clamp(30px, 3vw, 42px);
  --gap: clamp(10px, 1.4vw, 18px);
  position: relative; z-index: 3;
  margin: clamp(6px, 2vw, 30px) 0 0 clamp(22px, 27.5vw, 560px);
  width: min(calc(100% - 44px), 760px);
}
.ms-group + .ms-group { margin-top: clamp(16px, 3.2vw, 44px); }
.ms-group h3 {
  display: flex; align-items: center; gap: var(--gap);
  margin: 0 0 clamp(4px, .8vw, 10px);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 6.2vw, 5.3rem); line-height: 1.1;
  letter-spacing: .005em;
}
.ms-lily { flex: none; width: var(--bw); aspect-ratio: 95 / 99; opacity: 1; transform: none; }
.ms-lily i { display: block; width: 100%; height: 100%; background: var(--ms-lily-img) center / contain no-repeat; }

.ms-list {
  list-style: none; margin: 0;
  padding: 0 0 0 calc(var(--bw) + var(--gap));
}
.ms-list a {
  position: relative; display: inline-flex; align-items: center; gap: calc(var(--aw) * .38);
  padding: .1em 0;
  font-family: var(--font-en); font-weight: 500;
  font-size: clamp(1.1rem, 2.1vw, 1.7rem); line-height: 1.5;
  color: var(--ms-ink); text-decoration: none;
}
.ms-list:has(a:hover) a:not(:hover) { opacity: .5; }
.ms-list a:focus-visible { outline: 3px solid var(--ms-ink); outline-offset: 5px; border-radius: 6px; }
.ms-list .arrow {
  flex: none; width: var(--aw); aspect-ratio: 320 / 200;
  background: var(--ms-arrow-img) center / contain no-repeat;
}
.ms-list .ic { flex: none; width: calc(var(--aw) * .85); height: calc(var(--aw) * .85); display: inline-flex; align-items: center; justify-content: center; background: center / contain no-repeat; }
.ms-list .ic.ic-call { background-size: auto 95%; }
.ms-list .ic.ic-wa { background-size: 94% auto; }
.ms-list .ic.ic-mail { background-size: 94% auto; }
.ms-list .t { position: relative; }
.ms-list a:hover .t, .ms-list a:focus-visible .t { text-decoration: underline; text-underline-offset: 4px; }

.ms-rise { opacity: 1; transform: none; filter: none; }

/* close button */
.ms-close {
  position: fixed; z-index: 6;
  top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 2.4vw, 34px));
  right: clamp(14px, 2.6vw, 38px);
  width: clamp(42px, 3.6vw, 52px); aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--ms-ink);
  box-shadow: 0 6px 16px rgba(60,35,5,.25);
  transition: transform .4s cubic-bezier(.2,.9,.25,1.3);
}
.ms-close svg { width: 46%; height: auto; display: block; }
.ms-close:hover { transform: rotate(90deg) scale(1.08); }
.ms-close:focus-visible { outline: 3px solid #f6e3bf; outline-offset: 3px; }

@media (max-width: 760px) {
  .ms-g-l, .ms-g-r { width: 40vw; top: 6px; }
  .ms-g-l { left: -10vw; }
  .ms-g-r { right: -10vw; }
  .ms-bloom { width: 84vw; right: -24vw; bottom: -16vw; }
  .ms-body { margin-left: 26px; }
}

/* ================= Books section ================= */
.books {
  --bk-green: #435335; --bk-panel: #e9e8da; --bk-title: #0c5d7d; --bk-ink: #1b1b1b;
  --bk-leaf: #3f5a1e; --bk-blue: #1d6b87; --bk-frame: #c8d1d9; --bk-foot: #f1eedf;
  --bk-tag-img: url(../assets/img/category-tag.webp); --bk-decor-img: url(../assets/img/books-decor.webp); --bk-rose-img: url(../assets/img/rose.webp);
  position: relative; z-index: 3; isolation: isolate; overflow: hidden;
  margin-top: clamp(-30px, -2vw, -8px);
  padding: clamp(64px, 7vw, 96px) clamp(8px, 1.4vw, 20px) clamp(48px, 6vw, 96px);
  background:
    radial-gradient(120% 80% at 100% 0%, #5a7044 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, #6a8851 0%, transparent 60%),
    var(--bk-green);
  color: var(--bk-ink);
}

.bk-art { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
.bk-wash-a { z-index: 0; top: -8vw; right: -14vw; width: 52vw; aspect-ratio: 800 / 767; background-image: var(--bk-decor-img); opacity: .5; mix-blend-mode: soft-light; transform: scaleX(-1); }
.bk-wash-b { z-index: 0; bottom: -14vw; left: -12vw; width: 56vw; aspect-ratio: 800 / 767; background-image: var(--bk-decor-img); opacity: .6; mix-blend-mode: soft-light; }
.bk-fleck { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff1b0, #f0b83a 55%, #b9791c);
  box-shadow: 0 0 10px rgba(240,184,58,.6); opacity: .75; }
.bk-rose { z-index: 5; width: 22vw; aspect-ratio: 900 / 602; background-image: var(--bk-rose-img); }
.bk-rose-a { top: -3vw; left: -4vw; transform-origin: 0% 0%; }
.bk-rose-b { bottom: -2vw; right: -4vw; transform-origin: 50% 50%; transform: rotate(180deg); }

.bk-panel { position: relative; z-index: 2; max-width: 1560px; margin: 0 auto; }
@media (min-width: 1024px) {
  .bk-panel {
    width: 80%;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.bk-panel.in { opacity: 1; transform: none; }
.bk-title { margin: 0 0 clamp(18px, 3vw, 40px); padding-top: clamp(14px, 2.5vw, 36px); font-family: var(--font-te-head); font-weight: 800; font-size: clamp(2.1rem, 5.6vw, 4.8rem); line-height: 1.4; text-align: center; color: #f6f1d8; text-shadow: 0 3px 14px rgba(14,24,8,.35); }
@media (max-width: 640px) {
  .bk-title { padding-top: 36px; margin-top: 10px; margin-bottom: 24px; }
  .bk-gh { padding-top: 8px; }
}
.bk-group { position: relative; background: var(--bg-img) center / cover no-repeat, var(--bk-panel); padding: clamp(18px, 2.2vw, 28px) clamp(2px, .6vw, 10px) clamp(8px, 1.2vw, 14px); border-radius: 8px; box-shadow: 0 20px 46px rgba(14,24,8,.3); opacity: 1; transform: none; }
.bk-group + .bk-group { margin-top: clamp(20px, 2.8vw, 38px); }
.bk-gh { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); flex-wrap: wrap; margin: 0 clamp(10px, 2vw, 28px) clamp(6px, 1vw, 12px); padding-bottom: 14px; border-bottom: 2px solid #c9b86a; }
.bk-flr { flex: none; width: clamp(34px, 3.6vw, 48px); aspect-ratio: 95 / 99; background: var(--ms-lily-img) center / contain no-repeat; }
.bk-gt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-gk { font: 800 11px/1 var(--font-en), sans-serif; letter-spacing: .2em; color: #4284a0; }
.bk-gn { margin: 0; font-family: var(--font-te-head); font-weight: 800; font-size: clamp(1.45rem, 2.9vw, 2.2rem); line-height: 1.3; color: var(--bk-title); }
.bk-gc { flex: none; background: #0d5f82; color: #f2c230; border-radius: 999px; padding: 6px 12px; font: 900 11.5px/1 var(--font-en), sans-serif; letter-spacing: .06em; }
.bk-lib { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: .62em 1.3em; border-radius: 999px; background: #0d5f82; border: 1px solid #2259a2; color: #f2c230; text-decoration: none; font: 800 clamp(13px, 1.2vw, 14.5px)/1.2 var(--font-te), var(--font-en), sans-serif; box-shadow: 0 4px 12px rgba(12,93,125,.28); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.bk-lib svg { width: 19px; height: 19px; flex: none; transition: transform .35s cubic-bezier(.2,1.5,.4,1); }
.bk-lib .ar { width: 17px; height: 17px; transition: transform .3s ease; }
.bk-lib:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 10px 20px rgba(12,93,125,.34); }
.bk-lib:hover svg:first-child { transform: rotate(-10deg) scale(1.12); } .bk-lib:hover .ar { transform: translateX(4px); }
.bk-lib:focus-visible { outline: 3px solid var(--bk-title); outline-offset: 3px; }
@media (max-width: 640px) { .bk-lib { margin-left: 0; width: 100%; justify-content: center; } }
.bk-tag-wrap { display: flex; justify-content: center; margin-bottom: clamp(18px, 3vw, 44px); }
.bk-tag {
  margin: 0; display: inline-grid; place-items: center; text-align: center;
  min-width: clamp(190px, 22vw, 300px); padding: .62em 2.4em;
  background: var(--bk-tag-img) center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(50,60,20,.2));
  font-family: var(--font-te); font-weight: 700; color: #fff; line-height: 1.35;
  font-size: clamp(1.05rem, 2vw, 1.7rem); text-shadow: 0 1px 2px rgba(40,50,15,.35);
  opacity: 1; transform: none;
}
.bk-shelf { position: relative; }
.bk-row { display: block; container-type: inline-size; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: none; scrollbar-width: none; padding: 30px clamp(2px, .6vw, 8px) 40px; -webkit-overflow-scrolling: touch; }
.bk-trk { display: flex; gap: clamp(14px, 2.6vw, 38px); width: max-content; min-width: 100%; justify-content: safe center; }
.bk-row::-webkit-scrollbar { display: none; }
.bk-nav { position: absolute; top: 42%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: none; place-items: center; background: var(--bk-leaf); box-shadow: 0 6px 14px rgba(30,45,15,.35); transition: transform .3s cubic-bezier(.2,.9,.25,1.3), opacity .3s ease; }
.bk-nav svg { width: 20px; height: 20px; }
.bk-nav:hover { transform: scale(1.1); }
.bk-nav[disabled] { opacity: .25; pointer-events: none; }
.bk-nav.prev { left: -6px; } .bk-nav.next { right: -6px; }
.bk-shelf.scrolls .bk-nav { display: grid; }
.bk-nav:focus-visible, .bk-share:focus-visible, .bk-dl:focus-visible, .bk-more:focus-visible { outline: 3px solid var(--bk-title); outline-offset: 3px; }
.bk-more-wrap { display: flex; justify-content: center; margin-top: clamp(4px, 1vw, 14px); }
.bk-more { font-family: var(--font-te); font-weight: 700; color: var(--bk-title); text-decoration: none; padding: .5em 1.4em; border: 2px solid var(--bk-title); border-radius: 999px; transition: background .3s ease, color .3s ease, transform .3s ease; }
.bk-more:hover { background: var(--bk-title); color: #fff; transform: translateY(-2px); }

/* ---- card: layers measured from the Canva screenshot (all sizes in card-width units) ---- */
.bk-card {
  container-type: inline-size; position: relative;
  flex: 0 0 min(62cqw, 238px); scroll-snap-align: center;
  opacity: 1; transform: none;
}
@media (min-width: 1024px) { .bk-card { flex-basis: calc((100cqw - 4 * clamp(14px, 2.6vw, 38px)) / 5); max-width: 270px; } }
.bk-card-in {
  background: var(--bk-frame); border: 1px solid var(--bk-ink);
  border-radius: 10.5cqw 10.5cqw 0 0;
  padding: 7.2cqw 10cqw 5.2cqw;
  position: relative;
}
.bk-mat { background: #efeeea; border: .55cqw solid var(--bk-ink); padding: 5.6cqw 4.3cqw; }
.bk-orange { position: relative; display: block; overflow: hidden; background: var(--cc, #e97b2b); padding: 3.8cqw 5.2cqw; }
.bk-cover { position: relative; display: block; aspect-ratio: 378 / 536; overflow: hidden; background: #f6e972; }
.bk-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk-foot { display: flex; align-items: center; justify-content: space-between; background: var(--bk-foot); border: 1px solid var(--bk-ink); border-top-width: 1px; margin: -1px 0 0; padding: 6.2cqw 8cqw 7.6cqw; }

/* Download button: gold icon cell + white label, blue outline, hatched slab behind (bottom-right) */
.bk-dl {
  position: relative; display: inline-flex; flex: none; width: 58cqw; margin: 0 2.2cqw 2.2cqw 0; text-decoration: none; isolation: isolate;
  font-family: var(--font-en); font-weight: 700; color: #3e5220;
}
.bk-dl::before { content: ""; position: absolute; inset: 0; z-index: 1; transform: translate(2.16cqw, 2.16cqw); border-radius: 2.8cqw; border: .65cqw solid #145973; box-sizing: border-box;
  background: repeating-linear-gradient(-45deg, #f7c724 0, #f7c724 4.1cqw, #145973 4.1cqw, #145973 4.75cqw); }
.bk-dl .fr { position: relative; z-index: 2; display: flex; align-items: stretch; width: 100%; height: 16.2cqw; box-sizing: border-box; border-radius: 2.8cqw; border: .65cqw solid #145973; background: #fff; overflow: hidden; transition: transform .14s cubic-bezier(.2,.8,.2,1); }
.bk-dl .ico { flex: none; display: flex; align-items: center; justify-content: center; width: 14.5cqw; box-sizing: border-box; background: #e8c455; border-right: .65cqw solid #145973; color: #3e5220; }
.bk-dl .ico svg { width: 7.8cqw; height: 7.8cqw; }
.bk-dl .lbl { flex: 1; display: flex; align-items: center; justify-content: center; white-space: nowrap; line-height: 1; font-size: 6cqw; letter-spacing: .01em; text-transform: uppercase; padding: 0 2cqw; }
.bk-dl:hover .fr { transform: translate(.45cqw, .45cqw); }
.bk-dl:active .fr { transform: translate(1.5cqw, 1.5cqw); }
.bk-dl.busy { pointer-events: none; } .bk-dl.busy .ico svg { animation: bk-fall .55s ease-in infinite; }
.bk-dl.done .ico { background: #9bc35a; }
@keyframes bk-fall { 0% { transform: translateY(-3cqw); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(3cqw); opacity: 0; } }
.bk-share { flex: none; width: 15cqw; aspect-ratio: 1; display: grid; place-items: center; margin-left: 5cqw; border: 0; background: none; cursor: pointer; padding: 0; transition: transform .25s cubic-bezier(.2,.9,.25,1.3); }
.bk-share:hover { transform: scale(1.1); }
.bk-share svg { width: 100%; height: 100%; }
.bk-share { position: relative; } .bk-share svg { overflow: visible; }
.bk-share .ln { fill: none; stroke: #3f5a1e; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
.bk-share .dt { transform-box: fill-box; transform-origin: 50% 50%; }

.bk-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 300; background: var(--bk-leaf, #3f5a1e); color: #fff; padding: 12px 22px; border-radius: 999px; font-family: var(--font-te); font-weight: 600; font-size: 1rem; box-shadow: 0 10px 24px rgba(20,30,10,.35); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2,.9,.25,1.3), opacity .3s ease; }
.bk-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---- share popup ---- */
.shd { --bk-rose-img: url(../assets/img/rose.webp); border: 0; padding: 0; background: transparent; width: min(420px, 92vw); max-width: none; margin: auto; overflow: visible; color: #1b1b1b; }
.shd::backdrop { background: rgba(28,40,20,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.shd-paper { position: relative; background: #e9e8da; border: 9px solid #435335; border-radius: 6px; box-shadow: 0 36px 70px -18px rgba(10,20,5,.7); padding: 26px 22px 20px; overflow: hidden;
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(154,196,120,.35), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(154,196,120,.28), transparent 60%); }
.shd-rose { position: absolute; z-index: 0; top: -34px; right: -44px; width: 150px; aspect-ratio: 900 / 602; background-image: var(--bk-rose-img); background-size: 100% 100%; transform: scaleX(-1) rotate(8deg); opacity: .95; transform-origin: 100% 0; pointer-events: none; }
.shd-x { position: absolute; z-index: 3; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #3f5a1e; display: grid; place-items: center; cursor: pointer; transition: transform .35s cubic-bezier(.2,.9,.25,1.4); }
.shd-x:hover { transform: rotate(90deg) scale(1.08); }
.shd-x svg { width: 14px; height: 14px; }
.shd-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding-right: 34px; }
.shd-mini { flex: none; width: 52px; background: #e97b2b; padding: 4px; box-shadow: 0 8px 14px -6px rgba(0,0,0,.4); outline: 2px solid #1b1b1b; outline-offset: 2px; transform: rotate(-4deg); }
.shd-mini img { display: block; width: 100%; aspect-ratio: 378 / 536; object-fit: cover; }
.shd-kick { margin: 0 0 4px; font-family: var(--font-te-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; color: #934426; }
.shd-t { margin: 0; font-family: var(--font-te-head); font-weight: 800; font-size: 1.15rem; line-height: 1.4; color: #0c5d7d; }
.shd-link { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; padding: 6px 6px 6px 14px; background: rgba(67,83,53,.12); border: 1.5px dashed rgba(63,90,30,.55); border-radius: 12px; }
.shd-link span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 .8rem var(--font-en), var(--font-en); color: #3f5a1e; }
.shd-link button { flex: none; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 9px; background: #3f5a1e; color: #f6f1d8; font: 800 .75rem var(--font-en), var(--font-en); letter-spacing: .06em; transition: transform .25s ease; }
.shd-link button:hover { transform: translateY(-2px); }
.shd-tiles { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 6px 4px; padding: 12px 0 4px; }
.shd-tiles a, .shd-tiles button { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 0; border: 0; background: none; cursor: pointer; text-decoration: none; font: 700 .76rem var(--font-en), var(--font-en); color: #2a3a18; opacity: 1; transform: none; }
.shd-tiles i { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; border: 2px solid rgba(27,27,27,.85); box-shadow: 3px 3px 0 rgba(27,27,27,.85); transition: transform .3s cubic-bezier(.2,.9,.25,1.4), box-shadow .3s ease; }
.shd-tiles i svg { width: 26px; height: 26px; }
.shd-tiles a:hover i, .shd-tiles button:hover i { transform: translate(2px,2px) rotate(-4deg) scale(1.06); box-shadow: 1px 1px 0 rgba(27,27,27,.85); }
.shd-tiles a:focus-visible, .shd-tiles button:focus-visible, .shd-x:focus-visible, .shd-link button:focus-visible { outline: 3px solid #0c5d7d; outline-offset: 3px; border-radius: 10px; }

@media (max-width: 760px) {
  .bk-rose { width: 40vw; } .bk-rose-a { top: -6vw; left: -9vw; } .bk-rose-b { bottom: -5vw; right: -9vw; }
  .bk-wash-a { width: 96vw; right: -34vw; } .bk-wash-b { width: 100vw; left: -30vw; }
  .bk-row { justify-content: flex-start; padding-inline: 4%; }
  .bk-nav { display: none !important; }
}

/* menu button: folder lid + flying pages */
.menu svg { overflow: visible; position: relative; z-index: 1; }
.menu span { z-index: 2; }
.menu .lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.5,.4,1); }
.menu.opening .lid { transform: scaleY(.62) skewX(-7deg); }
.menu.opening { animation: menu-jiggle .5s ease; }
.menu::before { content: ""; position: absolute; left: 24%; right: 24%; top: 6%; height: 58%; z-index: 0; border-radius: 4px; background: linear-gradient(180deg, #fff3d6, #e8b776); box-shadow: 0 2px 6px rgba(147,68,38,.35);
  opacity: 0; transform: translateY(10px) rotate(0) scale(.8); transition: transform .45s cubic-bezier(.2,1.7,.4,1), opacity .25s ease; pointer-events: none; }
.search { position: relative; }
.search svg { transition: transform .5s cubic-bezier(.2,1.6,.4,1); }
.search::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid #4284a0; opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .menu:hover:not(.opening)::before, .menu:focus-visible::before { opacity: 1; transform: translateY(-9px) rotate(-6deg) scale(1); }
  .menu:hover:not(.opening) .lid, .menu:focus-visible .lid { transform: scaleY(.8) skewX(-6deg); }
  .menu:hover:not(.opening) { animation: menu-nudge .6s ease; }
  .search:hover svg, .search:focus-visible svg { transform: rotate(-16deg) scale(1.14); }
  .search:hover::before, .search:focus-visible::before { animation: search-ping .9s ease-out infinite; }
}
.menu:active:not(.opening)::before { transform: translateY(-12px) rotate(-3deg) scale(1.06); opacity: 1; }
.search:active svg { transform: rotate(-8deg) scale(.92); }
@keyframes menu-nudge { 30% { transform: translateY(1px) scale(.96); } 65% { transform: translateY(-2px) scale(1.04); } }
@keyframes menu-jiggle { 30% { transform: translateY(2px) scale(.95); } 65% { transform: translateY(-2px) scale(1.05); } }
@keyframes search-ping { from { transform: scale(.7); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.pg { position: fixed; left: 0; top: 0; z-index: 101; width: 46px; height: 58px; border-radius: 7px; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%), linear-gradient(180deg, #df9a21, #e8b776);
  box-shadow: 0 8px 18px rgba(147,68,38,.4), inset 0 0 0 1px rgba(255,255,255,.35); }
html.en { --font-te: "Space Grotesk", "Helvetica Neue", Arial, "Noto Sans Telugu", sans-serif; --font-te-head: var(--font-te); }
html.en .m-item .te, html.en .m-item .dot { display: none; }