:root{
  --bg:#0c0c11; --bg-alt:#14141c; --bg-card:#181820;
  --text:#f2ece0; --text-soft:#a9a29a;
  --accent:#d9503f; --accent-2:#c9a227;
  --border:rgba(242,236,224,0.09);
  --shadow:0 10px 40px rgba(0,0,0,0.45);
  --nav-tint:#0c0c11;
  transition:background .5s ease, color .5s ease;
}
html[data-theme="light"]{
  --bg:#f7f2e7; --bg-alt:#efe7d5; --bg-card:#fbf7ee;
  --text:#1c1a17; --text-soft:#5f584e;
  --accent:#b3392b; --accent-2:#876a1c;
  --border:rgba(28,26,23,0.09);
  --shadow:0 10px 30px rgba(0,0,0,0.1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  background:var(--bg); color:var(--text);
  overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}
h1,h2,h3{font-family:'Shippori Mincho',serif; letter-spacing:0.5px;}
a{color:inherit; text-decoration:none;}
section{position:relative; width:100%;}
.section-inner{max-width:1200px; margin:0 auto; padding:120px 8vw; position:relative;}
.tag{display:inline-block; font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:14px; font-weight:500;}

/* ===== NAV ===== */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw; backdrop-filter:blur(14px);
  background:linear-gradient(to bottom, var(--nav-tint) 0%, transparent 100%);
  border-bottom:1px solid var(--border);
  transition:background .5s ease;
}
.logo{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:'Shippori Mincho',serif; font-weight:700; font-size:1rem; color:var(--accent);
}
.nav-links{display:flex; gap:32px; font-size:0.85rem; letter-spacing:1.5px; text-transform:uppercase;}
.nav-links a{position:relative; padding-bottom:4px; color:var(--text-soft); transition:color .3s;}
.nav-links a:hover{color:var(--accent);}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent); transition:width .3s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--accent);}
.nav-links a.active::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:16px;}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer;}
.hamburger span{width:26px; height:2px; background:var(--text);}

.resume-btn{
  display:flex; align-items:center; gap:8px; padding:9px 16px;
  border:1px solid var(--accent); border-radius:2px;
  font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent);
  transition:all .3s ease, opacity .4s ease, transform .4s ease, width .4s ease, padding .4s ease, margin .4s ease;
  white-space:nowrap; cursor:pointer; overflow:hidden;
}
.resume-btn:hover{background:var(--accent); color:#fff; transform:translateY(-3px); box-shadow:0 8px 18px rgba(217,80,63,0.35);}
.resume-btn svg{width:14px; height:14px; fill:currentColor; flex-shrink:0;}
.resume-btn.resume-btn-hidden{
  opacity:0; width:0; padding-left:0; padding-right:0; margin-left:-16px;
  border-color:transparent; pointer-events:none; transform:translateY(-3px) scale(0.9);
}

.yy-toggle{
  width:40px; height:40px; border-radius:50%; cursor:pointer; position:relative;
  background:conic-gradient(from 180deg,#f2ece0 0deg 180deg,#0c0c11 180deg 360deg);
  border:1.5px solid var(--accent-2);
  transition:transform .6s cubic-bezier(.68,-0.4,.32,1.4), box-shadow .3s;
  flex-shrink:0;
}
.yy-toggle:hover{box-shadow:0 0 16px rgba(217,80,63,0.45);}
.yy-toggle::before,.yy-toggle::after{content:''; position:absolute; width:50%; height:50%; border-radius:50%;}
.yy-toggle::before{background:#f2ece0; top:0; left:25%; box-shadow:inset 0 0 0 6px #0c0c11;}
.yy-toggle::after{background:#0c0c11; bottom:0; left:25%; box-shadow:inset 0 0 0 6px #f2ece0;}
html[data-theme="light"] .yy-toggle{transform:rotate(180deg);}
@keyframes yyPulse{0%{box-shadow:0 0 0 0 rgba(217,80,63,.55);}60%{box-shadow:0 0 0 16px rgba(217,80,63,0);}100%{box-shadow:0 0 0 0 rgba(217,80,63,0);}}
.yy-toggle.pulse{animation:yyPulse .65s ease-out;}

.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; padding-top:80px; overflow:hidden;
}
.hero-eyebrow{
  display:flex; align-items:center; gap:8px; color:var(--text-soft);
  letter-spacing:2.5px; text-transform:uppercase; font-size:0.7rem; margin-bottom:28px;
  font-weight:500; position:relative; z-index:3;
}
.status-dot{
  width:6px; height:6px; border-radius:50%; background:#5fd98a; flex-shrink:0;
  box-shadow:0 0 8px #5fd98a; animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.4;}}
.hero h1{font-size:clamp(2.8rem,8vw,5.6rem); line-height:1.05; margin-bottom:18px; letter-spacing:0.5px; position:relative; z-index:3;}
.hero-role{font-size:clamp(1rem,1.6vw,1.2rem); color:var(--accent-2); letter-spacing:0.5px; margin-bottom:46px; font-weight:500; position:relative; z-index:3;}
.btn-row{display:flex; gap:28px; flex-wrap:wrap; align-items:center;}
.hero .btn-row{justify-content:center; position:relative; z-index:3;}
.btn{
  padding:14px 34px; border-radius:2px; font-size:0.85rem; letter-spacing:2px; text-transform:uppercase;
  border:1px solid var(--accent); transition:all .3s ease; position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
}
.btn svg{width:15px; height:15px; fill:currentColor;}
.btn-solid{background:var(--accent); color:#fff;}
.btn-solid:hover{background:transparent; color:var(--accent); transform:translateY(-3px); box-shadow:0 10px 22px rgba(217,80,63,0.3);}
.btn-outline{color:var(--text); border-color:var(--border);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-3px); box-shadow:0 10px 22px rgba(217,80,63,0.18);}
.link-quiet{
  font-size:0.82rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-soft);
  position:relative; padding-bottom:3px; transition:color .3s ease; cursor:pointer;
}
.link-quiet::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--text-soft);
  transform:scaleX(0.4); transform-origin:left; transition:transform .3s ease, background .3s ease;
}
.link-quiet:hover{color:var(--accent);}
.link-quiet:hover::after{transform:scaleX(1); background:var(--accent);}

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-soft); font-size:0.65rem; letter-spacing:2px; text-transform:uppercase;
  opacity:0.75; z-index:4;
}
.scroll-cue svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; animation:scrollBounce 1.8s ease-in-out infinite; flex-shrink:0;}
@keyframes scrollBounce{0%,100%{transform:translateY(0); opacity:0.55;}50%{transform:translateY(4px); opacity:1;}}

.torii-wrap{
  position:absolute; bottom:-4px; left:50%; width:min(500px,80vw); z-index:0; pointer-events:none;
  transform-origin:50% 100%; transform:translateX(-50%) scale(1); opacity:0.18; filter:blur(0px);
  will-change:transform, opacity, filter;
}
.torii-wrap svg{width:100%; display:block; fill:var(--accent);}
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at 50% 70%, transparent 0%, transparent 40%, var(--bg) 100%);
  opacity:0; transition:opacity .1s linear;
}
.petal{
  position:absolute; top:-5%; width:10px; height:10px; border-radius:50% 0 50% 50%;
  background:var(--accent-2); opacity:0.5; pointer-events:none; z-index:1; animation:fall linear infinite;
}
@keyframes fall{0%{transform:translateY(0) rotate(0deg); opacity:0.6;}100%{transform:translateY(110vh) rotate(360deg); opacity:0;}}

.section-wave{position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:100vw; height:70px; pointer-events:none; z-index:3;}
.section-wave svg{width:100%; height:100%; display:block;}
.wave-to-bg path{fill:var(--bg);}
.wave-to-bg-alt path{fill:var(--bg-alt);}

.sec-head{margin-bottom:60px;}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem);}

.about{background:var(--bg-alt);}
.about-grid{display:grid; grid-template-columns:280px 1fr; gap:70px; align-items:center;}
.photo-frame{
  width:220px; height:220px; border-radius:50%; border:3px solid var(--accent); position:relative;
  background:var(--bg-card); box-shadow:var(--shadow); margin:0 auto; overflow:hidden;
}
.photo-frame::before{
  content:''; position:absolute; inset:14px; border:1px solid var(--accent-2); border-radius:50%;
  opacity:0.5; z-index:2; pointer-events:none;
}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1;}
.photo-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-soft); position:relative; z-index:1;}
.photo-placeholder svg{width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.4; opacity:0.5;}
.about-text p{color:var(--text-soft); line-height:1.85; margin-bottom:18px; font-size:1.02rem;}
.about-text strong{color:var(--text); font-weight:600;}
.stats{display:flex; gap:50px; margin-top:36px; flex-wrap:wrap;}
.stat h3{font-size:2.2rem; color:var(--accent);}
.stat span{font-size:0.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-soft);}

.experience{background:var(--bg);}
.exp-list{display:flex; flex-direction:column; gap:2px;}
.exp-item{
  display:grid; grid-template-columns:70px 1fr; gap:28px; align-items:start;
  padding:34px 26px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg-card);
  transition:padding-left .35s ease, background .35s ease, opacity .6s ease, transform .6s ease;
}
.exp-item:hover{padding-left:42px; background:var(--bg-alt);}
.exp-num{font-family:'Shippori Mincho',serif; font-size:1.6rem; color:var(--accent-2); opacity:0.7; padding-top:4px;}
.exp-header{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:6px;}
.exp-header h3{font-size:1.2rem;}
.exp-duration{font-size:0.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--accent-2); font-weight:600;}
.exp-company{font-size:0.9rem; color:var(--text-soft); margin-bottom:16px; font-weight:500;}
.exp-bullets{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;}
.exp-bullets li{list-style:none; position:relative; padding-left:18px; color:var(--text-soft); font-size:0.92rem; line-height:1.6;}
.exp-bullets li::before{content:'—'; position:absolute; left:0; color:var(--accent);}
.exp-tags{display:flex; gap:8px; flex-wrap:wrap;}
.exp-tags span{
  font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; padding:4px 10px;
  border:1px solid var(--border); border-radius:20px; color:var(--text-soft); cursor:default;
  transition:all .25s ease;
}
.exp-tags span:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 10px rgba(217,80,63,0.15);}

.education{margin-top:46px; padding-top:32px; border-top:1px solid var(--border);}
.education-label{font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; font-weight:500;}
.edu-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:10px;}
.edu-row h4{font-size:1.05rem; font-weight:600;}
.edu-row .edu-school{color:var(--text-soft); font-size:0.9rem; margin-top:4px;}
.edu-row .edu-duration{font-size:0.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--accent-2); font-weight:600; white-space:nowrap;}

/* ===== SKILLS ===== */
#skills{background:var(--bg-alt);}
#skills .section-inner{padding-top:80px; padding-bottom:80px;}
#skills .sec-head{margin-bottom:36px;}
.skills-categories{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 40px;
}
.skill-cat-header{display:flex; align-items:center; gap:12px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border);}
.skill-cat-glyph{
  width:30px; height:30px; border-radius:50%; border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); flex-shrink:0;
}
.skill-cat-glyph svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.skill-cat-title h3{font-size:0.98rem;}
.skill-tile-row{display:flex; flex-wrap:wrap; gap:9px;}
.skill-tile{
  background:var(--bg-card); border:1px solid var(--border); border-radius:5px; padding:9px 12px;
  display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0; cursor:pointer;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.skill-tile:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:0 8px 16px rgba(217,80,63,0.18); background:var(--bg);}
.skill-icon{width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; transition:color .3s ease, transform .3s ease;}
.skill-tile:hover .skill-icon{color:var(--accent-2); transform:scale(1.15);}
.skill-icon svg{width:100%; height:100%; display:block;}
.skill-name{font-size:0.76rem; font-weight:600; color:var(--text); line-height:1.15; white-space:nowrap; transition:color .3s ease;}
.skill-tile:hover .skill-name{color:var(--accent);}
@media (max-width:760px){
  .skills-categories{grid-template-columns:1fr; gap:24px;}
  .skill-tile{padding:8px 10px;}
  #skills .section-inner{padding-top:60px; padding-bottom:60px;}
}

.projects{background:var(--bg);}
.proj-list{display:flex; flex-direction:column; gap:2px;}
.proj-item{
  display:grid; grid-template-columns:70px 1fr 140px; gap:28px; align-items:start;
  padding:34px 26px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg-card);
  transition:padding-left .35s ease, background .35s ease, opacity .6s ease, transform .6s ease;
}
.proj-item:hover{padding-left:42px; background:var(--bg-alt);}
.proj-num{font-family:'Shippori Mincho',serif; font-size:1.6rem; color:var(--accent-2); opacity:0.7; padding-top:4px;}
.proj-body h3{font-size:1.25rem; margin-bottom:16px;}
.proj-pao{display:flex; flex-direction:column; gap:9px; margin-bottom:16px;}
.proj-pao-row{display:grid; grid-template-columns:106px 1fr; gap:14px; font-size:0.9rem; line-height:1.55;}
.proj-pao-row .pao-label{font-size:0.68rem; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; color:var(--accent-2); padding-top:2px; white-space:nowrap;}
.proj-pao-row .pao-text{color:var(--text-soft);}
.proj-pao-row.outcome .pao-text{color:var(--text); font-weight:500;}
.proj-tags{display:flex; gap:8px; flex-wrap:wrap;}
.proj-tags span{
  font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; padding:4px 10px;
  border:1px solid var(--border); border-radius:20px; color:var(--text-soft); cursor:default;
  transition:all .25s ease;
}
.proj-tags span:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 10px rgba(217,80,63,0.15);}
.proj-link{
  justify-self:end; font-size:0.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent);
  white-space:nowrap; padding:8px 14px; border:1px solid transparent; border-radius:3px;
  transition:all .3s ease; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.proj-link:hover{border-color:var(--accent); background:rgba(217,80,63,0.08); transform:translateY(-2px); box-shadow:0 6px 14px rgba(217,80,63,0.15);}
