/* ============================================================
   PRANAY SARKAR — Portfolio V3.0
   Editorial · Spatial · WebGL-forward
   Brand system: dark + lime (#C8F54F) · 4 fonts —
   Bebas Neue (display) · Parkinsans (body) · Geist Mono (labels) · EB Garamond (accents).

   COLOR — 60 / 30 / 10
   60% base (--bg + surfaces) · 30% ink/muted · 10% lime accent
   ============================================================ */

/* uploaded signature font (roman master); true italic comes from the
   matching EB Garamond italic webfont loaded in index.html */
@font-face {
  font-family: "EB Garamond";
  src: url("../assets/fonts/EBGaramond.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 60% — base */
  --bg: #0a0a0b;
  --bg-2: #100f11;
  --bg-3: #17161a;
  /* 30% — content */
  --ink: #ecebe6;
  --ink-2: #bababa;   /* body / reading copy (matches hero__desc, wcard__desc, about__body) */
  --muted: #8a8a84;   /* captions, labels, meta */
  --line: rgba(236, 235, 230, 0.09);
  --line-2: rgba(236, 235, 230, 0.16);
  /* 10% — accent (lime, Figma #C8F54F) */
  --accent: #c8f54f;
  --accent-2: #d0ff4b;
  --accent-ink: #0e1400;

  /* Figma hero surfaces */
  --hero-bg: #0b0a0c;   /* hero base */
  --panel: #0f0a10;     /* nav + marquee bar */
  --card-line: #151217; /* card border */

  /* 4-font system: Bebas (display) · Parkinsans (body) · Geist Mono (labels) · EB Garamond (accents) */
  --font-bebas: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-parkin: "Parkinsans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-sign: "EB Garamond", Georgia, serif;
  /* legacy aliases (case.css etc.) */
  --font-display: var(--font-bebas);
  --font-body: var(--font-parkin);
  /* lavender accent (hero stat, Figma #BEA0FD) */
  --lav: #bea0fd;

  --pad: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1680px;
  --radius: clamp(14px, 1.6vw, 22px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

/* Lenis smooth-scroll plumbing */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* keyboard focus — branded, high-contrast ring (2.4.7) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.tsl__card :focus-visible, .tsl__btn:focus-visible { outline-color: var(--accent); }
.tsl__card--yellow :focus-visible, .tsl__card--mint :focus-visible, .tsl__card--lav :focus-visible { outline-color: #0f0a10; }

/* visually hidden, screen-reader available */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* JS-driven hidden states only when JS is active */
.js [data-reveal] { opacity: 0; }

/* ---------- Fixed WebGL canvas ---------- */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
.page { position: relative; z-index: 1; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

/* ---------- Custom cursor ---------- */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; position: fixed; inset: 0; z-index: 9500;
    pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  }
  .cursor--visible { opacity: 1; }
  .cursor__dot, .cursor__ring {
    position: absolute; top: 0; left: 0; border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor__dot { width: 6px; height: 6px; background: var(--accent); }
  .cursor__ring {
    width: 40px; height: 40px;
    border: 1px solid var(--line-2);
    transition: width .35s var(--ease), height .35s var(--ease),
                background-color .35s ease, border-color .35s ease;
  }
  .cursor--hover .cursor__ring {
    width: 72px; height: 72px;
    background: rgba(208,255,75,.1); border-color: var(--accent);
  }
  .cursor--drag .cursor__ring {
    width: 90px; height: 90px;
    background: rgba(12,11,14,.92);   /* opaque so the label stays readable over light cards */
    border-color: var(--accent);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .cursor__label {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
    opacity: 0; transition: opacity .3s ease; white-space: nowrap;
  }
  .cursor--drag .cursor__label { opacity: 1; }
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
html:not(.js) .preloader { display: none; }
.preloader__greeting {
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.2rem);
  font-family: var(--font-bebas); font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 4.5rem); line-height: 1;
  letter-spacing: .02em;
}
.preloader__bullet {
  width: clamp(10px, 1.2vw, 14px); height: clamp(10px, 1.2vw, 14px);
  border-radius: 50%; background: var(--accent); flex-shrink: 0;
}
.preloader__bar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--line);
}
.preloader__bar span { display: block; width: 0%; height: 100%; background: var(--accent); }

/* ---------- Navigation (matches V2.0) ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.15rem, 3vh, 1.9rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--hero-bg);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.45s ease;
}
.nav--scrolled {
  background: rgba(11, 10, 12, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.nav--hidden { transform: translateY(-110%); }

.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img {
  height: clamp(32px, 3vw, 40px);
  width: auto; display: block;
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}
.nav__logo:hover img { opacity: 0.85; transform: rotate(-6deg); }

/* Resume — tertiary (text) button */
.nav__resume {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem); line-height: 1.33;
  text-transform: uppercase; letter-spacing: 0.02em; color: #fff;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
  padding: 8px 10px; transition: color 0.3s ease;
}
.nav__resume:hover { color: var(--accent); }

/* ---------- Shared layout ---------- */
.shell { max-width: var(--maxw); margin: 0 auto; }
section { padding: clamp(5rem, 13vh, 11rem) var(--pad); position: relative; }

/* vertical side label */
.vlabel {
  position: absolute; left: var(--pad); top: clamp(5rem, 13vh, 11rem);
  writing-mode: vertical-rl;
  font-family: var(--font-mono); font-weight: 600;
  font-size: .7rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--muted);
}
.vlabel i { font-style: normal; color: var(--accent); }

