/* ==========================================================
   Bhargav Shivbhakta — Premium Tech UI (Welcoming + Alive)
   - Samsung-like energy (bright, modern, crisp)
   - Dark mode cursor spotlight ("mouse light")
   - Larger nav/buttons/body (H1 unchanged)
   ========================================================== */

:root{
  /* Core */
  --bg: #f4f7fb;
  --paper: #ffffff;
  --ink: #070a12;
  --muted: rgba(7,10,18,.70);
  --muted2: rgba(7,10,18,.56);

  /* Accents */
  --accent: #2563eb;     /* electric blue */
  --accent2: #22c55e;    /* clean green */
  --accent3: #a855f7;    /* premium violet glow */

  /* Lines */
  --stroke: rgba(7,10,18,.10);
  --stroke2: rgba(7,10,18,.14);

  /* Radii */
  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  /* Depth */
  --sh-1: 0 10px 26px rgba(7,10,18,.08);
  --sh-2: 0 18px 50px rgba(7,10,18,.12);
  --sh-3: 0 40px 110px rgba(7,10,18,.16);

  --max: 1160px;

  /* Motion */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.2,.8,.2,1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 700ms;

  /* Cursor spotlight vars */
  --cx: 50vw;
  --cy: 30vh;
}

[data-theme="dark"]{
  --bg: #070a12;
  --paper: #0b0f1a;
  --ink: #eef2ff;
  --muted: rgba(238,242,255,.72);
  --muted2: rgba(238,242,255,.56);

  --stroke: rgba(238,242,255,.12);
  --stroke2: rgba(238,242,255,.16);

  --sh-1: 0 10px 26px rgba(0,0,0,.45);
  --sh-2: 0 18px 60px rgba(0,0,0,.55);
  --sh-3: 0 44px 140px rgba(0,0,0,.70);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  color: var(--ink);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;

  background:
    radial-gradient(900px 520px at 15% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 520px at 110% 0%, color-mix(in srgb, var(--accent3) 14%, transparent), transparent 62%),
    radial-gradient(900px 520px at 55% 120%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 62%),
    var(--bg);
}

/* Subtle grain */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before{ mix-blend-mode:screen; opacity:.045; }

a{ color:inherit; text-decoration:none; }
.container{ max-width: var(--max); margin:0 auto; padding: 0 18px; }

/* Skip link */
.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 12px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--stroke);
  z-index:999;
}

/* ==========================================================
   Dark-mode cursor spotlight ("mouse light")
========================================================== */
[data-theme="dark"] body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  opacity: .55;
  background:
    radial-gradient(
      520px 520px at var(--cx) var(--cy),
      rgba(255,255,255,.18),
      rgba(255,255,255,.08) 26%,
      rgba(255,255,255,.03) 45%,
      transparent 68%
    );
}

/* Card-local light response in dark mode */
[data-theme="dark"] .card,
[data-theme="dark"] .tile,
[data-theme="dark"] .project,
[data-theme="dark"] .pillarCard,
[data-theme="dark"] .xpCard{
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .card::after,
[data-theme="dark"] .tile::after,
[data-theme="dark"] .project::after,
[data-theme="dark"] .pillarCard::after,
[data-theme="dark"] .xpCard::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--e-out);
  background: radial-gradient(420px 260px at var(--cx) var(--cy),
    rgba(255,255,255,.10),
    transparent 62%);
}
[data-theme="dark"] .card:hover::after,
[data-theme="dark"] .tile:hover::after,
[data-theme="dark"] .project:hover::after,
[data-theme="dark"] .pillarCard:hover::after,
[data-theme="dark"] .xpCard:hover::after{
  opacity: .9;
}

/* ==========================================================
   Header / Nav (bigger)
========================================================== */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(165%);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border-bottom: 1px solid var(--stroke);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  user-select:none;
}
.brand__mark{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  background:
    radial-gradient(140px 80px at 30% 20%, rgba(255,255,255,.60), transparent 60%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 22%, transparent),
      color-mix(in srgb, var(--accent3) 16%, transparent)
    );
  border: 1px solid var(--stroke);
  box-shadow: var(--sh-1);
}
.brand__text{
  font-weight: 850;
  letter-spacing: .01em;
  font-size: 15px;
}

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 999px;
  transition: transform var(--dur-2) var(--e-out), background var(--dur-2) var(--e-out), color var(--dur-2) var(--e-out);
}
.nav a:hover{
  transform: translateY(-1px);
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  background: color-mix(in srgb, var(--paper) 76%, transparent);
}
.nav a[aria-current="page"]{
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--stroke);
}

