/* ============================================================
   MD. MEHENUF HOSSAIN BHUIYAN — PORTFOLIO
   Design system: "Calibration"

   Motion follows Emil Kowalski's animation philosophy:
   transform/opacity only, custom curves, UI under 300ms,
   hover gated behind fine pointers, reduced-motion respected.
   ============================================================ */

/* ---------- MOTION TOKENS (single source of truth) ---------- */
:root{
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);
  /* A slight overshoot — reserved for rare, first-time-seen moments
     (timeline nodes activating), never for frequent UI. */
  --ease-pop:      cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-press:     160ms;   /* button press feedback */
  --dur-hover:     180ms;   /* hover / colour */
  --dur-ui:        220ms;   /* small state changes, menus */
  --dur-modal:     250ms;   /* lightbox */
  --dur-reveal:    520ms;   /* marketing scroll reveal — off the UI budget on purpose */
}

/* ---------- COLOUR: LIGHT ---------- */
:root{
  --ink:#12141C;
  --ink-soft:#4A5165;
  --ink-faint:#8892A6;
  --paper:#F5F6F8;
  --paper-sunk:#EDEFF3;
  --panel:#FFFFFF;
  --line:#E3E6EC;
  --line-strong:#D3D7E0;

  --violet:#5B4FE9;
  --violet-deep:#4338CA;
  --violet-tint:#EEEDFC;

  --teal:#0EA894;
  --teal-deep:#0A7C6C;
  --teal-tint:#E2F7F3;

  --rose:#C4425A;
  --rose-tint:#FBE9EC;

  /* Spotlight glow (skill/leadership cards) — a translucent violet so it
     reads as a highlight over any surface, independent of the tint tokens
     above (which are opaque and tuned for badges, not overlays). */
  --spot-glow:rgba(91,79,233,0.10);

  /* One accent, used solid. No gradients spanning hues — a portfolio reads
     as more considered with one committed colour than with several.
     Violet carries interaction/brand; teal is reserved for small tag/metric
     chips; rose is reserved for negative or "regressed" data points. */
  --accent:var(--violet);

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --maxw:1180px;

  --shadow-sm:0 1px 2px rgba(18,20,28,0.05);
  --shadow-md:0 10px 30px -12px rgba(18,20,28,0.18);
  --shadow-lg:0 24px 60px -20px rgba(18,20,28,0.28);

  --scrim:rgba(18,20,28,0.55);
  --nav-bg:rgba(245,246,248,0.72);
  --nav-bg-solid:rgba(245,246,248,0.94);

  /* The contact block is a dark panel in both themes — it must not
     invert when --ink flips. */
  --contact-bg:#12141C;
  --contact-fg:#F5F6F8;
  --contact-muted:#8892A6;
  --contact-line:rgba(255,255,255,0.22);
  color-scheme:light;
}

/* ---------- COLOUR: DARK ---------- */
[data-theme="dark"]{
  --ink:#E9EBF2;
  --ink-soft:#A2AABF;
  --ink-faint:#6F7890;
  --paper:#0C0E15;
  --paper-sunk:#080A10;
  --panel:#141822;
  --line:#232838;
  --line-strong:#333B50;

  --violet:#8B80FF;
  --violet-deep:#A79DFF;
  --violet-tint:#1E1B3A;

  --teal:#2DD4B8;
  --teal-deep:#5EE3CB;
  --teal-tint:#0D2E2A;

  --rose:#E8768A;
  --rose-tint:#341419;

  --spot-glow:rgba(139,128,255,0.16);

  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 10px 30px -12px rgba(0,0,0,0.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,0.75);

  --scrim:rgba(4,5,9,0.74);
  --nav-bg:rgba(12,14,21,0.72);
  --nav-bg-solid:rgba(12,14,21,0.94);

  /* Slightly lifted off the page background so the block still reads
     as a distinct surface in dark mode. */
  --contact-bg:#191E2B;
  --contact-fg:#E9EBF2;
  --contact-muted:#A2AABF;
  --contact-line:rgba(255,255,255,0.16);
  color-scheme:dark;
}

/* Kill every transition for one frame while the theme swaps.
   Different properties interpolate at different rates, so an animated
   theme change reads as a staggered repaint rather than one clean switch. */