/* section heading kit */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 7vh, 5rem); }
.shead__title {
  font-family: var(--font-bebas); font-weight: 400;
  font-size: clamp(2.6rem, 8.5vw, 7rem); line-height: .85;
  letter-spacing: .02em; text-transform: uppercase;
  font-feature-settings: "salt" 1;
}
.shead__title .ln { display: block; overflow: hidden; }
.shead__title .ln > span { display: inline-block; }
.shead__meta {
  font-family: var(--font-mono); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-size: .82rem;
  max-width: 26ch; text-align: right;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
}

/* reveal helpers */
.reveal-line { overflow: hidden; display: block; }
.reveal-line > span { display: inline-block; will-change: transform; }
.js .reveal-line > span { transform: translateY(110%); }

/* ---------- Hero (Figma: centered overlap block + lime glows) ---------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: clamp(7rem, 15vh, 9rem) var(--pad) clamp(4.5rem, 9vh, 6.5rem);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hero-bg);
}

/* lime glow ellipses (blurred, pooling at the top) */
/* Figma: 1418.92×1101.3 ellipses on a 1440×826 frame —
   A @ (-350, -391) rot -15° · B @ (104, -198) rot 165° */
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 98.5vw; aspect-ratio: 1419 / 1101; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(200,245,79,0) 44.71%);
  opacity: .5; filter: blur(50px);
}
.hero__glow--a { left: -24.3%; top: -47.3%; transform: rotate(-15deg); }
/* B's bright end overshoots the frame bottom by ~9% in Figma (903 on an 826 frame) —
   anchor to bottom so the overshoot crops identically at any hero height */
.hero__glow--b { left: 7.2%; top: auto; bottom: -9.4%; transform: rotate(165deg); }

/* composed block: text column overlapping the portrait card */
.hero__stage {
  display: flex; align-items: stretch; justify-content: center; width: 100%;
  --card-h: clamp(500px, 64vh, 624px);
}