/* ==========================================================
   Buttons (bigger)
========================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: var(--sh-1);
  font-weight: 900;
  font-size: 16px;
  transition: transform var(--dur-2) var(--e-out), box-shadow var(--dur-2) var(--e-out), background var(--dur-2) var(--e-out), border-color var(--dur-2) var(--e-out);
}
.btn:hover{
  transform: translateY(-1.5px);
  box-shadow: var(--sh-2);
  background: color-mix(in srgb, var(--paper) 98%, transparent);
}
.btn:active{ transform: translateY(0); }
.btn:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}
.btn--ghost{ background: transparent; box-shadow:none; }

.btn--primary{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke));
  color: #fff;
  background:
    radial-gradient(220px 120px at 20% 10%, color-mix(in srgb, var(--accent3) 40%, transparent), transparent 65%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent3)));
  box-shadow: 0 18px 55px color-mix(in srgb, var(--accent) 26%, transparent);
}
.btn--primary:hover{
  box-shadow: 0 24px 70px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* Underline link */
.uLink{
  position: relative;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
}
.uLink::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-4px;
  height:1px;
  background: color-mix(in srgb, var(--ink) 36%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--e-out);
}
.uLink:hover::after{ transform: scaleX(1); }

/* ==========================================================
   Page transition
========================================================== */
.page{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-3) var(--e-soft), transform var(--dur-3) var(--e-soft);
}
.page.is-ready{ opacity: 1; transform: translateY(0); }

