/* ==========================================================================
   Portfolio Site — Futuristic, premium, static (no build step)
   Theme tuned to match the JB signature (neon green → orange → yellow).
   ========================================================================== */

:root{
  /* Background + surfaces */
  --bg0:#070812;
  --bg1:#0b0b1a;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.10);
  --border2:rgba(255,255,255,.08);
  --text:#f3f6ff;
  --muted:rgba(243,246,255,.72);
  --muted2:rgba(243,246,255,.58);
  --shadow: 0 18px 70px rgba(0,0,0,.55);

  /* Logo-matched accents */
  --green:#7CFF4B;
  --orange:#FF7A18;
  --yellow:#FFD84A;

  --glow-green: 0 0 0.7rem rgba(124,255,75,.26), 0 0 2.4rem rgba(124,255,75,.12);
  --glow-orange: 0 0 0.7rem rgba(255,122,24,.22), 0 0 2.4rem rgba(255,122,24,.10);
  --glow-yellow: 0 0 0.7rem rgba(255,216,74,.20), 0 0 2.4rem rgba(255,216,74,.09);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  /* Sizing */
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --max: 1140px;
  --g: clamp(14px, 2vw, 20px);
  --g2: clamp(18px, 3vw, 28px);

  /* Nav/logo */
  --nav-height: 62px;
  --logo-hang: 18px; /* how much the logo dips below nav */

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 520ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 520px at 16% -10%, rgba(124,255,75,.14), transparent 62%),
    radial-gradient(900px 520px at 92% 0%, rgba(255,122,24,.14), transparent 58%),
    radial-gradient(900px 700px at 60% 110%, rgba(255,216,74,.10), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family:var(--font-sans);
  line-height:1.55;
  overflow-x:hidden;
}

/* Slow gradient drift (performant) */
body::before{
  content:"";
  position:fixed; inset:-10%;
  pointer-events:none;
  background:
    radial-gradient(1200px 520px at 30% 20%, rgba(124,255,75,.10), transparent 60%),
    radial-gradient(980px 520px at 80% 35%, rgba(255,122,24,.10), transparent 60%);
  filter: blur(10px);
  opacity:.9;
  transform:translateZ(0);
  animation:bg-drift 16s linear infinite;
}
@keyframes bg-drift{
  0%{transform:translate3d(-1%, -1%, 0) scale(1.02)}
  50%{transform:translate3d(1%, 1%, 0) scale(1.04)}
  100%{transform:translate3d(-1%, -1%, 0) scale(1.02)}
}

/* Grain overlay (SVG filter in HTML) */
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode:overlay;
  filter:url(#noiseFilter);
  background:rgba(255,255,255,.18);
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  body::before{animation:none}
  .reveal{transition:none !important; transform:none !important; opacity:1 !important}
  .page-enter{transition:none !important}
}

.wrap{max-width:var(--max); margin:0 auto; padding: 0 var(--g)}
.section{padding: clamp(42px, 8vw, 92px) 0}
.grid{display:grid; gap: var(--g2)}
.two{grid-template-columns: 1.2fr .8fr}
@media (max-width: 920px){.two{grid-template-columns:1fr}}

h1,h2,h3{margin:0 0 .55rem 0; letter-spacing:-.02em}
h1{font-size: clamp(34px, 5vw, 56px); line-height:1.04}
h2{font-size: clamp(22px, 3vw, 34px); line-height:1.15}
h3{font-size: clamp(18px, 2vw, 22px)}
p{margin:.75rem 0; color:var(--muted)}
.kicker{
  font-family:var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(243,246,255,.62);
}
.lead{font-size: clamp(16px, 1.6vw, 18px); color:rgba(243,246,255,.78)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}

.accent{
  background: linear-gradient(90deg, var(--green), var(--orange), var(--yellow));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Nav + hanging signature logo */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(7,8,18,.52);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  height: var(--nav-height);
  padding: 12px var(--g);
  max-width:var(--max); margin:0 auto;
}
.brand{
  position:relative;
  display:flex; align-items:flex-start;
  gap: 10px;
  text-decoration:none; color:var(--text);
  padding-right: 10px;
}
.brand-logo{
  height: 52px;
  width: auto;
  display:block;
  transform: translateY(calc(var(--logo-hang) * 1px));
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(124,255,75,.14)) drop-shadow(0 0 20px rgba(255,122,24,.10));
}
.brand-sub{
  margin-top: 8px;
}
.brand-sub strong{font-weight:700; letter-spacing:.01em; display:none}

