/* ============================================================
   DOSSIER — token system
   ============================================================ */
:root{
  --bg-void:      #101109;
  --bg-void-2:    #0c0d07;
  --bg-panel:     rgba(232, 229, 214, 0.035);
  --bg-panel-hi:  rgba(232, 229, 214, 0.06);
  --hairline:     rgba(201, 198, 181, 0.14);
  --hairline-hi:  rgba(201, 198, 181, 0.28);

  --ink:          #e7e3d4;
  --ink-dim:      #8f8c7c;
  --ink-faint:    #5c5a4d;

  --accent:       #a3813f;
  --accent-hi:    #c69c56;
  --accent-dim:   #6b5636;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  --nav-w: 220px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(163,129,63,0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(232,229,214,0.03), transparent 55%),
    var(--bg-void);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   GRAIN + PARTICLES — signature texture layer
   ============================================================ */
.grain-svg{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:2; opacity:0.05; mix-blend-mode:overlay;
}
#particleCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:3;
}

/* ============================================================
   LEDGER NAV — left tab rail
   ============================================================ */
.ledger-nav{
  position:fixed; left:0; top:0; bottom:0; width:var(--nav-w);
  border-right:1px solid var(--hairline);
  background:linear-gradient(180deg, rgba(16,17,9,0.6), rgba(16,17,9,0.35));
  backdrop-filter:blur(18px) saturate(105%);
  -webkit-backdrop-filter:blur(18px) saturate(105%);
  z-index:50;
  display:flex; flex-direction:column;
  padding:32px 0 24px;
}
.ledger-mark{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.25em; color:var(--accent-hi);
  padding:0 28px 24px; border-bottom:1px solid var(--hairline);
  margin-bottom:8px;
}
.ledger-nav ul{ list-style:none; margin:0; padding:0; flex:1; }
.ledger-link{
  display:flex; align-items:center; gap:14px;
  padding:13px 28px;
  text-decoration:none; color:var(--ink-faint);
  border-left:2px solid transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  position:relative;
}
.ledger-link:hover{ color:var(--ink-dim); background:var(--bg-panel); }
.ledger-link.active{ color:var(--ink); border-left-color:var(--accent); background:var(--bg-panel-hi); }
.ledger-link.active .tab-num{ color:var(--accent-hi); }
.tab-num{
  font-family:var(--font-mono); font-size:10px; color:var(--ink-faint);
  transition:color .35s var(--ease);
}
.tab-name{ font-size:13px; letter-spacing:0.03em; }
.ledger-status{
  padding:16px 28px 0; margin-top:8px; border-top:1px solid var(--hairline);
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.18em; color:var(--ink-faint);
}
.status-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent-hi);
  box-shadow:0 0 8px 1px var(--accent-hi);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
main{
  margin-left:var(--nav-w);
  padding:0 clamp(24px, 5vw, 72px);
  max-width:1180px;
}
.section{
  min-height:100vh;
  padding:90px 0 60px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
  z-index:5;
}
.cover-section{ min-height:100vh; }

.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em;
  color:var(--accent-hi); text-transform:uppercase; margin:0 0 10px;
}
.section-note{
  font-size:12.5px; color:var(--ink-faint); font-style:italic; margin:-8px 0 28px;
}

.section-head{
  display:flex; align-items:flex-start; gap:22px;
  margin-bottom:40px;
  border-bottom:1px solid var(--hairline);
  padding-bottom:24px;
}
.tab-num-lg{
  font-family:var(--font-mono); font-size:34px; font-weight:400;
  color:var(--ink-faint); line-height:1; padding-top:6px;
}
.section-title{
  font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.4vw,42px);
  margin:0; color:var(--ink); letter-spacing:-0.01em;
}

/* ============================================================
   GLASS PANEL — blur-to-clear focus-pull
   ============================================================ */
.panel{
  background:var(--bg-panel);
  border:1px solid var(--hairline);
  border-radius:3px;
  backdrop-filter:blur(14px) saturate(100%);
  -webkit-backdrop-filter:blur(14px) saturate(100%);
  padding:32px clamp(20px, 3vw, 40px);
  position:relative;

  /* focus-pull default state: soft, hazy, receded */
  filter:blur(6px);
  opacity:0;
  transform:translateY(26px) scale(0.985);
  transition:
    filter 1.1s var(--ease),
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease),
    border-color .4s ease,
    background .4s ease;
}
.panel::before{
  content:"";
  position:absolute; inset:0; border-radius:3px;
  background:linear-gradient(135deg, rgba(232,229,214,0.05), transparent 40%);
  pointer-events:none; opacity:0.6;
}
.panel.in-view{
  filter:blur(0px);
  opacity:1;
  transform:translateY(0) scale(1);
}
.panel:hover{
  border-color:var(--hairline-hi);
  background:var(--bg-panel-hi);
}

