:root{
      --bg: #0a192f;          /* dark paper */
      --surface: #0e2242;
      --text: #ccd6f6;        /* dark ink */
      --muted: #8892b0;
      --accent: #64ffda;      /* teal */
      --line: #233554;
      --shadow: 0 10px 30px -10px rgba(2,12,27,0.7);

      --bg-light: #e6f1ff;    /* light paper */
      --text-light: #0a192f;  /* light ink */
      --muted-light: #405678;
      --line-light: #c6d6f3;

      --maxw: 1100px;
      --pad: 24px;
      --radius: 14px;

      --h1: clamp(36px, 6vw, 56px);
      --h2: clamp(22px, 3vw, 30px);
      --h3: clamp(18px, 2.2vw, 22px);
      --h4: clamp(18px, 2.2vw, 22px);
      --p: 16px;
    }
    h4 {
      font-size: var(--h4);
      text-align: center;
    } 
    /* Light theme when data-theme="light" on body */
    body[data-theme="light"]{
      --bg: var(--bg-light);
      --text: var(--text-light);
      --muted: var(--muted-light);
      --line: var(--line-light);
      --surface: #ffffff;
      --shadow: 0 10px 30px -10px rgba(10,25,47,0.2);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      background: var(--bg);
      color: var(--text);
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
    .sr-only{position:absolute!important;left:-9999px}
    /* Header / Nav */
    header{
      position:sticky;top:0;z-index:50;
      backdrop-filter:saturate(180%) blur(8px);
      background: color-mix(in oklab, var(--bg) 85%, transparent);
      border-bottom:1px solid var(--line);
    }
    .nav{
      display:flex;align-items:center;justify-content:space-between;
      height:64px;
    }
    .brand{display:flex;align-items:center;gap:12px;font-weight:700}
    .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}
    .nav ul a,.nav ul button{font-weight:600;color:inherit;background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit}
    .nav ul button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
    .nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
    .nav ul>li{position:relative;display:flex;align-items:center;gap:6px}
    .nav ul a:hover,.nav ul button:hover{color:var(--accent)}
    .dropdown-toggle{font-size:14px;color:var(--muted);transition:color .2s ease;display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px}
    .dropdown-toggle .chevron{transition:transform .2s ease}
    .dropdown.open>.dropdown-toggle{color:var(--accent)}
    .dropdown.open .dropdown-toggle .chevron{transform:rotate(-180deg)}
    .dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:10px;min-width:220px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:60}
    .dropdown.open>.dropdown-menu{opacity:1;transform:translateY(0);pointer-events:auto}
    .dropdown-menu li+li{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
    .dropdown-link{padding:8px 14px;border-radius:6px;display:block;color:inherit;font-weight:500}
    .dropdown-link:hover{background: color-mix(in oklab, var(--accent) 14%, transparent);color:var(--accent)}
    .dropdown-link[aria-current="page"]{color:var(--accent);font-weight:600}
    .right-actions{display:flex;align-items:center;gap:14px}
    .toggle{
      display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 10px;border-radius:999px;cursor:pointer
    }
    .toggle i{color:var(--accent)}
    .resume-btn{
      border:1px solid var(--accent);color:var(--accent);padding:6px 12px;border-radius:8px;font-weight:600
    }
    .resume-btn:hover{background: color-mix(in oklab, var(--accent) 12%, transparent)}
    /* Hero-ish header area (About top) */
    .hero{padding:92px 0 40px}
    .kicker{color:var(--accent);font-family:"Space Grotesk", Inter, sans-serif;font-size:var(--h3);letter-spacing:.02em}
    h1{font-family:"Space Grotesk", Inter, sans-serif;font-size:var(--h1);line-height:1.1;margin:.2em 0}
    .tagline{font-size:var(--h2);color:var(--muted);margin:0 0 12px}
    .lead{font-size:18px;color:var(--muted);max-width:780px}
    .grid-2{
      display:grid;grid-template-columns:2fr 1fr;gap:36px;align-items:start;margin-top:28px
    }
    .card{
      background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px
    }
    .headshot{
      aspect-ratio:4/5;border-radius:12px;border:1px solid var(--line);
      background:
        url('https://lh3.googleusercontent.com/a/ACg8ocIdlkPl1-panunokgS-H5XRrAJIgG5utNVRfTuJ1MblQxqQnHOCiaXl9Sl6AG0LVHASE-ccZDe4BbmTg1N0OpkrvU9eDbdD=s576-c-no') center/cover no-repeat;
      position:relative;overflow:hidden
    }

    /* Section Shared */
    section{scroll-margin-top:84px;padding:40px 0}
    .section-title{
      display:flex;align-items:center;gap:12px;margin-bottom:18px;font-family:"Space Grotesk", Inter, sans-serif
    }
    .section-title .num{color:var(--accent);font-weight:700}
    .section-title .rule{flex:1;height:1px;background:var(--line)}
    .section-intro{color:var(--muted);max-width:820px;margin-bottom:16px}

    /* Experience */
    .timeline{display:grid;gap:16px}
    .job{display:grid;gap:8px;padding:18px;border:1px solid var(--line);border-radius:12px;background: color-mix(in oklab, var(--surface) 90%, transparent)}
    .job-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
    .job h3{margin:0;font-size:18px}
    .job .meta{color:var(--muted);font-size:14px}
    .job ul{margin:8px 0 0 20px}
    .job li{margin:6px 0}
    .job a{color:var(--accent)}

    /* Projects */
    .projects{
        display:grid;
        gap:80px;
    }
    .project {
        display: grid;
        grid-template-columns: minmax(0, 320px) 1fr;
        gap: 90px;
        align-items: center;
    }

    .p-image {
      display: flex;
      gap: 12px;
      max-width: 600px;
      margin: 18px auto;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      overflow: hidden;
    }
    .img-crop {
    flex: 1 1 0;
    max-width: 700px;/* Adjust as needed for your images */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .p-image img {
      flex: 1 1 0;
      min-width: 0; /* allow flex children to shrink properly */
      height: auto;
      display: block;
      object-fit: cover;
      border-radius: 8px;
    }
    .img-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1 1 0;
      min-width: 0;
      height: 100%;
    }

    .img-stack img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      display: block;
    }

    /* Responsive: stack on mobile */
    @media (max-width: 920px) {
        .project {
        grid-template-columns: 1fr;
    }
    .p-image {
        max-width: 100%;
        margin-bottom: 18px;
    }
    }
    .p-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .project-title{font-size:22px;margin:0}
    .project-desc{color:var(--muted)}
    .tech{display:flex;flex-wrap:wrap;gap:10px}
    .chip{border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-size:13px;color:var(--muted)}
    .p-links{display:flex;gap:12px;margin-top:6px}
    .icon-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 10px;border-radius:8px}
    .icon-btn i{color:var(--accent)}

    /* Footer / CTA */
    footer{padding:40px 0 70px;text-align:center;color:var(--muted)}
    .cta{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--accent);padding:10px 16px;border-radius:10px;color:var(--accent);font-weight:600}
    .cta:hover{background: color-mix(in oklab, var(--accent) 12%, transparent)}

    /* Back to top */
    .backtotop{
      position:fixed;right:16px;bottom:16px;z-index:40;opacity:0;pointer-events:none;transform:translateY(12px);
      transition:opacity .2s ease, transform .2s ease;
    }
    .backtotop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
    .fab{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:var(--bg);box-shadow:var(--shadow);border:0;cursor:pointer}

    /* Scroll reveal */
    .reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease}
    .reveal.in{opacity:1;transform:translateY(0)}

    /* Nav active link */
    .nav a.active{color:var(--accent)}

    /* Responsive */
    @media (max-width: 920px){
      .grid-2{grid-template-columns:1fr}
      .project:nth-child(odd) .p-image,
      .project:nth-child(odd) .p-copy,
      .project:nth-child(even) .p-image,
      .project:nth-child(even) .p-copy{grid-column:1/-1}
      .p-copy{order:2}
      .p-image{order:1;min-height:200px}
    }
