:root{color-scheme:light;--bg:#fafaf8;--surface:#f0f1ee;--secondary:#60646b;--contact-line:#cfd2d0;--selection:#dce5ff;--on-accent:#fff;--text:#232529;--muted:#73767b;--blue:#365edb;--line:#dedfdd;--font:"Manrope","Noto Sans JP",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--blue);outline-offset:6px}::selection{background:var(--selection)}.container{width:min(1180px,calc(100% - 112px));margin-inline:auto}.skip-link{position:fixed;top:-80px;left:16px;background:var(--bg);padding:16px;z-index:20}.skip-link:focus{top:10px}.site-header{height:108px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.logo{font-size:38px;font-weight:800;letter-spacing:-3px}.logo span,.name>span{color:var(--blue)}nav{display:flex;gap:36px;font-size:13px;font-weight:600}nav a:hover{color:var(--blue)}nav span{margin-left:8px}.hero{padding-top:45px;padding-bottom:90px}.hero-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.7px;font-weight:600;color:var(--muted)}h1{font-size:clamp(64px,8.5vw,115px);font-weight:500;line-height:1.08;letter-spacing:-7px;margin:63px 0 42px}.hero-last{display:flex;align-items:center;gap:24px}h1 em{color:var(--blue);font-style:normal}.asterisk{width:82px;height:82px;margin-left:auto;margin-right:32px;stroke:var(--blue);stroke-width:2.5;transform:rotate(12deg)}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end}.hero-bottom p{font-size:13px;line-height:2.1;margin:0;color:var(--secondary)}.text-link{font-size:12px;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--text);padding:13px 0}.text-link span{color:var(--blue);font-size:22px}.works,.about{border-top:1px solid var(--line);padding-top:36px;padding-bottom:100px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:46px}h2{font-weight:500;font-size:34px;letter-spacing:-1.3px;margin:0}h2>span{font-size:11px;font-weight:400;letter-spacing:.3px;margin-left:24px;color:var(--muted)}.section-index{font-size:10px;letter-spacing:1.2px;color:var(--muted)}.project-card{display:grid;grid-template-columns:62px 1fr 38px;gap:18px;border-top:1px solid var(--line);padding:34px 0;position:relative}.project-number{font-size:11px;color:var(--blue);padding-top:7px}.project-card h3{font-size:22px;font-weight:500;line-height:1.6;margin:0 0 12px;letter-spacing:-.4px}.project-card p{font-size:12px;line-height:2;color:var(--muted);max-width:740px;margin:0 0 18px}.project-details{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.tag-list{display:flex;flex-wrap:wrap;gap:12px}.tag{font-size:10px;color:var(--muted)}.status{font-size:10px;color:var(--blue)}.status-in-progress,.status-planned{color:var(--muted)}.project-link{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;align-self:center;font-size:20px;transition:background .2s,color .2s,border-color .2s}.project-link::before{content:"";position:absolute;inset:0}.project-card:has(.project-link:hover) h3{color:var(--blue)}.project-link:hover{background:var(--blue);color:var(--on-accent);border-color:var(--blue)}.is-disabled{color:var(--muted)}.about-content{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;padding:22px 0 10px}.name{font-size:110px;font-weight:600;letter-spacing:-8px;line-height:1.1}.name small{display:block;letter-spacing:1.5px;font-size:9px;color:var(--muted);font-weight:500;margin-top:20px}.about h3{font-weight:500;font-size:25px;line-height:1.8;margin:0 0 22px}.about-content p{font-size:12px;color:var(--muted);line-height:2.2;max-width:490px}.contact{background:var(--surface);padding:54px 0 60px}.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:60px}.contact-links a{border-bottom:1px solid var(--contact-line);padding:10px 0 24px;display:flex;justify-content:space-between;align-items:center;font-size:25px}.contact-links small{font-size:11px;color:var(--muted);margin-left:20px}.contact-links a>span:last-child{color:var(--blue)}.contact-links a:hover{color:var(--blue)}.site-footer{display:flex;justify-content:space-between;align-items:center;padding-block:26px;font-size:10px;color:var(--muted);letter-spacing:.6px}.site-footer p{margin:0}@media(min-width:1600px){h1{font-size:120px}}@media(max-width:800px){.container{width:calc(100% - 48px)}.site-header{height:85px}nav{gap:22px;font-size:12px}.hero{padding-top:28px;padding-bottom:60px}.hero-meta{font-size:8px;letter-spacing:1px}h1{font-size:clamp(48px,10vw,80px);letter-spacing:-3.5px;margin:55px 0 35px}.hero-last{gap:12px}.asterisk{width:48px;height:48px;margin-right:0}.section-heading{margin-bottom:30px}h2{font-size:28px}h2>span{display:block;margin:10px 0 0;font-size:10px}.works,.about{padding-bottom:60px}.project-card{grid-template-columns:25px 1fr 32px;gap:10px;padding:26px 0}.project-card h3{font-size:18px}.project-link{width:32px;height:32px}.about-content{gap:30px;grid-template-columns:.6fr 1fr}.name{font-size:80px}.contact-links{gap:28px}.contact-links small{display:block;margin:10px 0 0}}@media(max-width:480px){.hero-meta>span:last-child{max-width:110px;text-align:right;line-height:1.7}.hero-bottom{display:block}.hero-bottom .text-link{width:max-content;margin-top:22px}.hero-bottom p{font-size:12px}.asterisk{width:30px;height:30px}.hero-last{gap:9px}h1{font-size:11vw;letter-spacing:-2.5px}.section-index{font-size:8px}.project-card p{font-size:11px}.project-card h3{font-size:17px}.project-details{gap:12px}.tag-list{gap:8px}.about-content{grid-template-columns:1fr;gap:35px}.name{font-size:70px}.name small{margin-top:10px}.about h3{font-size:23px}.contact-links{grid-template-columns:1fr;gap:24px}.contact{padding-block:40px}.contact-links a{font-size:22px}.contact-links small{display:inline;margin-left:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Original illustration: generous white space, restrained blue accents. */
.hero-layout { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:32px; padding-top:42px; }
.hero-copy h1 { font-size:clamp(60px,7vw,94px); line-height:1.04; letter-spacing:-5px; margin:0 0 30px; }
.hero-description { font-size:12px; color:var(--secondary); line-height:2.2; margin:0 0 25px; }
.hero-copy .text-link { width:max-content; }
.hero-art { margin:0; position:relative; padding:0 20px 0 0; }
.hero-art img { width:100%; height:490px; object-fit:contain; display:block; }
.hero-art figcaption { text-align:center; font-size:8px; letter-spacing:1.7px; color:var(--muted); margin-top:20px; }
.contact-inner { position:relative; }
.contact .section-heading { padding-right:125px; min-height:65px; }
.contact-mascot { position:absolute; right:12px; top:-83px; width:100px; height:140px; object-fit:contain; transform:rotate(9deg); pointer-events:none; }
@media (max-width:800px) {
  .hero-layout { gap:12px; padding-top:40px; }
  .hero-copy h1 { font-size:clamp(48px,8vw,64px); letter-spacing:-3px; }
  .hero-art { padding:0; }
  .hero-art img { height:360px; }
  .hero-art figcaption { font-size:7px; letter-spacing:.8px; line-height:1.8; }
}
@media (max-width:560px) {
  .hero-layout { grid-template-columns:1fr; gap:24px; }
  .hero-copy h1 { font-size:clamp(55px,14vw,76px); letter-spacing:-3px; }
  .hero-art { grid-row:2; width:85%; justify-self:center; }
  .hero-art img { height:340px; }
  .hero-art figcaption { margin-top:12px; }
  .hero { padding-bottom:44px; }
  .contact-mascot { width:75px; height:105px; top:-65px; right:0; }
  .contact .section-heading { padding-right:85px; }
  .contact .section-index { display:none; }
}

/* Motion stays subtle; content remains visible without JavaScript. */
@keyframes arrive {
  from { opacity:0; transform:translateY(18px); }
  to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy h1 { animation:arrive .85s ease-out both; }
  .hero-description { animation:arrive .85s .12s ease-out both; }
  .hero-copy .text-link { animation:arrive .85s .22s ease-out both; }
  .hero-art { animation:arrive 1.1s .18s ease-out both; }
}
nav a { position:relative; }
nav a::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
nav a:hover::after, nav a:focus-visible::after { transform:scaleX(1); }
.text-link span, .contact-links a>span:last-child, .project-link span { transition:transform .25s ease; }
.text-link:hover span { transform:translateY(4px); }
.contact-links a:hover>span:last-child, .project-link:hover span { transform:translate(2px,-2px); }
.project-content { transition:transform .25s ease; }
.project-card:has(.project-link:hover) .project-content { transform:translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; }
  html { scroll-behavior:auto; }
}

