:root{
  /* ---- token system ---- */
  --parchment: #F2E8CC;      /* aged palm-leaf manuscript page */
  --parchment-deep: #E7D9AF;
  --ink: #1F2A44;             /* deep indigo ink */
  --ink-soft: #3B4766;
  --vermilion: #9B2226;       /* kumkum red */
  --gold: #B8862B;            /* turmeric / bronze gold */
  --gold-soft: #D9B45C;
  --night: #171E2E;           /* string/hero background — indigo night, not pure black */
  --night-2: #212B41;
  --cream-text: #F4ECD8;

  --font-telugu: 'Noto Serif Telugu', serif;
  --font-telugu-display: 'Ramabhadra', 'Noto Serif Telugu', serif;
  --font-serif: 'EB Garamond', serif;
  --font-ui: 'Work Sans', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--font-serif);
  line-height:1.6;
}
a{color:inherit;}

/* subtle paper texture */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(155,34,38,0.035), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(184,134,43,0.05), transparent 45%);
}

/* ---------- top nav ---------- */
header.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  background:rgba(242,232,204,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(31,42,68,0.15);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand .mark{font-family:var(--font-telugu-display); font-size:1.6rem; color:var(--vermilion);}
.brand .name{font-family:var(--font-ui); letter-spacing:0.14em; font-size:0.78rem; text-transform:uppercase; color:var(--ink);}
.brand .name small{display:block; font-size:0.62rem; letter-spacing:0.08em; color:var(--ink-soft); text-transform:none; font-family:var(--font-serif); font-style:italic;}
.brand .name-simple{font-family:var(--font-serif); font-weight:700; font-style:normal; font-size:1.3rem; color:var(--vermilion); letter-spacing:0.01em;}
nav.links{display:flex; gap:26px; font-family:var(--font-ui); font-size:0.86rem;}
nav.links a{text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s, color .2s;}
nav.links a:hover{color:var(--vermilion); border-color:var(--vermilion);}
.btn-contact{
  font-family:var(--font-ui); font-size:0.82rem; letter-spacing:0.03em;
  background:var(--vermilion); color:var(--cream-text); border:none;
  padding:9px 18px; border-radius:2px; cursor:pointer;
}

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:1;
  background:radial-gradient(ellipse at top, var(--night-2), var(--night) 70%);
  color:var(--cream-text);
  padding:64px 32px 40px;
  overflow:hidden;
}
.hero-inner{max-width:1040px; margin:0 auto; text-align:center;}
.eyebrow{font-family:var(--font-ui); letter-spacing:0.25em; text-transform:uppercase; font-size:0.72rem; color:var(--gold-soft); margin-bottom:18px;}
.hero h1{
  font-family:var(--font-telugu-display); font-weight:400;
  font-size:clamp(2.6rem,6vw,4.4rem); margin:0 0 6px;
  color:var(--cream-text);
}
.hero h1 .translit-hero{font-family:var(--font-serif); font-style:normal; font-weight:600; font-size:0.75em; color:var(--gold-soft); vertical-align:middle; letter-spacing:0.01em;}
.hero .subtitle{
  font-family:var(--font-serif); font-style:italic; font-size:1.15rem;
  color:var(--gold-soft); margin-bottom:28px;
}
.hero p.lede{
  max-width:640px; margin:0 auto 8px; font-size:1.02rem; color:#DCD3BC;
}
.name-accent{font-weight:700;}