/* stagger children of multi-panel sections */
.timeline-item:nth-of-type(2){ transition-delay:0.12s; }
.ref-card:nth-of-type(2){ transition-delay:0.08s; }
.ref-card:nth-of-type(3){ transition-delay:0.16s; }
.ref-card:nth-of-type(4){ transition-delay:0.24s; }
.skills-col:nth-of-type(2){ transition-delay:0.1s; }
.skills-col:nth-of-type(3){ transition-delay:0.2s; }

/* ============================================================
   COVER
   ============================================================ */
.cover-panel{ padding:0; overflow:hidden; }
.cover-grid{
  display:grid; grid-template-columns:260px 1fr; gap:0;
}
.cover-photo-wrap{
  padding:40px; border-right:1px solid var(--hairline);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:linear-gradient(180deg, rgba(232,229,214,0.03), transparent);
}

.placeholder-image{
  width:200px; height:240px;
  border:1px solid var(--hairline-hi);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--ink-faint);
  background:repeating-linear-gradient(135deg, rgba(232,229,214,0.02) 0 2px, transparent 2px 10px);
  gap:10px;
  position:relative;   /* NEW */
  overflow:visible;    /* NEW */
}
.placeholder-icon{ width:70%; height:auto; opacity:0.7; }

/* main portrait photo — fills the placeholder box */
.cover-photo-main{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 0.3s var(--ease);
  z-index:1;
}
.placeholder-image.has-main-photo .cover-photo-main{ opacity:1; }
.placeholder-image.has-main-photo .placeholder-icon{ display:none; }

/* small rounded badge photo, overlapping bottom-right corner */
.cover-photo-badge{
  position:absolute;
  bottom:-10px; right:-10px;
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--bg-void);
  background:var(--bg-void);
  box-shadow:0 2px 10px rgba(0,0,0,0.45);
  opacity:0;
  transition:opacity 0.3s var(--ease);
  z-index:2;
}.placeholder-caption{
  font-family:var(--font-mono); font-size:9px; letter-spacing:0.15em; color:var(--ink-faint);
}
.upload-hint{
  background:none; border:none; color:var(--ink-faint);
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.05em;
  cursor:default; text-decoration:underline dotted var(--ink-faint); text-underline-offset:3px;
}
.cover-copy{ padding:52px 48px 52px 44px; }
.cover-name{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(38px, 5vw, 60px); line-height:1.03;
  margin:0 0 14px; letter-spacing:-0.015em;
}
.cover-role{ font-size:16px; color:var(--ink); margin:0 0 4px; }
.cover-location{ font-size:13px; color:var(--ink-faint); margin:0; font-family:var(--font-mono); letter-spacing:0.04em; }
.cover-divider{ width:52px; height:1px; background:var(--accent-dim); margin:22px 0; }
.cover-summary{ max-width:52ch; color:var(--ink-dim); font-size:14.5px; line-height:1.7; margin:0 0 30px; }
.cover-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; font-size:13px; letter-spacing:0.03em;
  text-decoration:none; border-radius:2px; font-family:var(--font-body); font-weight:500;
  transition:all .3s var(--ease); border:1px solid transparent;
}
.btn-primary{
  background:var(--accent); color:#141508;
  box-shadow:0 0 0 0 rgba(163,129,63,0);
}
.btn-primary:hover{ background:var(--accent-hi); box-shadow:0 4px 22px -4px rgba(198,156,86,0.45); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--hairline-hi); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--accent-hi); color:var(--accent-hi); }
.btn-icon{ width:14px; height:14px; }

/* ============================================================
   TIMELINE (Experience)
   ============================================================ */
.timeline{ display:flex; flex-direction:column; gap:26px; }
.timeline-item{ padding-left:44px; }
.timeline-marker{
  position:absolute; left:20px; top:36px;
  width:9px; height:9px; border-radius:50%;
  background:var(--bg-void); border:2px solid var(--accent-hi);
}
.timeline-meta{ display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.meta-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:0.04em; }
.meta-status{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.12em; padding:3px 9px; border-radius:20px;
}
.status-current{ background:rgba(163,129,63,0.16); color:var(--accent-hi); border:1px solid var(--accent-dim); }
.status-progress{ background:rgba(163,129,63,0.16); color:var(--accent-hi); border:1px solid var(--accent-dim); }
.timeline-role{ font-family:var(--font-display); font-size:21px; font-weight:500; margin:0 0 3px; }
.timeline-org{ font-size:13.5px; color:var(--ink-dim); margin:0 0 14px; }
.timeline-desc{ font-size:14px; color:var(--ink-dim); line-height:1.7; max-width:62ch; margin:0 0 16px; }
.timeline-tags{ list-style:none; display:flex; gap:8px; flex-wrap:wrap; padding:0; margin:0 0 8px; }
.timeline-tags li{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.04em;
  color:var(--ink-faint); border:1px solid var(--hairline); padding:4px 10px; border-radius:20px;
}

