:root{
  --ink:#22303a;
  --ink-soft:#3d5261;
  --paper:#fbf7ee;
  --sun:#f4a259;
  --leaf:#2f7d6d;
  --sky-day-1:#8ecfeb; --sky-day-2:#e3f4f9;
  --sky-gold-1:#f6b26b; --sky-gold-2:#fbe3c2;
  --sky-dusk-1:#6d5a96; --sky-dusk-2:#f0947e;
  --sky-night-1:#151d38; --sky-night-2:#33436a;
  --panel-border:3px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* custom scrollbar */
html{scrollbar-width:thin;scrollbar-color:#22303a rgba(251,247,238,.55)}
::-webkit-scrollbar{width:13px}
::-webkit-scrollbar-track{background:rgba(251,247,238,.55)}
::-webkit-scrollbar-thumb{
  background:#22303a;border-radius:999px;
  border:3px solid rgba(251,247,238,.9);
}
::-webkit-scrollbar-thumb:hover{background:#f4a259}
#progress{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:60;
  background:var(--sun);transform:scaleX(0);transform-origin:left center;
  box-shadow:0 1px 0 rgba(34,48,58,.35);pointer-events:none;
}
#smooth-wrapper{overflow:hidden;position:relative}
body{
  font-family:'Karla',sans-serif;
  color:var(--ink);
  background:var(--sky-day-2);
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--sun);color:var(--ink)}
img{user-select:none;-webkit-user-drag:none}

/* ---------- fixed sky + webgl ---------- */
#sky{position:fixed;inset:0;z-index:-3}
.sky-layer{position:absolute;inset:0;opacity:0}
.sky-day{background:linear-gradient(to bottom,var(--sky-day-1),var(--sky-day-2));opacity:1}
.sky-gold{background:linear-gradient(to bottom,var(--sky-gold-1),var(--sky-gold-2))}
.sky-dusk{background:linear-gradient(to bottom,var(--sky-dusk-1),var(--sky-dusk-2))}
.sky-night{background:linear-gradient(to bottom,var(--sky-night-1),var(--sky-night-2))}
#stars{position:fixed;inset:0;z-index:-2;opacity:0;pointer-events:none}
#webgl{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none}
.splash-row{display:flex;width:100%;height:50%}
.splash-box{width:20%;height:100%;background:var(--sky-day-1)}
.splash-box:nth-child(even){background:#7bc1e2}
.splash-txt{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;
  text-align:center;
}
.splash-txt .ep{font-family:'Shippori Mincho',serif;color:var(--ink);font-size:clamp(13px,1.6vw,17px);letter-spacing:.5em;opacity:0}
.splash-txt .ep-title{font-family:'Syne',sans-serif;color:#fbf7ee;font-weight:800;font-size:clamp(22px,5.5vw,54px);text-shadow:3px 3px 0 rgba(34,48,58,.9);opacity:0}
.splash-txt .ep-sub{font-family:'DotGothic16',sans-serif;color:var(--ink);font-size:clamp(12px,1.4vw,15px);letter-spacing:.3em;opacity:0}

/* ---------- fixed nav ---------- */
.site-nav{
  position:fixed;top:16px;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 clamp(14px,3vw,36px);pointer-events:none;
}
.site-nav>*{pointer-events:auto}
.logo{
  width:54px;height:54px;border-radius:50%;background:var(--paper);
  border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:transform .2s;
}
.logo:hover{transform:rotate(-8deg) scale(1.05)}
.burger{
  width:56px;height:56px;border-radius:50%;background:var(--paper);
  border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;
  display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;
  transition:background .3s;
}
.burger .bar{width:22px;height:2.5px;background:var(--ink);border-radius:2px;transition:all .3s}
.burger:hover,.burger.open{background:var(--ink)}
.burger:hover .bar,.burger.open .bar{background:var(--paper)}
.burger.open .bar:first-child{transform:rotate(45deg) translate(2.6px,2.6px)}
.burger.open .bar:last-child{transform:rotate(-45deg) translate(2.6px,-2.6px)}

/* ---------- menu panel ---------- */
.menu-panel{
  position:fixed;top:10px;right:10px;left:10px;z-index:40;
  background:rgba(16,21,28,.96);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:2.5px solid rgba(251,247,238,.16);border-radius:20px;
  padding:96px 34px 34px;display:flex;flex-direction:column;gap:30px;
  transform:translateY(-115%);opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.25,.46,.45,.94),opacity .28s ease;
}
@media (min-width:768px){.menu-panel{left:auto;width:400px;padding:96px 44px 40px}}
.menu-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}
.menu-panel nav{display:flex;flex-direction:column;gap:6px}
.menu-panel nav a{
  font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(30px,4.5vw,38px);
  color:var(--paper);text-decoration:none;line-height:1.3;
  display:flex;align-items:baseline;gap:14px;transition:color .25s;
}
.menu-panel nav a:hover{color:var(--sun)}
.menu-panel nav a .jp{font-family:'DotGothic16',sans-serif;font-size:12px;letter-spacing:.2em;color:rgba(251,247,238,.45)}
.menu-mail{color:rgba(251,247,238,.65);font-size:17px;text-decoration:none;transition:color .25s}
.menu-mail:hover{color:var(--paper)}
.menu-socials{display:flex;gap:22px}
.menu-socials a{
  color:rgba(251,247,238,.55);font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px;transition:color .25s;
}
.menu-socials a:hover{color:var(--sun)}

/* ---------- generic ---------- */
.wrap{width:100%;margin:0 auto;padding:0 clamp(18px,4.5vw,72px)}
section{position:relative;padding:clamp(64px,8vh,104px) 0}
.jp-rail{
  position:absolute;top:clamp(64px,8vh,104px);right:clamp(8px,2vw,28px);
  writing-mode:vertical-rl;font-family:'Shippori Mincho',serif;
  font-size:clamp(14px,1.5vw,18px);letter-spacing:.45em;color:var(--ink-soft);
  opacity:.55;user-select:none;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'DotGothic16',sans-serif;font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:18px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--sun)}
h2.sec-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(34px,5.4vw,64px);line-height:1.04;letter-spacing:-.01em;
  margin-bottom:14px;
  text-shadow:0 2px 22px rgba(251,247,238,.5);
}
#contact h2.sec-title{text-shadow:none}
.brush{position:relative;display:inline-block}
.brush svg{position:absolute;left:-2%;bottom:-10px;width:104%;height:16px;overflow:visible}
.brush svg path{stroke:var(--sun);stroke-width:7;fill:none;stroke-linecap:round}

/* ---------- HERO ---------- */
#hero{position:relative;min-height:100svh;overflow:hidden;padding:0;display:flex;align-items:center}
.hero-row{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;
  gap:clamp(18px,3.5vw,70px);
  padding:clamp(92px,12vh,132px) clamp(16px,3.2vw,52px) clamp(56px,7vh,90px);
}
.hero-giant{
  position:absolute;bottom:-.05em;left:0;right:0;z-index:1;
  font-family:'Syne',sans-serif;font-weight:800;text-align:center;
  font-size:clamp(96px,20.5vw,400px);line-height:.8;letter-spacing:-.045em;
  color:var(--paper);white-space:nowrap;pointer-events:none;user-select:none;
}
.hero-copy{position:relative;z-index:3}
.hero-kicker{
  font-family:'DotGothic16',sans-serif;font-size:clamp(12px,1.3vw,15px);
  letter-spacing:.35em;color:var(--ink-soft);margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.hero-kicker .live{
  width:9px;height:9px;border-radius:50%;background:var(--leaf);
  box-shadow:0 0 0 0 rgba(47,125,109,.6);animation:pulse 2s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(47,125,109,0)}100%{box-shadow:0 0 0 0 rgba(47,125,109,0)}}
.hero-disp{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(42px,6.3vw,104px);line-height:.95;letter-spacing:-.02em;
  margin:8px 0 20px;
}
.hero-disp .dline{display:block;overflow:hidden;padding-bottom:.06em}
.hero-disp .dline>span{display:inline-block;will-change:transform}
.hero-disp .out{color:transparent;-webkit-text-stroke:2.4px var(--ink)}
.hero-headline{
  font-weight:500;font-size:clamp(16px,1.55vw,20px);line-height:1.55;
  color:var(--ink-soft);max-width:560px;
}
.burst{
  position:absolute;inset:-14%;z-index:0;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(34,48,58,.13) 0deg 4deg,transparent 4deg 13deg);
  -webkit-mask-image:radial-gradient(circle,#000 28%,transparent 66%);
  mask-image:radial-gradient(circle,#000 28%,transparent 66%);
  will-change:transform;
}
.hanko{
  position:absolute;bottom:-16px;right:-12px;z-index:6;width:78px;height:78px;
  border-radius:50%;background:#c73e3a;color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:'Shippori Mincho',serif;font-weight:700;font-size:32px;
  box-shadow:0 0 0 3px var(--paper),0 0 0 6px #c73e3a,4px 6px 0 rgba(34,48,58,.5);
  transform:rotate(-8deg);user-select:none;
}
.tape{
  position:absolute;top:-11px;left:7%;z-index:6;width:96px;height:26px;
  background:rgba(244,162,89,.85);border:1.5px solid rgba(34,48,58,.35);
  transform:rotate(-5deg);
}
.hero-headline .wd{display:inline-block;margin-right:.27em;will-change:transform,filter}
.hero-cta{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cta-pill{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  padding:6px;border:3px solid var(--ink);border-radius:999px;text-decoration:none;
  box-shadow:5px 5px 0 var(--ink);background:rgba(251,247,238,.25);
}
.cta-pill .bg{
  position:absolute;top:5px;bottom:5px;left:6px;z-index:0;border-radius:999px;
  background:var(--paper);width:calc(100% - 12px - 50px - 10px);
  transition:width .4s cubic-bezier(.25,.46,.45,.94);
}
.cta-pill:hover .bg{width:calc(100% - 12px)}
.cta-pill .txt{position:relative;z-index:1;font-weight:700;font-size:16px;color:var(--ink);padding:11px 26px;white-space:nowrap}
.cta-pill .circ{
  position:relative;z-index:1;flex-shrink:0;width:50px;height:50px;border-radius:50%;
  background:var(--sun);border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}
.cta-pill:hover .circ{transform:translateX(-6px)}
.btn{
  font-family:'Karla',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;
  padding:14px 26px;border:var(--panel-border) solid var(--ink);border-radius:999px;
  background:var(--paper);color:var(--ink);text-decoration:none;
  box-shadow:5px 5px 0 var(--ink);transition:transform .18s ease,box-shadow .18s ease;
  display:inline-flex;align-items:center;gap:9px;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn.solid{background:var(--sun)}
.hero-metrics{display:flex;gap:clamp(18px,3vw,40px);margin-top:36px;flex-wrap:wrap}
.metric .num{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(24px,2.8vw,34px);line-height:1}
.metric .lbl{font-family:'DotGothic16',sans-serif;font-size:11px;letter-spacing:.22em;color:var(--ink-soft);margin-top:5px}

/* --- character scene --- */
.char-scene{
  position:relative;z-index:2;justify-self:center;
  width:max-content;max-width:100%;perspective:1100px;
}
.char-panel{
  position:relative;width:max-content;max-width:100%;border:var(--panel-border) solid var(--ink);
  border-radius:18px;background:linear-gradient(165deg,#cfeaf6,#f6e7cf);
  box-shadow:9px 9px 0 rgba(34,48,58,.85);overflow:hidden;
  outline:2px solid var(--ink);outline-offset:8px;
  transform-style:preserve-3d;will-change:transform;
}
.char-panel::before{
  content:"";position:absolute;inset:0 0 auto 0;height:90px;z-index:2;
  background-image:radial-gradient(rgba(34,48,58,.5) 1px,transparent 1px);
  background-size:9px 9px;opacity:.18;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);
}
.char-panel img{display:block;height:clamp(500px,86vh,1080px);width:auto;max-width:100%;object-fit:cover}
.char-panel .char-ink{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(circle 120px at var(--mx,-999px) var(--my,-999px),#000 0 55%,transparent 100%);
  mask-image:radial-gradient(circle 120px at var(--mx,-999px) var(--my,-999px),#000 0 55%,transparent 100%);
}
.char-panel .plate{
  position:absolute;left:12px;bottom:12px;z-index:3;
  font-family:'DotGothic16',sans-serif;font-size:11.5px;letter-spacing:.2em;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:8px;
  padding:7px 12px;box-shadow:3px 3px 0 var(--ink);
}
.char-panel .hint{
  position:absolute;top:12px;left:12px;z-index:3;
  font-family:'DotGothic16',sans-serif;font-size:10px;letter-spacing:.14em;
  background:var(--ink);color:var(--paper);border-radius:6px;padding:5px 9px;
}
.badge{
  position:absolute;top:-40px;right:-14px;width:116px;height:116px;z-index:4;
  filter:drop-shadow(3px 3px 0 rgba(34,48,58,.8));will-change:transform;
}
.chip{
  position:absolute;z-index:4;
  font-family:'DotGothic16',sans-serif;font-size:12px;letter-spacing:.08em;
  background:#fff;border:2.5px solid var(--ink);border-radius:999px;
  padding:7px 14px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap;
}
.chip-1{left:-16%;top:14%}
.chip-2{right:-12%;top:44%}
.chip-3{left:-20%;bottom:26%}
.spark{position:absolute;z-index:1;font-size:22px;color:var(--sun);text-shadow:1px 1px 0 var(--ink)}
.sp1{top:-6%;left:4%}.sp2{top:24%;right:-14%}.sp3{top:44%;left:-16%;font-size:15px}
.hero-soot{position:absolute;z-index:4;width:62px;left:-22%;bottom:2%}
.scroll-cue{
  position:absolute;bottom:22px;left:clamp(20px,4vw,48px);z-index:3;
  font-family:'DotGothic16',sans-serif;font-size:11px;letter-spacing:.3em;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue .dotline{width:2px;height:40px;background:linear-gradient(var(--ink) 40%,transparent 0);background-size:100% 8px;animation:drip 1.6s linear infinite}
@keyframes drip{to{background-position-y:16px}}

/* ---------- marquee ---------- */
.marquee{
  border-top:var(--panel-border) solid var(--ink);
  border-bottom:var(--panel-border) solid var(--ink);
  background:var(--paper);padding:14px 0;overflow:hidden;white-space:nowrap;
  transform:rotate(-1.2deg);margin:0 -40px;will-change:transform;
}
.marquee-track{display:inline-block;will-change:transform}
.marquee span{
  font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(16px,2vw,22px);
  letter-spacing:.06em;margin:0 26px;
}
.marquee .jp{font-family:'Shippori Mincho',serif;color:var(--leaf)}
.marquee .dot{color:var(--sun)}

.motto{
  margin-top:18px;padding-top:14px;border-top:1.5px dashed rgba(34,48,58,.28);
  font-family:'Shippori Mincho',serif;font-size:17px;color:var(--leaf);
}
.motto span{font-family:'Karla',sans-serif;font-size:13.5px;color:var(--ink-soft);margin-left:10px}

/* ---------- manga panel card ---------- */
.panel{
  position:relative;background:var(--paper);
  border:var(--panel-border) solid var(--ink);border-radius:14px;
  box-shadow:7px 7px 0 rgba(34,48,58,.85);
  padding:clamp(22px,3vw,34px);
}
.panel::after{
  content:"";position:absolute;top:0;right:0;width:86px;height:86px;
  background-image:radial-gradient(var(--ink) 1.1px,transparent 1.1px);
  background-size:10px 10px;opacity:.14;border-radius:0 11px 0 100%;
  pointer-events:none;
}

/* ---------- about ---------- */
#about .grid{display:grid;grid-template-columns:1fr minmax(300px,460px);gap:clamp(24px,4vw,72px);align-items:start}
#about p{margin-bottom:14px;font-size:clamp(15px,1.6vw,18px);color:var(--ink-soft)}
#about p b{color:var(--ink)}
.profile-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;overflow:visible}
.profile-card .bubble{
  font-family:'DotGothic16',sans-serif;font-size:13px;letter-spacing:.06em;
  border:2.5px solid var(--ink);background:#fff;border-radius:18px;padding:10px 16px;position:relative;
}
.profile-card .bubble::after{
  content:"";position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top:11px solid var(--ink);
}
.pc-img{
  position:relative;width:100%;border:2.5px solid var(--ink);border-radius:12px;
  overflow:hidden;box-shadow:5px 5px 0 rgba(34,48,58,.85);
  transform:rotate(-1.4deg);
}
.pc-img img{display:block;width:100%;height:auto}
.pc-img .tape{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:96px;height:26px;background:rgba(244,162,89,.85);border:1.5px solid rgba(34,48,58,.4);
}
.pc-soot{position:absolute;right:-20px;bottom:-18px;width:74px;z-index:3}
.fact-list{list-style:none;margin-top:4px;width:100%;text-align:left}
.fact-list li{
  display:flex;justify-content:space-between;gap:12px;padding:9px 2px;
  border-bottom:1.5px dashed rgba(34,48,58,.28);font-size:14.5px;
}
.fact-list li span:first-child{font-family:'DotGothic16',sans-serif;letter-spacing:.06em;color:var(--ink-soft)}
.fact-list li span:last-child{font-weight:700}

/* ---------- skills / status window ---------- */
#skills .status{
  background:linear-gradient(160deg,rgba(20,28,48,.94),rgba(30,42,74,.94));
  border:2.5px solid #7fb4ff;border-radius:16px;color:#eaf2ff;
  box-shadow:0 0 0 3px rgba(127,180,255,.18),0 0 46px rgba(127,180,255,.28);
  padding:clamp(24px,3.4vw,42px);position:relative;overflow:hidden;
}
#skills .status::before{
  content:"STATUS WINDOW";position:absolute;top:14px;right:18px;
  font-family:'DotGothic16',sans-serif;font-size:11px;letter-spacing:.3em;color:#7fb4ff;opacity:.85;
}
.status .shine{
  position:absolute;top:0;bottom:0;width:60%;left:-70%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(159,195,255,.14),transparent);
}
.status h3{
  font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,28px);
  color:#bcd8ff;margin-bottom:4px;
}
.status .cls{font-family:'DotGothic16',sans-serif;color:#7fb4ff;font-size:13px;letter-spacing:.2em;margin-bottom:26px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.stat-group h4{
  font-family:'DotGothic16',sans-serif;font-size:12.5px;letter-spacing:.24em;color:#9fc3ff;
  margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.stat-group h4::before{content:"▸";color:var(--sun)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;
  border:1.5px solid rgba(159,195,255,.5);background:rgba(127,180,255,.1);
  transition:background .2s,transform .2s;
}
.tag:hover{background:rgba(244,162,89,.28);transform:translateY(-2px)}

/* ---------- experience ---------- */
.timeline{
  position:relative;margin-top:26px;
  background:rgba(251,247,238,.86);border:var(--panel-border) solid var(--ink);
  border-radius:14px;box-shadow:7px 7px 0 rgba(34,48,58,.85);
  padding:clamp(24px,3.4vw,42px) clamp(20px,3vw,42px);
}
.timeline::before{
  content:"";position:absolute;left:clamp(29px,3vw + 9px,51px);top:30px;bottom:30px;width:3px;
  background:repeating-linear-gradient(var(--ink) 0 10px,transparent 10px 18px);
}
.tl-item{position:relative;padding:0 0 42px 46px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:0;top:6px;width:21px;height:21px;border-radius:50%;
  background:var(--sun);border:3px solid var(--ink);
}
.tl-item .when{
  font-family:'DotGothic16',sans-serif;font-size:12.5px;letter-spacing:.16em;color:var(--ink-soft);
}
.tl-item h3{
  font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(19px,2.3vw,25px);margin:5px 0 2px;
}
.tl-item .role{font-weight:700;color:var(--leaf);font-size:14.5px;margin-bottom:9px}
.tl-item p{color:var(--ink-soft);font-size:15px;max-width:680px}

/* ---------- projects ---------- */
#projects .pgrid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.8vw,22px);margin-top:34px;
}
.proj{
  grid-column:span 3;position:relative;background:var(--paper);
  border:var(--panel-border) solid var(--ink);border-radius:14px;
  padding:clamp(20px,2.6vw,30px);overflow:hidden;
  box-shadow:6px 6px 0 rgba(34,48,58,.85);
  transition:transform .25s ease,box-shadow .25s ease;
}
.proj:nth-child(1){grid-column:span 4}
.proj:nth-child(2){grid-column:span 2}
.proj:nth-child(3){grid-column:span 2}
.proj:nth-child(4){grid-column:span 4}
.proj:nth-child(5){grid-column:span 6}
.proj:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:10px 10px 0 rgba(34,48,58,.85)}
.proj .ht{
  position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background-image:radial-gradient(var(--ink) 1px,transparent 1px);background-size:9px 9px;
  pointer-events:none;
}
.proj:hover .ht{opacity:.08}
.proj .no{
  font-family:'Shippori Mincho',serif;font-size:12.5px;letter-spacing:.3em;color:var(--ink-soft);
  display:block;margin-bottom:10px;
}
.proj h3{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(19px,2.4vw,26px);margin-bottom:8px}
.proj p{font-size:14.5px;color:var(--ink-soft);margin-bottom:14px}
.proj .stack{display:flex;flex-wrap:wrap;gap:7px}
.proj .stack span{
  font-family:'DotGothic16',sans-serif;font-size:11.5px;letter-spacing:.05em;
  border:1.5px solid var(--ink);border-radius:999px;padding:4px 10px;background:#fff;
}

/* ---------- contact (night) ---------- */
#contact{color:#f2ecdc;padding-bottom:0}
#contact .eyebrow{color:#c9d4f2}
#contact .eyebrow::before{background:var(--sun)}
#contact h2{color:#fbf7ee}
#contact .big-mail{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(20px,4.4vw,52px);letter-spacing:-.01em;
  color:#fbf7ee;text-decoration:none;display:inline-block;margin:18px 0 26px;
  border-bottom:4px solid var(--sun);padding-bottom:6px;word-break:break-all;
  transition:color .2s;
}
#contact .big-mail:hover{color:var(--sun)}
#contact .socials{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
#contact .socials a{
  color:#f2ecdc;text-decoration:none;font-weight:700;font-size:15px;
  border:2px solid rgba(242,236,220,.6);border-radius:999px;padding:11px 22px;
  transition:all .2s;
}
#contact .socials a:hover{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.jp-night{writing-mode:vertical-rl;font-family:'Shippori Mincho',serif;color:rgba(242,236,220,.5);letter-spacing:.4em;position:absolute;right:clamp(8px,2vw,28px);top:120px;font-size:16px}
.hills{display:block;width:100%;margin-top:60px}
.endmark{
  text-align:center;font-family:'Shippori Mincho',serif;letter-spacing:.5em;
  font-size:13px;color:rgba(242,236,220,.55);padding:26px 0 34px;background:#0d1326;
}

.reveal{opacity:0;transform:translateY(34px)}

@media (max-width:900px){
  .hero-row{grid-template-columns:1fr;gap:40px;padding-top:110px;padding-bottom:90px}
  .hero-row>*{min-width:0}
  .hero-headline{max-width:100%}
  .char-scene{width:min(78vw,340px)}
  .char-panel{width:100%}
  .char-panel img{width:100%;height:auto}
  .hero-giant{font-size:clamp(80px,19vw,180px)}
  .scroll-cue{display:none}
  .chip-1{left:-6%}.chip-2{right:-4%}.chip-3{left:-8%}
  .hanko{width:62px;height:62px;font-size:26px;bottom:-12px;right:-6px}
  .hero-disp{font-size:clamp(26px,8vw,58px);overflow-wrap:break-word}
  .badge{width:90px;height:90px;top:-26px;right:-6px}
  .hero-soot{left:-8%}
}
/* laptop range: two-column layout is active but the wide Syne title
   overruns its column into the image card — scale it down so it clears */
@media (min-width:901px) and (max-width:1760px){
  .hero-disp{font-size:clamp(36px,4.4vw,76px)}
}
@media (max-width:820px){
  #about .grid{grid-template-columns:1fr}
  #projects .pgrid{grid-template-columns:1fr}
  .proj,.proj:nth-child(1),.proj:nth-child(2),.proj:nth-child(3),.proj:nth-child(4),.proj:nth-child(5){grid-column:span 1}
  .jp-rail,.jp-night{display:none}
  .marquee{margin:0 -20px}
  .chip-1{left:-2%}.chip-2{right:-3%}.chip-3{left:-4%}
  .badge{width:92px;height:92px;top:-26px;right:-4px}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .hero-row{padding-left:16px;padding-right:16px;gap:32px}
  .hero-metrics{gap:16px}
  .hero-cta{gap:12px}
  .cta-pill .txt{padding:10px 18px;font-size:15px}
  .char-panel img{height:auto;width:100%}
  .menu-panel{padding:84px 24px 28px}
  .menu-panel nav a{font-size:28px}
  .timeline{padding:22px 16px}
  .tl-item{padding-left:38px}
  .timeline::before{left:25px}
  .panel{padding:20px 16px}
  .site-nav{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue .dotline,.hero-kicker .live{animation:none}
}