.theme-switching, .theme-switching *,
.theme-switching *::before, .theme-switching *::after{
  transition:none !important;
  animation:none !important;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:'Sora',sans-serif;
  letter-spacing:-0.015em;
  margin:0;
  color:var(--ink);
  font-weight:700;
}
.mono{ font-family:'JetBrains Mono',monospace; }

:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

section{ padding:100px 0; position:relative; }
section + section{ border-top:1px solid var(--line); }
@media (max-width:720px){ section{ padding:64px 0; } }

.kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--violet-deep);
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.kicker::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:var(--violet); flex:none;
}
.section-head{ max-width:660px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.15; }
.section-head p{ color:var(--ink-soft); margin-top:14px; font-size:16px; max-width:580px; }

/* ============================================================
   SCROLL REVEAL — marketing surface only, fires once
   ============================================================ */
html.js .reveal{
  opacity:0;
  transform:translateY(14px) scale(0.98);
}
html.js .reveal.in{
  opacity:1;
  transform:none;
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

/* Images reveal with a clip-path wipe instead of a slide — a screenshot has a
   hard edge to travel along, so the wipe reads cleaner than translating it.

   The clip goes on the <img>, never on the observed <figure>: an element
   clipped by its own clip-path reports zero intersection, so observing it
   means the reveal can never fire. */
html.js .reveal-img img{ clip-path:inset(0 0 100% 0); }
html.js .reveal-img.in img{
  clip-path:inset(0 0 0 0);
  transition:clip-path 620ms var(--ease-in-out);
}
html.js .reveal-img figcaption{ opacity:0; }
html.js .reveal-img.in figcaption{ opacity:1; transition:opacity 320ms var(--ease-out) 180ms; }

/* ============================================================
   REDUCED MOTION — fewer and gentler, not zero.
   Opacity survives (it aids comprehension); movement does not.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ transform:none; }
  html.js .reveal.in{ transition:opacity 200ms ease; }
  html.js .reveal-img img{ clip-path:none; opacity:0; }
  html.js .reveal-img.in img{ opacity:1; transition:opacity 200ms ease; }
  html.js .reveal-img.in figcaption{ transition:opacity 200ms ease; }
  .t-progress{ transition:none !important; }
  .scroll-progress .bar{ transition:none !important; }
  .t-item > *{ transform:none !important; transition:opacity 200ms ease !important; }
  .t-item.in > .t-node{ transition:none !important; }
  .t-node::after{ transition:background 200ms ease !important; }
  .t-item.in .t-node::after{ transform:none !important; }
  .t-cursor{ display:none; }
  .eyebrow .dot{ animation:none; }
  .btn:active, .proj-card:active, .shot:active, .icon-btn:active, .brand:active{ transform:none !important; }
  .lightbox-img{ transform:none !important; }
  .lightbox.open .lightbox-img{ transform:none !important; }
}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px;
  padding:13px 22px; border-radius:11px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  white-space:nowrap;
  transition:
    transform    var(--dur-press) var(--ease-out),
    box-shadow   var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) ease,
    background   var(--dur-hover) ease,
    color        var(--dur-hover) ease;
}
/* Press feedback: scale() carries the label and icon with it,
   which is what makes it read as a physical press. */
.btn:active{ transform:scale(0.97); }

.btn svg{ width:15px; height:15px; flex:none; }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-signal{ background:var(--violet); color:#fff; }
[data-theme="dark"] .btn-signal{ color:#0C0E15; }
.btn-ghost{ background:var(--panel); color:var(--ink); border-color:var(--line-strong); }
.btn-sm{ padding:9px 16px; font-size:13.5px; border-radius:9px; }

@media (hover: hover) and (pointer: fine){
  .btn-primary:hover{ box-shadow:0 10px 22px -10px rgba(18,20,28,0.5); }
  .btn-signal:hover{ background:var(--violet-deep); box-shadow:0 10px 22px -10px rgba(91,79,233,0.5); }
  .btn-ghost:hover{ border-color:var(--violet); box-shadow:var(--shadow-sm); }
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-ui) ease, background var(--dur-ui) ease;
}
.nav.scrolled{ border-bottom-color:var(--line); background:var(--nav-bg-solid); }
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  font-family:'Sora',sans-serif; font-weight:700; font-size:16.5px;
  display:flex; align-items:center; gap:10px;
  transition:transform var(--dur-press) var(--ease-out);
}
.brand:active{ transform:scale(0.97); }
.brand .mark{
  width:32px; height:32px; border-radius:9px; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  color:var(--paper); font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;
  position:relative; overflow:hidden; flex:none;
}
.brand .mark::after{
  content:""; position:absolute; inset:0; background:var(--violet); opacity:0;
  transition:opacity var(--dur-hover) ease;
}
.brand .mark span{ position:relative; z-index:1; }
@media (hover: hover) and (pointer: fine){
  .brand:hover .mark::after{ opacity:1; }
}

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  font-size:14px; font-weight:500; color:var(--ink-soft);
  position:relative; padding:4px 0;
  transition:color var(--dur-hover) ease;
}
/* scaleX from the left — transform, not a width/right animation */
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--violet); border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ transform:scaleX(1); }
}
.nav-links a[aria-current="true"]{ color:var(--ink); }
.nav-links a[aria-current="true"]::after{ transform:scaleX(1); }