/* download links */
.doc-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:10px;
  padding:10px 16px; border:1px dashed var(--hairline-hi); border-radius:2px;
  text-decoration:none; color:var(--ink); font-size:13px;
  transition:all .3s var(--ease); background:rgba(232,229,214,0.015);
}
.doc-link:hover{ border-color:var(--accent-hi); border-style:solid; background:rgba(163,129,63,0.08); color:var(--accent-hi); }
.doc-icon{ width:14px; height:14px; flex-shrink:0; }
.doc-filetype{
  margin-left:auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em;
  color:var(--ink-faint); border-left:1px solid var(--hairline); padding-left:10px;
}

/* ============================================================
   EDUCATION
   ============================================================ */
.edu-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:14px; flex-wrap:wrap; }
.edu-title{ font-family:var(--font-display); font-size:22px; font-weight:500; margin:0 0 4px; }
.edu-org{ font-size:13.5px; color:var(--ink-dim); margin:0; }

/* ============================================================
   LANGUAGES / CODING BARS
   ============================================================ */
.lang-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:30px 40px; }
.lang-head{ display:flex; justify-content:space-between; margin-bottom:8px; }
.lang-name{ font-family:var(--font-mono); font-size:13.5px; letter-spacing:0.02em; }
.lang-pct{ font-family:var(--font-mono); font-size:12px; color:var(--accent-hi); }
.lang-bar{ height:5px; background:rgba(232,229,214,0.07); border-radius:6px; overflow:hidden; margin-bottom:9px; }
.lang-fill{
  height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--accent-dim), var(--accent-hi));
  transition:width 1.4s var(--ease);
}
.lang-fill.animate{ width:var(--pct); }
.lang-note{ font-size:12px; color:var(--ink-faint); margin:0; line-height:1.5; }

/* ============================================================
   SKILLS
   ============================================================ */
.skills-columns{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px; }
.skills-col-title{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent-hi); margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--hairline);
}
.skill-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.skill-list li{ display:flex; gap:12px; font-size:13.5px; color:var(--ink-dim); line-height:1.55; }
.skill-dot{
  width:5px; height:5px; margin-top:7px; flex-shrink:0; border-radius:50%;
  background:var(--accent-hi); box-shadow:0 0 6px rgba(198,156,86,0.5);
}

/* ============================================================
   REFERENCES
   ============================================================ */
.ref-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:22px; }
.ref-index{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:0.15em; }
.ref-name{ font-family:var(--font-display); font-size:19px; font-weight:500; margin:8px 0 3px; }
.ref-role{ font-size:12.5px; color:var(--accent-hi); margin:0; }
.ref-divider{ height:1px; background:var(--hairline); margin:16px 0; }
.ref-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ref-contact li{ display:flex; justify-content:space-between; gap:14px; font-size:12.5px; }
.ref-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; color:var(--ink-faint); flex-shrink:0; padding-top:1px; }
.ref-contact li span:last-child{ color:var(--ink-dim); text-align:right; }

/* ============================================================
   FOOTER
   ============================================================ */
.dossier-footer{
  padding:50px 0 70px; text-align:center;
}
.footer-line{ width:100%; max-width:120px; height:1px; background:var(--hairline); margin:0 auto 22px; }
.dossier-footer p{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; color:var(--ink-faint);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  :root{ --nav-w: 0px; }
  .ledger-nav{
    position:fixed; left:0; right:0; top:auto; bottom:0; width:100%; height:auto;
    flex-direction:row; padding:0; border-right:none; border-top:1px solid var(--hairline);
    overflow-x:auto;
  }
  .ledger-mark, .ledger-status{ display:none; }
  .ledger-nav ul{ display:flex; flex:none; }
  .ledger-link{ flex-direction:column; gap:4px; padding:12px 16px; border-left:none; border-top:2px solid transparent; text-align:center; }
  .ledger-link.active{ border-left:none; border-top-color:var(--accent); }
  .tab-name{ font-size:10px; }
  main{ margin-left:0; padding:0 20px 70px; }
  .cover-grid{ grid-template-columns:1fr; }
  .cover-photo-wrap{ border-right:none; border-bottom:1px solid var(--hairline); padding:32px; }
  .cover-copy{ padding:36px 28px; }
}