/* ═══════════════════════════════════════════════════════════════
   Ashish Dsa · personal site
   A manuscript on handmade paper: geru red oxide and turmeric
   gold laid down in natural dyes, with peacock and henna as
   secondary inks. After Madhubani and Pattachitra painting,
   Warli folk art, kolam floor drawing, and the pothi page.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:       #F3E7CC;  /* handmade paper                     */
  --paper-warm:  #EEDFBC;  /* aged patches                       */
  --paper-lift:  #F9F1DE;  /* raised panels                      */
  --ink:         #2A1C14;  /* iron-gall ink, deepened for body   */
  --ink-soft:    rgba(42, 28, 20, 0.88);
  --ink-faint:   rgba(42, 28, 20, 0.72); /* labels: keep >~4.5:1 on paper */
  --geru:        #9E3B22;  /* red oxide, the Madhubani brick red */
  --geru-deep:   #6E2816;
  --geru-mid:    rgba(158, 59, 34, 0.45);
  --geru-line:   rgba(158, 59, 34, 0.28);
  --geru-faint:  rgba(158, 59, 34, 0.12);
  --haldi:       #C08A1D;  /* turmeric gold                      */
  --haldi-deep:  #7A5610;  /* darker gold for small text counts  */
  --haldi-faint: rgba(192, 138, 29, 0.16);
  --gold-hi:     #E0AC3F;  /* burnished gold leaf highlight      */
  --gold-leaf:   linear-gradient(135deg, #7A5610, #C08A1D 38%, #E8C36A 52%, #C08A1D 66%, #7A5610);
  --mor:         #0F4F58;  /* peacock, deepened for links        */
  --mehendi:     #5A6B2F;  /* henna green, sparing               */

  --display: "Rozha One", "Georgia", serif;
  --body: "Martel", "Georgia", serif;
  --label: "Mukta", "Segoe UI", system-ui, sans-serif;

  --measure: 64ch;
  --shell: 1140px;
  --pad: clamp(1.5rem, 5vw, 4rem);

  /* Bento rhythm: separated rounded tiles floating on the paper,
     one quiet border each; the pothi page frame keeps the only
     double ruling on the leaf. */
  --r-panel: 16px;
  --r-tile: 11px;
  --gap: clamp(1rem, 2.2vw, 1.6rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='128'%3E%3Cg fill='none' stroke='%239E3B22' stroke-width='1' opacity='0.032'%3E%3Cpath d='M24 10c10 3 12 15 7 24-4 6-4 11-1 14-8-1-15-8-15-18 0-10 4-16 9-20z'/%3E%3Cpath d='M24 18c4 2 5 8 3 12'/%3E%3C/g%3E%3Cg fill='none' stroke='%239E3B22' stroke-width='1' opacity='0.032'%3E%3Cpath d='M72 74c-10 3-12 15-7 24 4 6 4 11 1 14 8-1 15-8 15-18 0-10-4-16-9-20z'/%3E%3Cpath d='M72 82c-4 2-5 8-3 12'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23C08A1D' stroke-width='0.8' opacity='0.04'%3E%3Cpath d='M24 4 L28 20 L44 24 L28 28 L24 44 L20 28 L4 24 L20 20 Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1300px 700px at 50% -8%, rgba(192, 138, 29, 0.12), transparent 62%),
    radial-gradient(1100px 800px at 108% 82%, rgba(158, 59, 34, 0.08), transparent 55%),
    radial-gradient(900px 700px at -8% 55%, rgba(20, 96, 107, 0.05), transparent 50%);
  background-size: 220px 220px, 96px 128px, 48px 48px, auto, auto, auto;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(1rem, 0.3vw + 0.94rem, 1.1rem);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--geru); color: var(--paper-lift); }

a { color: var(--mor); text-decoration-color: rgba(20, 96, 107, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--geru); text-decoration-color: currentColor; }
:focus-visible {
  outline: 2px solid var(--geru);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.18; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

/* The pothi margin: a ruled frame around the whole leaf */
.page-frame {
  position: fixed;
  inset: 10px;
  border: 1px solid var(--geru-line);
  outline: 1px solid var(--geru-faint);
  outline-offset: 3px;
  pointer-events: none;
  z-index: 60;
}
.page-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--haldi-faint);
  pointer-events: none;
}

