/* =========================================================================
   Prof. Dr. [Name]: site stylesheet
   A quiet, editorial design language: ivory paper, deep teal, brass accents.
   Single light theme by intent.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  color-scheme: light;

  /* Ink & surfaces */
  --ink:        #15211f;
  --ink-soft:   #465955;
  --ink-mute:   #6b7c78;

  --paper:      #fffdf9;
  --ivory:      #faf6ef;
  --ivory-deep: #f2ebdf;

  /* Teal: authority */
  --teal-900:   #0a2b28;
  --teal-800:   #0e3b36;
  --teal-700:   #14534c;
  --teal-600:   #1b6d64;
  --teal-100:   #dcebe8;

  /* Brass: distinction */
  --brass:      #a8823f;
  --brass-mid:  #c19a56;
  --brass-soft: #e5d2ac;
  --brass-wash: #f6eeda;

  --line:       rgba(21, 33, 31, .13);
  --line-soft:  rgba(21, 33, 31, .07);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid scale */
  --t-hero:  clamp(2.85rem, 1.6rem + 5.4vw, 6rem);
  --t-h1:    clamp(2.35rem, 1.5rem + 3.4vw, 4rem);
  --t-h2:    clamp(1.85rem, 1.3rem + 2.1vw, 2.9rem);
  --t-h3:    clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  --t-lede:  clamp(1.06rem, 1rem + .45vw, 1.3rem);
  --t-body:  clamp(1rem, .97rem + .2vw, 1.09rem);
  --t-small: .875rem;
  --t-micro: .7rem;

  /* Rhythm */
  --gutter:  clamp(20px, 5vw, 52px);
  --wrap:    1180px;
  --section: clamp(4.5rem, 9vw, 8.5rem);

  --radius:  4px;
  --shadow-sm: 0 1px 2px rgba(10, 43, 40, .05), 0 6px 18px -10px rgba(10, 43, 40, .16);
  --shadow-md: 0 2px 4px rgba(10, 43, 40, .05), 0 22px 48px -24px rgba(10, 43, 40, .3);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.68;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; display: block; }

a { color: var(--teal-700); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--brass); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: var(--brass-soft); color: var(--teal-900); }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--teal-800); color: #fff;
  padding: .7rem 1.1rem; border-radius: var(--radius);
  font-size: var(--t-small); font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout primitives ---------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section--paper { background: var(--paper); }
.section--ivory-deep { background: var(--ivory-deep); }

.section--dark {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(27, 109, 100, .5), transparent 62%),
    var(--teal-900);
  color: #eef4f2;
}
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: var(--brass-soft); }

/* ---------- 4. Typographic components ----------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.4rem;
  font-family: var(--text);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--brass);
  line-height: 1.5;
}
.eyebrow::before {
  content: "";
  width: clamp(24px, 4vw, 48px);
  height: 1px;
  background: var(--brass);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: clamp(24px, 4vw, 48px);
  height: 1px;
  background: var(--brass);
  flex: none;
}
.section--dark .eyebrow { color: var(--brass-soft); }
.section--dark .eyebrow::before,
.section--dark .eyebrow::after { background: var(--brass-soft); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ink-soft);
}
.section--dark .lede { color: rgba(238, 244, 242, .82); }

.prose { max-width: 66ch; }
.prose p + p { margin-top: 0; }
.prose h3 { font-size: var(--t-h3); margin: 2.4rem 0 .8rem; }
.prose h3:first-child { margin-top: 0; }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--t-h2); margin-bottom: 1rem; }

/* Drop-cap for the opening biography paragraph */
.dropcap::first-letter {
  font-family: var(--display);
  font-size: 3.5em;
  line-height: .78;
  float: left;
  padding: .1em .12em 0 0;
  color: var(--brass);
  font-weight: 500;
}

