:root{
  /* sumi & shu — tetap, tidak ikut berganti tema */
  --sumi:#15110F; --sumi2:#241D19; --kinari:#F4EDE1; --shu:#C62A22; --kin:#C9A227;
  /* token tema — di-set ulang dari JS tiap kali tempat kerja diklik */
  --bg:#F4EDE1; --bg2:#E9DECB; --surface:#FFFBF3; --ink:#1A1512; --ink2:#6B6053;
  --line:#DDCFB5; --accent:#C62A22; --accent2:#1A1512; --accent3:#C9A227;
  --shadow:0 1px 2px rgba(21,17,15,.05), 0 10px 30px -14px rgba(21,17,15,.22);
  --serif:"Shippori Mincho", Georgia, "Times New Roman", serif;
  --sans:"Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:"Caveat", "Comic Sans MS", cursive;
  --wrap:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color .8s ease, color .8s ease}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:700; line-height:1.18; margin:0; text-wrap:balance}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* ── latar ── */
#bg{position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:linear-gradient(178deg,var(--bg) 0%,var(--bg) 46%,var(--bg2) 100%);
  transition:background .8s ease}
#bg::after{content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E")}
.pat{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:0;
  transition:opacity .8s ease; background-repeat:repeat}
#doodles{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
#doodles svg{position:absolute; opacity:0; filter:url(#wobble);
  animation:pop .9s cubic-bezier(.2,.9,.25,1) forwards, float 17s ease-in-out infinite 1s}
@keyframes pop{from{opacity:0; transform:scale(.72) rotate(calc(var(--r) - 14deg))}
               to{opacity:var(--o); transform:scale(1) rotate(var(--r))}}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r))}
                 50%{transform:translateY(-26px) rotate(calc(var(--r) + 5deg))}}
#glyph{position:fixed; right:-.1em; bottom:-.2em; z-index:-1; pointer-events:none;
  font-family:var(--serif); font-size:min(44vw,42vh); line-height:1; color:var(--ink);
  opacity:.05; transition:opacity .8s}

/* ── nav ── */
nav{position:sticky; top:0; z-index:40; background:var(--sumi); color:var(--kinari)}
.nav-in{max-width:var(--wrap); margin:0 auto; padding:.5rem 1.25rem; display:flex; align-items:center; gap:1rem}
.brand{font-family:var(--serif); font-weight:700; font-size:1rem; display:flex; align-items:center;
  gap:.55rem; text-decoration:none; margin-right:auto; white-space:nowrap}
.navlinks{display:flex; gap:.1rem; overflow-x:auto; scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{padding:.3rem .58rem; border-radius:99px; text-decoration:none; font-size:.8rem;
  color:rgba(244,237,225,.62); white-space:nowrap; transition:color .25s, background .25s}
.navlinks a:hover{color:var(--kinari)}
.navlinks a.on{color:var(--sumi); background:var(--kin)}
#lang{flex:none; display:flex; border:1px solid rgba(244,237,225,.28); border-radius:99px; overflow:hidden}
#lang button{padding:.26rem .6rem; border:0; background:none; cursor:pointer; font-size:.74rem;
  font-weight:700; letter-spacing:.06em; color:rgba(244,237,225,.7)}
#lang button[aria-pressed=true]{background:var(--shu); color:#fff}

/* ── hero: pita sumi ── */
#hero{background:var(--sumi); color:var(--kinari); position:relative; overflow:hidden}
#hero .torii{position:absolute; right:-4%; top:-6%; width:min(58%,620px); color:var(--shu);
  opacity:.3; pointer-events:none}
#hero .noise{position:absolute; inset:0; opacity:.25; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23m)'/%3E%3C/svg%3E")}
.hero-in{max-width:var(--wrap); margin:0 auto; padding:clamp(2.2rem,5vw,3.6rem) 1.25rem clamp(1.2rem,3vw,1.8rem);
  position:relative; display:grid; grid-template-columns:1.3fr .8fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.kicker{display:inline-flex; align-items:center; gap:.5rem; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--kin); border:1px solid rgba(201,162,39,.4);
  border-radius:99px; padding:.28rem .8rem; margin-bottom:1rem}