/* Illuminated corners: a quarter-fan of petals in each margin corner */
.corner {
  position: fixed;
  width: 92px;
  height: 92px;
  pointer-events: none;
  z-index: 61;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86'%3E%3Cg fill='none'%3E%3Cpath d='M12 60 A48 48 0 0 0 60 12' stroke='%239E3B22' stroke-width='1' opacity='0.45'/%3E%3Cpath d='M12 48 A36 36 0 0 0 48 12' stroke='%239E3B22' stroke-width='1' opacity='0.35'/%3E%3Cpath d='M12 36 A24 24 0 0 0 36 12' stroke='%23C08A1D' stroke-width='1' opacity='0.4'/%3E%3Cg opacity='0.55'%3E%3Cellipse cx='16' cy='40' rx='3.4' ry='9' fill='%23C08A1D' transform='rotate(20 16 40)'/%3E%3Cellipse cx='24' cy='31' rx='3.4' ry='9' fill='%239E3B22' transform='rotate(45 24 31)'/%3E%3Cellipse cx='33' cy='24' rx='3.4' ry='9' fill='%23C08A1D' transform='rotate(66 33 24)'/%3E%3Cellipse cx='41' cy='17' rx='3.4' ry='9' fill='%239E3B22' transform='rotate(75 41 17)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%239E3B22' opacity='0.6'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23C08A1D'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
}
.c-tl { top: 82px; left: 13px; }
.c-tr { top: 82px; right: 13px; transform: scaleX(-1); }
.c-bl { bottom: 13px; left: 13px; transform: scaleY(-1); }
.c-br { bottom: 13px; right: 13px; transform: scale(-1, -1); }

/* ─── Header + toran ─────────────────────────────────────────── */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-head-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.8rem var(--pad) 0.65rem;
  /* Near-solid paper so nav labels stay legible while content scrolls under */
  background: color-mix(in srgb, var(--paper) 97%, #ffffff 3%);
  backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid var(--geru-line);
}

/* Toran: the scalloped mango-leaf hanging strung over a doorway */
.toran {
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 0h36v3a18 9 0 0 1-36 0z' fill='%239E3B22'/%3E%3Cpath d='M18 10l3.6 7h-7.2z' fill='%23C08A1D'/%3E%3Ccircle cx='18' cy='6' r='1.4' fill='%23F3E7CC' opacity='0.7'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
  filter: drop-shadow(0 1px 0 rgba(51, 36, 26, 0.12));
}

.brand {
  font-family: var(--display);
  font-size: 1.08rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.brand-mark { color: var(--geru); font-size: 0.7em; vertical-align: 0.15em; margin-right: 0.15rem; }
.brand:hover { color: var(--geru); }

.site-head nav {
  display: flex;
  gap: clamp(0.55rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.site-head nav::-webkit-scrollbar { display: none; }
.site-head nav a {
  font-family: var(--label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.2rem 0;
}
.site-head nav a:hover { color: var(--geru-deep); }

/* ─── Hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(3.5rem, 10vh, 6.5rem) var(--pad) clamp(2.5rem, 7vh, 4.5rem);
  text-align: center;
  overflow: hidden;
}

.rangoli {
  position: absolute;
  top: clamp(-2rem, -4vw, -4rem);
  left: 50%;
  /* Cap to viewport so decorative SVG never becomes a mobile overflow vector;
     hero also clips via overflow:hidden */
  width: min(560px, 100vw);
  max-width: 100%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.32; /* quieter so hero title and thesis stay crisp */
}
.rg-petal    { fill: none; stroke: var(--geru); stroke-width: 1.1; opacity: 0.22; }
.rg-dot      { fill: var(--geru); opacity: 0.24; }
.rg-dot-gold { fill: var(--haldi); opacity: 0.36; }
.rg-dm       { fill: var(--haldi); opacity: 0.28; }
.rg-line     { fill: none; stroke: var(--geru); stroke-width: 0.8; opacity: 0.16; }

.hero-medallion {
  position: absolute;
  top: clamp(-1rem, -2vw, -2rem);
  left: 50%;
  width: min(420px, 70vw);
  transform: translateX(-50%);
  opacity: 0.10; /* keep ornament, never wash out hero type */
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
/* .reveal sets opacity:1 when in-view; do not let that override the medallion wash */
html.js .hero-medallion.reveal,
html.js .hero-medallion.reveal.in-view {
  opacity: 0.10;
  transform: translateX(-50%);
}
.hero-medallion img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
}

.hero > :not(.rangoli):not(.hero-medallion) { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--label);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--geru);
}
.eyebrow [lang="sa"] {
  font-family: var(--display);
  font-size: 1.3em;
  letter-spacing: 0;
  text-transform: none;
  margin-right: 0.35rem;
}
.eyebrow em { font-family: var(--body); color: var(--ink-soft); letter-spacing: 0.08em; }

.hero h1 {
  font-size: clamp(3rem, 9vw, 5.9rem);
  margin: 1.1rem 0 0.4rem;
  color: var(--geru-deep);
  text-shadow: 0 1px 0 rgba(243, 231, 204, 0.8);
}

.hero-role { font-size: 1.05rem; color: var(--ink-soft); letter-spacing: 0.03em; }
.hero-role a { color: var(--geru); text-decoration: none; font-weight: 600; }
.hero-role a:hover { text-decoration: underline; }

.hero-thesis {
  max-width: 48ch;
  margin: 2.1rem auto 0;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.85;
  color: var(--ink);
}
.hero-thesis em { color: var(--geru); }

.kolam-wave {
  height: clamp(80px, 14vw, 130px);
  max-width: 780px;
  margin: 2.5rem auto 0;
}
.kolam-wave svg { display: block; }
.kolam-wave .dm { fill: var(--geru); }
.kolam-wave .dm-gold { fill: var(--haldi); }
@keyframes kolam-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.78); }
}
.kolam-wave .dm {
  transform-box: fill-box;
  transform-origin: center;
  animation: kolam-breathe 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .kolam-wave .dm { animation: none; }
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0;
  margin-top: 2.1rem;
  list-style: none;
  font-family: var(--label);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-facts li { padding: 0 1.1rem; }
.hero-facts li + li { border-left: 1px solid var(--geru-mid); }
/* The city path always takes its own centered row: seven stops never
   share a line, and a wrapped flex item must not carry the divider */
.hero-facts li.hero-path { flex-basis: 100%; border-left: none; margin-top: 0.45rem; }

/* ─── Stats band ─────────────────────────────────────────────── */

.stats-band {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(1rem, 3vh, 2rem) var(--pad) clamp(3rem, 7vh, 4.5rem);
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.stat {
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-tile);
  padding: 2rem 1.2rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(51, 36, 26, 0.05);
}
.stat-num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  color: var(--geru-deep);
  line-height: 1.15;
}
.stat-label {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.35;
}

/* ─── Chapters ───────────────────────────────────────────────── */

.chapter {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(4rem, 11vh, 7rem) var(--pad);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  scroll-margin-top: 5rem;
}

.chapter-key {
  position: sticky;
  top: 6.5rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.5rem;
  border-top: 3px double var(--geru);
}
.chapter-key .glyph {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 2.7rem);
  color: var(--geru);
  line-height: 1.35;
}
.chapter-key .translit {
  font-family: var(--label);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.chapter-key .gloss {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
}

.chapter-body { max-width: var(--measure); }
.chapter-body h2 {
  font-size: clamp(1.65rem, 3.3vw, 2.35rem);
  color: var(--geru-deep);
  margin-bottom: 1.9rem;
}
.chapter-body h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 10px;
  margin-top: 0.55rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cline x1='0' y1='5' x2='48' y2='5' stroke='%23C08A1D' stroke-width='1'/%3E%3Cline x1='72' y1='5' x2='120' y2='5' stroke='%23C08A1D' stroke-width='1'/%3E%3Cpath d='M60 0 L65 5 L60 10 L55 5 Z' fill='%239E3B22'/%3E%3Ccircle cx='50' cy='5' r='1.4' fill='%23C08A1D'/%3E%3Ccircle cx='70' cy='5' r='1.4' fill='%23C08A1D'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.chapter-body h3 {
  font-size: 1.16rem;
  color: var(--geru);
  margin: 3rem 0 0.9rem;
}
.chapter-body p + p { margin-top: 1.35rem; }
.section-lead {
  font-size: 0.96rem;
  color: var(--ink-soft);
  margin: -0.4rem 0 1.9rem;
}
.chapter-links { display: flex; flex-wrap: wrap; gap: 0.6rem 2.25rem; margin-top: 2.5rem; }

/* ─── About ──────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

.portrait {
  border: 1px solid var(--geru-mid);
  outline: 1px solid var(--geru-line);
  outline-offset: 4px;
  border-radius: 999px 999px 10px 10px;
  padding: 7px;
  background: var(--paper-lift);
  box-shadow: 0 6px 20px rgba(51, 36, 26, 0.08);
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 992px 992px 6px 6px;
  filter: sepia(0.12) saturate(0.96);
}
.portrait-wide {
  border-radius: 12px 12px 8px 8px;
  max-width: 420px;
}
.portrait-wide img { border-radius: 8px 8px 4px 4px; }
.portrait figcaption,
.photo-pair figcaption {
  font-family: var(--label);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.65rem;
  text-align: center;
  font-style: italic;
}
.photo-pair {
  margin-top: 3rem;
  display: flex;
  justify-content: flex-start;
}

/* ─── Warli divider ──────────────────────────────────────────── */

.ornament {
  max-width: min(640px, 78%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--geru-mid));
}
.ornament::before { --dir: right; }
.ornament::after  { --dir: left; }

