@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&family=Noto+Serif+JP:wght@500;600;700&display=swap');
:root{--paper:#f3f1e9;--ink:#252923;--muted:#686a60;--red:#ab3732;--border:#d9d7cc;--x:0px;--y:0px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}::selection{background:#ab3732;color:var(--paper)}:focus-visible{outline:2px solid var(--red);outline-offset:6px}.skip{position:fixed;top:-100px;background:var(--ink);color:white;padding:12px;z-index:100}.skip:focus{top:12px}header{height:106px;padding:0 5.1%;position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center}.brand-mark{font:bold 48px Georgia,serif;line-height:1}.brand-mark span{color:var(--red)}.brand-name{font-size:12px;letter-spacing:2px;font-weight:700;line-height:1.45}.brand-name small{font-size:9px;letter-spacing:1.5px;font-weight:500}nav{display:flex;gap:34px;align-items:center;background:#f5f3ece3;border:1px solid #d6d3c8;border-radius:30px;padding:12px 30px;backdrop-filter:blur(12px)}nav a{font-size:14px;color:var(--muted);position:relative}nav a.active,nav a:hover{color:var(--red)}nav a.active:after{content:'';width:3px;height:3px;border-radius:50%;background:currentColor;position:absolute;bottom:-7px;left:50%}.language{border:0;background:transparent;font-size:12px;letter-spacing:1px;font-weight:700}.language span{color:#85867e;margin-left:5px}.hero{height:max(760px,100svh);min-height:700px;position:relative;overflow:hidden;background:#edece5;border-bottom:1px solid var(--border)}.scene{position:absolute;inset:0;overflow:hidden}.scene img{width:100%;height:100%;object-fit:cover;object-position:50% center;transform:translate3d(var(--x),var(--y),0) scale(1.045);transition:transform 1.6s cubic-bezier(.2,.8,.2,1);will-change:transform;animation:scene-appear 1.8s both}.scene-wash{position:absolute;inset:0;background:linear-gradient(90deg,#f3f1e9eb 0%,#f3f1e9cc 20%,#f3f1e970 39%,transparent 65%),linear-gradient(0deg,#f3f1e9 0%,#f3f1e900 21%,#f3f1e900 82%,#f3f1e9ad 100%)}#particles{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}.hero-copy{position:relative;z-index:2;max-width:850px;padding:clamp(200px,27vh,330px) 0 150px 9.8%;pointer-events:none}.hero-copy a{pointer-events:auto}.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:2.8px}.line{display:block;width:26px;height:1px;background:var(--red)}h1{font-family:Manrope,sans-serif;font-size:clamp(44px,5.1vw,78px);font-weight:600;letter-spacing:-4px;line-height:1.13;margin:30px 0 24px;white-space:nowrap}h1 em{font-family:Georgia,'Noto Serif JP',serif;font-weight:400;color:var(--red)}.hero-description{font-size:17px;line-height:1.85;color:#545a51;max-width:430px}.primary{display:inline-flex;gap:42px;align-items:center;border:1px solid var(--ink);background:var(--ink);color:#f8f6ed;padding:17px 23px;margin-top:21px;font-size:14px;border-radius:2px;transition:background .25s,transform .25s}.primary:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}.arrow{font-size:22px;font-weight:400;transition:transform .25s}.primary:hover .arrow{transform:translate(3px,-3px)}.hero-stack{display:flex;align-items:center;gap:14px;margin-top:37px;font-size:10px;font-weight:600;letter-spacing:1.8px;color:#676d61}.hero-stack b{color:var(--red)}.side-note{position:absolute;top:45%;left:2.4%;display:flex;align-items:center;gap:22px;writing-mode:vertical-rl;font-size:9px;letter-spacing:2.5px;color:#6f736a;transform:rotate(180deg);z-index:2}.side-note i{height:60px;width:1px;background:#adb0a2}.scene-signature{position:absolute;right:6%;top:23%;display:flex;align-items:center;gap:17px;flex-direction:column;opacity:.8}.scene-signature>span{font-family:'Noto Serif JP',serif;font-size:42px;writing-mode:vertical-rl;letter-spacing:13px;color:#87342e}.scene-signature small{writing-mode:vertical-rl;font-size:9px;letter-spacing:2px}.hero-bottom{position:absolute;bottom:30px;left:5.1%;right:5.1%;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.5px;z-index:3;gap:20px}.scroll-link{display:flex;align-items:center;gap:13px;font-size:9px}.scroll-track{width:1px;height:30px;background:#b7b9ae;position:relative;overflow:hidden}.scroll-track:after{content:'';width:1px;height:13px;background:var(--red);position:absolute;animation:scroll 2s infinite}.location{font-size:9px}.motion{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:8px 0;font-size:11px;letter-spacing:.4px}#motion-icon{font-size:15px;min-width:15px;color:var(--red)}.content-section{max-width:1440px;margin:auto;padding:65px 9.8% 95px}.section-label{display:flex;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--border);font-size:10px;letter-spacing:2px;font-weight:500;color:var(--muted)}.section-label span[lang]{font-family:'Noto Serif JP',serif;font-size:14px}.profile-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding-top:75px}h2{font:500 clamp(36px,4vw,57px)/1.16 Manrope,sans-serif;letter-spacing:-2.6px;margin:22px 0}.signature{font-family:Georgia,serif;font-style:italic;font-size:40px;margin-top:35px}.signature span{color:var(--red)}.profile-text p{font-size:16px;color:var(--muted);line-height:1.85;margin:0 0 20px}.profile-text .lead{font-size:23px;line-height:1.5;color:var(--ink);letter-spacing:-.5px}.profile-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}.profile-tags span{font-size:11px;border:1px solid var(--border);border-radius:20px;padding:8px 13px;color:var(--muted)}.craft{padding-top:20px}.craft-heading{display:flex;align-items:end;justify-content:space-between;padding:48px 0 40px;gap:25px}.craft-heading h2{margin:0}.craft-heading p{font-size:15px;color:var(--muted);line-height:1.8;margin:0 0 5px}.craft-list{border-top:1px solid var(--border)}.craft-item{border-bottom:1px solid var(--border);transition:background .3s}.craft-item summary{display:flex;align-items:center;gap:28px;list-style:none;padding:27px 4px;cursor:pointer}.craft-item summary::-webkit-details-marker{display:none}.number{color:var(--red);font-size:11px;align-self:center}h3{font:500 31px Manrope,sans-serif;letter-spacing:-1px;margin:0;flex:1}.category{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.expand{border:1px solid var(--border);width:33px;height:33px;display:grid;place-items:center;border-radius:50%;font-size:22px;line-height:1;font-weight:400;transition:transform .3s,background .3s;margin-left:20px}.craft-item[open] .expand{transform:rotate(45deg);background:var(--ink);color:var(--paper);border-color:var(--ink)}.craft-item summary:hover h3{color:var(--red)}.craft-detail{padding:0 60px 30px 47px;display:flex;gap:70px;align-items:start;animation:detail .35s ease}.craft-detail p{font-size:15px;line-height:1.8;color:var(--muted);max-width:500px;margin:0}.tech-list{display:flex;gap:7px;flex-wrap:wrap;max-width:220px}.tech-list span{font-size:11px;white-space:nowrap;background:#e6e6dc;padding:7px 10px;border-radius:3px}footer.content-section{padding-top:30px;padding-bottom:25px}.footer-main{display:flex;justify-content:space-between;align-items:center;padding:35px 0 60px}.footer-main p{font:500 clamp(31px,3.5vw,48px)/1.3 Manrope,sans-serif;letter-spacing:-2px}.footer-main em{color:var(--red);font-family:Georgia,serif;font-weight:400}.back-top{display:grid;place-items:center;border:1px solid var(--border);width:65px;height:65px;border-radius:50%;font-size:28px;transition:background .3s,color .3s}.back-top:hover{background:var(--ink);color:var(--paper)}.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:9px;letter-spacing:1.1px}.intro{animation:intro 1s both}.hero-copy .intro:nth-child(2){animation-delay:.1s}.hero-copy .intro:nth-child(3){animation-delay:.2s}.hero-copy .intro:nth-child(4){animation-delay:.3s}.hero-copy .intro:nth-child(5){animation-delay:.4s}.js .reveal{transition:opacity .9s,transform .9s}.js .reveal.visible{opacity:1;transform:translateY(0)}body.paused *,body.paused *:before,body.paused *:after{animation-play-state:paused!important}body.paused .scene img{transform:scale(1.045)}html[lang=ja] h1{font-family:'Noto Serif JP',serif;font-size:clamp(32px,4.4vw,63px);letter-spacing:-1px;line-height:1.4}html[lang=ja] h2{font-family:'Noto Serif JP',serif;letter-spacing:0}html[lang=ja] .hero-description{max-width:400px}html[lang=ja] .footer-main p{font-family:'Noto Serif JP',serif;letter-spacing:0}@keyframes intro{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scene-appear{from{opacity:0}to{opacity:1}}@keyframes scroll{from{top:-14px}to{top:32px}}@keyframes detail{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* Quiet ambient movement; paused by the motion control. */
.scene{animation:ambient 22s ease-in-out infinite alternate;transform-origin:68% 55%}@keyframes ambient{to{transform:scale(1.025) translateY(-5px)}}
/* Resume content and responsive layout refinements. */
html { scroll-padding-top: 2rem; }
body { overflow-x: visible; }
header { min-height: 106px; height: auto; gap: 24px; }
nav { gap: 8px; padding: 3px 12px; }
nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
nav a.active:after { bottom: 5px; }
.language { min-width: 76px; min-height: 44px; flex-shrink: 0; padding: 8px; border-radius: 24px; background: #f5f3eceb; }
.hero { height: auto; min-height: max(780px, 100svh); }
.hero-copy { max-width: 920px; padding: clamp(190px, 24vh, 290px) 0 155px 9.8%; }
h1 { white-space: normal; font-size: clamp(44px, 5.1vw, 78px); letter-spacing: -.055em; }
.hero-description { max-width: 465px; font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 28px; }
.primary { margin: 0; font-size: 16px; min-height: 52px; padding: 14px 20px; gap: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; min-height: 44px; font-size: 16px; line-height: 1.5; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #9b9e91; overflow-wrap: anywhere; }
.text-link:hover { color: var(--red); text-decoration-color: currentColor; }
.hero-stack { flex-wrap: wrap; font-size: 12px; gap: 10px; margin-top: 25px; }
.eyebrow { font-size: 12px; line-height: 1.6; letter-spacing: 2px; }
.eyebrow .line { flex-shrink: 0; }
.hero-bottom { flex-wrap: wrap; bottom: 20px; }
.scroll-link, .motion { min-height: 44px; font-size: 12px; }
.motion { padding: 10px 4px; }
.scene-signature { top: 21%; }
.content-section { padding: 65px 8% 80px; }
.profile-layout { gap: clamp(30px, 6vw, 90px); }
.profile-text p, .craft-detail p, .craft-heading p { font-size: 16px; }
.profile-tags span, .tech-list span { font-size: 14px; }
.profile-layout > *, .craft-heading > *, .experience-item > *, .project-item > *, .footer-main > div { min-width: 0; }
.section-label { gap: 16px; line-height: 1.6; font-size: 12px; letter-spacing: 1.5px; }
.section-label span[lang] { flex-shrink: 0; }
.craft-heading { padding-top: 45px; }
.craft-heading h2 { max-width: 70%; }
.craft-heading p { max-width: 300px; }
.experience-list, .project-list { border-top: 1px solid var(--border); }
.experience-item { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.3fr); gap: 35px; padding: 36px 0; border-bottom: 1px solid var(--border); }
.experience-meta p { margin: 0 0 9px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.experience-meta p:first-child { color: var(--red); }
.experience-body h3 { font-size: 27px; line-height: 1.35; }
.company { margin: 9px 0 16px; font-size: 16px; color: var(--muted); }
.experience-body ul { padding-left: 20px; margin: 0; }
.experience-body li { font-size: 16px; line-height: 1.75; color: var(--muted); padding-left: 4px; margin: 0 0 10px; }
.experience-body li::marker { color: var(--red); }
.craft-item h3 { font-size: clamp(24px, 3vw, 31px); }
.craft-item summary { min-height: 80px; }
.expand { flex: 0 0 44px; width: 44px; height: 44px; }
.craft-detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding-right: 0; gap: 40px; }
.tech-list { max-width: none; }
.tech-list span { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.project-item { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--border); }
.project-item .number { align-self: start; padding-top: 9px; }
.project-item h3 { font-size: 31px; }
.project-item p { font-size: 16px; color: var(--muted); line-height: 1.8; max-width: 780px; }
.project-item .project-subtitle { color: var(--ink); margin: 9px 0 14px; }
.project-item .project-status { font-size: 14px; margin-bottom: 0; }
.education { display: grid; grid-template-columns: 1fr 2.3fr; gap: 35px; padding: 36px 0; border-bottom: 1px solid var(--border); }
.education h2 { font-size: 27px; letter-spacing: -1px; margin: 0; }
.education p { font-size: 16px; line-height: 1.7; margin: 0 0 8px; }
.education .university { color: var(--muted); font-size: 14px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.footer-main { gap: 24px; }
.footer-main p { margin: 15px 0 25px; }
.footer-bottom { line-height: 1.7; flex-wrap: wrap; }
body.paused .intro, body.paused .reveal { opacity: 1; transform: none; }
@media (min-width: 1700px) { .hero-copy { max-width: 1200px; } h1 { font-size: 88px; } }
@media (max-width: 1100px) {
  .brand-name { display: none; }
  header { padding: 0 5%; gap: 12px; }
  .hero-copy { padding-left: 7%; max-width: 760px; }
  h1 { font-size: clamp(44px, 6.3vw, 65px); }
  .content-section { padding-left: 7%; padding-right: 7%; }
  .scene-wash { background: linear-gradient(90deg, #f3f1e9f2 0%, #f3f1e9e6 48%, #f3f1e999 68%, transparent 95%), linear-gradient(0deg, #f3f1e9, transparent 30%); }
  .category, .side-note { display: none; }
  .location { display: none; }
}
@media (max-width: 900px) {
  header { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; padding: 14px 6% 0; min-height: 0; }
  .brand { grid-column: 1; grid-row: 1; }
  .brand-mark { font-size: 40px; }
  .brand-name { display: block; }
  .brand-name small { font-size: 10px; }
  .language { grid-column: 2; grid-row: 1; font-size: 12px; }
  nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 0; padding: 3px 8px; width: 100%; flex-wrap: wrap; backdrop-filter: none; }
  nav a { flex: 1; padding: 0 7px; font-size: 14px; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; max-height: none; overflow: hidden; background: var(--paper); }
  .hero-copy { grid-column: 1; grid-row: 1; padding: 42px 6% 26px; max-width: none; pointer-events: auto; }
  .hero-copy .eyebrow { max-width: 100%; font-size: 12px; letter-spacing: 1.5px; }
  h1 { font-size: clamp(34px, 8.7vw, 62px); letter-spacing: -.055em; line-height: 1.16; margin: 22px 0 18px; }
  .hero-description { font-size: 16px; line-height: 1.75; max-width: 520px; }
  .hero-actions { gap: 7px 22px; margin-top: 22px; }
  .primary { font-size: 16px; padding: 13px 18px; }
  .hero-stack { font-size: 12px; letter-spacing: .9px; margin-top: 22px; gap: 9px; }
  .scene { grid-column: 1; grid-row: 2; position: relative; inset: auto; width: 100%; height: clamp(285px, 78vw, 510px); animation: none; transform: none; }
  .scene img { position: static; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 88% 56%; transform: none; transition: none; }
  .scene-wash { background: linear-gradient(180deg, var(--paper), transparent 22%, transparent 82%, var(--paper)); }
  .scene-signature { grid-column: 1; grid-row: 2; position: relative; inset: auto; align-self: start; justify-self: end; margin: 16% 7% 0 0; }
  .scene-signature > span { font-size: 28px; letter-spacing: 6px; }
  .scene-signature small, .side-note { display: none; }
  .hero-bottom { grid-column: 1; grid-row: 3; position: relative; inset: auto; padding: 4px 6% 14px; gap: 5px 20px; }
  .scroll-link { font-size: 12px; letter-spacing: .2px; }
  .motion { font-size: 12px; }
  .content-section { padding: 40px 6% 55px; }
  .profile-layout { grid-template-columns: minmax(0, 1fr); gap: 25px; padding-top: 35px; }
  h2 { font-size: clamp(32px, 7vw, 46px); letter-spacing: -.045em; }
  .signature { font-size: 30px; margin-top: 20px; }
  .profile-text .lead { font-size: 22px; }
  .profile-text p { font-size: 16px; }
  .craft-heading { display: block; padding: 30px 0; }
  .craft-heading h2, .craft-heading p { max-width: none; }
  .craft-heading p { font-size: 16px; margin-top: 18px; }
  .experience-item { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 0; }
  .experience-meta { display: flex; gap: 6px 18px; flex-wrap: wrap; }
  .experience-meta p { margin: 0; }
  .experience-body h3 { font-size: 25px; }
  .craft-item summary { flex-wrap: nowrap; gap: 14px; padding: 20px 0; }
  .craft-item h3 { font-size: 26px; min-width: 0; overflow-wrap: anywhere; }
  .expand { margin-left: 0; }
  .craft-detail { display: block; padding: 0 0 26px 29px; }
  .craft-detail p { font-size: 16px; }
  .tech-list { margin-top: 16px; }
  .project-item { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 28px 0; }
  .project-item h3 { font-size: 28px; }
  .education { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .footer-main p { font-size: clamp(28px, 6.4vw, 38px); letter-spacing: -.04em; }
  .footer-main { align-items: flex-start; padding: 24px 0 36px; }
  .back-top { width: 44px; height: 44px; flex: 0 0 44px; margin-top: 18px; }
  .contact-links { flex-direction: column; align-items: flex-start; gap: 4px; }
  .footer-bottom { font-size: 12px; gap: 10px 20px; }
  .footer-bottom > span:last-child { font-size: 12px; width: 100%; }
  html[lang=ja] h1 { font-size: clamp(30px, 7.4vw, 52px); }
  html[lang=ja] .hero-description { font-size: 16px; max-width: 520px; }
  html[lang=ja] .footer-main p { font-size: clamp(25px, 5.8vw, 34px); }
}
@media (max-width: 380px) {
  nav { padding-left: 3px; padding-right: 3px; }
  nav a { padding-left: 5px; padding-right: 5px; }
  .hero-copy { padding-top: 32px; }
  .hero-copy .eyebrow { letter-spacing: 1px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-stack { gap: 7px; font-size: 12px; letter-spacing: .3px; }
  .footer-main { flex-wrap: wrap; }
  .footer-main > div { width: 100%; }
  .back-top { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scene { animation: none; }
  .scene img { transform: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}