.nav-links{display:flex; gap: 10px; align-items:center}
.nav-links a{
  color:rgba(243,246,255,.78);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-links a:hover{
  color:var(--text);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.nav-links a[aria-current="page"]{
  color:var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(124,255,75,.22);
  box-shadow: 0 0 0 1px rgba(124,255,75,.10), 0 0 18px rgba(255,122,24,.08);
}
.nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
  border-radius: 12px;
  padding: 8px 10px;
}
@media (max-width: 760px){
  :root{ --logo-hang: 10px; --nav-height: 60px; }
  .nav-toggle{display:inline-flex; align-items:center; gap:8px}
  .nav-links{
    position:absolute;
    left: var(--g); right: var(--g); top: calc(var(--nav-height) + 8px);
    display:none;
    flex-direction:column;
    padding: 10px;
    border-radius: 16px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(7,8,18,.78);
    backdrop-filter: blur(14px);
  }
  .nav-links.is-open{display:flex}
  .nav-links a{width:100%}
}

.panel{
  border-radius: var(--r20);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.panel.pad{padding: clamp(18px, 2.6vw, 26px)}
.panel.soft{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-color: rgba(255,255,255,.09);
}
.hairline{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin: 16px 0;
}

.btns{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 16px}
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--text);
  text-decoration:none;
  padding: 10px 14px;
  border-radius: 14px;
  display:inline-flex; gap:10px; align-items:center;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16)}
.btn:active{transform: translateY(0)}
.btn.primary{
  border-color: rgba(124,255,75,.24);
  background: linear-gradient(90deg, rgba(124,255,75,.16), rgba(255,122,24,.14), rgba(255,216,74,.10));
  box-shadow: 0 0 0 1px rgba(124,255,75,.10), 0 14px 44px rgba(124,255,75,.05);
}
.btn.primary:hover{box-shadow: var(--glow-green)}
.btn.ghost{background: transparent; border-color: rgba(255,255,255,.10)}

.chip{
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(243,246,255,.75);
  font-size: 12px;
  gap:8px;
}
.chip.dot::before{
  content:""; width:7px; height:7px; border-radius:99px;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(124,255,75,.14);
}

.cards{display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--g)}
.card{
  grid-column: span 4;
  border-radius: var(--r20);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  transform: translateZ(0);
  position:relative;
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(124,255,75,.20);
  box-shadow: 0 0 0 1px rgba(124,255,75,.10), 0 24px 70px rgba(0,0,0,.55);
}
.card a{color:inherit; text-decoration:none; display:block}
.card-media{
  aspect-ratio: 16/9;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding: 14px 14px 16px}
.card-title{margin:0 0 6px 0; font-size:18px}
.card-meta{display:flex; gap:8px; flex-wrap:wrap}
.card p{margin:10px 0 0 0; font-size:14px; color: rgba(243,246,255,.70)}
.card .tags{margin-top: 12px; display:flex; gap:8px; flex-wrap:wrap}
@media (max-width: 960px){.card{grid-column: span 6}}
@media (max-width: 640px){.card{grid-column: span 12}}

.hero{padding: clamp(36px, 7vw, 84px) 0 clamp(22px, 4vw, 44px)}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: var(--g2);
  align-items:stretch;
}
@media (max-width: 980px){.hero-grid{grid-template-columns:1fr}}
.hero-visual{
  min-height: 280px;
  border-radius: var(--r20);
  overflow:hidden;
  position:relative;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 380px at 30% 10%, rgba(124,255,75,.22), transparent 55%),
    radial-gradient(700px 420px at 85% 30%, rgba(255,122,24,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 26px 80px rgba(0,0,0,.55);
}
.hero-visual::after{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(90deg, rgba(124,255,75,.18), transparent 30%, rgba(255,122,24,.15), rgba(255,216,74,.10));
  opacity:.6;
  pointer-events:none;
  mix-blend-mode:screen;
}
.hero-visual .caption{
  position:absolute; left:16px; bottom:14px; right:16px;
  display:flex; gap: 10px; flex-wrap:wrap; align-items:center;
}

.tiles{display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--g)}
.tile{
  grid-column: span 3;
  border-radius: var(--r20);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  padding: 16px 16px 18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tile:hover{transform: translateY(-3px); border-color: rgba(255,122,24,.22)}
.tile .icon{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--glow-orange);
  margin-bottom: 10px;
}
.tile p{margin:6px 0 0 0; font-size:14px}
@media (max-width: 980px){.tile{grid-column: span 6}}
@media (max-width: 640px){.tile{grid-column: span 12}}

.filters{display:flex; flex-wrap:wrap; gap: 10px; align-items:center; justify-content:space-between}
.filters-left{display:flex; flex-wrap:wrap; gap: 10px; align-items:center}
.filters-right{display:flex; gap:10px; align-items:center}
.field{
  display:flex; gap: 8px; align-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px 12px;
}
.field input, .field select, .field textarea{
  border:0; outline:0;
  background: transparent;
  color:var(--text);
  width: 100%;
  font: inherit;
}
.field input::placeholder, .field textarea::placeholder{color: rgba(243,246,255,.50)}
.field select{appearance:none}
.pillset{display:flex; flex-wrap:wrap; gap: 8px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  user-select:none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pill:hover{transform: translateY(-1px)}
.pill input{accent-color: var(--green)}
.pill.is-on{
  background: linear-gradient(90deg, rgba(124,255,75,.14), rgba(255,122,24,.10), rgba(255,216,74,.08));
  border-color: rgba(124,255,75,.22);
  box-shadow: 0 0 0 1px rgba(124,255,75,.10);
}

.masonry{column-gap: var(--g); column-count: 3}
@media (max-width: 920px){.masonry{column-count:2}}
@media (max-width: 600px){.masonry{column-count:1}}
.masonry-item{break-inside: avoid; margin: 0 0 var(--g); border-radius: var(--r16); overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03)}
.masonry-item button{all:unset; display:block; cursor:pointer}
.masonry-item img{width:100%; height:auto; display:block}
.masonry-caption{padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(243,246,255,.74); font-size: 13px}