.warli { display: block; line-height: 0; }
.warli-svg { display: block; }
.warli .wr   { fill: var(--geru); opacity: 0.62; }
.warli .wr-f { fill: var(--geru); opacity: 0.62; }
.warli .wr-l { fill: none; stroke: var(--geru); stroke-width: 1.3; stroke-linecap: round; opacity: 0.62; }

/* ─── Pills, cards, quotes ───────────────────────────────────── */

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  list-style: none;
  margin-top: 1.1rem;
}
.pill-list.tight { margin-top: 1.5rem; }
.pill-list li {
  padding: 0.42rem 1.15rem;
  border-radius: 999px;
  font-family: var(--label);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--haldi-faint);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
  margin-top: 2.25rem;
}
.card {
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-panel);
  padding: 2rem 2.1rem;
  box-shadow: 0 2px 10px rgba(51, 36, 26, 0.05);
  position: relative;
}
.card-accent {
  background:
    linear-gradient(160deg, rgba(192, 138, 29, 0.1), transparent 55%),
    var(--paper-lift);
}
/* A trailing odd card widens to anchor the bento row instead of
   leaving an empty cell beside it */
.card-grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card-icon {
  color: var(--geru);
  margin-bottom: 0.55rem;
}
.card h3 { margin: 0 0 0.75rem; }
.card ul { list-style: none; }
.card li { padding-left: 1.1rem; position: relative; }
.card li + li { margin-top: 0.75rem; }
.card li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.55em;
  color: var(--haldi);
}

blockquote {
  margin-top: 3rem;
  padding: 1.1rem 0 1.1rem 1.75rem;
  border-left: 3px solid var(--haldi);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink-soft);
  background: linear-gradient(90deg, var(--haldi-faint), transparent 70%);
}

/* ─── Logo wall + investors ──────────────────────────────────── */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 1rem 0;
}
.logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 112px;
  padding: 1.3rem 0.9rem;
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-tile);
  color: var(--geru-deep);
  box-shadow: 0 2px 8px rgba(51, 36, 26, 0.05);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.logo-tile:hover {
  border-color: var(--geru);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(51, 36, 26, 0.1);
}
.logo-glyph {
  display: block;
  width: 100%;
  max-width: 96px;
  color: var(--geru-deep);
}
.logo-glyph svg { width: 100%; height: auto; display: block; }
.logo-name {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .logo-tile { transition: none; }
}

.investor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  list-style: none;
  margin-top: 0.4rem;
}
.investor-row li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.75rem 1.25rem;
  background: var(--paper-lift);
  border: 1px solid var(--haldi);
  border-radius: var(--r-tile);
  font-family: var(--label);
  font-size: 0.9rem;
  color: var(--ink);
}
.investor-row li span {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--haldi-deep);
}

/* ─── Timeline ───────────────────────────────────────────────── */

.timeline {
  list-style: none;
  margin-top: 2rem;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5.4rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(var(--geru-mid), var(--geru-faint));
}
.timeline li {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 2.3rem;
  position: relative;
  padding-bottom: 2.6rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(5.4rem - 4px);
  top: 0.55rem;
  width: 9px;
  height: 9px;
  background: var(--paper);
  border: 1px solid var(--geru);
  transform: rotate(45deg);
}
.timeline .tl-year {
  font-family: var(--label);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--geru);
  text-align: right;
  padding-top: 0.35rem;
  white-space: nowrap;
}
.timeline h3 {
  font-family: var(--label);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.timeline p { font-size: 0.94rem; color: var(--ink-soft); }
.timeline .tl-now::before { background: var(--haldi); border-color: var(--haldi-deep); }
.timeline .tl-now h3 { color: var(--geru-deep); }

/* ─── Mark marquee (Home): the court procession ──────────────── */

.marquee-band {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(2.6rem, 6vh, 4rem);
}
.mq-row {
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-tile);
  padding: 1.05rem 0 1.15rem;
  overflow: hidden;
}
.mq-row + .mq-row { margin-top: var(--gap); }
.mq-label {
  display: block;
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haldi-deep);
  text-align: center;
  margin-bottom: 0.8rem;
}
.mq-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq-track {
  display: flex;
  width: max-content;
  animation: mq-scroll 48s linear infinite;
}
.mq-row-rev .mq-track { animation-direction: reverse; animation-duration: 64s; }
.mq-viewport:hover .mq-track { animation-play-state: paused; }
.mq-set {
  display: flex;
  align-items: center;
  gap: 3.1rem;
  padding-right: 3.1rem;
  flex: none;
}
.mq-set img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  filter: sepia(0.18) saturate(0.82) opacity(0.88);
}
.mq-set .mq-tall { height: 40px; }
@keyframes mq-scroll { to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .mq-set { gap: 2.1rem; padding-right: 2.1rem; }
  .mq-set img { height: 22px; }
  .mq-set .mq-tall { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .mq-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ─── Craft grid ─────────────────────────────────────────────── */

.yantra-band {
  margin: 1.5rem 0 0.5rem;
  border: 1px solid var(--geru-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  max-height: 150px;
  background: var(--paper-lift);
}
.yantra-band img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.9;
  filter: sepia(0.15) saturate(0.9);
}

.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
  margin-top: 2.25rem;
}
.craft-item {
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-tile);
  padding: 1.8rem 1.7rem;
  box-shadow: 0 2px 10px rgba(51, 36, 26, 0.05);
  position: relative;
}
.craft-item:hover {
  background: linear-gradient(180deg, rgba(192, 138, 29, 0.08), var(--paper-lift) 40%);
}
.craft-icon {
  color: var(--geru);
  margin-bottom: 0.65rem;
}
.craft-item h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.craft-item p { font-size: 0.92rem; color: var(--ink-soft); }