.nav-cta{ display:flex; align-items:center; gap:10px; }

.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line-strong);
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none; position:relative;
  transition:transform var(--dur-press) var(--ease-out), border-color var(--dur-hover) ease;
}
.icon-btn:active{ transform:scale(0.94); }
.icon-btn svg{ width:17px; height:17px; }
@media (hover: hover) and (pointer: fine){
  .icon-btn:hover{ border-color:var(--violet); }
}
.nav-toggle{ display:none; }

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position:sticky; top:0; z-index:101; height:2px; margin-top:-2px;
  background:transparent; pointer-events:none;
}
.scroll-progress .bar{
  height:100%; width:100%; background:var(--violet); border-radius:0 2px 2px 0;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 120ms linear;
}

/* Theme toggle: sun and moon swap by rotating past each other */
.theme-toggle{ overflow:hidden; }
.theme-toggle svg{
  position:absolute;
  transition:transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
.theme-toggle .i-sun{ transform:rotate(0deg) scale(1); opacity:1; }
.theme-toggle .i-moon{ transform:rotate(-70deg) scale(0.6); opacity:0; }
[data-theme="dark"] .theme-toggle .i-sun{ transform:rotate(70deg) scale(0.6); opacity:0; }
[data-theme="dark"] .theme-toggle .i-moon{ transform:rotate(0deg) scale(1); opacity:1; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:64px 16px auto 16px; background:var(--panel);
    border:1px solid var(--line); border-radius:var(--radius); padding:14px;
    flex-direction:column; align-items:stretch; gap:2px; box-shadow:var(--shadow-lg);
    transform-origin:top center;
    transform:scale(0.96); opacity:0; pointer-events:none;
    transition:transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
  }
  .nav-links.open{ transform:scale(1); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:11px 10px; border-radius:8px; }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:72px 0 0; border-top:none; }
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:52px; align-items:center;
  padding-bottom:56px;
}
@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:500;
  letter-spacing:0.04em; color:var(--violet-deep);
  background:var(--violet-tint); padding:7px 13px 7px 10px; border-radius:999px;
  margin-bottom:22px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--violet); flex:none; animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.hero h1{
  font-size:clamp(34px,5vw,58px); font-weight:700; line-height:1.02;
  letter-spacing:-0.028em; max-width:660px;
}
.hero .tagline{
  margin:18px 0 0; font-family:'Sora',sans-serif; font-weight:600;
  font-size:clamp(17px,2vw,22px); line-height:1.35; letter-spacing:-0.01em;
  max-width:530px; color:var(--ink);
}
.hero .accent{ color:var(--violet); }
.hero .role-line{
  margin-top:18px; font-family:'JetBrains Mono',monospace; font-size:12.5px;
  color:var(--teal-deep); line-height:1.9; max-width:560px;
}
.hero .sub{ margin-top:16px; max-width:545px; color:var(--ink-soft); font-size:16.5px; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero .cta-row.profile-row{ margin-top:14px; }
.hero .meta-row{
  display:flex; flex-wrap:wrap; gap:20px; margin-top:30px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink-faint);
}
.hero .meta-row span, .hero .meta-row a{ display:flex; align-items:center; gap:7px; }
.hero .meta-row a{ transition:color var(--dur-hover) ease; }
@media (hover: hover) and (pointer: fine){
  .hero .meta-row a:hover{ color:var(--violet-deep); }
}
.hero .meta-row svg{ width:14px; height:14px; opacity:.7; flex:none; }

