/* ==========================================================================
   AVISHEK BISWAS — A DIGITAL AUTOBIOGRAPHY
   --------------------------------------------------------------------------
   ONE CANVAS, MANY WINDOWS.
   The whole document is drawn on one 430-unit canvas. The root font-size is
   the scale factor (16px at 430 wide), so every size here is in rem and the
   composition scales as a single object. A phone sees the canvas edge to
   edge; a desktop sees the same canvas, larger, centred in quiet darkness.

   TYPOGRAPHY — exactly two families, six roles (VIREVO type scale).
     Page Title      Bebas Neue 400 · 89px · lh .90 · +.015em · UPPER
     General Copy    Poppins 400 (lead 700) · 16px · lh 1.55 · −.015em
     Sub-heading     Poppins 600 · 15px · lh 1.2 · +.09em · UPPER
     Tile Heading    Poppins 400 · 20.8px · lh 1.35 · UPPER
     Tile Copy       Poppins 400 · 14.8px · lh 1.55 · −.01em
     Key Phrase      Poppins 600 · 26.6px · lh 1.2 · UPPER
   Mobile values are used at the 430 master and scale with the canvas.
   Every text element on the page carries one of these roles.

   01 FONTS  02 TOKENS  03 BASE  04 TYPE ROLES  05 CANVAS & MOTION PRIMITIVES
   06 CHROME  07 HERO  08 CHAPTERS  09 PROFILE CARD  10 REDUCED MOTION
   ========================================================================== */


/* 01  FONTS — self-hosted, so nothing but Poppins and Bebas Neue ever renders.
   ========================================================================== */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: block;
}


/* 02  TOKENS
   ========================================================================== */
:root {
  /* Palette */
  --bg:       #090909;
  --surface:  #111111;
  --ink:      #ffffff;
  --muted:    #a8a8a8;
  --accent:   #b48835;
  --cream:    #f2ede4;          /* hero name, after the virevo.works section */
  --sage:     #879689;          /* Page Title, first span  */
  --stone:    #c1bcb9;          /* Page Title, second span */

  --sec:      #090909;          /* the band's own background */
  --on-accent:#090909;          /* text set on a gold fill   */
  --faint:    rgba(255, 255, 255, .38);
  --ink-soft: rgba(255, 255, 255, .84);
  --hair:     rgba(255, 255, 255, .14);
  --hair-soft:rgba(255, 255, 255, .08);

  /* Families */
  --f-display: 'Bebas Neue', sans-serif;
  --f-ui:      'Poppins', sans-serif;

  /* Type scale (rem at the 16px / 430 master) */
  --t-title:   5.5625rem;   /* 89   */
  --t-general: 1rem;        /* 16   */
  --t-sub:     .9375rem;    /* 15   */
  --t-heading: 1.3rem;      /* 20.8 */
  --t-copy:    .925rem;     /* 14.8 */
  --t-phrase:  1.6625rem;   /* 26.6 */

  /* Canvas */
  --canvas:  26.875rem;     /* 430 */
  --gutter:  2rem;
  --indent:  5.2rem;        /* Page Title second-line indent (119/619 of width) */
  --chapter: 7.5rem;

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

/* The scale factor: the canvas always equals the window width, up to 591px. */
html { font-size: min(3.7209vw, 22px); }


/* 03  BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: var(--t-general);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 700; color: var(--ink); }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: .35rem; }


/* 04  TYPE ROLES
   ========================================================================== */
.t-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: .9;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--sage);
}
.t-title .ln   { display: block; }
.t-title .ln-2 { color: var(--stone); padding-left: var(--indent); }

.t-general {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: var(--t-general);
  line-height: 1.55;
  letter-spacing: -.015em;
  color: var(--ink-soft);
}
.t-general + .t-general { margin-top: 1rem; }

.t-sub,
.rail {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.t-heading,
.menu a {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: var(--t-heading);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}

.t-copy {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: var(--t-copy);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--muted);
}

.t-phrase {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t-phrase);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}