/* left text column — rides in front of the card */
.hero__col {
  position: relative; z-index: 2; flex: none;
  width: clamp(320px, 30vw, 404px); height: var(--card-h);
  margin-right: clamp(-124px, -8.5vw, -80px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(.4rem, 1.4vh, 1.2rem) 0;
}
.hero__lead { display: flex; flex-direction: column; }
.hero__hi {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(.82rem, 1.1vw, 1.125rem); line-height: 1.33;
  letter-spacing: .04em; text-transform: uppercase; color: #bcbcbc;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
  margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
}
.hero__title {
  font-family: var(--font-bebas); font-weight: 400; color: #fff;
  font-size: clamp(5rem, 9.5vw, 8.5rem); line-height: .8;
  letter-spacing: .002em; margin: 0; font-feature-settings: "salt" 1;
  white-space: nowrap;
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: inline-block; will-change: transform; }

.hero__open {
  position: relative; margin-top: clamp(1.1rem, 1.6vw, 1.5rem); padding-left: 1.6rem;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(.8rem, 1vw, 1rem); line-height: 1.33;
  letter-spacing: .02em; text-transform: uppercase; color: #bcbcbc;
}
.hero__open::before {
  content:""; position:absolute; left:0; top:50%; transform: translateY(-50%);
  width: 2px; height: 50px; background: var(--accent);
}

/* KPI — pinned to the bottom of the column */
.hero__kpi strong {
  display: block; font-family: var(--font-bebas); font-weight: 400;
  font-size: clamp(4.5rem, 6.7vw, 6rem); line-height: .8; color: var(--lav);
  font-feature-settings: "salt" 1;
}
.hero__kpi small {
  display: block; margin-top: .9rem; font-family: var(--font-parkin); font-weight: 500;
  color: #797979; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.33;
}

/* portrait card */
.hero__card {
  position: relative; z-index: 1; flex: none;
  height: var(--card-h); width: calc(var(--card-h) * 443 / 624);
  background: #000; border: 6px solid var(--card-line);
  border-radius: 32px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
}
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.hero__cardgrad {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 20%, #000 84%);
}
.hero__cardbody {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.3rem, 1.7vw, 1.5rem) clamp(1.3rem, 1.7vw, 1.5rem) clamp(1.6rem, 2.6vw, 2.3rem);
}
.hero__desc {
  font-family: var(--font-parkin); font-weight: 400; color: #bababa;
  font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.33; max-width: 26ch;
}
.hero__cardfoot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.3rem); }
.hero__btn {
  flex-shrink: 0; white-space: nowrap;
  font-family: var(--font-parkin); font-weight: 600;
  font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.33;
  color: #0f0a10; background: #fff; border-radius: 12px;
  padding: 16px 32px; transition: transform .3s var(--ease), background-color .3s ease;
}
.hero__btn:hover { background: var(--accent); transform: translateY(-2px); }
.hero__sign {
  font-family: var(--font-sign); font-style: italic; font-weight: 500;
  color: #fff; font-size: clamp(2rem, 2.6vw, 2.375rem); line-height: .75;
  letter-spacing: -.04em; text-align: right; white-space: nowrap;
  font-feature-settings: "salt" 1;
}

/* scroll-down indicator */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1.2rem, 3.5vh, 2.2rem); transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(.82rem, 1vw, 1.125rem); letter-spacing: .06em; text-transform: uppercase; color: #bcbcbc;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
}
.hero__chev { width: 1.5rem; height: 1.5rem; color: var(--accent); animation: chev 1.7s var(--ease-io) infinite; }
@keyframes chev { 0%,100%{ transform: translateY(0); opacity:.7; } 50%{ transform: translateY(5px); opacity:1; } }

/* stack on tablet / mobile */
@media (max-width: 900px) {
  .hero__stage { flex-direction: column; align-items: center; gap: clamp(2rem, 5vh, 3rem); }
  .hero__col {
    width: 100%; max-width: 460px; height: auto; margin-right: 0;
    justify-content: flex-start; gap: clamp(2rem, 5vh, 2.6rem); padding: 0;
  }
  .hero__title { font-size: clamp(4.4rem, 18.5vw, 7.6rem); white-space: normal; }
  .hero__card { width: 100%; max-width: 443px; height: auto; aspect-ratio: 443 / 624; }
}