/* ===== Project Detail Pages ===== */

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

.project-header { padding-top: 84px; } /* space under sticky nav */
.project-title {
  display: flex; align-items: center; gap: 12px;
  font-family: "Space Grotesk", Inter, sans-serif;
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 40px);
}
.project-title .num { color: var(--accent); font-weight: 700; }
.project-title .rule { flex: 1; height: 1px; background: var(--line); }

.project-sub { color: var(--muted); margin: 6px 0 22px; }

.project-hero {
  max-width: 700px;
  margin-left: auto; margin-right: auto;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow); margin-bottom: 24px;
}
.project-hero img { width: 100%; height: auto; display: block; }

.project-grid {
  display: block; /* Use block layout for full width */
  margin-top: 5px;
}


/* keep the build-spec card from stretching and align to top */
.build-spec { align-self: start; }
.build-spec .meta-card { margin: 0; }

/* responsive: stack on small screens */
@media (max-width: 920px) {
  .project-grid { grid-template-columns: 1fr; }
  .project-grid.layout-spec-right { grid-template-columns: 1fr; }
  .build-spec { order: 2; } /* show spec after overview on narrow screens */
}

.prose { color: var(--text); line-height: 1.75; }
.prose p { margin: 0 0 14px; }
.prose h3 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: var(--h3); margin: 18px 0 8px;
}
.prose ul { margin: 8px 0 16px 20px; }
.prose li { margin: 6px 0; color: var(--muted); }

.meta-card {
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
}
.meta-card h4 {
  margin: 0 0 10px; font-size: 16px; color: var(--muted);
  font-family: "Space Grotesk", Inter, sans-serif;
}
.meta-list { display: grid; gap: 8px; }
.meta-list .chip {
  display: inline-block; border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 13px;
}

.project-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.icon-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 8px 12px; border-radius: 10px; }
.icon-btn i { color: var(--accent); }

/* Back link */
.backlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; }
.backlink i { color: var(--accent); }

/* Optional gallery (reuse across pages) */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.gallery img { width: 100%; border-radius: 10px; border: 1px solid var(--line); }
@media (max-width: 680px) { .gallery { grid-template-columns: 1fr 1fr; } }