/* ---------- 5. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  font-family: var(--text);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary {
  background: var(--teal-800);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--teal-700); color: #fff; box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  color: var(--teal-800);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); background: var(--brass-wash); }

.btn--brass { background: var(--brass); color: #fff; }
.btn--brass:hover { background: var(--brass-mid); color: #fff; }

.btn--light { background: #fff; color: var(--teal-900); }
.btn--light:hover { background: var(--brass-wash); color: var(--teal-900); }

.btn--outline-light { border-color: rgba(255,255,255,.34); color: #fff; background: transparent; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

.link-more {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; color: var(--teal-700);
}
.link-more::after {
  content: "";
  width: 18px; height: 1px; background: currentColor;
  transition: width .22s var(--ease);
}
.link-more:hover::after { width: 30px; }

/* ---------- 6. Header / navigation -------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 239, 0);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(253, 251, 246, .9);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -24px rgba(10, 43, 40, .5);
}
/* Interior pages have a light band behind the header from the start */
.site-header--solid { background: rgba(253, 251, 246, .92); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 82px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { color: var(--brass); flex: none; }
.brand__mark svg { width: 38px; height: 38px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name {
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.brand__role {
  font-size: var(--t-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-style: normal;
  margin-top: .2rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; flex-shrink: 0; }
.nav__link {
  position: relative;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .4rem;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--brass);
  transition: width .24s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav__cta { display: none; }
@media (min-width: 1100px) { .nav__cta { display: inline-flex; } }

/* Language switch: a small pill sitting between the nav links and the CTA,
   visible in both the desktop bar and the collapsed mobile panel. Its own
   text is always written in the language it switches TO, not the current
   page's language, so it reads correctly to someone who can't yet read
   the current page. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--text);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--teal-800);
  flex: none;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.lang-switch svg { width: 14px; height: 14px; flex: none; }
.lang-switch:hover { border-color: var(--brass); color: var(--brass); background: var(--brass-wash); }
/* Its own lang attribute names the language it switches TO, so it's
   always the odd one out on the page (Bangla text on an English page,
   English text on a Bangla one). Set the font explicitly rather than
   inherit var(--text) two cascades deep, so it's right either way
   regardless of which page it sits on. */
.lang-switch[lang="bn"] { font-family: var(--bangla); }
.lang-switch[lang="en"] { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

@media (max-width: 879px) {
  .lang-switch { margin-top: 1rem; align-self: flex-start; }
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--ink);
  transition: transform .26s var(--ease), opacity .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 880px) { .nav-toggle { display: none; } }

@media (max-width: 879px) {
  .nav {
    position: fixed;
    inset: 82px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line-soft); }
  .nav__link { display: block; padding: 1rem 0; font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav__cta { display: inline-flex; margin-top: 1.4rem; justify-content: center; }
}

/* ---------- 7. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  margin-top: -82px;
  padding-top: calc(82px + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
  background:
    radial-gradient(75% 60% at 82% 12%, rgba(216, 195, 152, .28), transparent 60%),
    radial-gradient(60% 55% at 2% 92%, rgba(27, 109, 100, .12), transparent 62%),
    linear-gradient(180deg, var(--paper), var(--ivory) 62%);
}

/* Fine engraved rule texture behind the hero */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, rgba(21, 33, 31, .035) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 60% 40%, #000, transparent 75%);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.08fr .92fr; }
}

.hero h1 {
  font-size: var(--t-hero);
  margin-bottom: 1.1rem;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
}
.hero h1 .hero__honorific {
  display: block;
  font-size: .3em;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--text);
  font-weight: 600;
  color: var(--teal-700);
  margin-bottom: .9rem;
}

.hero__creds {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.6rem;
}

.hero__lede { max-width: 50ch; margin-bottom: 2.1rem; }

.hero__cta { margin-bottom: 2.6rem; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1.4rem 1.8rem;
  margin: 0;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.hero__facts div { margin: 0; }
.hero__facts dt {
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .35rem;
}
.hero__facts dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.22rem;
  color: var(--teal-800);
  line-height: 1.25;
}

/* Portrait: arched frame with an offset brass rule */
.portrait { position: relative; margin: 0; }
.portrait__frame {
  position: relative;
  border-radius: 50% 50% var(--radius) var(--radius) / 34% 34% 3% 3%;
  overflow: hidden;
  background: var(--ivory-deep);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  max-width: 100%;
}
.portrait__frame img,
.portrait__frame svg { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.portrait::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--brass);
  border-radius: 50% 50% var(--radius) var(--radius) / 34% 34% 3% 3%;
  z-index: -1;
}
@media (max-width: 899px) {
  .portrait { max-width: 400px; margin-inline: auto; }
  .portrait::before { inset: 14px -14px -14px 14px; }
}

/* The badge that sits on the portrait */
.portrait__badge {
  position: absolute;
  left: -8px;
  bottom: 8%;
  z-index: 2;
  max-width: 230px;
  background: var(--teal-900);
  color: #fff;
  padding: 1.05rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border-left: 3px solid var(--brass);
}
.portrait__badge strong {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: .2rem;
}
.portrait__badge span {
  font-size: var(--t-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--brass-soft);
}

/* ---------- 8. The milestone feature ------------------------------------ */

.milestone { position: relative; overflow: hidden; text-align: center; }
.milestone__seal { color: var(--brass-soft); margin: 0 auto 2rem; width: 68px; height: 68px; }
.milestone blockquote {
  margin: 0 auto;
  max-width: 19ch;
  font-family: var(--display);
  font-size: clamp(2rem, 1.1rem + 3.9vw, 4.1rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: #fff;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
}
.milestone blockquote em {
  font-style: normal;
  color: var(--brass-soft);
  position: relative;
  white-space: nowrap;
}
.milestone__note {
  max-width: 58ch;
  margin: 2.2rem auto 0;
  color: rgba(238, 244, 242, .74);
  font-size: var(--t-lede);
  line-height: 1.6;
}

/* ---------- 9. Stat band ------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.4rem) 1.5rem; text-align: center; }
.stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1;
  color: var(--brass);
  letter-spacing: -.03em;
  margin-bottom: .55rem;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
}
.stat__label {
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* ---------- 10. Card grids ---------------------------------------------- */

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.1rem);
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { border-color: var(--brass-soft); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card__icon {
  color: var(--brass);
  margin-bottom: 1.2rem;
}
.card__icon svg { width: 30px; height: 30px; }
.card h3 { font-size: var(--t-h3); margin-bottom: .6rem; }
.card p { color: var(--ink-soft); font-size: .97rem; margin-bottom: 0; }
.card ul { color: var(--ink-soft); font-size: .97rem; margin-bottom: 0; }

/* A card with a hairline rule on top instead of a full border */
.card--rule { border: 0; border-top: 2px solid var(--brass-soft); border-radius: 0; padding-inline: 0; background: transparent; }
.card--rule:hover { transform: none; box-shadow: none; border-color: var(--brass); }

/* ---------- 11. Definition / detail lists -------------------------------- */

.deflist { margin: 0; }
.deflist > div {
  display: grid;
  gap: .3rem 2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.deflist > div:first-child { border-top: 1px solid var(--line-soft); }
@media (min-width: 680px) {
  .deflist > div { grid-template-columns: minmax(150px, 220px) 1fr; }
}
.deflist dt {
  font-size: var(--t-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: .25rem;
}
.deflist dd { margin: 0; color: var(--ink); }
.deflist dd small { display: block; color: var(--ink-mute); font-size: .86rem; margin-top: .15rem; }

/* ---------- 12. Timeline ------------------------------------------------- */

.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, var(--brass-soft), var(--line-soft));
}
.timeline > li {
  position: relative;
  margin: 0;
  padding: 0 0 2.4rem 2.6rem;
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ivory);
  border: 2px solid var(--brass-soft);
}
.timeline > li.is-milestone::before {
  background: var(--brass);
  border-color: var(--brass);
  box-shadow: 0 0 0 5px var(--brass-wash);
}
.timeline__year {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .4rem;
}
.timeline h3 { font-size: 1.22rem; margin-bottom: .45rem; }
.timeline p { color: var(--ink-soft); font-size: .97rem; margin-bottom: 0; }
.timeline > li.is-milestone h3 { color: var(--teal-800); }
.timeline__flag {
  display: inline-block;
  margin-top: .7rem;
  padding: .3rem .7rem;
  background: var(--brass-wash);
  border: 1px solid var(--brass-soft);
  border-radius: 100px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- 13. Editorial list (recognitions, publications) -------------- */

.entries { list-style: none; margin: 0; padding: 0; }
.entries > li {
  display: grid;
  gap: .35rem 2rem;
  margin: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.entries > li:first-child { border-top: 1px solid var(--line-soft); }
@media (min-width: 680px) {
  .entries > li { grid-template-columns: 110px 1fr; align-items: baseline; }
}
.entries__year {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.entries__title { font-weight: 600; margin: 0 0 .25rem; }
.entries__meta { color: var(--ink-mute); font-size: .93rem; margin: 0; }
.entries__meta cite { font-style: italic; }

/* ---------- 14. Page header (interior pages) ----------------------------- */

.page-head {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(216, 195, 152, .3), transparent 58%),
    linear-gradient(180deg, var(--paper), var(--ivory));
  border-bottom: 1px solid var(--line-soft);
}
.page-head h1 { font-size: var(--t-h1); margin-bottom: 1.1rem; }
.page-head .lede { max-width: 58ch; }

.crumbs {
  display: flex; gap: .55rem; align-items: center;
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  font-size: var(--t-small); color: var(--ink-mute);
}
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .55rem; color: var(--line); }
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--brass); }

