:root{
    --ink:#0F1620;
    --slate:#17212C;
    --paper:#EDEEE9;
    --paper-dim:#B9C0C4;
    --amber:#E8A33D;
    --teal:#4C7A82;
    --line: rgba(237,238,233,0.12);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height:1.6;
  }
  .mono{
    font-family:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
  }

  /* ---------- Layout shell ---------- */
  .wrap{
    max-width:920px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- Header / Hero ---------- */
  header.hero{
    padding:72px 0 56px;
    border-bottom:1px solid var(--line);
  }
  .eyebrow{
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--amber);
    margin-bottom:18px;
  }
  h1{
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    font-weight:700;
    letter-spacing:-0.02em;
    margin:0 0 10px;
    color:var(--paper);
  }
  .role-line{
    font-size:1.05rem;
    color:var(--paper-dim);
    margin:0 0 28px;
  }
  .role-line span{ color:var(--teal); }

  .meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px 22px;
    font-size:13px;
    color:var(--paper-dim);
  }
  .meta-row a{ color:var(--paper-dim); text-decoration:none; border-bottom:1px dotted var(--paper-dim); }
  .meta-row a:hover{ color:var(--amber); border-color:var(--amber); }

  /* ---------- Section headings ---------- */
  section{ padding:52px 0; border-bottom:1px solid var(--line); }
  section:last-of-type{ border-bottom:none; }
  .sec-head{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-bottom:26px;
  }
  .sec-num{
    font-size:12px;
    color:var(--amber);
  }
  .sec-title{
    font-size:1.4rem;
    font-weight:700;
    margin:0;
    color:var(--paper);
  }

  .summary p{
    font-size:1.05rem;
    color:var(--paper-dim);
    max-width:66ch;
  }

  /* ---------- Pipeline / timeline (signature element) ---------- */
  .pipeline{
    position:relative;
    padding-left:26px;
  }
  .pipeline::before{
    content:"";
    position:absolute;
    left:6px;
    top:6px;
    bottom:6px;
    width:1px;
    background:linear-gradient(to bottom, var(--amber), var(--teal) 60%, transparent);
  }
  .stage{
    position:relative;
    padding-bottom:34px;
  }
  .stage:last-child{ padding-bottom:0; }
  .stage::before{
    content:"";
    position:absolute;
    left:-26px;
    top:5px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--ink);
    border:2px solid var(--amber);
  }
  .stage .dates{
    font-size:12px;
    color:var(--teal);
    margin-bottom:4px;
    letter-spacing:0.02em;
  }
  .stage h3{
    margin:0 0 4px;
    font-size:1.05rem;
    color:var(--paper);
  }
  .stage .org{
    color:var(--paper-dim);
    font-size:0.92rem;
    font-style:italic;
    margin-bottom:8px;
  }
  .stage p.desc{
    margin:0;
    color:var(--paper-dim);
    font-size:0.95rem;
    max-width:60ch;
  }

  /* ---------- Skills ---------- */
  .skill-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:22px;
  }
  .skill-cat h4{
    margin:0 0 10px;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--amber);
  }
  .chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .chip{
    font-size:12px;
    padding:5px 10px;
    border:1px solid var(--line);
    border-radius:3px;
    color:var(--paper-dim);
    background:var(--slate);
  }

  /* ---------- Education ---------- */
  .edu-item{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 0;
    border-bottom:1px dashed var(--line);
    font-size:0.95rem;
  }
  .edu-item:last-child{ border-bottom:none; }
  .edu-item .school{ color:var(--paper); }
  .edu-item .year{ color:var(--teal); white-space:nowrap; }

  /* ---------- Footer ---------- */
  footer{
    padding:40px 0 60px;
    color:var(--paper-dim);
    font-size:13px;
    text-align:center;
  }
  footer a{ color:var(--amber); text-decoration:none; }

  @media (max-width:560px){
    header.hero{ padding:52px 0 40px; }
    section{ padding:40px 0; }
  }