/* ==========================================================
   Hero
========================================================== */
.hero{ position:relative; padding: 58px 0 18px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items:start;
}
.kicker{
  margin:0;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* IMPORTANT: we do NOT change your main H1 scale */
.h1{
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: clamp(46px, 5vw, 78px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 14px 0 14px;
}

.lede{
  margin:0;
  max-width: 64ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 22px; align-items:center; }

.spotlight{
  position:absolute;
  inset: -170px -260px auto -260px;
  height: 340px;
  background:
    radial-gradient(620px 260px at 20% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(620px 260px at 76% 55%, color-mix(in srgb, var(--accent3) 14%, transparent), transparent 62%);
  filter: blur(10px);
  opacity: .95;
  pointer-events:none;
  z-index:-1;
}

/* ==========================================================
   Cards / common blocks
========================================================== */
.card{
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(240px 120px at 20% 10%, rgba(255,255,255,.70), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 92%, transparent), color-mix(in srgb, var(--paper) 86%, transparent));
  box-shadow: var(--sh-3);
  padding: 18px;
  overflow:hidden;
}
.card--flat{ box-shadow: var(--sh-2); border-radius: var(--r-lg); }

.rule{ height:1px; background: var(--stroke); margin: 14px 0; width:100%; }

.note{
  margin:0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.portrait{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  box-shadow: var(--sh-2);
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
}
.portrait img{ width:100%; height:100%; object-fit: cover; display:block; }

.meta{
  margin-top: 14px;
  display:grid;
  gap: 10px;
  color: var(--muted);
  font-size: 17px;
}
.metaRow{ display:flex; align-items:center; gap:10px; }
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.dot--emerald{ background: var(--accent2); }
.dot--navy{ background: var(--accent); }
.dot--oxblood{ background: var(--accent3); }

/* ==========================================================
   Tiles
========================================================== */
.tiles{ padding: 12px 0 56px; }
.tileGrid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }

.tile{
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: var(--sh-2);
  padding: 18px;
  transition: transform var(--dur-2) var(--e-out), box-shadow var(--dur-2) var(--e-out);
  position:relative;
  overflow:hidden;
}
.tile::before{
  content:"";
  position:absolute;
  inset:-80px -80px auto -80px;
  height: 140px;
  background:
    radial-gradient(520px 160px at 30% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(520px 160px at 70% 50%, color-mix(in srgb, var(--accent3) 10%, transparent), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.tile:hover{ transform: translateY(-3px); box-shadow: var(--sh-3); }

.tileTop{
  display:flex; justify-content:space-between; align-items:center;
  font-size: 13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--muted) 96%, transparent);
}
.tileTitle{
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  margin-top: 10px;
}
.tileDesc{
  margin-top:6px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

/* ==========================================================
   Sections
========================================================== */
.section{ padding: 46px 0; }
.sectionHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.h2{ font-family: Fraunces, ui-serif, Georgia, serif; font-size: 26px; margin:0; }
.hint{ margin:0; font-size: 17px; color: var(--muted); line-height: 1.65; }

/* ==========================================================
   Publications / Projects blocks (more alive)
========================================================== */
.gallery{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }

.project{
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: var(--sh-2);
  padding: 16px;
  transition: transform var(--dur-2) var(--e-out), box-shadow var(--dur-2) var(--e-out);
  position: relative;
  overflow: hidden;
}
.project::before{
  content:"";
  position:absolute;
  inset:-80px -80px auto -80px;
  height: 160px;
  background:
    radial-gradient(520px 160px at 20% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(520px 160px at 76% 55%, color-mix(in srgb, var(--accent3) 10%, transparent), transparent 62%);
  opacity:.55;
  pointer-events:none;
}
.project:hover{
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
}
.project h3{ margin:0; font-size: 18px; font-weight: 900; }
.project p{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tag{
  font-size: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  color: var(--muted);
}

/* ==========================================================
   Case layout (contact uses caseGrid/casePanel)
========================================================== */
.caseGrid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:12px; }
.casePanel{
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: var(--sh-2);
  padding: 18px;
}
.casePanel h3{
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.casePanel p, .casePanel li{
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

/* Inputs baseline */
input, textarea{
  font-family: inherit;
  font-size: 17px;
}
input:focus, textarea:focus{
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}

/* ==========================================================
   Work pillars + Experience cards
========================================================== */
.pillarGrid, .xpGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Shared card base */
.pillarCard, .xpCard{
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: var(--sh-2);
  padding: 18px;
  cursor:pointer;
  overflow:hidden;
  transition: transform var(--dur-2) var(--e-out), box-shadow var(--dur-2) var(--e-out);
  position:relative;
}
.pillarCard::before, .xpCard::before{
  content:"";
  position:absolute;
  inset:-90px -90px auto -90px;
  height: 160px;
  background:
    radial-gradient(560px 160px at 20% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    radial-gradient(560px 160px at 76% 55%, color-mix(in srgb, var(--accent3) 10%, transparent), transparent 64%);
  opacity:.75;
  pointer-events:none;
}
.pillarCard:hover, .xpCard:hover,
.pillarCard:focus-visible, .xpCard:focus-visible{
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}

/* Reveal containers (default hidden) */
.pillarReveal, .xpReveal{
  max-height: 0;
  opacity: 0;
  overflow:hidden;
  transform: translateY(8px);
  transition: max-height var(--dur-3) var(--e-soft), opacity var(--dur-3) var(--e-soft), transform var(--dur-3) var(--e-soft);
  margin-top: 14px;
}

/* Work: allow hover OR click open */
.pillarCard:hover .pillarReveal,
.pillarCard.is-open .pillarReveal,
.pillarCard:focus-visible .pillarReveal{
  max-height: 1800px;
  opacity: 1;
  transform: translateY(0);
}

/* Experience: CLICK ONLY (no hover expand) */
.xpCard:hover .xpReveal,
.xpCard:focus-visible .xpReveal{
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
}
.xpCard.is-open .xpReveal{
  max-height: 1400px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Inner separators */
.pillarInner, .xpCols{
  border-top: 1px solid var(--stroke);
  padding-top: 14px;
}

/* Work pillar media support (add images in HTML) */
.pillarMedia{
  width: 120px;
  height: 76px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  box-shadow: var(--sh-1);
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}
.pillarMedia img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

/* ==========================================================
   Footer
========================================================== */
.footer{
  border-top: 1px solid var(--stroke);
  padding: 18px 0;
  margin-top: 34px;
  color: var(--muted);
  font-size: 14px;
}
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ==========================================================
   Reveal
========================================================== */
.reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) var(--e-soft), transform var(--dur-3) var(--e-soft);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================
   Responsive
========================================================== */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .tileGrid, .gallery{ grid-template-columns: 1fr; }
  .caseGrid{ grid-template-columns: 1fr; }
  .pillarGrid, .xpGrid{ grid-template-columns: 1fr; }

  .pillarMedia{ width: 100%; height: 140px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .page{ opacity:1; transform:none; transition:none; }
  .btn, .tile, .project, .nav a, .uLink::after, .pillarCard, .xpCard{ transition:none; }
  [data-theme="dark"] body::after{ display:none; }
}

/* ==========================================================
   Upgrades: Work & Research (featured + tabs + media)
   ========================================================== */

.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 14px 0 18px;
  align-items:center;
}
.tabBtn{
  appearance:none;
  border:1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: var(--sh-1);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--muted);
  cursor:pointer;
  transition: transform var(--dur-2) var(--e-out), box-shadow var(--dur-2) var(--e-out), background var(--dur-2) var(--e-out);
}
.tabBtn:hover{ transform: translateY(-1px); box-shadow: var(--sh-2); }
.tabBtn[aria-selected="true"]{
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent3) 10%, transparent)
  );
}

.featureGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}

.featureCard{
  border-radius: var(--r-xl);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: var(--sh-2);
  overflow:hidden;
  position:relative;
  transition: transform var(--dur-2) var(--e-out), box-shadow var(--dur-2) var(--e-out);
}
.featureCard:hover{ transform: translateY(-4px); box-shadow: var(--sh-3); }

.featureMedia{
  height: 168px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid var(--stroke);
  position: relative;
  overflow:hidden;
}
.featureMedia img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}
.featureMedia::after{
  content:"";
  position:absolute;
  inset:-60px -80px auto -80px;
  height: 140px;
  background: radial-gradient(520px 160px at 30% 40%, rgba(255,255,255,.36), transparent 62%);
  opacity:.55;
  pointer-events:none;
}
.featureBody{ padding: 16px; }
.featureTitle{
  font-size: 18px;
  font-weight: 950;
  margin: 0;
}
.featureDesc{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.featureMeta{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}

.shine{
  position: relative;
}
.shine::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,.22) 45%,
    transparent 60%
  );
  transform: translateX(-38%) rotate(12deg);
  transition: opacity var(--dur-2) var(--e-out), transform var(--dur-3) var(--e-soft);
}
.shine:hover::before{
  opacity:1;
  transform: translateX(38%) rotate(12deg);
}