/* Colour modifiers — never size or family */
.gold  { color: var(--accent); }
.quiet { color: var(--muted); }


/* 05  CANVAS & MOTION PRIMITIVES
   ========================================================================== */
.canvas {
  position: relative;
  width: var(--canvas);
  max-width: 100%;
  margin-inline: auto;
}
.chapter { position: relative; padding-inline: var(--gutter); }
.bleed   { margin-inline: calc(var(--gutter) * -1); }

.word-mask {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: .12em; margin-bottom: -.12em;
}
.word, .char { display: inline-block; will-change: transform; }

.reveal-img { position: relative; overflow: hidden; background: var(--surface); height: 100%; }
.reveal-img img { transform: scale(1.12); will-change: transform; }

.scrim::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(9,9,9,.5) 0%, rgba(9,9,9,0) 24%, rgba(9,9,9,0) 60%, rgba(9,9,9,.9) 100%);
}

/* Chapter eyebrow:  02 — PHILOSOPHY ———— */
.eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.eyebrow .num { color: var(--accent); }
.eyebrow .rule {
  flex: 1; height: 1px; background: var(--hair); margin-left: .4rem;
  transform: scaleX(0); transform-origin: left center;
}

/* Title → first copy: the spec's generous drop after the display line */
.chapter > .t-title + .t-general,
.head > .t-title + .t-general { margin-top: 2.1rem; }

.chapter > figcaption,
figure > figcaption {
  position: absolute; bottom: 1rem; left: var(--gutter); right: var(--gutter);
  color: rgba(255,255,255,.6); z-index: 2;
}


/* 06  CHROME
   ========================================================================== */
.progress { position: fixed; inset: 0 0 auto 0; height: 1px; z-index: 90; }
.progress i {
  display: block; height: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
}

.topbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: var(--canvas); max-width: 100%;
  padding: 1.1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 80; mix-blend-mode: difference;
}
.mono {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--t-phrase); line-height: 1; letter-spacing: .015em;
  color: var(--ink);
}
.menu-btn { display: flex; align-items: center; gap: .6rem; color: var(--ink); }
.burger { display: block; width: 1.1rem; }
.burger span { display: block; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.burger span + span { margin-top: .3rem; }
.is-open .burger span:nth-child(1) { transform: translateY(.16rem) rotate(45deg); }
.is-open .burger span:nth-child(2) { transform: translateY(-.16rem) rotate(-45deg); }

/* Menu overlay — one class drives every state */
.menu {
  position: fixed; inset: 0; z-index: 75;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; pointer-events: none;
  transition: clip-path .75s var(--ease), opacity .35s linear, visibility 0s linear .75s;
}
.menu.is-open {
  clip-path: inset(0 0 0% 0); opacity: 1; visibility: visible; pointer-events: auto;
  transition: clip-path .75s var(--ease), opacity .25s linear, visibility 0s linear 0s;
}
.menu-inner { width: var(--canvas); max-width: 100%; padding: 0 var(--gutter); }
.menu li { overflow: hidden; }
.menu a {
  display: flex; align-items: baseline; gap: .9rem; padding: .32rem 0;
  color: rgba(255,255,255,.55);
  transform: translateY(110%); opacity: 0;
  transition: transform .8s var(--ease), opacity .6s var(--ease), color .45s var(--ease);
}
.menu a .n {
  font-weight: 600; font-size: var(--t-sub); letter-spacing: .09em;
  color: var(--accent); min-width: 1.6rem;
}
.menu a.home-link { color: var(--sage); }
.menu.is-open a { transform: translateY(0); opacity: 1; transition-delay: calc(.2s + var(--i, 0) * .04s); }
.menu.is-open a:hover { color: var(--ink); transform: translate(.5rem, 0); }
.menu-foot {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--hair-soft);
  display: flex; justify-content: space-between;
  opacity: 0; transition: opacity .6s var(--ease);
}
.menu.is-open .menu-foot { opacity: 1; transition-delay: .75s; }

/* Desktop gutter rails — live in the margins only a wide window reveals.
   Sub-heading role, sized in px: they belong to the window, not the canvas. */