/* ---------- 15. Split feature (image + text) ----------------------------- */

.split {
  display: grid;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: .85fr 1.15fr; }
  .split--reverse > :first-child { order: 2; }
}
.split__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ivory-deep);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}
.split__media img, .split__media svg { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 16. Chamber / practice cards --------------------------------- */

.chamber {
  display: grid;
  gap: 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--teal-700);
  border-radius: var(--radius);
  padding: clamp(1.7rem, 3vw, 2.3rem);
}
@media (min-width: 760px) {
  .chamber { grid-template-columns: 1.15fr .85fr; gap: 2.6rem; }
}
.chamber h3 { font-size: var(--t-h3); margin-bottom: .5rem; }
.chamber__addr { font-style: normal; color: var(--ink-soft); font-size: .97rem; margin-bottom: 1.2rem; }
.chamber__contact { display: grid; gap: .55rem; font-size: .95rem; }
.chamber__contact a { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 600; }
.chamber__contact svg { width: 15px; height: 15px; color: var(--brass); flex: none; }

.hours { margin: 0; font-size: .95rem; }
.hours > div {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--line-soft);
}
.hours > div:last-child { border-bottom: 0; }
.hours dt { color: var(--ink-soft); }
.hours dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- 17. Notice / callout ---------------------------------------- */

