/* ========= THEME TOKENS ========= */
:root{
  --brand-1:#7b6cf6;
  --brand-2:#9b86ff;
  --ink-1:#0f1222;
  --ink-2:#374059;
  --line:#e6e7ee;
  --panel-alpha:rgba(255,255,255,.86);
  --panel-shadow:0 10px 28px rgba(12,18,46,.12);
  --radius-lg:16px;
  --radius-md:12px;
}

/* ========= BASE ========= */
html{font-size:16px;}
body{
  font-family:"Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink-2); line-height:1.6; background:#061a2a; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Full-page background */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:url('/images/background.jpg') center/cover no-repeat;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 15% 10%, rgba(123,108,246,.20), transparent 60%),
    radial-gradient(50vmax 50vmax at 85% 20%, rgba(0,208,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.24));
}

/* Hide theme header */
.page-header{display:none;}
.page-content .inner{padding:16px;}

/* Panels */
.panel{
  background:var(--panel-alpha);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px; margin:14px 0;
  box-shadow:var(--panel-shadow);
  -webkit-backdrop-filter:blur(6px) saturate(1.05);
  backdrop-filter:blur(6px) saturate(1.05);
}
.panel h2{ color:var(--ink-1); font-weight:700; font-size:1.35rem; margin:0 0 10px; }

