/* ---------- Theme ---------- */
:root{
  --bg:#0f1115;
  --panel:#1b1f2aee;
  --panel2:#161a23ee;
  --text:#e8ecf1;
  --muted:#a9b3c1;
  --accent:#4ea1ff;
  --line:#202636;

  /* Right photo rail controls */
  --sidephoto-w: clamp(240px, 21vw, 320px); /* rail width on desktop */
  --sidephoto-shift: 150px;                  /* slide image left inside rail */
  --sidephoto-fade: 92%;                     /* mask fade extent */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
  overflow-y:auto;
  min-height:100svh;
}

/* ---------- Background canvas ---------- */
#bg{position:fixed; inset:0; z-index:0; pointer-events:none}

/* ---------- Sidebar (desktop left, mobile top) ---------- */
.sidebar{
  position:fixed; left:0; top:0; bottom:0;
  width:min(320px,92vw);
  padding:28px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  backdrop-filter:saturate(120%) blur(2px);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; z-index:3;
  text-align:center;
}

.avatar{
  width:110px; aspect-ratio:1/1; border-radius:50%;
  object-fit:cover; object-position:50% 40%;
  border:2px solid #2b3448;
  box-shadow:0 0 0 4px #111825,0 6px 16px rgba(0,0,0,.25);
  margin:6px auto 8px;
}
h1{font-size:1.4rem; margin:.25rem 0 .15rem}
.title{color:var(--muted); font-size:.95rem}
.location{color:var(--muted); font-size:.9rem}

.links{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.links a{
  display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none;
  color:var(--text); background:#1f2738; border:1px solid #283249;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.links a:hover{transform:translateY(-1px); border-color:#3a4764}

/* ---------- Main content ---------- */
.main{
  position:relative; z-index:2;
  margin-left:min(320px,92vw);
  padding:28px 28px 120px; /* extra bottom room for open dropdowns */
  margin-right:0;          /* set on wide screens below */
}

.hero h2{font-size:28px; margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.panel{margin-top:18px}
.panel h3{margin:14px 0 6px; font-size:20px}

/* ---------- Accordion (details/summary) ---------- */
.accordion{
  border:1px solid #273142;
  border-radius:12px;
  background:#0f131a;
  overflow:hidden;
  margin-bottom:16px;
}
.accordion > summary{
  list-style:none; cursor:pointer;
  padding:14px 16px; font-weight:700; color:#d7e1f2;
  display:flex; align-items:center; gap:10px;
}
.accordion > summary::before{
  content:""; width:10px; height:10px;
  border-right:2px solid #8fa7c7; border-bottom:2px solid #8fa7c7;
  transform:rotate(-45deg); transition:transform .2s ease; margin-right:4px;
}
.accordion[open] > summary::before{ transform:rotate(45deg); }
.accordion .acc-body{ padding:12px 16px 16px; border-top:1px solid #273142; }

/* ---------- Project list (nested dropdowns) ---------- */
.project-list{
  list-style:none; padding:0; margin:2px 0 0; display:grid; gap:10px;
}
.project{
  border:1px solid #273142;
  border-radius:10px;
  background:#0b1016;
  overflow:hidden;
}
.project > details > summary{
  list-style:none; cursor:pointer; display:grid;
  grid-template-columns: 16px 1fr auto; /* arrow | title | skills (meta) */
  align-items:center; gap:10px; padding:12px 12px;
  font-weight:600; color:#e3eaf6;
}
.project > details > summary::-webkit-details-marker{display:none}
.project > details[open] > summary{ background:#0e141c; }

/* Arrow indicator */
.project > details > summary .arrow{
  display:inline-block; width:0; height:0; margin-right:2px;
  border-left:6px solid #8fa7c7;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transition:transform .2s ease;
}
.project > details[open] > summary .arrow{ transform:rotate(90deg); }

.project .title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.project .meta{color:var(--muted); font-weight:500; font-size:.9rem}

.project-body{
  display:grid; gap:12px; padding:12px;
  grid-template-columns: 1fr minmax(160px, 260px);
  border-top:1px solid #273142;
}
.project-text p{margin:.15rem 0 .35rem}

.project-thumb{
  margin:0; align-self:start; border-radius:10px; overflow:hidden;
  background:#0c121a; border:1px solid #273142;
}
.project-thumb img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  filter:saturate(1.02) contrast(1.05);
}

/* ---------- Phone / small screens ---------- */
@media (max-width:900px){
  .sidebar{
    position:static; width:100%;
    border-right:none; border-bottom:1px solid var(--line);
    padding:18px 16px; align-items:center;
  }
  .links{flex-direction:row; width:100%; max-width:520px}
  .links a{flex:1; text-align:center}

  .main{ margin-left:0; margin-right:0; padding:18px 16px 100px; }
  .sidephoto{ display:none; } /* hide decorative photo on phones */
}
@media (max-width:720px){
  .project-body{ grid-template-columns: 1fr; }
}

/* ---------- Right-side “cinematic” photo panel ---------- */
.sidephoto{
  position:fixed; right:0; top:0; bottom:0;
  width:var(--sidephoto-w);
  overflow:hidden;
  z-index:1;
  border-left:1px solid rgba(255,255,255,.08);
  background:#0f1115;
  box-shadow:inset 12px 0 24px rgba(0,0,0,.35);
  isolation:isolate;
}
/* Slide the image left inside the rail so you're centered in-frame */
.sidephoto > img{
  position:absolute; top:0; left:0;
  height:100%;
  width:auto;                /* keep natural aspect */
  min-width: calc(100% + var(--sidephoto-shift)); /* avoid gaps when sliding */
  object-fit:cover;
  object-position:center center;
  transform: translateX(calc(-1 * var(--sidephoto-shift)));
  filter:saturate(1.02) contrast(1.05) brightness(.98);
}

/* Soft overlays & feathered inner edge */
.sidephoto::after,
.sidephoto::before{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.sidephoto::after{
  background:linear-gradient(180deg,
    rgba(15,17,21,.38) 0%,
    rgba(15,17,21,0) 18%,
    rgba(15,17,21,0) 82%,
    rgba(15,17,21,.38) 100%);
}
.sidephoto::before{
  background:linear-gradient(90deg,
    rgba(15,17,21,.65) 0%,
    rgba(15,17,21,.42) 26%,
    rgba(15,17,21,.20) 54%,
    rgba(15,17,21,0) 100%);
  mix-blend-mode:multiply;
}

/* Smooth mask fade on modern browsers */
@supports (mask-image: linear-gradient(#000,#000)){
  .sidephoto{
    mask-image: linear-gradient(to left, #000 var(--sidephoto-fade), rgba(0,0,0,0));
  }
}

/* ---------- Keep content clear of the rail on wide screens ---------- */
@media (min-width:901px){
  .main{ margin-right: calc(var(--sidephoto-w) + 24px); }
}