/* --- Hero figure: a photo placeholder, styled like the gallery
   placeholders used throughout the case studies — same visual language
   for "swap this for a real asset" everywhere on the site. --- */
.photo-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/5; border:1.5px dashed var(--line-strong);
  background:repeating-linear-gradient(135deg, var(--paper) 0 10px, var(--panel) 10px 20px);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  text-align:center; padding:32px;
}
.photo-frame .icon{
  width:56px; height:56px; border-radius:50%; background:var(--panel);
  border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); box-shadow:var(--shadow-sm);
}
.photo-frame .icon svg{ width:24px; height:24px; }
.photo-frame .label{ font-size:14px; font-weight:600; color:var(--ink-soft); }
.photo-frame .sub{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-faint); max-width:220px; }

/* ---------- FACT STRIP ---------- */
.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.facts.facts-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .facts.facts-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .facts.facts-3{ grid-template-columns:1fr; } }
.fact{ background:var(--panel); padding:22px 20px; transition:background var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine){
  .fact:hover{ background:var(--paper-sunk); }
}
.fact .k{ font-family:'Sora',sans-serif; font-size:20px; font-weight:700; line-height:1.25; }
.fact .k .u{ font-size:13px; color:var(--ink-faint); font-weight:500; }
.fact .v{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.45; }
@media (max-width:820px){ .facts{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .facts{ grid-template-columns:1fr; } }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:44px; align-items:start; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }
.about-grid p{ color:var(--ink-soft); font-size:16px; margin:0 0 16px; }
.about-grid p:last-of-type{ margin-bottom:0; }
.about-grid strong{ color:var(--ink); font-weight:600; }

.seeking{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px;
}
.seeking h3{ font-size:14px; margin-bottom:4px; }
.seeking .sn{ font-size:12.5px; color:var(--ink-faint); margin-bottom:14px; }
.seeking li{
  display:flex; align-items:center; gap:11px; padding:10px 0;
  font-size:14.5px; color:var(--ink); border-top:1px solid var(--line);
}
.seeking li:first-of-type{ border-top:none; }
.seeking li svg{ width:15px; height:15px; color:var(--teal-deep); flex:none; }

/* ---------- TIMELINE ---------- */
.timeline{ position:relative; padding-left:2px; }
.t-rail{
  position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:var(--line-strong); border-radius:2px;
}
/* scaleY, not height — height would animate layout on every scroll frame */
.t-progress{
  position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:var(--violet); border-radius:2px;
  transform:scaleY(0); transform-origin:top center;
}
/* A small glowing marker that travels down the rail with scroll position —
   translateY only (never top/left), set directly from the same px value
   already computed for the fill above, so it always lands exactly at the
   fill's tip with no extra layout work. */
.t-cursor{
  position:absolute; left:9px; top:6px; width:0; height:0; pointer-events:none;
  transform:translateY(0px);
}
.t-cursor::before{
  content:""; position:absolute; left:50%; top:0; width:9px; height:9px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--violet);
  box-shadow:0 0 0 4px var(--violet-tint), 0 0 14px 2px rgba(91,79,233,0.35);
}

.t-item{ position:relative; padding:0 0 46px 40px; }
.t-item:last-child{ padding-bottom:4px; }
.t-node{
  position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%;
  background:var(--panel); border:2px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition:border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.t-node::after{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--line-strong);
  transition:background 260ms var(--ease-out), transform 420ms var(--ease-pop);
}
/* A first-time-seen moment (rule of thumb: rare motion may have delight) —
   the node overshoots slightly on activation rather than settling flatly. */
