/* ── Variables ─────────────────────────────────────────────────────────── */
:root{--bg:#0b0d10;--surface:#12151a;--text:#e9edf1;--muted:#8b95a1;--line:#222831;--accent:#8fd935;--accent-dim:rgba(143,217,53,.12)}
html[data-theme="light"]{--bg:#f6f7f5;--surface:#ffffff;--text:#171b20;--muted:#5c646e;--line:#e0e4df;--accent-dim:rgba(120,180,40,.12)}

/* ── Base ──────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;transition:background .3s ease,color .3s ease}
a{color:var(--text);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:#0b0d10}

/* ── Nav ───────────────────────────────────────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 32px;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-logo{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:.02em;color:var(--text)}
.nav-menu{display:flex;align-items:center;gap:26px;font-size:14px}
.nav-link{color:var(--muted);transition:color .2s}
.nav-link:hover,.nav-link.active{color:var(--accent)}
.theme-btn{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;
  transition:border-color .2s,color .2s;
}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Hamburger button — hidden on desktop */
.nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;width:32px;height:32px;
}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}

/* ── Container ─────────────────────────────────────────────────────────── */
.container{max-width:1080px;margin:0 auto;padding:0 32px}

/* ── Hero layout ───────────────────────────────────────────────────────── */
.hero-inner{
  padding:140px 32px 80px;max-width:1080px;margin:0 auto;width:100%;box-sizing:border-box;
  display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;
}
.hero-portrait{position:relative;width:300px;height:300px;justify-self:end;flex-shrink:0}

/* ── Hover utilities ───────────────────────────────────────────────────── */
.cta-primary:hover{filter:brightness(1.08)}
.cta-secondary:hover{border-color:var(--accent)!important;color:var(--accent)!important}
.project-card:hover{transform:translateY(-4px);border-color:var(--accent)!important}
.social-link:hover{color:var(--text)!important}

/* ── About strip (home page) ───────────────────────────────────────────── */
.about-grid{
  max-width:1080px;margin:0 auto;padding:80px 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
}

/* ── Project cards (projects page) ────────────────────────────────────── */
.proj-outer{max-width:1080px;margin:0 auto;padding:20px 32px}
.proj-outer-first{padding-top:50px}
.proj-outer-last{padding-bottom:90px}

.proj-card{
  display:grid;gap:44px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:36px;
}
.proj-card-lr{grid-template-columns:1.1fr 1fr}
.proj-card-rl{grid-template-columns:1fr 1.1fr}

/* ── Slideshow ─────────────────────────────────────────────────────────── */
.slideshow{
  position:relative;width:100%;aspect-ratio:16/10;
  border-radius:12px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);
}
.slideshow img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .55s ease;pointer-events:none;
}
.slideshow img.ss-active{opacity:1}
.ss-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.ss-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.3);border:none;padding:0;cursor:pointer;
  transition:background .2s,transform .2s;
}
.ss-dot.ss-active{background:var(--accent);transform:scale(1.3)}
.ss-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.55);color:#fff;border:none;
  border-radius:50%;width:34px;height:34px;font-size:18px;
  cursor:pointer;opacity:0;transition:opacity .2s;z-index:3;
  display:flex;align-items:center;justify-content:center;
}
.slideshow:hover .ss-arrow{opacity:1}
.ss-arrow:hover{background:rgba(0,0,0,.8)}
.ss-prev{left:10px}
.ss-next{right:10px}

/* ── Shot placeholder ──────────────────────────────────────────────────── */
.shot-placeholder{
  width:100%;aspect-ratio:16/10;border-radius:12px;
  background:var(--surface);border:1px dashed var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--muted);
}

/* ── About page layouts ────────────────────────────────────────────────── */
.profile-header{
  max-width:1080px;margin:0 auto;padding:150px 32px 60px;
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;
}
.bio-grid{
  max-width:1080px;margin:0 auto;padding:0 32px 70px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start;
}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line)}
.footer-inner{
  max-width:1080px;margin:0 auto;padding:36px 32px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:18px;
}
.footer-links{display:flex;gap:22px;font-family:'JetBrains Mono',monospace;font-size:12px}

/* ━━━━━━━━━━━━━━━━━━━━━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tablet — 768px */
@media(max-width:768px){
  /* Container */
  .container{padding:0 20px}

  /* About page 3-col → 1-col */
  .three-col{grid-template-columns:1fr}

  /* About page bio grid → stack */
  .bio-grid{grid-template-columns:1fr;gap:32px;padding:0 20px 50px}
}

/* Mobile — 640px */
@media(max-width:640px){
  /* ── Nav ── */
  .site-header{padding:13px 20px}

  /* Slide the nav menu down as a drawer */
  .nav-menu{
    display:none;
    flex-direction:column;align-items:flex-start;
    position:fixed;top:49px;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:22px 20px;gap:22px;z-index:49;
    box-shadow:0 12px 32px rgba(0,0,0,.35);
  }
  .nav-menu.open{display:flex}
  .nav-hamburger{display:flex}

  /* ── Hero ── */
  .hero-inner{
    grid-template-columns:1fr;gap:40px;
    padding:100px 20px 60px;
  }
  /* Move portrait below text and centre it */
  .hero-portrait{
    width:200px;height:200px;
    justify-self:center;order:2;
  }

  /* ── Home project preview ── */
  .proj-preview-header{flex-direction:column;gap:10px;align-items:flex-start!important}

  /* ── About strip (home) ── */
  .about-grid{grid-template-columns:1fr;gap:28px;padding:50px 20px}

  /* ── Projects page ── */
  .proj-outer{padding-left:16px;padding-right:16px}
  .proj-outer-first{padding-top:30px}
  .proj-outer-last{padding-bottom:60px}

  /* Stack project cards, image on top regardless of L/R layout */
  .proj-card{grid-template-columns:1fr!important;gap:24px;padding:22px}
  /* For RL cards (text first in HTML), swap order so image leads on mobile */
  .proj-card-rl>.proj-info{order:1}
  .proj-card-rl>.proj-visual{order:0}

  /* ── About page ── */
  .profile-header{
    grid-template-columns:1fr;gap:24px;
    padding:100px 20px 40px;
    justify-items:center;text-align:center;
  }
  .bio-grid{padding:0 16px 40px}

  /* ── Footer ── */
  .footer-inner{flex-direction:column;align-items:flex-start;padding:24px 20px;gap:14px}
  .footer-links{flex-wrap:wrap;gap:14px}
}

/* Small phones — 400px */
@media(max-width:400px){
  .hero-inner{padding:90px 16px 50px}
  .about-grid{padding:40px 16px}
  .proj-card{padding:18px}
}