/* ─── Press ──────────────────────────────────────────────────── */

/* Illuminated seals: Forbes Editor's Choice + MIT $100K */
.prestige-seals {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  margin: 2.25rem 0 2.5rem;
}
.seal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.4rem;
  align-items: start;
  padding: 1.7rem 1.8rem;
  background:
    linear-gradient(145deg, rgba(192, 138, 29, 0.14), transparent 50%),
    var(--paper-lift);
  border: 1px solid var(--haldi);
  border-radius: var(--r-panel);
  box-shadow: 0 4px 16px rgba(51, 36, 26, 0.06);
}
.seal-medal {
  color: var(--geru-deep);
  line-height: 0;
  filter: drop-shadow(0 2px 0 rgba(192, 138, 29, 0.25));
}
.seal-mit .seal-medal { color: var(--geru); }
.seal-copy h3 {
  margin: 0.15rem 0 0.4rem;
  color: var(--geru-deep);
  font-size: 1.15rem;
}
.seal-copy p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* Trade-press outlet wall (claim 75 inventory) */
.trade-press-wall {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
  margin: 0.5rem 0 2.25rem;
}
.trade-press-wall > li {
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-tile);
  box-shadow: 0 2px 8px rgba(51, 36, 26, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.trade-press-wall > li:hover {
  border-color: var(--geru);
  box-shadow: 0 3px 10px rgba(51, 36, 26, 0.08);
}
/* An opened outlet unrolls across the full width of the wall */
.trade-press-wall > li:has(.tp-item[open]) { grid-column: 1 / -1; }
.tp-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  min-height: 3.1rem;
  cursor: pointer;
  list-style: none;
}
.tp-item summary::-webkit-details-marker { display: none; }
.tp-item summary::after {
  content: "◆";
  flex-shrink: 0;
  font-size: 0.5rem;
  color: var(--haldi-deep);
  transition: transform 160ms ease;
}
.tp-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--geru);
}
.tp-item .tp-name { flex: 1; }
.tp-articles {
  list-style: none;
  margin: 0;
  padding: 0.55rem 1.1rem 1.1rem;
  border-top: 1px dashed var(--geru-line);
}
.tp-articles li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.5rem 0 0.5rem 1.05rem;
  position: relative;
}
.tp-articles li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.62em;
  font-size: 0.5em;
  color: var(--haldi);
}
.tp-articles a {
  font-size: 0.87rem;
  line-height: 1.55;
}
.tp-date {
  flex-shrink: 0;
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .tp-item summary::after { transition: none; }
}
.tp-name {
  font-family: var(--label);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1.25;
}
.tp-count {
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--geru-deep); /* gold-on-cream failed small-text contrast */
  min-width: 1.25rem;
  text-align: right;
}
@media (prefers-reduced-motion: reduce) {
  .trade-press-wall li { transition: none; }
}

.masthead-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  list-style: none;
  margin: 2.25rem 0 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--geru-line);
  border-bottom: 1px solid var(--geru-line);
  background:
    linear-gradient(90deg, transparent, var(--haldi-faint), transparent);
}
.masthead-list li {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink-soft);
  white-space: nowrap;
  position: relative;
}
.masthead-list li + li::before {
  content: "◆";
  position: absolute;
  left: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.4em;
  color: var(--haldi);
}
.mh-forbes {
  color: var(--geru-deep) !important;
  font-size: 1.15rem !important;
}

.press-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
  margin: 1.75rem 0 0.5rem;
  padding: 1.15rem 1.25rem;
  background:
    linear-gradient(135deg, rgba(192, 138, 29, 0.14), transparent 55%),
    var(--paper-lift);
  border: 1px solid var(--haldi);
  outline: 1px solid var(--geru-line);
  outline-offset: 3px;
  border-radius: 4px;
}
.press-badge { color: var(--haldi-deep); }
.press-highlight h3 { margin: 0 0 0.4rem; color: var(--geru-deep); }
.press-highlight p { font-size: 0.96rem; color: var(--ink-soft); }