.t-item.in .t-node{ border-color:var(--violet); box-shadow:0 0 0 4px var(--violet-tint); }
.t-item.in .t-node::after{ background:var(--violet); transform:scale(1.2); }

/* Cascading reveal: date, then heading, then org, then body, then tags —
   each element in an entry becomes visible in reading order rather than
   the whole block appearing at once. Justified as reading-order guidance,
   not decoration (rule 1). */
.t-item > *{
  opacity:0; transform:translateY(8px);
  transition:opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.t-item.in > *{ opacity:1; transform:none; }
.t-item.in > .t-when{ transition-delay:20ms; }
.t-item.in > h3{ transition-delay:70ms; }
.t-item.in > .t-org{ transition-delay:115ms; }
.t-item.in > p,
.t-item.in > ul,
.t-item.in > .t-note{ transition-delay:160ms; }
.t-item.in > .t-tags{ transition-delay:205ms; }
/* The node itself is positioned absolutely and isn't part of the reading
   cascade — it has its own activation state above, not this fade. */
.t-item > .t-node{ opacity:1; transform:none; transition:none; }

.t-when{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--violet-deep);
  font-weight:500; margin-bottom:6px; display:block;
}
.t-item h3{ font-size:18px; margin-bottom:3px; }
.t-item .t-org{ font-size:14px; color:var(--ink-soft); font-weight:500; margin-bottom:10px; }
.t-item p, .t-item ul{ color:var(--ink-soft); font-size:14.5px; }
.t-item ul{ margin-top:8px; display:grid; gap:6px; }
.t-item li{ padding-left:18px; position:relative; }
.t-item li::before{ content:"—"; position:absolute; left:0; color:var(--ink-faint); }
.t-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.t-tag{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal-deep);
  background:var(--teal-tint); padding:4px 9px; border-radius:6px;
}
.t-note{ font-size:13px; color:var(--ink-faint); margin-top:10px; line-height:1.6; }

/* ---------- SKILLS ---------- */

/* Core stack — the handful of tools that show up across every project,
   scannable in one glance before the categorised detail below. */
.core-stack{ display:flex; flex-wrap:wrap; gap:20px 22px; margin-bottom:44px; }
.core-item{ display:flex; flex-direction:column; align-items:center; gap:9px; width:74px; text-align:center; }
.core-item .tile{
  width:56px; height:56px; border-radius:16px; background:var(--panel);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:25px; position:relative;
  transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) ease;
}
.core-item .tile i{ font-size:25px; }
.core-item .tile img{ width:25px; height:25px; object-fit:contain; }
.core-item span{ font-size:11.5px; color:var(--ink-soft); font-weight:500; line-height:1.3; }
@media (hover: hover) and (pointer: fine){
  .core-item:hover .tile{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--violet); }
}
.core-item:active .tile{ transform:scale(0.96); }

.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .skills-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .skills-grid{ grid-template-columns:1fr; } }

.skill-card{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px;
  transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) ease;
}
/* Spotlight: a soft radial highlight tracking the pointer, painted by JS
   onto a pseudo-element so the card's own children never repaint. */
.skill-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%), var(--spot-glow), transparent 72%);
  opacity:0; transition:opacity 260ms var(--ease-out);
}
.skill-card > *{ position:relative; z-index:1; }
@media (hover: hover) and (pointer: fine){
  .skill-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
  .skill-card:hover::before{ opacity:1; }
}
.skill-card .head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.skill-card .head-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.skill-count{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-faint);
  background:var(--paper-sunk); padding:3px 9px; border-radius:999px; flex:none;
}
.skill-icon{
  width:38px; height:38px; border-radius:10px; background:var(--paper-sunk);
  display:flex; align-items:center; justify-content:center; flex:none;
  color:var(--violet-deep);
}
.skill-icon svg{ width:19px; height:19px; }
.skill-card .head h3{ font-size:15px; line-height:1.3; }
.chip-row{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); padding:6px 10px 6px 8px; border-radius:8px;
  transition:border-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-hover) var(--ease-out);
}
.chip i{ font-size:14px; color:var(--ink-faint); }
.chip img{ width:14px; height:14px; object-fit:contain; flex:none; display:block; }
[data-theme="dark"] .chip img.invert-dark{ filter:invert(1) brightness(1.7); }
.chip svg{ width:14px; height:14px; flex:none; color:var(--ink-faint); }
@media (hover: hover) and (pointer: fine){
  .chip:hover{ border-color:var(--violet); color:var(--ink); transform:translateY(-1px); }
}

