/* ═══════════════════════════════════════════════════════════════════════════
   dibyenduchoudhury.com — Shared Site Stylesheet
   Design system: deep purple (#0d0221) + gold (#d4a853) + white (#ffffff)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
  --purple-deep:   #0d0221;
  --purple-dark:   #1a0533;
  --purple-mid:    #2d0a5e;
  --purple-accent: #7b2fff;
  --purple-light:  #a855f7;
  --purple-pale:   #c084fc;
  --purple-text:   #e8e0f5;
  --purple-muted:  #a78bca;
  --purple-dim:    #5c4e74;

  --gold:          #d4a853;
  --gold-light:    #f5d788;
  --gold-pale:     #fef3c7;

  --white:         #ffffff;
  --off-white:     #faf8f4;

  --font-serif:    'Cormorant Garamond', Georgia, serif;
  --font-sans:     'Inter', system-ui, sans-serif;

  --nav-height:    64px;
  --max-width:     1200px;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     16px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--purple-deep);
  color: var(--purple-text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: var(--font-sans); }

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--purple-accent), var(--gold));
  z-index: 9999; transition: width .1s linear;
}

/* ── Site Navigation ── */
.site-nav {
  position: sticky; top: 0; z-index: 8000;
  background: rgba(13, 2, 33, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(123, 47, 255, .18);
  padding: 0 32px;
}
.nav-inner {
  max-width: var(--max-width); margin: 0 auto;
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.logo-dr { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--purple-pale); }
.logo-nm { font-family: var(--font-serif); font-size: 1.1rem; color: var(--purple-text); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-size: .84rem; font-weight: 500; color: var(--purple-muted);
  transition: color .2s; white-space: nowrap;
}
.nav-links a:hover { color: var(--purple-text); }
.nav-links a.active { color: var(--gold); }
.nav-cta {
  background: linear-gradient(135deg, var(--purple-accent), var(--purple-light)) !important;
  color: #fff !important; padding: 8px 18px; border-radius: var(--radius-sm);
  font-size: .8rem !important; font-weight: 600 !important;
}
.nav-cta:hover { opacity: .88 !important; }
.nav-mobile-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--purple-muted); font-size: 1.4rem; padding: 4px;
}
.nav-mobile-menu {
  display: none; flex-direction: column; gap: 0;
  background: rgba(13, 2, 33, .98);
  border-bottom: 1px solid rgba(123, 47, 255, .18);
  padding: 8px 32px 16px;
}
.nav-mobile-menu a {
  padding: 10px 0; font-size: .9rem; color: var(--purple-muted);
  border-bottom: 1px solid rgba(123, 47, 255, .08);
}
.nav-mobile-menu a:last-child { border-bottom: none; }
@media (max-width: 840px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-mobile-toggle { display: block; }
  .nav-mobile-menu.open { display: flex; }
}

/* ── Page Hero (generic) ── */
.page-hero {
  position: relative; min-height: 320px;
  display: flex; align-items: flex-end; overflow: hidden;
  background: linear-gradient(135deg, var(--purple-dark), var(--purple-mid));
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.35);
}
.page-hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--purple-deep) 0%, rgba(13,2,33,.5) 60%, transparent 100%);
}
.page-hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max-width); margin: 0 auto;
  padding: 48px 32px 56px; width: 100%;
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(212, 168, 83, .15); border: 1px solid rgba(212, 168, 83, .35);
  color: var(--gold); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700;
  color: #fff; line-height: 1.18; margin-bottom: 16px;
}
.page-hero p.lead {
  font-size: 1rem; color: rgba(255,255,255,.65); max-width: 560px;
}

/* ── Section wrappers ── */
.section-wrap { max-width: var(--max-width); margin: 0 auto; padding: 64px 32px; }
.section-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700;
  color: #f0e8ff; margin-bottom: 32px;
}

/* ── Cards ── */
.card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(123,47,255,.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(123,47,255,.4); }
.card-img {
  height: 200px; overflow: hidden; background: var(--purple-dark);
}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 20px; }
.card-cat {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
}
.card-title {
  font-family: var(--font-serif);
  font-size: 1.15rem; font-weight: 700; color: #f0e8ff;
  margin: 8px 0 10px; line-height: 1.3;
}
.card-excerpt {
  font-size: .82rem; color: var(--purple-muted); line-height: 1.65;
  margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta { font-size: .72rem; color: var(--purple-dim); }
.card-read-link {
  display: inline-block; margin-top: 14px;
  font-size: .8rem; font-weight: 600; color: var(--purple-pale);
  border-bottom: 1px solid rgba(192,132,252,.3);
  transition: color .2s, border-color .2s;
}
.card-read-link:hover { color: var(--gold); border-color: var(--gold); }

/* ── Buttons ── */
.btn {
  display: inline-block; padding: 12px 24px;
  border-radius: var(--radius-sm); font-weight: 600;
  font-size: .88rem; cursor: pointer; transition: opacity .2s, transform .15s;
  border: none; text-align: center;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--purple-accent), var(--purple-light));
  color: #fff;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--purple-dark);
}
.btn-outline {
  background: transparent;
  border: 1px solid rgba(123,47,255,.4);
  color: var(--purple-pale);
}
.btn-outline:hover { border-color: var(--purple-accent); background: rgba(123,47,255,.1); }

/* ── Form inputs ── */
.form-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(123,47,255,.3);
  color: var(--purple-text);
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: .88rem; outline: none;
  transition: border-color .2s;
}
.form-input:focus { border-color: var(--purple-accent); }
.form-input::placeholder { color: var(--purple-dim); }

/* ── Subscribe strip ── */
.sub-strip {
  background: linear-gradient(135deg, var(--purple-dark), var(--purple-mid));
  border-top: 1px solid rgba(212,168,83,.2);
  padding: 56px 32px; text-align: center;
}
.sub-strip h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700;
  color: #f0e8ff; margin-bottom: 10px;
}
.sub-strip h2 em { color: var(--gold); font-style: italic; }
.sub-strip p { font-size: .9rem; color: var(--purple-muted); margin-bottom: 24px; }
.sub-row { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; }
.sub-row .form-input { flex: 1; }
@media (max-width: 600px) { .sub-row { flex-direction: column; } }

/* ── Site Footer ── */
.site-footer {
  background: #080115;
  border-top: 1px solid rgba(123,47,255,.12);
  padding: 48px 32px 32px;
}
.footer-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
.footer-brand .logo-mark {
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700;
  color: var(--purple-pale); margin-bottom: 10px;
}
.footer-brand p { font-size: .8rem; color: var(--purple-dim); line-height: 1.7; }
.footer-col h4 {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.footer-col a {
  display: block; font-size: .82rem; color: var(--purple-dim);
  margin-bottom: 8px; transition: color .2s;
}
.footer-col a:hover { color: var(--purple-pale); }
.footer-bottom {
  border-top: 1px solid rgba(123,47,255,.1);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: .72rem; color: var(--purple-dim); }
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  font-size: .82rem; color: var(--purple-dim); transition: color .2s;
}
.footer-social a:hover { color: var(--gold); }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Utility ── */
.text-gold { color: var(--gold); }
.text-muted { color: var(--purple-muted); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.grid-2 {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .section-wrap { padding: 48px 20px; }
}
@media (max-width: 600px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .site-nav { padding: 0 16px; }
}