.clip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--gap);
  margin-top: 2.25rem;
}
.clip {
  display: flex;
  flex-direction: column;
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-tile);
  padding: 10px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(51, 36, 26, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.clip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(51, 36, 26, 0.14);
}
.clip img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: top;
  display: block;
  border: 1px solid var(--geru-faint);
  border-radius: calc(var(--r-tile) - 6px);
  flex: 1;
}
.clip-a { grid-column: 1; grid-row: 1; }
.clip-d { grid-column: 1; grid-row: 2; }
.clip-b { grid-column: 1; grid-row: 3; }
.clip-c { grid-column: 2; grid-row: 1 / 4; }
.clip-caption {
  font-family: var(--label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 0.55rem 0.25rem 0.15rem;
}
.clip:hover .clip-caption { color: var(--geru-deep); }
@media (prefers-reduced-motion: reduce) {
  .clip { transition: none; }
}

.clip-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0 0 2rem;
}

.outlet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  list-style: none;
  margin: 0.5rem 0 1.75rem;
}
.outlet-grid li {
  font-family: var(--label);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  background: var(--paper-lift);
  border: 1px dashed var(--geru-mid);
  border-radius: var(--r-tile);
  color: var(--ink-soft);
}
.outlet-grid li:hover { border-color: var(--geru); border-style: solid; }
.outlet-grid a {
  display: block;
  padding: 0.9rem 0.7rem;
  color: var(--mor);
  text-decoration: none;
}
.outlet-grid a:hover { color: var(--geru-deep); }

/* ─── Royal court: jharokha frames, genuine marks, snippets ───
   The durbar layer: palace-window photo frames, real brand marks
   rendered like inlaid mother-of-pearl on the manuscript, and
   quoted passages set as illuminated excerpts. */

/* Jharokha: the arched palace window. Double gold ruling, cusped
   arch crown, and a pedestal caption band. */
.jharokha {
  position: relative;
  background: var(--paper-lift);
  border: 1px solid var(--haldi);
  outline: 1px solid var(--geru-line);
  outline-offset: 5px;
  border-radius: 200px 200px var(--r-tile) var(--r-tile);
  padding: 9px 9px 0;
  box-shadow: 0 10px 26px rgba(51, 36, 26, 0.12);
}
.jharokha::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 26'%3E%3Cpath d='M27 0l5 9 8-4-2 9 10 2-8 6H14l-8-6 10-2-2-9 8 4z' fill='%23C08A1D'/%3E%3Ccircle cx='27' cy='9' r='2.6' fill='%239E3B22'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.jharokha img {
  display: block;
  width: 100%;
  height: auto; /* 100% of an auto-height figure is unstable in Safari */
  object-fit: cover;
  border-radius: 194px 194px 4px 4px;
  filter: sepia(0.08) saturate(0.98);
}
.jharokha figcaption {
  font-family: var(--label);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
  padding: 0.6rem 0.4rem 0.7rem;
}

/* Two arched windows side by side on the chapter wall */
.photo-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--gap) * 1.4);
  margin: 3rem 0 0.5rem;
  align-items: end;
}
.photo-duo .jharokha img { aspect-ratio: 3 / 4; }

/* Genuine institution and client marks: the real logos, inlaid on
   the paper tiles. Kept in their own ink but gently warmed so they
   sit inside the manuscript rather than on top of it. */
.logo-img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 128px;
  object-fit: contain;
  filter: sepia(0.18) saturate(0.82) opacity(0.92);
  transition: filter 160ms ease;
}
.logo-tile:hover .logo-img { filter: none; }
/* Marks drawn in pale ink for dark grounds get pressed harder into the paper */
.logo-img-deep,
.logo-tile:hover .logo-img-deep { filter: brightness(0.42) sepia(0.3); }
.logo-tile .logo-img { margin: 0.35rem 0; }
/* When the genuine wordmark already says the name, keep the text
   for screen readers only */
.visually-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.masthead-list li { display: inline-flex; align-items: center; }
.masthead-img {
  display: block;
  height: 21px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: sepia(0.2) saturate(0.75) opacity(0.88);
}
.masthead-list li:hover .masthead-img { filter: none; }
.mh-forbes .masthead-img { height: 26px; }
.mh-round .masthead-img { height: 24px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .logo-img { transition: none; }
}

/* Worked-with marks on the timeline: the real logos of the employer
   and the companies each role served, small, warmed into the paper.
   The role copy already names every company, so the row is decorative
   for assistive tech. */
