/* ==========================================================================
   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; }
}