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

    :root {
      --cream: #f5f0e8;
      --ink: #1a1410;
      --sepia: #8b6c42;
      --gold: #c9a84c;
      --gold-light: #e8c97a;
      --rust: #b5451b;
      --sage: #4a6741;
      --paper: #ede8df;
      --shadow: rgba(26, 20, 16, .18);
      --text-muted: rgba(237, 232, 222, 0.5);
      --nav-h: 80px;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-h);
      /* anchor links clear navbar */
    }

    body {
      background: var(--cream);
      color: var(--ink);
      font-family: 'Cormorant Garamond', Georgia, serif;
      overflow-x: hidden;
      cursor: none;
    }

    /* custom cursor */
    #cursor {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 14px;
      height: 14px;
      border: 2px solid var(--rust);
      border-radius: 50%;
      pointer-events: none;
      transition: transform .15s ease, background .15s ease;
      mix-blend-mode: multiply;
    }

    #cursor.hovered {
      transform: scale(2.5);
      background: var(--gold);
      opacity: .5;
    }

    /* noise */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .04;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 180px;
    }

    section {
      width: 100%;
      max-width: 100%;
    }

    /* ══ NAVBAR ══ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(1.2rem, 5vw, 3.5rem);
      padding-left: 0.89rem;
      margin-bottom: 100px;
      backdrop-filter: blur(14px) saturate(1.4);
      -webkit-backdrop-filter: blur(14px) saturate(1.4);
      background: rgba(245, 240, 232, 0.719);
      border-bottom: 2px solid rgba(139, 108, 66, .18);
    }

    .nav-brand img {
      height: 170px;
      width: auto;
      padding: 5px;
    }

    .nav-links {
      display: flex;
      gap: clamp(.9rem, 3vw, 2.4rem);
      list-style: none;
    }

    .nav-links a {
      font-family: 'DM Mono', monospace;
      font-size: 0.89rem;
      letter-spacing: .18em;
      color: var(--sepia);
      text-decoration: none;
      text-transform: uppercase;
      transition: color .2s;
      padding: 20px;
    }

    .nav-links a:hover {
      color: var(--rust);
      background-color: #9c7b4e77;
    }

    /* hamburger */
    .nav-ham {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
    }

    .nav-ham span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform .3s, opacity .3s;
    }

    .nav-ham.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .nav-ham.open span:nth-child(2) {
      opacity: 0;
    }

    .nav-ham.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* mobile drawer */
    .nav-drawer {
      position: fixed;
      top: var(--nav-h);
      left: 0;
      right: 0;
      z-index: 199;
      background: rgba(245, 240, 232, .97);
      border-bottom: 1px solid rgba(139, 108, 66, .2);
      padding: 1.6rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      transform: translateY(-110%);
      transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    }

    .nav-drawer.open {
      transform: translateY(0);
    }

    .nav-drawer a {
      font-family: 'DM Mono', monospace;
      font-size: .75rem;
      letter-spacing: .22em;
      color: var(--sepia);
      text-decoration: none;
      text-transform: uppercase;
    }

    /* ══ HERO ══ */
    #hero {
      padding-top: var(--nav-h);
      /* ← THIS fixes the navbar overlap */
      min-height: 100svh;
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr auto;
      overflow: hidden;
    }

    /* diagonal bg split */
    #hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(108deg, var(--cream) 52%, var(--ink) 52%);
    }

    .hero-year {
      position: absolute;
      top: calc(var(--nav-h) + 1.4rem);
      right: 3rem;
      z-index: 3;
      font-family: 'DM Mono', monospace;
      font-size: .7rem;
      letter-spacing: .28em;
      color: var(--gold);
      writing-mode: vertical-rl;
      text-transform: uppercase;
      margin-top: 10px;
      font-weight: bolder;
    }

    .hero-badge {
      position: absolute;
      top: calc(var(--nav-h) + 1.4rem);
      left: clamp(1rem, 3vw, 3rem);
      z-index: 3;
      font-family: 'DM Mono', monospace;
      font-size: .7rem;
      letter-spacing: .2em;
      color: #638d56;
      text-transform: uppercase;
      margin-top: 10px;
      font-weight: 500;
    }

    .hero-badge span {
      color: var(--rust);
    }

    .hero-text {
      grid-column: 1;
      grid-row: 1;
      position: relative;
      z-index: 3;
      padding: clamp(4rem, 8vh, 7rem) clamp(1.5rem, 5vw, 4rem) 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero-eyebrow {
      font-family: 'DM Mono', monospace;
      font-size: .70rem;
      letter-spacing: .3em;
      color: var(--sepia);
      text-transform: uppercase;
      margin-bottom: 1.2rem;
      font-weight: bold;
    }

    h1.name {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2.8rem, 6vw, 5.4rem);
      font-weight: 900;
      line-height: .95;
      color: var(--ink);
      margin-bottom: 1.6rem;
    }

    h1.name em {
      font-style: italic;
      color: var(--rust);
    }

    .hero-quote {
      font-size: clamp(.92rem, 2vw, 1.12rem);
      line-height: 1.65;
      color: var(--sepia);
      font-style: italic;
      max-width: 34ch;
      font-weight: bold;
      border-left: 3px solid var(--gold);
      padding-left: 1.2rem;
      margin-bottom: 2rem;
    }

    .hero-scroll {
      font-family: 'DM Mono', monospace;
      font-size: .6rem;
      letter-spacing: .24em;
      color: var(--sepia);
      display: flex;
      align-items: center;
      gap: .8rem;
    }

    .scroll-line {
      width: 34px;
      height: 1px;
      background: var(--sepia);
    }

    .hero-photo-wrap {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3rem 3rem 3rem 1.5rem;
    }

    .hero-photo-frame {
      position: relative;
      width: clamp(200px, 28vw, 340px);
      height: clamp(260px, 36vw, 440px);
    }

    .hero-photo-frame::before {
      content: '';
      position: absolute;
      inset: -12px -12px 12px 12px;
      border: 2px solid var(--gold);
      z-index: 0;
    }

    .hero-photo-frame::after {
      content: 'output → University of Calcutta graduate.';
      position: absolute;
      bottom: -2rem;
      right: 0;
      margin-left: 10%;
      font-family: 'DM Mono', monospace;
      font-size: .6rem;
      letter-spacing: .28em;
      color: var(--cream);
    }

    .hero-photo {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      overflow: hidden;
      background: linear-gradient(160deg, #3a2e26 0%, #6b4e33 40%, #2c2018 100%);
      border: 1px solid var(--text-muted);
    }

    .premium-slider {
      padding: 0;
      object-fit: contain;
      width: 100%;
      height: 100%;
      transform: translateY(0px);
      transition: all 0.7s ease;

    }

    .slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: 1.5s ease-in-out;
      transform: scale(1.1);
    }

    .slide.active {
      opacity: 1;
      transform: scale(1);
    }

    .click {
      z-index: 5;
      color: #638359;
      position: absolute;
      bottom: 100px;
      right: 40px;
      left: auto;
      top: auto;
      font-size: 0.8rem;
      font-family: 'DM Mono', monospace;
      letter-spacing: 1px;
      filter: blur(1px);
      animation: focusBlur 4s infinite;
    }

    @keyframes focusBlur {
      0% {
        opacity: 0.3;
        filter: blur(2px);
      }

      50% {
        opacity: 1;
        filter: blur(0);
      }

      100% {
        opacity: 0.3;
        filter: blur(2px);
      }
    }

    .hero-footer {
      grid-column: 1 / -1;
      grid-row: 2;
      position: relative;
      z-index: 3;
      display: flex;
      flex-wrap: wrap;
      gap: .6rem 2rem;
      align-items: center;
      justify-content: space-between;
      padding: 1.4rem clamp(1.2rem, 5vw, 3.5rem);
      border-top: 1px solid rgba(139, 108, 66, .2);
    }

    .hero-footer-tag {
      font-family: 'DM Mono', monospace;
      font-weight: 500;
      font-size: .6rem;
      letter-spacing: .16em;
      color: var(--sepia);
      text-transform: uppercase;
    }

    .hero-footer-tag strong {
      color: var(--gold);
    }

    /* hero animations */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(36px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .hero-badge {
      animation: fadeIn .8s ease .2s both;
    }

    .hero-eyebrow {
      animation: fadeUp .8s ease .4s both;
    }

    h1.name {
      animation: fadeUp .9s ease .55s both;
    }

    .hero-quote {
      animation: fadeUp .9s ease .7s both;
    }

    .hero-scroll {
      animation: fadeUp .8s ease .85s both;
    }

    .hero-footer {
      animation: fadeIn .8s ease 1s both;
    }

    .hero-year {
      animation: fadeIn .8s ease 1.1s both;
    }

    .hero-photo-wrap {
      animation: fadeIn 1.1s ease .3s both;
    }

    /* ══ SECTION LABEL ══ */
    .section-label {
      font-family: 'DM Mono', monospace;
      font-weight: bold;
      font-size: .65rem;
      letter-spacing: .35em;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 3rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .section-label::before {
      content: '';
      flex: none;
      width: 28px;
      height: 1px;
      background: var(--gold);
    }

    /* ══ TIMELINE ══ */
    #timeline {
      padding: clamp(4rem, 10vh, 8rem) clamp(1.2rem, 5vw, 4rem);
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .timeline-grid {
      display: grid;
      grid-template-columns: 1fr 48px 1fr;
      position: relative;
    }

    .timeline-grid::before {
      content: '';
      position: absolute;
      left: calc(50% - .5px);
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
    }

    .tl-item {
      padding: 0 clamp(.8rem, 2vw, 2rem) clamp(2.5rem, 5vh, 4rem);
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .tl-item.visible {
      opacity: 1;
      transform: none;
    }

    .tl-item.left {
      grid-column: 1;
      text-align: right;
    }

    .tl-item.right {
      grid-column: 3;
    }

    .tl-dot {
      grid-column: 2;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: .3rem;
    }

    .dot {
      width: 12px;
      height: 12px;
      border: 2px solid var(--gold);
      border-radius: 50%;
      background: var(--cream);
      flex-shrink: 0;
      transition: background .3s;
    }

    .tl-item.visible+.tl-dot .dot {
      background: var(--gold);
    }

    .tl-year {
      font-family: 'DM Mono', monospace;
      font-size: .6rem;
      letter-spacing: .2em;
      color: var(--rust);
      text-transform: uppercase;
      margin-bottom: .4rem;
    }

    .tl-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.05rem, 2.5vw, 1.3rem);
      font-weight: 700;
      margin-bottom: .4rem;
      line-height: 1.2;
    }

    .tl-body {
      font-size: clamp(.88rem, 2vw, 1rem);
      line-height: 1.72;
      color: var(--sepia);
    }

    /* ══ QUOTE BAND ══ */
    #quote-band {
      background: var(--ink);
      padding: clamp(4rem, 10vh, 7rem) clamp(1.5rem, 5vw, 4rem);
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    #quote-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(201, 168, 76, .03) 40px, rgba(201, 168, 76, .03) 80px);
    }

    .big-quote {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.4rem, 3.5vw, 2.8rem);
      font-style: italic;
      color: var(--cream);
      line-height: 1.45;
      position: relative;
      z-index: 1;
    }

    .big-quote span {
      color: var(--gold);
    }

    .quote-attr {
      text-align: center;
      margin-top: 2rem;
      font-family: 'DM Mono', monospace;
      font-size: clamp(.55rem, 1.5vw, .62rem);
      letter-spacing: .24em;
      color: var(--sepia);
      text-transform: uppercase;
      position: relative;
      z-index: 1;
    }

    /* ══ STATS ══ */
    #stats {
      background: var(--paper);
      border-top: 1px solid rgba(139, 108, 66, .18);
      border-bottom: 1px solid rgba(139, 108, 66, .18);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      position: relative;
      z-index: 1;
    }

    .stat {
      padding: clamp(2rem, 5vh, 3.5rem) 1rem;
      text-align: center;
      border-right: 1px solid rgba(139, 108, 66, .18);
    }

    .stat:last-child {
      border-right: none;
    }

    .stat-number {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 5vw, 4rem);
      font-weight: 900;
      color: var(--rust);
      display: block;
      line-height: 1;
      margin-bottom: .4rem;
    }

    .stat-label {
      font-family: 'DM Mono', monospace;
      font-size: clamp(.48rem, 1.4vw, .62rem);
      letter-spacing: .18em;
      color: var(--sepia);
      text-transform: uppercase;
    }

    /* ══ LETTER ══ */
    #letter {
      padding: clamp(4rem, 10vh, 8rem) clamp(1.2rem, 5vw, 4rem);
      max-width: 780px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .letter-paper {
      background: #fff;
      box-shadow: 0 4px 60px var(--shadow);
      padding: clamp(2rem, 6vw, 5rem);
      position: relative;
    }

    .letter-paper::before {
      content: '';
      position: absolute;
      top: 0;
      left: clamp(2rem, 6vw, 4rem);
      right: clamp(2rem, 6vw, 4rem);
      height: 3px;
      background: linear-gradient(90deg, var(--rust), var(--gold), var(--sage));
    }

    .letter-date {
      font-family: 'DM Mono', monospace;
      font-size: .68rem;
      letter-spacing: .18em;
      color: var(--sepia);
      margin-bottom: 2rem;
    }

    .letter-body {
      font-size: clamp(.98rem, 2.5vw, 1.12rem);
      line-height: 1.9;
      color: var(--ink);
    }

    .letter-body p {
      margin-bottom: 1.3rem;
    }

    .letter-sig {
      margin-top: 2.5rem;
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: clamp(1.1rem, 3vw, 1.5rem);
      color: var(--sepia);
    }

    #confetti-canvas {
      position: fixed;
      inset: 0;
      z-index: 50;
      pointer-events: none;
    }

    /* ── FAREWELL MESSAGE ── */
    #farewell-section {
      padding: 80px 24px 120px;
      text-align: center;
      position: relative;
      overflow: hidden;
      background-color: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
    }

    #farewell-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(201, 168, 76, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 80% 80%, rgba(139, 100, 50, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #0d0c0a 0%, #141209 50%, #0d0c0a 100%);
      pointer-events: none;
    }

    .section-text {
      display: flex;
      color: #638359;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      margin-bottom: 5%;
      font-size: 1.2rem;
    }

    .section-text .text {
      padding: 20px;
    }

    .divider-line {
      width: 80px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), var(--gold));
    }

    .divider-line-2 {
      width: 80px;
      height: 1px;
      background: linear-gradient(90deg, var(--gold), var(--gold), transparent);

    }

    .farewell-big {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3rem, 12vw, 10rem);
      font-weight: 300;
      font-style: italic;
      letter-spacing: 2px;
      background: linear-gradient(135deg, rgba(201, 168, 76, 0.4) 0%, var(--gold-light) 40%, rgba(201, 168, 76, 0.3) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 1.5rem;
      position: relative;
      z-index: 20;
    }

    .farewell-sub {
      font-size: 11px;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 3rem;
      position: relative;
      z-index: 1;
    }

    .farewell-final-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1rem, 2.5vw, 1.35rem);
      font-style: italic;
      color: var(--text-muted);
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.8;
      position: relative;
      z-index: 1;
    }

    .farewell-from {
      margin-top: 6rem;
      font-size: 12px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--gold);
      position: relative;
      z-index: 1;
    }


    /* ── UTILITIES ── */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .8s ease, transform .8s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }