/* ==========================================================================
   ACHALA ASHRAM — Design System
   Concept: "Stillpoint" — Achala means the unmoving. The site alternates
   deep "night-stone" bands and warm "day-stone" bands, echoing the
   tradition's own teaching: Yeruka (experience) moves, Paripurna does not.
   A single animated ring mark — the Stillpoint — recurs as the site's
   signature, marking section transitions the way a temple bell marks time.
   ========================================================================== */

:root{
  /* ---- Color tokens ---- */
  --ink:        #2A1810;   /* night-stone: warm espresso-maroon (not blue) */
  --ink-soft:   #3B2416;
  --stone:      #EDEAE0;   /* day-stone: warm grey-parchment */
  --stone-soft: #E3DED0;
  --card:       #F8F6EF;
  --gold:       #C98A32;   /* lamp-flame accent */
  --gold-soft:  #E0B36B;
  --maroon:     #7A2A2A;   /* kumkum accent */
  --moss:       #5B6B4F;   /* tulasi-leaf, tertiary */
  --text-on-stone: #2B2620;
  --text-on-ink:   #EDEAE0;
  --text-muted-stone: #6B6455;
  --text-muted-ink:   #B9B4C4;
  --hairline-stone: rgba(43,38,32,0.14);
  --hairline-ink:    rgba(237,234,224,0.16);

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Noto Serif Telugu', serif;
  --font-body: 'Karla', 'Noto Sans Telugu', sans-serif;

  /* ---- Layout ---- */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--stone);
  color: var(--text-on-stone);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); font-weight: 600; margin: 0 0 .5em; line-height: 1.15; }