.rail {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 60; display: none; font-size: 13px;
}
.rail-l { left: 40px; }
.rail-r { right: 40px; text-align: right; }
.rail li { margin: 11px 0; }
.rail a { color: rgba(255,255,255,.3); transition: color .4s var(--ease); }
.rail a:hover, .rail a.on { color: var(--ink); }
.rail a .n { display: inline-block; width: 26px; color: var(--accent); opacity: 0; transition: opacity .4s var(--ease); }
.rail a.on .n, .rail a:hover .n { opacity: 1; }
.rail a.home-link { color: var(--sage); }
.rail a.home-link .n { opacity: 1; color: var(--sage); }
.rail-r .cnt { font-size: 17px; }
.rail-r .cnt b { color: var(--ink); font-weight: 600; }
@media (min-width: 1180px) { .rail { display: block; } }

/* Custom cursor — fine pointers only */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0; border-radius: 50%;
  pointer-events: none; z-index: 200; opacity: 0;
}
.cursor { width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border: 1px solid rgba(255,255,255,.4); }
.cursor-dot { width: .2rem; height: .2rem; margin: -.1rem 0 0 -.1rem; background: var(--accent); }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }


/* 07  HERO — after the virevo.works "Avishek Biswas" section:
   name in cream Bebas over the photograph, role with a ruled link,
   a paragraph, and a hairline-separated list of attributes.
   ========================================================================== */
.hero { position: relative; padding-top: 5.25rem; }

.hero-name {
  position: relative; z-index: 3;
  padding-inline: var(--gutter);
  color: var(--cream);
}
.hero-name .ln-2 { color: var(--cream); }

/* The full photograph, uncropped (3:4), rising up behind the second line
   of the name. Face and hands stay clear of type. */
.hero-photo {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-top: -3.4rem;
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(9,9,9,.55) 9%, rgba(9,9,9,0) 20%),
    linear-gradient(to top,    var(--bg) 0%, rgba(9,9,9,.7)  7%, rgba(9,9,9,0) 18%);
}

.hero-copy {
  position: relative; z-index: 3;
  padding-inline: var(--gutter);
  margin-top: -2.4rem;
}
.hero-role { display: inline-block; padding-bottom: .7rem; border-bottom: 1px solid var(--hair); }
.hero-role .t-heading { color: var(--ink); }
.hero-role .learn {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem;
  font-weight: 400; color: rgba(255,255,255,.7);
  transition: color .4s var(--ease), gap .4s var(--ease);
}
.hero-role .learn:hover { color: var(--accent); gap: .75rem; }

.hero-lede { margin-top: 2rem; color: var(--ink); }

.hero-attrs { margin-top: 2.4rem; }
.hero-attrs li {
  padding: .95rem 0;
  border-bottom: 1px solid var(--hair-soft);
  font-weight: 400; color: var(--ink-soft);
}
.hero-attrs li:first-child { border-top: 1px solid var(--hair-soft); }


/* 08  CHAPTERS
   ========================================================================== */

/* 02 Philosophy ----------------------------------------------------------- */
.philosophy { padding-top: var(--chapter); }
.phil-lines { margin-top: 2.6rem; }
.phil-lines p + p { margin-top: 1.1rem; }

/* 03 Who I Am ------------------------------------------------------------- */
.who { padding-top: var(--chapter); }
.who-figure { position: relative; height: 40rem; margin-top: 2.8rem; }
.who-figure img { object-position: 50% 40%; }

.roles { margin-top: 2.8rem; border-top: 1px solid var(--hair-soft); }
.role {
  display: grid; grid-template-columns: 2rem 1fr; gap: .8rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--hair-soft);
}
.role .n { color: var(--accent); padding-top: .25rem; }
.role .t-copy { margin-top: .35rem; }
.who-close { margin-top: 3rem; }

/* 04 Leadership ----------------------------------------------------------- */
.leadership { padding-top: var(--chapter); }
.lead-figure { position: relative; height: 34rem; margin-top: 2.6rem; }
.lead-figure img { object-position: 50% 42%; }