.tl-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.35rem;
  margin-top: 0.65rem;
}
.tl-marks img {
  display: block;
  height: 18px;
  width: auto;
  max-width: 104px;
  object-fit: contain;
  filter: sepia(0.18) saturate(0.82) opacity(0.85);
  transition: filter 160ms ease;
}
.tl-marks img:hover { filter: none; }
.tl-marks .tl-mark-tall { height: 26px; }

/* Investor wordmarks inside the Backed by chips */
.investor-row li { align-items: center; }
.inv-logo {
  display: block;
  height: 19px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: sepia(0.18) saturate(0.82) opacity(0.9);
}
.investor-row li:hover .inv-logo { filter: none; }

/* Affiliation mark bands: reviewer publishers under Judging,
   institution crests under Education */
.aff-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.2rem;
  list-style: none;
  margin-top: 1.6rem;
  padding: 1.05rem 1.5rem;
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-tile);
}
.aff-row li { display: inline-flex; align-items: center; }
.aff-row img {
  display: block;
  height: 30px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: sepia(0.18) saturate(0.82) opacity(0.9);
  transition: filter 160ms ease;
}
.aff-row li:hover img { filter: none; }
.aff-row .aff-tall { height: 46px; }
.aff-row .aff-crest { height: 62px; max-width: 200px; }
@media (prefers-reduced-motion: reduce) {
  .tl-marks img, .aff-row img { transition: none; }
}

/* Illuminated excerpts: passages lifted verbatim from published
   essays, set like gilded shloka panels. */
.essay-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
  margin: 2.25rem 0 1rem;
}
.essay-card {
  position: relative;
  background:
    linear-gradient(160deg, rgba(192, 138, 29, 0.12), transparent 45%),
    var(--paper-lift);
  border: 1px solid var(--haldi);
  border-radius: var(--r-panel);
  padding: 1.9rem 2rem 1.6rem;
  box-shadow: 0 4px 16px rgba(51, 36, 26, 0.07);
}
.essay-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  right: 1.4rem;
  height: 4px;
  background: var(--gold-leaf);
  border-radius: 0 0 4px 4px;
}
.essay-kicker {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--haldi-deep);
}
.essay-card h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.3;
  margin: 0.4rem 0 1rem;
}
.essay-card h4 a { color: var(--geru-deep); text-decoration: none; }
.essay-card h4 a:hover { color: var(--geru); text-decoration: underline; }
.essay-quote {
  position: relative;
  margin: 1.1rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--ink);
}
.essay-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.35rem;
  font-family: var(--display);
  font-size: 2rem;
  color: var(--haldi);
}
.essay-meta {
  margin-top: 1.2rem;
  font-family: var(--label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* On the record: quote snippet cards from the trade press.
   A real grid, not CSS multicol: column layout of mixed-height
   cards is unreliable in Safari and can overlap or clip text. */
.quote-wall {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
  margin: 2rem 0 1.5rem;
}
.quote-card {
  margin: 0;
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-top: 3px solid var(--haldi);
  border-radius: var(--r-tile);
  padding: 1.5rem 1.6rem 1.3rem;
  box-shadow: 0 2px 10px rgba(51, 36, 26, 0.05);
  position: relative;
}
.quote-card::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--haldi-faint);
  color: rgba(192, 138, 29, 0.35);
}
.quote-card blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--ink);
}
.quote-idea {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: var(--haldi-faint);
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--haldi-deep);
}
.quote-src {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--label);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.quote-src a {
  color: var(--mor);
  font-weight: 600;
  text-decoration-color: rgba(20, 96, 107, 0.35);
}
.quote-src a:hover { color: var(--geru-deep); }

/* ─── Contact ────────────────────────────────────────────────── */

.mail-link { font-weight: 600; }

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
  list-style: none;
  margin-top: 2.5rem;
}
.link-grid a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.15rem 1.3rem;
  background: var(--paper-lift);
  border: 1px solid var(--geru-line);
  border-radius: var(--r-tile);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.link-grid a:hover {
  border-color: var(--geru);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(51, 36, 26, 0.10);
}
.link-grid span { font-family: var(--label); font-weight: 600; color: var(--ink); }
.link-grid small { font-size: 0.8rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .link-grid a { transition: none; }
}

/* ─── Footer ─────────────────────────────────────────────────── */

