:root{
    --cream: #FBF6EA;
    --mist: #EFE7F3;
    --paper: #FFFCF5;
    --holud: #F0B429;
    --holud-deep: #D9932E;
    --ink: #33324A;
    --ink-soft: #6B6884;
    --dusk: #4A4468;
    --rain: #AFC0D6;
    --line: rgba(51,50,74,0.12);
    --shadow-soft: 0 20px 50px -25px rgba(74,68,104,0.35);
    --night-bg1: #232042;
    --night-bg2: #2f2a52;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Hind Siliguri', sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, var(--cream) 0%, var(--mist) 60%, var(--cream) 100%);
    overflow-x:hidden;
    transition: background 1.2s ease;
  }
  body.night{
    background: linear-gradient(180deg, var(--night-bg1) 0%, var(--night-bg2) 60%, var(--night-bg1) 100%);
    color: #EDEAF6;
  }
  h1,h2,h3,h4{font-family:'Noto Serif Bengali', serif; font-weight:600; letter-spacing:0.3px;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ::selection{background: var(--holud); color:#3a2a05;}

  /* ---------- live wallpaper layer ---------- */
  #sky{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:-3; overflow:hidden; pointer-events:none;
  }
  .cloud{
    position:absolute; opacity:0.55; filter:blur(0.5px);
    background: radial-gradient(ellipse at 30% 30%, #ffffff, transparent 70%);
    border-radius:50%;
  }
  body.night .cloud{ opacity:0.12; }
  .moon{
    position:absolute; top:8%; right:10%;
    width:120px; height:120px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #fffdf3, #ffedb0 60%, #f4d980 100%);
    box-shadow: 0 0 60px 20px rgba(240,180,41,0.25), 0 0 140px 60px rgba(240,180,41,0.12);
    transition: box-shadow 1s ease, background 1s ease;
    cursor:pointer;
  }
  body.night .moon{
    background: radial-gradient(circle at 35% 30%, #fffef8, #e9e6ff 55%, #cfc9f5 100%);
    box-shadow: 0 0 70px 25px rgba(220,215,255,0.35), 0 0 160px 70px rgba(180,170,255,0.18);
  }
  .moon-crater{
    position:absolute; border-radius:50%; background:rgba(0,0,0,0.05);
  }
  .firefly{
    position:absolute; width:5px; height:5px; border-radius:50%;
    background: var(--holud);
    box-shadow: 0 0 8px 3px rgba(240,180,41,0.7);
    animation: drift linear infinite, glow 2.4s ease-in-out infinite;
  }
  @keyframes glow{ 0%,100%{opacity:0.25;} 50%{opacity:1;} }
  @keyframes drift{
    0%{ transform: translate(0,0);}
    25%{ transform: translate(40px,-60px);}
    50%{ transform: translate(-20px,-120px);}
    75%{ transform: translate(-60px,-40px);}
    100%{ transform: translate(0,0);}
  }
  .rain-layer{ position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:0; transition:opacity 1s ease;}
  .rain-layer.on{ opacity:1;}
  .drop{
    position:absolute; top:-10%; width:1.5px; height:60px;
    background: linear-gradient(to bottom, transparent, var(--rain));
    animation: fall linear infinite;
  }
  body.night .drop{ background: linear-gradient(to bottom, transparent, #8f9fd9); }
  @keyframes fall{
    0%{ transform: translateY(0);}
    100%{ transform: translateY(115vh);}
  }
  .hill{
    position:absolute; bottom:-2%; left:0; width:100%;
    background: linear-gradient(180deg, transparent, rgba(74,68,104,0.06));
  }

  /* ---------- weather toggle buttons ---------- */
  .sky-controls{
    position:fixed; bottom:22px; right:22px; z-index:40;
    display:flex; flex-direction:column; gap:10px;
  }
  .sky-btn{
    width:52px; height:52px; border-radius:50%; border:1px solid var(--line);
    background: rgba(255,252,245,0.85); backdrop-filter: blur(6px);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; cursor:pointer; box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, background 0.4s ease;
  }
  .sky-btn:hover{ transform: translateY(-3px) scale(1.05); }
  body.night .sky-btn{ background: rgba(47,42,82,0.85); color:#EDEAF6; border-color: rgba(237,234,246,0.2);}

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; width:100%; z-index:30;
    padding:18px 5%;
    display:flex; align-items:center; justify-content:space-between;
    backdrop-filter: blur(10px);
    background: rgba(251,246,234,0.55);
    border-bottom:1px solid var(--line);
    transition: background 0.5s ease, border-color 0.5s ease;
  }
  body.night header{ background: rgba(35,32,66,0.55); border-color: rgba(237,234,246,0.1); }
  .brand{ font-family:'Baloo Da 2', cursive; font-size:1.35rem; font-weight:700; color:var(--dusk);}
  body.night .brand{ color:#EFE0A8;}
  .brand span{ color: var(--holud-deep);}
  nav ul{ list-style:none; display:flex; gap:28px; }
  nav a{ font-size:0.95rem; color:var(--ink-soft); position:relative; padding:4px 0;}
  nav a:hover{ color: var(--holud-deep); }
  nav a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
    background: var(--holud); transition: width 0.3s ease;
  }
  nav a:hover::after{ width:100%; }
  #menuToggle{ display:none; font-size:1.6rem; background:none; border:none; cursor:pointer; color:var(--ink);}

  /* ---------- sections generic ---------- */
  section{ position:relative; padding:120px 8% 90px; z-index:1; }
  .eyebrow{
    font-family:'Baloo Da 2', cursive; color: var(--holud-deep); font-size:0.9rem;
    letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; display:inline-block;
    border-bottom:2px solid var(--holud); padding-bottom:4px;
  }
  .section-title{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom:20px; }
  .reveal{ opacity:0; transform: translateY(36px); transition: opacity 0.9s ease, transform 0.9s ease; }
  .reveal.show{ opacity:1; transform:none; }

  /* ---------- hero ---------- */
  #hero{
    min-height:100vh; display:flex; flex-direction:column; align-items:flex-start;
    justify-content:center; padding-top:100px;
  }
  .hero-eyebrow{
    font-family:'Baloo Da 2', cursive; color:var(--holud-deep); letter-spacing:3px;
    font-size:0.95rem; margin-bottom:18px;
  }
  .hero-title{
    font-size: clamp(2.6rem, 7vw, 5.4rem); line-height:1.15; color:var(--dusk);
    max-width:900px;
  }
  body.night .hero-title{ color:#F3EBD0; }
  .hero-title em{ font-style:normal; color:var(--holud-deep); }
  .hero-sub{
    font-size:1.15rem; color:var(--ink-soft); max-width:560px; margin:26px 0 38px; line-height:1.9;
  }
  .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn{
    padding:14px 30px; border-radius:40px; font-size:1rem; cursor:pointer; border:none;
    font-family:'Hind Siliguri', sans-serif; font-weight:500; transition: all 0.3s ease;
  }
  .btn-primary{ background: var(--holud); color:#3a2a05; box-shadow: 0 12px 30px -10px rgba(240,180,41,0.6); }
  .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(240,180,41,0.75); }
  .btn-ghost{ background:transparent; border:1.5px solid var(--dusk); color:var(--dusk); }
  body.night .btn-ghost{ border-color:#EDEAF6; color:#EDEAF6; }
  .btn-ghost:hover{ background: var(--dusk); color:#fff; }
  .scroll-cue{
    position:absolute; bottom:30px; left:8%; font-size:0.85rem; color:var(--ink-soft);
    display:flex; align-items:center; gap:8px;
  }
  .scroll-cue .line{ width:36px; height:1px; background:var(--ink-soft); animation: pulseLine 2s ease-in-out infinite; }
  @keyframes pulseLine{ 0%,100%{width:36px;} 50%{width:16px;} }

  /* ---------- about ---------- */
  .about-grid{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap:60px; align-items:center;
  }
  .portrait-frame{
    aspect-ratio: 3/4; border-radius: 24px 24px 24px 4px;
    background: linear-gradient(155deg, var(--holud) 0%, #f7e2a8 45%, var(--paper) 100%);
    position:relative; overflow:hidden; box-shadow: var(--shadow-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .portrait-img{
    width:100%; height:100%; object-fit:cover; object-position: center top;
    display:block; transition: transform 0.6s ease;
  }
  .portrait-frame:hover .portrait-img{ transform: scale(1.04); }
  .portrait-fallback{ width:78%; display:none; }
  .about-text p{ font-size:1.05rem; line-height:2; color:var(--ink-soft); margin-bottom:18px; }
  .fact-row{ display:flex; gap:26px; margin-top:30px; flex-wrap:wrap; }
  .fact{
    background: var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px 20px; min-width:150px;
    box-shadow: 0 10px 24px -18px rgba(74,68,104,0.4);
  }
  body.night .fact{ background: rgba(255,255,255,0.05); border-color: rgba(237,234,246,0.12); }
  .fact b{ display:block; font-family:'Noto Serif Bengali', serif; font-size:1.2rem; color:var(--holud-deep); }
  .fact span{ font-size:0.85rem; color:var(--ink-soft); }

  /* ---------- timeline ---------- */
  .timeline{ margin-top:50px; border-left:2px solid var(--holud); padding-left:30px; display:flex; flex-direction:column; gap:34px; }
  .t-item{ position:relative; }
  .t-item::before{
    content:''; position:absolute; left:-38px; top:4px; width:14px; height:14px; border-radius:50%;
    background: var(--holud); border:3px solid var(--cream);
  }
  body.night .t-item::before{ border-color: var(--night-bg1); }
  .t-year{ font-family:'Baloo Da 2', cursive; color:var(--holud-deep); font-size:1rem; }
  .t-desc{ color:var(--ink-soft); margin-top:4px; line-height:1.8; }

  /* ---------- books ---------- */
  .book-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:26px; margin-top:44px;
  }
  .book-card{
    background: var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px 22px;
    position:relative; overflow:hidden; transition: transform 0.35s ease, box-shadow 0.35s ease;
  }
  body.night .book-card{ background: rgba(255,255,255,0.04); border-color: rgba(237,234,246,0.1); }
  .book-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); }
  .book-card::before{
    content:''; position:absolute; top:0; left:0; width:6px; height:100%; background: var(--holud);
    transform: scaleY(0); transform-origin:bottom; transition: transform 0.4s ease;
  }
  .book-card:hover::before{ transform: scaleY(1); }
  .book-year{ font-size:0.8rem; color:var(--holud-deep); font-family:'Baloo Da 2', cursive; }
  .book-title{ font-family:'Noto Serif Bengali', serif; font-size:1.25rem; margin:8px 0 10px; }
  .book-desc{ font-size:0.92rem; color:var(--ink-soft); line-height:1.75; }

  /* ---------- characters ---------- */
  .char-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:28px; margin-top:44px; }
  .char-card{
    border-radius:22px; padding:34px 28px; color:#fff; position:relative; overflow:hidden;
    min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;
    box-shadow: var(--shadow-soft);
  }
  .char-card::after{
    content:''; position:absolute; inset:0; background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.25), transparent 60%);
  }
  .char-1{ background: linear-gradient(155deg, #F0B429, #d9932e); }
  .char-2{ background: linear-gradient(155deg, #4A4468, #2f2a52); }
  .char-3{ background: linear-gradient(155deg, #7c8fb3, #4a5a80); }
  .char-name{ font-family:'Noto Serif Bengali', serif; font-size:1.5rem; margin-bottom:8px; position:relative; }
  .char-desc{ font-size:0.92rem; line-height:1.7; opacity:0.92; position:relative; }
  .char-tag{
    font-family:'Baloo Da 2', cursive; font-size:0.78rem; letter-spacing:1.5px; text-transform:uppercase;
    opacity:0.85; margin-bottom:10px; position:relative;
  }

  /* ---------- quotes ---------- */
  .quote-wrap{
    margin-top:50px; text-align:center; max-width:780px; margin-left:auto; margin-right:auto;
    min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .quote-text{
    font-family:'Noto Serif Bengali', serif; font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.8;
    color: var(--dusk); transition: opacity 0.6s ease, transform 0.6s ease;
  }
  body.night .quote-text{ color:#F3EBD0; }
  .quote-dots{ display:flex; gap:8px; margin-top:28px; }
  .qdot{ width:8px; height:8px; border-radius:50%; background: var(--line); cursor:pointer; transition: background 0.3s ease; }
  .qdot.active{ background: var(--holud); }

  /* ---------- blog ---------- */
  .blog-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:30px; margin-top:44px; }
  .blog-card{
    background: var(--paper); border-radius:20px; overflow:hidden; border:1px solid var(--line);
    display:flex; flex-direction:column; transition: transform 0.35s ease, box-shadow 0.35s ease; cursor:pointer;
  }
  body.night .blog-card{ background: rgba(255,255,255,0.04); border-color: rgba(237,234,246,0.1); }
  .blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
  .blog-cover{
    height:150px; background: linear-gradient(135deg, var(--holud), #f7e2a8);
    display:flex; align-items:center; justify-content:center; font-size:2.4rem;
  }
  .blog-body{ padding:22px 24px 26px; }
  .blog-date{ font-size:0.78rem; color:var(--holud-deep); font-family:'Baloo Da 2', cursive; letter-spacing:1px;}
  .blog-title{ font-family:'Noto Serif Bengali', serif; font-size:1.18rem; margin:10px 0; }
  .blog-excerpt{ font-size:0.9rem; color:var(--ink-soft); line-height:1.75; }
  .blog-read{ margin-top:14px; font-size:0.85rem; color: var(--holud-deep); font-weight:600; display:inline-flex; align-items:center; gap:6px; }

  /* ---------- nuhash polli ---------- */
  .estate{
    border-radius:26px; padding:60px 8%; text-align:center;
    background: linear-gradient(155deg, rgba(240,180,41,0.14), rgba(74,68,104,0.06));
    border:1px solid var(--line);
  }
  body.night .estate{ border-color: rgba(237,234,246,0.12); }
  .estate p{ max-width:700px; margin:20px auto 0; color:var(--ink-soft); line-height:2; }

  /* ---------- footer ---------- */
  footer{
    padding:60px 8% 40px; text-align:center; border-top:1px solid var(--line);
  }
  body.night footer{ border-color: rgba(237,234,246,0.1); }
  .footer-quote{ font-family:'Noto Serif Bengali', serif; font-size:1.15rem; color:var(--dusk); max-width:600px; margin:0 auto 18px; }
  body.night .footer-quote{ color:#F3EBD0; }
  .footer-note{ font-size:0.82rem; color:var(--ink-soft); margin-top:18px; }
  .footer-social{ display:flex; gap:16px; justify-content:center; margin:22px 0; }
  .footer-social a{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:1rem;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .footer-social a:hover{ background: var(--holud); transform: translateY(-3px); }

  /* ---------- lightbox for blog ---------- */
  .lightbox{
    position:fixed; inset:0; background: rgba(35,32,66,0.55); backdrop-filter: blur(6px);
    display:none; align-items:center; justify-content:center; z-index:100; padding:5%;
  }
  .lightbox.open{ display:flex; }
  .lightbox-card{
    background: var(--paper); max-width:640px; width:100%; border-radius:22px; padding:44px;
    max-height:80vh; overflow-y:auto; box-shadow: var(--shadow-soft); position:relative;
    animation: pop 0.35s ease;
  }
  body.night .lightbox-card{ background: var(--night-bg2); color:#EDEAF6; }
  @keyframes pop{ from{ transform: scale(0.92); opacity:0;} to{ transform:scale(1); opacity:1;} }
  .lightbox-close{
    position:absolute; top:18px; right:18px; background:none; border:none; font-size:1.4rem; cursor:pointer; color:inherit;
  }
  .lightbox-card h3{ font-size:1.5rem; margin-bottom:6px; }
  .lightbox-card .blog-date{ margin-bottom:18px; display:block; }
  .lightbox-card p{ line-height:2; color:var(--ink-soft); margin-bottom:14px; }
  body.night .lightbox-card p{ color:#cfc9e6; }

  @media (max-width: 860px){
    .about-grid{ grid-template-columns:1fr; }
    nav ul{
      position:fixed; top:64px; right:0; height:calc(100vh - 64px); width:70%; max-width:300px;
      background: var(--paper); flex-direction:column; padding:40px 30px; gap:26px;
      transform: translateX(100%); transition: transform 0.4s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    }
    body.night nav ul{ background: var(--night-bg2); }
    nav ul.open{ transform: translateX(0); }
    #menuToggle{ display:block; }
    section{ padding:100px 6% 70px; }
    .moon{ width:80px; height:80px; top:6%; right:8%;}
  }