.lead-cards { margin-top: 2.6rem; display: flex; flex-direction: column; gap: 1rem; }
.lead-card {
  background: var(--surface); border: 1px solid var(--hair-soft);
  padding: 1.6rem 1.4rem 1.7rem;
}
.lead-card .t-heading { margin-top: .9rem; }
.lead-card .org { margin-top: .5rem; font-weight: 400; }
.lead-card ul { margin-top: 1.1rem; }
.lead-card li { position: relative; padding-left: 1rem; }
.lead-card li + li { margin-top: .55rem; }
.lead-card li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: .4rem; height: 1px; background: var(--accent);
}

/* 05 Ventures ------------------------------------------------------------- */
.ventures { padding-top: var(--chapter); }
.vent-figure { position: relative; height: 40rem; margin-top: 2.6rem; }
.vent-figure img { object-position: 50% 60%; }
.vent-list { margin-top: 2.6rem; border-top: 1px solid var(--hair-soft); }
.vent { padding: 1.8rem 0 1.9rem; border-bottom: 1px solid var(--hair-soft); }
.vent .top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.vent .top .t-sub { white-space: nowrap; }
.vent .t-copy { margin-top: .9rem; }
.vent .stage { margin-top: 1.1rem; font-weight: 400; }

/* 06 Numbers -------------------------------------------------------------- */
.numbers { padding-top: var(--chapter); }
.num-grid {
  margin-top: 2.6rem;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hair-soft); border-left: 1px solid var(--hair-soft);
}
.num-cell {
  padding: 1.5rem 1rem 1.6rem;
  border-right: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft);
}
.num-cell .v { color: var(--ink); }
.num-cell .v .suf { color: var(--accent); }
.num-cell .k { margin-top: .6rem; }

/* 07 Journey -------------------------------------------------------------- */
.journey .head { padding-inline: var(--gutter); }
/* The stage is what pins: it locks only once all of it is on screen. */
.jrny-stage { padding-block: 2.4rem 1.6rem; background: var(--sec); }

.jrny-viewport { overflow: hidden; }
.jrny-track {
  display: flex; align-items: stretch; gap: 1rem;
  padding-inline: var(--gutter);
  width: max-content; will-change: transform;
}
.jrny-card {
  position: relative; width: 19rem;
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--surface); border: 1px solid var(--hair-soft);
  display: flex; flex-direction: column;
}
.jrny-card::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease);
}
.jrny-card.on::before { transform: scaleX(1); }
.jrny-card .n     { color: var(--faint); }
.jrny-card .yrs   { margin-top: 1.5rem; }
.jrny-card h3     { margin-top: .6rem; }
.jrny-card .role-line { margin-top: .6rem; font-weight: 400; }
.jrny-card .note  { margin-top: 1rem; flex: 1; }
.jrny-card .place {
  margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--hair-soft);
  color: var(--faint); font-weight: 400;
}

.jrny-rail { margin: 2rem var(--gutter) 0; height: 1px; background: var(--hair-soft); position: relative; }
.jrny-rail i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.jrny-legend { margin: .8rem var(--gutter) 0; display: flex; justify-content: space-between; }

/* 08 Expertise ------------------------------------------------------------ */
.expertise { padding-top: var(--chapter); }
.exp-intro { padding-bottom: 1rem; }
.exp-panel {
  padding-block: 2.8rem;
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid var(--hair-soft);
}
.exp-panel .t-phrase { margin-top: 1rem; }
.exp-panel .line {
  display: block; margin-top: 1.4rem; width: 3.5rem; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
}
.exp-panel .t-copy { margin-top: 1.3rem; max-width: 20rem; }

