:root{
  --bg:#FBF7F2;
  --panel:#F3ECF7;
  --ink:#2B2640;
  --ink-soft:#746C8C;
  --line:#E3D9EC;
  --gold:#C99A3B;
  --pink:#C97B98;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Karla", sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;}
a:hover,a:focus{border-bottom-color:var(--gold);}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

::selection{background:var(--pink);color:#fff;}

/* ---------- Ambient stars ---------- */
.sky{
  position:absolute;
  top:0;left:0;right:0;
  height:420px;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.star{
  position:absolute;
  color:var(--gold);
  opacity:0;
  animation:twinkle 2.6s ease-in-out forwards;
}
.star.s1{top:38px;left:12%;font-size:14px;animation-delay:0.2s;}
.star.s2{top:96px;left:82%;font-size:10px;color:var(--pink);animation-delay:0.6s;}
.star.s3{top:150px;left:6%;font-size:9px;animation-delay:1.0s;}
.star.s4{top:60px;left:68%;font-size:13px;animation-delay:0.4s;}
.star.s5{top:190px;left:90%;font-size:11px;color:var(--pink);animation-delay:1.3s;}
@keyframes twinkle{
  0%{opacity:0;transform:scale(0.6);}
  55%{opacity:0.85;transform:scale(1.05);}
  100%{opacity:0.55;transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .star{animation:none;opacity:0.55;}
}

/* ---------- Layout ---------- */
.wrap{
  max-width:700px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:1;
}

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.avatar{
  width:104px;
  height:104px;
  border-radius:50%;
  object-fit:cover;
  object-position:top center;
  margin-bottom:20px;
  border:2px solid var(--gold);
  box-shadow:0 0 0 4px var(--bg), 0 0 0 5px var(--line);
}

h1{
  font-family:"Quicksand", sans-serif;
  font-weight:700;
  font-size:clamp(2rem, 5vw, 2.6rem);
  margin:0 0 6px;
  letter-spacing:-0.01em;
}

.role{
  font-family:"Quicksand", sans-serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--pink);
  margin:0 0 16px;
}

.contact{
  font-size:0.92rem;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.contact a{color:var(--ink);}
.contact a:hover{color:var(--gold);}
.dotsep{margin:0 8px;color:var(--line);}

.profile{
  max-width:58ch;
  font-size:1rem;
}

/* ---------- Freelance callout ---------- */
.freelance{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.freelance-badge{
  flex-shrink:0;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--panel);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-size:1rem;
}
.inline-h{margin:0 0 6px;}
.inline-h .tag{
  font-size:0.78rem;
  font-weight:400;
  color:var(--ink-soft);
  font-family:"Karla", sans-serif;
}
.freelance p{margin:0;color:var(--ink-soft);font-size:0.95rem;}

/* ---------- Sections ---------- */
section{
  padding:38px 0;
  border-bottom:1px solid var(--line);
}
section:last-of-type{border-bottom:none;}

h2{
  font-family:"Quicksand", sans-serif;
  font-weight:600;
  font-size:1.25rem;
  margin:0 0 22px;
}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:30px;}
.timeline::before{
  content:"";
  position:absolute;
  left:9px;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--line);
}
.tl-entry{
  position:relative;
  margin-bottom:34px;
}
.tl-entry:last-child{margin-bottom:0;}

.moon-phase{
  position:absolute;
  left:-30px;
  top:2px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px var(--bg);
}
.phase-new{background:var(--panel);border:1px solid var(--line);}
.phase-crescent{background:radial-gradient(circle at 32% 50%, var(--bg) 0 35%, var(--gold) 36%);}
.phase-half{background:linear-gradient(90deg, var(--bg) 50%, var(--gold) 50%);border:1px solid var(--line);}
.phase-waning-gibbous{background:radial-gradient(circle at 72% 50%, var(--bg) 0 22%, var(--gold) 23%);}
.phase-full{background:var(--gold);}

.tl-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:baseline;
  margin-bottom:6px;
}
.tl-title{font-weight:600;font-size:1.02rem;}
.tl-org{color:var(--ink-soft);font-weight:400;}
.tl-dates{
  font-size:0.85rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.tl-body p{margin:0 0 12px;color:var(--ink);font-size:0.96rem;}

/* ---------- Chips ---------- */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  font-size:0.8rem;
  padding:5px 12px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
}
.chip-accent{
  background:transparent;
  border-color:var(--pink);
  color:var(--pink);
}

/* ---------- Stack ---------- */
.stack-group{margin-bottom:22px;}
.stack-group:last-child{margin-bottom:0;}
.stack-label{
  font-family:"Quicksand", sans-serif;
  font-weight:600;
  font-size:0.92rem;
  color:var(--ink);
  margin-bottom:10px;
}
.sym{color:var(--gold);margin-right:4px;}

/* ---------- Education ---------- */
.edu-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.edu-title{font-weight:600;}
.edu-org{color:var(--ink-soft);font-size:0.92rem;}
.edu-dates{color:var(--ink-soft);font-size:0.88rem;white-space:nowrap;}

/* ---------- Footer ---------- */
footer{
  padding:0 0 56px;
  font-size:0.88rem;
  color:var(--ink-soft);
  text-align:center;
}
.foot-star{color:var(--pink);margin-right:4px;}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .hero{padding-top:48px;}
  .timeline{padding-left:26px;}
  .moon-phase{left:-26px;width:16px;height:16px;}
}