/* ========= HERO ========= */
.hero-banner{ position:relative; margin:18px 0 16px; border-radius:20px; overflow:hidden; box-shadow:0 18px 38px rgba(8,12,28,.28); border:1px solid rgba(255,255,255,.14); }
.hero-img{ display:block; width:100%; height:clamp(320px,42vw,520px); object-fit:cover; }
.hero-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(12px,3vw,24px); }
.hero-title{ margin:clamp(8px,2vw,16px); font-weight:800; font-size:clamp(1.6rem,3.6vw,3rem); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.hero-subtext{ margin:clamp(8px,2vw,16px); max-width:520px; font-size:clamp(1rem,2vw,1.2rem); color:#fff; font-weight:600; line-height:1.4; text-shadow:0 2px 8px rgba(0,0,0,.6); }

/* ========= CENTER GRID ========= */
.intro-grid{ display:grid; grid-template-columns:35% 65%; gap:0; position:relative; align-items:stretch; }

/* Divider (default) */
.intro-grid::before{
  content:""; position:absolute; top:0; bottom:0; left:35%;
  width:1px; background:var(--line);
}

/* LEFT COLUMN */
.intro-left{ padding:18px; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; }
.top-group{ display:flex; flex-direction:column; align-items:center; text-align:center; overflow:visible; }
.profile-pic{ width:260px; height:260px; object-fit:cover; border-radius:50%; margin-bottom:10px; box-shadow:var(--panel-shadow); }
.profile-name{ margin:0; font-weight:700; color:#0f1222; }
.profile-title{ margin:4px 0 6px; color:#6b6f84; }

/* Degrees under title */
.degrees-block{ color:#6b6f84; font-size:inherit; font-style:italic; margin:0 0 12px; }
.profile-deg{ margin:0; font-style:inherit; color:inherit; }

/* Contact */
.contact-block{ margin-top:auto; width:100%; display:flex; flex-direction:column; align-items:center; }
.contact-label{ margin:0 0 6px; font-style:italic; color:#6b6f84; text-align:center; }
.contact-bar{ width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.contact-btn{ display:grid; place-items:center; height:78px; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; color:#20243a; text-decoration:none; box-shadow:var(--panel-shadow); }
.contact-btn i{ font-size:32px; }

/* RIGHT COLUMN */
.intro-right{ padding:18px; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box; }
.about-inner{ max-width:720px; margin:0 0 12px 0; }
.about-sep{ border:none; border-top:1px solid var(--line); margin:8px 0 12px; }

/* TROPHY (transparent) */
.trophy-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0; padding:0; }
.trophy-badge{ display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0; background:transparent!important; border:0!important; box-shadow:none!important; }
.trophy-img{ display:block; height:80px; width:auto; object-fit:contain; background:transparent!important; border:0!important; box-shadow:none!important; }

/* ========= PROJECTS GRID ========= */
.projects-panel{ padding:16px 16px 20px; }
.projects-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }

.project-card{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 14px 32px rgba(12,18,46,.18);
  background:#0e1530; cursor:default;
}
.project-hero{ width:100%; height:clamp(220px,26vw,300px); object-fit:cover; object-position:center center; display:block; }
.project-corner{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.45);
  color:#fff; font-weight:800; font-size:.9rem; border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
}
.project-overlay{
  position:absolute; inset:auto 0 0 0; padding:16px 16px 14px;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45);
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.65) 100%);
}
.project-title{ margin:0 0 6px; font-weight:800; font-size:1.1rem; }
.project-blurb{ margin:0 0 10px; font-weight:600; font-size:.98rem; opacity:.95; }
.project-ctas{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pill-btn{
  display:inline-flex; align-items:center; gap:6px; padding:8px 12px;
  border-radius:999px; background:#ffffff; color:#20243a; text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.75);
  transition:transform .08s ease, filter .15s ease;
}
.pill-btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.pill-btn.pill-ghost{ background:transparent; color:#ffffff; border:1px solid rgba(255,255,255,.9); }
.pill-btn.pill-ghost:hover{ background:rgba(255,255,255,.1); }

/* ========= RESPONSIVE ========= */
/* Compressed desktop & tablet */
@media (max-width:900px){
  .hero-img{ height:clamp(320px,64vw,520px); object-position:center top; }

  .intro-grid{ grid-template-columns:1fr; }
  .intro-grid::before{ display:none; }  /* no vertical divider when stacked */

  .intro-left{ order:1; padding:14px 12px 0; }
  .profile-pic{ width:min(280px,70vw); height:auto; aspect-ratio:1/1; }

  .intro-right{ order:2; padding:6px 12px 0; position:relative; }

  /* Faint divider between contact tiles and About Me */
  .intro-right::before{
    content:""; display:block; height:1px; background:rgba(255,255,255,.55);
    margin:16px 0; border-radius:1px;
  }

  /* Faint + symmetric About↔Trophy divider */
  .about-sep{ border-top:1px solid rgba(255,255,255,.55); margin:16px 0 !important; }

  .about-inner p:last-of-type{ margin-bottom:0; }

  .trophy-img{ height:74px; }

  .projects-grid{ grid-template-columns:1fr; }
  .project-hero{ height:240px; }
}

/* Mobile */
@media (max-width:600px){
  .intro-right{ position:relative; }
  .intro-right::before{
    content:""; display:block; height:1px; background:rgba(255,255,255,.55);
    margin:16px 0; border-radius:1px;
  }
  .about-sep{ border-top:1px solid rgba(255,255,255,.55); margin:16px 0 !important; }
}

@media (max-width:420px){
  .trophy-img{ height:68px; }
  .project-title{ font-size:1.05rem; }
  .project-blurb{ font-size:.95rem; }
}

/* ========= DESKTOP-ONLY (>=901px) ========= */
@media (min-width:901px){
  .intro-grid{ grid-template-columns:minmax(360px, 35%) 1fr; }

  /* Remove absolute divider and draw it on the column edge
     so it always sits perfectly between columns */
  .intro-grid::before{ display:none; }

  .intro-left{
    border-right:1px solid var(--line);
    padding-right:24px;

    /* Center the whole stack vertically */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

  .intro-right{ padding-left:24px; padding-right:18px; }

  .profile-pic{
    width:clamp(300px, 32vw, 360px);
    max-width:calc(100% - 28px);
    height:auto; aspect-ratio:1/1;
  }

  .profile-name{ margin:0 0 6px 0; }
  .profile-title{ margin:0 0 12px 0; color:#505765; }
  .degrees-block{ margin:0 0 12px; }
  .contact-block{ margin-top:0; }
}