/* 09 Education ------------------------------------------------------------ */
.education { padding-top: var(--chapter); }
.edu-list { margin-top: 2.8rem; position: relative; padding-left: 1.6rem; }
.edu-spine { position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 1px; background: var(--hair-soft); }
.edu-spine i { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.edu-item { position: relative; padding-bottom: 2.1rem; }
.edu-item:last-child { padding-bottom: 0; }
.edu-item::before {
  content: ''; position: absolute; left: -1.6rem; top: .4rem;
  width: .32rem; height: .32rem; margin-left: -.16rem;
  border-radius: 50%; background: var(--accent);
}
.edu-item .t-heading { margin-top: .5rem; }
.edu-item .t-copy { margin-top: .3rem; }

/* 10 Vision --------------------------------------------------------------- */
.vision { padding-top: 0; }
.vision-figure { position: relative; height: 38rem; margin-inline: 0; }
.vision-figure img { object-position: 50% 18%; }
.vision-body { margin-top: -4rem; position: relative; z-index: 2; }
.vision-lede { margin-top: 2.6rem; }
.vision-triad { margin-top: 2.8rem; border-top: 1px solid var(--hair-soft); }
.vision-triad .t {
  display: grid; grid-template-columns: 2rem 1fr; gap: .8rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--hair-soft);
}
.vision-triad .n { padding-top: .25rem; }
.vision-triad .t-copy { margin-top: .35rem; }
.vision-close { margin-top: 2.6rem; }

/* 11 Connect -------------------------------------------------------------- */
.contact { padding-top: var(--chapter); }
.contact-lede { margin-top: 2.4rem; }
.contact-lines { margin-top: 2.6rem; border-top: 1px solid var(--hair-soft); }
.contact-lines a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--hair-soft);
  transition: color .4s var(--ease);
}
.contact-lines .v { color: var(--ink); transition: color .4s var(--ease); text-align: right; }
.contact-lines a:hover .v { color: var(--accent); }


/* 09  PROFILE CARD — the footer, in LinkedIn's arrangement:
   banner, overlapping round portrait, name, headline, location, orgs, actions.
   ========================================================================== */
.profile {
  margin: var(--chapter) var(--gutter) 0;
  background: var(--surface);
  border: 1px solid var(--hair-soft);
}
.profile-banner { position: relative; aspect-ratio: 1308 / 864; overflow: hidden; }
.profile-body { position: relative; padding: 0 1.4rem 1.6rem; }
.profile-avatar {
  width: 7.5rem; height: 7.5rem; margin-top: -3.75rem;
  border-radius: 50%; overflow: hidden;
  border: .3rem solid var(--surface);
  background: var(--bg);
  position: relative; z-index: 2;
}
/* The circle frames the face by zooming the display — the file is untouched. */
.profile-avatar img { transform: scale(2.1); transform-origin: 47% 30%; }

.profile-name { margin-top: 1rem; }
.profile-headline { margin-top: .6rem; color: var(--ink-soft); }
.profile-meta { margin-top: .9rem; font-weight: 400; }

.profile-orgs { margin-top: 1.3rem; }
.profile-orgs li { display: flex; align-items: center; gap: .7rem; color: var(--ink-soft); }
.profile-orgs li + li { margin-top: .6rem; }
.profile-orgs .dot {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  background: var(--sec); border: 1px solid var(--hair);
  font-family: var(--f-display); font-size: var(--t-general); letter-spacing: .015em;
  color: var(--sage);
}

.profile-actions { margin-top: 1.6rem; display: flex; gap: .7rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.3rem; border-radius: 999px;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-solid:hover { background: var(--ink); }
.btn-line { border: 1px solid var(--hair); color: var(--ink); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); }

.colophon {
  display: flex; justify-content: space-between;
  padding: 1.1rem 1.4rem 1.3rem;
  border-top: 1px solid var(--hair-soft);
  color: var(--faint); font-weight: 400;
}


/* 10  TONE BANDS
   --------------------------------------------------------------------------
   Sections alternate between shades of grey and light grey. A band only
   redefines tokens — every component already draws with them, so type,
   hairlines, cards and accents follow. The colour runs the full width of the
   window (so desktop margins match the band) without changing the canvas.
   Light bands use deeper gold, sage and stone to keep their contrast.
   ========================================================================== */