/* ---------- Marquee (Figma: Bebas 48 @50% · lime ✦ @75% on panel) ---------- */
.marquee {
  padding: clamp(1.4rem, 2.4vw, 2.2rem) 0; overflow: hidden;
  background: var(--hero-bg);
  position: relative; z-index: 1;
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__track span {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-bebas); font-weight: 400; color: rgba(255,255,255,.5);
  font-size: clamp(1.8rem, 3.4vw, 3rem); text-transform: uppercase; letter-spacing: .02em;
}
.marquee__track i {
  font-style: normal; color: rgba(200,245,79,.75);
  margin: 0 clamp(.9rem, 1.7vw, 1.5rem); font-size: .5em; transform: translateY(-.04em);
}

/* ---------- Work ---------- */
.work__grid { display: flex; flex-direction: column; gap: clamp(4rem, 11vh, 9rem); }
.project { position: relative; }
.project__link { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.project:nth-child(even) .project__media { order: 2; }
.project--feature .project__link { grid-template-columns: 1fr; }

.project__media {
  position: relative; border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 4/3; background: var(--bg-3);
  will-change: transform;
}
.project--feature .project__media { aspect-ratio: 21/9; }
.project__img {
  position: absolute; inset: -8% ; width: 116%; height: 116%;
  object-fit: cover; will-change: transform;
}
.project__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(208,255,75,.08));
  opacity: 0; transition: opacity .5s ease;
}
.project__link:hover .project__media::after { opacity: 1; }

.project__info { display: flex; flex-direction: column; gap: 1.25rem; }
.project__idx { font-family: var(--font-display); font-size: .9rem; color: var(--accent); font-weight: 600; }
.project__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 4.5rem); line-height: .98; letter-spacing: -0.02em;
  display: inline-block; position: relative; text-transform: uppercase;
}
.project__title::after {
  content: ""; position: absolute; left: 0; bottom: -.05em; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.project__link:hover .project__title::after { transform: scaleX(1); transform-origin: left; }
.project__desc { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 36ch; }
.project__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.project__tags li { font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .4em .9em; }
.project__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.chip { font-size: clamp(.65rem,1vw,.78rem); font-weight: 700; padding: .5em .9em; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.chip--ink { background: var(--ink); color: var(--bg); }
.project__cta { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; }
.project__cta i { font-style: normal; transition: transform .4s var(--ease); }
.project__link:hover .project__cta i { transform: translate(4px,-4px); }

/* ---------- Selected Works (Figma: static 2-up project grid) ---------- */
.works {
  background: var(--hero-bg);
  padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.25rem, 4vw, 2rem) clamp(3rem, 6vw, 3.75rem);
}
.works__inner { max-width: 1376px; margin: 0 auto; }
.works__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.75rem);
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.5rem); letter-spacing: .04em; text-transform: uppercase;
  color: #bcbcbc; font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
}
.works__count { font-variant-numeric: tabular-nums; white-space: nowrap; }

.works__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3.25rem) 2.5rem;
}
.wcard { display: flex; flex-direction: column; }
.wcard__media {
  display: block; position: relative; overflow: hidden;
  border-radius: 14px; aspect-ratio: 668 / 400; background: var(--bg-3);
  margin-bottom: clamp(.9rem, 1.2vw, 1rem);
}
.wcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.wcard__media:hover img { transform: scale(1.045); }

.wcard__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(.85rem, 1.05vw, 1.125rem); letter-spacing: .04em; text-transform: uppercase;
  color: #bcbcbc; font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
  margin-bottom: clamp(.9rem, 1.2vw, 1rem);
}
.wcard__status { color: var(--lav); }

.wcard__title {
  font-family: var(--font-bebas); font-weight: 400; color: #fff;
  font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; font-feature-settings: "salt" 1;
  margin-bottom: clamp(.9rem, 1.2vw, 1rem);
}
.wcard__desc {
  font-family: var(--font-parkin); font-weight: 400; color: #bababa;
  font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.33; max-width: 54ch;
  margin-bottom: clamp(1.6rem, 2.5vw, 2.5rem);
}
.wcard__tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
/* same chip style as the About "Toolbox" tags */
.wtag {
  font-family: var(--font-mono); font-weight: 600; font-size: .8rem; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .02em;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
  padding: .6em 1.2em; border-radius: 8px;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  transition: border-color .3s ease, color .3s ease;
}
.wcard:hover .wtag { color: var(--ink); }

