:root {
  --ink: #282a36;
  --muted: #707383;
  --line: #e7e9f0;
  --cyan: #3bc8f3;
  --pink: #ea89ca;
  --blue: #5f89f1;
  --violet: #9279d6;
  --gradient: linear-gradient(110deg, #36bceb 6%, #648ef4 35%, #a47bdc 63%, #ee8fc4 93%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; border-radius: 2px; }
.skip-link { position:absolute; top:-100px; left:12px; z-index:10; padding:10px 15px; background:#fff; }
.skip-link:focus { top:12px; }
.site-header { position:relative; z-index:2; width:min(1240px, calc(100% - 88px)); height:94px; display:flex; align-items:center; justify-content:space-between; margin:auto; }
.wordmark { font-size:20px; font-weight:700; letter-spacing:.25em; text-decoration:none; }
.wordmark-point, .footer-mark span { color:#c182d8; }
.site-nav { display:flex; gap:34px; align-items:center; }
.site-nav a { color:#555765; text-decoration:none; font-size:11px; letter-spacing:.17em; font-weight:600; transition:color .2s; }
.site-nav a:hover, .text-link:hover { color:#9e70cd; }
.hero { min-height:650px; height:min(690px, calc(100svh - 94px)); position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.hero-inner { width:min(860px, 90%); display:flex; align-items:center; flex-direction:column; position:relative; z-index:1; padding:40px 0 78px; }
.overline { font-family:Arial, Helvetica, sans-serif; font-size:10px; letter-spacing:.33em; font-weight:700; color:#9897a8; margin:0; }
.hero-overline { margin-bottom:28px; }
.hero-title { margin:0; width:100%; display:flex; justify-content:center; }
.hero-logo { display:block; width:min(700px, 100%); height:auto; object-fit:contain; }
.hero-identity { display:flex; align-items:center; align-self:flex-end; gap:25px; margin:2px 12% 0 0; }
.identity-rule { width:90px; height:1px; transform:rotate(-38deg); transform-origin:right center; background:#b6b6c0; }
.identity-copy { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.english-name { font-size:18px; letter-spacing:.24em; font-weight:400; }
.role { font-size:15px; letter-spacing:.015em; color:#4e4f59; }
.hero-scroll { position:absolute; bottom:0; margin:0; display:flex; gap:14px; align-items:center; font-size:10px; letter-spacing:.25em; font-weight:600; color:#a5a4b1; }
.hero-scroll span { font-size:16px; }
.corner { position:absolute; width:30vw; max-width:375px; height:31vw; max-height:350px; opacity:.75; pointer-events:none; z-index:0; }
.corner-top-left { top:-8%; left:-8%; background:linear-gradient(135deg, rgba(225,127,173,.42),rgba(92,175,226,.18)); clip-path:polygon(0 0,100% 0,0 100%); }
.corner-top-right { top:-9%; right:-5%; background:linear-gradient(135deg,rgba(236,149,188,.39),rgba(64,199,237,.42));clip-path:polygon(0 0,100% 0,100% 100%); }
.corner-bottom-left { bottom:-16%; left:-7%; background:linear-gradient(25deg,rgba(84,167,229,.37),rgba(186,130,198,.32));clip-path:polygon(0 0,0 100%,100% 100%); }
.corner-bottom-right { bottom:-14%; right:-8%; background:linear-gradient(135deg,rgba(113,201,238,.30),rgba(229,133,177,.43));clip-path:polygon(100% 0,100% 100%,0 100%); }
.content-shell { max-width:1060px; width:calc(100% - 96px); margin:0 auto; }
.section { scroll-margin-top:25px; margin:0 0 106px; }
.next-section { margin-top:88px; }
.section-heading { margin-bottom:32px; }
.section-heading h2 { font-family:Arial, Helvetica, sans-serif; font-size:clamp(28px,4.5vw,42px); letter-spacing:.11em; margin:9px 0 0; font-weight:500; }
.heading-period { color:var(--pink); }
.gig-card { position:relative; display:grid; grid-template-columns:250px 1fr; gap:45px; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:3px; padding:41px 48px; box-shadow:0 14px 38px rgba(81,83,121,.035); background:linear-gradient(107deg,rgba(246,249,253,.9),#fff 58%); }
.gig-card:before { content:""; position:absolute; top:0; bottom:0; left:0; width:4px; background:var(--gradient); }
.gig-date { display:flex; align-items:flex-start; flex-direction:column; gap:4px; }
.gig-year { letter-spacing:.26em; font-size:13px; color:#9794a6; }
.gig-date strong { font-family:Arial, Helvetica, sans-serif; font-size:clamp(35px,5vw,53px); letter-spacing:.015em; font-weight:500; }
.gig-day { color:#a776cc; letter-spacing:.32em; font-size:12px; font-weight:700; }
.gig-label { color:#a584c4; letter-spacing:.2em; font-size:10px; font-weight:700; }
.gig-details h3 { font-size:19px; font-weight:600; letter-spacing:.02em; line-height:1.8; margin:9px 0 10px; }
.gig-details h3 span { color:#7f80a0; white-space:nowrap; }
.gig-details p { font-size:13px; color:var(--muted); margin:0; }
.gig-sparkle { position:absolute; right:35px; top:20px; font-size:36px; color:rgba(143,183,234,.24); }
.profile-grid { display:grid; grid-template-columns:34% 1fr; gap:72px; }
.profile-identity { padding-top:4px; }
.profile-jp-name { font-size:48px; font-weight:400; margin:0 0 8px; letter-spacing:.18em; }
.profile-en-name { letter-spacing:.25em; font-size:13px; font-weight:600; margin:0; }
.profile-en-name span { color:var(--muted); letter-spacing:.02em; font-size:12px; font-weight:400; }
.gradient-stroke { display:block; width:80px; height:3px; background:var(--gradient); margin-top:27px; }
.profile-copy { font-size:14px; line-height:2.3; color:#575865; }
.profile-copy p { margin:0 0 21px; }
.story-section { margin-top:-14px; }
.story-card { background:linear-gradient(115deg, #fafbff, #fff 68%); border-left:2px solid #b1a3db; border-top:1px solid #f1f0f7; border-right:1px solid #f1f0f7; border-bottom:1px solid #f1f0f7; padding:38px 45px; display:flex; align-items:flex-end; justify-content:space-between; gap:38px; }
.story-card h2 { font-family:Arial, Helvetica, sans-serif; font-size:29px; font-weight:500; letter-spacing:.15em; margin:10px 0 18px; }
.story-card p:not(.overline) { color:#656573; font-size:13px; max-width:600px; line-height:2; margin:0; }
.text-link { flex:0 0 auto; text-decoration:none; font-size:12px; letter-spacing:.04em; padding-bottom:7px; border-bottom:1px solid #c2bfd3; white-space:nowrap; }
.text-link span { font-size:17px; margin-left:6px; }
.links-section { margin-bottom:120px; }
.social-link { text-decoration:none; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); border-top:1px solid var(--line); padding:25px 16px 25px 10px; transition:background .2s; }
.social-link:hover { background:#fafaff; }
.social-name { display:flex; gap:23px; align-items:center; font-size:16px; font-weight:600; }
.social-x { width:32px; font-family:Arial,sans-serif; font-size:28px; font-weight:400; }
.social-name small { font-size:13px; font-weight:400; color:var(--muted); margin-left:10px; }
.social-arrow { font-size:25px; color:#9390a8; }
.links-note { color:#9a9ba8; margin-top:27px; font-size:12px; }
.footer { background:#fafbfe; border-top:1px solid #f1f1f5; }
.footer-inner { max-width:1060px; width:calc(100% - 96px); margin:auto; display:flex; align-items:center; justify-content:space-between; padding:36px 0; color:#9b9cab; font-size:11px; letter-spacing:.08em; }
.footer-mark { color:#444653; font-size:15px; letter-spacing:.23em; font-weight:700; }
@media(max-width:700px) {
  .site-header { width:calc(100% - 36px); height:68px; }
  .wordmark { font-size:16px; }
  .site-nav { gap:16px; }
  .site-nav a { font-size:9px; letter-spacing:.04em; }
  .hero { height:auto; min-height:min(690px, 74svh); }
  .hero-inner { width:calc(100% - 44px); padding:70px 0 85px; }
  .hero-overline { font-size:9px; margin-bottom:25px; }
  .hero-logo { width:100%; }
  .hero-identity { margin:12px 4% 0 0; gap:13px; }
  .identity-rule { width:57px; }
  .english-name { font-size:15px; }
  .role { font-size:12px; }
  .corner { width:45vw; height:45vw; }
  .corner-top-left { top:-2%; left:-19%; }
  .corner-top-right { top:-2%; right:-18%; }
  .corner-bottom-left { bottom:-4%; left:-17%; }
  .corner-bottom-right { bottom:-6%; right:-20%; }
  .content-shell { width:calc(100% - 42px); }
  .section { margin-bottom:74px; }
  .next-section { margin-top:60px; }
  .section-heading { margin-bottom:22px; }
  .section-heading h2 { font-size:28px; }
  .gig-card { grid-template-columns:1fr; gap:23px; padding:25px 25px 30px; }
  .gig-date { flex-direction:row; gap:14px; align-items:baseline; }
  .gig-date strong { font-size:36px; }
  .gig-year { font-size:11px; }
  .gig-day { font-size:11px; }
  .gig-details h3 { font-size:16px; margin-bottom:8px; }
  .gig-details p { font-size:12px; }
  .profile-grid { grid-template-columns:1fr; gap:27px; }
  .profile-jp-name { font-size:36px; }
  .profile-copy { font-size:13px; line-height:2.15; }
  .story-card { flex-direction:column; align-items:flex-start; padding:28px 27px; gap:24px; }
  .story-card h2 { font-size:25px; }
  .story-card p:not(.overline) { font-size:12px; }
  .social-name { gap:10px; font-size:15px; }
  .social-name small { display:block; margin:2px 0 0; font-size:12px; }
  .social-x { width:28px; }
  .links-section { margin-bottom:80px; }
  .footer-inner { width:calc(100% - 42px); }
}
@media (prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} }