/* Publication rows */
.pubGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.pubItem{
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  box-shadow: var(--sh-2);
  padding: 16px;
  position:relative;
  overflow:hidden;
  transition: transform var(--dur-2) var(--e-out), box-shadow var(--dur-2) var(--e-out);
}
.pubItem:hover{ transform: translateY(-3px); box-shadow: var(--sh-3); }
.pubTop{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.pubThumb{
  width: 86px;
  height: 56px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  box-shadow: var(--sh-1);
  flex: 0 0 auto;
}
.pubThumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.pubTitle{
  margin: 0;
  font-weight: 950;
  font-size: 16px;
}
.pubMeta{
  margin-top: 6px;
  color: var(--muted2);
  font-size: 14px;
  line-height: 1.55;
}

/* Filter/search bar for combined page */
.filterBar{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  margin: 10px 0 16px;
}
.pill{
  font-size: 13px;
  padding: 10px 14px;
  letter-spacing: .10em;
}
.search{
  min-width: 280px;
  padding: 10px 14px;
}
.search input{ font-size: 15px; }

/* Responsive for new grids */
@media (max-width: 980px){
  .featureGrid{ grid-template-columns: 1fr; }
  .pubGrid{ grid-template-columns: 1fr; }
  .featureMedia{ height: 190px; }
}


.footerQuote{ width:100%; color: var(--muted2); font-size: 14px; line-height:1.6; }

/* Experience typography + logo */
.xpTop{ display:flex; align-items:center; gap:14px; }
.xpLogo{
  width: 54px; height: 54px;
  border-radius: 18px;
  display:grid; place-items:center;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent3) 14%, transparent)
  );
  box-shadow: var(--sh-1);
}
.xpLogo svg{ opacity:.92; }
.xpHead{ display:grid; gap:4px; }
.xpOrg{ font-weight: 900; font-size: 16px; color: color-mix(in srgb, var(--ink) 92%, transparent); }
.xpRole{ font-weight: 950; font-size: 24px; letter-spacing: -.01em; }
.xpHint{ margin-left:auto; color: var(--muted2); font-weight: 900; letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
.xpLabel{ font-weight: 900; letter-spacing:.14em; text-transform:uppercase; font-size: 12px; color: var(--muted2); }
.xpList{ margin: 10px 0 0; padding-left: 18px; }
.xpNote{ color: var(--muted2); font-size: 14px; margin: 10px 0 0; }
.xpActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }