/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  --cream:  #F7F0E6;
  --cream2: #EDE2D3;
  --cream3: #E2D4C2;
  --white:  #FFFCF8;
  --terra:  #BE6F4A;
  --terra-d:#9A5230;
  --terra-l:#E8C9B0;
  --ink:    #1C1208;
  --ink2:   #4A3820;
  --ink3:   #8A7560;
  --rule:   #D8CAB8;
  --font-h: 'Cormorant Garamond', Georgia, serif;
  --font-b: 'DM Sans', system-ui, sans-serif;
  --font-s: 'Caveat', cursive;
}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-b);
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── HERO ────────────────────────────────────────────────── */
#hero{
  display:grid;
  grid-template-columns:42% 58%;
  grid-template-rows:1fr auto;
  min-height:100svh;
  background:var(--cream);
}

/* Left column */
.hero-l{
  grid-column:1;
  grid-row:1;
  position:relative;
  display:flex;
  overflow:hidden;
}

.hero-keywords{
  list-style:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.55rem;
  padding:2rem 1rem 2rem 1.8rem;
  flex-shrink:0;
  z-index:2;
}
.hero-keywords li{
  font-family:var(--font-b);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--ink3);
  writing-mode:horizontal-tb;
  line-height:1;
  text-transform:uppercase;
}

.hero-photo-wrap{
  position:relative;
  flex:1;
  overflow:hidden;
}
.hero-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(20%) contrast(1.05);
  display:block;
}
.hero-script{
  position:absolute;
  bottom:2.5rem;
  left:1.2rem;
  font-family:var(--font-s);
  font-size:1.7rem;
  font-weight:500;
  color:#fff;
  line-height:1.25;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
  pointer-events:none;
}

/* Right column */
.hero-r{
  grid-column:2;
  grid-row:1;
  background:var(--white);
  display:flex;
  align-items:center;
  border-left:1px solid var(--rule);
}
.hero-r-inner{
  padding:3.5rem 3rem 3.5rem 3.5rem;
  max-width:520px;
}

.hero-name{
  font-family:var(--font-h);
  font-size:clamp(2.6rem,5vw,4rem);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1;
  color:var(--ink);
  margin-bottom:.6rem;
}
.hero-role{
  font-family:var(--font-b);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:2.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--rule);
}

/* Value props */
.hero-values{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  margin-bottom:2.2rem;
}
.hero-value-item{
  display:flex;
  align-items:center;
  gap:.9rem;
}
.hero-value-icon{
  width:38px;height:38px;border-radius:50%;
  background:var(--terra);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;color:#fff;
}
.hero-value-text{}
.hero-value-label{
  font-family:var(--font-b);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  display:block;
  line-height:1.1;
}
.hero-value-sub{
  font-family:var(--font-b);
  font-size:.72rem;
  font-weight:300;
  color:var(--ink3);
  display:block;
  line-height:1.2;
}

/* Motto */
.hero-motto{
  font-family:var(--font-b);
  font-size:.82rem;
  font-weight:400;
  color:var(--ink2);
  line-height:1.65;
  border-left:3px solid var(--terra);
  padding-left:1rem;
  margin-bottom:2rem;
  font-style:normal;
}
.hero-motto::before{
  content:'"';
  font-family:var(--font-h);
  font-size:2rem;
  color:var(--terra);
  line-height:.5;
  display:block;
  margin-bottom:.4rem;
}

/* Contact list */
.hero-contact{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.hero-contact li{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.8rem;
  color:var(--ink2);
}
.hero-contact .ci{
  width:18px;
  text-align:center;
  color:var(--terra);
  font-size:.85rem;
  flex-shrink:0;
}

/* Stats bar */
.hero-stats{
  grid-column:1 / -1;
  grid-row:2;
  background:var(--terra);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.hero-stat{
  padding:1.4rem 1.5rem;
  border-right:1px solid rgba(255,255,255,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.2rem;
}
.hero-stat:last-child{border-right:none}
.stat-v{
  font-family:var(--font-h);
  font-size:2rem;
  font-weight:500;
  color:#fff;
  line-height:1;
}
.stat-l{
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  line-height:1.45;
  white-space:pre-line;
}

/* ── SECTIONS ─────────────────────────────────────────── */
.sec{
  padding:4.5rem clamp(1.5rem,6vw,5rem);
  max-width:1100px;
  margin:0 auto;
}
.sec + .sec{
  border-top:1px solid var(--rule);
}

/* Section header */
.sec-hd{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin-bottom:2.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--ink);
  flex-wrap:wrap;
}
.sec-num{
  font-family:var(--font-b);
  font-size:.7rem;
  font-weight:500;
  color:var(--ink3);
  letter-spacing:.05em;
}
.sec-pipe{
  color:var(--rule);
  font-weight:300;
}
.sec-ttl{
  font-family:var(--font-b);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.15em;
  color:var(--ink);
  flex:1;
}
.sec-tag-script{
  font-family:var(--font-s);
  font-size:1.1rem;
  color:var(--ink3);
  font-weight:400;
  margin-left:auto;
}
.sec-tag-en{
  font-family:var(--font-b);
  font-size:.68rem;
  font-weight:300;
  color:var(--ink3);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-left:auto;
  font-style:italic;
}

/* ── ABOUT ─────────────────────────────────────────────── */
.about-heading{
  font-family:var(--font-h);
  font-size:clamp(1.3rem,3vw,1.75rem);
  font-weight:600;
  color:var(--ink);
  margin-bottom:1.1rem;
  letter-spacing:.01em;
}
.about-text{
  font-size:.88rem;
  font-weight:300;
  color:var(--ink2);
  line-height:1.8;
  max-width:780px;
  margin-bottom:2.5rem;
}

/* KPI tiles */
.about-kpis{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
  margin-bottom:3rem;
}
.kpi-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.6rem;
}
.kpi-icon{
  width:48px;height:48px;
  border-radius:50%;
  border:1.5px solid var(--terra-l);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
  color:var(--terra);
  background:var(--white);
}
.kpi-label{
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink2);
  line-height:1.4;
  white-space:pre-line;
  text-align:center;
}

/* Skills + Strengths grid */
.skills-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  margin-bottom:2.5rem;
}
.col-label{
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:1.2rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--rule);
}
.col-label-script{
  font-family:var(--font-s);
  font-size:1.5rem;
  color:var(--ink2);
  margin-bottom:1.1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--rule);
  font-weight:500;
}

/* Skill dots */
.skill-dots-list{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.skill-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.skill-name{
  font-size:.8rem;
  font-weight:300;
  color:var(--ink2);
  flex:1;
}
.skill-dots{
  display:flex;
  gap:3px;
  flex-shrink:0;
}
.dot{
  width:9px;height:9px;
  border-radius:50%;
  background:var(--cream3);
}
.dot.on{background:var(--ink2);}

/* Strengths */
.strengths-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.strength-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.8rem;
  color:var(--ink2);
  font-weight:300;
}
.strength-icon{
  width:26px;height:26px;
  border-radius:50%;
  border:1px solid var(--terra-l);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;
  color:var(--terra-d);
  flex-shrink:0;
  background:var(--white);
}