.band {
  background: var(--sec);
  box-shadow: 0 0 0 100vmax var(--sec);
  clip-path: inset(0 -100vmax);
  padding-top: var(--chapter);
  padding-bottom: var(--chapter);
}
.band.vision   { padding-top: 0; }
.band.expertise { padding-bottom: 4rem; }
.foot-band     { padding-top: 5rem; padding-bottom: 3rem; }
.foot-band .profile { margin-top: 0; }

.tone-dark     { --sec: #0d0d0d; --surface: #161616; }
.tone-graphite { --sec: #1a1a1a; --surface: #232323; --hair-soft: rgba(255,255,255,.09); }
.tone-slate    { --sec: #2a2a2a; --surface: #333333; --hair-soft: rgba(255,255,255,.1);
                 --hair: rgba(255,255,255,.16); --muted: #b3b3b3; }

.tone-light, .tone-mist {
  --ink:       #161616;
  --ink-soft:  rgba(22, 22, 22, .84);
  --muted:     #55524e;
  --faint:     rgba(22, 22, 22, .42);
  --hair:      rgba(0, 0, 0, .18);
  --hair-soft: rgba(0, 0, 0, .1);
  --accent:    #8a6424;     /* gold, deepened for light grounds  */
  --sage:      #5f6f62;     /* page title, first line            */
  --stone:     #8b8580;     /* page title, second line           */
  --on-accent: #f4f2ee;
  color: var(--ink);
}
.tone-light { --sec: #ebe9e5; --surface: #f6f5f2; }
.tone-mist  { --sec: #d8d5d0; --surface: #e8e6e2; }

/* Rails and cursor answer to the band currently on screen */
body[data-tone="light"] .rail a,
body[data-tone="mist"]  .rail a        { color: rgba(0,0,0,.34); }
body[data-tone="light"] .rail a.on,
body[data-tone="mist"]  .rail a.on,
body[data-tone="light"] .rail a:hover,
body[data-tone="mist"]  .rail a:hover  { color: #161616; }
body[data-tone="light"] .rail a .n,
body[data-tone="mist"]  .rail a .n     { color: #8a6424; }
body[data-tone="light"] .rail a.home-link,
body[data-tone="mist"]  .rail a.home-link,
body[data-tone="light"] .rail a.home-link .n,
body[data-tone="mist"]  .rail a.home-link .n { color: #5f6f62; }
body[data-tone="light"] .rail-r .cnt,
body[data-tone="mist"]  .rail-r .cnt   { color: #55524e; }
body[data-tone="light"] .rail-r .cnt b,
body[data-tone="mist"]  .rail-r .cnt b { color: #161616; }
.rail, .rail a, .rail-r .cnt { transition: color .5s var(--ease); }
/* On light grounds a photograph needs only the caption's bottom shade. */
.tone-light .scrim::after,
.tone-mist  .scrim::after {
  background: linear-gradient(to bottom, rgba(9,9,9,0) 62%, rgba(9,9,9,.78) 100%);
}
.cursor { mix-blend-mode: difference; }


/* 11  REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal-img img { transform: none; }
  .eyebrow .rule, .exp-panel .line { transform: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ==========================================================================
   PAGE EXCEPTION — the length of this particular name
   --------------------------------------------------------------------------
   Everything above is the shared profile design system, byte-identical to the
   Avishek build. This is the one place it had to give.

   The page title's second line carries --indent: 5.2rem, the 119/619 offset
   virevo-type-scale.md measured. "Biswas" is six characters and clears it.
   "Dasgupta" is eight, and at 89-unit Bebas it overran the measure and broke
   onto a third line reading "DASGUPT / A" at every width from 360 up.

   The indent is what gives, not the size: --t-title is a type-scale value and
   the right-shifted second line is the title's signature, so the fix keeps the
   gesture and trims it to what the name allows. 4.4rem was the largest value
   that held at 360, 390, 768 and 1512; 4.2rem is that with a little margin for
   font metric variation. Scoped to the hero, so every section title below keeps
   the full indent.
   ========================================================================== */
.hero-name .ln-2 { padding-left: 4.2rem; white-space: nowrap; }