@media (max-width: 860px) {
  .works__grid { grid-template-columns: 1fr; }
}

/* ---------- About ---------- */
.about { background: var(--hero-bg); }
.about__grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.about__statement {
  font-family: var(--font-parkin); font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.6rem); line-height: 1.33;
}
.about__statement .dcap {
  float: left; font-size: 3.2em; line-height: .72; padding: .06em .12em 0 0;
  color: var(--accent); font-weight: 600;
}
.about__body { margin-top: clamp(1.5rem, 3vh, 2.2rem); display: flex; flex-direction: column; gap: 1.1em; }
.about__body p {
  font-family: var(--font-parkin); font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5;
  color: #bababa; max-width: 58ch;
}
.about__body .about__key { color: var(--ink); font-weight: 500; }
.js .about__statement .w, .js .about__body .w { opacity: .16; }
.about__portrait {
  position: relative; border-radius: clamp(14px,1.6vw,22px); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 4/5;
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.05); transition: filter .6s ease, transform .8s var(--ease); }
.about__portrait:hover img { filter: grayscale(0); transform: scale(1.04); }
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); margin-top: clamp(3rem,8vh,5rem); }
.about__label {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem; font-weight: 600;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
}
.about__chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.about__chips li { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; padding: .6em 1.2em; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line); transition: border-color .3s ease, color .3s ease; }
.about__chips li:hover { border-color: var(--accent); color: var(--accent); }
.about__chips--ghost li { background: transparent; color: var(--muted); }

/* stats */
.about__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: clamp(14px,1.6vw,22px); overflow: hidden; margin-top: clamp(3rem,8vh,5rem); }
.stat { background: var(--bg-2); padding: clamp(1.4rem,3vw,2.4rem); }
.stat__num { font-family: var(--font-bebas); font-weight: 400; font-size: clamp(2.6rem,5.5vw,4.5rem); line-height: .9; color: var(--ink); font-variant-numeric: tabular-nums; font-feature-settings: "salt" 1; display: block; }
.stat__num i { color: var(--accent); font-style: normal; }
.stat p { color: var(--muted); font-size: .88rem; margin-top: .7rem; }

/* ---------- Experience ---------- */
.experience { background: var(--hero-bg); }
.xp { border-top: 1px solid var(--line); }
.xp__row {
  display: grid; grid-template-columns: .7fr 3.1fr; gap: clamp(1rem,3vw,3rem);
  align-items: baseline; padding: clamp(1.6rem,3.5vw,2.8rem) 0; border-bottom: 1px solid var(--line);
  position: relative; transition: padding-left .4s var(--ease);
}
.xp__row::before { content:""; position:absolute; left:0; top:0; height:100%; width:0; background: rgba(208,255,75,.05); transition: width .4s var(--ease); z-index:-1; }
.xp__row:hover { padding-left: 1.5rem; }
.xp__row:hover::before { width: 100%; }
.xp__period { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 600; font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1; }
.xp__role h3 { font-family: var(--font-bebas); font-weight: 400; font-size: clamp(1.7rem,3.2vw,2.5rem); line-height: 1; text-transform: uppercase; letter-spacing: .02em; font-feature-settings: "salt" 1; }
.xp__role p { color: var(--muted); font-size: .92rem; margin-top: .25rem; }