/* ---- signature element: the akshamala bead-string navigator ---- */
.mala-nav{
  position:relative; margin:44px auto 8px; max-width:900px;
  padding:46px 10px 6px;
}
.mala-track{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:4px 2px;
  position:relative;
}
.mala-track::before{
  content:""; position:absolute; left:2%; right:2%; top:50%;
  height:1px; background:linear-gradient(90deg, transparent, rgba(217,180,92,0.5) 8%, rgba(217,180,92,0.5) 92%, transparent);
  transform:translateY(-50%); z-index:0;
}
.bead{
  position:relative; z-index:1;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%, #4a3a17, var(--night-2) 70%);
  border:1px solid rgba(217,180,92,0.45);
  color:var(--gold-soft);
  font-family:var(--font-telugu); font-size:0.95rem;
  cursor:pointer; text-decoration:none;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.bead::after{
  content:attr(data-translit);
  position:absolute; bottom:calc(100% + 9px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--gold-soft); color:var(--night);
  font-family:var(--font-serif); font-weight:600; font-style:normal;
  font-size:0.78rem; letter-spacing:0.01em;
  padding:4px 9px; border-radius:3px; white-space:nowrap;
  opacity:0; pointer-events:none;
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
  transition:opacity .15s ease, transform .15s ease;
  z-index:5;
}
.bead::before{
  content:"";
  position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%) translateY(4px);
  border:5px solid transparent; border-top-color:var(--gold-soft);
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:5;
}
.bead:hover::after, .bead:hover::before, .bead:focus-visible::after, .bead:focus-visible::before{
  opacity:1; transform:translateX(-50%) translateY(0);
}
.bead:hover, .bead.active{
  transform:translateY(-4px) scale(1.08);
  background:radial-gradient(circle at 32% 28%, var(--gold-soft), var(--gold) 70%);
  color:var(--night);
  box-shadow:0 6px 16px rgba(184,134,43,0.4);
}
.mala-caption{font-family:var(--font-ui); font-size:0.72rem; letter-spacing:0.08em; color:#9AA3BE; margin-top:14px;}

/* ---------- search ---------- */
.search-wrap{max-width:640px; margin:34px auto 0;}
.search-box{
  display:flex; align-items:center; gap:10px;
  background:rgba(244,236,216,0.08);
  border:1px solid rgba(217,180,92,0.4);
  border-radius:3px; padding:12px 16px;
}
.search-box input{
  flex:1; background:none; border:none; outline:none;
  font-family:var(--font-serif); font-size:1.05rem; color:var(--cream-text);
}
.search-box input::placeholder{color:#8B8770;}
.search-box .icon{color:var(--gold-soft); font-size:1.1rem;}
.search-hint{font-family:var(--font-ui); font-size:0.72rem; color:#8992AC; text-align:center; margin-top:10px; letter-spacing:.02em;}

/* ---------- section shell ---------- */
section{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:64px 32px;}
.section-head{margin-bottom:34px;}
.section-head .eyebrow-light{font-family:var(--font-ui); letter-spacing:0.2em; text-transform:uppercase; font-size:0.7rem; color:var(--vermilion); margin-bottom:8px;}
.section-head h2{font-family:var(--font-telugu-display); font-weight:400; font-size:2rem; margin:0; color:var(--ink);}
.section-head p{max-width:600px; color:var(--ink-soft); font-size:0.98rem;}

/* ---------- entry cards ---------- */
.entries{display:flex; flex-direction:column; gap:2px;}
.entry-card{
  background:#FAF3DE; border:1px solid rgba(31,42,68,0.12); border-left:3px solid var(--gold);
  padding:26px 28px; margin-bottom:16px; border-radius:2px;
}
.entry-top{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-bottom:14px;}
.entry-term{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.entry-term .te{font-family:var(--font-telugu-display); font-size:1.7rem; color:var(--vermilion);}
.entry-term .translit{font-family:var(--font-serif); font-style:italic; font-size:1.05rem; color:var(--ink-soft);}
.entry-page{font-family:var(--font-ui); font-size:0.72rem; color:#9A8C5E; letter-spacing:0.05em; white-space:nowrap;}
.entry-body{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:900px){ .entry-body.triple{grid-template-columns:1.1fr 1fr 1.1fr;} }
.entry-col{padding-right:4px;}
.entry-col + .entry-col{border-top:1px dashed rgba(31,42,68,0.15); padding-top:14px;}
@media(min-width:900px){
  .entry-col + .entry-col{border-top:none; padding-top:0; border-left:1px dashed rgba(31,42,68,0.15); padding-left:20px;}
}
.entry-col .label{font-family:var(--font-ui); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
.entry-col.telugu-text p{font-family:var(--font-telugu); font-size:1.05rem; line-height:1.85;}
.entry-col.translit-text p{font-family:var(--font-serif); font-style:italic; font-size:0.98rem; line-height:1.75; color:var(--ink-soft);}
.entry-col.english-text p{font-size:1rem; color:var(--ink-soft);}
.entry-tag{display:inline-block; font-family:var(--font-ui); font-size:0.68rem; letter-spacing:.05em; color:var(--ink-soft); background:rgba(31,42,68,0.06); padding:3px 9px; border-radius:20px; margin-top:12px;}

/* ---------- about / founder ---------- */
.about-grid{display:grid; grid-template-columns:1fr; gap:36px;}
@media(min-width:760px){ .about-grid{grid-template-columns:280px 1fr;} }
.founder-photo{
  width:100%; aspect-ratio:1/1.05; object-fit:cover; object-position:top center;
  border:6px solid #FAF3DE; box-shadow:0 10px 30px rgba(31,42,68,0.18);
  filter:sepia(18%) contrast(1.02);
}
.founder-cap{font-family:var(--font-ui); font-size:0.78rem; color:var(--ink-soft); text-align:center; margin-top:10px; letter-spacing:.02em;}
.brothers-photo{max-width:340px; margin:0 auto 22px;}
.brothers-photo img{
  width:100%; display:block; object-fit:cover;
  border:6px solid #FAF3DE; box-shadow:0 10px 30px rgba(31,42,68,0.18);
  filter:sepia(18%) contrast(1.02);
}
.about-copy h3{font-family:var(--font-telugu-display); font-weight:400; font-size:1.4rem; margin:0 0 10px; color:var(--ink);}
.credits{
  margin-top:26px; padding:18px 20px; background:rgba(184,134,43,0.08);
  border-left:3px solid var(--gold); font-size:0.92rem; color:var(--ink-soft);
}

/* ---------- footer / contact ---------- */
footer{background:var(--night); color:#B9C0D4; padding:48px 32px 30px;}
.footer-inner{max-width:1040px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; font-family:var(--font-ui); font-size:0.84rem;}
.footer-inner .fmark{font-family:var(--font-telugu-display); color:var(--gold-soft); font-size:1.3rem;}

/* contact modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(23,30,46,0.72); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--parchment); max-width:440px; width:100%; padding:30px; border-radius:3px; position:relative;}
.modal h3{font-family:var(--font-telugu-display); font-weight:400; margin:0 0 6px; font-size:1.4rem;}
.modal p.note{font-size:0.88rem; color:var(--ink-soft); margin-bottom:18px;}
.modal label{font-family:var(--font-ui); font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); display:block; margin:14px 0 5px;}
.modal input, .modal textarea{width:100%; font-family:var(--font-serif); font-size:0.98rem; padding:9px 11px; border:1px solid rgba(31,42,68,0.25); border-radius:2px; background:#FAF3DE;}
.modal textarea{min-height:90px; resize:vertical;}
.modal .send{margin-top:18px; width:100%; background:var(--vermilion); color:var(--cream-text); border:none; padding:11px; font-family:var(--font-ui); font-size:0.86rem; border-radius:2px; cursor:pointer;}
.modal .close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--ink-soft);}

.note-banner{
  max-width:1040px; margin:0 auto; padding:0 32px 10px;
}
.note-banner .box{
  font-family:var(--font-ui); font-size:0.82rem; color:#5c5335;
  background:rgba(184,134,43,0.12); border:1px dashed rgba(184,134,43,0.5);
  padding:12px 16px; border-radius:3px;
}

/* ---------- additional site-wide components ---------- */
.pending{color:#9A8C5E; font-style:italic;}

.speak-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-ui); font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--vermilion); background:rgba(155,34,38,0.08); border:1px solid rgba(155,34,38,0.3);
  border-radius:20px; padding:4px 11px; cursor:pointer; vertical-align:middle;
  transition:background .15s, transform .1s;
}
.speak-btn:hover{background:rgba(155,34,38,0.16);}
.speak-btn:active{transform:scale(0.96);}
.speak-btn.speaking{background:var(--vermilion); color:#fff;}
.speak-btn svg{flex-shrink:0;}
.entry-col .label .speak-btn{margin-left:10px; text-transform:none; letter-spacing:0.01em;}

.letter-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:10px;
}
.letter-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:#FAF3DE; border:1px solid rgba(31,42,68,0.12); border-radius:3px;
  padding:16px 8px; text-decoration:none; color:var(--ink); transition:transform .15s, box-shadow .15s;
}
.letter-tile:hover{transform:translateY(-3px); box-shadow:0 8px 18px rgba(31,42,68,0.12); border-color:var(--gold);}
.lt-te{font-family:var(--font-telugu-display); font-size:1.4rem; color:var(--vermilion);}
.lt-tr{font-family:var(--font-serif); font-style:italic; font-size:0.8rem; color:var(--ink-soft);}
.lt-count{font-family:var(--font-ui); font-size:0.65rem; letter-spacing:.05em; color:var(--gold); background:rgba(184,134,43,0.12); padding:1px 7px; border-radius:10px;}

.browse-list{display:flex; flex-direction:column; gap:1px;}
.browse-row{
  display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; align-items:baseline;
  background:#FAF3DE; border:1px solid rgba(31,42,68,0.1); border-left:3px solid var(--gold);
  padding:14px 20px; text-decoration:none; color:var(--ink); margin-bottom:8px; border-radius:2px;
}
@media(min-width:640px){ .browse-row{grid-template-columns:180px 180px 1fr;} }
.br-te{font-family:var(--font-telugu-display); font-size:1.15rem; color:var(--vermilion);}
.br-tr{font-family:var(--font-serif); font-style:italic; color:var(--ink-soft); font-size:0.95rem;}
.browse-snip{grid-column:1/-1; font-size:0.88rem; color:var(--ink-soft); margin:0;}
@media(min-width:640px){ .browse-snip{grid-column:3; margin:0;} }
.browse-snip.pending{color:#9A8C5E; font-style:italic;}

.prose-block{
  background:#FAF3DE; border:1px solid rgba(31,42,68,0.12); border-left:3px solid var(--vermilion);
  padding:26px 28px; margin-bottom:22px; border-radius:2px;
}
.prose-block h3{font-family:var(--font-telugu-display); font-weight:400; font-size:1.25rem; margin:0 0 12px; color:var(--ink);}
.prose-block p{margin:0 0 12px; color:var(--ink-soft);}
.prose-block blockquote{margin:0 0 12px; padding-left:16px; border-left:2px solid var(--gold); color:var(--ink-soft); font-style:italic;}

.search-results{
  max-width:640px; margin:12px auto 0; text-align:left; display:none;
  background:var(--night-2); border:1px solid rgba(217,180,92,0.3); border-radius:3px;
  max-height:360px; overflow-y:auto;
}
.search-results.open{display:block;}
.search-results a{
  display:flex; align-items:baseline; gap:12px; padding:10px 16px; text-decoration:none;
  border-bottom:1px solid rgba(217,180,92,0.12); color:var(--cream-text);
}
.search-results a:hover{background:rgba(217,180,92,0.08);}
.search-results .sr-te{font-family:var(--font-telugu); color:var(--gold-soft); font-size:1.05rem;}
.search-results .sr-tr{font-family:var(--font-serif); font-style:italic; color:#B9C0D4; font-size:0.9rem;}
.search-results .sr-en{font-size:0.82rem; color:#8992AC; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.search-results .sr-empty{padding:14px 16px; color:#8992AC; font-family:var(--font-ui); font-size:0.85rem;}