/* ---------- PROJECTS ---------- */
.projects-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:860px){ .projects-grid{ grid-template-columns:1fr; } }

.proj-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--dur-ui) var(--ease-out);
  will-change:transform;
}
.proj-card:active{ transform:scale(0.99); }
@media (hover: hover) and (pointer: fine){
  .proj-card:hover{ box-shadow:var(--shadow-lg); }
  .proj-card:hover .proj-media .glyph{ transform:scale(1.06); }
  .proj-card:hover .proj-link{ gap:10px; color:var(--violet-deep); }
}
.proj-media{
  aspect-ratio:16/9; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  /* One recipe, repeated on every card — depth without introducing a
     different colour combination per project. */
  background:radial-gradient(120% 130% at 26% 15%, var(--violet-tint), var(--paper-sunk) 62%);
}
.proj-media .glyph{ width:42%; height:42%; transition:transform 420ms var(--ease-out); }
.proj-body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.proj-body .row-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.proj-body h3{ font-size:18px; line-height:1.3; }
.proj-metric{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--teal-deep);
  background:var(--teal-tint); padding:5px 9px; border-radius:7px; white-space:nowrap; flex:none;
}
.proj-body p{ color:var(--ink-soft); font-size:14.5px; margin:0; }
.proj-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.proj-tags span{
  font-size:11.5px; color:var(--ink-faint); background:var(--paper); border:1px solid var(--line);
  padding:4px 8px; border-radius:6px; font-family:'JetBrains Mono',monospace;
}
.proj-links{ display:flex; gap:10px; margin-top:auto; padding-top:8px; }
.proj-link{
  font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  color:var(--ink); transition:gap var(--dur-hover) var(--ease-out), color var(--dur-hover) ease;
}
.proj-link svg{ width:14px; height:14px; }

/* ---------- RESEARCH ---------- */
.paper-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 34px; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:start;
  transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine){
  .paper-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
}
@media (max-width:760px){ .paper-card{ grid-template-columns:1fr; } }
.paper-badge{
  width:50px; height:50px; border-radius:13px; background:var(--violet-tint);
  color:var(--violet-deep); display:flex; align-items:center; justify-content:center; flex:none;
}
.paper-badge svg{ width:23px; height:23px; }
.paper-card h3{ font-size:18px; line-height:1.35; margin-bottom:8px; }
.paper-card p{ color:var(--ink-soft); font-size:14.5px; margin:0 0 12px; }
.paper-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.paper-meta span{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--violet-deep);
  background:var(--violet-tint); padding:4px 10px; border-radius:6px;
}

/* ---------- LEADERSHIP ---------- */
.lead-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:980px){ .lead-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .lead-grid{ grid-template-columns:1fr; } }
.lead-card{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px;
  transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.lead-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(200px circle at var(--sx,50%) var(--sy,50%), var(--spot-glow), transparent 72%);
  opacity:0; transition:opacity 260ms var(--ease-out);
}
.lead-card > *{ position:relative; z-index:1; }
@media (hover: hover) and (pointer: fine){
  .lead-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
  .lead-card:hover::before{ opacity:1; }
}
.lead-card .yr{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-faint); margin-bottom:10px; }
.lead-card h4{ font-size:14.5px; margin-bottom:5px; line-height:1.35; }
.lead-card .org{ font-size:12.5px; color:var(--ink-soft); margin-bottom:10px; }
.lead-card p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.55; }

/* ---------- CONTACT ---------- */
.contact-cta{
  background:var(--contact-bg); border-radius:var(--radius-lg); padding:56px 48px;
  position:relative; overflow:hidden;
}
@media (max-width:600px){ .contact-cta{ padding:38px 26px; } }
.contact-cta::before{
  content:""; position:absolute; inset:0; background:var(--violet); opacity:.16;
  mask-image:radial-gradient(circle at 18% 15%, black, transparent 62%);
  -webkit-mask-image:radial-gradient(circle at 18% 15%, black, transparent 62%);
}
.contact-cta > *{ position:relative; }
/* The panel is dark in both site themes, so this needs a fixed light
   violet rather than the theme-relative --violet-deep (which is a dark
   purple in light mode — illegible here). */