/* Languages */
.languages{
  display:flex;
  gap:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.lang-item{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.lang-flag{
  width:32px;height:32px;border-radius:50%;
  background:var(--cream3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-b);font-size:.62rem;font-weight:500;
  letter-spacing:.04em;color:var(--ink2);flex-shrink:0;
}
.lang-name{
  font-size:.78rem;
  font-weight:500;
  color:var(--ink);
  display:block;
}
.lang-level{
  font-size:.7rem;
  font-weight:300;
  color:var(--ink3);
  display:block;
}

/* ── EXPERIENCE ───────────────────────────────────────── */
.exp-wrap{
  position:relative;
}
.exp-watermark{
  position:absolute;
  left:-1.5rem;
  top:2rem;
  font-family:var(--font-s);
  font-size:1.15rem;
  color:var(--cream3);
  line-height:1.4;
  pointer-events:none;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  user-select:none;
}
.timeline{
  list-style:none;
  padding-left:2.5rem;
  position:relative;
}
.timeline::before{
  content:'';
  position:absolute;
  left:0;top:.4rem;bottom:.4rem;
  width:1px;
  background:var(--rule);
}
.timeline-item{
  position:relative;
  padding:0 0 2.5rem 2rem;
}
.timeline-item::before{
  content:'';
  position:absolute;
  left:-7px;top:.42rem;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--terra);
  border:2px solid var(--cream);
  box-shadow:0 0 0 1px var(--terra);
}
.job-period{
  font-size:.7rem;
  font-weight:400;
  color:var(--ink3);
  letter-spacing:.04em;
  margin-bottom:.25rem;
  display:block;
}
.job-note{
  font-size:.68rem;
  color:var(--ink3);
}
.job-title{
  font-family:var(--font-b);
  font-size:.9rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:.15rem;
}
.job-company{
  font-size:.78rem;
  font-weight:300;
  color:var(--terra-d);
  margin-bottom:.6rem;
}
.job-bullets{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.job-bullets li{
  font-size:.8rem;
  font-weight:300;
  color:var(--ink2);
  padding-left:1.1rem;
  position:relative;
  line-height:1.55;
}
.job-bullets li::before{
  content:'–';
  position:absolute;
  left:0;
  color:var(--terra);
}

/* ── EDUCATION ────────────────────────────────────────── */
.sec-hd .edu-watermark-script{
  font-family:var(--font-s);
  font-size:1.05rem;
  color:var(--ink3);
  margin-left:auto;
  font-weight:400;
  line-height:1.3;
  text-align:right;
}
.edu-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0;
}
.edu-item{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1rem 2rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--rule);
  align-items:start;
}
.edu-item:last-child{border-bottom:none}
.edu-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
}
.edu-type-icon{
  width:32px;height:32px;
  border-radius:50%;
  border:1.5px solid var(--terra-l);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;
  background:var(--white);
  margin-bottom:.3rem;
}
.edu-year{
  font-size:.7rem;
  font-weight:400;
  color:var(--ink3);
  line-height:1.3;
}
.edu-title{
  font-size:.88rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:.15rem;
  line-height:1.4;
}
.edu-inst{
  font-size:.78rem;
  font-weight:300;
  color:var(--ink3);
  display:block;
}
.edu-detail{
  font-size:.75rem;
  font-weight:300;
  color:var(--ink3);
  margin-top:.2rem;
  font-style:italic;
}

/* ── PERSONAL ─────────────────────────────────────────── */
.personal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
}
.personal-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.personal-list li{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.82rem;
  font-weight:300;
  color:var(--ink2);
}
.personal-list .pi{
  width:22px;
  text-align:center;
  font-size:.85rem;
  color:var(--terra);
  flex-shrink:0;
}
.interests-wrap{position:relative;}
.interests-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin-bottom:1.5rem;
}
.interests-list li{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.82rem;
  font-weight:300;
  color:var(--ink2);
}
.interests-list .ii{
  width:22px;
  text-align:center;
  font-size:.9rem;
  flex-shrink:0;
}
.personal-script{
  font-family:var(--font-s);
  font-size:1.05rem;
  color:var(--ink3);
  line-height:1.4;
  font-weight:400;
}

/* ── FOOTER ──────────────────────────────────────────── */
footer{
  background:var(--cream2);
  border-top:1px solid var(--rule);
  padding:3rem clamp(1.5rem,6vw,5rem);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.5rem;
}
.footer-script{
  font-family:var(--font-s);
  font-size:3rem;
  color:var(--terra);
  font-weight:500;
  line-height:1;
}
.footer-sub{
  font-size:.82rem;
  font-weight:300;
  color:var(--ink3);
  letter-spacing:.05em;
}
.footer-rule{
  width:60px;
  border:none;
  border-top:1px solid var(--rule);
  margin:.5rem 0;
}
.footer-name{
  font-family:var(--font-h);
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink3);
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:900px){
  #hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .hero-l{
    grid-column:1;grid-row:1;
    height:55svh;
    min-height:320px;
  }
  .hero-r{
    grid-column:1;grid-row:2;
    border-left:none;
    border-top:1px solid var(--rule);
  }
  .hero-stats{
    grid-column:1;grid-row:3;
    grid-template-columns:repeat(2,1fr);
  }
  .about-kpis{grid-template-columns:repeat(3,1fr);}
  .skills-grid{grid-template-columns:1fr;}
  .personal-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .about-kpis{grid-template-columns:repeat(2,1fr);}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .languages{flex-wrap:wrap;gap:1.5rem;}
  .edu-item{grid-template-columns:1fr;gap:.5rem;}
}