/* ═══════════════════════════════════════════════════════════════
   D. BALAKRISHNA PORTAL – GLOBAL VARIABLES
   Clean Stable Version
   ═══════════════════════════════════════════════════════════ */

:root {

/* ───────── COLOR PALETTE ───────── */

  --bg-layer-1: radial-gradient(circle at 72% 35%, rgba(245,200,130,0.18), transparent 55%);
  --bg-layer-2: radial-gradient(circle at 18% 28%, rgba(180,140,100,0.30), transparent 45%);
  --bg-layer-3: linear-gradient(135deg, #f5e9d0 0%, #f0deb8 50%, #f7f0d8 100%);

  --text-primary: #3b2a2a;
  --text-secondary: #4e3b32;
  --text-accent: #7a1f1f;

  --nav-link: #6b3a3a;
  --nav-active: #9a7b2f;
  --nav-underline: #c49b3a;
  --nav-bg: rgba(255,255,240,0.96);

  --border-color: rgba(154,123,47,0.14);

/* ───────── TYPOGRAPHY ───────── */

  --font-base: "Palatino Linotype", Georgia, serif;
  --font-display: 'Cormorant Garamond', serif;

  --honorific-size: 1.1rem;
  --honorific-letter: 0.18em;
  --honorific-opacity: 0.55;

  --h1-size-desktop: 3.8rem;
  --h1-letter-desktop: 0.01em;
  --h1-line-desktop: 1.1;

  --h1-size-mobile: 2.6rem;
  --h1-letter-mobile: 0.01em;
  --h1-line-mobile: 1.1;

  --subtitle-size-desktop: 1.05rem;
  --subtitle-letter-desktop: 0.12em;
  --subtitle-line-desktop: 1.5;

  --subtitle-size-mobile: 0.95rem;
  --subtitle-letter-mobile: 0.1em;
  --subtitle-line-mobile: 1.5;

  --closing-size: 0.78rem;
  --closing-letter: 0.16em;
  --closing-opacity: 0.6;

  --text-gap-small: 0.5rem;
  --text-gap-large: 1.6rem;
  --text-gap-xlarge: 2.4rem;

  --text-fade-duration: 0.9s;

  --body-size-desktop: 1.15rem;
  --body-line-desktop: 2.05;
  --body-letter-desktop: 0.03em;

  --body-size-mobile: 1rem;
  --body-line-mobile: 1.8;
  --body-letter-mobile: 0.03em;

/* ───────── NAVIGATION SYSTEM ───────── */

  --nav-height: 60px;
  --nav-padding-x: 28px;
  --nav-padding-y: 0;
  --nav-gap: 32px;
  --nav-link-gap: 28px;
  --nav-link-padding: 6px 2px;

  --logo-height: 82px;
  --content-top: 80px;

/* ───────── EFFECTS ───────── */

  --img-saturate: 0.92;
  --img-contrast: 1.04;
  --fade-transition: 3.5s ease-in-out;

  --grain-opacity: 0.035;
  --grain-blend: multiply;

  --hover-transition: 0.3s ease;

  --nav-underline-width: 70%;
  --nav-underline-height: 1.5px;
  --nav-underline-transition: 0.35s ease;

}

/* ═══════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════ */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  font-family: var(--font-base);
  background: var(--bg-layer-1), var(--bg-layer-2), var(--bg-layer-3);
  color: var(--text-primary);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url('images/grain.png');
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  z-index: 9999;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION PANEL
   ═══════════════════════════════════════════════════════════ */

/* ── NAV PANEL ── */

.nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: var(--nav-padding-y) var(--nav-padding-x);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-color);
  letter-spacing: 0.08em;
  z-index: 100;
  overflow: hidden;                /* NO scrollbar – clipped cleanly */
}

.nav-logo img {
  height: var(--logo-height);
  display: block;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
}

.nav-panel a {
  display: block;
  text-decoration: none;
  color: var(--nav-link);
  font-weight: 400;
  font-style: normal;
  position: relative;
  padding: var(--nav-link-padding);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--hover-transition);
}

.nav-panel a:hover,
.nav-panel a.active {
  color: var(--nav-active);
}

.nav-panel a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: var(--nav-underline-height);
  background: var(--nav-underline);
  transform: translateX(-50%);
  transition: width var(--nav-underline-transition);
}

.nav-panel a:hover::after,
.nav-panel a.active::after {
  width: var(--nav-underline-width);
}


/* ── HAMBURGER BUTTON ── */

.nav-hamburger {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: var(--nav-height);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.nav-hamburger-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
}

.nav-hamburger-icon span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--nav-link);
  margin: 0;
  padding: 0;
  transition: background 0.3s ease;
}


/* ── NAV DRAWER ── */

.nav-drawer {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 16px 0;
  margin: 0;
  z-index: 150;
  flex-direction: column;
  align-items: flex-start;
}

.nav-drawer.open {
  display: flex;
}

.nav-drawer a {
  display: block;
  width: 100%;
  padding: 12px 28px;
  margin: 0;
  text-decoration: none;
  color: var(--nav-link);
  font-family: var(--font-base);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.08em;
  border: none;
  background: transparent;
  box-sizing: border-box;
  transition: color var(--hover-transition);
}

.nav-drawer a:hover,
.nav-drawer a.active {
  color: var(--nav-active);
  background: transparent;
}


/* ── FADE EDGE + HAMBURGER SHOW ON SMALLER SCREENS ── */

@media (max-width: 1100px) {

  .nav-panel {
    padding-right: 68px;         /* TWEAK – space reserved for hamburger button */
  }

  .nav-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 60px;
    width: 60px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,240,0) 0%, var(--nav-bg) 100%);
    z-index: 101;
  }

  .nav-hamburger {
    display: flex;
  }

}

@media (min-width: 1101px) {

  .nav-hamburger {
    display: none;
  }

  .nav-drawer {
    display: none !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   CONTENT WRAPPER
   ═══════════════════════════════════════════════════════════ */

#content {
  position: relative;
  top: var(--content-top);
  min-height: calc(100vh - var(--content-top));
}