dialog.lightbox{
  width:min(1024px, 92vw);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r20);
  padding: 0;
  background: rgba(7,8,18,.78);
  color: var(--text);
  box-shadow: 0 40px 120px rgba(0,0,0,.70);
  backdrop-filter: blur(16px);
}
dialog.lightbox::backdrop{background: rgba(0,0,0,.60); backdrop-filter: blur(10px)}
.lb-top{display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.10)}
.lb-title{font-size: 13px; color: rgba(243,246,255,.78)}
.lb-actions{display:flex; gap: 8px}
.iconbtn{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.iconbtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}
.lb-media{background: rgba(0,0,0,.25)}
.lb-media img{width:100%; height:auto; display:block}
.lb-footer{padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(243,246,255,.70); font-size: 13px; display:flex; justify-content:space-between; gap: 10px; flex-wrap:wrap}

.embed{position:relative; width:100%; aspect-ratio: 16/9; border-radius: var(--r16); overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.20)}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.ba{position:relative; border-radius: var(--r16); overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.20)}
.ba img{display:block; width:100%; height:auto}
.ba .after{position:absolute; inset:0; width:50%; overflow:hidden; border-right: 1px solid rgba(255,255,255,.22)}
.ba .handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background: rgba(124,255,75,.55); box-shadow: var(--glow-green)}
.ba .knob{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%, -50%);
  width:44px; height:44px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  display:grid; place-items:center;
}
.ba .knob span{font-family: var(--font-mono); font-size: 12px; color: rgba(243,246,255,.80)}

footer{padding: 46px 0; border-top: 1px solid rgba(255,255,255,.08); background: rgba(7,8,18,.40)}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--g2)}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr}}
footer a{color: rgba(243,246,255,.80)}
footer a:hover{color: var(--text)}

:focus-visible{outline: 2px solid rgba(124,255,75,.55); outline-offset: 2px; border-radius: 12px}

.page-enter{opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease)}
.page-enter.is-in{opacity: 1; transform: translateY(0)}
.reveal{opacity:0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease)}
.reveal.is-in{opacity:1; transform:none}

.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}
.right{margin-left:auto}
.center{text-align:center}
.stack{display:flex; flex-direction:column; gap: 10px}
.row{display:flex; gap: 10px; flex-wrap:wrap; align-items:center}

/* ==========================================================================
   JB signature theme overrides (keep this at the end of the file)
   Ensures the logo palette wins even if older styles were appended.
   ========================================================================== */

:root{
  --bg0:#070812;
  --bg1:#0b0b1a;
  --text:#f3f6ff;
  --muted:rgba(243,246,255,.72);
  --muted2:rgba(243,246,255,.58);

  --green:#7CFF4B;
  --orange:#FF7A18;
  --yellow:#FFD84A;

  --glow-green: 0 0 0.7rem rgba(124,255,75,.26), 0 0 2.4rem rgba(124,255,75,.12);
  --glow-orange: 0 0 0.7rem rgba(255,122,24,.22), 0 0 2.4rem rgba(255,122,24,.10);
  --glow-yellow: 0 0 0.7rem rgba(255,216,74,.20), 0 0 2.4rem rgba(255,216,74,.09);

  /* Map old accent vars (if any older CSS still exists) */
  --cyan: var(--green);
  --violet: var(--orange);
  --lime: var(--yellow);
  --glow-cyan: var(--glow-green);
  --glow-violet: var(--glow-orange);

  --nav-height: 84px;
  --logo-hang: 36px; /* dips into the content area below the nav */
}

.accent{
  background: linear-gradient(90deg, var(--green), var(--orange), var(--yellow));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap: 10px;
  text-decoration:none;
  color: var(--text);
}
.brand-logo{
  height: 70px;
  width: auto;
  display:block;
  transform: translateY(calc(var(--logo-hang) * 1px));
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(124,255,75,.14)) drop-shadow(0 0 20px rgba(255,122,24,.10));
}
.brand-sub{margin-top: 8px}

/* Nav spacing so the logo isn't clipped, while still overlapping below */
.nav{ overflow: visible; }
.nav-inner{
  height: auto;
  min-height: var(--nav-height);
  align-items: flex-start;
  padding-top: 14px;   /* space above the logo */
  padding-bottom: 10px;
}
.brand{ padding-top: 2px; }

@media (max-width: 760px){
  :root{ --logo-hang: 22px; --nav-height: 76px; }
  .brand-logo{ height: 58px; }
}