.dot{width:6px; height:6px; border-radius:99px; background:var(--shu)}
h1{font-size:clamp(2.3rem,6.4vw,4.1rem); font-weight:800; letter-spacing:-.02em; color:#fff}
h1 .jp{display:block; font-size:.24em; font-weight:500; letter-spacing:.5em; color:var(--kin);
  margin-bottom:.5rem; opacity:.9}
.alias{display:block; font-family:var(--hand); font-weight:600; color:var(--shu);
  font-size:clamp(1.05rem,2.4vw,1.5rem); margin-top:.3rem}
.tagline{font-family:var(--serif); font-size:clamp(1.02rem,2.2vw,1.32rem); margin:.9rem 0 .6rem; color:#fff}
.lede{color:rgba(244,237,225,.72); max-width:50ch; font-size:.94rem}
.where{display:flex; align-items:center; gap:.4rem; margin-top:.85rem; font-size:.85rem; color:var(--kin)}
.cta{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem}
.btn{display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.05rem; border-radius:99px;
  text-decoration:none; font-size:.86rem; font-weight:500; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn.solid{background:var(--shu); border-color:var(--shu); color:#fff}
.btn.ghost{background:transparent; border-color:rgba(244,237,225,.3); color:var(--kinari)}
.btn.ghost:hover{background:rgba(244,237,225,.1)}

.portrait{position:relative}
.portrait .frame{border-radius:190px 190px 14px 14px; overflow:hidden; aspect-ratio:3/3.5;
  border:3px solid var(--shu); box-shadow:0 20px 50px -20px #000; position:relative}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block}
.portrait .stamp{position:absolute; bottom:-16px; left:-16px; width:66px; height:66px}
.tategaki{position:absolute; top:4%; left:-2.2rem; writing-mode:vertical-rl;
  font-family:var(--serif); font-size:.82rem; letter-spacing:.42em; color:rgba(244,237,225,.5)}

.stat-row{max-width:var(--wrap); margin:0 auto; padding:0 1.25rem clamp(1.6rem,4vw,2.4rem);
  display:grid; grid-template-columns:repeat(6,1fr); position:relative}
.stat{padding:.9rem .6rem; text-align:center; border-left:1px solid rgba(244,237,225,.14)}
.stat:first-child{border-left:0}
.stat b{display:block; font-family:var(--serif); font-size:clamp(1.25rem,2.8vw,1.9rem);
  color:#fff; line-height:1.05; font-variant-numeric:tabular-nums}
.stat b span{font-size:.6em; color:var(--kin)}
.stat small{display:block; color:rgba(244,237,225,.55); font-size:.7rem; line-height:1.3; margin-top:.2rem}

/* ── seksi ── */
section{max-width:var(--wrap); margin:0 auto; padding:clamp(2.4rem,5vw,3.6rem) 1.25rem;
  scroll-margin-top:58px}
.head{display:flex; align-items:flex-end; gap:.9rem; margin-bottom:1.3rem; flex-wrap:wrap}
.head .kj{font-family:var(--serif); font-size:1.7rem; color:var(--accent); line-height:1; opacity:.85}
h2{font-size:clamp(1.45rem,3.6vw,2.15rem)}
.eyebrow{font-family:var(--hand); font-size:1.08rem; color:var(--accent); margin-bottom:.1rem}
.rule{flex:1; height:1px; background:var(--line); min-width:40px; margin-bottom:.6rem}
.sub{color:var(--ink2); max-width:64ch; margin:-.6rem 0 1.5rem; font-size:.93rem}
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  transition:background-color .8s, border-color .8s, transform .22s, box-shadow .22s}
.reveal{transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.hide{opacity:0; transform:translateY(22px)}

/* ── pengalaman kerja ── */
.work{display:grid; grid-template-columns:290px 1fr; gap:1.3rem; align-items:start}
.joblist{display:flex; flex-direction:column; gap:.45rem; position:sticky; top:66px}
.job{display:block; width:100%; text-align:left; cursor:pointer; padding:.7rem .9rem;
  border-radius:12px; border:1px solid var(--line); background:var(--surface);
  transition:transform .2s, border-color .3s, box-shadow .25s, background-color .8s}
.job:hover{transform:translateX(3px)}
.job[aria-pressed=true]{border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent), var(--shadow)}
.job .org{font-family:var(--serif); font-weight:700; font-size:.95rem; display:block}
.job .meta{display:flex; justify-content:space-between; gap:.5rem; font-size:.72rem; color:var(--ink2); margin-top:.1rem}
.job .kind{display:block; font-size:.65rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-top:.25rem}
.detail{border-radius:16px; overflow:hidden; position:relative}
.scene{position:relative; aspect-ratio:16/6.6; background:var(--bg2); overflow:hidden}
.scene img,.scene svg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.scene img{filter:grayscale(.55) contrast(1.06)}
.scene .duo{position:absolute; inset:0; mix-blend-mode:multiply; opacity:.62;
  background:linear-gradient(105deg,var(--accent2),var(--accent))}
.scene .cap{position:absolute; left:0; right:0; bottom:0; padding:.7rem .95rem;
  background:linear-gradient(transparent,rgba(0,0,0,.62)); color:#fff;
  font-family:var(--hand); font-size:1.02rem; display:flex; justify-content:space-between; gap:.8rem}
.scene .cap em{font-style:normal; font-family:var(--sans); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.8; align-self:flex-end}
.dbody{padding:clamp(1.1rem,2.5vw,1.7rem)}
.dbody h3{font-size:clamp(1.15rem,2.6vw,1.55rem)}
.dbody .role{color:var(--accent); font-weight:500; margin-top:.15rem; font-size:.94rem}
.dbody .when{font-size:.8rem; color:var(--ink2); margin-top:.3rem; display:flex; flex-wrap:wrap; gap:.1rem .7rem}
.lead{font-family:var(--serif); font-size:1.05rem; margin:.95rem 0 1rem; padding-left:.85rem;
  border-left:3px solid var(--accent)}
.mrow{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1rem}
.m{background:var(--bg2); border-radius:10px; padding:.6rem .7rem; transition:background-color .8s}
.m b{display:block; font-family:var(--serif); font-size:1.2rem; color:var(--accent); font-variant-numeric:tabular-nums}
.m small{color:var(--ink2); font-size:.71rem; line-height:1.28; display:block}
.dbody ul{margin:0; padding:0; list-style:none; display:grid; gap:.42rem}
.dbody li{position:relative; padding-left:1.25rem; font-size:.91rem}
.dbody li::before{content:""; position:absolute; left:.15rem; top:.62em; width:7px; height:1px; background:var(--accent)}
/* ── portofolio foto per tempat kerja ── */
.pf{margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line)}
.pf h4{margin:0 0 .7rem; font-family:var(--serif); font-size:.95rem; font-weight:700;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.55rem}
.pf h4::before{content:"写"; color:var(--accent); font-weight:500}
.pf h4 span{font-family:var(--sans); font-weight:400; font-size:.78rem; color:var(--ink2)}
.pf-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:.5rem}
.pf-i{position:relative; display:block; aspect-ratio:1; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg2); text-decoration:none}
.pf-i img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pf-i:hover img{transform:scale(1.07)}
.pf-i span{position:absolute; left:0; right:0; bottom:0; padding:1.4rem .5rem .45rem;
  font-size:.66rem; line-height:1.25; color:#fff; opacity:0; transition:opacity .3s;
  background:linear-gradient(transparent,rgba(0,0,0,.82))}
.pf-i:hover span,.pf-i:focus-visible span{opacity:1}
@media(max-width:620px){
  .pf-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .pf-i span{opacity:1; font-size:.6rem; padding-top:1rem}
}

.swatches{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.2rem}
.sw{display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .75rem .32rem .34rem;
  border-radius:99px; font-size:.78rem; background:var(--bg2); border:1px solid var(--line)}
.sw i{width:24px; height:24px; border-radius:99px; display:grid; place-items:center; font-style:normal;
  background:var(--c); color:#fff; font-family:var(--serif); font-size:.82rem}

/* ── kartu umum ── */
.g2{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
.pad{padding:1rem 1.15rem}
.pad h3{font-size:1rem; display:flex; align-items:center; gap:.45rem}
.pad .mini{font-size:.75rem; color:var(--ink2)}
.pad p{margin:.45rem 0 0; font-size:.87rem; color:var(--ink2)}
.gl{font-family:var(--serif); font-size:1.2rem; color:var(--accent); line-height:1; flex:none}

/* prestasi */
.aw{display:flex; gap:.9rem; padding:1.1rem 1.2rem; align-items:flex-start}
.aw.big{border-color:var(--accent)}
.aw .ic{flex:none; width:42px; height:42px; border-radius:99px; display:block;
  background:color-mix(in srgb,var(--accent) 12%, var(--surface)); color:var(--accent); padding:9px}
.aw.big .ic{background:var(--accent); color:#fff}
.aw h3{font-size:.98rem}

/* pendidikan + sertifikasi */
.feat{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin:1.4rem 0 .8rem}
.fc{margin:0; border-color:var(--accent); position:relative; overflow:hidden}
.fc figcaption{padding:1.1rem 1.3rem 1.3rem; position:relative}
.fc figcaption::after{content:attr(data-kj); position:absolute; right:-.1em; bottom:-.32em;
  font-family:var(--serif); font-size:6rem; color:var(--accent); opacity:.07; line-height:1}
/* lampiran sertifikat: gambar asli, bisa dibuka besar di tab baru */
.shot{display:block; background:var(--bg2); border-bottom:1px solid var(--line); overflow:hidden}
.shot img{width:100%; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shot:hover img{transform:scale(1.035)}
.mc{margin:0; overflow:hidden}
.mc figcaption{padding:.7rem .9rem .85rem; display:grid; gap:.15rem}
.mc figcaption b{font-family:var(--serif); font-size:.92rem; font-weight:700; line-height:1.25}
.fc .tagline2{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700}
.fc h3{font-size:1.12rem; margin:.35rem 0 .1rem}
.fc .mini{font-size:.76rem; color:var(--ink2)}
.fc p{font-size:.87rem; color:var(--ink2); margin:.6rem 0 0; position:relative}
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{display:inline-flex; align-items:baseline; gap:.42rem; padding:.34rem .7rem; border-radius:99px;
  border:1px solid var(--line); background:var(--surface); font-size:.79rem}
.chip s{text-decoration:none; font-family:var(--serif); font-size:.72rem; color:var(--ink2)}

/* keahlian */
.sk ul{list-style:none; margin:.55rem 0 0; padding:0; display:grid; gap:.3rem}
.sk li{font-size:.85rem; padding-left:1.15rem; position:relative; color:var(--ink2)}
.sk li::before{content:"·"; position:absolute; left:.3rem; color:var(--line); font-size:1.1rem; top:-.15em}
.sk li.star{color:var(--ink); font-weight:500}
.sk li.star::before{content:"◆"; color:var(--accent); font-size:.6rem; top:.15em; left:.2rem}
.lang-row{display:grid; grid-template-columns:96px 1fr auto; gap:.7rem; align-items:center; font-size:.84rem; margin-top:.5rem}
.bar{height:6px; border-radius:99px; background:var(--bg2); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--accent); width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.lang-row small{color:var(--ink2); font-size:.72rem}

/* arah */
.road{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.mile{padding:1.1rem 1.2rem; display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start}
.mile .yr{width:54px; height:54px; border-radius:99px; display:grid; place-items:center; text-align:center;
  background:var(--accent); color:#fff; font-family:var(--serif); font-weight:700; font-size:.92rem}
.mile h3{font-size:.98rem}
.mile .in{font-family:var(--hand); color:var(--accent); font-size:.95rem}
.mile p{font-size:.84rem; color:var(--ink2); margin-top:.35rem}
.running{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:.8rem}
.run{display:flex; gap:.55rem; align-items:flex-start; padding:.7rem .85rem; font-size:.82rem;
  border-radius:11px; background:var(--surface); border:1px solid var(--line); color:var(--ink2)}

/* kutipan + kontak */
.quote{text-align:center; padding:clamp(1.6rem,4vw,2.6rem); border-radius:16px; margin-top:.9rem;
  background:var(--sumi); border-color:var(--sumi); color:var(--kinari); position:relative; overflow:hidden}
.quote p{font-family:var(--serif); font-size:clamp(1.05rem,2.4vw,1.45rem); line-height:1.5; margin:0; color:#fff}
.quote cite{display:block; margin-top:.8rem; font-style:normal; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--kin)}
.quote .kj{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:9rem; color:var(--shu); opacity:.14; line-height:1}
.contact{display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center; padding:1.5rem}
.contact img{width:92px; height:92px; border-radius:99px; object-fit:cover; border:3px solid var(--accent)}
.links{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem}
footer{background:var(--sumi); color:rgba(244,237,225,.5); font-size:.75rem}
.foot-in{max-width:var(--wrap); margin:0 auto; padding:1.2rem 1.25rem; display:flex; flex-wrap:wrap;
  gap:.5rem; justify-content:space-between}

/* ── kendali musik ── */
#snd{position:fixed; right:16px; bottom:16px; z-index:50; display:inline-flex; align-items:center;
  gap:.5rem; padding:.5rem .9rem .5rem .7rem; border-radius:99px; cursor:pointer;
  background:var(--sumi); color:var(--kinari); border:1px solid rgba(201,162,39,.45);
  font-size:.78rem; letter-spacing:.04em; box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
#snd:hover{border-color:var(--kin)}
#snd .eq{display:flex; align-items:flex-end; gap:2px; height:13px; width:15px}
#snd .eq i{flex:1; background:var(--shu); height:3px; border-radius:1px}
#snd[aria-pressed=true] .eq i{animation:eq .9s ease-in-out infinite}
#snd[aria-pressed=true] .eq i:nth-child(2){animation-delay:.15s}
#snd[aria-pressed=true] .eq i:nth-child(3){animation-delay:.3s}
#snd[aria-pressed=true]{border-color:var(--kin)}
@keyframes eq{0%,100%{height:3px}50%{height:13px}}
@media(max-width:620px){#snd{right:10px; bottom:10px; padding:.45rem .7rem .45rem .55rem; font-size:.72rem}}

@media(max-width:980px){
  .hero-in{grid-template-columns:1fr}
  .portrait{max-width:270px; margin:0 auto}
  .tategaki{display:none}
  .work{grid-template-columns:1fr}
  .joblist{position:static; flex-direction:row; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none}
  .joblist::-webkit-scrollbar{display:none}
  .job{min-width:210px}
  .stat-row{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(4){border-left:0}
  .g3,.g4,.road,.running{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .g2,.g3,.g4,.mrow,.feat,.road,.running{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(odd){border-left:0}
  .contact{grid-template-columns:1fr; text-align:center}
  .contact img{margin:0 auto}
  .links{justify-content:center}
  .brand span{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition-duration:.01ms!important}
  .reveal.hide{opacity:1; transform:none}
  #doodles svg{opacity:var(--o)}
}