:root{--bg:#08060d;--purple:#a845ee;--purple2:#6c22ad;--pale:#dcb8fa;--white:#f9f6fb;--line:rgba(184,93,242,.38)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:"Noto Sans JP",sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;z-index:-2;inset:0;background:radial-gradient(circle at 78% 10%,rgba(110,30,170,.26),transparent 28%),radial-gradient(circle at 6% 52%,rgba(78,12,105,.23),transparent 34%),#08060d}a{color:inherit}img{display:block;width:100%}.site-header{position:fixed;z-index:30;top:0;left:0;right:0;height:78px;padding:0 clamp(24px,6vw,88px);display:flex;align-items:center;justify-content:space-between;background:rgba(8,6,13,.84);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.header-name{text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.2em}.site-header nav{display:flex;gap:28px}.site-header nav a{text-decoration:none;font-size:11px;letter-spacing:.18em}.menu-button{display:none;color:white;background:none;border:0}.menu-button span{display:block;width:24px;height:1px;margin:5px;background:currentColor}.menu-button i{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.hero{min-height:100svh;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:6vw;padding:118px clamp(24px,7vw,110px) 70px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:78px 0 auto;height:38%;background:linear-gradient(110deg,transparent,rgba(117,35,178,.18),transparent);filter:blur(25px)}.hero-title{position:relative;z-index:2}.signature-wrap{position:relative;width:min(47vw,670px)}h1{margin:0;color:#f3ddff;font-family:"Allura","Brush Script MT","Segoe Script",cursive;font-size:clamp(96px,13vw,210px);font-weight:400;line-height:.54;letter-spacing:-.035em;transform:rotate(-4deg);text-shadow:0 0 7px #e8b5ff,0 0 19px #9a42db,0 0 44px #6820a1}.signature-wrap:after{content:"";position:absolute;left:38%;right:3%;height:5px;bottom:-15px;background:linear-gradient(90deg,transparent,var(--purple),transparent);transform:rotate(-6deg);box-shadow:0 0 15px var(--purple)}h1 span{padding-left:10%}.kiss{position:absolute;width:clamp(70px,9vw,124px);right:-2%;bottom:-17%;object-fit:contain;transform:rotate(-8deg);filter:drop-shadow(0 0 8px rgba(167,16,74,.75))}.hero-title>p{margin:74px 0 0 8px;font-size:clamp(15px,1.6vw,21px);letter-spacing:.22em}.hero-photo{position:relative;z-index:1;max-width:600px;justify-self:end;padding:12px;border:2px solid var(--purple);box-shadow:0 0 20px rgba(169,69,238,.72),inset 0 0 16px rgba(169,69,238,.25)}.hero-photo img{aspect-ratio:4/5.35;object-fit:cover;object-position:center 8%}.hero-line{position:absolute;right:-10%;bottom:6%;width:57%;height:1px;background:linear-gradient(90deg,transparent,var(--purple),transparent);box-shadow:0 0 16px var(--purple)}
.section{padding:clamp(90px,11vw,160px) clamp(24px,7vw,110px)}.section-title span{color:#c977ff;font-size:11px;letter-spacing:.42em}.section-title h2{margin:8px 0 65px;color:#d9abfa;font-family:"Allura","Brush Script MT",cursive;font-size:clamp(78px,11vw,150px);font-weight:400;line-height:.7;text-shadow:0 0 20px rgba(167,69,238,.38)}.profile-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8vw}.profile-photos{position:relative;min-height:690px}.profile-main{position:absolute;left:0;top:0;width:76%;height:82%;object-fit:cover;object-position:top;border:1px solid #8c3bc4}.profile-sub{position:absolute;right:0;bottom:0;width:48%;height:48%;object-fit:cover;border:8px solid var(--bg);box-shadow:0 0 0 2px var(--purple),0 0 20px rgba(169,69,238,.35);transform:rotate(3deg)}.profile-lead{margin:0 0 45px;font-size:clamp(17px,1.6vw,23px);line-height:2}.profile-copy dl{margin:0;border-top:1px solid var(--line)}.profile-copy dl div{display:grid;grid-template-columns:120px 1fr;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.13)}dt{color:var(--pale);font-size:11px;font-weight:700;letter-spacing:.16em}dd{margin:0}dd small{margin-left:8px;color:#9c91a4;font-size:12px}
.voice{background:linear-gradient(120deg,#16091f,#09070d)}.voice-card{max-width:1020px;margin:auto;padding:32px 38px;display:grid;grid-template-columns:80px 1fr 1fr;align-items:center;gap:28px;border:1px solid var(--purple2);box-shadow:0 0 28px rgba(145,51,209,.18)}.voice-number{font-family:"Allura",cursive;font-size:60px;color:var(--purple)}.voice-card h3{margin:0 0 4px;font-size:18px}.voice-card p{margin:0;color:#a89caf;font-size:10px;letter-spacing:.26em}.voice-card audio{width:100%;color-scheme:dark}.visual{position:relative;height:78vh;min-height:620px;overflow:hidden}.visual>img{height:100%;object-fit:cover;object-position:center 25%;filter:brightness(.42) contrast(1.1)}.visual>div{position:absolute;inset:0;padding:8vw;display:flex;align-items:flex-start;justify-content:center;flex-direction:column}.visual p{margin:0;font-size:clamp(60px,11vw,150px);font-weight:700;line-height:.78;text-transform:uppercase}.visual span{align-self:flex-end;margin:20px 8vw 0 0;color:#c883fb;font-family:"Allura",cursive;font-size:clamp(62px,8vw,112px);transform:rotate(-6deg);text-shadow:0 0 18px #7d28b8}
.works{background:linear-gradient(135deg,#a644e7,#6f1ba0);color:#0b0710}.works .section-title span{color:#2f073d}.works .section-title h2{color:#0b0710;text-shadow:none}.work-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.work-list article{min-height:350px;padding:30px;background:#0d0911;color:white}.work-list article>span{color:#d6a5f7;font-size:10px;letter-spacing:.2em}.work-list h3{margin:22px 0 30px;font-size:20px}.work-list ul{margin:0;padding:0;list-style:none}.work-list li{padding:13px 0;border-top:1px solid rgba(255,255,255,.14);font-size:14px}.work-list small{display:block;margin-top:4px;color:#a99caf}.contact{text-align:center}.contact .section-title h2{margin-bottom:48px}.contact>p{color:#aaa0ad}.mail{display:inline-block;margin:18px 0 30px;color:#e1bdf8;font-size:clamp(15px,2vw,20px);text-decoration:none}.socials{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.socials a,.agency{min-width:128px;padding:13px 20px;border:1px solid var(--purple2);background:#120c18;text-decoration:none;font-size:12px;letter-spacing:.08em}.agency{display:inline-block;margin-top:45px;color:#d9abfa}footer{text-align:center;padding:30px;color:#776c7e;font-size:10px;letter-spacing:.18em;border-top:1px solid rgba(255,255,255,.07)}
@media(max-width:780px){.site-header{height:76px;padding:0 23px}.menu-button{display:block}.site-header nav{position:absolute;top:76px;left:0;right:0;display:none;padding:25px;flex-direction:column;background:#0a0710;border-bottom:1px solid var(--line)}.site-header nav.open{display:flex}.hero{display:block;min-height:0;padding:112px 24px 62px}.signature-wrap{width:100%;height:225px}h1{font-size:clamp(88px,24vw,108px);line-height:.53}h1 span{display:inline-block;padding-left:7%;font-size:.9em}.signature-wrap:after{left:42%;right:5%;bottom:6px}.kiss{width:74px;right:0;bottom:0}.hero-title>p{margin:22px 0 30px;font-size:15px}.hero-photo{width:100%;padding:10px}.hero-photo img{aspect-ratio:4/5.1}.profile-grid{grid-template-columns:1fr;gap:60px}.profile-photos{min-height:560px}.profile-copy dl div{grid-template-columns:105px 1fr}.voice-card{grid-template-columns:60px 1fr;padding:25px 20px}.voice-card audio{grid-column:1/-1}.visual{height:64vh;min-height:520px}.visual p{font-size:18vw}.visual span{font-size:20vw}.work-list{grid-template-columns:1fr}.work-list article{min-height:0}.section-title h2{margin-bottom:50px}.contact{padding-left:20px;padding-right:20px}}
@media(max-width:390px){h1{font-size:88px}.signature-wrap{height:198px}.kiss{width:64px}.hero{padding-left:20px;padding-right:20px}.hero-title>p{font-size:14px;letter-spacing:.17em}}

/* Reference-matched handwritten neon signature */
.signature-wrap h1{color:#fff8ff;font-family:"Italianno","Allura","Brush Script MT","Segoe Script",cursive;font-size:clamp(108px,14.5vw,224px);line-height:.47;letter-spacing:-.025em;text-shadow:0 0 2px #fff,0 0 7px #f1c8ff,0 0 17px #bd5cff,0 0 38px #7824bc,0 0 68px rgba(108,34,173,.7)}
.signature-wrap:after{height:4px;background:linear-gradient(90deg,transparent,#b33cff,transparent);box-shadow:0 0 9px #d076ff,0 0 20px #7e25bd}
.signature-wrap .kiss{width:clamp(68px,7.4vw,102px);right:-2%;bottom:1%;transform:rotate(-7deg);filter:drop-shadow(0 0 5px rgba(255,23,79,.55))}
@media(max-width:780px){.signature-wrap h1{font-size:clamp(98px,26vw,118px);line-height:.47}.signature-wrap .kiss{width:68px;right:1%;bottom:17px}}
@media(max-width:390px){.signature-wrap h1{font-size:94px}.signature-wrap .kiss{width:60px;right:0;bottom:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Compact hero: signature, kiss and role form one continuous title block. */
.signature-wrap h1{font-family:"Allura","Brush Script MT","Segoe Script",cursive;font-size:clamp(100px,13.4vw,205px);line-height:.52;letter-spacing:-.035em}
@media(max-width:780px){
  .signature-wrap{height:158px}
  .signature-wrap h1{font-size:clamp(91px,24vw,108px);line-height:.5}
  .signature-wrap:after{left:37%;right:4%;bottom:4px}
  .signature-wrap .kiss{width:64px;right:0;bottom:12px}
  .hero-title>p{margin:10px 0 30px}
}
@media(max-width:390px){
  .signature-wrap{height:150px}
  .signature-wrap h1{font-size:90px}
  .signature-wrap .kiss{width:58px;bottom:10px}
  .hero-title>p{margin-top:8px}
}

/* Kiss sits on the end of the underline, tight beneath the signature. */
@media(max-width:780px){
  .signature-wrap{height:142px}
  .signature-wrap:after{left:23%;right:3%;bottom:5px;height:3px;transform:rotate(-5deg)}
  .signature-wrap .kiss{width:61px;right:-1%;bottom:-2px;z-index:2}
  .hero-title>p{margin:4px 0 24px}
}
@media(max-width:390px){
  .signature-wrap{height:138px}
  .signature-wrap:after{left:22%;right:2%;bottom:4px}
  .signature-wrap .kiss{width:58px;right:-1%;bottom:-3px}
  .hero-title>p{margin-top:3px}
}

/* Profile collage: preserve the supplied secondary photo in landscape format. */
.profile-sub{width:62%;height:auto;aspect-ratio:1.45/1;bottom:2%;object-fit:cover;object-position:center}

.work-list li a{color:inherit;text-decoration-color:#c56cff;text-decoration-thickness:1px;text-underline-offset:4px}.work-list li a:hover{color:#dba1ff}
@media(max-width:780px){
  .signature-wrap:after{left:18%;right:3%;bottom:18px}
  .signature-wrap .kiss{right:-1%;bottom:8px}
}
@media(max-width:390px){
  .signature-wrap:after{left:17%;right:2%;bottom:17px}
  .signature-wrap .kiss{right:-1%;bottom:7px}
}

/* A restrained yofukashi-inspired night-sky shimmer behind the content. */
body:before{background:
  radial-gradient(circle at 8% 12%,rgba(255,222,112,.68) 0 1px,transparent 2.5px),
  radial-gradient(circle at 22% 31%,rgba(241,211,120,.44) 0 1px,transparent 2px),
  radial-gradient(circle at 38% 9%,rgba(231,194,255,.42) 0 1px,transparent 2.2px),
  radial-gradient(circle at 54% 26%,rgba(255,229,142,.58) 0 1.2px,transparent 2.8px),
  radial-gradient(circle at 71% 14%,rgba(221,178,255,.46) 0 1px,transparent 2.4px),
  radial-gradient(circle at 88% 35%,rgba(255,219,101,.62) 0 1.3px,transparent 3px),
  radial-gradient(circle at 15% 68%,rgba(224,184,255,.32) 0 1px,transparent 2.5px),
  radial-gradient(circle at 47% 76%,rgba(255,223,121,.48) 0 1px,transparent 2.4px),
  radial-gradient(circle at 82% 83%,rgba(255,235,166,.42) 0 1.1px,transparent 2.8px),
  radial-gradient(circle at 78% 10%,rgba(110,30,170,.26),transparent 28%),
  radial-gradient(circle at 6% 52%,rgba(78,12,105,.23),transparent 34%),#08060d}

/* Final hero spacing and contact signature accent. */
.hero-title>p{display:none}
.contact .section-title{position:relative;display:inline-block}
.contact .section-title:after{content:"";position:absolute;width:72px;aspect-ratio:1.55/1;right:-42px;bottom:27px;background:url("kiss-mark-v2.png") center/contain no-repeat;transform:rotate(-8deg);filter:drop-shadow(0 0 6px rgba(255,23,79,.5))}
@media(max-width:780px){
  .hero{padding-top:132px}
  .hero-photo{margin-top:16px}
  .contact .section-title:after{width:64px;right:-34px;bottom:24px}
}

/* Larger glowing points read as stars rather than screen dust. */
body:before{background:
  radial-gradient(circle at 9% 14%,#fff7c8 0 1.8px,rgba(255,221,96,.72) 2px,rgba(255,205,65,.18) 6px,transparent 12px),
  radial-gradient(circle at 27% 34%,#fffbe4 0 1.5px,rgba(232,192,255,.62) 2px,rgba(175,92,243,.16) 6px,transparent 11px),
  radial-gradient(circle at 44% 11%,#fff4b0 0 2px,rgba(255,215,78,.68) 2.5px,rgba(255,196,43,.15) 7px,transparent 14px),
  radial-gradient(circle at 62% 29%,#fffbea 0 1.6px,rgba(255,231,144,.67) 2px,rgba(255,220,105,.14) 6px,transparent 12px),
  radial-gradient(circle at 83% 17%,#f9e9ff 0 1.8px,rgba(218,158,255,.65) 2.4px,rgba(164,69,232,.16) 7px,transparent 13px),
  radial-gradient(circle at 91% 43%,#fff4af 0 2px,rgba(255,211,70,.72) 2.5px,rgba(255,192,37,.18) 8px,transparent 15px),
  radial-gradient(circle at 18% 73%,#fff9d6 0 1.7px,rgba(255,222,111,.62) 2.3px,rgba(255,205,78,.13) 7px,transparent 13px),
  radial-gradient(circle at 51% 82%,#f8eaff 0 1.6px,rgba(222,170,255,.56) 2.2px,rgba(168,79,231,.13) 6px,transparent 12px),
  radial-gradient(circle at 80% 76%,#fff8c9 0 2px,rgba(255,221,105,.66) 2.5px,rgba(255,200,48,.14) 7px,transparent 14px),
  radial-gradient(circle at 78% 10%,rgba(110,30,170,.26),transparent 28%),
  radial-gradient(circle at 6% 52%,rgba(78,12,105,.23),transparent 34%),#08060d}