.site-foot {
  margin-top: clamp(3rem, 8vh, 5rem);
  padding: 0 var(--pad) 3.2rem;
  position: relative;
  background: var(--geru-deep);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  border-top: 4px solid var(--haldi);
  text-align: center;
  color: rgba(249, 241, 222, 0.95);
  font-size: 0.9rem;
}
/* Jaali band: an eight-point star lattice strung above the footer */
.site-foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -26px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22'%3E%3Cg fill='none' stroke='%239E3B22' stroke-width='1'%3E%3Crect x='13' y='2' width='18' height='18' opacity='0.5'/%3E%3Crect x='13' y='2' width='18' height='18' transform='rotate(45 22 11)' opacity='0.5'/%3E%3Ccircle cx='22' cy='11' r='2.4' fill='%23C08A1D' stroke='none' opacity='0.8'/%3E%3Ccircle cx='0' cy='11' r='1.4' fill='%239E3B22' stroke='none' opacity='0.6'/%3E%3Ccircle cx='44' cy='11' r='1.4' fill='%239E3B22' stroke='none' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}
.foot-band {
  margin: 0 calc(-1 * var(--pad)) 1.5rem;
  max-height: 88px;
  overflow: hidden;
  opacity: 0.22; /* quieter so footer copy stays readable */
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.foot-band img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: sepia(0.3) saturate(0.8);
}
.site-foot .kolam-small {
  height: 54px;
  max-width: 420px;
  margin: 0 auto 1.4rem;
}
.site-foot .kolam-wave .dm { fill: #E9CFA3; }
.site-foot .kolam-wave .dm-gold { fill: #E3B04B; }
.foot-gloss { margin-top: 0.3rem; font-style: italic; color: rgba(249, 241, 222, 0.9); }
.foot-gloss [lang="sa"] { font-family: var(--display); font-style: normal; color: #F0C86A; }

/* ─── Leaf tabs ──────────────────────────────────────────────────
   JS turns the nav into a tab strip and shows one chapter (leaf) at
   a time. body.tabs-mode is only ever added by script, so without
   JS the whole manuscript still stacks and scrolls. */

body.tabs-mode .hero,
body.tabs-mode .stats-band,
body.tabs-mode .marquee-band,
body.tabs-mode .chapter,
body.tabs-mode .ornament { display: none; }
body.tabs-mode.tab-home .hero { display: block; }
body.tabs-mode.tab-home .stats-band { display: block; }
body.tabs-mode.tab-home .marquee-band { display: block; }
body.tabs-mode .chapter.tab-active { display: grid; }
body.tabs-mode .chapter.tab-active + .ornament { display: flex; }
body.tabs-mode main { min-height: 62vh; }

.site-head nav a { position: relative; }
.site-head nav a[aria-current="page"] { color: var(--geru-deep); }
.site-head nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--haldi), var(--geru), var(--haldi));
}

/* ─── Reveal animation ───────────────────────────────────────── */

html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms ease, transform 640ms ease;
}
html.js .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .page-frame { inset: 6px; outline: none; }
  .page-frame::before { inset: 3px; }
  .corner { width: 54px; height: 54px; }
  .c-tl { top: 108px; left: 8px; }
  .c-tr { top: 108px; right: 8px; }
  .c-bl { bottom: 8px; left: 8px; }
  .c-br { bottom: 8px; right: 8px; }
  .clip-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .clip-a, .clip-b, .clip-c, .clip-d { grid-column: auto; grid-row: auto; }
  .clip-strip { grid-template-columns: 1fr; }
  .masthead-list { gap: 0.4rem 1.6rem; }
  .masthead-list li { font-size: 0.94rem; }
  .chapter { grid-template-columns: 1fr; gap: 1.5rem; }
  .chapter-key {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
    border-top: none;
    border-bottom: 1px solid var(--geru-mid);
    padding: 0 0 0.6rem;
  }
  .chapter-key .glyph { font-size: 1.6rem; }
  .about-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 240px; }
  .portrait-wide { max-width: 100%; }
  .timeline::before { left: 4.6rem; }
  .timeline li { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 2rem; }
  .timeline li::before { left: calc(4.6rem - 4px); }
  .photo-duo { grid-template-columns: 1fr; gap: 2rem; }
  .quote-wall { grid-template-columns: 1fr; }
  .hero-facts li { border: none !important; padding: 0.15rem 0.75rem; }
  .press-highlight { grid-template-columns: 1fr; }
}

/* Small screens: the tab strip wraps instead of hiding half the
   sections behind an invisible horizontal scroller */
@media (max-width: 700px) {
  .site-head nav {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.1rem 0.9rem;
    justify-content: flex-start;
  }
  .site-head-inner { align-items: flex-start; }
}

@media (max-width: 480px) {
  .site-head-inner { padding-block: 0.65rem 0.5rem; }
  .hero { padding-top: 4.75rem; }
  .hero h1 { font-size: 2.6rem; }
  .card-grid, .craft-grid, .link-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .stat { padding: 1.5rem 0.9rem; }
  .ornament { max-width: 88%; }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .trade-press-wall { grid-template-columns: 1fr 1fr; }
  .tp-articles li { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
}