/* Project previews pair a visible example with the development notes. */
.project-card { grid-template-columns:32px minmax(240px,.95fr) minmax(0,1.15fr) 36px; gap:24px; align-items:center; padding-block:36px; }
.project-number { align-self:start; }
.work-preview { margin:0; min-width:0; overflow:hidden; background:#eeefec; border:1px solid var(--line); }
.work-preview figcaption { padding:10px 12px; font-size:8px; letter-spacing:.6px; color:var(--muted); line-height:1.7; border-top:1px solid var(--line); background:var(--bg); }
.salon-preview img { display:block; width:100%; height:auto; aspect-ratio:1229 / 712; object-fit:contain; object-position:top; }
.preview-window { padding:14px; font-size:10px; }
.preview-window-bar { display:flex; justify-content:space-between; gap:12px; font-size:8px; letter-spacing:1px; color:#73767b; padding-bottom:18px; }
.preview-dots { font-size:7px; letter-spacing:2px; color:#b8bcbf; }
.preview-message { display:flex; gap:10px; }
.preview-avatar { display:grid; place-items:center; width:26px; height:26px; flex:none; background:#dce3f6; color:#365edb; border-radius:50%; font-weight:800; }
.preview-message-body { min-width:0; flex:1; }
.preview-bot-name { display:flex; align-items:center; gap:6px; margin:3px 0 10px; font-weight:700; font-size:10px; flex-wrap:wrap; }
.preview-bot-name>span { font-size:7px; padding:2px 4px; background:#e0e5f1; color:#365edb; }
.preview-embed { border-left:2px solid #6a83cc; background:#fafaf8; padding:12px; }
.preview-embed strong { font-size:11px; }
.project-card .preview-embed p { font-size:10px; line-height:1.7; margin:7px 0; }
.preview-members { font-size:9px; line-height:1.9; color:#73767b; }
.preview-select { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid #e5e6e3; font-size:8px; }
.preview-select span { color:#73767b; text-align:right; }
.preview-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.preview-actions span { background:#e0e5f1; color:#365edb; padding:5px 9px; font-size:8px; border-radius:3px; }
.preview-actions span+span { background:#e3e5e1; color:#60646b; }
.project-card .project-content h3 { font-size:19px; }
@media (max-width:1000px) {
 .project-card { grid-template-columns:24px minmax(200px,.9fr) minmax(0,1.1fr) 32px; gap:16px; }
 .preview-window { padding:10px; }
 .preview-message { gap:6px; }
 .preview-avatar { display:none; }
}
@media (max-width:700px) {
 .project-card { grid-template-columns:24px minmax(0,1fr) 32px; gap:16px 10px; }
 .project-card .work-preview { grid-column:2 / -1; grid-row:1; }
 .project-card .project-content { grid-column:2; grid-row:2; }
 .project-card .project-link { grid-column:3; grid-row:2; }
 .preview-window { padding:18px; }
 .preview-avatar { display:grid; }
 .salon-preview { width:100%; max-width:400px; justify-self:start; }
}