/* ============================================================
   CV page — components layered on top of case.css
   (reuses .cnav, .case-hero, .btn, .sect, .metrics, .cfoot, .reveal)
   ============================================================ */

.cv-tagline{margin-top:14px;font-size:clamp(18px,2.2vw,22px);font-weight:500;color:#9fb6d6;letter-spacing:-0.01em;}

/* download icon button keeps btn sizing from case.css */
.btn-download{background:var(--accent);color:#fff;}
.btn-download:hover{background:var(--accent-h);transform:translateY(-1px);}

/* ---- Experience timeline ---- */
.xp-list{margin-top:8px;}
.xp{display:grid;grid-template-columns:248px 1fr;gap:36px;padding:38px 0;border-top:1px solid var(--border);}
.xp:first-child{border-top:0;padding-top:0;}
.xp-aside .period{font-size:13px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink2);}
.xp-aside .company{margin-top:9px;font-size:20px;font-weight:600;letter-spacing:-0.01em;color:var(--ink);}
.xp-aside .loc{margin-top:5px;font-size:14px;color:var(--ink2);}
.xp-main .role{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:10px;}
.xp-main .ctx{font-size:16px;line-height:1.65;color:#333336;margin:0 0 18px;max-width:62ch;}
.xp-main .bullets li{font-size:16px;margin-bottom:13px;}
.xp-metrics{display:flex;flex-wrap:wrap;gap:32px;margin-top:22px;padding-top:20px;border-top:1px dashed var(--border);}
.xp-metrics .num{font-size:26px;font-weight:600;letter-spacing:-0.02em;line-height:1;color:var(--ink);}
.xp-metrics .lab{margin-top:7px;font-size:13px;color:var(--ink2);max-width:18ch;}

/* ---- Selected projects mini-grid ---- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:4px;}
.proj{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  color:inherit;text-decoration:none;background:#fff;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .2s ease;}
.proj:hover{transform:translateY(-4px);box-shadow:0 24px 50px -32px rgba(0,0,0,0.28);border-color:#e2e2e8;}
.proj-media{aspect-ratio:16/10;overflow:hidden;background:#f5f5f7;}
.proj-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;}
.proj-b{padding:16px 18px 18px;}
.proj-cat{font-size:12px;letter-spacing:0.04em;text-transform:uppercase;font-weight:600;color:var(--accent);}
.proj-ttl{margin-top:7px;font-size:16px;font-weight:600;line-height:1.25;color:var(--ink);}

/* ---- Skills ---- */
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 48px;}
.skill-group h3{margin:0 0 14px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink2);font-weight:600;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:980px;
  background:var(--surface);border:1px solid var(--border);font-size:15px;color:var(--ink);}

/* ---- Education ---- */
.edu-list{margin-top:4px;}
.edu{display:grid;grid-template-columns:130px 1fr;gap:24px;padding:20px 0;border-top:1px solid var(--border);}
.edu:first-child{border-top:0;}
.edu .yr{font-size:14px;color:var(--ink2);}
.edu .t{font-size:17px;font-weight:600;color:var(--ink);}
.edu .s{margin-top:5px;font-size:15px;line-height:1.55;color:var(--ink2);}

/* ---- Responsive ---- */
@media (max-width:760px){
  .xp{grid-template-columns:1fr;gap:14px;padding:28px 0;}
  .proj-grid{grid-template-columns:1fr 1fr;}
  .skills-grid{grid-template-columns:1fr;gap:28px;}
  .edu{grid-template-columns:1fr;gap:6px;}
}
@media (max-width:520px){
  .proj-grid{grid-template-columns:1fr;}
}

/* ---- CV hero: intro + portrait ---- */
.cv-hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:48px; }
.cv-hero-intro{ flex:1 1 auto; min-width:0; }
.cv-hero-photo{ flex:0 0 auto; }
.cv-hero-photo img{
  display:block; width:200px; height:200px; border-radius:50%;
  object-fit:cover; object-position:50% 42%;
  border:3px solid rgba(255,255,255,0.16);
  box-shadow:0 20px 54px -20px rgba(0,0,0,0.65);
}
@media (max-width:760px){
  .cv-hero-top{ flex-direction:column-reverse; align-items:flex-start; gap:22px; }
  .cv-hero-photo img{ width:120px; height:120px; }
}