/* ---------- Testimonials (pastel infinite drag carousel) ---------- */
.tmt { background: var(--hero-bg); }
.tsl__controls { display: flex; gap: .75rem; }
.tsl__btn {
  position: relative; width: 56px; height: 56px; border-radius: 14px;
  border: 1px solid var(--line-2); color: var(--ink); overflow: hidden;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.tsl__btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* masked slide: the arrow exits one side while its twin slides in from the other */
.tsl__arr { position: absolute; inset: 0; display: block; }
.tsl__arr i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-style: normal; font-size: 1.25rem;
  transition: transform .45s var(--ease);
}
.tsl__btn[data-dir="1"] .tsl__arr i + i { transform: translateX(-130%); }
.tsl__btn[data-dir="1"]:hover .tsl__arr i:first-child { transform: translateX(130%); }
.tsl__btn[data-dir="1"]:hover .tsl__arr i + i { transform: translateX(0); }
.tsl__btn[data-dir="-1"] .tsl__arr i + i { transform: translateX(130%); }
.tsl__btn[data-dir="-1"]:hover .tsl__arr i:first-child { transform: translateX(-130%); }
.tsl__btn[data-dir="-1"]:hover .tsl__arr i + i { transform: translateX(0); }

.tsl__viewport { overflow: hidden; cursor: grab; touch-action: pan-y; }
.tsl__viewport.is-dragging { cursor: grabbing; }
.tsl__viewport.is-dragging .tsl__card { pointer-events: none; } /* no hover-opens mid-drag */
.tsl__track { --tsl-gap: clamp(1rem, 2vw, 1.6rem); display: flex; align-items: flex-start; gap: var(--tsl-gap); will-change: transform; }

.tsl__card {
  flex: 0 0 calc((100% - var(--tsl-gap)) / 2);   /* exactly 2 cards visible */
  border-radius: 24px; padding: clamp(1.4rem, 2.4vw, 2rem);
  color: #0f0a10;
  -webkit-user-select: none; user-select: none;
}
/* phones: one card with a peek of the next */
@media (max-width: 640px) { .tsl__card { flex-basis: 86%; } }
.tsl__card--yellow { background: #f2e87e; }
.tsl__card--mint   { background: #cee4d0; }
.tsl__card--lav    { background: #c7abf6; }
.tsl__card img { -webkit-user-drag: none; }

.tsl__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2.6rem, 7vh, 5rem); }
.tsl__avatar {
  position: relative; overflow: hidden;
  width: clamp(76px, 8vw, 96px); aspect-ratio: 1; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.6);
  font-family: var(--font-bebas); font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  color: #0f0a10; font-feature-settings: "salt" 1;
}
/* photo sits over the initials (initials remain as fallback) */
.tsl__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tsl__brand {
  font-family: var(--font-mono); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; color: rgba(15,10,16,.8);
  font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
}