.notice {
  display: flex;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: var(--brass-wash);
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .97rem;
  color: var(--ink-soft);
}
.notice svg { width: 20px; height: 20px; color: var(--brass); flex: none; margin-top: .15rem; }
.notice strong { color: var(--ink); }

/* ---------- 18. Pull quote ----------------------------------------------- */

.pullquote {
  margin: 0;
  max-width: 34ch;
  border-left: 2px solid var(--brass);
  padding-left: clamp(1.2rem, 2.5vw, 2rem);
}
.pullquote blockquote {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 1rem + 1.3vw, 1.85rem);
  line-height: 1.32;
  letter-spacing: -.015em;
  color: var(--teal-800);
}
.pullquote figcaption {
  font-size: var(--t-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- 19. Forms ---------------------------------------------------- */

.form { display: grid; gap: 1.2rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: .98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-wash);
}
.field__hint { font-size: .82rem; color: var(--ink-mute); }
@media (min-width: 620px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } }

/* ---------- 20. CTA band ------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band h2 { font-size: var(--t-h2); margin-bottom: 1.1rem; }
.cta-band .lede { max-width: 54ch; margin: 0 auto 2.2rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- 21. Footer --------------------------------------------------- */

.site-footer {
  background: var(--teal-900);
  color: rgba(238, 244, 242, .72);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  font-size: .94rem;
}
.site-footer a { color: rgba(238, 244, 242, .84); text-decoration: none; }
.site-footer a:hover { color: var(--brass-soft); }

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr; gap: 3rem; }
}
.site-footer h2 {
  font-family: var(--display);
  font-size: 1.32rem;
  color: #fff;
  margin-bottom: .55rem;
  font-weight: 500;
}
.site-footer h3 {
  font-family: var(--text);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin-bottom: 1rem;
  font-weight: 600;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer__tag { max-width: 38ch; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.8rem;
  font-size: .82rem;
  color: rgba(238, 244, 242, .5);
}

/* ---------- 22. Scroll reveal -------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 23. Print ---------------------------------------------------- */

@media print {
  .site-header, .site-footer, .nav-toggle, .hero__cta, .cta-band { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section { padding-block: 1.2rem; }
  [data-reveal] { opacity: 1; transform: none; }
  a { text-decoration: none; color: #000; }
}

/* ---------- 24. Bangla typography ---------------------------------------- */

:root {
  --bangla:         "Noto Sans Bengali", "Kohinoor Bangla", "Bangla MN", "Nirmala UI",
                    "Vrinda", var(--text);
  --bangla-display: "Noto Serif Bengali", "Kohinoor Bangla", "Bangla MN", "Nirmala UI",
                    serif;
}

[lang="bn"], .bn {
  font-family: var(--bangla);
  line-height: 1.85;
  font-size: .96em;
}

/* A Bangla PAGE (html[lang="bn"]) retargets the whole type system rather
   than just decorating an inline snippet: Fraunces has no Bengali glyphs,
   so every component that reads var(--display)/var(--text) needs a script
   that does. Higher specificity than the bare [lang="bn"] rule above, so it
   also resets the font-size/line-height that rule sets for inline use
   (shrinking the root font-size would scale every rem-based clamp() on the
   page down with it, which is not what a full Bangla page wants). */
html[lang="bn"] {
  font-size: 100%;
  line-height: 1.68;
  --display: var(--bangla-display);
  --text:    var(--bangla);
}
html[lang="bn"] body { line-height: 1.78; }
/* Wide tracking suits Latin capitals; Bengali has no case, and the same
   letter-spacing just pries its conjuncts apart. Zero it everywhere a
   micro-label or eyebrow was built for uppercase Latin. */
html[lang="bn"] .eyebrow,
html[lang="bn"] .brand__role,
html[lang="bn"] .hero__creds,
html[lang="bn"] .hero__facts dt,
html[lang="bn"] .hero__honorific,
html[lang="bn"] .portrait__badge span,
html[lang="bn"] .stat__label,
html[lang="bn"] .deflist dt,
html[lang="bn"] .timeline__year,
html[lang="bn"] .timeline__flag,
html[lang="bn"] .pullquote figcaption,
html[lang="bn"] .field label,
html[lang="bn"] .site-footer h3,
html[lang="bn"] .days li { letter-spacing: 0; }

.name-bn {
  font-family: var(--bangla);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  font-weight: 500;
  color: var(--teal-700);
  line-height: 1.7;
  margin: -.2rem 0 1.5rem;
}
.site-footer .name-bn { color: var(--brass-soft); margin-bottom: .9rem; }
/* On a Bangla page this same slot carries the Latin rendering of her name
   instead, mirroring the pattern rather than repeating it. Latin text
   wants Inter, not the Bengali stack. */
.name-bn[lang="en"] { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

/* Bangla secondary line inside chamber cards */
.bn-note {
  font-family: var(--bangla);
  font-size: .9rem;
  color: var(--ink-mute);
  line-height: 1.8;
  margin-top: .35rem;
}

/* ---------- 25. Text-valued stat tiles ----------------------------------- */

.stat__num--text {
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.62rem);
  color: var(--teal-800);
  letter-spacing: -.015em;
  line-height: 1.2;
}

/* ---------- 26. Day pills ------------------------------------------------ */

.days { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.days li {
  margin: 0;
  padding: .32rem .72rem;
  border-radius: 100px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--teal-100);
  color: var(--teal-800);
}
.days li.is-off { background: transparent; border: 1px solid var(--line-soft); color: var(--ink-mute); font-weight: 500; }

/* ---------- 27. Phone list ----------------------------------------------- */

.phones { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.phones li { margin: 0; }
.phones a {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--teal-800);
}
.phones a:hover { color: var(--brass); }
.phones svg { width: 15px; height: 15px; color: var(--brass); flex: none; }
.section--dark .phones a { color: #fff; }
.section--dark .phones a:hover { color: var(--brass-soft); }

/* ---------- 28. Social ---------------------------------------------------- */

.social { display: flex; gap: .7rem; list-style: none; margin: 1.3rem 0 0; padding: 0; }
.social li { margin: 0; }
.social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: inherit;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.social a:hover { border-color: var(--brass-soft); background: rgba(255, 255, 255, .07); color: var(--brass-soft); }
.social svg { width: 17px; height: 17px; }

/* ---------- 29. Feature (cochlear implant programme) ---------------------- */

.feature-figure {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(216, 195, 152, .3), transparent 62%),
    var(--teal-900);
  color: var(--brass-soft);
  overflow: hidden;
}
.feature-figure::before,
.feature-figure::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(216, 195, 152, .28);
  border-radius: 50%;
}
.feature-figure::before { inset: 9%; }
.feature-figure::after  { inset: 20%; }
.feature-figure svg { position: relative; width: 34%; height: auto; }

/* ---------- 30. Hero fact refinements ------------------------------------ */

.hero__facts { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.hero__facts dd span {
  display: block;
  font-family: var(--text);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: .3rem;
}

/* ---------- 31. Roles band (uniform, non-numeric stat tiles) -------------- */

.stats--roles .stat {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-align: left;
  padding-inline: clamp(1.4rem, 2.6vw, 2rem);
}
.stats--roles .stat__label { order: -1; }
.stats--roles .stat__num {
  font-size: clamp(1.08rem, .98rem + .45vw, 1.32rem);
  color: var(--teal-800);
  line-height: 1.35;
  letter-spacing: -.012em;
  margin-bottom: 0;
}
.stats--roles .stat__num small {
  display: block;
  font-family: var(--text);
  font-size: .82rem;
  color: var(--ink-mute);
  margin-top: .3rem;
  letter-spacing: 0;
}

/* ---------- 32. Fixes ---------------------------------------------------- */

/* The Bangla address line must sit on its own line, not run on from the
   English address above it. */
.bn-note { display: block; }

/* An even two-column split, for pages where neither side is subordinate. */
@media (min-width: 900px) {
  .split--even { grid-template-columns: 1fr 1fr; }
}

/* On narrow phones the brand can wrap to two lines and push the header past
   the 82px the sticky hero offset and mobile nav panel assume. Shrink it. */
@media (max-width: 470px) {
  .brand__mark svg { width: 32px; height: 32px; }
  .brand__name { font-size: .94rem; }
  .brand__role { font-size: .62rem; letter-spacing: .11em; }
  .brand { gap: .6rem; }
}

/* Belt and braces: the mobile nav panel and the hero offset both follow the
   header's measured height, which main.js publishes as --header-h. */
@media (max-width: 879px) {
  .nav { inset: var(--header-h, 82px) 0 auto; max-height: calc(100dvh - var(--header-h, 82px)); }
}
.hero { margin-top: calc(-1 * var(--header-h, 82px)); padding-top: calc(var(--header-h, 82px) + clamp(3rem, 7vw, 6rem)); }