.proj-link .arrow{display:inline-block; transition:transform .3s ease;}
.proj-link:hover .arrow{transform:translateX(4px);}

.contact{background:var(--bg-alt);}
.contact-card{
  max-width:960px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border);
  border-radius:6px; padding:60px 54px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.contact-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center;}
.contact-left h2{font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:16px;}
.contact-left p{color:var(--text-soft); line-height:1.75; margin-bottom:30px; max-width:420px;}
.contact-right{display:flex; flex-direction:column; border-top:1px solid var(--border);}
.contact-row{display:flex; align-items:center; gap:16px; padding:16px 4px; border-bottom:1px solid var(--border); transition:transform .25s ease; cursor:pointer;}
a.contact-row:hover{transform:translateX(6px);}
.row-icon{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--bg);
  flex-shrink:0; transition:all .3s ease;
}
.row-icon svg{width:17px; height:17px; fill:currentColor;}
a.contact-row:hover .row-icon{background:var(--accent); color:#fff; border-color:var(--accent);}
.contact-row-text{display:flex; flex-direction:column; gap:2px; overflow:hidden;}
.row-label{font-size:0.66rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--text-soft);}
.row-value{font-size:0.92rem; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

footer{background:var(--bg-alt); padding:36px 8vw; text-align:center; font-size:0.78rem; letter-spacing:1px; color:var(--text-soft); border-top:1px solid var(--border);}

.fade-in{opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease;}
.fade-in.visible{opacity:1; transform:translateY(0);}
.stagger-item{opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; transition-delay:var(--d,0s);}
.stagger-item.visible{opacity:1; transform:translateY(0);}

.social-rail{
  position:fixed; left:22px; top:50%; transform:translateY(-50%); z-index:90;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .6s ease, transform .6s ease;
}
.social-rail.rail-hidden{opacity:0; transform:translate(-14px,-50%); pointer-events:none;}
.social-rail a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-soft);
  background:var(--bg-card); box-shadow:var(--shadow); transition:all .3s ease; cursor:pointer;
}
.social-rail a svg{width:18px; height:18px; fill:currentColor;}
.social-rail a:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-4px);}
.social-rail::after{content:''; width:1px; height:60px; background:var(--border); margin-top:2px;}

.redirect-overlay{
  position:fixed; inset:0; z-index:300; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.redirect-overlay.show{opacity:1; pointer-events:auto;}
.redirect-spinner{
  width:38px; height:38px; border-radius:50%; border:2.5px solid var(--border);
  border-top-color:var(--accent); animation:redirectSpin 0.8s linear infinite;
}
@keyframes redirectSpin{to{transform:rotate(360deg);}}
.redirect-text{color:var(--text-soft); font-size:0.85rem; letter-spacing:1px; text-align:center;}
.redirect-text strong{color:var(--text); font-weight:600;}

@media (max-width:860px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .resume-btn span{display:none;}
  .resume-btn{padding:9px 12px;}
  .about-grid{grid-template-columns:1fr; text-align:center;}
  .exp-item{grid-template-columns:1fr; text-align:left;}
  .proj-item{grid-template-columns:1fr; text-align:left;}
  .proj-link{justify-self:start;}
  .proj-pao-row{grid-template-columns:1fr; gap:3px;}
  .contact-card{padding:40px 26px;}
  .contact-grid{grid-template-columns:1fr; gap:34px; text-align:left;}
  .contact-left p{max-width:none;}
  .social-rail{left:auto; right:16px; top:auto; bottom:16px; transform:none; flex-direction:row; background:var(--bg-card); padding:8px 10px; border-radius:30px; border:1px solid var(--border);}
  .social-rail.rail-hidden{transform:translateY(14px);}
  .social-rail::after{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .torii-wrap{transition:none !important;}
}