p{ margin: 0 0 1.1em; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Eyebrow / labels ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.eyebrow::before{
  content:""; width: 22px; height: 1px; background: currentColor; display:inline-block;
}
.on-ink .eyebrow{ color: var(--gold-soft); }

/* ---- Stillpoint mark (signature element) ---- */
.stillpoint{
  width: 46px; height: 46px;
  display:block; margin: 0 auto;
  opacity: .85;
}
.stillpoint circle{
  fill:none; stroke: var(--gold); stroke-width: 1;
  transform-origin: center;
  animation: sp-breathe 6s ease-in-out infinite;
}
.stillpoint circle:nth-child(1){ animation-delay: 0s; }
.stillpoint circle:nth-child(2){ animation-delay: -2s; }
.stillpoint circle:nth-child(3){ animation-delay: -4s; }
.stillpoint .core{ fill: var(--gold); stroke:none; animation:none; }
@keyframes sp-breathe{
  0%   { r: 3;  opacity: .9; }
  70%  { r: 20; opacity: 0; }
  100% { r: 20; opacity: 0; }
}
.section-divider{
  display:flex; align-items:center; justify-content:center;
  padding: 8px 0 6px;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: linear-gradient(100deg, #6E2424 0%, #A34A1E 55%, #C98A32 100%);
  border-bottom: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 2px 18px rgba(43,20,10,.18);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px var(--gutter);
  max-width: var(--maxw); margin:0 auto;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:12px; flex: none; }
.brand img{ height: 38px; width:auto; flex:none; }
.brand-text{ font-family: var(--font-display); color: #FFF6E9; line-height:1.2; white-space:nowrap; text-shadow: 0 1px 3px rgba(40,14,6,.45); }
.brand-text .brand-main{ font-size: 16px; letter-spacing:.02em; font-weight:600; display:block; }
.brand-text .brand-sub{ font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: #FCE6C4; display:block; }

.main-nav{ display:flex; align-items:center; gap: 30px; flex: 1; justify-content:flex-end; min-width:0; }
.main-nav > ul{ display:flex; gap: 6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.main-nav a{
  font-size: 13.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color: #FFF6E9;
  text-shadow: 0 1px 2px rgba(40,14,6,.4);
  padding: 8px 12px; border-radius: 3px;
  border-bottom: 1px solid transparent;
  transition: background .2s ease, color .2s ease;
  white-space:nowrap;
}
.main-nav a:hover, .main-nav a.active{ background: rgba(35,14,8,.32); color: #FFFFFF; }
.has-drop{ position:relative; }
.dropdown{
  display:none; position:absolute; top: 100%; left:0; padding-top:14px;
  min-width: 200px;
}
.dropdown-inner{
  background: var(--ink-soft); border: 1px solid var(--hairline-ink);
  padding: 8px 0; box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{ display:block; }
.dropdown-inner li a{ display:block; padding: 10px 18px; font-size:13px; letter-spacing:.03em; text-transform:none; text-shadow:none; border-radius:0; color: var(--text-muted-ink); }
.dropdown-inner li a:hover{ background: rgba(201,138,50,.1); color: var(--gold-soft); }

.nav-toggle{ display:none; background:none; border:none; color: #FFF6E9; font-size: 26px; cursor:pointer; text-shadow: 0 1px 2px rgba(40,14,6,.4); }

@media (max-width: 1240px){
  .brand-text .brand-sub{ display:none; }
  .main-nav > ul{ gap: 16px; }
  .main-nav a{ font-size: 12.5px; }
}

@media (max-width: 980px){
  .main-nav{ position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); height:100vh;
    background: var(--ink); padding: 90px 26px 26px; transform: translateX(100%);
    transition: transform .35s ease; overflow-y:auto; }
  .main-nav.open{ transform: translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:flex-start; gap: 4px; width:100%; }
  .main-nav > ul > li{ width:100%; border-bottom:1px solid var(--hairline-ink); }
  .main-nav a{ display:block; padding: 14px 0; }
  .dropdown{ display:block; position:static; padding-top:0; padding-left: 10px; }
  .dropdown-inner{ background:none; border:none; box-shadow:none; padding:0; }
  .has-drop .dropdown{ display:none; }
  .has-drop.open .dropdown{ display:block; }
  .nav-toggle{ display:block; }
}

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero{
  position:relative; background: var(--ink); color: var(--text-on-ink);
  overflow:hidden; aspect-ratio: 2.56/1; min-height:440px; display:flex; align-items:center;
}
.hero-bg, .page-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero-tint{ position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(20,10,6,.86) 0%, rgba(20,10,6,.72) 30%, rgba(20,10,6,.28) 58%, rgba(20,10,6,.08) 78%),
    linear-gradient(180deg, rgba(42,24,16,.18), rgba(30,16,10,.58));
}
.page-hero-tint{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(42,24,16,.5), rgba(28,14,8,.93)); }
.hero-rings{
  position:absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: min(30vw, 380px); height: min(30vw, 380px); opacity:.5;
}
.hero-rings circle{ fill:none; stroke: var(--gold-soft); stroke-width: 1; }
.hero-rings .r1{ animation: sp-breathe 9s ease-in-out infinite; }
.hero-rings .r2{ animation: sp-breathe 9s ease-in-out infinite; animation-delay:-3s; }
.hero-rings .r3{ animation: sp-breathe 9s ease-in-out infinite; animation-delay:-6s; }
.hero-inner{ position:relative; z-index:2; max-width: var(--maxw); margin:0 auto; padding: 64px var(--gutter) 56px; width:100%; }
.hero .eyebrow{ margin-bottom: 16px; }
.hero h1{
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 500; letter-spacing: -0.01em;
  max-width: 15ch;
}
.hero h1 em{ font-style: italic; color: var(--gold-soft); font-weight:500; }
.hero .lede{
  font-size: 1.1rem; color: var(--text-muted-ink); max-width: 46ch; margin-top: 14px;
}
.hero-cta-row{ display:flex; gap:16px; margin-top: 26px; flex-wrap:wrap; }
@media (max-width: 600px){
  .hero{ aspect-ratio: auto; min-height: 560px; }
  .hero .eyebrow{ font-size: 10.5px; white-space:normal; }
  .hero-cta-row .btn{ width:100%; text-align:center; }
}

/* ---- Page (interior) banner ---- */
.page-hero{
  position:relative; min-height: 42vh; display:flex; align-items:flex-end;
  background: var(--ink); color: var(--text-on-ink); overflow:hidden;
}
.page-hero-wide{ min-height: clamp(230px, 18vw, 380px); }
.page-hero-wide .page-hero-inner{ padding: 70px var(--gutter) 26px; }
.page-hero-wide .page-hero-bg{ background-size: contain; background-repeat: no-repeat; background-color: #c08081; }
.page-hero-tag .page-hero-bg{ background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #3a2510; }
.page-hero-tall{ min-height: min(84vh, 820px); }
.page-hero-tall .page-hero-bg{ background-position: center 40%; }
.page-hero-tag{ min-height: clamp(280px, 26vw, 460px); }

.page-hero-split{ display:flex; flex-direction:column; padding:0; }
.page-hero-split-img{
  width:100%; aspect-ratio: 1.78/1; max-height: 58vh;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #3a2510;
}
.page-hero-split-text{ background: var(--ink); color: var(--text-on-ink); }
.page-hero-split-text h1{ font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight:500; }
@media (max-width: 720px){
  .page-hero-split-img{ aspect-ratio: 1.78/1; max-height: 42vh; }
}
.page-hero-inner{ position:relative; z-index:2; max-width: var(--maxw); margin:0 auto; padding: 140px var(--gutter) 46px; width:100%; }
.page-hero h1{ font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight:500; }
.breadcrumb{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--text-muted-ink); margin-top:10px; }
.breadcrumb a{ color: var(--gold-soft); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 13px 26px; font-size: 13.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  border: 1px solid currentColor; border-radius: var(--radius);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn-gold{ background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-gold:hover{ background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-1px); }
.btn-outline{ color: var(--text-on-ink); border-color: var(--hairline-ink); }
.btn-outline:hover{ border-color: var(--gold-soft); color: var(--gold-soft); }
.btn-outline.on-stone{ color: var(--text-on-stone); border-color: var(--hairline-stone); }
.btn-outline.on-stone:hover{ border-color: var(--maroon); color: var(--maroon); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section{ padding: 88px 0; }
section.tight{ padding: 56px 0; }
.on-ink{ background: var(--ink); color: var(--text-on-ink); }
.on-ink h2, .on-ink h3, .on-ink h4{ color: var(--text-on-ink); }
.on-ink p{ color: var(--text-muted-ink); }
.on-card{ background: var(--card); }

.section-head{ max-width: 62ch; margin-bottom: 46px; }
.section-head h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.section-head .lede{ color: var(--text-muted-stone); font-size: 1.05rem; }
.on-ink .section-head .lede{ color: var(--text-muted-ink); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---- Split media/text block ---- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media img{ width:100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.split-media-full img{ aspect-ratio: auto; object-fit: contain; height:auto; box-shadow:0 14px 34px rgba(43,38,32,.16); }
.split-media-sm{ display:flex; align-items:center; justify-content:center; }
.split-media-sm img{ width:100%; max-width:300px; height:auto; object-fit:contain; aspect-ratio:auto; margin:0 auto; box-shadow:0 14px 34px rgba(43,38,32,.16); }
.split-media-md{ display:flex; align-items:center; justify-content:center; }
.split-media-md img{ width:100%; max-width:440px; height:auto; object-fit:contain; aspect-ratio:auto; margin:0 auto; box-shadow:0 14px 34px rgba(43,38,32,.16); }
.split-media-wide{ display:flex; align-items:center; }
.split-media-wide img{ width:100%; height:auto; aspect-ratio: 3/2; object-fit:cover; }
.split-text h3{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
@media (max-width: 860px){
  .split, .split.reverse .split-media{ grid-template-columns: 1fr; order:0; }
  .split-media img{ aspect-ratio: 16/10; }
}

/* ---- Card grid ---- */
.grid{ display:grid; gap: 28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--card); border: 1px solid var(--hairline-stone);
  padding: 30px 26px; transition: transform .25s ease, box-shadow .25s ease;
  color: var(--text-on-stone);
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(43,38,32,.1); }
.card .card-icon{ width: 40px; height:40px; margin-bottom: 18px; color: var(--maroon); }
.card h4{ font-size: 1.15rem; margin-bottom:.4em; color: var(--text-on-stone); }
.card p{ color: var(--text-muted-stone); font-size: .97rem; margin-bottom: 0; }
.card a.card-link{ display:inline-block; margin-top:14px; font-size:13px; font-weight:700; letter-spacing:.04em; color: var(--maroon); text-transform:uppercase; }

.img-card{ display:block; position:relative; overflow:hidden; }
.img-card img{ aspect-ratio: 3/4; object-fit:cover; width:100%; transition: transform .5s ease; }
.img-card:hover img{ transform: scale(1.06); }
.img-card figcaption{
  position:absolute; inset:auto 0 0 0; padding: 22px 20px;
  background: linear-gradient(0deg, rgba(33,31,43,.92), rgba(33,31,43,0));
  color: var(--stone);
}
.img-card figcaption h5{ font-family: var(--font-display); font-size:1.1rem; margin:0; }

/* ---- Portrait card: image on top, caption BELOW (not overlaid) ---- */
.portrait-card{
  background: var(--card); border: 1px solid var(--hairline-stone);
  overflow:hidden; display:flex; flex-direction:column;
}
.portrait-card .portrait-img{ aspect-ratio: 4/5; overflow:hidden; background: var(--stone-soft); }
.portrait-card .portrait-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.portrait-card .portrait-body{ padding: 14px 16px 18px; }
.portrait-card h5{ font-family: var(--font-display); font-size: 1rem; margin: 0 0 2px; color: var(--text-on-stone); }
.portrait-card p{ margin:0; font-size:.85rem; color: var(--text-muted-stone); }
.on-ink .portrait-card{ background: var(--card); } /* keep card light even on dark sections for contrast */

/* ---- Quote / verse block ---- */
.quote-block{
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 28px; margin: 34px 0;
}
.quote-block p{ font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--text-on-stone); }
.on-ink .quote-block p{ color: var(--text-on-ink); }
.quote-block cite{ display:block; font-style:normal; font-size:.85rem; letter-spacing:.05em; color: var(--text-muted-stone); margin-top:8px; }

/* ---- Numbered sequence (use ONLY for real sequences: lineage, kriya steps) ---- */
.sequence{ counter-reset: seq; }
.seq-item{ position:relative; padding: 30px 0 30px 74px; border-top: 1px solid var(--hairline-stone); counter-increment: seq; }
.on-ink .seq-item{ border-color: var(--hairline-ink); }
.seq-item:first-child{ border-top: none; }
.seq-item::before{
  content: counter(seq, decimal-leading-zero);
  position:absolute; left:0; top: 28px;
  font-family: var(--font-display); font-size: 1.3rem; color: var(--gold);
}
.seq-item h4{ margin-bottom:.35em; }
.seq-item p{ color: var(--text-muted-stone); margin-bottom:0; }
.on-ink .seq-item p{ color: var(--text-muted-ink); }

/* ---- Lineage list ---- */
.lineage-list{ display:flex; flex-wrap:wrap; gap: 10px 14px; margin-top: 10px;}
.lineage-list li{
  font-size:.92rem; padding: 8px 16px; border:1px solid var(--hairline-stone);
  color: var(--text-muted-stone);
}
.on-ink .lineage-list li{ border-color: var(--hairline-ink); color: var(--text-muted-ink); }

/* ---- Simple feature list w/ check-like mark (non-numbered) ---- */
.mark-list li{ position:relative; padding-left: 26px; margin-bottom: 14px; }
.mark-list li::before{ content:"◦"; position:absolute; left:0; color: var(--gold); font-size:1.1em; }

/* ---- Stat / info strip ---- */
.info-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; border-top:1px solid var(--hairline-ink); border-bottom:1px solid var(--hairline-ink); padding: 34px 0; }
@media (max-width: 760px){ .info-strip{ grid-template-columns: 1fr; gap: 20px; } }
.info-strip div span{ display:block; font-family: var(--font-display); font-size: 1.9rem; color: var(--gold-soft); }
.info-strip div small{ font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color: var(--text-muted-ink); }

/* ---- Donation panel ---- */
.donate-panel{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 40px; background: var(--ink-soft); padding: 40px; border:1px solid var(--hairline-ink); }
@media (max-width: 760px){ .donate-panel{ grid-template-columns: 1fr; } }
.acc-list li{ display:flex; justify-content:space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--hairline-ink); font-size:.95rem; }
.acc-list li span{ color: var(--text-muted-ink); text-transform:uppercase; font-size:.75rem; letter-spacing:.06em; }
.qr-box{ background: var(--stone); padding: 16px; display:flex; align-items:center; justify-content:center; }
.qr-box img{ max-width: 170px; }

/* ---- Contact / location ---- */
.loc-card{ display:flex; gap: 16px; padding: 22px 0; border-top:1px solid var(--hairline-stone); }
.loc-card:first-child{ border-top:none; }
.loc-card .loc-ic{ width:38px; height:38px; flex:none; color: var(--maroon); }
.map-embed{ border:1px solid var(--hairline-stone); }
.map-embed iframe{ width:100%; height: 360px; border:0; display:block; }

/* ---- Publications ---- */
.pub-card{ background: var(--card); border:1px solid var(--hairline-stone); display:flex; flex-direction:column; }
.pub-cover{ aspect-ratio: 3/4; background: var(--stone-soft); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pub-cover img{ width:100%; height:100%; object-fit:cover; }
.pub-body{ padding: 18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.pub-price{ margin-top:auto; font-family:var(--font-display); color: var(--maroon); font-size:1.1rem; padding-top:10px; }

/* ---- Gallery ---- */
.gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:600px){ .gallery-grid{ grid-template-columns: repeat(2,1fr);} }
.gallery-grid a{ display:block; aspect-ratio:1; overflow:hidden; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.gallery-grid a:hover img{ transform: scale(1.08); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--ink); color: var(--text-muted-ink); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h5{ color: var(--gold-soft); font-size: .8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom: 18px; font-family: var(--font-body); font-weight:700;}
.footer-grid li{ margin-bottom: 10px; font-size: .93rem; }
.footer-grid a:hover{ color: var(--gold-soft); }
.footer-brand{ font-family: var(--font-display); color: var(--text-on-ink); font-size: 1.3rem; margin-bottom: 10px; }
.footer-bottom{ margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--hairline-ink); display:flex; justify-content:space-between; gap: 16px; flex-wrap:wrap; font-size: .82rem; }
.social-row{ display:flex; gap: 14px; margin-top: 18px; }
.social-row a{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hairline-ink); border-radius:50%; }
.social-row a:hover{ border-color: var(--gold-soft); color: var(--gold-soft); }

/* ---- Reveal-on-scroll ----
   Content is visible by default so it never depends on JS to be seen.
   Only once JS confirms it can observe the page (html.js-ready) do
   .reveal elements start hidden, ready to fade in via IntersectionObserver. */
html.js-ready .reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.active{ opacity:1 !important; transform:none !important; }

/* ---- Utility ---- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.small{ font-size:.88rem; }
.on-stone-muted{ color: var(--text-muted-stone); }