.contact-cta .kicker{ color:#A79DFF; }
.contact-cta .kicker::before{ background:#A79DFF; }
.contact-cta h2{ color:var(--contact-fg); font-size:clamp(25px,3.4vw,36px); max-width:640px; }
.contact-cta p{ color:var(--contact-muted); margin-top:14px; max-width:540px; font-size:16px; }
.contact-cta .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.contact-cta .btn-ghost{ background:transparent; color:var(--contact-fg); border-color:var(--contact-line); }
.contact-cta .btn-signal{ background:var(--violet); color:#fff; }
[data-theme="dark"] .contact-cta .btn-signal{ color:#0C0E15; }
@media (hover: hover) and (pointer: fine){
  .contact-cta .btn-ghost:hover{ border-color:var(--contact-fg); background:rgba(255,255,255,.07); }
}

.footer{ padding:40px 0 48px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.footer-links{ display:flex; gap:22px; }
.footer-links a{
  font-size:13.5px; color:var(--ink-soft); font-weight:500;
  transition:color var(--dur-hover) ease;
}
@media (hover: hover) and (pointer: fine){
  .footer-links a:hover{ color:var(--violet-deep); }
}
.foot-note{ font-size:12.5px; color:var(--ink-faint); font-family:'JetBrains Mono',monospace; }

/* ============================================================
   PROJECT DETAIL PAGE
   ============================================================ */
.p-hero{ padding:48px 0 0; }
.p-back{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:var(--ink-soft); margin-bottom:26px;
  transition:gap var(--dur-hover) var(--ease-out), color var(--dur-hover) ease;
}
.p-back svg{ width:14px; height:14px; }
@media (hover: hover) and (pointer: fine){
  .p-back:hover{ gap:11px; color:var(--ink); }
}
.p-hero h1{ font-size:clamp(27px,3.8vw,42px); max-width:780px; line-height:1.14; }
.p-hero .sub{ color:var(--ink-soft); margin-top:16px; max-width:620px; font-size:16.5px; }
.p-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.p-tags span{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--teal-deep);
  background:var(--teal-tint); padding:5px 10px; border-radius:7px;
}
.p-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.p-section h2{ font-size:clamp(21px,2.6vw,27px); max-width:640px; }
.p-lede{ color:var(--ink-soft); max-width:640px; margin-top:12px; font-size:15.5px; }

.p-block{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; margin-top:24px;
}
.p-block ul{ display:grid; gap:12px; }
.p-block li{ padding-left:22px; position:relative; color:var(--ink-soft); font-size:15px; line-height:1.6; }
.p-block li::before{ content:"→"; position:absolute; left:0; color:var(--teal-deep); font-weight:600; }
.p-block li b{ color:var(--ink); font-weight:600; }

/* metrics table */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:24px; }
.m-table{
  width:100%; border-collapse:collapse; min-width:520px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; font-size:14px;
}
.m-table th, .m-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); }
.m-table th{
  font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-faint); font-weight:500; background:var(--paper);
}
.m-table td{ color:var(--ink-soft); }
.m-table td:first-child{ color:var(--ink); font-weight:500; }
.m-table tr:last-child td{ border-bottom:none; }
.m-table .best{ color:var(--teal-deep); font-weight:600; font-family:'JetBrains Mono',monospace; }
.m-table .warn{ color:var(--rose); font-family:'JetBrains Mono',monospace; }
.m-table .num{ font-family:'JetBrains Mono',monospace; }

