/* Ukiyo-e in motion: screen, folding exhibition, living print. */
:root { --ex-ink:#070f17; --ex-paper:#dce4de; --ex-blue:#25d4ed; --ex-line:#9ebfd42e; }
.works-heading { position:relative; display:block; margin-bottom:25px; }
.works-heading h2 { font-size:clamp(135px,21vw,300px); font-weight:500; line-height:.83; letter-spacing:-.08em; }
.works-heading>p { position:absolute; right:0; bottom:25px; max-width:280px; font-size:20px; }
.works-heading .eyebrow { margin-bottom:40px; }
.works-heading .title-letter:last-child { font-size:.5em; vertical-align:top; color:var(--cyan); }
.works .work-filters { justify-content:flex-end; margin-bottom:25px; }
.work-transition { --stage-height:clamp(480px,54vw,800px); }
.project-lead { width:calc(100% + var(--gutter) * 2); margin-left:calc(var(--gutter) * -1); }
.project-lead .project-meta,.project-lead .project-context { margin-inline:var(--gutter); }
.project-grid { grid-template-columns:1.15fr .85fr; gap:90px 5vw; }
.project-grid .work-project:nth-child(3) { padding-top:120px; }
.project-grid[data-category]:not([data-category="all"]) .work-project { padding-top:0; }
.project-image { border-radius:0; aspect-ratio:1.3; }
@media(max-width:700px) {
.works-heading h2 { font-size:24vw; }
.works-heading>p { position:static; margin-top:20px; }
.works .work-filters { justify-content:flex-start; }
.work-transition { --stage-height:65vw; }
.project-grid { grid-template-columns:1fr; }
.project-grid .work-project:nth-child(3) { padding-top:0; }
}
/* Five folding screens. The selected craft opens into a small 3D stage. */
.service { width:100%; max-width:none; padding:100px 0 90px; background:#060d14; border:0; overflow:hidden; }
.service-intro { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px; gap:30px; }
.service-intro h2 { font-size:clamp(80px,11vw,160px)!important; line-height:.9; }
.service-intro .title-letter:last-child { color:var(--cyan); font-size:.55em; vertical-align:top; }
.service-intro h3 { font-size:clamp(25px,2.6vw,38px); margin-bottom:18px; }
.service-intro-copy>p { font-size:14px; color:#8fa9b9; }
.service-gallery-bar { padding-bottom:16px; margin-bottom:0; border:0; }
.service-gallery-bar>p { color:#d9e8ec; font-size:11px; }
.gallery-hint { margin-left:25px; font-size:11px; letter-spacing:0; color:#82a5b9; }
.service-grid { position:relative; display:grid; grid-template-columns:3.7fr 1fr 1fr 1fr 1fr; gap:0; height:clamp(620px,76svh,820px); isolation:isolate; overflow:hidden; border-block:1px solid #a9dbf633; transition:grid-template-columns 1s cubic-bezier(.2,.8,.2,1); }
.service-card { position:relative; display:block; min-width:0; width:100%; height:100%; max-width:none; margin:0; aspect-ratio:auto; border:0; border-right:1px solid #b4def32e; border-radius:0; background:#0a1925; overflow:hidden; isolation:auto; transform:none!important; opacity:1!important; }
.service-card:nth-of-type(even) { background:#0d202c; }
.service-card::before { z-index:0; background:radial-gradient(ellipse at 45% 40%,#14678550,transparent 68%); transition:opacity .8s; opacity:.4; }
.service-card.is-active::before { opacity:1; }
.service-card.depth-ready { background:linear-gradient(170deg,#0d2230,#06111c); }
.service-card:nth-of-type(even).depth-ready { background:linear-gradient(170deg,#143343,#071420); }
.service-card::after { z-index:3; background:linear-gradient(var(--light-angle,120deg),transparent 20%,#cefdff12 48%,transparent 75%); pointer-events:none; }
.service-select { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; z-index:4; text-align:left; color:inherit; }
.service-select:focus-visible { outline:2px solid var(--cyan); outline-offset:-5px; }
.service-card-top { display:flex; position:absolute; top:0; left:0; right:0; width:100%; padding:24px 24px; color:#8daebf; white-space:nowrap; font-size:10px; opacity:0; transform:translateY(-8px); transition:opacity .5s,transform .7s; }
.service-card-top>span { color:var(--cyan); font-size:28px; font-weight:300; }
.service-card.is-active .service-card-top { opacity:1; transform:none; }
.service-visual { position:absolute; top:42px; bottom:155px; margin:0; width:100%; height:auto; aspect-ratio:auto; pointer-events:none; }
.service-visual img { width:100%; height:100%; object-fit:cover; padding:0; object-position:center; opacity:.35; }
.service-card.is-active .service-visual img { object-fit:contain; opacity:1; }
.service-depth-canvas { z-index:1; opacity:1; }
.service-text { position:absolute; inset:auto 0 43px; padding:0 28px; width:100%; z-index:2; pointer-events:none; }
.service-text strong { position:absolute; left:50%; bottom:0; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg); transform-origin:center; font-size:27px; font-weight:400; white-space:nowrap; letter-spacing:-.04em; transition:color .5s; color:#bed5df; }
.service-text .service-jp,.service-text small { opacity:0; transform:translateY(15px); transition:opacity .35s,transform .7s; white-space:nowrap; }
.service-card.is-active .service-text strong { position:relative; left:0; bottom:0; writing-mode:horizontal-tb; transform:none; font-size:clamp(30px,3.6vw,54px); color:#eff7f4; }
.service-card.is-active .service-jp,.service-card.is-active .service-text small { opacity:1; transform:none; transition-delay:.22s; }
.service-text .service-jp { font-size:13px; color:#c4d3da; margin-top:12px; }
.service-card.is-active .service-text { padding-right:80px; }
.service-text small { color:#8fadb9; font-size:13px; margin-top:13px; }
.service-detail { position:absolute; right:25px; bottom:35px; z-index:6; display:grid; place-items:center; width:54px; height:54px; border:1px solid #82c1d58a; border-radius:50%; background:#0a273880; backdrop-filter:blur(8px); color:var(--cyan); font:300 28px/1 var(--latin); opacity:0; visibility:hidden; transform:scale(.65); transition:background .4s,color .4s,transform .6s,opacity .4s,visibility .4s; }
.service-card.is-active .service-detail { visibility:visible; opacity:1; transform:none; transition-delay:.15s; }
.service-detail:hover,.service-detail:focus-visible { color:#08151d; background:#c3f9ff; transform:rotate(45deg)!important; }
.service-outro { margin-top:32px; }
.service-outro .outline-button { border-radius:80px; min-width:270px; }
/* A building opens from ink into light. */
.kusabi-feature { position:relative; isolation:isolate; padding-top:0; padding-bottom:100px; overflow:hidden; background:#06111a; }
.kusabi-top { position:relative; z-index:2; display:block; min-height:770px; padding-top:190px; padding-bottom:60px; }
.kusabi-copy { width:43%; max-width:500px; }
.kusabi-copy .eyebrow { font-size:10px; max-width:270px; }
.kusabi-copy h2 { position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }
.kusabi-copy h3 { font-size:clamp(35px,4.1vw,62px); line-height:1.5; letter-spacing:.01em; }
.kusabi-copy .section-copy { font-size:14px; color:#b7ccd6; max-width:360px; line-height:2.1; }
.kusabi-copy .outline-button { border-radius:50px; margin-top:30px; }
.kusabi-identity { position:absolute; top:40px; left:0; width:340px; padding:0; background:none; }
.kusabi-logo { min-height:120px; height:120px; }
.kusabi-model { height:105px; }
.kusabi-logo-caption,.kusabi-identity-note,.kusabi-identity::after { display:none!important; }
.architecture-art { position:absolute; top:0; left:0; right:0; width:100%; height:800px; max-width:none; margin:0; z-index:0; aspect-ratio:auto; }
.architecture-art img { object-position:65% center; }
.architecture-art::after { z-index:2; background:linear-gradient(90deg,#06111afb 0%,#06111acc 25%,transparent 62%),linear-gradient(0deg,#06111a,transparent 35%); }
.architecture-art figcaption { display:none; }
.kusabi-film { position:relative; z-index:3; margin:0 var(--gutter) 0 auto; width:66%; max-width:1080px; }
.kusabi-film-button { aspect-ratio:2.3; border-radius:3px 3px 140px 3px; border:0; }
.kusabi-film-caption { padding-right:80px; }
/* People and process, printed on a sheet of pale paper. */
.about { width:100%; max-width:none; padding:110px var(--gutter) 80px; background:#dce3df; color:#0a1d29; gap:65px 8%; grid-template-columns:.9fr 1.1fr; }
.about .eyebrow,.about-location { color:#2e566a; }
.about .latin-title { font-size:clamp(80px,12vw,170px); color:#071d2d; }
.about-copy h3 { font-size:clamp(28px,3vw,43px); line-height:1.6; }
.about-copy p { color:#345060; font-size:15px; }
.about .outline-button { color:#0c3348; border-color:#467188; border-radius:50px; }
.about .outline-button:hover { color:#06151c; }
.atelier-art { margin:0 calc(var(--gutter) * -1); width:calc(100% + var(--gutter) * 2); aspect-ratio:2.25; border:0; border-radius:0; }
.atelier-art figcaption { color:#e9f5f6; }
.about-disciplines { color:#34596a; border-color:#55748855; margin-top:-35px; font-size:clamp(15px,2.6vw,35px); }
.news { width:100%; max-width:none; display:grid; grid-template-columns:.7fr 1.3fr; column-gap:8%; padding:110px var(--gutter); background:#070f17; border:0; }
.news .section-intro { display:block; margin:0; }
.news .latin-title { font-size:clamp(75px,9vw,135px); }
.news-label { margin-top:28px; }
.news-row { grid-template-columns:100px 1fr 28px; gap:8px 18px; min-height:137px; padding:20px 0; }
.news-category { justify-self:start; font-size:9px; min-width:60px; }
.news-headline { grid-column:1/3; line-height:1.7; font-size:15px; }
.news-plus { grid-row:1/3; grid-column:3; }
.news-more { grid-column:2; justify-self:start; margin-top:30px; border-radius:50px; }
/* A live, responsive wave closes the journey. */
.contact { min-height:860px; padding:85px 0 90px; background:#061723; }
.contact-art { opacity:.9; }
.contact-art::after { z-index:2; background:linear-gradient(90deg,#03101acf,transparent 90%),linear-gradient(0deg,#03101a66,transparent 70%); }
.contact h2 { font-size:clamp(140px,21vw,310px); font-weight:500; line-height:.78; letter-spacing:-.08em; margin-top:60px; }
.contact h2>span { color:transparent; -webkit-text-stroke:1.5px #b8f4ff; }
.contact-top { margin-bottom:0; }
.contact-bottom { margin-top:70px; }
.contact-bottom h3 { font-size:24px; color:#f2f5ef; text-shadow:0 2px 18px #03101a; }
.contact-bottom p { color:#d2e4eb; text-shadow:0 2px 8px #03101a,0 0 22px #03101a; }
.contact .solid-button { min-width:170px; width:170px; height:170px; min-height:170px; padding:35px; border-radius:50%; font-size:14px; flex-direction:column; align-items:flex-start; justify-content:center; gap:13px; box-shadow:0 0 60px #22c4f81a; }
.contact .action-icon { font-size:32px; }
.footer { position:relative; overflow:hidden; padding:85px 0 24px; min-height:330px; }
.footer-inner { position:relative; z-index:1; }
.footer-signature { position:absolute; inset:-60px auto auto -15px; font:600 400px/1 var(--latin); letter-spacing:-.1em; color:#1e52662d; pointer-events:none; }
.footer-main .logo { visibility:hidden; }
.footer-main { justify-content:flex-end; }
.footer-bottom { margin-top:90px; }
/* Shared live-print surfaces and pointer optics. */
.ink-surface { isolation:isolate; }
.ink-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.ink-surface.ink-ready>img { opacity:0!important; }
.ink-surface figcaption,.ink-surface .project-type,.ink-surface .project-open { z-index:3; }
.ink-motion { position:absolute; z-index:4; right:20px; bottom:18px; width:34px; height:34px; padding:0; border-radius:50%; border:1px solid #bbecff50; background:#04121abc; color:#c6effb; cursor:pointer; font-size:12px; backdrop-filter:blur(8px); }
.atelier-art figcaption { bottom:24px; right:70px; }
.contact-art .ink-motion { display:none; }
.contact .ink-motion { top:45px; bottom:auto; right:var(--gutter); }
.architecture-art .ink-motion { top:25px; bottom:auto; }
.cursor-lens { position:fixed; top:0; left:0; width:46px; height:46px; border:1px solid #a8efff90; border-radius:50%; z-index:110; pointer-events:none; display:grid; place-items:center; color:#bfefff; font:500 8px/1 var(--ui); letter-spacing:.08em; opacity:0; transform:translate3d(-100px,-100px,0); transition:width .35s,height .35s,background .3s,border-color .3s,opacity .2s; }
.cursor-lens.is-visible { opacity:1; }
.cursor-lens.is-over { width:72px; height:72px; background:#07203260; border-color:#d2f9ff; backdrop-filter:blur(2px); }
.cursor-lens::after { content:''; position:absolute; inset:-5px; border:1px dashed #3cf0ff35; border-radius:50%; transform:rotate(var(--cursor-turn,0deg)); }
.dialog-ink { margin:0; aspect-ratio:1.8; background:#081824; position:relative; overflow:hidden; }
.dialog-ink>.dialog-image { width:100%; height:100%; padding:20px; object-fit:contain; }
@media(max-width:1000px) and (min-width:701px) {
 .service-grid { height:630px; }
 .service-text { padding-inline:18px; }
 .service-card.is-active .service-text strong { font-size:32px; }
 .service-card.is-active .service-text small { font-size:11px; }
 .service-detail { width:42px; height:42px; right:18px; bottom:30px; }
 .gallery-hint { display:none; }
 .kusabi-copy { width:47%; }
 .kusabi-copy h3 { font-size:40px; }
}
@media(max-width:700px) {
 .service { padding:70px 0 60px; }
 .service-intro { display:block; margin-bottom:35px; }
 .service-intro h2 { font-size:18vw!important; }
 .service-intro-copy { margin-top:28px; }
 .service-intro h3 { font-size:25px; margin-bottom:12px; }
 .service-gallery-bar { margin-bottom:12px; align-items:center; }
 .service-gallery-bar>p { font-size:9px; }
 .gallery-hint { display:none; }
 .service-grid { display:flex; width:100%; height:640px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding-inline:var(--gutter); gap:12px; border:0; scrollbar-width:thin; scrollbar-color:#26718b #09131b; }
 .service-card { flex:0 0 88%; flex-basis:calc(100vw - 60px); flex-shrink:0; scroll-snap-align:center; height:620px; border:1px solid #a7dbed38; }
 .service-card-top { opacity:1; transform:none; font-size:9px; padding:20px; }
 .service-visual { top:45px; bottom:168px; }
 .service-visual img { object-fit:contain; opacity:1; }
 .service-text { padding:0 22px; bottom:42px; }
 .service-text strong,.service-card.is-active .service-text strong { position:relative; left:0; bottom:0; writing-mode:horizontal-tb; transform:none; color:#eff7f4; font-size:30px; }
 .service-text .service-jp,.service-text small { opacity:1; transform:none; font-size:12px; }
 .service-detail { opacity:1; visibility:visible; transform:none; width:45px; height:45px; right:18px; bottom:25px; }
 .service-text small { max-width:240px; white-space:normal; padding-right:25px; }
 .service-outro { margin-top:28px; }
 .service-outro .outline-button { width:auto; min-width:270px; }
 .kusabi-feature { padding-bottom:65px; }
 .kusabi-top { min-height:720px; padding-top:185px; padding-bottom:50px; }
 .kusabi-copy { width:100%; }
 .kusabi-copy h3 { font-size:43px; }
 .kusabi-copy .section-copy { max-width:265px; font-size:14px; }
 .kusabi-identity { top:35px; width:280px; }
 .kusabi-logo { height:120px; }
 .kusabi-model { height:100px; }
 .architecture-art { height:770px; }
 .architecture-art>img { object-position:70% center; }
 .architecture-art::after { background:linear-gradient(90deg,#06111af5,#06111a85),linear-gradient(0deg,#06111a,transparent 60%); }
 .kusabi-film { width:calc(100% - 48px); margin-inline:24px; }
 .kusabi-film-button { aspect-ratio:1.35; border-radius:0 0 60px 0; }
 .kusabi-film-caption { padding:45px 20px 18px; font-size:9px; }
 .about { padding-block:70px 50px; grid-template-columns:1fr; gap:35px; }
 .about .latin-title { font-size:23vw; }
 .about-copy h3 { font-size:29px; }
 .about-copy p { font-size:14px; }
 .atelier-art { aspect-ratio:1.6; margin:0 -24px; width:calc(100% + 48px); }
 .about-disciplines { margin-top:0; font-size:12px; gap:10px; }
 .news { display:block; padding:75px 24px; }
 .news .section-intro { display:flex; margin-bottom:40px; align-items:end; }
 .news .latin-title { font-size:78px; }
 .news-more { margin-top:28px; }
 .contact { min-height:870px; padding-block:70px; }
 .contact h2 { font-size:28vw; margin-top:90px; line-height:.86; }
 .contact-bottom { display:block; margin-top:45px; }
 .contact-bottom h3 { font-size:20px; }
 .contact-bottom p { font-size:13px; }
 .contact .solid-button { margin-top:30px; width:132px; min-width:132px; height:132px; min-height:132px; padding:22px; font-size:12px; }
 .contact .ink-motion { top:21px; }
 .contact-art::after { background:linear-gradient(90deg,#03101aeb 0%,#03101a88 66%,#03101a33),linear-gradient(0deg,#03101a66,transparent); }
 .footer { min-height:320px; padding-top:50px; }
 .footer-signature { font-size:260px; top:-15px; }
 .footer-main .logo { display:none; }
 .footer-main nav { width:100%; }
 .footer-main .back-top { order:3; margin-left:0; }
 .footer-bottom { margin-top:45px; }
 .cursor-lens { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .service-grid,.service-text *,.service-detail,.service-card-top { transition:none!important; }
 .cursor-lens { display:none!important; }
}

.work-project { position:relative; }
.work-project>.ink-motion { top:20px; bottom:auto; right:20px; z-index:4; }