.tsl__idrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tsl__id strong {
  display: block; font-family: var(--font-bebas); font-weight: 400;
  font-size: 48px; line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; font-feature-settings: "salt" 1;
}
.tsl__id span {
  display: block; margin-top: .35rem; font-family: var(--font-mono); font-weight: 600;
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(15,10,16,.74); /* .62 measured 4.26:1 on lavender — below AA */
  font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1;
}
.tsl__toggle {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; /* ≥44px touch target */
  background: #17131a; display: grid; place-items: center;
  transition: transform .3s var(--ease);
}
.tsl__toggle:hover { transform: scale(1.06); }
/* + built from two bars; rotates into × when open */
.tsl__icon { position: relative; width: 16px; height: 16px; display: block; transition: transform .45s var(--ease); }
.tsl__icon::before, .tsl__icon::after { content: ""; position: absolute; background: #fff; border-radius: 1px; }
.tsl__icon::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.tsl__icon::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.tsl__card.is-open .tsl__icon { transform: rotate(135deg); }

.tsl__quote {
  max-height: 0; overflow: hidden; margin: 0;
  font-family: var(--font-parkin); font-weight: 400;
  font-size: 16px; line-height: 1.5; color: #131009;
  transition: max-height .6s var(--ease), margin-top .6s var(--ease);
}
.tsl__card.is-open .tsl__quote { max-height: 30rem; margin-top: clamp(1.3rem, 2.5vh, 1.9rem); }
/* line-by-line clip-mask reveal (lines built by testimonials.js) */
.tsl__quote .ql { display: block; overflow: hidden; }
.tsl__quote .ql__in { display: inline-block; transform: translateY(115%); transition: transform .6s var(--ease); will-change: transform; }
.tsl__card.is-open .ql__in { transform: translateY(0); }
.tsl__card.is-open .ql:nth-child(2) .ql__in { transition-delay: .07s; }
.tsl__card.is-open .ql:nth-child(3) .ql__in { transition-delay: .14s; }
.tsl__card.is-open .ql:nth-child(4) .ql__in { transition-delay: .21s; }
.tsl__card.is-open .ql:nth-child(5) .ql__in { transition-delay: .28s; }
.tsl__card.is-open .ql:nth-child(6) .ql__in { transition-delay: .35s; }

/* ---------- Contact ---------- */
.contact { background: var(--hero-bg); text-align: center; padding-top: clamp(6rem,16vh,12rem); padding-bottom: clamp(6rem,16vh,12rem); overflow: hidden; }
.contact__eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: clamp(.85rem,1.4vw,1rem); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(1.5rem,4vh,2.5rem); font-feature-settings: "ss01" 1, "ss02" 1, "ss04" 1, "ss08" 1; }
.contact__title a { display: inline-block; }
.contact__line { display: block; font-family: var(--font-bebas); font-weight: 400; font-size: clamp(3.4rem,14vw,13rem); line-height: .85; text-transform: uppercase; letter-spacing: .01em; font-feature-settings: "salt" 1; }
.contact__line--out { color: transparent; -webkit-text-stroke: 1.5px var(--accent); transition: color .4s ease; }
.contact__title a:hover .contact__line--out { color: var(--accent); }
.contact__arrow { display: inline-block; width: .62em; height: .62em; fill: none; stroke: var(--accent); stroke-width: 1.5; vertical-align: .02em; overflow: visible; transition: fill .4s ease; }
.contact__title a:hover .contact__arrow { fill: var(--accent); }
.contact__meta { margin-top: clamp(2.5rem,7vh,4.5rem); display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.contact__email { font-family: var(--font-mono); font-weight: 600; font-size: clamp(.95rem,1.8vw,1.2rem); border-bottom: 1px solid var(--line); padding-bottom: .2rem; transition: color .3s ease, border-color .3s ease; }
.contact__email:hover { color: var(--accent); border-color: var(--accent); }
.contact__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem,3vw,2.5rem); color: var(--muted); font-family: var(--font-mono); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.contact__socials a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.5rem var(--pad); border-top: 1px solid var(--line); font-family: var(--font-mono); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); position: relative; z-index: 1; }
.footer a:hover { color: var(--accent); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal-line > span, .js .hero__title .ln > span { transform: none; }
  .js [data-reveal] { opacity: 1; }
  .js .about__statement .w, .js .about__body .w { opacity: 1; }
  #bg-canvas { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .project__link, .about__grid { grid-template-columns: 1fr; gap: clamp(1.25rem,4vw,2.5rem); }
  .project:nth-child(even) .project__media { order: 0; }
  .about__stats { grid-template-columns: repeat(2,1fr); }
  .tmt__grid { grid-template-columns: 1fr; }
  .xp__row { grid-template-columns: 1fr; gap: .5rem; }
  /* hero: overlap layout holds down to 900px (see hero @media below) */
}
@media (max-width: 720px) {
  .vlabel { display: none; }
  .about__cols { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .about__stats { grid-template-columns: 1fr 1fr; }
  .tsl__id strong { font-size: 38px; } /* 48px wraps names on narrow cards */
}
@media (max-width: 400px) {
  /* button + signature stop fitting on one row inside the card's clipped bounds */
  .hero__btn { padding: 14px 22px; }
  .hero__sign { font-size: clamp(1.6rem, 7vw, 2rem); }
  .hero__cardbody { padding-inline: 1.1rem; }
}