/* pipeline */
.pipeline{
  margin-top:24px; display:flex; align-items:stretch; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.pipe-step{
  flex:1 1 160px; background:var(--panel); padding:20px 18px; position:relative;
  display:flex; flex-direction:column; gap:6px; min-width:150px;
  transition:background var(--dur-ui) ease;
}
@media (hover: hover) and (pointer: fine){
  .pipe-step:hover{ background:var(--paper-sunk); }
}
.pipe-step + .pipe-step{ border-left:1px solid var(--line); }
.pipe-step .pn{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--violet-deep); }
.pipe-step h4{ font-size:14px; font-weight:700; line-height:1.35; }
.pipe-step p{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.5; }
.pipe-step::after{
  content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:8px; height:8px; border-top:2px solid var(--ink-faint); border-right:2px solid var(--ink-faint);
  z-index:2; background:var(--panel); transition:background var(--dur-ui) ease;
}
.pipe-step:last-child::after{ display:none; }
@media (hover: hover) and (pointer: fine){
  .pipe-step:hover::after{ background:var(--paper-sunk); }
}
@media (max-width:760px){
  .pipeline{ flex-direction:column; }
  .pipe-step + .pipe-step{ border-left:none; border-top:1px solid var(--line); }
  .pipe-step::after{ right:50%; top:auto; bottom:-5px; transform:translateX(50%) rotate(135deg); }
}

.finding-grid{ display:grid; gap:14px; margin-top:24px; }
.finding{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  transition:border-color var(--dur-ui) ease, box-shadow var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .finding:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
}
@media (max-width:600px){ .finding{ grid-template-columns:1fr; } }
.finding .tag{
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  color:var(--violet-deep); background:var(--violet-tint); padding:5px 9px; border-radius:6px;
  white-space:nowrap; height:fit-content;
}
.finding h3{ font-size:15.5px; font-weight:600; margin-bottom:6px; }
.finding p{ margin:0; font-size:14px; color:var(--ink-soft); }

/* ---------- GALLERY ---------- */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px; align-items:start; }
.gallery.one{ grid-template-columns:1fr; }
@media (max-width:720px){ .gallery{ grid-template-columns:1fr; } }
.shot{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:zoom-in; display:block; width:100%; text-align:left; padding:0; margin:0;
  transition:transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) ease;
}
.shot:active{ transform:scale(0.99); }
@media (hover: hover) and (pointer: fine){
  .shot:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
}
/* width/height attributes on the <img> reserve the right box before load;
   height:auto keeps the rendered image undistorted. */
.shot img{ width:100%; height:auto; background:#fff; }
.shot figcaption{ padding:13px 16px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; border-top:1px solid var(--line); }
.shot figcaption b{ color:var(--ink); font-weight:600; display:block; margin-bottom:2px; font-size:13px; }

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:28px 28px 56px;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-modal) var(--ease-out);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-scrim{
  position:absolute; inset:0; background:var(--scrim);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.lightbox-fig{ position:relative; margin:0; max-width:min(1100px,94vw); }
.lightbox-img{
  max-width:100%; max-height:82vh; width:auto;
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-lg);
  /* modals are exempt from trigger-anchored origins — they stay centered */
  transform-origin:center;
  transform:scale(0.96); opacity:0;
  transition:transform var(--dur-modal) var(--ease-out), opacity var(--dur-modal) var(--ease-out);
}
.lightbox.open .lightbox-img{ transform:scale(1); opacity:1; }
.lightbox-cap{
  margin-top:12px; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:#E9EBF2;
}
.lightbox-close{
  position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:11px;
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.4); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
  transition:transform var(--dur-press) var(--ease-out), background var(--dur-hover) ease;
}
.lightbox-close:active{ transform:scale(0.94); }
.lightbox-close svg{ width:18px; height:18px; }
@media (hover: hover) and (pointer: fine){
  .lightbox-close:hover{ background:rgba(0,0,0,.65); }
}
body.lb-open{ overflow:hidden; }

.note{
  margin-top:18px; font-size:13px; color:var(--ink-faint); font-style:italic;
  padding-left:14px; border-left:2px solid var(--line-strong);
}

.p-nav{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:40px 0; flex-wrap:wrap; }
.p-nav a{
  display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:color var(--dur-hover) ease, gap var(--dur-hover) var(--ease-out);
}
.p-nav a svg{ width:15px; height:15px; }
@media (hover: hover) and (pointer: fine){
  .p-nav a:hover{ color:var(--violet-deep); gap:13px; }
}

::selection{ background:var(--violet-tint); color:var(--violet-deep); }